@byldpartners/ui 0.0.1

package/src/theme/native.ts

@@ -0,0 +1,211 @@
+import { createContext, useContext, useState, useCallback, useEffect, createElement } from "react";
+import { Uniwind } from "uniwind";
+import type { ThemeTokens, ThemePreset } from "./theme.types";
+import { defaultPreset } from "./presets/default";
+import { darkPreset } from "./presets/dark";
+import { auroraPreset } from "./presets/aurora";
+
+// --- Rem to Number Conversion (for programmatic access) ---
+
+const BASE_FONT_SIZE = 16;
+
+export function remToNumber(value: string): number {
+  const match = value.match(/^([\d.]+)rem$/);
+  if (match) {
+    return parseFloat(match[1]) * BASE_FONT_SIZE;
+  }
+  const pxMatch = value.match(/^([\d.]+)px$/);
+  if (pxMatch) {
+    return parseFloat(pxMatch[1]);
+  }
+  return parseFloat(value) || 0;
+}
+
+// --- Native Theme Types (for programmatic access) ---
+
+export interface NativeThemeRadius {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  full: number;
+}
+
+export interface NativeThemeSpacing {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  "2xl": number;
+  "3xl": number;
+}
+
+export interface NativeTheme {
+  radius: NativeThemeRadius;
+  spacing: NativeThemeSpacing;
+  typography: {
+    fontFamily: string;
+    fontFamilyMono: string;
+  };
+}
+
+function tokensToNativeTheme(tokens: ThemeTokens): NativeTheme {
+  return {
+    radius: {
+      sm: remToNumber(tokens.radius.sm),
+      md: remToNumber(tokens.radius.md),
+      lg: remToNumber(tokens.radius.lg),
+      xl: remToNumber(tokens.radius.xl),
+      full: remToNumber(tokens.radius.full),
+    },
+    spacing: {
+      xs: remToNumber(tokens.spacing.xs),
+      sm: remToNumber(tokens.spacing.sm),
+      md: remToNumber(tokens.spacing.md),
+      lg: remToNumber(tokens.spacing.lg),
+      xl: remToNumber(tokens.spacing.xl),
+      "2xl": remToNumber(tokens.spacing["2xl"]),
+      "3xl": remToNumber(tokens.spacing["3xl"]),
+    },
+    typography: { ...tokens.typography },
+  };
+}
+
+/** Pre-computed numeric values for programmatic use (animations, charts, etc.) */
+export const themes = {
+  default: tokensToNativeTheme(defaultPreset.tokens),
+  dark: tokensToNativeTheme(darkPreset.tokens),
+  aurora: tokensToNativeTheme(auroraPreset.tokens),
+} as const;
+
+export function createNativeTheme(preset: ThemePreset): NativeTheme {
+  return tokensToNativeTheme(preset.tokens);
+}
+
+// --- ThemeProvider (mirrors web API) ---
+
+// Map preset names to uniwind base theme ("light" / "dark")
+// Custom themes beyond light/dark use updateCSSVariables to override colors at runtime
+const PRESET_TO_UNIWIND: Record<string, "dark" | "light"> = {
+  default: "light",
+  dark: "dark",
+  aurora: "dark",
+};
+
+// Build CSS variable record from a preset's tokens (for updateCSSVariables).
+// Colors are passed as strings (Uniwind's culori parses them to hex).
+// Radius/spacing are converted from rem strings to pixel numbers since
+// React Native style properties require numeric values.
+// Typography is passed as strings (font family names).
+function tokensToCssVars(tokens: ThemeTokens): Record<string, string | number> {
+  const vars: Record<string, string | number> = {};
+  for (const [key, value] of Object.entries(tokens.colors)) {
+    vars[`--color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`] = value;
+  }
+  for (const [key, value] of Object.entries(tokens.radius)) {
+    vars[`--radius-${key}`] = remToNumber(value);
+  }
+  for (const [key, value] of Object.entries(tokens.spacing)) {
+    vars[`--spacing-${key}`] = remToNumber(value);
+  }
+  vars["--font-family"] = tokens.typography.fontFamily;
+  vars["--font-family-mono"] = tokens.typography.fontFamilyMono;
+  if (tokens.shadow) {
+    for (const [key, value] of Object.entries(tokens.shadow)) {
+      vars[`--shadow-${key}`] = value;
+    }
+  }
+  return vars;
+}
+
+// Original CSS vars for each uniwind variant, used to restore after custom theme overrides
+const BASE_VARS: Record<string, Record<string, string | number>> = {
+  light: tokensToCssVars(defaultPreset.tokens),
+  dark: tokensToCssVars(darkPreset.tokens),
+};
+
+interface ThemeContextValue {
+  theme: string;
+  setTheme: (name: string) => void;
+  tokens: ThemeTokens;
+  glass: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: string;
+  presets?: ThemePreset[];
+  glass?: boolean;
+}
+
+export function useGlass(): boolean {
+  const ctx = useContext(ThemeContext);
+  return ctx?.glass ?? false;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  presets: customPresets,
+  glass = false,
+}: ThemeProviderProps) {
+  const presets = customPresets ?? [defaultPreset, darkPreset, auroraPreset];
+  const presetMap = new Map(presets.map((p) => [p.name, p]));
+
+  const [themeName, setThemeName] = useState(defaultTheme);
+  const currentPreset = presetMap.get(themeName) ?? presets[0];
+  const tokens = currentPreset.tokens;
+
+  // Switch uniwind to the active theme
+  // light/dark have CSS vars defined in global.css @variant blocks (generated by pnpm generate-theme)
+  // Custom themes (e.g. aurora) piggyback on a base variant then override colors via updateCSSVariables
+  useEffect(() => {
+    const uniwindTheme = PRESET_TO_UNIWIND[themeName] ?? "light";
+    Uniwind.setTheme(uniwindTheme);
+
+    if (themeName !== "default" && themeName !== "dark") {
+      // Custom theme: override the base variant's color CSS variables
+      const vars = tokensToCssVars(tokens);
+      Uniwind.updateCSSVariables(uniwindTheme, vars);
+    } else {
+      // Built-in theme: restore original CSS variables in case a custom theme mutated them
+      const original = BASE_VARS[uniwindTheme];
+      if (original) {
+        Uniwind.updateCSSVariables(uniwindTheme, original);
+      }
+    }
+  }, [themeName, tokens]);
+
+  const setTheme = useCallback(
+    (name: string) => {
+      if (presetMap.has(name)) {
+        setThemeName(name);
+      } else {
+        console.warn(
+          `Theme "${name}" not found. Available: ${Array.from(presetMap.keys()).join(", ")}`,
+        );
+      }
+    },
+    [presetMap],
+  );
+
+  return createElement(
+    ThemeContext.Provider,
+    { value: { theme: themeName, setTheme, tokens, glass } },
+    children,
+  );
+}
+
+export { defaultPreset, darkPreset, auroraPreset };
+export type { ThemePreset, ThemeTokens };

