@undp/design-system-react
Version:
React based design system for UNDP
236 lines (235 loc) • 7.94 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./check-DQP1Akuz.js";
import { t as r } from "./x-CXpb8l-i.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-UHnBR-XH.js";
import { P as u } from "./Typography.js";
import * as d from "react";
import f, { useState as p } from "react";
import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
//#region node_modules/@radix-ui/react-switch/dist/index.mjs
var _ = Object.defineProperty, v = (e, t) => _(e, "name", {
value: t,
configurable: !0
}), y = "Switch", [b, x] = o(y), [S, C] = b(y);
function w(e) {
let { __scopeSwitch: t, checked: n, children: r, defaultChecked: i, disabled: a, form: o, name: s, onCheckedChange: l, required: u, value: f = "on", internal_do_not_use_render: p } = e, [m, g] = c({
prop: n,
defaultProp: i ?? !1,
onChange: l,
caller: y
}), [_, v] = d.useState(null), [b, x] = d.useState(null), C = d.useRef(!1), [w, T] = d.useReducer((e) => e + 1, 0), E = {
checked: m,
setChecked: g,
disabled: a,
control: _,
setControl: v,
name: s,
form: o,
value: f,
hasConsumerStoppedPropagationRef: C,
userInteractionCount: w,
onUserInteraction: T,
required: u,
defaultChecked: i,
isFormControl: !_ || !!o || !!_.closest("form"),
bubbleInput: b,
setBubbleInput: x
};
return /* @__PURE__ */ h(S, {
scope: t,
...E,
children: M(p) ? p(E) : r
});
}
v(w, "SwitchProvider");
var T = "SwitchTrigger", E = /* @__PURE__ */ d.forwardRef(/* @__PURE__ */ v(function({ __scopeSwitch: e, onClick: t, ...n }, r) {
let { control: o, form: c, value: l, disabled: u, checked: f, required: p, setControl: m, setChecked: g, hasConsumerStoppedPropagationRef: _, onUserInteraction: y, isFormControl: b, bubbleInput: x } = C(T, e), S = i(r, m), w = d.useRef(f);
return d.useEffect(() => {
let e = c ? o?.ownerDocument.getElementById(c) : o?.form;
if (e instanceof HTMLFormElement) {
let t = /* @__PURE__ */ v(() => g(w.current), "reset");
return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
}
}, [
o,
c,
g
]), /* @__PURE__ */ h(a.button, {
type: "button",
role: "switch",
"aria-checked": f,
"aria-required": p,
"data-state": N(f),
"data-disabled": u ? "" : void 0,
disabled: u,
value: l,
...n,
ref: S,
onClick: s(t, (e) => {
y(), g((e) => !e), x && b && (_.current = e.isPropagationStopped(), _.current || e.stopPropagation());
})
});
}, "SwitchTrigger")), D = /* @__PURE__ */ d.forwardRef(/* @__PURE__ */ v(function(e, t) {
let { __scopeSwitch: n, name: r, checked: i, defaultChecked: a, required: o, disabled: s, value: c, onCheckedChange: l, form: u, ...d } = e;
return /* @__PURE__ */ h(w, {
__scopeSwitch: 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__ */ g(m, { children: [/* @__PURE__ */ h(E, {
...d,
ref: t,
__scopeSwitch: n
}), e && /* @__PURE__ */ h(j, { __scopeSwitch: n })] })
});
}, "Switch")), O = "SwitchThumb", k = /* @__PURE__ */ d.forwardRef(/* @__PURE__ */ v(function(e, t) {
let { __scopeSwitch: n, ...r } = e, i = C(O, n);
return /* @__PURE__ */ h(a.span, {
"data-state": N(i.checked),
"data-disabled": i.disabled ? "" : void 0,
...r,
ref: t
});
}, "SwitchThumb")), A = "SwitchBubbleInput", j = /* @__PURE__ */ d.forwardRef(/* @__PURE__ */ v(function({ __scopeSwitch: e, onClick: t, ...n }, r) {
let { control: o, hasConsumerStoppedPropagationRef: c, userInteractionCount: u, checked: f, defaultChecked: p, required: m, disabled: g, name: _, value: v, form: y, bubbleInput: b, setBubbleInput: x } = C(A, e), S = i(r, x), w = l(o), T = d.useRef(!1), E = d.useRef(f), D = d.useRef(u);
d.useEffect(() => {
let e = b;
if (!e) return;
let t = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(t, "checked").set, r = u !== D.current;
D.current = u;
let i = E.current !== f;
E.current = f;
let a = !(r && c.current);
if (i && n) {
T.current = !r;
let t = new Event("click", { bubbles: a });
n.call(e, f), e.dispatchEvent(t), T.current = !1;
}
}, [
b,
f,
c,
u
]);
let O = d.useRef(f);
return /* @__PURE__ */ h(a.input, {
type: "checkbox",
"aria-hidden": !0,
defaultChecked: p ?? O.current,
required: m,
disabled: g,
name: _,
value: v,
form: y,
...n,
tabIndex: -1,
ref: S,
onClick: s(t, (e) => {
T.current && e.stopPropagation();
}),
style: {
...n.style,
...w,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0,
transform: "translateX(-100%)"
}
});
}, "SwitchBubbleInput"));
function M(e) {
return typeof e == "function";
}
v(M, "isFunction");
function N(e) {
return e ? "checked" : "unchecked";
}
v(N, "getState");
//#endregion
//#region src/components/ui/switch.tsx
var P = t("peer inline-flex h-[30px] w-[60px] shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-ring disabled:cursor-not-allowed disabled:opacity-disabled", {
variants: {
color: {
primary: "bg-surface-hard data-[state=checked]:bg-primary",
secondary: "bg-surface-hard data-[state=checked]:bg-secondary",
tertiary: "bg-surface-hard data-[state=checked]:bg-tertiary",
quaternary: "bg-surface-hard data-[state=checked]:bg-quaternary",
foreground: "bg-surface-hard data-[state=checked]:bg-foreground"
},
size: {
small: "h-[20px] w-[40px]",
normal: "h-[30px] w-[60px]"
}
},
defaultVariants: {
color: "primary",
size: "normal"
}
}), F = t("bg-background pointer-events-none block rounded-full shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-[4px] data-[state=unchecked]:rtl:translate-x-[-2px]", {
variants: {
size: {
small: "h-[14px] w-[14px] ",
normal: "h-[22px] w-[22px] "
},
showIconWithSize: {
yes_with_small: "data-[state=checked]:translate-x-[8px] data-[state=checked]:rtl:translate-x-[-8px]",
no_with_small: "data-[state=checked]:translate-x-[22px] data-[state=checked]:rtl:translate-x-[-22px]",
yes_with_normal: "data-[state=checked]:translate-x-[12px] data-[state=checked]:rtl:translate-x-[-12px]",
no_with_normal: "data-[state=checked]:translate-x-[32px] data-[state=checked]:rtl:translate-x-[-32px]"
}
},
defaultVariants: {
size: "normal",
showIconWithSize: "no_with_normal"
}
}), I = f.forwardRef(({ className: t, showValue: i = !1, showIcon: a = !0, values: o = ["On", "Off"], onCheckedChange: s, color: c, size: l = "normal", ...d }, f) => {
let [m, _] = p(d.defaultChecked || !1);
return /* @__PURE__ */ g("div", {
className: "flex items-center gap-2",
children: [/* @__PURE__ */ g(D, {
...d,
className: e(P({
color: c,
size: l
}), t),
ref: f,
onCheckedChange: (e) => {
_(e), s?.(e);
},
children: [
a && m ? /* @__PURE__ */ h(n, {
size: l === "normal" ? 14 : 10,
className: l === "normal" ? "ml-2 text-content-reverse rtl:mr-2 rtl:ml-0" : "ml-1 text-content-reverse rtl:mr-1 rtl:ml-0"
}) : null,
/* @__PURE__ */ h(k, { className: e(F({
size: l,
showIconWithSize: a ? `yes_with_${l}` : `no_with_${l}`
})) }),
a && !m ? /* @__PURE__ */ h(r, {
size: l === "normal" ? 14 : 10,
className: l === "normal" ? "ml-3 rtl:mr-3 rtl:ml-0" : "ml-2 rtl:mr-2 rtl:ml-0"
}) : null
]
}), i ? /* @__PURE__ */ h(u, {
size: "base",
marginBottom: "none",
leading: "none",
children: m ? o[0] : o[1]
}) : null]
});
});
I.displayName = D.displayName;
//#endregion
export { I as t };
//# sourceMappingURL=switch-DitVFAsH.js.map