@sudobility/components-rn 1.0.42 → 1.0.43

package/dist/ui/Tooltip/Tooltip.d.ts

@@ -15,25 +15,5 @@ export interface TooltipProps {
     /** Variant style */
     variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
 }
-/**
- * Tooltip Component
- *
- * Simple tooltip that appears on long press in React Native.
- * Shows informational content in a floating view.
- *
- * @example
- * ```tsx
- * <Tooltip content="Click to copy">
- *   <Button>Copy</Button>
- * </Tooltip>
- * ```
- *
- * @example
- * ```tsx
- * <Tooltip content="User profile" placement="bottom" variant="info">
- *   <Avatar />
- * </Tooltip>
- * ```
- */
 export declare const Tooltip: React.FC<TooltipProps>;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/ui/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAChE;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4I1C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAChE;AA6DD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0I1C,CAAC"}

package/dist/ui/TransferList/TransferList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../../src/ui/TransferList/TransferList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,sBAAsB;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gCAAgC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoRpD,CAAC"}
+{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../../src/ui/TransferList/TransferList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,sBAAsB;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gCAAgC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoRpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/components-rn",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "React Native UI components and design system - Ported from @sudobility/components",
   "type": "module",
   "main": "dist/index.esm.js",

package/src/ui/Avatar/Avatar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { View, Text, Image, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { statusIndicatorColors } from '@sudobility/design';
 
 export interface AvatarProps {
   /** Image source URL */
@@ -76,12 +77,12 @@ export const Avatar: React.FC<AvatarProps> = ({
     xl: 'w-4 h-4',
   };
 
-  // Status indicator configurations
+  // Status indicator configurations using DS statusIndicatorColors
   const statusClasses = {
-    online: 'bg-green-500',
-    offline: 'bg-gray-400',
-    away: 'bg-yellow-500',
-    busy: 'bg-red-500',
+    online: statusIndicatorColors.success, // bg-green-500
+    offline: statusIndicatorColors.neutral, // bg-gray-500
+    away: 'bg-yellow-500', // local fallback, no DS yellow status
+    busy: statusIndicatorColors.error, // bg-red-500
   };
 
   // Generate initials from name

package/src/ui/Breadcrumb/Breadcrumb.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { useState } from 'react';
 import { View, Text, Pressable, ScrollView } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface BreadcrumbItem {
   /** Item label */
@@ -64,9 +67,9 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
 
   // Size configurations
   const sizeClasses = {
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-lg',
+    sm: typography.size.sm,
+    md: typography.size.base,
+    lg: typography.size.lg,
   };
 
   // Determine which items to display
@@ -98,7 +101,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
           <Text
             className={cn(
               sizeClasses[size],
-              'text-gray-900 dark:text-white font-medium'
+              `text-gray-900 dark:text-white ${typography.weight.medium}`
             )}
             accessibilityRole='text'
           >
@@ -136,7 +139,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
           className={cn(
             sizeClasses[size],
             isCurrent
-              ? 'text-gray-900 dark:text-white font-medium'
+              ? `text-gray-900 dark:text-white ${typography.weight.medium}`
               : 'text-gray-600 dark:text-gray-400'
           )}
         >

package/src/ui/BreadcrumbNav/BreadcrumbNav.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 BreadcrumbNavItem {
   /** Item label */
@@ -49,12 +52,23 @@ export const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({
       {items.map((item, index) => (
         <React.Fragment key={index}>
           {index > 0 && (
-            <Text className='text-gray-400 dark:text-gray-600 text-sm'>
+            <Text
+              className={cn(
+                'text-gray-400 dark:text-gray-600',
+                typography.size.sm
+              )}
+            >
               {typeof separator === 'string' ? separator : separator}
             </Text>
           )}
           {index === items.length - 1 ? (
-            <Text className='text-gray-900 dark:text-white font-medium text-sm'>
+            <Text
+              className={cn(
+                'text-gray-900 dark:text-white',
+                typography.weight.medium,
+                typography.size.sm
+              )}
+            >
               {item.label}
             </Text>
           ) : (
@@ -63,7 +77,12 @@ export const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({
               accessibilityRole='link'
               accessibilityLabel={item.label}
             >
-              <Text className='text-blue-600 dark:text-blue-400 text-sm'>
+              <Text
+                className={cn(
+                  'text-blue-600 dark:text-blue-400',
+                  typography.size.sm
+                )}
+              >
                 {item.label}
               </Text>
             </Pressable>

package/src/ui/CTASection/CTASection.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
 
 export interface CTAButton {
   /** Button label */
@@ -68,16 +69,17 @@ export const CTASection: React.FC<CTASectionProps> = ({
     lg: 'py-16 px-8',
   };
 
+  // Typography sizing from design tokens
   const titleSizeClasses = {
-    sm: 'text-2xl',
-    md: 'text-3xl',
-    lg: 'text-4xl',
+    sm: designTokens.typography.size['2xl'],
+    md: designTokens.typography.size['3xl'],
+    lg: designTokens.typography.size['4xl'],
   };
 
   const descriptionSizeClasses = {
-    sm: 'text-base',
-    md: 'text-lg',
-    lg: 'text-xl',
+    sm: designTokens.typography.size.base,
+    md: designTokens.typography.size.lg,
+    lg: designTokens.typography.size.xl,
   };
 
   const textColorClass = textColor === 'light' ? 'text-white' : 'text-gray-900';

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