"use client"; // packages/react/switch/src/Switch.tsx import * as React from "react"; import { composeEventHandlers } from "@radix-ui/primitive"; import { useComposedRefs } from "@radix-ui/react-compose-refs"; import { createContextScope } from "@radix-ui/react-context"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { usePrevious } from "@radix-ui/react-use-previous"; import { useSize } from "@radix-ui/react-use-size"; import { Primitive } from "@radix-ui/react-primitive"; import { jsx, jsxs } from "react/jsx-runtime"; var SWITCH_NAME = "Switch"; var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME); var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME); var Switch = React.forwardRef( (props, forwardedRef) => { const { __scopeSwitch, name, checked: checkedProp, defaultChecked, required, disabled, value = "on", onCheckedChange, form, ...switchProps } = props; const [button, setButton] = React.useState(null); const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node)); const hasConsumerStoppedPropagationRef = React.useRef(false); const isFormControl = button ? form || !!button.closest("form") : true; const [checked = false, setChecked] = useControllableState({ prop: checkedProp, defaultProp: defaultChecked, onChange: onCheckedChange }); return /* @__PURE__ */ jsxs(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [ /* @__PURE__ */ jsx( Primitive.button, { type: "button", role: "switch", "aria-checked": checked, "aria-required": required, "data-state": getState(checked), "data-disabled": disabled ? "" : void 0, disabled, value, ...switchProps, ref: composedRefs, onClick: composeEventHandlers(props.onClick, (event) => { setChecked((prevChecked) => !prevChecked); if (isFormControl) { hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation(); } }) } ), isFormControl && /* @__PURE__ */ jsx( BubbleInput, { control: button, bubbles: !hasConsumerStoppedPropagationRef.current, name, value, checked, required, disabled, form, style: { transform: "translateX(-100%)" } } ) ] }); } ); Switch.displayName = SWITCH_NAME; var THUMB_NAME = "SwitchThumb"; var SwitchThumb = React.forwardRef( (props, forwardedRef) => { const { __scopeSwitch, ...thumbProps } = props; const context = useSwitchContext(THUMB_NAME, __scopeSwitch); return /* @__PURE__ */ jsx( Primitive.span, { "data-state": getState(context.checked), "data-disabled": context.disabled ? "" : void 0, ...thumbProps, ref: forwardedRef } ); } ); SwitchThumb.displayName = THUMB_NAME; var BubbleInput = (props) => { const { control, checked, bubbles = true, ...inputProps } = props; const ref = React.useRef(null); const prevChecked = usePrevious(checked); const controlSize = 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 }); setChecked.call(input, checked); input.dispatchEvent(event); } }, [prevChecked, checked, bubbles]); return /* @__PURE__ */ jsx( "input", { type: "checkbox", "aria-hidden": true, defaultChecked: checked, ...inputProps, tabIndex: -1, ref, style: { ...props.style, ...controlSize, position: "absolute", pointerEvents: "none", opacity: 0, margin: 0 } } ); }; function getState(checked) { return checked ? "checked" : "unchecked"; } var Root = Switch; var Thumb = SwitchThumb; export { Root, Switch, SwitchThumb, Thumb, createSwitchScope }; //# sourceMappingURL=index.mjs.map