Include label in Input

2026-04-06 22:22:11 +02:00
parent ebc4dc2d3b
commit c08f001a80
46 changed files with 219 additions and 17247 deletions
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -1,6 +1,6 @@
 # Checkbox

-Toggle checkbox component with label, tooltip support, and reactive state management.
+Toggle checkbox component with label support and reactive state management.

 ## Tag

@@ -12,7 +12,6 @@ Toggle checkbox component with label, tooltip support, and reactive state manage
 | :--- | :--- | :--- | :--- |
 | `label` | `string` | `-` | Label text for the checkbox |
 | `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
-| `tooltip` | `string` | `-` | Tooltip text on hover |
 | `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
 | `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
 | `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
@@ -93,29 +92,6 @@ const ToggleDemo = () => {
 Mount(ToggleDemo, '#demo-toggle');
 ```

-### With Tooltip
-
-<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
-  <div class="card-body">
-    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-  </div>
-</div>
-
-```javascript
-const TooltipDemo = () => {
-  const darkMode = $(false);
-  
-  return Checkbox({
-    label: 'Dark mode',
-    value: darkMode,
-    tooltip: 'Enable dark theme preference',
-    onclick: () => darkMode(!darkMode())
-  });
-};
-Mount(TooltipDemo, '#demo-tooltip');
-```
-
 ### Disabled State

 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
@@ -196,6 +172,32 @@ const MultipleDemo = () => {
 Mount(MultipleDemo, '#demo-multiple');
 ```

+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const accepted = $(false);
+  
+  return Tooltip({ 
+    tip: "You must accept the terms to continue" 
+  }, 
+    Checkbox({
+      label: 'I accept the terms',
+      value: accepted,
+      onclick: () => accepted(!accepted())
+    })
+  );
+};
+Mount(TooltipDemo, '#demo-tooltip');
+```
+
 ### All Variants

 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
@@ -287,4 +289,4 @@ const FormDemo = () => {
  ]);
 };
 Mount(FormDemo, '#demo-form');
-```
+```
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -1,7 +1,6 @@
 # Input

-Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.
-
+Form input component with icons, password toggle, and validation. Use `Label()` and `Tooltip()` as wrappers for label and tooltip functionality.

 ## Tag

@@ -11,16 +10,24 @@ Form input component with floating label, icons, password toggle, tooltip, and e

 | Prop         | Type                         | Default    | Description                                      |
 | :----------- | :--------------------------- | :--------- | :----------------------------------------------- |
-| `label`      | `string`                     | `-`        | Label text (floating style)                      |
 | `type`       | `string`                     | `'text'`   | Input type (text, password, email, number, date) |
 | `value`      | `string \| Signal<string>`   | `''`       | Input value                                      |
 | `placeholder`| `string`                     | `' '`      | Placeholder text                                 |
 | `icon`       | `string \| VNode \| Signal`  | `-`        | Icon displayed inside input                      |
-| `tip`        | `string`                     | `-`        | Help tooltip text                                |
-| `error`      | `string \| Signal<string>`   | `-`        | Error message to display                         |
 | `disabled`   | `boolean \| Signal<boolean>` | `false`    | Disabled state                                   |
 | `class`      | `string`                     | `''`       | Additional CSS classes (DaisyUI + Tailwind)      |
 | `oninput`    | `function`                   | `-`        | Input event handler                              |
+| `validate`   | `function`                   | `-`        | Validation function returning error message      |
+
+## Styling
+
+Input supports all **daisyUI Input classes**:
+
+| Category | Keywords | Description |
+| :--- | :--- | :--- |
+| Style | `input-bordered`, `input-ghost` | Input style variants |
+| Color | `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
+| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input size variants |

 ## Live Examples

@@ -91,7 +98,36 @@ const PasswordDemo = () => {
 Mount(PasswordDemo, '#demo-password');
 ```

-### With Tooltip
+### With Floating Label
+
+Wrap the input with `Label()` component:
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
+  </div>
+</div>
+
+```javascript
+const LabelDemo = () => {
+  const email = $('');
+  
+  return Input({
+      type: 'email',
+      label: "Email",
+      floating: true,
+      value: email,
+      placeholder: ' ',
+      oninput: (e) => email(e.target.value)
+    });
+};
+Mount(LabelDemo, '#demo-label');
+```
+
+### With Tooltip & label
+
+Wrap the input with `Tooltip()` component:

 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
@@ -104,11 +140,14 @@ Mount(PasswordDemo, '#demo-password');
 const TooltipDemo = () => {
  const username = $('');
  
-  return Input({
-    tip: 'Must be at least 3 characters',
-    value: username,
-    oninput: (e) => username(e.target.value)
-  });
+  return Tooltip({ tip: 'Must be at least 3 characters' },
+    Input({
+      value: username,
+      label: "Username",
+      placeholder: 'Username',
+      oninput: (e) => username(e.target.value)
+    })
+  );
 };
 Mount(TooltipDemo, '#demo-tooltip');
 ```
@@ -126,11 +165,12 @@ Mount(TooltipDemo, '#demo-tooltip');
 const ErrorDemo = () => {
  const email = $('');
  
-  return Div({ class: 'w-full max-w-md' }, [
+  return Div({ class: 'w-full' }, [
    Input({
      type: 'email',
      value: email,
      placeholder: 'Enter your email',
+      label: 'Email',
      icon: 'icon-[lucide--mail]',
      validate: (value) => {
        if (!value) return '';
@@ -193,17 +233,15 @@ const VariantsDemo = () => {
      type: 'date',
      value: $('2024-01-01')
    }),
-    Input({class: 'input-primary',value:"Primary"}),
-    Input({class: 'input-secondary', value:"Secondary"}),
-    Input({class: 'input-accent', value:"Accent"}),
-    Input({class: 'input-ghost', value:"Ghost"}),
-    Input({class: 'input-link', value:"Link"}),
-    Input({class: 'input-info', value:"Info"}),
-    Input({class: 'input-success', value:"Success"}),
-    Input({class: 'input-warning', value:"Warning"}),
-    Input({class: 'input-error', value:"Error"}),
- 
+    Input({class: 'input-primary', value: "Primary"}),
+    Input({class: 'input-secondary', value: "Secondary"}),
+    Input({class: 'input-accent', value: "Accent"}),
+    Input({class: 'input-ghost', value: "Ghost"}),
+    Input({class: 'input-info', value: "Info"}),
+    Input({class: 'input-success', value: "Success"}),
+    Input({class: 'input-warning', value: "Warning"}),
+    Input({class: 'input-error', value: "Error"}),
  ]);
 };
 Mount(VariantsDemo, '#demo-variants');
-```
+```