@payfit/unity-components
Version:
106 lines (105 loc) • 3.4 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Spinner as t } from "../../spinner/Spinner.js";
import { SegmentedButtonGroupContext as n } from "../SegmentedButtonGroups.context.js";
import { forwardRef as r, useContext as i, useRef as a } from "react";
import { uyTv as o } from "@payfit/unity-themes";
import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
import { useIntl as u } from "react-intl";
import { mergeProps as d } from "react-aria/mergeProps";
import { useRadio as f } from "react-aria/useRadioGroup";
import { useFocusRing as p } from "react-aria/useFocusRing";
import { VisuallyHidden as m } from "react-aria/VisuallyHidden";
//#region src/components/segmented-button-group/parts/ToggleButton.tsx
var h = o({
slots: {
base: ["uy:group uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25 uy:h-400", "uy:active:gb-surface-neutral-pressed"],
wrapper: ["uy:flex uy:gap-50 uy:items-center uy:typography-action", "uy:active:text-content-neutral-pressed"]
},
variants: {
isSelected: { true: { base: "uy:bg-surface-neutral-enabled uy:shadow-raising" } },
isLoading: { true: {
base: "uy:bg-surface-neutral-disabled uy:cursor-not-allowed",
wrapper: "uy:text-content-inverted-disabled"
} },
isFocusVisible: { true: { base: "uy:outline-none uy:ring-2 uy:ring-ring uy:ring-offset-2 uy:ring-utility-focus-ring" } },
hasPrefixIcon: {
true: "",
false: ""
}
},
compoundVariants: [
{
isLoading: !1,
isSelected: !1,
className: {
base: "uy:hover:bg-surface-neutral-hover",
wrapper: "uy:text-content-neutral-enabled uy:group-hover:text-content-neutral-hover"
}
},
{
isLoading: !0,
hasPrefixIcon: !1,
className: { base: "uy:pl-150 uy:cursor-not-allowed" }
},
{
isLoading: !0,
hasPrefixIcon: !0,
className: { base: "uy:pl-150 uy:cursor-not-allowed" }
},
{
isLoading: !1,
hasPrefixIcon: !1,
className: { base: "uy:pl-150 uy:cursor-pointer" }
},
{
isLoading: !1,
hasPrefixIcon: !0,
className: { base: "uy:pl-50 uy:cursor-pointer" }
}
],
defaultVariants: {
isSelected: !1,
isLoading: !1,
hasPrefixIcon: !1
}
}), g = ({ intl: n, children: r, isLoading: i, prefixIcon: a, isSelected: o }) => i ? /* @__PURE__ */ c(t, {
label: n.formatMessage({
id: "unity:component:common:loading:label",
defaultMessage: "Loading..."
}),
color: "inherit",
size: "small"
}) : /* @__PURE__ */ l(s, { children: [a ? /* @__PURE__ */ c(e, {
src: o ? `${a}Filled` : `${a}Outlined`,
color: o ? "content.neutral" : "content.neutral.low",
role: "presentation"
}) : null, r] }), _ = r((e, t) => {
let { children: r, value: o, prefixIcon: s, isLoading: _ } = e, { state: v } = i(n), y = a(null), { inputProps: b } = f(e, v, y), { focusProps: x, isFocusVisible: S } = p(), C = u(), w = v.selectedValue === o, { base: T, wrapper: E } = h({
isSelected: w,
hasPrefixIcon: !!s,
isLoading: _,
isFocusVisible: S
});
return /* @__PURE__ */ l("label", {
ref: t,
className: T(),
"aria-disabled": _,
children: [/* @__PURE__ */ c(m, { children: /* @__PURE__ */ c("input", {
...d(b, x),
ref: y,
disabled: _
}) }), /* @__PURE__ */ c("span", {
className: E(),
children: g({
intl: C,
children: r,
isLoading: _,
isSelected: w,
prefixIcon: s
})
})]
});
});
_.displayName = "ToggleButton";
//#endregion
export { _ as ToggleButton };