@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/radio-group/radio-group.js

@@ -0,0 +1,266 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import Animated from 'react-native-reanimated';
+import { AnimationSettingsProvider } from "../../helpers/contexts/animation-settings-context.js";
+import { useIsOnSurface } from "../../helpers/theme/index.js";
+import { childrenToString, createContext } from "../../helpers/utils/index.js";
+import * as RadioGroupPrimitives from "../../primitives/radio-group/index.js";
+import { ErrorView } from "../error-view/index.js";
+import { FormField } from "../form-field/index.js";
+import { useRadioGroupIndicatorThumbAnimation, useRadioGroupRootAnimation } from "./radio-group.animation.js";
+import { DEFAULT_HIT_SLOP, DISPLAY_NAME } from "./radio-group.constants.js";
+import radioGroupStyles, { styleSheet } from "./radio-group.styles.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedRadioItem = Animated.createAnimatedComponent(RadioGroupPrimitives.Item);
+const AnimatedRadioIndicator = Animated.createAnimatedComponent(RadioGroupPrimitives.Indicator);
+const [RadioGroupItemProvider, useRadioGroupItem] = createContext({
+  name: 'RadioGroupItemContext'
+});
+const useRadioGroup = RadioGroupPrimitives.useRadioGroupContext;
+
+// --------------------------------------------------
+
+const RadioGroupRoot = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    isInvalid = false,
+    animation,
+    ...restProps
+  } = props;
+  const tvStyles = radioGroupStyles.root({
+    className
+  });
+  const {
+    isAllAnimationsDisabled
+  } = useRadioGroupRootAnimation({
+    animation
+  });
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(RadioGroupPrimitives.Root, {
+      ref: ref,
+      className: tvStyles,
+      isInvalid: isInvalid,
+      ...restProps
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const RadioGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    value,
+    isDisabled,
+    isInvalid,
+    isOnSurface: isOnSurfaceProp,
+    className,
+    ...restProps
+  } = props;
+  const stringifiedChildren = typeof children === 'function' ? null : childrenToString(children);
+  const {
+    value: groupValue,
+    isInvalid: groupIsInvalid,
+    isDisabled: groupIsDisabled,
+    isOnSurface: isOnSurfaceGroup
+  } = useRadioGroup();
+  const isSelected = groupValue === value;
+  const isDisabledValue = isDisabled ?? groupIsDisabled ?? false;
+  const effectiveIsInvalid = isInvalid ?? groupIsInvalid ?? false;
+  const isOnSurfaceAutoDetected = useIsOnSurface();
+  const isOnSurface = isOnSurfaceProp ?? isOnSurfaceGroup ?? isOnSurfaceAutoDetected;
+  const tvStyles = radioGroupStyles.item({
+    isDisabled: isDisabledValue,
+    className
+  });
+  const renderProps = {
+    isSelected,
+    isDisabled: isDisabledValue,
+    isInvalid: effectiveIsInvalid
+  };
+  const content = stringifiedChildren ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(RadioGroupLabel, {
+      children: stringifiedChildren
+    }), /*#__PURE__*/_jsx(RadioGroupIndicator, {})]
+  }) : typeof children === 'function' ? children(renderProps) : children;
+  const contextValue = useMemo(() => ({
+    isSelected,
+    isDisabled: isDisabledValue,
+    isInvalid: effectiveIsInvalid,
+    isOnSurface
+  }), [isSelected, isDisabledValue, effectiveIsInvalid, isOnSurface]);
+  return /*#__PURE__*/_jsx(RadioGroupItemProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(AnimatedRadioItem, {
+      ref: ref,
+      value: value,
+      className: tvStyles,
+      isDisabled: isDisabledValue,
+      hitSlop: props.hitSlop ?? DEFAULT_HIT_SLOP,
+      ...restProps,
+      children: content
+    })
+  });
+});
+
+// --------------------------------------------------
+
+const RadioGroupIndicator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const {
+    isSelected,
+    isInvalid,
+    isOnSurface
+  } = useRadioGroupItem();
+  const tvStyles = radioGroupStyles.itemIndicator({
+    isOnSurface,
+    isSelected,
+    isInvalid,
+    className
+  });
+  return /*#__PURE__*/_jsx(AnimatedRadioIndicator, {
+    ref: ref,
+    className: tvStyles,
+    style: [styleSheet.borderCurve, style],
+    ...restProps,
+    children: children ?? /*#__PURE__*/_jsx(RadioGroupIndicatorThumb, {})
+  });
+});
+
+// --------------------------------------------------
+
+const RadioGroupIndicatorThumb = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    animation,
+    isAnimatedStyleActive = true,
+    ...restProps
+  } = props;
+  const {
+    isSelected,
+    isOnSurface
+  } = useRadioGroupItem();
+  const thumbClassName = radioGroupStyles.itemIndicatorThumb({
+    isOnSurface,
+    isSelected,
+    className
+  });
+  const {
+    rContainerStyle
+  } = useRadioGroupIndicatorThumbAnimation({
+    animation,
+    isSelected
+  });
+  const thumbStyle = isAnimatedStyleActive ? [rContainerStyle, style] : style;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    ref: ref,
+    className: thumbClassName,
+    style: thumbStyle,
+    ...restProps
+  });
+});
+
+// --------------------------------------------------
+
+const RadioGroupLabel = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/_jsx(FormField.Label, {
+    ref: ref,
+    ...props
+  });
+});
+
+// --------------------------------------------------
+
+const RadioGroupDescription = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/_jsx(FormField.Description, {
+    ref: ref,
+    ...props
+  });
+});
+
+// --------------------------------------------------
+
+const RadioGroupErrorMessage = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  const {
+    isInvalid
+  } = useRadioGroup();
+  const tvStyles = radioGroupStyles.errorMessage({
+    className
+  });
+  return /*#__PURE__*/_jsx(ErrorView, {
+    ref: ref,
+    isInvalid: isInvalid,
+    className: tvStyles,
+    ...restProps
+  });
+});
+RadioGroupRoot.displayName = DISPLAY_NAME.RADIO_GROUP_ROOT;
+RadioGroupItem.displayName = DISPLAY_NAME.RADIO_GROUP_ITEM;
+RadioGroupIndicator.displayName = DISPLAY_NAME.RADIO_GROUP_INDICATOR;
+RadioGroupIndicatorThumb.displayName = DISPLAY_NAME.RADIO_GROUP_INDICATOR_THUMB;
+RadioGroupLabel.displayName = DISPLAY_NAME.RADIO_GROUP_TITLE;
+RadioGroupDescription.displayName = DISPLAY_NAME.RADIO_GROUP_DESCRIPTION;
+RadioGroupErrorMessage.displayName = DISPLAY_NAME.RADIO_GROUP_ERROR_MESSAGE;
+
+/**
+ * Compound RadioGroup component with sub-components
+ *
+ * @component RadioGroup - Container that manages the selection state of RadioGroupItem components.
+ * Supports both horizontal and vertical orientations.
+ *
+ * @component RadioGroup.ErrorMessage - Error message displayed when radio group is invalid.
+ * Shown with animation below the radio group content. Takes full width when orientation is horizontal.
+ *
+ * @component RadioGroup.Item - Individual radio option within a RadioGroup. Must be used inside RadioGroup.
+ * Handles selection state and renders default indicator if no children provided. Animates border
+ * color based on selection state.
+ *
+ * @component RadioGroup.Indicator - Optional container for the radio circle. Renders default thumb
+ * if no children provided. Manages the visual selection state.
+ *
+ * @component RadioGroup.IndicatorThumb - Optional inner circle that appears when selected. Animates
+ * scale based on selection. Can be replaced with custom content.
+ *
+ * @component RadioGroup.Label - Optional text label for the radio option. Clickable by default and
+ * linked to the radio for accessibility.
+ *
+ * @component RadioGroup.Description - Optional secondary text below the label. Provides additional
+ * context about the radio option.
+ *
+ * Props flow from RadioGroup to RadioGroupItem to sub-components via context (color, value, isSelected).
+ * RadioGroup manages the overall selection state and orientation.
+ *
+ * @see Full documentation: https://heroui.com/components/radio-group
+ */
+const CompoundRadioGroup = Object.assign(RadioGroupRoot, {
+  /** @optional Error message displayed when radio group is invalid */
+  ErrorMessage: RadioGroupErrorMessage,
+  /** Individual radio option within a RadioGroup */
+  Item: RadioGroupItem,
+  /** @optional Custom radio indicator container */
+  Indicator: RadioGroupIndicator,
+  /** @optional Custom indicator thumb that appears when selected */
+  IndicatorThumb: RadioGroupIndicatorThumb,
+  /** @optional Clickable text label */
+  Label: RadioGroupLabel,
+  /** @optional Secondary descriptive text */
+  Description: RadioGroupDescription
+});
+export default CompoundRadioGroup;
+export { useRadioGroup, useRadioGroupItem };
+//# sourceMappingURL=radio-group.js.map

