@sublime-ui/library 0.1.0

package/src/notifications/NotificationHost.native.tsx

@@ -0,0 +1,20 @@
+import { Snackbar } from 'react-native-paper';
+import { useNotificationQueue } from './NotificationContext.js';
+
+export function NotificationHost() {
+  const { queue, dismiss } = useNotificationQueue();
+  const current = queue[0];
+  if (!current) return null;
+  return (
+    <Snackbar
+      visible
+      onDismiss={() => dismiss(current.id)}
+      duration={current.duration}
+      {...(current.action
+        ? { action: { label: current.action.label, onPress: current.action.onPress } }
+        : {})}
+    >
+      {current.message}
+    </Snackbar>
+  );
+}

package/src/notifications/NotificationHost.tsx

@@ -0,0 +1,27 @@
+import { Snackbar, Alert } from '@mui/material';
+import { useNotificationQueue, type Tone } from './NotificationContext.js';
+
+const severityOf = (tone: Tone): 'success' | 'error' | 'warning' | 'info' =>
+  tone === 'neutral' ? 'info' : tone;
+
+export function NotificationHost() {
+  const { queue, dismiss } = useNotificationQueue();
+  return (
+    <>
+      {queue.map((n, i) => (
+        <Snackbar
+          key={n.id}
+          open
+          autoHideDuration={n.duration}
+          onClose={() => dismiss(n.id)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          style={{ bottom: 16 + i * 64 }}
+        >
+          <Alert severity={severityOf(n.tone)} onClose={() => dismiss(n.id)} variant="filled">
+            {n.message}
+          </Alert>
+        </Snackbar>
+      ))}
+    </>
+  );
+}

package/src/notifications/useNotify.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useNotificationQueue, type NotifyOptions, type Tone } from './NotificationContext.js';
+
+export function useNotify() {
+  const { notify, dismiss } = useNotificationQueue();
+  return useMemo(() => {
+    const toned = (tone: Tone) => (message: string, opts?: NotifyOptions) =>
+      notify(message, { ...opts, tone });
+    return {
+      notify,
+      dismiss,
+      success: toned('success'),
+      error: toned('error'),
+      warning: toned('warning'),
+      info: toned('info'),
+    };
+  }, [notify, dismiss]);
+}

package/src/provider/SublimeProvider.native.tsx

@@ -0,0 +1,29 @@
+import { type ReactNode, useMemo } from 'react';
+import { PaperProvider } from 'react-native-paper';
+import { generateThemes } from '../tokens/generateThemes.js';
+import { defaultTokens, type SublimeTokens } from '../tokens/tokens.js';
+import { TokenContext } from './TokenContext.js';
+import { resolveTokens } from './resolveTokens.js';
+import { NotificationProvider } from '../notifications/NotificationContext.js';
+import { NotificationHost } from '../notifications/NotificationHost.native.js';
+
+export interface SublimeProviderProps {
+  mode?: 'light' | 'dark';
+  tokens?: SublimeTokens;
+  children: ReactNode;
+}
+
+export function SublimeProvider({ mode = 'light', tokens = defaultTokens, children }: SublimeProviderProps) {
+  const { paperTheme } = useMemo(() => generateThemes(tokens, mode), [tokens, mode]);
+  const resolved = useMemo(() => resolveTokens(tokens, mode), [tokens, mode]);
+  return (
+    <PaperProvider theme={paperTheme}>
+      <TokenContext.Provider value={resolved}>
+        <NotificationProvider>
+          {children}
+          <NotificationHost />
+        </NotificationProvider>
+      </TokenContext.Provider>
+    </PaperProvider>
+  );
+}

package/src/provider/SublimeProvider.tsx

@@ -0,0 +1,30 @@
+import { type ReactNode, useMemo } from 'react';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { generateThemes } from '../tokens/generateThemes.js';
+import { defaultTokens, type SublimeTokens } from '../tokens/tokens.js';
+import { TokenContext } from './TokenContext.js';
+import { resolveTokens } from './resolveTokens.js';
+import { NotificationProvider } from '../notifications/NotificationContext.js';
+import { NotificationHost } from '../notifications/NotificationHost.js';
+
+export interface SublimeProviderProps {
+  mode?: 'light' | 'dark';
+  tokens?: SublimeTokens;
+  children: ReactNode;
+}
+
+export function SublimeProvider({ mode = 'light', tokens = defaultTokens, children }: SublimeProviderProps) {
+  const { muiTheme } = useMemo(() => generateThemes(tokens, mode), [tokens, mode]);
+  const resolved = useMemo(() => resolveTokens(tokens, mode), [tokens, mode]);
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      <TokenContext.Provider value={resolved}>
+        <NotificationProvider>
+          {children}
+          <NotificationHost />
+        </NotificationProvider>
+      </TokenContext.Provider>
+    </ThemeProvider>
+  );
+}

