@sudobility/components-rn 1.0.41 → 1.0.42

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