package/src/theme/presets/aurora.ts

@@ -0,0 +1,56 @@
+import type { ThemePreset } from "../theme.types";
+
+export const auroraPreset: ThemePreset = {
+  name: "aurora",
+  tokens: {
+    colors: {
+      background: "oklch(0.18 0.04 270)",
+      foreground: "oklch(0.93 0.01 250)",
+      card: "oklch(0.22 0.045 270)",
+      cardForeground: "oklch(0.93 0.01 250)",
+      popover: "oklch(0.22 0.045 270)",
+      popoverForeground: "oklch(0.93 0.01 250)",
+      primary: "oklch(0.75 0.15 190)",
+      primaryForeground: "oklch(0.15 0.04 270)",
+      secondary: "oklch(0.35 0.08 290)",
+      secondaryForeground: "oklch(0.90 0.03 290)",
+      muted: "oklch(0.28 0.04 270)",
+      mutedForeground: "oklch(0.65 0.04 260)",
+      accent: "oklch(0.30 0.05 270)",
+      accentForeground: "oklch(0.93 0.01 250)",
+      destructive: "oklch(0.65 0.22 15)",
+      destructiveForeground: "oklch(0.95 0.01 15)",
+      border: "oklch(0.26 0.035 270)",
+      input: "oklch(0.26 0.035 270)",
+      ring: "oklch(0.65 0.12 190)",
+    },
+    radius: {
+      sm: "0.5rem",
+      md: "0.75rem",
+      lg: "1rem",
+      xl: "1.5rem",
+      full: "9999px",
+    },
+    spacing: {
+      xs: "0.375rem",
+      sm: "0.75rem",
+      md: "1.25rem",
+      lg: "2rem",
+      xl: "2.5rem",
+      "2xl": "3.5rem",
+      "3xl": "5rem",
+    },
+    typography: {
+      fontFamily:
+        'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      fontFamilyMono:
+        'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+    },
+    shadow: {
+      sm: "0 1px 3px 0 oklch(0.55 0.12 190 / 0.3), 0 1px 2px -1px oklch(0.55 0.12 190 / 0.2)",
+      md: "0 4px 8px -1px oklch(0.55 0.12 190 / 0.35), 0 2px 4px -2px oklch(0.55 0.12 190 / 0.25)",
+      lg: "0 10px 20px -3px oklch(0.55 0.12 190 / 0.4), 0 4px 8px -4px oklch(0.55 0.12 190 / 0.3)",
+      xl: "0 20px 30px -5px oklch(0.55 0.12 190 / 0.45), 0 8px 12px -6px oklch(0.55 0.12 190 / 0.35)",
+    },
+  },
+};

package/src/theme/presets/dark.ts

@@ -0,0 +1,30 @@
+import type { ThemePreset } from "../theme.types";
+import { baseTokens } from "../tokens";
+
+export const darkPreset: ThemePreset = {
+  name: "dark",
+  tokens: {
+    ...baseTokens,
+    colors: {
+      background: "oklch(0.145 0 0)",
+      foreground: "oklch(0.985 0 0)",
+      card: "oklch(0.145 0 0)",
+      cardForeground: "oklch(0.985 0 0)",
+      popover: "oklch(0.145 0 0)",
+      popoverForeground: "oklch(0.985 0 0)",
+      primary: "oklch(0.985 0 0)",
+      primaryForeground: "oklch(0.205 0 0)",
+      secondary: "oklch(0.269 0 0)",
+      secondaryForeground: "oklch(0.985 0 0)",
+      muted: "oklch(0.269 0 0)",
+      mutedForeground: "oklch(0.708 0 0)",
+      accent: "oklch(0.269 0 0)",
+      accentForeground: "oklch(0.985 0 0)",
+      destructive: "oklch(0.396 0.141 25.723)",
+      destructiveForeground: "oklch(0.637 0.237 25.331)",
+      border: "oklch(0.269 0 0)",
+      input: "oklch(0.269 0 0)",
+      ring: "oklch(0.439 0 0)",
+    },
+  },
+};

package/src/theme/presets/default.ts

@@ -0,0 +1,30 @@
+import type { ThemePreset } from "../theme.types";
+import { baseTokens } from "../tokens";
+
+export const defaultPreset: ThemePreset = {
+  name: "default",
+  tokens: {
+    ...baseTokens,
+    colors: {
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.145 0 0)",
+      card: "oklch(1 0 0)",
+      cardForeground: "oklch(0.145 0 0)",
+      popover: "oklch(1 0 0)",
+      popoverForeground: "oklch(0.145 0 0)",
+      primary: "oklch(0.205 0 0)",
+      primaryForeground: "oklch(0.985 0 0)",
+      secondary: "oklch(0.965 0 0)",
+      secondaryForeground: "oklch(0.205 0 0)",
+      muted: "oklch(0.965 0 0)",
+      mutedForeground: "oklch(0.556 0 0)",
+      accent: "oklch(0.965 0 0)",
+      accentForeground: "oklch(0.205 0 0)",
+      destructive: "oklch(0.577 0.245 27.325)",
+      destructiveForeground: "oklch(0.985 0 0)",
+      border: "oklch(0.922 0 0)",
+      input: "oklch(0.922 0 0)",
+      ring: "oklch(0.708 0 0)",
+    },
+  },
+};

