Correct components errors

sigpro-ui.js

@@ -1,6 +1,6 @@
 // All base components
 import { h, each, watch, when, mount, $ } from "sigpro";
-import { get, getBy, cls, isFn, filterBy, rand, close } from "./sigpro-helpers.js"
+import { get, getBy, cls, isFn, filterBy, rand, hide } from "./sigpro-helpers.js"
 
 export const Accordion = (p) => {
   const name = p.name || rand('acc')
@@ -13,7 +13,7 @@ export const Accordion = (p) => {
   });
 }
 export const Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c);
-export const Avatar = (p, c) => h("div", { ...p, class: cls("avatar", p.class) }, c);
+export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c));
 export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
 export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
   const query = $(get(value) || '')
@@ -25,7 +25,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
     query(display)
     if (isFn(value)) value(actual)
     onselect?.(item)
-    close()
+    hide()
   }
 
   return Dropdown({ class: 'w-full' }, [
@@ -171,8 +171,10 @@ export const Colorpicker = (p) => {
       h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }),
       p.label && h('span', {}, p.label)
     ]),
-    DropdownContent({ class: 'p-3 bg-base-100 rounded-box shadow-xl w-64' },
-      ColorPalette({ value: p.value, onchange: (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c); } })
+    DropdownContent({ class: 'p-0' },
+      ColorPalette({
+        value: p.value, onchange: (c) => { isFn(p.value) ? p.value(c) : p.onchange?.(c) }
+      })
     )
   ])
 }
@@ -188,8 +190,14 @@ export const ColorPalette = (p) => {
     '#1e1b4b', '#312e81', '#4338ca', '#4f46e5', '#6366f1', '#818cf8', '#a5b4fc', '#e0e7ff',
     '#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff'
   ]
-  const pick = (c) => isFn(p.value) ? p.value(c) : p.onchange?.(c)
-  return h('div', { class: 'grid grid-cols-8 gap-1' },
+  const pick = (c) => {
+    isFn(p.value) ? p.value(c) : p.onchange?.(c)
+    hide()
+  }
+
+  return h('div', {
+    class: cls('p-3 bg-base-100 rounded-box shadow w-64', p.class)
+  }, h('div', { class: 'grid grid-cols-8 gap-1' },
     palette.map(c => h('button', {
       type: 'button',
       style: `background-color: ${c}`,
@@ -197,10 +205,9 @@ export const ColorPalette = (p) => {
         const act = current().toLowerCase() === c.toLowerCase()
         return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? 'ring-2 ring-offset-1 ring-primary z-10 scale-110' : ''}`
       },
-      onclick: () => { pick(c); close() }
-    })
-    )
-  )
+      onclick: () => { pick(c) }
+    }))
+  ))
 }
 export const Datepicker = (p) => {
   const displayValue = $("")
@@ -226,7 +233,7 @@ export const Datepicker = (p) => {
   const handleChange = (val) => {
     if (isFn(p.value)) p.value(val)
     else p.onChange?.(val)
-    if (!rangeMode() || val?.end != null) close()
+    if (!rangeMode() || val?.end != null) hide()
   }
 
   return Dropdown({ class: cls('w-full', p.class) }, [
@@ -251,7 +258,7 @@ export const Datepicker = (p) => {
         }
       }, h('span', { class: 'icon-[lucide--x] opacity-50' })) : null
     ]),
-    DropdownContent({ class: 'p-0 bg-base-100 rounded-box shadow-xl' },
+    DropdownContent({ class: 'p-0' },
       Calendar({
         value: p.value,
         range: rangeMode(),
@@ -305,7 +312,7 @@ export const Fileinput = (p) => {
     }, [
       h('div', { class: 'flex items-center gap-3 w-full' }, [
         h('span', { class: 'icon-[lucide--upload]' }),
-        h('span', { class: 'text-sm opacity-70 truncate grow text-left' }, 'Arrastra o selecciona archivos...'),
+        h('span', { class: 'text-sm opacity-70 truncate grow text-left' }, 'Drag and drop...'),
         h('span', { class: 'text-[10px] opacity-40 shrink-0' }, `Máx ${p.max || 2}MB`)
       ]),
       h('input', {
@@ -393,7 +400,7 @@ export const Modal = (p) => {
   watch(() => {
     const isOpen = get(p.open);
     if (!dialogRef) return;
-    isOpen ? dialogRef.showModal() : dialogRef.close();
+    isOpen ? dialogRef.showModal() : dialogRef.hide();
   });
 
   const close = () => isFn(p.open) && p.open(false);
@@ -419,7 +426,7 @@ export const Modal = (p) => {
 };
 export const Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c);
 export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) });
-export const Radial = (p, c) => h("div", { ...p, class: cls("radial-progress", p.class), style: `--value:${p.value ?? 0};${p.style ?? ''}`, role: "progressbar", "aria-valuenow": p.value ?? 0 }, c ?? `${p.value ?? 0}%`)
+export const Radial = (p, c) => h("div", { class: cls("radial-progress", p.class,), style: `--value:${get(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c)
 export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
 export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
 export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c);
@@ -516,7 +523,7 @@ export const Tabs = (p, c) => {
   })
 }
 export const Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) });
-export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, c)
+export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, h('span', {}, c))
 export const Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
 export const Toast = (message, type = "alert-success", duration = 3500) => {
   let container = document.getElementById("sigpro-toast-container");