Before repair nav components

docs/demo_forms.md

@@ -0,0 +1,181 @@
+# 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,
+    placeholder: 'Select date',
+    onChange: (val) => console.log('Date:', val)
+  }),
+  '#demo-datepicker'
+);
+```
+
+## Input
+<div id="demo-input"></div>
+
+```js
+const text = $('');
+
+mount(
+  Input({
+    type: 'text',
+    label: 'Username',
+    float: true,
+    value: text,
+    left: Icon('icon-[lucide--user]')
+  }),
+  '#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, oninput: (e) => rangeValue(+e.target.value) }),
+    span({}, () => `Value: ${rangeValue()}`)
+  ]),
+  '#demo-range'
+);
+```
+
+## Rating
+<div id="demo-rating"></div>
+
+```js
+const stars = $('');
+
+mount(
+  Rating({
+    value: stars,
+    count: 5,
+    mask: 'mask-star',
+    onchange: (v) => console.log('Rated:', v)
+  }),
+  '#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 swapOn = $(false);
+
+mount(
+  Swap({
+    value: swapOn,
+    on: span({ class: 'text-success' }, 'ON'),
+    off: span({ class: 'text-error' }, 'OFF'),
+  }),
+  '#demo-swap'
+);
+```