minusculas

components/Accordion.js

@@ -1,15 +0,0 @@
-// components/Accordion.js
-import { Tag } from "sigpro";
-import { Collapse } from "./Collapse.js";
-
-export const Accordion = (props) => {
-  const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
-  return Tag("div", { class: `space-y-2 ${props.class ?? ''}` }, 
-    props.items.map(item => Collapse({
-      ...item,
-      name,
-      type: "radio",
-      class: item.class
-    }, item.children))
-  );
-};

components/Collapse.js

@@ -1,7 +0,0 @@
-// components/Collapse.js
-import { Tag } from "sigpro";
-
-export const Collapse = (props, children) => {
-  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `collapse ${props.class ?? ''}` }, children);
-};

components/Input.js

@@ -1,4 +0,0 @@
-// components/Input.js
-import { Tag } from "sigpro";
-
-export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });

components/_Base.js

@@ -1,84 +0,0 @@
-import { $, Tag } from "sigpro";
-
-import { Tag } from "sigpro";
-
-export const Alert = (props, children) => Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
-export const Badge = (props, children) => Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
-export const Button = (props, children) => Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
-export const Card = (props, children) => Tag("div", { ...props, class: `card ${props.class ?? ''}` }, children);
-export const CardTitle = (props, children) => Tag("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
-export const CardBody = (props, children) => Tag("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
-export const CardActions = (props, children) => Tag("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
-export const Carousel = (props, children) => Tag("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
-export const CarouselItem = (props, children) => Tag("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
-export const Chat = (props, children) => Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
-export const ChatBubble = (props, children) => Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
-export const Checkbox = (props) => Tag("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
-export const Collapse = (props, children) => Tag("div", { ...props, class: `collapse ${props.class ?? ''}` }, children);
-export const Divider = (props) => Tag("div", { ...props, class: `divider ${props.class ?? ''}` });
-export const Drawer = (props, children) => Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
-export const Dropdown = (props, children) => Tag("details", { ...props, class: `dropdown ${props.class ?? ''}` }, children);
-export const Fab = (props, children) => Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
-export const Fieldset = (props, children) => Tag("fieldset", { ...props, class: `fieldset ${props.class ?? ''}` }, children);
-export const Indicator = (props, children) => Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, children);
-export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });
-export const Kbd = (props, children) => Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
-export const Label = (props, children) => Tag("label", { ...props, class: `label ${props.class ?? ''}` }, children);
-export const List = (props, children) => Tag("ul", { ...props, class: `list ${props.class ?? ''}` }, children);
-export const Menu = (props, children) => Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
-export const Modal = (props, children) => Tag("dialog", { ...props, class: `modal ${props.class ?? ''}` }, children);
-export const Navbar = (props, children) => Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
-export const Radio = (props) => Tag("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
-export const Range = (props) => Tag("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
-export const Rating = (props, children) => Tag("div", { ...props, class: `rating ${props.class ?? ''}` }, children);
-export const Select = (props, children) => Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
-export const Skeleton = (props) => Tag("div", { ...props, class: `skeleton ${props.class ?? ''}` });
-export const Stack = (props, children) => Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
-export const Stat = (props, children) => Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, children);
-export const Stats = (props, children) => Tag("div", { ...props, class: `stats ${props.class ?? ''}` }, children);
-export const Steps = (props, children) => Tag("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
-export const Step = (props, children) => Tag("li", { ...props, class: `step ${props.class ?? ''}` }, children);
-export const Swap = (props, children) => Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, children);
-export const Table = (props, children) => Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
-export const Tab = (props, children) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
-export const Tabs = (props, children) => Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
-export const TabContent = (props, children) => Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
-export const Textarea = (props) => Tag("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
-export const Timeline = (props, children) => Tag("ul", { ...props, class: `timeline ${props.class ?? ''}` }, children);
-export const Toast = (props, children) => Tag("div", { ...props, class: `toast ${props.class ?? ''}` }, children);
-export const Toggle = (props) => Tag("input", { ...props, type: "checkbox", class: `toggle ${props.class ?? ''}` });
-export const Tooltip = (props, children) => Tag("div", { ...props, class: `tooltip ${props.class ?? ''}` }, children);
-
-
-// Complex
-export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
-  Tag("span", { class: "flex items-center" }, [
-    p.label,
-    Tag("span", {
-      class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
-      onclick: (e) => { e.stopPropagation(); p.onClose?.(e); }
-    })
-  ])
-]);
-
-export const TabItems = (props) => {
-  const items = typeof p.items === "function" ? p.items : () => p.items || [];
-  return For(
-    items,
-    (item, idx) => {
-      const TabComp = item.closable ? TabClose : Tab;
-      return [
-        TabComp({
-          label: item.label,
-          class: () => p.activeIndex() === idx ? "tab-active" : "",
-          onclick: (e) => { e.preventDefault(); p.activeIndex(idx); },
-          onClose: () => p.onClose?.(idx, item)
-        }),
-        TabContent({
-          style: () => `display: ${p.activeIndex() === idx ? "block" : "none"};`
-        }, typeof item.content === "function" ? item.content() : item.content)
-      ];
-    },
-    (item, idx) => item.id ?? idx
-  );
-};

components/accordion.js

@@ -0,0 +1,22 @@
+// components/Accordion.js
+import { Tag } from "sigpro";
+
+export const Accordion = (props) => {
+  const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
+  
+  if (props.items && Array.isArray(props.items)) {
+    return Tag("div", { class: `space-y-2 ${props.class ?? ''}` }, 
+      props.items.map(item => Tag("div", { class: `collapse ${item.class ?? ''}` }, [
+        Tag("input", { type: "radio", name, checked: item.open }),
+        Tag("div", { class: "collapse-title text-xl font-medium" }, item.title),
+        Tag("div", { class: "collapse-content" }, item.children)
+      ]))
+    );
+  }
+  
+  return Tag("div", { class: `collapse ${props.class ?? ''}` }, [
+    Tag("input", { type: "radio", name, checked: props.open }),
+    Tag("div", { class: "collapse-title text-xl font-medium" }, props.title),
+    Tag("div", { class: "collapse-content" }, props.children)
+  ]);
+};

components/autocomplete.js

@@ -10,15 +10,15 @@ export const Autocomplete = (props) => {
   Watch(() => {
     const v = typeof props.value === "function" ? props.value() : props.value;
     return v || "";
-  }, (newVal) => query(newVal));
+  }, (newVal) => setTimeout(() => query(newVal), 0));
 
   Watch(() => {
     const q = String(query()).toLowerCase();
     const allItems = typeof props.items === "function" ? props.items() : props.items;
     const filtered = q
       ? allItems.filter((item) =>
-          (typeof item === "string" ? item : item.label).toLowerCase().includes(q)
-        )
+        (typeof item === "string" ? item : item.label).toLowerCase().includes(q)
+      )
       : allItems;
     filteredItems(filtered);
   });
@@ -57,8 +57,8 @@ export const Autocomplete = (props) => {
         ...props,
         type: "text",
         class: "grow",
-        value: query,
         placeholder: props.placeholder || "Buscar...",
+        value: query,
         onfocus: () => isOpen(true),
         onblur: () => setTimeout(() => isOpen(false), 150),
         onkeydown: handleKeyDown,
@@ -71,7 +71,7 @@ export const Autocomplete = (props) => {
         }
       })
     ]),
