@surf-kit/theme 0.1.4 → 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 +22 -15
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +7 -4
  4. package/dist/index.d.ts +7 -4
  5. package/dist/index.js +7 -2
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -2
package/dist/index.cjs CHANGED
@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  // src/index.ts
22
22
  var index_exports = {};
23
23
  __export(index_exports, {
24
+ ThemeContext: () => ThemeContext,
24
25
  ThemeProvider: () => ThemeProvider,
25
26
  createTheme: () => createTheme,
26
27
  surfKitPreset: () => surfKitPreset,
@@ -30,13 +31,18 @@ __export(index_exports, {
30
31
  module.exports = __toCommonJS(index_exports);
31
32
 
32
33
  // src/ThemeProvider.tsx
34
+ var import_react2 = require("react");
35
+
36
+ // src/ThemeContext.ts
33
37
  var import_react = require("react");
38
+ var ThemeContext = (0, import_react.createContext)(null);
39
+
40
+ // src/ThemeProvider.tsx
34
41
  var import_jsx_runtime = require("react/jsx-runtime");
35
42
  var DEFAULT_THEME = {
36
43
  name: "default",
37
44
  cssVars: {}
38
45
  };
39
- var ThemeContext = (0, import_react.createContext)(null);
40
46
  function getSystemPreference() {
41
47
  if (typeof window === "undefined") return "light";
42
48
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -47,13 +53,13 @@ function ThemeProvider({
47
53
  className,
48
54
  children
49
55
  }) {
50
- const [preference, setPreference] = (0, import_react.useState)(colorModeProp);
51
- const [systemPref, setSystemPref] = (0, import_react.useState)(getSystemPreference);
52
- const wrapperRef = (0, import_react.useRef)(null);
53
- (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)(() => {
54
60
  setPreference(colorModeProp);
55
61
  }, [colorModeProp]);
56
- (0, import_react.useEffect)(() => {
62
+ (0, import_react2.useEffect)(() => {
57
63
  if (typeof window === "undefined") return;
58
64
  const mql = window.matchMedia("(prefers-color-scheme: dark)");
59
65
  const handler = (e) => {
@@ -63,7 +69,7 @@ function ThemeProvider({
63
69
  return () => mql.removeEventListener("change", handler);
64
70
  }, []);
65
71
  const resolvedMode = preference === "system" ? systemPref : preference;
66
- (0, import_react.useEffect)(() => {
72
+ (0, import_react2.useEffect)(() => {
67
73
  const el = wrapperRef.current;
68
74
  if (!el) return;
69
75
  el.setAttribute("data-color-mode", resolvedMode);
@@ -73,10 +79,10 @@ function ThemeProvider({
73
79
  el.style.setProperty(varName, value);
74
80
  }
75
81
  }, [resolvedMode, theme]);
76
- const setColorMode = (0, import_react.useCallback)((mode) => {
82
+ const setColorMode = (0, import_react2.useCallback)((mode) => {
77
83
  setPreference(mode);
78
84
  }, []);
79
- const contextValue = (0, import_react.useMemo)(
85
+ const contextValue = (0, import_react2.useMemo)(
80
86
  () => ({
81
87
  theme,
82
88
  colorMode: resolvedMode,
@@ -89,9 +95,9 @@ function ThemeProvider({
89
95
  }
90
96
 
91
97
  // src/useTheme.ts
92
- var import_react2 = require("react");
98
+ var import_react3 = require("react");
93
99
  function useTheme() {
94
- const context = (0, import_react2.useContext)(ThemeContext);
100
+ const context = (0, import_react3.useContext)(ThemeContext);
95
101
  if (context === null) {
96
102
  throw new Error(
97
103
  "useTheme() must be used within a <ThemeProvider>. Wrap your component tree with <ThemeProvider> from @surf-kit/theme."
@@ -101,17 +107,17 @@ function useTheme() {
101
107
  }
102
108
 
103
109
  // src/useColorMode.ts
104
- var import_react3 = require("react");
110
+ var import_react4 = require("react");
105
111
  function getSystemPreference2() {
106
112
  if (typeof window === "undefined") return "light";
107
113
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
108
114
  }
109
115
  function useColorMode() {
110
116
  const { colorMode, setColorMode } = useTheme();
111
- const [systemPreference, setSystemPreference] = (0, import_react3.useState)(
117
+ const [systemPreference, setSystemPreference] = (0, import_react4.useState)(
112
118
  getSystemPreference2
113
119
  );
114
- (0, import_react3.useEffect)(() => {
120
+ (0, import_react4.useEffect)(() => {
115
121
  if (typeof window === "undefined") return;
116
122
  const mql = window.matchMedia("(prefers-color-scheme: dark)");
117
123
  const handler = (e) => {
@@ -120,7 +126,7 @@ function useColorMode() {
120
126
  mql.addEventListener("change", handler);
121
127
  return () => mql.removeEventListener("change", handler);
122
128
  }, []);
123
- const toggleColorMode = (0, import_react3.useCallback)(() => {
129
+ const toggleColorMode = (0, import_react4.useCallback)(() => {
124
130
  setColorMode(colorMode === "light" ? "dark" : "light");
125
131
  }, [colorMode, setColorMode]);
126
132
  return {
@@ -301,6 +307,7 @@ var surfKitPreset = {
301
307
  };
302
308
  // Annotate the CommonJS export names for ESM import in node:
303
309
  0 && (module.exports = {
310
+ ThemeContext,
304
311
  ThemeProvider,
305
312
  createTheme,
306
313
  surfKitPreset,
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","'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 */
@@ -39,10 +40,12 @@ interface ThemeProviderProps {
39
40
  theme?: Theme;
40
41
  /** Optional className forwarded to the wrapper div. */
41
42
  className?: string;
42
- children: React.ReactNode;
43
+ children: React__default.ReactNode;
43
44
  }
44
45
  declare function ThemeProvider({ colorMode: colorModeProp, theme, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
45
46
 
47
+ declare const ThemeContext: React.Context<ThemeContextValue | null>;
48
+
46
49
  /**
47
50
  * Returns the current theme and color mode from ThemeProvider.
48
51
  *
@@ -76,4 +79,4 @@ declare function createTheme(config: ThemeConfig): Theme;
76
79
 
77
80
  declare const surfKitPreset: Partial<Config>;
78
81
 
79
- export { type ColorMode, type Theme, type ThemeConfig, ThemeProvider, createTheme, surfKitPreset, useColorMode, useTheme };
82
+ export { type ColorMode, type Theme, type ThemeConfig, ThemeContext, ThemeProvider, createTheme, surfKitPreset, useColorMode, useTheme };
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 */
@@ -39,10 +40,12 @@ interface ThemeProviderProps {
39
40
  theme?: Theme;
40
41
  /** Optional className forwarded to the wrapper div. */
41
42
  className?: string;
42
- children: React.ReactNode;
43
+ children: React__default.ReactNode;
43
44
  }
44
45
  declare function ThemeProvider({ colorMode: colorModeProp, theme, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
45
46
 
47
+ declare const ThemeContext: React.Context<ThemeContextValue | null>;
48
+
46
49
  /**
47
50
  * Returns the current theme and color mode from ThemeProvider.
48
51
  *
@@ -76,4 +79,4 @@ declare function createTheme(config: ThemeConfig): Theme;
76
79
 
77
80
  declare const surfKitPreset: Partial<Config>;
78
81
 
79
- export { type ColorMode, type Theme, type ThemeConfig, ThemeProvider, createTheme, surfKitPreset, useColorMode, useTheme };
82
+ export { type ColorMode, type Theme, type ThemeConfig, ThemeContext, ThemeProvider, createTheme, surfKitPreset, useColorMode, useTheme };
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";
@@ -278,6 +282,7 @@ var surfKitPreset = {
278
282
  }
279
283
  };
280
284
  export {
285
+ ThemeContext,
281
286
  ThemeProvider,
282
287
  createTheme,
283
288
  surfKitPreset,
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.1.4",
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",
@@ -30,13 +30,14 @@
30
30
  "types": "dist/index.d.ts",
31
31
  "exports": {
32
32
  ".": {
33
+ "react-native": "./src/index.ts",
33
34
  "types": "./dist/index.d.ts",
34
35
  "import": "./dist/index.js",
35
36
  "require": "./dist/index.cjs"
36
37
  }
37
38
  },
38
39
  "dependencies": {
39
- "@surf-kit/tokens": "0.1.3"
40
+ "@surf-kit/tokens": "0.3.0"
40
41
  },
41
42
  "devDependencies": {
42
43
  "react": "^19.2.0",