@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
354 lines (353 loc) • 8.88 kB
JavaScript
import { jsx as u, jsxs as B, Fragment as U } from "react/jsx-runtime";
import * as h from "react";
import S, { forwardRef as z, useId as V, useCallback as X } from "react";
import { u as L } from "../../index-B5MIi2tR.js";
import { c as J, a as Q, b as j } from "../../index-Cq1I1cG9.js";
import { u as Y, a as Z } from "../../index-Bc1LNrRD.js";
import { P as ee } from "../../index-Dm-ooN_M.js";
import { P as w } from "../../index-BCGvACM9.js";
import { cn as T } from "../../utils/index.js";
import { checkboxVariants as te, labelVariants as re } from "./Checkbox.variants.js";
import { useToggle as oe } from "../../hooks/useToggle.js";
import { P as y } from "../../index-h-Ul0anl.js";
function R() {
return R = Object.assign || function(e) {
for (var a = 1; a < arguments.length; a++) {
var o = arguments[a];
for (var n in o)
Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]);
}
return e;
}, R.apply(this, arguments);
}
function ne(e, a) {
if (e == null) return {};
var o = ae(e, a), n, r;
if (Object.getOwnPropertySymbols) {
var t = Object.getOwnPropertySymbols(e);
for (r = 0; r < t.length; r++)
n = t[r], !(a.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
}
return o;
}
function ae(e, a) {
if (e == null) return {};
var o = {}, n = Object.keys(e), r, t;
for (t = 0; t < n.length; t++)
r = n[t], !(a.indexOf(r) >= 0) && (o[r] = e[r]);
return o;
}
var I = z(function(e, a) {
var o = e.color, n = o === void 0 ? "currentColor" : o, r = e.size, t = r === void 0 ? 24 : r, l = ne(e, ["color", "size"]);
return /* @__PURE__ */ S.createElement("svg", R({
ref: a,
xmlns: "http://www.w3.org/2000/svg",
width: t,
height: t,
viewBox: "0 0 24 24",
fill: "none",
stroke: n,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}, l), /* @__PURE__ */ S.createElement("polyline", {
points: "20 6 9 17 4 12"
}));
});
I.propTypes = {
color: y.string,
size: y.oneOfType([y.string, y.number])
};
I.displayName = "Check";
var P = "Checkbox", [ce, ge] = J(P), [se, N] = ce(P);
function ie(e) {
const {
__scopeCheckbox: a,
checked: o,
children: n,
defaultChecked: r,
disabled: t,
form: l,
name: f,
onCheckedChange: d,
required: b,
value: k = "on",
// @ts-expect-error
internal_do_not_use_render: c
} = e, [p, x] = Q({
prop: o,
defaultProp: r ?? !1,
onChange: d,
caller: P
}), [m, C] = h.useState(null), [g, s] = h.useState(null), i = h.useRef(!1), _ = m ? !!l || !!m.closest("form") : (
// We set this to true by default so that events bubble to forms without JS (SSR)
!0
), E = {
checked: p,
disabled: t,
setChecked: x,
control: m,
setControl: C,
name: f,
form: l,
value: k,
hasConsumerStoppedPropagationRef: i,
required: b,
defaultChecked: v(r) ? !1 : r,
isFormControl: _,
bubbleInput: g,
setBubbleInput: s
};
return /* @__PURE__ */ u(
se,
{
scope: a,
...E,
children: le(c) ? c(E) : n
}
);
}
var M = "CheckboxTrigger", q = h.forwardRef(
({ __scopeCheckbox: e, onKeyDown: a, onClick: o, ...n }, r) => {
const {
control: t,
value: l,
disabled: f,
checked: d,
required: b,
setControl: k,
setChecked: c,
hasConsumerStoppedPropagationRef: p,
isFormControl: x,
bubbleInput: m
} = N(M, e), C = L(r, k), g = h.useRef(d);
return h.useEffect(() => {
const s = t == null ? void 0 : t.form;
if (s) {
const i = () => c(g.current);
return s.addEventListener("reset", i), () => s.removeEventListener("reset", i);
}
}, [t, c]), /* @__PURE__ */ u(
w.button,
{
type: "button",
role: "checkbox",
"aria-checked": v(d) ? "mixed" : d,
"aria-required": b,
"data-state": $(d),
"data-disabled": f ? "" : void 0,
disabled: f,
value: l,
...n,
ref: C,
onKeyDown: j(a, (s) => {
s.key === "Enter" && s.preventDefault();
}),
onClick: j(o, (s) => {
c((i) => v(i) ? !0 : !i), m && x && (p.current = s.isPropagationStopped(), p.current || s.stopPropagation());
})
}
);
}
);
q.displayName = M;
var A = h.forwardRef(
(e, a) => {
const {
__scopeCheckbox: o,
name: n,
checked: r,
defaultChecked: t,
required: l,
disabled: f,
value: d,
onCheckedChange: b,
form: k,
...c
} = e;
return /* @__PURE__ */ u(
ie,
{
__scopeCheckbox: o,
checked: r,
defaultChecked: t,
disabled: f,
required: l,
onCheckedChange: b,
name: n,
form: k,
value: d,
internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ B(U, { children: [
/* @__PURE__ */ u(
q,
{
...c,
ref: a,
__scopeCheckbox: o
}
),
p && /* @__PURE__ */ u(
W,
{
__scopeCheckbox: o
}
)
] })
}
);
}
);
A.displayName = P;
var F = "CheckboxIndicator", D = h.forwardRef(
(e, a) => {
const { __scopeCheckbox: o, forceMount: n, ...r } = e, t = N(F, o);
return /* @__PURE__ */ u(
ee,
{
present: n || v(t.checked) || t.checked === !0,
children: /* @__PURE__ */ u(
w.span,
{
"data-state": $(t.checked),
"data-disabled": t.disabled ? "" : void 0,
...r,
ref: a,
style: { pointerEvents: "none", ...e.style }
}
)
}
);
}
);
D.displayName = F;
var H = "CheckboxBubbleInput", W = h.forwardRef(
({ __scopeCheckbox: e, ...a }, o) => {
const {
control: n,
hasConsumerStoppedPropagationRef: r,
checked: t,
defaultChecked: l,
required: f,
disabled: d,
name: b,
value: k,
form: c,
bubbleInput: p,
setBubbleInput: x
} = N(H, e), m = L(o, x), C = Y(t), g = Z(n);
h.useEffect(() => {
const i = p;
if (!i) return;
const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
_,
"checked"
).set, G = !r.current;
if (C !== t && O) {
const K = new Event("click", { bubbles: G });
i.indeterminate = v(t), O.call(i, v(t) ? !1 : t), i.dispatchEvent(K);
}
}, [p, C, t, r]);
const s = h.useRef(v(t) ? !1 : t);
return /* @__PURE__ */ u(
w.input,
{
type: "checkbox",
"aria-hidden": !0,
defaultChecked: l ?? s.current,
required: f,
disabled: d,
name: b,
value: k,
form: c,
...a,
tabIndex: -1,
ref: m,
style: {
...a.style,
...g,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0,
// We transform because the input is absolutely positioned but we have
// rendered it **after** the button. This pulls it back to sit on top
// of the button.
transform: "translateX(-100%)"
}
}
);
}
);
W.displayName = H;
function le(e) {
return typeof e == "function";
}
function v(e) {
return e === "indeterminate";
}
function $(e) {
return v(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
const ye = z(
({
ariaLabelledBy: e,
className: a,
defaultChecked: o,
disabled: n,
id: r,
label: t,
labelClassName: l,
name: f,
theme: d,
title: b,
variant: k,
onChange: c,
...p
}, x) => {
const [m, C] = oe(o ?? !1), g = V(), s = X(
(i) => {
C(i), c == null || c(i);
},
[c, C]
);
return /* @__PURE__ */ B("div", { className: "flex items-center gap-2", "data-theme": d, children: [
/* @__PURE__ */ u(
A,
{
id: r ?? g,
checked: m,
ref: x,
name: f,
disabled: n,
"aria-labelledby": e,
title: b,
className: T(
te({
className: a,
variant: k,
checked: m
})
),
onCheckedChange: s,
...p,
children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2" }) })
}
),
t ? /* @__PURE__ */ u(
"label",
{
htmlFor: f ?? r,
className: T(
re({
className: l
})
),
children: t
}
) : null
] });
}
);
export {
ye as Checkbox
};