@vellira-ui/react-native 2.27.0 → 2.28.0

package/dist/index.js

@@ -2503,6 +2503,9 @@ var createStyles22 = (theme) => StyleSheet22.create({
     alignItems: "center",
     gap: theme.tokens.spacing[3]
   },
+  wrapperLabelStart: {
+    flexDirection: "row-reverse"
+  },
   iconOnly: {
     justifyContent: "center",
     minWidth: 44,
@@ -2536,16 +2539,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 +2558,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 +2584,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 +2647,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 +2666,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 +2718,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 +2733,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 +2764,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: [

package/package.json

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