| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303 |
- "use client";
- // src/radio-group.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";
- // 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(
- 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 = 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 BUBBLE_INPUT_NAME = "RadioBubbleInput";
- var RadioBubbleInput = React.forwardRef(
- ({
- __scopeRadio,
- 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(
- 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";
- }
- // src/radio-group.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 ?? null,
- onChange: onValueChange,
- caller: RADIO_GROUP_NAME
- });
- 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
|