adapt new Input

docs/components/stack.md

@@ -39,9 +39,9 @@ Stack supports all **daisyUI Stack classes**:
 ```javascript
 const BasicDemo = () => {
   return Stack({ class: 'w-40' }, [
-    Div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'),
-    Div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'),
-    Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
+    div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'),
+    div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'),
+    div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
   ]);
 };
 mount(BasicDemo, '#demo-basic');
@@ -59,16 +59,16 @@ mount(BasicDemo, '#demo-basic');
 ```javascript
 const CardsDemo = () => {
   return Stack({ class: 'w-64' }, [
-    Div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [
-      Div({ class: 'card-body p-4' }, [
-        Span({ class: 'text-sm opacity-70' }, 'Back Card'),
-        Span({ class: 'font-bold' }, 'Additional info')
+    div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [
+      div({ class: 'card-body p-4' }, [
+        span({ class: 'text-sm opacity-70' }, 'Back Card'),
+        span({ class: 'font-bold' }, 'Additional info')
       ])
     ]),
-    Div({ class: 'card bg-primary text-primary-content shadow-xl' }, [
-      Div({ class: 'card-body p-4' }, [
-        Span({ class: 'text-sm' }, 'Front Card'),
-        Span({ class: 'font-bold text-lg' }, 'Main Content')
+    div({ class: 'card bg-primary text-primary-content shadow-xl' }, [
+      div({ class: 'card-body p-4' }, [
+        span({ class: 'text-sm' }, 'Front Card'),
+        span({ class: 'font-bold text-lg' }, 'Main Content')
       ])
     ])
   ]);
@@ -88,14 +88,14 @@ mount(CardsDemo, '#demo-cards');
 ```javascript
 const AvatarsDemo = () => {
   return Stack({ class: 'w-32' }, [
-    Div({ class: 'avatar placeholder' }, [
-      Div({ class: 'bg-neutral text-neutral-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JD')
+    div({ class: 'avatar placeholder' }, [
+      div({ class: 'bg-neutral text-neutral-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JD')
     ]),
-    Div({ class: 'avatar placeholder' }, [
-      Div({ class: 'bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JS')
+    div({ class: 'avatar placeholder' }, [
+      div({ class: 'bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JS')
     ]),
-    Div({ class: 'avatar placeholder' }, [
-      Div({ class: 'bg-secondary text-secondary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'BC')
+    div({ class: 'avatar placeholder' }, [
+      div({ class: 'bg-secondary text-secondary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'BC')
     ])
   ]);
 };
@@ -114,14 +114,14 @@ mount(AvatarsDemo, '#demo-avatars');
 ```javascript
 const ImagesDemo = () => {
   return Stack({ class: 'w-48' }, [
-    Div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [
-      Div({ class: 'p-2 text-white text-sm' }, 'Background Image')
+    div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [
+      div({ class: 'p-2 text-white text-sm' }, 'Background Image')
     ]),
-    Div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [
-      Div({ class: 'p-2 text-white text-sm' }, 'Middle Layer')
+    div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [
+      div({ class: 'p-2 text-white text-sm' }, 'Middle Layer')
     ]),
-    Div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [
-      Span({ class: 'text-white font-bold' }, 'Top Layer')
+    div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [
+      span({ class: 'text-white font-bold' }, 'Top Layer')
     ])
   ]);
 };
@@ -148,11 +148,11 @@ const GalleryDemo = () => {
   
   return Stack({ class: 'w-48 cursor-pointer hover:scale-105 transition-transform' }, [
     ...photos.map((photo, idx) => 
-      Div({ 
+      div({ 
         class: `${photo.color} rounded-lg shadow-lg transition-all`,
         style: `transform: translate(${idx * 4}px, ${idx * 4}px);`
       }, [
-        Div({ class: 'p-4 text-white font-bold' }, photo.label)
+        div({ class: 'p-4 text-white font-bold' }, photo.label)
       ])
     )
   ]);
@@ -175,21 +175,21 @@ const InteractiveDemo = () => {
   const colors = ['primary', 'secondary', 'accent', 'info', 'success'];
   const labels = ['Home', 'Profile', 'Settings', 'Messages', 'Notifications'];
   
-  return Div({ class: 'flex flex-col gap-6 items-center' }, [
+  return div({ class: 'flex flex-col gap-6 items-center' }, [
     Stack({ class: 'w-56' }, colors.map((color, idx) => 
-      Div({ 
+      div({ 
         class: () => `bg-${color} text-${color}-content rounded-lg p-4 shadow-lg transition-all cursor-pointer ${idx === active() ? 'scale-105 z-10' : ''}`,
         style: () => `transform: translate(${idx * 8}px, ${idx * 8}px);`,
         onclick: () => active(idx)
       }, [
-        Div({ class: 'font-bold' }, labels[idx]),
-        Div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`)
+        div({ class: 'font-bold' }, labels[idx]),
+        div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`)
       ])
     )),
-    Div({ class: 'mt-4 text-center' }, [
-      Span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`),
-      Div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) =>
-        Button({ 
+    div({ class: 'mt-4 text-center' }, [
+      span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`),
+      div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) =>
+        button({ 
           class: () => `btn btn-xs ${idx === active() ? 'btn-primary' : 'btn-ghost'}`,
           onclick: () => active(idx)
         }, `${idx + 1}`)
@@ -228,22 +228,22 @@ const NotificationsDemo = () => {
     error: 'bg-error text-error-content'
   };
   
-  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+  return div({ class: 'flex flex-col gap-4 items-center' }, [
     Stack({ class: 'w-80' }, () => notifications().map((notif, idx) => 
-      Div({ 
+      div({ 
         class: () => `${typeClasses[notif.type]} rounded-lg p-3 shadow-lg transition-all cursor-pointer`,
         style: () => `transform: translate(${idx * 4}px, ${idx * 4}px);`,
         onclick: () => removeNotification(notif.id)
       }, [
-        Div({ class: 'flex justify-between items-center' }, [
-          Span({ class: 'text-sm' }, notif.message),
-          Span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, '✕')
+        div({ class: 'flex justify-between items-center' }, [
+          span({ class: 'text-sm' }, notif.message),
+          span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, '✕')
         ])
       ])
     )),
     () => notifications().length === 0 
-      ? Div({ class: 'alert alert-soft' }, 'No notifications')
-      : Button({ 
+      ? div({ class: 'alert alert-soft' }, 'No notifications')
+      : button({ 
           class: 'btn btn-sm btn-ghost mt-2',
           onclick: () => notifications([])
         }, 'Clear All')
@@ -263,29 +263,29 @@ mount(NotificationsDemo, '#demo-notifications');
 
 ```javascript
 const VariantsDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-sm mb-2' }, 'Small Stack'),
+  return div({ class: 'flex flex-wrap gap-8 justify-center' }, [
+    div({ class: 'text-center' }, [
+      div({ class: 'text-sm mb-2' }, 'Small Stack'),
       Stack({ class: 'w-24' }, [
-        Div({ class: 'bg-primary rounded p-2 text-xs' }, '1'),
-        Div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'),
-        Div({ class: 'bg-accent rounded p-2 text-xs' }, '3')
+        div({ class: 'bg-primary rounded p-2 text-xs' }, '1'),
+        div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'),
+        div({ class: 'bg-accent rounded p-2 text-xs' }, '3')
       ])
     ]),
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-sm mb-2' }, 'Medium Stack'),
+    div({ class: 'text-center' }, [
+      div({ class: 'text-sm mb-2' }, 'Medium Stack'),
       Stack({ class: 'w-32' }, [
-        Div({ class: 'bg-primary rounded p-3' }, 'A'),
-        Div({ class: 'bg-secondary rounded p-3' }, 'B'),
-        Div({ class: 'bg-accent rounded p-3' }, 'C')
+        div({ class: 'bg-primary rounded p-3' }, 'A'),
+        div({ class: 'bg-secondary rounded p-3' }, 'B'),
+        div({ class: 'bg-accent rounded p-3' }, 'C')
       ])
     ]),
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-sm mb-2' }, 'Large Stack'),
+    div({ class: 'text-center' }, [
+      div({ class: 'text-sm mb-2' }, 'Large Stack'),
       Stack({ class: 'w-40' }, [
-        Div({ class: 'bg-primary rounded p-4' }, 'X'),
-        Div({ class: 'bg-secondary rounded p-4' }, 'Y'),
-        Div({ class: 'bg-accent rounded p-4' }, 'Z')
+        div({ class: 'bg-primary rounded p-4' }, 'X'),
+        div({ class: 'bg-secondary rounded p-4' }, 'Y'),
+        div({ class: 'bg-accent rounded p-4' }, 'Z')
       ])
     ])
   ]);