@vellira-ui/react-native 2.23.0 → 2.25.0

package/README.md

@@ -10,6 +10,7 @@ This package contains iOS-inspired native components built with React Native `St
 - Checkbox
 - Input
 - FormField
+- Radio
 - RadioGroup
 - Select
 - Dropdown
@@ -81,6 +82,44 @@ Use `description` for settings-style helper text when the checkbox is not
 wrapped in `FormField`. For checkbox rows without a visible label, provide
 `accessibilityLabel`.
 
+### Select Notes
+
+Use `Select` for one form value from a compact list, `RadioGroup` for a few
+visible choices, and `Dropdown` for action menus. Native `Select` commits the
+picker draft only when the user presses `Done`; `Cancel` and the backdrop close
+without changing the selected value.
+
+```tsx
+import { Select } from '@vellira-ui/react-native';
+import { useState } from 'react';
+
+export function RoleSelect() {
+  const [role, setRole] = useState('editor');
+
+  return (
+    <Select
+      label='Role'
+      value={role}
+      onChange={setRole}
+      options={[
+        { label: 'Admin', value: 'admin' },
+        { label: 'Editor', value: 'editor' },
+        { label: 'Viewer', value: 'viewer' },
+      ]}
+    />
+  );
+}
+```
+
+### FormField Notes
+
+`FormField` is a presentational wrapper for custom native controls. Do not wrap
+components that already render their own field chrome, such as `Input`, `Select`
+or `RadioGroup`. The wrapped control should provide its own
+`accessibilityLabel`, role, disabled/editable state and interaction behavior.
+`FormField` only provides layout, text styling, required mark, disabled root
+state and polite error announcement.
+
 ## Testing
 
 Run only native tests:

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export type { DropdownProps } from './components/Dropdown';
 export { Dropdown } from './components/Dropdown';
 export type { ModalProps } from './components/Modal';
 export { Modal } from './components/Modal';
-export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
+export type { RadioGroupProps } from './components/RadioGroup';
 export { RadioGroup } from './components/RadioGroup';
 export type { SelectOption, SelectProps } from './components/Select';
 export { Select } from './components/Select';
@@ -18,6 +18,8 @@ export type { CheckboxProps } from './primitives/Checkbox';
 export { Checkbox } from './primitives/Checkbox';
 export type { InputProps } from './primitives/Input';
 export { Input } from './primitives/Input';
+export type { RadioProps } from './primitives/Radio';
+export { Radio } from './primitives/Radio';
 export type { NativeThemeName, ThemeProviderProps } from './theme';
 export { nativeThemes, ThemeProvider, useTheme } from './theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -60,9 +60,9 @@ function useTheme() {
 
 // src/theme/useThemeStyles.ts
 import { useMemo as useMemo2 } from "react";
-function useThemeStyles(createStyles24) {
+function useThemeStyles(createStyles25) {
   const { theme } = useTheme();
-  return useMemo2(() => createStyles24(theme), [createStyles24, theme]);
+  return useMemo2(() => createStyles25(theme), [createStyles25, theme]);
 }
 
 // src/components/Dropdown/Content/DropdownContent.styles.ts
@@ -763,8 +763,9 @@ var Modal2 = Object.assign(ModalRoot, {
 });
 
 // src/components/RadioGroup/RadioGroup.tsx
+import { forwardRef } from "react";
 import { useControllableState as useControllableState2 } from "@vellira-ui/core";
-import { Pressable as Pressable6, Text as Text7, View as View11 } from "react-native";
+import { View as View11 } from "react-native";
 
 // src/patterns/FormField/FormField.tsx
 import { Text as Text6, View as View10 } from "react-native";
@@ -802,6 +803,11 @@ var createStyles12 = (theme) => StyleSheet12.create({
   descriptionDisabled: {
     color: theme.components.formField.disabled.descriptionFg
   },
+  customLabel: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.tokens.spacing[1]
+  },
   control: {
     width: "100%",
     minWidth: 0,
@@ -828,28 +834,47 @@ function FormField({
   controlStyle,
   labelStyle,
   descriptionStyle,
-  errorStyle
+  errorStyle,
+  ...rest
 }) {
   const styles = useThemeStyles(createStyles12);
   return /* @__PURE__ */ jsxs7(
     View10,
     {
+      ...rest,
+      accessibilityState: disabled ? { disabled: true } : void 0,
       style: [styles.root, style],
-      accessibilityState: {
-        disabled
-      },
       children: [
-        label && /* @__PURE__ */ jsxs7(
+        label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs7(
           Text6,
           {
             style: [styles.label, disabled && styles.labelDisabled, labelStyle],
             children: [
               label,
-              required && /* @__PURE__ */ jsx14(Text6, { style: styles.required, children: " *" })
+              required && /* @__PURE__ */ jsx14(
+                Text6,
+                {
+                  style: styles.required,
+                  accessible: false,
+                  importantForAccessibility: "no",
+                  children: " *"
+                }
+              )
             ]
           }
-        ),
-        description && /* @__PURE__ */ jsx14(
+        ) : /* @__PURE__ */ jsxs7(View10, { style: styles.customLabel, children: [
+          label,
+          required && /* @__PURE__ */ jsx14(
+            Text6,
+            {
+              style: styles.required,
+              accessible: false,
+              importantForAccessibility: "no",
+              children: "*"
+            }
+          )
+        ] })),
+        description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx14(
           Text6,
           {
             style: [
@@ -859,17 +884,16 @@ function FormField({
             ],
             children: description
           }
-        ),
+        ) : description),
         /* @__PURE__ */ jsx14(View10, { style: [styles.control, controlStyle], children }),
-        error && /* @__PURE__ */ jsx14(
+        error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx14(
           Text6,
           {
-            style: [styles.error, errorStyle],
-            accessibilityRole: "alert",
             accessibilityLiveRegion: "polite",
+            style: [styles.error, errorStyle],
             children: error
           }
-        )
+        ) : /* @__PURE__ */ jsx14(View10, { accessibilityLiveRegion: "polite", children: error }))
       ]
     }
   );
@@ -878,180 +902,125 @@ function FormField({
 // src/components/RadioGroup/RadioGroup.styles.ts
 import { StyleSheet as StyleSheet13 } from "react-native";
 var createStyles13 = (theme) => StyleSheet13.create({
-  group: {
+  items: {
     width: "100%",
     minWidth: 0,
     alignSelf: "stretch",
-    gap: theme.tokens.spacing[2]
+    gap: theme.tokens.spacing[1]
   },
   horizontal: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: theme.tokens.spacing[4]
-  },
-  option: {
-    minWidth: 0,
-    alignItems: "center",
-    flexDirection: "row",
-    gap: theme.tokens.spacing[2]
-  },
-  optionDisabled: {
-    opacity: 1
-  },
-  radio: {
-    width: 16,
-    height: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    borderColor: theme.components.radio.default.border,
-    borderRadius: 999,
-    borderWidth: 1,
-    backgroundColor: theme.components.radio.default.bg
-  },
-  radioSelected: {
-    borderColor: theme.components.radio.checked.default.border
-  },
-  radioDisabled: {
-    borderColor: theme.components.radio.disabled.border,
-    backgroundColor: theme.components.radio.disabled.bg
-  },
-  dot: {
-    width: 12,
-    height: 12,
-    backgroundColor: theme.components.radio.checked.default.bg,
-    borderRadius: 999
-  },
-  dotDisabled: {
-    backgroundColor: theme.components.radio.disabled.fg
-  },
-  label: {
-    minWidth: 0,
-    color: theme.components.radio.default.fg,
-    fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
-  },
-  labelDisabled: {
-    color: theme.components.radio.disabled.fg
-  },
-  labelSelected: {
-    color: theme.components.radio.checked.default.fg
+    alignItems: "flex-start",
+    columnGap: theme.tokens.spacing[6],
+    rowGap: theme.tokens.spacing[4]
   }
 });
 
+// src/components/RadioGroup/RadioGroupContext.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var RadioGroupContext = createContext3(null);
+var RadioGroupProvider = RadioGroupContext.Provider;
+function useRadioGroupContext() {
+  return useContext3(RadioGroupContext);
+}
+
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-function RadioGroup({
-  label,
-  description,
-  value,
-  defaultValue = "",
-  onChange,
-  options,
-  required = false,
-  disabled = false,
-  error,
-  orientation = "vertical",
-  style,
-  optionStyle,
-  labelStyle
-}) {
-  const styles = useThemeStyles(createStyles13);
-  const [selectedValue, setSelectedValue] = useControllableState2({
+import { jsx as jsx15 } from "react/jsx-runtime";
+var RadioGroup = forwardRef(
+  ({
     value,
-    defaultValue,
-    onChange
-  });
-  return /* @__PURE__ */ jsx15(
-    FormField,
-    {
-      label,
-      description,
-      error,
-      required,
-      disabled,
-      children: /* @__PURE__ */ jsx15(
-        View11,
-        {
-          accessibilityRole: "radiogroup",
-          accessibilityState: { disabled },
-          style: [
-            styles.group,
-            orientation === "horizontal" && styles.horizontal,
-            style
-          ],
-          children: options.map((option) => {
-            const isSelected = selectedValue === option.value;
-            const isDisabled = disabled || !!option.disabled;
-            return /* @__PURE__ */ jsxs8(
-              Pressable6,
+    defaultValue = "",
+    onValueChange,
+    disabled = false,
+    required = false,
+    size = "md",
+    orientation = "vertical",
+    label,
+    description,
+    error,
+    children,
+    style,
+    itemsStyle,
+    labelStyle,
+    descriptionStyle,
+    errorStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    ...rest
+  }, ref) => {
+    const styles = useThemeStyles(createStyles13);
+    const [selectedValue, setSelectedValue] = useControllableState2({
+      value,
+      defaultValue,
+      onChange: onValueChange
+    });
+    const invalid = Boolean(error);
+    const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    const resolvedAccessibilityHint = (accessibilityHint ?? [
+      typeof description === "string" ? description : void 0,
+      required ? "Required." : void 0,
+      typeof error === "string" ? error : void 0
+    ].filter(Boolean).join(" ")) || void 0;
+    return /* @__PURE__ */ jsx15(
+      FormField,
+      {
+        label,
+        description,
+        error,
+        required,
+        disabled,
+        labelStyle,
+        descriptionStyle,
+        errorStyle,
+        style,
+        children: /* @__PURE__ */ jsx15(
+          RadioGroupProvider,
+          {
+            value: {
+              value: selectedValue,
+              disabled,
+              required,
+              invalid,
+              size,
+              onValueChange: setSelectedValue
+            },
+            children: /* @__PURE__ */ jsx15(
+              View11,
               {
-                disabled: isDisabled,
-                accessibilityRole: "radio",
-                accessibilityLabel: option.label,
+                ...rest,
+                ref,
+                accessibilityRole: "radiogroup",
+                accessibilityLabel: resolvedAccessibilityLabel,
+                accessibilityHint: resolvedAccessibilityHint,
                 accessibilityState: {
-                  checked: isSelected,
-                  disabled: isDisabled
-                },
-                onPress: () => {
-                  if (isDisabled) return;
-                  setSelectedValue(option.value);
+                  disabled
                 },
                 style: [
-                  styles.option,
-                  isDisabled && styles.optionDisabled,
-                  optionStyle
+                  styles.items,
+                  orientation === "horizontal" && styles.horizontal,
+                  itemsStyle
                 ],
-                children: [
-                  /* @__PURE__ */ jsx15(
-                    View11,
-                    {
-                      style: [
-                        styles.radio,
-                        isSelected && styles.radioSelected,
-                        isDisabled && styles.radioDisabled
-                      ],
-                      children: isSelected && /* @__PURE__ */ jsx15(
-                        View11,
-                        {
-                          style: [styles.dot, isDisabled && styles.dotDisabled]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx15(
-                    Text7,
-                    {
-                      style: [
-                        styles.label,
-                        isSelected && styles.labelSelected,
-                        isDisabled && styles.labelDisabled,
-                        labelStyle
-                      ],
-                      children: option.label
-                    }
-                  )
-                ]
-              },
-              option.value
-            );
-          })
-        }
-      )
-    }
-  );
-}
+                children
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Select.tsx
-import { useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Picker } from "@react-native-picker/picker";
 import { useControllableState as useControllableState3 } from "@vellira-ui/core";
-import { Modal as Modal3, Pressable as Pressable8, Text as Text9, View as View13 } from "react-native";
+import { Modal as Modal3, Pressable as Pressable7, Text as Text8, View as View13 } from "react-native";
 
 // src/components/Select/SelectTrigger/SelectTrigger.tsx
 import { ChevronDown as ChevronDown2 } from "@vellira-ui/icons";
-import { Pressable as Pressable7, Text as Text8, View as View12 } from "react-native";
+import { Pressable as Pressable6, Text as Text7, View as View12 } from "react-native";
 
 // src/components/Select/SelectTrigger/SelectTrigger.styles.ts
 import { StyleSheet as StyleSheet14 } from "react-native";
@@ -1069,6 +1038,33 @@ var createStyles14 = (theme) => StyleSheet14.create({
     borderRadius: theme.tokens.radius.md,
     borderWidth: 1
   },
+  sm: {
+    minHeight: 36,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2]
+  },
+  md: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[3]
+  },
+  lg: {
+    minHeight: 52,
+    paddingHorizontal: theme.tokens.spacing[5],
+    paddingVertical: theme.tokens.spacing[4]
+  },
+  textSm: {
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  textMd: {
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  textLg: {
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.lg
+  },
   triggerOpen: {
     borderColor: theme.components.select.trigger.focus.border
   },
@@ -1083,9 +1079,7 @@ var createStyles14 = (theme) => StyleSheet14.create({
     flex: 1,
     minWidth: 0,
     color: theme.components.select.trigger.default.fg,
-    fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
+    fontFamily: theme.tokens.typography.family.regular
   },
   textDisabled: {
     color: theme.components.select.trigger.disabled.fg
@@ -1106,27 +1100,36 @@ var createStyles14 = (theme) => StyleSheet14.create({
 });
 
 // src/components/Select/SelectTrigger/SelectTrigger.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function SelectTrigger({
   displayText,
   isPlaceholder,
   isOpen,
+  size = "md",
   disabled = false,
+  required = false,
   hasError = false,
   accessibilityLabel,
+  accessibilityHint,
   triggerStyle,
   textStyle,
   onPress
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles14);
-  return /* @__PURE__ */ jsxs9(
-    Pressable7,
+  const textSizeStyle = {
+    sm: styles.textSm,
+    md: styles.textMd,
+    lg: styles.textLg
+  }[size];
+  const resolvedAccessibilityHint = accessibilityHint ?? (hasError ? "Invalid selection. Opens a picker" : required ? "Required. Opens a picker" : "Opens a picker");
+  return /* @__PURE__ */ jsxs8(
+    Pressable6,
     {
       disabled,
       accessibilityRole: "button",
       accessibilityLabel,
-      accessibilityHint: "Opens a picker",
+      accessibilityHint: resolvedAccessibilityHint,
       accessibilityState: {
         expanded: isOpen,
         disabled
@@ -1134,6 +1137,7 @@ function SelectTrigger({
       onPress,
       style: [
         styles.trigger,
+        styles[size],
         isOpen && styles.triggerOpen,
         hasError && styles.triggerError,
         disabled && styles.triggerDisabled,
@@ -1141,11 +1145,12 @@ function SelectTrigger({
       ],
       children: [
         /* @__PURE__ */ jsx16(
-          Text8,
+          Text7,
           {
             numberOfLines: 1,
             style: [
               styles.text,
+              textSizeStyle,
               isPlaceholder && styles.placeholder,
               disabled && styles.textDisabled,
               textStyle
@@ -1194,6 +1199,7 @@ var createStyles15 = (theme) => StyleSheet15.create({
     borderTopLeftRadius: theme.tokens.radius.lg,
     borderTopRightRadius: theme.tokens.radius.lg,
     borderWidth: 1,
+    borderBottomWidth: 0,
     overflow: "hidden"
   },
   toolbar: {
@@ -1206,19 +1212,31 @@ var createStyles15 = (theme) => StyleSheet15.create({
     borderBottomWidth: 1
   },
   title: {
+    flex: 1,
+    marginHorizontal: theme.tokens.spacing[3],
     color: theme.components.select.dropdown.fg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md,
+    textAlign: "center"
+  },
+  toolbarAction: {
+    minWidth: 64,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
   },
   cancelText: {
     color: theme.components.select.trigger.placeholder.fg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   },
   doneText: {
     color: theme.components.select.option.selected.bg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   },
   picker: {
     width: "100%"
@@ -1226,7 +1244,7 @@ var createStyles15 = (theme) => StyleSheet15.create({
 });
 
 // src/components/Select/Select.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function Select({
   label,
   description,
@@ -1235,6 +1253,7 @@ function Select({
   onChange,
   options,
   placeholder = "Select...",
+  size = "md",
   required = false,
   disabled = false,
   error,
@@ -1242,7 +1261,8 @@ function Select({
   triggerStyle,
   textStyle,
   pickerStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles15);
@@ -1254,6 +1274,12 @@ function Select({
   });
   const [draftValue, setDraftValue] = useState3(selectedValue);
   const selectedOption = options.find((o) => o.value === selectedValue);
+  const hasError = !!error;
+  useEffect2(() => {
+    if (isOpen) {
+      setDraftValue(selectedValue);
+    }
+  }, [isOpen, selectedValue]);
   const resolvedLabel = accessibilityLabel ?? label ?? selectedOption?.label ?? placeholder ?? "Select";
   const openPicker = () => {
     if (disabled) return;
@@ -1271,10 +1297,15 @@ function Select({
     setDraftValue(nextValue);
   };
   const confirmPicker = () => {
+    const nextOption = options.find((option) => option.value === draftValue);
+    if (!nextOption || nextOption.disabled) {
+      setIsOpen(false);
+      return;
+    }
     setSelectedValue(draftValue);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     FormField,
     {
       label,
@@ -1290,9 +1321,12 @@ function Select({
             displayText: selectedOption?.label ?? placeholder,
             isPlaceholder: !selectedOption,
             isOpen,
+            size,
             disabled,
-            hasError: !!error,
+            required,
+            hasError,
             accessibilityLabel: resolvedLabel,
+            accessibilityHint,
             triggerStyle,
             textStyle,
             onPress: openPicker
@@ -1305,15 +1339,54 @@ function Select({
             visible: isOpen,
             animationType: "slide",
             onRequestClose: closePicker,
-            children: /* @__PURE__ */ jsxs10(View13, { style: styles.modalRoot, children: [
-              /* @__PURE__ */ jsx17(Pressable8, { style: styles.backdrop, onPress: closePicker }),
-              /* @__PURE__ */ jsxs10(View13, { style: styles.sheet, children: [
-                /* @__PURE__ */ jsxs10(View13, { style: styles.toolbar, children: [
-                  /* @__PURE__ */ jsx17(Pressable8, { onPress: closePicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text9, { style: styles.cancelText, children: "Cancel" }) }),
-                  /* @__PURE__ */ jsx17(Text9, { style: styles.title, children: resolvedLabel }),
-                  /* @__PURE__ */ jsx17(Pressable8, { onPress: confirmPicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text9, { style: styles.doneText, children: "Done" }) })
-                ] }),
-                /* @__PURE__ */ jsxs10(
+            children: /* @__PURE__ */ jsxs9(View13, { style: styles.modalRoot, children: [
+              /* @__PURE__ */ jsx17(Pressable7, { style: styles.backdrop, onPress: closePicker }),
+              /* @__PURE__ */ jsxs9(View13, { style: styles.sheet, children: [
+                /* @__PURE__ */ jsxs9(
+                  View13,
+                  {
+                    style: styles.toolbar,
+                    accessible: true,
+                    accessibilityRole: "toolbar",
+                    accessibilityLabel: `${resolvedLabel} picker actions`,
+                    children: [
+                      /* @__PURE__ */ jsx17(
+                        Pressable7,
+                        {
+                          onPress: closePicker,
+                          hitSlop: 8,
+                          style: styles.toolbarAction,
+                          accessibilityRole: "button",
+                          accessibilityLabel: "Cancel selection",
+                          accessibilityHint: "Closes the picker without changing the selected value",
+                          children: /* @__PURE__ */ jsx17(Text8, { style: styles.cancelText, children: "Cancel" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx17(
+                        Text8,
+                        {
+                          style: styles.title,
+                          numberOfLines: 1,
+                          accessibilityRole: "header",
+                          children: resolvedLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsx17(
+                        Pressable7,
+                        {
+                          onPress: confirmPicker,
+                          hitSlop: 8,
+                          style: styles.toolbarAction,
+                          accessibilityRole: "button",
+                          accessibilityLabel: "Confirm selection",
+                          accessibilityHint: "Applies the highlighted picker value",
+                          children: /* @__PURE__ */ jsx17(Text8, { style: styles.doneText, children: "Done" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs9(
                   Picker,
                   {
                     selectedValue: draftValue,
@@ -1360,11 +1433,11 @@ Select.displayName = "Select";
 import { View as View14 } from "react-native";
 
 // src/components/Tabs/TabsContext.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var TabsContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var TabsContext = createContext4(null);
 var TabsProvider = TabsContext.Provider;
 var useTabs = () => {
-  const context = useContext3(TabsContext);
+  const context = useContext4(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used inside <Tabs>.");
   }
@@ -1441,7 +1514,7 @@ TabsPanel.displayName = "TabsPanel";
 
 // src/components/Tabs/Tab/Tab.tsx
 import { cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
-import { Pressable as Pressable9, Text as Text10, View as View16 } from "react-native";
+import { Pressable as Pressable8, Text as Text9, View as View16 } from "react-native";
 
 // src/components/Tabs/Tab/Tab.styles.ts
 import { StyleSheet as StyleSheet18 } from "react-native";
@@ -1511,7 +1584,7 @@ var createStyles18 = (theme) => StyleSheet18.create({
 });
 
 // src/components/Tabs/Tab/Tab.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var Tab = ({
   index,
   children,
@@ -1531,8 +1604,8 @@ var Tab = ({
   const renderedIcon = isValidElement3(icon) ? cloneElement3(icon, {
     color: iconColor
   }) : icon;
-  return /* @__PURE__ */ jsxs11(
-    Pressable9,
+  return /* @__PURE__ */ jsxs10(
+    Pressable8,
     {
       disabled,
       accessibilityRole: "tab",
@@ -1551,7 +1624,7 @@ var Tab = ({
       children: [
         icon != null && /* @__PURE__ */ jsx20(View16, { style: styles.tabIcon, children: renderedIcon }),
         children != null && /* @__PURE__ */ jsx20(
-          Text10,
+          Text9,
           {
             style: [
               styles.tabText,
@@ -1651,8 +1724,8 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState6 } from "react";
-import { Modal as Modal4, Pressable as Pressable10, Text as Text11, View as View18 } from "react-native";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { Modal as Modal4, Pressable as Pressable9, Text as Text10, View as View18 } from "react-native";
 
 // src/hooks/useNativeFloatingPosition.ts
 import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
@@ -1757,7 +1830,7 @@ var createStyles20 = (theme) => StyleSheet20.create({
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -1791,13 +1864,13 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     return clearCloseTimer;
   }, []);
-  return /* @__PURE__ */ jsxs12(View18, { style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx22(Pressable10, { ref: triggerRef, onLongPress: showTooltip, children }),
+  return /* @__PURE__ */ jsxs11(View18, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsx22(Pressable9, { ref: triggerRef, onLongPress: showTooltip, children }),
     /* @__PURE__ */ jsx22(Modal4, { visible: visible && !disabled, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx22(
-      Pressable10,
+      Pressable9,
       {
         style: styles.overlay,
         onPress: () => {
@@ -1818,7 +1891,7 @@ function Tooltip({
               contentStyle
             ],
             onLayout: onFloatingLayout,
-            children: typeof content === "string" ? /* @__PURE__ */ jsx22(Text11, { style: [styles.text, textStyle], children: content }) : content
+            children: typeof content === "string" ? /* @__PURE__ */ jsx22(Text10, { style: [styles.text, textStyle], children: content }) : content
           }
         )
       }
@@ -1829,7 +1902,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
 import { cloneElement as cloneElement4, useState as useState7 } from "react";
-import { ActivityIndicator, Pressable as Pressable11, Text as Text12 } from "react-native";
+import { ActivityIndicator, Pressable as Pressable10, Text as Text11 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -1884,7 +1957,7 @@ var createStyles21 = (theme) => StyleSheet21.create({
 });
 
 // src/primitives/Button/Button.tsx
-import { Fragment, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var sizeMap = {
   sm: {
     px: 12,
@@ -1968,7 +2041,7 @@ function Button({
   });
   const getInteractionTheme = (pressed) => isDisabled ? theme.components.button.disabled : pressed ? variantTheme.pressed : isHovered ? variantTheme.hover : variantTheme.default;
   return /* @__PURE__ */ jsx23(
-    Pressable11,
+    Pressable10,
     {
       ...props,
       testID,
@@ -2003,11 +2076,11 @@ function Button({
       children: ({ pressed }) => {
         const interactionTheme = getInteractionTheme(pressed);
         const contentColor = interactionTheme.fg;
-        return /* @__PURE__ */ jsxs13(Fragment, { children: [
+        return /* @__PURE__ */ jsxs12(Fragment, { children: [
           loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
           !loading && leftIcon && renderIcon(leftIcon, contentColor),
           content && !iconOnly && /* @__PURE__ */ jsx23(
-            Text12,
+            Text11,
             {
               style: [
                 styles.text,
@@ -2028,10 +2101,10 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import { useControllableState as useControllableState4 } from "@vellira-ui/core";
 import { Check } from "@vellira-ui/icons";
-import { Pressable as Pressable12, Text as Text13, View as View19 } from "react-native";
+import { Pressable as Pressable11, Text as Text12, View as View19 } from "react-native";
 
 // src/primitives/Checkbox/Checkbox.styles.ts
 import { StyleSheet as StyleSheet22 } from "react-native";
@@ -2143,13 +2216,13 @@ var createStyles22 = (theme) => StyleSheet22.create({
 });
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var iconSizeBySize = {
   sm: 10,
   md: 12,
   lg: 14
 };
-var Checkbox = forwardRef(
+var Checkbox = forwardRef2(
   ({
     label,
     description,
@@ -2201,9 +2274,9 @@ var Checkbox = forwardRef(
       Boolean(resolvedAccessibilityLabel),
       "Checkbox: an accessible label must be provided through label or accessibilityLabel."
     );
-    return /* @__PURE__ */ jsxs14(View19, { style: styles.container, children: [
-      /* @__PURE__ */ jsxs14(
-        Pressable12,
+    return /* @__PURE__ */ jsxs13(View19, { style: styles.container, children: [
+      /* @__PURE__ */ jsxs13(
+        Pressable11,
         {
           ...PressableProps,
           ref,
@@ -2236,8 +2309,8 @@ var Checkbox = forwardRef(
                 children: indeterminate ? /* @__PURE__ */ jsx24(View19, { style: styles.indeterminateMark }) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
               }
             ),
-            label && /* @__PURE__ */ jsxs14(
-              Text13,
+            label && /* @__PURE__ */ jsxs13(
+              Text12,
               {
                 style: [
                   styles.label,
@@ -2246,7 +2319,7 @@ var Checkbox = forwardRef(
                 ],
                 children: [
                   label,
-                  required && /* @__PURE__ */ jsx24(Text13, { style: styles.requiredMark, children: " *" })
+                  required && /* @__PURE__ */ jsx24(Text12, { style: styles.requiredMark, children: " *" })
                 ]
               }
             )
@@ -2254,7 +2327,7 @@ var Checkbox = forwardRef(
         }
       ),
       description && /* @__PURE__ */ jsx24(
-        Text13,
+        Text12,
         {
           style: [
             styles.descriptionText,
@@ -2264,15 +2337,15 @@ var Checkbox = forwardRef(
           children: description
         }
       ),
-      hasError && /* @__PURE__ */ jsx24(Text13, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
+      hasError && /* @__PURE__ */ jsx24(Text12, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
-import { cloneElement as cloneElement5, forwardRef as forwardRef2, useState as useState8 } from "react";
-import { Pressable as Pressable13, Text as Text14, TextInput, View as View20 } from "react-native";
+import { cloneElement as cloneElement5, forwardRef as forwardRef3, useState as useState8 } from "react";
+import { Pressable as Pressable12, Text as Text13, TextInput, View as View20 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
 import { StyleSheet as StyleSheet23 } from "react-native";
@@ -2385,7 +2458,7 @@ var createStyles23 = (theme) => StyleSheet23.create({
 });
 
 // src/primitives/Input/Input.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var keyboardTypeByInputType = {
   text: "default",
   email: "email-address",
@@ -2413,7 +2486,7 @@ var autoCorrectByInputType = {
   url: false,
   search: false
 };
-var Input = forwardRef2(
+var Input = forwardRef3(
   ({
     label,
     description,
@@ -2497,7 +2570,7 @@ var Input = forwardRef2(
         required,
         disabled,
         style: containerStyle,
-        children: /* @__PURE__ */ jsxs15(View20, { style: styles.inputWrapper, children: [
+        children: /* @__PURE__ */ jsxs14(View20, { style: styles.inputWrapper, children: [
           leftIcon && /* @__PURE__ */ jsx25(
             View20,
             {
@@ -2548,7 +2621,7 @@ var Input = forwardRef2(
             }
           ),
           showClearButton ? /* @__PURE__ */ jsx25(
-            Pressable13,
+            Pressable12,
             {
               accessibilityRole: "button",
               accessibilityLabel: "Clear input",
@@ -2559,7 +2632,7 @@ var Input = forwardRef2(
                 color: clearIconColor,
                 size: resolvedIconSize
               }) : /* @__PURE__ */ jsx25(
-                Text14,
+                Text13,
                 {
                   style: [styles.clearButtonText, { color: clearIconColor }],
                   children: "\xD7"
@@ -2585,6 +2658,292 @@ var Input = forwardRef2(
   }
 );
 Input.displayName = "Input";
+
+// src/primitives/Radio/Radio.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect4 } from "react";
+import { useControllableState as useControllableState5 } from "@vellira-ui/core";
+import {
+  Pressable as Pressable13,
+  Text as Text14,
+  View as View21
+} from "react-native";
+
+// src/primitives/Radio/Radio.styles.ts
+import { StyleSheet as StyleSheet24 } from "react-native";
+var createStyles24 = (theme) => StyleSheet24.create({
+  root: {
+    alignSelf: "flex-start"
+  },
+  pressable: {
+    minWidth: 32,
+    minHeight: 32,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.tokens.spacing[2]
+  },
+  pressablePressed: {
+    opacity: 0.8
+  },
+  pressableDisabled: {
+    opacity: 1
+  },
+  control: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: theme.tokens.radius.full,
+    borderColor: theme.components.radio.default.border,
+    backgroundColor: theme.components.radio.default.bg
+  },
+  controlChecked: {
+    borderColor: theme.components.radio.checked.default.border,
+    backgroundColor: theme.components.radio.default.bg
+  },
+  controlInvalid: {
+    borderColor: theme.components.radio.invalid.border
+  },
+  controlDisabled: {
+    borderColor: theme.components.radio.disabled.border,
+    backgroundColor: theme.components.radio.disabled.bg
+  },
+  indicator: {
+    borderRadius: theme.tokens.radius.full,
+    backgroundColor: theme.components.radio.checked.default.bg
+  },
+  indicatorDisabled: {
+    backgroundColor: theme.components.radio.checked.disabled.bg
+  },
+  content: {
+    flexShrink: 1,
+    gap: theme.tokens.spacing[1]
+  },
+  label: {
+    color: theme.components.radio.default.fg,
+    fontFamily: theme.tokens.typography.family.regular
+  },
+  labelChecked: {
+    color: theme.components.radio.checked.default.fg
+  },
+  labelInvalid: {
+    color: theme.components.radio.invalid.fg
+  },
+  description: {
+    color: theme.components.formField.description.fg,
+    fontFamily: theme.tokens.typography.family.regular
+  },
+  textDisabled: {
+    color: theme.components.radio.disabled.fg
+  },
+  error: {
+    color: theme.components.formField.helperText.error.fg,
+    fontFamily: theme.tokens.typography.family.regular
+  }
+});
+
+// src/primitives/Radio/Radio.tsx
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var controlSizeBySize = {
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+var indicatorSizeBySize = {
+  sm: 6,
+  md: 8,
+  lg: 10
+};
+var Radio = forwardRef4(
+  ({
+    value,
+    checked,
+    defaultChecked = false,
+    disabled: disabledProp = false,
+    required: requiredProp = false,
+    size: sizeProp,
+    onCheckedChange,
+    label,
+    description,
+    error,
+    accessibilityLabel,
+    accessibilityHint,
+    containerStyle,
+    labelStyle,
+    descriptionStyle,
+    errorStyle,
+    style,
+    ...rest
+  }, ref) => {
+    const { theme } = useTheme();
+    const styles = createStyles24(theme);
+    const group = useRadioGroupContext();
+    const isInsideGroup = group !== null;
+    const [standaloneChecked, setStandaloneChecked] = useControllableState5({
+      value: checked,
+      defaultValue: defaultChecked,
+      onChange: onCheckedChange
+    });
+    const resolvedChecked = isInsideGroup ? group.value === value : standaloneChecked;
+    const resolvedDisabled = Boolean(group?.disabled) || disabledProp;
+    const resolvedRequired = Boolean(group?.required) || requiredProp;
+    const resolvedInvalid = Boolean(group?.invalid) || Boolean(error);
+    const resolvedSize = sizeProp ?? group?.size ?? "md";
+    const controlSize = controlSizeBySize[resolvedSize];
+    const indicatorSize = indicatorSizeBySize[resolvedSize];
+    const typographySizeByRadioSize = {
+      sm: {
+        labelSize: theme.tokens.typography.size.sm,
+        labelLineHeight: theme.tokens.typography.lineHeight.sm,
+        descriptionSize: theme.tokens.typography.size.xs,
+        descriptionLineHeight: theme.tokens.typography.lineHeight.xs
+      },
+      md: {
+        labelSize: theme.tokens.typography.size.md,
+        labelLineHeight: theme.tokens.typography.lineHeight.md,
+        descriptionSize: theme.tokens.typography.size.sm,
+        descriptionLineHeight: theme.tokens.typography.lineHeight.sm
+      },
+      lg: {
+        labelSize: theme.tokens.typography.size.lg,
+        labelLineHeight: theme.tokens.typography.lineHeight.lg,
+        descriptionSize: theme.tokens.typography.size.md,
+        descriptionLineHeight: theme.tokens.typography.lineHeight.md
+      }
+    };
+    const typographySize = typographySizeByRadioSize[resolvedSize];
+    const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
+    useEffect4(() => {
+      if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
+        console.warn(
+          "Radio requires either a visible label or accessibilityLabel."
+        );
+      }
+    }, [accessibilityLabel, label]);
+    const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    const resolvedAccessibilityHint = (accessibilityHint ?? [
+      typeof description === "string" ? description : void 0,
+      resolvedRequired ? "Required." : void 0,
+      error
+    ].filter((item) => Boolean(item)).join(" ")) || void 0;
+    const handlePress = () => {
+      if (resolvedDisabled || resolvedChecked) {
+        return;
+      }
+      if (isInsideGroup) {
+        group.onValueChange(value);
+        return;
+      }
+      setStandaloneChecked(true);
+    };
+    const resolvePressableStyle = (state) => [
+      styles.pressable,
+      resolvedDisabled && styles.pressableDisabled,
+      state.pressed && !resolvedDisabled && styles.pressablePressed,
+      typeof style === "function" ? style(state) : style
+    ];
+    return /* @__PURE__ */ jsxs15(View21, { style: [styles.root, containerStyle], children: [
+      /* @__PURE__ */ jsxs15(
+        Pressable13,
+        {
+          ...rest,
+          ref,
+          accessibilityRole: "radio",
+          accessibilityLabel: resolvedAccessibilityLabel,
+          accessibilityHint: resolvedAccessibilityHint,
+          accessibilityState: {
+            checked: resolvedChecked,
+            disabled: resolvedDisabled
+          },
+          disabled: resolvedDisabled,
+          onPress: handlePress,
+          style: resolvePressableStyle,
+          children: [
+            /* @__PURE__ */ jsx26(
+              View21,
+              {
+                pointerEvents: "none",
+                style: [
+                  styles.control,
+                  {
+                    width: controlSize,
+                    height: controlSize,
+                    marginTop: controlMarginTop
+                  },
+                  resolvedChecked && styles.controlChecked,
+                  resolvedInvalid && styles.controlInvalid,
+                  resolvedDisabled && styles.controlDisabled
+                ],
+                children: resolvedChecked && /* @__PURE__ */ jsx26(
+                  View21,
+                  {
+                    style: [
+                      styles.indicator,
+                      {
+                        width: indicatorSize,
+                        height: indicatorSize
+                      },
+                      resolvedDisabled && styles.indicatorDisabled
+                    ]
+                  }
+                )
+              }
+            ),
+            (label || description) && /* @__PURE__ */ jsxs15(View21, { pointerEvents: "none", style: styles.content, children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx26(
+                Text14,
+                {
+                  style: [
+                    styles.label,
+                    {
+                      fontSize: typographySize.labelSize,
+                      lineHeight: typographySize.labelLineHeight
+                    },
+                    resolvedChecked && styles.labelChecked,
+                    resolvedInvalid && styles.labelInvalid,
+                    resolvedDisabled && styles.textDisabled,
+                    labelStyle
+                  ],
+                  children: label
+                }
+              ) : label),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx26(
+                Text14,
+                {
+                  style: [
+                    styles.description,
+                    {
+                      fontSize: typographySize.descriptionSize,
+                      lineHeight: typographySize.descriptionLineHeight
+                    },
+                    resolvedDisabled && styles.textDisabled,
+                    descriptionStyle
+                  ],
+                  children: description
+                }
+              ) : description)
+            ] })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx26(
+        Text14,
+        {
+          accessibilityLiveRegion: "polite",
+          style: [
+            styles.error,
+            {
+              marginLeft: controlSize + theme.tokens.spacing[2],
+              fontSize: typographySize.descriptionSize,
+              lineHeight: typographySize.descriptionLineHeight
+            },
+            errorStyle
+          ],
+          children: error
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
 export {
   Button,
   Checkbox,
@@ -2592,6 +2951,7 @@ export {
   FormField,
   Input,
   Modal2 as Modal,
+  Radio,
   RadioGroup,
   Select,
   Tabs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.23.0",
+  "version": "2.25.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",