@sudobility/components-rn 1.0.41 → 1.0.42

package/dist/index.esm.js

@@ -2,9 +2,9 @@ import { clsx } from "clsx";
 import * as React from "react";
 import React__default, { useState, useRef, useCallback, useEffect, createContext, useContext } from "react";
 import { Animated, View, Text as Text$1, Pressable, ActivityIndicator, TextInput, Dimensions, Modal as Modal$1, SafeAreaView, FlatList, StyleSheet, TouchableOpacity, Image, KeyboardAvoidingView, ScrollView, Platform, PanResponder, Linking, TouchableWithoutFeedback, useWindowDimensions, RefreshControl, UIManager, LayoutAnimation, Alert as Alert$1 } from "react-native";
+import { colors, variants, getCardVariantColors, textVariants, designTokens } from "@sudobility/design";
+import { colors as colors2, designTokens as designTokens2, textVariants as textVariants2, variants as variants2 } from "@sudobility/design";
 import { cva } from "class-variance-authority";
-import { variants, getCardVariantColors, textVariants } from "@sudobility/design";
-import { colors, designTokens, textVariants as textVariants2, variants as variants2 } from "@sudobility/design";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function cn(...inputs) {
   return clsx(inputs);
@@ -1354,34 +1354,42 @@ logger.withContext("API");
 logger.withContext("CONTRACT");
 logger.withContext("ENS");
 logger.withContext("STORAGE");
+const alert$1 = colors.component.alert;
+function splitAlertClasses$2(base, dark) {
+  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$1 = splitAlertClasses$2(alert$1.info.base, alert$1.info.dark);
+const dsSuccess$1 = splitAlertClasses$2(alert$1.success.base, alert$1.success.dark);
+const dsWarning$1 = splitAlertClasses$2(alert$1.warning.base, alert$1.warning.dark);
+const dsError$1 = splitAlertClasses$2(alert$1.error.base, alert$1.error.dark);
 const variantConfig = {
   [InfoType.INFO]: {
     icon: "ℹ",
-    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$1.container,
+    iconColor: alert$1.info.icon,
+    textColor: dsInfo$1.text
   },
   [InfoType.SUCCESS]: {
     icon: "✓",
-    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$1.container,
+    iconColor: alert$1.success.icon,
+    textColor: dsSuccess$1.text
   },
   [InfoType.WARNING]: {
     icon: "⚠",
-    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$1.container,
+    iconColor: alert$1.warning.icon,
+    textColor: dsWarning$1.text
   },
   [InfoType.ERROR]: {
     icon: "✗",
-    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$1.container,
+    iconColor: alert$1.error.icon,
+    textColor: dsError$1.text
   }
 };
 const Banner = ({
@@ -1478,8 +1486,8 @@ const Banner = ({
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-shrink-0 mt-0.5", children: icon || /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-lg", config.iconColor), children: config.icon }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("font-semibold", config.titleColor), children: title }),
-              description ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-sm mt-1", config.descriptionColor), children: description }) : null
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("font-semibold", config.textColor), children: title }),
+              description ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-sm mt-1", config.textColor), children: description }) : null
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               Pressable,
@@ -1631,7 +1639,7 @@ const Button = React.forwardRef(
   }
 );
 Button.displayName = "Button";
-const calloutStyle = "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800";
+const calloutStyle = getCardVariantColors("info");
 const paddingStyles = {
   none: "",
   sm: "p-3",
@@ -1708,6 +1716,9 @@ const CardFooter = ({
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-row items-center pt-4", className), ...props, children });
 };
+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";
 const Input = React.forwardRef(
   ({ className, error, disabled, editable, onFocus, onBlur, ...props }, ref) => {
     const [isFocused, setIsFocused] = React.useState(false);
@@ -1726,9 +1737,9 @@ const Input = React.forwardRef(
         ref,
         className: cn(
           variants.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,
@@ -1750,15 +1761,11 @@ const sizeMap = {
   extraLarge: "large"
 };
 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]
 };
 const Spinner = ({
   size = "default",
@@ -1780,7 +1787,7 @@ const Spinner = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: activitySize, color }),
-        showText && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "mt-2 text-gray-600 dark:text-gray-400 text-sm", children: loadingText })
+        showText && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(textVariants.body.sm(), "mt-2"), children: loadingText })
       ]
     }
   );
