@polderlabs/bizar 6.2.5 → 7.0.0

package/bizar-dash/src/web/ui/theme/ThemeProvider.tsx

@@ -0,0 +1,142 @@
+/*
+ * ThemeProvider.tsx — Theme context for the Bizar design system (Wave 1).
+ *
+ * Owns three values: the user-selected `theme` preference ('light' | 'dark'
+ * | 'system'), the resolved `resolvedTheme` actually applied to <html>, and
+ * the actions `setTheme` / `toggle`. The 'system' preference follows the
+ * OS preference-color-scheme via a MediaQueryList subscription that is only
+ * attached while the preference is 'system' (no listener leak when the user
+ * has pinned 'light' or 'dark').
+ *
+ * Persists `theme` (not resolvedTheme) to localStorage under the key
+ * 'bizar-theme' so the OS-mode subscription can still re-evaluate each
+ * session. Renders no DOM — it is a pure context provider.
+ */
+
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export type ThemeContextValue = {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (t: Theme) => void;
+  toggle: () => void;
+};
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const STORAGE_KEY = 'bizar-theme';
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'system';
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  } catch {
+    // ignore quota / privacy errors and fall back to OS preference
+  }
+  return 'system';
+}
+
+function resolveSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+}
+
+function applyResolvedTheme(resolved: 'light' | 'dark'): void {
+  if (typeof document === 'undefined') return;
+  document.documentElement.setAttribute('data-theme', resolved);
+  document.documentElement.setAttribute('data-bizar-theme', resolved);
+}
+
+export type ThemeProviderProps = {
+  children: ReactNode;
+  /** Override the localStorage lookup. Used by tests / Storybook. */
+  defaultTheme?: Theme;
+};
+
+export function ThemeProvider({
+  children,
+  defaultTheme,
+}: ThemeProviderProps): React.JSX.Element {
+  const [theme, setThemeState] = useState<Theme>(
+    defaultTheme ?? getInitialTheme,
+  );
+  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(
+    resolveSystemTheme,
+  );
+
+  const resolvedTheme: 'light' | 'dark' =
+    theme === 'system' ? systemTheme : theme;
+
+  useEffect(() => {
+    applyResolvedTheme(resolvedTheme);
+  }, [resolvedTheme]);
+
+  useEffect(() => {
+    if (theme !== 'system') return;
+    if (typeof window === 'undefined') return;
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    // Sync once on mount in case the OS preference changed while
+    // the provider was unmounted.
+    setSystemTheme(mql.matches ? 'dark' : 'light');
+
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [theme]);
+
+  const setTheme = useCallback((t: Theme) => {
+    setThemeState(t);
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(STORAGE_KEY, t);
+      }
+    } catch {
+      // ignore storage failures (privacy mode, quota)
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setThemeState((prev) => {
+      // 'system' is set explicitly — only toggle between resolved modes
+      // when the user invokes toggle(). This matches Supabase's pattern.
+      const current: 'light' | 'dark' =
+        prev === 'system' ? systemTheme : prev;
+      const next: Theme = current === 'light' ? 'dark' : 'light';
+      try {
+        if (typeof window !== 'undefined') {
+          window.localStorage.setItem(STORAGE_KEY, next);
+        }
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  }, [systemTheme]);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({ theme, resolvedTheme, setTheme, toggle }),
+    [theme, resolvedTheme, setTheme, toggle],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}

package/bizar-dash/src/web/ui/theme/tokens.ts

@@ -0,0 +1,131 @@
+/*
+ * tokens.ts — TypeScript mirror of the CSS variables in tokens.css.
+ *
+ * Each constant is a `var(--…)` reference so React code (chart configs,
+ * inline style props, dynamic SVG fills, etc.) can stay typed end-to-end
+ * without duplicating hex strings. Naming matches the CSS var name with
+ * dashes replaced by camelCase (e.g. `--surface-0` → `surface0`).
+ *
+ * Synchronisation rule: when adding or renaming a token, update BOTH this
+ * file and `tokens.css` in the same commit. The `as const` assertion
+ * generates the union types below so consumers get autocompletion.
+ */
+
+export const colorTokens = {
+  // surfaces
+  surface0: 'var(--surface-0)',
+  surface1: 'var(--surface-1)',
+  surface2: 'var(--surface-2)',
+  surface3: 'var(--surface-3)',
+  surfaceOverlay: 'var(--surface-overlay)',
+  // text
+  textPrimary: 'var(--text-primary)',
+  textSecondary: 'var(--text-secondary)',
+  textTertiary: 'var(--text-tertiary)',
+  textInverse: 'var(--text-inverse)',
+  textDisabled: 'var(--text-disabled)',
+  // borders
+  borderSubtle: 'var(--border-subtle)',
+  borderDefault: 'var(--border-default)',
+  borderStrong: 'var(--border-strong)',
+  borderFocus: 'var(--border-focus)',
+  // accent
+  accent: 'var(--accent)',
+  accentHover: 'var(--accent-hover)',
+  accentActive: 'var(--accent-active)',
+  accentFg: 'var(--accent-fg)',
+  accentSubtle: 'var(--accent-subtle)',
+  // semantic
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  info: 'var(--info)',
+  successSubtle: 'var(--success-subtle)',
+  warningSubtle: 'var(--warning-subtle)',
+  dangerSubtle: 'var(--danger-subtle)',
+  infoSubtle: 'var(--info-subtle)',
+  // chart series
+  chart1: 'var(--chart-1)',
+  chart2: 'var(--chart-2)',
+  chart3: 'var(--chart-3)',
+  chart4: 'var(--chart-4)',
+  chart5: 'var(--chart-5)',
+  chart6: 'var(--chart-6)',
+  chart7: 'var(--chart-7)',
+  chart8: 'var(--chart-8)',
+  chart9: 'var(--chart-9)',
+  chart10: 'var(--chart-10)',
+} as const;
+
+export const spaceTokens = {
+  space0: 'var(--space-0)',
+  space1: 'var(--space-1)',
+  space2: 'var(--space-2)',
+  space3: 'var(--space-3)',
+  space4: 'var(--space-4)',
+  space5: 'var(--space-5)',
+  space6: 'var(--space-6)',
+  space7: 'var(--space-7)',
+  space8: 'var(--space-8)',
+  space9: 'var(--space-9)',
+  space10: 'var(--space-10)',
+  space11: 'var(--space-11)',
+  space12: 'var(--space-12)',
+} as const;
+
+export const radiusTokens = {
+  radiusNone: 'var(--radius-none)',
+  radiusSm: 'var(--radius-sm)',
+  radiusMd: 'var(--radius-md)',
+  radiusLg: 'var(--radius-lg)',
+  radiusFull: 'var(--radius-full)',
+} as const;
+
+export const fontSizeTokens = {
+  textXs: 'var(--text-xs)',
+  textSm: 'var(--text-sm)',
+  textBase: 'var(--text-base)',
+  textMd: 'var(--text-md)',
+  textLg: 'var(--text-lg)',
+  textXl: 'var(--text-xl)',
+  text2xl: 'var(--text-2xl)',
+  text3xl: 'var(--text-3xl)',
+} as const;
+
+export const fontFamilyTokens = {
+  fontSans: 'var(--font-sans)',
+  fontMono: 'var(--font-mono)',
+} as const;
+
+export const shadowTokens = {
+  shadowNone: 'var(--shadow-none)',
+  shadowHairline: 'var(--shadow-hairline)',
+  shadowOverlay: 'var(--shadow-overlay)',
+  shadowTooltip: 'var(--shadow-tooltip)',
+} as const;
+
+export const zIndexTokens = {
+  zBase: 'var(--z-base)',
+  zDropdown: 'var(--z-dropdown)',
+  zSticky: 'var(--z-sticky)',
+  zOverlay: 'var(--z-overlay)',
+  zModal: 'var(--z-modal)',
+  zPopover: 'var(--z-popover)',
+  zTooltip: 'var(--z-tooltip)',
+  zToast: 'var(--z-toast)',
+} as const;
+
+export const layoutTokens = {
+  layoutSidebarWidth: 'var(--layout-sidebar-width)',
+  layoutTopbarHeight: 'var(--layout-topbar-height)',
+  layoutContentMax: 'var(--layout-content-max)',
+} as const;
+
+export type ColorToken = keyof typeof colorTokens;
+export type SpaceToken = keyof typeof spaceTokens;
+export type RadiusToken = keyof typeof radiusTokens;
+export type FontSizeToken = keyof typeof fontSizeTokens;
+export type FontFamilyToken = keyof typeof fontFamilyTokens;
+export type ShadowToken = keyof typeof shadowTokens;
+export type ZIndexToken = keyof typeof zIndexTokens;
+export type LayoutToken = keyof typeof layoutTokens;

package/bizar-dash/src/web/ui/theme/useTheme.ts

@@ -0,0 +1,22 @@
+/*
+ * useTheme.ts — Hook accessor for the ThemeContext.
+ *
+ * Throws if consumed outside a <ThemeProvider>. This is intentional: a
+ * missing provider is a developer error rather than a runtime fallback,
+ * so the consumer fails fast during development instead of silently
+ * returning the wrong theme.
+ */
+
+import { useContext } from 'react';
+import { ThemeContext, type ThemeContextValue } from './ThemeProvider';
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      'useTheme must be used inside a <ThemeProvider>. ' +
+        'Wrap your app root in <ThemeProvider> before calling useTheme().',
+    );
+  }
+  return ctx;
+}

