@sudobility/components-rn 1.0.42 → 1.0.44

package/src/ui/HelperText/HelperText.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, TextProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface HelperTextProps extends TextProps {
   /** Helper text content */
@@ -43,10 +44,10 @@ export const HelperText: React.FC<HelperTextProps> = ({
   className,
   ...textProps
 }) => {
-  // Size configurations
+  // Size configurations using design tokens
   const sizeClasses = {
-    sm: 'text-sm',
-    base: 'text-base',
+    sm: designTokens.typography.size.sm,
+    base: designTokens.typography.size.base,
   };
 
   const iconSize = {
@@ -54,22 +55,22 @@ export const HelperText: React.FC<HelperTextProps> = ({
     base: 'w-5 h-5',
   };
 
-  // Variant configurations
+  // Variant configurations using DS alert icon colors and semantic text
   const variantConfig = {
     default: {
-      text: 'text-gray-600 dark:text-gray-400',
+      text: colors.component.alert.info.icon,
       icon: 'ℹ',
     },
     error: {
-      text: 'text-red-600 dark:text-red-400',
+      text: colors.component.alert.error.icon,
       icon: '⚠',
     },
     success: {
-      text: 'text-green-600 dark:text-green-400',
+      text: colors.component.alert.success.icon,
       icon: '✓',
     },
     warning: {
-      text: 'text-yellow-600 dark:text-yellow-400',
+      text: colors.component.alert.warning.icon,
       icon: '⚠',
     },
   };

package/src/ui/IconContainer/IconContainer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface IconContainerProps {
   /** Icon element */
@@ -34,6 +35,29 @@ export interface IconContainerProps {
  * </IconContainer>
  * ```
  */
+
+// Lazily derive icon container colors from DS to avoid ESM issues in tests.
+let _iconContainerColors: Record<string, string> | null = null;
+function getIconContainerColors() {
+  if (!_iconContainerColors) {
+    const badge = colors.component.badge;
+    // DS badge classes include text-*, but IconContainer only needs bg-*
+    function extractBg(base: string, dark: string) {
+      const all = `${base} ${dark}`.split(' ');
+      return all.filter(c => c.includes('bg-')).join(' ');
+    }
+    _iconContainerColors = {
+      primary: extractBg(badge.primary.base, badge.primary.dark),
+      secondary: 'bg-purple-100 dark:bg-purple-900/30', // DS has no purple badge variant; local fallback
+      success: extractBg(badge.success.base, badge.success.dark),
+      warning: extractBg(badge.warning.base, badge.warning.dark),
+      error: extractBg(badge.error.base, badge.error.dark),
+      neutral: extractBg(badge.default.base, badge.default.dark),
+    };
+  }
+  return _iconContainerColors;
+}
+
 export const IconContainer: React.FC<IconContainerProps> = ({
   children,
   size = 'md',
@@ -49,15 +73,8 @@ export const IconContainer: React.FC<IconContainerProps> = ({
     xl: 'w-20 h-20',
   };
 
-  // Variant configurations
-  const variantClasses = {
-    primary: 'bg-blue-100 dark:bg-blue-900/30',
-    secondary: 'bg-purple-100 dark:bg-purple-900/30',
-    success: 'bg-green-100 dark:bg-green-900/30',
-    warning: 'bg-yellow-100 dark:bg-yellow-900/30',
-    error: 'bg-red-100 dark:bg-red-900/30',
-    neutral: 'bg-gray-100 dark:bg-gray-800',
-  };
+  // Variant configurations from DS
+  const variantClasses = getIconContainerColors();
 
   // Shape configurations
   const shapeClasses = {

package/src/ui/IconText/IconText.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 IconTextProps {
   /** Icon element to display */
@@ -78,13 +79,13 @@ export const IconText: React.FC<IconTextProps> = ({
     right: 'text-right',
   };
 
-  // Color variant configurations
+  // Color variant configurations using DS semantic references
   const variantClasses = {
     default: 'text-gray-700 dark:text-gray-300',
-    primary: 'text-blue-600 dark:text-blue-400',
-    success: 'text-green-600 dark:text-green-400',
-    warning: 'text-yellow-600 dark:text-yellow-400',
-    danger: 'text-red-600 dark:text-red-400',
+    primary: colors.component.alert.info.icon,
+    success: colors.component.alert.success.icon,
+    warning: colors.component.alert.warning.icon,
+    danger: colors.component.alert.error.icon,
     muted: 'text-gray-500 dark:text-gray-400',
   };
 

package/src/ui/InfiniteScroll/InfiniteScroll.tsx

@@ -9,6 +9,7 @@ import {
   RefreshControl,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface InfiniteScrollProps<T> {
   /** Data items to render */
@@ -117,7 +118,7 @@ export function InfiniteScroll<T>({
   const ListFooterComponent = useCallback(() => {
     const footerLoader = (
       <View className='flex-row justify-center items-center py-4'>
-        <ActivityIndicator size='small' color='#3b82f6' />
+        <ActivityIndicator size='small' color={colors.raw.blue[500]} />
         <Text className='ml-2 text-sm text-gray-600 dark:text-gray-400'>
           Loading...
         </Text>

package/src/ui/KeyValuePair/KeyValuePair.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface KeyValuePairProps {
   /** Label/key text */
@@ -55,9 +58,13 @@ export const KeyValuePair: React.FC<KeyValuePairProps> = ({
   className,
 }) => {
   const sizeClasses = {
-    sm: { label: 'text-sm', value: 'text-sm', gap: 'gap-1' },
-    md: { label: 'text-base', value: 'text-base', gap: 'gap-2' },
-    lg: { label: 'text-lg', value: 'text-lg', gap: 'gap-3' },
+    sm: { label: typography.size.sm, value: typography.size.sm, gap: 'gap-1' },
+    md: {
+      label: typography.size.base,
+      value: typography.size.base,
+      gap: 'gap-2',
+    },
+    lg: { label: typography.size.lg, value: typography.size.lg, gap: 'gap-3' },
   };
 
   const labelWidthStyles = {
@@ -76,13 +83,13 @@ export const KeyValuePair: React.FC<KeyValuePairProps> = ({
   const labelVariantClasses = {
     default: 'text-gray-700 dark:text-gray-300',
     muted: 'text-gray-600 dark:text-gray-400',
-    strong: 'text-gray-900 dark:text-gray-100 font-semibold',
+    strong: `text-gray-900 dark:text-gray-100 ${typography.weight.semibold}`,
   };
 
   const valueVariantClasses = {
     default: 'text-gray-900 dark:text-gray-100',
     muted: 'text-gray-600 dark:text-gray-400',
-    strong: 'text-gray-900 dark:text-gray-100 font-semibold',
+    strong: `text-gray-900 dark:text-gray-100 ${typography.weight.semibold}`,
     primary: 'text-blue-600 dark:text-blue-400',
   };
 

package/src/ui/Link/Link.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text, Pressable, Linking } from 'react-native';
 import { cn } from '../../lib/utils';
+import { textVariants } from '@sudobility/design';
 
 export interface LinkProps {
   /** Link URL */
@@ -53,13 +54,13 @@ export const Link: React.FC<LinkProps> = ({
   // Auto-detect external links
   const isExternal = href.startsWith('http://') || href.startsWith('https://');
 
-  // Variant configurations
+  // Variant configurations using DS textVariants.link where applicable
   const variantClasses = {
-    default: 'text-blue-600 dark:text-blue-400',
-    primary: 'text-blue-600 dark:text-blue-400 font-medium',
-    secondary: 'text-gray-600 dark:text-gray-400',
+    default: textVariants.link.subtle(),
+    primary: `${textVariants.link.default()} font-medium`,
+    secondary: textVariants.link.muted(),
     muted: 'text-gray-500 dark:text-gray-500',
-    underline: 'text-blue-600 dark:text-blue-400 underline',
+    underline: textVariants.link.default(),
   };
 
   const handlePress = async () => {

package/src/ui/ListItemWithAction/ListItemWithAction.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 ListItemWithActionProps {
   /** Main content/text to display */
@@ -91,7 +92,7 @@ export const ListItemWithAction: React.FC<ListItemWithActionProps> = ({
         {isProcessing ? (
           <ActivityIndicator
             size='small'
-            color={destructive ? '#dc2626' : '#6b7280'}
+            color={destructive ? colors.raw.red[600] : colors.raw.neutral[500]}
           />
         ) : (
           <>

package/src/ui/Modal/Modal.tsx

@@ -9,6 +9,9 @@ import {
   Platform,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface ModalProps {
   /** Whether the modal is visible */
@@ -103,7 +106,13 @@ export const Modal: React.FC<ModalProps> = ({
             {(title || showCloseButton) && (
               <View className='flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
                 {title && (
-                  <Text className='text-lg font-semibold text-gray-900 dark:text-white flex-1'>
+                  <Text
+                    className={cn(
+                      typography.size.lg,
+                      typography.weight.semibold,
+                      'text-gray-900 dark:text-white flex-1'
+                    )}
+                  >
                     {title}
                   </Text>
                 )}
@@ -114,7 +123,12 @@ export const Modal: React.FC<ModalProps> = ({
                     accessibilityRole='button'
                     accessibilityLabel='Close modal'
                   >
-                    <Text className='text-xl text-gray-500 dark:text-gray-400'>
+                    <Text
+                      className={cn(
+                        typography.size.xl,
+                        'text-gray-500 dark:text-gray-400'
+                      )}
+                    >
                       ✕
                     </Text>
                   </Pressable>

package/src/ui/MultiSelect/MultiSelect.tsx

@@ -10,6 +10,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface MultiSelectOption {
   /** Option value */
@@ -183,7 +184,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
                       value={searchQuery}
                       onChangeText={setSearchQuery}
                       placeholder={searchPlaceholder}
-                      placeholderTextColor='#9ca3af'
+                      placeholderTextColor={colors.raw.neutral[400]}
                       className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md'
                     />
                   </View>

package/src/ui/NavigationList/NavigationList.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 NavigationItem {
   /** Unique identifier for the item */
@@ -108,7 +111,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
               <View className='flex-row items-center'>
                 <Text
                   className={cn(
-                    'font-medium',
+                    typography.weight.medium,
                     isSelected
                       ? 'text-blue-600 dark:text-blue-400'
                       : 'text-gray-700 dark:text-gray-300'
@@ -118,14 +121,25 @@ export const NavigationList: React.FC<NavigationListProps> = ({
                 </Text>
                 {item.badge !== undefined && item.badge > 0 && (
                   <View className='ml-2 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 rounded-full'>
-                    <Text className='text-xs font-medium text-blue-800 dark:text-blue-200'>
+                    <Text
+                      className={cn(
+                        typography.size.xs,
+                        typography.weight.medium,
+                        'text-blue-800 dark:text-blue-200'
+                      )}
+                    >
                       {item.badge}
                     </Text>
                   </View>
                 )}
               </View>
               {item.description && (
-                <Text className='text-xs text-gray-500 dark:text-gray-400 mt-0.5'>
+                <Text
+                  className={cn(
+                    typography.size.xs,
+                    'text-gray-500 dark:text-gray-400 mt-0.5'
+                  )}
+                >
                   {item.description}
                 </Text>
               )}

package/src/ui/PageSectionHeader/PageSectionHeader.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, ActivityIndicator } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface PageSectionHeaderProps {
   /** Section title */
@@ -107,7 +108,7 @@ export const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({
 
           {loading && (
             <View className='flex-row items-center gap-2'>
-              <ActivityIndicator size='small' color='#3b82f6' />
+              <ActivityIndicator size='small' color={colors.raw.blue[500]} />
               <Text
                 className={cn(
                   sizeConfig.count,

package/src/ui/Pagination/Pagination.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 PaginationProps {
   /** Current page number (1-indexed) */
@@ -65,18 +68,18 @@ export const Pagination: React.FC<PaginationProps> = ({
   const sizeConfig = {
     sm: {
       button: 'h-8 w-8',
-      text: 'text-xs',
-      icon: 'text-xs',
+      text: typography.size.xs,
+      icon: typography.size.xs,
     },
     md: {
       button: 'h-10 w-10',
-      text: 'text-sm',
-      icon: 'text-sm',
+      text: typography.size.sm,
+      icon: typography.size.sm,
     },
     lg: {
       button: 'h-12 w-12',
-      text: 'text-base',
-      icon: 'text-base',
+      text: typography.size.base,
+      icon: typography.size.base,
     },
   };
 

package/src/ui/PhoneInput/PhoneInput.tsx

@@ -10,6 +10,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface Country {
   /** Country code (ISO 3166-1 alpha-2) */
@@ -170,7 +171,7 @@ export const PhoneInput: React.FC<PhoneInputProps> = ({
           value={value}
           onChangeText={handleInputChange}
           placeholder={placeholder}
-          placeholderTextColor='#9ca3af'
+          placeholderTextColor={colors.raw.neutral[400]}
           keyboardType='phone-pad'
           editable={!disabled}
           className={cn(
@@ -207,7 +208,7 @@ export const PhoneInput: React.FC<PhoneInputProps> = ({
                     value={searchQuery}
                     onChangeText={setSearchQuery}
                     placeholder='Search countries...'
-                    placeholderTextColor='#9ca3af'
+                    placeholderTextColor={colors.raw.neutral[400]}
                     className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md'
                   />
                 </View>

package/src/ui/PopupSelect/PopupSelect.tsx

@@ -9,6 +9,7 @@ import {
   Pressable,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors } from '@sudobility/design';
 
 export interface PopupSelectOption {
   label: string;
@@ -163,11 +164,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     borderWidth: 1,
-    borderColor: '#d1d5db',
+    borderColor: colors.raw.neutral[300],
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 12,
-    backgroundColor: '#ffffff',
+    backgroundColor: colors.raw.neutral[0],
   },
   triggerDisabled: {
     opacity: 0.5,
@@ -175,19 +176,19 @@ const styles = StyleSheet.create({
   triggerText: {
     flex: 1,
     fontSize: 16,
-    color: '#1a1a1a',
+    color: colors.raw.neutral[900],
   },
   triggerPlaceholder: {
-    color: '#9ca3af',
+    color: colors.raw.neutral[400],
   },
   triggerArrow: {
     fontSize: 10,
-    color: '#9ca3af',
+    color: colors.raw.neutral[400],
     marginLeft: 8,
   },
   modalContainer: {
     flex: 1,
-    backgroundColor: '#ffffff',
+    backgroundColor: colors.raw.neutral[0],
   },
   modalHeader: {
     flexDirection: 'row',
@@ -196,12 +197,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: '#e9ecef',
+    borderBottomColor: colors.raw.neutral[200],
   },
   modalTitle: {
     fontSize: 18,
     fontWeight: '600',
-    color: '#1a1a1a',
+    color: colors.raw.neutral[900],
   },
   closeButton: {
     padding: 8,
@@ -209,7 +210,7 @@ const styles = StyleSheet.create({
   closeButtonText: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#3b82f6',
+    color: colors.raw.blue[500],
   },
   listContent: {
     padding: 16,
@@ -218,27 +219,27 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
-    backgroundColor: '#f8f9fa',
+    backgroundColor: colors.raw.neutral[50],
     borderRadius: 12,
   },
   optionItemSelected: {
-    backgroundColor: '#e0f2fe',
+    backgroundColor: colors.raw.blue[100],
   },
   optionLabel: {
     flex: 1,
     fontSize: 16,
-    color: '#1a1a1a',
+    color: colors.raw.neutral[900],
   },
   optionLabelSelected: {
     fontWeight: '600',
-    color: '#3b82f6',
+    color: colors.raw.blue[500],
   },
   optionDisabled: {
     opacity: 0.5,
   },
   checkmark: {
     fontSize: 18,
-    color: '#3b82f6',
+    color: colors.raw.blue[500],
     fontWeight: 'bold',
   },
   separator: {

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>
         )}