@szum-tech/design-system 1.1.3 → 1.1.5

package/README.md

@@ -23,12 +23,14 @@ Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/p
 
 ```sh
 npm install @szum-tech/design-system
+npm install -D tailwindcss tailwind-scrollbar 
 ```
 
 **yarn:**
 
 ```sh
 yarn add @szum-tech/design-system
+yarn add -D tailwindcss tailwind-scrollbar
 ```
 
 ## Configuration 
@@ -83,8 +85,6 @@ function Providers({children}) {
 }
 ```
 
-
-
 ## Documentation 
 
 [Szum-Tech Design System](https://janszewczyk.github.io/design-system)

package/dist/index.d.ts

@@ -11,10 +11,20 @@ interface ThemeContextType {
 declare const ThemeContext: React.Context<ThemeContextType>;
 
 interface ThemeProviderProps {
-    defaultTheme?: ThemeType;
+    /**
+     * Children Components using theming.
+     */
     children?: React.ReactNode;
+    /**
+     * Define the default theme which is set at the beginning if neither local storage nor media is defined.
+     */
+    defaultTheme?: ThemeType;
+    /**
+     * Define theme that is always set initially.
+     */
+    theme?: ThemeType;
 }
-declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderProps): JSX.Element;
 
 declare const useTheme: () => ThemeContextType;
 

package/dist/index.js

@@ -17,18 +17,18 @@ function Button() {
   });
 }
 var ThemeContext = React2__default["default"].createContext({});
-function getInitialTheme() {
+function getInitialTheme(defaultTheme) {
   if (typeof window !== "undefined" && window.localStorage) {
     const storageTheme = window.localStorage.getItem("theme");
     if (storageTheme === "dark" || !storageTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       return "dark";
     }
   }
-  return "light";
+  return defaultTheme ?? "light";
 }
-function ThemeProvider({ children, defaultTheme }) {
-  const [theme, setTheme] = React2__default["default"].useState(
-    defaultTheme ? defaultTheme : getInitialTheme
+function ThemeProvider({ children, defaultTheme, theme }) {
+  const [themeState, setThemeState] = React2__default["default"].useState(
+    theme ? theme : getInitialTheme(defaultTheme)
   );
   function rawSetTheme(rawTheme) {
     if (typeof window !== "undefined" && window.localStorage) {
@@ -41,10 +41,10 @@ function ThemeProvider({ children, defaultTheme }) {
     }
   }
   React2__default["default"].useEffect(() => {
-    rawSetTheme(theme);
-  }, [theme]);
+    rawSetTheme(themeState);
+  }, [themeState]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
-    value: { theme, setTheme },
+    value: { theme: themeState, setTheme: setThemeState },
     children
   });
 }

package/dist/index.mjs

@@ -9,18 +9,18 @@ function Button() {
   });
 }
 var ThemeContext = React2.createContext({});
-function getInitialTheme() {
+function getInitialTheme(defaultTheme) {
   if (typeof window !== "undefined" && window.localStorage) {
     const storageTheme = window.localStorage.getItem("theme");
     if (storageTheme === "dark" || !storageTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       return "dark";
     }
   }
-  return "light";
+  return defaultTheme ?? "light";
 }
-function ThemeProvider({ children, defaultTheme }) {
-  const [theme, setTheme] = React2.useState(
-    defaultTheme ? defaultTheme : getInitialTheme
+function ThemeProvider({ children, defaultTheme, theme }) {
+  const [themeState, setThemeState] = React2.useState(
+    theme ? theme : getInitialTheme(defaultTheme)
   );
   function rawSetTheme(rawTheme) {
     if (typeof window !== "undefined" && window.localStorage) {
@@ -33,10 +33,10 @@ function ThemeProvider({ children, defaultTheme }) {
     }
   }
   React2.useEffect(() => {
-    rawSetTheme(theme);
-  }, [theme]);
+    rawSetTheme(themeState);
+  }, [themeState]);
   return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-    value: { theme, setTheme },
+    value: { theme: themeState, setTheme: setThemeState },
     children
   });
 }

package/package.json

@@ -43,6 +43,7 @@
     "react-dom": "^18.2.0",
     "semantic-release": "^19.0.5",
     "storybook-dark-mode": "^1.1.2",
+    "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.2.1",
     "tsup": "^6.3.0",
     "typescript": "^4.8.4"
@@ -92,8 +93,10 @@
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "1.1.3",
-  "dependencies": {
-    "tailwind-scrollbar": "^2.0.1"
+  "version": "1.1.5",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "tailwind-scrollbar": "^2.0.1",
+    "tailwindcss": "^3.2.1"
   }
 }