@camstack/ui-library 0.1.38 → 0.1.40

package/dist/theme/index.d.ts

@@ -1,128 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface CamStackColorTokens {
-    primary: string;
-    primaryForeground: string;
-    background: string;
-    backgroundElevated: string;
-    surface: string;
-    surfaceHover: string;
-    border: string;
-    borderSubtle: string;
-    foreground: string;
-    foregroundMuted: string;
-    foregroundSubtle: string;
-    foregroundDisabled: string;
-    success: string;
-    warning: string;
-    danger: string;
-    info: string;
-    provider: {
-        frigate: string;
-        scrypted: string;
-        reolink: string;
-        homeAssistant: string;
-        rtsp: string;
-    };
-}
-interface CamStackTheme {
-    colors: {
-        dark: CamStackColorTokens;
-        light: CamStackColorTokens;
-    };
-    spacing: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        '2xl': number;
-        '3xl': number;
-    };
-    radius: {
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-    };
-    typography: {
-        fontFamily: string;
-        sizes: {
-            xs: {
-                fontSize: number;
-                lineHeight: number;
-            };
-            sm: {
-                fontSize: number;
-                lineHeight: number;
-            };
-            base: {
-                fontSize: number;
-                lineHeight: number;
-            };
-            lg: {
-                fontSize: number;
-                lineHeight: number;
-            };
-            xl: {
-                fontSize: number;
-                lineHeight: number;
-            };
-            '2xl': {
-                fontSize: number;
-                lineHeight: number;
-            };
-            '3xl': {
-                fontSize: number;
-                lineHeight: number;
-            };
-        };
-        weights: {
-            regular: number;
-            medium: number;
-            semibold: number;
-            bold: number;
-        };
-    };
-    table: {
-        rowHeight: number;
-        headerHeight: number;
-        cellPaddingX: number;
-        cellPaddingY: number;
-    };
-    sidebar: {
-        width: number;
-        itemHeight: number;
-        iconSize: number;
-    };
-}
-type ThemeMode = 'dark' | 'light' | 'system';
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-interface UseThemeModeReturn {
-    mode: ThemeMode;
-    resolvedMode: 'dark' | 'light';
-    setMode: (mode: ThemeMode) => void;
-    toggleMode: () => void;
-}
-
-declare const darkColors: CamStackColorTokens;
-declare const lightColors: CamStackColorTokens;
-declare const defaultTheme: CamStackTheme;
-
-declare function createTheme(overrides?: DeepPartial<CamStackTheme>): CamStackTheme;
-
-declare function themeToCss(theme: CamStackTheme): string;
-
-interface ThemeProviderProps {
-    children: ReactNode;
-    defaultMode?: ThemeMode;
-    storageKey?: string;
-}
-declare function ThemeProvider({ children, defaultMode, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-
-declare function useThemeMode(): UseThemeModeReturn;
-
-export { type CamStackColorTokens, type CamStackTheme, type DeepPartial, type ThemeMode, ThemeProvider, type UseThemeModeReturn, createTheme, darkColors, defaultTheme, lightColors, themeToCss, useThemeMode };
+export type { CamStackColorTokens, CamStackTheme, ThemeMode, DeepPartial, UseThemeModeReturn, } from './types';
+export { darkColors, lightColors, defaultTheme } from './defaults';
+export { createTheme } from './create-theme';
+export { themeToCss } from './theme-to-css';
+export { ThemeProvider } from './theme-provider';
+export { useThemeMode } from './use-theme-mode';

package/dist/theme/index.js

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