adapt new Input

docs/components/datepicker.md

@@ -40,7 +40,7 @@ Datepicker wraps a **daisyUI Input component** internally. All Input styling cla
   </div>
 </div>
 
-```javascript
+```js
 const BasicDemo = () => {
   const date = $('');
   
@@ -66,14 +66,14 @@ mount(BasicDemo, '#demo-basic');
 const RangeDemo = () => {
   const range = $({ start: '', end: '' });
   
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+  return div({ class: 'flex flex-col gap-4 w-full' }, [
     Datepicker({
       label: 'Date range',
       value: range,
       range: true,
       placeholder: 'Select start and end date...'
     }),
-    () => range().start && range().end ? Div({ class: 'alert alert-success' }, [
+    () => range().start && range().end ? div({ class: 'alert alert-success' }, [
       `Selected: ${range().start} → ${range().end}`
     ]) : null
   ]);
@@ -94,14 +94,14 @@ mount(RangeDemo, '#demo-range');
 const TimeDemo = () => {
   const datetime = $('');
   
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+  return div({ class: 'flex flex-col gap-4 w-full' }, [
     Datepicker({
       label: 'Select date and time',
       value: datetime,
       hour: true,
       placeholder: 'Choose date and time...'
     }),
-    () => datetime() ? Div({ class: 'alert alert-info' }, [
+    () => datetime() ? div({ class: 'alert alert-info' }, [
       `Selected: ${datetime()}`
     ]) : null
   ]);
@@ -122,7 +122,7 @@ mount(TimeDemo, '#demo-time');
 const RangeTimeDemo = () => {
   const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
   
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+  return div({ class: 'flex flex-col gap-4 w-full' }, [
     Datepicker({
       label: 'Schedule range',
       value: range,
@@ -130,7 +130,7 @@ const RangeTimeDemo = () => {
       hour: true,
       placeholder: 'Select date and time range...'
     }),
-    () => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
+    () => range().start && range().end ? div({ class: 'alert alert-primary' }, [
       `From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
     ]) : null
   ]);
@@ -152,17 +152,17 @@ const ReactiveDemo = () => {
   const date = $('');
   const today = new Date().toISOString().split('T')[0];
   
-  return Div({ class: 'flex flex-col gap-4 w-full' }, [
+  return div({ class: 'flex flex-col gap-4 w-full' }, [
     Datepicker({
       label: 'Select date',
       value: date,
       placeholder: 'Choose a date...'
     }),
-    Div({ class: 'stats shadow' }, [
-      Div({ class: 'stat' }, [
-        Div({ class: 'stat-title' }, 'Selected date'),
-        Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
-        Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
+    div({ class: 'stats shadow' }, [
+      div({ class: 'stat' }, [
+        div({ class: 'stat-title' }, 'Selected date'),
+        div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
+        div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
       ])
     ])
   ]);
@@ -181,7 +181,7 @@ mount(ReactiveDemo, '#demo-reactive');
 
 ```javascript
 const VariantsDemo = () => {
-  return Div({ class: 'flex flex-col gap-4' }, [
+  return div({ class: 'flex flex-col gap-4' }, [
     Datepicker({
       label: 'Single date',
       value: $('2024-12-25'),