"use client"; import { createCollection, useDirection, usePrevious, useSize } from "./chunk-MN52RY2D.js"; import { Presence, composeEventHandlers, createContextScope, useCallbackRef, useControllableState, useId } from "./chunk-TU5XDRIH.js"; import { Primitive } from "./chunk-QPQFA2HW.js"; import { useComposedRefs } from "./chunk-7O5GCKER.js"; import "./chunk-UEHR66ST.js"; import { require_jsx_runtime } from "./chunk-LPULNKJF.js"; import { require_react } from "./chunk-42LCURWG.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 [RadioProviderImpl, useRadioContext] = createRadioContext(RADIO_NAME); function RadioProvider(props) { const { __scopeRadio, checked = false, children, disabled, form, name, onCheck, required, value = "on", // @ts-expect-error internal_do_not_use_render } = props; const [control, setControl] = React3.useState(null); const [bubbleInput, setBubbleInput] = React3.useState(null); const hasConsumerStoppedPropagationRef = React3.useRef(false); const isFormControl = control ? !!form || !!control.closest("form") : ( // We set this to true by default so that events bubble to forms without JS (SSR) true ); const context = { checked, disabled, required, name, form, value, control, setControl, hasConsumerStoppedPropagationRef, isFormControl, bubbleInput, setBubbleInput, onCheck: () => onCheck?.() }; return (0, import_jsx_runtime2.jsx)(RadioProviderImpl, { scope: __scopeRadio, ...context, children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children }); } var TRIGGER_NAME = "RadioTrigger"; var RadioTrigger = React3.forwardRef( ({ __scopeRadio, onClick, ...radioProps }, forwardedRef) => { const { checked, disabled, value, setControl, onCheck, hasConsumerStoppedPropagationRef, isFormControl, bubbleInput } = useRadioContext(TRIGGER_NAME, __scopeRadio); const composedRefs = useComposedRefs(forwardedRef, setControl); return (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(onClick, (event) => { if (!checked) onCheck(); if (bubbleInput && isFormControl) { hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(); if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation(); } }) } ); } ); RadioTrigger.displayName = TRIGGER_NAME; var Radio = React3.forwardRef( (props, forwardedRef) => { const { __scopeRadio, name, checked, required, disabled, value, onCheck, form, ...radioProps } = props; return (0, import_jsx_runtime2.jsx)( RadioProvider, { __scopeRadio, checked, disabled, required, onCheck, name, form, value, internal_do_not_use_render: ({ isFormControl }) => (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [ (0, import_jsx_runtime2.jsx)( RadioTrigger, { ...radioProps, ref: forwardedRef, __scopeRadio } ), isFormControl && (0, import_jsx_runtime2.jsx)( RadioBubbleInput, { __scopeRadio } ) ] }) } ); } ); 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, ...props }, forwardedRef) => { const { control, checked, required, disabled, name, value, form, bubbleInput, setBubbleInput, hasConsumerStoppedPropagationRef } = useRadioContext(BUBBLE_INPUT_NAME, __scopeRadio); const composedRefs = useComposedRefs(forwardedRef, setBubbleInput); const prevChecked = usePrevious(checked); const controlSize = useSize(control); React3.useEffect(() => { const input = bubbleInput; if (!input) return; const inputProto = window.HTMLInputElement.prototype; const descriptor = Object.getOwnPropertyDescriptor( inputProto, "checked" ); const setChecked = descriptor.set; const bubbles = !hasConsumerStoppedPropagationRef.current; if (prevChecked !== checked && setChecked) { const event = new Event("click", { bubbles }); setChecked.call(input, checked); input.dispatchEvent(event); } }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]); const defaultCheckedRef = React3.useRef(checked); return (0, import_jsx_runtime2.jsx)( Primitive.input, { type: "radio", "aria-hidden": true, defaultChecked: defaultCheckedRef.current, required, disabled, name, value, form, ...props, tabIndex: -1, ref: composedRefs, style: { ...props.style, ...controlSize, position: "absolute", pointerEvents: "none", opacity: 0, margin: 0, // We transform because the input is absolutely positioned but we have // rendered it **after** the button. This pulls it back to sit on top // of the button. transform: "translateX(-100%)" } } ); } ); RadioBubbleInput.displayName = BUBBLE_INPUT_NAME; function isFunction(value) { return typeof value === "function"; } 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 ITEM_PROVIDER_NAME = "RadioGroupItemProvider"; var ITEM_TRIGGER_NAME = "RadioGroupItemTrigger"; var ITEM_BUBBLE_INPUT_NAME = "RadioGroupItemBubbleInput"; function RadioGroupItemProvider(props) { const { __scopeRadioGroup, value, disabled, children, // @ts-expect-error internal_do_not_use_render } = props; const context = useRadioGroupContext(ITEM_PROVIDER_NAME, __scopeRadioGroup); const radioScope = useRadioScope(__scopeRadioGroup); const isDisabled = context.disabled || disabled; return (0, import_jsx_runtime3.jsx)( RadioProvider, { ...radioScope, checked: context.value === value, disabled: isDisabled, required: context.required, name: context.name, value, onCheck: () => context.onValueChange(value), internal_do_not_use_render, children } ); } var RadioGroupItemTrigger = React2.forwardRef((props, forwardedRef) => { const { __scopeRadioGroup, ...triggerProps } = props; const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup); const radioScope = useRadioScope(__scopeRadioGroup); const { checked, disabled } = useRadioContext(ITEM_TRIGGER_NAME, radioScope.__scopeRadio); const ref = React2.useRef(null); const composedRefs = useComposedRefs(forwardedRef, ref); 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: !disabled, active: checked, children: (0, import_jsx_runtime3.jsx)( RadioTrigger, { ...radioScope, ...triggerProps, ref: composedRefs, onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => { if (event.key === "Enter") event.preventDefault(); }), onFocus: composeEventHandlers(triggerProps.onFocus, () => { if (isArrowKeyPressedRef.current) { ref.current?.click(); } }) } ) } ); }); RadioGroupItemTrigger.displayName = ITEM_TRIGGER_NAME; var RadioGroupItem = React2.forwardRef( (props, forwardedRef) => { const { __scopeRadioGroup, value, disabled, ...itemProps } = props; return (0, import_jsx_runtime3.jsx)( RadioGroupItemProvider, { __scopeRadioGroup, value, disabled, internal_do_not_use_render: ({ isFormControl }) => (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [ (0, import_jsx_runtime3.jsx)( RadioGroupItemTrigger, { ...itemProps, ref: forwardedRef, __scopeRadioGroup } ), isFormControl && (0, import_jsx_runtime3.jsx)( RadioGroupItemBubbleInput, { __scopeRadioGroup } ) ] }) } ); } ); RadioGroupItem.displayName = ITEM_NAME2; var RadioGroupItemBubbleInput = React2.forwardRef((props, forwardedRef) => { const { __scopeRadioGroup, ...bubbleProps } = props; const radioScope = useRadioScope(__scopeRadioGroup); return (0, import_jsx_runtime3.jsx)(RadioBubbleInput, { ...radioScope, ...bubbleProps, ref: forwardedRef }); }); RadioGroupItemBubbleInput.displayName = ITEM_BUBBLE_INPUT_NAME; 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; export { RadioGroupIndicator as Indicator, RadioGroupItem as Item, RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroup as Root, createRadioGroupScope, RadioGroupItemBubbleInput as unstable_ItemBubbleInput, RadioGroupItemProvider as unstable_ItemProvider, RadioGroupItemTrigger as unstable_ItemTrigger, RadioGroupItemBubbleInput as unstable_RadioGroupItemBubbleInput, RadioGroupItemProvider as unstable_RadioGroupItemProvider, RadioGroupItemTrigger as unstable_RadioGroupItemTrigger }; //# sourceMappingURL=@radix-ui_react-radio-group.js.map