@surf-kit/theme 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +31 -3
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.js +31 -3
  6. package/dist/index.js.map +1 -1
  7. package/package.json +6 -6
package/dist/index.cjs CHANGED
@@ -43,6 +43,7 @@ function getSystemPreference() {
43
43
  function ThemeProvider({
44
44
  colorMode: colorModeProp = "system",
45
45
  theme = DEFAULT_THEME,
46
+ className,
46
47
  children
47
48
  }) {
48
49
  const [preference, setPreference] = (0, import_react.useState)(colorModeProp);
@@ -83,7 +84,7 @@ function ThemeProvider({
83
84
  }),
84
85
  [theme, resolvedMode, preference, setColorMode]
85
86
  );
86
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: wrapperRef, "data-color-mode": resolvedMode, "data-theme": theme.name, children }) });
87
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: wrapperRef, className, "data-color-mode": resolvedMode, "data-theme": theme.name, children }) });
87
88
  }
88
89
 
89
90
  // src/useTheme.ts
@@ -175,7 +176,8 @@ var surfKitPreset = {
175
176
  "warning-subtle": "var(--surf-color-status-warning-subtle)",
176
177
  error: "var(--surf-color-status-error)",
177
178
  "error-subtle": "var(--surf-color-status-error-subtle)",
178
- info: "var(--surf-color-status-info)"
179
+ info: "var(--surf-color-status-info)",
180
+ "info-subtle": "var(--surf-color-status-info-subtle)"
179
181
  },
180
182
  confidence: {
181
183
  high: "var(--surf-confidence-high-text)",
@@ -259,13 +261,39 @@ var surfKitPreset = {
259
261
  },
260
262
  "brand-spin": {
261
263
  to: { transform: "rotate(360deg)" }
264
+ },
265
+ slideFromRight: {
266
+ from: { opacity: "0", transform: "translate(20px, 4px)" },
267
+ to: { opacity: "1", transform: "translate(0, 0)" }
268
+ },
269
+ springFromLeft: {
270
+ "0%": { opacity: "0", transform: "translate(-16px, 8px)" },
271
+ "60%": { opacity: "1", transform: "translate(2px, -1px)" },
272
+ "100%": { opacity: "1", transform: "translate(0, 0)" }
273
+ },
274
+ fadeUp: {
275
+ from: { opacity: "0", transform: "translateY(20px)" },
276
+ to: { opacity: "1", transform: "translateY(0)" }
277
+ },
278
+ fadeIn: {
279
+ from: { opacity: "0" },
280
+ to: { opacity: "1" }
281
+ },
282
+ fadeSlideUpSm: {
283
+ from: { opacity: "0", transform: "translateY(6px)" },
284
+ to: { opacity: "1", transform: "translateY(0)" }
262
285
  }
263
286
  },
264
287
  animation: {
265
288
  blink: "blink 1s step-end infinite",
266
289
  fadeSlideIn: "fadeSlideIn 0.4s ease-out both",
267
290
  pulseGlow: "pulseGlow 2s ease-in-out infinite",
268
- "brand-spin": "brand-spin 1.2s linear infinite"
291
+ "brand-spin": "brand-spin 1.2s linear infinite",
292
+ slideFromRight: "slideFromRight 0.25s ease-out both",
293
+ springFromLeft: "springFromLeft 0.35s cubic-bezier(0.22, 1, 0.36, 1) both",
294
+ fadeUp: "fadeUp 0.5s ease-out both",
295
+ fadeIn: "fadeIn 0.2s ease-out both",
296
+ fadeSlideUpSm: "fadeSlideUpSm 0.2s ease-out both"
269
297
  }
270
298
  }
