adapt new Input

docs/components/list.md

@@ -46,8 +46,8 @@ const BasicDemo = () => {
   return List({
     items: items,
     render: (item) =>
-      Div({ class: "p-3 hover:bg-base-200 transition-colors" }, [
-        Span({ class: "font-medium" }, item),
+      div({ class: "p-3 hover:bg-base-200 transition-colors" }, [
+        span({ class: "font-medium" }, item),
       ]),
   });
 };
@@ -73,15 +73,15 @@ const HeaderDemo = () => {
 
   return List({
     items: users,
-    header: Div(
+    header: div(
       { class: "p-3 bg-primary/10 font-bold border-b border-base-300" },
       "Active Users",
     ),
     render: (user) =>
-      Div({ class: "p-3 border-b border-base-300 hover:bg-base-200" }, [
-        Div({ class: "font-medium" }, user.name),
-        Div({ class: "text-sm opacity-70" }, user.email),
-        Span(
+      div({ class: "p-3 border-b border-base-300 hover:bg-base-200" }, [
+        div({ class: "font-medium" }, user.name),
+        div({ class: "text-sm opacity-70" }, user.email),
+        span(
           {
             class: `badge badge-sm ${user.status === "active" ? "badge-success" : "badge-ghost"} mt-1`,
           },
@@ -118,18 +118,18 @@ const IconsDemo = () => {
   return List({
     items: settings,
     render: (item) =>
-      Div(
+      div(
         {
           class:
             "flex gap-3 p-3 hover:bg-base-200 transition-colors cursor-pointer",
         },
         [
-          Div({ class: "text-2xl" }, item.icon),
-          Div({ class: "flex-1" }, [
-            Div({ class: "font-medium" }, item.label),
-            Div({ class: "text-sm opacity-60" }, item.description),
+          div({ class: "text-2xl" }, item.icon),
+          div({ class: "flex-1" }, [
+            div({ class: "font-medium" }, item.label),
+            div({ class: "text-sm opacity-60" }, item.description),
           ]),
-          Span({ class: "opacity-40" }, "→"),
+          span({ class: "opacity-40" }, "→"),
         ],
       ),
   });
@@ -178,17 +178,17 @@ const BadgesDemo = () => {
   return List({
     items: notifications,
     render: (item) =>
-      Div(
+      div(
         {
           class: `flex justify-between items-center p-3 border-b border-base-300 hover:bg-base-200 ${item.unread ? "bg-primary/5" : ""}`,
         },
         [
-          Div({ class: "flex-1" }, [
-            Div({ class: "font-medium" }, item.message),
-            Div({ class: "text-xs opacity-50" }, item.time),
+          div({ class: "flex-1" }, [
+            div({ class: "font-medium" }, item.message),
+            div({ class: "text-xs opacity-50" }, item.time),
           ]),
           item.unread
-            ? Span({ class: "badge badge-primary badge-sm" }, "New")
+            ? span({ class: "badge badge-primary badge-sm" }, "New")
             : null,
         ],
       ),
@@ -223,19 +223,19 @@ const InteractiveDemo = () => {
     Review: "badge-accent",
   };
 
-  return Div({ class: "flex flex-col gap-4" }, [
+  return div({ class: "flex flex-col gap-4" }, [
     List({
       items: items,
       render: (item) =>
-        Div(
+        div(
           {
             class: `p-3 cursor-pointer transition-all hover:bg-base-200 ${selected() === item.id ? "bg-primary/10 border-l-4 border-primary" : "border-l-4 border-transparent"}`,
             onclick: () => selected(item.id),
           },
           [
-            Div({ class: "flex justify-between items-center" }, [
-              Div({ class: "font-medium" }, item.name),
-              Span(
+            div({ class: "flex justify-between items-center" }, [
+              div({ class: "font-medium" }, item.name),
+              span(
                 { class: `badge ${statusColors[item.status]}` },
                 item.status,
               ),
@@ -245,11 +245,11 @@ const InteractiveDemo = () => {
     }),
     () =>
       selected()
-        ? Div(
+        ? div(
             { class: "alert alert-info" },
             `Selected: ${items.find((i) => i.id === selected()).name}`,
           )
-        : Div({ class: "alert alert-soft" }, "Select a project to see details"),
+        : div({ class: "alert alert-soft" }, "Select a project to see details"),
   ]);
 };
 mount(InteractiveDemo, "#demo-interactive");
@@ -292,15 +292,15 @@ const ReactiveDemo = () => {
   
   const pendingCount = () => todos().filter(t => !t.done).length;
   watch(()=> console.log(pendingCount()));
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Div({ class: 'flex gap-2' }, [
-      Input({
+  return div({ class: 'flex flex-col gap-4' }, [
+    div({ class: 'flex gap-2' }, [
+      input({
         placeholder: 'Add new task...',
         value: newTodo,
         oninput: (e) => newTodo(e.target.value),
         onkeypress: (e) => e.key === 'Enter' && addTodo()
       }),
-      Button({ class: 'btn btn-primary', onclick: addTodo }, 'Add')
+      button({ class: 'btn btn-primary', onclick: addTodo }, 'Add')
     ]),
     List({
       items: todos,
@@ -308,25 +308,25 @@ const ReactiveDemo = () => {
         // Esta función busca siempre el estado actual del item dentro del signal
         const it = () => todos().find(t => t.id === item.id) || item;
 
-        return Div({ 
+        return div({ 
           class: () => `flex items-center gap-3 p-2 border-b border-base-300 ${it().done ? 'opacity-60' : ''}` 
         }, [
           Checkbox({
             value: () => it().done,
             onclick: () => toggleTodo(item.id)
           }),
-          Span({ 
+          span({ 
             class: () => `flex-1 ${it().done ? 'line-through' : ''}`,
             onclick: () => toggleTodo(item.id)
           }, () => it().text),
-          Button({ 
+          button({ 
             class: 'btn btn-ghost btn-xs btn-circle',
             onclick: () => deleteTodo(item.id)
           }, '✕')
         ]);
       }
     }),
-    Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
+    div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
   ]);
 };
 
@@ -354,14 +354,14 @@ const AvatarDemo = () => {
   return List({
     items: contacts,
     render: (contact) =>
-      Div({ class: "flex gap-3 p-3 hover:bg-base-200 transition-colors" }, [
-        Div(
+      div({ class: "flex gap-3 p-3 hover:bg-base-200 transition-colors" }, [
+        div(
           {
             class: `avatar ${contact.online ? "online" : "offline"}`,
             style: "width: 48px",
           },
           [
-            Div(
+            div(
               {
                 class:
                   "rounded-full bg-primary text-primary-content flex items-center justify-center w-12 h-12 font-bold",
@@ -370,11 +370,11 @@ const AvatarDemo = () => {
             ),
           ],
         ),
-        Div({ class: "flex-1" }, [
-          Div({ class: "font-medium" }, contact.name),
-          Div({ class: "text-sm opacity-60" }, contact.role),
+        div({ class: "flex-1" }, [
+          div({ class: "font-medium" }, contact.name),
+          div({ class: "text-sm opacity-60" }, contact.role),
         ]),
-        Div(
+        div(
           {
             class: `badge badge-sm ${contact.online ? "badge-success" : "badge-ghost"}`,
           },
@@ -399,24 +399,24 @@ mount(AvatarDemo, "#demo-avatar");
 const VariantsDemo = () => {
   const items = ["Item 1", "Item 2", "Item 3"];
 
-  return Div({ class: "flex flex-col gap-6" }, [
-    Div({ class: "text-sm font-bold" }, "Default List"),
+  return div({ class: "flex flex-col gap-6" }, [
+    div({ class: "text-sm font-bold" }, "Default List"),
     List({
       items: items,
-      render: (item) => Div({ class: "p-2" }, item),
+      render: (item) => div({ class: "p-2" }, item),
     }),
 
-    Div({ class: "text-sm font-bold mt-2" }, "With Shadow"),
+    div({ class: "text-sm font-bold mt-2" }, "With Shadow"),
     List({
       items: items,
-      render: (item) => Div({ class: "p-2" }, item),
+      render: (item) => div({ class: "p-2" }, item),
       class: "shadow-lg",
     }),
 
-    Div({ class: "text-sm font-bold mt-2" }, "Rounded Corners"),
+    div({ class: "text-sm font-bold mt-2" }, "Rounded Corners"),
     List({
       items: items,
-      render: (item) => Div({ class: "p-2" }, item),
+      render: (item) => div({ class: "p-2" }, item),
       class: "rounded-box overflow-hidden",
     }),
   ]);