@surf-kit/theme 0.2.0 → 0.3.0

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 +20 -15
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +6 -4
  4. package/dist/index.d.ts +6 -4
  5. package/dist/index.js +6 -2
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -31,13 +31,18 @@ __export(index_exports, {
31
31
  module.exports = __toCommonJS(index_exports);
32
32
 
33
33
  // src/ThemeProvider.tsx
34
+ var import_react2 = require("react");
35
+
36
+ // src/ThemeContext.ts
34
37
  var import_react = require("react");
38
+ var ThemeContext = (0, import_react.createContext)(null);
39
+
40
+ // src/ThemeProvider.tsx
35
41
  var import_jsx_runtime = require("react/jsx-runtime");
36
42
  var DEFAULT_THEME = {
37
43
  name: "default",
38
44
  cssVars: {}
39
45
  };
40
- var ThemeContext = (0, import_react.createContext)(null);
41
46
  function getSystemPreference() {
42
47
  if (typeof window === "undefined") return "light";
43
48
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -48,13 +53,13 @@ function ThemeProvider({
48
53
  className,
49
54
  children
50
55
  }) {
51
- const [preference, setPreference] = (0, import_react.useState)(colorModeProp);
52
- const [systemPref, setSystemPref] = (0, import_react.useState)(getSystemPreference);
53
- const wrapperRef = (0, import_react.useRef)(null);
54
- (0, import_react.useEffect)(() => {
56
+ const [preference, setPreference] = (0, import_react2.useState)(colorModeProp);
57
+ const [systemPref, setSystemPref] = (0, import_react2.useState)(getSystemPreference);
58
+ const wrapperRef = (0, import_react2.useRef)(null);
59
+ (0, import_react2.useEffect)(() => {
55
60
  setPreference(colorModeProp);
56
61
  }, [colorModeProp]);
57
- (0, import_react.useEffect)(() => {
62
+ (0, import_react2.useEffect)(() => {
58
63
  if (typeof window === "undefined") return;
59
64
  const mql = window.matchMedia("(prefers-color-scheme: dark)");
60
65
  const handler = (e) => {
@@ -64,7 +69,7 @@ function ThemeProvider({
64
69
  return () => mql.removeEventListener("change", handler);
65
70
  }, []);
66
71
  const resolvedMode = preference === "system" ? systemPref : preference;
67
- (0, import_react.useEffect)(() => {
72
+ (0, import_react2.useEffect)(() => {
68
73
  const el = wrapperRef.current;
69
74
  if (!el) return;
70
75
  el.setAttribute("data-color-mode", resolvedMode);
@@ -74,10 +79,10 @@ function ThemeProvider({
74
79
  el.style.setProperty(varName, value);
75
80
  }
76
81
  }, [resolvedMode, theme]);
77
- const setColorMode = (0, import_react.useCallback)((mode) => {
82
+ const setColorMode = (0, import_react2.useCallback)((mode) => {
78
83
  setPreference(mode);
79
84
  }, []);
80
- const contextValue = (0, import_react.useMemo)(
85
+ const contextValue = (0, import_react2.useMemo)(
81
86
  () => ({
82
87
  theme,
83
88
  colorMode: resolvedMode,
@@ -90,9 +95,9 @@ function ThemeProvider({
90
95
  }
91
96
 
92
97
  // src/useTheme.ts
93
- var import_react2 = require("react");
98
+ var import_react3 = require("react");
94
99
  function useTheme() {
95
- const context = (0, import_react2.useContext)(ThemeContext);
100
+ const context = (0, import_react3.useContext)(ThemeContext);
96
101
  if (context === null) {
97
102
  throw new Error(
98
103
  "useTheme() must be used within a <ThemeProvider>. Wrap your component tree with <ThemeProvider> from @surf-kit/theme."
@@ -102,17 +107,17 @@ function useTheme() {
102
107
  }
103
108
 
104
109
  // src/useColorMode.ts
105
- var import_react3 = require("react");
110
+ var import_react4 = require("react");
106
111
  function getSystemPreference2() {
107
112
  if (typeof window === "undefined") return "light";
108
113
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
109
114
  }
110
115
  function useColorMode() {
111
116
  const { colorMode, setColorMode } = useTheme();
112
- const [systemPreference, setSystemPreference] = (0, import_react3.useState)(
117
+ const [systemPreference, setSystemPreference] = (0, import_react4.useState)(
113
118
  getSystemPreference2
114
119
  );
115
- (0, import_react3.useEffect)(() => {
120
+ (0, import_react4.useEffect)(() => {
116
121
  if (typeof window === "undefined") return;
117
122
  const mql = window.matchMedia("(prefers-color-scheme: dark)");
118
123
  const handler = (e) => {
@@ -121,7 +126,7 @@ function useColorMode() {
121
126
  mql.addEventListener("change", handler);
122
127
  return () => mql.removeEventListener("change", handler);
123
128
  }, []);
124
- const toggleColorMode = (0, import_react3.useCallback)(() => {
129
+ const toggleColorMode = (0, import_react4.useCallback)(() => {
125
130
  setColorMode(colorMode === "light" ? "dark" : "light");
126
131
  }, [colorMode, setColorMode]);
127
132
  return {
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, ThemeContext } 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","'use client'\n\nimport 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","'use client'\n\nimport { 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","'use client'\n\nimport { 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"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/ThemeProvider.tsx","../src/ThemeContext.ts","../src/useTheme.ts","../src/useColorMode.ts","../src/createTheme.ts","../src/tailwind-preset.ts"],"sourcesContent":["export { ThemeProvider } from './ThemeProvider'\nexport { ThemeContext } from './ThemeContext'\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","'use client'\n\nimport React, {\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'\nimport { ThemeContext } from './ThemeContext'\n\nconst DEFAULT_THEME: Theme = {\n name: 'default',\n cssVars: {},\n}\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","'use client'\n\nimport { createContext } from 'react'\nimport type { ThemeContextValue } from './types'\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n","'use client'\n\nimport { useContext } from 'react'\nimport { ThemeContext } from './ThemeContext'\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","'use client'\n\nimport { 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","import_react","getSystemPreference"]}
package/dist/index.d.cts CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React from 'react';
2
+ import * as React from 'react';
3
+ import React__default from 'react';
3
4
  import { Config } from 'tailwindcss';
4
5
 
5
6
  /** Resolved color mode applied to the DOM */
6
- type ColorMode = 'light' | 'dark' | 'brand';
7
+ type ColorMode = 'light' | 'dark' | 'brand' | 'energy';
7
8
  /** User-facing color mode preference (includes 'system') */
8
9
  type ColorModePreference = ColorMode | 'system';
9
10
  /** Theme configuration input for createTheme */
@@ -32,7 +33,6 @@ interface ThemeContextValue {
32
33
  setColorMode: (mode: ColorModePreference) => void;
33
34
  }
34
35
 
35
- declare const ThemeContext: React.Context<ThemeContextValue | null>;
36
36
  interface ThemeProviderProps {
37
37
  /** Color mode preference. Defaults to 'system'. */
38
38
  colorMode?: ColorModePreference;
@@ -40,10 +40,12 @@ interface ThemeProviderProps {
40
40
  theme?: Theme;
41
41
  /** Optional className forwarded to the wrapper div. */
42
42
  className?: string;
43
- children: React.ReactNode;
43
+ children: React__default.ReactNode;
44
44
  }
45
45
  declare function ThemeProvider({ colorMode: colorModeProp, theme, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
46
46
 
47
+ declare const ThemeContext: React.Context<ThemeContextValue | null>;
48
+
47
49
  /**
48
50
  * Returns the current theme and color mode from ThemeProvider.
49
51
  *
package/dist/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React from 'react';
2
+ import * as React from 'react';
3
+ import React__default from 'react';
3
4
  import { Config } from 'tailwindcss';
4
5
 
5
6
  /** Resolved color mode applied to the DOM */
6
- type ColorMode = 'light' | 'dark' | 'brand';
7
+ type ColorMode = 'light' | 'dark' | 'brand' | 'energy';
7
8
  /** User-facing color mode preference (includes 'system') */
8
9
  type ColorModePreference = ColorMode | 'system';
9
10
  /** Theme configuration input for createTheme */
@@ -32,7 +33,6 @@ interface ThemeContextValue {
32
33
  setColorMode: (mode: ColorModePreference) => void;
33
34
  }
34
35
 
35
- declare const ThemeContext: React.Context<ThemeContextValue | null>;
36
36
  interface ThemeProviderProps {
37
37
  /** Color mode preference. Defaults to 'system'. */
38
38
  colorMode?: ColorModePreference;
@@ -40,10 +40,12 @@ interface ThemeProviderProps {
40
40
  theme?: Theme;
41
41
  /** Optional className forwarded to the wrapper div. */
42
42
  className?: string;
43
- children: React.ReactNode;
43
+ children: React__default.ReactNode;
44
44
  }
45
45
  declare function ThemeProvider({ colorMode: colorModeProp, theme, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
46
46
 
47
+ declare const ThemeContext: React.Context<ThemeContextValue | null>;
48
+
47
49
  /**
48
50
  * Returns the current theme and color mode from ThemeProvider.
49
51
  *
package/dist/index.js CHANGED
@@ -2,19 +2,23 @@
2
2
 
3
3
  // src/ThemeProvider.tsx
4
4
  import {
5
- createContext,
6
5
  useCallback,
7
6
  useEffect,
8
7
  useMemo,
9
8
  useRef,
10
9
  useState
11
10
  } from "react";
11
+
12
+ // src/ThemeContext.ts
13
+ import { createContext } from "react";
14
+ var ThemeContext = createContext(null);
15
+
16
+ // src/ThemeProvider.tsx
12
17
  import { jsx } from "react/jsx-runtime";
13
18
  var DEFAULT_THEME = {
14
19
  name: "default",
15
20
  cssVars: {}
16
21
  };
17
- var ThemeContext = createContext(null);
18
22
  function getSystemPreference() {
19
23
  if (typeof window === "undefined") return "light";
20
24
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
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":["'use client'\n\nimport 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","'use client'\n\nimport { 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","'use client'\n\nimport { 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"]}
1
+ {"version":3,"sources":["../src/ThemeProvider.tsx","../src/ThemeContext.ts","../src/useTheme.ts","../src/useColorMode.ts","../src/createTheme.ts","../src/tailwind-preset.ts"],"sourcesContent":["'use client'\n\nimport React, {\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'\nimport { ThemeContext } from './ThemeContext'\n\nconst DEFAULT_THEME: Theme = {\n name: 'default',\n cssVars: {},\n}\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","'use client'\n\nimport { createContext } from 'react'\nimport type { ThemeContextValue } from './types'\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null)\n","'use client'\n\nimport { useContext } from 'react'\nimport { ThemeContext } from './ThemeContext'\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","'use client'\n\nimport { 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.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Theme provider and Tailwind preset for surf-kit — light, dark, and brand color modes",
5
5
  "keywords": [
6
6
  "react",
@@ -37,7 +37,7 @@
37
37
  }
38
38
  },
39
39
  "dependencies": {
40
- "@surf-kit/tokens": "0.2.0"
40
+ "@surf-kit/tokens": "0.3.0"
41
41
  },
42
42
  "devDependencies": {
43
43
  "react": "^19.2.0",