musae 1.0.27-beta.39 → 1.0.27-beta.40

package/dist/components/theme/hooks.cjs

@@ -112,7 +112,13 @@ var PALETTE = {
  * @description
  * theme context
  */
-var Context = /*#__PURE__*/React.createContext(null);
+var Context = /*#__PURE__*/React.createContext({
+  colors: colorRole.toColorRoles(PALETTE, "light"),
+  mode: "light",
+  toggle: function toggle() {
+    return "dark";
+  }
+});
 /**
  * @author murukal
  *
@@ -124,9 +130,6 @@ var Context = /*#__PURE__*/React.createContext(null);
  */
 var useTheme = function useTheme() {
   var context = React.useContext(Context);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
   return context;
 };
 /**
@@ -171,16 +174,16 @@ var useSwitchable = function useSwitchable(_ref) {
     (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(className.normalize(styled[nextMode].className, styled[isDarking ? "darking" : "lighting"].className)));
   });
   relax.useMounted(function () {
-    var _document$documentEle3;
+    var _document$documentEle3, _document$documentEle4;
     (_document$documentEle3 = document.documentElement.classList).add.apply(_document$documentEle3, _toConsumableArray(className.normalize(styled["default"].className)));
     document.documentElement.attributeStyleMap.set("--color-light", theme.palette.neutral[100]);
     document.documentElement.attributeStyleMap.set("--color-dark", theme.palette.neutral[0]);
     new rxjs.Observable(function (subscriber) {
-      subscriber.next(mode);
       trigger.current = subscriber;
     }).pipe(rxjs.distinctUntilChanged()).subscribe({
       next: repaint
     });
+    (_document$documentEle4 = document.documentElement.classList).add.apply(_document$documentEle4, _toConsumableArray(className.normalize(styled[mode].className)));
   });
   // dark, light mode switch
   var toggle = relax.useEvent(function (event) {
@@ -212,8 +215,8 @@ var useSwitchable = function useSwitchable(_ref) {
       });
     });
     animation.finished.then(function () {
-      var _document$documentEle4;
-      (_document$documentEle4 = document.documentElement.classList).remove.apply(_document$documentEle4, _toConsumableArray(className.normalize(styled.lighting.className, styled.darking.className)));
+      var _document$documentEle5;
+      (_document$documentEle5 = document.documentElement.classList).remove.apply(_document$documentEle5, _toConsumableArray(className.normalize(styled.lighting.className, styled.darking.className)));
     });
     return nextMode;
   });

package/dist/components/theme/hooks.d.ts

@@ -5,7 +5,7 @@ export declare const PALETTE: Readonly<Palette>;
  * @description
  * theme context
  */
-export declare const Context: import("react").Context<ContextValue | null>;
+export declare const Context: import("react").Context<ContextValue>;
 /**
  * @author murukal
  *

package/dist/components/theme/hooks.mjs

@@ -1,6 +1,6 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useContext, createContext, useState, useRef, useMemo } from 'react';
+import { createContext, useContext, useState, useRef, useMemo } from 'react';
 import { toColorRoles } from '../../utils/color-role.mjs';
 import { useEvent, useMounted, isFunction } from '@aiszlab/relax';
 import { normalize } from '@aiszlab/relax/class-name';
@@ -110,7 +110,13 @@ var PALETTE = {
  * @description
  * theme context
  */
-var Context = /*#__PURE__*/createContext(null);
+var Context = /*#__PURE__*/createContext({
+  colors: toColorRoles(PALETTE, "light"),
+  mode: "light",
+  toggle: function toggle() {
+    return "dark";
+  }
+});
 /**
  * @author murukal
  *
@@ -122,9 +128,6 @@ var Context = /*#__PURE__*/createContext(null);
  */
 var useTheme = function useTheme() {
   var context = useContext(Context);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
   return context;
 };
 /**
@@ -169,16 +172,16 @@ var useSwitchable = function useSwitchable(_ref) {
     (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(normalize(styled[nextMode].className, styled[isDarking ? "darking" : "lighting"].className)));
   });
   useMounted(function () {
-    var _document$documentEle3;
+    var _document$documentEle3, _document$documentEle4;
     (_document$documentEle3 = document.documentElement.classList).add.apply(_document$documentEle3, _toConsumableArray(normalize(styled["default"].className)));
     document.documentElement.attributeStyleMap.set("--color-light", theme.palette.neutral[100]);
     document.documentElement.attributeStyleMap.set("--color-dark", theme.palette.neutral[0]);
     new Observable(function (subscriber) {
-      subscriber.next(mode);
       trigger.current = subscriber;
     }).pipe(distinctUntilChanged()).subscribe({
       next: repaint
     });
+    (_document$documentEle4 = document.documentElement.classList).add.apply(_document$documentEle4, _toConsumableArray(normalize(styled[mode].className)));
   });
   // dark, light mode switch
   var toggle = useEvent(function (event) {
@@ -210,8 +213,8 @@ var useSwitchable = function useSwitchable(_ref) {
       });
     });
     animation.finished.then(function () {
-      var _document$documentEle4;
-      (_document$documentEle4 = document.documentElement.classList).remove.apply(_document$documentEle4, _toConsumableArray(normalize(styled.lighting.className, styled.darking.className)));
+      var _document$documentEle5;
+      (_document$documentEle5 = document.documentElement.classList).remove.apply(_document$documentEle5, _toConsumableArray(normalize(styled.lighting.className, styled.darking.className)));
     });
     return nextMode;
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.27-beta.39",
+  "version": "1.0.27-beta.40",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",