adapt new Input

docs/components/modal.md

@@ -42,8 +42,8 @@ Modal supports all **daisyUI Modal classes**:
 const BasicDemo = () => {
   const isOpen = $(false);
   
-  return Div({ class: 'flex justify-center' }, [
-    Button({ 
+  return div({ class: 'flex justify-center' }, [
+    button({ 
       class: 'btn btn-primary',
       onclick: () => {
         isOpen(true);
@@ -52,14 +52,14 @@ const BasicDemo = () => {
     Modal({
       open: isOpen,
       title: 'Basic Modal',
-      buttons: Button({ 
+      buttons: button({ 
         class: 'btn-primary', 
         onclick: () => {
           isOpen(false);
         } 
       }, 'Custom Action')
     }, [
-      Div({ class: 'py-4' }, 'This is a basic modal dialog. Press ESC or click Close.')
+      div({ class: 'py-4' }, 'This is a basic modal dialog. Press ESC or click Close.')
     ])
   ]);
 };
@@ -103,8 +103,8 @@ const ActionsDemo = () => {
     Toast('Action confirmed!', 'alert-success', 2000);
   };
   
-  return Div({ class: 'flex flex-col gap-4 items-center' }, [
-    Button({ 
+  return div({ class: 'flex flex-col gap-4 items-center' }, [
+    button({ 
       class: 'btn btn-primary',
       onclick: () => isOpen(true)
     }, 'Confirm Action'),
@@ -116,17 +116,17 @@ const ActionsDemo = () => {
       open: isOpen,
       title: 'Confirm Action',
       buttons: [
-        Button({ 
+        button({ 
           class: 'btn btn-ghost',
           onclick: () => isOpen(false)
         }, 'Cancel'),
-        Button({ 
+        button({ 
           class: 'btn btn-primary',
           onclick: handleConfirm
         }, 'Confirm')
       ]
     }, [
-      Div({ class: 'py-4' }, 'Are you sure you want to perform this action? This cannot be undone.')
+      div({ class: 'py-4' }, 'Are you sure you want to perform this action? This cannot be undone.')
     ])
   ]);
 };
@@ -158,8 +158,8 @@ const FormModal = () => {
     }
   };
   
-  return Div({ class: 'flex flex-col gap-4 items-center' }, [
-    Button({ 
+  return div({ class: 'flex flex-col gap-4 items-center' }, [
+    button({ 
       class: 'btn btn-primary',
       onclick: () => isOpen(true)
     }, 'Sign Up'),
@@ -171,24 +171,24 @@ const FormModal = () => {
       open: isOpen,
       title: 'Create Account',
       buttons: [
-        Button({ 
+        button({ 
           class: 'btn btn-ghost',
           onclick: () => isOpen(false)
         }, 'Cancel'),
-        Button({ 
+        button({ 
           class: 'btn btn-primary',
           onclick: handleSubmit
         }, 'Sign Up')
       ]
     }, [
-      Div({ class: 'flex flex-col gap-4 py-2' }, [
-        Input({
+      div({ class: 'flex flex-col gap-4 py-2' }, [
+        input({
           label: 'Full Name',
           value: name,
           placeholder: 'Enter your name',
           oninput: (e) => name(e.target.value)
         }),
-        Input({
+        input({
           label: 'Email',
           type: 'email',
           value: email,
@@ -232,11 +232,11 @@ const ConfirmDemo = () => {
     Toast(`Deleted: ${pendingDelete().name}`, 'alert-info', 2000);
   };
   
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Div({ class: 'flex flex-col gap-2' }, items().map(item =>
-      Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
-        Span({}, item.name),
-        Button({ 
+  return div({ class: 'flex flex-col gap-4' }, [
+    div({ class: 'flex flex-col gap-2' }, items().map(item =>
+      div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
+        span({}, item.name),
+        button({ 
           class: 'btn btn-xs btn-error',
           onclick: () => confirmDelete(item)
         }, 'Delete')
@@ -246,17 +246,17 @@ const ConfirmDemo = () => {
       open: isOpen,
       title: 'Delete Confirmation',
       buttons: [
-        Button({ 
+        button({ 
           class: 'btn btn-ghost',
           onclick: () => isOpen(false)
         }, 'Cancel'),
-        Button({ 
+        button({ 
           class: 'btn btn-error',
           onclick: handleDelete
         }, 'Delete')
       ]
     }, [
-      Div({ class: 'py-4' }, () => `Are you sure you want to delete "${pendingDelete()?.name}"? This action cannot be undone.`)
+      div({ class: 'py-4' }, () => `Are you sure you want to delete "${pendingDelete()?.name}"? This action cannot be undone.`)
     ])
   ]);
 };
@@ -276,35 +276,35 @@ mount(ConfirmDemo, '#demo-confirm');
 const LargeDemo = () => {
   const isOpen = $(false);
   
-  return Div({ class: 'flex justify-center' }, [
-    Button({ 
+  return div({ class: 'flex justify-center' }, [
+    button({ 
       class: 'btn btn-primary',
       onclick: () => isOpen(true)
     }, 'Open Large Modal'),
     Modal({
       open: isOpen,
       title: 'Terms and Conditions',
-      buttons: Button({ 
+      buttons: button({ 
         class: 'btn btn-primary',
         onclick: () => isOpen(false)
       }, 'I Agree')
     }, [
-      Div({ class: 'py-4 max-h-96 overflow-y-auto' }, [
-        Div({ class: 'space-y-4' }, [
-          Div({ class: 'text-sm' }, [
-            Div({ class: 'font-bold mb-2' }, '1. Introduction'),
+      div({ class: 'py-4 max-h-96 overflow-y-auto' }, [
+        div({ class: 'space-y-4' }, [
+          div({ class: 'text-sm' }, [
+            div({ class: 'font-bold mb-2' }, '1. Introduction'),
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.'
           ]),
-          Div({ class: 'text-sm' }, [
-            Div({ class: 'font-bold mb-2' }, '2. User Obligations'),
+          div({ class: 'text-sm' }, [
+            div({ class: 'font-bold mb-2' }, '2. User Obligations'),
             'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.'
           ]),
-          Div({ class: 'text-sm' }, [
-            Div({ class: 'font-bold mb-2' }, '3. Privacy Policy'),
+          div({ class: 'text-sm' }, [
+            div({ class: 'font-bold mb-2' }, '3. Privacy Policy'),
             'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.'
           ]),
-          Div({ class: 'text-sm' }, [
-            Div({ class: 'font-bold mb-2' }, '4. Termination'),
+          div({ class: 'text-sm' }, [
+            div({ class: 'font-bold mb-2' }, '4. Termination'),
             'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
           ])
         ])
@@ -330,27 +330,27 @@ const MultipleDemo = () => {
   const modal2 = $(false);
   const modal3 = $(false);
   
-  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
-    Button({ class: 'btn', onclick: () => modal1(true) }, 'Info Modal'),
-    Button({ class: 'btn', onclick: () => modal2(true) }, 'Success Modal'),
-    Button({ class: 'btn', onclick: () => modal3(true) }, 'Warning Modal'),
+  return div({ class: 'flex flex-wrap gap-4 justify-center' }, [
+    button({ class: 'btn', onclick: () => modal1(true) }, 'Info Modal'),
+    button({ class: 'btn', onclick: () => modal2(true) }, 'Success Modal'),
+    button({ class: 'btn', onclick: () => modal3(true) }, 'Warning Modal'),
     
     Modal({
       open: modal1,
       title: 'Information',
-      buttons: Button({ onclick: () => modal1(false) }, 'OK')
+      buttons: button({ onclick: () => modal1(false) }, 'OK')
     }, 'This is an informational message.'),
     
     Modal({
       open: modal2,
       title: 'Success!',
-      buttons: Button({ onclick: () => modal2(false) }, 'Great!')
+      buttons: button({ onclick: () => modal2(false) }, 'Great!')
     }, 'Your operation was completed successfully.'),
     
     Modal({
       open: modal3,
       title: 'Warning',
-      buttons: Button({ onclick: () => modal3(false) }, 'Understood')
+      buttons: button({ onclick: () => modal3(false) }, 'Understood')
     }, 'Please review your input before proceeding.')
   ]);
 };
@@ -370,8 +370,8 @@ mount(MultipleDemo, '#demo-multiple');
 const CustomDemo = () => {
   const isOpen = $(false);
   
-  return Div({ class: 'flex justify-center' }, [
-    Button({ 
+  return div({ class: 'flex justify-center' }, [
+    button({ 
       class: 'btn btn-primary',
       onclick: () => isOpen(true)
     }, 'Open Custom Modal'),
@@ -379,11 +379,11 @@ const CustomDemo = () => {
       open: isOpen,
       class: 'bg-gradient-to-r from-primary to-secondary text-primary-content'
     }, [
-      Div({ class: 'text-center py-8' }, [
-        Div({ class: 'text-6xl mb-4' }, '🎉'),
-        Div({ class: 'text-2xl font-bold mb-2' }, 'Congratulations!'),
-        Div({ class: 'mb-6' }, 'You\'ve successfully completed the tutorial.'),
-        Button({ 
+      div({ class: 'text-center py-8' }, [
+        div({ class: 'text-6xl mb-4' }, '🎉'),
+        div({ class: 'text-2xl font-bold mb-2' }, 'Congratulations!'),
+        div({ class: 'mb-6' }, 'You\'ve successfully completed the tutorial.'),
+        button({ 
           class: 'btn btn-ghost bg-white/20 hover:bg-white/30',
           onclick: () => isOpen(false)
         }, 'Get Started')