@payfit/unity-components
Version:
54 lines (53 loc) • 2.03 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { SelectOptionProvider as t } from "./SelectOption.context.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
import { ListBoxItem as s } from "react-aria-components/ListBox";
//#region src/components/select/parts/SelectOption.tsx
var c = r({
base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:cursor-pointer",
variants: {
isFocusVisible: { true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring" },
isHovered: { true: "uy:bg-surface-neutral-hover uy:text-content-neutral" },
isPressed: { true: "uy:bg-surface-neutral-pressed uy:text-content-neutral-pressed" },
isSelected: { true: "uy:bg-surface-neutral-active uy:text-content-neutral-active" },
isDisabled: { true: "uy:text-content-neutral-disabled" }
},
compoundVariants: [{
isFocusVisible: !1,
isHovered: !1,
isPressed: !1,
isSelected: !1,
isDisabled: !1,
class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
}]
}), l = n((n, r) => {
let { children: l, isDisabled: u, textValue: d } = n;
return /* @__PURE__ */ a(s, {
...n,
ref: r,
"data-dd-privacy": "mask",
textValue: d,
className: ({ isHovered: e, isPressed: t, isFocusVisible: n, isSelected: r }) => c({
isHovered: e,
isPressed: t,
isFocusVisible: n,
isSelected: r,
isDisabled: u
}),
children: ({ isSelected: n }) => /* @__PURE__ */ a(t, {
isDisabled: u,
children: n ? /* @__PURE__ */ o("div", {
className: "uy:flex uy:justify-between",
children: [/* @__PURE__ */ a("div", {
className: "uy:flex uy:flex-col",
children: /* @__PURE__ */ a(i, { children: l })
}), /* @__PURE__ */ a(e, { src: "CheckOutlined" })]
}) : /* @__PURE__ */ a(i, { children: l })
})
});
});
l.displayName = "SelectOption";
//#endregion
export { l as SelectOption };