@trail-ui/react
Version:
47 lines (45 loc) • 2.08 kB
JavaScript
// src/radio/radio-group.tsx
import { clsx } from "@trail-ui/shared-utils";
import { radioGroup } from "@trail-ui/theme";
import { createContext, forwardRef, useMemo } from "react";
import { RadioGroup as AriaRadioGroup, Label, Text } from "react-aria-components";
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);
return /* @__PURE__ */ jsx(
AriaRadioGroup,
{
ref,
className: slots.base({ class: baseStyles }),
"aria-label": otherProps["aria-label"] || typeof label === "string" ? label : void 0,
...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__ */ jsx(
Text,
{
slot: "errorMessage",
className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }),
children: 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
};