"use client"; import { Presence } from "./chunk-3Q7Z2X7T.js"; import { createCollection, useDirection, usePrevious, useSize } from "./chunk-5BI4FO63.js"; import { Primitive, composeEventHandlers, createContextScope, useCallbackRef, useControllableState, useId } from "./chunk-2ZZW3GAI.js"; import { useComposedRefs } from "./chunk-2VUH7NEY.js"; import "./chunk-YF4B4G2L.js"; import { require_jsx_runtime } from "./chunk-2YVA4HRZ.js"; import { require_react } from "./chunk-WUR7D6NS.js"; import { __toESM } from "./chunk-G3PMV62Z.js"; // node_modules/@radix-ui/react-radio-group/dist/index.mjs var React2 = __toESM(require_react(), 1); // node_modules/@radix-ui/react-roving-focus/dist/index.mjs var React = __toESM(require_react(), 1); var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus"; var EVENT_OPTIONS = { bubbles: false, cancelable: true }; var GROUP_NAME = "RovingFocusGroup"; var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME); var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope( GROUP_NAME, [createCollectionScope] ); var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME); var RovingFocusGroup = React.forwardRef( (props, forwardedRef) => { return (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: (0, import_jsx_runtime.jsx)(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) }); } ); RovingFocusGroup.displayName = GROUP_NAME; var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => { const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, preventScrollOnEntryFocus = false, ...groupProps } = props; const ref = React.useRef(null); const composedRefs = useComposedRefs(forwardedRef, ref); const direction = useDirection(dir); const [currentTabStopId, setCurrentTabStopId] = useControllableState({ prop: currentTabStopIdProp, defaultProp: defaultCurrentTabStopId ?? null, onChange: onCurrentTabStopIdChange, caller: GROUP_NAME }); const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false); const handleEntryFocus = useCallbackRef(onEntryFocus); const getItems = useCollection(__scopeRovingFocusGroup); const isClickFocusRef = React.useRef(false); const [focusableItemsCount, setFocusableItemsCount] = React.useState(0); React.useEffect(() => { const node = ref.current; if (node) { node.addEventListener(ENTRY_FOCUS, handleEntryFocus); return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus); } }, [handleEntryFocus]); return (0, import_jsx_runtime.jsx)( RovingFocusProvider, { scope: __scopeRovingFocusGroup, orientation, dir: direction, loop, currentTabStopId, onItemFocus: React.useCallback( (tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId] ), onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []), onFocusableItemAdd: React.useCallback( () => setFocusableItemsCount((prevCount) => prevCount + 1), [] ), onFocusableItemRemove: React.useCallback( () => setFocusableItemsCount((prevCount) => prevCount - 1), [] ), children: (0, import_jsx_runtime.jsx)( Primitive.div, { tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0, "data-orientation": orientation, ...groupProps, ref: composedRefs, style: { outline: "none", ...props.style }, onMouseDown: composeEventHandlers(props.onMouseDown, () => { isClickFocusRef.current = true; }), onFocus: composeEventHandlers(props.onFocus, (event) => { const isKeyboardFocus = !isClickFocusRef.current; if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) { const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS); event.currentTarget.dispatchEvent(entryFocusEvent); if (!entryFocusEvent.defaultPrevented) { const items = getItems().filter((item) => item.focusable); const activeItem = items.find((item) => item.active); const currentItem = items.find((item) => item.id === currentTabStopId); const candidateItems = [activeItem, currentItem, ...items].filter( Boolean ); const candidateNodes = candidateItems.map((item) => item.ref.current); focusFirst(candidateNodes, preventScrollOnEntryFocus); } } isClickFocusRef.current = false; }), onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false)) } ) } ); }); var ITEM_NAME = "RovingFocusGroupItem"; var RovingFocusGroupItem = React.forwardRef( (props, forwardedRef) => { const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, children, ...itemProps } = props; const autoId = useId(); const id = tabStopId || autoId; const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup); const isCurrentTabStop = context.currentTabStopId === id; const getItems = useCollection(__scopeRovingFocusGroup); const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context; React.useEffect(() => { if (focusable) { onFocusableItemAdd(); return () => onFocusableItemRemove(); } }, [focusable, onFocusableItemAdd, onFocusableItemRemove]); return (0, import_jsx_runtime.jsx)( Collection.ItemSlot, { scope: __scopeRovingFocusGroup, id, focusable, active, children: (0, import_jsx_runtime.jsx)( Primitive.span, { tabIndex: isCurrentTabStop ? 0 : -1, "data-orientation": context.orientation, ...itemProps, ref: forwardedRef, onMouseDown: composeEventHandlers(props.onMouseDown, (event) => { if (!focusable) event.preventDefault(); else context.onItemFocus(id); }), onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)), onKeyDown: composeEventHandlers(props.onKeyDown, (event) => { if (event.key === "Tab" && event.shiftKey) { context.onItemShiftTab(); return; } if (event.target !== event.currentTarget) return; const focusIntent = getFocusIntent(event, context.orientation, context.dir); if (focusIntent !== void 0) { if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return; event.preventDefault(); const items = getItems().filter((item) => item.focusable); let candidateNodes = items.map((item) => item.ref.current); if (focusIntent === "last") candidateNodes.reverse(); else if (focusIntent === "prev" || focusIntent === "next") { if (focusIntent === "prev") candidateNodes.reverse(); const currentIndex = candidateNodes.indexOf(event.currentTarget); candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1); } setTimeout(() => focusFirst(candidateNodes)); } }), children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children } ) } ); } ); RovingFocusGroupItem.displayName = ITEM_NAME; var MAP_KEY_TO_FOCUS_INTENT = { ArrowLeft: "prev", ArrowUp: "prev", ArrowRight: "next", ArrowDown: "next", PageUp: "first", Home: "first", PageDown: "last", End: "last" }; function getDirectionAwareKey(key, dir) { if (dir !== "rtl") return key; return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key; } function getFocusIntent(event, orientation, dir) { const key = getDirectionAwareKey(event.key, dir); if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0; if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0; return MAP_KEY_TO_FOCUS_INTENT[key]; } function focusFirst(candidates, preventScroll = false) { const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement; for (const candidate of candidates) { if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return; candidate.focus({ preventScroll }); if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return; } } function wrapArray(array, startIndex) { return array.map((_, index) => array[(startIndex + index) % array.length]); } var Root = RovingFocusGroup; var Item = RovingFocusGroupItem; // node_modules/@radix-ui/react-radio-group/dist/index.mjs var React3 = __toESM(require_react(), 1); var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1); var RADIO_NAME = "Radio"; var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME); var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME); var Radio = React3.forwardRef( (props, forwardedRef) => { const { __scopeRadio, name, checked = false, required, disabled, value = "on", onCheck, form, ...radioProps } = props; const [button, setButton] = React3.useState(null); const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node)); const hasConsumerStoppedPropagationRef = React3.useRef(false); const isFormControl = button ? form || !!button.closest("form") : true; return (0, import_jsx_runtime2.jsxs)(RadioProvider, { scope: __scopeRadio, checked, disabled, children: [ (0, import_jsx_runtime2.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 && (0, import_jsx_runtime2.jsx)( RadioBubbleInput, { 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 = React3.forwardRef( (props, forwardedRef) => { const { __scopeRadio, forceMount, ...indicatorProps } = props; const context = useRadioContext(INDICATOR_NAME, __scopeRadio); return (0, import_jsx_runtime2.jsx)(Presence, { present: forceMount || context.checked, children: (0, import_jsx_runtime2.jsx)( Primitive.span, { "data-state": getState(context.checked), "data-disabled": context.disabled ? "" : void 0, ...indicatorProps, ref: forwardedRef } ) }); } ); RadioIndicator.displayName = INDICATOR_NAME; var BUBBLE_INPUT_NAME = "RadioBubbleInput"; var RadioBubbleInput = React3.forwardRef( ({ __scopeRadio, control, checked, bubbles = true, ...props }, forwardedRef) => { const ref = React3.useRef(null); const composedRefs = useComposedRefs(ref, forwardedRef); const prevChecked = usePrevious(checked); const controlSize = useSize(control); React3.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 (0, import_jsx_runtime2.jsx)( Primitive.input, { type: "radio", "aria-hidden": true, defaultChecked: checked, ...props, tabIndex: -1, ref: composedRefs, style: { ...props.style, ...controlSize, position: "absolute", pointerEvents: "none", opacity: 0, margin: 0 } } ); } ); RadioBubbleInput.displayName = BUBBLE_INPUT_NAME; function getState(checked) { return checked ? "checked" : "unchecked"; } var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]; var RADIO_GROUP_NAME = "RadioGroup"; var [createRadioGroupContext, createRadioGroupScope] = createContextScope(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 ?? null, onChange: onValueChange, caller: RADIO_GROUP_NAME }); return (0, import_jsx_runtime3.jsx)( RadioGroupProvider, { scope: __scopeRadioGroup, name, required, disabled, value, onValueChange: setValue, children: (0, import_jsx_runtime3.jsx)( Root, { asChild: true, ...rovingFocusGroupScope, orientation, dir: direction, loop, children: (0, import_jsx_runtime3.jsx)( Primitive.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_NAME2 = "RadioGroupItem"; var RadioGroupItem = React2.forwardRef( (props, forwardedRef) => { const { __scopeRadioGroup, disabled, ...itemProps } = props; const context = useRadioGroupContext(ITEM_NAME2, __scopeRadioGroup); const isDisabled = context.disabled || disabled; const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup); const radioScope = useRadioScope(__scopeRadioGroup); const ref = React2.useRef(null); const composedRefs = useComposedRefs(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 (0, import_jsx_runtime3.jsx)( Item, { asChild: true, ...rovingFocusGroupScope, focusable: !isDisabled, active: checked, children: (0, import_jsx_runtime3.jsx)( Radio, { disabled: isDisabled, required: context.required, checked, ...radioScope, ...itemProps, name: context.name, ref: composedRefs, onCheck: () => context.onValueChange(itemProps.value), onKeyDown: composeEventHandlers((event) => { if (event.key === "Enter") event.preventDefault(); }), onFocus: composeEventHandlers(itemProps.onFocus, () => { if (isArrowKeyPressedRef.current) ref.current?.click(); }) } ) } ); } ); RadioGroupItem.displayName = ITEM_NAME2; var INDICATOR_NAME2 = "RadioGroupIndicator"; var RadioGroupIndicator = React2.forwardRef( (props, forwardedRef) => { const { __scopeRadioGroup, ...indicatorProps } = props; const radioScope = useRadioScope(__scopeRadioGroup); return (0, import_jsx_runtime3.jsx)(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=@radix-ui_react-radio-group.js.map