adapt new Input

docs/components/fieldset.md

@@ -33,8 +33,8 @@ Fieldset({
   legend: "Personal Information",
   class: "fieldset-primary w-full max-w-md"
 }, [
-  Input({ label: "Name", placeholder: "Enter your name" }),
-  Input({ label: "Email", type: "email" })
+  input({ label: "Name", placeholder: "Enter your name" }),
+  input({ label: "Email", type: "email" })
 ]);
 ```
 
@@ -51,14 +51,14 @@ Fieldset({
 
 ```javascript
 const BasicDemo = () => {
-  return Fieldset({
+  return fieldset({
     legend: 'User Information',
     class: 'w-full max-w-md mx-auto'
   }, [
-    Div({ class: 'space-y-4' }, [
-      Input({ label: 'Full Name', placeholder: 'Enter your name' }),
-      Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
-      Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
+    div({ class: 'space-y-4' }, [
+      input({ label: 'Full Name', placeholder: 'Enter your name' }),
+      input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
+      input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
     ])
   ]);
 };
@@ -80,18 +80,18 @@ const ReactiveDemo = () => {
   const email = $('');
   const isValid = () => name().length > 0 && email().includes('@');
   
-  return Fieldset({
+  return fieldset({
     legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form',
     class: 'w-full max-w-md mx-auto'
   }, [
-    Div({ class: 'space-y-4' }, [
-      Input({ 
+    div({ class: 'space-y-4' }, [
+      input({ 
         label: 'Full Name', 
         value: name,
         oninput: (e) => name(e.target.value),
         placeholder: 'Enter your name'
       }),
-      Input({ 
+      input({ 
         label: 'Email', 
         type: 'email',
         value: email,
@@ -123,17 +123,17 @@ const AddressDemo = () => {
   const zip = $('');
   const country = $('us');
   
-  return Fieldset({
-    legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
+  return fieldset({
+    legend: span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
     class: 'w-full max-w-md mx-auto'
   }, [
-    Div({ class: 'space-y-4' }, [
-      Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
-      Div({ class: 'grid grid-cols-2 gap-4' }, [
-        Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
-        Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
+    div({ class: 'space-y-4' }, [
+      input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
+      div({ class: 'grid grid-cols-2 gap-4' }, [
+        input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
+        input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
       ]),
-      Select({
+      select({
         label: 'Country',
         value: country,
         items: [
@@ -165,21 +165,21 @@ const PaymentDemo = () => {
   const expiry = $('');
   const cvv = $('');
   
-  return Fieldset({
-    legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
+  return fieldset({
+    legend: span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
     class: 'w-full max-w-md mx-auto'
   }, [
-    Div({ class: 'space-y-4' }, [
-      Div({ class: 'flex gap-4' }, [
+    div({ class: 'space-y-4' }, [
+      div({ class: 'flex gap-4' }, [
         Radio({ label: 'Credit Card', value: method, inputValue: 'credit', onclick: () => method('credit') }),
         Radio({ label: 'PayPal', value: method, inputValue: 'paypal', onclick: () => method('paypal') }),
         Radio({ label: 'Bank Transfer', value: method, inputValue: 'bank', onclick: () => method('bank') })
       ]),
-      () => method() === 'credit' ? Div({ class: 'space-y-4' }, [
-        Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
-        Div({ class: 'grid grid-cols-2 gap-4' }, [
-          Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
-          Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
+      () => method() === 'credit' ? div({ class: 'space-y-4' }, [
+        input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
+        div({ class: 'grid grid-cols-2 gap-4' }, [
+          input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
+          input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
         ])
       ]) : null,
       () => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null,
@@ -205,20 +205,20 @@ const PreferencesDemo = () => {
   const language = $('en');
   const notifications = $(true);
   
-  return Fieldset({
-    legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
+  return fieldset({
+    legend: span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
     class: 'w-full max-w-md mx-auto'
   }, [
-    Div({ class: 'space-y-4' }, [
-      Div({ class: 'form-control' }, [
-        Span({ class: 'label-text mb-2' }, 'Theme'),
-        Div({ class: 'flex gap-4' }, [
+    div({ class: 'space-y-4' }, [
+      div({ class: 'form-control' }, [
+        span({ class: 'label-text mb-2' }, 'Theme'),
+        div({ class: 'flex gap-4' }, [
           Radio({ label: 'Light', value: theme, inputValue: 'light', onclick: () => theme('light') }),
           Radio({ label: 'Dark', value: theme, inputValue: 'dark', onclick: () => theme('dark') }),
           Radio({ label: 'System', value: theme, inputValue: 'system', onclick: () => theme('system') })
         ])
       ]),
-      Select({
+      select({
         label: 'Language',
         value: language,
         items: [
@@ -265,15 +265,15 @@ const RegistrationDemo = () => {
     }
   };
   
-  return Fieldset({
-    legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
+  return fieldset({
+    legend: span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
     class: 'w-full max-w-md mx-auto'
   }, [
-    Div({ class: 'space-y-4' }, [
-      Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
-      Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
-      Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
-      Input({ 
+    div({ class: 'space-y-4' }, [
+      input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
+      input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
+      input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
+      input({ 
         label: 'Confirm Password', 
         type: 'password', 
         value: confirmPassword, 
@@ -286,7 +286,7 @@ const RegistrationDemo = () => {
         onclick: () => accepted(!accepted())
       }),
       () => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null,
-      Button({ 
+      button({ 
         class: 'btn btn-primary w-full', 
         onclick: handleSubmit,
         disabled: () => !isFormValid()
@@ -308,16 +308,16 @@ mount(RegistrationDemo, '#demo-registration');
 
 ```javascript
 const VariantsDemo = () => {
-  const commonContent = Div({ class: 'space-y-4' }, [
-    Input({ label: 'Field 1', placeholder: 'Enter value' }),
-    Input({ label: 'Field 2', placeholder: 'Enter value' }),
-    Button({ class: 'btn btn-primary' }, 'Submit')
+  const commonContent = div({ class: 'space-y-4' }, [
+    input({ label: 'Field 1', placeholder: 'Enter value' }),
+    input({ label: 'Field 2', placeholder: 'Enter value' }),
+    button({ class: 'btn btn-primary' }, 'Submit')
   ]);
   
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
-    Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
-    Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
+  return div({ class: 'flex flex-col gap-4' }, [
+    fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
+    fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
+    fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
   ]);
 };
 mount(VariantsDemo, '#demo-variants');