@umituz/react-native-design-system 2.5.1 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicAvatar.tsx

@@ -70,7 +70,7 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const avatarSize = customSize || tokens.avatarSizes[size];
+  const avatarSize = customSize ? customSize * tokens.spacingMultiplier : tokens.avatarSizes[size];
   const avatarRadius = borderRadius ?? avatarSize / 2;
 
   // Generate initials from name
@@ -106,12 +106,12 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
     borderRadius: avatarRadius,
   };
 
-  // Font size based on avatar size
-  const getFontSize = (size: number): number => {
-    if (size <= 32) return 12;
-    if (size <= 48) return 16;
-    if (size <= 64) return 20;
-    return 24;
+  // Font size based on avatar size (scaled)
+  const getAvatarFontSize = (sizeValue: number): number => {
+    const baseFontSize = sizeValue <= 32 ? 12 : 
+                        sizeValue <= 48 ? 16 : 
+                        sizeValue <= 64 ? 20 : 24;
+    return baseFontSize * tokens.spacingMultiplier;
   };
 
   return (
@@ -132,7 +132,7 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
           type="labelLarge"
           color={defaultTextColor}
           style={{
-            fontSize: getFontSize(avatarSize),
+            fontSize: getAvatarFontSize(avatarSize),
             fontWeight: tokens.typography.semibold,
           }}
         >
@@ -143,7 +143,7 @@ export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
           type="labelLarge"
           color={defaultTextColor}
           style={{
-            fontSize: getFontSize(avatarSize),
+            fontSize: getAvatarFontSize(avatarSize),
             fontWeight: tokens.typography.semibold,
           }}
         >

package/src/atoms/AtomicBadge.tsx

@@ -31,12 +31,6 @@ export interface AtomicBadgeProps {
     testID?: string;
 }
 
-const SIZE_CONFIG = {
-    sm: { paddingH: 6, paddingV: 2, fontSize: 10, iconSize: 10, gap: 3, radius: 4 },
-    md: { paddingH: 8, paddingV: 4, fontSize: 11, iconSize: 12, gap: 4, radius: 6 },
-    lg: { paddingH: 12, paddingV: 6, fontSize: 13, iconSize: 14, gap: 5, radius: 8 },
-};
-
 export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
     text,
     variant = "primary",
@@ -48,7 +42,33 @@ export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
     testID,
 }) => {
     const tokens = useAppDesignTokens();
-    const sizeConfig = SIZE_CONFIG[size];
+
+    const sizeConfig = {
+        sm: { 
+            paddingH: 6 * tokens.spacingMultiplier, 
+            paddingV: 2 * tokens.spacingMultiplier, 
+            fontSize: 10 * tokens.spacingMultiplier, 
+            iconSize: 10 * tokens.spacingMultiplier, 
+            gap: 3 * tokens.spacingMultiplier, 
+            radius: 4 * tokens.spacingMultiplier 
+        },
+        md: { 
+            paddingH: 8 * tokens.spacingMultiplier, 
+            paddingV: 4 * tokens.spacingMultiplier, 
+            fontSize: 11 * tokens.spacingMultiplier, 
+            iconSize: 12 * tokens.spacingMultiplier, 
+            gap: 4 * tokens.spacingMultiplier, 
+            radius: 6 * tokens.spacingMultiplier 
+        },
+        lg: { 
+            paddingH: 12 * tokens.spacingMultiplier, 
+            paddingV: 6 * tokens.spacingMultiplier, 
+            fontSize: 13 * tokens.spacingMultiplier, 
+            iconSize: 14 * tokens.spacingMultiplier, 
+            gap: 5 * tokens.spacingMultiplier, 
+            radius: 8 * tokens.spacingMultiplier 
+        },
+    }[size];
 
     const getVariantColors = () => {
         switch (variant) {

package/src/atoms/AtomicButton.tsx

@@ -53,23 +53,23 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
     sm: {
       paddingVertical: tokens.spacing.xs,
       paddingHorizontal: tokens.spacing.sm,
-      fontSize: tokens.typography.bodySmall.fontSize,
-      iconSize: 16,
-      minHeight: 32,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
+      iconSize: 16 * tokens.spacingMultiplier,
+      minHeight: 32 * tokens.spacingMultiplier,
     },
     md: {
       paddingVertical: tokens.spacing.sm,
       paddingHorizontal: tokens.spacing.md,
-      fontSize: tokens.typography.bodyMedium.fontSize,
-      iconSize: 20,
-      minHeight: 44,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+      iconSize: 20 * tokens.spacingMultiplier,
+      minHeight: 44 * tokens.spacingMultiplier,
     },
     lg: {
       paddingVertical: tokens.spacing.md,
       paddingHorizontal: tokens.spacing.lg,
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      iconSize: 24,
-      minHeight: 52,
+      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+      iconSize: 24 * tokens.spacingMultiplier,
+      minHeight: 52 * tokens.spacingMultiplier,
     },
   };
 

package/src/atoms/AtomicChip.tsx

@@ -89,19 +89,19 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
     sm: {
       paddingHorizontal: tokens.spacing.sm,
       paddingVertical: tokens.spacing.xs,
-      fontSize: tokens.typography.bodySmall.fontSize,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
       iconSize: 'xs' as const
     },
     md: {
       paddingHorizontal: tokens.spacing.md,
       paddingVertical: tokens.spacing.sm,
-      fontSize: tokens.typography.bodyMedium.fontSize,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
       iconSize: 'sm' as const
     },
     lg: {
       paddingHorizontal: tokens.spacing.md,
       paddingVertical: tokens.spacing.sm,
-      fontSize: tokens.typography.bodyLarge.fontSize,
+      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
       iconSize: 'sm' as const
     },
   };

package/src/atoms/AtomicDatePicker.tsx

@@ -239,13 +239,13 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => {
       marginBottom: tokens.spacing.md,
     },
     label: {
-      fontSize: tokens.typography.bodyMedium.fontSize,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
       fontWeight: tokens.typography.semibold,
       color: tokens.colors.onSurface,
       marginBottom: tokens.spacing.sm,
     },
     errorText: {
-      fontSize: tokens.typography.bodySmall.fontSize,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
       color: tokens.colors.error,
       marginTop: tokens.spacing.xs,
       marginLeft: tokens.spacing.xs,

package/src/atoms/AtomicFab.tsx

@@ -60,10 +60,18 @@ export const AtomicFab: React.FC<AtomicFabProps> = ({
   const isDisabled = disabled;
 
   // Get configurations
-  const sizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
+  const baseSizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
   const variants = getFabVariants(tokens);
   const variantConfig = variants[variant as 'primary' | 'secondary' | 'surface'];
-  const iconSize = getFabIconSize(size as 'sm' | 'md' | 'lg');
+  const baseIconSize = getFabIconSize(size as 'sm' | 'md' | 'lg');
+
+  // Scale dimensions
+  const sizeConfig = {
+    width: baseSizeConfig.width * tokens.spacingMultiplier,
+    height: baseSizeConfig.height * tokens.spacingMultiplier,
+    borderRadius: baseSizeConfig.borderRadius * tokens.spacingMultiplier,
+  };
+  const iconSize = baseIconSize * tokens.spacingMultiplier;
 
   // Combine styles
   const fabStyle = StyleSheet.flatten([

package/src/atoms/AtomicIcon.tsx

@@ -110,7 +110,10 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
   const tokens = useAppDesignTokens();
 
   // Calculate size
-  const sizeInPixels = customSize ?? getIconSize(size);
+  const baseSize = customSize ?? size;
+  const sizeInPixels = typeof baseSize === 'number'
+    ? baseSize * tokens.spacingMultiplier
+    : (tokens.iconSizes as Record<string, number>)[baseSize] || (tokens.iconSizes as Record<string, number>).md;
 
   // Calculate color
   const iconColor = customColor

package/src/atoms/AtomicProgress.tsx

@@ -77,14 +77,16 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
   // Calculate progress width
   const progressWidth = `${clampedValue}%`;
 
+  const scaledHeight = height * tokens.spacingMultiplier;
+
   // Border radius based on shape
-  const borderRadius = shape === 'rounded' ? height / 2 : 0;
+  const progressBorderRadius = shape === 'rounded' ? scaledHeight / 2 : 0;
 
   const containerStyle: ViewStyle = {
     width: width as DimensionValue,
-    height,
+    height: scaledHeight,
     backgroundColor: progressBackground,
-    borderRadius,
+    borderRadius: progressBorderRadius,
     overflow: 'hidden',
   };
 
@@ -92,11 +94,11 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
     width: progressWidth as DimensionValue,
     height: '100%' as DimensionValue,
     backgroundColor: progressColor,
-    borderRadius,
+    borderRadius: progressBorderRadius,
   };
 
   const textStyle = {
-    fontSize: tokens.typography.bodySmall.fontSize,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
     fontWeight: tokens.typography.labelMedium.fontWeight,
     color: progressTextColor,
     textAlign: 'center' as const,

package/src/atoms/AtomicSpinner.tsx

@@ -81,8 +81,10 @@ export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  // Resolve size
-  const resolvedSize = typeof size === 'number' ? size : SIZE_MAP[size];
+  // Resolve size (scaled)
+  const baseSize = typeof size === 'number' ? size : SIZE_MAP[size];
+  const resolvedSize = baseSize * tokens.spacingMultiplier;
+  
   const activitySize = typeof size === 'number'
     ? (size >= 30 ? 'large' : 'small')
     : ACTIVITY_SIZE_MAP[size];
@@ -109,7 +111,7 @@ export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
   // Container styles
   const containerStyles: ViewStyle[] = [
     styles.container,
-    textPosition === 'right' && styles.containerRow,
+    textPosition === 'right' && { flexDirection: 'row' },
     fullContainer && styles.fullContainer,
     overlay && [styles.overlay, { backgroundColor: resolvedOverlayColor }],
   ].filter(Boolean) as ViewStyle[];
@@ -142,7 +144,9 @@ export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
           type="bodyMedium"
           style={[
             styles.text,
-            textPosition === 'right' ? styles.textRight : styles.textBottom,
+            textPosition === 'right' 
+              ? { marginLeft: 12 * tokens.spacingMultiplier }
+              : { marginTop: 12 * tokens.spacingMultiplier },
             { color: overlay ? '#FFFFFF' : tokens.colors.textSecondary },
           ]}
         >

package/src/atoms/input/styles/inputStylesHelper.ts

@@ -28,23 +28,23 @@ export const getSizeConfig = ({ size, tokens }: GetSizeConfigParams) => {
     sm: {
       paddingVertical: tokens.spacing.xs,
       paddingHorizontal: tokens.spacing.sm,
-      fontSize: tokens.typography.bodySmall.fontSize,
-      iconSize: 16,
-      minHeight: 40,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
+      iconSize: 16 * tokens.spacingMultiplier,
+      minHeight: 40 * tokens.spacingMultiplier,
     },
     md: {
       paddingVertical: tokens.spacing.sm,
       paddingHorizontal: tokens.spacing.md,
-      fontSize: tokens.typography.bodyMedium.fontSize,
-      iconSize: 20,
-      minHeight: 48,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+      iconSize: 20 * tokens.spacingMultiplier,
+      minHeight: 48 * tokens.spacingMultiplier,
     },
     lg: {
       paddingVertical: tokens.spacing.md,
       paddingHorizontal: tokens.spacing.lg,
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      iconSize: 24,
-      minHeight: 56,
+      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+      iconSize: 24 * tokens.spacingMultiplier,
+      minHeight: 56 * tokens.spacingMultiplier,
     },
   };
 

package/src/atoms/picker/styles/pickerStyles.ts

@@ -44,17 +44,17 @@ export const getPickerContainerStyles = (tokens: DesignTokens): PickerContainerS
         sm: {
             paddingHorizontal: tokens.spacing.sm,
             paddingVertical: tokens.spacing.xs,
-            minHeight: 36,
+            minHeight: 36 * tokens.spacingMultiplier,
         },
         md: {
             paddingHorizontal: tokens.spacing.md,
             paddingVertical: tokens.spacing.sm,
-            minHeight: 48,
+            minHeight: 48 * tokens.spacingMultiplier,
         },
         lg: {
             paddingHorizontal: tokens.spacing.lg,
             paddingVertical: tokens.spacing.md,
-            minHeight: 56,
+            minHeight: 56 * tokens.spacingMultiplier,
         },
     },
     state: {
@@ -73,9 +73,9 @@ export const getPickerLabelStyles = (tokens: DesignTokens): PickerLabelStyles =>
         marginBottom: tokens.spacing.xs,
     },
     size: {
-        sm: { fontSize: tokens.typography.bodySmall.fontSize },
-        md: { fontSize: tokens.typography.bodyMedium.fontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
     },
 });
 
@@ -85,9 +85,9 @@ export const getPickerValueStyles = (tokens: DesignTokens): PickerValueStyles =>
         flex: 1,
     },
     size: {
-        sm: { fontSize: tokens.typography.bodySmall.fontSize },
-        md: { fontSize: tokens.typography.bodyMedium.fontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
     },
 });
 
@@ -97,15 +97,15 @@ export const getPickerPlaceholderStyles = (tokens: DesignTokens): PickerPlacehol
         flex: 1,
     },
     size: {
-        sm: { fontSize: tokens.typography.bodySmall.fontSize },
-        md: { fontSize: tokens.typography.bodyMedium.fontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
     },
 });
 
 export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
     color: tokens.colors.error,
