Spaces:
Runtime error
Runtime error
| "use client"; | |
| // 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, setChecked] = useControllableState({ | |
| prop: checkedProp, | |
| defaultProp: defaultChecked ?? false, | |
| onChange: onCheckedChange, | |
| caller: SWITCH_NAME | |
| }); | |
| 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( | |
| SwitchBubbleInput, | |
| { | |
| 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 BUBBLE_INPUT_NAME = "SwitchBubbleInput"; | |
| var SwitchBubbleInput = React.forwardRef( | |
| ({ | |
| __scopeSwitch, | |
| control, | |
| checked, | |
| bubbles = true, | |
| ...props | |
| }, forwardedRef) => { | |
| const ref = React.useRef(null); | |
| const composedRefs = useComposedRefs(ref, forwardedRef); | |
| const prevChecked = usePrevious(checked); | |
| const controlSize = useSize(control); | |
| React.useEffect(() => { | |
| const input = ref.current; | |
| if (!input) return; | |
| 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, | |
| ...props, | |
| tabIndex: -1, | |
| ref: composedRefs, | |
| style: { | |
| ...props.style, | |
| ...controlSize, | |
| position: "absolute", | |
| pointerEvents: "none", | |
| opacity: 0, | |
| margin: 0 | |
| } | |
| } | |
| ); | |
| } | |
| ); | |
| SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME; | |
| function getState(checked) { | |
| return checked ? "checked" : "unchecked"; | |
| } | |
| var Root = Switch; | |
| var Thumb = SwitchThumb; | |
| export { | |
| Root, | |
| Switch, | |
| SwitchThumb, | |
| Thumb, | |
| createSwitchScope | |
| }; | |
| //# sourceMappingURL=index.mjs.map | |