@timmbr/native-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/native-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Unbundled Gluestack UI v2 primitives with shared Timmbr design tokens for React Native and Web",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,8 +34,8 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "@timmbr/icons": "1.7.0",
-    "@timmbr/theme": "1.3.0",
-    "@timmbr/utils": "1.6.0"
+    "@timmbr/utils": "1.6.0",
+    "@timmbr/theme": "1.3.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/native/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useState, useMemo } from 'react';
 import {
   View,
   Text as RNText,
@@ -65,16 +65,16 @@ export const TimmbrNativeProvider: React.FC<TimmbrNativeProviderProps> = ({
     return currentMode;
   }, [currentMode, systemScheme]);
 
-  const setMode = (newMode: ThemeMode) => {
+  const setMode = useCallback((newMode: ThemeMode) => {
     setUncontrolledMode(newMode);
-  };
+  }, []);
 
-  const toggleTheme = () => {
+  const toggleTheme = useCallback(() => {
     setUncontrolledMode((prev) => {
       const active = prev === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : prev;
       return active === 'dark' ? 'light' : 'dark';
     });
-  };
+  }, [systemScheme]);
 
   const contextValue = useMemo(
     () => ({
@@ -83,7 +83,7 @@ export const TimmbrNativeProvider: React.FC<TimmbrNativeProviderProps> = ({
       setMode,
       toggleTheme,
     }),
-    [currentMode, resolvedTheme]
+    [currentMode, resolvedTheme, setMode, toggleTheme]
   );
 
   return (
@@ -193,7 +193,7 @@ const headingSizeMap: Record<string, string> = {
 };
 
 export const Heading: React.FC<HeadingProps> = ({
-  size = 'lg',
+  size = 'lg' as NonNullable<HeadingProps['size']>,
   className = '',
   children,
   ...props
@@ -208,11 +208,35 @@ export const Heading: React.FC<HeadingProps> = ({
   );
 };
 
+const NON_COLOR_TEXT_UTILITY =
+  /^(?:dark:)?text-(xs|sm|base|lg|xl|2xl|3xl|4xl|left|center|right|justify|auto|\[\d+(px|rem|em)?\])$/;
+
+function hasExplicitTextColorClass(className: string): boolean {
+  return className
+    .split(/\s+/)
+    .filter(Boolean)
+    .some((token) => /^(?:dark:)?text-/.test(token) && !NON_COLOR_TEXT_UTILITY.test(token));
+}
+
+export type ButtonVariant = 'solid' | 'outline' | 'link';
+export type ButtonAction = 'primary' | 'secondary' | 'positive' | 'negative' | 'default';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonStyleContextValue {
+  variant: ButtonVariant;
+  action: ButtonAction;
+}
+
+const ButtonStyleContext = createContext<ButtonStyleContextValue>({
+  variant: 'solid',
+  action: 'primary',
+});
+
 export interface ButtonProps extends Omit<PressableProps, 'children'> {
   className?: string;
-  variant?: 'solid' | 'outline' | 'link';
-  action?: 'primary' | 'secondary' | 'positive' | 'negative' | 'default';
-  size?: 'sm' | 'md' | 'lg';
+  variant?: ButtonVariant;
+  action?: ButtonAction;
+  size?: ButtonSize;
   isDisabled?: boolean;
   isLoading?: boolean;
   children?: React.ReactNode;
@@ -242,6 +266,47 @@ const buttonVariantStyles: Record<string, Record<string, string>> = {
   },
 };
 
+const buttonTextColorStyles: Record<string, Record<string, string>> = {
+  solid: {
+    primary: 'text-primary-foreground',
+    secondary: 'text-secondary-foreground',
+    positive: 'text-primary-foreground',
+    negative: 'text-primary-foreground',
+    default: 'text-secondary-foreground',
+  },
+  outline: {
+    primary: 'text-primary',
+    secondary: 'text-foreground',
+    positive: 'text-emerald-600 dark:text-emerald-400',
+    negative: 'text-destructive',
+    default: 'text-foreground',
+  },
+  link: {
+    primary: 'text-primary',
+    secondary: 'text-foreground',
+    positive: 'text-emerald-600 dark:text-emerald-400',
+    negative: 'text-destructive',
+    default: 'text-primary',
+  },
+};
+
+function resolveButtonSpinnerColor(
+  variant: ButtonVariant,
+  action: ButtonAction,
+  resolvedTheme: ResolvedTheme
+): string {
+  if (variant === 'solid' && action !== 'secondary' && action !== 'default') {
+    return '#FFFFFF';
+  }
+  if (variant === 'solid') {
+    return resolvedTheme === 'dark' ? '#F5EDE0' : '#60321D';
+  }
+  if (action === 'primary') return '#C0643A';
+  if (action === 'positive') return '#059669';
+  if (action === 'negative') return resolvedTheme === 'dark' ? '#EF4444' : '#DC2626';
+  return resolvedTheme === 'dark' ? '#F7F1E6' : '#0B0B0B';
+}
+
 const buttonSizeStyles: Record<string, string> = {
   sm: 'px-3 py-1.5 rounded-md min-h-[36px]',
   md: 'px-4 py-2.5 rounded-lg min-h-[44px]',
@@ -249,9 +314,9 @@ const buttonSizeStyles: Record<string, string> = {
 };
 
 export const Button: React.FC<ButtonProps> = ({
-  variant = 'solid',
-  action = 'primary',
-  size = 'md',
+  variant = 'solid' as ButtonVariant,
+  action = 'primary' as ButtonAction,
+  size = 'md' as ButtonSize,
   isDisabled = false,
   isLoading = false,
   disabled,
@@ -259,20 +324,25 @@ export const Button: React.FC<ButtonProps> = ({
   children,
   ...props
 }) => {
+  const { resolvedTheme } = useTimmbrNative();
   const isActuallyDisabled = isDisabled || isLoading || disabled;
   const variantClass = buttonVariantStyles[variant]?.[action] || buttonVariantStyles.solid.primary;
   const sizeClass = buttonSizeStyles[size] || buttonSizeStyles.md;
   const disabledClass = isActuallyDisabled ? 'opacity-50' : 'active:opacity-85';
+  const spinnerColor = resolveButtonSpinnerColor(variant, action, resolvedTheme);
+  const styleValue = useMemo(() => ({ variant, action }), [variant, action]);
 
   return (
-    <RNPressable
-      disabled={isActuallyDisabled}
-      className={`flex-row items-center justify-center border ${variantClass} ${sizeClass} ${disabledClass} ${className}`}
-      {...props}
-    >
-      {isLoading && <ActivityIndicator color="#FFFFFF" className="mr-2" size="small" />}
-      {children}
-    </RNPressable>
+    <ButtonStyleContext.Provider value={styleValue}>
+      <RNPressable
+        disabled={isActuallyDisabled}
+        className={`flex-row items-center justify-center border ${variantClass} ${sizeClass} ${disabledClass} ${className}`}
+        {...props}
+      >
+        {isLoading && <ActivityIndicator color={spinnerColor} className="mr-2" size="small" />}
+        {children}
+      </RNPressable>
+    </ButtonStyleContext.Provider>
   );
 };
 
@@ -282,33 +352,64 @@ export interface ButtonTextProps extends TextPropsWithClass {
 }
 
 export const ButtonText: React.FC<ButtonTextProps> = ({
+  variant: variantProp,
+  action: actionProp,
   className = '',
   children,
   ...props
-}) => (
-  <RNText
-    className={`text-center font-semibold font-sans text-sm text-primary-foreground ${className}`}
-    {...props}
-  >
-    {children}
-  </RNText>
-);
+}) => {
+  const parentStyle = useContext(ButtonStyleContext);
+  const variant = variantProp ?? parentStyle.variant;
+  const action = actionProp ?? parentStyle.action;
+  const defaultColorClass = hasExplicitTextColorClass(className)
+    ? ''
+    : buttonTextColorStyles[variant]?.[action] || 'text-primary-foreground';
+
+  return (
+    <RNText
+      className={`text-center font-semibold font-sans text-sm ${defaultColorClass} ${className}`}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+};
 
 export interface ButtonSpinnerProps extends ActivityIndicatorProps {
   className?: string;
 }
 
 export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
-  color = '#FFFFFF',
+  color,
   size = 'small',
   className = 'mr-2',
   ...props
-}) => <ActivityIndicator color={color} size={size} className={className} {...props} />;
+}) => {
+  const { resolvedTheme } = useTimmbrNative();
+  const parentStyle = useContext(ButtonStyleContext);
+  const spinnerColor =
+    color ?? resolveButtonSpinnerColor(parentStyle.variant, parentStyle.action, resolvedTheme);
+
+  return <ActivityIndicator color={spinnerColor} size={size} className={className} {...props} />;
+};
+
+export type BadgeVariant = 'solid' | 'outline';
+export type BadgeAction = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+
+interface BadgeStyleContextValue {
+  variant: BadgeVariant;
+  action: BadgeAction;
+}
+
+const BadgeStyleContext = createContext<BadgeStyleContextValue>({
+  variant: 'solid',
+  action: 'primary',
+});
 
 export interface BadgeProps extends ViewProps {
   className?: string;
-  variant?: 'solid' | 'outline';
-  action?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+  variant?: BadgeVariant;
+  action?: BadgeAction;
 }
 
 const badgeActionStyles: Record<string, Record<string, string>> = {
@@ -332,21 +433,46 @@ const badgeActionStyles: Record<string, Record<string, string>> = {
   },
 };
 
+const badgeTextColorStyles: Record<string, Record<string, string>> = {
+  solid: {
+    primary: 'text-primary-foreground',
+    secondary: 'text-secondary-foreground',
+    success: 'text-primary-foreground',
+    warning: 'text-primary-foreground',
+    error: 'text-primary-foreground',
+    info: 'text-primary-foreground',
+    muted: 'text-foreground',
+  },
+  outline: {
+    primary: 'text-primary',
+    secondary: 'text-foreground',
+    success: 'text-emerald-600 dark:text-emerald-400',
+    warning: 'text-amber-600 dark:text-amber-400',
+    error: 'text-destructive',
+    info: 'text-blue-600 dark:text-blue-400',
+    muted: 'text-muted-foreground',
+  },
+};
+
 export const Badge: React.FC<BadgeProps> = ({
-  variant = 'solid',
-  action = 'primary',
+  variant = 'solid' as BadgeVariant,
+  action = 'primary' as BadgeAction,
   className = '',
   children,
   ...props
 }) => {
   const badgeClass = badgeActionStyles[variant]?.[action] || badgeActionStyles.solid.primary;
+  const styleValue = useMemo(() => ({ variant, action }), [variant, action]);
+
   return (
-    <View
-      className={`px-2.5 py-0.5 rounded-full border items-center justify-center flex-row ${badgeClass} ${className}`}
-      {...props}
-    >
-      {children}
-    </View>
+    <BadgeStyleContext.Provider value={styleValue}>
+      <View
+        className={`px-2.5 py-0.5 rounded-full border items-center justify-center flex-row ${badgeClass} ${className}`}
+        {...props}
+      >
+        {children}
+      </View>
+    </BadgeStyleContext.Provider>
   );
 };
 
@@ -354,14 +480,21 @@ export const BadgeText: React.FC<TextPropsWithClass> = ({
   className = '',
   children,
   ...props
-}) => (
-  <RNText
-    className={`text-xs font-semibold font-sans text-primary-foreground ${className}`}
-    {...props}
-  >
-    {children}
-  </RNText>
-);
+}) => {
+  const parentStyle = useContext(BadgeStyleContext);
+  const defaultColorClass = hasExplicitTextColorClass(className)
+    ? ''
+    : badgeTextColorStyles[parentStyle.variant]?.[parentStyle.action] || 'text-primary-foreground';
+
+  return (
+    <RNText
+      className={`text-xs font-semibold font-sans ${defaultColorClass} ${className}`}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+};
 
 export const Card: React.FC<BoxProps> = ({ className = '', children, ...props }) => (
   <View
@@ -406,15 +539,19 @@ export interface InputFieldProps extends TextInputProps {
 
 export const InputField: React.FC<InputFieldProps> = ({
   className = '',
-  placeholderTextColor = '#6D6D6D',
+  placeholderTextColor,
   ...props
-}) => (
-  <TextInput
-    className={`flex-1 text-foreground placeholder:text-muted-foreground font-sans text-base py-1 ${className}`}
-    placeholderTextColor={placeholderTextColor}
-    {...props}
-  />
-);
+}) => {
+  const { resolvedTheme } = useTimmbrNative();
+  const defaultPlaceholderColor = resolvedTheme === 'dark' ? '#9D9D9D' : '#6D6D6D';
+  return (
+    <TextInput
+      className={`flex-1 text-foreground placeholder:text-muted-foreground font-sans text-base py-1 ${className}`}
+      placeholderTextColor={placeholderTextColor ?? defaultPlaceholderColor}
+      {...props}
+    />
+  );
+};
 
 export const Textarea: React.FC<InputProps> = ({
   isInvalid = false,
@@ -440,17 +577,21 @@ export const Textarea: React.FC<InputProps> = ({
 
 export const TextareaInput: React.FC<InputFieldProps> = ({
   className = '',
-  placeholderTextColor = '#6D6D6D',
+  placeholderTextColor,
   ...props
-}) => (
-  <TextInput
-    multiline
-    textAlignVertical="top"
-    className={`flex-1 text-foreground placeholder:text-muted-foreground font-sans text-base ${className}`}
-    placeholderTextColor={placeholderTextColor}
-    {...props}
-  />
-);
+}) => {
+  const { resolvedTheme } = useTimmbrNative();
+  const defaultPlaceholderColor = resolvedTheme === 'dark' ? '#9D9D9D' : '#6D6D6D';
+  return (
+    <TextInput
+      multiline
+      textAlignVertical="top"
+      className={`flex-1 text-foreground placeholder:text-muted-foreground font-sans text-base ${className}`}
+      placeholderTextColor={placeholderTextColor ?? defaultPlaceholderColor}
+      {...props}
+    />
+  );
+};
 
 interface TabsContextValue {
   activeTab: string;
@@ -570,18 +711,21 @@ export interface ActionsheetProps {
   children: React.ReactNode;
 }
 
-export const Actionsheet: React.FC<ActionsheetProps> = ({ isOpen, onClose, children }) => (
-  <RNModal
-    visible={isOpen}
-    transparent
-    animationType="fade"
-    onRequestClose={onClose}
-  >
-    <View className="flex-1 justify-end">
-      {children}
-    </View>
-  </RNModal>
-);
+export const Actionsheet: React.FC<ActionsheetProps> = ({ isOpen, onClose, children }) => {
+  const { resolvedTheme } = useTimmbrNative();
+  return (
+    <RNModal
+      visible={isOpen}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <View className={`flex-1 justify-end ${resolvedTheme === 'dark' ? 'dark' : ''}`}>
+        {children}
+      </View>
+    </RNModal>
+  );
+};
 
 export const ActionsheetBackdrop: React.FC<PressableProps & { className?: string }> = ({
   onPress,
@@ -652,39 +796,54 @@ export const Modal: React.FC<CustomModalProps> = ({
   isOpen = false,
   visible,
   onClose,
+  className = '',
   children,
   ...props
-}) => (
-  <RNModal
-    visible={isOpen || visible}
-    transparent
-    animationType="fade"
-    onRequestClose={onClose}
-    {...props}
-  >
-    <View className="flex-1 items-center justify-center bg-black/60 p-4">
-      {children}
-    </View>
-  </RNModal>
-);
+}) => {
+  const { resolvedTheme } = useTimmbrNative();
+  return (
+    <RNModal
+      visible={isOpen || visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      {...props}
+    >
+      <View
+        className={`flex-1 items-center justify-center bg-black/60 p-4 ${
+          resolvedTheme === 'dark' ? 'dark' : ''
+        } ${className}`}
+      >
+        {children}
+      </View>
+    </RNModal>
+  );
+};
 
 export interface CustomSwitchProps extends SwitchProps {
   className?: string;
 }
 
 export const Switch: React.FC<CustomSwitchProps> = ({
-  trackColor = { false: '#DDD5CA', true: '#C0643A' },
+  trackColor,
   thumbColor = '#FFFFFF',
   className = '',
   ...props
-}) => (
-  <RNSwitch
-    trackColor={trackColor}
-    thumbColor={thumbColor}
-    className={className}
-    {...props}
-  />
-);
+}) => {
+  const { resolvedTheme } = useTimmbrNative();
+  const defaultTrackColor = {
+    false: resolvedTheme === 'dark' ? '#3C3C3C' : '#DDD5CA',
+    true: '#C0643A',
+  };
+  return (
+    <RNSwitch
+      trackColor={trackColor ?? defaultTrackColor}
+      thumbColor={thumbColor}
+      className={className}
+      {...props}
+    />
+  );
+};
 
 export const Spinner: React.FC<ButtonSpinnerProps> = ({
   color = '#C0643A',
@@ -780,20 +939,81 @@ export const Toast: React.FC<ToastProps> = ({
 };
 
 export interface IconProps {
-  as?: React.ComponentType<{ size?: number; color?: string; className?: string }>;
+  as?: React.ElementType;
   size?: number | string;
   color?: string;
   className?: string;
 }
 
+function getSemanticIconColorMap(resolvedTheme: ResolvedTheme): Record<string, string> {
+  const isDark = resolvedTheme === 'dark';
+  return {
+    'text-foreground': isDark ? '#F7F1E6' : '#0B0B0B',
+    'text-card-foreground': isDark ? '#F7F1E6' : '#0B0B0B',
+    'text-muted-foreground': isDark ? '#9D9D9D' : '#6D6D6D',
+    'text-secondary-foreground': isDark ? '#F5EDE0' : '#60321D',
+    'text-accent-foreground': isDark ? '#F5EDE0' : '#60321D',
+    'text-primary': '#C0643A',
+    'text-primary-foreground': '#FFFFFF',
+    'text-white': '#FFFFFF',
+    'text-destructive': isDark ? '#EF4444' : '#DC2626',
+    'text-destructive-foreground': isDark ? '#F7F1E6' : '#FFFFFF',
+    'text-success': '#059669',
+    'text-emerald-500': '#10B981',
+    'text-emerald-600': '#059669',
+    'text-warning': '#D97706',
+    'text-amber-400': '#FBBF24',
+    'text-amber-500': '#F59E0B',
+    'text-amber-600': '#D97706',
+    'text-info': '#2563EB',
+    'text-blue-500': '#3B82F6',
+    'text-blue-600': '#2563EB',
+  };
+}
+
+function resolveIconColor(
+  explicitColor: string | undefined,
+  className: string,
+  resolvedTheme: ResolvedTheme
+): string {
+  if (explicitColor && explicitColor !== 'currentColor') {
+    return explicitColor;
+  }
+
+  const tokens = className.split(/\s+/).filter(Boolean);
+  const colorMap = getSemanticIconColorMap(resolvedTheme);
+
+  if (resolvedTheme === 'dark') {
+    for (const token of tokens) {
+      if (token.startsWith('dark:')) {
+        const unprefixed = token.slice('dark:'.length);
+        const hexMatch = /^text-\[(#[0-9a-fA-F]{3,8})\]$/.exec(unprefixed);
+        if (hexMatch?.[1]) return hexMatch[1];
+        if (colorMap[unprefixed]) return colorMap[unprefixed];
+      }
+    }
+  }
+
+  for (const token of tokens) {
+    if (token.startsWith('dark:')) continue;
+    const hexMatch = /^text-\[(#[0-9a-fA-F]{3,8})\]$/.exec(token);
+    if (hexMatch?.[1]) return hexMatch[1];
+    if (colorMap[token]) return colorMap[token];
+  }
+
+  return resolvedTheme === 'dark' ? '#F7F1E6' : '#0B0B0B';
+}
+
 export const Icon: React.FC<IconProps> = ({
   as: Component,
   size = 20,
-  color = 'currentColor',
+  color,
   className = '',
 }) => {
+  const { resolvedTheme } = useTimmbrNative();
   if (!Component) return null;
   const numSize = typeof size === 'number' ? size : parseInt(size, 10) || 20;
-  return <Component size={numSize} color={color} className={className} />;
+  const resolvedColor = resolveIconColor(color, className, resolvedTheme);
+  return <Component size={numSize} color={resolvedColor} className={className} />;
 };