@timmbr/native-ui 0.0.0-stage → 1.0.0

package/src/native/index.tsx

@@ -0,0 +1,799 @@
+import React, { createContext, 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 = (newMode: ThemeMode) => {
+    setUncontrolledMode(newMode);
+  };
+
+  const toggleTheme = () => {
+    setUncontrolledMode((prev) => {
+      const active = prev === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : prev;
+      return active === 'dark' ? 'light' : 'dark';
+    });
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      mode: currentMode,
+      resolvedTheme,
+      setMode,
+      toggleTheme,
+    }),
+    [currentMode, resolvedTheme]
+  );
+
+  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',
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <RNText
+      className={`font-title font-bold text-foreground ${headingSizeMap[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export interface ButtonProps extends Omit<PressableProps, 'children'> {
+  className?: string;
+  variant?: 'solid' | 'outline' | 'link';
+  action?: 'primary' | 'secondary' | 'positive' | 'negative' | 'default';
+  size?: 'sm' | 'md' | 'lg';
+  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 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',
+  action = 'primary',
+  size = 'md',
+  isDisabled = false,
+  isLoading = false,
+  disabled,
+  className = '',
+  children,
+  ...props
+}) => {
+  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';
+
+  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>
+  );
+};
+
+export interface ButtonTextProps extends TextPropsWithClass {
+  action?: 'primary' | 'secondary' | 'positive' | 'negative' | 'default';
+  variant?: 'solid' | 'outline' | 'link';
+}
+
+export const ButtonText: React.FC<ButtonTextProps> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNText
+    className={`text-center font-semibold font-sans text-sm text-primary-foreground ${className}`}
+    {...props}
+  >
+    {children}
+  </RNText>
+);
+
+export interface ButtonSpinnerProps extends ActivityIndicatorProps {
+  className?: string;
+}
+
+export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
+  color = '#FFFFFF',
+  size = 'small',
+  className = 'mr-2',
+  ...props
+}) => <ActivityIndicator color={color} size={size} className={className} {...props} />;
+
+export interface BadgeProps extends ViewProps {
+  className?: string;
+  variant?: 'solid' | 'outline';
+  action?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+}
+
+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',
+  },
+};
+
+export const Badge: React.FC<BadgeProps> = ({
+  variant = 'solid',
+  action = 'primary',
+  className = '',
+  children,
+  ...props
+}) => {
+  const badgeClass = badgeActionStyles[variant]?.[action] || badgeActionStyles.solid.primary;
+  return (
+    <View
+      className={`px-2.5 py-0.5 rounded-full border items-center justify-center flex-row ${badgeClass} ${className}`}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+export const BadgeText: React.FC<TextPropsWithClass> = ({
+  className = '',
+  children,
+  ...props
+}) => (
+  <RNText
+    className={`text-xs font-semibold font-sans text-primary-foreground ${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 = '#6D6D6D',
+  ...props
+}) => (
+  <TextInput
+    className={`flex-1 text-foreground placeholder:text-muted-foreground font-sans text-base py-1 ${className}`}
+    placeholderTextColor={placeholderTextColor}
+    {...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 = '#6D6D6D',
+  ...props
+}) => (
+  <TextInput
+    multiline
+    textAlignVertical="top"
+    className={`flex-1 text-foreground placeholder:text-muted-foreground font-sans text-base ${className}`}
+    placeholderTextColor={placeholderTextColor}
+    {...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 }) => (
+  <RNModal
+    visible={isOpen}
+    transparent
+    animationType="fade"
+    onRequestClose={onClose}
+  >
+    <View className="flex-1 justify-end">
+      {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,
+  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>
+);
+
+export interface CustomSwitchProps extends SwitchProps {
+  className?: string;
+}
+
+export const Switch: React.FC<CustomSwitchProps> = ({
+  trackColor = { false: '#DDD5CA', true: '#C0643A' },
+  thumbColor = '#FFFFFF',
+  className = '',
+  ...props
+}) => (
+  <RNSwitch
+    trackColor={trackColor}
+    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.ComponentType<{ size?: number; color?: string; className?: string }>;
+  size?: number | string;
+  color?: string;
+  className?: string;
+}
+
+export const Icon: React.FC<IconProps> = ({
+  as: Component,
+  size = 20,
+  color = 'currentColor',
+  className = '',
+}) => {
+  if (!Component) return null;
+  const numSize = typeof size === 'number' ? size : parseInt(size, 10) || 20;
+  return <Component size={numSize} color={color} className={className} />;
+};
+