@metacells/mcellui-core 0.1.0

package/src/theme/presets.ts

@@ -0,0 +1,341 @@
+/**
+ * Theme Presets
+ *
+ * Pre-designed color schemes for instant brand alignment.
+ * Each preset defines primary colors and derives a full semantic palette.
+ *
+ * Usage:
+ * ```tsx
+ * <ThemeProvider theme="rose">
+ * <ThemeProvider theme="violet">
+ * ```
+ */
+
+import { ThemeColors } from './colors';
+
+// =============================================================================
+// Color Palettes (Tailwind-inspired)
+// =============================================================================
+
+const palettes = {
+  zinc: {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+  },
+  slate: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+  stone: {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917',
+    950: '#0c0a09',
+  },
+  blue: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+    950: '#172554',
+  },
+  green: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+  },
+  rose: {
+    50: '#fff1f2',
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+    950: '#4c0519',
+  },
+  orange: {
+    50: '#fff7ed',
+    100: '#ffedd5',
+    200: '#fed7aa',
+    300: '#fdba74',
+    400: '#fb923c',
+    500: '#f97316',
+    600: '#ea580c',
+    700: '#c2410c',
+    800: '#9a3412',
+    900: '#7c2d12',
+    950: '#431407',
+  },
+  violet: {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+    950: '#2e1065',
+  },
+} as const;
+
+// Neutral palette (used for backgrounds, text, borders)
+const neutral = {
+  0: '#ffffff',
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#e5e5e5',
+  300: '#d4d4d4',
+  400: '#a3a3a3',
+  500: '#737373',
+  600: '#525252',
+  700: '#404040',
+  800: '#262626',
+  900: '#171717',
+  950: '#0a0a0a',
+} as const;
+
+// =============================================================================
+// Theme Preset Types
+// =============================================================================
+
+export type ThemePreset = 'zinc' | 'slate' | 'stone' | 'blue' | 'green' | 'rose' | 'orange' | 'violet';
+
+export interface PresetColors {
+  light: ThemeColors;
+  dark: ThemeColors;
+}
+
+// =============================================================================
+// Preset Generation
+// =============================================================================
+
+type ColorPalette = {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+};
+
+/**
+ * Creates a complete color scheme from a primary color palette.
+ */
+function createPresetColors(
+  primaryPalette: ColorPalette,
+  neutralPalette: ColorPalette = palettes.zinc
+): PresetColors {
+  return {
+    light: {
+      // Backgrounds
+      background: neutral[0],
+      backgroundSubtle: neutralPalette[50],
+      backgroundMuted: neutralPalette[100],
+      backgroundElevated: neutral[0],
+
+      // Foreground/Text
+      foreground: neutralPalette[900],
+      foregroundMuted: neutralPalette[500],
+      foregroundSubtle: neutralPalette[400],
+
+      // Borders
+      border: neutralPalette[200],
+      borderMuted: neutralPalette[100],
+      borderFocused: primaryPalette[500],
+
+      // Primary
+      primary: primaryPalette[500],
+      primaryForeground: neutral[0],
+      primaryMuted: primaryPalette[100],
+
+      // Secondary
+      secondary: neutralPalette[100],
+      secondaryForeground: neutralPalette[900],
+
+      // Destructive (always red)
+      destructive: '#ef4444',
+      destructiveForeground: neutral[0],
+
+      // Success (always green)
+      success: '#22c55e',
+      successForeground: neutral[0],
+      successMuted: '#dcfce7',
+
+      // Warning (always amber)
+      warning: '#f59e0b',
+      warningForeground: neutral[900],
+      warningMuted: '#fef3c7',
+
+      // Error (always red)
+      error: '#ef4444',
+      errorForeground: neutral[0],
+      errorMuted: '#fee2e2',
+
+      // Card
+      card: neutral[0],
+      cardForeground: neutralPalette[900],
+
+      // Input
+      input: neutral[0],
+      inputBorder: neutralPalette[200],
+      inputPlaceholder: neutralPalette[400],
+
+      // Overlay
+      overlay: 'rgba(0, 0, 0, 0.5)',
+      scrim: 'rgba(0, 0, 0, 0.3)',
+    },
+    dark: {
+      // Backgrounds
+      background: neutralPalette[950],
+      backgroundSubtle: neutralPalette[900],
+      backgroundMuted: neutralPalette[800],
+      backgroundElevated: neutralPalette[900],
+
+      // Foreground/Text
+      foreground: neutralPalette[50],
+      foregroundMuted: neutralPalette[400],
+      foregroundSubtle: neutralPalette[500],
+
+      // Borders
+      border: neutralPalette[800],
+      borderMuted: neutralPalette[900],
+      borderFocused: primaryPalette[400],
+
+      // Primary
+      primary: primaryPalette[400],
+      primaryForeground: neutralPalette[900],
+      primaryMuted: primaryPalette[900],
+
+      // Secondary
+      secondary: neutralPalette[800],
+      secondaryForeground: neutralPalette[50],
+
+      // Destructive
+      destructive: '#ef4444',
+      destructiveForeground: neutral[0],
+
+      // Success
+      success: '#4ade80',
+      successForeground: neutral[900],
+      successMuted: '#14532d',
+
+      // Warning
+      warning: '#fbbf24',
+      warningForeground: neutral[900],
+      warningMuted: '#78350f',
+
+      // Error
+      error: '#f87171',
+      errorForeground: neutral[0],
+      errorMuted: '#7f1d1d',
+
+      // Card
+      card: neutralPalette[900],
+      cardForeground: neutralPalette[50],
+
+      // Input
+      input: neutralPalette[800],
+      inputBorder: neutralPalette[700],
+      inputPlaceholder: neutralPalette[500],
+
+      // Overlay
+      overlay: 'rgba(0, 0, 0, 0.7)',
+      scrim: 'rgba(0, 0, 0, 0.5)',
+    },
+  };
+}
+
+// =============================================================================
+// Theme Presets
+// =============================================================================
+
+/**
+ * All available theme presets.
+ */
+export const themePresets: Record<ThemePreset, PresetColors> = {
+  // Neutral presets (use their own palette as neutral base)
+  zinc: createPresetColors(palettes.zinc, palettes.zinc),
+  slate: createPresetColors(palettes.slate, palettes.slate),
+  stone: createPresetColors(palettes.stone, palettes.stone),
+
+  // Color presets (use zinc as neutral base)
+  blue: createPresetColors(palettes.blue, palettes.zinc),
+  green: createPresetColors(palettes.green, palettes.zinc),
+  rose: createPresetColors(palettes.rose, palettes.zinc),
+  orange: createPresetColors(palettes.orange, palettes.zinc),
+  violet: createPresetColors(palettes.violet, palettes.zinc),
+};
+
+/**
+ * Default theme preset.
+ */
+export const defaultThemePreset: ThemePreset = 'zinc';
+
+/**
+ * Gets colors for a theme preset.
+ */
+export function getPresetColors(preset: ThemePreset): PresetColors {
+  return themePresets[preset];
+}
+
+/**
+ * Gets light or dark colors for a theme preset.
+ */
+export function getPresetColorsForMode(
+  preset: ThemePreset,
+  isDark: boolean
+): ThemeColors {
+  const presetColors = themePresets[preset];
+  return isDark ? presetColors.dark : presetColors.light;
+}

