Rebuild all components

docs/components/select.md

@@ -1,22 +1,27 @@
 # Select
 
-Dropdown select component with full DaisyUI styling, reactive items, and form integration.
+Dropdown select component with full DaisyUI styling and reactive options.
 
 ## Tag
 
-`Select`
+`Select`, `Options`
 
-## Props
+## Select Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `label` | `string` | `-` | Label text above select |
-| `items` | `Array<{value: string, label: string}> \| Signal<Array>` | `[]` | Array of items with value and label |
 | `value` | `string \| Signal<string>` | `''` | Selected value |
 | `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
 | `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
 | `onchange` | `function` | `-` | Change event handler |
 
+## Options Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `Array<string \| {value, label}> \| Signal<Array>` | `[]` | Array of items (strings or objects) |
+| `placeholder` | `string` | `-` | Optional placeholder option (disabled, selected) |
+
 ## Styling
 
 Select supports all **daisyUI Select classes**:
@@ -44,17 +49,23 @@ Select supports all **daisyUI Select classes**:
 const BasicDemo = () => {
   const selected = $('apple');
   
-  return Select({
-    label: 'Choose a fruit',
-    items: [
-      { value: 'apple', label: '🍎 Apple' },
-      { value: 'banana', label: '🍌 Banana' },
-      { value: 'orange', label: '🍊 Orange' },
-      { value: 'grape', label: '🍇 Grape' }
-    ],
-    value: selected,
-    onchange: (e) => selected(e.target.value)
-  });
+  return Div({ class: 'form-control w-full max-w-xs' }, [
+    Label({ class: 'label' }, Span({ class: 'label-text' }, 'Choose a fruit')),
+    Select({
+      class: 'select select-bordered w-full',
+      value: selected,
+      onchange: (e) => selected(e.target.value)
+    }, [
+      Options({
+        items: [
+          { value: 'apple', label: '🍎 Apple' },
+          { value: 'banana', label: '🍌 Banana' },
+          { value: 'orange', label: '🍊 Orange' },
+          { value: 'grape', label: '🍇 Grape' }
+        ]
+      })
+    ])
+  ]);
 };
 Mount(BasicDemo, '#demo-basic');
 ```
@@ -72,16 +83,22 @@ Mount(BasicDemo, '#demo-basic');
 const ReactiveDemo = () => {
   const selected = $('small');
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
-    Select({
-      label: 'Select size',
-      items: [
-        { value: 'small', label: 'Small' },
-        { value: 'medium', label: 'Medium' },
-        { value: 'large', label: 'Large' }
-      ],
-      value: selected,
-      onchange: (e) => selected(e.target.value)
-    }),
+    Div({ class: 'form-control w-full max-w-xs' }, [
+      Label({ class: 'label' }, Span({ class: 'label-text' }, 'Select size')),
+      Select({
+        class: 'select select-bordered w-full',
+        value: selected,
+        onchange: (e) => selected(e.target.value)
+      }, [
+        Options({
+          items: [
+            { value: 'small', label: 'Small' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'large', label: 'Large' }
+          ]
+        })
+      ])
+    ]),
     Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
   ]);
 };
@@ -99,16 +116,22 @@ Mount(ReactiveDemo, '#demo-reactive');
 
 ```javascript
 const DisabledDemo = () => {
-  return Select({
-    label: 'Country (disabled)',
-    items: [
-      { value: 'mx', label: 'Mexico' },
-      { value: 'us', label: 'United States' },
-      { value: 'ca', label: 'Canada' }
-    ],
-    value: 'mx',
-    disabled: true
-  });
+  return Div({ class: 'form-control w-full max-w-xs' }, [
+    Label({ class: 'label' }, Span({ class: 'label-text' }, 'Country (disabled)')),
+    Select({
+      class: 'select select-bordered w-full',
+      value: 'mx',
+      disabled: true
+    }, [
+      Options({
+        items: [
+          { value: 'mx', label: 'Mexico' },
+          { value: 'us', label: 'United States' },
+          { value: 'ca', label: 'Canada' }
+        ]
+      })
+    ])
+  ]);
 };
 Mount(DisabledDemo, '#demo-disabled');
 ```
@@ -139,24 +162,36 @@ const DynamicDemo = () => {
   };
   
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
-    Select({
-      label: 'Category',
-      items: [
-        { value: 'fruits', label: 'Fruits' },
-        { value: 'vegetables', label: 'Vegetables' }
-      ],
-      value: category,
-      onchange: (e) => {
-        category(e.target.value);
-        selectedItem('');
-      }
-    }),
-    Select({
-      label: 'Item',
-      items: () => items[category()] || [],
-      value: selectedItem,
-      onchange: (e) => selectedItem(e.target.value)
-    }),
+    Div({ class: 'form-control w-full max-w-xs' }, [
+      Label({ class: 'label' }, Span({ class: 'label-text' }, 'Category')),
+      Select({
+        class: 'select select-bordered w-full',
+        value: category,
+        onchange: (e) => {
+          category(e.target.value);
+          selectedItem('');
+        }
+      }, [
+        Options({
+          items: [
+            { value: 'fruits', label: 'Fruits' },
+            { value: 'vegetables', label: 'Vegetables' }
+          ]
+        })
+      ])
+    ]),
+    Div({ class: 'form-control w-full max-w-xs' }, [
+      Label({ class: 'label' }, Span({ class: 'label-text' }, 'Item')),
+      Select({
+        class: 'select select-bordered w-full',
+        value: selectedItem,
+        onchange: (e) => selectedItem(e.target.value)
+      }, [
+        Options({
+          items: () => items[category()] || []
+        })
+      ])
+    ]),
     () => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
   ]);
 };
@@ -179,38 +214,53 @@ const VariantsDemo = () => {
   const ghost = $('');
   
   return Div({ class: 'flex flex-col gap-4' }, [
-    Select({
-      label: 'Primary Select',
-      class: 'select-primary',
-      items: [
-        { value: 'option1', label: 'Option 1' },
-        { value: 'option2', label: 'Option 2' },
-        { value: 'option3', label: 'Option 3' }
-      ],
-      value: primary,
-      onchange: (e) => primary(e.target.value)
-    }),
-    Select({
-      label: 'Secondary Select',
-      class: 'select-secondary',
-      items: [
-        { value: 'option1', label: 'Option 1' },
-        { value: 'option2', label: 'Option 2' }
-      ],
-      value: secondary,
-      onchange: (e) => secondary(e.target.value)
-    }),
-    Select({
-      label: 'Ghost Select',
-      class: 'select-ghost',
-      items: [
-        { value: '', label: 'Select an option' },
-        { value: 'opt1', label: 'Option 1' },
-        { value: 'opt2', label: 'Option 2' }
-      ],
-      value: ghost,
-      onchange: (e) => ghost(e.target.value)
-    })
+    Div({ class: 'form-control w-full max-w-xs' }, [
+      Label({ class: 'label' }, Span({ class: 'label-text' }, 'Primary Select')),
+      Select({
+        class: 'select select-primary w-full',
+        value: primary,
+        onchange: (e) => primary(e.target.value)
+      }, [
+        Options({
+          items: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+            { value: 'option3', label: 'Option 3' }
+          ]
+        })
+      ])
+    ]),
+    Div({ class: 'form-control w-full max-w-xs' }, [
+      Label({ class: 'label' }, Span({ class: 'label-text' }, 'Secondary Select')),
+      Select({
+        class: 'select select-secondary w-full',
+        value: secondary,
+        onchange: (e) => secondary(e.target.value)
+      }, [
+        Options({
+          items: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' }
+          ]
+        })
+      ])
+    ]),
+    Div({ class: 'form-control w-full max-w-xs' }, [
+      Label({ class: 'label' }, Span({ class: 'label-text' }, 'Ghost Select')),
+      Select({
+        class: 'select select-ghost w-full',
+        value: ghost,
+        onchange: (e) => ghost(e.target.value)
+      }, [
+        Options({
+          placeholder: 'Select an option',
+          items: [
+            { value: 'opt1', label: 'Option 1' },
+            { value: 'opt2', label: 'Option 2' }
+          ]
+        })
+      ])
+    ])
   ]);
 };
 Mount(VariantsDemo, '#demo-variants');