@vellira-ui/react-native 2.22.5 → 2.24.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
@@ -42,11 +43,17 @@ import { View } from 'react-native';
 
 export function Example() {
   const [email, setEmail] = useState('');
+  const [accepted, setAccepted] = useState(false);
 
   return (
     <View style={{ gap: 16 }}>
       <Input label='Email' value={email} onChange={setEmail} />
-      <Checkbox label='Accept terms' />
+      <Checkbox
+        label='Accept terms'
+        description='Required to create an account.'
+        checked={accepted}
+        onCheckedChange={setAccepted}
+      />
       <Button color='primary' variant='solid'>
         Continue
       </Button>
@@ -69,6 +76,21 @@ Button icons are React elements from `@vellira-ui/icons`; the component injects
 the current icon color and size. `loading` disables interaction and can replace
 the visible label with `loadingText`.
 
+### Checkbox Notes
+
+Use `description` for settings-style helper text when the checkbox is not
+wrapped in `FormField`. For checkbox rows without a visible label, provide
+`accessibilityLabel`.
+
+### 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 { 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";
@@ -1106,7 +1075,7 @@ 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,
@@ -1120,8 +1089,8 @@ function SelectTrigger({
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles14);
-  return /* @__PURE__ */ jsxs9(
-    Pressable7,
+  return /* @__PURE__ */ jsxs8(
+    Pressable6,
     {
       disabled,
       accessibilityRole: "button",
@@ -1141,7 +1110,7 @@ function SelectTrigger({
       ],
       children: [
         /* @__PURE__ */ jsx16(
-          Text8,
+          Text7,
           {
             numberOfLines: 1,
             style: [
@@ -1226,7 +1195,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,
@@ -1274,7 +1243,7 @@ function Select({
     setSelectedValue(draftValue);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     FormField,
     {
       label,
@@ -1305,15 +1274,15 @@ 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" }) })
+            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, children: [
+                  /* @__PURE__ */ jsx17(Pressable7, { onPress: closePicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text8, { style: styles.cancelText, children: "Cancel" }) }),
+                  /* @__PURE__ */ jsx17(Text8, { style: styles.title, children: resolvedLabel }),
+                  /* @__PURE__ */ jsx17(Pressable7, { onPress: confirmPicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text8, { style: styles.doneText, children: "Done" }) })
                 ] }),
-                /* @__PURE__ */ jsxs10(
+                /* @__PURE__ */ jsxs9(
                   Picker,
                   {
                     selectedValue: draftValue,
@@ -1360,11 +1329,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 +1410,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 +1480,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 +1500,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 +1520,7 @@ var Tab = ({
       children: [
         icon != null && /* @__PURE__ */ jsx20(View16, { style: styles.tabIcon, children: renderedIcon }),
         children != null && /* @__PURE__ */ jsx20(
-          Text10,
+          Text9,
           {
             style: [
               styles.tabText,
@@ -1652,7 +1621,7 @@ 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 { 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 +1726,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,
@@ -1794,10 +1763,10 @@ function Tooltip({
   useEffect2(() => {
     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 +1787,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 +1798,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 +1853,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 +1937,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 +1972,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,31 +1997,53 @@ 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";
 var createStyles22 = (theme) => StyleSheet22.create({
+  container: {
+    gap: theme.tokens.spacing[2]
+  },
   wrapper: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.tokens.spacing[3]
   },
+  iconOnly: {
+    justifyContent: "center",
+    minWidth: 44,
+    minHeight: 44
+  },
   disabled: {
     opacity: 1
   },
   box: {
-    width: 22,
-    height: 22,
-    borderWidth: 2,
-    borderColor: theme.components.checkbox.default.border,
-    borderRadius: theme.tokens.radius.md,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.components.checkbox.default.bg
+    backgroundColor: theme.components.checkbox.default.bg,
+    borderWidth: 2,
+    borderColor: theme.components.checkbox.default.border,
+    borderRadius: theme.tokens.radius.xs
+  },
+  boxSm: {
+    width: 16,
+    height: 16,
+    borderWidth: 1
+  },
+  boxMd: {
+    width: 20,
+    height: 20,
+    borderWidth: 2
+  },
+  boxLg: {
+    width: 24,
+    height: 24,
+    borderWidth: 2
   },
   boxChecked: {
     backgroundColor: theme.components.checkbox.checked.default.bg,
@@ -2065,40 +2056,102 @@ var createStyles22 = (theme) => StyleSheet22.create({
   boxError: {
     borderColor: theme.components.checkbox.error.border
   },
+  indeterminateMark: {
+    width: "60%",
+    height: 2,
+    backgroundColor: theme.components.checkbox.checked.default.fg,
+    borderRadius: theme.tokens.radius.full
+  },
   label: {
+    flexShrink: 1,
     fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.md,
     color: theme.components.checkbox.default.fg
   },
+  labelSm: {
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  labelMd: {
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  labelLg: {
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.lg
+  },
   labelDisabled: {
     color: theme.components.checkbox.disabled.fg
   },
-  container: {
-    gap: theme.tokens.spacing[2]
+  requiredMark: {
+    color: theme.components.checkbox.error.fg
+  },
+  descriptionText: {
+    color: theme.components.formField.description.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  descriptionTextDisabled: {
+    color: theme.components.formField.disabled.descriptionFg
   },
   errorText: {
     color: theme.components.checkbox.error.fg,
+    fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.sm,
-    lineHeight: theme.tokens.typography.lineHeight.sm,
-    marginLeft: 22 + theme.tokens.spacing[3]
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  errorTextSm: {
+    marginLeft: 16 + theme.tokens.spacing[3]
+  },
+  errorTextMd: {
+    marginLeft: 20 + theme.tokens.spacing[3]
+  },
+  errorTextLg: {
+    marginLeft: 24 + theme.tokens.spacing[3]
   }
 });
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = forwardRef(
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+var iconSizeBySize = {
+  sm: 10,
+  md: 12,
+  lg: 14
+};
+var Checkbox = forwardRef2(
   ({
     label,
+    description,
     checked,
     defaultChecked = false,
     disabled = false,
+    required = false,
+    indeterminate = false,
+    size = "md",
     onCheckedChange,
     error,
     style,
-    ...props
+    accessibilityLabel,
+    accessibilityHint,
+    ...PressableProps
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles22);
+    const boxSizeStyle = {
+      sm: styles.boxSm,
+      md: styles.boxMd,
+      lg: styles.boxLg
+    };
+    const labelSizeStyle = {
+      sm: styles.labelSm,
+      md: styles.labelMd,
+      lg: styles.labelLg
+    };
+    const helperTextSizeStyle = {
+      sm: styles.errorTextSm,
+      md: styles.errorTextMd,
+      lg: styles.errorTextLg
+    };
     const hasError = Boolean(error);
     const [isChecked, setIsChecked] = useControllableState4({
       value: checked,
@@ -2107,51 +2160,88 @@ var Checkbox = forwardRef(
     });
     const handlePress = () => {
       if (disabled) return;
-      setIsChecked(!isChecked);
+      setIsChecked(indeterminate ? true : !isChecked);
     };
+    const resolvedAccessibilityLabel = accessibilityLabel ?? label;
+    const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
+    const accessibilityChecked = indeterminate ? "mixed" : isChecked;
     const checkColor = disabled ? theme.components.checkbox.disabled.fg : theme.components.checkbox.checked.default.fg;
-    return /* @__PURE__ */ jsxs14(View19, { style: styles.container, children: [
-      /* @__PURE__ */ jsxs14(
-        Pressable12,
+    devWarning(
+      Boolean(resolvedAccessibilityLabel),
+      "Checkbox: an accessible label must be provided through label or accessibilityLabel."
+    );
+    return /* @__PURE__ */ jsxs13(View19, { style: styles.container, children: [
+      /* @__PURE__ */ jsxs13(
+        Pressable11,
         {
+          ...PressableProps,
           ref,
           onPress: handlePress,
           disabled,
           accessibilityRole: "checkbox",
           accessibilityState: {
-            checked: isChecked,
+            checked: accessibilityChecked,
             disabled
           },
-          accessibilityHint: hasError ? error : void 0,
-          accessibilityLabel: label ?? "Checkbox",
-          style: [styles.wrapper, disabled && styles.disabled, style],
-          ...props,
+          accessibilityHint: resolvedAccessibilityHint || void 0,
+          accessibilityLabel: resolvedAccessibilityLabel,
+          style: [
+            styles.wrapper,
+            !label && styles.iconOnly,
+            disabled && styles.disabled,
+            style
+          ],
           children: [
             /* @__PURE__ */ jsx24(
               View19,
               {
                 style: [
                   styles.box,
-                  isChecked && styles.boxChecked,
+                  boxSizeStyle[size],
+                  (isChecked || indeterminate) && styles.boxChecked,
                   hasError && styles.boxError,
                   disabled && styles.boxDisabled
                 ],
-                children: isChecked && /* @__PURE__ */ jsx24(Check, { size: 12, color: checkColor })
+                children: indeterminate ? /* @__PURE__ */ jsx24(View19, { style: styles.indeterminateMark }) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
               }
             ),
-            label && /* @__PURE__ */ jsx24(Text13, { style: [styles.label, disabled && styles.labelDisabled], children: label })
+            label && /* @__PURE__ */ jsxs13(
+              Text12,
+              {
+                style: [
+                  styles.label,
+                  labelSizeStyle[size],
+                  disabled && styles.labelDisabled
+                ],
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsx24(Text12, { style: styles.requiredMark, children: " *" })
+                ]
+              }
+            )
           ]
         }
       ),
-      hasError && /* @__PURE__ */ jsx24(Text13, { style: styles.errorText, children: error })
+      description && /* @__PURE__ */ jsx24(
+        Text12,
+        {
+          style: [
+            styles.descriptionText,
+            helperTextSizeStyle[size],
+            disabled && styles.descriptionTextDisabled
+          ],
+          children: description
+        }
+      ),
+      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";
@@ -2264,7 +2354,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",
@@ -2292,7 +2382,7 @@ var autoCorrectByInputType = {
   url: false,
   search: false
 };
-var Input = forwardRef2(
+var Input = forwardRef3(
   ({
     label,
     description,
@@ -2376,7 +2466,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,
             {
@@ -2427,7 +2517,7 @@ var Input = forwardRef2(
             }
           ),
           showClearButton ? /* @__PURE__ */ jsx25(
-            Pressable13,
+            Pressable12,
             {
               accessibilityRole: "button",
               accessibilityLabel: "Clear input",
@@ -2438,7 +2528,7 @@ var Input = forwardRef2(
                 color: clearIconColor,
                 size: resolvedIconSize
               }) : /* @__PURE__ */ jsx25(
-                Text14,
+                Text13,
                 {
                   style: [styles.clearButtonText, { color: clearIconColor }],
                   children: "\xD7"
@@ -2464,6 +2554,292 @@ var Input = forwardRef2(
   }
 );
 Input.displayName = "Input";
+
+// src/primitives/Radio/Radio.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect3 } 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;
+    useEffect3(() => {
+      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,
@@ -2471,6 +2847,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.22.5",
+  "version": "2.24.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",
@@ -49,12 +49,12 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.10",
     "jsdom": "^28.1.0",
     "react": "19.2.7",
     "tsup": "^8.5.1",
     "typescript": "6.0.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "access": "public"