@undp/design-system-react
Version:
React based design system for UNDP
335 lines (334 loc) • 10.2 kB
JavaScript
import { n as e, t } from "./utils-ca9as9Ye.js";
import { t as n } from "./dist-CQzJbxrW.js";
import { t as r } from "./createLucideIcon-JAvQ_M0R.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-pXPIaj85.js";
import { t as d } from "./dist-UHnBR-XH.js";
import { n as f, r as p, t as m } from "./dist-CNDtQX6n.js";
import { t as h } from "./label-NHR9EVmO.js";
import * as g from "react";
import _, { useMemo as v } from "react";
import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
var S = r("circle", [["circle", {
cx: "12",
cy: "12",
r: "10",
key: "1mglay"
}]]), C = Object.defineProperty, w = (e, t) => C(e, "name", {
value: t,
configurable: !0
}), T = "Radio", [E, D] = o(T), [O, k] = E(T);
function A(e) {
let { __scopeRadio: t, checked: n = !1, children: r, disabled: i, form: a, name: o, onCheck: s, required: c, value: l = "on", internal_do_not_use_render: u } = e, [d, f] = g.useState(null), [p, m] = g.useState(null), h = g.useRef(!1), [_, v] = g.useReducer((e) => e + 1, 0), y = {
checked: n,
disabled: i,
required: c,
name: o,
form: a,
value: l,
control: d,
setControl: f,
hasConsumerStoppedPropagationRef: h,
userInteractionCount: _,
onUserInteraction: v,
isFormControl: !d || !!a || !!d.closest("form"),
bubbleInput: p,
setBubbleInput: m,
onCheck: /* @__PURE__ */ w(() => s?.(), "onCheck")
};
return /* @__PURE__ */ b(O, {
scope: t,
...y,
children: L(u) ? u(y) : r
});
}
w(A, "RadioProvider");
var j = "RadioTrigger", M = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function({ __scopeRadio: e, onClick: t, ...n }, r) {
let { checked: o, disabled: c, value: l, setControl: u, onCheck: d, hasConsumerStoppedPropagationRef: f, onUserInteraction: p, isFormControl: m, bubbleInput: h } = k(j, e), g = i(r, u);
return /* @__PURE__ */ b(a.button, {
type: "button",
role: "radio",
"aria-checked": o,
"data-state": R(o),
"data-disabled": c ? "" : void 0,
disabled: c,
value: l,
...n,
ref: g,
onClick: s(t, (e) => {
o || (p(), d()), h && m && (f.current = e.isPropagationStopped(), f.current || e.stopPropagation());
})
});
}, "RadioTrigger")), N = "RadioIndicator", P = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function(e, t) {
let { __scopeRadio: n, forceMount: r, ...i } = e, o = k(N, n);
return /* @__PURE__ */ b(l, {
present: r || o.checked,
children: /* @__PURE__ */ b(a.span, {
"data-state": R(o.checked),
"data-disabled": o.disabled ? "" : void 0,
...i,
ref: t
})
});
}, "RadioIndicator")), F = "RadioBubbleInput", I = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function({ __scopeRadio: e, onClick: t, ...n }, r) {
let { control: o, checked: c, required: l, disabled: u, name: f, value: p, form: m, bubbleInput: h, setBubbleInput: _, hasConsumerStoppedPropagationRef: v, userInteractionCount: y } = k(F, e), x = i(r, _), S = d(o), C = g.useRef(!1), w = g.useRef(c), T = g.useRef(y);
g.useEffect(() => {
let e = h;
if (!e) return;
let t = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(t, "checked").set, r = y !== T.current;
T.current = y;
let i = w.current !== c;
w.current = c;
let a = !(r && v.current);
if (i && n) {
C.current = !r;
let t = new Event("click", { bubbles: a });
n.call(e, c), e.dispatchEvent(t), C.current = !1;
}
}, [
h,
c,
v,
y
]);
let E = g.useRef(c);
return /* @__PURE__ */ b(a.input, {
type: "radio",
"aria-hidden": !0,
defaultChecked: E.current,
required: l,
disabled: u,
name: f,
value: p,
form: m,
...n,
tabIndex: -1,
ref: x,
onClick: s(t, (e) => {
C.current && e.stopPropagation();
}),
style: {
...n.style,
...S,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0,
transform: "translateX(-100%)"
}
});
}, "RadioBubbleInput"));
function L(e) {
return typeof e == "function";
}
w(L, "isFunction");
function R(e) {
return e ? "checked" : "unchecked";
}
w(R, "getState");
var z = [
"ArrowUp",
"ArrowDown",
"ArrowLeft",
"ArrowRight"
], B = "RadioGroup", [V, ee] = o(B, [p, D]), H = p(), U = D(), [W, G] = V(B), K = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function(e, t) {
let { __scopeRadioGroup: n, name: r, form: o, defaultValue: s, value: l, required: d = !1, disabled: p = !1, orientation: m, dir: h, loop: _ = !0, onValueChange: v, ...y } = e, x = H(n), S = u(h), [C, T] = c({
prop: l,
defaultProp: s ?? null,
onChange: v,
caller: B
}), [E, D] = g.useState(null), O = i(t, D), k = g.useRef(C);
return g.useEffect(() => {
let e = o ? E?.ownerDocument.getElementById(o) : E?.closest("form");
if (e instanceof HTMLFormElement) {
let t = /* @__PURE__ */ w(() => T(k.current), "reset");
return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
}
}, [
E,
o,
T
]), /* @__PURE__ */ b(W, {
scope: n,
name: r,
form: o,
required: d,
disabled: p,
value: C,
onValueChange: T,
children: /* @__PURE__ */ b(f, {
asChild: !0,
...x,
orientation: m,
dir: S,
loop: _,
children: /* @__PURE__ */ b(a.div, {
role: "radiogroup",
"aria-required": d,
"aria-orientation": m,
"data-disabled": p ? "" : void 0,
dir: S,
...y,
ref: O
})
})
});
}, "RadioGroup")), q = "RadioGroupItemProvider", J = "RadioGroupItemTrigger";
function Y(e) {
let { __scopeRadioGroup: t, value: n, disabled: r, children: i, internal_do_not_use_render: a } = e, o = G(q, t), s = U(t), c = o.disabled || r;
return /* @__PURE__ */ b(A, {
...s,
checked: o.value === n,
disabled: c,
required: o.required,
name: o.name,
form: o.form,
value: n,
onCheck: () => o.onValueChange(n),
internal_do_not_use_render: a,
children: i
});
}
w(Y, "RadioGroupItemProvider");
var te = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function(e, t) {
let { __scopeRadioGroup: n, ...r } = e, a = H(n), o = U(n), { checked: c, disabled: l } = k(J, o.__scopeRadio), u = g.useRef(null), d = i(t, u), f = g.useRef(!1);
return g.useEffect(() => {
let e = /* @__PURE__ */ w((e) => {
z.includes(e.key) && (f.current = !0);
}, "handleKeyDown"), t = /* @__PURE__ */ w(() => f.current = !1, "handleKeyUp");
return document.addEventListener("keydown", e), document.addEventListener("keyup", t), () => {
document.removeEventListener("keydown", e), document.removeEventListener("keyup", t);
};
}, []), /* @__PURE__ */ b(m, {
asChild: !0,
...a,
focusable: !l,
active: c,
children: /* @__PURE__ */ b(M, {
...o,
...r,
ref: d,
onKeyDown: s(r.onKeyDown, (e) => {
e.key === "Enter" && e.preventDefault();
}),
onFocus: s(r.onFocus, () => {
f.current && u.current?.click();
})
})
});
}, "RadioGroupItemTrigger")), X = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function(e, t) {
let { __scopeRadioGroup: n, value: r, disabled: i, ...a } = e;
return /* @__PURE__ */ b(Y, {
__scopeRadioGroup: n,
value: r,
disabled: i,
internal_do_not_use_render: ({ isFormControl: e }) => /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(te, {
...a,
ref: t,
__scopeRadioGroup: n
}), e && /* @__PURE__ */ b(ne, { __scopeRadioGroup: n })] })
});
}, "RadioGroupItem")), ne = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function(e, t) {
let { __scopeRadioGroup: n, ...r } = e;
return /* @__PURE__ */ b(I, {
...U(n),
...r,
ref: t
});
}, "RadioGroupItemBubbleInput")), re = /* @__PURE__ */ g.forwardRef(/* @__PURE__ */ w(function(e, t) {
let { __scopeRadioGroup: n, ...r } = e;
return /* @__PURE__ */ b(P, {
...U(n),
...r,
ref: t
});
}, "RadioGroupIndicator")), ie = n("peer aspect-square h-4 w-4 bg-background rounded-full text-content-primary focus: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"
}
},
defaultVariants: {
color: "primary",
variant: "normal"
}
}), ae = n("stroke-0", {
variants: {
color: {
primary: "fill-primary",
secondary: "fill-secondary",
tertiary: "fill-tertiary",
quaternary: "fill-quaternary",
foreground: "fill-foreground",
surface: "fill-surface"
},
variant: {
light: "h-1.5 w-1.5",
normal: "h-2.5 w-2.5"
}
},
defaultVariants: {
color: "primary",
variant: "normal"
}
}), Z = _.createContext({
color: void 0,
variant: void 0
}), Q = _.forwardRef(({ className: e, color: n, variant: r, ...i }, a) => {
let o = _.useMemo(() => ({
color: n,
variant: r
}), [n, r]);
return /* @__PURE__ */ b(Z.Provider, {
value: o,
children: /* @__PURE__ */ b(K, {
...i,
className: t("flex flex-row flex-wrap gap-x-4 gap-y-2 rtl:[direction:rtl]", e),
ref: a
})
});
});
Q.displayName = K.displayName;
var $ = _.forwardRef(({ className: n, radioClassName: r, labelClassName: i, label: a, ...o }, s) => {
let c = v(() => o.id || e(), [o.id]), { color: l, variant: u } = _.useContext(Z);
return /* @__PURE__ */ x("div", {
className: t("group flex flex-row items-center gap-2", n),
children: [/* @__PURE__ */ b(X, {
...o,
ref: s,
className: t(ie({
color: l,
variant: u
}), r),
id: c,
children: /* @__PURE__ */ b(re, {
className: "flex items-center justify-center",
children: /* @__PURE__ */ b(S, { className: ae({
color: l,
variant: u
}) })
})
}), /* @__PURE__ */ b(h, {
className: t("mt-0.5 text-base!", i),
htmlFor: c,
children: a
})]
});
});
$.displayName = X.displayName;
//#endregion
export { $ as n, Q as t };
//# sourceMappingURL=radio-group-3Wlby48K.js.map