adapt new Input

docs/components/table.md

@@ -60,7 +60,7 @@ const BasicDemo = () => {
     { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
   ];
   
-  return Table({
+  return table({
     items: users,
     columns: [
       { label: 'ID', key: 'id' },
@@ -91,7 +91,7 @@ const ZebraDemo = () => {
     { id: 4, name: 'Monitor', price: '$299', stock: 12 }
   ];
   
-  return Table({
+  return table({
     items: products,
     columns: [
       { label: 'Product', key: 'name' },
@@ -121,7 +121,7 @@ const CustomDemo = () => {
     { id: 103, customer: 'Charlie', amount: 450, status: 'shipped' }
   ];
   
-  return Table({
+  return table({
     items: orders,
     columns: [
       { label: 'Order ID', key: 'id' },
@@ -140,7 +140,7 @@ const CustomDemo = () => {
             pending: 'badge badge-warning',
             shipped: 'badge badge-info'
           };
-          return Span({ class: statusClass[item.status] }, item.status);
+          return span({ class: statusClass[item.status] }, item.status);
         }
       }
     ],
@@ -170,7 +170,7 @@ const FooterDemo = () => {
   const totalRevenue = sales.reduce((sum, item) => sum + item.revenue, 0);
   const totalExpenses = sales.reduce((sum, item) => sum + item.expenses, 0);
   
-  return Table({
+  return table({
     items: sales,
     columns: [
       { label: 'Month', key: 'month' },
@@ -211,15 +211,15 @@ mount(FooterDemo, '#demo-footer');
 const EmptyDemo = () => {
   const emptyList = [];
   
-  return Table({
+  return table({
     items: emptyList,
     columns: [
       { label: 'ID', key: 'id' },
       { label: 'Name', key: 'name' }
     ],
-    empty: Div({ class: 'flex flex-col items-center gap-2 p-4' }, [
-      Span({ class: 'text-2xl' }, '📭'),
-      Span({}, 'No records found')
+    empty: div({ class: 'flex flex-col items-center gap-2 p-4' }, [
+      span({ class: 'text-2xl' }, '📭'),
+      span({}, 'No records found')
     ])
   });
 };
@@ -259,26 +259,26 @@ const ReactiveDemo = () => {
     tasks([...tasks(), { id: newId, title: `Task ${newId}`, completed: false }]);
   };
   
-  return Div({ class: 'flex flex-col gap-4' }, [
-    Div({ class: 'flex gap-2' }, [
-      Button({ 
+  return div({ class: 'flex flex-col gap-4' }, [
+    div({ class: 'flex gap-2' }, [
+      button({ 
         class: 'btn btn-sm',
         onclick: () => filter('all')
       }, 'All'),
-      Button({ 
+      button({ 
         class: 'btn btn-sm',
         onclick: () => filter('completed')
       }, 'Completed'),
-      Button({ 
+      button({ 
         class: 'btn btn-sm',
         onclick: () => filter('pending')
       }, 'Pending'),
-      Button({ 
+      button({ 
         class: 'btn btn-sm btn-primary',
         onclick: addTask
       }, 'Add Task')
     ]),
-    Table({
+    table({
       items: filteredTasks,
       columns: [
         { label: 'ID', key: 'id' },
@@ -286,8 +286,8 @@ const ReactiveDemo = () => {
         {
           label: 'Status',
           render: (item) => item.completed 
-            ? Span({ class: 'badge badge-success' }, '✓ Done')
-            : Span({ class: 'badge badge-warning' }, '○ Pending')
+            ? span({ class: 'badge badge-success' }, '✓ Done')
+            : span({ class: 'badge badge-warning' }, '○ Pending')
         }
       ],
       zebra: true
@@ -325,7 +325,7 @@ const ActionsDemo = () => {
     ));
   };
   
-  return Table({
+  return table({
     items: users,
     columns: [
       { label: 'ID', key: 'id' },
@@ -334,17 +334,17 @@ const ActionsDemo = () => {
       {
         label: 'Status',
         render: (item) => item.active
-          ? Span({ class: 'badge badge-success' }, 'Active')
-          : Span({ class: 'badge badge-ghost' }, 'Inactive')
+          ? span({ class: 'badge badge-success' }, 'Active')
+          : span({ class: 'badge badge-ghost' }, 'Inactive')
       },
       {
         label: 'Actions',
-        render: (item) => Div({ class: 'flex gap-1' }, [
-          Button({
+        render: (item) => div({ class: 'flex gap-1' }, [
+          button({
             class: 'btn btn-xs btn-ghost',
             onclick: () => toggleActive(item.id)
           }, item.active ? 'Deactivate' : 'Activate'),
-          Button({
+          button({
             class: 'btn btn-xs btn-error',
             onclick: () => deleteUser(item.id)
           }, 'Delete')
@@ -374,9 +374,9 @@ const VariantsDemo = () => {
     { id: 3, name: 'Item 3', value: 300 }
   ];
   
-  return Div({ class: 'flex flex-col gap-6' }, [
-    Div({ class: 'text-sm font-bold' }, 'Default Table'),
-    Table({
+  return div({ class: 'flex flex-col gap-6' }, [
+    div({ class: 'text-sm font-bold' }, 'Default Table'),
+    table({
       items: data,
       columns: [
         { label: 'ID', key: 'id' },
@@ -385,8 +385,8 @@ const VariantsDemo = () => {
       ]
     }),
     
-    Div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'),
-    Table({
+    div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'),
+    table({
       items: data,
       columns: [
         { label: 'ID', key: 'id' },
@@ -396,8 +396,8 @@ const VariantsDemo = () => {
       zebra: true
     }),
     
-    Div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'),
-    Table({
+    div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'),
+    table({
       items: data,
       columns: [
         { label: 'ID', key: 'id' },