@camstack/ui-library 0.1.37 → 0.1.39

package/dist/theme/index.cjs

@@ -207,13 +207,13 @@ ${lightColorBlock}
 
 @media (prefers-color-scheme: dark) {
   :root {
-${darkColorBlock.replace(/^  /gm, "    ")}
+${darkColorBlock.replace(/^ {2}/gm, "    ")}
   }
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-${lightColorBlock.replace(/^  /gm, "    ")}
+${lightColorBlock.replace(/^ {2}/gm, "    ")}
   }
 }
 `;

package/dist/theme/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/index.ts","../../src/theme/defaults.ts","../../src/theme/create-theme.ts","../../src/theme/theme-to-css.ts","../../src/theme/theme-provider.tsx","../../src/theme/use-theme-mode.ts"],"sourcesContent":["export type {\n  CamStackColorTokens,\n  CamStackTheme,\n  ThemeMode,\n  DeepPartial,\n  UseThemeModeReturn,\n} from './types'\n\nexport { darkColors, lightColors, defaultTheme } from './defaults'\nexport { createTheme } from './create-theme'\nexport { themeToCss } from './theme-to-css'\nexport { ThemeProvider } from './theme-provider'\nexport { useThemeMode } from './use-theme-mode'\n","import type { CamStackColorTokens, CamStackTheme } from './types'\n\nconst providerColors: CamStackColorTokens['provider'] = {\n  frigate: '#3b82f6',\n  scrypted: '#a855f7',\n  reolink: '#06b6d4',\n  homeAssistant: '#22d3ee',\n  rtsp: '#78716c',\n}\n\nexport const darkColors: CamStackColorTokens = {\n  primary: '#f59e42',\n  primaryForeground: '#0c0a09',\n  background: '#0c0a09',\n  backgroundElevated: '#1c1917',\n  surface: '#1c1917',\n  surfaceHover: '#292524',\n  border: '#292524',\n  borderSubtle: '#1c1917',\n  foreground: '#fafaf9',\n  foregroundMuted: '#a8a29e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#57534e',\n  success: '#4ade80',\n  warning: '#fbbf24',\n  danger: '#f87171',\n  info: '#60a5fa',\n  provider: providerColors,\n}\n\nexport const lightColors: CamStackColorTokens = {\n  primary: '#e67e22',\n  primaryForeground: '#ffffff',\n  background: '#fafaf9',\n  backgroundElevated: '#ffffff',\n  surface: '#f5f5f4',\n  surfaceHover: '#e7e5e4',\n  border: '#d6d3d1',\n  borderSubtle: '#e7e5e4',\n  foreground: '#1c1917',\n  foregroundMuted: '#57534e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#a8a29e',\n  success: '#16a34a',\n  warning: '#d97706',\n  danger: '#dc2626',\n  info: '#2563eb',\n  provider: providerColors,\n}\n\nexport const defaultTheme: CamStackTheme = {\n  colors: {\n    dark: darkColors,\n    light: lightColors,\n  },\n  spacing: {\n    xs: 2,\n    sm: 4,\n    md: 8,\n    lg: 12,\n    xl: 16,\n    '2xl': 24,\n    '3xl': 32,\n  },\n  radius: {\n    sm: 4,\n    md: 6,\n    lg: 8,\n    xl: 12,\n  },\n  typography: {\n    fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    sizes: {\n      xs: { fontSize: 10, lineHeight: 14 },\n      sm: { fontSize: 11, lineHeight: 16 },\n      base: { fontSize: 12, lineHeight: 18 },\n      lg: { fontSize: 13, lineHeight: 18 },\n      xl: { fontSize: 14, lineHeight: 20 },\n      '2xl': { fontSize: 16, lineHeight: 22 },\n      '3xl': { fontSize: 20, lineHeight: 28 },\n    },\n    weights: {\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700,\n    },\n  },\n  table: {\n    rowHeight: 28,\n    headerHeight: 24,\n    cellPaddingX: 8,\n    cellPaddingY: 6,\n  },\n  sidebar: {\n    width: 176,\n    itemHeight: 28,\n    iconSize: 14,\n  },\n}\n","import type { CamStackTheme, DeepPartial } from './types'\nimport { defaultTheme } from './defaults'\n\nfunction deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {\n  const result = { ...target }\n  for (const key in source) {\n    const sourceVal = source[key]\n    const targetVal = target[key]\n    if (\n      sourceVal !== undefined &&\n      typeof sourceVal === 'object' &&\n      sourceVal !== null &&\n      !Array.isArray(sourceVal) &&\n      typeof targetVal === 'object' &&\n      targetVal !== null\n    ) {\n      result[key] = deepMerge(\n        targetVal as Record<string, unknown>,\n        sourceVal as Record<string, unknown>,\n      ) as T[typeof key]\n    } else if (sourceVal !== undefined) {\n      result[key] = sourceVal as T[typeof key]\n    }\n  }\n  return result\n}\n\nexport function createTheme(overrides?: DeepPartial<CamStackTheme>): CamStackTheme {\n  if (!overrides) return structuredClone(defaultTheme)\n  return deepMerge(structuredClone(defaultTheme), overrides)\n}\n","import type { CamStackColorTokens, CamStackTheme } from './types'\n\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\n}\n\nfunction colorTokenToCssVar(key: string): string {\n  return `--color-${camelToKebab(key)}`\n}\n\nfunction generateColorBlock(colors: CamStackColorTokens): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(colors)) {\n    if (key === 'provider') continue\n    lines.push(`  ${colorTokenToCssVar(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateProviderColors(provider: CamStackColorTokens['provider']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(provider)) {\n    lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateSpacingTokens(spacing: CamStackTheme['spacing']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(spacing)) {\n    lines.push(`  --spacing-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateRadiusTokens(radius: CamStackTheme['radius']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(radius)) {\n    lines.push(`  --radius-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nexport function themeToCss(theme: CamStackTheme): string {\n  const darkColorBlock = generateColorBlock(theme.colors.dark)\n  const lightColorBlock = generateColorBlock(theme.colors.light)\n  const providerBlock = generateProviderColors(theme.colors.dark.provider)\n  const spacingBlock = generateSpacingTokens(theme.spacing)\n  const radiusBlock = generateRadiusTokens(theme.radius)\n\n  return `@theme {\n${providerBlock}\n${spacingBlock}\n${radiusBlock}\n}\n\n.dark {\n${darkColorBlock}\n}\n\n.light {\n${lightColorBlock}\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n${darkColorBlock.replace(/^  /gm, '    ')}\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n${lightColorBlock.replace(/^  /gm, '    ')}\n  }\n}\n`\n}\n","import { createContext, useCallback, useEffect, useMemo, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { ThemeMode, UseThemeModeReturn } from './types'\n\nexport const ThemeContext = createContext<UseThemeModeReturn | null>(null)\n\ninterface ThemeProviderProps {\n  children: ReactNode\n  defaultMode?: ThemeMode\n  storageKey?: string\n}\n\nconst TOGGLE_ORDER: readonly ThemeMode[] = ['dark', 'light', 'system'] as const\n\nfunction getSystemPreference(): 'dark' | 'light' {\n  if (typeof window === 'undefined') return 'dark'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getInitialMode(storageKey: string, defaultMode: ThemeMode): ThemeMode {\n  if (typeof window === 'undefined') return defaultMode\n  const stored = localStorage.getItem(storageKey)\n  if (stored === 'dark' || stored === 'light' || stored === 'system') {\n    return stored\n  }\n  return defaultMode\n}\n\nfunction resolveMode(mode: ThemeMode): 'dark' | 'light' {\n  if (mode === 'system') return getSystemPreference()\n  return mode\n}\n\nexport function ThemeProvider({\n  children,\n  defaultMode = 'system',\n  storageKey = 'camstack-theme-mode',\n}: ThemeProviderProps) {\n  const [mode, setModeState] = useState<ThemeMode>(() => getInitialMode(storageKey, defaultMode))\n  const [resolvedMode, setResolvedMode] = useState<'dark' | 'light'>(() => resolveMode(mode))\n\n  const setMode = useCallback(\n    (newMode: ThemeMode) => {\n      setModeState(newMode)\n      setResolvedMode(resolveMode(newMode))\n      if (typeof window !== 'undefined') {\n        localStorage.setItem(storageKey, newMode)\n      }\n    },\n    [storageKey],\n  )\n\n  const toggleMode = useCallback(() => {\n    const currentIndex = TOGGLE_ORDER.indexOf(mode)\n    const nextIndex = (currentIndex + 1) % TOGGLE_ORDER.length\n    setMode(TOGGLE_ORDER[nextIndex] ?? 'dark')\n  }, [mode, setMode])\n\n  // Apply CSS class on document.documentElement\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    const root = document.documentElement\n    root.classList.remove('dark', 'light')\n    // Always apply the resolved class — even in 'system' mode, the CSS\n    // variables need the .dark or .light class to activate\n    root.classList.add(resolvedMode)\n  }, [mode, resolvedMode])\n\n  // Listen for system theme changes when in 'system' mode\n  useEffect(() => {\n    if (typeof window === 'undefined' || mode !== 'system') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = () => {\n      setResolvedMode(getSystemPreference())\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [mode])\n\n  const value = useMemo<UseThemeModeReturn>(\n    () => ({ mode, resolvedMode, setMode, toggleMode }),\n    [mode, resolvedMode, setMode, toggleMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './theme-provider'\nimport type { UseThemeModeReturn } from './types'\n\nexport function useThemeMode(): UseThemeModeReturn {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeMode must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":"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","names":["import_react"]}
+{"version":3,"sources":["../../src/theme/index.ts","../../src/theme/defaults.ts","../../src/theme/create-theme.ts","../../src/theme/theme-to-css.ts","../../src/theme/theme-provider.tsx","../../src/theme/use-theme-mode.ts"],"sourcesContent":["export type {\n  CamStackColorTokens,\n  CamStackTheme,\n  ThemeMode,\n  DeepPartial,\n  UseThemeModeReturn,\n} from './types'\n\nexport { darkColors, lightColors, defaultTheme } from './defaults'\nexport { createTheme } from './create-theme'\nexport { themeToCss } from './theme-to-css'\nexport { ThemeProvider } from './theme-provider'\nexport { useThemeMode } from './use-theme-mode'\n","import type { CamStackColorTokens, CamStackTheme } from './types'\n\nconst providerColors: CamStackColorTokens['provider'] = {\n  frigate: '#3b82f6',\n  scrypted: '#a855f7',\n  reolink: '#06b6d4',\n  homeAssistant: '#22d3ee',\n  rtsp: '#78716c',\n}\n\nexport const darkColors: CamStackColorTokens = {\n  primary: '#f59e42',\n  primaryForeground: '#0c0a09',\n  background: '#0c0a09',\n  backgroundElevated: '#1c1917',\n  surface: '#1c1917',\n  surfaceHover: '#292524',\n  border: '#292524',\n  borderSubtle: '#1c1917',\n  foreground: '#fafaf9',\n  foregroundMuted: '#a8a29e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#57534e',\n  success: '#4ade80',\n  warning: '#fbbf24',\n  danger: '#f87171',\n  info: '#60a5fa',\n  provider: providerColors,\n}\n\nexport const lightColors: CamStackColorTokens = {\n  primary: '#e67e22',\n  primaryForeground: '#ffffff',\n  background: '#fafaf9',\n  backgroundElevated: '#ffffff',\n  surface: '#f5f5f4',\n  surfaceHover: '#e7e5e4',\n  border: '#d6d3d1',\n  borderSubtle: '#e7e5e4',\n  foreground: '#1c1917',\n  foregroundMuted: '#57534e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#a8a29e',\n  success: '#16a34a',\n  warning: '#d97706',\n  danger: '#dc2626',\n  info: '#2563eb',\n  provider: providerColors,\n}\n\nexport const defaultTheme: CamStackTheme = {\n  colors: {\n    dark: darkColors,\n    light: lightColors,\n  },\n  spacing: {\n    xs: 2,\n    sm: 4,\n    md: 8,\n    lg: 12,\n    xl: 16,\n    '2xl': 24,\n    '3xl': 32,\n  },\n  radius: {\n    sm: 4,\n    md: 6,\n    lg: 8,\n    xl: 12,\n  },\n  typography: {\n    fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    sizes: {\n      xs: { fontSize: 10, lineHeight: 14 },\n      sm: { fontSize: 11, lineHeight: 16 },\n      base: { fontSize: 12, lineHeight: 18 },\n      lg: { fontSize: 13, lineHeight: 18 },\n      xl: { fontSize: 14, lineHeight: 20 },\n      '2xl': { fontSize: 16, lineHeight: 22 },\n      '3xl': { fontSize: 20, lineHeight: 28 },\n    },\n    weights: {\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700,\n    },\n  },\n  table: {\n    rowHeight: 28,\n    headerHeight: 24,\n    cellPaddingX: 8,\n    cellPaddingY: 6,\n  },\n  sidebar: {\n    width: 176,\n    itemHeight: 28,\n    iconSize: 14,\n  },\n}\n","import type { CamStackTheme, DeepPartial } from './types'\nimport { defaultTheme } from './defaults'\n\nfunction deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {\n  const result = { ...target }\n  for (const key in source) {\n    const sourceVal = source[key]\n    const targetVal = target[key]\n    if (\n      sourceVal !== undefined &&\n      typeof sourceVal === 'object' &&\n      sourceVal !== null &&\n      !Array.isArray(sourceVal) &&\n      typeof targetVal === 'object' &&\n      targetVal !== null\n    ) {\n      result[key] = deepMerge(\n        targetVal as Record<string, unknown>,\n        sourceVal as Record<string, unknown>,\n      ) as T[typeof key]\n    } else if (sourceVal !== undefined) {\n      result[key] = sourceVal as T[typeof key]\n    }\n  }\n  return result\n}\n\nexport function createTheme(overrides?: DeepPartial<CamStackTheme>): CamStackTheme {\n  if (!overrides) return structuredClone(defaultTheme)\n  return deepMerge(structuredClone(defaultTheme), overrides)\n}\n","import type { CamStackColorTokens, CamStackTheme } from './types'\n\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\n}\n\nfunction colorTokenToCssVar(key: string): string {\n  return `--color-${camelToKebab(key)}`\n}\n\nfunction generateColorBlock(colors: CamStackColorTokens): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(colors)) {\n    if (key === 'provider') continue\n    lines.push(`  ${colorTokenToCssVar(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateProviderColors(provider: CamStackColorTokens['provider']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(provider)) {\n    lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateSpacingTokens(spacing: CamStackTheme['spacing']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(spacing)) {\n    lines.push(`  --spacing-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateRadiusTokens(radius: CamStackTheme['radius']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(radius)) {\n    lines.push(`  --radius-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nexport function themeToCss(theme: CamStackTheme): string {\n  const darkColorBlock = generateColorBlock(theme.colors.dark)\n  const lightColorBlock = generateColorBlock(theme.colors.light)\n  const providerBlock = generateProviderColors(theme.colors.dark.provider)\n  const spacingBlock = generateSpacingTokens(theme.spacing)\n  const radiusBlock = generateRadiusTokens(theme.radius)\n\n  return `@theme {\n${providerBlock}\n${spacingBlock}\n${radiusBlock}\n}\n\n.dark {\n${darkColorBlock}\n}\n\n.light {\n${lightColorBlock}\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n${darkColorBlock.replace(/^ {2}/gm, '    ')}\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n${lightColorBlock.replace(/^ {2}/gm, '    ')}\n  }\n}\n`\n}\n","import { createContext, useCallback, useEffect, useMemo, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { ThemeMode, UseThemeModeReturn } from './types'\n\nexport const ThemeContext = createContext<UseThemeModeReturn | null>(null)\n\ninterface ThemeProviderProps {\n  children: ReactNode\n  defaultMode?: ThemeMode\n  storageKey?: string\n}\n\nconst TOGGLE_ORDER: readonly ThemeMode[] = ['dark', 'light', 'system'] as const\n\nfunction getSystemPreference(): 'dark' | 'light' {\n  if (typeof window === 'undefined') return 'dark'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getInitialMode(storageKey: string, defaultMode: ThemeMode): ThemeMode {\n  if (typeof window === 'undefined') return defaultMode\n  const stored = localStorage.getItem(storageKey)\n  if (stored === 'dark' || stored === 'light' || stored === 'system') {\n    return stored\n  }\n  return defaultMode\n}\n\nfunction resolveMode(mode: ThemeMode): 'dark' | 'light' {\n  if (mode === 'system') return getSystemPreference()\n  return mode\n}\n\nexport function ThemeProvider({\n  children,\n  defaultMode = 'system',\n  storageKey = 'camstack-theme-mode',\n}: ThemeProviderProps) {\n  const [mode, setModeState] = useState<ThemeMode>(() => getInitialMode(storageKey, defaultMode))\n  const [resolvedMode, setResolvedMode] = useState<'dark' | 'light'>(() => resolveMode(mode))\n\n  const setMode = useCallback(\n    (newMode: ThemeMode) => {\n      setModeState(newMode)\n      setResolvedMode(resolveMode(newMode))\n      if (typeof window !== 'undefined') {\n        localStorage.setItem(storageKey, newMode)\n      }\n    },\n    [storageKey],\n  )\n\n  const toggleMode = useCallback(() => {\n    const currentIndex = TOGGLE_ORDER.indexOf(mode)\n    const nextIndex = (currentIndex + 1) % TOGGLE_ORDER.length\n    setMode(TOGGLE_ORDER[nextIndex] ?? 'dark')\n  }, [mode, setMode])\n\n  // Apply CSS class on document.documentElement\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    const root = document.documentElement\n    root.classList.remove('dark', 'light')\n    // Always apply the resolved class — even in 'system' mode, the CSS\n    // variables need the .dark or .light class to activate\n    root.classList.add(resolvedMode)\n  }, [mode, resolvedMode])\n\n  // Listen for system theme changes when in 'system' mode\n  useEffect(() => {\n    if (typeof window === 'undefined' || mode !== 'system') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = () => {\n      setResolvedMode(getSystemPreference())\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [mode])\n\n  const value = useMemo<UseThemeModeReturn>(\n    () => ({ mode, resolvedMode, setMode, toggleMode }),\n    [mode, resolvedMode, setMode, toggleMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './theme-provider'\nimport type { UseThemeModeReturn } from './types'\n\nexport function useThemeMode(): UseThemeModeReturn {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeMode must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/theme/index.js

@@ -175,13 +175,13 @@ ${lightColorBlock}
 
 @media (prefers-color-scheme: dark) {
   :root {
-${darkColorBlock.replace(/^  /gm, "    ")}
+${darkColorBlock.replace(/^ {2}/gm, "    ")}
   }
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-${lightColorBlock.replace(/^  /gm, "    ")}
+${lightColorBlock.replace(/^ {2}/gm, "    ")}
   }
 }
 `;

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/defaults.ts","../../src/theme/create-theme.ts","../../src/theme/theme-to-css.ts","../../src/theme/theme-provider.tsx","../../src/theme/use-theme-mode.ts"],"sourcesContent":["import type { CamStackColorTokens, CamStackTheme } from './types'\n\nconst providerColors: CamStackColorTokens['provider'] = {\n  frigate: '#3b82f6',\n  scrypted: '#a855f7',\n  reolink: '#06b6d4',\n  homeAssistant: '#22d3ee',\n  rtsp: '#78716c',\n}\n\nexport const darkColors: CamStackColorTokens = {\n  primary: '#f59e42',\n  primaryForeground: '#0c0a09',\n  background: '#0c0a09',\n  backgroundElevated: '#1c1917',\n  surface: '#1c1917',\n  surfaceHover: '#292524',\n  border: '#292524',\n  borderSubtle: '#1c1917',\n  foreground: '#fafaf9',\n  foregroundMuted: '#a8a29e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#57534e',\n  success: '#4ade80',\n  warning: '#fbbf24',\n  danger: '#f87171',\n  info: '#60a5fa',\n  provider: providerColors,\n}\n\nexport const lightColors: CamStackColorTokens = {\n  primary: '#e67e22',\n  primaryForeground: '#ffffff',\n  background: '#fafaf9',\n  backgroundElevated: '#ffffff',\n  surface: '#f5f5f4',\n  surfaceHover: '#e7e5e4',\n  border: '#d6d3d1',\n  borderSubtle: '#e7e5e4',\n  foreground: '#1c1917',\n  foregroundMuted: '#57534e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#a8a29e',\n  success: '#16a34a',\n  warning: '#d97706',\n  danger: '#dc2626',\n  info: '#2563eb',\n  provider: providerColors,\n}\n\nexport const defaultTheme: CamStackTheme = {\n  colors: {\n    dark: darkColors,\n    light: lightColors,\n  },\n  spacing: {\n    xs: 2,\n    sm: 4,\n    md: 8,\n    lg: 12,\n    xl: 16,\n    '2xl': 24,\n    '3xl': 32,\n  },\n  radius: {\n    sm: 4,\n    md: 6,\n    lg: 8,\n    xl: 12,\n  },\n  typography: {\n    fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    sizes: {\n      xs: { fontSize: 10, lineHeight: 14 },\n      sm: { fontSize: 11, lineHeight: 16 },\n      base: { fontSize: 12, lineHeight: 18 },\n      lg: { fontSize: 13, lineHeight: 18 },\n      xl: { fontSize: 14, lineHeight: 20 },\n      '2xl': { fontSize: 16, lineHeight: 22 },\n      '3xl': { fontSize: 20, lineHeight: 28 },\n    },\n    weights: {\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700,\n    },\n  },\n  table: {\n    rowHeight: 28,\n    headerHeight: 24,\n    cellPaddingX: 8,\n    cellPaddingY: 6,\n  },\n  sidebar: {\n    width: 176,\n    itemHeight: 28,\n    iconSize: 14,\n  },\n}\n","import type { CamStackTheme, DeepPartial } from './types'\nimport { defaultTheme } from './defaults'\n\nfunction deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {\n  const result = { ...target }\n  for (const key in source) {\n    const sourceVal = source[key]\n    const targetVal = target[key]\n    if (\n      sourceVal !== undefined &&\n      typeof sourceVal === 'object' &&\n      sourceVal !== null &&\n      !Array.isArray(sourceVal) &&\n      typeof targetVal === 'object' &&\n      targetVal !== null\n    ) {\n      result[key] = deepMerge(\n        targetVal as Record<string, unknown>,\n        sourceVal as Record<string, unknown>,\n      ) as T[typeof key]\n    } else if (sourceVal !== undefined) {\n      result[key] = sourceVal as T[typeof key]\n    }\n  }\n  return result\n}\n\nexport function createTheme(overrides?: DeepPartial<CamStackTheme>): CamStackTheme {\n  if (!overrides) return structuredClone(defaultTheme)\n  return deepMerge(structuredClone(defaultTheme), overrides)\n}\n","import type { CamStackColorTokens, CamStackTheme } from './types'\n\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\n}\n\nfunction colorTokenToCssVar(key: string): string {\n  return `--color-${camelToKebab(key)}`\n}\n\nfunction generateColorBlock(colors: CamStackColorTokens): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(colors)) {\n    if (key === 'provider') continue\n    lines.push(`  ${colorTokenToCssVar(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateProviderColors(provider: CamStackColorTokens['provider']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(provider)) {\n    lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateSpacingTokens(spacing: CamStackTheme['spacing']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(spacing)) {\n    lines.push(`  --spacing-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateRadiusTokens(radius: CamStackTheme['radius']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(radius)) {\n    lines.push(`  --radius-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nexport function themeToCss(theme: CamStackTheme): string {\n  const darkColorBlock = generateColorBlock(theme.colors.dark)\n  const lightColorBlock = generateColorBlock(theme.colors.light)\n  const providerBlock = generateProviderColors(theme.colors.dark.provider)\n  const spacingBlock = generateSpacingTokens(theme.spacing)\n  const radiusBlock = generateRadiusTokens(theme.radius)\n\n  return `@theme {\n${providerBlock}\n${spacingBlock}\n${radiusBlock}\n}\n\n.dark {\n${darkColorBlock}\n}\n\n.light {\n${lightColorBlock}\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n${darkColorBlock.replace(/^  /gm, '    ')}\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n${lightColorBlock.replace(/^  /gm, '    ')}\n  }\n}\n`\n}\n","import { createContext, useCallback, useEffect, useMemo, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { ThemeMode, UseThemeModeReturn } from './types'\n\nexport const ThemeContext = createContext<UseThemeModeReturn | null>(null)\n\ninterface ThemeProviderProps {\n  children: ReactNode\n  defaultMode?: ThemeMode\n  storageKey?: string\n}\n\nconst TOGGLE_ORDER: readonly ThemeMode[] = ['dark', 'light', 'system'] as const\n\nfunction getSystemPreference(): 'dark' | 'light' {\n  if (typeof window === 'undefined') return 'dark'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getInitialMode(storageKey: string, defaultMode: ThemeMode): ThemeMode {\n  if (typeof window === 'undefined') return defaultMode\n  const stored = localStorage.getItem(storageKey)\n  if (stored === 'dark' || stored === 'light' || stored === 'system') {\n    return stored\n  }\n  return defaultMode\n}\n\nfunction resolveMode(mode: ThemeMode): 'dark' | 'light' {\n  if (mode === 'system') return getSystemPreference()\n  return mode\n}\n\nexport function ThemeProvider({\n  children,\n  defaultMode = 'system',\n  storageKey = 'camstack-theme-mode',\n}: ThemeProviderProps) {\n  const [mode, setModeState] = useState<ThemeMode>(() => getInitialMode(storageKey, defaultMode))\n  const [resolvedMode, setResolvedMode] = useState<'dark' | 'light'>(() => resolveMode(mode))\n\n  const setMode = useCallback(\n    (newMode: ThemeMode) => {\n      setModeState(newMode)\n      setResolvedMode(resolveMode(newMode))\n      if (typeof window !== 'undefined') {\n        localStorage.setItem(storageKey, newMode)\n      }\n    },\n    [storageKey],\n  )\n\n  const toggleMode = useCallback(() => {\n    const currentIndex = TOGGLE_ORDER.indexOf(mode)\n    const nextIndex = (currentIndex + 1) % TOGGLE_ORDER.length\n    setMode(TOGGLE_ORDER[nextIndex] ?? 'dark')\n  }, [mode, setMode])\n\n  // Apply CSS class on document.documentElement\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    const root = document.documentElement\n    root.classList.remove('dark', 'light')\n    // Always apply the resolved class — even in 'system' mode, the CSS\n    // variables need the .dark or .light class to activate\n    root.classList.add(resolvedMode)\n  }, [mode, resolvedMode])\n\n  // Listen for system theme changes when in 'system' mode\n  useEffect(() => {\n    if (typeof window === 'undefined' || mode !== 'system') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = () => {\n      setResolvedMode(getSystemPreference())\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [mode])\n\n  const value = useMemo<UseThemeModeReturn>(\n    () => ({ mode, resolvedMode, setMode, toggleMode }),\n    [mode, resolvedMode, setMode, toggleMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './theme-provider'\nimport type { UseThemeModeReturn } from './types'\n\nexport function useThemeMode(): UseThemeModeReturn {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeMode must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/defaults.ts","../../src/theme/create-theme.ts","../../src/theme/theme-to-css.ts","../../src/theme/theme-provider.tsx","../../src/theme/use-theme-mode.ts"],"sourcesContent":["import type { CamStackColorTokens, CamStackTheme } from './types'\n\nconst providerColors: CamStackColorTokens['provider'] = {\n  frigate: '#3b82f6',\n  scrypted: '#a855f7',\n  reolink: '#06b6d4',\n  homeAssistant: '#22d3ee',\n  rtsp: '#78716c',\n}\n\nexport const darkColors: CamStackColorTokens = {\n  primary: '#f59e42',\n  primaryForeground: '#0c0a09',\n  background: '#0c0a09',\n  backgroundElevated: '#1c1917',\n  surface: '#1c1917',\n  surfaceHover: '#292524',\n  border: '#292524',\n  borderSubtle: '#1c1917',\n  foreground: '#fafaf9',\n  foregroundMuted: '#a8a29e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#57534e',\n  success: '#4ade80',\n  warning: '#fbbf24',\n  danger: '#f87171',\n  info: '#60a5fa',\n  provider: providerColors,\n}\n\nexport const lightColors: CamStackColorTokens = {\n  primary: '#e67e22',\n  primaryForeground: '#ffffff',\n  background: '#fafaf9',\n  backgroundElevated: '#ffffff',\n  surface: '#f5f5f4',\n  surfaceHover: '#e7e5e4',\n  border: '#d6d3d1',\n  borderSubtle: '#e7e5e4',\n  foreground: '#1c1917',\n  foregroundMuted: '#57534e',\n  foregroundSubtle: '#78716c',\n  foregroundDisabled: '#a8a29e',\n  success: '#16a34a',\n  warning: '#d97706',\n  danger: '#dc2626',\n  info: '#2563eb',\n  provider: providerColors,\n}\n\nexport const defaultTheme: CamStackTheme = {\n  colors: {\n    dark: darkColors,\n    light: lightColors,\n  },\n  spacing: {\n    xs: 2,\n    sm: 4,\n    md: 8,\n    lg: 12,\n    xl: 16,\n    '2xl': 24,\n    '3xl': 32,\n  },\n  radius: {\n    sm: 4,\n    md: 6,\n    lg: 8,\n    xl: 12,\n  },\n  typography: {\n    fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    sizes: {\n      xs: { fontSize: 10, lineHeight: 14 },\n      sm: { fontSize: 11, lineHeight: 16 },\n      base: { fontSize: 12, lineHeight: 18 },\n      lg: { fontSize: 13, lineHeight: 18 },\n      xl: { fontSize: 14, lineHeight: 20 },\n      '2xl': { fontSize: 16, lineHeight: 22 },\n      '3xl': { fontSize: 20, lineHeight: 28 },\n    },\n    weights: {\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700,\n    },\n  },\n  table: {\n    rowHeight: 28,\n    headerHeight: 24,\n    cellPaddingX: 8,\n    cellPaddingY: 6,\n  },\n  sidebar: {\n    width: 176,\n    itemHeight: 28,\n    iconSize: 14,\n  },\n}\n","import type { CamStackTheme, DeepPartial } from './types'\nimport { defaultTheme } from './defaults'\n\nfunction deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {\n  const result = { ...target }\n  for (const key in source) {\n    const sourceVal = source[key]\n    const targetVal = target[key]\n    if (\n      sourceVal !== undefined &&\n      typeof sourceVal === 'object' &&\n      sourceVal !== null &&\n      !Array.isArray(sourceVal) &&\n      typeof targetVal === 'object' &&\n      targetVal !== null\n    ) {\n      result[key] = deepMerge(\n        targetVal as Record<string, unknown>,\n        sourceVal as Record<string, unknown>,\n      ) as T[typeof key]\n    } else if (sourceVal !== undefined) {\n      result[key] = sourceVal as T[typeof key]\n    }\n  }\n  return result\n}\n\nexport function createTheme(overrides?: DeepPartial<CamStackTheme>): CamStackTheme {\n  if (!overrides) return structuredClone(defaultTheme)\n  return deepMerge(structuredClone(defaultTheme), overrides)\n}\n","import type { CamStackColorTokens, CamStackTheme } from './types'\n\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\n}\n\nfunction colorTokenToCssVar(key: string): string {\n  return `--color-${camelToKebab(key)}`\n}\n\nfunction generateColorBlock(colors: CamStackColorTokens): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(colors)) {\n    if (key === 'provider') continue\n    lines.push(`  ${colorTokenToCssVar(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateProviderColors(provider: CamStackColorTokens['provider']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(provider)) {\n    lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateSpacingTokens(spacing: CamStackTheme['spacing']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(spacing)) {\n    lines.push(`  --spacing-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nfunction generateRadiusTokens(radius: CamStackTheme['radius']): string {\n  const lines: string[] = []\n  for (const [key, value] of Object.entries(radius)) {\n    lines.push(`  --radius-${key}: ${value}px;`)\n  }\n  return lines.join('\\n')\n}\n\nexport function themeToCss(theme: CamStackTheme): string {\n  const darkColorBlock = generateColorBlock(theme.colors.dark)\n  const lightColorBlock = generateColorBlock(theme.colors.light)\n  const providerBlock = generateProviderColors(theme.colors.dark.provider)\n  const spacingBlock = generateSpacingTokens(theme.spacing)\n  const radiusBlock = generateRadiusTokens(theme.radius)\n\n  return `@theme {\n${providerBlock}\n${spacingBlock}\n${radiusBlock}\n}\n\n.dark {\n${darkColorBlock}\n}\n\n.light {\n${lightColorBlock}\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n${darkColorBlock.replace(/^ {2}/gm, '    ')}\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n${lightColorBlock.replace(/^ {2}/gm, '    ')}\n  }\n}\n`\n}\n","import { createContext, useCallback, useEffect, useMemo, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { ThemeMode, UseThemeModeReturn } from './types'\n\nexport const ThemeContext = createContext<UseThemeModeReturn | null>(null)\n\ninterface ThemeProviderProps {\n  children: ReactNode\n  defaultMode?: ThemeMode\n  storageKey?: string\n}\n\nconst TOGGLE_ORDER: readonly ThemeMode[] = ['dark', 'light', 'system'] as const\n\nfunction getSystemPreference(): 'dark' | 'light' {\n  if (typeof window === 'undefined') return 'dark'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getInitialMode(storageKey: string, defaultMode: ThemeMode): ThemeMode {\n  if (typeof window === 'undefined') return defaultMode\n  const stored = localStorage.getItem(storageKey)\n  if (stored === 'dark' || stored === 'light' || stored === 'system') {\n    return stored\n  }\n  return defaultMode\n}\n\nfunction resolveMode(mode: ThemeMode): 'dark' | 'light' {\n  if (mode === 'system') return getSystemPreference()\n  return mode\n}\n\nexport function ThemeProvider({\n  children,\n  defaultMode = 'system',\n  storageKey = 'camstack-theme-mode',\n}: ThemeProviderProps) {\n  const [mode, setModeState] = useState<ThemeMode>(() => getInitialMode(storageKey, defaultMode))\n  const [resolvedMode, setResolvedMode] = useState<'dark' | 'light'>(() => resolveMode(mode))\n\n  const setMode = useCallback(\n    (newMode: ThemeMode) => {\n      setModeState(newMode)\n      setResolvedMode(resolveMode(newMode))\n      if (typeof window !== 'undefined') {\n        localStorage.setItem(storageKey, newMode)\n      }\n    },\n    [storageKey],\n  )\n\n  const toggleMode = useCallback(() => {\n    const currentIndex = TOGGLE_ORDER.indexOf(mode)\n    const nextIndex = (currentIndex + 1) % TOGGLE_ORDER.length\n    setMode(TOGGLE_ORDER[nextIndex] ?? 'dark')\n  }, [mode, setMode])\n\n  // Apply CSS class on document.documentElement\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n\n    const root = document.documentElement\n    root.classList.remove('dark', 'light')\n    // Always apply the resolved class — even in 'system' mode, the CSS\n    // variables need the .dark or .light class to activate\n    root.classList.add(resolvedMode)\n  }, [mode, resolvedMode])\n\n  // Listen for system theme changes when in 'system' mode\n  useEffect(() => {\n    if (typeof window === 'undefined' || mode !== 'system') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = () => {\n      setResolvedMode(getSystemPreference())\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [mode])\n\n  const value = useMemo<UseThemeModeReturn>(\n    () => ({ mode, resolvedMode, setMode, toggleMode }),\n    [mode, resolvedMode, setMode, toggleMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './theme-provider'\nimport type { UseThemeModeReturn } from './types'\n\nexport function useThemeMode(): UseThemeModeReturn {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeMode must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -29,40 +29,57 @@
     "publish": "npm publish --access public"
   },
   "peerDependencies": {
+    "@camstack/sdk": "^0.1.0",
     "@camstack/types": "^0.1.0",
+    "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.21.3",
-    "@trpc/client": "^11.0.0",
+    "@trpc/client": "^11.16.0",
+    "@trpc/react-query": "^11.16.0",
     "react": ">=18",
     "react-dom": ">=18",
     "superjson": "^2.0.0",
     "tailwindcss": ">=4.0"
   },
   "peerDependenciesMeta": {
+    "@camstack/sdk": {
+      "optional": true
+    },
     "react-dom": {
       "optional": true
     },
+    "@tanstack/react-query": {
+      "optional": true
+    },
     "@tanstack/react-table": {
       "optional": true
     },
     "@trpc/client": {
       "optional": true
     },
+    "@trpc/react-query": {
+      "optional": true
+    },
     "superjson": {
       "optional": true
     }
   },
   "dependencies": {
+    "@module-federation/runtime": "^2.4.0",
     "class-variance-authority": "^0.7",
     "clsx": "^2.1",
     "lucide-react": "^0.576",
     "tailwind-merge": "^3.0"
   },
   "devDependencies": {
+    "@camstack/sdk": "*",
     "@camstack/types": "*",
+    "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@trpc/client": "^11.16.0",
+    "@trpc/react-query": "^11.16.0",
     "jsdom": "^29.0.1",
     "tsup": "^8.5.1",
     "typescript": "^5.7.0"