package/src/theme/radius.ts

@@ -0,0 +1,175 @@
+/**
+ * Border Radius Tokens
+ *
+ * Consistent border radius scale for all components.
+ * Use the `radius` prop on ThemeProvider to change the base radius
+ * and transform your entire app from sharp to rounded.
+ *
+ * Usage:
+ * ```tsx
+ * // Sharp, brutalist design
+ * <ThemeProvider radius="none">
+ *
+ * // Soft, friendly design
+ * <ThemeProvider radius="lg">
+ *
+ * // In components
+ * const { radius } = useTheme();
+ * <View style={{ borderRadius: radius.md }} />
+ * ```
+ */
+
+// =============================================================================
+// Radius Preset System
+// =============================================================================
+
+/**
+ * Available radius presets.
+ * Each preset defines a base value that scales all radii.
+ */
+export type RadiusPreset = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
+/**
+ * Base values for each radius preset.
+ */
+export const radiusPresetBase: Record<RadiusPreset, number> = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  full: 9999,
+};
+
+/**
+ * Radius token structure.
+ */
+export interface RadiusTokens {
+  none: number;
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  '2xl': number;
+  full: number;
+}
+
+export type RadiusKey = keyof RadiusTokens;
+export type RadiusValue = number;
+
+/**
+ * Creates radius tokens from a preset or base value.
+ *
+ * @param preset - Radius preset name or custom base value
+ * @returns Scaled radius tokens
+ */
+export function createRadius(preset: RadiusPreset | number = 'md'): RadiusTokens {
+  const base = typeof preset === 'number' ? preset : radiusPresetBase[preset];
+
+  // Special case: 'none' preset = all zeros except full
+  if (preset === 'none' || base === 0) {
+    return {
+      none: 0,
+      xs: 0,
+      sm: 0,
+      md: 0,
+      lg: 0,
+      xl: 0,
+      '2xl': 0,
+      full: 0,
+    };
+  }
+
+  // Special case: 'full' preset = all pill-shaped
+  if (preset === 'full' || base >= 9999) {
+    return {
+      none: 0,
+      xs: 9999,
+      sm: 9999,
+      md: 9999,
+      lg: 9999,
+      xl: 9999,
+      '2xl': 9999,
+      full: 9999,
+    };
+  }
+
+  // Scale from base value
+  return {
+    none: 0,
+    xs: Math.round(base * 0.25),   // 2 when base=8
+    sm: Math.round(base * 0.5),    // 4 when base=8
+    md: base,                       // 8 when base=8
+    lg: Math.round(base * 1.5),    // 12 when base=8
+    xl: Math.round(base * 2),      // 16 when base=8
+    '2xl': Math.round(base * 3),   // 24 when base=8
+    full: 9999,
+  };
+}
+
+/**
+ * Default radius tokens (md preset).
+ */
+export const radius = createRadius('md');
+
+/**
+ * Default radius preset.
+ */
+export const defaultRadiusPreset: RadiusPreset = 'md';
+
+// =============================================================================
+// Component Radius
+// =============================================================================
+
+/**
+ * Component-specific radius tokens structure.
+ */
+export interface ComponentRadiusTokens {
+  button: number;
+  buttonSm: number;
+  buttonLg: number;
+  input: number;
+  card: number;
+  badge: number;
+  avatar: number;
+  checkbox: number;
+  switch: number;
+  modal: number;
+  tooltip: number;
+}
+
+export type ComponentRadiusKey = keyof ComponentRadiusTokens;
+
+/**
+ * Pill radius constant - always fully rounded regardless of preset.
+ * Used for components that should always be pill-shaped (avatar, switch, badge).
+ */
+const PILL_RADIUS = 9999;
+
+/**
+ * Creates component-specific radius values from radius tokens.
+ *
+ * @param radiusTokens - Base radius tokens
+ * @returns Component-specific radius values
+ */
+export function createComponentRadius(radiusTokens: RadiusTokens): ComponentRadiusTokens {
+  return {
+    button: radiusTokens.md,
+    buttonSm: radiusTokens.sm,
+    buttonLg: radiusTokens.lg,
+    input: radiusTokens.md,
+    card: radiusTokens.lg,
+    // Always pill-shaped regardless of preset
+    badge: PILL_RADIUS,
+    avatar: PILL_RADIUS,
+    checkbox: radiusTokens.sm,
+    switch: PILL_RADIUS,
+    modal: radiusTokens.xl,
+    tooltip: radiusTokens.md,
+  };
+}
+
+/**
+ * Default component radius values.
+ */
+export const componentRadius = createComponentRadius(radius);

