@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
242 lines (241 loc) • 6.74 kB
JavaScript
import { jsxs as S, jsx as f } from "react/jsx-runtime";
import * as u from "react";
import j, { forwardRef as _, useId as A, useCallback as H } from "react";
import { u as K } from "../../index-B_6_jmOO.js";
import { a as W, c as $, b as I } from "../../index-Cva-e5M4.js";
import { u as q, a as F } from "../../index-4ecjw_Aj.js";
import { P as V } from "../../index-Dj1pom3_.js";
import { P as T } from "../../index-D7QNmo_D.js";
import { cn as N } from "../../utils/index.js";
import { checkboxVariants as X, labelVariants as G } from "./Checkbox.variants.js";
import { useToggle as J } from "../../hooks/useToggle.js";
import { P } from "../../index-C5psggHV.js";
import { useTheme as Q } from "../../contexts/theme.hook.js";
function E() {
return E = Object.assign || function(e) {
for (var s = 1; s < arguments.length; s++) {
var t = arguments[s];
for (var o in t)
Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
}
return e;
}, E.apply(this, arguments);
}
function U(e, s) {
if (e == null) return {};
var t = Y(e, s), o, n;
if (Object.getOwnPropertySymbols) {
var r = Object.getOwnPropertySymbols(e);
for (n = 0; n < r.length; n++)
o = r[n], !(s.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(e, o) && (t[o] = e[o]);
}
return t;
}
function Y(e, s) {
if (e == null) return {};
var t = {}, o = Object.keys(e), n, r;
for (r = 0; r < o.length; r++)
n = o[r], !(s.indexOf(n) >= 0) && (t[n] = e[n]);
return t;
}
var O = _(function(e, s) {
var t = e.color, o = t === void 0 ? "currentColor" : t, n = e.size, r = n === void 0 ? 24 : n, l = U(e, ["color", "size"]);
return /* @__PURE__ */ j.createElement("svg", E({
ref: s,
xmlns: "http://www.w3.org/2000/svg",
width: r,
height: r,
viewBox: "0 0 24 24",
fill: "none",
stroke: o,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, l), /* @__PURE__ */ j.createElement("polyline", {
points: "20 6 9 17 4 12"
}));
});
O.propTypes = {
color: P.string,
size: P.oneOfType([P.string, P.number])
};
O.displayName = "Check";
var R = "Checkbox", [Z, ke] = $(R), [ee, te] = Z(R), z = u.forwardRef(
(e, s) => {
const {
__scopeCheckbox: t,
name: o,
checked: n,
defaultChecked: r,
required: l,
disabled: a,
value: b = "on",
onCheckedChange: C,
form: d,
...p
} = e, [i, k] = u.useState(null), v = K(s, (c) => k(c)), x = u.useRef(!1), g = i ? d || !!i.closest("form") : !0, [m = !1, w] = W({
prop: n,
defaultProp: r,
onChange: C
}), M = u.useRef(m);
return u.useEffect(() => {
const c = i == null ? void 0 : i.form;
if (c) {
const y = () => w(M.current);
return c.addEventListener("reset", y), () => c.removeEventListener("reset", y);
}
}, [i, w]), /* @__PURE__ */ S(ee, { scope: t, state: m, disabled: a, children: [
/* @__PURE__ */ f(
T.button,
{
type: "button",
role: "checkbox",
"aria-checked": h(m) ? "mixed" : m,
"aria-required": l,
"data-state": B(m),
"data-disabled": a ? "" : void 0,
disabled: a,
value: b,
...p,
ref: v,
onKeyDown: I(e.onKeyDown, (c) => {
c.key === "Enter" && c.preventDefault();
}),
onClick: I(e.onClick, (c) => {
w((y) => h(y) ? !0 : !y), g && (x.current = c.isPropagationStopped(), x.current || c.stopPropagation());
})
}
),
g && /* @__PURE__ */ f(
re,
{
control: i,
bubbles: !x.current,
name: o,
value: b,
checked: m,
required: l,
disabled: a,
form: d,
style: { transform: "translateX(-100%)" },
defaultChecked: h(r) ? !1 : r
}
)
] });
}
);
z.displayName = R;
var L = "CheckboxIndicator", D = u.forwardRef(
(e, s) => {
const { __scopeCheckbox: t, forceMount: o, ...n } = e, r = te(L, t);
return /* @__PURE__ */ f(V, { present: o || h(r.state) || r.state === !0, children: /* @__PURE__ */ f(
T.span,
{
"data-state": B(r.state),
"data-disabled": r.disabled ? "" : void 0,
...n,
ref: s,
style: { pointerEvents: "none", ...e.style }
}
) });
}
);
D.displayName = L;
var re = (e) => {
const { control: s, checked: t, bubbles: o = !0, defaultChecked: n, ...r } = e, l = u.useRef(null), a = q(t), b = F(s);
u.useEffect(() => {
const d = l.current, p = window.HTMLInputElement.prototype, k = Object.getOwnPropertyDescriptor(p, "checked").set;
if (a !== t && k) {
const v = new Event("click", { bubbles: o });
d.indeterminate = h(t), k.call(d, h(t) ? !1 : t), d.dispatchEvent(v);
}
}, [a, t, o]);
const C = u.useRef(h(t) ? !1 : t);
return /* @__PURE__ */ f(
"input",
{
type: "checkbox",
"aria-hidden": !0,
defaultChecked: n ?? C.current,
...r,
tabIndex: -1,
ref: l,
style: {
...e.style,
...b,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0
}
}
);
};
function h(e) {
return e === "indeterminate";
}
function B(e) {
return h(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
var oe = z, ne = D;
const ve = _(
({
ariaLabelledBy: e,
className: s,
defaultChecked: t,
disabled: o,
id: n,
label: r,
labelClassName: l,
name: a,
theme: b,
title: C,
variant: d,
onChange: p
}, i) => {
const [k, v] = J(t), x = A(), { theme: g } = Q(), m = H(() => {
v(), p == null || p();
}, [p, v]);
return /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ f(
oe,
{
id: n ?? x,
checked: k,
ref: i,
name: a,
disabled: o,
"aria-labelledby": e,
title: C,
className: N(
X({
className: s,
theme: b ?? g,
variant: d,
checked: k
})
),
onCheckedChange: m,
children: /* @__PURE__ */ f(ne, { children: /* @__PURE__ */ f(O, { className: "w-4 h-4 stroke-2" }) })
}
),
r ? /* @__PURE__ */ f(
"label",
{
htmlFor: a ?? n,
className: N(
G({
variant: d,
theme: b,
className: l
})
),
children: r
}
) : null
] });
}
);
export {
ve as Checkbox
};