@vellira-ui/react-native 2.27.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(
@@ -2503,6 +2505,9 @@ var createStyles22 = (theme) => StyleSheet22.create({
     alignItems: "center",
     gap: theme.tokens.spacing[3]
   },
+  wrapperLabelStart: {
+    flexDirection: "row-reverse"
+  },
   iconOnly: {
     justifyContent: "center",
     minWidth: 44,
@@ -2536,16 +2541,16 @@ var createStyles22 = (theme) => StyleSheet22.create({
     borderWidth: 2
   },
   boxChecked: {
-    backgroundColor: theme.components.checkbox.checked.default.bg,
-    borderColor: theme.components.checkbox.checked.default.border
+    backgroundColor: theme.components.checkbox.primary.default.bg,
+    borderColor: theme.components.checkbox.primary.default.border
   },
   boxCheckedHover: {
-    backgroundColor: theme.components.checkbox.checked.hover.bg,
-    borderColor: theme.components.checkbox.checked.hover.border
+    backgroundColor: theme.components.checkbox.primary.hover.bg,
+    borderColor: theme.components.checkbox.primary.hover.border
   },
   boxCheckedPressed: {
-    backgroundColor: theme.components.checkbox.checked.pressed.bg,
-    borderColor: theme.components.checkbox.checked.pressed.border
+    backgroundColor: theme.components.checkbox.primary.pressed.bg,
+    borderColor: theme.components.checkbox.primary.pressed.border
   },
   boxDisabled: {
     backgroundColor: theme.components.checkbox.disabled.bg,
@@ -2555,25 +2560,25 @@ var createStyles22 = (theme) => StyleSheet22.create({
     borderColor: theme.components.checkbox.error.border
   },
   checkmark: {
-    color: theme.components.checkbox.checked.default.fg
+    color: theme.components.checkbox.primary.default.fg
   },
   checkmarkHover: {
-    color: theme.components.checkbox.checked.hover.fg
+    color: theme.components.checkbox.primary.hover.fg
   },
   checkmarkPressed: {
-    color: theme.components.checkbox.checked.pressed.fg
+    color: theme.components.checkbox.primary.pressed.fg
   },
   indeterminateMark: {
     width: "60%",
     height: 2,
-    backgroundColor: theme.components.checkbox.checked.default.fg,
+    backgroundColor: theme.components.checkbox.primary.default.fg,
     borderRadius: theme.tokens.radius.full
   },
   indeterminateMarkHover: {
-    backgroundColor: theme.components.checkbox.checked.hover.fg
+    backgroundColor: theme.components.checkbox.primary.hover.fg
   },
   indeterminateMarkPressed: {
-    backgroundColor: theme.components.checkbox.checked.pressed.fg
+    backgroundColor: theme.components.checkbox.primary.pressed.fg
   },
   label: {
     flexShrink: 1,
@@ -2581,13 +2586,13 @@ var createStyles22 = (theme) => StyleSheet22.create({
     color: theme.components.checkbox.default.fg
   },
   labelChecked: {
-    color: theme.components.checkbox.checked.default.labelFg
+    color: theme.components.checkbox.primary.default.labelFg
   },
   labelCheckedHover: {
-    color: theme.components.checkbox.checked.hover.labelFg
+    color: theme.components.checkbox.primary.hover.labelFg
   },
   labelCheckedPressed: {
-    color: theme.components.checkbox.checked.pressed.labelFg
+    color: theme.components.checkbox.primary.pressed.labelFg
   },
   labelSm: {
     fontSize: theme.tokens.typography.size.sm,
@@ -2644,12 +2649,16 @@ var Checkbox = forwardRef2(
   ({
     label,
     description,
+    icon,
+    indeterminateIcon,
     checked,
     defaultChecked = false,
     disabled = false,
     required = false,
     indeterminate = false,
     size = "md",
+    color = "primary",
+    labelPosition = "end",
     onCheckedChange,
     error,
     style,
@@ -2659,6 +2668,7 @@ var Checkbox = forwardRef2(
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles22);
+    const checkboxColor = theme.components.checkbox[color];
     const boxSizeStyle = {
       sm: styles.boxSm,
       md: styles.boxMd,
@@ -2710,13 +2720,14 @@ var Checkbox = forwardRef2(
           accessibilityLabel: resolvedAccessibilityLabel,
           style: [
             styles.wrapper,
+            labelPosition === "start" && styles.wrapperLabelStart,
             !label && styles.iconOnly,
             disabled && styles.disabled,
             style
           ],
           children: ({ pressed }) => {
             const isSelected = isChecked || indeterminate;
-            const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? theme.components.checkbox.checked.pressed.fg : theme.components.checkbox.checked.default.fg;
+            const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? checkboxColor.pressed.fg : checkboxColor.default.fg;
             return /* @__PURE__ */ jsxs13(Fragment4, { children: [
               /* @__PURE__ */ jsx24(
                 View20,
@@ -2724,20 +2735,29 @@ var Checkbox = forwardRef2(
                   style: [
                     styles.box,
                     boxSizeStyle[size],
-                    isSelected && styles.boxChecked,
-                    isSelected && pressed && styles.boxCheckedPressed,
+                    isSelected && {
+                      backgroundColor: checkboxColor.default.bg,
+                      borderColor: checkboxColor.default.border
+                    },
+                    isSelected && pressed && {
+                      backgroundColor: checkboxColor.pressed.bg,
+                      borderColor: checkboxColor.pressed.border,
+                      transform: [{ scale: 0.96 }]
+                    },
                     hasError && styles.boxError,
                     disabled && styles.boxDisabled
                   ],
-                  children: indeterminate ? /* @__PURE__ */ jsx24(
+                  children: indeterminate ? indeterminateIcon ?? /* @__PURE__ */ jsx24(
                     View20,
                     {
                       style: [
                         styles.indeterminateMark,
-                        pressed && styles.indeterminateMarkPressed
+                        {
+                          backgroundColor: pressed ? checkboxColor.pressed.fg : checkboxColor.default.fg
+                        }
                       ]
                     }
-                  ) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
+                  ) : isChecked && (icon ?? /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor }))
                 }
               ),
               label && /* @__PURE__ */ jsxs13(
@@ -2746,8 +2766,10 @@ var Checkbox = forwardRef2(
                   style: [
                     styles.label,
                     labelSizeStyle[size],
-                    isSelected && styles.labelChecked,
-                    isSelected && pressed && styles.labelCheckedPressed,
+                    isSelected && { color: checkboxColor.default.labelFg },
+                    isSelected && pressed && {
+                      color: checkboxColor.pressed.labelFg
+                    },
                     disabled && styles.labelDisabled
                   ],
                   children: [
@@ -3164,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
@@ -3179,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,
@@ -3201,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
@@ -3223,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,
@@ -3242,9 +3264,11 @@ var Radio = forwardRef4(
     disabled: disabledProp = false,
     required: requiredProp = false,
     size: sizeProp,
+    color: colorProp,
     onCheckedChange,
     label,
     description,
+    icon,
     error,
     accessibilityLabel,
     accessibilityHint,
@@ -3269,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 = {
@@ -3323,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,
@@ -3338,7 +3364,7 @@ var Radio = forwardRef4(
           disabled: resolvedDisabled,
           onPress: handlePress,
           style: resolvePressableStyle,
-          children: [
+          children: (state) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
             /* @__PURE__ */ jsx26(
               View22,
               {
@@ -3350,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: [
@@ -3379,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
@@ -3403,7 +3444,7 @@ var Radio = forwardRef4(
                 }
               ) : description)
             ] })
-          ]
+          ] })
         }
       ),
       error && /* @__PURE__ */ jsx26(

package/package.json

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