sigpro-ui/docs/demo_forms.md

# Forms

## Autocomplete
<div id="demo-autocomplete"></div>

```js
const selected = $('');
const items = ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato'];

mount(
  Autocomplete({
    items,
    value: selected,
    placeholder: 'Search...',
    onselect: (val) => console.log('Selected:', val)
  }),
  '#demo-autocomplete'
);
```

## Button
<div id="demo-button"></div>

```js
const count = $(0);

mount(
  Button({
    class: 'btn-primary',
    onclick: () => count(count() + 1)
  }, () => `Clicked ${count()} times`),
  '#demo-button'
);
```

## Checkbox
<div id="demo-checkbox"></div>

```js
const checked = $(false);

mount(
  div({ class: 'flex items-center gap-2' }, [
    Checkbox({
      checked,
      onchange: (e) => checked(e.target.checked),
    }),
    span({}, 'Accept terms')
  ]),
  '#demo-checkbox'
);
```

## Colorpicker
<div id="demo-colorpicker"></div>

```js
const color = $('');

mount(
  Colorpicker({
    value: color,
    label: 'Pick a color',
    onchange: (c) => console.log('Color:', c)
  }),
  '#demo-colorpicker'
);
```

## Datepicker
<div id="demo-datepicker"></div>

```js
const date = $('');

mount(
  Datepicker({
    value: date,
    range: true,
    hour: true, 
    placeholder: 'Select date',
    onChange: (val) => console.log('Date:', val)
  }),
  '#demo-datepicker'
);
```

## Input
<div id="demo-input"></div>

```js
const text = $('');
const pass = $('');

mount([
  Input({
    label: 'Username',
    float: true,
    value: text,
    left: Icon('icon-[lucide--user]')
  }),
  Input({
    type: 'password',
    label: 'Password',
    float: true,
    value: pass,
    left: Icon('icon-[lucide--lock]')
  })],
  '#demo-input'
);
```

## Radio
<div id="demo-radio"></div>

```js
const option = $('');

mount(
  div({ class: 'flex gap-2' }, [
    Radio({ name: 'option', value: 'a', checked: () => option() === 'a', onchange: () => option('a') }),
    Radio({ name: 'option', value: 'b', checked: () => option() === 'b', onchange: () => option('b') }),
  ]),
  '#demo-radio'
);
```

## Range
<div id="demo-range"></div>

```js
const rangeValue = $(50);

mount(
  div({ class: 'flex flex-col gap-2' }, [
    Range({ min: 0, max: 100, value: rangeValue }),
    span({}, () => `Value: ${rangeValue()}`)
  ]),
  '#demo-range'
);
```

## Rating
<div id="demo-rating"></div>

```js
const stars = $(0)

mount(
  Rating({}, [
    RatingItems({ count: 5, value: stars, name: 'rat1', class:"mask-star" }),
  ]),
  '#demo-rating'
)
```

## Select
<div id="demo-select"></div>

```js
const choice = $('');

mount(
  Select({
    items: ['Option 1', 'Option 2', 'Option 3'],
    placeholder: 'Choose...',
    value: choice,
  }),
  '#demo-select'
);
```

## Swap
<div id="demo-swap"></div>

```js
const isActive = $(false)

mount(
  Swap({ class: 'text-base' }, [
    SwapToggle({ value: isActive, class: 'swap-rotate' }),
    SwapOn({}, span({ class: 'icon-[lucide--moon]' })),
    SwapOff({}, span({ class: 'icon-[lucide--sun]' }))
  ]),
  '#demo-swap'
)
```