dash-ui-kit 2.0.0-dev → 2.1.0-dev

package/dist/react/components/valueCard/index.esm.js

@@ -4,6 +4,7 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 
 const valueCard = cva('flex items-center transition-all outline outline-1 outline-offset-[-1px]', {
   variants: {
@@ -132,10 +133,13 @@ const valueCard = cva('flex items-center transition-all outline outline-1 outlin
  * </ValueCard>
  */
 const ValueCard = _a => {
+  var _b;
   var {
       as,
       link = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       clickable = false,
       loading,
@@ -143,14 +147,15 @@ const ValueCard = _a => {
       className = '',
       children
     } = _a,
-    props = __rest(_a, ["as", "link", "colorScheme", "size", "clickable", "loading", "border", "className", "children"]);
+    props = __rest(_a, ["as", "link", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "clickable", "loading", "border", "className", "children"]);
   const {
     theme
   } = useTheme();
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   const isClickable = Boolean(link !== '' || clickable);
   const classes = valueCard({
     theme,
-    colorScheme,
+    colorScheme: effectiveColorScheme,
     size,
     clickable: isClickable,
     loading,

package/dist/react/components/valueCard/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/valueCard/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","className","children","props","__rest","useTheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/valueCard/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow'\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme: effectiveColorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","colorSchemeLight","colorSchemeDark","className","children","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}

package/dist/react/hooks/index.d.ts

@@ -1 +1,2 @@
 export { default as useDebounce } from './useDebounce';
+export { useColorScheme } from './useColorScheme';

package/dist/react/hooks/useColorScheme.cjs.js

@@ -0,0 +1,25 @@
+"use client";
+
+'use strict';
+
+var ThemeContext = require('../contexts/ThemeContext.cjs.js');
+
+/**
+ * Resolves the effective color scheme based on the active theme.
+ *
+ * Priority:
+ *   1. colorSchemeLight — when theme is 'light' and value is provided
+ *   2. colorSchemeDark  — when theme is 'dark' and value is provided
+ *   3. colorScheme      — fallback, theme-independent
+ */
+function useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight;
+  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark;
+  return colorScheme;
+}
+
+exports.useColorScheme = useColorScheme;
+//# sourceMappingURL=useColorScheme.cjs.js.map

package/dist/react/hooks/useColorScheme.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.cjs.js","sources":["../../../src/react/hooks/useColorScheme.ts"],"sourcesContent":["import { useTheme } from '../contexts/ThemeContext'\n\n/**\n * Resolves the effective color scheme based on the active theme.\n *\n * Priority:\n *   1. colorSchemeLight — when theme is 'light' and value is provided\n *   2. colorSchemeDark  — when theme is 'dark' and value is provided\n *   3. colorScheme      — fallback, theme-independent\n */\nexport function useColorScheme<T>(\n  colorScheme?: T,\n  colorSchemeLight?: T,\n  colorSchemeDark?: T\n): T | undefined {\n  const { theme } = useTheme()\n\n  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight\n  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark\n\n  return colorScheme\n}\n"],"names":["useColorScheme","colorScheme","colorSchemeLight","colorSchemeDark","theme","useTheme","undefined"],"mappings":";;;;;;AAEA;;;;;;;AAOG;SACaA,cAAcA,CAC5BC,WAAe,EACfC,gBAAoB,EACpBC,eAAmB,EAAA;EAEnB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;EAE5B,IAAID,KAAK,KAAK,OAAO,IAAIF,gBAAgB,KAAKI,SAAS,EAAE,OAAOJ,gBAAgB;EAChF,IAAIE,KAAK,KAAK,MAAM,IAAID,eAAe,KAAKG,SAAS,EAAE,OAAOH,eAAe;AAE7E,EAAA,OAAOF,WAAW;AACpB;;;;"}

package/dist/react/hooks/useColorScheme.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Resolves the effective color scheme based on the active theme.
+ *
+ * Priority:
+ *   1. colorSchemeLight — when theme is 'light' and value is provided
+ *   2. colorSchemeDark  — when theme is 'dark' and value is provided
+ *   3. colorScheme      — fallback, theme-independent
+ */
+export declare function useColorScheme<T>(colorScheme?: T, colorSchemeLight?: T, colorSchemeDark?: T): T | undefined;

package/dist/react/hooks/useColorScheme.esm.js

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from '../contexts/ThemeContext.esm.js';
+
+/**
+ * Resolves the effective color scheme based on the active theme.
+ *
+ * Priority:
+ *   1. colorSchemeLight — when theme is 'light' and value is provided
+ *   2. colorSchemeDark  — when theme is 'dark' and value is provided
+ *   3. colorScheme      — fallback, theme-independent
+ */
+function useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) {
+  const {
+    theme
+  } = useTheme();
+  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight;
+  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark;
+  return colorScheme;
+}
+
+export { useColorScheme };
+//# sourceMappingURL=useColorScheme.esm.js.map

package/dist/react/hooks/useColorScheme.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.esm.js","sources":["../../../src/react/hooks/useColorScheme.ts"],"sourcesContent":["import { useTheme } from '../contexts/ThemeContext'\n\n/**\n * Resolves the effective color scheme based on the active theme.\n *\n * Priority:\n *   1. colorSchemeLight — when theme is 'light' and value is provided\n *   2. colorSchemeDark  — when theme is 'dark' and value is provided\n *   3. colorScheme      — fallback, theme-independent\n */\nexport function useColorScheme<T>(\n  colorScheme?: T,\n  colorSchemeLight?: T,\n  colorSchemeDark?: T\n): T | undefined {\n  const { theme } = useTheme()\n\n  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight\n  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark\n\n  return colorScheme\n}\n"],"names":["useColorScheme","colorScheme","colorSchemeLight","colorSchemeDark","theme","useTheme","undefined"],"mappings":";;;;AAEA;;;;;;;AAOG;SACaA,cAAcA,CAC5BC,WAAe,EACfC,gBAAoB,EACpBC,eAAmB,EAAA;EAEnB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAE5B,IAAID,KAAK,KAAK,OAAO,IAAIF,gBAAgB,KAAKI,SAAS,EAAE,OAAOJ,gBAAgB;EAChF,IAAIE,KAAK,KAAK,MAAM,IAAID,eAAe,KAAKG,SAAS,EAAE,OAAOH,eAAe;AAE7E,EAAA,OAAOF,WAAW;AACpB;;;;"}

package/dist/react-native/components/badge/index.d.ts

@@ -16,6 +16,18 @@ export interface BadgeProps extends Omit<PressableProps, 'style'> {
      * Color theme
      */
     color?: 'blue' | 'white' | 'gray' | 'light-gray' | 'turquoise' | 'red' | 'orange';
+    /**
+     * Light or dark theme
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Color override for light theme
+     */
+    colorLight?: 'blue' | 'white' | 'gray' | 'light-gray' | 'turquoise' | 'red' | 'orange';
+    /**
+     * Color override for dark theme
+     */
+    colorDark?: 'blue' | 'white' | 'gray' | 'light-gray' | 'turquoise' | 'red' | 'orange';
     /**
      * Size of the badge
      */

package/dist/react-native/components/button/index.d.ts

@@ -10,10 +10,16 @@ declare const buttonStyles: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ButtonVariants = Omit<VariantProps<typeof buttonStyles>, 'disabled'>;
 export interface ButtonProps extends Omit<PressableProps, 'style'>, ButtonVariants {
+    /** Light or dark theme */
+    theme?: 'light' | 'dark';
     /** Solid, outline, or ghost style */
     variant?: 'solid' | 'outline' | 'ghost';
     /** Color scheme for the button */
     colorScheme?: 'brand' | 'mint' | 'gray' | 'red' | 'lightBlue' | 'lightGray' | 'white' | 'halfWhite' | 'halfBlue';
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'brand' | 'mint' | 'gray' | 'red' | 'lightBlue' | 'lightGray' | 'white' | 'halfWhite' | 'halfBlue';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'brand' | 'mint' | 'gray' | 'red' | 'lightBlue' | 'lightGray' | 'white' | 'halfWhite' | 'halfBlue';
     /** Size of the button */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /** Border radius style */

package/dist/react-native/components/input/index.d.ts

@@ -9,6 +9,12 @@ declare const inputStyles: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type InputVariants = VariantProps<typeof inputStyles>;
 export interface InputProps extends Omit<TextInputProps, 'editable'>, Omit<InputVariants, 'disabled'> {
+    /** Light or dark theme */
+    theme?: 'light' | 'dark';
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'light-gray';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'light-gray';
     className?: string;
     error?: boolean;
     success?: boolean;

package/dist/react-native/components/valueCard/index.d.ts

@@ -20,6 +20,10 @@ export interface ValueCardProps extends Omit<PressableProps, 'style'>, Omit<Valu
     theme?: 'light' | 'dark';
     /** Color scheme */
     colorScheme?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow';
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow';
     /** Size variant */
     size?: 'xs' | 'sm' | 'md' | 'xl';
     /** Whether the card is clickable (shows press feedback) */

package/dist/react-native/index.cjs.js

@@ -209,6 +209,12 @@ const Heading = _a => {
   }));
 };
 
+function resolveColorScheme(theme, colorScheme, colorSchemeLight, colorSchemeDark) {
+  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight;
+  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark;
+  return colorScheme;
+}
+
 const buttonStyles = classVarianceAuthority.cva('items-center justify-center flex-row min-h-11 transition-colors border border-transparent', {
   variants: {
     variant: {
@@ -460,9 +466,13 @@ const textStyles$1 = classVarianceAuthority.cva('font-medium', {
  * Uses Pressable for touch interactions and twrnc for Tailwind styling.
  */
 const Button = _a => {
+  var _b;
   var {
+      theme = 'light',
       variant,
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       rounded,
       disabled = false,
@@ -473,18 +483,19 @@ const Button = _a => {
       children,
       onPress
     } = _a,
-    props = tslib.__rest(_a, ["variant", "colorScheme", "size", "rounded", "disabled", "loading", "className", "style", "textStyle", "children", "onPress"]);
+    props = tslib.__rest(_a, ["theme", "variant", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "rounded", "disabled", "loading", "className", "style", "textStyle", "children", "onPress"]);
   const isDisabled = disabled || loading;
+  const effectiveColorScheme = (_b = resolveColorScheme(theme, colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'brand';
   const buttonClasses = buttonStyles({
     variant,
-    colorScheme,
+    colorScheme: effectiveColorScheme,
     size,
     rounded,
     disabled: isDisabled
   }) + (className ? ` ${className}` : '');
   const textClasses = textStyles$1({
     variant,
-    colorScheme,
+    colorScheme: effectiveColorScheme,
     size
   });
   // Convert Tailwind classes to React Native style objects
@@ -501,7 +512,7 @@ const Button = _a => {
   }, props, {
     children: loading ? jsxRuntime.jsx(reactNative.ActivityIndicator, {
       size: "small",
-      color: variant === 'solid' && colorScheme === 'brand' ? '#fff' : '#3B82F6'
+      color: variant === 'solid' && effectiveColorScheme === 'brand' ? '#fff' : '#3B82F6'
     }) : typeof children === 'string' ? jsxRuntime.jsx(reactNative.Text, {
       style: textStyleMerged,
       children: children
@@ -1017,9 +1028,13 @@ const inputStyles = classVarianceAuthority.cva('w-full font-normal text-sm leadi
  * />
  */
 const Input = _a => {
+  var _b;
   var {
+      theme = 'light',
       className = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       variant,
       error = false,
@@ -1032,10 +1047,11 @@ const Input = _a => {
       style,
       textStyle
     } = _a,
-    props = tslib.__rest(_a, ["className", "colorScheme", "size", "variant", "error", "success", "disabled", "secureTextEntry", "prefix", "prefixStyle", "showPasswordToggle", "style", "textStyle"]);
+    props = tslib.__rest(_a, ["theme", "className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "variant", "error", "success", "disabled", "secureTextEntry", "prefix", "prefixStyle", "showPasswordToggle", "style", "textStyle"]);
   const [showPassword, setShowPassword] = react.useState(false);
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  const effectiveColorScheme = (_b = resolveColorScheme(theme, colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const classes = inputStyles({
     colorScheme: finalColorScheme,
@@ -1595,10 +1611,14 @@ const COLOR_KEY_MAP = {
  * Supports 28 style combinations (7 colors × 4 variants) with 4 sizes and optional custom border radius.
  */
 const Badge = _a => {
+  var _b;
   var {
       children,
+      theme = 'light',
       variant = 'default',
-      color = 'blue',
+      color,
+      colorLight,
+      colorDark,
       size = 'sm',
       borderRadius,
       className = '',
@@ -1606,9 +1626,10 @@ const Badge = _a => {
       textStyle,
       onPress
     } = _a,
-    props = tslib.__rest(_a, ["children", "variant", "color", "size", "borderRadius", "className", "style", "textStyle", "onPress"]);
+    props = tslib.__rest(_a, ["children", "theme", "variant", "color", "colorLight", "colorDark", "size", "borderRadius", "className", "style", "textStyle", "onPress"]);
+  const effectiveColor = (_b = resolveColorScheme(theme, color, colorLight, colorDark)) !== null && _b !== void 0 ? _b : 'blue';
   // Generate the color_variant key for CVA using explicit mapping
-  const normalizedColor = COLOR_KEY_MAP[color] || color;
+  const normalizedColor = COLOR_KEY_MAP[effectiveColor] || effectiveColor;
   const colorVariantKey = `color_variant_${normalizedColor}_${variant}`;
   // Build the badge container classes with proper typing
   const badgeVariantProps = {
@@ -2198,9 +2219,12 @@ const valueCardStyles = classVarianceAuthority.cva('flex flex-row items-center',
  * clickability, loading state, and optional border.
  */
 const ValueCard = _a => {
+  var _b;
   var {
       theme = 'light',
-      colorScheme = 'default',
+      colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size = 'md',
       clickable = false,
       loading = false,
@@ -2210,12 +2234,13 @@ const ValueCard = _a => {
       children,
       onPress
     } = _a,
-    props = tslib.__rest(_a, ["theme", "colorScheme", "size", "clickable", "loading", "border", "className", "style", "children", "onPress"]);
+    props = tslib.__rest(_a, ["theme", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "clickable", "loading", "border", "className", "style", "children", "onPress"]);
   const isClickable = Boolean(onPress !== null && onPress !== void 0 ? onPress : clickable);
   const isDisabled = loading;
+  const effectiveColorScheme = (_b = resolveColorScheme(theme, colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   const classes = valueCardStyles({
     theme,
-    colorScheme,
+    colorScheme: effectiveColorScheme,
     size,
     clickable: isClickable,
     loading,
@@ -2226,7 +2251,7 @@ const ValueCard = _a => {
   const content = loading ? jsxRuntime.jsx(reactNative.ActivityIndicator, {
     testID: "value-card-loading",
     size: "small",
-    color: colorScheme === 'green' ? '#22c55e' : colorScheme === 'lightBlue' ? '#4C7EFF' : '#6B7280'
+    color: effectiveColorScheme === 'green' ? '#22c55e' : effectiveColorScheme === 'lightBlue' ? '#4C7EFF' : '#6B7280'
   }) : children;
   if (isClickable && !isDisabled) {
     return jsxRuntime.jsx(reactNative.Pressable, Object.assign({
@@ -2846,6 +2871,7 @@ exports.colors = colors;
 exports.getShadow = getShadow;
 exports.hexToRgba = hexToRgba;
 exports.opacity = opacity;
+exports.resolveColorScheme = resolveColorScheme;
 exports.rgba = rgba;
 exports.shadows = shadows;
 exports.spacing = spacing;