@trail-ui/react
Version:
66 lines (64 loc) • 2.49 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 { InfoIcon } 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("div", { className: "flex flex-row items-center gap-0.5", children: [
/* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 text-red-600", "aria-hidden": "true" }),
/* @__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 _CheckboxGroup = forwardRef(CheckboxGroup);
export {
CheckboxGroupThemeContext,
_CheckboxGroup
};