"use strict"; "use client"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // packages/react/checkbox/src/index.ts var src_exports = {}; __export(src_exports, { Checkbox: () => Checkbox, CheckboxIndicator: () => CheckboxIndicator, Indicator: () => Indicator, Root: () => Root, createCheckboxScope: () => createCheckboxScope }); module.exports = __toCommonJS(src_exports); // packages/react/checkbox/src/Checkbox.tsx var React = __toESM(require("react")); var import_react_compose_refs = require("@radix-ui/react-compose-refs"); var import_react_context = require("@radix-ui/react-context"); var import_primitive = require("@radix-ui/primitive"); var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state"); var import_react_use_previous = require("@radix-ui/react-use-previous"); var import_react_use_size = require("@radix-ui/react-use-size"); var import_react_presence = require("@radix-ui/react-presence"); var import_react_primitive = require("@radix-ui/react-primitive"); var import_jsx_runtime = require("react/jsx-runtime"); var CHECKBOX_NAME = "Checkbox"; var [createCheckboxContext, createCheckboxScope] = (0, import_react_context.createContextScope)(CHECKBOX_NAME); var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME); var Checkbox = React.forwardRef( (props, forwardedRef) => { const { __scopeCheckbox, name, checked: checkedProp, defaultChecked, required, disabled, value = "on", onCheckedChange, form, ...checkboxProps } = props; const [button, setButton] = React.useState(null); const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setButton(node)); const hasConsumerStoppedPropagationRef = React.useRef(false); const isFormControl = button ? form || !!button.closest("form") : true; const [checked = false, setChecked] = (0, import_react_use_controllable_state.useControllableState)({ prop: checkedProp, defaultProp: defaultChecked, onChange: onCheckedChange }); const initialCheckedStateRef = React.useRef(checked); React.useEffect(() => { const form2 = button?.form; if (form2) { const reset = () => setChecked(initialCheckedStateRef.current); form2.addEventListener("reset", reset); return () => form2.removeEventListener("reset", reset); } }, [button, setChecked]); return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_react_primitive.Primitive.button, { type: "button", role: "checkbox", "aria-checked": isIndeterminate(checked) ? "mixed" : checked, "aria-required": required, "data-state": getState(checked), "data-disabled": disabled ? "" : void 0, disabled, value, ...checkboxProps, ref: composedRefs, onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { if (event.key === "Enter") event.preventDefault(); }), onClick: (0, import_primitive.composeEventHandlers)(props.onClick, (event) => { setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked); if (isFormControl) { hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation(); } }) } ), isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( BubbleInput, { control: button, bubbles: !hasConsumerStoppedPropagationRef.current, name, value, checked, required, disabled, form, style: { transform: "translateX(-100%)" }, defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked } ) ] }); } ); Checkbox.displayName = CHECKBOX_NAME; var INDICATOR_NAME = "CheckboxIndicator"; var CheckboxIndicator = React.forwardRef( (props, forwardedRef) => { const { __scopeCheckbox, forceMount, ...indicatorProps } = props; const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isIndeterminate(context.state) || context.state === true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_react_primitive.Primitive.span, { "data-state": getState(context.state), "data-disabled": context.disabled ? "" : void 0, ...indicatorProps, ref: forwardedRef, style: { pointerEvents: "none", ...props.style } } ) }); } ); CheckboxIndicator.displayName = INDICATOR_NAME; var BubbleInput = (props) => { const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props; const ref = React.useRef(null); const prevChecked = (0, import_react_use_previous.usePrevious)(checked); const controlSize = (0, import_react_use_size.useSize)(control); React.useEffect(() => { const input = ref.current; const inputProto = window.HTMLInputElement.prototype; const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked"); const setChecked = descriptor.set; if (prevChecked !== checked && setChecked) { const event = new Event("click", { bubbles }); input.indeterminate = isIndeterminate(checked); setChecked.call(input, isIndeterminate(checked) ? false : checked); input.dispatchEvent(event); } }, [prevChecked, checked, bubbles]); const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "input", { type: "checkbox", "aria-hidden": true, defaultChecked: defaultChecked ?? defaultCheckedRef.current, ...inputProps, tabIndex: -1, ref, style: { ...props.style, ...controlSize, position: "absolute", pointerEvents: "none", opacity: 0, margin: 0 } } ); }; function isIndeterminate(checked) { return checked === "indeterminate"; } function getState(checked) { return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked"; } var Root = Checkbox; var Indicator = CheckboxIndicator; //# sourceMappingURL=index.js.map