Next Preview Work Final

docs/components/input.md

@@ -125,20 +125,22 @@ $mount(TooltipDemo, '#demo-tooltip');
 ```javascript
 const ErrorDemo = () => {
   const email = $('');
-  const isValid = $(true);
   
-  const validate = (value) => {
-    const valid = value.includes('@') && value.includes('.');
-    isValid(valid);
-    email(value);
-  };
-  
-  return Input({
-    type: 'email',
-    value: email,
-    error: () => !isValid() && email() ? 'Invalid email address' : '',
-    oninput: (e) => validate(e.target.value)
-  });
+  return Div({ class: 'w-full max-w-md' }, [
+    Input({
+      type: 'email',
+      value: email,
+      placeholder: 'Enter your email',
+      icon: 'icon-[lucide--mail]',
+      validate: (value) => {
+        if (!value) return '';
+        if (!value.includes('@')) return 'Email must contain @';
+        if (!value.includes('.')) return 'Email must contain .';
+        return '';
+      },
+      oninput: (e) => email(e.target.value)
+    })
+  ]);
 };
 $mount(ErrorDemo, '#demo-error');
 ```