package/src/theme/shadows.ts

@@ -0,0 +1,166 @@
+/**
+ * Shadow Presets
+ *
+ * Consistent shadow tokens for depth and elevation.
+ * Platform-aware: iOS uses shadow properties, Android uses elevation.
+ *
+ * Inspired by iOS 17+ depth language and Linear App shadows.
+ */
+
+import { Platform, ViewStyle } from 'react-native';
+
+export interface ShadowStyle {
+  shadowColor: string;
+  shadowOffset: { width: number; height: number };
+  shadowOpacity: number;
+  shadowRadius: number;
+  elevation: number;
+}
+
+// Shadow presets for light mode
+const lightShadows = {
+  /** Subtle shadow for cards and surfaces */
+  sm: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+
+  /** Default shadow for buttons and interactive elements */
+  md: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+
+  /** Elevated shadow for modals and popovers */
+  lg: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+
+  /** Prominent shadow for floating elements */
+  xl: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 12,
+  },
+
+  /** Maximum shadow for overlays */
+  '2xl': {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.2,
+    shadowRadius: 24,
+    elevation: 16,
+  },
+
+  /** No shadow */
+  none: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+} as const;
+
+// Shadow presets for dark mode (more subtle)
+const darkShadows = {
+  sm: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+
+  md: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+
+  lg: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+
+  xl: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.5,
+    shadowRadius: 16,
+    elevation: 12,
+  },
+
+  '2xl': {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.6,
+    shadowRadius: 24,
+    elevation: 16,
+  },
+
+  none: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+} as const;
+
+export type ShadowSize = keyof typeof lightShadows;
+
+/**
+ * Get shadow styles for a given size and color scheme
+ */
+export function getShadow(size: ShadowSize, isDark: boolean = false): ShadowStyle {
+  const shadows = isDark ? darkShadows : lightShadows;
+  return shadows[size];
+}
+
+/**
+ * Get platform-optimized shadow style
+ * Returns only the relevant properties for the current platform
+ */
+export function getPlatformShadow(size: ShadowSize, isDark: boolean = false): ViewStyle {
+  const shadow = getShadow(size, isDark);
+
+  if (Platform.OS === 'ios') {
+    return {
+      shadowColor: shadow.shadowColor,
+      shadowOffset: shadow.shadowOffset,
+      shadowOpacity: shadow.shadowOpacity,
+      shadowRadius: shadow.shadowRadius,
+    };
+  }
+
+  if (Platform.OS === 'android') {
+    return {
+      elevation: shadow.elevation,
+    };
+  }
+
+  return shadow;
+}
+
+export const shadows = {
+  light: lightShadows,
+  dark: darkShadows,
+};

package/src/theme/spacing.ts

@@ -0,0 +1,41 @@
+/**
+ * Spacing Tokens
+ *
+ * Consistent spacing scale inspired by Tailwind CSS.
+ * All values in logical pixels.
+ *
+ * Usage:
+ * ```tsx
+ * const { spacing } = useTheme();
+ * <View style={{ padding: spacing[4], gap: spacing[2] }} />
+ * ```
+ */
+
+export const spacing = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+} as const;
+
+export type SpacingKey = keyof typeof spacing;
+export type SpacingValue = (typeof spacing)[SpacingKey];