@situaction/traquiste-mobile 1.0.0-next.3 → 1.0.0-next.5

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@situaction/traquiste-mobile",
-  "version": "1.0.0-next.3",
+  "version": "1.0.0-next.5",
   "description": "React Native UI component library for Traquiste",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "files": [
-    "build",
-    "src",
-    "!build/**/*.stories.*",
-    "!src/**/*.stories.*",
-    "!src/**/__tests__"
+    "build"
   ],
   "scripts": {
     "build": "expo-module build",

package/src/components/Button/Button.tsx

@@ -1,128 +0,0 @@
-/**
- * Button component for Traq[UI]ste Mobile.
- * Supports four variants, four sizes and three content layouts.
- */
-import React, { useState } from 'react';
-import { Pressable, Text } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
-
-export type ButtonVariant = 'primary' | 'tertiary' | 'ghost' | 'destructive';
-export type ButtonSize = 'S' | 'M' | 'L' | 'XL';
-export type ButtonContent = 'icon-only' | 'icon-only-rounded' | 'icon-both';
-
-export interface ButtonProps {
-  /** Button visual variant */
-  variant?: ButtonVariant;
-  /** Button size */
-  size?: ButtonSize;
-  /** Content layout */
-  content?: ButtonContent;
-  /** Label text — required when content is 'icon-both' */
-  label?: string;
-  /** Left icon component (Phosphor icon) */
-  iconLeft?: React.ReactElement;
-  /** Right icon component (Phosphor icon) */
-  iconRight?: React.ReactElement;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-// --- Size tokens (static, theme-independent) ---
-
-const SIZE_TOKENS = {
-  S:  { height: 36, paddingVertical: 10, paddingHorizontal: 10, gap: 8,  borderRadius: 8, iconSize: 16, fontSize: 12, lineHeight: 16 },
-  M:  { height: 40, paddingVertical: 10, paddingHorizontal: 16, gap: 4,  borderRadius: 8, iconSize: 18, fontSize: 14, lineHeight: 20 },
-  L:  { height: 48, paddingVertical: 12, paddingHorizontal: 12, gap: 10, borderRadius: 8, iconSize: 20, fontSize: 16, lineHeight: 24 },
-  XL: { height: 60, paddingVertical: 16, paddingHorizontal: 32, gap: 12, borderRadius: 8, iconSize: 24, fontSize: 18, lineHeight: 26 },
-} as const;
-
-// --- Component ---
-
-export function Button({
-  variant = 'primary',
-  size = 'M',
-  content = 'icon-both',
-  label,
-  iconLeft,
-  iconRight,
-  disabled = false,
-  onPress,
-  style,
-}: ButtonProps) {
-  const [pressed, setPressed] = useState(false);
-  const { colors } = useTheme();
-
-  const sizeTokens = SIZE_TOKENS[size];
-  const state = disabled ? 'disabled' : pressed ? 'pressed' : 'default';
-  const colorTokens = colors.button[variant][state];
-
-  const isIconOnly = content === 'icon-only' || content === 'icon-only-rounded';
-  const borderRadius = content === 'icon-only-rounded' ? 9999 : sizeTokens.borderRadius;
-  const hasBorder = colorTokens.border !== 'transparent';
-
-  const containerStyle: ViewStyle = {
-    height: sizeTokens.height,
-    paddingVertical: isIconOnly ? undefined : sizeTokens.paddingVertical,
-    paddingHorizontal: isIconOnly ? undefined : sizeTokens.paddingHorizontal,
-    width: isIconOnly ? sizeTokens.height : undefined,
-    borderRadius,
-    gap: sizeTokens.gap,
-    backgroundColor: colorTokens.background,
-    borderWidth: hasBorder ? 1 : undefined,
-    borderColor: hasBorder ? colorTokens.border : undefined,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-  };
-
-  const textStyle = {
-    color: colorTokens.text,
-    fontSize: sizeTokens.fontSize,
-    lineHeight: sizeTokens.lineHeight,
-    fontFamily: 'Urbanist',
-    fontWeight: '500' as const,
-  };
-
-  // Clone icon elements to inject size and color from active theme state
-  const cloneIcon = (icon: React.ReactElement | undefined) => {
-    if (!icon) return null;
-    return React.cloneElement(icon, {
-      size: sizeTokens.iconSize,
-      color: colorTokens.icon,
-      ...(icon.props as Record<string, unknown>),
-    } as object);
-  };
-
-  if (isIconOnly) {
-    return (
-      <Pressable
-        pointerEvents={disabled ? 'none' : 'auto'}
-        onPressIn={() => setPressed(true)}
-        onPressOut={() => setPressed(false)}
-        onPress={disabled ? undefined : onPress}
-        style={[containerStyle, style]}
-      >
-        {cloneIcon(iconLeft)}
-      </Pressable>
-    );
-  }
-
-  return (
-    <Pressable
-      pointerEvents={disabled ? 'none' : 'auto'}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}
-      onPress={disabled ? undefined : onPress}
-      style={[containerStyle, style]}
-    >
-      {cloneIcon(iconLeft)}
-      {label != null && <Text style={textStyle}>{label}</Text>}
-      {cloneIcon(iconRight)}
-    </Pressable>
-  );
-}

package/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContent } from './Button';

