@camstack/ui-library 0.1.38 → 0.1.40

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,"file":"index.js","names":[],"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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"}

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ThemeMode, UseThemeModeReturn } from './types';
+export declare const ThemeContext: import('react').Context<UseThemeModeReturn | null>;
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeMode;
+    storageKey?: string;
+}
+export declare function ThemeProvider({ children, defaultMode, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme/theme-to-css.d.ts

@@ -0,0 +1,2 @@
+import { CamStackTheme } from './types';
+export declare function themeToCss(theme: CamStackTheme): string;

package/dist/theme/{index.d.cts → types.d.ts}

@@ -1,7 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface CamStackColorTokens {
+export interface CamStackColorTokens {
     primary: string;
     primaryForeground: string;
     background: string;
@@ -26,7 +23,7 @@ interface CamStackColorTokens {
         rtsp: string;
     };
 }
-interface CamStackTheme {
+export interface CamStackTheme {
     colors: {
         dark: CamStackColorTokens;
         light: CamStackColorTokens;
@@ -97,32 +94,13 @@ interface CamStackTheme {
         iconSize: number;
     };
 }
-type ThemeMode = 'dark' | 'light' | 'system';
-type DeepPartial<T> = {
+export type ThemeMode = 'dark' | 'light' | 'system';
+export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
-interface UseThemeModeReturn {
+export 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 };

package/dist/theme/use-theme-mode.d.ts

@@ -0,0 +1,2 @@
+import { UseThemeModeReturn } from './types';
+export declare function useThemeMode(): UseThemeModeReturn;

package/dist/trpc-react.d.ts

@@ -0,0 +1,7 @@
+import { CreateTRPCReact } from '@trpc/react-query';
+import { AppRouter } from '@camstack/types';
+export type AppTrpcReact = CreateTRPCReact<AppRouter, unknown>;
+declare global {
+    var __camstackTrpcReact: AppTrpcReact | undefined;
+}
+export declare const trpc: AppTrpcReact;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -24,47 +24,66 @@
     "assets"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "vite build",
     "typecheck": "tsc --noEmit",
     "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"
+    "typescript": "^5.7.0",
+    "vite": "^8.0.11",
+    "vite-plugin-dts": "^5.0.0"
   }
 }