@sudobility/components-rn 1.0.42 → 1.0.43

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/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

@@ -29,7 +29,7 @@ const sizeMap = {
 // Spinner colors from design system raw palette
 const colorMap = {
   default: colors.raw.blue[600],
-  white: '#ffffff',
+  white: colors.raw.neutral[0],
   success: colors.raw.green[600],
   warning: colors.raw.orange[600],
   error: colors.raw.red[600],

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>

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/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