@undp/design-system-react
Version:
React based design system for UNDP
253 lines (252 loc) • 7.74 kB
JavaScript
import { n as e, t } from "./utils-ca9as9Ye.js";
import { t as n } from "./dist-CQzJbxrW.js";
import { t as r } from "./check-DQP1Akuz.js";
import { i } from "./dist-DxuGUd9a.js";
import { t as a } from "./dist-jqIPNHDe.js";
import { n as o } from "./dist-BKfyhBSH.js";
import { n as s, t as c } from "./dist-CwCVtfik.js";
import { t as l } from "./dist-CnnnGPaT.js";
import { t as u } from "./dist-UHnBR-XH.js";
import { t as d } from "./label-NHR9EVmO.js";
import * as f from "react";
import p, { useMemo as m } from "react";
import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
//#region node_modules/@radix-ui/react-checkbox/dist/index.mjs
var v = Object.defineProperty, y = (e, t) => v(e, "name", {
value: t,
configurable: !0
}), b = "Checkbox", [x, S] = o(b), [C, w] = x(b);
function T(e) {
let { __scopeCheckbox: t, checked: n, children: r, defaultChecked: i, disabled: a, form: o, name: s, onCheckedChange: l, required: u, value: d = "on", internal_do_not_use_render: p } = e, [m, h] = c({
prop: n,
defaultProp: i ?? !1,
onChange: l,
caller: b
}), [_, v] = f.useState(null), [y, x] = f.useState(null), S = f.useRef(!1), [w, T] = f.useReducer((e) => e + 1, 0), E = !_ || !!o || !!_.closest("form"), D = {
checked: m,
disabled: a,
setChecked: h,
control: _,
setControl: v,
name: s,
form: o,
value: d,
hasConsumerStoppedPropagationRef: S,
userInteractionCount: w,
onUserInteraction: T,
required: u,
defaultChecked: !P(i) && i,
isFormControl: E,
bubbleInput: y,
setBubbleInput: x
};
return /* @__PURE__ */ g(C, {
scope: t,
...D,
children: N(p) ? p(D) : r
});
}
y(T, "CheckboxProvider");
var E = "CheckboxTrigger", D = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ y(function({ __scopeCheckbox: e, onKeyDown: t, onClick: n, ...r }, o) {
let { control: c, value: l, disabled: u, checked: d, required: p, setControl: m, setChecked: h, hasConsumerStoppedPropagationRef: _, onUserInteraction: v, isFormControl: b, bubbleInput: x } = w(E, e), S = i(o, m), C = f.useRef(d);
return f.useEffect(() => {
let e = c?.form;
if (e) {
let t = /* @__PURE__ */ y(() => h(C.current), "reset");
return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
}
}, [c, h]), /* @__PURE__ */ g(a.button, {
type: "button",
role: "checkbox",
"aria-checked": P(d) ? "mixed" : d,
"aria-required": p,
"data-state": F(d),
"data-disabled": u ? "" : void 0,
disabled: u,
value: l,
...r,
ref: S,
onKeyDown: s(t, (e) => {
e.key === "Enter" && e.preventDefault();
}),
onClick: s(n, (e) => {
v(), h((e) => P(e) ? !0 : !e), x && b && (_.current = e.isPropagationStopped(), _.current || e.stopPropagation());
})
});
}, "CheckboxTrigger")), O = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ y(function(e, t) {
let { __scopeCheckbox: n, name: r, checked: i, defaultChecked: a, required: o, disabled: s, value: c, onCheckedChange: l, form: u, ...d } = e;
return /* @__PURE__ */ g(T, {
__scopeCheckbox: n,
checked: i,
defaultChecked: a,
disabled: s,
required: o,
onCheckedChange: l,
name: r,
form: u,
value: c,
internal_do_not_use_render: ({ isFormControl: e }) => /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(D, {
...d,
ref: t,
__scopeCheckbox: n
}), e && /* @__PURE__ */ g(M, { __scopeCheckbox: n })] })
});
}, "Checkbox")), k = "CheckboxIndicator", A = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ y(function(e, t) {
let { __scopeCheckbox: n, forceMount: r, ...i } = e, o = w(k, n);
return /* @__PURE__ */ g(l, {
present: r || P(o.checked) || o.checked === !0,
children: /* @__PURE__ */ g(a.span, {
"data-state": F(o.checked),
"data-disabled": o.disabled ? "" : void 0,
...i,
ref: t,
style: {
pointerEvents: "none",
...e.style
}
})
});
}, "CheckboxIndicator")), j = "CheckboxBubbleInput", M = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ y(function({ __scopeCheckbox: e, onClick: t, ...n }, r) {
let { control: o, hasConsumerStoppedPropagationRef: c, userInteractionCount: l, checked: d, defaultChecked: p, required: m, disabled: h, name: _, value: v, form: y, bubbleInput: b, setBubbleInput: x } = w(j, e), S = i(r, x), C = u(o), T = f.useRef(!1), E = f.useRef(d), D = f.useRef(l);
f.useEffect(() => {
let e = b;
if (!e) return;
let t = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(t, "checked").set, r = l !== D.current;
D.current = l;
let i = E.current !== d;
E.current = d;
let a = !(r && c.current);
if (i && n) {
T.current = !r;
let t = new Event("click", { bubbles: a });
e.indeterminate = P(d), n.call(e, !P(d) && d), e.dispatchEvent(t), T.current = !1;
}
}, [
b,
d,
c,
l
]);
let O = f.useRef(!P(d) && d);
return /* @__PURE__ */ g(a.input, {
type: "checkbox",
"aria-hidden": !0,
defaultChecked: p ?? O.current,
required: m,
disabled: h,
name: _,
value: v,
form: y,
...n,
tabIndex: -1,
ref: S,
onClick: s(t, (e) => {
T.current && e.stopPropagation();
}),
style: {
...n.style,
...C,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0,
transform: "translateX(-100%)"
}
});
}, "CheckboxBubbleInput"));
function N(e) {
return typeof e == "function";
}
y(N, "isFunction");
function P(e) {
return e === "indeterminate";
}
y(P, "isIndeterminate");
function F(e) {
return P(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
y(F, "getState");
//#endregion
//#region src/components/ui/checkbox.tsx
var I = n("peer h-4 w-4 shrink-0 rounded bg-background focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-disabled", {
variants: {
color: {
primary: "border-primary group-hover:border-primary-light",
secondary: "border-secondary group-hover:border-secondary-light",
tertiary: "border-tertiary group-hover:border-tertiary-light",
quaternary: "border-quaternary group-hover:border-quaternary-light",
foreground: "border-foreground group-hover:border-foreground-soft",
surface: "border-stroke group-hover:border-stroke-hover"
},
variant: {
light: "border",
normal: "border-2"
},
rounded: {
base: "rounded-base",
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
xl: "rounded-xl",
"2xl": "rounded-2xl",
full: "rounded-full"
}
},
defaultVariants: {
color: "primary",
variant: "normal",
rounded: "base"
}
}), L = n("h-4 w-4", {
variants: {
color: {
primary: "stroke-primary",
secondary: "stroke-secondary",
tertiary: "stroke-tertiary",
quaternary: "stroke-quaternary",
foreground: "stroke-foreground",
surface: "stroke-surface"
},
variant: {
light: "-mt-px",
normal: "-mt-0.5"
}
},
defaultVariants: {
color: "primary",
variant: "normal"
}
}), R = p.forwardRef(({ className: n, labelClassName: i, checkBoxClassName: a, checkIconClassName: o, label: s, color: c, rounded: l, variant: u, ...f }, p) => {
let h = m(() => f.id || e(), [f.id]);
return /* @__PURE__ */ _("div", {
className: t("group flex flex-row items-center gap-2", n),
children: [/* @__PURE__ */ g(O, {
...f,
ref: p,
className: t(I({
color: c,
variant: u,
rounded: l
}), a),
id: h,
children: /* @__PURE__ */ g(A, {
className: t("flex items-center justify-center text-current"),
children: /* @__PURE__ */ g(r, {
className: t(L({
color: c,
variant: u
}), o),
strokeWidth: u === "light" ? 2 : 4
})
})
}), s ? /* @__PURE__ */ g(d, {
className: t("mt-0.5 text-base", i),
htmlFor: h,
children: s
}) : null]
});
});
R.displayName = O.displayName;
//#endregion
export { R as t };
//# sourceMappingURL=checkbox-NiPsYgHo.js.map