package/src/theme/theme.types.ts

@@ -0,0 +1,64 @@
+export interface ThemeColors {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+}
+
+export interface ThemeRadius {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  full: string;
+}
+
+export interface ThemeSpacing {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  "3xl": string;
+}
+
+export interface ThemeTypography {
+  fontFamily: string;
+  fontFamilyMono: string;
+}
+
+export interface ThemeShadow {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface ThemeTokens {
+  colors: ThemeColors;
+  radius: ThemeRadius;
+  spacing: ThemeSpacing;
+  typography: ThemeTypography;
+  shadow?: ThemeShadow;
+}
+
+export interface ThemePreset {
+  name: string;
+  tokens: ThemeTokens;
+}

package/src/theme/tokens.ts

@@ -0,0 +1,31 @@
+import type { ThemeTokens } from "./theme.types";
+
+/**
+ * Canonical theme token definitions.
+ * All values are CSS-compatible strings.
+ * Native side converts rem → numbers automatically.
+ */
+export const baseTokens: Omit<ThemeTokens, "colors"> = {
+  radius: {
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    full: "9999px",
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem",
+  },
+  typography: {
+    fontFamily:
+      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontFamilyMono:
+      'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  },
+};

package/src/theme/web.ts

@@ -0,0 +1,123 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, createElement } from "react";
+import type { ThemePreset, ThemeTokens, ThemeColors, ThemeRadius, ThemeSpacing, ThemeShadow } from "./theme.types";
+import { defaultPreset } from "./presets/default";
+import { darkPreset } from "./presets/dark";
+import { auroraPreset } from "./presets/aurora";
+
+// --- CSS Variable Generation ---
+
+function colorToCssVar(key: string): string {
+  // camelCase → kebab-case
+  return `--color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+}
+
+function radiusToCssVar(key: string): string {
+  return `--radius-${key}`;
+}
+
+function spacingToCssVar(key: string): string {
+  return `--spacing-${key}`;
+}
+
+function generateCssVars(tokens: ThemeTokens): Record<string, string> {
+  const vars: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(tokens.colors)) {
+    vars[colorToCssVar(key)] = value;
+  }
+  for (const [key, value] of Object.entries(tokens.radius)) {
+    vars[radiusToCssVar(key)] = value;
+  }
+  for (const [key, value] of Object.entries(tokens.spacing)) {
+    vars[spacingToCssVar(key)] = value;
+  }
+  vars["--font-family"] = tokens.typography.fontFamily;
+  vars["--font-family-mono"] = tokens.typography.fontFamilyMono;
+
+  if (tokens.shadow) {
+    for (const [key, value] of Object.entries(tokens.shadow)) {
+      vars[`--shadow-${key}`] = value;
+    }
+  }
+
+  return vars;
+}
+
+// Shadow CSS var keys that may have been set by a previous theme and need clearing
+const SHADOW_KEYS = ["--shadow-sm", "--shadow-md", "--shadow-lg", "--shadow-xl"];
+
+function applyCssVars(vars: Record<string, string>, element: HTMLElement = document.documentElement) {
+  // Clear shadow overrides that may have been set by a previous theme
+  for (const key of SHADOW_KEYS) {
+    if (!(key in vars)) {
+      element.style.removeProperty(key);
+    }
+  }
+  for (const [key, value] of Object.entries(vars)) {
+    element.style.setProperty(key, value);
+  }
+}
+
+// --- Theme Context ---
+
+interface ThemeContextValue {
+  theme: string;
+  setTheme: (name: string) => void;
+  tokens: ThemeTokens;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
+}
+
+// --- ThemeProvider ---
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: string;
+  presets?: ThemePreset[];
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  presets: customPresets,
+}: ThemeProviderProps) {
+  const presets = customPresets ?? [defaultPreset, darkPreset, auroraPreset];
+  const presetMap = new Map(presets.map((p) => [p.name, p]));
+
+  const [themeName, setThemeName] = useState(defaultTheme);
+
+  const currentPreset = presetMap.get(themeName) ?? presets[0];
+  const tokens = currentPreset.tokens;
+
+  useEffect(() => {
+    const vars = generateCssVars(tokens);
+    applyCssVars(vars);
+  }, [tokens]);
+
+  const setTheme = (name: string) => {
+    if (presetMap.has(name)) {
+      setThemeName(name);
+    } else {
+      console.warn(`Theme "${name}" not found. Available: ${Array.from(presetMap.keys()).join(", ")}`);
+    }
+  };
+
+  return createElement(
+    ThemeContext.Provider,
+    { value: { theme: themeName, setTheme, tokens } },
+    children,
+  );
+}
+
+export { defaultPreset, darkPreset, auroraPreset };
+export type { ThemePreset, ThemeTokens, ThemeColors, ThemeRadius, ThemeSpacing, ThemeShadow };

package/src/uniwind.d.ts

@@ -0,0 +1,38 @@
+// Type augmentation for uniwind — adds className prop to all React Native components
+import "react-native";
+
+declare module "react-native" {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface FlatListProps<T> {
+    className?: string;
+  }
+  interface SectionListProps<T> {
+    className?: string;
+  }
+  interface ModalProps {
+    className?: string;
+  }
+  interface SwitchProps {
+    className?: string;
+  }
+}

package/src/utils/cn.native.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx";
+
+/**
+ * Merge class names for React Native (via uniwind).
+ * Same API as the web cn() — just clsx without tailwind-merge
+ * since uniwind handles deduplication at build time.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}

package/src/utils/cn.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { cn } from "./cn";
+
+describe("cn", () => {
+  it("merges class names", () => {
+    expect(cn("foo", "bar")).toBe("foo bar");
+  });
+
+  it("handles conditional classes", () => {
+    expect(cn("foo", false && "bar", "baz")).toBe("foo baz");
+  });
+
+  it("deduplicates tailwind classes", () => {
+    expect(cn("px-2", "px-4")).toBe("px-4");
+  });
+
+  it("handles undefined and null", () => {
+    expect(cn("foo", undefined, null, "bar")).toBe("foo bar");
+  });
+
+  it("handles empty input", () => {
+    expect(cn()).toBe("");
+  });
+
+  it("merges conflicting tailwind utilities", () => {
+    expect(cn("text-red-500", "text-blue-500")).toBe("text-blue-500");
+  });
+});

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/glass.native.ts

@@ -0,0 +1,22 @@
+import { Platform } from "react-native";
+
+export const GLASS_TEXT_DEFAULT = "text-foreground";
+
+export interface GlassProps {
+  glass?: boolean;
+  glassEffect?: "regular" | "clear";
+  /** Tailwind text color class applied to text when glass is active. */
+  glassTextColor?: string;
+}
+
+let _isGlassSupported = false;
+if (Platform.OS === "ios" && parseInt(String(Platform.Version), 10) >= 26) {
+  try {
+    const { isGlassEffectAPIAvailable } = require("expo-glass-effect");
+    _isGlassSupported = isGlassEffectAPIAvailable();
+  } catch {
+    _isGlassSupported = false;
+  }
+}
+
+export const isGlassSupported = _isGlassSupported;