@sudobility/components-rn 1.0.40 → 1.0.42

package/src/ui/Banner/Banner.tsx

@@ -2,6 +2,26 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { View, Text, Pressable, Animated } from 'react-native';
 import { InfoType } from '@sudobility/types';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
+
+const alert = colors.component.alert;
+
+// Split DS alert color strings into container (bg+border) and text for RN.
+// Views don't cascade text color to child Text elements.
+function splitAlertClasses(base: string, dark: string) {
+  const all = `${base} ${dark}`.split(' ');
+  return {
+    container: all
+      .filter(c => c.includes('bg-') || 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 BannerProps {
   /** Whether the banner is visible */
@@ -24,46 +44,39 @@ export interface BannerProps {
   closeAccessibilityLabel?: string;
 }
 
+// Banner variant config derived from design system (colors.component.alert)
 const variantConfig: Record<
   InfoType,
   {
     icon: string;
     container: string;
     iconColor: string;
-    titleColor: string;
-    descriptionColor: string;
+    textColor: string;
   }
 > = {
   [InfoType.INFO]: {
     icon: '\u2139',
-    container:
-      'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800',
-    iconColor: 'text-blue-600 dark:text-blue-400',
-    titleColor: 'text-blue-900 dark:text-blue-100',
-    descriptionColor: 'text-blue-700 dark:text-blue-300',
+    container: dsInfo.container,
+    iconColor: alert.info.icon,
+    textColor: dsInfo.text,
   },
   [InfoType.SUCCESS]: {
     icon: '\u2713',
-    container:
-      'bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800',
-    iconColor: 'text-green-600 dark:text-green-400',
-    titleColor: 'text-green-900 dark:text-green-100',
-    descriptionColor: 'text-green-700 dark:text-green-300',
+    container: dsSuccess.container,
+    iconColor: alert.success.icon,
+    textColor: dsSuccess.text,
   },
   [InfoType.WARNING]: {
     icon: '\u26A0',
-    container:
-      'bg-yellow-50 dark:bg-amber-950 border-yellow-200 dark:border-amber-800',
-    iconColor: 'text-yellow-600 dark:text-amber-400',
-    titleColor: 'text-yellow-900 dark:text-amber-100',
-    descriptionColor: 'text-yellow-700 dark:text-amber-300',
+    container: dsWarning.container,
+    iconColor: alert.warning.icon,
+    textColor: dsWarning.text,
   },
   [InfoType.ERROR]: {
     icon: '\u2717',
-    container: 'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800',
-    iconColor: 'text-red-600 dark:text-red-400',
-    titleColor: 'text-red-900 dark:text-red-100',
-    descriptionColor: 'text-red-700 dark:text-red-300',
+    container: dsError.container,
+    iconColor: alert.error.icon,
+    textColor: dsError.text,
   },
 };
 
@@ -206,11 +219,9 @@ export const Banner: React.FC<BannerProps> = ({
 
         {/* Content */}
         <View className='flex-1 min-w-0'>
-          <Text className={cn('font-semibold', config.titleColor)}>
-            {title}
-          </Text>
+          <Text className={cn('font-semibold', config.textColor)}>{title}</Text>
           {description ? (
-            <Text className={cn('text-sm mt-1', config.descriptionColor)}>
+            <Text className={cn('text-sm mt-1', config.textColor)}>
               {description}
             </Text>
           ) : null}

package/src/ui/Card/Card.tsx

@@ -29,8 +29,8 @@ export interface CardProps extends ViewProps {
   onClose?: () => void;
 }
 
-const calloutStyle =
-  'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800';
+// Callout uses the DS info card variant colors
+const calloutStyle = getCardVariantColors('info');
 
 const paddingStyles = {
   none: '',

package/src/ui/Divider/Divider.tsx

@@ -3,6 +3,13 @@ import { View, Text, ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
 import { textVariants } from '@sudobility/design';
 
+// Divider line colors aligned with DS border tokens (colors.semantic.border)
+const lineVariantClasses = {
+  light: 'bg-gray-200 dark:bg-gray-700',
+  medium: 'bg-gray-300 dark:bg-gray-600',
+  dark: 'bg-gray-400 dark:bg-gray-500',
+} as const;
+
 export interface DividerProps extends ViewProps {
   /** Optional text label */
   label?: string;
@@ -81,20 +88,13 @@ export const Divider: React.FC<DividerProps> = ({
     thick: 4,
   };
 
-  // Color variant configurations
-  const variantClasses = {
-    light: 'bg-gray-200 dark:bg-gray-700',
-    medium: 'bg-gray-300 dark:bg-gray-600',
-    dark: 'bg-gray-400 dark:bg-gray-500',
-  };
-
   // Vertical divider
   if (orientation === 'vertical') {
     return (
       <View
         className={cn(
           'self-stretch',
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.vertical[spacing],
           className
         )}
@@ -111,7 +111,7 @@ export const Divider: React.FC<DividerProps> = ({
       <View
         className={cn(
           'w-full',
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.horizontal[spacing],
           lineClassName,
           className
@@ -143,21 +143,16 @@ export const Divider: React.FC<DividerProps> = ({
     >
       {labelPosition !== 'left' && (
         <View
-          className={cn('flex-1', variantClasses[variant], lineClassName)}
+          className={cn('flex-1', lineVariantClasses[variant], lineClassName)}
           style={{ height: thicknessValues[thickness] }}
         />
       )}
-      <Text
-        className={cn(
-          textVariants.body.sm(),
-          'px-3 text-gray-500 dark:text-gray-400'
-        )}
-      >
+      <Text className={cn(textVariants.caption.default(), 'px-3')}>
         {label}
       </Text>
       {labelPosition !== 'right' && (
         <View
-          className={cn('flex-1', variantClasses[variant], lineClassName)}
+          className={cn('flex-1', lineVariantClasses[variant], lineClassName)}
           style={{ height: thicknessValues[thickness] }}
         />
       )}

package/src/ui/Heading/Heading.tsx

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
+
+// Heading colors aligned with the design system color architecture
+const colorClasses = {
+  default: 'text-gray-900 dark:text-gray-100',
+  muted: 'text-gray-700 dark:text-gray-300',
+  primary: 'text-blue-600 dark:text-blue-400',
+} as const;
 
 export interface HeadingProps {
   /** Heading content */
@@ -60,48 +70,15 @@ export const Heading: React.FC<HeadingProps> = ({
 
   const actualSize = size || defaultSizes[level];
 
-  // Size configurations
-  const sizeClasses = {
-    '4xl': 'text-4xl',
-    '3xl': 'text-3xl',
-    '2xl': 'text-2xl',
-    xl: 'text-xl',
-    lg: 'text-lg',
-    base: 'text-base',
-  };
-
-  // Weight configurations
-  const weightClasses = {
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-    extrabold: 'font-extrabold',
-  };
-
-  // Color configurations
-  const colorClasses = {
-    default: 'text-gray-900 dark:text-gray-100',
-    muted: 'text-gray-700 dark:text-gray-300',
-    primary: 'text-blue-600 dark:text-blue-400',
-  };
-
-  // Alignment configurations
-  const alignClasses = align
-    ? {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-      }[align]
-    : '';
-
   return (
     <Text
       className={cn(
-        sizeClasses[actualSize],
-        weightClasses[weight],
+        typography.size[actualSize],
+        typography.weight[weight],
+        typography.leading.heading,
+        typography.tracking.heading,
         colorClasses[color],
-        alignClasses,
+        align ? typography.align[align] : '',
         className
       )}
       accessibilityRole='header'

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/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/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/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/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
+  default: colors.raw.blue[600],
   white: '#ffffff',
-  success: '#16a34a', // green-600
-  warning: '#ea580c', // orange-600
-  error: '#dc2626', // red-600
+  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/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/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>
         )}