var __defProp = Object.defineProperty; var __returnValue = (v) => v; function __exportSetter(name, newValue) { this[name] = __returnValue.bind(null, newValue); } var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true, configurable: true, set: __exportSetter.bind(all, name) }); }; // sigpro-ui.js var exports_sigpro_ui = {}; __export(exports_sigpro_ui, { Tooltip: () => Tooltip, Toggle: () => Toggle, Toast: () => Toast, Timeline: () => Timeline, Textrotate: () => Textrotate, Textarea: () => Textarea, Tabs: () => Tabs, TableItems: () => TableItems, Table: () => Table, SwapToggle: () => SwapToggle, SwapOn: () => SwapOn, SwapOff: () => SwapOff, Swap: () => Swap, Steps: () => Steps, Step: () => Step, Stats: () => Stats, Stat: () => Stat, Stack: () => Stack, SkeletonText: () => SkeletonText, Skeleton: () => Skeleton, Select: () => Select, RatingItems: () => RatingItems, Rating: () => Rating, Range: () => Range, Radio: () => Radio, Radial: () => Radial, Progress: () => Progress, Navbar: () => Navbar, Modal: () => Modal, Menu: () => Menu, Loading: () => Loading, ListRows: () => ListRows, List: () => List, Kbd: () => Kbd, Input: () => Input, Indicator: () => Indicator, Icon: () => Icon, Fileinput: () => Fileinput, Fieldset: () => Fieldset, Fab: () => Fab, DropdownContent: () => DropdownContent, DropdownButton: () => DropdownButton, Dropdown: () => Dropdown, DrawerToggle: () => DrawerToggle, DrawerSide: () => DrawerSide, DrawerOverlay: () => DrawerOverlay, DrawerContent: () => DrawerContent, Drawer: () => Drawer, Divider: () => Divider, Datepicker: () => Datepicker, Colorpicker: () => Colorpicker, ColorPalette: () => ColorPalette, Checkbox: () => Checkbox, ChatImage: () => ChatImage, ChatHeader: () => ChatHeader, ChatFooter: () => ChatFooter, ChatBubble: () => ChatBubble, Chat: () => Chat, CarouselItem: () => CarouselItem, Carousel: () => Carousel, CardTitle: () => CardTitle, CardBody: () => CardBody, CardActions: () => CardActions, Card: () => Card, Calendar: () => Calendar, Button: () => Button, Badge: () => Badge, Autocomplete: () => Autocomplete, Alert: () => Alert, Accordion: () => Accordion }); import { h, each, watch, when, mount, $ } from "sigpro"; // sigpro-helpers.js var get = (val) => typeof val === "function" ? val() : val; var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item; var cls = (...classes) => classes.filter(Boolean).join(" ").trim(); var isFn = (f) => typeof f === "function"; var filterBy = (items, query, field = "label", q = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q)); var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`; var close = () => document.activeElement?.blur(); // sigpro-ui.js 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 Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c); var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => { const query = $(get(value) || ""); const filtered = $(() => filterBy(items, query())); const pick = (item) => { const display = getBy(item); const actual = typeof item === "string" ? item : item.value; query(display); if (isFn(value)) value(actual); onselect?.(item); close(); }; return Dropdown({ class: "w-full" }, [ h("div", { tabindex: "0", role: "button", class: "w-full" }, Input({ ...props, placeholder, value: query, left: h("span", { class: "icon-[lucide--search]" }), oninput: (e) => { query(e.target.value); if (isFn(value)) value(e.target.value); } })), 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)) ]), (item) => getBy(item)), () => filtered().length === 0 ? h("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null ])) ]); }; var Badge = (p, c) => h("span", { ...p, class: cls("badge", p.class) }, c); var Button = (p, c) => h("button", { ...p, class: cls("btn", p.class) }, c); 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 = () => get(p.range) === true; const current = () => get(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(get(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 Card = (p, c) => h("div", { ...p, class: cls("card", p.class) }, c); var CardTitle = (p, c) => h("div", { ...p, class: cls("card-title", p.class) }, c); var CardBody = (p, c) => h("div", { ...p, class: cls("card-body", p.class) }, c); var CardActions = (p, c) => h("div", { ...p, class: cls("card-actions", p.class) }, c); var Carousel = (p, c) => h("div", { ...p, class: cls("carousel", p.class) }, c); var CarouselItem = (p, c) => h("div", { ...p, class: cls("carousel-item", p.class) }, c); var Chat = (p, c) => h("div", { ...p, class: cls("chat", p.class) }, c); var ChatBubble = (p, c) => h("div", { ...p, class: cls("chat-bubble", p.class) }, c); var ChatFooter = (p, c) => h("div", { ...p, class: cls("chat-footer", p.class) }, c); var ChatHeader = (p, c) => h("div", { ...p, class: cls("chat-header", p.class) }, c); 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 = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) }); var Colorpicker = (p) => { const current = () => get(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-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); } })) ]); }; var ColorPalette = (p) => { const current = () => get(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) => isFn(p.value) ? p.value(c) : p.onchange?.(c); return 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); close(); } }))); }; var Datepicker = (p) => { const displayValue = $(""); const rangeMode = () => get(p.range) === true; watch(() => { const v = get(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 = (val) => { if (isFn(p.value)) p.value(val); else p.onChange?.(val); if (!rangeMode() || val?.end != null) close(); }; 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 (isFn(p.value)) p.value(null); else p.onChange?.(null); displayValue(""); } }, h("span", { class: "icon-[lucide--x] opacity-50" })) : null ]), DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange })) ]); }; var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c); var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => get(p.checked), onchange: (e) => isFn(p.checked) && p.checked(e.target.checked) }); var DrawerContent = (p, c) => div({ ...p, class: cls("drawer-content", p.class) }, c); var DrawerSide = (p, c) => div({ ...p, class: cls("drawer-side", p.class) }, c); var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) }); var Divider = (p) => h("div", { ...p, class: cls("divider", p.class) }); var Dropdown = (p, c) => h("div", { ...p, class: cls("dropdown", p.class) }, c); 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 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 (isFn(p.onselect)) p.onselect(updated); else if (isFn(p.value)) p.value(updated); }; const remove = (idx) => { const updated = files().filter((_, i) => i !== idx); files(updated); if (isFn(p.onselect)) p.onselect(updated); else if (isFn(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" }, "Arrastra o selecciona archivos..."), 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 Icon = (p) => h("span", { class: p.startsWith("icon-") ? p : "" }, p.startsWith("icon-") ? null : p); 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 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 ? get(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 Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c); var List = (p, c) => h("ul", { ...p, class: cls("list", p.class) }, c); var ListRows = (p) => () => (get(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 = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c); 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(() => get(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(() => get(items) || [], render)); }; var Modal = (p) => { let dialogRef = null; watch(() => { const isOpen = get(p.open); if (!dialogRef) return; isOpen ? dialogRef.showModal() : dialogRef.close(); }); const close2 = () => isFn(p.open) && p.open(false); return h("dialog", { ...p, ref: (el) => dialogRef = el, class: cls("modal", p.class), onclose: close2, oncancel: close2 }, [ h("div", { class: "modal-box" }, [ p.title && h("h3", { class: "text-lg font-bold" }, p.title), p.children, h("div", { class: "modal-action" }, [ p.actions || Button({ class: "btn", onclick: close2 }, "Cerrar") ]) ]), h("form", { method: "dialog", class: "modal-backdrop" }, [ h("button", {}, "close") ]) ]); }; var Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c); var Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) }); var 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}%`); var Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) }); var Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) }); var Rating = (p, c) => h("div", { ...p, class: "rating" }, c); var RatingItems = (p) => [...Array(p.count)].map((_, i) => h("input", { class: cls("mask", p.class), name: p.name, type: "radio", checked: () => get(p.value) === i, onchange: () => isFn(p.value) ? p.value(i) : p.onchange?.(i) })); 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 = get(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: () => get(value), onchange: (e) => isFn(value) ? value(e.target.value) : rest.onchange?.(e) }, each(opts, (item) => { const val = getBy(item, item.value !== undefined ? "value" : undefined); const lab = getBy(item, "label"); return h("option", { value: val, disabled: item.disabled || undefined }, lab); })), right ?? null ]), hint ? h("div", { class: "validator-hint" }, hint) : null ]); }; var Skeleton = (p) => h("div", { ...p, class: cls("skeleton", p.class) }); var SkeletonText = (p) => h("span", { ...p, class: cls("skeleton skeleton-text", p.class) }); var Stack = (p, c) => h("div", { ...p, class: cls("stack", p.class) }, c); var Stats = (p, c) => h("div", { ...p, class: cls("stats shadow", p.class) }, c); 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 Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c); var Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c); var Swap = (p, c) => h("label", { ...p, class: cls("swap", p.class) }, c); var SwapToggle = (p) => h("input", { type: "checkbox", checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked), class: p.class }); var SwapOn = (p, c) => h("div", { ...p, class: cls("swap-on", p.class) }, c); var SwapOff = (p, c) => h("div", { ...p, class: cls("swap-off", p.class) }, c); var Table = (p, c) => h("table", { ...p, class: cls("table", p.class) }, c); 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 = get(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 get2 = (x) => isFn(x) ? x() : x; const closeH = onClose || (isFn(items) ? (idx, item) => { const arr = get2(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 = get2(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"};` }, isFn(it.content) ? it.content() : it.content); return [button, contentDiv]; }); }); }; var Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) }); var Textrotate = (p, c) => h("span", { ...p, class: cls("text-rotate", p.class) }, c); var Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c); 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" ? get(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; }; var Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) }); var Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c); // sigpro-editor.js var exports_sigpro_editor = {}; __export(exports_sigpro_editor, { Editor: () => Editor }); import { h as h2, $ as $2 } from "sigpro"; var Editor = (p) => { const { value, class: extraClass } = p; let editorRef = null; let savedRange = null; const isSource = $2(false); const source = $2(""); const count = $2(0); const refreshTick = $2(0); const showEmojis = $2(false); const emojis = ["\uD83D\uDE00", "\uD83D\uDE0A", "\uD83D\uDE09", "\uD83E\uDDD0", "\uD83D\uDE2E", "\uD83E\uDD14", "\uD83D\uDE05", "\uD83D\uDE02", "\uD83D\uDE0D", "\uD83D\uDE18", "\uD83E\uDD70", "\uD83D\uDC4D", "\uD83D\uDC4E", "\uD83D\uDC4C", "\uD83E\uDD1D", "\uD83E\uDD1E", "\uD83D\uDC4B", "\uD83D\uDC4F", "\uD83D\uDE4C", "\uD83D\uDE4F", "\uD83D\uDCAA", "☝️", "\uD83D\uDC47", "\uD83D\uDC48", "\uD83D\uDC49", "\uD83D\uDD95", "✅", "⚠️", "\uD83D\uDE80", "\uD83D\uDCE2", "✉️", "❤️"]; const saveSelection = () => { const sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) savedRange = sel.getRangeAt(0); }; const restoreSelection = () => { if (savedRange) { const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(savedRange); } }; const triggerRefresh = () => { refreshTick(refreshTick() + 1); if (editorRef) count(editorRef.innerText.length); }; const notify = () => { if (!editorRef) return; const html = editorRef.innerHTML; if (isFn(value)) value(html); else p.onchange?.(html); triggerRefresh(); }; const exec = (cmd, val = null) => { if (!editorRef) return; editorRef.focus(); if (savedRange) restoreSelection(); document.execCommand(cmd, false, val); savedRange = null; notify(); }; const openLightbox = (src) => { const overlay = document.createElement("div"); overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`; const img = document.createElement("img"); img.src = src; img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`; overlay.onclick = () => document.body.removeChild(overlay); overlay.appendChild(img); document.body.appendChild(overlay); }; const handleUpload = (file) => { if (!file) return; const reader = new FileReader; reader.onload = (re) => { if (file.type.startsWith("image/")) { const imgHtml = `
`; exec("insertHTML", imgHtml); } else { const linkHtml = `${file.name} `; exec("insertHTML", linkHtml); } }; reader.readAsDataURL(file); }; const queryState = (cmd, val = null) => { refreshTick(); if (!editorRef || isSource()) return false; try { if (cmd === "formatBlock") { let node = window.getSelection().getRangeAt(0).commonAncestorContainer; while (node && node !== editorRef) { if (node.nodeType === 1 && node.tagName === val) return true; node = node.parentNode; } return false; } return document.queryCommandState(cmd); } catch (e) { return false; } }; const toolbar = h2("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [ h2("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [ h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("bold") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("bold") }, h2("span", { class: "icon-[lucide--bold]" })), h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("italic") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("italic") }, h2("span", { class: "icon-[lucide--italic]" })), h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("underline") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("underline") }, h2("span", { class: "icon-[lucide--underline]" })), h2("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }), h2("span", { class: "w-px h-5 bg-base-300 mx-1" }), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("justifyLeft") }, h2("span", { class: "icon-[lucide--align-left]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("justifyCenter") }, h2("span", { class: "icon-[lucide--align-center]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("justifyRight") }, h2("span", { class: "icon-[lucide--align-right]" })), h2("span", { class: "w-px h-5 bg-base-300 mx-1" }), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h2("span", { class: "icon-[lucide--list]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h2("span", { class: "icon-[lucide--list-ordered]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h2("span", { class: "icon-[lucide--indent-decrease]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h2("span", { class: "icon-[lucide--indent-increase]" })), h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("formatBlock", "BLOCKQUOTE") ? "btn-active" : ""}`, onclick: () => exec("formatBlock", queryState("formatBlock", "BLOCKQUOTE") ? "P" : "BLOCKQUOTE") }, h2("span", { class: "icon-[lucide--quote]" })), h2("span", { class: "w-px h-5 bg-base-300 mx-1" }), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt("URL:"); if (url) exec("createLink", url); } }, h2("span", { class: "icon-[lucide--link]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input2 = document.createElement("input"); input2.type = "file"; input2.onchange = (e) => handleUpload(e.target.files[0]); input2.click(); } }, h2("span", { class: "icon-[lucide--paperclip]" })), h2("div", { class: "relative" }, [ h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h2("span", { class: "icon-[lucide--smile]" })), h2("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map((emo) => h2("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo))) ]), h2("span", { class: "w-px h-5 bg-base-300 mx-1" }), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h2("span", { class: "icon-[lucide--undo-2]" })), h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h2("span", { class: "icon-[lucide--redo-2]" })) ]), h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? "btn-active" : ""}`, onclick: () => { if (!isSource()) source(editorRef?.innerHTML || ""); else if (editorRef) { editorRef.innerHTML = source(); notify(); } isSource(!isSource()); } }, h2("span", { class: "icon-[lucide--code-2]" })) ]); if (typeof document !== "undefined" && !document.getElementById("editor-styles")) { const style = document.createElement("style"); style.id = "editor-styles"; style.textContent = ` [contenteditable="true"] div, [contenteditable="true"] p { margin: 0; padding: 0; } `; document.head.appendChild(style); } return h2("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [ toolbar, h2("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [ h2("div", { ref: (el) => { if (!editorRef && el) { editorRef = el; el.innerHTML = get(value) || ""; document.execCommand("defaultParagraphSeparator", false, "br"); el.addEventListener("click", (e) => { const container = e.target.closest(".resizable-img-container"); if (container) { const img = container.querySelector("img"); if (img) openLightbox(img.src); } }); } }, style: () => `min-height:22rem;${isSource() ? "display:none" : ""}`, class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8", contenteditable: "true", oninput: notify, onkeydown: (e) => { if (e.key === "Tab") { e.preventDefault(); exec("indent"); } }, onkeyup: () => { triggerRefresh(); saveSelection(); }, onclick: (e) => { triggerRefresh(); saveSelection(); e.stopPropagation(); }, onmouseup: () => { notify(); saveSelection(); }, onpaste: (e) => { e.preventDefault(); const text = e.clipboardData.getData("text/plain"); exec("insertText", text); }, ondragover: (e) => e.preventDefault(), ondrop: (e) => { e.preventDefault(); handleUpload(e.dataTransfer.files[0]); } }), h2("textarea", { class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0", style: () => isSource() ? "" : "display:none", value: source, oninput: (e) => { source(e.target.value); if (editorRef) editorRef.innerHTML = e.target.value; p.onchange?.(e.target.value); } }) ]), h2("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [ h2("span", () => `${count()} caracteres`) ]) ]); }; // sigpro-locale.js import { $ as $3, h as h3 } from "sigpro"; var i18n = { es: { close: "Cerrar", confirm: "Confirmar", cancel: "Cancelar", search: "Buscar...", loading: "Cargando...", nodata: "Sin datos" }, en: { close: "Close", confirm: "Confirm", cancel: "Cancel", search: "Search...", loading: "Loading...", nodata: "No data" } }; var currentLocale = $3("es"); var Locale = (t) => currentLocale(t); var tt = (t) => () => i18n[currentLocale()][t] || t; // index.js var Components = { ...exports_sigpro_ui, ...exports_sigpro_editor }; var Utils = { Locale, tt }; export { Utils, Components };