@alice-ui/react
Version:
62 lines (59 loc) • 2.36 kB
JavaScript
import {
CheckboxGroupThemeContext
} from "./chunk-3ZARNTRJ.mjs";
import {
CheckboxIcon
} from "./chunk-3ZIGC3XV.mjs";
// src/checkbox/checkbox.tsx
import { clsx } from "@alice-ui/shared-utils";
import { checkbox } from "@alice-ui/theme";
import {
cloneElement,
forwardRef,
useContext,
useMemo
} from "react";
import { Checkbox as AriaCheckbox } from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Checkbox(props, ref) {
var _a, _b, _c;
const groupThemeContext = useContext(CheckboxGroupThemeContext);
const {
icon = /* @__PURE__ */ jsx(CheckboxIcon, {}),
size = (_a = groupThemeContext == null ? void 0 : groupThemeContext.size) != null ? _a : "md",
color = (_b = groupThemeContext == null ? void 0 : groupThemeContext.color) != null ? _b : "primary",
radius = groupThemeContext == null ? void 0 : groupThemeContext.radius,
lineThrough = (_c = groupThemeContext == null ? void 0 : groupThemeContext.lineThrough) != null ? _c : false,
className,
classNames,
children,
...otherProps
} = props;
const slots = useMemo(
() => checkbox({
color,
size,
radius,
lineThrough
}),
[color, lineThrough, radius, size]
);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ jsx(AriaCheckbox, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => {
const iconProps = {
"data-checked": String(renderProps.isSelected),
isSelected: renderProps.isSelected,
isIndeterminate: renderProps.isIndeterminate,
className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
};
const clonedIcon = typeof icon === "function" ? icon(iconProps) : cloneElement(icon, iconProps);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: slots.control({ class: classNames == null ? void 0 : classNames.control }), children: clonedIcon }),
children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Checkbox = forwardRef(Checkbox);
export {
_Checkbox
};