musae 1.1.0 → 1.1.1-beta.0

package/dist/components/theme/hooks.cjs

@@ -185,7 +185,7 @@ var useSwitchable = function useSwitchable(_ref) {
     });
   });
   // dark, light mode switch
-  var toggle = relax.useEvent(function (event) {
+  var toggle = relax.useEvent(function (event, options) {
     var isDarking = mode === "light";
     var nextMode = isDarking ? "dark" : "light";
     // dom not support animation
@@ -199,7 +199,7 @@ var useSwitchable = function useSwitchable(_ref) {
       (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(nextMode);
     });
     animation.ready.then(function () {
-      var _event$clientX, _event$clientY;
+      var _event$clientX, _event$clientY, _options$duration;
       var x = (_event$clientX = event === null || event === void 0 ? void 0 : event.clientX) !== null && _event$clientX !== void 0 ? _event$clientX : 0;
       var y = (_event$clientY = event === null || event === void 0 ? void 0 : event.clientY) !== null && _event$clientY !== void 0 ? _event$clientY : 0;
       var radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
@@ -207,7 +207,7 @@ var useSwitchable = function useSwitchable(_ref) {
       document.documentElement.animate({
         clipPath: isDarking ? clipPath : clipPath.toReversed()
       }, {
-        duration: 300,
+        duration: (_options$duration = options === null || options === void 0 ? void 0 : options.duration) !== null && _options$duration !== void 0 ? _options$duration : 300,
         easing: "ease-in",
         fill: "forwards",
         pseudoElement: isDarking ? "::view-transition-new(root)" : "::view-transition-old(root)"

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import type { Palette, ContextValue, Theme, Mode } from "../../types/theme";
+import type { Palette, ContextValue, Theme, Mode, ToggleOptions } from "../../types/theme";
 export declare const PALETTE: Readonly<Palette>;
 /**
  * @description
@@ -26,6 +26,6 @@ export declare const useSwitchable: ({ theme, defaultMode, }: {
     defaultMode?: Mode;
 }) => {
     mode: Mode;
-    toggle: (event?: MouseEvent) => Mode;
+    toggle: (event?: MouseEvent, options?: ToggleOptions) => Mode;
     colors: Record<import("../../utils/color-role").ColorRole, string>;
 };

package/dist/components/theme/hooks.mjs

@@ -183,7 +183,7 @@ var useSwitchable = function useSwitchable(_ref) {
     });
   });
   // dark, light mode switch
-  var toggle = useEvent(function (event) {
+  var toggle = useEvent(function (event, options) {
     var isDarking = mode === "light";
     var nextMode = isDarking ? "dark" : "light";
     // dom not support animation
@@ -197,7 +197,7 @@ var useSwitchable = function useSwitchable(_ref) {
       (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(nextMode);
     });
     animation.ready.then(function () {
-      var _event$clientX, _event$clientY;
+      var _event$clientX, _event$clientY, _options$duration;
       var x = (_event$clientX = event === null || event === void 0 ? void 0 : event.clientX) !== null && _event$clientX !== void 0 ? _event$clientX : 0;
       var y = (_event$clientY = event === null || event === void 0 ? void 0 : event.clientY) !== null && _event$clientY !== void 0 ? _event$clientY : 0;
       var radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
@@ -205,7 +205,7 @@ var useSwitchable = function useSwitchable(_ref) {
       document.documentElement.animate({
         clipPath: isDarking ? clipPath : clipPath.toReversed()
       }, {
-        duration: 300,
+        duration: (_options$duration = options === null || options === void 0 ? void 0 : options.duration) !== null && _options$duration !== void 0 ? _options$duration : 300,
         easing: "ease-in",
         fill: "forwards",
         pseudoElement: isDarking ? "::view-transition-new(root)" : "::view-transition-old(root)"

package/dist/types/theme.d.ts

@@ -44,6 +44,17 @@ declare enum ColorProperty {
  * palette
  */
 export type Palette = Record<Exclude<ColorProperty, ColorProperty.Success | ColorProperty.Warning>, Record<0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 99 | 100, string>> & Record<ColorProperty.Success | ColorProperty.Warning, Record<0 | 100, string>>;
+/**
+ * @zh 主题切换选项
+ * @en theme toggle options
+ */
+export interface ToggleOptions {
+    /**
+     * @zh 动画持续时间（毫秒），默认 300
+     * @en animation duration in milliseconds, defaults to 300
+     */
+    duration?: number;
+}
 /**
  * @author murukal
  *
@@ -67,6 +78,6 @@ export interface ContextValue {
      * @zh 切换主题模式，返回更新后的模式
      * @en toggle theme mode, returns the updated mode
      */
-    toggle: (event?: MouseEvent) => Mode;
+    toggle: (event?: MouseEvent, options?: ToggleOptions) => Mode;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.1.0",
+  "version": "1.1.1-beta.0",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",