@payfit/unity-components
Version:
82 lines (81 loc) • 4.33 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Spinner as t } from "../../spinner/Spinner.js";
import { SelectableButtonGroupContext as n } from "../SelectableButtonGroup.context.js";
import { forwardRef as r, useCallback as i, useContext as a, useRef as o } from "react";
import { uyTv as s } from "@payfit/unity-themes";
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
import { mergeProps as d } from "react-aria/mergeProps";
import { useFocusRing as f } from "react-aria/useFocusRing";
import { useToggleButtonGroupItem as p } from "react-aria/useToggleButtonGroup";
import { useHover as m } from "react-aria/useHover";
//#region src/components/selectable-button-group/parts/SelectableButton.tsx
var h = s({
slots: {
base: [
"uy:group uy:border uy:border-solid uy:rounded-pill uy:py-125 uy:sm:py-100 uy:flex uy:gap-50 uy:items-center",
"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled uy:m-[1px]",
"uy:enabled:data-[hovered=true]:bg-surface-form-hover uy:enabled:data-[hovered=true]:border-border-form-hover",
"uy:enabled:data-[pressed=true]:bg-surface-form-pressed uy:enabled:data-[pressed=true]:border-border-form-pressed uy:enabled:data-[pressed=true]:text-content-form-pressed",
"uy:enabled:data-[focus-visible=true]:bg-surface-form-focus uy:enabled:data-[focus-visible=true]:border-border-form-focus",
"uy:enabled:data-[focus-visible=true]:outline-2 uy:enabled:data-[focus-visible=true]:outline-solid uy:enabled:data-[focus-visible=true]:outline-offset-2 uy:enabled:data-[focus-visible=true]:outline-utility-focus-ring",
"uy:enabled:data-[selected=true]:bg-surface-form-selected uy:enabled:data-[selected=true]:border-border-form-selected uy:enabled:data-[selected=true]:text-content-form-selected uy:enabled:data-[selected=true]:border-2 uy:enabled:data-[selected=true]:m-0",
"uy:disabled:bg-surface-form-disabled uy:disabled:border-border-form-disabled uy:disabled:text-content-form-disabled uy:disabled:cursor-not-allowed",
"uy:data-[loading=true]:bg-surface-form-disabled uy:data-[loading=true]:border-border-form-disabled uy:data-[loading=true]:text-content-form-disabled uy:data-[loading=true]:cursor-wait",
"uy:group-aria-[invalid=true]:bg-surface-form-error uy:group-aria-[invalid=true]:border-border-form-error uy:group-aria-[invalid=true]:text-content-form-error"
],
icon: [
"uy:p-25 uy:text-content-form-enabled",
"uy:enabled:group-data-[pressed=true]:text-content-form-pressed",
"uy:enabled:group-data-[selected=true]:text-content-form-selected",
"uy:group-disabled:text-content-form-disabled",
"uy:data-[loading=true]:hidden"
],
label: ["uy:typography-action uy:whitespace-nowrap"]
},
variants: { hasIcon: {
true: { base: "uy:pl-100 uy:pr-200" },
false: { base: "uy:px-200" }
} },
defaultVariants: { hasIcon: !1 }
}), g = r((r, s) => {
let g = o(null), _ = a(n);
if (!_) throw Error("SelectableButton must be used within a SelectableButtonGroup component");
let { buttonProps: v, isPressed: y, isSelected: b } = p({
id: r.value,
...r
}, _, g), { isDisabled: x = !1, isLoading: S = !1, prefixIcon: C, children: w } = r, { hoverProps: T, isHovered: E } = m({ isDisabled: x || S }), { isFocusVisible: D, focusProps: O } = f(), k = i((e) => {
g.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
}, [s]), { base: A, icon: j, label: M } = h({ hasIcon: !!C && !S });
return /* @__PURE__ */ u("button", {
"data-dd-privacy": "allow",
...d(v, T, O),
ref: k,
className: A({ className: r.className }),
disabled: v.disabled || x || S,
"data-loading": S ? !0 : void 0,
"data-pressed": y || void 0,
"data-hovered": E || void 0,
"data-focus-visible": D || void 0,
"data-selected": b,
"aria-busy": S,
children: [C && !S && /* @__PURE__ */ l(e, {
src: b ? `${C}Filled` : `${C}Outlined`,
role: "presentation",
className: j(),
size: 20
}), S ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(t, {
label: "Loading",
size: "small",
color: "inherit"
}), /* @__PURE__ */ l("span", {
className: "uy:sr-only",
children: w
})] }) : /* @__PURE__ */ l("span", {
className: M(),
children: w
})]
});
});
g.displayName = "SelectableButton";
//#endregion
export { g as SelectableButton, h as selectableButton };