@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

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

@@ -1,217 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-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

@@ -1,273 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-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,
-});