adapt new Input

docs/components/badge.md

@@ -45,7 +45,7 @@ Badge({ class: "badge-primary badge-lg" }, "New");
 
 ```javascript
 const BasicDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-2' }, [
+  return div({ class: 'flex flex-wrap gap-2' }, [
     Badge({}, 'Default'),
     Badge({ class: 'badge-primary' }, 'Primary'),
     Badge({ class: 'badge-secondary' }, 'Secondary'),
@@ -70,7 +70,7 @@ mount(BasicDemo, '#demo-basic');
 
 ```javascript
 const SizesDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
+  return div({ class: 'flex flex-wrap gap-2 items-center' }, [
     Badge({ class: 'badge-xs' }, 'Extra Small'),
     Badge({ class: 'badge-sm' }, 'Small'),
     Badge({}, 'Default'),
@@ -92,7 +92,7 @@ mount(SizesDemo, '#demo-sizes');
 
 ```javascript
 const OutlineDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-2' }, [
+  return div({ class: 'flex flex-wrap gap-2' }, [
     Badge({ class: 'badge-outline' }, 'Default'),
     Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
     Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
@@ -117,7 +117,7 @@ mount(OutlineDemo, '#demo-outline');
 
 ```javascript
 const GhostDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-2' }, [
+  return div({ class: 'flex flex-wrap gap-2' }, [
     Badge({ class: 'badge-ghost' }, 'Default'),
     Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
     Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
@@ -142,26 +142,26 @@ mount(GhostDemo, '#demo-ghost');
 
 ```javascript
 const IconsDemo = () => {
-  return Div({ class: 'flex flex-wrap gap-2' }, [
+  return div({ class: 'flex flex-wrap gap-2' }, [
     Badge({ class: 'gap-1' }, [
-      Span({}, '✓'),
-      Span({}, 'Success')
+      span({}, '✓'),
+      span({}, 'Success')
     ]),
     Badge({ class: 'gap-1 badge-warning' }, [
-      Span({}, '⚠'),
-      Span({}, 'Warning')
+      span({}, '⚠'),
+      span({}, 'Warning')
     ]),
     Badge({ class: 'gap-1 badge-error' }, [
-      Span({}, '✗'),
-      Span({}, 'Error')
+      span({}, '✗'),
+      span({}, 'Error')
     ]),
     Badge({ class: 'gap-1 badge-info' }, [
-      Span({}, 'ℹ'),
-      Span({}, 'Info')
+      span({}, 'ℹ'),
+      span({}, 'Info')
     ]),
     Badge({ class: 'gap-1' }, [
-      Span({}, '★'),
-      Span({}, '4.5')
+      span({}, '★'),
+      span({}, '4.5')
     ])
   ]);
 };
@@ -187,9 +187,9 @@ const StatusDemo = () => {
     { label: 'Archived', class: 'badge-ghost' }
   ];
   
-  return Div({ class: 'flex flex-col gap-2' }, [
-    Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
-    Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
+  return div({ class: 'flex flex-col gap-2' }, [
+    div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
+    div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
       Badge({ class: status.class }, status.label)
     ))
   ]);
@@ -212,17 +212,17 @@ const CountDemo = () => {
   const messages = $(5);
   const updates = $(0);
   
-  return Div({ class: 'flex flex-wrap gap-6' }, [
-    Div({ class: 'flex items-center gap-2' }, [
-      Span({}, 'Notifications'),
+  return div({ class: 'flex flex-wrap gap-6' }, [
+    div({ class: 'flex items-center gap-2' }, [
+      span({}, 'Notifications'),
       Badge({ class: 'badge-primary' }, () => notifications())
     ]),
-    Div({ class: 'flex items-center gap-2' }, [
-      Span({}, 'Messages'),
+    div({ class: 'flex items-center gap-2' }, [
+      span({}, 'Messages'),
       Badge({ class: 'badge-secondary' }, () => messages())
     ]),
-    Div({ class: 'flex items-center gap-2' }, [
-      Span({}, 'Updates'),
+    div({ class: 'flex items-center gap-2' }, [
+      span({}, 'Updates'),
       Badge({ class: 'badge-ghost' }, () => updates() || '0')
     ])
   ]);
@@ -243,13 +243,13 @@ mount(CountDemo, '#demo-count');
 const InteractiveDemo = () => {
   const count = $(0);
   
-  return Div({ class: 'flex flex-col gap-4 items-center' }, [
-    Div({ class: 'flex items-center gap-4' }, [
-      Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
+  return div({ class: 'flex flex-col gap-4 items-center' }, [
+    div({ class: 'flex items-center gap-4' }, [
+      button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
       Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
-      Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
+      button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
     ]),
-    Button({ 
+    button({ 
       class: 'btn btn-ghost btn-sm',
       onclick: () => count(0)
     }, 'Reset')
@@ -269,19 +269,19 @@ mount(InteractiveDemo, '#demo-interactive');
 
 ```javascript
 const VariantsDemo = () => {
-  return Div({ class: 'flex flex-col gap-6' }, [
-    Div({ class: 'flex flex-wrap gap-2' }, [
+  return div({ class: 'flex flex-col gap-6' }, [
+    div({ class: 'flex flex-wrap gap-2' }, [
       Badge({ class: 'badge-xs' }, 'XS'),
       Badge({ class: 'badge-sm' }, 'SM'),
       Badge({}, 'MD'),
       Badge({ class: 'badge-lg' }, 'LG')
     ]),
-    Div({ class: 'flex flex-wrap gap-2' }, [
+    div({ class: 'flex flex-wrap gap-2' }, [
       Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
       Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
       Badge({ class: 'badge-accent badge-sm' }, 'Accent')
     ]),
-    Div({ class: 'flex flex-wrap gap-2' }, [
+    div({ class: 'flex flex-wrap gap-2' }, [
       Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
       Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
     ])
@@ -301,18 +301,18 @@ mount(VariantsDemo, '#demo-variants');
 
 ```javascript
 const InlineDemo = () => {
-  return Div({ class: 'space-y-2' }, [
-    Div({ class: 'text-sm' }, [
+  return div({ class: 'space-y-2' }, [
+    div({ class: 'text-sm' }, [
       'Your order is ',
       Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
       ' and will be shipped soon.'
     ]),
-    Div({ class: 'text-sm' }, [
+    div({ class: 'text-sm' }, [
       'This feature is ',
       Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
       ' and may change.'
     ]),
-    Div({ class: 'text-sm' }, [
+    div({ class: 'text-sm' }, [
       'Version ',
       Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
       ' released on March 2026'