@hyphen/hyphen-components 2.11.5 → 2.12.0

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -8,7 +8,8 @@ type ThemeProviderProps = {
 type ThemeProviderState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
+    isDarkMode?: boolean;
 };
+export declare const ThemeProviderContext: React.Context<ThemeProviderState>;
 export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): React.JSX.Element;
-export declare const useTheme: () => ThemeProviderState;
 export {};

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useBreakpoint/useBreakpoint';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
 export * from './useOpenClose/useOpenClose';
+export * from './useTheme/useTheme';
 export * from './useWindowSize/useWindowSize';
-export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';

package/dist/hooks/useTheme/useTheme.d.ts

@@ -0,0 +1,5 @@
+export declare const useTheme: () => {
+    theme: import("../../components/ThemeProvider/ThemeProvider").Theme;
+    setTheme: (theme: import("../../components/ThemeProvider/ThemeProvider").Theme) => void;
+    isDarkMode?: boolean | undefined;
+};

package/dist/hooks/useTheme/useTheme.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof ThemeProvider>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;

package/dist/hyphen-components.cjs.development.js

@@ -4000,22 +4000,19 @@ function ThemeProvider(_ref) {
     }
     root.classList.add(theme);
   }, [theme]);
+  var isDarkMode = theme === 'dark' || theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches;
   var value = {
     theme: theme,
     setTheme: function setTheme(theme) {
       localStorage.setItem(storageKey, theme);
       _setTheme(theme);
-    }
+    },
+    isDarkMode: isDarkMode
   };
   return React.createElement(ThemeProviderContext.Provider, _extends({}, props, {
     value: value
   }), children);
 }
-var useTheme = function useTheme() {
-  var context = React.useContext(ThemeProviderContext);
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
-  return context;
-};
 
 var styles = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-error":"ToastNotification-module_toast-error__4ArAY","toast-dismiss":"ToastNotification-module_toast-dismiss__xxmkb","toast-notification-enter-top":"ToastNotification-module_toast-notification-enter-top__ZZDCr","toast-notification-exit-top":"ToastNotification-module_toast-notification-exit-top__fOIkZ","toast-notification-enter-bottom":"ToastNotification-module_toast-notification-enter-bottom__So3w7","toast-notification-exit-bottom":"ToastNotification-module_toast-notification-exit-bottom__DDthi","toast-notification-exit-left":"ToastNotification-module_toast-notification-exit-left__Fh1hC","toast-notification-exit-right":"ToastNotification-module_toast-notification-exit-right__C1jQ9","toast-notification-fade-in":"ToastNotification-module_toast-notification-fade-in__JlSGi","toast-notification-fade-out":"ToastNotification-module_toast-notification-fade-out__r6q4Q"};
 
@@ -4655,6 +4652,12 @@ var useOpenClose = function useOpenClose(props) {
   };
 };
 
+var useTheme = function useTheme() {
+  var context = React.useContext(ThemeProviderContext);
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
+  return context;
+};
+
 exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Box = Box;
@@ -4702,6 +4705,7 @@ exports.TextInputInset = TextInputInset;
 exports.TextareaInput = TextareaInput;
 exports.TextareaInputInset = TextareaInputInset;
 exports.ThemeProvider = ThemeProvider;
+exports.ThemeProviderContext = ThemeProviderContext;
 exports.TimePicker = TimePicker;
 exports.TimePickerNative = TimePickerNative;
 exports.ToastContainer = ToastContainer;