-    fontSize: tokens.typography.bodySmall.fontSize,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
     marginTop: tokens.spacing.xs,
 });
 
@@ -135,7 +135,7 @@ export const getModalHeaderStyles = (tokens: DesignTokens): ViewStyle => ({
 });
 
 export const getModalTitleStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.titleLarge.fontSize,
+    fontSize: tokens.typography.titleLarge.responsiveFontSize,
     fontWeight: '600',
     color: tokens.colors.onSurface,
 });
@@ -154,7 +154,7 @@ export const getSearchContainerStyles = (tokens: DesignTokens): ViewStyle => ({
 
 export const getSearchInputStyles = (tokens: DesignTokens): TextStyle => ({
     flex: 1,
-    fontSize: tokens.typography.bodyMedium.fontSize,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     color: tokens.colors.onSurface,
     paddingVertical: 0,
 });
@@ -174,13 +174,13 @@ export const getOptionContainerStyles = (
 });
 
 export const getOptionTextStyles = (tokens: DesignTokens, selected: boolean): TextStyle => ({
-    fontSize: tokens.typography.bodyLarge.fontSize,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
     color: selected ? tokens.colors.primary : tokens.colors.onSurface,
     fontWeight: selected ? '600' : '400',
 });
 
 export const getOptionDescriptionStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodySmall.fontSize,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
     color: tokens.colors.textSecondary,
     marginTop: tokens.spacing.xs,
 });
