@tamagui/radio-group 1.96.0 → 1.97.0

package/dist/esm/RadioGroup.mjs

@@ -1,59 +1,7 @@
-import { useComposedRefs } from "@tamagui/compose-refs";
-import { isWeb } from "@tamagui/constants";
 import { getVariableValue, styled } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
 import { getSize } from "@tamagui/get-token";
-import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
-import { useLabelContext } from "@tamagui/label";
-import { RovingFocusGroup } from "@tamagui/roving-focus";
 import { ThemeableStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import { usePrevious } from "@tamagui/use-previous";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const RADIO_GROUP_NAME = "RadioGroup",
-  ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"],
-  [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME),
-  [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME),
-  getState = checked => checked ? "checked" : "unchecked",
-  RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator",
-  RadioIndicatorFrame = styled(ThemeableStack, {
-    name: RADIO_GROUP_INDICATOR_NAME,
-    variants: {
-      unstyled: {
-        false: {
-          width: "33%",
-          height: "33%",
-          borderRadius: 1e3,
-          backgroundColor: "$color",
-          pressTheme: !0
-        }
-      }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
-    }
-  }),
-  RadioIndicator = RadioIndicatorFrame.extractable(React.forwardRef((props, forwardedRef) => {
-    const {
-        __scopeRadioGroupItem,
-        forceMount,
-        disabled,
-        ...indicatorProps
-      } = props,
-      {
-        checked
-      } = useRadioGroupItemContext(RADIO_GROUP_INDICATOR_NAME, __scopeRadioGroupItem);
-    return forceMount || checked ? /* @__PURE__ */jsx(RadioIndicatorFrame, {
-      "data-state": getState(checked),
-      "data-disabled": disabled ? "" : void 0,
-      ...indicatorProps,
-      ref: forwardedRef
-    }) : null;
-  }));
-RadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME;
 const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
-  [RadioGroupItemProvider, useRadioGroupItemContext] = createRadioGroupContext(RADIO_GROUP_NAME),
   RadioGroupItemFrame = styled(ThemeableStack, {
     name: RADIO_GROUP_ITEM_NAME,
     tag: "button",
@@ -121,147 +69,25 @@ const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
       unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
   }),
-  RadioGroupItem = RadioGroupItemFrame.extractable(React.forwardRef((props, forwardedRef) => {
-    const {
-        __scopeRadioGroup,
-        value,
-        labelledBy: ariaLabelledby,
-        disabled: itemDisabled,
-        ...itemProps
-      } = props,
-      {
-        value: groupValue,
-        disabled,
-        required,
-        onChange,
-        name,
-        native,
-        accentColor
-      } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup),
-      [button, setButton] = React.useState(null),
-      hasConsumerStoppedPropagationRef = React.useRef(!1),
-      ref = React.useRef(null),
-      composedRefs = useComposedRefs(forwardedRef, node => setButton(node), ref),
-      isArrowKeyPressedRef = React.useRef(!1),
-      isFormControl = isWeb ? button ? !!button.closest("form") : !0 : !1,
-      checked = groupValue === value,
-      labelId = useLabelContext(button),
-      labelledBy = ariaLabelledby || labelId;
-    React.useEffect(() => {
-      if (isWeb) {
-        const handleKeyDown = event => {
-            ARROW_KEYS.includes(event.key) && (isArrowKeyPressedRef.current = !0);
-          },
-          handleKeyUp = () => {
-            isArrowKeyPressedRef.current = !1;
-          };
-        return document.addEventListener("keydown", handleKeyDown), document.addEventListener("keyup", handleKeyUp), () => {
-          document.removeEventListener("keydown", handleKeyDown), document.removeEventListener("keyup", handleKeyUp);
-        };
-      }
-    }, []);
-    const isDisabled = disabled || itemDisabled;
-    return /* @__PURE__ */jsx(RadioGroupItemProvider, {
-      checked,
-      scope: __scopeRadioGroup,
-      children: isWeb && native ? /* @__PURE__ */jsx(BubbleInput, {
-        control: button,
-        bubbles: !hasConsumerStoppedPropagationRef.current,
-        name,
-        value,
-        checked,
-        required,
-        disabled: isDisabled,
-        id: props.id,
-        accentColor
-      }) : /* @__PURE__ */jsxs(Fragment, {
-        children: [/* @__PURE__ */jsx(RovingFocusGroup.Item, {
-          __scopeRovingFocusGroup: RADIO_GROUP_NAME,
-          asChild: "except-style",
-          focusable: !isDisabled,
-          active: checked,
-          children: /* @__PURE__ */jsx(RadioGroupItemFrame, {
-            "data-state": getState(checked),
-            "data-disabled": isDisabled ? "" : void 0,
-            role: "radio",
-            "aria-labelledby": labelledBy,
-            "aria-checked": checked,
-            "aria-required": required,
-            disabled: isDisabled,
-            ref: composedRefs,
-            ...(isWeb && {
-              type: "button",
-              value
-            }),
-            ...itemProps,
-            onPress: composeEventHandlers(props.onPress, event => {
-              checked || onChange?.(value), isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
-            }),
-            ...(isWeb && {
-              onKeyDown: composeEventHandlers(props.onKeyDown, event => {
-                event.key === "Enter" && event.preventDefault();
-              }),
-              onFocus: composeEventHandlers(itemProps.onFocus, () => {
-                isArrowKeyPressedRef.current && ref.current?.click();
-              })
-            })
-          })
-        }), isFormControl && /* @__PURE__ */jsx(BubbleInput, {
-          isHidden: !0,
-          control: button,
-          bubbles: !hasConsumerStoppedPropagationRef.current,
-          name,
-          value,
-          checked,
-          required,
-          disabled: isDisabled
-        })]
-      })
-    });
-  })),
-  BubbleInput = props => {
-    const {
-        checked,
-        bubbles = !0,
-        control,
-        isHidden,
-        accentColor,
-        ...inputProps
-      } = props,
-      ref = React.useRef(null),
-      prevChecked = usePrevious(checked);
-    return React.useEffect(() => {
-      const input = ref.current,
-        inputProto = window.HTMLInputElement.prototype,
-        setChecked = Object.getOwnPropertyDescriptor(inputProto, "checked").set;
-      if (prevChecked !== checked && setChecked) {
-        const event = new Event("click", {
-          bubbles
-        });
-        setChecked.call(input, checked), input.dispatchEvent(event);
-      }
-    }, [prevChecked, checked, bubbles]), /* @__PURE__ */jsx("input", {
-      type: "radio",
-      defaultChecked: checked,
-      ...inputProps,
-      tabIndex: -1,
-      ref,
-      "aria-hidden": isHidden,
-      style: {
-        ...(isHidden ? {
-          // ...controlSize,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0
-        } : {
-          appearance: "auto",
-          accentColor
-        }),
-        ...props.style
+  RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator",
+  RadioGroupIndicatorFrame = styled(ThemeableStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    variants: {
+      unstyled: {
+        false: {
+          width: "33%",
+          height: "33%",
+          borderRadius: 1e3,
+          backgroundColor: "$color",
+          pressTheme: !0
+        }
       }
-    });
-  },
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  RADIO_GROUP_NAME = "RadioGroup",
   RadioGroupFrame = styled(ThemeableStack, {
     name: RADIO_GROUP_NAME,
     variants: {
@@ -276,52 +102,5 @@ const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
         }
       }
     }
-  }),
-  RadioGroup = withStaticProperties(RadioGroupFrame.extractable(React.forwardRef((props, forwardedRef) => {
-    const {
-        __scopeRadioGroup,
-        value: valueProp,
-        defaultValue,
-        onValueChange,
-        disabled = !1,
-        required = !1,
-        name,
-        orientation,
-        native,
-        accentColor,
-        ...radioGroupProps
-      } = props,
-      [value, setValue] = useControllableState({
-        prop: valueProp,
-        defaultProp: defaultValue,
-        onChange: onValueChange
-      });
-    return /* @__PURE__ */jsx(RadioGroupProvider, {
-      scope: __scopeRadioGroup,
-      value,
-      required,
-      onChange: setValue,
-      disabled,
-      name,
-      native,
-      accentColor,
-      children: /* @__PURE__ */jsx(RovingFocusGroup, {
-        __scopeRovingFocusGroup: RADIO_GROUP_NAME,
-        orientation,
-        loop: !0,
-        children: /* @__PURE__ */jsx(RadioGroupFrame, {
-          role: "radiogroup",
-          "aria-orientation": orientation,
-          ref: forwardedRef,
-          orientation,
-          "data-disabled": disabled ? "" : void 0,
-          ...radioGroupProps
-        })
-      })
-    });
-  })), {
-    Indicator: RadioIndicator,
-    Item: RadioGroupItem
   });
-RadioGroup.displayName = RADIO_GROUP_NAME;
-export { RadioGroup, createRadioGroupScope };
+export { RadioGroupFrame, RadioGroupIndicatorFrame, RadioGroupItemFrame };

package/dist/esm/RadioGroup.native.js

@@ -1,155 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useComposedRefs } from "@tamagui/compose-refs";
-import { isWeb } from "@tamagui/constants";
 import { getVariableValue, styled } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
