# Input

Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.

## Tag

`Input`

## Props

| 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                              |

## Live Examples

### Basic Input

<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-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  const name = $('');
  
  return Input({
    label: 'Full Name',
    placeholder: 'Enter your name',
    value: name,
    oninput: (e) => name(e.target.value)
  });
};
Mount(BasicDemo, '#demo-basic');
```

### With Icon

<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-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const IconDemo = () => {
  const email = $('');
  
  return Input({
    label: 'Email',
    type: 'email',
    icon: Icons.iconMail,
    value: email,
    oninput: (e) => email(e.target.value)
  });
};
Mount(IconDemo, '#demo-icon');
```

### Password with Toggle

<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-password" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const PasswordDemo = () => {
  const password = $('');
  
  return Input({
    label: 'Password',
    type: 'password',
    value: password,
    oninput: (e) => password(e.target.value)
  });
};
Mount(PasswordDemo, '#demo-password');
```

### 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 username = $('');
  
  return Input({
    label: 'Username',
    tip: 'Must be at least 3 characters',
    value: username,
    oninput: (e) => username(e.target.value)
  });
};
Mount(TooltipDemo, '#demo-tooltip');
```

### Error State

<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-error" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const ErrorDemo = () => {
  const email = $('');
  const isValid = $(true);
  
  const validate = (value) => {
    const valid = value.includes('@') && value.includes('.');
    isValid(valid);
    email(value);
  };
  
  return Input({
    label: 'Email',
    type: 'email',
    value: email,
    error: () => !isValid() && email() ? 'Invalid email address' : '',
    oninput: (e) => validate(e.target.value)
  });
};
Mount(ErrorDemo, '#demo-error');
```

### Disabled State

<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-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const DisabledDemo = () => {
  return Input({
    label: 'Username',
    value: 'john.doe',
    disabled: true
  });
};
Mount(DisabledDemo, '#demo-disabled');
```

### All Variants

<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-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  const text = $('');
  const number = $(0);
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Input({
      label: 'Text Input',
      placeholder: 'Type something...',
      value: text,
      oninput: (e) => text(e.target.value)
    }),
    Input({
      label: 'Number Input',
      type: 'number',
      value: number,
      oninput: (e) => number(parseInt(e.target.value) || 0)
    }),
    Input({
      label: 'Date Input',
      type: 'date',
      value: $('2024-01-01')
    })
  ]);
};
Mount(VariantsDemo, '#demo-variants');
```

<script>
  (function() {
    const initInputExamples = () => {
      
      // 1. Basic Input
      const basicTarget = document.querySelector('#demo-basic');
      if (basicTarget && !basicTarget.hasChildNodes()) {
        const BasicDemo = () => {
          const name = $('');
          return Input({
            label: 'Full Name',
            placeholder: 'Enter your name',
            value: name,
            oninput: (e) => name(e.target.value)
          });
        };
        Mount(BasicDemo, basicTarget);
      }

      // 2. With Icon
      const iconTarget = document.querySelector('#demo-icon');
      if (iconTarget && !iconTarget.hasChildNodes()) {
        const IconDemo = () => {
          const email = $('');
          return Input({
            label: 'Email',
            type: 'email',
            icon: Icons.iconMail,
            value: email,
            oninput: (e) => email(e.target.value)
          });
        };
        Mount(IconDemo, iconTarget);
      }

      // 3. Password with Toggle
      const passwordTarget = document.querySelector('#demo-password');
      if (passwordTarget && !passwordTarget.hasChildNodes()) {
        const PasswordDemo = () => {
          const password = $('');
          return Input({
            label: 'Password',
            type: 'password',
            value: password,
            oninput: (e) => password(e.target.value)
          });
        };
        Mount(PasswordDemo, passwordTarget);
      }

      // 4. With Tooltip
      const tooltipTarget = document.querySelector('#demo-tooltip');
      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
        const TooltipDemo = () => {
          const username = $('');
          return Input({
            label: 'Username',
            tip: 'Must be at least 3 characters',
            value: username,
            oninput: (e) => username(e.target.value)
          });
        };
        Mount(TooltipDemo, tooltipTarget);
      }

      // 5. Error State
      const errorTarget = document.querySelector('#demo-error');
      if (errorTarget && !errorTarget.hasChildNodes()) {
        const ErrorDemo = () => {
          const email = $('');
          const isValid = $(true);
          
          const validate = (value) => {
            const valid = value.includes('@') && value.includes('.');
            isValid(valid);
            email(value);
          };
          
          return Input({
            label: 'Email',
            type: 'email',
            value: email,
            error: () => !isValid() && email() ? 'Invalid email address' : '',
            oninput: (e) => validate(e.target.value)
          });
        };
        Mount(ErrorDemo, errorTarget);
      }

      // 6. Disabled State
      const disabledTarget = document.querySelector('#demo-disabled');
      if (disabledTarget && !disabledTarget.hasChildNodes()) {
        const DisabledDemo = () => {
          return Input({
            label: 'Username',
            value: 'john.doe',
            disabled: true
          });
        };
        Mount(DisabledDemo, disabledTarget);
      }

      // 7. All Variants
      const variantsTarget = document.querySelector('#demo-variants');
      if (variantsTarget && !variantsTarget.hasChildNodes()) {
        const VariantsDemo = () => {
          const text = $('');
          const number = $(0);
          
          return Div({ class: 'flex flex-col gap-4' }, [
            Input({
              label: 'Text Input',
              placeholder: 'Type something...',
              value: text,
              oninput: (e) => text(e.target.value)
            }),
            Input({
              label: 'Number Input',
              type: 'number',
              value: number,
              oninput: (e) => number(parseInt(e.target.value) || 0)
            }),
            Input({
              label: 'Date Input',
              type: 'date',
              value: $('2024-01-01')
            })
          ]);
        };
        Mount(VariantsDemo, variantsTarget);
      }
    };

    initInputExamples();
    
    if (window.$docsify) {
      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
        hook.doneEach(initInputExamples);
      });
    }
  })();
</script>