@wise/components-theming 0.1.1 → 0.1.2-next-b582ce3e07.2570

package/CHANGELOG.md

@@ -3,6 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
 ## [0.1.1](https://github.com/transferwise/neptune-web/compare/@wise/components-theming@0.1.0...@wise/components-theming@0.1.1) (2022-11-07)
 
 
@@ -14,6 +15,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+
 # 0.1.0 (2022-11-02)
 
 

package/dist/cjs/index.d.ts

@@ -9,6 +9,12 @@ type ThemeProviderProps = PropsWithChildren<{
     theme: ComponentTheme | undefined;
 }>;
 declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-declare const useTheme: () => ComponentTheme;
+interface ThemeHookValue {
+    theme: ComponentTheme;
+    isModern: boolean;
+    isDark: boolean;
+    className: string;
+}
+declare const useTheme: () => ThemeHookValue;
 export type { ComponentTheme };
 export { ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -3,6 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+var modernThemes = ['personal'];
+var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
 var ThemeContext = /*#__PURE__*/react.createContext(DEFAULT_COMPONENT_THEME);
@@ -35,10 +37,28 @@ var ThemeProvider = function ThemeProvider(_ref) {
   });
 };
 
+var isThemeModern = function isThemeModern(theme) {
+  return modernThemes.includes(theme);
+};
+var isThemeDark = function isThemeDark(theme) {
+  return darkThemes.includes(theme);
+};
+var getThemeClassName = function getThemeClassName(theme) {
+  return "np-theme-".concat(theme);
+};
+
 var useTheme = function useTheme() {
   var _useContext;
 
-  return (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+  var theme = (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+  return react.useMemo(function () {
+    return {
+      theme: theme,
+      isModern: isThemeModern(theme),
+      isDark: isThemeDark(theme),
+      className: getThemeClassName(theme)
+    };
+  }, [theme]);
 };
 
 exports.ThemeProvider = ThemeProvider;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const useTheme = (): ComponentTheme => {\n  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n};\n"],"names":["DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext"],"mappings":";;;;;AAIO,IAAMA,uBAAuB,GAAG,OAAhC;;ACAA,IAAMC,YAAY,gBAAGC,mBAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,kBAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,cAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC9BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,OAAA,CAAA,WAAA,GAAOC,gBAAU,CAAC1B,YAAD,CAAjB,qDAAmCD,uBAAnC,CAAA;AACD;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/helpers.ts","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","isThemeModern","includes","isThemeDark","getThemeClassName","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACHA,IAAMC,YAAY,gBAAGC,mBAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,kBAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,cAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AClCM,IAAMoB,aAAa,GAAG,SAAhBA,aAAgB,CAACtB,KAAD,EAAA;AAAA,EAAA,OAC3BN,YAAY,CAAC6B,QAAb,CAAsBvB,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAMwB,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD,EAAA;AAAA,EAAA,OACzBL,UAAU,CAAC4B,QAAX,CAAoBvB,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMyB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACzB,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACKM0B,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAM1B,KAAK,GAAG2B,CAAAA,WAAAA,GAAAA,gBAAU,CAAC9B,YAAD,CAAb,qDAA+BD,uBAA1C,CAAA;AAEA,EAAA,OAAOgC,aAAO,CACZ,YAAA;IAAA,OAAO;AACL5B,MAAAA,KAAK,EAALA,KADK;AAEL6B,MAAAA,QAAQ,EAAEP,aAAa,CAACtB,KAAD,CAFlB;AAGL8B,MAAAA,MAAM,EAAEN,WAAW,CAACxB,KAAD,CAHd;MAILc,SAAS,EAAEW,iBAAiB,CAACzB,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;;;;"}

package/dist/es/index.d.ts

@@ -9,6 +9,12 @@ type ThemeProviderProps = PropsWithChildren<{
     theme: ComponentTheme | undefined;
 }>;
 declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-declare const useTheme: () => ComponentTheme;
+interface ThemeHookValue {
+    theme: ComponentTheme;
+    isModern: boolean;
+    isDark: boolean;
+    className: string;
+}
+declare const useTheme: () => ThemeHookValue;
 export type { ComponentTheme };
 export { ThemeProvider, useTheme };

package/dist/es/index.js

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useContext } from 'react';
+import { Children, isValidElement, cloneElement, createContext, useContext, useMemo } from 'react';
 
+var modernThemes = ['personal'];
+var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
 var ThemeContext = /*#__PURE__*/createContext(DEFAULT_COMPONENT_THEME);
@@ -33,10 +35,28 @@ var ThemeProvider = function ThemeProvider(_ref) {
   });
 };
 
