@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/components/radio/radio.tsx

@@ -0,0 +1,217 @@
+import { forwardRef, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { useIsOnSurface } from '../../helpers/external/hooks';
+import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
+import * as RadioPrimitives from '../../primitives/radio';
+import { useRadioGroupItem } from '../radio-group/radio-group.context';
+import {
+  useRadioIndicatorThumbAnimation,
+  useRadioRootAnimation,
+} from './radio.animation';
+import { DEFAULT_HIT_SLOP, DISPLAY_NAME } from './radio.constants';
+import { radioClassNames, radioStyleSheet } from './radio.styles';
+import type {
+  RadioIndicatorProps,
+  RadioIndicatorThumbProps,
+  RadioProps,
+  RadioRenderProps,
+} from './radio.types';
+
+const useRadio = RadioPrimitives.useRadioContext;
+
+const AnimatedRadioIndicator = Animated.createAnimatedComponent(
+  RadioPrimitives.Indicator
+);
+
+// --------------------------------------------------
+
+/**
+ * Radio root component.
+ *
+ * Operates in two modes:
+ * - **Standalone**: Renders a Pressable trigger with `isSelected`/`onSelectedChange`.
+ * - **Inside RadioGroupItem**: Detects parent context automatically, derives state from
+ *   the RadioGroupItem, and pressing selects this item in the group.
+ */
+const RadioRoot = forwardRef<RadioPrimitives.RootRef, RadioProps>(
+  (props, ref) => {
+    const {
+      children,
+      isSelected: isSelectedProp,
+      onSelectedChange: onSelectedChangeProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      variant: variantProp,
+      className,
+      animation,
+      ...restProps
+    } = props;
+
+    // Detect RadioGroupItem context (non-strict: returns undefined outside a group)
+    const radioGroupItemContext = useRadioGroupItem();
+
+    // Merge props with RadioGroupItem context (explicit props take precedence)
+    const isSelected = isSelectedProp ?? radioGroupItemContext?.isSelected;
+    const isDisabled = isDisabledProp ?? radioGroupItemContext?.isDisabled;
+    const isInvalid = isInvalidProp ?? radioGroupItemContext?.isInvalid;
+    const onSelectedChange =
+      onSelectedChangeProp ?? radioGroupItemContext?.onSelectedChange;
+
+    const isOnSurfaceAutoDetected = useIsOnSurface();
+    const finalVariant =
+      variantProp !== undefined
+        ? variantProp
+        : radioGroupItemContext?.variant !== undefined
+          ? radioGroupItemContext.variant
+          : isOnSurfaceAutoDetected
+            ? 'secondary'
+            : 'primary';
+
+    const rootClassName = radioClassNames.root({
+      className,
+    });
+
+    const renderProps: RadioRenderProps = {
+      isSelected: isSelected ?? false,
+      isDisabled: isDisabled ?? false,
+      isInvalid: isInvalid ?? false,
+    };
+
+    const content =
+      typeof children === 'function'
+        ? children(renderProps)
+        : (children ?? <RadioIndicator />);
+
+    const { isAllAnimationsDisabled } = useRadioRootAnimation({
+      animation,
+    });
+
+    const animationSettingsContextValue = useMemo(
+      () => ({
+        isAllAnimationsDisabled,
+      }),
+      [isAllAnimationsDisabled]
+    );
+
+    return (
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <RadioPrimitives.Root
+          ref={ref}
+          variant={finalVariant}
+          className={rootClassName}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          hitSlop={props.hitSlop ?? DEFAULT_HIT_SLOP}
+          {...restProps}
+        >
+          {content}
+        </RadioPrimitives.Root>
+      </AnimationSettingsProvider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const RadioIndicator = forwardRef<Animated.View, RadioIndicatorProps>(
+  (props, ref) => {
+    const { children, className, style, ...restProps } = props;
+
+    const { isSelected, isInvalid, variant } = useRadio();
+
+    const indicatorClassName = radioClassNames.indicator({
+      variant,
+      isSelected,
+      isInvalid,
+      className,
+    });
+
+    return (
+      <AnimatedRadioIndicator
+        ref={ref}
+        className={indicatorClassName}
+        style={[radioStyleSheet.borderCurve, style]}
+        {...restProps}
+      >
+        {children ?? <RadioIndicatorThumb />}
+      </AnimatedRadioIndicator>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const RadioIndicatorThumb = forwardRef<View, RadioIndicatorThumbProps>(
+  (props, ref) => {
+    const {
+      className,
+      style,
+      animation,
+      isAnimatedStyleActive = true,
+      ...restProps
+    } = props;
+
+    const { isSelected } = useRadio();
+
+    const thumbClassName = radioClassNames.indicatorThumb({
+      isSelected,
+      className,
+    });
+
+    const { rContainerStyle } = useRadioIndicatorThumbAnimation({
+      animation,
+      isSelected,
+    });
+
+    const thumbStyle = isAnimatedStyleActive ? [rContainerStyle, style] : style;
+
+    return (
+      <Animated.View
+        ref={ref}
+        className={thumbClassName}
+        style={thumbStyle}
+        {...restProps}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+RadioRoot.displayName = DISPLAY_NAME.RADIO_ROOT;
+RadioIndicator.displayName = DISPLAY_NAME.RADIO_INDICATOR;
+RadioIndicatorThumb.displayName = DISPLAY_NAME.RADIO_INDICATOR_THUMB;
+
+/**
+ * Compound Radio component with sub-components.
+ *
+ * @component Radio - Individual radio option that operates in two modes:
+ * - **Standalone**: Uses `isSelected`/`onSelectedChange` directly.
+ * - **Inside RadioGroupItem**: Automatically detects the parent context, derives
+ *   `isSelected`/`isDisabled`/`isInvalid`/`variant` from it. Pressing selects this
+ *   item in the group via the group's `onValueChange`.
+ *
+ * Renders a default indicator if no children are provided. Supports render function
+ * children to access state (`isSelected`, `isInvalid`, `isDisabled`).
+ *
+ * @component Radio.Indicator - Optional container for the radio circle. Renders default thumb
+ * if no children provided. Manages the visual selection state.
+ *
+ * @component Radio.IndicatorThumb - Optional inner circle that appears when selected. Animates
+ * scale based on selection. Can be replaced with custom content.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/radio
+ */
+const CompoundRadio = Object.assign(RadioRoot, {
+  /** @optional Custom radio indicator container */
+  Indicator: RadioIndicator,
+  /** @optional Custom indicator thumb that appears when selected */
+  IndicatorThumb: RadioIndicatorThumb,
+});
+
+export { useRadio };
+export default CompoundRadio;

package/lib/__templates__/expo/client/heroui/components/radio/radio.types.ts

@@ -0,0 +1,106 @@
+import type { ViewProps } from 'react-native';
+import type { AnimatedProps, WithTimingConfig } from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRootDisableAll,
+  AnimationValue,
+} from '../../helpers/internal/types';
+import type { RootProps as RadioPrimitiveRootProps } from '../../primitives/radio';
+
+/**
+ * Render function props for Radio children
+ */
+export interface RadioRenderProps {
+  /** Whether the radio is selected */
+  isSelected: boolean;
+  /** Whether the radio is disabled */
+  isDisabled: boolean;
+  /** Whether the radio is invalid */
+  isInvalid: boolean;
+}
+
+/**
+ * Props for the Radio root component.
+ *
+ * Works in two modes:
+ * - **Standalone**: Uses `isSelected` / `onSelectedChange` directly.
+ * - **Inside RadioGroup**: Uses `value` prop; `isSelected` is derived from group context.
+ */
+export interface RadioProps extends Omit<RadioPrimitiveRootProps, 'children'> {
+  /** Radio content, or a render function */
+  children?: React.ReactNode | ((props: RadioRenderProps) => React.ReactNode);
+  /** Custom class name */
+  className?: string;
+  /**
+   * Animation configuration for radio
+   * - `"disable-all"`: Disable all animations including children (Indicator, IndicatorThumb)
+   * - `undefined`: Use default animations
+   */
+  animation?: AnimationRootDisableAll;
+}
+
+/**
+ * Props for Radio.Indicator component
+ */
+export interface RadioIndicatorProps extends AnimatedProps<ViewProps> {
+  /** Indicator content */
+  children?: React.ReactNode;
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Animation configuration for RadioIndicatorThumb component
+ */
+export type RadioIndicatorThumbAnimation = Animation<{
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unselected, selected]
+     * @default [1.5, 1]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300, easing: Easing.out(Easing.ease) }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for Radio.IndicatorThumb component
+ */
+export interface RadioIndicatorThumbProps
+  extends Omit<AnimatedProps<ViewProps>, 'children'> {
+  /** Custom class name
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `transform` (specifically `scale`) - Animated for selection transitions (unselected: 1.5, selected: 1)
+   *
+   * To customize this property, use the `animation` prop:
+   * ```tsx
+   * <Radio.IndicatorThumb
+   *   animation={{
+   *     scale: { value: [1.5, 1], timingConfig: { duration: 300, easing: Easing.out(Easing.ease) } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Animation configuration
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: RadioIndicatorThumbAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}

package/lib/__templates__/expo/client/heroui/components/radio-group/index.ts

@@ -0,0 +1,9 @@
+export { default as RadioGroup, useRadioGroup } from './radio-group';
+export { useRadioGroupItem } from './radio-group.context';
+export { radioGroupClassNames } from './radio-group.styles';
+export type {
+  RadioGroupItemContextValue,
+  RadioGroupItemProps,
+  RadioGroupItemRenderProps,
+  RadioGroupProps,
+} from './radio-group.types';

package/lib/__templates__/expo/client/heroui/components/radio-group/radio-group.animation.ts

@@ -0,0 +1,20 @@
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for RadioGroup root component.
+ * Handles cascading animation disabled state to child components.
+ */
+export function useRadioGroupRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/radio-group/radio-group.constants.ts

@@ -0,0 +1,7 @@
+/**
+ * Display names for RadioGroup components
+ */
+export const DISPLAY_NAME = {
+  RADIO_GROUP_ROOT: 'HeroUINative.RadioGroup.Root',
+  RADIO_GROUP_ITEM: 'HeroUINative.RadioGroup.Item',
+} as const;

package/lib/__templates__/expo/client/heroui/components/radio-group/radio-group.context.ts

@@ -0,0 +1,14 @@
+import { createContext } from '../../helpers/internal/utils';
+import type { RadioGroupItemContextValue } from './radio-group.types';
+
+/**
+ * RadioGroupItem context provider and hook
+ * Extracted to separate file to avoid circular dependencies with Label component
+ */
+const [RadioGroupItemProvider, useRadioGroupItem] =
+  createContext<RadioGroupItemContextValue>({
+    name: 'RadioGroupItemContext',
+    strict: false,
+  });
+
+export { RadioGroupItemProvider, useRadioGroupItem };

package/lib/__templates__/expo/client/heroui/components/radio-group/radio-group.md

@@ -0,0 +1,273 @@
+# RadioGroup
+
+A set of radio buttons where only one option can be selected at a time.
+
+## Import
+
+```tsx
+import { RadioGroup } from '@/heroui';
+```
+
+## Anatomy
+
+```tsx
+<RadioGroup>
+  <RadioGroup.Item>
+    <Label>...</Label>
+    <Description>...</Description>
+    <Radio>
+      <Radio.Indicator>
+        <Radio.IndicatorThumb />
+      </Radio.Indicator>
+    </Radio>
+  </RadioGroup.Item>
+  <FieldError>...</FieldError>
+</RadioGroup>
+```
+
+- **RadioGroup**: Container that manages the selection state of radio items. Supports both horizontal and vertical orientations.
+- **RadioGroup.Item**: Individual radio option within a RadioGroup. Must be used inside RadioGroup. Handles selection state and renders a default `<Radio />` indicator when text children are provided. Supports render function children to access state (`isSelected`, `isInvalid`, `isDisabled`).
+- **Label**: Optional clickable text label for the radio option. Linked to the radio for accessibility. Use the [Label](../label/label.md) component directly.
+- **Description**: Optional secondary text below the label. Provides additional context about the radio option. Use the [Description](../description/description.md) component directly.
+- **Radio**: The [Radio](../radio/radio.md) component used inside `RadioGroup.Item` to render the radio indicator. Automatically detects the `RadioGroupItem` context and derives `isSelected`, `isDisabled`, `isInvalid`, and `variant` from it.
+- **Radio.Indicator**: Optional container for the radio circle. Renders default thumb if no children provided. Manages the visual selection state. See [Radio](../radio/radio.md) for full API.
+- **Radio.IndicatorThumb**: Optional inner circle that appears when selected. Animates scale based on selection. Can be replaced with custom content. See [Radio](../radio/radio.md) for full API.
+- **FieldError**: Error message displayed when radio group is invalid. Shown with animation below the radio group content. Use the [FieldError](../field-error/field-error.md) component directly.
+
+## Usage
+
+### Basic Usage
+
+RadioGroup with simple string children automatically renders title and indicator.
+
+```tsx
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="option1">Option 1</RadioGroup.Item>
+  <RadioGroup.Item value="option2">Option 2</RadioGroup.Item>
+  <RadioGroup.Item value="option3">Option 3</RadioGroup.Item>
+</RadioGroup>
+```
+
+### With Descriptions
+
+Add descriptive text below each radio option for additional context.
+
+```tsx
+import { RadioGroup, Radio, Label, Description } from '@/heroui';
+import { View } from 'react-native';
+
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="standard">
+    <View>
+      <Label>Standard Shipping</Label>
+      <Description>Delivered in 5-7 business days</Description>
+    </View>
+    <Radio />
+  </RadioGroup.Item>
+  <RadioGroup.Item value="express">
+    <View>
+      <Label>Express Shipping</Label>
+      <Description>Delivered in 2-3 business days</Description>
+    </View>
+    <Radio />
+  </RadioGroup.Item>
+</RadioGroup>;
+```
+
+### Custom Indicator
+
+Replace the default indicator thumb with custom content using `Radio` sub-components.
+
+```tsx
+import { RadioGroup, Radio, Label } from '@/heroui';
+
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="custom">
+    {({ isSelected }) => (
+      <>
+        <Label>Custom Option</Label>
+        <Radio>
+          <Radio.Indicator>
+            {isSelected && (
+              <Animated.View entering={FadeIn}>
+                <Icon name="check" size={12} />
+              </Animated.View>
+            )}
+          </Radio.Indicator>
+        </Radio>
+      </>
+    )}
+  </RadioGroup.Item>
+</RadioGroup>;
+```
+
+### With Render Function
+
+Use a render function on RadioGroup.Item to access state and customize the entire content.
+
+```tsx
+import { RadioGroup, Radio, Label } from '@/heroui';
+
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="option1">
+    {({ isSelected, isInvalid, isDisabled }) => (
+      <>
+        <Label>Option 1</Label>
+        <Radio>
+          <Radio.Indicator>{isSelected && <CustomIcon />}</Radio.Indicator>
+        </Radio>
+      </>
+    )}
+  </RadioGroup.Item>
+</RadioGroup>;
+```
+
+### With Error Message
+
+Display validation errors below the radio group.
+
+```tsx
+import { RadioGroup, FieldError } from '@/heroui';
+
+function RadioGroupWithError() {
+  const [value, setValue] = React.useState<string | undefined>(undefined);
+
+  return (
+    <RadioGroup value={value} onValueChange={setValue} isInvalid={!value}>
+      <RadioGroup.Item value="agree">I agree to the terms</RadioGroup.Item>
+      <RadioGroup.Item value="disagree">I do not agree</RadioGroup.Item>
+      <FieldError isInvalid={!value}>
+        Please select an option to continue
+      </FieldError>
+    </RadioGroup>
+  );
+}
+```
+
+## Example
+
+```tsx
+import {
+  Description,
+  Label,
+  Radio,
+  RadioGroup,
+  Separator,
+  Surface,
+} from '@/heroui';
+import React from 'react';
+import { View } from 'react-native';
+
+export default function RadioGroupExample() {
+  const [selection, setSelection] = React.useState('desc1');
+
+  return (
+    <Surface className="w-full">
+      <RadioGroup value={selection} onValueChange={setSelection}>
+        <RadioGroup.Item value="desc1">
+          <View>
+            <Label>Standard Shipping</Label>
+            <Description>Delivered in 5-7 business days</Description>
+          </View>
+          <Radio />
+        </RadioGroup.Item>
+        <Separator className="my-1" />
+        <RadioGroup.Item value="desc2">
+          <View>
+            <Label>Express Shipping</Label>
+            <Description>Delivered in 2-3 business days</Description>
+          </View>
+          <Radio />
+        </RadioGroup.Item>
+        <Separator className="my-1" />
+        <RadioGroup.Item value="desc3">
+          <View>
+            <Label>Overnight Shipping</Label>
+            <Description>Delivered next business day</Description>
+          </View>
+          <Radio />
+        </RadioGroup.Item>
+      </RadioGroup>
+    </Surface>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/radio-group.tsx>).
+
+## API Reference
+
+### RadioGroup
+
+| prop            | type                         | default     | description                                                                               |
+| --------------- | ---------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `children`      | `React.ReactNode`            | `undefined` | Radio group content                                                                       |
+| `value`         | `string \| undefined`        | `undefined` | The currently selected value of the radio group                                           |
+| `onValueChange` | `(val: string) => void`      | `undefined` | Callback fired when the selected value changes                                            |
+| `isDisabled`    | `boolean`                    | `false`     | Whether the entire radio group is disabled                                                |
+| `isInvalid`     | `boolean`                    | `false`     | Whether the radio group is invalid                                                        |
+| `variant`       | `'primary' \| 'secondary'`   | `undefined` | Variant style for the radio group (inherited by items if not set on item)                 |
+| `animation`     | `"disable-all" \| undefined` | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children |
+| `className`     | `string`                     | `undefined` | Custom class name                                                                         |
+| `...ViewProps`  | `ViewProps`                  | -           | All standard React Native View props are supported                                        |
+
+### RadioGroup.Item
+
+| prop                | type                                                                         | default     | description                                                               |
+| ------------------- | ---------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------- |
+| `children`          | `React.ReactNode \| ((props: RadioGroupItemRenderProps) => React.ReactNode)` | `undefined` | Radio item content or render function to customize the radio item         |
+| `value`             | `string`                                                                     | `undefined` | The value associated with this radio item                                 |
+| `isDisabled`        | `boolean`                                                                    | `false`     | Whether this specific radio item is disabled                              |
+| `isInvalid`         | `boolean`                                                                    | `false`     | Whether the radio item is invalid                                         |
+| `variant`           | `'primary' \| 'secondary'`                                                   | `'primary'` | Variant style for the radio item                                          |
+| `hitSlop`           | `number`                                                                     | `6`         | Hit slop for the pressable area                                           |
+| `className`         | `string`                                                                     | `undefined` | Custom class name                                                         |
+| `...PressableProps` | `PressableProps`                                                             | -           | All standard React Native Pressable props are supported (except disabled) |
+
+#### RadioGroupItemRenderProps
+
+| prop         | type      | description                        |
+| ------------ | --------- | ---------------------------------- |
+| `isSelected` | `boolean` | Whether the radio item is selected |
+| `isInvalid`  | `boolean` | Whether the radio item is invalid  |
+| `isDisabled` | `boolean` | Whether the radio item is disabled |
+
+### Radio (inside RadioGroup.Item)
+
+The [Radio](../radio/radio.md) component is used inside `RadioGroup.Item` to render the radio indicator. When placed inside a `RadioGroup.Item`, the Radio component automatically detects the `RadioGroupItem` context and derives `isSelected`, `isDisabled`, `isInvalid`, and `variant` from it — no manual prop passing is needed.
+
+Use `<Radio />` for the default indicator, or compose with `Radio.Indicator` and `Radio.IndicatorThumb` for custom styling.
+
+**Note:** For complete Radio prop documentation (including `Radio.Indicator` and `Radio.IndicatorThumb`), see the [Radio component documentation](../radio/radio.md).
+
+**Note:** For labels, descriptions, and error messages, use the base components directly:
+
+- Use [Label](../label/label.md) component for labels
+- Use [Description](../description/description.md) component for descriptions
+- Use [FieldError](../field-error/field-error.md) component for error messages
+
+## Hooks
+
+### useRadioGroup
+
+**Returns:**
+
+| Property        | Type                       | Description                                    |
+| --------------- | -------------------------- | ---------------------------------------------- |
+| `value`         | `string \| undefined`      | Currently selected value                       |
+| `isDisabled`    | `boolean`                  | Whether the radio group is disabled            |
+| `isInvalid`     | `boolean`                  | Whether the radio group is in an invalid state |
+| `variant`       | `'primary' \| 'secondary'` | Variant style for the radio group              |
+| `onValueChange` | `(value: string) => void`  | Function to change the selected value          |
+
+### useRadioGroupItem
+
+**Returns:**
+
+| Property           | Type                                           | Description                                                             |
+| ------------------ | ---------------------------------------------- | ----------------------------------------------------------------------- |
+| `isSelected`       | `boolean`                                      | Whether the radio item is selected                                      |
+| `isDisabled`       | `boolean \| undefined`                         | Whether the radio item is disabled                                      |
+| `isInvalid`        | `boolean \| undefined`                         | Whether the radio item is invalid                                       |
+| `variant`          | `'primary' \| 'secondary' \| undefined`        | Variant style for the radio item                                        |
+| `onSelectedChange` | `((isSelected: boolean) => void) \| undefined` | Callback to change the selection state (selects this item in the group) |

package/lib/__templates__/expo/client/heroui/components/radio-group/radio-group.styles.ts

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const root = tv({
+  base: 'gap-3',
+});
+
+const item = tv({
+  base: 'flex-row items-center justify-between gap-3',
+});
+
+export const radioGroupClassNames = combineStyles({
+  root,
+  item,
+});