"use client"; // packages/react/radio-group/src/RadioGroup.tsx import * as React2 from "react"; import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive"; import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs"; import { createContextScope as createContextScope2 } from "@radix-ui/react-context"; import { Primitive as Primitive2 } from "@radix-ui/react-primitive"; import * as RovingFocusGroup from "@radix-ui/react-roving-focus"; import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { useDirection } from "@radix-ui/react-direction"; // packages/react/radio-group/src/Radio.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 { useSize } from "@radix-ui/react-use-size"; import { usePrevious } from "@radix-ui/react-use-previous"; import { Presence } from "@radix-ui/react-presence"; import { Primitive } from "@radix-ui/react-primitive"; import { jsx, jsxs } from "react/jsx-runtime"; var RADIO_NAME = "Radio"; var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME); var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME); var Radio = React.forwardRef( (props, forwardedRef) => { const { __scopeRadio, name, checked = false, required, disabled, value = "on", onCheck, form, ...radioProps } = 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; return /* @__PURE__ */ jsxs(RadioProvider, { scope: __scopeRadio, checked, disabled, children: [ /* @__PURE__ */ jsx( Primitive.button, { type: "button", role: "radio", "aria-checked": checked, "data-state": getState(checked), "data-disabled": disabled ? "" : void 0, disabled, value, ...radioProps, ref: composedRefs, onClick: composeEventHandlers(props.onClick, (event) => { if (!checked) onCheck?.(); 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%)" } } ) ] }); } ); Radio.displayName = RADIO_NAME; var INDICATOR_NAME = "RadioIndicator"; var RadioIndicator = React.forwardRef( (props, forwardedRef) => { const { __scopeRadio, forceMount, ...indicatorProps } = props; const context = useRadioContext(INDICATOR_NAME, __scopeRadio); return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.checked, children: /* @__PURE__ */ jsx( Primitive.span, { "data-state": getState(context.checked), "data-disabled": context.disabled ? "" : void 0, ...indicatorProps, ref: forwardedRef } ) }); } ); RadioIndicator.displayName = INDICATOR_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: "radio", "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"; } // packages/react/radio-group/src/RadioGroup.tsx import { jsx as jsx2 } from "react/jsx-runtime"; var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]; var RADIO_GROUP_NAME = "RadioGroup"; var [createRadioGroupContext, createRadioGroupScope] = createContextScope2(RADIO_GROUP_NAME, [ createRovingFocusGroupScope, createRadioScope ]); var useRovingFocusGroupScope = createRovingFocusGroupScope(); var useRadioScope = createRadioScope(); var [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME); var RadioGroup = React2.forwardRef( (props, forwardedRef) => { const { __scopeRadioGroup, name, defaultValue, value: valueProp, required = false, disabled = false, orientation, dir, loop = true, onValueChange, ...groupProps } = props; const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup); const direction = useDirection(dir); const [value, setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: onValueChange }); return /* @__PURE__ */ jsx2( RadioGroupProvider, { scope: __scopeRadioGroup, name, required, disabled, value, onValueChange: setValue, children: /* @__PURE__ */ jsx2( RovingFocusGroup.Root, { asChild: true, ...rovingFocusGroupScope, orientation, dir: direction, loop, children: /* @__PURE__ */ jsx2( Primitive2.div, { role: "radiogroup", "aria-required": required, "aria-orientation": orientation, "data-disabled": disabled ? "" : void 0, dir: direction, ...groupProps, ref: forwardedRef } ) } ) } ); } ); RadioGroup.displayName = RADIO_GROUP_NAME; var ITEM_NAME = "RadioGroupItem"; var RadioGroupItem = React2.forwardRef( (props, forwardedRef) => { const { __scopeRadioGroup, disabled, ...itemProps } = props; const context = useRadioGroupContext(ITEM_NAME, __scopeRadioGroup); const isDisabled = context.disabled || disabled; const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup); const radioScope = useRadioScope(__scopeRadioGroup); const ref = React2.useRef(null); const composedRefs = useComposedRefs2(forwardedRef, ref); const checked = context.value === itemProps.value; const isArrowKeyPressedRef = React2.useRef(false); React2.useEffect(() => { const handleKeyDown = (event) => { if (ARROW_KEYS.includes(event.key)) { isArrowKeyPressedRef.current = true; } }; const handleKeyUp = () => isArrowKeyPressedRef.current = false; document.addEventListener("keydown", handleKeyDown); document.addEventListener("keyup", handleKeyUp); return () => { document.removeEventListener("keydown", handleKeyDown); document.removeEventListener("keyup", handleKeyUp); }; }, []); return /* @__PURE__ */ jsx2( RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: !isDisabled, active: checked, children: /* @__PURE__ */ jsx2( Radio, { disabled: isDisabled, required: context.required, checked, ...radioScope, ...itemProps, name: context.name, ref: composedRefs, onCheck: () => context.onValueChange(itemProps.value), onKeyDown: composeEventHandlers2((event) => { if (event.key === "Enter") event.preventDefault(); }), onFocus: composeEventHandlers2(itemProps.onFocus, () => { if (isArrowKeyPressedRef.current) ref.current?.click(); }) } ) } ); } ); RadioGroupItem.displayName = ITEM_NAME; var INDICATOR_NAME2 = "RadioGroupIndicator"; var RadioGroupIndicator = React2.forwardRef( (props, forwardedRef) => { const { __scopeRadioGroup, ...indicatorProps } = props; const radioScope = useRadioScope(__scopeRadioGroup); return /* @__PURE__ */ jsx2(RadioIndicator, { ...radioScope, ...indicatorProps, ref: forwardedRef }); } ); RadioGroupIndicator.displayName = INDICATOR_NAME2; var Root2 = RadioGroup; var Item2 = RadioGroupItem; var Indicator = RadioGroupIndicator; export { Indicator, Item2 as Item, RadioGroup, RadioGroupIndicator, RadioGroupItem, Root2 as Root, createRadioGroupScope }; //# sourceMappingURL=index.mjs.map