tanuki-ui
Version:
HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor
1,459 lines • 83.1 kB
JavaScript
import { jsx as r, Fragment as j, jsxs as N } from "react/jsx-runtime";
import * as i from "react";
import q, { useRef as te, useEffect as ue, useReducer as Tt, memo as w, useState as X, useCallback as L, useMemo as J, forwardRef as k, createElement as Rt, Children as Bt } from "react";
import { createPortal as Ot } from "react-dom";
import { u as nt, a as Ee } from "./vendor/useMeasure-C5eiiuB0.js";
import { c as rt } from "./vendor/classNames-DxK1wTlm.js";
const st = ({
onClose: e,
id: t
}) => {
const n = te(null), s = te(null), a = te(e);
return a.current = e, ue(() => {
let c;
const d = (o) => {
var l;
if (!o.defaultPrevented && s.current && o.target instanceof HTMLElement && (o.type === "pointerdown" && (c = o.target), !(o.type !== "pointerdown" && c !== o.target))) {
if (s.current.contains(o.target)) {
o.stopPropagation();
return;
}
if ((l = n.current) != null && l.contains(o.target)) {
o.preventDefault(), o.stopPropagation(), a.current();
return;
}
}
};
return window == null || window.addEventListener("pointerdown", d, !0), window == null || window.addEventListener("pointerup", d, !0), () => {
window == null || window.removeEventListener("pointerdown", d, !0), window == null || window.removeEventListener("pointerup", d, !0);
};
}, []), [n, s];
}, Pt = "dlgdlg", Ft = "dlgbdr", Ht = "dlgfade-in", zt = "dlg_dlg_ovr", Ut = "dlgfixed", qt = "dlgdlgftr", jt = "dlgbodyLk3", Vt = "dlgshake", Ne = {
dialog: Pt,
backdrop: Ft,
fadeIn: Ht,
dialogOverlay: zt,
fixed: Ut,
dialogFooter: qt,
body: jt,
shake: Vt
}, Wt = () => q.useMemo(() => typeof window > "u" ? null : window.document, []), at = ({ children: e, parentNode: t }) => {
const n = i.useId(), [s, a] = i.useState(), c = Wt();
i.useEffect(() => {
if (!c)
return;
const o = c.createElement("div");
return o.setAttribute("id", n), c.body.appendChild(o), a(o), () => {
c.body.contains(o) && c.body.removeChild(o), a(void 0);
};
}, [n, c]);
const d = i.useMemo(() => t ? Xt(t) : [1], [t, n]);
return s && d ? /* @__PURE__ */ r(j, { children: Ot(/* @__PURE__ */ r(ot, { zIndexList: d, children: e }), s) }) : /* @__PURE__ */ r(j, {});
}, ot = ({ zIndexList: e, children: t }) => {
const [n, ...s] = e;
return /* @__PURE__ */ r("div", { style: { position: "relative", zIndex: n }, children: s.length ? /* @__PURE__ */ r(ot, { zIndexList: s, children: t }) : t });
}, Xt = (e) => {
const t = [], n = (s) => {
const c = +window.getComputedStyle(s).getPropertyValue("z-index");
Number.isNaN(c) || t.push(c), s.parentElement && n(s.parentElement);
};
return n(e), t.reverse();
}, Zt = (e) => e ? "current" in e : !1, Gt = (...e) => q.useCallback(
(n) => {
for (const s of e)
if (s) {
if (typeof s == "string")
throw new Error("LegacyRef is not supported");
if (typeof s == "function") {
s(n);
continue;
}
if (Zt(s)) {
s.current = n;
continue;
}
if (s && "value" in s) {
s.value = n;
continue;
}
}
},
[e]
), ct = i.memo(
i.forwardRef(({ onClose: e, modal: t = !0, open: n, ...s }, a) => {
const [c, d] = st({ onClose: e ?? (() => {
}) }), o = i.useRef(null), l = Gt(a, o), m = t ? i.Fragment : at;
i.useEffect(() => {
const b = o.current;
b && (n ? t ? b.showModal() : b.show() : b.close());
}, [n, t]);
const f = i.useCallback(
(b) => {
b.preventDefault(), b.stopPropagation(), e && e(b);
},
[e]
), g = /* @__PURE__ */ r("div", { ref: c, className: Ne.backdrop }), h = /* @__PURE__ */ r("div", { className: Ne.body, "data-role": "dialog-body", ref: d, children: s.children });
return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
"dialog",
{
className: Ne.dialog,
...s,
open: t ? void 0 : n,
ref: l,
onClose: f,
"data-role": t ? "modal" : "dialog-body",
children: n && /* @__PURE__ */ N(j, { children: [
g,
h
] })
}
) });
})
);
ct.displayName = "Dialog";
const Fo = ({ children: e }) => /* @__PURE__ */ r("footer", { className: Ne.dialogFooter, children: e }), me = i.memo(
({ potal: e, open: t = !0, onClose: n, onCancel: s, children: a, variant: c, animationName: d, direction: o = "btt" }) => /* @__PURE__ */ r(
ct,
{
onClose: n,
onCancel: s,
open: t,
modal: !1,
"data-variant": c,
"data-animation": d,
"data-direction": o,
children: a
}
)
);
me.displayName = "PopupLayout";
const _t = "dlgctn", lt = {
content: _t
}, Yt = ({ direction: e, open: t = !0, onClose: n, header: s, children: a, potal: c = !0 }) => /* @__PURE__ */ N(me, { open: t, onClose: n, potal: c, variant: "drawer", direction: e, children: [
s,
/* @__PURE__ */ r("section", { className: lt.content, children: a })
] });
Yt.displayName = "Drawer";
const Qt = "blctxt", Kt = {
text: Qt
}, fe = ({ ruby: e, children: t }) => /* @__PURE__ */ r("span", { className: Kt.text, children: e ? /* @__PURE__ */ N("ruby", { children: [
t,
/* @__PURE__ */ r("rt", { children: e })
] }) : t });
fe.displayName = "Text";
const Jt = "frminp", en = "frmmediainp", tn = "frmmed", nn = "frmmedfil", rn = "frmmed9RB", sn = "frmmedhasfil", an = "frmmeddra", on = "frmbounce", cn = "frmsel", ln = "frmimgprv", dn = "frmedi", un = "frmerrLine", mn = "frmrange", fn = "frmprogress", hn = "frmbar", gn = "frmknob", U = {
input: Jt,
mediaInput: en,
mediaInputPreview: tn,
mediaInputFile: nn,
mediaInputEmpty: rn,
mediaInputHasFiles: sn,
mediaInputDragActive: an,
bounce: on,
selectbox: cn,
imagePreview: ln,
editablelabel: dn,
errorLine: un,
range: mn,
progress: fn,
bar: hn,
knob: gn
}, pn = ({ ...e }) => {
const [t, n] = i.useState(!1), s = i.useCallback(() => {
n(!0);
}, []), a = i.useCallback(() => {
n(!1);
}, []), c = (d) => {
d instanceof HTMLInputElement && d.focus();
};
return /* @__PURE__ */ N(j, { children: [
/* @__PURE__ */ r(
"input",
{
...e,
className: U.editablelabel,
autoFocus: !0,
ref: c,
onBlur: a,
type: "text",
style: { display: t ? "block" : "none" }
}
),
!t && /* @__PURE__ */ r("span", { onClick: s, children: /* @__PURE__ */ r(fe, { children: e.value ?? e.defaultValue }) })
] });
};
pn.displayName = "EditableLabel";
const bn = "nvgtabnav", yn = "nvgsrtitm", vn = "nvgsrtcon", Nn = "nvghdl", wn = "nvgsrtbod", kn = "nvgico", xn = "nvgdel", ce = {
tabnav: bn,
sortableItem: yn,
sortableItemControl: vn,
handle: Nn,
sortableItemBody: wn,
icon: kn,
deleteButton: xn
};
var In = function(e, t) {
return typeof t == "boolean" ? t : !e;
}, Cn = function(e) {
return Tt(In, e);
};
function De(e) {
var t = te();
return ue(function() {
t.current = e;
}), t.current;
}
const Sn = "cntsrtitm", $n = "cntsrtbod", Ln = "cntsrt", Le = {
sortableItem: Sn,
sortableItemBody: $n,
sortableItemHandle: Ln
}, Ge = () => Math.random().toString(36).substring(2), Mn = ({
value: e,
onChange: t
}) => {
const [n, s] = i.useState(() => (e ?? []).map((l) => ({ value: l, id: Ge() }))), a = De(n), c = i.useRef(t);
c.current = t, i.useEffect(() => {
if (!a || !c.current)
return;
const o = n.map((l) => l.value);
c.current(o);
}, [n]);
const d = De(e);
return i.useEffect(() => {
if (!d || !e)
return;
const o = e;
s((l) => {
const m = l.map((u) => u.value), f = m.length === o.length;
if (f && o.every((u, p) => u === m[p]))
return l;
const h = new WeakMap(l.map((u) => [u.value, u])), b = o.map((u, p) => h.has(u) ? -1 : p).filter((u) => u !== -1);
return f ? l.map((u, p) => b.includes(p) ? { ...u, value: o[p] } : u) : o.map((u) => {
const p = h.get(u);
return p != null && p.value ? p : { value: u, id: Ge() };
});
});
}, [e, s]), [n, s];
}, Dn = (e, t, n) => {
const s = [...e], [a] = s.splice(t, 1);
return s.splice(n, 0, a), s;
}, he = ({
items: e,
onChange: t,
children: n,
controlAs: s
}) => {
const [a, c] = Mn({
value: e,
onChange: t
}), d = i.useRef(/* @__PURE__ */ new WeakMap([])), [o, l] = i.useState(), [m, f] = i.useState(), g = {
draggingId: o,
draggingOverId: m
}, h = i.useRef(g);
h.current = g;
const b = i.useCallback((v) => {
const { draggingId: x, draggingOverId: I } = h.current;
I !== v && (c((D) => {
const M = D.findIndex((O) => O.id === v), $ = D.findIndex((O) => O.id === I);
return Dn(D, M, $);
}), l(void 0), f(void 0));
}, []), u = i.useCallback((v, x) => (d.current.set(x, v), () => {
d.current.delete(x);
}), []), p = a.map((v) => v.id), y = s ?? it;
return /* @__PURE__ */ r(
dt.Provider,
{
value: {
observe: u,
items: p,
draggingId: o,
setDraggingId: l,
draggingOverId: m,
setDraggingOverId: f,
end: b
},
children: i.Children.map(n, (v, x) => {
const I = p[x];
return /* @__PURE__ */ r(y, { id: I, children: v }, I);
})
}
);
}, An = (...e) => e.filter(Boolean).join(" "), it = ({ id: e, children: t, className: n }) => {
const { containerRef: s, listeners: a } = Te(e);
return /* @__PURE__ */ N("div", { className: An(Le.sortableItem, n), ref: s, children: [
/* @__PURE__ */ r("div", { className: Le.sortableItemHandle, ...a }),
/* @__PURE__ */ r("div", { className: Le.sortableItemBody, children: t })
] });
};
he.SortableItem = it;
const dt = i.createContext({
items: [],
setDraggingId: () => {
},
setDraggingOverId: () => {
},
end: () => {
},
observe: () => () => {
}
}), Te = (e) => {
const t = i.useRef(null), n = i.useRef(null), { setDraggingId: s, setDraggingOverId: a, end: c, observe: d } = i.useContext(dt);
return i.useEffect(() => {
const o = t.current, l = n.current;
if (!o || !l)
return;
const m = d(e, o);
o.setAttribute("draggable", "true"), o.setAttribute("data-draggable-id", e);
const f = () => {
a(e);
};
let g;
const h = (v) => {
g || (v.stopPropagation(), v.preventDefault(), v.dataTransfer && (v.dataTransfer.effectAllowed = "move"), s(e));
}, b = (v) => (c(e), !1), u = (v) => (v.preventDefault && v.preventDefault(), v.dataTransfer && (v.dataTransfer.dropEffect = "move"), !1), p = (v) => (v.stopPropagation(), v.preventDefault(), !1), y = (v) => {
if (v.target === l) {
g = e;
return;
}
return !1;
};
return o.addEventListener("pointerdown", y), o.addEventListener("dragstart", h), o.addEventListener("dragover", u), o.addEventListener("dragend", b), o.addEventListener("dragenter", f), o.addEventListener("drop", p, !1), () => {
o.removeEventListener("pointerdown", y), o.removeEventListener("dragenter", f), o.removeEventListener("dragover", u), o.removeEventListener("dragstart", h), o.removeEventListener("dragend", b), o.removeEventListener("drop", p), m();
};
}, [e]), {
containerRef: t,
listeners: {
ref: n
}
};
};
he.useSortable = Te;
const En = ({ itemWrapper: e = fe, value: t, onChange: n, setItems: s, items: a, defaultValue: c }) => {
const [d, o] = i.useState(t ?? c);
i.useEffect(() => {
typeof t == "string" && t !== d && o(t);
}, [d, t]);
const l = i.useCallback((f) => {
s((g) => g.filter(({ key: h }) => h !== f));
}, []), m = i.useCallback(
(f) => {
if (!(f.currentTarget instanceof HTMLDivElement))
return;
const g = f.currentTarget.dataset.id;
g && n(g);
},
[n]
);
return /* @__PURE__ */ r("nav", { className: ce.tabnav, children: /* @__PURE__ */ r(he, { items: a, onChange: s, controlAs: Tn, children: a.map((f) => /* @__PURE__ */ r(Rn, { item: f, onSelect: m, selected: d, onRequestClose: l, children: /* @__PURE__ */ r(e, { children: f.value }) }, f.key)) }) });
};
En.displayName = "TabNav";
const Tn = ({ children: e, id: t }) => {
const { containerRef: n, listeners: s } = Te(t), a = i.Children.map(e, (c) => i.isValidElement(c) ? i.cloneElement(c, s) : c);
return /* @__PURE__ */ r("div", { ref: n, className: ce.sortableItemControl, children: a });
}, Rn = i.forwardRef(({ selected: e, item: t, children: n, onSelect: s, onRequestClose: a, closeMark: c }, d) => {
const o = i.useCallback(
(l) => {
l.preventDefault(), a && a(t.key);
},
[a]
);
return /* @__PURE__ */ N("div", { className: ce.sortableItem, "data-id": t.key, "aria-selected": e === t.key, onClick: s, children: [
a ? /* @__PURE__ */ r("button", { type: "button", className: ce.deleteButton, value: `close ${t.value} tab`, onClick: o, children: c ?? "×" }) : /* @__PURE__ */ r("span", {}),
/* @__PURE__ */ N("div", { className: ce.sortableItemBody, ref: d, children: [
/* @__PURE__ */ r("div", {}),
t.icon,
n
] })
] });
}), Bn = "brstabbar", On = "brstabitm", Pn = "brstab", Fn = "brstabF_L", Hn = "brstabins", zn = "brstabwrp", Un = "brsdrg", qn = "brsdragOver", le = {
tabbar: Bn,
tabitem: On,
tabitemIcon: Pn,
tabitemLabel: Fn,
tabInsertIndicator: Hn,
tabWrapper: zn,
dragging: Un,
dragOver: qn
}, jn = w(({ items: e, onSelect: t, tabIndex: n, defaultSelected: s }) => {
const [a, c] = X(() => s ?? 0), d = L(
(o, l) => {
t(o, l), c(l);
},
[t]
);
return /* @__PURE__ */ r("nav", { className: le.tabbar, tabIndex: n, children: /* @__PURE__ */ r("ul", { className: le.tabs, children: e.map((o, l) => /* @__PURE__ */ r(Vn, { item: o, tabIndex: l, onSelect: d, selected: l === a }, l)) }) });
});
jn.displayName = "TabBar";
const Vn = w(({ tabIndex: e, item: t, onSelect: n, selected: s }) => {
const a = L(
(c) => {
c.preventDefault(), n(t, e);
},
[n, t, e]
);
return /* @__PURE__ */ r("li", { className: le.tabitem, "data-selected": s, children: /* @__PURE__ */ N("a", { tabIndex: e, onClick: a, children: [
/* @__PURE__ */ r("div", { className: le.tabitemIcon, children: t.icon }),
/* @__PURE__ */ r("span", { className: le.tabitemLabel, children: t.value })
] }) });
}), Wn = "blcmark", Xn = {
mark: Wn
}, _ = ({ direction: e, size: t }) => {
const n = i.useMemo(() => {
const s = "1em";
return {
width: t ?? s,
height: t ?? s
};
}, [t]);
return /* @__PURE__ */ r("i", { className: Xn.mark, "data-direction": e ?? "down", role: "decoration", style: n, children: /* @__PURE__ */ r(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: /* @__PURE__ */ r("polyline", { points: "6 9 12 15 18 9" })
}
) });
};
_.displayName = "ChevronMark";
const Zn = "brsinp", Gn = "brsbtn", _n = "brspuldowmar", Yn = "brslbl", Qn = "brspullDown", Kn = "brstitle", Jn = "brsbody", er = "brschild", tr = "brssep", nr = "brswithico", rr = "brsico", sr = "brstbr", ar = "brssegcon", or = "brssegment", H = {
input: Zn,
button: Gn,
pullDownMark: _n,
label: Yn,
pullDown: Qn,
title: Kn,
body: Jn,
child: er,
separator: tr,
withIcon: nr,
icon: rr,
toolbar: sr,
segmentControl: ar,
segment: or
}, Re = ({ size: e, className: t }) => /* @__PURE__ */ r(
"svg",
{
className: t,
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
width: e,
height: e,
viewBox: "0 0 512 512",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ r("path", { d: "M456.69 421.39 362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3zM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8 124.95 124.95 0 0 1-124.8-124.8z" })
}
);
Re.displayName = "SearchIcon";
const Be = i.forwardRef(({ children: e, variant: t, ...n }, s) => {
const a = n.as ?? "button";
return /* @__PURE__ */ N(a, { className: H.button, "data-variant": t, ...n, ref: s, children: [
e,
t === "combobox" && /* @__PURE__ */ r("i", { className: H.pullDownMark, role: "none", children: /* @__PURE__ */ r(_, {}) })
] });
});
Be.displayName = "PushButton";
const ge = i.forwardRef(
({ variant: e, ...t }, n) => /* @__PURE__ */ N("div", { className: H.button, "data-variant": e, children: [
/* @__PURE__ */ r("select", { ...t, ref: n, children: t.children }),
/* @__PURE__ */ r("div", { role: "none", className: H.pullDownMark, children: /* @__PURE__ */ r(_, {}) })
] })
);
ge.displayName = "PullDown";
const Oe = (e) => /* @__PURE__ */ r(ge, { ...e, variant: "popup" });
Oe.displayName = "PopUpButton";
const Pe = (e) => /* @__PURE__ */ r(ge, { ...e, variant: ["combobox", e.variant].join(" ") });
Pe.displayName = "ComboBox";
const Ie = i.memo(
i.forwardRef(({ children: e, variant: t, ...n }, s) => /* @__PURE__ */ r("input", { className: H.input, type: n.type ?? "text", ...n, ref: s, "data-vatiant": t, children: e }))
);
Ie.displayName = "InputField";
const Fe = (e) => /* @__PURE__ */ N("div", { className: H.withIcon, children: [
/* @__PURE__ */ r("i", { className: H.icon, children: /* @__PURE__ */ r(Re, { size: 17 }) }),
/* @__PURE__ */ r(Ie, { ...e, type: "search", placeholder: e.placeholder ?? "Search..." })
] });
Fe.displayName = "SearchField";
const He = i.memo(({ title: e, subTitle: t, children: n }) => /* @__PURE__ */ N("div", { className: H.title, children: [
n,
e && /* @__PURE__ */ r("strong", { children: e }),
t && /* @__PURE__ */ r("small", { children: t })
] }));
He.displayName = "Title";
const ze = i.forwardRef(
({ children: e, ...t }, n) => /* @__PURE__ */ r("div", { className: H.body, ...t, ref: n, children: i.Children.map(e, (s, a) => /* @__PURE__ */ r("div", { className: H.child, children: s }, a)) })
);
ze.displayName = "Body";
const ut = i.memo(() => /* @__PURE__ */ r("hr", { className: H.separator, role: "separator" })), Ce = i.memo(({ onClick: e, index: t, isActive: n, children: s }) => {
const a = i.useCallback(() => {
e(t);
}, [t, e]);
return /* @__PURE__ */ r("div", { className: H.segment, "data-is-active": n, onClick: a, children: s });
});
Ce.displayName = "Segment";
const Ue = i.memo(
({
items: e,
defaultSelected: t = 0,
onSelect: n,
children: s
}) => {
const [a, c] = i.useState(t), d = De(a);
i.useEffect(() => {
typeof d > "u" || !n || d === a || n(a);
}, [a]);
const o = i.useMemo(() => s ? i.Children.toArray(s) : e ?? [], [s, e]);
return /* @__PURE__ */ r("div", { className: H.segmentControl, children: o.map((l, m) => /* @__PURE__ */ r(Ce, { index: m, onClick: c, isActive: a === m, children: l }, m)) });
}
);
Ue.displayName = "SegmentedControl";
const qe = () => /* @__PURE__ */ r("div", {});
qe.displayName = "Spacer";
const R = ({
children: e,
style: t
}) => /* @__PURE__ */ r("div", { className: H.toolbar, role: "toolbar", style: t, children: e });
R.displayName = "Toolbar";
const Ho = {
SegmentedControl: Ue,
Toolbar: R,
SearchField: Fe,
InputField: Ie,
Separator: ut,
PushButton: Be,
PullDown: ge,
Title: He,
Body: ze,
Segment: Ce,
ComboBox: Pe,
PopUpButton: Oe,
Spacer: qe
};
R.SegmentedControl = Ue;
R.Toolbar = R;
R.SearchField = Fe;
R.InputField = Ie;
R.Separator = ut;
R.PushButton = Be;
R.PullDown = ge;
R.Title = He;
R.Body = ze;
R.Segment = Ce;
R.ComboBox = Pe;
R.PopUpButton = Oe;
R.Spacer = qe;
const cr = "blcico", lr = {
icon: cr
}, ir = w(({ src: e, width: t, height: n, size: s }) => {
const a = J(() => {
const c = e.match(/-([a-zA-Z]+)$/);
return c ? c[1] : null;
}, [e]);
return /* @__PURE__ */ r(
"i",
{
"data-fa": !0,
className: lr.icon,
"data-icon": e,
"data-postfix": a,
style: {
width: t,
height: n,
fontSize: s ?? t
}
}
);
});
ir.displayName = "Icon";
const je = w(({ children: e, size: t }) => /* @__PURE__ */ r(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
width: t,
height: t,
viewBox: "0 0 256 256",
xmlns: "http://www.w3.org/2000/svg",
children: e
}
)), dr = w(({ size: e }) => /* @__PURE__ */ r(je, { size: e, children: /* @__PURE__ */ r("path", { d: "M203.6,73.72c5.84-5.88,5.84-15.42,0-21.31-5.84-5.88-15.3-5.88-21.14,0l-54.47,53.65-54.47-53.05c-5.84-5.88-15.3-5.88-21.14,0-5.84,5.88-5.84,15.42,0,21.31l54.49,53.03-54.49,54.93c-5.84,5.88-5.84,15.42,0,21.31,5.84,5.88,15.3,5.88,21.14,0l54.47-54.95,54.49,54.93c5.84,5.88,15.3,5.88,21.14,0,5.84-5.88,5.84-15.42,0-21.31l-54.51-54.91,54.49-53.63Z" }) })), ur = w(({ size: e }) => /* @__PURE__ */ r(je, { size: e, children: /* @__PURE__ */ r("rect", { x: "29.34", y: "113.16", width: "198.32", height: "30.68", rx: "15.34", ry: "15.34" }) })), mt = ({ size: e }) => /* @__PURE__ */ r(je, { size: e, children: /* @__PURE__ */ r("path", { d: "M231.6,56.14c6,6,6,15.75,0,21.76l-122.96,122.96c-6,6-15.75,6-21.76,0l-61.48-61.48c-6-6-6-15.75,0-21.76,6-6,15.75-6,21.76,0l50.62,50.57,112.1-112.05c6-6,15.75-6,21.76,0h-.05Z" }) });
mt.displayName = "Checkmark";
const mr = "cntrsz", fr = {
resizer: mr
}, hr = ({ autoplace: e = !0, onResize: t, originX: n, originY: s, max: a, min: c, step: d }) => {
const o = i.useRef(null), l = i.useMemo(() => ({ x: n ?? 0.5, y: s ?? 0.5 }), [n, s]), m = i.useCallback(
(g) => {
g.type !== "pointerdown" && t(gr(g.deltaX, g.deltaY, l.x, l.y), g.isFinal);
},
[a, c, d, l]
);
nt(o, m);
const f = i.useMemo(() => {
if (e) {
const g = Math.atan2(l.y, l.x), h = ["ew", "nwse", "ns", "nesw", "ew", "nwse", "ns", "nesw"], b = Math.round(g / (Math.PI / 4)), u = `${h.at(b)}-resize`, p = (l.x + 1) / 2, y = (l.y + 1) / 2;
return {
top: `${p * 100}%`,
left: `${y * 100}%`,
cursor: u,
content: `${g}`
};
}
return {};
}, [e, l]);
return /* @__PURE__ */ r("div", { className: fr.resizer, ref: o, style: f });
};
hr.displayName = "Resizer";
const gr = (e, t, n, s) => ({ x: n, y: s, width: e, height: t }), pr = "cntsegcon", br = "cntseg", yr = "cntind", oe = {
segmentControl: pr,
segmentButton: br,
indicator: yr
}, vr = "cntsegment", Nr = {
segment: vr
}, wr = w(({ children: e }) => /* @__PURE__ */ r("div", { className: Nr.segment, children: e })), kr = (e = !1) => {
const [t, n] = X(e), s = L(() => {
n((a) => !a);
}, []);
return [t, s, n];
}, xr = w(
({
items: e,
selectedIndex: t,
defaultSelected: n = 0,
onSelect: s,
element: a = wr,
controlled: c = !1,
onPositionChange: d,
onDragStart: o,
onDragEnd: l,
onDragPreview: m
}) => {
const [f, g] = X(n), [h, b] = X({}), u = te(null), [p, y] = X(!1), [v, x] = X(null), [I, D] = X(null), M = c ? t ?? n : f, $ = p && I !== null ? I : M, T = L(
(S) => {
c || g(S), s == null || s(S);
},
[c, s]
), O = L(
(S) => {
if (!(S.target instanceof HTMLButtonElement))
return;
const E = parseInt(S.target.dataset.index ?? "0");
T(E);
},
[T]
), W = L(
(S) => {
if (!(S.target instanceof HTMLButtonElement)) return;
const E = parseInt(S.target.dataset.index ?? "0");
E === M && (y(!0), x(E), D(E), o == null || o(E), S.currentTarget.setPointerCapture(S.pointerId));
},
[M, o]
), Z = L(
(S) => {
if (!p || !u.current) return;
const E = u.current.getBoundingClientRect(), $e = S.clientX - E.left, V = Array.from(u.current.children).filter(
(G) => G.classList.contains(oe.segmentButton)
);
let K = v;
for (let G = 0; G < V.length; G++) {
const Ze = V[G].getBoundingClientRect(), At = Ze.left - E.left, Et = Ze.right - E.left;
if ($e >= At && $e <= Et) {
K = G;
break;
}
}
K !== null && K !== I && (D(K), m == null || m(K));
},
[p, v, I, m]
), ne = L(
(S) => {
if (!p) return;
S.currentTarget.releasePointerCapture(S.pointerId);
const E = I !== null ? I : M;
I !== null && I !== M && T(I), l == null || l(E), y(!1), x(null), D(null);
},
[p, I, M, T, l]
), P = L(
(S) => {
if (!u.current)
return;
const E = Array.from(u.current.children).filter((Xe) => Xe.classList.contains(oe.segmentButton));
if (E.length === 0 || S >= E.length)
return;
const V = E[S].getBoundingClientRect(), K = u.current.getBoundingClientRect(), G = {
top: V.top - K.top,
left: V.left - K.left,
width: V.width,
height: V.height
};
b(G), d && d({
...G,
// Also provide absolute position for advanced use cases
x: V.x,
y: V.y,
right: V.right,
bottom: V.bottom
});
},
[d]
);
ue(() => {
P($);
}, [$, P]), ue(() => {
if (!u.current) return;
const S = new ResizeObserver(() => {
P($);
});
return S.observe(u.current), () => {
S.disconnect();
};
}, [$, P]);
const Q = L(
(S) => {
if (S.target instanceof HTMLButtonElement) {
if (!(S.target.dataset.index === $.toString()))
return;
be(!0);
}
},
[$]
), pe = L(
(S) => {
if (S.target instanceof HTMLButtonElement) {
if (!(S.target.dataset.index === $.toString()))
return;
be(!1);
}
},
[$]
), [C, B, be] = kr(!1);
return /* @__PURE__ */ N("div", { className: oe.segmentControl, ref: u, children: [
e.map((S, E) => /* @__PURE__ */ r(
Ir,
{
index: E,
active: E === $,
onClick: O,
focus: Q,
blur: pe,
onPointerDown: W,
onPointerMove: Z,
onPointerUp: ne,
onPointerCancel: ne,
children: /* @__PURE__ */ r(a, { children: S })
},
E
)),
h && h.left !== void 0 && /* @__PURE__ */ r(
"div",
{
className: oe.indicator,
role: "presentation",
"data-focus": C,
style: {
transform: `translate(${h.left}px, ${h.top}px) scale(${C ? 0.97 : 1})`,
width: h.width,
height: h.height
},
children: e.at($)
}
)
] });
}
);
xr.displayName = "SegmentedControl";
const Ir = ({ children: e, index: t, active: n, onClick: s, focus: a, blur: c, onPointerDown: d, onPointerMove: o, onPointerUp: l, onPointerCancel: m }) => {
const f = L(
(u) => {
a(u), d == null || d(u);
},
[a, d]
), g = L(
(u) => {
c(u), l == null || l(u);
},
[c, l]
), h = L(
(u) => {
c(u), m == null || m(u);
},
[c, m]
), b = L(
(u) => {
u.currentTarget.hasPointerCapture(u.pointerId) || c(u);
},
[c]
);
return /* @__PURE__ */ r(
"button",
{
onClick: s,
type: "button",
"data-index": t,
"data-active": n,
className: oe.segmentButton,
onPointerDown: f,
onPointerMove: o,
onPointerUp: g,
onPointerCancel: h,
onPointerLeave: b,
style: {
touchAction: "none"
// Prevent scrolling during drag
},
children: e
}
);
}, Cr = "lmnheading", Sr = "lmndetails", $r = "lmnsummary", Lr = "lmnarticle", Mr = "lmnsection", Dr = "lmnnav", Ar = "lmnmain", Er = "lmnhdr", Tr = "lmnftr", Rr = "lmnaside", Br = "lmnaddress", Or = "lmnblo", Pr = "lmnfigure", Fr = "lmnfig", Hr = "lmnpre", zr = "lmndiv", Ur = "lmnlbl", qr = "lmnmarker", jr = "lmndes", Vr = "lmncard", Wr = "lmnhzrule", Xr = "lmnimg", Zr = "lmna", A = {
heading: Cr,
details: Sr,
summary: $r,
article: Lr,
section: Mr,
nav: Dr,
main: Ar,
header: Er,
footer: Tr,
aside: Rr,
address: Br,
blockquote: Or,
figure: Pr,
figcaption: Fr,
pre: Hr,
div: zr,
label: Ur,
marker: qr,
descriptions: jr,
card: Vr,
horizontalrule: Wr,
image: Xr,
a: Zr
}, Gr = {
1: "h1",
2: "h2",
3: "h3",
4: "h4",
5: "h5",
6: "h6"
}, ee = w(
k(
({ level: e, children: t, ...n }, s) => {
const a = Gr[e] ?? "h3";
return Rt(
a,
{
...n,
ref: s,
className: A.heading
},
t
);
}
)
);
ee.displayName = "Heading";
const zo = k((e, t) => /* @__PURE__ */ r(ee, { level: 1, ...e, ref: t })), Uo = k((e, t) => /* @__PURE__ */ r(ee, { level: 2, ...e, ref: t })), qo = k((e, t) => /* @__PURE__ */ r(ee, { level: 3, ...e, ref: t })), jo = k((e, t) => /* @__PURE__ */ r(ee, { level: 4, ...e, ref: t })), Vo = k((e, t) => /* @__PURE__ */ r(ee, { level: 5, ...e, ref: t })), Wo = k((e, t) => /* @__PURE__ */ r(ee, { level: 6, ...e, ref: t })), _r = "frmbtn", Yr = {
button: _r
}, xe = w(
k(({ children: e, color: t, quiet: n, size: s, variant: a, rounded: c, ...d }, o) => {
const l = J(() => [a, s, c ? "rounded" : "", t, d["data-variant"]].filter(Boolean).join(" ").trim(), [a, s, c, t]), m = rt(Yr.button, d.className);
return /* @__PURE__ */ r("button", { ...d, ref: o, className: m, "data-variant": l, children: e });
})
);
xe.displayName = "Button";
const Qr = "dlgctnX-K", Kr = "dlgdes", Jr = "dlgtitle", es = "dlgbtngrp", ie = {
content: Qr,
description: Kr,
title: Jr,
buttonGroup: es
}, Ae = ({
actions: e,
onSelect: t,
isLoading: n,
children: s,
title: a,
error: c,
description: d,
direction: o,
...l
}) => {
const m = L((f) => {
f.stopPropagation(), f.preventDefault();
const g = f.currentTarget.getAttribute("data-action");
!g || !t || t(g);
}, []);
return /* @__PURE__ */ r(me, { ...l, variant: "alert", children: /* @__PURE__ */ N("div", { className: ie.content, "data-is-loading": n, children: [
a && /* @__PURE__ */ r(ee, { level: 3, children: a }),
d && /* @__PURE__ */ r("p", { className: ie.description, children: d }),
c && /* @__PURE__ */ N("p", { children: [
/* @__PURE__ */ r("strong", { children: c.name }),
c.message,
ts(c) && /* @__PURE__ */ N(j, { children: [
"Caused by: ",
c.cause.message
] })
] }),
s,
/* @__PURE__ */ r("div", { className: ie.buttonGroup, "data-direction": o, children: e == null ? void 0 : e.map((f, g) => /* @__PURE__ */ r(
xe,
{
onClick: m,
"data-action": f.key,
type: "button",
disabled: n,
variant: `alert ${f.variant ?? ""}`.trim(),
children: f.value
},
g
)) })
] }) });
};
Ae.displayName = "Alert";
const ts = (e) => e instanceof Error ? e.hasOwnProperty("cause") : !1, ns = "dlgbase", rs = "dlgcnt", ss = "dlgdec", as = "dlgbody", os = "dlgctnvg-", cs = "dlgblowout", ls = "dlgfitbox", re = {
base: ns,
container: rs,
decoration: ss,
body: as,
content: os,
blowout: cs,
fitbox: ls
}, is = (e, t, n, s, a, c = 0) => (e += c / 2, t += c / 2, n -= c, s -= c, [
`M ${e + a} ${t}`,
`H ${e + n - a}`,
`Q ${e + n} ${t} ${e + n} ${t + a}`,
`V ${t + s - a}`,
`Q ${e + n} ${t + s} ${e + n - a} ${t + s}`,
`H ${e + a}`,
`Q ${e} ${t + s} ${e} ${t + s - a}`,
`V ${t + a}`,
`Q ${e} ${t} ${e + a} ${t}`,
"Z"
].join(" ").replace(/\s+/g, " ").replace(/\n/g, "")), ds = ({
x: e,
y: t,
width: n,
height: s,
lookAtX: a,
lookAtY: c,
rx: d = 10,
shadowMargin: o = 40,
chevronSize: l = 16
}) => {
const m = n / 2, f = s / 2, g = e + m, h = t + f, b = Math.atan2(c - h, a - g);
let u = Math.min(Math.max(a - g, -m), m), p = Math.min(Math.max(c - h, -f), f);
const y = d * 2;
((D, M) => {
const $ = Math.abs(D) - m, T = Math.abs(M) - f;
return $ * $ + T * T < y * y;
})(u, p) && (Math.floor(4 * (b % (Math.PI * 2) / (Math.PI * 2))) % 2 === 0 ? (u = Math.min(Math.max(u, -m), m), p = Math.min(Math.max(p, -f + y), f - y)) : (u = Math.min(Math.max(u, -m + y), m - y), p = Math.min(Math.max(p, -f), f)));
const x = {
x: Math.min(Math.max(u, -m), m) + n / 2 - l / 2,
y: Math.min(Math.max(p, -f), f) + s / 2 - l / 2
}, I = (() => {
const D = x.y < 0, M = x.x < 0, $ = x.x > n - l;
return x.y > s - l ? 0 : D ? 2 : M ? 3 : $ ? 1 : 0;
})();
return {
arrowSnapPoint: x,
angle: I
};
}, us = ({ width: e, height: t, x: n, y: s, lookAtX: a, lookAtY: c, rx: d = 10, shadowMargin: o = 40, chevronSize: l = 16 }) => {
const m = [n, s, e, t, a, c, d, o, l], f = i.useMemo(() => {
const { arrowSnapPoint: h, angle: b } = ds({
x: n,
y: s,
width: e,
height: t,
lookAtX: a,
lookAtY: c,
rx: d,
shadowMargin: o,
chevronSize: l
});
return /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r("g", { transform: `translate(${h.x}, ${h.y})`, children: /* @__PURE__ */ N("g", { transform: `translate(8, 8) rotate(${b * 90}) translate(-8, -8)`, children: [
/* @__PURE__ */ r("rect", { x: "0", y: "0", width: "16", height: "16", fill: "transparent" }),
/* @__PURE__ */ r("g", { transform: "translate(-15, 16)", children: /* @__PURE__ */ r("path", { d: "M7,-8.105 L10.3641716,-8.105 C12.6069526,-8.105 14.569386,-7.41371956 16.2514718,-6.03115868 C18.7746005,-3.95731736 19.6156434,-2.9203967 21.2977292,-1.1921956 C22.979815,0.536005499 23.8208579,0.536005499 25.5029437,-1.1921956 C27.1850294,-2.9203967 28.8671152,-4.6485978 30.549201,-6.03115868 C32.2312868,-7.41371956 33.0723297,-8.105 37.2775442,-8.105 C40.0810205,-8.105 41.4827586,-8.105 41.4827586,-8.105 L7,-8.105 Z" }) })
] }) }) });
}, m), g = i.useId();
return /* @__PURE__ */ N(
"svg",
{
style: {
position: "absolute",
left: -o,
top: -o,
width: e + o * 2,
height: t + o * 2
},
viewBox: `${-o} ${-o} ${e + o * 2} ${t + o * 2}`,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
children: [
/* @__PURE__ */ r("defs", { children: /* @__PURE__ */ N("filter", { x: "-26.9%", y: "-32.0%", width: "161.5%", height: "164.0%", filterUnits: "objectBoundingBox", id: g, children: [
/* @__PURE__ */ r("feOffset", { dx: "0", dy: "0", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
/* @__PURE__ */ r("feGaussianBlur", { stdDeviation: "1.5", in: "shadowOffsetOuter1", result: "shadowBlurOuter1" }),
/* @__PURE__ */ r(
"feColorMatrix",
{
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0",
type: "matrix",
in: "shadowBlurOuter1",
result: "shadowMatrixOuter1"
}
),
/* @__PURE__ */ r("feOffset", { dx: "8", dy: "0", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
/* @__PURE__ */ r("feGaussianBlur", { stdDeviation: "20", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
/* @__PURE__ */ r(
"feColorMatrix",
{
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0",
type: "matrix",
in: "shadowBlurOuter2",
result: "shadowMatrixOuter2"
}
),
/* @__PURE__ */ N("feMerge", { children: [
/* @__PURE__ */ r("feMergeNode", { in: "shadowMatrixOuter1" }),
/* @__PURE__ */ r("feMergeNode", { in: "shadowMatrixOuter2" })
] })
] }) }),
/* @__PURE__ */ r("g", { fillRule: "evenodd", stroke: "none", strokeWidth: "1", children: /* @__PURE__ */ N("g", { style: { mixBlendMode: "multiply" }, children: [
/* @__PURE__ */ N("g", { fill: "var(--textColor)", fillOpacity: "1", filter: `url(#${g})`, children: [
/* @__PURE__ */ r(_e, { x: 0, y: 0, rx: d, width: e, height: t }),
f
] }),
/* @__PURE__ */ N("g", { fill: "var(--windowBackgroundColor)", filter: "var(--dialogBackgroundFilter)", children: [
/* @__PURE__ */ r(_e, { x: 0, y: 0, rx: d, width: e, height: t }),
f
] })
] }) })
]
}
);
}, _e = ({ x: e, y: t, width: n, height: s, rx: a }) => {
const c = is(e, t, n, s, a ?? 0);
return /* @__PURE__ */ r("path", { d: c });
}, ms = ({ open: e = !0, onClose: t, children: n, measure: s, render: a }) => {
const c = i.useRef(null), [d] = Ee(c), o = i.useMemo(() => {
if (typeof window > "u")
return { x: 0, y: 0, overflowX: 0, overflowY: 0, width: 0, height: 0 };
const h = {
x: window.scrollX,
y: window.scrollY,
width: window.innerWidth,
height: window.innerHeight
}, b = {
width: Math.min(h.width, 320),
height: Math.min(h.height, 240)
}, u = {
x: (s.x < (h.width + h.x) / 2, s.x),
y: s.y < (h.height + h.y) / 2 ? s.y : s.y - b.height - s.height,
width: b.width,
height: b.height
}, p = u.x + u.width, y = u.x, v = Math.max(p - h.width, 0), x = Math.min(y, 0);
u.x += -v + x;
const I = u.y, D = u.y + u.height, M = Math.max(D - h.height, 0), $ = Math.min(I, 0);
return u.y += -M + $, u.y < (h.y + h.height) / 2 && (u.y += s.height), u;
}, [s, d]), [l, m] = st({
onClose: t
}), f = i.useRef(null), g = {
x: s.x + s.width / 2,
y: s.y + s.height / 2
};
return /* @__PURE__ */ N(j, { children: [
/* @__PURE__ */ r("i", { ref: f }),
/* @__PURE__ */ r(at, { parentNode: f.current, children: /* @__PURE__ */ r(
"div",
{
className: re.base,
"data-open": e,
style: {
pointerEvents: e ? "auto" : "none"
},
children: /* @__PURE__ */ r("div", { className: re.container, ref: l, children: /* @__PURE__ */ N(
"div",
{
className: re.body,
style: {
width: o.width,
height: o.height,
transform: `translate(${o.x}px, ${o.y}px)`
},
children: [
/* @__PURE__ */ r("div", { className: re.decoration, children: /* @__PURE__ */ r(
us,
{
width: o.width,
height: o.height,
x: o.x,
y: o.y,
lookAtX: g.x,
lookAtY: g.y
}
) }),
/* @__PURE__ */ r("div", { className: re.content, ref: m, children: /* @__PURE__ */ N("div", { ref: c, className: re.fitbox, children: [
n,
a && a(o)
] }) })
]
}
) })
}
) })
] });
};
ms.displayName = "ContextualMenu";
const Xo = (e) => {
const [t, n] = Cn(e ?? !1), s = i.useRef(null), [a, c] = Ee(s);
return i.useEffect(() => {
c();
}, [t]), [s, t, n, a];
}, fs = ({ open: e = !0, onClose: t, children: n, potal: s = !0 }) => /* @__PURE__ */ r(me, { open: e, onClose: t, potal: s, children: /* @__PURE__ */ r("section", { className: lt.content, children: n }) });
fs.displayName = "Modal";
const hs = "frmradio", gs = {
radio: hs
}, ps = "frmchk", bs = "frmbase", ys = "frmmark", we = {
checkbox: ps,
base: bs,
mark: ys
};
function vs(e) {
if (!e || typeof e != "string")
return !1;
const t = e.replace(/^data:[^;]*;base64,/, "");
if (t.length === 0 || !/^[A-Za-z0-9+/]*={0,2}$/.test(t) || t.length % 4 !== 0)
return !1;
try {
return atob(t), !0;
} catch {
return !1;
}
}
function Ns(e, t) {
if (!e || typeof e != "string")
return !1;
const n = e.trim();
if (n.length === 0)
return !1;
try {
const s = new URL(n);
return ["http:", "https:", "ftp:", "ftps:"].includes(s.protocol) ? !0 : (t == null || t.requireProtocol, !1);
} catch {
return !1;
}
}
const ws = () => {
const e = te(/* @__PURE__ */ new Set()), t = L((a) => {
const c = URL.createObjectURL(a);
return e.current.add(c), c;
}, []), n = L((a) => {
e.current.has(a) && (URL.revokeObjectURL(a), e.current.delete(a));
}, []), s = L(() => {
e.current.forEach((a) => URL.revokeObjectURL(a)), e.current.clear();
}, []);
return ue(() => () => {
e.current.forEach((a) => URL.revokeObjectURL(a)), e.current.clear();
}, []), {
createObjectURL: t,
revokeObjectURL: n,
revokeAllObjectURLs: s,
get activeURLCount() {
return e.current.size;
}
};
}, ye = {
en: {
clickToSelect: "Click to select files",
orDragAndDrop: "or drag and drop",
dropFilesHere: "Drop files here"
},
ja: {
clickToSelect: "ファイルを選択",
orDragAndDrop: "またはドラッグ&ドロップ",
dropFilesHere: "ファイルをここにドロップ"
},
es: {
clickToSelect: "Haz clic para seleccionar archivos",
orDragAndDrop: "o arrastra y suelta",
dropFilesHere: "Suelta los archivos aquí"
},
fr: {
clickToSelect: "Cliquez pour sélectionner des fichiers",
orDragAndDrop: "ou glissez-déposez",
dropFilesHere: "Déposez les fichiers ici"
},
de: {
clickToSelect: "Klicken Sie, um Dateien auszuwählen",
orDragAndDrop: "oder ziehen und ablegen",
dropFilesHere: "Dateien hier ablegen"
},
ko: {
clickToSelect: "파일 선택하기",
orDragAndDrop: "또는 드래그 앤 드롭",
dropFilesHere: "파일을 여기에 드롭하세요"
},
"zh-CN": {
clickToSelect: "点击选择文件",
orDragAndDrop: "或拖拽上传",
dropFilesHere: "将文件拖拽到这里"
},
"zh-TW": {
clickToSelect: "點擊選擇檔案",
orDragAndDrop: "或拖曳上傳",
dropFilesHere: "將檔案拖曳到這裡"
}
}, ks = (e) => {
const t = J(() => {
if (e) return e;
if (typeof window > "u") return "en";
const s = navigator.language;
if (ye[s])
return s;
const a = s.split("-")[0];
return ye[a] ? a : "en";
}, [e]), n = ye[t] || ye.en;
return {
locale: t,
messages: n,
getSelectText: (s) => s ? n.dropFilesHere : `${n.clickToSelect} ${n.orDragAndDrop}`
};
}, xs = "cimed", Is = "cimediaprv", Cs = "cispin", Ye = {
mediaPreviewContainer: xs,
mediaPreview: Is,
spin: Cs
}, Qe = w(({
src: e,
alt: t = "Media preview",
maxWidth: n = 256,
maxHeight: s = 256,
minWidth: a = 64,
minHeight: c = 64,
aspectRatioRange: d = { min: 0.25, max: 4 },
// 1:4 to 4:1 ratio
onLoad: o,
onError: l,
className: m
}) => {
const f = L((h) => {
const b = h.currentTarget, { naturalWidth: u, naturalHeight: p } = b;
if (u === 0 || p === 0) {
l == null || l();
return;
}
o == null || o();
}, [o, l]), g = J(() => ({
"--max-width": `${n}px`,
"--max-height": `${s}px`,
"--min-width": `${a}px`,
"--min-height": `${c}px`,
"--aspect-ratio-min": d.min.toString(),
"--aspect-ratio-max": d.max.toString()
}), [n, s, a, c, d]);
return /* @__PURE__ */ r(
"div",
{
className: `${Ye.mediaPreviewContainer} ${m || ""}`,
style: g,
children: /* @__PURE__ */ r(
"img",
{
src: e,
alt: t,
className: Ye.mediaPreview,
onLoad: f,
onError: l,
loading: "lazy"
}
)
}
);
}), Ss = (e) => e.startsWith("/") || e.startsWith("."), $s = w(
k(({
defaultValue: e,
value: t,
variant: n = "preview",
maxPreviewWidth: s = 96,
maxPreviewHeight: a = 96,
minPreviewWidth: c = 48,
minPreviewHeight: d = 48,
aspectRatioRange: o = { min: 0.25, max: 4 },
locale: l,
...m
}, f) => {
const [g, h] = X(!1), [b, u] = X([]), [p, y] = X(!1), { createObjectURL: v, revokeAllObjectURLs: x } = ws(), { getSelectText: I } = ks(l), D = J(() => {
var C;
return (C = m.accept) == null ? void 0 : C.split(",").some((B) => B.trim().startsWith("image"));
}, [m.accept]), M = J(() => {
if (typeof e == "string" && (Ss(e) || Ns(e) || vs(e)))
return e;
}, [e]), $ = J(() => b.map(v), [b, v]), T = L((C) => {
if (!C || C.length === 0)
return u([]), h(!1), x(), [];
const B = Array.from(C);
return x(), u(B), h(!0), B;
}, [x]), O = L(
(C) => {
var B;
C.target instanceof HTMLInputElement && (T(C.target.files), (B = m.onChange) == null || B.call(m, C));
},
[m.onChange, T]
), W = L((C) => {
C.preventDefault(), C.stopPropagation(), y(!0);
}, []), Z = L((C) => {
C.preventDefault(), C.stopPropagation(), C.currentTarget.contains(C.relatedTarget) || y(!1);
}, []), ne = L((C) => {
C.preventDefault(), C.stopPropagation();
}, []), P = L((C) => {
C.preventDefault(), C.stopPropagation(), y(!1);
const B = C.dataTransfer.files;
if (T(B), m.onChange) {
const be = {
target: { files: B },
currentTarget: { files: B }
};
m.onChange(be);
}
}, [T, m.onChange]), Q = b.length > 0 || !g && M;
return n === "preview" ? /* @__PURE__ */ N(
"div",
{
className: `${U.mediaInput} ${p ? U.mediaInputDragActive : ""} ${Q ? U.mediaInputHasFiles : ""}`,
"data-variant": "preview",
onDragEnter: W,
onDragLeave: Z,
onDragOver: ne,
onDrop: P,
children: [
/* @__PURE__ */ N("div", { className: U.mediaInputPreview, children: [
D && $.map((C, B) => /* @__PURE__ */ r(
Qe,
{
src: C,
alt: `Selected file ${B + 1}`,
maxWidth: s,
maxHeight: a,
minWidth: c,
minHeight: d,
aspectRatioRange: o
},
`selected-${B}`
)),
!g && M && D && /* @__PURE__ */ r(
Qe,
{
src: M,
alt: "Current file",
maxWidth: s,
maxHeight: a,
minWidth: c,
minHeight: d,
aspectRatioRange: o
}
),
!Q && /* @__PURE__ */ r("div", { className: U.mediaInputEmpty, children: I(p) })
] }),
!g && /* @__PURE__ */ r(
"input",
{
type: "hidden",
name: m.name,
defaultValue: e,
value: t
}
),
/* @__PURE__ */ r(
"input",
{
type: "file",
...m,
name: g ? m.name : void 0,
onChange: O,
ref: f,
className: U.mediaInputFile,
"aria-label": Q ? `${b.length} files selected` : "Select files"
}
)
]
}
) : /* @__PURE__ */ N(j, { children: [
!g && /* @__PURE__ */ r(
"input",
{
type: "hidden",
name: m.name,
defaultValue: e,
value: t
}
),
/* @__PURE__ */ r(
"input",
{
type: "file",
...m,
name: g ? m.name : void 0,
onChange: O,
ref: f,
className: U.input,
"data-variant": "files"
}
)
] });
})
), Ls = "cibasezEm", Ms = "ciinpyTf", Ke = {
base: Ls,
input: Ms
}, se = (e, t) => Array.isArray(e) || e == null ? t : typeof e == "number" ? e : typeof e != "string" ? t : parseFloat(e), ft = i.forwardRef(
({ value: e, defaultValue: t, ...n }, s) => {
const a = i.useRef(null), { min: c, max: d, step: o } = i.useMemo(() => ({
min: se(n.min, Number.MIN_SAFE_INTEGER),
max: se(n.max, Number.MAX_SAFE_INTEGER),
step: typeof n.step > "u" ? void 0 : se(n.step, 1)
}), [n.min, n.max, n.step]), [l, m] = i.useState(() => se(t, c)), f = i.useMemo(() => e !== void 0 ? se(e, c) : l, [e, l]), [g] = Ee(a), h = i.useMemo(() => (f - c) / (d - c), [f, c, d]), b = i.useCallback(
(p) => {
var O, W;
const y = (O = a.current) == null ? void 0 : O.getBoundingClientRect();
if (!y)
return;
const x = (p.pageX - y.left) / y.width, I = c + (d - c) * x, D = typeof o == "number" ? Math.round(I / o) * o : I, M = Math.min(Math.max(D, c), d), $ = (W = a.current) == null ? void 0 : W.querySelector("input");
if (!$ || !($ instanceof HTMLInputElement))
return;
$.setAttribute("value", M.toString());
const T = new Event("change", { bubbles: !0 });
$.dispatchEvent(T), m(M);
},
[a, c, d, o, m, g]
);
nt(a, b), i.useEffect(() => {
var y;
if (!a.current)
return;
const p = (y = a.current) == null ? void 0 : y.querySelector("input");
!p || !(p instanceof HTMLInputElement) || p.setAttribute("value", f.toString());
}, [f]), i.useEffect(() => {
a.current && a.current.style.setProperty("--progress", `${h}`);
}, [h]);
const u = i.useMemo(() => Math.round((d - c) / (o ?? 1)) < 100 ? "stepped" : "linear", [c, d, o]);
return /* @__PURE__ */ r("div", { className: Ke.base, ref: a, "data-variant": u, children: /* @__PURE__ */ r("input", { type: "range", className: Ke.input, ...n, ref: s }) });
}
);
ft.displayName = "RangeInput";
const Ds = "cibase", As = "ciinp", Es = "citgl", Ts = "ciknob", ve = {
base: Ds,
input: As,
toggle: Es,
knob: Ts
}, ht = i.forwardRef(
({ defaultValue: e, value: t, ...n }, s) => /* @__PURE__ */ N("label", { className: ve.base, htmlFor: n.name, children: [
/* @__PURE__ */ r("input", { type: "checkbox", ...n, ref: s, className: ve.input }),
/* @__PURE__ */ r("div", { className: ve.toggle, children: /* @__PURE__ */ r("div", { className: ve.knob }) })
] })
);
ht.displayName = "SwitchInput";
const Je = (e) => {
const t = new Date(e), n = t.getTimezoneOffset();
return new Date(t.getTime() - n * 6