@frontify/fondue
Version:
Design system of Frontify
91 lines (90 loc) • 3.66 kB
JavaScript
import { jsxs as V, jsx as a } from "react/jsx-runtime";
import { useFocusRing as j } from "@react-aria/focus";
import { useMemo as o } from "react";
import { InputLabel as W } from "../InputLabel/InputLabel.es.js";
import { useMemoizedId as $ } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as D } from "../../utilities/focusStyle.es.js";
import { merge as n } from "../../utilities/merge.es.js";
const Y = "switch-container", L = {
small: "tw-w-[22px] tw-h-3",
medium: "tw-w-[30px] tw-h-4"
}, w = {
small: {
dimensions: "tw-w-3 tw-h-3",
activeWidth: "group-active:tw-w-[14px]",
activeTranslation: "tw-translate-x-[9px]"
},
medium: {
dimensions: "tw-w-4 tw-h-4",
activeWidth: "group-active:tw-w-[18px]",
activeTranslation: "tw-translate-x-[13px]"
}
}, p = "tw-w-2 tw-h-[1px]", T = ({
id: C,
name: f,
label: c,
disabled: e,
onChange: h,
size: s = "medium",
mode: t = "off",
labelStyle: v = "default",
ariaLabel: g,
hug: x = !1,
tooltip: F,
"data-test-id": u = "switch"
}) => {
const r = $(C), { isFocusVisible: m, focusProps: k } = j(), O = o(() => n(["tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors", e && t === "indeterminate" ? "tw-flex tw-items-center tw-justify-center tw-bg-box-disabled tw-border-line tw-pointer-events-none" : e ? "tw-bg-box-disabled tw-border-line tw-pointer-events-none" : t === "indeterminate" ? "tw-bg-text-weak tw-flex tw-items-center tw-justify-center hover:tw-bg-text" : t === "on" ? "tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text" : "tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover", L[s], m && D]), [t, e, s, m]), S = o(() => {
const i = "tw-relative tw-self-center tw-transition-transform", d = t === "on" ? w[s].activeTranslation : "", l = e && t === "indeterminate" ? "tw-bg-text-disabled" : t === "indeterminate" ? "tw-bg-base" : d;
return n([
i,
t === "indeterminate" ? p : w[s].dimensions,
l
]);
}, [e, t, s]), y = o(() => {
const i = "tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75", b = t === "indeterminate" ? "tw-hidden" : t === "on" ? "tw-right-0 tw-translate-x-px" : "tw-left-0", l = e ? "tw-border-line-strong" : n(["tw-bg-base tw-border-line-xx-strong", w[s].activeWidth]);
return n([
i,
t === "indeterminate" ? p : w[s].dimensions,
b,
l
]);
}, [t, e, s]), N = o(
() => n(["tw-gap-2 tw-items-center tw-justify-between", x ? "tw-inline-flex" : "tw-flex"]),
[x]
);
return /* @__PURE__ */ V("div", { className: N, "data-test-id": `${u}-container`, children: [
c && /* @__PURE__ */ a(W, { clickable: !0, id: `${r}-label`, htmlFor: r, disabled: e, tooltip: F, children: /* @__PURE__ */ a(
"span",
{
"data-test-id": `${u}-label-wrapper`,
className: v === "default" ? "tw-font-medium tw-text-text-weak" : "tw-font-bold tw-text-text",
children: c
}
) }),
/* @__PURE__ */ a(
"button",
{
...k,
id: r,
disabled: e,
name: f,
"data-test-id": u,
className: O,
value: t,
onClick: h,
type: "button",
role: "switch",
"aria-checked": t === "on",
"aria-label": g,
"aria-labelledby": c ? `${r}-label` : void 0,
children: /* @__PURE__ */ a("div", { className: S, children: /* @__PURE__ */ a("div", { className: y }) })
}
)
] });
};
T.displayName = "FondueSwitch";
export {
Y as SWITCH_ID,
T as Switch
};
//# sourceMappingURL=Switch.es.js.map