@sudobility/components-rn 1.0.41 → 1.0.43

package/src/ui/Progress/Progress.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Animated } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface ProgressProps {
   /** Progress value (0-100) */
@@ -36,6 +37,48 @@ export interface ProgressProps {
  * <Progress indeterminate />
  * ```
  */
+
+// Lazily derive progress colors from DS to avoid ESM issues in tests.
+let _progressColors: ReturnType<typeof buildProgressColors> | null = null;
+function getProgressColors() {
+  if (!_progressColors) _progressColors = buildProgressColors();
+  return _progressColors;
+}
+function buildProgressColors() {
+  // Extract the leading bg-* class from DS button base strings
+  function extractBg(base: string, darkStr: string) {
+    const bg =
+      base
+        .split(' ')
+        .find(
+          c =>
+            c.startsWith('bg-') &&
+            !c.includes('hover:') &&
+            !c.includes('active:')
+        ) || '';
+    const darkBg =
+      darkStr
+        .split(' ')
+        .find(
+          c =>
+            c.startsWith('dark:bg-') &&
+            !c.includes('hover:') &&
+            !c.includes('active:')
+        ) || '';
+    return `${bg} ${darkBg}`;
+  }
+  const btn = colors.component.button;
+  return {
+    default: extractBg(btn.primary.base, btn.primary.dark),
+    primary: extractBg(btn.primary.base, btn.primary.dark),
+    success: extractBg(btn.success.base, btn.success.dark),
+    warning: 'bg-yellow-600 dark:bg-yellow-500', // DS has no yellow button; local fallback
+    danger: extractBg(btn.destructive.base, btn.destructive.dark),
+    purple: 'bg-purple-600 dark:bg-purple-500', // DS has no purple button; local fallback
+    gray: 'bg-gray-600 dark:bg-gray-500', // local fallback
+  } as Record<string, string>;
+}
+
 export const Progress: React.FC<ProgressProps> = ({
   value = 0,
   max = 100,
@@ -71,12 +114,13 @@ export const Progress: React.FC<ProgressProps> = ({
   // Clamp value between 0 and 100
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
 
-  // Color configurations
+  // Color configurations from DS
+  const allColors = getProgressColors();
   const colorClasses = {
-    default: 'bg-blue-600 dark:bg-blue-500',
-    success: 'bg-green-600 dark:bg-green-500',
-    warning: 'bg-yellow-600 dark:bg-yellow-500',
-    danger: 'bg-red-600 dark:bg-red-500',
+    default: allColors.default,
+    success: allColors.success,
+    warning: allColors.warning,
+    danger: allColors.danger,
   };
 
   // Size configurations
@@ -119,7 +163,9 @@ export const Progress: React.FC<ProgressProps> = ({
       </View>
       {(showLabel || label) && (
         <View className='mt-1'>
-          <Text className='text-xs text-gray-600 dark:text-gray-400 text-right'>
+          <Text
+            className={`${designTokens.typography.size.xs} text-gray-600 dark:text-gray-400 text-right`}
+          >
             {label || `${Math.round(percentage)}%`}
           </Text>
         </View>
@@ -173,14 +219,15 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
   const displayLabel = label || `${Math.round(percentage)}%`;
 
-  // Color variant configurations
+  // Color variant configurations from DS
+  const progressColors = getProgressColors();
   const variantClasses = {
-    primary: 'bg-blue-600 dark:bg-blue-500',
-    success: 'bg-green-600 dark:bg-green-500',
-    warning: 'bg-yellow-600 dark:bg-yellow-500',
-    danger: 'bg-red-600 dark:bg-red-500',
-    purple: 'bg-purple-600 dark:bg-purple-500',
-    gray: 'bg-gray-600 dark:bg-gray-500',
+    primary: progressColors.primary,
+    success: progressColors.success,
+    warning: progressColors.warning,
+    danger: progressColors.danger,
+    purple: progressColors.purple,
+    gray: progressColors.gray,
   };
 
   // Size configurations
@@ -211,7 +258,9 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
           />
         </View>
         {showLabel && labelPosition === 'outside' && (
-          <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+          <Text
+            className={`${designTokens.typography.size.sm} ${designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`}
+          >
             {displayLabel}
           </Text>
         )}

package/src/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface ProgressCircleProps {
   /** Progress value (0-100) */
@@ -48,18 +49,18 @@ export const ProgressCircle: React.FC<ProgressCircleProps> = ({
   label,
   variant = 'primary',
   color,
-  trackColor = '#e5e7eb',
+  trackColor = colors.raw.neutral[200],
   className,
 }) => {
   // Clamp value between 0 and 100
   const progress = Math.min(100, Math.max(0, value));
 
-  // Color variants
+  // Color variants from design system raw palette
   const variantColors = {
-    primary: '#2563eb',
-    success: '#16a34a',
-    warning: '#ca8a04',
-    danger: '#dc2626',
+    primary: colors.raw.blue[600],
+    success: colors.raw.green[600],
+    warning: colors.raw.amber[600],
+    danger: colors.raw.red[600],
   };
 
   const progressColor = color || variantColors[variant];

package/src/ui/PromotionalBanner/PromotionalBanner.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface PromotionalBannerProps {
   /** Banner title */
@@ -52,8 +53,10 @@ export const PromotionalBanner: React.FC<PromotionalBannerProps> = ({
   return (
     <View
       className={cn(
-        'bg-green-50 dark:bg-green-900/20',
-        'border-b border-green-200 dark:border-green-700',
+        // Derive green palette from DS alert.success colors
+        colors.component.alert.success.base,
+        colors.component.alert.success.dark,
+        'border-b',
         isProminent && 'border-b-2',
         className
       )}
@@ -62,7 +65,7 @@ export const PromotionalBanner: React.FC<PromotionalBannerProps> = ({
         <View className='flex-row items-center justify-between gap-4 flex-wrap'>
           {/* Left side: Badge + Title */}
           <View className='flex-row items-center flex-1'>
-            {/* Badge */}
+            {/* Badge -- green-500 from colors.raw.green */}
             <View className='bg-green-500 px-3 py-1 rounded-full mr-3'>
               <Text className='text-white text-xs font-bold'>{badgeText}</Text>
             </View>
@@ -85,7 +88,7 @@ export const PromotionalBanner: React.FC<PromotionalBannerProps> = ({
             </View>
           </View>
 
-          {/* CTA Button */}
+          {/* CTA Button -- success button from DS */}
           <Pressable
             onPress={onButtonPress}
             className={cn(

package/src/ui/QuickActions/QuickActions.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface QuickAction {
   /** Unique identifier */
@@ -53,6 +56,7 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
   columns = 3,
   className,
 }) => {
+  // Variant styles aligned with DS button colors (colors.component.button)
   const variantStyles = {
     default: {
       bg: 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700',
@@ -60,23 +64,23 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
       text: 'text-gray-900 dark:text-white',
     },
     primary: {
-      bg: 'bg-blue-500 border-blue-500',
-      bgActive: 'active:bg-blue-600',
+      bg: 'bg-blue-600 border-blue-600',
+      bgActive: 'active:bg-blue-800',
       text: 'text-white',
     },
     success: {
-      bg: 'bg-green-500 border-green-500',
-      bgActive: 'active:bg-green-600',
+      bg: 'bg-green-600 border-green-600',
+      bgActive: 'active:bg-green-800',
       text: 'text-white',
     },
     warning: {
-      bg: 'bg-yellow-500 border-yellow-500',
-      bgActive: 'active:bg-yellow-600',
+      bg: 'bg-orange-600 border-orange-600',
+      bgActive: 'active:bg-orange-800',
       text: 'text-white',
     },
     danger: {
-      bg: 'bg-red-500 border-red-500',
-      bgActive: 'active:bg-red-600',
+      bg: 'bg-red-600 border-red-600',
+      bgActive: 'active:bg-red-800',
       text: 'text-white',
     },
   };
@@ -121,7 +125,7 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
             accessibilityState={{ disabled: action.disabled }}
           >
             {action.icon && <View className='w-5 h-5'>{action.icon}</View>}
-            <Text className={cn('font-medium', styles.text)}>
+            <Text className={cn(typography.weight.medium, styles.text)}>
               {action.label}
             </Text>
           </Pressable>

package/src/ui/SearchInput/SearchInput.tsx

@@ -9,6 +9,7 @@ import {
   TextInputProps,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface SearchInputProps extends Omit<TextInputProps, 'onChange'> {
   /** Current search query */
@@ -137,7 +138,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
           disabled && 'opacity-50',
           loading && 'opacity-60'
         )}
-        placeholderTextColor='#9CA3AF'
+        placeholderTextColor={colors.raw.neutral[400]}
         accessibilityRole='search'
         accessibilityState={{ disabled }}
         {...textInputProps}
@@ -159,7 +160,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
       {/* Loading Spinner */}
       {loading && (
         <View className='absolute inset-y-0 right-0 flex items-center justify-center pr-3'>
-          <ActivityIndicator size='small' color='#9CA3AF' />
+          <ActivityIndicator size='small' color={colors.raw.neutral[400]} />
         </View>
       )}
     </View>

package/src/ui/SectionHeader/SectionHeader.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable, ActivityIndicator } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface SectionHeaderProps {
   /** The header text/title */
@@ -53,7 +54,9 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
           {title}
         </Text>
         <View className='flex-row items-center gap-2'>
-          {loading && <ActivityIndicator size='small' color='#2563eb' />}
+          {loading && (
+            <ActivityIndicator size='small' color={colors.raw.blue[600]} />
+          )}
           {actions}
           {onAdd && (
             <Pressable

package/src/ui/Select/Select.tsx

@@ -9,6 +9,9 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface SelectOption {
   label: string;
@@ -92,9 +95,9 @@ export const Select: React.FC<SelectProps> = ({
       <View className='flex flex-row items-center justify-between'>
         <Text
           className={cn(
-            'text-base',
+            typography.size.base,
             item.value === value
-              ? 'text-blue-600 dark:text-blue-400 font-medium'
+              ? `text-blue-600 dark:text-blue-400 ${typography.weight.medium}`
               : 'text-gray-900 dark:text-gray-100'
           )}
         >
@@ -125,7 +128,8 @@ export const Select: React.FC<SelectProps> = ({
       >
         <Text
           className={cn(
-            'text-base flex-1',
+            typography.size.base,
+            'flex-1',
             selectedOption
               ? 'text-gray-900 dark:text-gray-100'
               : 'text-gray-400 dark:text-gray-500'
@@ -149,11 +153,22 @@ export const Select: React.FC<SelectProps> = ({
             {/* Header */}
             <View className='flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
               <Pressable onPress={() => setIsOpen(false)}>
-                <Text className='text-blue-600 dark:text-blue-400 text-base'>
+                <Text
+                  className={cn(
+                    'text-blue-600 dark:text-blue-400',
+                    typography.size.base
+                  )}
+                >
                   Cancel
                 </Text>
               </Pressable>
-              <Text className='text-base font-semibold text-gray-900 dark:text-white'>
+              <Text
+                className={cn(
+                  typography.size.base,
+                  typography.weight.semibold,
+                  'text-gray-900 dark:text-white'
+                )}
+              >
                 {title}
               </Text>
               <View style={{ width: 60 }} />

package/src/ui/SettingsList/SettingsList.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 /**
  * Setting item interface
@@ -88,7 +91,7 @@ export const SettingsList: React.FC<SettingsListProps> = ({
             <View className='flex-1 min-w-0'>
               <Text
                 className={cn(
-                  'text-sm',
+                  typography.size.sm,
                   isSelected
                     ? 'text-orange-700 dark:text-orange-300'
                     : 'text-gray-700 dark:text-gray-300'

package/src/ui/Sheet/Sheet.tsx

@@ -11,6 +11,9 @@ import {
   PanResponder,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
 
@@ -267,12 +270,24 @@ export const Sheet: React.FC<SheetProps> = ({
               <View className='flex flex-row items-start justify-between'>
                 <View className='flex-1'>
                   {title && (
-                    <Text className='text-lg font-semibold text-gray-900 dark:text-white'>
+                    <Text
+                      className={cn(
+                        typography.size.lg,
+                        typography.weight.semibold,
+                        'text-gray-900 dark:text-white'
+                      )}
+                    >
                       {title}
                     </Text>
                   )}
                   {description && (
-                    <Text className='mt-1 text-sm text-gray-600 dark:text-gray-400'>
+                    <Text
+                      className={cn(
+                        'mt-1',
+                        typography.size.sm,
+                        'text-gray-600 dark:text-gray-400'
+                      )}
+                    >
                       {description}
                     </Text>
                   )}
@@ -284,7 +299,9 @@ export const Sheet: React.FC<SheetProps> = ({
                     accessibilityRole='button'
                     accessibilityLabel='Close sheet'
                   >
-                    <Text className='text-xl text-gray-400'>✕</Text>
+                    <Text className={cn(typography.size.xl, 'text-gray-400')}>
+                      ✕
+                    </Text>
                   </Pressable>
                 )}
               </View>

package/src/ui/SideNav/SideNav.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface NavItem {
   /** Unique identifier */
@@ -60,7 +63,8 @@ export const SideNav: React.FC<SideNavProps> = ({ items, className }) => {
           {item.icon && <View className='w-5 h-5'>{item.icon}</View>}
           <Text
             className={cn(
-              'flex-1 font-medium',
+              'flex-1',
+              typography.weight.medium,
               item.active
                 ? 'text-blue-600 dark:text-blue-400'
                 : 'text-gray-700 dark:text-gray-300'
@@ -70,7 +74,12 @@ export const SideNav: React.FC<SideNavProps> = ({ items, className }) => {
           </Text>
           {item.badge !== undefined && (
             <View className='px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded'>
-              <Text className='text-xs text-gray-700 dark:text-gray-300'>
+              <Text
+                className={cn(
+                  typography.size.xs,
+                  'text-gray-700 dark:text-gray-300'
+                )}
+              >
                 {item.badge}
               </Text>
             </View>

package/src/ui/SmartLink/SmartLink.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Text, Pressable, Linking, Alert } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface SmartLinkProps {
   /** Link destination - URL or internal path */
@@ -61,9 +64,9 @@ export const SmartLink: React.FC<SmartLinkProps> = ({
   };
 
   const sizeClasses = {
-    sm: 'text-sm',
-    default: 'text-base',
-    lg: 'text-lg',
+    sm: typography.size.sm,
+    default: typography.size.base,
+    lg: typography.size.lg,
   };
 
   const handlePress = async () => {

package/src/ui/Spinner/Spinner.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, ActivityIndicator, Text, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, textVariants } from '@sudobility/design';
 
 /**
  * Props for the Spinner loading indicator component.
@@ -25,12 +26,13 @@ const sizeMap = {
   extraLarge: 'large' as const,
 };
 
+// Spinner colors from design system raw palette
 const colorMap = {
-  default: '#2563eb', // blue-600
-  white: '#ffffff',
-  success: '#16a34a', // green-600
-  warning: '#ea580c', // orange-600
-  error: '#dc2626', // red-600
+  default: colors.raw.blue[600],
+  white: colors.raw.neutral[0],
+  success: colors.raw.green[600],
+  warning: colors.raw.orange[600],
+  error: colors.raw.red[600],
 };
 
 /**
@@ -62,7 +64,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
     >
       <ActivityIndicator size={activitySize} color={color} />
       {showText && (
-        <Text className='mt-2 text-gray-600 dark:text-gray-400 text-sm'>
+        <Text className={cn(textVariants.body.sm(), 'mt-2')}>
           {loadingText}
         </Text>
       )}

package/src/ui/StatDisplay/StatDisplay.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface StatDisplayProps {
   /** The main value/number to display */
@@ -33,31 +34,31 @@ export interface StatDisplayProps {
  * <StatDisplay value="42" label="Active Users" variant="success" size="lg" />
  * ```
  */
-export const StatDisplay: React.FC<StatDisplayProps> = ({
-  value,
-  label,
-  variant = 'neutral',
-  size = 'md',
-  align = 'center',
-  icon,
-  iconPosition = 'top',
-  className,
-}) => {
-  const variantClasses = {
+
+// Lazily derive stat display colors from DS to avoid ESM issues in tests.
+let _statColors: ReturnType<typeof buildStatColors> | null = null;
+function getStatColors() {
+  if (!_statColors) _statColors = buildStatColors();
+  return _statColors;
+}
+function buildStatColors() {
+  const alert = colors.component.alert;
+  // Extract text-* classes from DS alert icon strings
+  return {
     primary: {
-      value: 'text-blue-600 dark:text-blue-400',
+      value: `${alert.info.icon}`,
       label: 'text-blue-600/70 dark:text-blue-400/70',
     },
     success: {
-      value: 'text-green-600 dark:text-green-400',
+      value: `${alert.success.icon}`,
       label: 'text-green-600/70 dark:text-green-400/70',
     },
     warning: {
-      value: 'text-yellow-600 dark:text-yellow-400',
-      label: 'text-yellow-600/70 dark:text-yellow-400/70',
+      value: `${alert.warning.icon}`,
+      label: 'text-orange-600/70 dark:text-orange-400/70',
     },
     danger: {
-      value: 'text-red-600 dark:text-red-400',
+      value: `${alert.error.icon}`,
       label: 'text-red-600/70 dark:text-red-400/70',
     },
     neutral: {
@@ -68,13 +69,38 @@ export const StatDisplay: React.FC<StatDisplayProps> = ({
       value: 'text-white',
       label: 'text-white/70',
     },
-  };
+  } as Record<string, { value: string; label: string }>;
+}
+
+export const StatDisplay: React.FC<StatDisplayProps> = ({
+  value,
+  label,
+  variant = 'neutral',
+  size = 'md',
+  align = 'center',
+  icon,
+  iconPosition = 'top',
+  className,
+}) => {
+  const variantClasses = getStatColors();
 
   const sizeClasses = {
-    sm: { value: 'text-xl', label: 'text-xs' },
-    md: { value: 'text-2xl', label: 'text-sm' },
-    lg: { value: 'text-3xl', label: 'text-base' },
-    xl: { value: 'text-4xl', label: 'text-lg' },
+    sm: {
+      value: designTokens.typography.size.xl,
+      label: designTokens.typography.size.xs,
+    },
+    md: {
+      value: designTokens.typography.size['2xl'],
+      label: designTokens.typography.size.sm,
+    },
+    lg: {
+      value: designTokens.typography.size['3xl'],
+      label: designTokens.typography.size.base,
+    },
+    xl: {
+      value: designTokens.typography.size['4xl'],
+      label: designTokens.typography.size.lg,
+    },
   };
 
   const alignClasses = {
@@ -98,7 +124,11 @@ export const StatDisplay: React.FC<StatDisplayProps> = ({
         <View className={variantConfig.value}>{icon}</View>
         <View>
           <Text
-            className={cn('font-bold', sizeConfig.value, variantConfig.value)}
+            className={cn(
+              designTokens.typography.weight.bold,
+              sizeConfig.value,
+              variantConfig.value
+            )}
           >
             {value}
           </Text>
@@ -115,7 +145,13 @@ export const StatDisplay: React.FC<StatDisplayProps> = ({
       {icon && iconPosition === 'top' && (
         <View className={cn('mb-2', variantConfig.value)}>{icon}</View>
       )}
-      <Text className={cn('font-bold', sizeConfig.value, variantConfig.value)}>
+      <Text
+        className={cn(
+          designTokens.typography.weight.bold,
+          sizeConfig.value,
+          variantConfig.value
+        )}
+      >
         {value}
       </Text>
       <Text className={cn(sizeConfig.label, variantConfig.label)}>{label}</Text>