@trail-ui/react
Version:
56 lines (54 loc) • 2.45 kB
JavaScript
// src/radio/radio-group.tsx
import { clsx } from "@trail-ui/shared-utils";
import { radioGroup } from "@trail-ui/theme";
import { createContext, forwardRef, useEffect, useMemo } from "react";
import { RadioGroup as AriaRadioGroup, Label, Text } from "react-aria-components";
import { ErrorIcon } from "@trail-ui/icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var RadioGroupThemeContext = createContext({});
function RadioGroup(props, ref) {
const { label, className, classNames, color, size, children, ...otherProps } = props;
const slots = useMemo(() => radioGroup(), []);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
useEffect(() => {
const radioGroup2 = document.querySelector('[role="radiogroup"]');
if (radioGroup2) {
radioGroup2 == null ? void 0 : radioGroup2.removeAttribute("aria-orientation");
}
}, []);
return /* @__PURE__ */ jsx(AriaRadioGroup, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
label && /* @__PURE__ */ jsx(Label, { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
children && /* @__PURE__ */ jsx("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx(RadioGroupThemeContext.Provider, { value: { color, size }, children: typeof children === "function" ? children(renderProps) : children }) }),
props.errorMessage ? /* @__PURE__ */ jsxs(
Text,
{
slot: "errorMessage",
className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })} flex flex-row items-center gap-0.5`,
children: [
/* @__PURE__ */ jsx(
ErrorIcon,
{
role: "img",
"aria-label": "Error",
"aria-hidden": "false",
className: "h-4 w-4 text-red-600"
}
),
props.errorMessage
]
}
) : props.description ? /* @__PURE__ */ jsx(
Text,
{
slot: "description",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: props.description
}
) : null
] }) });
}
var _RadioGroup = forwardRef(RadioGroup);
export {
RadioGroupThemeContext,
_RadioGroup
};