@sudobility/components-rn 1.0.41 → 1.0.43

package/src/ui/Calendar/Calendar.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { useState } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface CalendarProps {
   /** Selected date */
@@ -154,10 +157,23 @@ export const Calendar: React.FC<CalendarProps> = ({
           accessibilityRole='button'
           accessibilityLabel='Previous month'
         >
-          <Text className='text-lg text-gray-700 dark:text-gray-300'>‹</Text>
+          <Text
+            className={cn(
+              typography.size.lg,
+              'text-gray-700 dark:text-gray-300'
+            )}
+          >
+            ‹
+          </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'
+          )}
+        >
           {monthYear}
         </Text>
 
@@ -167,7 +183,14 @@ export const Calendar: React.FC<CalendarProps> = ({
           accessibilityRole='button'
           accessibilityLabel='Next month'
         >
-          <Text className='text-lg text-gray-700 dark:text-gray-300'>›</Text>
+          <Text
+            className={cn(
+              typography.size.lg,
+              'text-gray-700 dark:text-gray-300'
+            )}
+          >
+            ›
+          </Text>
         </Pressable>
       </View>
 
@@ -175,7 +198,13 @@ export const Calendar: React.FC<CalendarProps> = ({
       <View className='flex-row mb-2'>
         {weekDays.map(day => (
           <View key={day} className='flex-1 items-center py-2'>
-            <Text className='text-xs font-medium text-gray-600 dark:text-gray-400'>
+            <Text
+              className={cn(
+                typography.size.xs,
+                typography.weight.medium,
+                'text-gray-600 dark:text-gray-400'
+              )}
+            >
               {day}
             </Text>
           </View>
@@ -223,11 +252,11 @@ export const Calendar: React.FC<CalendarProps> = ({
               >
                 <Text
                   className={cn(
-                    'text-sm',
+                    typography.size.sm,
                     isCurrentMonth
                       ? 'text-gray-900 dark:text-white'
                       : 'text-gray-400 dark:text-gray-600',
-                    isSelected && 'text-white font-semibold'
+                    isSelected && `text-white ${typography.weight.semibold}`
                   )}
                 >
                   {date.getDate()}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export type ChainType = 'evm' | 'solana' | 'bitcoin' | 'cosmos';
 
@@ -11,44 +12,61 @@ export interface ChainBadgeProps extends ViewProps {
   showLabel?: boolean;
 }
 
-const chainConfig: Record<
-  ChainType,
-  { label: string; emoji: string; bgColor: string; textColor: string }
-> = {
-  evm: {
-    label: 'EVM',
-    emoji: '⟠',
-    bgColor:
-      'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800',
-    textColor: 'text-blue-700 dark:text-blue-300',
-  },
-  solana: {
-    label: 'SOL',
-    emoji: '◎',
-    bgColor:
-      'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800',
-    textColor: 'text-purple-700 dark:text-purple-300',
-  },
-  bitcoin: {
-    label: 'BTC',
-    emoji: '₿',
-    bgColor:
-      'bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800',
-    textColor: 'text-orange-700 dark:text-orange-300',
-  },
-  cosmos: {
-    label: 'ATOM',
-    emoji: '⚛',
-    bgColor:
-      'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800',
-    textColor: 'text-indigo-700 dark:text-indigo-300',
-  },
+/**
+ * Split combined DS badge color strings (which include both bg-* and text-*)
+ * into separate bg and text class strings.
+ */
+function splitBadgeClasses(base: string, dark: string) {
+  const all = `${base} ${dark}`.split(' ');
+  return {
+    bg: all.filter(c => c.includes('bg-')).join(' '),
+    text: all.filter(c => c.includes('text-')).join(' '),
+  };
+}
+
+// Lazily derive chain colors from DS to avoid ESM issues in tests.
+let _chainColors: ReturnType<typeof buildChainColors> | null = null;
+function getChainColors() {
+  if (!_chainColors) _chainColors = buildChainColors();
+  return _chainColors;
+}
+function buildChainColors() {
+  const badge = colors.component.badge;
+  return {
+    evm: splitBadgeClasses(badge.ethereum.base, badge.ethereum.dark),
+    solana: splitBadgeClasses(badge.solana.base, badge.solana.dark),
+    bitcoin: splitBadgeClasses(badge.bitcoin.base, badge.bitcoin.dark),
+    // DS has no cosmos badge — use local fallback (indigo)
+    cosmos: {
+      bg: 'bg-indigo-50 dark:bg-indigo-900/20',
+      text: 'text-indigo-700 dark:text-indigo-300',
+    },
+  };
+}
+
+const chainMeta: Record<ChainType, { label: string; emoji: string }> = {
+  evm: { label: 'EVM', emoji: '⟠' },
+  solana: { label: 'SOL', emoji: '◎' },
+  bitcoin: { label: 'BTC', emoji: '₿' },
+  cosmos: { label: 'ATOM', emoji: '⚛' },
 };
 
 const sizeConfig = {
-  sm: { padding: 'px-1.5 py-0.5', text: 'text-xs', gap: 'gap-0.5' },
-  md: { padding: 'px-2 py-1', text: 'text-sm', gap: 'gap-1' },
-  lg: { padding: 'px-2.5 py-1.5', text: 'text-base', gap: 'gap-1.5' },
+  sm: {
+    padding: 'px-1.5 py-0.5',
+    text: designTokens.typography.size.xs,
+    gap: 'gap-0.5',
+  },
+  md: {
+    padding: 'px-2 py-1',
+    text: designTokens.typography.size.sm,
+    gap: 'gap-1',
+  },
+  lg: {
+    padding: 'px-2.5 py-1.5',
+    text: designTokens.typography.size.base,
+    gap: 'gap-1.5',
+  },
 };
 
 export const ChainBadge: React.FC<ChainBadgeProps> = ({
@@ -58,27 +76,34 @@ export const ChainBadge: React.FC<ChainBadgeProps> = ({
   className,
   ...props
 }) => {
-  const chain = chainConfig[chainType];
+  const chainColors = getChainColors()[chainType];
+  const meta = chainMeta[chainType];
   const sizeStyles = sizeConfig[size];
 
   return (
     <View
       className={cn(
         'flex-row items-center rounded-md border',
-        chain.bgColor,
+        chainColors.bg,
         sizeStyles.padding,
         sizeStyles.gap,
         className
       )}
-      accessibilityLabel={`${chain.label} chain`}
+      accessibilityLabel={`${meta.label} chain`}
       {...props}
     >
-      <Text className={cn(sizeStyles.text, chain.textColor)}>
-        {chain.emoji}
+      <Text className={cn(sizeStyles.text, chainColors.text)}>
+        {meta.emoji}
       </Text>
       {showLabel && (
-        <Text className={cn('font-medium', sizeStyles.text, chain.textColor)}>
-          {chain.label}
+        <Text
+          className={cn(
+            designTokens.typography.weight.medium,
+            sizeStyles.text,
+            chainColors.text
+          )}
+        >
+          {meta.label}
         </Text>
       )}
     </View>

package/src/ui/Checkbox/Checkbox.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { View, Text, Pressable, PressableProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface CheckboxProps extends Omit<PressableProps, 'onPress'> {
   /** Whether the checkbox is checked (controlled mode) */
@@ -54,6 +55,36 @@ export interface CheckboxProps extends Omit<PressableProps, 'onPress'> {
  * />
  * ```
  */
+
+// Lazily derive checkbox colors from DS to avoid ESM issues in tests.
+let _checkboxColors: ReturnType<typeof buildCheckboxColors> | null = null;
+function getCheckboxColors() {
+  if (!_checkboxColors) _checkboxColors = buildCheckboxColors();
+  return _checkboxColors;
+}
+function buildCheckboxColors() {
+  // Extract solid bg colors from DS button variants for checked states
+  // DS button.primary.base contains "bg-blue-600 ... text-white"
+  // We only need the bg-* and border-* portions for checkbox checked state
+  function extractCheckedColor(base: string) {
+    const parts = base.split(' ');
+    const bg =
+      parts.find(
+        c =>
+          c.startsWith('bg-') && !c.includes('hover:') && !c.includes('active:')
+      ) || '';
+    // For checkbox, border matches bg color
+    return `${bg} ${bg.replace('bg-', 'border-')}`;
+  }
+  const btn = colors.component.button;
+  return {
+    primary: extractCheckedColor(btn.primary.base),
+    success: extractCheckedColor(btn.success.base),
+    warning: 'bg-yellow-600 border-yellow-600', // DS has no yellow button; local fallback
+    error: extractCheckedColor(btn.destructive.base),
+  } as Record<string, string>;
+}
+
 export const Checkbox: React.FC<CheckboxProps> = ({
   checked: controlledChecked,
   defaultChecked = false,
@@ -80,43 +111,37 @@ export const Checkbox: React.FC<CheckboxProps> = ({
     sm: {
       box: 'w-4 h-4',
       check: 'w-2 h-2',
-      text: 'text-sm',
-      desc: 'text-xs',
+      text: designTokens.typography.size.sm,
+      desc: designTokens.typography.size.xs,
     },
     md: {
       box: 'w-5 h-5',
       check: 'w-3 h-3',
-      text: 'text-base',
-      desc: 'text-sm',
+      text: designTokens.typography.size.base,
+      desc: designTokens.typography.size.sm,
     },
     lg: {
       box: 'w-6 h-6',
       check: 'w-4 h-4',
-      text: 'text-lg',
-      desc: 'text-base',
+      text: designTokens.typography.size.lg,
+      desc: designTokens.typography.size.base,
     },
   };
 
   const getVariantClasses = () => {
+    const checkedColors = getCheckboxColors();
     if (error) {
       return checked
-        ? 'bg-red-600 border-red-600'
+        ? checkedColors.error
         : 'border-red-600 dark:border-red-500';
     }
 
+    const unchecked = 'border-gray-300 dark:border-gray-600';
     const variantClasses = {
-      primary: checked
-        ? 'bg-blue-600 border-blue-600'
-        : 'border-gray-300 dark:border-gray-600',
-      success: checked
-        ? 'bg-green-600 border-green-600'
-        : 'border-gray-300 dark:border-gray-600',
-      warning: checked
-        ? 'bg-yellow-600 border-yellow-600'
-        : 'border-gray-300 dark:border-gray-600',
-      error: checked
-        ? 'bg-red-600 border-red-600'
-        : 'border-gray-300 dark:border-gray-600',
+      primary: checked ? checkedColors.primary : unchecked,
+      success: checked ? checkedColors.success : unchecked,
+      warning: checked ? checkedColors.warning : unchecked,
+      error: checked ? checkedColors.error : unchecked,
     };
 
     return variantClasses[variant];
@@ -191,7 +216,9 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         )}
       </Pressable>
       {errorMessage && (
-        <Text className='mt-1 text-sm text-red-600 dark:text-red-400'>
+        <Text
+          className={`mt-1 ${designTokens.typography.size.sm} text-red-600 dark:text-red-400`}
+        >
           {errorMessage}
         </Text>
       )}

package/src/ui/Code/Code.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface CodeProps {
   /** Code content */
@@ -30,6 +31,45 @@ export interface CodeProps {
  * </Code>
  * ```
  */
+
+// Lazily derive code colors from DS to avoid ESM issues in tests.
+let _codeColors: ReturnType<typeof buildCodeColors> | null = null;
+function getCodeColors() {
+  if (!_codeColors) _codeColors = buildCodeColors();
+  return _codeColors;
+}
+function buildCodeColors() {
+  const alert = colors.component.alert;
+  // Split combined DS classes into separate bg/text for RN
+  function splitClasses(base: string, dark: string) {
+    const all = `${base} ${dark}`.split(' ');
+    return {
+      bg: all.filter(c => c.includes('bg-')).join(' '),
+      text: all.filter(c => c.includes('text-')).join(' '),
+    };
+  }
+  const info = splitClasses(alert.info.base, alert.info.dark);
+  const success = splitClasses(alert.success.base, alert.success.dark);
+  const warning = splitClasses(alert.warning.base, alert.warning.dark);
+  const error = splitClasses(alert.error.base, alert.error.dark);
+  return {
+    bg: {
+      default: 'bg-gray-100 dark:bg-gray-800',
+      primary: info.bg,
+      success: success.bg,
+      warning: warning.bg,
+      danger: error.bg,
+    } as Record<string, string>,
+    text: {
+      default: 'text-gray-900 dark:text-gray-100',
+      primary: info.text,
+      success: success.text,
+      warning: warning.text,
+      danger: error.text,
+    } as Record<string, string>,
+  };
+}
+
 export const Code: React.FC<CodeProps> = ({
   children,
   size = 'md',
@@ -38,28 +78,14 @@ export const Code: React.FC<CodeProps> = ({
 }) => {
   // Size configurations
   const sizeClasses = {
-    sm: 'text-xs px-1 py-0.5',
-    md: 'text-sm px-1.5 py-0.5',
-    lg: 'text-base px-2 py-1',
-  };
-
-  // Variant configurations - background
-  const variantBgClasses = {
-    default: 'bg-gray-100 dark:bg-gray-800',
-    primary: 'bg-blue-50 dark:bg-blue-900/30',
-    success: 'bg-green-50 dark:bg-green-900/30',
-    warning: 'bg-yellow-50 dark:bg-yellow-900/30',
-    danger: 'bg-red-50 dark:bg-red-900/30',
+    sm: `${designTokens.typography.size.xs} px-1 py-0.5`,
+    md: `${designTokens.typography.size.sm} px-1.5 py-0.5`,
+    lg: `${designTokens.typography.size.base} px-2 py-1`,
   };
 
-  // Variant configurations - text
-  const variantTextClasses = {
-    default: 'text-gray-900 dark:text-gray-100',
-    primary: 'text-blue-700 dark:text-blue-300',
-    success: 'text-green-700 dark:text-green-300',
-    warning: 'text-yellow-700 dark:text-yellow-300',
-    danger: 'text-red-700 dark:text-red-300',
-  };
+  const codeColors = getCodeColors();
+  const variantBgClasses = codeColors.bg;
+  const variantTextClasses = codeColors.text;
 
   return (
     <View
@@ -71,7 +97,11 @@ export const Code: React.FC<CodeProps> = ({
       )}
     >
       <Text
-        className={cn('font-mono font-medium', variantTextClasses[variant])}
+        className={cn(
+          designTokens.typography.family.mono,
+          designTokens.typography.weight.medium,
+          variantTextClasses[variant]
+        )}
         style={{ fontFamily: 'monospace' }}
       >
         {children}

package/src/ui/CodeDisplay/CodeDisplay.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface CodeDisplayProps {
   /** Code or text to display */
@@ -40,6 +41,36 @@ export interface CodeDisplayProps {
  * </CodeDisplay>
  * ```
  */
+
+// Lazily derive display colors from DS to avoid ESM issues in tests.
+let _displayColors: ReturnType<typeof buildDisplayColors> | null = null;
+function getDisplayColors() {
+  if (!_displayColors) _displayColors = buildDisplayColors();
+  return _displayColors;
+}
+function buildDisplayColors() {
+  const alert = colors.component.alert;
+  function splitClasses(base: string, dark: string) {
+    const all = `${base} ${dark}`.split(' ');
+    return {
+      text: all.filter(c => c.includes('text-')).join(' '),
+      bg: all.filter(c => c.includes('bg-')).join(' '),
+    };
+  }
+  const info = splitClasses(alert.info.base, alert.info.dark);
+  const success = splitClasses(alert.success.base, alert.success.dark);
+  const warning = splitClasses(alert.warning.base, alert.warning.dark);
+  return {
+    primary: `${info.text} ${info.bg}`,
+    // secondary uses purple — no DS mapping, keep local
+    secondary:
+      'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30',
+    success: `${success.text} ${success.bg}`,
+    warning: `${warning.text} ${warning.bg}`,
+    neutral: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800',
+  } as Record<string, string>;
+}
+
 export const CodeDisplay: React.FC<CodeDisplayProps> = ({
   children,
   variant = 'primary',
@@ -49,34 +80,25 @@ export const CodeDisplay: React.FC<CodeDisplayProps> = ({
   wrap = false,
   className,
 }) => {
-  // Color variant configurations
-  const variantClasses = {
-    primary: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30',
-    secondary:
-      'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30',
-    success:
-      'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30',
-    warning:
-      'text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30',
-    neutral: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800',
-  };
+  // Color variant configurations from DS
+  const variantClasses = getDisplayColors();
 
-  // Size configurations
+  // Size configurations using DS typography tokens
   const sizeClasses = {
     xs: {
-      text: 'text-xs',
+      text: designTokens.typography.size.xs,
       padding: inline ? 'px-1.5 py-0.5' : 'px-2 py-1',
     },
     sm: {
-      text: 'text-sm',
+      text: designTokens.typography.size.sm,
       padding: inline ? 'px-2 py-0.5' : 'px-3 py-1.5',
     },
     md: {
-      text: 'text-base',
+      text: designTokens.typography.size.base,
       padding: inline ? 'px-2.5 py-1' : 'px-4 py-2',
     },
     lg: {
-      text: 'text-lg',
+      text: designTokens.typography.size.lg,
       padding: inline ? 'px-3 py-1' : 'px-4 py-2',
     },
   };
@@ -90,14 +112,18 @@ export const CodeDisplay: React.FC<CodeDisplayProps> = ({
 
   const sizeConfig = sizeClasses[size];
 
-  // Extract background and text color classes
-  const [textColorClass, bgClass] = variantClasses[variant].split(' ');
+  // Extract background and text color classes from combined variant string
+  const variantParts = variantClasses[variant].split(' ');
+  const textColorClass = variantParts
+    .filter(c => c.includes('text-'))
+    .join(' ');
+  const bgClass = variantParts.filter(c => c.includes('bg-')).join(' ');
 
   if (inline) {
     return (
       <Text
         className={cn(
-          'font-mono rounded-lg',
+          `${designTokens.typography.family.mono} rounded-lg`,
           textColorClass,
           bgClass,
           sizeConfig.text,
@@ -113,7 +139,7 @@ export const CodeDisplay: React.FC<CodeDisplayProps> = ({
   const content = (
     <Text
       className={cn(
-        'font-mono',
+        designTokens.typography.family.mono,
         textColorClass,
         sizeConfig.text,
         !inline && alignClasses[align],

package/src/ui/CollapsibleSection/CollapsibleSection.tsx

@@ -10,6 +10,9 @@ import {
   UIManager,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 // Enable LayoutAnimation on Android
 if (
@@ -126,7 +129,8 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
         >
           <Text
             className={cn(
-              'text-base font-medium',
+              typography.size.base,
+              typography.weight.medium,
               isSelected && !selectedSubsection
                 ? 'text-blue-700 dark:text-blue-300'
                 : 'text-gray-700 dark:text-gray-300'
@@ -145,7 +149,7 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
             accessibilityLabel={isExpanded ? 'Collapse' : 'Expand'}
           >
             <Animated.View style={{ transform: [{ rotate: rotation }] }}>
-              <Text className='text-gray-500 text-lg'>›</Text>
+              <Text className={cn('text-gray-500', typography.size.lg)}>›</Text>
             </Animated.View>
           </Pressable>
         )}
@@ -172,7 +176,7 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
               >
                 <Text
                   className={cn(
-                    'text-sm',
+                    typography.size.sm,
                     selectedSubsection === subsection.id
                       ? 'text-blue-700 dark:text-blue-300'
                       : 'text-gray-600 dark:text-gray-400'

package/src/ui/Combobox/Combobox.tsx

@@ -10,6 +10,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface ComboboxOption {
   /** Option value */
@@ -143,7 +144,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
                     value={searchQuery}
                     onChangeText={setSearchQuery}
                     placeholder={searchPlaceholder}
-                    placeholderTextColor='#9ca3af'
+                    placeholderTextColor={colors.raw.neutral[400]}
                     autoFocus
                     className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md'
                   />

package/src/ui/Command/Command.tsx

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface CommandItem {
   /** Item ID */
@@ -159,7 +160,7 @@ export const Command: React.FC<CommandProps> = ({
                   value={searchQuery}
                   onChangeText={setSearchQuery}
                   placeholder={placeholder}
-                  placeholderTextColor='#9ca3af'
+                  placeholderTextColor={colors.raw.neutral[400]}
                   className='flex-1 text-gray-900 dark:text-white text-base'
                   autoCapitalize='none'
                   autoCorrect={false}