@payfit/unity-components
Version:
57 lines (56 loc) • 1.91 kB
JavaScript
import e from "../../../hooks/use-id.js";
import { CheckboxIndicator as t } from "../../checkbox/parts/CheckboxIndicator.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { ListBoxItem as o } from "react-aria-components/ListBox";
//#region src/components/select-list/parts/SelectListOption.tsx
var s = r({
slots: {
base: [
"uy:flex uy:flex-col uy:transition",
"uy:w-full uy:px-150 uy:py-100",
"uy:rounded-50 uy:cursor-pointer",
"uy:hover:bg-surface-neutral-hover",
"uy:active:bg-surface-neutral-pressed",
"uy:data-[focus-visible]:outline uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:-outline-offset-2"
],
label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-300"
},
variants: { isDisabled: {
true: {
base: "uy:cursor-not-allowed!",
label: "uy:text-content-neutral-disabled"
},
false: { base: "" }
} }
});
function c({ children: n, isDisabled: r = !1, textValue: c, helperText: l, ...u }, d) {
let f = e(), { base: p, label: m, helperText: h } = s({ isDisabled: r });
return /* @__PURE__ */ i(o, {
"data-dd-privacy": "mask",
...u,
className: p(),
textValue: c ?? n,
"aria-describedby": l ? `${f}-helper-text` : void 0,
children: ({ isSelected: e }) => /* @__PURE__ */ a("div", {
ref: d,
children: [/* @__PURE__ */ a("div", {
className: m(),
children: [/* @__PURE__ */ i(t, {
isSelected: e,
isDisabled: r
}), n]
}), l && /* @__PURE__ */ i("span", {
id: `${f}-helper-text`,
className: h(),
children: l
})]
})
});
}
c.displayName = "SelectListOption";
var l = n(c);
//#endregion
export { l as SelectListOption };