@payfit/unity-components
Version:
109 lines (108 loc) • 4.12 kB
JavaScript
import { buttonBase as e } from "../../../../components/button/Button.variants.js";
import { Tooltip as t } from "../../../../components/tooltip/Tooltip.js";
import { aiGradientEffect as n, aiGradientSurfaceEffect as r } from "../../utils/ai-gradient-effect.js";
import { PayfitAIBrand as i } from "../payfit-ai-brand/PayfitAIBrand.js";
import { forwardRef as a, useState as o } from "react";
import { cn as s, uyTv as c } from "@payfit/unity-themes";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
import { ToggleButton as d } from "react-aria-components/ToggleButton";
//#region src/modules/ai-kit/components/ai-trigger-button/AITriggerButton.tsx
var f = c({
extend: e,
base: [
"uy:relative uy:isolate uy:[--uy-ai-gradient-border-width:2px]",
"uy:max-w-full",
"uy:text-content-neutral-enabled",
"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-hover",
"uy:enabled:active:text-content-neutral-active",
"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-pressed",
"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus",
"uy:data-[pressed=\"true\"]:[--uy-ai-gradient-border-width:1px]",
"uy:data-[selected=\"true\"]:[--uy-ai-gradient-border-width:1px]",
"uy:data-[selected=\"true\"]:data-[hovered=\"true\"]:[--uy-ai-gradient-border-width:2px]",
"uy:data-[selected=\"true\"]:hover:[--uy-ai-gradient-border-width:2px]"
],
variants: {
isDisabled: {
true: [
"uy:disabled:border-border-neutral-high-disabled",
"uy:disabled:text-content-neutral-disabled",
"uy:data-[loading=\"true\"]:border-border-neutral-high-disabled",
"uy:data-[loading=\"true\"]:text-content-neutral-disabled"
],
false: ""
},
iconOnly: {
true: "uy:!px-100 uy:py-100",
false: ""
}
},
compoundVariants: [{
isDisabled: !1,
className: n({
gradient: "linear",
variant: "ghost",
glow: !1
})
}, {
iconOnly: !0,
mode: "compact",
className: "uy:!px-50 uy:py-50"
}],
defaultVariants: {
isDisabled: !1,
iconOnly: !1
}
}), p = c({
base: "",
variants: { isDisabled: {
true: "",
false: r()
} },
defaultVariants: { isDisabled: !1 }
}), m = a(({ children: e, defaultSelected: n, iconOnly: r = !1, isDisabled: a = !1, isLoading: c = !1, isSelected: m, mode: h = "default", onChange: g, brandSlot: _, ...v }, y) => {
let [b, x] = o(n ?? !1), S = m ?? b, C = (e) => {
m === void 0 && x(e), g?.(e);
}, w = a || c, T = f({
iconOnly: r,
isDisabled: w,
mode: h
}), E = p({ isDisabled: w }), D = {
appearance: w ? "grayscale" : "color",
"aria-hidden": !0,
className: s("uy:[--uy-payfit-ai-brand-rotation:0deg]", "uy:[--uy-payfit-ai-brand-scale:1]", "uy:origin-center", "uy:transform-gpu", "uy:rotate-(--uy-payfit-ai-brand-rotation)", "uy:scale-(--uy-payfit-ai-brand-scale)", "uy:motion-safe:transition-[--uy-payfit-ai-brand-rotation,--uy-payfit-ai-brand-scale]", "uy:motion-safe:duration-600", "uy:motion-safe:ease-out", "uy:group-data-[hovered=\"true\"]:[--uy-payfit-ai-brand-rotation:370deg]", "uy:group-data-[hovered=\"true\"]:[--uy-payfit-ai-brand-scale:1.1]", "uy:group-data-[focus-visible=\"true\"]:[--uy-payfit-ai-brand-rotation:370deg]", "uy:group-data-[focus-visible=\"true\"]:[--uy-payfit-ai-brand-scale:1.1]") ?? "",
size: h === "default" ? 24 : 20
}, O = /* @__PURE__ */ u(d, {
...v,
ref: y,
"aria-expanded": S,
"data-dd-privacy": "allow",
"data-loading": c || void 0,
defaultSelected: n,
isDisabled: w,
isSelected: m,
onChange: C,
className: T,
children: [/* @__PURE__ */ l("span", {
"aria-hidden": "true",
className: E,
"data-unity-slot": "ai.surface"
}), /* @__PURE__ */ u("span", {
className: "uy:relative uy:z-20 uy:inline-flex uy:items-center uy:justify-center uy:gap-50",
children: [_?.(D) ?? /* @__PURE__ */ l(i, {
...D,
"data-unity-icon": "prefix"
}), /* @__PURE__ */ l("span", {
className: r ? "uy:sr-only" : void 0,
children: e
})]
})]
});
return r ? /* @__PURE__ */ l(t, {
title: typeof e == "string" ? e : "Payfit AI",
children: O
}) : O;
});
m.displayName = "AITriggerButton";
//#endregion
export { m as AITriggerButton };