@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
355 lines (354 loc) • 8.91 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-DLcqcWxM.js";
import { c as J, P as w, a as Q, b as j } from "../../index-CIAmiWcw.js";
import { u as Y } from "../../index-BZPx6jYI.js";
import { u as Z } from "../../index-ohdbKsws.js";
import { P as ee } from "../../index-mPY_8Y5v.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--V_ZsiQe.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, ye] = 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: i
} = e, [p, x] = Q({
prop: o,
defaultProp: r ?? !1,
onChange: d,
caller: P
}), [m, C] = h.useState(null), [g, c] = h.useState(null), s = 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: s,
required: b,
defaultChecked: v(r) ? !1 : r,
isFormControl: _,
bubbleInput: g,
setBubbleInput: c
};
return /* @__PURE__ */ u(
se,
{
scope: a,
...E,
children: le(i) ? i(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: i,
hasConsumerStoppedPropagationRef: p,
isFormControl: x,
bubbleInput: m
} = N(M, e), C = L(r, k), g = h.useRef(d);
return h.useEffect(() => {
const c = t?.form;
if (c) {
const s = () => i(g.current);
return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
}
}, [t, i]), /* @__PURE__ */ u(
w.button,
{
type: "button",
role: "checkbox",
"aria-checked": v(d) ? "mixed" : d,
"aria-required": b,
"data-state": W(d),
"data-disabled": f ? "" : void 0,
disabled: f,
value: l,
...n,
ref: C,
onKeyDown: j(a, (c) => {
c.key === "Enter" && c.preventDefault();
}),
onClick: j(o, (c) => {
i((s) => v(s) ? !0 : !s), m && x && (p.current = c.isPropagationStopped(), p.current || c.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,
...i
} = 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,
{
...i,
ref: a,
__scopeCheckbox: o
}
),
p && /* @__PURE__ */ u(
K,
{
__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": W(t.checked),
"data-disabled": t.disabled ? "" : void 0,
...r,
ref: a,
style: { pointerEvents: "none", ...e.style }
}
)
}
);
}
);
D.displayName = F;
var H = "CheckboxBubbleInput", K = h.forwardRef(
({ __scopeCheckbox: e, ...a }, o) => {
const {
control: n,
hasConsumerStoppedPropagationRef: r,
checked: t,
defaultChecked: l,
required: f,
disabled: d,
name: b,
value: k,
form: i,
bubbleInput: p,
setBubbleInput: x
} = N(H, e), m = L(o, x), C = Y(t), g = Z(n);
h.useEffect(() => {
const s = p;
if (!s) return;
const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
_,
"checked"
).set, $ = !r.current;
if (C !== t && O) {
const G = new Event("click", { bubbles: $ });
s.indeterminate = v(t), O.call(s, v(t) ? !1 : t), s.dispatchEvent(G);
}
}, [p, C, t, r]);
const c = h.useRef(v(t) ? !1 : t);
return /* @__PURE__ */ u(
w.input,
{
type: "checkbox",
"aria-hidden": !0,
defaultChecked: l ?? c.current,
required: f,
disabled: d,
name: b,
value: k,
form: i,
...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%)"
}
}
);
}
);
K.displayName = H;
function le(e) {
return typeof e == "function";
}
function v(e) {
return e === "indeterminate";
}
function W(e) {
return v(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
const de = z(
({
ariaLabelledBy: e,
className: a,
defaultChecked: o,
disabled: n,
id: r,
label: t,
labelClassName: l,
name: f,
theme: d,
title: b,
variant: k,
onChange: i,
...p
}, x) => {
const [m, C] = oe(o ?? !1), g = V(), c = X(
(s) => {
C(s), i?.(s);
},
[i, 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: c,
...p,
children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2 civo:text-slate-700" }) })
}
),
t ? /* @__PURE__ */ u(
"label",
{
htmlFor: f ?? r,
className: T(
re({
className: l
})
),
children: t
}
) : null
] });
}
);
de.displayName = "KonstructCheckbox";
export {
de as Checkbox
};