@accelint/design-toolkit 4.0.0 → 5.0.0

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

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { PartialDeep } from 'type-fest';
+import { ThemeTokens, SemanticColorTokens, StaticColorTokens } from '../tokens/types.js';
+
+type Mode = 'dark' | 'light';
+type ContextColorTokens = SemanticColorTokens & StaticColorTokens;
+type ThemeContextValue = {
+    mode: Mode;
+    tokens: ContextColorTokens;
+    toggleMode: (mode: Mode) => void;
+};
+type ThemeProviderProps = PropsWithChildren & {
+    defaultMode?: Mode;
+    onChange?: (mode: Mode) => void;
+    /** override existing values in the theme */
+    overrides?: PartialDeep<ThemeTokens>;
+};
+declare function ThemeProvider({ children, defaultMode, onChange, overrides, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { ThemeProvider, useTheme };

package/dist/providers/theme-provider.js

@@ -0,0 +1,2 @@
+import {jsx}from'react/jsx-runtime';import'client-only';import {merge}from'lodash';import {createContext,useState,useEffect,useMemo,useContext}from'react';import {designTokens}from'../tokens/tokens.js';const u={mode:"dark",tokens:{...designTokens.dark,...designTokens.static},toggleMode:r=>{}},s=createContext(u);function P({children:r,defaultMode:d,onChange:i,overrides:n}){const[o,m]=useState(d??"dark");useEffect(()=>{if(document){const{documentElement:e}=document;e.classList.remove("dark","light"),e.classList.add(o);}},[o]);const a=useMemo(()=>{const e=merge(designTokens,n);return {...e[o],...e.static}},[o,n]);return jsx(s.Provider,{value:{mode:o,tokens:a,toggleMode:e=>{m(e),i?.(e);}},children:r})}function v(){return useContext(s)}export{P as ThemeProvider,v as useTheme};//# sourceMappingURL=theme-provider.js.map
+//# sourceMappingURL=theme-provider.js.map

package/dist/providers/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"names":["designTokens","t","ThemeContext","createContext","defaultContextValue","p","useState","defaultMode","mode","T","overrides","tokensWithOverrides","h","setMode","onChange","c"],"mappings":"0MAyCA,MACE,CAAA,CAAA,CAAA,IAAM,CAAA,MACN,CAAA,MAAU,CAAGA,CAAAA,GAAaC,YAAA,CAAA,IAASD,IAAaC,YAAA,CAAA,MAChD,CAAA,CAAA,UAAuB,CAEvB,CACF,EACMC,CAAAA,CAAeC,CAAAA,CAAiCC,CAAmB,CAAAC,aAQlE,CAAA,CAAA,CAAA,CAAA,oBAEL,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAA,QACA,CAAA,CAAA,CAAA,SACqB,CACrB,SAAoB,CAAA,CAAIC,EAAeC,CAAAA,CAAAA,QAAe,CAAA,CAAA,EAAA,MAE5C,YAAM,IACV,CAAA,GAAA,eACM,CAAA,eAAoB,YACZ,CAAA,CAAA,CAAA,SAAU,CAAA,MAAO,CAAA,cACjB,CAAA,CAAA,CAAA,CAAA,SAAU,CAAIC,GAElC,CAAA,CAAG,EAACA,CAAI,CAAC,CAAA,CAET,CAAA,CAAA,CAAA,CAAA,MAA2C,CAAA,CAAAC,OAAA,CAAM,IAC/C,CAAA,MAAkCT,CAAAA,CAAcU,KAAS,CAAAT,YACzD,CAAA,CAAA,CAAA,CAAA,OACKU,CAAAA,GAAwB,CAC3B,GAAGA,CAAAA,GAAoB,CAAA,CAAA,MAEvBH,CAAAA,CAAME,CAAS,CAAC,CAAA,CAEpB,WACgBE,GAAA,CAAA,CAAA,CAAA,eAEV,CAAA,CAAA,IACA,CAAA,CAAA,CAAA,MACA,CAAA,CAAA,CAAA,UAA4B,CAC1BC,CAAAA,EAAY,CAAA,CACZC,CAAAA,CAAAA,CAAAA,CAAWN,CAAI,GAEnB,CAEC,EAAA,CAAA,CAAA,CAAA,QAGP,CAEO,CAAA,CAAA,CAAA,CAAA,SACL,CAAA,EAAA,CAAA,OACFO,UAAA,CAAA,CAAA,CAAA","file":"theme-provider.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { merge } from 'lodash';\nimport {\n  createContext,\n  type PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { designTokens } from '../tokens/tokens';\nimport type { PartialDeep } from 'type-fest';\nimport type {\n  SemanticColorTokens,\n  StaticColorTokens,\n  ThemeTokens,\n} from '@/tokens/types';\n\ntype Mode = 'dark' | 'light';\ntype ContextColorTokens = SemanticColorTokens & StaticColorTokens;\n\ntype ThemeContextValue = {\n  mode: Mode;\n  tokens: ContextColorTokens;\n  toggleMode: (mode: Mode) => void;\n};\n/** provide default context value to avoid optional chaining and null checks on the client */\nconst defaultContextValue: ThemeContextValue = {\n  mode: 'dark',\n  tokens: { ...designTokens.dark, ...designTokens.static },\n  toggleMode: (_mode) => {\n    // no-op\n  },\n};\nconst ThemeContext = createContext<ThemeContextValue>(defaultContextValue);\n\ntype ThemeProviderProps = PropsWithChildren & {\n  defaultMode?: Mode;\n  onChange?: (mode: Mode) => void;\n  /** override existing values in the theme */\n  overrides?: PartialDeep<ThemeTokens>;\n};\nexport function ThemeProvider({\n  children,\n  defaultMode,\n  onChange,\n  overrides,\n}: ThemeProviderProps) {\n  const [mode, setMode] = useState<Mode>(defaultMode ?? 'dark');\n\n  useEffect(() => {\n    if (document) {\n      const { documentElement } = document;\n      documentElement.classList.remove('dark', 'light');\n      documentElement.classList.add(mode);\n    }\n  }, [mode]);\n\n  const tokens: ContextColorTokens = useMemo(() => {\n    const tokensWithOverrides = merge(designTokens, overrides);\n    return {\n      ...tokensWithOverrides[mode],\n      ...tokensWithOverrides.static,\n    };\n  }, [mode, overrides]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        mode,\n        tokens,\n        toggleMode: (mode: Mode) => {\n          setMode(mode);\n          onChange?.(mode);\n        },\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"]}