@timmbr/native-ui 0.0.0-stage → 1.0.1

package/src/native/index.tsx

@@ -0,0 +1,1019 @@
+import React, { createContext, useCallback, useContext, useState, useMemo } from 'react';
+import {
+  View,
+  Text as RNText,
+  Pressable as RNPressable,
+  TextInput,
+  Modal as RNModal,
+  Switch as RNSwitch,
+  ActivityIndicator,
+  ViewProps,
+  TextProps,
+  PressableProps,
+  TextInputProps,
+  SwitchProps,
+  ActivityIndicatorProps,
+  ModalProps,
+  useColorScheme,
+} from 'react-native';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+
+export interface TimmbrNativeContextValue {
+  mode: ThemeMode;
+  resolvedTheme: ResolvedTheme;
+  setMode: (mode: ThemeMode) => void;
+  toggleTheme: () => void;
+}
+
+const TimmbrNativeContext = createContext<TimmbrNativeContextValue>({
+  mode: 'system',
+  resolvedTheme: 'light',
+  setMode: () => {},
+  toggleTheme: () => {},
+});
+
+export const useTimmbrNative = (): TimmbrNativeContextValue => useContext(TimmbrNativeContext);
+export const useTimmbrTheme = useTimmbrNative;
+
+export interface TimmbrNativeProviderProps {
+  mode?: ThemeMode;
+  defaultMode?: ThemeMode;
+  children: React.ReactNode;
+  className?: string;
+  colorMode?: ThemeMode;
+}
+
+export const TimmbrNativeProvider: React.FC<TimmbrNativeProviderProps> = ({
+  mode: controlledMode,
+  defaultMode = 'system',
+  colorMode,
+  children,
+  className = '',
+}) => {
+  const systemScheme = useColorScheme();
+  const [uncontrolledMode, setUncontrolledMode] = useState<ThemeMode>(
+    colorMode ?? defaultMode
+  );
+  const currentMode = controlledMode ?? colorMode ?? uncontrolledMode;
+
+  const resolvedTheme: ResolvedTheme = useMemo(() => {
+    if (currentMode === 'system') {
+      return systemScheme === 'dark' ? 'dark' : 'light';
+    }
+    return currentMode;
+  }, [currentMode, systemScheme]);
+
+  const setMode = useCallback((newMode: ThemeMode) => {
+    setUncontrolledMode(newMode);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setUncontrolledMode((prev) => {
+      const active = prev === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : prev;
+      return active === 'dark' ? 'light' : 'dark';
+    });
+  }, [systemScheme]);
+
+  const contextValue = useMemo(
+    () => ({
+      mode: currentMode,
+      resolvedTheme,
+      setMode,
+      toggleTheme,
+    }),
+    [currentMode, resolvedTheme, setMode, toggleTheme]
+  );
+
+  return (
+    <TimmbrNativeContext.Provider value={contextValue}>
+      <View
+        className={`flex-1 ${resolvedTheme === 'dark' ? 'dark bg-background' : 'bg-background'} ${className}`}
+      >
+        {children}
+      </View>
+    </TimmbrNativeContext.Provider>
+  );
+};
+
+export interface BoxProps extends ViewProps {
+  className?: string;
+}
+export const Box: React.FC<BoxProps> = ({ className = '', style, children, ...props }) => (
+  <View className={className} style={style} {...props}>
+    {children}
+  </View>
+);
+
+export interface StackProps extends ViewProps {
+  className?: string;
+  space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  reversed?: boolean;
+}
+
+const spaceGapMap: Record<string, string> = {
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-3',
+  lg: 'gap-4',
+  xl: 'gap-6',
+};
+
+export const VStack: React.FC<StackProps> = ({
+  space,
+  className = '',
+  reversed,
+  children,
+  ...props
+}) => {
+  const gapClass = space ? spaceGapMap[space] : '';
+  const dirClass = reversed ? 'flex-col-reverse' : 'flex-col';
+  return (
+    <View className={`${dirClass} ${gapClass} ${className}`} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export const HStack: React.FC<StackProps> = ({
+  space,
+  className = '',
+  reversed,
+  children,
+  ...props
+}) => {
+  const gapClass = space ? spaceGapMap[space] : '';
+  const dirClass = reversed ? 'flex-row-reverse' : 'flex-row items-center';
+  return (
+    <View className={`${dirClass} ${gapClass} ${className}`} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export interface TextPropsWithClass extends TextProps {
+  className?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const textSizeMap: Record<string, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+
+export const Text: React.FC<TextPropsWithClass> = ({
+  size,
+  className = '',
+  children,
+  ...props
+}) => {
+  const sizeClass = size ? textSizeMap[size] : '';
+  return (
+    <RNText className={`text-foreground font-sans ${sizeClass} ${className}`} {...props}>
+      {children}
+    </RNText>
+  );
+};
+
+export interface HeadingProps extends TextProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+const headingSizeMap: Record<string, string> = {
+  sm: 'text-lg',
+  md: 'text-xl',
+  lg: 'text-2xl',
+  xl: 'text-3xl',
+  '2xl': 'text-4xl',
+};
+
+export const Heading: React.FC<HeadingProps> = ({
+  size = 'lg' as NonNullable<HeadingProps['size']>,
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <RNText
+      className={`font-title font-bold text-foreground ${headingSizeMap[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+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?: ButtonVariant;
+  action?: ButtonAction;
+  size?: ButtonSize;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  children?: React.ReactNode;
+}
+
+const buttonVariantStyles: Record<string, Record<string, string>> = {
+  solid: {
+    primary: 'bg-primary border-primary',
+    secondary: 'bg-secondary border-border',
+    positive: 'bg-success border-success',
+    negative: 'bg-destructive border-destructive',
+    default: 'bg-secondary border-border',
+  },
+  outline: {
+    primary: 'bg-transparent border-primary',
+    secondary: 'bg-transparent border-border',
+    positive: 'bg-transparent border-success',
+    negative: 'bg-transparent border-destructive',
+    default: 'bg-transparent border-border',
+  },
+  link: {
+    primary: 'bg-transparent border-transparent',
+    secondary: 'bg-transparent border-transparent',
+    positive: 'bg-transparent border-transparent',
+    negative: 'bg-transparent border-transparent',
+    default: 'bg-transparent border-transparent',
+  },
+};
+
+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]',
+  lg: 'px-6 py-3.5 rounded-xl min-h-[52px]',
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'solid' as ButtonVariant,
+  action = 'primary' as ButtonAction,
+  size = 'md' as ButtonSize,
+  isDisabled = false,
+  isLoading = false,
+  disabled,
+  className = '',
+  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 (
+    <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>
+  );
+};
+
+export interface ButtonTextProps extends TextPropsWithClass {
+  action?: 'primary' | 'secondary' | 'positive' | 'negative' | 'default';
+  variant?: 'solid' | 'outline' | 'link';
+}
+
+export const ButtonText: React.FC<ButtonTextProps> = ({
+  variant: variantProp,
+  action: actionProp,
+  className = '',
+  children,
+  ...props
+}) => {
+  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,
+  size = 'small',
+  className = 'mr-2',
+  ...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?: BadgeVariant;
+  action?: BadgeAction;
+}
+
+const badgeActionStyles: Record<string, Record<string, string>> = {
+  solid: {
+    primary: 'bg-primary border-primary',
+    secondary: 'bg-secondary border-border',
+    success: 'bg-emerald-600 border-emerald-600',
+    warning: 'bg-amber-600 border-amber-600',
+    error: 'bg-destructive border-destructive',
+    info: 'bg-blue-600 border-blue-600',
+    muted: 'bg-muted border-border',
+  },
+  outline: {
+    primary: 'bg-transparent border-primary',
+    secondary: 'bg-transparent border-border',
+    success: 'bg-transparent border-emerald-600',
+    warning: 'bg-transparent border-amber-600',
+    error: 'bg-transparent border-destructive',
+    info: 'bg-transparent border-blue-600',
+    muted: 'bg-transparent border-border',
+  },
+};
+
+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' 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 (
+    <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>
+  );
+};
+
+export const BadgeText: React.FC<TextPropsWithClass> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  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
+    className={`rounded-xl p-4 bg-card border border-border shadow-sm ${className}`}
+    {...props}
+  >
+    {children}
+  </View>
+);
+
+export interface InputProps extends ViewProps {
+  className?: string;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+}
+
+export const Input: React.FC<InputProps> = ({
+  isInvalid = false,
+  isDisabled = false,
+  className = '',
+  children,
+  ...props
+}) => {
+  const stateClass = isInvalid
+    ? 'border-destructive'
+    : isDisabled
+      ? 'border-border opacity-50'
+      : 'border-border';
+  return (
+    <View
+      className={`flex-row items-center rounded-lg border bg-background px-3 py-2 min-h-[44px] ${stateClass} ${className}`}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+export interface InputFieldProps extends TextInputProps {
+  className?: string;
+}
+
+export const InputField: React.FC<InputFieldProps> = ({
+  className = '',
+  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,
+  isDisabled = false,
+  className = '',
+  children,
+  ...props
+}) => {
+  const stateClass = isInvalid
+    ? 'border-destructive'
+    : isDisabled
+      ? 'border-border opacity-50'
+      : 'border-border';
+  return (
+    <View
+      className={`rounded-lg border bg-background p-3 min-h-[100px] ${stateClass} ${className}`}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+export const TextareaInput: React.FC<InputFieldProps> = ({
+  className = '',
+  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;
+  setActiveTab: (tab: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  activeTab: '',
+  setActiveTab: () => {},
+});
+
+export interface TabsProps extends ViewProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export const Tabs: React.FC<TabsProps> = ({
+  defaultValue = '',
+  value: controlledValue,
+  onValueChange,
+  className = '',
+  children,
+  ...props
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const activeTab = controlledValue ?? uncontrolledValue;
+
+  const setActiveTab = (newTab: string) => {
+    setUncontrolledValue(newTab);
+    onValueChange?.(newTab);
+  };
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <View className={`w-full ${className}`} {...props}>
+        {children}
+      </View>
+    </TabsContext.Provider>
+  );
+};
+
+export const TabsList: React.FC<BoxProps> = ({ className = '', children, ...props }) => (
+  <View
+    className={`flex-row rounded-lg bg-secondary p-1 border border-border ${className}`}
+    {...props}
+  >
+    {children}
+  </View>
+);
+
+export interface TabsTriggerProps extends PressableProps {
+  value: string;
+  className?: string;
+}
+
+export const TabsTrigger: React.FC<TabsTriggerProps> = ({
+  value,
+  className = '',
+  children,
+  ...props
+}) => {
+  const { activeTab, setActiveTab } = useContext(TabsContext);
+  const isActive = activeTab === value;
+
+  return (
+    <RNPressable
+      onPress={() => setActiveTab(value)}
+      className={`flex-1 py-2 px-3 rounded-md items-center justify-center ${
+        isActive ? 'bg-card shadow-sm border border-border' : 'opacity-70'
+      } ${className}`}
+      {...props}
+    >
+      {children}
+    </RNPressable>
+  );
+};
+
+export const TabsTriggerText: React.FC<TextPropsWithClass> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNText
+    className={`text-sm font-semibold text-foreground font-sans ${className}`}
+    {...props}
+  >
+    {children}
+  </RNText>
+);
+
+export interface TabsContentProps extends ViewProps {
+  value: string;
+  className?: string;
+}
+
+export const TabsContent: React.FC<TabsContentProps> = ({
+  value,
+  className = '',
+  children,
+  ...props
+}) => {
+  const { activeTab } = useContext(TabsContext);
+  if (activeTab !== value) return null;
+
+  return (
+    <View className={`mt-3 ${className}`} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export interface ActionsheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+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,
+  className = '',
+}) => (
+  <RNPressable
+    onPress={onPress}
+    className={`absolute inset-0 bg-black/60 ${className}`}
+  />
+);
+
+export const ActionsheetContent: React.FC<BoxProps> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <View
+    className={`bg-card rounded-t-3xl p-5 border-t border-border shadow-lg max-h-[85%] ${className}`}
+    {...props}
+  >
+    {children}
+  </View>
+);
+
+export const ActionsheetDragIndicator: React.FC<BoxProps> = ({
+  className = '',
+  ...props
+}) => (
+  <View className="items-center pb-3">
+    <View className={`w-12 h-1.5 rounded-full bg-muted ${className}`} {...props} />
+  </View>
+);
+
+export interface ActionsheetItemProps extends PressableProps {
+  className?: string;
+}
+
+export const ActionsheetItem: React.FC<ActionsheetItemProps> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNPressable
+    className={`py-3.5 px-4 rounded-xl active:bg-secondary flex-row items-center ${className}`}
+    {...props}
+  >
+    {children}
+  </RNPressable>
+);
+
+export const ActionsheetItemText: React.FC<TextPropsWithClass> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNText className={`text-base font-sans text-foreground ${className}`} {...props}>
+    {children}
+  </RNText>
+);
+
+export interface CustomModalProps extends ModalProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  className?: string;
+}
+
+export const Modal: React.FC<CustomModalProps> = ({
+  isOpen = false,
+  visible,
+  onClose,
+  className = '',
+  children,
+  ...props
+}) => {
+  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,
+  thumbColor = '#FFFFFF',
+  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',
+  size = 'small',
+  className = '',
+  ...props
+}) => <ActivityIndicator color={color} size={size} className={className} {...props} />;
+
+export interface AvatarProps extends ViewProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const avatarSizeMap: Record<string, string> = {
+  sm: 'w-8 h-8 rounded-full',
+  md: 'w-10 h-10 rounded-full',
+  lg: 'w-14 h-14 rounded-full',
+  xl: 'w-20 h-20 rounded-full',
+};
+
+export const Avatar: React.FC<AvatarProps> = ({
+  size = 'md',
+  className = '',
+  children,
+  ...props
+}) => (
+  <View
+    className={`items-center justify-center bg-secondary border border-border overflow-hidden ${avatarSizeMap[size]} ${className}`}
+    {...props}
+  >
+    {children}
+  </View>
+);
+
+export const AvatarFallbackText: React.FC<TextPropsWithClass> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNText
+    className={`font-bold font-sans text-secondary-foreground text-sm ${className}`}
+    {...props}
+  >
+    {children}
+  </RNText>
+);
+
+export const Divider: React.FC<BoxProps> = ({ className = '', ...props }) => (
+  <View className={`h-px bg-border my-2 w-full ${className}`} {...props} />
+);
+
+export const Pressable: React.FC<PressableProps & { className?: string }> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNPressable className={className} {...props}>
+    {children}
+  </RNPressable>
+);
+
+export interface ToastProps extends ViewProps {
+  action?: 'success' | 'warning' | 'error' | 'info';
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export const Toast: React.FC<ToastProps> = ({
+  action = 'info',
+  title,
+  description,
+  className = '',
+  children,
+  ...props
+}) => {
+  const borderColors: Record<string, string> = {
+    success: 'border-emerald-600',
+    warning: 'border-amber-600',
+    error: 'border-destructive',
+    info: 'border-blue-600',
+  };
+  return (
+    <View
+      className={`p-4 rounded-xl bg-card border-l-4 shadow-md ${borderColors[action]} ${className}`}
+      {...props}
+    >
+      {title && <RNText className="font-bold text-foreground">{title}</RNText>}
+      {description && <RNText className="text-sm text-muted-foreground mt-1">{description}</RNText>}
+      {children}
+    </View>
+  );
+};
+
+export interface IconProps {
+  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,
+  className = '',
+}) => {
+  const { resolvedTheme } = useTimmbrNative();
+  if (!Component) return null;
+  const numSize = typeof size === 'number' ? size : parseInt(size, 10) || 20;
+  const resolvedColor = resolveIconColor(color, className, resolvedTheme);
+  return <Component size={numSize} color={resolvedColor} className={className} />;
+};
+