package/bizar-dash/src/web/ui/utils/cx.ts

@@ -0,0 +1,42 @@
+/*
+ * cx.ts — Tiny className combiner.
+ *
+ * Filters out falsy values (false, null, undefined, 0, '') and joins the
+ * surviving truthy strings with a single space. Accepts nested arrays
+ * (recursively flattened) and object syntax ({ active: true, disabled:
+ * false }) so callers can pass conditional flags without concatenation.
+ *
+ * Zero runtime dependencies — preferred over `clsx`/`classnames` to keep
+ * the design-system package free of vendored utilities.
+ */
+
+export type ClassValue =
+  | string
+  | number
+  | null
+  | false
+  | undefined
+  | ClassValue[]
+  | { [key: string]: boolean | null | undefined };
+
+export function cx(...inputs: ClassValue[]): string {
+  const out: string[] = [];
+  const walk = (value: ClassValue): void => {
+    if (!value) return;
+    if (typeof value === 'string' || typeof value === 'number') {
+      out.push(String(value));
+      return;
+    }
+    if (Array.isArray(value)) {
+      for (const v of value) walk(v);
+      return;
+    }
+    if (typeof value === 'object') {
+      for (const key in value) {
+        if (value[key]) out.push(key);
+      }
+    }
+  };
+  for (const input of inputs) walk(input);
+  return out.join(' ');
+}