@trail-ui/react
Version:
66 lines (64 loc) • 2.43 kB
JavaScript
// src/checkbox/checkbox-group.tsx
import { clsx } from "@trail-ui/shared-utils";
import { checkboxGroup } from "@trail-ui/theme";
import { createContext, forwardRef, useMemo } from "react";
import { CheckboxGroup as AriaCheckboxGroup, Label, Text } from "react-aria-components";
import { ErrorIcon } from "@trail-ui/icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var CheckboxGroupThemeContext = createContext({});
function CheckboxGroup(props, ref) {
const {
lineThrough,
orientation = "vertical",
label,
className,
classNames,
isInvalid,
children,
...otherProps
} = props;
const slots = useMemo(() => checkboxGroup(), []);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ jsx(AriaCheckboxGroup, { 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",
{
"data-orientation": orientation,
className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
children: /* @__PURE__ */ jsx(CheckboxGroupThemeContext.Provider, { value: { isInvalid, lineThrough }, 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 _CheckboxGroup = forwardRef(CheckboxGroup);
export {
CheckboxGroupThemeContext,
_CheckboxGroup
};