+var isThemeModern = function isThemeModern(theme) {
+  return modernThemes.includes(theme);
+};
+var isThemeDark = function isThemeDark(theme) {
+  return darkThemes.includes(theme);
+};
+var getThemeClassName = function getThemeClassName(theme) {
+  return "np-theme-".concat(theme);
+};
+
 var useTheme = function useTheme() {
   var _useContext;
 
-  return (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+  var theme = (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+  return useMemo(function () {
+    return {
+      theme: theme,
+      isModern: isThemeModern(theme),
+      isDark: isThemeDark(theme),
+      className: getThemeClassName(theme)
+    };
+  }, [theme]);
 };
 
 export { ThemeProvider, useTheme };

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const useTheme = (): ComponentTheme => {\n  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n};\n"],"names":["DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext"],"mappings":";;;AAIO,IAAMA,uBAAuB,GAAG,OAAhC;;ACAA,IAAMC,YAAY,gBAAGC,aAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,YAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,GAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC9BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,OAAA,CAAA,WAAA,GAAOC,UAAU,CAAC1B,YAAD,CAAjB,qDAAmCD,uBAAnC,CAAA;AACD;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/helpers.ts","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","isThemeModern","includes","isThemeDark","getThemeClassName","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACHA,IAAMC,YAAY,gBAAGC,aAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,YAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,GAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AClCM,IAAMoB,aAAa,GAAG,SAAhBA,aAAgB,CAACtB,KAAD,EAAA;AAAA,EAAA,OAC3BN,YAAY,CAAC6B,QAAb,CAAsBvB,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAMwB,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD,EAAA;AAAA,EAAA,OACzBL,UAAU,CAAC4B,QAAX,CAAoBvB,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMyB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACzB,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACKM0B,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAM1B,KAAK,GAAG2B,CAAAA,WAAAA,GAAAA,UAAU,CAAC9B,YAAD,CAAb,qDAA+BD,uBAA1C,CAAA;AAEA,EAAA,OAAOgC,OAAO,CACZ,YAAA;IAAA,OAAO;AACL5B,MAAAA,KAAK,EAALA,KADK;AAEL6B,MAAAA,QAAQ,EAAEP,aAAa,CAACtB,KAAD,CAFlB;AAGL8B,MAAAA,MAAM,EAAEN,WAAW,CAACxB,KAAD,CAHd;MAILc,SAAS,EAAEW,iBAAiB,CAACzB,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.1.1",
+  "version": "0.1.2-next-b582ce3e07.2570+b582ce3e07",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,5 +43,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "6fdf7eae7b108f3744d768b79c59e04c68be1e5b"
+  "gitHead": "b582ce3e07402bfc8387a141d6a77bf6f3539ba2"
 }

package/src/ThemeProvider.tsx

@@ -1,6 +1,7 @@
 import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';
 
 import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
+import { getThemeClassName } from './helpers';
 
 export const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);
 

package/src/const.ts

@@ -1,5 +1,9 @@
 export const componentThemes = ['light', 'personal'] as const;
+export const modernThemes = ['personal'] as const;
+export const darkThemes = [] as const;
 
 export type ComponentTheme = typeof componentThemes[number];
+export type ModernTheme = typeof modernThemes[number];
+export type DarkTheme = typeof darkThemes[number];
 
 export const DEFAULT_COMPONENT_THEME = 'light' as const;

package/src/helpers.ts

@@ -0,0 +1,9 @@
+import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';
+
+export const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>
+  modernThemes.includes(theme as ModernTheme);
+
+export const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>
+  darkThemes.includes(theme as DarkTheme);
+
+export const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;

package/src/useTheme.spec.tsx

@@ -9,7 +9,12 @@ describe('useTheme', () => {
       result: { current },
     } = renderHook(() => useTheme());
 
-    expect(current).toStrictEqual('light');
+    expect(current).toStrictEqual({
+      theme: 'light',
+      isModern: false,
+      isDark: false,
+      className: 'np-theme-light',
+    });
   });
 
   it('returns provided theme', () => {
@@ -22,6 +27,11 @@ describe('useTheme', () => {
       },
     });
 
-    expect(current).toStrictEqual('personal');
+    expect(current).toStrictEqual({
+      className: 'np-theme-personal',
+      isDark: false,
+      isModern: true,
+      theme: 'personal',
+    });
   });
 });

package/src/useTheme.ts

@@ -1,8 +1,26 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 
 import { ThemeContext } from './ThemeProvider';
 import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
+import { getThemeClassName, isThemeDark, isThemeModern } from './helpers';
 
-export const useTheme = (): ComponentTheme => {
-  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;
+interface ThemeHookValue {
+  theme: ComponentTheme;
+  isModern: boolean;
+  isDark: boolean;
+  className: string;
+}
+
+export const useTheme = (): ThemeHookValue => {
+  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;
+
+  return useMemo(
+    () => ({
+      theme,
+      isModern: isThemeModern(theme),
+      isDark: isThemeDark(theme),
+      className: getThemeClassName(theme),
+    }),
+    [theme],
+  );
 };