sigpro-ui/dist/sigpro-ui.esm.js

// src/sigpro-ui.js
import { $, watch, h, mount, when, each, isFunc } from "./sigpro.js";
var val = (val2) => typeof val2 === "function" ? val2() : val2;
var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
var filterBy = (items, query, field = "label") => {
  const q = String(val(query) || "").toLowerCase();
  const list = (val(items) || []).map((i) => typeof i === "object" ? i : { label: i, value: i });
  return !q ? list : list.filter((item) => String(item[field] || "").toLowerCase().includes(q));
};
var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
var hide = () => document.activeElement?.blur();
var currentLocale = $("en");
var lang = {
  es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
  en: { uploadFiles: "Drag and drop or click to select" }
};
var setLocale = (locale) => {
  if (lang[locale])
    currentLocale(locale);
};
var t = (t2) => () => lang[currentLocale()][t2] || t2;
var c1 = (tag, cls2) => (p) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() });
var c2 = (tag, cls2) => (p, c) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() }, c);
var ct = (tag, cls2, type) => (p) => h(tag, { type, ...p, class: `${cls2} ${p?.class || ""}`.trim() });
var Alert = c2("div", "alert");
var Avatar = (p, c) => h("div", { class: "avatar" }, h("div", { class: p.class }, c));
var AvatarGroup = c2("div", "avatar-group -space-x-6");
var Badge = c2("span", "badge");
var Breadcrumbs = c2("div", "breadcrumbs");
var Button = c2("button", "btn");
var Card = c2("div", "card");
var CardTitle = c2("div", "card-title");
var CardBody = c2("div", "card-body");
var CardActions = c2("div", "card-actions");
var Carousel = c2("div", "carousel");
var CarouselItem = c2("div", "carousel-item");
var Chat = c2("div", "chat");
var ChatBubble = c2("div", "chat-bubble");
var ChatFooter = c2("div", "chat-footer");
var ChatHeader = c2("div", "chat-header");
var ChatImage = (p, c) => h("div", { ...p, class: cls("chat-image avatar", p.class) }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
var Checkbox = ct("input", "checkbox", "checkbox");
var Drawer = c2("div", "drawer");
var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => val(p.checked), onchange: (e) => isFunc(p.checked) && p.checked(e.target.checked) });
var DrawerContent = c2("div", "drawer-content");
var DrawerSide = c2("div", "drawer-side");
var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) });
var Divider = c1("div", "divider");
var Dropdown = c2("div", "dropdown");
var DropdownButton = (p, c) => h("div", { ...p, tabindex: "0", role: "button", class: cls("btn", p.class) }, c);
var DropdownContent = (p, c) => h("div", { ...p, tabindex: "0", class: cls("dropdown-content", p.class) }, c);
var Fab = (p, c) => h("div", { class: "fab" }, [h("div", { tabindex: "0", role: "button", class: cls("btn", p.class) }, Icon({}, p.icon)), c]);
var Fieldset = (p, c) => h("fieldset", { class: cls("fieldset", p.class) }, [h("legend", { class: "fieldset-legend" }, p.label), c]);
var Icon = (p, c) => h("span", { ...p, class: cls(c, p.class) });
var Indicator = (p, c) => h("div", { ...p, class: cls("indicator", p.class) }, [p.value && h("span", { class: cls("indicator-item badge", p.class) }, p.value), c]);
var Kbd = c2("kbd", "kbd");
var List = c2("ul", "list");
var ListRows = (p) => () => (val(p.items) || []).map((item, idx) => h("li", { class: cls("list-row", p.class, item?.class) }, typeof p.render === "function" ? p.render(item, idx) : item));
var Loading = c2("span", "loading loading-spinner");
var Navbar = c2("div", "navbar");
var Progress = c1("progress", "progress");
var Radial = (p, c) => h("div", { class: cls("radial-progress", p.class), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
var Radio = ct("input", "radio", "radio");
var Range = ct("input", "range", "range");
var Rating = c2("div", "rating");
var RatingItems = (p) => [...Array(p.count)].map((_, i) => h("input", { class: cls("mask", p.class), name: p.name, type: "radio", checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }));
var Skeleton = c1("div", "skeleton");
var SkeletonText = c1("span", "skeleton skeleton-text");
var Stack = c2("div", "stack");
var Stats = c2("div", "stats shadow");
var Steps = c2("ul", "steps");
var Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
var Swap = c2("label", "swap");
var SwapToggle = (p) => h("input", { type: "checkbox", checked: () => val(p.value), onchange: (e) => isFunc(p.value) && p.value(e.target.checked), class: p.class });
var SwapOn = c2("div", "swap-on");
var SwapOff = c2("div", "swap-off");
var Table = c2("table", "table");
var Textarea = c1("textarea", "textarea");
var Textrotate = (p, c) => h("span", { ...p, class: cls("text-rotate", p.class) }, h("span", {}, c));
var Timeline = c2("ul", "timeline");
var Toggle = ct("input", "toggle", "checkbox");
var Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
var Accordion = (p) => {
  const name = p.name || rand("acc");
  return each(p.items, (it) => {
    return h("div", { class: cls("collapse", p.class) }, [
      h("input", { type: "radio", name, checked: it.open || undefined }),
      it.title ? h("div", { class: cls("collapse-title", `${it.classTitle ?? " font-semibold"}`) }, it.title) : null,
      it.content ? h("div", { class: cls("collapse-content text-sm", `${it.classContent ?? " font-semibold"}`) }, it.content) : null
    ]);
  });
};
var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
  const query = $(val(value) || "");
  const filtered = $(() => filterBy(items, query()));
  const pick = (item) => {
    const display = getBy(item);
    const actual = typeof item === "string" ? item : item.value;
    query(display);
    if (isFunc(value))
      value(actual);
    onselect?.(item);
    hide();
  };
  return Dropdown({ class: "w-80" }, [
    h("div", { tabindex: "0", role: "button", class: "w-full" }, Input({ ...props, placeholder, value: query, left: Icon({}, "icon-[lucide--search]") })),
    DropdownContent({ class: "p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50" }, h("ul", { class: "menu flex-col flex-nowrap w-full p-0" }, [
      each(filtered, (item) => h("li", {}, [h("a", { onmousedown: (e) => e.preventDefault(), onclick: () => pick(item) }, getBy(item))]), "value"),
      () => filtered().length === 0 ? h("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
    ]))
  ]);
};
var Calendar = (p) => {
  const internalDate = $(new Date);
  const hoverDate = $(null);
  const startHour = $(0);
  const endHour = $(0);
  const now = new Date;
  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
  const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
  const rangeMode = () => val(p.range) === true;
  const current = () => val(p.value);
  const selectDate = (date) => {
    const s = fmt(date);
    const v = current();
    if (rangeMode()) {
      if (!v?.start || v.start && v.end) {
        p.onChange?.({ start: s, end: null, ...p.hour && { startHour: startHour() } });
      } else {
        const start = v.start;
        const nv = s < start ? { start: s, end: start } : { start, end: s };
        if (p.hour) {
          nv.startHour = v.startHour ?? startHour();
          nv.endHour = endHour();
        }
        p.onChange?.(nv);
      }
    } else {
      p.onChange?.(p.hour ? `${s}T${String(startHour()).padStart(2, "0")}:00:00` : s);
    }
  };
  const move = (m) => {
    const d = internalDate();
    internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
  };
  const moveYear = (y) => {
    const d = internalDate();
    internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
  };
  const HourSlider = ({ value: hVal, onChange: onH }) => h("div", { class: "flex-1" }, [
    h("div", { class: "flex gap-2 items-center" }, [
      h("input", { type: "range", min: 0, max: 23, value: hVal, class: "range range-xs flex-1", oninput: (e) => onH(+e.target.value) }),
      h("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val(hVal)).padStart(2, "0") + ":00")
    ])
  ]);
  return h("div", {
    class: cls("p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none", p.class)
  }, [
    h("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
      h("div", { class: "flex gap-0.5" }, [
        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, h("span", { class: "icon-[lucide--chevrons-left]" })),
        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, h("span", { class: "icon-[lucide--chevron-left]" }))
      ]),
      h("span", { class: "font-bold uppercase flex-1 text-center" }, () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })),
      h("div", { class: "flex gap-0.5" }, [
        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, h("span", { class: "icon-[lucide--chevron-right]" })),
        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, h("span", { class: "icon-[lucide--chevrons-right]" }))
      ])
    ]),
    h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
      ...["L", "M", "X", "J", "V", "S", "D"].map((d) => h("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
      () => {
        const d = internalDate(), y = d.getFullYear(), m = d.getMonth();
        const firstDay = new Date(y, m, 1).getDay();
        const offset = firstDay === 0 ? 6 : firstDay - 1;
        const dim = new Date(y, m + 1, 0).getDate();
        const cells = [];
        for (let i = 0;i < offset; i++)
          cells.push(h("div"));
        for (let i = 1;i <= dim; i++) {
          const date = new Date(y, m, i), ds = fmt(date);
          cells.push(h("button", {
            type: "button",
            class: () => {
              const v = current(), h2 = hoverDate();
              const isStart = typeof v === "string" ? v.split("T")[0] === ds : v?.start === ds;
              const isEnd = v?.end === ds;
              let inRange = false;
              if (rangeMode() && v?.start) {
                const start = v.start;
                if (!v.end && h2)
                  inRange = ds > start && ds <= h2 || ds < start && ds >= h2;
                else if (v.end)
                  inRange = ds > start && ds < v.end;
              }
              const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
              const st = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
              const today = ds === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
              return cls(base, st, today);
            },
            onmouseenter: () => rangeMode() && hoverDate(ds),
            onclick: () => selectDate(date)
          }, i.toString()));
        }
        return cells;
      }
    ]),
    p.hour ? h("div", { class: "mt-3 pt-2 border-t border-base-300" }, rangeMode() ? h("div", { class: "flex gap-4" }, [HourSlider({ value: startHour, onChange: (h2) => startHour(h2) }), HourSlider({ value: endHour, onChange: (h2) => endHour(h2) })]) : HourSlider({ value: startHour, onChange: (h2) => startHour(h2) })) : null
  ]);
};
var Colorpicker = (p) => {
  const current = () => val(p.value) || "#000000";
  return Dropdown({}, [
    DropdownButton({ class: "btn" }, [
      h("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
      p.label && h("span", {}, p.label)
    ]),
    DropdownContent({ class: "p-0" }, ColorPalette({ value: p.value, onchange: (c) => {
      isFunc(p.value) ? p.value(c) : p.onchange?.(c);
    } }))
  ]);
};
var ColorPalette = (p) => {
  const current = () => val(p.value) || "#000000";
  const palette = [
    "#000",
    "#1A1A1A",
    "#333",
    "#4D4D4D",
    "#666",
    "#808080",
    "#B3B3B3",
    "#FFF",
    "#450a0a",
    "#7f1d1d",
    "#991b1b",
    "#b91c1c",
    "#dc2626",
    "#ef4444",
    "#f87171",
    "#fca5a5",
    "#431407",
    "#7c2d12",
    "#9a3412",
    "#c2410c",
    "#ea580c",
    "#f97316",
    "#fb923c",
    "#ffedd5",
    "#713f12",
    "#a16207",
    "#ca8a04",
    "#eab308",
    "#facc15",
    "#fde047",
    "#fef08a",
    "#fff9c4",
    "#064e3b",
    "#065f46",
    "#059669",
    "#10b981",
    "#34d399",
    "#4ade80",
    "#84cc16",
    "#d9f99d",
    "#082f49",
    "#075985",
    "#0284c7",
    "#0ea5e9",
    "#38bdf8",
    "#7dd3fc",
    "#22d3ee",
    "#cffafe",
    "#1e1b4b",
    "#312e81",
    "#4338ca",
    "#4f46e5",
    "#6366f1",
    "#818cf8",
    "#a5b4fc",
    "#e0e7ff",
    "#2e1065",
    "#4c1d95",
    "#6d28d9",
    "#7c3aed",
    "#8b5cf6",
    "#a855f7",
    "#d946ef",
    "#fae8ff"
  ];
  const pick = (c) => {
    isFunc(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}`,
    class: () => {
      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);
    }
  }))));
};
var Datepicker = (p) => {
  const displayValue = $("");
  const rangeMode = () => val(p.range) === true;
  watch(() => {
    const v = val(p.value);
    if (!v)
      return displayValue("");
    let text = "";
    if (typeof v === "string") {
      text = p.hour && v.includes("T") ? v.replace("T", " ") : v;
    } else if (v.start && v.end) {
      const startStr = p.hour && v.startHour != null ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
      const endStr = p.hour && v.endHour != null ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
      text = `${startStr} - ${endStr}`;
    } else if (v.start) {
      const startStr = p.hour && v.startHour != null ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
      text = `${startStr}...`;
    }
    displayValue(text);
  });
  const handleChange = (val2) => {
    if (isFunc(p.value))
      p.value(val2);
    else
      p.onChange?.(val2);
    if (!rangeMode() || val2?.end != null)
      hide();
  };
  return Dropdown({ class: cls("w-full", p.class) }, [
    h("label", {
      tabindex: "0",
      role: "button",
      class: "input input-bordered flex items-center gap-2 cursor-pointer"
    }, [
      h("span", { class: "icon-[lucide--calendar] shrink-0" }),
      h("span", {
        class: () => `grow text-left truncate ${!displayValue() ? "opacity-50" : ""}`
      }, () => displayValue() || p.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")),
      () => displayValue() ? h("button", {
        type: "button",
        class: "btn btn-ghost btn-xs btn-circle -mr-2",
        onmousedown: (e) => {
          e.preventDefault();
          e.stopPropagation();
          if (isFunc(p.value))
            p.value(null);
          else
            p.onChange?.(null);
          displayValue("");
        }
      }, h("span", { class: "icon-[lucide--x] opacity-50" })) : null
    ]),
    DropdownContent({ class: "p-0" }, Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange }))
  ]);
};
var Fileinput = (p) => {
  const files = $([]);
  const drag = $(false);
  const error = $(null);
  const maxBytes = (p.max || 2) * 1024 * 1024;
  const process = (fileList) => {
    const arr = Array.from(fileList);
    error(null);
    if (arr.some((f) => f.size > maxBytes)) {
      error(`Máx ${p.max || 2}MB`);
      return;
    }
    const updated = [...files(), ...arr];
    files(updated);
    if (isFunc(p.onselect))
      p.onselect(updated);
    else if (isFunc(p.value))
      p.value(updated);
  };
  const remove = (idx) => {
    const updated = files().filter((_, i) => i !== idx);
    files(updated);
    if (isFunc(p.onselect))
      p.onselect(updated);
    else if (isFunc(p.value))
      p.value(updated);
  };
  return h("div", { class: cls("fieldset w-full p-0", p.class) }, [
    h("label", {
      class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${drag() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}`,
      ondragover: (e) => {
        e.preventDefault();
        drag(true);
      },
      ondragleave: () => drag(false),
      ondrop: (e) => {
        e.preventDefault();
        drag(false);
        process(e.dataTransfer.files);
      }
    }, [
      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" }, t("uploadFiles")),
        h("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${p.max || 2}MB`)
      ]),
      h("input", {
        type: "file",
        multiple: true,
        accept: p.accept || "*",
        class: "hidden",
        onchange: (e) => process(e.target.files)
      })
    ]),
    () => error() && h("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
    when(() => files().length > 0, () => h("ul", { class: "mt-2 space-y-1" }, each(files, (file, idx) => h("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
      h("div", { class: "flex items-center gap-2 truncate" }, [
        h("span", { class: "opacity-50" }, "\uD83D\uDCC4"),
        h("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
        h("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
      ]),
      h("button", {
        type: "button",
        class: "btn btn-ghost btn-xs btn-circle",
        onclick: (e) => {
          e.preventDefault();
          remove(idx);
        }
      }, h("span", { class: "icon-[lucide--x]" }))
    ]))))
  ]);
};
var Input = (p) => {
  const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
  const showPassword = $(false);
  const isPassword = p.type === "password";
  const pattern = rule ?? null;
  const inputType = () => isPassword ? val(showPassword) ? "text" : "password" : p.type || "search";
  return h("label", { class: float ? "floating-label" : "" }, [
    float ? h("span", {}, label2) : null,
    h("label", { pattern, class: () => cls("input validator", p.class) }, [
      label2 && !float ? h("span", { class: "label" }, label2) : null,
      left ?? null,
      h("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
      right ?? null,
      isPassword ? Swap({ class: "ml-2" }, [
        SwapToggle({ value: showPassword, class: "swap-rotate" }),
        SwapOn({}, Icon({}, "icon-[lucide--eye]")),
        SwapOff({}, Icon({}, "icon-[lucide--eye-off]"))
      ]) : null
    ]),
    hint ? h("div", { class: "validator-hint" }, hint) : null
  ]);
};
var Menu = (p) => {
  if (p.children !== undefined)
    return h("ul", { class: cls("menu", p.class), ...p }, p.children);
  const { items } = p;
  const render = (item) => item.children ? h("li", {}, h("details", { open: item.open || undefined }, [
    h("summary", {}, getBy(item)),
    h("ul", {}, each(() => val(item.children) || [], render))
  ])) : h("li", {}, h("a", {
    href: item.href,
    onclick: item.onclick ? (e) => {
      if (!item.href)
        e.preventDefault();
      item.onclick(e);
    } : null
  }, getBy(item)));
  return h("ul", { class: cls("menu", p.class) }, each(() => val(items) || [], render));
};
var Modal = (p, c) => {
  let dialogRef = null;
  watch(() => {
    const isOpen = val(p.open);
    if (!dialogRef)
      return;
    isOpen ? dialogRef.showModal() : dialogRef.close();
  });
  const close = () => isFunc(p.open) && p.open(false);
  return h("dialog", { ...p, ref: (el) => dialogRef = el, class: cls("modal", p.class), onclose: close, oncancel: close }, [
    h("div", { class: "modal-box" }, [
      p.title && h("h3", { class: "text-lg font-bold" }, p.title),
      c,
      h("div", { class: "modal-action" }, [
        p.actions || Button({ class: "btn", onclick: close }, "Cerrar")
      ])
    ]),
    h("form", { method: "dialog", class: "modal-backdrop" }, [
      h("button", {}, "close")
    ])
  ]);
};
var Select = (p, c) => {
  if (c !== undefined)
    return h("select", { class: cls("select", p.class), ...p }, c);
  const { label: label2, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p;
  const opts = () => {
    const raw = val(items) || [];
    const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: "" }] : [];
    return [...ph, ...raw];
  };
  return h("label", { class: float ? "floating-label" : "" }, [
    float ? h("span", {}, label2) : null,
    h("label", { class: cls("select", rest.class) }, [
      !float && label2 ? h("span", { class: "label" }, label2) : null,
      left ?? null,
      h("select", {
        value: () => val(value),
        onchange: (e) => isFunc(value) ? value(e.target.value) : rest.onchange?.(e)
      }, each(opts, (item) => {
        const val2 = getBy(item, item.value !== undefined ? "value" : undefined);
        const lab = getBy(item, "label");
        return h("option", { value: val2, disabled: item.disabled || undefined }, lab);
      })),
      right ?? null
    ]),
    hint ? h("div", { class: "validator-hint" }, hint) : null
  ]);
};
var Stat = (p) => h("div", { ...p, class: cls("stat", p.class) }, [
  p.title ? h("div", { class: "stat-title" }, p.title) : null,
  p.value ? h("div", { class: "stat-value" }, p.value) : null,
  p.desc ? h("div", { class: "stat-desc" }, p.desc) : null
]);
var TableItems = ({ items, columns = [], header = true }) => {
  const head = header !== false && columns.some((c) => c.label) ? h("thead", {}, h("tr", {}, columns.map((c) => h("th", { class: c.class }, c.label)))) : null;
  const body = h("tbody", {}, () => {
    const list = val(items) || [];
    return list.map((it, idx) => h("tr", {}, columns.map((c) => {
      const v = c.render ? c.render(it, idx) : it[c.key];
      return h("td", { class: c.class }, v);
    })));
  });
  return [head, body].filter(Boolean);
};
var Tabs = (p, c) => {
  if (!p.items) {
    const { class: className2, ...rest2 } = p;
    return h("div", { ...rest2, class: cls("tabs", className2) }, c);
  }
  const { items, activeIndex, onClose, class: className, ...rest } = p;
  const get = (x) => isFunc(x) ? x() : x;
  const closeH = onClose || (isFunc(items) ? (idx, item) => {
    const arr = val(items);
    const newArr = arr.filter((_, i) => i !== idx);
    items(newArr);
    if (activeIndex() >= newArr.length)
      activeIndex(Math.max(0, newArr.length - 1));
  } : null);
  return h("div", { ...rest, class: cls("tabs", className) }, () => {
    const list = val(items) || [];
    return list.flatMap((it, idx) => {
      const isActive = () => activeIndex() === idx;
      const button = h("button", {
        class: () => `tab ${isActive() ? "tab-active" : ""} ${it.class || ""}`,
        onclick: (e) => {
          e.preventDefault();
          activeIndex(idx);
          it.onclick?.(e);
        }
      }, [
        getBy(it),
        it.closable ? h("span", {
          class: "ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-base-300 text-base-content/60 hover:text-base-content cursor-pointer",
          onclick: (e) => {
            e.stopPropagation();
            closeH?.(idx, it);
          }
        }, h("span", { class: "icon-[lucide--x] w-3 h-3" })) : null
      ]);
      const contentDiv = h("div", {
        class: "tab-content bg-base-100 border-base-300 p-6",
        style: () => `display: ${isActive() ? "block" : "none"};`
      }, isFunc(it.content) ? it.content() : it.content);
      return [button, contentDiv];
    });
  });
};
var Toast = (message, type = "alert-success", duration = 3500) => {
  let container = document.getElementById("sigpro-toast-container");
  if (!container) {
    container = h("div", { id: "sigpro-toast-container", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" });
    document.body.appendChild(container);
  }
  const host = h("div", { style: "display: contents" });
  container.appendChild(host);
  let closeFn, timer, enterTimer;
  const ToastComponent = () => {
    const visible = $(false);
    const leaving = $(false);
    closeFn = () => {
      if (leaving())
        return;
      clearTimeout(timer);
      clearTimeout(enterTimer);
      leaving(true);
      setTimeout(() => {
        instance.destroy();
        host.remove();
        if (!container.hasChildNodes())
          container.remove();
      }, 300);
    };
    enterTimer = setTimeout(() => visible(true), 0);
    const content = typeof message === "function" ? val(message) : message;
    const msgNode = typeof content === "string" ? h("span", {}, content) : content;
    return h("div", {
      class: () => {
        const base = `alert alert-soft ${type} shadow-lg transition-all duration-300 inline-flex w-auto whitespace-nowrap pointer-events-auto`;
        if (leaving())
          return `${base} translate-x-full opacity-0`;
        if (visible())
          return `${base} translate-x-0 opacity-100`;
        return `${base} translate-x-10 opacity-0`;
      }
    }, [
      msgNode,
      h("button", {
        class: "btn btn-xs btn-circle btn-ghost",
        onclick: closeFn
      }, h("span", { class: "icon-[lucide--x]" }))
    ]);
  };
  const instance = mount(ToastComponent, host);
  if (duration > 0)
    timer = setTimeout(closeFn, duration);
  return closeFn;
};
export {
  val,
  t,
  setLocale,
  rand,
  lang,
  hide,
  getBy,
  filterBy,
  cls,
  Tooltip,
  Toggle,
  Toast,
  Timeline,
  Textrotate,
  Textarea,
  Tabs,
  TableItems,
  Table,
  SwapToggle,
  SwapOn,
  SwapOff,
  Swap,
  Steps,
  Step,
  Stats,
  Stat,
  Stack,
  SkeletonText,
  Skeleton,
  Select,
  RatingItems,
  Rating,
  Range,
  Radio,
  Radial,
  Progress,
  Navbar,
  Modal,
  Menu,
  Loading,
  ListRows,
  List,
  Kbd,
  Input,
  Indicator,
  Icon,
  Fileinput,
  Fieldset,
  Fab,
  DropdownContent,
  DropdownButton,
  Dropdown,
  DrawerToggle,
  DrawerSide,
  DrawerOverlay,
  DrawerContent,
  Drawer,
  Divider,
  Datepicker,
  Colorpicker,
  ColorPalette,
  Checkbox,
  ChatImage,
  ChatHeader,
  ChatFooter,
  ChatBubble,
  Chat,
  CarouselItem,
  Carousel,
  CardTitle,
  CardBody,
  CardActions,
  Card,
  Calendar,
  Button,
  Breadcrumbs,
  Badge,
  AvatarGroup,
  Avatar,
  Autocomplete,
  Alert,
  Accordion
};