@sudobility/components-rn 1.0.41 → 1.0.43

package/src/ui/StepList/StepList.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 StepListItem {
   /** Step content */
@@ -53,14 +56,28 @@ export const StepList: React.FC<StepListProps> = ({
       if (variant === 'enhanced') {
         return (
           <View className='w-6 h-6 bg-blue-600 rounded-full items-center justify-center mr-3'>
-            <Text className='text-white text-sm font-medium'>{index + 1}</Text>
+            <Text
+              className={cn(
+                'text-white',
+                typography.size.sm,
+                typography.weight.medium
+              )}
+            >
+              {index + 1}
+            </Text>
           </View>
         );
       }
       if (variant === 'minimal') {
         return (
           <View className='w-6 h-6 bg-blue-100 dark:bg-blue-900/20 rounded-full items-center justify-center mr-3'>
-            <Text className='text-blue-600 dark:text-blue-400 text-sm font-medium'>
+            <Text
+              className={cn(
+                'text-blue-600 dark:text-blue-400',
+                typography.size.sm,
+                typography.weight.medium
+              )}
+            >
               {index + 1}
             </Text>
           </View>
@@ -121,7 +138,12 @@ export const StepList: React.FC<StepListProps> = ({
                     •
                   </Text>
                   {typeof subItem === 'string' ? (
-                    <Text className='text-sm text-gray-500 dark:text-gray-500 flex-1'>
+                    <Text
+                      className={cn(
+                        typography.size.sm,
+                        'text-gray-500 dark:text-gray-500 flex-1'
+                      )}
+                    >
                       {subItem}
                     </Text>
                   ) : (

package/src/ui/Table/Table.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, ScrollView, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { ui, designTokens } from '@sudobility/design';
 
 export interface TableColumn<T> {
   /** Column key */
@@ -99,10 +100,11 @@ export function Table<T extends Record<string, unknown>>({
       className={cn('w-full', className)}
     >
       <View className='flex-1'>
-        {/* Header */}
+        {/* Header -- using DS table.thead */}
         <View
           className={cn(
-            'flex-row bg-gray-50 dark:bg-gray-800',
+            'flex-row',
+            ui.table.thead,
             'border-b border-gray-200 dark:border-gray-700'
           )}
         >
@@ -126,7 +128,15 @@ export function Table<T extends Record<string, unknown>>({
                   alignClasses[column.align || 'left']
                 )}
               >
-                <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'>
+                <Text
+                  className={cn(
+                    designTokens.typography.size.xs,
+                    designTokens.typography.weight.medium,
+                    'text-gray-700 dark:text-gray-300',
+                    designTokens.typography.transform.uppercase,
+                    designTokens.typography.tracking.wider
+                  )}
+                >
                   {column.label}
                 </Text>
                 {column.sortable && sort?.column === column.key && (
@@ -139,8 +149,8 @@ export function Table<T extends Record<string, unknown>>({
           ))}
         </View>
 
-        {/* Body */}
-        <View className='bg-white dark:bg-gray-900'>
+        {/* Body -- using DS table.tr */}
+        <View className={ui.table.tr}>
           {data.length === 0 ? (
             <View className='px-4 py-8'>
               <Text className='text-center text-sm text-gray-500 dark:text-gray-400'>
@@ -156,9 +166,7 @@ export function Table<T extends Record<string, unknown>>({
                 className={cn(
                   'flex-row',
                   'border-b border-gray-200 dark:border-gray-700',
-                  striped &&
-                    rowIndex % 2 === 1 &&
-                    'bg-gray-50 dark:bg-gray-800/50'
+                  striped && rowIndex % 2 === 1 && ui.table.trAlt
                 )}
                 accessibilityRole='button'
               >
@@ -176,7 +184,12 @@ export function Table<T extends Record<string, unknown>>({
                     {column.render ? (
                       column.render(row, rowIndex)
                     ) : (
-                      <Text className='text-sm text-gray-900 dark:text-white'>
+                      <Text
+                        className={cn(
+                          designTokens.typography.size.sm,
+                          'text-gray-900 dark:text-white'
+                        )}
+                      >
                         {String(row[column.key] ?? '')}
                       </Text>
                     )}

package/src/ui/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState, useCallback, createContext, useContext } from 'react';
 import { View, Text, Pressable, ScrollView, ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
 
 // Context for tabs state
 interface TabsContextValue {
@@ -104,7 +105,9 @@ export const TabsList: React.FC<TabsListProps> = ({
     horizontal
     showsHorizontalScrollIndicator={false}
     className={cn(
-      'flex-row bg-gray-100 dark:bg-gray-800 rounded-lg p-1',
+      'flex-row bg-gray-100 dark:bg-gray-800',
+      designTokens.radius.lg,
+      'p-1',
       className
     )}
     contentContainerStyle={{ flexGrow: 1 }}
@@ -152,7 +155,9 @@ export const TabsTrigger: React.FC<TabsTriggerProps> = ({
     >
       <Text
         className={cn(
-          'text-sm font-medium text-center',
+          designTokens.typography.size.sm,
+          designTokens.typography.weight.medium,
+          'text-center',
           isSelected
             ? 'text-gray-900 dark:text-white'
             : 'text-gray-600 dark:text-gray-400'

package/src/ui/Text/Text.tsx

@@ -1,6 +1,21 @@
 import * as React from 'react';
 import { Text as RNText } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
+
+// Semantic text colors aligned with the design system color architecture.
+// The DS provides these as hex values via colors.semantic; here they are
+// expressed as Tailwind classes for NativeWind consumption.
+const colorClasses = {
+  default: 'text-gray-900 dark:text-gray-100',
+  muted: 'text-gray-600 dark:text-gray-400',
+  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',
+} as const;
 
 export interface TextProps {
   /** Text content */
@@ -51,62 +66,14 @@ export const Text: React.FC<TextProps> = ({
   numberOfLines,
   className,
 }) => {
-  // Size configurations
-  const sizeClasses = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-  };
-
-  // Weight configurations
-  const weightClasses = {
-    light: 'font-light',
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-  };
-
-  // Color configurations
-  const colorClasses = {
-    default: 'text-gray-900 dark:text-gray-100',
-    muted: 'text-gray-600 dark:text-gray-400',
-    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',
-  };
-
-  // Alignment configurations
-  const alignClasses = align
-    ? {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-      }[align]
-    : '';
-
-  // Transform configurations
-  const transformClasses = {
-    none: '',
-    uppercase: 'uppercase',
-    lowercase: 'lowercase',
-    capitalize: 'capitalize',
-  };
-
   return (
     <RNText
       className={cn(
-        sizeClasses[size],
-        weightClasses[weight],
+        typography.size[size],
+        typography.weight[weight],
         colorClasses[color],
-        alignClasses,
-        transformClasses[transform],
+        align ? typography.align[align] : '',
+        transform !== 'none' ? typography.transform[transform] : '',
         className
       )}
       numberOfLines={numberOfLines}

package/src/ui/TextArea/TextArea.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, TextInput, Text, TextInputProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface TextAreaProps extends Omit<TextInputProps, 'onChange'> {
   /** Current value */
@@ -108,7 +109,7 @@ export const TextArea: React.FC<TextAreaProps> = ({
           readOnly && 'bg-gray-50 dark:bg-gray-900',
           inputClassName
         )}
-        placeholderTextColor='#9CA3AF'
+        placeholderTextColor={colors.raw.neutral[400]}
         accessibilityRole='text'
         accessibilityState={{ disabled }}
         {...textInputProps}

package/src/ui/TextInputModal/TextInputModal.tsx

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface TextInputModalProps {
   /** Modal visibility */
@@ -151,7 +152,7 @@ export const TextInputModal: React.FC<TextInputModalProps> = ({
                     value={value}
                     onChangeText={setValue}
                     placeholder={placeholder}
-                    placeholderTextColor='#9ca3af'
+                    placeholderTextColor={colors.raw.neutral[400]}
                     maxLength={maxLength}
                     editable={!isLoading}
                     autoFocus

package/src/ui/Toast/Toast.tsx

@@ -8,6 +8,35 @@ import React, {
 } from 'react';
 import { View, Text, Pressable, Animated, SafeAreaView } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, textVariants } from '@sudobility/design';
+
+// Split DS alert colors for RN (Views don't cascade text color)
+function splitAlertClasses(base: string, dark: string) {
+  const all = `${base} ${dark}`.split(' ');
+  return {
+    container: all
+      .filter(c => c.includes('bg-') || c.includes('border-'))
+      .join(' '),
+    icon: all.filter(c => c.includes('text-')).join(' '),
+  };
+}
+
+// Lazily derive alert colors so module-level access doesn't fail
+// when Jest transforms ESM chunk imports.
+let _alertColors: Record<string, ReturnType<typeof splitAlertClasses>> | null =
+  null;
+function getAlertColors() {
+  if (!_alertColors) {
+    const alert = colors.component.alert;
+    _alertColors = {
+      success: splitAlertClasses(alert.success.base, alert.success.dark),
+      error: splitAlertClasses(alert.error.base, alert.error.dark),
+      warning: splitAlertClasses(alert.warning.base, alert.warning.dark),
+      info: splitAlertClasses(alert.info.base, alert.info.dark),
+    };
+  }
+  return _alertColors;
+}
 
 /** Data structure representing a single toast notification. */
 export interface ToastMessage {
@@ -72,24 +101,25 @@ export const Toast: React.FC<ToastProps> = ({ toast, onRemove }) => {
     }).start();
   }, [slideAnim]);
 
-  // Variant styles - background
+  const ac = getAlertColors();
+
+  // Variant background+border from design system (colors.component.alert)
   const variantBgClasses = {
     default: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700',
-    success:
-      'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800',
-    error: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800',
-    warning:
-      'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800',
-    info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800',
+    success: ac.success.container,
+    error: ac.error.container,
+    warning: ac.warning.container,
+    info: ac.info.container,
   };
 
-  // Variant styles - icon color
+  // Variant icon colors from design system
+  const alert = colors.component.alert;
   const iconColorClasses = {
     default: 'text-gray-600 dark:text-gray-400',
-    success: 'text-green-600 dark:text-green-400',
-    error: 'text-red-600 dark:text-red-400',
-    warning: 'text-yellow-600 dark:text-yellow-400',
-    info: 'text-blue-600 dark:text-blue-400',
+    success: alert.success.icon,
+    error: alert.error.icon,
+    warning: alert.warning.icon,
+    info: alert.info.icon,
   };
 
   // Icon symbols
@@ -116,12 +146,17 @@ export const Toast: React.FC<ToastProps> = ({ toast, onRemove }) => {
 
       <View className='flex-1 min-w-0'>
         {title && (
-          <Text className='font-semibold text-gray-900 dark:text-white'>
+          <Text
+            className={cn(
+              textVariants.label.default(),
+              'text-gray-900 dark:text-white'
+            )}
+          >
             {title}
           </Text>
         )}
         {description && (
-          <Text className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
+          <Text className={cn(textVariants.body.sm(), 'mt-1')}>
             {description}
           </Text>
         )}

package/src/ui/Tooltip/Tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import { View, Text, Pressable, Modal, Animated } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface TooltipProps {
   /** Content to display in the tooltip */
@@ -40,6 +41,45 @@ export interface TooltipProps {
  * </Tooltip>
  * ```
  */
+
+// Lazily derive tooltip colors from DS to avoid ESM issues in tests.
+let _tooltipColors: Record<string, string> | null = null;
+function getTooltipColors() {
+  if (!_tooltipColors) {
+    const btn = colors.component.button;
+    // Extract bg-* from DS button base for solid tooltip backgrounds
+    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}`;
+    }
+    _tooltipColors = {
+      default: 'bg-gray-900 dark:bg-gray-700',
+      info: 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
+      error: extractBg(btn.destructive.base, btn.destructive.dark),
+    };
+  }
+  return _tooltipColors;
+}
+
 export const Tooltip: React.FC<TooltipProps> = ({
   content,
   children,
@@ -98,14 +138,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
     setIsVisible(false);
   };
 
-  // Variant styles
-  const variantClasses = {
-    default: 'bg-gray-900 dark:bg-gray-700',
-    info: 'bg-blue-600 dark:bg-blue-500',
-    success: 'bg-green-600 dark:bg-green-500',
-    warning: 'bg-yellow-600 dark:bg-yellow-500',
-    error: 'bg-red-600 dark:bg-red-500',
-  };
+  // Variant styles from DS
+  const variantClasses = getTooltipColors();
 
   // Calculate tooltip position
   const getTooltipPosition = () => {
@@ -173,7 +207,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
                 className
               )}
             >
-              <Text className='text-xs font-medium text-white'>{content}</Text>
+              <Text
+                className={`${designTokens.typography.size.xs} ${designTokens.typography.weight.medium} text-white`}
+              >
+                {content}
+              </Text>
             </View>
           </Animated.View>
         </Pressable>

package/src/ui/TransferList/TransferList.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput, Pressable, ScrollView } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface TransferListItem {
   /** Item ID */
@@ -173,7 +174,7 @@ export const TransferList: React.FC<TransferListProps> = ({
             value={searchValue}
             onChangeText={onSearchChange}
             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 border border-gray-300 dark:border-gray-700 rounded-md'
           />
         </View>