package/src/components/ButtonAction/ButtonAction.tsx

@@ -1,67 +0,0 @@
-/**
- * ButtonAction component — bare icon-only pressable with no background or border.
- * Extends Button size range with XS and XXL sizes.
- */
-import React from 'react';
-import { Pressable } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
-
-export type ButtonActionSize = 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL';
-
-export interface ButtonActionProps {
-  /** Icon component (Phosphor Duotone) */
-  icon: React.ReactElement;
-  /** Icon size */
-  size?: ButtonActionSize;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-const ICON_SIZE: Record<ButtonActionSize, number> = {
-  XS:  12,
-  S:   16,
-  M:   20,
-  L:   24,
-  XL:  28,
-  XXL: 32,
-};
-
-export function ButtonAction({
-  icon,
-  size = 'M',
-  disabled = false,
-  onPress,
-  style,
-}: ButtonActionProps) {
-  const { colors } = useTheme();
-  const iconPx = ICON_SIZE[size];
-
-  const containerStyle: ViewStyle = {
-    width: iconPx,
-    height: iconPx,
-    opacity: disabled ? 0.5 : 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
-
-  const clonedIcon = React.cloneElement(icon, {
-    size: iconPx,
-    color: colors.text.primary,
-    ...(icon.props as Record<string, unknown>),
-  } as object);
-
-  return (
-    <Pressable
-      pointerEvents={disabled ? 'none' : 'auto'}
-      onPress={disabled ? undefined : onPress}
-      style={[containerStyle, style]}
-    >
-      {clonedIcon}
-    </Pressable>
-  );
-}

package/src/components/ButtonAction/index.ts

@@ -1,2 +0,0 @@
-export { ButtonAction } from './ButtonAction';
-export type { ButtonActionProps, ButtonActionSize } from './ButtonAction';

package/src/components/ButtonMap/ButtonMap.tsx

@@ -1,40 +0,0 @@
-/**
- * ButtonMap component — icon-only-rounded Button wrapper for map UI.
- * Applies a specific cartography shadow (Below/Minimal).
- */
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { Button } from '../Button';
-
-export interface ButtonMapProps {
-  /** Icon component (Phosphor Duotone) */
-  icon: React.ReactElement;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-const shadowStyle: ViewStyle = {
-  shadowColor: '#0f0f0f0d',
-  shadowOffset: { width: 0, height: 4 },
-  shadowRadius: 5,
-  shadowOpacity: 1,
-  elevation: 3,
-};
-
-export function ButtonMap({ icon, disabled, onPress, style }: ButtonMapProps) {
-  return (
-    <Button
-      variant="tertiary"
-      content="icon-only-rounded"
-      size="S"
-      iconLeft={icon}
-      disabled={disabled}
-      onPress={onPress}
-      style={[shadowStyle, style]}
-    />
-  );
-}

package/src/components/ButtonMap/index.ts

@@ -1,2 +0,0 @@
-export { ButtonMap } from './ButtonMap';
-export type { ButtonMapProps } from './ButtonMap';

package/src/components/ButtonMenu/ButtonMenu.tsx

@@ -1,97 +0,0 @@
-/**
- * ButtonMenu component — icon-only toggle button for navigation/menu bars.
- * Supports default, active and disabled states with an optional notification dot.
- */
-import React, {ReactElement, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
-
-export type ButtonMenuState = 'default' | 'active' | 'disabled';
-
-export interface ButtonMenuProps {
-  /** Icon component (Phosphor Duotone icon) */
-  icon: ReactElement;
-  /** Toggle state */
-  state?: ButtonMenuState;
-  /** Show notification dot */
-  notif?: boolean;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-const BACKGROUND: Record<ButtonMenuState, string> = {
-  default:  'transparent',
-  active:   '#d1c3a033',
-  disabled: '#0f0f0f0d',
-};
-
-const BORDER_COLOR: Record<ButtonMenuState, string | undefined> = {
-  default:  undefined,
-  active:   '#afafad80',
-  disabled: undefined,
-};
-
-const PRESSED_BACKGROUND = '#d1c3a066';
-const ICON_SIZE = 28;
-const NOTIF_DOT = 8;
-
-export function ButtonMenu({
-  icon,
-  state = 'default',
-  notif = false,
-  onPress,
-  style,
-}: ButtonMenuProps) {
-  const [pressed, setPressed] = useState(false);
-  const { colors } = useTheme();
-
-  const isDisabled = state === 'disabled';
-  const background = pressed && !isDisabled ? PRESSED_BACKGROUND : BACKGROUND[state];
-  const borderColor = BORDER_COLOR[state];
-
-  const containerStyle: ViewStyle = {
-    width: 48,
-    height: 48,
-    padding: 10,
-    borderRadius: 8,
-    backgroundColor: background,
-    borderWidth: borderColor != null ? 1 : undefined,
-    borderColor: borderColor ?? undefined,
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
-
-  const clonedIcon = React.cloneElement(icon, {
-    size: ICON_SIZE,
-    color: isDisabled ? colors.text.disabled : undefined,
-    ...(icon.props as Record<string, unknown>),
-  } as object);
-
-  return (
-    <Pressable
-      pointerEvents={isDisabled ? 'none' : 'auto'}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}
-      onPress={isDisabled ? undefined : onPress}
-      style={[containerStyle, style]}
-    >
-      {clonedIcon}
-      {notif && (
-        <View
-          style={{
-            position: 'absolute',
-            top: 6,
-            left: 34,
-            width: NOTIF_DOT,
-            height: NOTIF_DOT,
-            borderRadius: 9999,
-            backgroundColor: '#ff4747',
-          }}
-        />
-      )}
-    </Pressable>
-  );
-}

package/src/components/ButtonMenu/index.ts

@@ -1,2 +0,0 @@
-export { ButtonMenu } from './ButtonMenu';
-export type { ButtonMenuProps, ButtonMenuState } from './ButtonMenu';

package/src/components/FilterChip/FilterChip.tsx

@@ -1,124 +0,0 @@
-/**
- * FilterChip component — pill-shaped selection chip for filters.
- * Supports icon-only and icon+text layouts with controlled selection state.
- */
-import React, { useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../context/ThemeContext';
-
-export type FilterChipState = 'default' | 'pressed' | 'selected' | 'disabled';
-export type FilterChipType = 'icon' | 'icon-text';
-
-export interface FilterChipProps {
-  /** Content layout */
-  type?: FilterChipType;
-  /** Controlled selection state */
-  selected?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Label text — required when type is icon-text */
-  label?: string;
-  /** Left icon (Phosphor Duotone) */
-  iconLeft?: React.ReactElement;
-  /** Right icon — typically a caret or close icon */
-  iconRight?: React.ReactElement;
-  /** Press handler */
-  onPress?: () => void;
-  /** Additional container styles */
-  style?: StyleProp<ViewStyle>;
-}
-
-// --- State color tokens (hardcoded per spec) ---
-
-interface StateTokens {
-  background: string;
-  text: string;
-  icon: string;
-  borderColor: string;
-  borderWidth: number;
-}
-
-const STATE_TOKENS: Record<FilterChipState, StateTokens> = {
-  default:  { background: 'transparent', text: '#28242e', icon: '#28242e', borderColor: '#afafad80', borderWidth: 1 },
-  pressed:  { background: '#d1c3a066',  text: '#28242e', icon: '#28242e', borderColor: '#afafad80', borderWidth: 1 },
-  selected: { background: 'transparent', text: '#28242e', icon: '#28242e', borderColor: '#28242e',   borderWidth: 2 },
-  disabled: { background: '#0f0f0f0d', text: '#0f0f0f99', icon: '#0f0f0f99', borderColor: '#0f0f0f1a', borderWidth: 1 },
-};
-
-const ICON_LEFT_SIZE  = 20;
-const ICON_RIGHT_SIZE = 16;
-
-// --- Component ---
-
-export function FilterChip({
-  type = 'icon-text',
-  selected = false,
-  disabled = false,
-  label,
-  iconLeft,
-  iconRight,
-  onPress,
-  style,
-}: FilterChipProps) {
-  const [internalPressed, setInternalPressed] = useState(false);
-  useTheme(); // consumed for future theme-aware tokens
-
-  const resolvedState: FilterChipState = disabled
-    ? 'disabled'
-    : internalPressed
-      ? 'pressed'
-      : selected
-        ? 'selected'
-        : 'default';
-
-  const tokens = STATE_TOKENS[resolvedState];
-  const isIconOnly = type === 'icon';
-
-  const chipStyle: ViewStyle = {
-    height: 32,
-    borderRadius: 100,
-    paddingVertical: 6,
-    paddingHorizontal: isIconOnly ? 6 : 12,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: isIconOnly ? 0 : 4,
-    backgroundColor: tokens.background,
-    borderWidth: tokens.borderWidth,
-    borderColor: tokens.borderColor,
-    alignSelf: 'flex-start',
-  };
-
-  const textStyle = {
-    color: tokens.text,
-    fontSize: 14,
-    lineHeight: 20,
-    fontFamily: 'Urbanist',
-    fontWeight: '500' as const,
-  };
-
-  const cloneIcon = (icon: React.ReactElement | undefined, size: number) => {
-    if (!icon) return null;
-    return React.cloneElement(icon, {
-      size,
-      color: tokens.icon,
-      ...(icon.props as Record<string, unknown>),
-    } as object);
-  };
-
-  return (
-    <Pressable
-      pointerEvents={disabled ? 'none' : 'auto'}
-      onPressIn={() => setInternalPressed(true)}
-      onPressOut={() => setInternalPressed(false)}
-      onPress={disabled ? undefined : onPress}
-      style={[{ paddingVertical: 6 }, style]}
-    >
-      <View style={chipStyle}>
-        {cloneIcon(iconLeft, ICON_LEFT_SIZE)}
-        {!isIconOnly && label != null && <Text style={textStyle}>{label}</Text>}
-        {cloneIcon(iconRight, ICON_RIGHT_SIZE)}
-      </View>
-    </Pressable>
-  );
-}

package/src/components/FilterChip/index.ts

@@ -1,2 +0,0 @@
-export { FilterChip } from './FilterChip';
-export type { FilterChipProps, FilterChipState, FilterChipType } from './FilterChip';

package/src/constants/colors.ts

@@ -1,2 +0,0 @@
-// Color design tokens — add tokens here as the design system grows
-export const colors = {} as const;

package/src/context/ThemeContext.tsx

@@ -1,84 +0,0 @@
-/**
- * Theme system for Traq[UI]ste Mobile.
- * Provides ThemeProvider and useTheme hook.
- * Consumer apps inject their own light/dark tokens via ThemeProvider props.
- */
-
-import React, {
-  createContext,
-  useContext,
-  useMemo,
-  type ReactNode,
-} from 'react';
-import { useColorScheme } from 'react-native';
-
-import { lightTokens } from '../theme/tokens/light';
-import { darkTokens } from '../theme/tokens/dark';
-import type { ColorSchemeTokens } from '../theme/type';
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-interface ThemeContextValue {
-  /** Resolved tokens for the active color scheme */
-  colors: ColorSchemeTokens;
-  /** Active color scheme */
-  colorScheme: 'light' | 'dark';
-}
-
-const DEFAULT_VALUE: ThemeContextValue = {
-  colors: lightTokens,
-  colorScheme: 'light',
-};
-
-const ThemeContext = createContext<ThemeContextValue>(DEFAULT_VALUE);
-
-// ---------------------------------------------------------------------------
-// Provider
-// ---------------------------------------------------------------------------
-
-interface ThemeProviderProps {
-  /** Light tokens — defaults to GDM light */
-  light?: ColorSchemeTokens;
-  /** Dark tokens — defaults to GDM dark */
-  dark?: ColorSchemeTokens;
-  /** Force a color scheme — defaults to system preference */
-  colorScheme?: 'light' | 'dark';
-  children: ReactNode;
-}
-
-export function ThemeProvider({
-                                light = lightTokens,
-                                dark = darkTokens,
-                                colorScheme: forcedScheme,
-                                children,
-                              }: ThemeProviderProps) {
-  const systemScheme = useColorScheme();
-  const colorScheme: 'light' | 'dark' =
-    forcedScheme ?? (systemScheme === 'dark' ? 'dark' : 'light');
-
-  const value = useMemo<ThemeContextValue>(
-    () => ({
-      colors: colorScheme === 'dark' ? dark : light,
-      colorScheme,
-    }),
-    [light, dark, colorScheme],
-  );
-
-  return (
-    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-
-/**
- * Returns resolved color tokens for the active theme and color scheme.
- * Falls back to light tokens when used outside a ThemeProvider.
- */
-export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext);
-}

package/src/index.ts

@@ -1,23 +0,0 @@
-// Public API — re-export all components, types, and utilities from this file
-
-// Theme
-export { ThemeProvider, useTheme } from './context/ThemeContext'
-export { lightTokens } from './theme/tokens/light'
-export { darkTokens } from './theme/tokens/dark'
-export type {
-  ColorMode,
-  ColorSchemeTokens,
-  ColorTheme,
-  BackgroundTokens,
-  TextTokens,
-  BorderTokens,
-  ShadowTokens,
-  StatusTokens,
-  ButtonTokens,
-  InteractiveVariantTokens,
-  InteractiveStateTokens,
-} from './theme/type'
-
-// Components
-export { Button } from './components/Button'
-export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContent } from './components/Button'

package/src/theme/index.ts

@@ -1,20 +0,0 @@
-// Provider + hook
-export { ThemeProvider, useTheme } from '../context/ThemeContext';
-
-// Base tokens (useful for consumer apps building their own theme)
-export { lightTokens } from './tokens/light';
-export { darkTokens } from './tokens/dark';
-
-// Types
-export type {
-  ColorTheme,
-  ColorSchemeTokens,
-  BackgroundTokens,
-  TextTokens,
-  BorderTokens,
-  ShadowTokens,
-  StatusTokens,
-  ButtonTokens,
-  InteractiveVariantTokens,
-  InteractiveStateTokens,
-} from './type';

package/src/theme/tokens/dark.ts

@@ -1,160 +0,0 @@
-/**
- * Base dark tokens.
- * These are the default dark values — themes override what they need.
- * Tim: add new component tokens at the bottom when creating a new component.
- */
-
-import type { ColorSchemeTokens } from '../type';
-
-export const darkTokens: ColorSchemeTokens = {
-  // -------------------------------------------------------------------------
-  // Globals
-  // -------------------------------------------------------------------------
-
-  background: {
-    primary: '#28242e',
-    secondary: '#2f2b37',
-    tertiary: '#3e3f4e',
-    overlay: '#0f0f0f99',
-    menu: '#2f2b37',
-  },
-
-  text: {
-    primary: '#ffffff',
-    secondary: '#d7d7e0',
-    tertiary: '#8b8da5',
-    disabled: '#ffffff4d',
-    onColor: '#ffffff',
-  },
-
-  border: {
-    default: '#ffffff33',
-    strong: '#ffffff4d',
-    disabled: '#ffffff1a',
-    window: '#ffffff33',
-  },
-
-  shadow: {
-    minimal: '#0f0f0f1a',
-    lowest: '#0f0f0f33',
-  },
-
-  // -------------------------------------------------------------------------
-  // Status
-  // -------------------------------------------------------------------------
-
-  error: {
-    default: '#ff6464',
-    light: '#4b0404',
-    dark: '#ff9d9d',
-  },
-
-  success: {
-    default: '#45c85a',
-    light: '#092a10',
-    dark: '#91e49e',
-  },
-
-  warning: {
-    default: '#eeb721',
-    light: '#3f1c09',
-    dark: '#f4cf50',
-  },
-
-  info: {
-    default: '#d7d7e0',
-    light: '#3e3f4e',
-    dark: '#f7f7f8',
-  },
-
-  // -------------------------------------------------------------------------
-  // Button
-  // -------------------------------------------------------------------------
-
-  button: {
-    primary: {
-      default: {
-        background: '#ffffff',
-        text: '#28242e',
-        icon: '#28242e',
-        border: 'transparent',
-      },
-      pressed: {
-        background: '#d1d1d1',
-        text: '#28242e',
-        icon: '#28242e',
-        border: 'transparent',
-      },
-      disabled: {
-        background: '#ffffff1a',
-        text: '#ffffff4d',
-        icon: '#ffffff4d',
-        border: 'transparent',
-      },
-    },
-    tertiary: {
-      default: {
-        background: 'transparent',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: '#ffffff33',
-      },
-      pressed: {
-        background: '#ffffff1a',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: '#ffffff33',
-      },
-      disabled: {
-        background: '#ffffff0d',
-        text: '#ffffff4d',
-        icon: '#ffffff4d',
-        border: '#ffffff1a',
-      },
-    },
-    ghost: {
-      default: {
-        background: 'transparent',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      pressed: {
-        background: '#ffffff1a',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      disabled: {
-        background: 'transparent',
-        text: '#ffffff4d',
-        icon: '#ffffff4d',
-        border: 'transparent',
-      },
-    },
-    destructive: {
-      default: {
-        background: '#ff4747',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      pressed: {
-        background: '#c80d0d',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      disabled: {
-        background: '#ffffff0d',
-        text: '#ffffff4d',
-        icon: '#ffffff4d',
-        border: 'transparent',
-      },
-    },
-  },
-
-  // -------------------------------------------------------------------------
-  // Add new component tokens below
-  // -------------------------------------------------------------------------
-};

package/src/theme/tokens/light.ts

@@ -1,166 +0,0 @@
-/**
- * Base light tokens.
- * These are the default light values — themes override what they need.
- * Tim: add new component tokens at the bottom when creating a new component.
- */
-
-import type { ColorSchemeTokens } from '../type';
-
-export const lightTokens: ColorSchemeTokens = {
-  // -------------------------------------------------------------------------
-  // Globals
-  // -------------------------------------------------------------------------
-
-  background: {
-    primary: '#ffffff',
-    secondary: '#f8f6f0',
-    tertiary: '#e8e4da',
-    overlay: '#0f0f0f80',
-    menu: '#f8f6f0',
-  },
-
-  text: {
-    primary: '#28242e',
-    secondary: '#47475d',
-    tertiary: '#6d6f8a',
-    disabled: '#0f0f0f99',
-    onColor: '#ffffff',
-  },
-
-  border: {
-    default: '#afafad80',
-    strong: '#afafadcc',
-    disabled: '#0f0f0f1a',
-    window: '#afafad80',
-  },
-
-  shadow: {
-    minimal: '#0f0f0f0d',
-    lowest: '#0f0f0f1a',
-  },
-
-  // -------------------------------------------------------------------------
-  // Status
-  // -------------------------------------------------------------------------
-
-  error: {
-    default: '#ff4747',
-    light: '#fff1f1',
-    dark: '#c80d0d',
-  },
-
-  success: {
-    default: '#33b449',
-    light: '#f1fcf3',
-    dark: '#20752f',
-  },
-
-  warning: {
-    default: '#de9f14',
-    light: '#fdfae9',
-    dark: '#99570f',
-  },
-
-  info: {
-    default: '#28242e',
-    light: '#f7f7f8',
-    dark: '#1a1720',
-  },
-
-  // -------------------------------------------------------------------------
-  // Button
-  // -------------------------------------------------------------------------
-
-  button: {
-    primary: {
-      default: {
-        background: '#28242e',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      pressed: {
-        background: '#3e3f4e',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      disabled: {
-        background: '#0f0f0f0d',
-        text: '#0f0f0f99',
-        icon: '#0f0f0f99',
-        border: 'transparent',
-      },
-    },
-    tertiary: {
-      default: {
-        background: 'transparent',
-        text: '#28242e',
-        icon: '#28242e',
-        border: '#afafad80',
-      },
-      pressed: {
-        background: '#d1c3a066',
-        text: '#28242e',
-        icon: '#28242e',
-        border: '#afafad80',
-      },
-      disabled: {
-        background: '#0f0f0f0d',
-        text: '#0f0f0f99',
-        icon: '#0f0f0f99',
-        border: '#0f0f0f1a',
-      },
-    },
-    ghost: {
-      default: {
-        background: 'transparent',
-        text: '#28242e',
-        icon: '#28242e',
-        border: 'transparent',
-      },
-      pressed: {
-        background: '#d1c3a066',
-        text: '#28242e',
-        icon: '#28242e',
-        border: 'transparent',
-      },
-      disabled: {
-        background: 'transparent',
-        text: '#0f0f0f66',
-        icon: '#0f0f0f66',
-        border: 'transparent',
-      },
-    },
-    destructive: {
-      default: {
-        background: '#ff4747',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      pressed: {
-        background: '#c80d0d',
-        text: '#ffffff',
-        icon: '#ffffff',
-        border: 'transparent',
-      },
-      disabled: {
-        background: '#0f0f0f0d',
-        text: '#0f0f0f99',
-        icon: '#0f0f0f99',
-        border: 'transparent',
-      },
-    },
-  },
-
-  // -------------------------------------------------------------------------
-  // Add new component tokens below
-  // Example:
-  // checkbox: {
-  //   default: { background: '...', border: '...', icon: '...' },
-  //   checked: { background: '...', border: '...', icon: '...' },
-  //   disabled: { background: '...', border: '...', icon: '...' },
-  // },
-  // -------------------------------------------------------------------------
-};

package/src/theme/type.ts

@@ -1,122 +0,0 @@
-/**
- * Color theme contract for Traq[UI]ste Mobile.
- * Every theme must implement this interface.
- * Add a new section here when Tim creates a new component.
- */
-
-// ---------------------------------------------------------------------------
-// Color mode
-// ---------------------------------------------------------------------------
-
-export type ColorMode = 'light' | 'dark';
-
-// ---------------------------------------------------------------------------
-// Shared primitives
-// ---------------------------------------------------------------------------
-
-export interface InteractiveStateTokens {
-  /** Container background */
-  background: string;
-  /** Label / text color */
-  text: string;
-  /** Icon tint */
-  icon: string;
-  /** Border — use 'transparent' when no border */
-  border: string;
-}
-
-export interface InteractiveVariantTokens {
-  default: InteractiveStateTokens;
-  pressed: InteractiveStateTokens;
-  disabled: InteractiveStateTokens;
-}
-
-export interface StatusTokens {
-  /** Primary status color */
-  default: string;
-  /** Light tint — backgrounds */
-  light: string;
-  /** Dark variant — text on light bg */
-  dark: string;
-}
-
-// ---------------------------------------------------------------------------
-// Global tokens
-// ---------------------------------------------------------------------------
-
-export interface BackgroundTokens {
-  primary: string;
-  secondary: string;
-  tertiary: string;
-  overlay: string;
-  menu: string;
-}
-
-export interface TextTokens {
-  primary: string;
-  secondary: string;
-  tertiary: string;
-  disabled: string;
-  onColor: string;
-}
-
-export interface BorderTokens {
-  default: string;
-  strong: string;
-  disabled: string;
-  window: string;
-}
-
-export interface ShadowTokens {
-  minimal: string;
-  lowest: string;
-}
-
-// ---------------------------------------------------------------------------
-// Component tokens
-// Add a new interface below when Tim creates a new component
-// ---------------------------------------------------------------------------
-
-export interface ButtonTokens {
-  primary: InteractiveVariantTokens;
-  tertiary: InteractiveVariantTokens;
-  ghost: InteractiveVariantTokens;
-  destructive: InteractiveVariantTokens;
-}
-
-// export interface CheckboxTokens { ... }  ← next component goes here
-// export interface InputTokens { ... }
-// export interface TagTokens { ... }
-
-// ---------------------------------------------------------------------------
-// Full scheme (light or dark)
-// ---------------------------------------------------------------------------
-
-export interface ColorSchemeTokens {
-  // globals
-  background: BackgroundTokens;
-  text: TextTokens;
-  border: BorderTokens;
-  shadow: ShadowTokens;
-
-  // status
-  error: StatusTokens;
-  success: StatusTokens;
-  warning: StatusTokens;
-  info: StatusTokens;
-
-  // components — add new ones here when Tim creates them
-  button: ButtonTokens;
-  // checkbox: CheckboxTokens;
-  // input: InputTokens;
-  // tag: TagTokens;
-}
-
-// ---------------------------------------------------------------------------
-// Theme (light + dark)
-// ---------------------------------------------------------------------------
-
-export interface ColorTheme {
-  light: ColorSchemeTokens;
-  dark: ColorSchemeTokens;
-}