package/src/provider/TokenContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { ColorTokens, SublimeTokens } from '../tokens/tokens.js';
+
+export interface ResolvedTokens {
+  color: ColorTokens;
+  radii: SublimeTokens['radii'];
+  shadows: SublimeTokens['shadows'];
+  spacing: SublimeTokens['spacing'];
+  typography: SublimeTokens['typography'];
+  mode: 'light' | 'dark';
+}
+
+export const TokenContext = createContext<ResolvedTokens | null>(null);

package/src/provider/resolveTokens.ts

@@ -0,0 +1,16 @@
+import type { SublimeTokens } from '../tokens/tokens.js';
+import type { ResolvedTokens } from './TokenContext.js';
+
+export function resolveTokens(
+  tokens: SublimeTokens,
+  mode: 'light' | 'dark',
+): ResolvedTokens {
+  return {
+    color: tokens.color[mode],
+    radii: tokens.radii,
+    shadows: tokens.shadows,
+    spacing: tokens.spacing,
+    typography: tokens.typography,
+    mode,
+  };
+}

package/src/provider/useTokens.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { TokenContext, type ResolvedTokens } from './TokenContext.js';
+
+export function useTokens(): ResolvedTokens {
+  const tokens = useContext(TokenContext);
+  if (tokens === null) {
+    throw new Error('useTokens must be used within a <SublimeProvider>.');
+  }
+  return tokens;
+}

package/src/test-utils/renderWeb.tsx

@@ -0,0 +1,8 @@
+import { createElement, type ReactElement } from 'react';
+import { render, type RenderResult } from '@testing-library/react';
+import { SublimeProvider } from '../provider/SublimeProvider.js';
+
+/** Renders a web component tree inside SublimeProvider (light mode). */
+export function renderWeb(ui: ReactElement): RenderResult {
+  return render(createElement(SublimeProvider, { mode: 'light', children: ui }));
+}

package/src/tokens/generateThemes.ts

@@ -0,0 +1,49 @@
+import { MD3LightTheme, MD3DarkTheme, type MD3Theme } from 'react-native-paper';
+import { createTheme, type Theme } from '@mui/material';
+import type { SublimeTokens } from './tokens.js';
+
+export function generateThemes(
+  tokens: SublimeTokens,
+  mode: 'light' | 'dark',
+): { paperTheme: MD3Theme; muiTheme: Theme } {
+  const c = tokens.color[mode];
+  const base = mode === 'dark' ? MD3DarkTheme : MD3LightTheme;
+
+  const paperTheme: MD3Theme = {
+    ...base,
+    roundness: tokens.radii.md,
+    colors: {
+      ...base.colors,
+      primary: c.primary,
+      onPrimary: c.primaryFg,
+      secondary: c.secondary,
+      onSecondary: c.secondaryFg,
+      error: c.danger,
+      background: c.background,
+      onBackground: c.foreground,
+      surface: c.surface,
+      onSurface: c.foreground,
+      outline: c.surfaceBorder,
+      outlineVariant: c.divider,
+    },
+  };
+
+  const muiTheme = createTheme({
+    palette: {
+      mode,
+      primary: { main: c.primary, contrastText: c.primaryFg },
+      secondary: { main: c.secondary, contrastText: c.secondaryFg },
+      success: { main: c.success },
+      warning: { main: c.warning },
+      error: { main: c.danger },
+      info: { main: c.info },
+      background: { default: c.background, paper: c.surface },
+      text: { primary: c.foreground, secondary: c.mutedFg },
+      divider: c.divider,
+    },
+    shape: { borderRadius: tokens.radii.md },
+    typography: { fontFamily: tokens.typography.family },
+  });
+
+  return { paperTheme, muiTheme };
+}

package/src/tokens/tokens.ts