-import { registerFocusable } from "@tamagui/focusable";
 import { getSize } from "@tamagui/get-token";
-import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
-import { useLabelContext } from "@tamagui/label";
-import { RovingFocusGroup } from "@tamagui/roving-focus";
 import { ThemeableStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import { usePrevious } from "@tamagui/use-previous";
-import * as React from "react";
-function _array_like_to_array(arr, len) {
-  (len == null || len > arr.length) && (len = arr.length);
-  for (var i = 0, arr2 = new Array(len); i < len; i++)
-    arr2[i] = arr[i];
-  return arr2;
-}
-function _array_with_holes(arr) {
-  if (Array.isArray(arr))
-    return arr;
-}
-function _define_property(obj, key, value) {
-  return key in obj ? Object.defineProperty(obj, key, {
-    value,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : obj[key] = value, obj;
-}
-function _iterable_to_array_limit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i != null) {
-    var _arr = [], _n = !0, _d = !1, _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
-        ;
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        !_n && _i.return != null && _i.return();
-      } finally {
-        if (_d)
-          throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-function _non_iterable_rest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
-    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-    }))), ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-  }), target;
-}
-function _object_without_properties(source, excluded) {
-  if (source == null)
-    return {};
-  var target = _object_without_properties_loose(source, excluded), key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++)
-      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-  }
-  return target;
-}
-function _object_without_properties_loose(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {}, sourceKeys = Object.keys(source), key, i;
-  for (i = 0; i < sourceKeys.length; i++)
-    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-  return target;
-}
-function _sliced_to_array(arr, i) {
-  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-  if (o) {
-    if (typeof o == "string")
-      return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set")
-      return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-      return _array_like_to_array(o, minLen);
-  }
-}
-var RADIO_GROUP_NAME = "RadioGroup", ARROW_KEYS = [
-  "ArrowUp",
-  "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight"
-], _createContextScope = _sliced_to_array(createContextScope(RADIO_GROUP_NAME), 2), createRadioGroupContext = _createContextScope[0], createRadioGroupScope = _createContextScope[1], _createRadioGroupContext = _sliced_to_array(createRadioGroupContext(RADIO_GROUP_NAME), 2), RadioGroupProvider = _createRadioGroupContext[0], useRadioGroupContext = _createRadioGroupContext[1], getState = function(checked) {
-  return checked ? "checked" : "unchecked";
-}, RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator", RadioIndicatorFrame = styled(ThemeableStack, {
-  name: RADIO_GROUP_INDICATOR_NAME,
-  variants: {
-    unstyled: {
-      false: {
-        width: "33%",
-        height: "33%",
-        borderRadius: 1e3,
-        backgroundColor: "$color",
-        pressTheme: !0
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}), RadioIndicator = RadioIndicatorFrame.extractable(/* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var __scopeRadioGroupItem = props.__scopeRadioGroupItem, forceMount = props.forceMount, disabled = props.disabled, indicatorProps = _object_without_properties(props, [
-    "__scopeRadioGroupItem",
-    "forceMount",
-    "disabled"
-  ]), checked = useRadioGroupItemContext(RADIO_GROUP_INDICATOR_NAME, __scopeRadioGroupItem).checked;
-  return forceMount || checked ? /* @__PURE__ */ _jsx(RadioIndicatorFrame, _object_spread_props(_object_spread({
-    "data-state": getState(checked),
-    "data-disabled": disabled ? "" : void 0
-  }, indicatorProps), {
-    ref: forwardedRef
-  })) : null;
-}));
-RadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME;
-var RADIO_GROUP_ITEM_NAME = "RadioGroupItem", _createRadioGroupContext1 = _sliced_to_array(createRadioGroupContext(RADIO_GROUP_NAME), 2), RadioGroupItemProvider = _createRadioGroupContext1[0], useRadioGroupItemContext = _createRadioGroupContext1[1], RadioGroupItemFrame = styled(ThemeableStack, {
+var RADIO_GROUP_ITEM_NAME = "RadioGroupItem", RadioGroupItemFrame = styled(ThemeableStack, {
   name: RADIO_GROUP_ITEM_NAME,
   tag: "button",
   variants: {
@@ -213,147 +65,23 @@ var RADIO_GROUP_ITEM_NAME = "RadioGroupItem", _createRadioGroupContext1 = _slice
   defaultVariants: {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
-}), RadioGroupItem = RadioGroupItemFrame.extractable(/* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var __scopeRadioGroup = props.__scopeRadioGroup, value = props.value, ariaLabelledby = props.labelledBy, itemDisabled = props.disabled, itemProps = _object_without_properties(props, [
-    "__scopeRadioGroup",
-    "value",
-    "labelledBy",
-    "disabled"
-  ]), _useRadioGroupContext = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup), groupValue = _useRadioGroupContext.value, disabled = _useRadioGroupContext.disabled, required = _useRadioGroupContext.required, onChange = _useRadioGroupContext.onChange, name = _useRadioGroupContext.name, native = _useRadioGroupContext.native, accentColor = _useRadioGroupContext.accentColor, _React_useState = _sliced_to_array(React.useState(null), 2), button = _React_useState[0], setButton = _React_useState[1], hasConsumerStoppedPropagationRef = React.useRef(!1), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, function(node) {
-    return setButton(node);
-  }, ref), isArrowKeyPressedRef = React.useRef(!1), isFormControl = isWeb ? button ? !!button.closest("form") : !0 : !1, checked = groupValue === value, labelId = useLabelContext(button), labelledBy = ariaLabelledby || labelId;
-  React.useEffect(function() {
-    if (isWeb) {
-      var handleKeyDown = function(event) {
-        ARROW_KEYS.includes(event.key) && (isArrowKeyPressedRef.current = !0);
-      }, handleKeyUp = function() {
-        isArrowKeyPressedRef.current = !1;
-      };
-      return document.addEventListener("keydown", handleKeyDown), document.addEventListener("keyup", handleKeyUp), function() {
-        document.removeEventListener("keydown", handleKeyDown), document.removeEventListener("keyup", handleKeyUp);
-      };
-    }
-  }, []), React.useEffect(function() {
-    if (props.id && !disabled)
-      return registerFocusable(props.id, {
-        focusAndSelect: function() {
-          onChange == null || onChange(value);
-        },
-        focus: function() {
-        }
-      });
-  }, [
-    props.id,
-    value,
-    disabled
-  ]);
-  var isDisabled = disabled || itemDisabled;
-  return /* @__PURE__ */ _jsx(RadioGroupItemProvider, {
-    checked,
-    scope: __scopeRadioGroup,
-    children: isWeb && native ? /* @__PURE__ */ _jsx(BubbleInput, {
-      control: button,
-      bubbles: !hasConsumerStoppedPropagationRef.current,
-      name,
-      value,
-      checked,
-      required,
-      disabled: isDisabled,
-      id: props.id,
-      accentColor
-    }) : /* @__PURE__ */ _jsxs(_Fragment, {
-      children: [
-        /* @__PURE__ */ _jsx(RovingFocusGroup.Item, {
-          __scopeRovingFocusGroup: RADIO_GROUP_NAME,
-          asChild: "except-style",
-          focusable: !isDisabled,
-          active: checked,
-          children: /* @__PURE__ */ _jsx(RadioGroupItemFrame, _object_spread(_object_spread_props(_object_spread(
-            {
-              // theme={checked ? 'active' : undefined}
-              "data-state": getState(checked),
-              "data-disabled": isDisabled ? "" : void 0,
-              role: "radio",
-              "aria-labelledby": labelledBy,
-              "aria-checked": checked,
-              "aria-required": required,
-              disabled: isDisabled,
-              ref: composedRefs
-            },
-            isWeb && {
-              type: "button",
-              value
-            },
-            // allow them to override all but the handlers that already compose:
-            itemProps
-          ), {
-            onPress: composeEventHandlers(props.onPress, function(event) {
-              checked || onChange == null || onChange(value), isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
-            })
-          }), isWeb && {
-            onKeyDown: composeEventHandlers(props.onKeyDown, function(event) {
-              event.key === "Enter" && event.preventDefault();
-            }),
-            onFocus: composeEventHandlers(itemProps.onFocus, function() {
-              if (isArrowKeyPressedRef.current) {
-                var _ref_current;
-                (_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.click();
-              }
-            })
-          }))
-        }),
-        isFormControl && /* @__PURE__ */ _jsx(BubbleInput, {
-          isHidden: !0,
-          control: button,
-          bubbles: !hasConsumerStoppedPropagationRef.current,
-          name,
-          value,
-          checked,
-          required,
-          disabled: isDisabled
-        })
-      ]
-    })
-  });
-})), BubbleInput = function(props) {
-  var checked = props.checked, _props_bubbles = props.bubbles, bubbles = _props_bubbles === void 0 ? !0 : _props_bubbles, control = props.control, isHidden = props.isHidden, accentColor = props.accentColor, inputProps = _object_without_properties(props, [
-    "checked",
-    "bubbles",
-    "control",
-    "isHidden",
-    "accentColor"
-  ]), ref = React.useRef(null), prevChecked = usePrevious(checked);
-  return React.useEffect(function() {
-    var input = ref.current, inputProto = window.HTMLInputElement.prototype, descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked"), setChecked = descriptor.set;
-    if (prevChecked !== checked && setChecked) {
-      var event = new Event("click", {
-        bubbles
-      });
-      setChecked.call(input, checked), input.dispatchEvent(event);
+}), RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator", RadioGroupIndicatorFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_INDICATOR_NAME,
+  variants: {
+    unstyled: {
+      false: {
+        width: "33%",
+        height: "33%",
+        borderRadius: 1e3,
+        backgroundColor: "$color",
+        pressTheme: !0
+      }
     }
-  }, [
-    prevChecked,
-    checked,
-    bubbles
-  ]), /* @__PURE__ */ _jsx("input", _object_spread_props(_object_spread({
-    type: "radio",
-    defaultChecked: checked
-  }, inputProps), {
-    tabIndex: -1,
-    ref,
-    "aria-hidden": isHidden,
-    style: _object_spread({}, isHidden ? {
-      // ...controlSize,
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0,
-      margin: 0
-    } : {
-      appearance: "auto",
-      accentColor
-    }, props.style)
-  }));
-}, RadioGroupFrame = styled(ThemeableStack, {
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+}), RADIO_GROUP_NAME = "RadioGroup", RadioGroupFrame = styled(ThemeableStack, {
   name: RADIO_GROUP_NAME,
   variants: {
     orientation: {
@@ -367,52 +95,10 @@ var RADIO_GROUP_ITEM_NAME = "RadioGroupItem", _createRadioGroupContext1 = _slice
       }
     }
   }
-}), RadioGroup = withStaticProperties(RadioGroupFrame.extractable(/* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var __scopeRadioGroup = props.__scopeRadioGroup, valueProp = props.value, defaultValue = props.defaultValue, onValueChange = props.onValueChange, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? !1 : _props_disabled, _props_required = props.required, required = _props_required === void 0 ? !1 : _props_required, name = props.name, orientation = props.orientation, native = props.native, accentColor = props.accentColor, radioGroupProps = _object_without_properties(props, [
-    "__scopeRadioGroup",
-    "value",
-    "defaultValue",
-    "onValueChange",
-    "disabled",
-    "required",
-    "name",
-    "orientation",
-    "native",
-    "accentColor"
-  ]), _useControllableState = _sliced_to_array(useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue,
-    onChange: onValueChange
-  }), 2), value = _useControllableState[0], setValue = _useControllableState[1];
-  return /* @__PURE__ */ _jsx(RadioGroupProvider, {
-    scope: __scopeRadioGroup,
-    value,
-    required,
-    onChange: setValue,
-    disabled,
-    name,
-    native,
-    accentColor,
-    children: /* @__PURE__ */ _jsx(RovingFocusGroup, {
-      __scopeRovingFocusGroup: RADIO_GROUP_NAME,
-      orientation,
-      loop: !0,
-      children: /* @__PURE__ */ _jsx(RadioGroupFrame, _object_spread({
-        role: "radiogroup",
-        "aria-orientation": orientation,
-        ref: forwardedRef,
-        orientation,
-        "data-disabled": disabled ? "" : void 0
-      }, radioGroupProps))
-    })
-  });
-})), {
-  Indicator: RadioIndicator,
-  Item: RadioGroupItem
 });
-RadioGroup.displayName = RADIO_GROUP_NAME;
 export {
-  RadioGroup,
-  createRadioGroupScope
+  RadioGroupFrame,
+  RadioGroupIndicatorFrame,
+  RadioGroupItemFrame
 };
 //# sourceMappingURL=RadioGroup.js.map