natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Megacompact

Browse Source
This commit is contained in:
Natxo
2026-05-09 19:23:54 +02:00
parent e3086bfa7e
commit 9937f03d0a
21 changed files with 1690 additions and 3709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

819
dist/sigpro-ui.esm.js vendored
View File

@@ -1,633 +1,220 @@
// src/sigpro-ui.js
import { $, watch, h, mount, when, each, isFunc } from "sigpro";
var val = (val2) => typeof val2 === "function" ? val2() : val2;
import { $, h, mount, val, isFunc } from "sigpro";
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 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 Accordion = (p, c) => h("div", { ...p, class: `${"collapse"} ${p?.class || ""}`.trim() }, c);
var AccordionRadio = (p) => h("input", { type: "radio", name: p.name, checked: p.checked || undefined, class: p.class });
var AccordionTitle = (p, c) => h("div", { ...p, class: `${"collapse-title"} ${p?.class || ""}`.trim() }, c);
var AccordionContent = (p, c) => h("div", { ...p, class: `${"collapse-content"} ${p?.class || ""}`.trim() }, c);
var Alert = (p, c) => h("div", { ...p, class: `${"alert"} ${p?.class || ""}`.trim() }, c);
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 AvatarGroup = (p, c) => h("div", { ...p, class: `${"avatar-group -space-x-6"} ${p?.class || ""}`.trim() }, c);
var Badge = (p, c) => h("span", { ...p, class: `${"badge"} ${p?.class || ""}`.trim() }, c);
var Breadcrumbs = (p, c) => h("div", { ...p, class: `${"breadcrumbs"} ${p?.class || ""}`.trim() }, c);
var Button = (p, c) => h("button", { ...p, class: `${"btn"} ${p?.class || ""}`.trim() }, 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 = () => 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")
])
let [d, hv, sh, eh] = [$(new Date), $(0), $(0), $(0)], now = new Date, F = (v) => v?.toISOString().slice(0, 10), P = (n) => (n < 10 ? "0" : "") + n, M = (m, y = 0) => d(new Date(d().getFullYear() + y, d().getMonth() + m, 1)), V = () => typeof p.value == "function" ? p.value() : p.value, G = () => typeof p.range == "function" ? p.range() : p.range, L = (dt) => {
let s = F(dt), v = V(), r = G();
if (!r)
return p.onChange?.(p.hour ? `${s}T${P(sh())}:00:00` : s);
if (!v?.start || v.end)
return p.onChange?.({ start: s, end: null, ...p.hour && { startHour: sh() } });
let nv = s < v.start ? { start: s, end: v.start } : { start: v.start, end: s };
p.onChange?.({ ...nv, ...p.hour && { startHour: v.startHour ?? sh(), endHour: eh() } });
}, I = ({ v, on }) => h("div", { class: "flex-1 flex gap-2 items-center" }, [
h("input", { type: "range", min: 0, max: 23, value: v, class: "range range-xs", oninput: (e) => on(+e.target.value) }),
h("span", { class: "text-sm font-mono" }, () => P(v()) + ":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]" }))
])
return h("div", { class: `p-4 bg-base-100 border shadow-2xl rounded-box w-80 select-none ${p.class || ""}` }, [
h("div", { class: "flex justify-between items-center mb-4" }, [
h("div", { class: "flex" }, [["-1y", -1, 1], ["-1m", -1, 0]].map(([_, m, y]) => h("button", { class: "btn btn-ghost btn-xs", onclick: () => M(m, y) }, h("span", { class: `icon-[lucide--chevron${y ? "s" : ""}-left]` })))),
h("span", { class: "font-bold uppercase" }, () => d().toLocaleString("es", { month: "short", year: "numeric" })),
h("div", { class: "flex" }, [[1, 0], [1, 1]].map(([m, y]) => h("button", { class: "btn btn-ghost btn-xs", onclick: () => M(m, y) }, h("span", { class: `icon-[lucide--chevron${y ? "s" : ""}-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)),
h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hv(null) }, [
..."LMXJVSD".split("").map((l) => h("div", { class: "text-[10px] opacity-40 font-bold text-center" }, l)),
() => {
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", {
let y = d().getFullYear(), m = d().getMonth(), first = (new Date(y, m, 1).getDay() + 6) % 7;
return [...Array(first).fill(h("div")), ...Array(new Date(y, m + 1, 0).getDate()).keys()].map((i) => {
if (typeof i != "number")
return i;
let day = i + 1, ds = F(new Date(y, m, day)), today = F(now) == ds;
return h("button", {
type: "button",
onclick: () => L(new Date(y, m, day)),
onmouseenter: () => G() && hv(ds),
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;
let v = V(), hov = hv(), s = v?.start || (typeof v == "string" ? v.slice(0, 10) : 0), isE = v?.end == ds, isS = s == ds, inR = G() && v?.start && (v.end ? ds > v.start && ds < v.end : hov && (ds > s && ds <= hov || ds < s && ds >= hov));
return `btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative ${isS || isE ? "btn-primary z-10" : inR ? "bg-primary/20 border-none rounded-none" : "btn-ghost"} ${today ? "ring-1 ring-primary font-black" : ""}`;
}
}, day);
});
}
]),
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);
} }))
p.hour && h("div", { class: "mt-3 pt-2 border-t flex gap-4" }, G() ? [I({ v: sh, on: sh }), I({ v: eh, on: eh })] : [I({ v: sh, on: sh })])
]);
};
var Card = (p, c) => h("div", { ...p, class: `${"card"} ${p?.class || ""}`.trim() }, c);
var CardTitle = (p, c) => h("div", { ...p, class: `${"card-title"} ${p?.class || ""}`.trim() }, c);
var CardBody = (p, c) => h("div", { ...p, class: `${"card-body"} ${p?.class || ""}`.trim() }, c);
var CardActions = (p, c) => h("div", { ...p, class: `${"card-actions"} ${p?.class || ""}`.trim() }, c);
var Carousel = (p, c) => h("div", { ...p, class: `${"carousel"} ${p?.class || ""}`.trim() }, c);
var CarouselItem = (p, c) => h("div", { ...p, class: `${"carousel-item"} ${p?.class || ""}`.trim() }, c);
var Chat = (p, c) => h("div", { ...p, class: `${"chat"} ${p?.class || ""}`.trim() }, c);
var ChatBubble = (p, c) => h("div", { ...p, class: `${"chat-bubble"} ${p?.class || ""}`.trim() }, c);
var ChatFooter = (p, c) => h("div", { ...p, class: `${"chat-footer"} ${p?.class || ""}`.trim() }, c);
var ChatHeader = (p, c) => h("div", { ...p, class: `${"chat-header"} ${p?.class || ""}`.trim() }, c);
var ChatImage = (p, c) => h("div", { ...p, class: `${"chat-image avatar"} ${p?.class || ""}`.trim() }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
var Checkbox = (p) => h("input", { type: "checkbox", ...p, class: `${"checkbox"} ${p?.class || ""}`.trim() });
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", {
let L = (s) => (s || "").toLowerCase(), C = "#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".split(",");
return h("div", { class: `p-3 bg-base-100 rounded-box shadow w-64 ${p.class || ""}` }, h("div", { class: "grid grid-cols-8 gap-1" }, C.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);
}
style: { background: c },
onclick: () => (isFunc(p.value) ? p.value(c) : p.onchange?.(c), hide()),
class: () => `size-6 rounded-sm transition-all hover:scale-125 hover:z-10 active:scale-95 border border-black/5 p-0 min-h-0 ${L(val(p.value)) == L(c) ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`
}))));
};
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" }, "..."),
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: "modal", onclose: close, oncancel: close }, [
h("div", { class: cls("modal-box", p.class ?? "") }, [
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);
var Combo = (p, c) => Dropdown({}, [div({ tabindex: "0", role: "button" }, c), DropdownContent({ class: p?.class }, p.content)]);
var Drawer = (p, c) => h("div", { ...p, class: `${"drawer"} ${p?.class || ""}`.trim() }, c);
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 = (p, c) => h("div", { ...p, class: `${"drawer-content"} ${p?.class || ""}`.trim() }, c);
var DrawerSide = (p, c) => h("div", { ...p, class: `${"drawer-side"} ${p?.class || ""}`.trim() }, c);
var DrawerOverlay = (p) => label({ ...p, for: p.for, class: `${"drawer-overlay"} ${p?.class || ""}`.trim() });
var Divider = (p) => h("div", { ...p, class: `${"divider"} ${p?.class || ""}`.trim() });
var Dropdown = (p, c) => h("div", { ...p, class: `${"dropdown"} ${p?.class || ""}`.trim() }, c);
var DropdownButton = (p, c) => h("div", { ...p, tabindex: "0", role: "button", class: `${"btn"} ${p?.class || ""}`.trim() }, c);
var DropdownContent = (p, c) => h("div", { ...p, tabindex: "0", class: `${"dropdown-content"} ${p?.class || ""}`.trim() }, c);
var Fab = (p, c) => h("div", { class: "fab" }, [h("div", { tabindex: "0", role: "button", class: `${"btn"} ${p?.class || ""}`.trim() }, Icon({}, p.icon)), c]);
var Fieldset = (p, c) => h("fieldset", { class: `${"fieldset"} ${p?.class || ""}`.trim() }, [h("legend", { class: "fieldset-legend" }, p.label), c]);
var FileDrag = (p, c) => h("label", {
class: () => `relative flex items-center justify-between h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all ${p.drag ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100"} ${p?.class || ""}`,
ondragover: (e) => {
e.preventDefault();
p.ondrag?.(true);
},
ondragleave: () => p.ondrag?.(false),
ondrop: (e) => {
e.preventDefault();
p.ondrag?.(false);
p.ondrop?.(e.dataTransfer.files);
}
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];
});
});
}, c);
var FileInput = (p) => h("input", { type: "file", multiple: true, accept: p.accept || "*", class: `${"file-input"} ${p?.class || ""}`.trim(), onchange: (e) => p.onchange?.(e.target.files) });
var FilePreview = (p) => h("ul", { class: `mt-2 space-y-1 ${p?.class || ""}` }, p.files.map((f, i) => h("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border" }, [
h("div", { class: "flex items-center gap-2 truncate opacity-70" }, [
h("span", {}, "\uD83D\uDCC4"),
h("span", { class: "truncate max-w-[180px]" }, f.name),
h("span", { class: "text-[9px] opacity-50" }, `(${~~(f.size / 1024)}KB)`)
]),
h("button", { class: "btn btn-ghost btn-xs btn-circle", onclick: () => p.onremove?.(i) }, h("span", { class: "icon-[lucide--x]" }))
])));
var FileError = (p) => h("div", { class: `text-[10px] text-error mt-1 px-1 ${p?.class || ""}` }, p.message);
var Filter = (s, i, o, k) => o($(() => val(i).filter((i2) => String(k ? i2[k] : i2).toLowerCase().includes(val(s).toLowerCase()))));
var Icon = (p, c) => h("span", { ...p, class: `${c ?? ""} ${p?.class || ""}`.trim() });
var Indicator = (p, c) => h("div", { ...p, class: `${"indicator"} ${p?.class || ""}`.trim() }, [p.value && h("span", { class: `${"indicator-item badge"} ${p?.class || ""}`.trim() }, p.value), c]);
var Input = (p) => h("input", { ...p, class: `${"input"} ${p?.class || ""}`.trim() });
var InputPass = (p) => {
const show = $(false);
return [
Input({ ...p, type: show() ? "text" : "password" }),
Swap({ class: "ml-2" }, [SwapToggle({ value: show, class: "swap-rotate" }), SwapOn({}, Icon({}, "icon-[lucide--eye]")), SwapOff({}, Icon({}, "icon-[lucide--eye-off]"))])
];
};
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;
var InputHint = (p, c) => h("div", { ...p, class: `${"validator-hint"} ${p?.class || ""}`.trim() }, c);
var Kbd = (p, c) => h("kbd", { ...p, class: `${"kbd"} ${p?.class || ""}`.trim() }, c);
var Label = (p, c) => h("span", { ...p, class: `${"label"} ${p?.class || ""}`.trim() }, c);
var LabelFloating = (p, c) => h("label", { ...p, class: `${"floating-label"} ${p?.class || ""}`.trim() }, c);
var LabelInput = (p, c) => h("label", { ...p, class: `${"input"} ${p?.class || ""}`.trim() }, c);
var LabelSelect = (p, c) => h("label", { ...p, class: `${"select"} ${p?.class || ""}`.trim() }, c);
var List = (p, c) => h("ul", { ...p, class: `${"list"} ${p?.class || ""}`.trim() }, c);
var ListRows = (p) => () => (val(p.items) || []).map((item, idx) => h("li", { class: `${"list-row"} ${p?.class || ""} ${item?.class || ""}`.trim() }, typeof p.render === "function" ? p.render(item, idx) : item));
var Menu = (p, c) => ul({ ...p, class: `${"menu"} ${p?.class || ""}`.trim() }, c);
var MenuTitle = (p, c) => li({ ...p, class: `${"menu-title"} ${p?.class || ""}`.trim() }, c);
var MenuItem = (p) => li({}, a({ onmousedown: (e) => e.preventDefault(), class: p?.class || "", onclick: p.onclick }, p.label));
var Modal = (p, c) => h("dialog", { ...p, class: `${"modal"} ${p?.class || ""}`.trim() }, c);
var ModalBox = (p, c) => h("div", { ...p, class: `${"modal-box"} ${p?.class || ""}`.trim() }, c);
var ModalAction = (p, c) => h("div", { ...p, class: `${"modal-action"} ${p?.class || ""}`.trim() }, c);
var ModalBackdrop = (p) => h("form", { method: "dialog", class: "modal-backdrop" }, [h("button", {}, "close")]);
var ModalClose = (p) => h("form", { method: "dialog" }, [h("button", { ...p, class: `${"btn btn-sm btn-circle btn-ghost absolute right-2 top-2"} ${p?.class || ""}`.trim() }, "✕")]);
var Loading = (p, c) => h("span", { ...p, class: `${"loading loading-spinner"} ${p?.class || ""}`.trim() }, c);
var Navbar = (p, c) => h("div", { ...p, class: `${"navbar"} ${p?.class || ""}`.trim() }, c);
var Progress = (p) => h("progress", { ...p, class: `${"progress"} ${p?.class || ""}`.trim() });
var Radial = (p, c) => h("div", { class: `${"radial-progress"} ${p?.class || ""}`.trim(), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c);
var Radio = (p) => h("input", { type: "radio", ...p, class: `${"radio"} ${p?.class || ""}`.trim() });
var Range = (p) => h("input", { type: "range", ...p, class: `${"range"} ${p?.class || ""}`.trim() });
var Rating = (p, c) => h("div", { ...p, class: `${"rating"} ${p?.class || ""}`.trim() }, c);
var RatingItems = (p) => [...Array(p.count)].map((_, i) => h("input", { class: `${"mask"} ${p?.class || ""}`.trim(), name: p.name, type: "radio", checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }));
var Select = (p, c) => h("select", { ...p, class: `${"select"} ${p?.class || ""}`.trim() }, c);
var SelectOption = (p, c) => h("option", { ...p, class: p?.class || "" }, c);
var Skeleton = (p) => h("div", { ...p, class: `${"skeleton"} ${p?.class || ""}`.trim() });
var SkeletonText = (p) => h("span", { ...p, class: `${"skeleton skeleton-text"} ${p?.class || ""}`.trim() });
var Stack = (p, c) => h("div", { ...p, class: `${"stack"} ${p?.class || ""}`.trim() }, c);
var Stats = (p, c) => h("div", { ...p, class: `${"stats shadow"} ${p?.class || ""}`.trim() }, c);
var Stat = (p, c) => h("div", { ...p, class: `${"stat"} ${p?.class || ""}`.trim() }, c);
var StatFigure = (p, c) => h("div", { ...p, class: `${"stat-figure"} ${p?.class || ""}`.trim() }, c);
var StatTitle = (p, c) => h("div", { ...p, class: `${"stat-title"} ${p?.class || ""}`.trim() }, c);
var StatValue = (p, c) => h("div", { ...p, class: `${"stat-value"} ${p?.class || ""}`.trim() }, c);
var StatDesc = (p, c) => h("div", { ...p, class: `${"stat-desc"} ${p?.class || ""}`.trim() }, c);
var Steps = (p, c) => h("ul", { ...p, class: `${"steps"} ${p?.class || ""}`.trim() }, c);
var Step = (p, c) => h("li", { ...p, class: `${"step"} ${p?.class || ""}`.trim(), "data-content": p.dataContent }, c);
var Swap = (p, c) => h("label", { ...p, class: `${"swap"} ${p?.class || ""}`.trim() }, c);
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 = (p, c) => h("div", { ...p, class: `${"swap-on"} ${p?.class || ""}`.trim() }, c);
var SwapOff = (p, c) => h("div", { ...p, class: `${"swap-off"} ${p?.class || ""}`.trim() }, c);
var Tabs = (p, c) => div({ ...p, class: `${"tabs"} ${p?.class || ""}`.trim() }, c);
var Tab = (p) => {
const close = () => p.tabs?.(p.tabs().filter((_, idx) => idx !== p.index));
return [
h("input", { type: "radio", name: p.name, class: `${"tab"} ${p?.class || ""}`.trim(), checked: p.checked || undefined }),
div({ class: `tab-content ${p?.classContent || ""}`.trim() }, p.content),
p.closable ? span({ class: "absolute top-2 right-2 cursor-pointer", onclick: (e) => {
e.stopPropagation();
close();
} }, "✕") : null
];
};
var Table = (p, c) => h("table", { ...p, class: `${"table"} ${p?.class || ""}`.trim() }, c);
var TableHead = (p, c) => h("thead", { ...p, class: p?.class || "" }, c);
var TableBody = (p, c) => h("tbody", { ...p, class: p?.class || "" }, c);
var TableFoot = (p, c) => h("tfoot", { ...p, class: p?.class || "" }, c);
var TableRow = (p, c) => h("tr", { ...p, class: p?.class || "" }, c);
var TableTh = (p, c) => h("th", { ...p, class: p?.class || "" }, c);
var TableTd = (p, c) => h("td", { ...p, class: p?.class || "" }, c);
var Textarea = (p) => h("textarea", { ...p, class: `${"textarea"} ${p?.class || ""}`.trim() });
var Textrotate = (p, c) => h("span", { ...p, class: `${"text-rotate"} ${p?.class || ""}`.trim() }, h("span", {}, c));
var Timeline = (p, c) => h("ul", { ...p, class: `${"timeline"} ${p?.class || ""}`.trim() }, c);
var Toast = (m, t = "alert-success", d = 3500) => {
let C = document.getElementById("stc"), T, E, w = h("div", { style: "display:contents" });
if (!C)
document.body.append(C = h("div", { id: "stc", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" }));
C.append(w);
const i = mount(() => {
let v = $(0), l = $(0);
E = () => l() || (l(1), clearTimeout(T), setTimeout(() => (i.destroy(), w.remove(), C.firstChild || C.remove()), 300));
setTimeout(() => v(1));
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`;
}
class: () => `alert alert-soft ${t} shadow-lg transition-all duration-300 inline-flex w-auto pointer-events-auto ${l() ? "translate-x-full opacity-0" : v() ? "translate-x-0 opacity-100" : "translate-x-10 opacity-0"}`
}, [
msgNode,
h("button", {
class: "btn btn-xs btn-circle btn-ghost",
onclick: closeFn
}, h("span", { class: "icon-[lucide--x]" }))
typeof m == "function" ? m() : typeof m == "string" ? h("span", m) : m,
h("button", { class: "btn btn-xs btn-circle btn-ghost", onclick: E }, h("span", { class: "icon-[lucide--x]" }))
]);
};
const instance = mount(ToastComponent, host);
if (duration > 0)
timer = setTimeout(closeFn, duration);
return closeFn;
}, w);
if (d > 0)
T = setTimeout(E, d);
return E;
};
var Toggle = (p) => h("input", { type: "checkbox", ...p, class: `${"toggle"} ${p?.class || ""}`.trim() });
var Tooltip = (p, c) => h("div", { ...p, class: `${"tooltip"} ${p?.class || ""}`.trim(), "data-tip": p.tip }, c);
export {
val,
rand,
hide,
getBy,
filterBy,
cls,
Tooltip,
Toggle,
Toast,
@@ -635,8 +222,14 @@ export {
Textrotate,
Textarea,
Tabs,
TableItems,
TableTh,
TableTd,
TableRow,
TableHead,
TableFoot,
TableBody,
Table,
Tab,
SwapToggle,
SwapOn,
SwapOff,
@@ -644,10 +237,15 @@ export {
Steps,
Step,
Stats,
StatValue,
StatTitle,
StatFigure,
StatDesc,
Stat,
Stack,
SkeletonText,
Skeleton,
SelectOption,
Select,
RatingItems,
Rating,
@@ -656,16 +254,32 @@ export {
Radial,
Progress,
Navbar,
ModalClose,
ModalBox,
ModalBackdrop,
ModalAction,
Modal,
MenuTitle,
MenuItem,
Menu,
Loading,
ListRows,
List,
LabelSelect,
LabelInput,
LabelFloating,
Label,
Kbd,
InputPass,
InputHint,
Input,
Indicator,
Icon,
Fileinput,
Filter,
FilePreview,
FileInput,
FileError,
FileDrag,
Fieldset,
Fab,
DropdownContent,
@@ -677,8 +291,7 @@ export {
DrawerContent,
Drawer,
Divider,
Datepicker,
Colorpicker,
Combo,
ColorPalette,
Checkbox,
ChatImage,
@@ -698,7 +311,9 @@ export {
Badge,
AvatarGroup,
Avatar,
Autocomplete,
Alert,
AccordionTitle,
AccordionRadio,
AccordionContent,
Accordion
};