@@ -1792,8 +1799,8 @@ const defaultIcons = {
   attention: "🔔",
   error: "✕"
 };
-const AlertTitle = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("font-medium mb-1", className), children });
-const AlertDescription = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-sm", className), children });
+const AlertTitle = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(textVariants.label.default(), "mb-1", className), children });
+const AlertDescription = ({ children, className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(textVariants.body.sm(), className), children });
 const Alert = ({
   variant = "info",
   title,
@@ -1814,8 +1821,8 @@ const Alert = ({
       children: [
         IconComponent && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-shrink-0", children: IconComponent }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "font-medium mb-1", children: title }),
-          description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm", children: description }),
+          title && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(textVariants.label.default(), "mb-1"), children: title }),
+          description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: textVariants.body.sm(), children: description }),
           children
         ] })
       ]
@@ -2060,6 +2067,11 @@ const Stack = ({
 };
 const VStack = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: "vertical", ...props });
 const HStack = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: "horizontal", ...props });
+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"
+};
 const Divider = ({
   label,
   labelPosition = "center",
@@ -2092,18 +2104,13 @@ const Divider = ({
     medium: 2,
     thick: 4
   };
-  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"
-  };
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       View,
       {
         className: cn(
           "self-stretch",
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.vertical[spacing],
           className
         ),
@@ -2119,7 +2126,7 @@ const Divider = ({
       {
         className: cn(
           "w-full",
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.horizontal[spacing],
           lineClassName,
           className
@@ -2150,24 +2157,15 @@ const Divider = ({
         labelPosition !== "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           View,
           {
-            className: cn("flex-1", variantClasses[variant], lineClassName),
+            className: cn("flex-1", lineVariantClasses[variant], lineClassName),
             style: { height: thicknessValues[thickness] }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Text$1,
-          {
-            className: cn(
-              textVariants.body.sm(),
-              "px-3 text-gray-500 dark:text-gray-400"
-            ),
-            children: label
-          }
-        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(textVariants.caption.default(), "px-3"), children: label }),
         labelPosition !== "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           View,
           {
-            className: cn("flex-1", variantClasses[variant], lineClassName),
+            className: cn("flex-1", lineVariantClasses[variant], lineClassName),
             style: { height: thicknessValues[thickness] }
           }
         )
@@ -2405,7 +2403,7 @@ const Label = React.forwardRef(
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-red-600 dark:text-red-400 ml-1", children: "*" })
         ]
       }
     );
@@ -3334,6 +3332,15 @@ const NumberInput = ({
     }
   );
 };
+const { typography: typography$2 } = designTokens;
+const colorClasses$1 = {
+  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"
+};
 const Text = ({
   children,
   size = "base",
@@ -3344,51 +3351,15 @@ const Text = ({
   numberOfLines,
   className
 }) => {
-  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"
-  };
-  const weightClasses = {
-    light: "font-light",
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  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"
-  };
-  const alignClasses = align ? {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }[align] : "";
-  const transformClasses = {
-    none: "",
-    uppercase: "uppercase",
-    lowercase: "lowercase",
-    capitalize: "capitalize"
-  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Text$1,
     {
       className: cn(
-        sizeClasses[size],
-        weightClasses[weight],
-        colorClasses[color],
-        alignClasses,
-        transformClasses[transform],
+        typography$2.size[size],
+        typography$2.weight[weight],
+        colorClasses$1[color],
+        align ? typography$2.align[align] : "",
+        transform !== "none" ? typography$2.transform[transform] : "",
         className
       ),
       numberOfLines,
@@ -3396,6 +3367,12 @@ const Text = ({
     }
   );
 };
+const { typography: typography$1 } = designTokens;
+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"
+};
 const Heading = ({
   children,
   level = 2,
@@ -3414,39 +3391,16 @@ const Heading = ({
     6: "base"
   };
   const actualSize = size || defaultSizes[level];
-  const sizeClasses = {
-    "4xl": "text-4xl",
-    "3xl": "text-3xl",
-    "2xl": "text-2xl",
-    xl: "text-xl",
-    lg: "text-lg",
-    base: "text-base"
-  };
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-    extrabold: "font-extrabold"
-  };
-  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"
-  };
-  const alignClasses = align ? {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }[align] : "";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Text$1,
     {
       className: cn(
-        sizeClasses[actualSize],
-        weightClasses[weight],
+        typography$1.size[actualSize],
+        typography$1.weight[weight],
+        typography$1.leading.heading,
+        typography$1.tracking.heading,
         colorClasses[color],
-        alignClasses,
+        align ? typography$1.align[align] : "",
         className
       ),
       accessibilityRole: "header",
@@ -3550,6 +3504,28 @@ const AppVersion = ({
     }
   );
 };
+function splitBadgeClasses(base, dark) {
+  const all = `${base} ${dark}`.split(" ");
+  return {
+    bg: all.filter((c) => c.includes("bg-")).join(" "),
+    text: all.filter((c) => c.includes("text-")).join(" ")
+  };
+}
+let _badgeColors = null;
+function getBadgeColors() {
+  if (!_badgeColors) _badgeColors = buildBadgeColors();
+  return _badgeColors;
+}
+function buildBadgeColors() {
+  const badge = colors.component.badge;
+  return {
+    default: splitBadgeClasses(badge.default.base, badge.default.dark),
+    primary: splitBadgeClasses(badge.primary.base, badge.primary.dark),
+    success: splitBadgeClasses(badge.success.base, badge.success.dark),
+    warning: splitBadgeClasses(badge.warning.base, badge.warning.dark),
+    error: splitBadgeClasses(badge.error.base, badge.error.dark)
+  };
+}
 const Badge = ({
   children,
   variant = "default",
@@ -3565,29 +3541,30 @@ const Badge = ({
   maxCount,
   className
 }) => {
+  const ds = getBadgeColors();
   const variantClasses = {
-    default: "bg-gray-100 dark:bg-gray-700",
-    primary: "bg-blue-100 dark:bg-blue-900/30",
-    success: "bg-green-100 dark:bg-green-900/30",
-    warning: "bg-yellow-100 dark:bg-yellow-900/30",
-    danger: "bg-red-100 dark:bg-red-900/30",
-    info: "bg-blue-100 dark:bg-blue-900/30",
+    default: ds.default.bg,
+    primary: ds.primary.bg,
+    success: ds.success.bg,
+    warning: ds.warning.bg,
+    danger: ds.error.bg,
+    info: ds.primary.bg,
     purple: "bg-purple-100 dark:bg-purple-900/30"
   };
   const variantTextClasses = {
-    default: "text-gray-800 dark:text-gray-300",
-    primary: "text-blue-800 dark:text-blue-400",
-    success: "text-green-800 dark:text-green-400",
-    warning: "text-yellow-800 dark:text-yellow-400",
-    danger: "text-red-800 dark:text-red-400",
-    info: "text-blue-800 dark:text-blue-400",
+    default: ds.default.text,
+    primary: ds.primary.text,
+    success: ds.success.text,
+    warning: ds.warning.text,
+    danger: ds.error.text,
+    info: ds.primary.text,
     purple: "text-purple-800 dark:text-purple-400"
   };
   const outlineClasses = {
     default: "border border-gray-300 dark:border-gray-600",
     primary: "border border-blue-600 dark:border-blue-400",
     success: "border border-green-600 dark:border-green-400",
-    warning: "border border-yellow-600 dark:border-yellow-400",
+    warning: "border border-orange-600 dark:border-orange-400",
     danger: "border border-red-600 dark:border-red-400",
     info: "border border-blue-600 dark:border-blue-400",
     purple: "border border-purple-600 dark:border-purple-400"
@@ -3596,7 +3573,7 @@ const Badge = ({
     default: "text-gray-700 dark:text-gray-300",
     primary: "text-blue-600 dark:text-blue-400",
     success: "text-green-600 dark:text-green-400",
-    warning: "text-yellow-600 dark:text-yellow-400",
+    warning: "text-orange-600 dark:text-orange-400",
     danger: "text-red-600 dark:text-red-400",
     info: "text-blue-600 dark:text-blue-400",
     purple: "text-purple-600 dark:text-purple-400"
@@ -3606,16 +3583,11 @@ const Badge = ({
     md: "px-2.5 py-1",
     lg: "px-3 py-1.5"
   };
-  const textSizeClasses = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
   const dotColorClasses = {
     default: "bg-gray-600 dark:bg-gray-400",
     primary: "bg-blue-600 dark:bg-blue-400",
     success: "bg-green-600 dark:bg-green-400",
-    warning: "bg-yellow-600 dark:bg-yellow-400",
+    warning: "bg-orange-600 dark:bg-orange-400",
     danger: "bg-red-600 dark:bg-red-400",
     info: "bg-blue-600 dark:bg-blue-400",
     purple: "bg-purple-600 dark:bg-purple-400"
@@ -3628,9 +3600,15 @@ const Badge = ({
     pill ? "rounded-full" : "rounded",
     className
   );
+  const { typography: typography2 } = designTokens;
+  const textSizeMap = {
+    sm: typography2.size.xs,
+    md: typography2.size.sm,
+    lg: typography2.size.base
+  };
   const textClasses = cn(
-    textSizeClasses[size],
-    "font-medium",
+    textSizeMap[size],
+    typography2.weight.medium,
     outline ? outlineTextClasses[variant] : variantTextClasses[variant]
   );
   const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -4106,6 +4084,19 @@ const FormattedNumber = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(className), children: formatNumber() });
 };
+const alert = colors.component.alert;
+function splitAlertClasses$1(base, dark) {
+  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$1(alert.info.base, alert.info.dark);
+const dsSuccess = splitAlertClasses$1(alert.success.base, alert.success.dark);
+const dsWarning = splitAlertClasses$1(alert.warning.base, alert.warning.dark);
+const dsError = splitAlertClasses$1(alert.error.base, alert.error.dark);
 const InfoBox = ({
   children,
   title,
@@ -4117,28 +4108,28 @@ const InfoBox = ({
 }) => {
   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",
@@ -4203,7 +4194,7 @@ const Progress = ({
     }
   }, [indeterminate, animatedValue]);
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  const colorClasses = {
+  const colorClasses2 = {
     default: "bg-blue-600 dark:bg-blue-500",
     success: "bg-green-600 dark:bg-green-500",
     warning: "bg-yellow-600 dark:bg-yellow-500",
@@ -4235,13 +4226,13 @@ const Progress = ({
         children: indeterminate ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           Animated.View,
           {
-            className: cn("h-full rounded-full", colorClasses[variant]),
+            className: cn("h-full rounded-full", colorClasses2[variant]),
             style: { width: interpolatedWidth, opacity: 0.7 }
           }
         ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           View,
           {
-            className: cn("h-full rounded-full", colorClasses[variant]),
+            className: cn("h-full rounded-full", colorClasses2[variant]),
             style: { width: `${percentage}%` }
           }
         )
@@ -4405,6 +4396,26 @@ const ModalFooter = ({
     children
   }
 );
+function splitAlertClasses(base, dark) {
+  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(" ")
+  };
+}
+let _alertColors = null;
+function getAlertColors() {
+  if (!_alertColors) {
+    const alert2 = colors.component.alert;
+    _alertColors = {
+      success: splitAlertClasses(alert2.success.base, alert2.success.dark),
+      error: splitAlertClasses(alert2.error.base, alert2.error.dark),
+      warning: splitAlertClasses(alert2.warning.base, alert2.warning.dark),
+      info: splitAlertClasses(alert2.info.base, alert2.info.dark)
+    };
+  }
+  return _alertColors;
+}
 const ToastContext = createContext(void 0);
 const useToast = () => {
   const context = useContext(ToastContext);
@@ -4423,19 +4434,21 @@ const Toast = ({ toast, onRemove }) => {
       friction: 8
     }).start();
   }, [slideAnim]);
+  const ac = getAlertColors();
   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
   };
+  const alert2 = 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: alert2.success.icon,
+    error: alert2.error.icon,
+    warning: alert2.warning.icon,
+    info: alert2.info.icon
   };
   const icons = {
     default: "ℹ",
@@ -4456,8 +4469,17 @@ const Toast = ({ toast, onRemove }) => {
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-shrink-0", iconColorClasses[variant]), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-lg", children: icons[variant] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "font-semibold text-gray-900 dark:text-white", children: title }),
-          description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm text-gray-600 dark:text-gray-300 mt-1", children: description }),
+          title && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              className: cn(
+                textVariants.label.default(),
+                "text-gray-900 dark:text-white"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(textVariants.body.sm(), "mt-1"), children: description }),
           action && /* @__PURE__ */ jsxRuntimeExports.jsx(Pressable, { onPress: action.onPress, className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: action.label }) })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5929,6 +5951,7 @@ const AspectFitView = ({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-1", className), onLayout, children: size && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("items-center", innerClassName), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollView, { style: { width: innerWidth, height: innerHeight }, children }) }) });
 };
+const { typography } = designTokens;
 const QuickActions = ({
   actions,
   orientation = "horizontal",
@@ -5942,23 +5965,23 @@ const QuickActions = ({
       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"
     }
   };
@@ -5992,7 +6015,7 @@ const QuickActions = ({
         accessibilityState: { disabled: action.disabled },
         children: [
           action.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-5 h-5", children: action.icon }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("font-medium", styles2.text), children: action.label })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn(typography.weight.medium, styles2.text), children: action.label })
         ]
       },
       action.id
@@ -6479,15 +6502,15 @@ const ProgressCircle = ({
   label,
   variant = "primary",
   color,
-  trackColor = "#e5e7eb",
+  trackColor = colors.raw.neutral[200],
   className
 }) => {
   const progress = Math.min(100, Math.max(0, value));
   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];
   const innerSize = size - strokeWidth * 2;
@@ -9737,7 +9760,7 @@ const FeatureCard = ({
   borderColor = false,
   className
 }) => {
-  const colorClasses = {
+  const colorClasses2 = {
     blue: "text-blue-600 dark:text-blue-400",
     green: "text-green-600 dark:text-green-400",
     purple: "text-purple-600 dark:text-purple-400",
@@ -9793,9 +9816,9 @@ const FeatureCard = ({
           "w-12 h-12 rounded-lg items-center justify-center mb-4",
           iconBackgroundClasses[color]
         ),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: colorClasses[color], children: icon })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: colorClasses2[color], children: icon })
       }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("mb-4", colorClasses[color]), children: icon }),
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("mb-4", colorClasses2[color]), children: icon }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: title }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-600 dark:text-gray-300 mb-4 leading-relaxed", children: description }),
     cta && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-3 mb-4", children: cta }),
@@ -9816,7 +9839,7 @@ const FeatureCard = ({
       {
         className: "flex-1 min-w-[80px] items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg",
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-lg font-bold", colorClasses[color]), children: value }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: cn("text-lg font-bold", colorClasses2[color]), children: value }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: key })
         ]
       },
@@ -11103,9 +11126,9 @@ export {
   VisuallyHidden,
   buttonVariants,
   cn,
-  colors,
+  colors2 as colors,
   createFeature,
-  designTokens,
+  designTokens2 as designTokens,
   getButtonVariantClass,
   mapSizeToVariantKey,
   textVariants2 as textVariants,