@sudobility/components-rn 1.0.41 → 1.0.43

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/InfoBox/InfoBox.tsx

@@ -1,6 +1,24 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
+
+const alert = colors.component.alert;
+
+// Split DS alert color strings into separate parts for RN
+function splitAlertClasses(base: string, dark: string) {
+  const all = `${base} ${dark}`.split(' ');
+  return {
+    bg: all.filter(c => c.includes('bg-')).join(' '),
+    border: all.filter(c => c.includes('border-')).join(' '),
+    text: all.filter(c => c.includes('text-')).join(' '),
+  };
+}
+
+const dsInfo = splitAlertClasses(alert.info.base, alert.info.dark);
+const dsSuccess = splitAlertClasses(alert.success.base, alert.success.dark);
+const dsWarning = splitAlertClasses(alert.warning.base, alert.warning.dark);
+const dsError = splitAlertClasses(alert.error.base, alert.error.dark);
 
 export interface InfoBoxProps {
   /** Content to display in the info box */
@@ -49,31 +67,31 @@ export const InfoBox: React.FC<InfoBoxProps> = ({
   bordered = true,
   className,
 }) => {
-  // Color variant configurations
+  // Color variants derived from design system (colors.component.alert)
   const variantClasses = {
     info: {
-      bg: 'bg-blue-50 dark:bg-blue-900/20',
-      border: 'border-blue-200 dark:border-blue-800',
-      title: 'text-blue-900 dark:text-blue-300',
-      text: 'text-blue-800 dark:text-blue-400',
+      bg: dsInfo.bg,
+      border: dsInfo.border,
+      title: dsInfo.text,
+      text: dsInfo.text,
     },
     success: {
-      bg: 'bg-green-50 dark:bg-green-900/20',
-      border: 'border-green-200 dark:border-green-800',
-      title: 'text-green-900 dark:text-green-300',
-      text: 'text-green-800 dark:text-green-400',
+      bg: dsSuccess.bg,
+      border: dsSuccess.border,
+      title: dsSuccess.text,
+      text: dsSuccess.text,
     },
     warning: {
-      bg: 'bg-yellow-50 dark:bg-yellow-900/20',
-      border: 'border-yellow-200 dark:border-yellow-800',
-      title: 'text-yellow-900 dark:text-yellow-300',
-      text: 'text-yellow-800 dark:text-yellow-400',
+      bg: dsWarning.bg,
+      border: dsWarning.border,
+      title: dsWarning.text,
+      text: dsWarning.text,
     },
     danger: {
-      bg: 'bg-red-50 dark:bg-red-900/20',
-      border: 'border-red-200 dark:border-red-800',
-      title: 'text-red-900 dark:text-red-300',
-      text: 'text-red-800 dark:text-red-400',
+      bg: dsError.bg,
+      border: dsError.border,
+      title: dsError.text,
+      text: dsError.text,
     },
     neutral: {
       bg: 'bg-gray-50 dark:bg-gray-800',

package/src/ui/Input/Input.tsx

@@ -8,6 +8,13 @@ import {
 import { cn } from '../../lib/utils';
 import { variants as v } from '@sudobility/design';
 
+// RN input state classes aligned with design system (colors.component.input.default).
+// CSS pseudo-class selectors (focus:, disabled:) don't apply in RN, so we
+// apply these conditionally via component state instead.
+const inputFocusClass = 'border-blue-500 dark:border-blue-400';
+const inputErrorClass = 'border-red-500 dark:border-red-400';
+const inputDisabledClass = 'opacity-50 bg-gray-100 dark:bg-gray-800';
+
 export interface InputProps extends Omit<TextInputProps, 'style'> {
   /** Additional class names for styling */
   className?: string;
@@ -54,9 +61,9 @@ export const Input = React.forwardRef<TextInput, InputProps>(
         ref={ref}
         className={cn(
           v.input.default(),
-          isFocused && 'border-blue-500 dark:border-blue-400',
-          error && 'border-red-500 dark:border-red-400',
-          disabled && 'opacity-50 bg-gray-100 dark:bg-gray-800',
+          isFocused && inputFocusClass,
+          error && inputErrorClass,
+          disabled && inputDisabledClass,
           className
         )}
         editable={isEditable}

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/Label/Label.tsx

@@ -45,7 +45,9 @@ export const Label = React.forwardRef<Text, LabelProps>(
         {...props}
       >
         {children}
-        {required && <Text className='text-red-500 ml-1'>*</Text>}
+        {required && (
+          <Text className='text-red-600 dark:text-red-400 ml-1'>*</Text>
+        )}
       </Text>
     );
   }

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: {