package/lib/module/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","Animated","AnimationSettingsProvider","useIsOnSurface","childrenToString","createContext","RadioGroupPrimitives","ErrorView","FormField","useRadioGroupIndicatorThumbAnimation","useRadioGroupRootAnimation","DEFAULT_HIT_SLOP","DISPLAY_NAME","radioGroupStyles","styleSheet","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedRadioItem","createAnimatedComponent","Item","AnimatedRadioIndicator","Indicator","RadioGroupItemProvider","useRadioGroupItem","name","useRadioGroup","useRadioGroupContext","RadioGroupRoot","props","ref","className","isInvalid","animation","restProps","tvStyles","root","isAllAnimationsDisabled","animationSettingsContextValue","value","children","Root","RadioGroupItem","isDisabled","isOnSurface","isOnSurfaceProp","stringifiedChildren","groupValue","groupIsInvalid","groupIsDisabled","isOnSurfaceGroup","isSelected","isDisabledValue","effectiveIsInvalid","isOnSurfaceAutoDetected","item","renderProps","content","RadioGroupLabel","RadioGroupIndicator","contextValue","hitSlop","style","itemIndicator","borderCurve","RadioGroupIndicatorThumb","isAnimatedStyleActive","thumbClassName","itemIndicatorThumb","rContainerStyle","thumbStyle","View","Label","RadioGroupDescription","Description","RadioGroupErrorMessage","errorMessage","displayName","RADIO_GROUP_ROOT","RADIO_GROUP_ITEM","RADIO_GROUP_INDICATOR","RADIO_GROUP_INDICATOR_THUMB","RADIO_GROUP_TITLE","RADIO_GROUP_DESCRIPTION","RADIO_GROUP_ERROR_MESSAGE","CompoundRadioGroup","Object","assign","ErrorMessage","IndicatorThumb"],"sourceRoot":"../../../../src","sources":["components/radio-group/radio-group.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/radio-group/radio-group.md

