reactnatively-theme 0.1.0

package/dist/index.mjs

@@ -0,0 +1,686 @@
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { useColorScheme as useColorScheme$1 } from 'react-native';
+import { deepMerge } from 'reactnatively-utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ThemeProvider.tsx
+
+// src/tokens/colors.ts
+var palette = {
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  indigo: {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81",
+    950: "#1e1b4b"
+  },
+  violet: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  },
+  cyan: {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+    800: "#155e75",
+    900: "#164e63",
+    950: "#083344"
+  },
+  emerald: {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b",
+    950: "#022c22"
+  },
+  amber: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  rose: {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337",
+    950: "#4c0519"
+  },
+  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",
+    1e3: "#000000"
+  },
+  // Liquid Glass — raw RGBA primitives for glass layers
+  glass: {
+    white5: "rgba(255,255,255,0.05)",
+    white8: "rgba(255,255,255,0.08)",
+    white10: "rgba(255,255,255,0.10)",
+    white15: "rgba(255,255,255,0.15)",
+    white20: "rgba(255,255,255,0.20)",
+    white25: "rgba(255,255,255,0.25)",
+    white30: "rgba(255,255,255,0.30)",
+    white40: "rgba(255,255,255,0.40)",
+    white50: "rgba(255,255,255,0.50)",
+    white60: "rgba(255,255,255,0.60)",
+    white72: "rgba(255,255,255,0.72)",
+    white85: "rgba(255,255,255,0.85)",
+    black5: "rgba(0,0,0,0.05)",
+    black8: "rgba(0,0,0,0.08)",
+    black10: "rgba(0,0,0,0.10)",
+    black15: "rgba(0,0,0,0.15)",
+    black20: "rgba(0,0,0,0.20)",
+    black30: "rgba(0,0,0,0.30)",
+    black40: "rgba(0,0,0,0.40)",
+    black50: "rgba(0,0,0,0.50)",
+    black60: "rgba(0,0,0,0.60)",
+    black72: "rgba(0,0,0,0.72)",
+    black85: "rgba(0,0,0,0.85)"
+  }
+};
+
+// src/tokens/glass.ts
+var glassTokens = {
+  // Blur intensity scale — maps to expo-blur `intensity` (0-100)
+  blur: {
+    none: 0,
+    hairline: 4,
+    subtle: 10,
+    light: 20,
+    medium: 35,
+    heavy: 55,
+    intense: 72,
+    extreme: 90
+  },
+  // Tint: semi-transparent color applied over the blur layer
+  tint: {
+    light: {
+      ultraThin: "rgba(255,255,255,0.45)",
+      thin: "rgba(255,255,255,0.60)",
+      surface: "rgba(255,255,255,0.72)",
+      elevated: "rgba(255,255,255,0.82)",
+      overlay: "rgba(255,255,255,0.92)",
+      frosted: "rgba(240,242,250,0.68)",
+      tinted: "rgba(59,130,246,0.12)"
+    },
+    dark: {
+      ultraThin: "rgba(20,20,30,0.45)",
+      thin: "rgba(20,20,30,0.58)",
+      surface: "rgba(25,25,38,0.72)",
+      elevated: "rgba(30,30,48,0.80)",
+      overlay: "rgba(15,15,25,0.88)",
+      frosted: "rgba(22,24,40,0.70)",
+      tinted: "rgba(99,102,241,0.15)"
+    }
+  },
+  // Elevation: the glass depth system (0 = flat, 5 = floating modal)
+  // Each level defines the complete glass rendering recipe
+  elevation: {
+    0: {
+      blur: 0,
+      tintOpacity: 0.95,
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      shadowY: 0
+    },
+    1: {
+      blur: 12,
+      tintOpacity: 0.82,
+      shadowOpacity: 0.06,
+      shadowRadius: 8,
+      shadowY: 2
+    },
+    2: {
+      blur: 24,
+      tintOpacity: 0.72,
+      shadowOpacity: 0.12,
+      shadowRadius: 16,
+      shadowY: 4
+    },
+    3: {
+      blur: 40,
+      tintOpacity: 0.65,
+      shadowOpacity: 0.18,
+      shadowRadius: 24,
+      shadowY: 8
+    },
+    4: {
+      blur: 55,
+      tintOpacity: 0.55,
+      shadowOpacity: 0.24,
+      shadowRadius: 36,
+      shadowY: 12
+    },
+    5: {
+      blur: 72,
+      tintOpacity: 0.45,
+      shadowOpacity: 0.32,
+      shadowRadius: 48,
+      shadowY: 20
+    }
+  },
+  // Highlight: top-edge shimmer — creates the "wet glass" refraction
+  highlight: {
+    none: "transparent",
+    subtle: "rgba(255,255,255,0.20)",
+    medium: "rgba(255,255,255,0.38)",
+    strong: "rgba(255,255,255,0.55)",
+    intense: "rgba(255,255,255,0.72)"
+  },
+  // Highlight gradient: gradient from highlight to transparent (vertical)
+  highlightGradientEnd: "transparent",
+  // Border: glass edge line — makes glass surfaces feel distinct
+  border: {
+    light: {
+      subtle: "rgba(255,255,255,0.20)",
+      medium: "rgba(255,255,255,0.32)",
+      strong: "rgba(255,255,255,0.50)"
+    },
+    dark: {
+      subtle: "rgba(255,255,255,0.08)",
+      medium: "rgba(255,255,255,0.14)",
+      strong: "rgba(255,255,255,0.22)"
+    }
+  },
+  // Glow: ambient glow emitted from glass surfaces
+  glow: {
+    primary: { color: "#6366f1", radius: 24, opacity: 0.35 },
+    blue: { color: "#3b82f6", radius: 24, opacity: 0.35 },
+    cyan: { color: "#06b6d4", radius: 20, opacity: 0.4 },
+    rose: { color: "#f43f5e", radius: 20, opacity: 0.35 },
+    success: { color: "#10b981", radius: 20, opacity: 0.3 },
+    warning: { color: "#f59e0b", radius: 20, opacity: 0.3 }
+  },
+  // Vibrancy mode — controls how aggressively colors pop through glass
+  vibrancy: {
+    none: { saturation: 1, brightness: 1 },
+    subtle: { saturation: 1.1, brightness: 1.02 },
+    medium: { saturation: 1.2, brightness: 1.04 },
+    vivid: { saturation: 1.4, brightness: 1.06 }
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  0: 0,
+  px: 1,
+  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,
+  36: 144,
+  40: 160,
+  48: 192,
+  56: 224,
+  64: 256
+};
+
+// src/tokens/radii.ts
+var radii = {
+  none: 0,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  "2xl": 20,
+  "3xl": 24,
+  "4xl": 32,
+  full: 9999
+};
+
+// src/tokens/typography.ts
+var fontFamily = {
+  sans: "System",
+  mono: "Courier"
+  // Override with custom fonts via ThemeProvider:
+  // fontFamily: { sans: 'Inter_400Regular', ... }
+};
+var fontSize = {
+  "2xs": 10,
+  xs: 12,
+  sm: 13,
+  base: 15,
+  md: 15,
+  lg: 17,
+  xl: 19,
+  "2xl": 22,
+  "3xl": 26,
+  "4xl": 32,
+  "5xl": 40,
+  "6xl": 52,
+  "7xl": 64
+};
+var lineHeight = {
+  none: 1,
+  tight: 1.2,
+  snug: 1.35,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2
+};
+var fontWeight = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var letterSpacing = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6
+};
+var typography = {
+  fontFamily,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  letterSpacing
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  none: {
+    ios: {
+      shadowColor: "transparent",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0
+    },
+    android: { elevation: 0 }
+  },
+  xs: {
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2
+    },
+    android: { elevation: 1 }
+  },
+  sm: {
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 4
+    },
+    android: { elevation: 2 }
+  },
+  md: {
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.12,
+      shadowRadius: 8
+    },
+    android: { elevation: 4 }
+  },
+  lg: {
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.15,
+      shadowRadius: 16
+    },
+    android: { elevation: 8 }
+  },
+  xl: {
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 12 },
+      shadowOpacity: 0.18,
+      shadowRadius: 24
+    },
+    android: { elevation: 12 }
+  },
+  "2xl": {
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 20 },
+      shadowOpacity: 0.22,
+      shadowRadius: 40
+    },
+    android: { elevation: 20 }
+  },
+  // Glass-specific: colored shadows for glowing surfaces
+  glassGlow: {
+    ios: {
+      shadowColor: "#6366f1",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.4,
+      shadowRadius: 24
+    },
+    android: { elevation: 12 }
+  }
+};
+
+// src/tokens/motion.ts
+var duration = {
+  instant: 50,
+  fast: 120,
+  normal: 220,
+  slow: 380,
+  verySlow: 550,
+  // Glass-specific: blur fades need slightly longer to feel smooth
+  blurIn: 280,
+  blurOut: 180,
+  // Entrance animations
+  enter: 300,
+  exit: 200
+  // Spring-based don't use duration — see springs below
+};
+var easing = {
+  // Cubic bezier definitions for Reanimated's `withTiming`
+  // Use `Easing.bezier(x1, y1, x2, y2)` in Reanimated code
+  standard: [0.4, 0, 0.2, 1],
+  // most transitions
+  decelerate: [0, 0, 0.2, 1],
+  // elements entering viewport
+  accelerate: [0.4, 0, 1, 1],
+  // elements leaving viewport
+  sharp: [0.4, 0, 0.6, 1]
+  // quick attention-grabbing
+};
+var springs = {
+  // iOS-style: fast, confident, no overshoot
+  snappy: {
+    damping: 22,
+    stiffness: 420,
+    mass: 0.8,
+    overshootClamping: false
+  },
+  // The liquid glass spring: physical, fluid, slight wobble
+  liquid: {
+    damping: 15,
+    stiffness: 280,
+    mass: 1,
+    overshootClamping: false
+  },
+  // Reveal: for blurs fading in, dialogs mounting
+  reveal: {
+    damping: 30,
+    stiffness: 200,
+    mass: 1.2,
+    overshootClamping: false
+  },
+  // Bounce: FAB, badges, notification pops
+  bounce: {
+    damping: 8,
+    stiffness: 340,
+    mass: 0.7,
+    overshootClamping: false
+  },
+  // Precise: sliders, progress — no overshoot
+  precise: {
+    damping: 40,
+    stiffness: 300,
+    mass: 1,
+    overshootClamping: true
+  }
+};
+var reducedMotion = {
+  duration: {
+    instant: 0,
+    fast: 0,
+    normal: 50,
+    slow: 80,
+    verySlow: 100,
+    blurIn: 80,
+    blurOut: 60,
+    enter: 80,
+    exit: 60
+  },
+  springs: {
+    snappy: { damping: 40, stiffness: 400, mass: 1 },
+    liquid: { damping: 40, stiffness: 400, mass: 1 },
+    reveal: { damping: 40, stiffness: 400, mass: 1 },
+    bounce: { damping: 40, stiffness: 400, mass: 1 },
+    precise: { damping: 40, stiffness: 400, mass: 1 }
+  }
+};
+var motion = { duration, easing, springs, reducedMotion };
+
+// src/themes/base.ts
+var lightColors = {
+  primary: palette.indigo[500],
+  primaryHover: palette.indigo[600],
+  primaryFocused: palette.indigo[400],
+  primarySubtle: palette.indigo[50],
+  primaryMuted: "rgba(99,102,241,0.12)",
+  secondary: palette.violet[500],
+  secondaryHover: palette.violet[600],
+  secondarySubtle: palette.violet[50],
+  success: palette.emerald[500],
+  successSubtle: palette.emerald[50],
+  successText: palette.emerald[700],
+  warning: palette.amber[500],
+  warningSubtle: palette.amber[50],
+  warningText: palette.amber[700],
+  error: palette.rose[500],
+  errorHover: palette.rose[600],
+  errorSubtle: palette.rose[50],
+  errorText: palette.rose[700],
+  info: palette.cyan[500],
+  infoSubtle: palette.cyan[50],
+  infoText: palette.cyan[700],
+  background: palette.neutral[50],
+  backgroundDeep: palette.neutral[100],
+  surface: palette.neutral[0],
+  surfaceRaised: palette.neutral[0],
+  surfaceOverlay: palette.neutral[0],
+  text: palette.neutral[900],
+  textSecondary: palette.neutral[600],
+  textMuted: palette.neutral[400],
+  textDisabled: palette.neutral[300],
+  textInverted: palette.neutral[0],
+  border: palette.neutral[200],
+  borderSubtle: palette.neutral[100],
+  borderStrong: palette.neutral[300],
+  neutral: palette.neutral[600],
+  neutralSubtle: palette.neutral[100]
+};
+var baseTheme = {
+  colors: lightColors,
+  glass: glassTokens,
+  spacing,
+  radii,
+  typography,
+  shadows,
+  motion
+};
+
+// src/themes/dark.ts
+var darkColors = {
+  primary: palette.indigo[400],
+  primaryHover: palette.indigo[300],
+  primaryFocused: palette.indigo[500],
+  primarySubtle: "rgba(99,102,241,0.15)",
+  primaryMuted: "rgba(99,102,241,0.10)",
+  secondary: palette.violet[400],
+  secondaryHover: palette.violet[300],
+  secondarySubtle: "rgba(139,92,246,0.15)",
+  success: palette.emerald[400],
+  successSubtle: "rgba(16,185,129,0.15)",
+  successText: palette.emerald[300],
+  warning: palette.amber[400],
+  warningSubtle: "rgba(245,158,11,0.15)",
+  warningText: palette.amber[300],
+  error: palette.rose[400],
+  errorHover: palette.rose[300],
+  errorSubtle: "rgba(244,63,94,0.15)",
+  errorText: palette.rose[300],
+  info: palette.cyan[400],
+  infoSubtle: "rgba(6,182,212,0.15)",
+  infoText: palette.cyan[300],
+  background: "#0c0c14",
+  backgroundDeep: "#08080f",
+  surface: "#13131f",
+  surfaceRaised: "#1a1a2e",
+  surfaceOverlay: "rgba(13,13,25,0.95)",
+  text: palette.neutral[50],
+  textSecondary: palette.neutral[300],
+  textMuted: palette.neutral[500],
+  textDisabled: palette.neutral[700],
+  textInverted: palette.neutral[900],
+  border: palette.neutral[800],
+  borderSubtle: palette.neutral[900],
+  borderStrong: palette.neutral[700],
+  neutral: palette.neutral[400],
+  neutralSubtle: "rgba(255,255,255,0.06)"
+};
+var ThemeContext = createContext(null);
+function ThemeProvider({
+  theme: themeOverrides,
+  colorScheme: initialPreference = "system",
+  children
+}) {
+  const systemColorScheme = useColorScheme$1() === "dark" ? "dark" : "light";
+  const [preference, setPreference] = useState(initialPreference);
+  const resolvedScheme = preference === "system" ? systemColorScheme : preference;
+  const setColorScheme = useCallback((scheme) => {
+    setPreference(scheme);
+  }, []);
+  const resolvedTheme = useMemo(() => {
+    let result = { ...baseTheme };
+    if (resolvedScheme === "dark") {
+      result = { ...result, colors: darkColors };
+    }
+    if (themeOverrides) {
+      result = deepMerge(
+        result,
+        themeOverrides
+      );
+    }
+    return result;
+  }, [themeOverrides, resolvedScheme]);
+  const value = useMemo(
+    () => ({
+      theme: resolvedTheme,
+      colorScheme: resolvedScheme,
+      colorSchemePreference: preference,
+      setColorScheme,
+      isDark: resolvedScheme === "dark",
+      isLight: resolvedScheme === "light"
+    }),
+    [resolvedTheme, resolvedScheme, preference, setColorScheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "[Reactnatively] useTheme must be called within a <ThemeProvider>. Wrap your app root with <ThemeProvider>."
+    );
+  }
+  return ctx;
+}
+function useColorScheme() {
+  return useTheme().colorScheme;
+}
+function useIsDark() {
+  return useTheme().isDark;
+}
+function useToken(key) {
+  const { theme } = useTheme();
+  return theme[key];
+}
+function createTheme(overrides) {
+  return deepMerge(
+    baseTheme,
+    overrides
+  );
+}
+
+export { ThemeProvider, baseTheme, createTheme, duration, easing, fontFamily, fontSize, fontWeight, glassTokens, letterSpacing, lineHeight, motion, palette, radii, reducedMotion, shadows, spacing, springs, typography, useColorScheme, useIsDark, useTheme, useToken };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map