@@ -194,7 +194,7 @@ export const getEmptyStateStyles = (tokens: DesignTokens): ViewStyle => ({
 });
 
 export const getEmptyStateTextStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodyMedium.fontSize,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     color: tokens.colors.textSecondary,
     textAlign: 'center',
 });
@@ -218,6 +218,6 @@ export const getChipStyles = (tokens: DesignTokens): ViewStyle => ({
 });
 
 export const getChipTextStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodySmall.fontSize,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
     color: tokens.colors.onSurface,
 });

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -65,7 +65,8 @@ const SkeletonItem: React.FC<{
   baseColor: string;
   highlightColor: string;
   disableAnimation: boolean;
-}> = ({ config, baseColor, highlightColor, disableAnimation }) => {
+  multiplier: number;
+}> = ({ config, baseColor, highlightColor, disableAnimation, multiplier }) => {
   const opacity = useSharedValue(0);
 
   useEffect(() => {
@@ -95,10 +96,10 @@ const SkeletonItem: React.FC<{
       style={[
         styles.skeleton,
         {
-          width: config.width as number | `${number}%` | undefined,
-          height: config.height,
-          borderRadius: config.borderRadius,
-          marginBottom: config.marginBottom,
+          width: typeof config.width === 'number' ? config.width * multiplier : config.width,
+          height: config.height ? config.height * multiplier : undefined,
+          borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
+          marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
           backgroundColor: baseColor,
         },
         animatedStyle,
@@ -129,6 +130,7 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
           baseColor={tokens.colors.surfaceSecondary}
           highlightColor={tokens.colors.border}
           disableAnimation={disableAnimation}
+          multiplier={tokens.spacingMultiplier}
         />
       ))}
     </View>

package/src/theme/core/TokenFactory.ts

@@ -56,9 +56,15 @@ export const createDesignTokens = (
     colors,
     spacing,
     typography,
-    iconSizes: BASE_TOKENS.iconSizes,
+    iconSizes: Object.keys(BASE_TOKENS.iconSizes).reduce((acc, key) => {
+      acc[key as keyof typeof BASE_TOKENS.iconSizes] = BASE_TOKENS.iconSizes[key as keyof typeof BASE_TOKENS.iconSizes] * multiplier;
+      return acc;
+    }, {} as any),
     opacity: BASE_TOKENS.opacity,
-    avatarSizes: BASE_TOKENS.avatarSizes,
+    avatarSizes: Object.keys(BASE_TOKENS.avatarSizes).reduce((acc, key) => {
+      acc[key as keyof typeof BASE_TOKENS.avatarSizes] = BASE_TOKENS.avatarSizes[key as keyof typeof BASE_TOKENS.avatarSizes] * multiplier;
+      return acc;
+    }, {} as any),
     borderRadius,
     borders: {
       ...BASE_TOKENS.borders,