@@ -0,0 +1,303 @@
+# RadioGroup
+
+A set of radio buttons where only one option can be selected at a time.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { RadioGroup } from 'heroui-native';
+```
+
+## 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
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="standard">
+    <View>
+      <RadioGroup.Label>Standard Shipping</RadioGroup.Label>
+      <RadioGroup.Description>
+        Delivered in 5-7 business days
+      </RadioGroup.Description>
+    </View>
+    <RadioGroup.Indicator />
+  </RadioGroup.Item>
+  <RadioGroup.Item value="express">
+    <View>
+      <RadioGroup.Label>Express Shipping</RadioGroup.Label>
+      <RadioGroup.Description>
+        Delivered in 2-3 business days
+      </RadioGroup.Description>
+    </View>
+    <RadioGroup.Indicator />
+  </RadioGroup.Item>
+</RadioGroup>
+```
+
+### Custom Indicator
+
+Replace the default indicator thumb with custom content.
+
+```tsx
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="custom">
+    <RadioGroup.Label>Custom Option</RadioGroup.Label>
+    <RadioGroup.Indicator>
+      {value === 'custom' && (
+        <Animated.View entering={FadeIn}>
+          <Icon name="check" size={12} />
+        </Animated.View>
+      )}
+    </RadioGroup.Indicator>
+  </RadioGroup.Item>
+</RadioGroup>
+```
+
+### With Render Function
+
+Use a render function on RadioGroup.Item to access state and customize the entire content.
+
+```tsx
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroup.Item value="option1">
+    {({ isSelected, isInvalid, isDisabled }) => (
+      <>
+        <RadioGroup.Label>Option 1</RadioGroup.Label>
+        <RadioGroup.Indicator>
+          {isSelected && <CustomIcon />}
+        </RadioGroup.Indicator>
+      </>
+    )}
+  </RadioGroup.Item>
+</RadioGroup>
+```
+
+### With Error Message
+
+Display validation errors below the radio group.
+
+```tsx
+<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>
+  <RadioGroup.ErrorMessage>
+    Please select an option to continue
+  </RadioGroup.ErrorMessage>
+</RadioGroup>
+```
+
+## Example
+
+```tsx
+import { RadioGroup, useThemeColor } from 'heroui-native';
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { View } from 'react-native';
+
+export default function PaymentMethodExample() {
+  const [paymentMethod, setPaymentMethod] = React.useState('card');
+  const themeColorForeground = useThemeColor('foreground');
+
+  return (
+    <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
+      <RadioGroup.Item value="card">
+        <View>
+          <View className="flex-row items-center gap-1.5">
+            <Ionicons
+              name="card-outline"
+              size={16}
+              color={themeColorForeground}
+            />
+            <RadioGroup.Label>Credit/Debit Card</RadioGroup.Label>
+          </View>
+          <RadioGroup.Description>
+            Pay securely with your credit or debit card
+          </RadioGroup.Description>
+        </View>
+        <RadioGroup.Indicator />
+      </RadioGroup.Item>
+
+      <RadioGroup.Item value="paypal">
+        <View>
+          <RadioGroup.Label>PayPal</RadioGroup.Label>
+          <RadioGroup.Description>
+            Fast and secure payment with PayPal
+          </RadioGroup.Description>
+        </View>
+        <RadioGroup.Indicator />
+      </RadioGroup.Item>
+
+      <RadioGroup.Item value="bank">
+        <View>
+          <RadioGroup.Label>Bank Transfer</RadioGroup.Label>
+          <RadioGroup.Description>
+            Direct transfer from your bank account
+          </RadioGroup.Description>
+        </View>
+        <RadioGroup.Indicator />
+      </RadioGroup.Item>
+    </RadioGroup>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<RadioGroup>
+  <RadioGroup.Item>
+    <RadioGroup.Label>...</RadioGroup.Label>
+    <RadioGroup.Description>...</RadioGroup.Description>
+    <RadioGroup.Indicator>
+      <RadioGroup.IndicatorThumb />
+    </RadioGroup.Indicator>
+  </RadioGroup.Item>
+  <RadioGroup.ErrorMessage>...</RadioGroup.ErrorMessage>
+</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 default indicator if no children provided. Supports render function children to access state (`isSelected`, `isInvalid`, `isDisabled`).
+- **RadioGroup.Label**: Optional clickable text label for the radio option. Linked to the radio for accessibility.
+- **RadioGroup.Description**: Optional secondary text below the label. Provides additional context about the radio option.
+- **RadioGroup.Indicator**: Optional container for the radio circle. Renders default thumb if no children provided. Manages the visual selection state.
+- **RadioGroup.IndicatorThumb**: Optional inner circle that appears when selected. Animates scale based on selection. Can be replaced with custom content.
+- **RadioGroup.ErrorMessage**: Error message displayed when radio group is invalid. Shown with animation below the radio group content.
+
+## 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                                                        |
+| `isOnSurface`   | `boolean`                    | `undefined` | Whether the radio group is on surface                                                     |
+| `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                                         |
+| `isOnSurface`       | `boolean`                                                                    | `undefined` | Whether the radio item is on surface (auto-detected if not set)           |
+| `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 |
+
+### RadioGroup.Indicator
+
+| prop                    | type                       | default     | description                                      |
+| ----------------------- | -------------------------- | ----------- | ------------------------------------------------ |
+| `children`              | `React.ReactNode`          | `undefined` | Indicator content                                |
+| `className`             | `string`                   | `undefined` | Custom class name                                |
+| `...Animated.ViewProps` | `AnimatedProps<ViewProps>` | -           | All Reanimated Animated.View props are supported |
+
+**Note:** The `isOnSurface` state is automatically provided via context from the parent RadioGroup.Item component.
+
+### RadioGroup.IndicatorThumb
+
+| prop                    | type                                | default     | description                                      |
+| ----------------------- | ----------------------------------- | ----------- | ------------------------------------------------ |
+| `className`             | `string`                            | `undefined` | Custom class name                                |
+| `animation`             | `RadioGroupIndicatorThumbAnimation` | -           | Animation configuration                          |
+| `isAnimatedStyleActive` | `boolean`                            | `true`      | Whether animated styles (react-native-reanimated) are active |
+| `...Animated.ViewProps` | `AnimatedProps<ViewProps>`          | -           | All Reanimated Animated.View props are supported |
+
+#### RadioGroupIndicatorThumbAnimation
+
+Animation configuration for RadioGroupIndicatorThumb component. Can be:
+
+- `false` or `"disabled"`: Disable all animations
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop                 | type                          | default                                              | description                         |
+| -------------------- | ----------------------------- | ---------------------------------------------------- | ----------------------------------- |
+| `state`              | `'disabled' \| boolean`       | -                                                    | Disable animations while customizing properties |
+| `scale.value`        | `[number, number]`            | `[1.5, 1]`                                           | Scale values [unselected, selected] |
+| `scale.timingConfig` | `WithTimingConfig`            | `{ duration: 300, easing: Easing.out(Easing.ease) }` | Animation timing configuration      |
+
+### RadioGroup.Label
+
+| prop                    | type                       | default     | description                                      |
+| ----------------------- | -------------------------- | ----------- | ------------------------------------------------ |
+| `children`              | `React.ReactNode`          | `undefined` | Label text content                               |
+| `className`             | `string`                   | `undefined` | Custom class name for the label element          |
+| `...Animated.TextProps` | `AnimatedProps<TextProps>` | -           | All Reanimated Animated.Text props are supported |
+
+### RadioGroup.Description
+
+| prop                    | type                       | default     | description                                      |
+| ----------------------- | -------------------------- | ----------- | ------------------------------------------------ |
+| `children`              | `React.ReactNode`          | `undefined` | Description text content                         |
+| `className`             | `string`                   | `undefined` | Custom class name for the description element    |
+| `...Animated.TextProps` | `AnimatedProps<TextProps>` | -           | All Reanimated Animated.Text props are supported |
+
+### RadioGroup.ErrorMessage
+
+| prop                    | type                           | default     | description                                      |
+| ----------------------- | ------------------------------ | ----------- | ------------------------------------------------ |
+| `children`              | `React.ReactNode`              | `undefined` | The content of the error field                   |
+| `isInvalid`             | `boolean`                      | `false`     | Controls the visibility of the error field       |
+| `className`             | `string`                       | `undefined` | Additional CSS class for styling                 |
+| `classNames`            | `ElementSlots<ErrorViewSlots>` | `undefined` | Additional CSS classes for different parts       |
+| `textProps`             | `TextProps`                    | `undefined` | Additional props to pass to the Text component   |
+| `...Animated.ViewProps` | `AnimatedProps<ViewProps>`     | -           | All Reanimated Animated.View props are supported |
+
+## 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 |
+| `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` | Whether the radio item is disabled   |
+| `isInvalid`   | `boolean` | Whether the radio item is invalid    |
+| `isOnSurface` | `boolean` | Whether the radio item is on surface |

package/lib/module/components/radio-group/radio-group.styles.js

@@ -0,0 +1,95 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+const root = tv({
+  base: 'gap-3'
+});
+const item = tv({
+  base: 'flex-row items-center justify-between gap-3',
+  variants: {
+    isDisabled: {
+      true: 'opacity-disabled pointer-events-none'
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+const itemIndicator = tv({
+  base: 'size-6 rounded-full border border-field-border items-center justify-center overflow-hidden',
+  variants: {
+    isOnSurface: {
+      true: 'bg-surface-secondary',
+      false: 'bg-field'
+    },
+    isSelected: {
+      true: 'bg-accent',
+      false: ''
+    },
+    isInvalid: {
+      true: 'bg-transparent border-danger',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    isInvalid: true,
+    isSelected: true,
+    className: 'bg-danger border-danger'
+  }],
+  defaultVariants: {
+    isSelected: false,
+    isInvalid: false
+  }
+});
+
+/**
+ * Indicator thumb style definition
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following property is animated and cannot be overridden using Tailwind classes:
+ * - `transform` (specifically `scale`) - Animated for selection transitions (unselected: 1.5, selected: 1)
+ *
+ * To customize this property, use the `animation` prop on `RadioGroup.IndicatorThumb`:
+ * ```tsx
+ * <RadioGroup.IndicatorThumb
+ *   animation={{
+ *     scale: { value: [1.5, 1], timingConfig: { duration: 300, easing: Easing.out(Easing.ease) } }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `RadioGroup.IndicatorThumb`.
+ */
+const itemIndicatorThumb = tv({
+  base: 'size-2.5 dark:size-3 rounded-full',
+  variants: {
+    isOnSurface: {
+      true: 'bg-on-surface',
+      false: 'bg-field'
+    },
+    isSelected: {
+      true: 'opacity-100',
+      false: 'opacity-0'
+    }
+  }
+});
+const errorMessage = tv({
+  base: ''
+});
+const radioGroupStyles = combineStyles({
+  root,
+  errorMessage,
+  item,
+  itemIndicator,
+  itemIndicatorThumb
+});
+export const styleSheet = StyleSheet.create({
+  borderCurve: {
+    borderCurve: 'continuous'
+  }
+});
+export default radioGroupStyles;
+//# sourceMappingURL=radio-group.styles.js.map