@undp/design-system-react
Version:
React based design system for UNDP
341 lines (340 loc) • 11.6 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./chevron-down-DPjLJaqj.js";
import { i as r } from "./dist-DxuGUd9a.js";
import { t as i } from "./dist-jqIPNHDe.js";
import { n as a, t as o } from "./dist-BKfyhBSH.js";
import { t as s } from "./dist-J8GU8wyT.js";
import { n as c, t as l } from "./dist-CwCVtfik.js";
import { t as u } from "./dist-CnnnGPaT.js";
import { t as d } from "./dist-DfB3OR9K.js";
import { t as f } from "./dist-pXPIaj85.js";
import * as p from "react";
import m from "react";
import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
//#region node_modules/@radix-ui/react-collapsible/dist/index.mjs
var v = Object.defineProperty, y = (e, t) => v(e, "name", {
value: t,
configurable: !0
}), b = "Collapsible", [x, S] = a(b), [ee, C] = x(b), te = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ y(function(e, t) {
let { __scopeCollapsible: n, open: r, defaultOpen: a, disabled: o, onOpenChange: s, ...c } = e, [u, f] = l({
prop: r,
defaultProp: a ?? !1,
onChange: s,
caller: b
});
return /* @__PURE__ */ g(ee, {
scope: n,
disabled: o,
contentId: d(),
open: u,
onOpenToggle: p.useCallback(() => f((e) => !e), [f]),
children: /* @__PURE__ */ g(i.div, {
"data-state": T(u),
"data-disabled": o ? "" : void 0,
...c,
ref: t
})
});
}, "Collapsible")), ne = "CollapsibleTrigger", re = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ y(function(e, t) {
let { __scopeCollapsible: n, ...r } = e, a = C(ne, n);
return /* @__PURE__ */ g(i.button, {
type: "button",
"aria-controls": a.open ? a.contentId : void 0,
"aria-expanded": a.open || !1,
"data-state": T(a.open),
"data-disabled": a.disabled ? "" : void 0,
disabled: a.disabled,
...r,
ref: t,
onClick: c(e.onClick, a.onOpenToggle)
});
}, "CollapsibleTrigger")), w = "CollapsibleContent", ie = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ y(function(e, t) {
let { forceMount: n, ...r } = e, i = C(w, e.__scopeCollapsible);
return /* @__PURE__ */ g(u, {
present: n || i.open,
children: ({ present: e }) => /* @__PURE__ */ g(ae, {
...r,
ref: t,
present: e
})
});
}, "CollapsibleContent")), ae = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ y(function(e, t) {
let { __scopeCollapsible: n, present: a, children: s, ...c } = e, l = C(w, n), [u, d] = p.useState(a), f = p.useRef(null), m = r(t, f), h = p.useRef(0), _ = h.current, v = p.useRef(0), y = v.current, b = l.open || u, x = p.useRef(b), S = p.useRef(void 0);
return p.useEffect(() => {
let e = requestAnimationFrame(() => x.current = !1);
return () => cancelAnimationFrame(e);
}, []), o(() => {
let e = f.current;
if (e) {
S.current = S.current || {
transitionDuration: e.style.transitionDuration,
animationName: e.style.animationName
}, e.style.transitionDuration = "0s", e.style.animationName = "none";
let t = e.getBoundingClientRect();
h.current = t.height, v.current = t.width, x.current || (e.style.transitionDuration = S.current.transitionDuration, e.style.animationName = S.current.animationName), d(a);
}
}, [l.open, a]), /* @__PURE__ */ g(i.div, {
"data-state": T(l.open),
"data-disabled": l.disabled ? "" : void 0,
id: l.contentId,
hidden: !b,
...c,
ref: m,
style: {
"--radix-collapsible-content-height": _ ? `${_}px` : void 0,
"--radix-collapsible-content-width": y ? `${y}px` : void 0,
...e.style
},
children: b && s
});
}, "CollapsibleContentImpl"));
function T(e) {
return e ? "open" : "closed";
}
y(T, "getState");
var E = te, D = re, oe = ie, se = Object.defineProperty, O = (e, t) => se(e, "name", {
value: t,
configurable: !0
}), k = "Accordion", ce = [
"Home",
"End",
"ArrowDown",
"ArrowUp",
"ArrowLeft",
"ArrowRight"
], [A, le, ue] = s(k), [j, de] = a(k, [ue, S]), M = S(), fe = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { type: n, ...r } = e, i = r, a = r;
return /* @__PURE__ */ g(A.Provider, {
scope: e.__scopeAccordion,
children: n === "multiple" ? /* @__PURE__ */ g(L, {
...a,
ref: t
}) : /* @__PURE__ */ g(I, {
...i,
ref: t
})
});
}, "Accordion")), [N, pe] = j(k), [P, F] = j(k, { collapsible: !1 }), I = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { value: n, defaultValue: r, onValueChange: i = /* @__PURE__ */ O(() => {}, "onValueChange"), collapsible: a = !1, ...o } = e, [s, c] = l({
prop: n,
defaultProp: r ?? "",
onChange: i,
caller: k
});
return /* @__PURE__ */ g(N, {
scope: e.__scopeAccordion,
value: p.useMemo(() => s ? [s] : [], [s]),
onItemOpen: c,
onItemClose: p.useCallback(() => a && c(""), [a, c]),
children: /* @__PURE__ */ g(P, {
scope: e.__scopeAccordion,
collapsible: a,
children: /* @__PURE__ */ g(B, {
...o,
ref: t
})
})
});
}, "AccordionImplSingle")), L = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { value: n, defaultValue: r, onValueChange: i = /* @__PURE__ */ O(() => {}, "onValueChange"), ...a } = e, [o, s] = l({
prop: n,
defaultProp: r ?? [],
onChange: i,
caller: k
}), c = p.useCallback((e) => s((t = []) => [...t, e]), [s]), u = p.useCallback((e) => s((t = []) => t.filter((t) => t !== e)), [s]);
return /* @__PURE__ */ g(N, {
scope: e.__scopeAccordion,
value: o,
onItemOpen: c,
onItemClose: u,
children: /* @__PURE__ */ g(P, {
scope: e.__scopeAccordion,
collapsible: !0,
children: /* @__PURE__ */ g(B, {
...a,
ref: t
})
})
});
}, "AccordionImplMultiple")), [R, z] = j(k), B = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { __scopeAccordion: n, disabled: a, dir: o, orientation: s = "vertical", ...l } = e, u = r(p.useRef(null), t), d = le(n), m = f(o) === "ltr", h = c(e.onKeyDown, (e) => {
if (!ce.includes(e.key)) return;
let t = e.target, n = d().filter((e) => !e.ref.current?.disabled), r = n.findIndex((e) => e.ref.current === t), i = n.length;
if (r === -1) return;
e.preventDefault();
let a = r, o = i - 1, c = /* @__PURE__ */ O(() => {
a = r + 1, a > o && (a = 0);
}, "moveNext"), l = /* @__PURE__ */ O(() => {
a = r - 1, a < 0 && (a = o);
}, "movePrev");
switch (e.key) {
case "Home":
a = 0;
break;
case "End":
a = o;
break;
case "ArrowRight":
s === "horizontal" && (m ? c() : l());
break;
case "ArrowDown":
s === "vertical" && c();
break;
case "ArrowLeft":
s === "horizontal" && (m ? l() : c());
break;
case "ArrowUp":
s === "vertical" && l();
break;
}
n[a % i].ref.current?.focus();
});
return /* @__PURE__ */ g(R, {
scope: n,
disabled: a,
direction: o,
orientation: s,
children: /* @__PURE__ */ g(A.Slot, {
scope: n,
children: /* @__PURE__ */ g(i.div, {
...l,
"data-orientation": s,
ref: u,
onKeyDown: a ? void 0 : h
})
})
});
}, "AccordionImpl")), V = "AccordionItem", [me, H] = j(V), he = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { __scopeAccordion: n, value: r, ...i } = e, a = z(V, n), o = pe(V, n), s = M(n), c = d(), l = r && o.value.includes(r) || !1, u = a.disabled || e.disabled;
return /* @__PURE__ */ g(me, {
scope: n,
open: l,
disabled: u,
triggerId: c,
children: /* @__PURE__ */ g(E, {
"data-orientation": a.orientation,
"data-state": W(l),
...s,
...i,
ref: t,
disabled: u,
open: l,
onOpenChange: (e) => {
e ? o.onItemOpen(r) : o.onItemClose(r);
}
})
});
}, "AccordionItem")), ge = "AccordionHeader", _e = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { __scopeAccordion: n, ...r } = e, a = z(k, n), o = H(ge, n);
return /* @__PURE__ */ g(i.h3, {
"data-orientation": a.orientation,
"data-state": W(o.open),
"data-disabled": o.disabled ? "" : void 0,
...r,
ref: t
});
}, "AccordionHeader")), U = "AccordionTrigger", ve = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { __scopeAccordion: n, ...r } = e, i = z(k, n), a = H(U, n), o = F(U, n), s = M(n);
return /* @__PURE__ */ g(A.ItemSlot, {
scope: n,
children: /* @__PURE__ */ g(D, {
"aria-disabled": a.open && !o.collapsible || void 0,
"data-orientation": i.orientation,
id: a.triggerId,
...s,
...r,
ref: t
})
});
}, "AccordionTrigger")), ye = "AccordionContent", be = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ O(function(e, t) {
let { __scopeAccordion: n, ...r } = e, i = z(k, n), a = H(ye, n), o = M(n);
return /* @__PURE__ */ g(oe, {
role: "region",
"aria-labelledby": a.triggerId,
"data-orientation": i.orientation,
...o,
...r,
ref: t,
style: {
"--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
"--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
...e.style
}
});
}, "AccordionContent"));
function W(e) {
return e ? "open" : "closed";
}
O(W, "getState");
var G = fe, K = he, xe = _e, q = ve, J = be, Se = t("", {
variants: { variant: {
primary: "bg-surface text-content-primary mb-4 px-4 py-1",
secondary: "bg-surface text-content-primary mb-0 px-4 py-1 border-b border-b-stroke last:border-b-0",
tertiary: "bg-transparent text-content-primary mb-0 py-2 px-0 border-b border-b-stroke",
quaternary: "bg-transparent text-content-primary mb-0 py-0 px-0"
} },
defaultVariants: { variant: "primary" }
}), Ce = t("flex flex-1 items-center transition-all text-left text-content-primary [&[data-state=open]>svg]:rotate-180", {
variants: { variant: {
primary: "font-normal text-xl justify-between",
secondary: "uppercase font-normal text-base justify-between",
tertiary: "uppercase font-normal text-2xl justify-between",
quaternary: "uppercase font-bold text-base gap-3"
} },
defaultVariants: { variant: "primary" }
}), we = t("overflow-hidden text-content-primary text-base data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", {
variants: { variant: {
primary: "my-3.5",
secondary: "my-3.5",
tertiary: "my-3.5 px-3.5",
quaternary: "my-3.5 p-0"
} },
defaultVariants: { variant: "primary" }
}), Y = m.createContext(null), X = m.forwardRef(({ variant: e, children: t, ...n }, r) => /* @__PURE__ */ g(Y.Provider, {
value: { variant: e },
children: /* @__PURE__ */ g(G, {
ref: r,
...n,
children: t
})
}));
X.displayName = G.displayName;
var Z = m.forwardRef(({ className: t, ...n }, r) => {
let i = e(Se({ variant: m.useContext(Y)?.variant }), t);
return /* @__PURE__ */ g(K, {
...n,
ref: r,
className: e(i, t)
});
});
Z.displayName = "AccordionItem";
var Q = m.forwardRef(({ className: t, children: r, ...i }, a) => {
let o = m.useContext(Y);
return /* @__PURE__ */ g(xe, {
className: "my-4 flex",
children: /* @__PURE__ */ g(q, {
...i,
ref: a,
className: e(Ce({ variant: o?.variant }), t),
children: o?.variant === "quaternary" ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(n, { className: "h-6 w-6 shrink-0 text-accent-red transition-transform duration-200" }), r] }) : /* @__PURE__ */ _(h, { children: [r, /* @__PURE__ */ g(n, { className: "h-6 w-6 shrink-0 text-accent-red transition-transform duration-200" })] })
})
});
});
Q.displayName = q.displayName;
var $ = m.forwardRef(({ className: t, children: n, ...r }, i) => {
let a = m.useContext(Y);
return /* @__PURE__ */ g(J, {
...r,
ref: i,
className: e(we({ variant: a?.variant }), t),
children: /* @__PURE__ */ g("div", {
className: t,
children: n
})
});
});
$.displayName = J.displayName;
//#endregion
export { Q as i, $ as n, Z as r, X as t };
//# sourceMappingURL=accordion-BBzsV2wp.js.map