271
299
  }
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/ThemeProvider.tsx","../src/useTheme.ts","../src/useColorMode.ts","../src/createTheme.ts","../src/tailwind-preset.ts"],"sourcesContent":["export { ThemeProvider } from './ThemeProvider'\nexport { useTheme } from './useTheme'\nexport { useColorMode } from './useColorMode'\nexport { createTheme } from './createTheme'\nexport { surfKitPreset } from './tailwind-preset'\nexport type { Theme, ThemeConfig, ColorMode } from './types'\n","import React, {\n createContext,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport type {\n ColorMode,\n ColorModePreference,\n Theme,\n ThemeContextValue,\n} from './types'\n\nconst DEFAULT_THEME: Theme = {\n name: 'default',\n cssVars: {},\n}\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface ThemeProviderProps {\n /** Color mode preference. Defaults to 'system'. */\n colorMode?: ColorModePreference\n /** Theme object (from createTheme). Defaults to the built-in default theme. */\n theme?: Theme\n children: React.ReactNode\n}\n\nexport function ThemeProvider({\n colorMode: colorModeProp = 'system',\n theme = DEFAULT_THEME,\n children,\n}: ThemeProviderProps) {\n const [preference, setPreference] =\n useState<ColorModePreference>(colorModeProp)\n const [systemPref, setSystemPref] = useState<ColorMode>(getSystemPreference)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // Sync prop changes into state\n useEffect(() => {\n setPreference(colorModeProp)\n }, [colorModeProp])\n\n // Listen for OS color-scheme changes\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPref(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const resolvedMode: ColorMode =\n preference === 'system' ? systemPref : (preference as ColorMode)\n\n // Apply data attributes and CSS variable overrides to wrapper div\n useEffect(() => {\n const el = wrapperRef.current\n if (!el) return\n\n el.setAttribute('data-color-mode', resolvedMode)\n el.setAttribute('data-theme', theme.name)\n\n // Apply any CSS variable overrides from the theme\n for (const [key, value] of Object.entries(theme.cssVars)) {\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n el.style.setProperty(varName, value)\n }\n }, [resolvedMode, theme])\n\n const setColorMode = useCallback((mode: ColorModePreference) => {\n setPreference(mode)\n }, [])\n\n const contextValue = useMemo<ThemeContextValue>(\n () => ({\n theme,\n colorMode: resolvedMode,\n colorModePreference: preference,\n setColorMode,\n }),\n [theme, resolvedMode, preference, setColorMode],\n )\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <div ref={wrapperRef} data-color-mode={resolvedMode as string} data-theme={theme.name}>\n {children}\n </div>\n </ThemeContext.Provider>\n )\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './ThemeProvider'\nimport type { ThemeContextValue } from './types'\n\n/**\n * Returns the current theme and color mode from ThemeProvider.\n *\n * Must be called within a <ThemeProvider>.\n */\nexport function useTheme(): ThemeContextValue {\n const context = useContext(ThemeContext)\n if (context === null) {\n throw new Error(\n 'useTheme() must be used within a <ThemeProvider>. ' +\n 'Wrap your component tree with <ThemeProvider> from @surf-kit/theme.',\n )\n }\n return context\n}\n","import { useCallback, useEffect, useState } from 'react'\nimport { useTheme } from './useTheme'\nimport type { ColorMode, ColorModePreference } from './types'\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface UseColorModeReturn {\n /** Resolved color mode ('light' | 'dark') */\n colorMode: ColorMode\n /** Update the color mode preference */\n setColorMode: (mode: ColorModePreference) => void\n /** Toggle between light and dark (ignores 'system') */\n toggleColorMode: () => void\n /** The OS-level color scheme preference */\n systemPreference: ColorMode\n}\n\n/**\n * Provides color mode controls. Must be called within a <ThemeProvider>.\n */\nexport function useColorMode(): UseColorModeReturn {\n const { colorMode, setColorMode } = useTheme()\n const [systemPreference, setSystemPreference] = useState<ColorMode>(\n getSystemPreference,\n )\n\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPreference(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const toggleColorMode = useCallback(() => {\n setColorMode(colorMode === 'light' ? 'dark' : 'light')\n }, [colorMode, setColorMode])\n\n return {\n colorMode,\n setColorMode,\n toggleColorMode,\n systemPreference,\n }\n}\n","import type { Theme, ThemeConfig } from './types'\n\n/**\n * Creates a Theme object from configuration.\n *\n * The returned Theme can be passed to <ThemeProvider theme={myTheme}>.\n * Override CSS custom properties by providing an `overrides` map keyed\n * by token name (without the `--surf-` prefix).\n */\nexport function createTheme(config: ThemeConfig): Theme {\n const cssVars: Record<string, string> = {}\n\n if (config.overrides) {\n for (const [key, value] of Object.entries(config.overrides)) {\n // Store with the full custom-property name\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n cssVars[varName] = value\n }\n }\n\n return {\n name: config.name,\n cssVars,\n }\n}\n","import type { Config } from 'tailwindcss'\n\nexport const surfKitPreset: Partial<Config> = {\n theme: {\n extend: {\n colors: {\n surface: 'var(--surf-color-bg-surface)',\n 'surface-raised': 'var(--surf-color-bg-surface-raised)',\n 'surface-sunken': 'var(--surf-color-bg-surface-sunken)',\n canvas: 'var(--surf-color-bg-canvas)',\n 'text-primary': 'var(--surf-color-text-primary)',\n 'text-secondary': 'var(--surf-color-text-secondary)',\n 'text-muted': 'var(--surf-color-text-muted)',\n accent: {\n DEFAULT: 'var(--surf-color-accent-primary)',\n hover: 'var(--surf-color-accent-primary-hover)',\n active: 'var(--surf-color-accent-primary-active)',\n subtle: 'var(--surf-color-accent-primary-subtle)',\n subtlest: 'var(--surf-color-accent-primary-subtlest)',\n },\n border: {\n DEFAULT: 'var(--surf-color-border-default)',\n strong: 'var(--surf-color-border-strong)',\n interactive: 'var(--surf-color-border-interactive)',\n },\n status: {\n success: 'var(--surf-color-status-success)',\n 'success-subtle': 'var(--surf-color-status-success-subtle)',\n warning: 'var(--surf-color-status-warning)',\n 'warning-subtle': 'var(--surf-color-status-warning-subtle)',\n error: 'var(--surf-color-status-error)',\n 'error-subtle': 'var(--surf-color-status-error-subtle)',\n info: 'var(--surf-color-status-info)',\n },\n confidence: {\n high: 'var(--surf-confidence-high-text)',\n 'high-bg': 'var(--surf-confidence-high-bg)',\n medium: 'var(--surf-confidence-medium-text)',\n 'medium-bg': 'var(--surf-confidence-medium-bg)',\n low: 'var(--surf-confidence-low-text)',\n 'low-bg': 'var(--surf-confidence-low-bg)',\n },\n verification: {\n passed: 'var(--surf-verification-passed-icon)',\n flagged: 'var(--surf-verification-flagged-icon)',\n failed: 'var(--surf-verification-failed-icon)',\n },\n agent: {\n coordinator: 'var(--surf-agent-coordinator-accent)',\n hr: 'var(--surf-agent-hr-accent)',\n it: 'var(--surf-agent-it-accent)',\n governance: 'var(--surf-agent-governance-accent)',\n finance: 'var(--surf-agent-finance-accent)',\n facilities: 'var(--surf-agent-facilities-accent)',\n },\n brand: {\n dark: '#041F26',\n 'dark-panel': '#0A3642',\n blue: '#0091A5',\n cyan: '#38BDD0',\n gold: '#E1B989',\n 'gold-light': '#F3D79C',\n cream: '#F1F0E3',\n 'cream-warm': '#F0E8B6',\n charcoal: '#414142',\n watermelon: '#E81152',\n },\n },\n spacing: {\n 'surf-1': 'var(--surf-spacing-1)',\n 'surf-2': 'var(--surf-spacing-2)',\n 'surf-3': 'var(--surf-spacing-3)',\n 'surf-4': 'var(--surf-spacing-4)',\n 'surf-6': 'var(--surf-spacing-6)',\n 'surf-8': 'var(--surf-spacing-8)',\n },\n borderRadius: {\n 'surf-sm': 'var(--surf-radius-sm)',\n 'surf-md': 'var(--surf-radius-md)',\n 'surf-lg': 'var(--surf-radius-lg)',\n 'surf-xl': 'var(--surf-radius-xl)',\n 'surf-full': 'var(--surf-radius-full)',\n },\n fontFamily: {\n 'surf-sans': 'var(--surf-font-family-sans)',\n 'surf-mono': 'var(--surf-font-family-mono)',\n 'surf-display': 'var(--surf-font-family-display)',\n },\n boxShadow: {\n 'surf-sm': 'var(--surf-shadow-sm)',\n 'surf-md': 'var(--surf-shadow-md)',\n 'surf-lg': 'var(--surf-shadow-lg)',\n 'glow': '0 0 20px rgba(225,185,137,0.4)',\n 'glow-strong': '0 0 30px rgba(225,185,137,0.6), 0 0 60px rgba(225,185,137,0.3)',\n 'glow-cyan': '0 0 15px rgba(56,189,208,0.5)',\n 'glow-watermelon': '0 0 15px rgba(232,17,82,0.5)',\n 'card': '0 4px 24px rgba(4,31,38,0.8)',\n },\n backdropBlur: {\n 'glass': '12px',\n },\n keyframes: {\n blink: {\n '0%, 50%': { opacity: '1' },\n '51%, 100%': { opacity: '0' },\n },\n fadeSlideIn: {\n from: { opacity: '0', transform: 'translateY(12px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n pulseGlow: {\n '0%, 100%': { boxShadow: '0 0 20px rgba(225,185,137,0.2)' },\n '50%': { boxShadow: '0 0 40px rgba(225,185,137,0.4)' },\n },\n 'brand-spin': {\n to: { transform: 'rotate(360deg)' },\n },\n },\n animation: {\n blink: 'blink 1s step-end infinite',\n fadeSlideIn: 'fadeSlideIn 0.4s ease-out both',\n pulseGlow: 'pulseGlow 2s ease-in-out infinite',\n 'brand-spin': 'brand-spin 1.2s linear infinite',\n },\n },\n },\n}\n"],"mappings":"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","names":["import_react","import_react","getSystemPreference"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/ThemeProvider.tsx","../src/useTheme.ts","../src/useColorMode.ts","../src/createTheme.ts","../src/tailwind-preset.ts"],"sourcesContent":["export { ThemeProvider } from './ThemeProvider'\nexport { useTheme } from './useTheme'\nexport { useColorMode } from './useColorMode'\nexport { createTheme } from './createTheme'\nexport { surfKitPreset } from './tailwind-preset'\nexport type { Theme, ThemeConfig, ColorMode } from './types'\n","import React, {\n createContext,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport type {\n ColorMode,\n ColorModePreference,\n Theme,\n ThemeContextValue,\n} from './types'\n\nconst DEFAULT_THEME: Theme = {\n name: 'default',\n cssVars: {},\n}\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface ThemeProviderProps {\n /** Color mode preference. Defaults to 'system'. */\n colorMode?: ColorModePreference\n /** Theme object (from createTheme). Defaults to the built-in default theme. */\n theme?: Theme\n /** Optional className forwarded to the wrapper div. */\n className?: string\n children: React.ReactNode\n}\n\nexport function ThemeProvider({\n colorMode: colorModeProp = 'system',\n theme = DEFAULT_THEME,\n className,\n children,\n}: ThemeProviderProps) {\n const [preference, setPreference] =\n useState<ColorModePreference>(colorModeProp)\n const [systemPref, setSystemPref] = useState<ColorMode>(getSystemPreference)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // Sync prop changes into state\n useEffect(() => {\n setPreference(colorModeProp)\n }, [colorModeProp])\n\n // Listen for OS color-scheme changes\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPref(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const resolvedMode: ColorMode =\n preference === 'system' ? systemPref : (preference as ColorMode)\n\n // Apply data attributes and CSS variable overrides to wrapper div\n useEffect(() => {\n const el = wrapperRef.current\n if (!el) return\n\n el.setAttribute('data-color-mode', resolvedMode)\n el.setAttribute('data-theme', theme.name)\n\n // Apply any CSS variable overrides from the theme\n for (const [key, value] of Object.entries(theme.cssVars)) {\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n el.style.setProperty(varName, value)\n }\n }, [resolvedMode, theme])\n\n const setColorMode = useCallback((mode: ColorModePreference) => {\n setPreference(mode)\n }, [])\n\n const contextValue = useMemo<ThemeContextValue>(\n () => ({\n theme,\n colorMode: resolvedMode,\n colorModePreference: preference,\n setColorMode,\n }),\n [theme, resolvedMode, preference, setColorMode],\n )\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <div ref={wrapperRef} className={className} data-color-mode={resolvedMode as string} data-theme={theme.name}>\n {children}\n </div>\n </ThemeContext.Provider>\n )\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './ThemeProvider'\nimport type { ThemeContextValue } from './types'\n\n/**\n * Returns the current theme and color mode from ThemeProvider.\n *\n * Must be called within a <ThemeProvider>.\n */\nexport function useTheme(): ThemeContextValue {\n const context = useContext(ThemeContext)\n if (context === null) {\n throw new Error(\n 'useTheme() must be used within a <ThemeProvider>. ' +\n 'Wrap your component tree with <ThemeProvider> from @surf-kit/theme.',\n )\n }\n return context\n}\n","import { useCallback, useEffect, useState } from 'react'\nimport { useTheme } from './useTheme'\nimport type { ColorMode, ColorModePreference } from './types'\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface UseColorModeReturn {\n /** Resolved color mode ('light' | 'dark') */\n colorMode: ColorMode\n /** Update the color mode preference */\n setColorMode: (mode: ColorModePreference) => void\n /** Toggle between light and dark (ignores 'system') */\n toggleColorMode: () => void\n /** The OS-level color scheme preference */\n systemPreference: ColorMode\n}\n\n/**\n * Provides color mode controls. Must be called within a <ThemeProvider>.\n */\nexport function useColorMode(): UseColorModeReturn {\n const { colorMode, setColorMode } = useTheme()\n const [systemPreference, setSystemPreference] = useState<ColorMode>(\n getSystemPreference,\n )\n\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPreference(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const toggleColorMode = useCallback(() => {\n setColorMode(colorMode === 'light' ? 'dark' : 'light')\n }, [colorMode, setColorMode])\n\n return {\n colorMode,\n setColorMode,\n toggleColorMode,\n systemPreference,\n }\n}\n","import type { Theme, ThemeConfig } from './types'\n\n/**\n * Creates a Theme object from configuration.\n *\n * The returned Theme can be passed to <ThemeProvider theme={myTheme}>.\n * Override CSS custom properties by providing an `overrides` map keyed\n * by token name (without the `--surf-` prefix).\n */\nexport function createTheme(config: ThemeConfig): Theme {\n const cssVars: Record<string, string> = {}\n\n if (config.overrides) {\n for (const [key, value] of Object.entries(config.overrides)) {\n // Store with the full custom-property name\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n cssVars[varName] = value\n }\n }\n\n return {\n name: config.name,\n cssVars,\n }\n}\n","import type { Config } from 'tailwindcss'\n\nexport const surfKitPreset: Partial<Config> = {\n theme: {\n extend: {\n colors: {\n surface: 'var(--surf-color-bg-surface)',\n 'surface-raised': 'var(--surf-color-bg-surface-raised)',\n 'surface-sunken': 'var(--surf-color-bg-surface-sunken)',\n canvas: 'var(--surf-color-bg-canvas)',\n 'text-primary': 'var(--surf-color-text-primary)',\n 'text-secondary': 'var(--surf-color-text-secondary)',\n 'text-muted': 'var(--surf-color-text-muted)',\n accent: {\n DEFAULT: 'var(--surf-color-accent-primary)',\n hover: 'var(--surf-color-accent-primary-hover)',\n active: 'var(--surf-color-accent-primary-active)',\n subtle: 'var(--surf-color-accent-primary-subtle)',\n subtlest: 'var(--surf-color-accent-primary-subtlest)',\n },\n border: {\n DEFAULT: 'var(--surf-color-border-default)',\n strong: 'var(--surf-color-border-strong)',\n interactive: 'var(--surf-color-border-interactive)',\n },\n status: {\n success: 'var(--surf-color-status-success)',\n 'success-subtle': 'var(--surf-color-status-success-subtle)',\n warning: 'var(--surf-color-status-warning)',\n 'warning-subtle': 'var(--surf-color-status-warning-subtle)',\n error: 'var(--surf-color-status-error)',\n 'error-subtle': 'var(--surf-color-status-error-subtle)',\n info: 'var(--surf-color-status-info)',\n 'info-subtle': 'var(--surf-color-status-info-subtle)',\n },\n confidence: {\n high: 'var(--surf-confidence-high-text)',\n 'high-bg': 'var(--surf-confidence-high-bg)',\n medium: 'var(--surf-confidence-medium-text)',\n 'medium-bg': 'var(--surf-confidence-medium-bg)',\n low: 'var(--surf-confidence-low-text)',\n 'low-bg': 'var(--surf-confidence-low-bg)',\n },\n verification: {\n passed: 'var(--surf-verification-passed-icon)',\n flagged: 'var(--surf-verification-flagged-icon)',\n failed: 'var(--surf-verification-failed-icon)',\n },\n agent: {\n coordinator: 'var(--surf-agent-coordinator-accent)',\n hr: 'var(--surf-agent-hr-accent)',\n it: 'var(--surf-agent-it-accent)',\n governance: 'var(--surf-agent-governance-accent)',\n finance: 'var(--surf-agent-finance-accent)',\n facilities: 'var(--surf-agent-facilities-accent)',\n },\n brand: {\n dark: '#041F26',\n 'dark-panel': '#0A3642',\n blue: '#0091A5',\n cyan: '#38BDD0',\n gold: '#E1B989',\n 'gold-light': '#F3D79C',\n cream: '#F1F0E3',\n 'cream-warm': '#F0E8B6',\n charcoal: '#414142',\n watermelon: '#E81152',\n },\n },\n spacing: {\n 'surf-1': 'var(--surf-spacing-1)',\n 'surf-2': 'var(--surf-spacing-2)',\n 'surf-3': 'var(--surf-spacing-3)',\n 'surf-4': 'var(--surf-spacing-4)',\n 'surf-6': 'var(--surf-spacing-6)',\n 'surf-8': 'var(--surf-spacing-8)',\n },\n borderRadius: {\n 'surf-sm': 'var(--surf-radius-sm)',\n 'surf-md': 'var(--surf-radius-md)',\n 'surf-lg': 'var(--surf-radius-lg)',\n 'surf-xl': 'var(--surf-radius-xl)',\n 'surf-full': 'var(--surf-radius-full)',\n },\n fontFamily: {\n 'surf-sans': 'var(--surf-font-family-sans)',\n 'surf-mono': 'var(--surf-font-family-mono)',\n 'surf-display': 'var(--surf-font-family-display)',\n },\n boxShadow: {\n 'surf-sm': 'var(--surf-shadow-sm)',\n 'surf-md': 'var(--surf-shadow-md)',\n 'surf-lg': 'var(--surf-shadow-lg)',\n 'glow': '0 0 20px rgba(225,185,137,0.4)',\n 'glow-strong': '0 0 30px rgba(225,185,137,0.6), 0 0 60px rgba(225,185,137,0.3)',\n 'glow-cyan': '0 0 15px rgba(56,189,208,0.5)',\n 'glow-watermelon': '0 0 15px rgba(232,17,82,0.5)',\n 'card': '0 4px 24px rgba(4,31,38,0.8)',\n },\n backdropBlur: {\n 'glass': '12px',\n },\n keyframes: {\n blink: {\n '0%, 50%': { opacity: '1' },\n '51%, 100%': { opacity: '0' },\n },\n fadeSlideIn: {\n from: { opacity: '0', transform: 'translateY(12px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n pulseGlow: {\n '0%, 100%': { boxShadow: '0 0 20px rgba(225,185,137,0.2)' },\n '50%': { boxShadow: '0 0 40px rgba(225,185,137,0.4)' },\n },\n 'brand-spin': {\n to: { transform: 'rotate(360deg)' },\n },\n slideFromRight: {\n from: { opacity: '0', transform: 'translate(20px, 4px)' },\n to: { opacity: '1', transform: 'translate(0, 0)' },\n },\n springFromLeft: {\n '0%': { opacity: '0', transform: 'translate(-16px, 8px)' },\n '60%': { opacity: '1', transform: 'translate(2px, -1px)' },\n '100%': { opacity: '1', transform: 'translate(0, 0)' },\n },\n fadeUp: {\n from: { opacity: '0', transform: 'translateY(20px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n fadeIn: {\n from: { opacity: '0' },\n to: { opacity: '1' },\n },\n fadeSlideUpSm: {\n from: { opacity: '0', transform: 'translateY(6px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n },\n animation: {\n blink: 'blink 1s step-end infinite',\n fadeSlideIn: 'fadeSlideIn 0.4s ease-out both',\n pulseGlow: 'pulseGlow 2s ease-in-out infinite',\n 'brand-spin': 'brand-spin 1.2s linear infinite',\n slideFromRight: 'slideFromRight 0.25s ease-out both',\n springFromLeft: 'springFromLeft 0.35s cubic-bezier(0.22, 1, 0.36, 1) both',\n fadeUp: 'fadeUp 0.5s ease-out both',\n fadeIn: 'fadeIn 0.2s ease-out both',\n fadeSlideUpSm: 'fadeSlideUpSm 0.2s ease-out both',\n },\n },\n },\n}\n"],"mappings":"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","names":["import_react","import_react","getSystemPreference"]}
package/dist/index.d.cts CHANGED
@@ -37,9 +37,11 @@ interface ThemeProviderProps {
37
37
  colorMode?: ColorModePreference;
38
38
  /** Theme object (from createTheme). Defaults to the built-in default theme. */
39
39
  theme?: Theme;
40
+ /** Optional className forwarded to the wrapper div. */
41
+ className?: string;
40
42
  children: React.ReactNode;
41
43
  }
42
- declare function ThemeProvider({ colorMode: colorModeProp, theme, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
44
+ declare function ThemeProvider({ colorMode: colorModeProp, theme, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
43
45
 
44
46
  /**
45
47
  * Returns the current theme and color mode from ThemeProvider.
package/dist/index.d.ts CHANGED
@@ -37,9 +37,11 @@ interface ThemeProviderProps {
37
37
  colorMode?: ColorModePreference;
38
38
  /** Theme object (from createTheme). Defaults to the built-in default theme. */
39
39
  theme?: Theme;
40
+ /** Optional className forwarded to the wrapper div. */
41
+ className?: string;
40
42
  children: React.ReactNode;
41
43
  }
42
- declare function ThemeProvider({ colorMode: colorModeProp, theme, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
44
+ declare function ThemeProvider({ colorMode: colorModeProp, theme, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
43
45
 
44
46
  /**
45
47
  * Returns the current theme and color mode from ThemeProvider.
package/dist/index.js CHANGED
@@ -20,6 +20,7 @@ function getSystemPreference() {
20
20
  function ThemeProvider({
21
21
  colorMode: colorModeProp = "system",
22
22
  theme = DEFAULT_THEME,
23
+ className,
23
24
  children
24
25
  }) {
25
26
  const [preference, setPreference] = useState(colorModeProp);
@@ -60,7 +61,7 @@ function ThemeProvider({
60
61
  }),
61
62
  [theme, resolvedMode, preference, setColorMode]
62
63
  );
63
- return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, "data-color-mode": resolvedMode, "data-theme": theme.name, children }) });
64
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, "data-color-mode": resolvedMode, "data-theme": theme.name, children }) });
64
65
  }
65
66
 
66
67
  // src/useTheme.ts
@@ -152,7 +153,8 @@ var surfKitPreset = {
152
153
  "warning-subtle": "var(--surf-color-status-warning-subtle)",
153
154
  error: "var(--surf-color-status-error)",
154
155
  "error-subtle": "var(--surf-color-status-error-subtle)",
155
- info: "var(--surf-color-status-info)"
156
+ info: "var(--surf-color-status-info)",
157
+ "info-subtle": "var(--surf-color-status-info-subtle)"
156
158
  },
157
159
  confidence: {
158
160
  high: "var(--surf-confidence-high-text)",
@@ -236,13 +238,39 @@ var surfKitPreset = {
236
238
  },
237
239
  "brand-spin": {
238
240
  to: { transform: "rotate(360deg)" }
241
+ },
242
+ slideFromRight: {
243
+ from: { opacity: "0", transform: "translate(20px, 4px)" },
244
+ to: { opacity: "1", transform: "translate(0, 0)" }
245
+ },
246
+ springFromLeft: {
247
+ "0%": { opacity: "0", transform: "translate(-16px, 8px)" },
248
+ "60%": { opacity: "1", transform: "translate(2px, -1px)" },
249
+ "100%": { opacity: "1", transform: "translate(0, 0)" }
250
+ },
251
+ fadeUp: {
252
+ from: { opacity: "0", transform: "translateY(20px)" },
253
+ to: { opacity: "1", transform: "translateY(0)" }
254
+ },
255
+ fadeIn: {
256
+ from: { opacity: "0" },
257
+ to: { opacity: "1" }
258
+ },
259
+ fadeSlideUpSm: {
260
+ from: { opacity: "0", transform: "translateY(6px)" },
261
+ to: { opacity: "1", transform: "translateY(0)" }
239
262
  }
240
263
  },
241
264
  animation: {
242
265
  blink: "blink 1s step-end infinite",
243
266
  fadeSlideIn: "fadeSlideIn 0.4s ease-out both",
244
267
  pulseGlow: "pulseGlow 2s ease-in-out infinite",
245
- "brand-spin": "brand-spin 1.2s linear infinite"
268
+ "brand-spin": "brand-spin 1.2s linear infinite",
269
+ slideFromRight: "slideFromRight 0.25s ease-out both",
270
+ springFromLeft: "springFromLeft 0.35s cubic-bezier(0.22, 1, 0.36, 1) both",
271
+ fadeUp: "fadeUp 0.5s ease-out both",
272
+ fadeIn: "fadeIn 0.2s ease-out both",
273
+ fadeSlideUpSm: "fadeSlideUpSm 0.2s ease-out both"
246
274
  }
247
275
  }
248
276
  }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ThemeProvider.tsx","../src/useTheme.ts","../src/useColorMode.ts","../src/createTheme.ts","../src/tailwind-preset.ts"],"sourcesContent":["import React, {\n createContext,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport type {\n ColorMode,\n ColorModePreference,\n Theme,\n ThemeContextValue,\n} from './types'\n\nconst DEFAULT_THEME: Theme = {\n name: 'default',\n cssVars: {},\n}\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface ThemeProviderProps {\n /** Color mode preference. Defaults to 'system'. */\n colorMode?: ColorModePreference\n /** Theme object (from createTheme). Defaults to the built-in default theme. */\n theme?: Theme\n children: React.ReactNode\n}\n\nexport function ThemeProvider({\n colorMode: colorModeProp = 'system',\n theme = DEFAULT_THEME,\n children,\n}: ThemeProviderProps) {\n const [preference, setPreference] =\n useState<ColorModePreference>(colorModeProp)\n const [systemPref, setSystemPref] = useState<ColorMode>(getSystemPreference)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // Sync prop changes into state\n useEffect(() => {\n setPreference(colorModeProp)\n }, [colorModeProp])\n\n // Listen for OS color-scheme changes\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPref(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const resolvedMode: ColorMode =\n preference === 'system' ? systemPref : (preference as ColorMode)\n\n // Apply data attributes and CSS variable overrides to wrapper div\n useEffect(() => {\n const el = wrapperRef.current\n if (!el) return\n\n el.setAttribute('data-color-mode', resolvedMode)\n el.setAttribute('data-theme', theme.name)\n\n // Apply any CSS variable overrides from the theme\n for (const [key, value] of Object.entries(theme.cssVars)) {\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n el.style.setProperty(varName, value)\n }\n }, [resolvedMode, theme])\n\n const setColorMode = useCallback((mode: ColorModePreference) => {\n setPreference(mode)\n }, [])\n\n const contextValue = useMemo<ThemeContextValue>(\n () => ({\n theme,\n colorMode: resolvedMode,\n colorModePreference: preference,\n setColorMode,\n }),\n [theme, resolvedMode, preference, setColorMode],\n )\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <div ref={wrapperRef} data-color-mode={resolvedMode as string} data-theme={theme.name}>\n {children}\n </div>\n </ThemeContext.Provider>\n )\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './ThemeProvider'\nimport type { ThemeContextValue } from './types'\n\n/**\n * Returns the current theme and color mode from ThemeProvider.\n *\n * Must be called within a <ThemeProvider>.\n */\nexport function useTheme(): ThemeContextValue {\n const context = useContext(ThemeContext)\n if (context === null) {\n throw new Error(\n 'useTheme() must be used within a <ThemeProvider>. ' +\n 'Wrap your component tree with <ThemeProvider> from @surf-kit/theme.',\n )\n }\n return context\n}\n","import { useCallback, useEffect, useState } from 'react'\nimport { useTheme } from './useTheme'\nimport type { ColorMode, ColorModePreference } from './types'\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface UseColorModeReturn {\n /** Resolved color mode ('light' | 'dark') */\n colorMode: ColorMode\n /** Update the color mode preference */\n setColorMode: (mode: ColorModePreference) => void\n /** Toggle between light and dark (ignores 'system') */\n toggleColorMode: () => void\n /** The OS-level color scheme preference */\n systemPreference: ColorMode\n}\n\n/**\n * Provides color mode controls. Must be called within a <ThemeProvider>.\n */\nexport function useColorMode(): UseColorModeReturn {\n const { colorMode, setColorMode } = useTheme()\n const [systemPreference, setSystemPreference] = useState<ColorMode>(\n getSystemPreference,\n )\n\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPreference(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const toggleColorMode = useCallback(() => {\n setColorMode(colorMode === 'light' ? 'dark' : 'light')\n }, [colorMode, setColorMode])\n\n return {\n colorMode,\n setColorMode,\n toggleColorMode,\n systemPreference,\n }\n}\n","import type { Theme, ThemeConfig } from './types'\n\n/**\n * Creates a Theme object from configuration.\n *\n * The returned Theme can be passed to <ThemeProvider theme={myTheme}>.\n * Override CSS custom properties by providing an `overrides` map keyed\n * by token name (without the `--surf-` prefix).\n */\nexport function createTheme(config: ThemeConfig): Theme {\n const cssVars: Record<string, string> = {}\n\n if (config.overrides) {\n for (const [key, value] of Object.entries(config.overrides)) {\n // Store with the full custom-property name\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n cssVars[varName] = value\n }\n }\n\n return {\n name: config.name,\n cssVars,\n }\n}\n","import type { Config } from 'tailwindcss'\n\nexport const surfKitPreset: Partial<Config> = {\n theme: {\n extend: {\n colors: {\n surface: 'var(--surf-color-bg-surface)',\n 'surface-raised': 'var(--surf-color-bg-surface-raised)',\n 'surface-sunken': 'var(--surf-color-bg-surface-sunken)',\n canvas: 'var(--surf-color-bg-canvas)',\n 'text-primary': 'var(--surf-color-text-primary)',\n 'text-secondary': 'var(--surf-color-text-secondary)',\n 'text-muted': 'var(--surf-color-text-muted)',\n accent: {\n DEFAULT: 'var(--surf-color-accent-primary)',\n hover: 'var(--surf-color-accent-primary-hover)',\n active: 'var(--surf-color-accent-primary-active)',\n subtle: 'var(--surf-color-accent-primary-subtle)',\n subtlest: 'var(--surf-color-accent-primary-subtlest)',\n },\n border: {\n DEFAULT: 'var(--surf-color-border-default)',\n strong: 'var(--surf-color-border-strong)',\n interactive: 'var(--surf-color-border-interactive)',\n },\n status: {\n success: 'var(--surf-color-status-success)',\n 'success-subtle': 'var(--surf-color-status-success-subtle)',\n warning: 'var(--surf-color-status-warning)',\n 'warning-subtle': 'var(--surf-color-status-warning-subtle)',\n error: 'var(--surf-color-status-error)',\n 'error-subtle': 'var(--surf-color-status-error-subtle)',\n info: 'var(--surf-color-status-info)',\n },\n confidence: {\n high: 'var(--surf-confidence-high-text)',\n 'high-bg': 'var(--surf-confidence-high-bg)',\n medium: 'var(--surf-confidence-medium-text)',\n 'medium-bg': 'var(--surf-confidence-medium-bg)',\n low: 'var(--surf-confidence-low-text)',\n 'low-bg': 'var(--surf-confidence-low-bg)',\n },\n verification: {\n passed: 'var(--surf-verification-passed-icon)',\n flagged: 'var(--surf-verification-flagged-icon)',\n failed: 'var(--surf-verification-failed-icon)',\n },\n agent: {\n coordinator: 'var(--surf-agent-coordinator-accent)',\n hr: 'var(--surf-agent-hr-accent)',\n it: 'var(--surf-agent-it-accent)',\n governance: 'var(--surf-agent-governance-accent)',\n finance: 'var(--surf-agent-finance-accent)',\n facilities: 'var(--surf-agent-facilities-accent)',\n },\n brand: {\n dark: '#041F26',\n 'dark-panel': '#0A3642',\n blue: '#0091A5',\n cyan: '#38BDD0',\n gold: '#E1B989',\n 'gold-light': '#F3D79C',\n cream: '#F1F0E3',\n 'cream-warm': '#F0E8B6',\n charcoal: '#414142',\n watermelon: '#E81152',\n },\n },\n spacing: {\n 'surf-1': 'var(--surf-spacing-1)',\n 'surf-2': 'var(--surf-spacing-2)',\n 'surf-3': 'var(--surf-spacing-3)',\n 'surf-4': 'var(--surf-spacing-4)',\n 'surf-6': 'var(--surf-spacing-6)',\n 'surf-8': 'var(--surf-spacing-8)',\n },\n borderRadius: {\n 'surf-sm': 'var(--surf-radius-sm)',\n 'surf-md': 'var(--surf-radius-md)',\n 'surf-lg': 'var(--surf-radius-lg)',\n 'surf-xl': 'var(--surf-radius-xl)',\n 'surf-full': 'var(--surf-radius-full)',\n },\n fontFamily: {\n 'surf-sans': 'var(--surf-font-family-sans)',\n 'surf-mono': 'var(--surf-font-family-mono)',\n 'surf-display': 'var(--surf-font-family-display)',\n },\n boxShadow: {\n 'surf-sm': 'var(--surf-shadow-sm)',\n 'surf-md': 'var(--surf-shadow-md)',\n 'surf-lg': 'var(--surf-shadow-lg)',\n 'glow': '0 0 20px rgba(225,185,137,0.4)',\n 'glow-strong': '0 0 30px rgba(225,185,137,0.6), 0 0 60px rgba(225,185,137,0.3)',\n 'glow-cyan': '0 0 15px rgba(56,189,208,0.5)',\n 'glow-watermelon': '0 0 15px rgba(232,17,82,0.5)',\n 'card': '0 4px 24px rgba(4,31,38,0.8)',\n },\n backdropBlur: {\n 'glass': '12px',\n },\n keyframes: {\n blink: {\n '0%, 50%': { opacity: '1' },\n '51%, 100%': { opacity: '0' },\n },\n fadeSlideIn: {\n from: { opacity: '0', transform: 'translateY(12px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n pulseGlow: {\n '0%, 100%': { boxShadow: '0 0 20px rgba(225,185,137,0.2)' },\n '50%': { boxShadow: '0 0 40px rgba(225,185,137,0.4)' },\n },\n 'brand-spin': {\n to: { transform: 'rotate(360deg)' },\n },\n },\n animation: {\n blink: 'blink 1s step-end infinite',\n fadeSlideIn: 'fadeSlideIn 0.4s ease-out both',\n pulseGlow: 'pulseGlow 2s ease-in-out infinite',\n 'brand-spin': 'brand-spin 1.2s linear infinite',\n },\n },\n },\n}\n"],"mappings":"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","names":["useCallback","useEffect","useState","getSystemPreference","useState","useEffect","useCallback"]}
1
+ {"version":3,"sources":["../src/ThemeProvider.tsx","../src/useTheme.ts","../src/useColorMode.ts","../src/createTheme.ts","../src/tailwind-preset.ts"],"sourcesContent":["import React, {\n createContext,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport type {\n ColorMode,\n ColorModePreference,\n Theme,\n ThemeContextValue,\n} from './types'\n\nconst DEFAULT_THEME: Theme = {\n name: 'default',\n cssVars: {},\n}\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface ThemeProviderProps {\n /** Color mode preference. Defaults to 'system'. */\n colorMode?: ColorModePreference\n /** Theme object (from createTheme). Defaults to the built-in default theme. */\n theme?: Theme\n /** Optional className forwarded to the wrapper div. */\n className?: string\n children: React.ReactNode\n}\n\nexport function ThemeProvider({\n colorMode: colorModeProp = 'system',\n theme = DEFAULT_THEME,\n className,\n children,\n}: ThemeProviderProps) {\n const [preference, setPreference] =\n useState<ColorModePreference>(colorModeProp)\n const [systemPref, setSystemPref] = useState<ColorMode>(getSystemPreference)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n // Sync prop changes into state\n useEffect(() => {\n setPreference(colorModeProp)\n }, [colorModeProp])\n\n // Listen for OS color-scheme changes\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPref(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const resolvedMode: ColorMode =\n preference === 'system' ? systemPref : (preference as ColorMode)\n\n // Apply data attributes and CSS variable overrides to wrapper div\n useEffect(() => {\n const el = wrapperRef.current\n if (!el) return\n\n el.setAttribute('data-color-mode', resolvedMode)\n el.setAttribute('data-theme', theme.name)\n\n // Apply any CSS variable overrides from the theme\n for (const [key, value] of Object.entries(theme.cssVars)) {\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n el.style.setProperty(varName, value)\n }\n }, [resolvedMode, theme])\n\n const setColorMode = useCallback((mode: ColorModePreference) => {\n setPreference(mode)\n }, [])\n\n const contextValue = useMemo<ThemeContextValue>(\n () => ({\n theme,\n colorMode: resolvedMode,\n colorModePreference: preference,\n setColorMode,\n }),\n [theme, resolvedMode, preference, setColorMode],\n )\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <div ref={wrapperRef} className={className} data-color-mode={resolvedMode as string} data-theme={theme.name}>\n {children}\n </div>\n </ThemeContext.Provider>\n )\n}\n","import { useContext } from 'react'\nimport { ThemeContext } from './ThemeProvider'\nimport type { ThemeContextValue } from './types'\n\n/**\n * Returns the current theme and color mode from ThemeProvider.\n *\n * Must be called within a <ThemeProvider>.\n */\nexport function useTheme(): ThemeContextValue {\n const context = useContext(ThemeContext)\n if (context === null) {\n throw new Error(\n 'useTheme() must be used within a <ThemeProvider>. ' +\n 'Wrap your component tree with <ThemeProvider> from @surf-kit/theme.',\n )\n }\n return context\n}\n","import { useCallback, useEffect, useState } from 'react'\nimport { useTheme } from './useTheme'\nimport type { ColorMode, ColorModePreference } from './types'\n\nfunction getSystemPreference(): ColorMode {\n if (typeof window === 'undefined') return 'light'\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n}\n\nexport interface UseColorModeReturn {\n /** Resolved color mode ('light' | 'dark') */\n colorMode: ColorMode\n /** Update the color mode preference */\n setColorMode: (mode: ColorModePreference) => void\n /** Toggle between light and dark (ignores 'system') */\n toggleColorMode: () => void\n /** The OS-level color scheme preference */\n systemPreference: ColorMode\n}\n\n/**\n * Provides color mode controls. Must be called within a <ThemeProvider>.\n */\nexport function useColorMode(): UseColorModeReturn {\n const { colorMode, setColorMode } = useTheme()\n const [systemPreference, setSystemPreference] = useState<ColorMode>(\n getSystemPreference,\n )\n\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n const mql = window.matchMedia('(prefers-color-scheme: dark)')\n const handler = (e: MediaQueryListEvent) => {\n setSystemPreference(e.matches ? 'dark' : 'light')\n }\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [])\n\n const toggleColorMode = useCallback(() => {\n setColorMode(colorMode === 'light' ? 'dark' : 'light')\n }, [colorMode, setColorMode])\n\n return {\n colorMode,\n setColorMode,\n toggleColorMode,\n systemPreference,\n }\n}\n","import type { Theme, ThemeConfig } from './types'\n\n/**\n * Creates a Theme object from configuration.\n *\n * The returned Theme can be passed to <ThemeProvider theme={myTheme}>.\n * Override CSS custom properties by providing an `overrides` map keyed\n * by token name (without the `--surf-` prefix).\n */\nexport function createTheme(config: ThemeConfig): Theme {\n const cssVars: Record<string, string> = {}\n\n if (config.overrides) {\n for (const [key, value] of Object.entries(config.overrides)) {\n // Store with the full custom-property name\n const varName = key.startsWith('--') ? key : `--surf-${key}`\n cssVars[varName] = value\n }\n }\n\n return {\n name: config.name,\n cssVars,\n }\n}\n","import type { Config } from 'tailwindcss'\n\nexport const surfKitPreset: Partial<Config> = {\n theme: {\n extend: {\n colors: {\n surface: 'var(--surf-color-bg-surface)',\n 'surface-raised': 'var(--surf-color-bg-surface-raised)',\n 'surface-sunken': 'var(--surf-color-bg-surface-sunken)',\n canvas: 'var(--surf-color-bg-canvas)',\n 'text-primary': 'var(--surf-color-text-primary)',\n 'text-secondary': 'var(--surf-color-text-secondary)',\n 'text-muted': 'var(--surf-color-text-muted)',\n accent: {\n DEFAULT: 'var(--surf-color-accent-primary)',\n hover: 'var(--surf-color-accent-primary-hover)',\n active: 'var(--surf-color-accent-primary-active)',\n subtle: 'var(--surf-color-accent-primary-subtle)',\n subtlest: 'var(--surf-color-accent-primary-subtlest)',\n },\n border: {\n DEFAULT: 'var(--surf-color-border-default)',\n strong: 'var(--surf-color-border-strong)',\n interactive: 'var(--surf-color-border-interactive)',\n },\n status: {\n success: 'var(--surf-color-status-success)',\n 'success-subtle': 'var(--surf-color-status-success-subtle)',\n warning: 'var(--surf-color-status-warning)',\n 'warning-subtle': 'var(--surf-color-status-warning-subtle)',\n error: 'var(--surf-color-status-error)',\n 'error-subtle': 'var(--surf-color-status-error-subtle)',\n info: 'var(--surf-color-status-info)',\n 'info-subtle': 'var(--surf-color-status-info-subtle)',\n },\n confidence: {\n high: 'var(--surf-confidence-high-text)',\n 'high-bg': 'var(--surf-confidence-high-bg)',\n medium: 'var(--surf-confidence-medium-text)',\n 'medium-bg': 'var(--surf-confidence-medium-bg)',\n low: 'var(--surf-confidence-low-text)',\n 'low-bg': 'var(--surf-confidence-low-bg)',\n },\n verification: {\n passed: 'var(--surf-verification-passed-icon)',\n flagged: 'var(--surf-verification-flagged-icon)',\n failed: 'var(--surf-verification-failed-icon)',\n },\n agent: {\n coordinator: 'var(--surf-agent-coordinator-accent)',\n hr: 'var(--surf-agent-hr-accent)',\n it: 'var(--surf-agent-it-accent)',\n governance: 'var(--surf-agent-governance-accent)',\n finance: 'var(--surf-agent-finance-accent)',\n facilities: 'var(--surf-agent-facilities-accent)',\n },\n brand: {\n dark: '#041F26',\n 'dark-panel': '#0A3642',\n blue: '#0091A5',\n cyan: '#38BDD0',\n gold: '#E1B989',\n 'gold-light': '#F3D79C',\n cream: '#F1F0E3',\n 'cream-warm': '#F0E8B6',\n charcoal: '#414142',\n watermelon: '#E81152',\n },\n },\n spacing: {\n 'surf-1': 'var(--surf-spacing-1)',\n 'surf-2': 'var(--surf-spacing-2)',\n 'surf-3': 'var(--surf-spacing-3)',\n 'surf-4': 'var(--surf-spacing-4)',\n 'surf-6': 'var(--surf-spacing-6)',\n 'surf-8': 'var(--surf-spacing-8)',\n },\n borderRadius: {\n 'surf-sm': 'var(--surf-radius-sm)',\n 'surf-md': 'var(--surf-radius-md)',\n 'surf-lg': 'var(--surf-radius-lg)',\n 'surf-xl': 'var(--surf-radius-xl)',\n 'surf-full': 'var(--surf-radius-full)',\n },\n fontFamily: {\n 'surf-sans': 'var(--surf-font-family-sans)',\n 'surf-mono': 'var(--surf-font-family-mono)',\n 'surf-display': 'var(--surf-font-family-display)',\n },\n boxShadow: {\n 'surf-sm': 'var(--surf-shadow-sm)',\n 'surf-md': 'var(--surf-shadow-md)',\n 'surf-lg': 'var(--surf-shadow-lg)',\n 'glow': '0 0 20px rgba(225,185,137,0.4)',\n 'glow-strong': '0 0 30px rgba(225,185,137,0.6), 0 0 60px rgba(225,185,137,0.3)',\n 'glow-cyan': '0 0 15px rgba(56,189,208,0.5)',\n 'glow-watermelon': '0 0 15px rgba(232,17,82,0.5)',\n 'card': '0 4px 24px rgba(4,31,38,0.8)',\n },\n backdropBlur: {\n 'glass': '12px',\n },\n keyframes: {\n blink: {\n '0%, 50%': { opacity: '1' },\n '51%, 100%': { opacity: '0' },\n },\n fadeSlideIn: {\n from: { opacity: '0', transform: 'translateY(12px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n pulseGlow: {\n '0%, 100%': { boxShadow: '0 0 20px rgba(225,185,137,0.2)' },\n '50%': { boxShadow: '0 0 40px rgba(225,185,137,0.4)' },\n },\n 'brand-spin': {\n to: { transform: 'rotate(360deg)' },\n },\n slideFromRight: {\n from: { opacity: '0', transform: 'translate(20px, 4px)' },\n to: { opacity: '1', transform: 'translate(0, 0)' },\n },\n springFromLeft: {\n '0%': { opacity: '0', transform: 'translate(-16px, 8px)' },\n '60%': { opacity: '1', transform: 'translate(2px, -1px)' },\n '100%': { opacity: '1', transform: 'translate(0, 0)' },\n },\n fadeUp: {\n from: { opacity: '0', transform: 'translateY(20px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n fadeIn: {\n from: { opacity: '0' },\n to: { opacity: '1' },\n },\n fadeSlideUpSm: {\n from: { opacity: '0', transform: 'translateY(6px)' },\n to: { opacity: '1', transform: 'translateY(0)' },\n },\n },\n animation: {\n blink: 'blink 1s step-end infinite',\n fadeSlideIn: 'fadeSlideIn 0.4s ease-out both',\n pulseGlow: 'pulseGlow 2s ease-in-out infinite',\n 'brand-spin': 'brand-spin 1.2s linear infinite',\n slideFromRight: 'slideFromRight 0.25s ease-out both',\n springFromLeft: 'springFromLeft 0.35s cubic-bezier(0.22, 1, 0.36, 1) both',\n fadeUp: 'fadeUp 0.5s ease-out both',\n fadeIn: 'fadeIn 0.2s ease-out both',\n fadeSlideUpSm: 'fadeSlideUpSm 0.2s ease-out both',\n },\n },\n },\n}\n"],"mappings":"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","names":["useCallback","useEffect","useState","getSystemPreference","useState","useEffect","useCallback"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@surf-kit/theme",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Theme provider and Tailwind preset for surf-kit — light, dark, and brand color modes",
5
5
  "keywords": [
6
6
  "react",
@@ -36,17 +36,17 @@
36
36
  }
37
37
  },
38
38
  "dependencies": {
39
- "@surf-kit/tokens": "0.1.1"
39
+ "@surf-kit/tokens": "0.1.3"
40
40
  },
41
41
  "devDependencies": {
42
- "react": "^18.3.0",
43
- "@types/react": "^18.3.0",
42
+ "react": "^19.2.0",
43
+ "@types/react": "^19.2.0",
44
44
  "tsup": "^8.0.0",
45
- "typescript": "^5.5.0",
45
+ "typescript": "^5.9.0",
46
46
  "@surf-kit/tsconfig": "0.1.0"
47
47
  },
48
48
  "peerDependencies": {
49
- "react": ">=18",
49
+ "react": ">=19",
50
50
  "tailwindcss": ">=4"
51
51
  },
52
52
  "peerDependenciesMeta": {