@payfit/unity-components
Version:
112 lines (111 loc) • 4.85 kB
JavaScript
import { useBreakpointListener as e } from "../../hooks/use-breakpoint-listener.js";
import { forwardRef as t } from "react";
import { uyTv as n } from "@payfit/unity-themes";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
import { SwitchButton as a, SwitchField as o } from "react-aria-components/Switch";
//#region src/components/toggle-switch/ToggleSwitch.tsx
var s = n({
slots: {
container: ["uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:group"],
mobileContainer: ["uy:flex uy:flex-1 uy:justify-between uy:sm:justify-start uy:gap-200 uy:sm:gap-100 uy:group uy:my-75 uy:sm:my-0"],
textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
label: ["uy:typography-body uy:text-content-form-enabled uy:leading-4! uy:sm:leading-3!"],
hintText: ["uy:typography-body-small uy:text-content-neutral-low"],
indicator: [
"uy:p-50 uy:w-6.75 uy:h-4 uy:sm:w-500 uy:sm:h-300 uy:flex uy:items-center uy:shrink-0 uy:grow-0",
"uy:rounded-pill",
"uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-disabled",
"uy:cursor-pointer uy:transition-colors uy:duration-200 uy:ease-in-out",
"uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
"uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled uy:group-data-[disabled]:cursor-not-allowed",
"uy:group-data-[focus-visible]:outline-2 uy:group-data-[focus-visible]:outline-offset-2 uy:group-data-[focus-visible]:outline-utility-focus-ring"
],
knob: [
"uy:w-300 uy:h-300 uy:sm:w-200 uy:sm:h-200 uy:rounded-circle",
"uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-enabled",
"uy:transition-all uy:duration-200 uy:ease-in-out",
"uy:group-data-[selected=\"true\"]:translate-x-[90%]",
"uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
"uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled"
]
},
variants: { isDisabled: {
false: {
indicator: [
"uy:theme-legacy:group-data-[selected=\"true\"]:bg-surface-form-active uy:theme-legacy:group-data-[selected=\"true\"]:border-border-form-active",
"uy:theme-rebrand:group-data-[selected=\"true\"]:bg-surface-form-active uy:theme-rebrand:group-data-[selected=\"true\"]:border-surface-form-active",
"uy:theme-legacy:group-data-[selected=\"true\"]:group-data-[pressed]:bg-surface-form-active",
"uy:theme-legacy:group-data-[selected=\"true\"]:group-data-[pressed]:border-border-form-active",
"uy:theme-rebrand:group-data-[selected=\"true\"]:group-data-[pressed]:bg-surface-primary-active",
"uy:theme-rebrand:group-data-[selected=\"true\"]:group-data-[pressed]:border-border-primary-active"
],
knob: [
"uy:theme-legacy:group-data-[selected=true]:border-border-inverted-enabled uy:theme-rebrand:group-data-[selected=true]:border-transparent",
"uy:group-data-[selected=true]:group-data-[pressed]:bg-surface-form-pressed",
"uy:group-data-[selected=true]:group-data-[pressed]:border-border-inverted-pressed"
]
},
true: {
indicator: "",
knob: ""
}
} }
}), c = t(({ label: t, helperText: n, isLabelSrOnly: c = !1, isDisabled: l, ...u }, d) => {
let { container: f, indicator: p, knob: m, textWrapper: h, label: g, hintText: _, mobileContainer: v } = s({ isDisabled: l }), y = e() === "xs", b = {
...u,
role: "switch"
};
return y ? /* @__PURE__ */ r(o, {
...b,
className: "uy:contents",
isDisabled: l,
children: /* @__PURE__ */ r(a, {
ref: d,
className: f(),
children: /* @__PURE__ */ i("div", {
className: v(),
children: [/* @__PURE__ */ i("div", {
className: h({ className: c ? "uy:sr-only" : "" }),
"data-dd-privacy": "allow",
children: [/* @__PURE__ */ r("span", {
className: g(),
children: t
}), n && /* @__PURE__ */ r("span", {
className: _(),
children: n
})]
}), /* @__PURE__ */ r("div", {
className: p(),
"data-dd-privacy": "mask",
children: /* @__PURE__ */ r("div", { className: m() })
})]
})
})
}) : /* @__PURE__ */ r(o, {
...b,
className: "uy:contents",
isDisabled: l,
children: /* @__PURE__ */ i(a, {
className: f(),
ref: d,
children: [/* @__PURE__ */ r("div", {
className: p(),
"data-dd-privacy": "mask",
children: /* @__PURE__ */ r("div", { className: m() })
}), /* @__PURE__ */ i("div", {
className: h({ className: c ? "uy:sr-only" : "" }),
"data-dd-privacy": "allow",
children: [/* @__PURE__ */ r("span", {
className: g(),
children: t
}), n && /* @__PURE__ */ r("span", {
className: _(),
children: n
})]
})]
})
});
});
c.displayName = "ToggleSwitch";
//#endregion
export { c as ToggleSwitch, s as toggleSwitch };