Include label in Input

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');
-```
+```