@@ -0,0 +1,71 @@
+export interface ColorTokens {
+  primary: string; primaryFg: string;
+  secondary: string; secondaryFg: string;
+  success: string; warning: string; danger: string; info: string;
+  background: string; foreground: string; mutedFg: string;
+  surface: string; surfaceBorder: string; surfaceHover: string;
+  glassBg: string; glassBorder: string; divider: string; ring: string;
+  primarySoftBg: string; primarySoftFg: string;
+  successSoftBg: string; successSoftFg: string;
+  warningSoftBg: string; warningSoftFg: string;
+  dangerSoftBg: string; dangerSoftFg: string;
+  infoSoftBg: string; infoSoftFg: string;
+}
+
+export interface SublimeTokens {
+  color: { light: ColorTokens; dark: ColorTokens };
+  radii: { sm: number; md: number; lg: number; full: number };
+  shadows: { sm: string; md: string; lg: string };
+  spacing: { xs: number; sm: number; md: number; lg: number; xl: number };
+  typography: {
+    family: string;
+    sizes: { xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number };
+    weights: { regular: number; medium: number; semibold: number; bold: number };
+  };
+}
+
+const light: ColorTokens = {
+  primary: 'rgb(37,99,235)', primaryFg: 'rgb(255,255,255)',
+  secondary: 'rgb(100,116,139)', secondaryFg: 'rgb(255,255,255)',
+  success: 'rgb(22,163,74)', warning: 'rgb(217,119,6)', danger: 'rgb(220,38,38)', info: 'rgb(2,132,199)',
+  background: 'rgb(247,250,255)', foreground: 'rgb(15,23,42)', mutedFg: 'rgba(71,85,105,0.85)',
+  surface: 'rgba(243,248,255,0.90)', surfaceBorder: 'rgba(15,23,42,0.08)', surfaceHover: 'rgba(59,130,246,0.06)',
+  glassBg: 'rgba(236,244,255,0.60)', glassBorder: 'rgba(15,23,42,0.08)', divider: 'rgba(15,23,42,0.06)',
+  ring: 'rgba(59,130,246,0.45)',
+  primarySoftBg: 'rgba(59,130,246,0.08)', primarySoftFg: 'rgb(29,78,216)',
+  successSoftBg: 'rgba(34,197,94,0.10)', successSoftFg: 'rgb(21,128,61)',
+  warningSoftBg: 'rgba(245,158,11,0.12)', warningSoftFg: 'rgb(180,83,9)',
+  dangerSoftBg: 'rgba(244,63,94,0.08)', dangerSoftFg: 'rgb(190,18,60)',
+  infoSoftBg: 'rgba(14,165,233,0.10)', infoSoftFg: 'rgb(3,105,161)',
+};
+
+const dark: ColorTokens = {
+  primary: 'rgb(96,165,250)', primaryFg: 'rgb(8,12,20)',
+  secondary: 'rgb(148,163,184)', secondaryFg: 'rgb(8,12,20)',
+  success: 'rgb(74,222,128)', warning: 'rgb(251,191,36)', danger: 'rgb(251,113,133)', info: 'rgb(56,189,248)',
+  background: 'rgb(8,12,20)', foreground: 'rgb(245,247,251)', mutedFg: 'rgba(229,231,235,0.65)',
+  surface: 'rgba(96,165,250,0.06)', surfaceBorder: 'rgba(255,255,255,0.08)', surfaceHover: 'rgba(255,255,255,0.06)',
+  glassBg: 'rgba(96,165,250,0.05)', glassBorder: 'rgba(255,255,255,0.08)', divider: 'rgba(255,255,255,0.06)',
+  ring: 'rgba(96,165,250,0.55)',
+  primarySoftBg: 'rgba(59,130,246,0.12)', primarySoftFg: 'rgb(147,197,253)',
+  successSoftBg: 'rgba(34,197,94,0.16)', successSoftFg: 'rgb(134,239,172)',
+  warningSoftBg: 'rgba(245,158,11,0.18)', warningSoftFg: 'rgb(253,224,71)',
+  dangerSoftBg: 'rgba(244,63,94,0.18)', dangerSoftFg: 'rgb(253,164,175)',
+  infoSoftBg: 'rgba(14,165,233,0.16)', infoSoftFg: 'rgb(125,211,252)',
+};
+
+export const defaultTokens: SublimeTokens = {
+  color: { light, dark },
+  radii: { sm: 8, md: 12, lg: 16, full: 999 },
+  shadows: {
+    sm: '0 1px 2px rgba(15,23,42,0.06)',
+    md: '0 4px 12px rgba(15,23,42,0.10)',
+    lg: '0 12px 32px rgba(15,23,42,0.16)',
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  typography: {
+    family: 'Inter, system-ui, sans-serif',
+    sizes: { xs: 12, sm: 14, md: 16, lg: 18, xl: 22, '2xl': 28 },
+    weights: { regular: 400, medium: 500, semibold: 600, bold: 700 },
+  },
+};