@vellira-ui/react-native 2.28.0 → 2.29.0

package/dist/index.js

@@ -1118,6 +1118,7 @@ var RadioGroup = forwardRef(
     disabled = false,
     required = false,
     size = "md",
+    color = "primary",
     orientation = "vertical",
     label,
     description,
@@ -1166,6 +1167,7 @@ var RadioGroup = forwardRef(
               required,
               invalid,
               size,
+              color,
               onValueChange: setSelectedValue
             },
             children: /* @__PURE__ */ jsx15(
@@ -3184,12 +3186,12 @@ var createStyles24 = (theme) => StyleSheet24.create({
     backgroundColor: theme.components.radio.default.bg
   },
   controlChecked: {
-    borderColor: theme.components.radio.checked.default.border,
-    backgroundColor: theme.components.radio.checked.default.bg
+    borderColor: theme.components.radio.primary.default.border,
+    backgroundColor: theme.components.radio.primary.default.bg
   },
   controlCheckedPressed: {
-    borderColor: theme.components.radio.checked.pressed.border,
-    backgroundColor: theme.components.radio.checked.pressed.bg
+    borderColor: theme.components.radio.primary.pressed.border,
+    backgroundColor: theme.components.radio.primary.pressed.bg
   },
   controlInvalid: {
     borderColor: theme.components.radio.invalid.border
@@ -3199,18 +3201,18 @@ var createStyles24 = (theme) => StyleSheet24.create({
     backgroundColor: theme.components.radio.disabled.bg
   },
   controlCheckedDisabled: {
-    borderColor: theme.components.radio.checked.disabled.border,
-    backgroundColor: theme.components.radio.checked.disabled.bg
+    borderColor: theme.components.radio.selectedDisabled.border,
+    backgroundColor: theme.components.radio.selectedDisabled.bg
   },
   indicator: {
     borderRadius: theme.tokens.radius.full,
-    backgroundColor: theme.components.radio.checked.default.fg
+    backgroundColor: theme.components.radio.primary.default.fg
   },
   indicatorPressed: {
-    backgroundColor: theme.components.radio.checked.pressed.fg
+    backgroundColor: theme.components.radio.primary.pressed.fg
   },
   indicatorDisabled: {
-    backgroundColor: theme.components.radio.checked.disabled.fg
+    backgroundColor: theme.components.radio.selectedDisabled.fg
   },
   content: {
     flexShrink: 1,
@@ -3221,10 +3223,10 @@ var createStyles24 = (theme) => StyleSheet24.create({
     fontFamily: theme.tokens.typography.family.regular
   },
   labelChecked: {
-    color: theme.components.radio.checked.default.labelFg
+    color: theme.components.radio.primary.default.labelFg
   },
   labelCheckedPressed: {
-    color: theme.components.radio.checked.pressed.labelFg
+    color: theme.components.radio.primary.pressed.labelFg
   },
   labelInvalid: {
     color: theme.components.radio.invalid.fg
@@ -3243,7 +3245,7 @@ var createStyles24 = (theme) => StyleSheet24.create({
 });
 
 // src/primitives/Radio/Radio.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var controlSizeBySize = {
   sm: 14,
   md: 16,
@@ -3262,9 +3264,11 @@ var Radio = forwardRef4(
     disabled: disabledProp = false,
     required: requiredProp = false,
     size: sizeProp,
+    color: colorProp,
     onCheckedChange,
     label,
     description,
+    icon,
     error,
     accessibilityLabel,
     accessibilityHint,
@@ -3289,6 +3293,8 @@ var Radio = forwardRef4(
     const resolvedRequired = Boolean(group?.required) || requiredProp;
     const resolvedInvalid = Boolean(group?.invalid) || Boolean(error);
     const resolvedSize = sizeProp ?? group?.size ?? "md";
+    const resolvedColor = colorProp ?? group?.color ?? "primary";
+    const radioColor = theme.components.radio[resolvedColor];
     const controlSize = controlSizeBySize[resolvedSize];
     const indicatorSize = indicatorSizeBySize[resolvedSize];
     const typographySizeByRadioSize = {
@@ -3343,7 +3349,7 @@ var Radio = forwardRef4(
       typeof style === "function" ? style(state) : style
     ];
     return /* @__PURE__ */ jsxs15(View22, { style: [styles.root, containerStyle], children: [
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsx26(
         Pressable13,
         {
           ...rest,
@@ -3358,7 +3364,7 @@ var Radio = forwardRef4(
           disabled: resolvedDisabled,
           onPress: handlePress,
           style: resolvePressableStyle,
-          children: [
+          children: (state) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
             /* @__PURE__ */ jsx26(
               View22,
               {
@@ -3370,23 +3376,33 @@ var Radio = forwardRef4(
                     height: controlSize,
                     marginTop: controlMarginTop
                   },
-                  resolvedChecked && styles.controlChecked,
+                  resolvedChecked && {
+                    backgroundColor: radioColor.default.bg,
+                    borderColor: radioColor.default.border
+                  },
+                  resolvedChecked && state.pressed && !resolvedDisabled && {
+                    backgroundColor: radioColor.pressed.bg,
+                    borderColor: radioColor.pressed.border,
+                    transform: [{ scale: 0.96 }]
+                  },
                   resolvedInvalid && styles.controlInvalid,
-                  resolvedDisabled && styles.controlDisabled
+                  resolvedDisabled && styles.controlDisabled,
+                  resolvedChecked && resolvedDisabled && styles.controlCheckedDisabled
                 ],
-                children: resolvedChecked && /* @__PURE__ */ jsx26(
+                children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx26(
                   View22,
                   {
                     style: [
                       styles.indicator,
                       {
                         width: indicatorSize,
-                        height: indicatorSize
+                        height: indicatorSize,
+                        backgroundColor: state.pressed && !resolvedDisabled ? radioColor.pressed.fg : radioColor.default.fg
                       },
                       resolvedDisabled && styles.indicatorDisabled
                     ]
                   }
-                )
+                ))
               }
             ),
             (label || description) && /* @__PURE__ */ jsxs15(View22, { pointerEvents: "none", style: styles.content, children: [
@@ -3399,7 +3415,12 @@ var Radio = forwardRef4(
                       fontSize: typographySize.labelSize,
                       lineHeight: typographySize.labelLineHeight
                     },
-                    resolvedChecked && styles.labelChecked,
+                    resolvedChecked && {
+                      color: radioColor.default.labelFg
+                    },
+                    resolvedChecked && state.pressed && !resolvedDisabled && {
+                      color: radioColor.pressed.labelFg
+                    },
                     resolvedInvalid && styles.labelInvalid,
                     resolvedDisabled && styles.textDisabled,
                     labelStyle
@@ -3423,7 +3444,7 @@ var Radio = forwardRef4(
                 }
               ) : description)
             ] })
-          ]
+          ] })
         }
       ),
       error && /* @__PURE__ */ jsx26(

package/package.json

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