-    
+
     Tag("ul", {
       class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
       style: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};`

components/datepicker.js

@@ -1,6 +1,6 @@
 // components/Datepicker.js
 import { $, Tag, If, Watch } from "sigpro";
-import { Calendar } from "./Calendar.js";
+import { Calendar } from "./calendar.js";
 
 export const Datepicker = (props) => {
   const isOpen = $(false);

components/input.js

@@ -0,0 +1,13 @@
+// components/Input.js
+import { Tag } from "sigpro";
+
+export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });
+
+export const InputLabel = (props) => Tag("label", { class: `${props.float ? 'floating-label' : 'input'}` },
+  [
+    Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
+    props.left ?? null,
+    Tag("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }),
+    props.right ?? null
+  ]
+);

components/select.js

@@ -6,8 +6,8 @@ export const Select = (props, children) => {
   return Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
 };
 
-export const Options = (props) => {
-  const placeholderOption = props.placeholder 
+export const SelectItems = (props) => {
+  const placeholderOption = props.placeholder
     ? Tag("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
     : null;
 
@@ -22,4 +22,13 @@ export const Options = (props) => {
   );
 
   return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
-};
+};
+
+export const SelectLabel = (props, children) => Tag("label", { class: `${props.float ? 'floating-label' : 'select'}` },
+  [
+    Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
+    props.left ?? null,
+    Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
+    props.right ?? null
+  ]
+);

components/table.js

@@ -6,7 +6,7 @@ export const Table = (props, children) => {
   return Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
 };
 
-export const Rows = (props) => {
+export const TableItems = (props) => {
   const itemArray = typeof props.items === "function" ? props.items() : (props.items || []);
   
   const thead = props.header !== false && props.columns?.some(col => col.label) ?