@wise/components-theming 0.1.0 → 0.1.1-next-3a766caf8e.2444

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,32 +3,42 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+var modernThemes = ['personal'];
+var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
+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 ThemeContext = /*#__PURE__*/react.createContext(DEFAULT_COMPONENT_THEME);
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
-      children = _ref.children;
+    theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+    children = _ref.children;
   var themedChildren = react.Children.map(children, function (child) {
     var _child$props;
-
     if (! /*#__PURE__*/react.isValidElement(child)) {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.warn('[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!');
       }
-
       return child;
-    } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-
-
-    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    var classNames = [getThemeClassName(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
     return /*#__PURE__*/react.cloneElement(child, {
-      className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+      className: classNames
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     });
   });
+
   return jsxRuntime.jsx(ThemeContext.Provider, {
     value: theme,
     children: themedChildren
@@ -37,8 +47,15 @@ var ThemeProvider = function ThemeProvider(_ref) {
 
 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/helpers.ts","../../src/ThemeProvider.tsx","../../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 { 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 React from 'react';\nimport { 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 = [getThemeClassName(theme), child?.props?.className]\n      .filter(Boolean)\n      .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, 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","isThemeModern","theme","includes","isThemeDark","getThemeClassName","ThemeContext","createContext","ThemeProvider","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAU,CAAU,CAAA;AAC1C,IAAMC,UAAU,GAAG,EAAW,CAAA;AAM9B,IAAMC,uBAAuB,GAAG,OAAgB;;ACNhD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAAqB,EAAA;AAAA,EAAA,OACjDJ,YAAY,CAACK,QAAQ,CAACD,KAAoB,CAAC,CAAA;AAAA,CAAA,CAAA;AAEtC,IAAME,WAAW,GAAG,SAAdA,WAAW,CAAIF,KAAqB,EAAA;AAAA,EAAA,OAC/CH,UAAU,CAACI,QAAQ,CAACD,KAAkB,CAAC,CAAA;AAAA,CAAA,CAAA;AAElC,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIH,KAAqB,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAiBA,KAAK,CAAA,CAAA;AAAA,CAAE;;ACFxE,IAAMI,YAAY,gBAAGC,mBAAa,CAAiBP,uBAAuB,CAAC,CAAA;AAMrEQ,IAAAA,aAAa,GAAG,SAAhBA,aAAa,CAGD,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBN,KAAK;AAALA,IAAAA,KAAK,2BAAGF,uBAAuB,GAAA,UAAA;AAC/BS,IAAAA,QAAQ,QAARA,QAAQ,CAAA;EAER,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAG,CAACH,QAAQ,EAAE,UAACI,KAAK,EAAI;AAAA,IAAA,IAAA,YAAA,CAAA;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAK,CAAC,EAAE;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;AACzC;AACAC,QAAAA,OAAO,CAACC,IAAI,CACV,iGAAiG,CAClG,CAAA;;AAEH,MAAA,OAAON,KAAK,CAAA;;AAGd;AACA,IAAA,IAAMO,UAAU,GAAG,CAACf,iBAAiB,CAACH,KAAK,CAAC,EAAEW,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAALA,KAAK,CAAEQ,KAAK,MAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAcC,CAAAA,SAAS,CAAC,CACnEC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,oBAAOC,kBAAY,CAACb,KAAK,EAAE;AACzBS,MAAAA,SAAS,EAAEF,UAAAA;AACX;KACM,CAAC,CAAA;AACX,GAAC,CAAC,CAAA;;EAEF,OAAOO,cAAAA,CAACrB,YAAY,CAACsB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE3B,KAAK;IAAAO,QAAGC,EAAAA,cAAAA;GAAuC,CAAA,CAAA;AACtF;;AC1BaoB,IAAAA,QAAQ,GAAG,SAAXA,QAAQ,GAAwB;AAAA,EAAA,IAAA,WAAA,CAAA;AAC3C,EAAA,IAAM5B,KAAK,GAAG6B,CAAAA,WAAAA,GAAAA,gBAAU,CAACzB,YAAY,CAAC,qDAAIN,uBAAuB,CAAA;AAEjE,EAAA,OAAOgC,aAAO,CACZ,YAAA;IAAA,OAAO;AACL9B,MAAAA,KAAK,EAALA,KAAK;AACL+B,MAAAA,QAAQ,EAAEhC,aAAa,CAACC,KAAK,CAAC;AAC9BgC,MAAAA,MAAM,EAAE9B,WAAW,CAACF,KAAK,CAAC;MAC1BoB,SAAS,EAAEjB,iBAAiB,CAACH,KAAK,CAAA;AACnC,KAAA,CAAA;AAAA,GAAC,EACF,CAACA,KAAK,CAAC,CACR,CAAA;AACH;;;;;"}

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,32 +1,42 @@
 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 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 ThemeContext = /*#__PURE__*/createContext(DEFAULT_COMPONENT_THEME);
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
-      children = _ref.children;
+    theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+    children = _ref.children;
   var themedChildren = Children.map(children, function (child) {
     var _child$props;
-
     if (! /*#__PURE__*/isValidElement(child)) {
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.warn('[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!');
       }
-
       return child;
-    } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-
-
-    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    var classNames = [getThemeClassName(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
     return /*#__PURE__*/cloneElement(child, {
-      className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+      className: classNames
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     });
   });
+
   return jsx(ThemeContext.Provider, {
     value: theme,
     children: themedChildren
@@ -35,8 +45,15 @@ var ThemeProvider = function ThemeProvider(_ref) {
 
 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/helpers.ts","../../src/ThemeProvider.tsx","../../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 { 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 React from 'react';\nimport { 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 = [getThemeClassName(theme), child?.props?.className]\n      .filter(Boolean)\n      .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, 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","isThemeModern","theme","includes","isThemeDark","getThemeClassName","ThemeContext","createContext","ThemeProvider","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAU,CAAU,CAAA;AAC1C,IAAMC,UAAU,GAAG,EAAW,CAAA;AAM9B,IAAMC,uBAAuB,GAAG,OAAgB;;ACNhD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAAqB,EAAA;AAAA,EAAA,OACjDJ,YAAY,CAACK,QAAQ,CAACD,KAAoB,CAAC,CAAA;AAAA,CAAA,CAAA;AAEtC,IAAME,WAAW,GAAG,SAAdA,WAAW,CAAIF,KAAqB,EAAA;AAAA,EAAA,OAC/CH,UAAU,CAACI,QAAQ,CAACD,KAAkB,CAAC,CAAA;AAAA,CAAA,CAAA;AAElC,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIH,KAAqB,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAiBA,KAAK,CAAA,CAAA;AAAA,CAAE;;ACFxE,IAAMI,YAAY,gBAAGC,aAAa,CAAiBP,uBAAuB,CAAC,CAAA;AAMrEQ,IAAAA,aAAa,GAAG,SAAhBA,aAAa,CAGD,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBN,KAAK;AAALA,IAAAA,KAAK,2BAAGF,uBAAuB,GAAA,UAAA;AAC/BS,IAAAA,QAAQ,QAARA,QAAQ,CAAA;EAER,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAE,UAACI,KAAK,EAAI;AAAA,IAAA,IAAA,YAAA,CAAA;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAK,CAAC,EAAE;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;AACzC;AACAC,QAAAA,OAAO,CAACC,IAAI,CACV,iGAAiG,CAClG,CAAA;;AAEH,MAAA,OAAON,KAAK,CAAA;;AAGd;AACA,IAAA,IAAMO,UAAU,GAAG,CAACf,iBAAiB,CAACH,KAAK,CAAC,EAAEW,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAALA,KAAK,CAAEQ,KAAK,MAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAcC,CAAAA,SAAS,CAAC,CACnEC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,oBAAOC,YAAY,CAACb,KAAK,EAAE;AACzBS,MAAAA,SAAS,EAAEF,UAAAA;AACX;KACM,CAAC,CAAA;AACX,GAAC,CAAC,CAAA;;EAEF,OAAOO,GAAAA,CAACrB,YAAY,CAACsB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE3B,KAAK;IAAAO,QAAGC,EAAAA,cAAAA;GAAuC,CAAA,CAAA;AACtF;;AC1BaoB,IAAAA,QAAQ,GAAG,SAAXA,QAAQ,GAAwB;AAAA,EAAA,IAAA,WAAA,CAAA;AAC3C,EAAA,IAAM5B,KAAK,GAAG6B,CAAAA,WAAAA,GAAAA,UAAU,CAACzB,YAAY,CAAC,qDAAIN,uBAAuB,CAAA;AAEjE,EAAA,OAAOgC,OAAO,CACZ,YAAA;IAAA,OAAO;AACL9B,MAAAA,KAAK,EAALA,KAAK;AACL+B,MAAAA,QAAQ,EAAEhC,aAAa,CAACC,KAAK,CAAC;AAC9BgC,MAAAA,MAAM,EAAE9B,WAAW,CAACF,KAAK,CAAC;MAC1BoB,SAAS,EAAEjB,iBAAiB,CAACH,KAAK,CAAA;AACnC,KAAA,CAAA;AAAA,GAAC,EACF,CAACA,KAAK,CAAC,CACR,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.1.0",
+  "version": "0.1.1-next-3a766caf8e.2444+3a766caf8e",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,5 +43,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "e7f68c481710db55b16fbf9fbe22f3dd0014d29a"
+  "gitHead": "3a766caf8e66ce724ef128c99cbf11cbc890c3b3"
 }

package/src/ThemeProvider.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
 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);
 
@@ -24,7 +26,9 @@ export const ThemeProvider = ({
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');
+    const classNames = [getThemeClassName(theme), child?.props?.className]
+      .filter(Boolean)
+      .join(' ');
 
     return cloneElement(child, {
       className: classNames,

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],
+  );
 };