@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
49 lines (48 loc) • 1.95 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { Checkbox } from "@base-ui/react/checkbox";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { cn } from "../../lib/utilities.js";
import checkbox_module from "./checkbox.module.js";
import * as __rspack_external_react from "react";
const checkbox_Checkbox = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
const { checked, className, onCheckedChange, render, ...otherProps } = props;
const baseChecked = "indeterminate" === checked ? true : checked;
const indeterminate = "indeterminate" === checked;
const handleCheckedChange = onCheckedChange ? (nextChecked, eventDetails)=>{
onCheckedChange(nextChecked, eventDetails);
} : void 0;
return /*#__PURE__*/ jsx(Checkbox.Root, {
ref: ref,
checked: baseChecked,
indeterminate: indeterminate,
onCheckedChange: handleCheckedChange,
...otherProps,
render: useRender({
defaultTagName: "button",
render: render,
props: mergeProps({
className: cn(checkbox_module.checkbox, className)
}, {})
}),
children: /*#__PURE__*/ jsx(Checkbox.Indicator, {
className: checkbox_module.indicator,
children: /*#__PURE__*/ jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "3",
strokeLinecap: "round",
strokeLinejoin: "round",
children: /*#__PURE__*/ jsx("polyline", {
points: "20 6 9 17 4 12"
})
})
})
});
});
checkbox_Checkbox.displayName = "Checkbox";
export { checkbox_Checkbox as Checkbox };
//# sourceMappingURL=checkbox.js.map