adapt new Input

docs/components/swap.md

@@ -111,8 +111,8 @@ const CustomDemo = () => {
   
   return Swap({
     value: isOn,
-    on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
-    off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"])
+    on: div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
+    off: div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"])
   });
 };
 mount(CustomDemo, '#demo-custom');
@@ -131,16 +131,16 @@ mount(CustomDemo, '#demo-custom');
 const ReactiveDemo = () => {
   const isOn = $(false);
   
-  return Div({ class: 'flex flex-col gap-4 items-center' }, [
+  return div({ class: 'flex flex-col gap-4 items-center' }, [
     Swap({
       value: isOn,
       on: "👁️",
       off: "👁️‍🗨️"
     }),
-    Div({ class: 'text-center' }, () => 
+    div({ class: 'text-center' }, () => 
       isOn() 
-        ? Div({ class: 'alert alert-success' }, 'Content is visible')
-        : Div({ class: 'alert alert-soft' }, 'Content is hidden')
+        ? div({ class: 'alert alert-success' }, 'Content is visible')
+        : div({ class: 'alert alert-soft' }, 'Content is hidden')
     )
   ]);
 };
@@ -162,33 +162,33 @@ const ModeDemo = () => {
   const notifications = $(true);
   const sound = $(false);
   
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
-    Div({ class: 'flex justify-between items-center' }, [
-      Span({}, 'Dark mode'),
+  return div({ class: 'flex flex-col gap-4 w-full' }, [
+    div({ class: 'flex justify-between items-center' }, [
+      span({}, 'Dark mode'),
       Swap({
         value: darkMode,
         on: "🌙",
         off: "☀️"
       })
     ]),
-    Div({ class: 'flex justify-between items-center' }, [
-      Span({}, 'Notifications'),
+    div({ class: 'flex justify-between items-center' }, [
+      span({}, 'Notifications'),
       Swap({
         value: notifications,
         on: "🔔",
         off: "🔕"
       })
     ]),
-    Div({ class: 'flex justify-between items-center' }, [
-      Span({}, 'Sound effects'),
+    div({ class: 'flex justify-between items-center' }, [
+      span({}, 'Sound effects'),
       Swap({
         value: sound,
         on: "🔊",
         off: "🔇"
       })
     ]),
-    Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
-      Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
+    div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
+      div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
     ])
   ]);
 };
@@ -206,33 +206,33 @@ mount(ModeDemo, '#demo-mode');
 
 ```javascript
 const VariantsDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-xs mb-2' }, 'Volume'),
+  return div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
+    div({ class: 'text-center' }, [
+      div({ class: 'text-xs mb-2' }, 'Volume'),
       Swap({
         value: $(false),
         on: "🔊",
         off: "🔇"
       })
     ]),
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-xs mb-2' }, 'Like'),
+    div({ class: 'text-center' }, [
+      div({ class: 'text-xs mb-2' }, 'Like'),
       Swap({
         value: $(true),
         on: "❤️",
         off: "🤍"
       })
     ]),
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-xs mb-2' }, 'Star'),
+    div({ class: 'text-center' }, [
+      div({ class: 'text-xs mb-2' }, 'Star'),
       Swap({
         value: $(false),
         on: "⭐",
         off: "☆"
       })
     ]),
-    Div({ class: 'text-center' }, [
-      Div({ class: 'text-xs mb-2' }, 'Check'),
+    div({ class: 'text-center' }, [
+      div({ class: 'text-xs mb-2' }, 'Check'),
       Swap({
         value: $(true),
         on: "✅",
@@ -261,11 +261,11 @@ const TodoDemo = () => {
     { id: 3, text: 'Deploy to production', completed: $(false) }
   ];
   
-  return Div({ class: 'flex flex-col gap-3' }, [
-    Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
+  return div({ class: 'flex flex-col gap-3' }, [
+    div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
     ...todos.map(todo => 
-      Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
-        Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
+      div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
+        span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
         Swap({
           value: todo.completed,
           on: "✅",
@@ -273,7 +273,7 @@ const TodoDemo = () => {
         })
       ])
     ),
-    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
+    div({ class: 'mt-2 text-sm opacity-70' }, () => {
       const completed = todos.filter(t => t.completed()).length;
       return `${completed} of ${todos.length} tasks completed`;
     })