@payfit/unity-components
Version:
62 lines (61 loc) • 2.43 kB
JavaScript
import { Text as e } from "../../text/Text.js";
import { Flex as t } from "../../flex/Flex.js";
import { RadioButtonHelper as n } from "./RadioButtonHelper.js";
import { RadioIndicator as r } from "./RadioIndicator.js";
import { forwardRef as i, useContext as a } from "react";
import { useUnityTheme as o, uyTv as s } from "@payfit/unity-themes";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { RadioButton as u, RadioField as d, RadioGroupStateContext as f } from "react-aria-components/RadioGroup";
//#region src/components/radio-button-group/parts/RadioButton.tsx
var p = s({ slots: {
container: [
"uy:group uy:inline-flex uy:flex-col uy:gap-50",
"uy:rounded-md uy:sm:rounded-25",
"uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
"uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
"uy:focus-within:outline-2 uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
"uy:has-data-[disabled=true]:border-border-neutral-disabled",
"uy:has-data-[readonly=true]:border-border-neutral-disabled"
],
base: [
"uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-start uy:cursor-pointer",
"uy:data-[disabled=true]:cursor-not-allowed",
"uy:data-[readonly=true]:cursor-not-allowed"
],
radio: ["uy:mt-25 uy:sm:mt-px"],
label: [
"uy:text-content-neutral",
"uy:group-data-[disabled=true]:text-content-neutral-disabled",
"uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
]
} }), m = i(({ children: i, value: s, isDisabled: m, helperText: h, ...g }, _) => {
let { base: v, label: y, container: b, radio: x } = p(), S = a(f), { theme: C } = o(), w = S?.isReadOnly ? "readonly" : S?.isDisabled || m ? "disabled" : S?.isInvalid ? "invalid" : "enabled";
return /* @__PURE__ */ l(t, {
direction: "col",
gap: "50",
className: b(),
children: [/* @__PURE__ */ c(d, {
...g,
value: s,
isDisabled: m,
className: "uy:contents",
children: ({ isSelected: t }) => /* @__PURE__ */ l(u, {
ref: _,
className: () => v(),
children: [/* @__PURE__ */ c(r, {
isSelected: t,
state: w,
theme: C,
className: x()
}), /* @__PURE__ */ c(e, {
variant: "body",
className: y(),
children: i
})]
})
}), h ? /* @__PURE__ */ c(n, { children: h }) : null]
});
});
m.displayName = "RadioButton";
//#endregion
export { m as RadioButton, p as radioButton };