Before repair nav components

docs/components/autocomplete.md

@@ -8,51 +8,108 @@
 </div>
 
 ```js
-const paises = [
-  "España",
-  "México",
-  "Argentina",
-  "Colombia",
-  "Chile",
-  "Perú",
-  "Venezuela",
-  { label: "Estados Unidos", value: "US" },
-  { label: "Canadá", value: "CA" },
-  { label: "Reino Unido", value: "UK" },
-];
+// const App = () => {
+//   const selected = $('');
+//   const filterType = $('all');
+  
+//   const allItems = {
+//     fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
+//     vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
+//     all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
+//   };
+  
+//   return div({ class: 'flex flex-col gap-4 w-full' }, [
+//     Select({
+//       items: [
+//         { value: 'all', label: 'All items' },
+//         { value: 'fruits', label: 'Fruits' },
+//         { value: 'vegetables', label: 'Vegetables' }
+//       ],
+//       value: filterType,
+//       onchange: (e) => filterType(e.target.value)
+//     }, 
+//     ),
+//     Autocomplete({
+//       items: () => allItems[filterType()],
+//       value: selected,
+//       onselect: (value) => selected(value)
+//     })
+//   ]);
+// };
+
 
 const App = () => {
   const password = $("");
+   const selected = $('');
+
+  const countries = [
+    'España', 'México', 'Argentina', 'Colombia', 'Chile',
+    { label: 'Estados Unidos', value: 'US' },
+    { label: 'Canadá', value: 'CA' },
+  ];
 
   // Lógica de validación sencilla
   const requirements = [
     { label: "Mínimo 8 caracteres", check: () => password().length >= 8 },
     { label: "Incluye un número", check: () => /\d/.test(password()) },
-    { label: "Símbolo especial", check: () => /[^A-Za-z0-9]/.test(password()) }
+    { label: "Símbolo especial", check: () => /[^A-Za-z0-9]/.test(password()) },
   ];
-
+  const paisSelected = $("");
   return div({ class: "p-10 max-w-md" }, [
+    Autocomplete({
+      label: 'País',
+      float: true,
+      placeholder: 'Escribe para buscar...',
+      items: countries,
+      value: selected,
+      onselect: (item) => console.log('Seleccionado:', item),
+    }),
+
+    h('p', { class: 'text-sm opacity-70' }, () =>
+      `Valor actual: ${selected() || 'ninguno'}`
+    ),
     Input({
       type: "password",
       value: password,
-      class: "input-warning",
+      rule: "[0-9]*",
+      hint: "Debes escribir numeros del 0 al 9",
       oninput: (e) => password(e.target.value),
       label: "Pass",
       float: true,
       left: span({ class: "icon-[lucide--lock] mr-2" }),
       // El contenido que se animará con fx() dentro del Input
-      content: div({ class: "mt-2 p-4 bg-base-200 rounded-lg shadow-xl border border-base-300" }, [
-        span({ class: "text-xs font-bold uppercase opacity-50" }, "Seguridad:"),
-        ul({ class: "mt-2 space-y-1" }, 
-          requirements.map(req => h('li', { 
-            class: () => `flex items-center text-sm ${req.check() ? 'text-success' : 'text-error opacity-50'}` 
-          }, [
-            span({ class: () => `mr-2 ${req.check() ? 'icon-[lucide--check]' : 'icon-[lucide--x]'}` }),
-            req.label
-          ]))
-        )
-      ])
-    })
+      content: div(
+        {
+          class:
+            "mt-2 p-4 bg-base-200 rounded-lg shadow-xl border border-base-300",
+        },
+        [
+          span(
+            { class: "text-xs font-bold uppercase opacity-50" },
+            "Seguridad:",
+          ),
+          ul(
+            { class: "mt-2 space-y-1" },
+            requirements.map((req) =>
+              h(
+                "li",
+                {
+                  class: () =>
+                    `flex items-center text-sm ${req.check() ? "text-success" : "text-error opacity-50"}`,
+                },
+                [
+                  span({
+                    class: () =>
+                      `mr-2 ${req.check() ? "icon-[lucide--check]" : "icon-[lucide--x]"}`,
+                  }),
+                  req.label,
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    }),
   ]);
 };