@idealyst/components 1.2.100 → 1.2.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.100",
+  "version": "1.2.101",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.100",
+    "@idealyst/theme": "^1.2.101",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,8 +107,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.100",
-    "@idealyst/tooling": "^1.2.100",
+    "@idealyst/theme": "^1.2.101",
+    "@idealyst/tooling": "^1.2.101",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Checkbox/Checkbox.native.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, forwardRef, useMemo } from 'react';
+import { useState, useEffect, forwardRef, useMemo, memo } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { CheckboxProps } from './types';
@@ -6,6 +6,28 @@ import { checkboxStyles } from './Checkbox.styles';
 import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
 import type { IdealystElement } from '../utils/refTypes';
 
+/**
+ * Isolated checkmark icon component.
+ * Uses the resolved checkmark style as the single source of truth for sizing,
+ * reducing rerenders on the parent Checkbox component.
+ */
+const CheckmarkIcon = memo(({ indeterminate, checked }: { indeterminate: boolean; checked: boolean }) => {
+  const checkmarkStyle = (checkboxStyles.checkmark as any)({ checked });
+  const iconSize = (typeof checkmarkStyle?.width === 'number' ? checkmarkStyle.width : 14);
+
+  return (
+    <View style={checkmarkStyle}>
+      <MaterialDesignIcons
+        name={indeterminate ? 'minus' : 'check'}
+        size={iconSize}
+        color="#ffffff"
+      />
+    </View>
+  );
+});
+
+CheckmarkIcon.displayName = 'CheckmarkIcon';
+
 const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   checked = false,
   indeterminate = false,
@@ -105,7 +127,6 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
   const wrapperStyle = (checkboxStyles.wrapper as any)({});
   const containerStyle = (checkboxStyles.container as any)({});
   const checkboxStyle = (checkboxStyles.checkbox as any)({ intent, checked: internalChecked, disabled, type: variant });
-  const checkmarkStyle = (checkboxStyles.checkmark as any)({ checked: internalChecked });
   const labelStyle = (checkboxStyles.label as any)({ disabled });
   const helperTextStyle = (checkboxStyles.helperText as any)({ error: !!error });
 
@@ -120,12 +141,7 @@ const Checkbox = forwardRef<IdealystElement, CheckboxProps>(({
       >
         <View style={checkboxStyle}>
           {(internalChecked || indeterminate) && (
-            <MaterialDesignIcons
-              name={indeterminate ? 'minus' : 'check'}
-              size={14}
-              color="#ffffff"
-              style={checkmarkStyle}
-            />
+            <CheckmarkIcon indeterminate={indeterminate} checked={internalChecked} />
           )}
         </View>
         {labelContent && (