musae 0.3.3 → 0.3.6

package/dist/components/rich-text-editor/rich-text-editor.mjs

@@ -24,10 +24,10 @@ import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { CodeNode } from '@lexical/code';
 import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.mjs';
 import ToolbarPlugin from './plugins/toolbar/index.mjs';
-import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.mjs';
+import MarkdownShortcutPlugin from './plugins/markdown-shortcut/index.mjs';
 import { typography } from '../theme/theme.mjs';
 import '../checkbox/index.mjs';
-import { $convertFromMarkdownString } from '@lexical/markdown';
+import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown';
 import styles$1 from '../checkbox/styles.mjs';
 
 var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style"];
@@ -176,7 +176,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            $convertFromMarkdownString(defaultValue, TRANSFORMERS);
+            $convertFromMarkdownString(defaultValue, TRANSFORMERS, void 0, true);
             break;
           default:
             editor.setEditorState(editor.parseEditorState(defaultValue));

package/dist/components/select/utils.cjs

@@ -11,10 +11,8 @@ var relax = require('@aiszlab/relax');
 var toValues = function toValues(valueOrValues) {
   // empty
   if (relax.isVoid(valueOrValues)) return [];
-  // already array
-  if (relax.isArray(valueOrValues)) return valueOrValues;
   // convert to array
-  return [valueOrValues];
+  return relax.toArray(valueOrValues);
 };
 /**
  * @description

package/dist/components/select/utils.d.ts

@@ -5,7 +5,7 @@ import type { MenuItem } from "musae/types/menu";
  * @description
  * convert to value array
  */
-export declare const toValues: (valueOrValues?: ValueOrValues) => Value[];
+export declare const toValues: (valueOrValues?: ValueOrValues) => (string | number | bigint | Pick<Option, "value" | "label">)[];
 /**
  * @description
  * convert to key

package/dist/components/select/utils.mjs

@@ -2,7 +2,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
-import { isVoid, isArray } from '@aiszlab/relax';
+import { isVoid, toArray } from '@aiszlab/relax';
 
 /**
  * @description
@@ -11,10 +11,8 @@ import { isVoid, isArray } from '@aiszlab/relax';
 var toValues = function toValues(valueOrValues) {
   // empty
   if (isVoid(valueOrValues)) return [];
-  // already array
-  if (isArray(valueOrValues)) return valueOrValues;
   // convert to array
-  return [valueOrValues];
+  return toArray(valueOrValues);
 };
 /**
  * @description

package/dist/components/skeleton/skeleton.cjs

@@ -9,7 +9,7 @@ var relax = require('@aiszlab/relax');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
+var color = require('@aiszlab/fuzzy/color');
 
 var styles = {
   variables: function variables(props) {
@@ -22,48 +22,6 @@ var styles = {
       "----lighter-shadow": props.lighterShadow != null ? props.lighterShadow : "initial"
     }];
   },
-  title: {
-    width: "musaex-1fvqbsf",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-ok3b7d",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  button: {
-    width: "musaex-1lwsb27",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  avatar: {
-    width: "musaex-rdd3y",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
   skeleton: {
     background: "musaex-uwpeme",
     backgroundAttachment: null,
@@ -99,16 +57,15 @@ var styles = {
 };
 var Skeleton = function Skeleton(_ref) {
   var _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? false : _ref$animation,
-    variant = _ref.variant,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
     className$1 = _ref.className,
     style = _ref.style;
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Skeleton);
   var theme = hooks.useTheme();
   var styled = stylex.default.props(styles.variables({
-    shadow: colors.toRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin),
-    lighterShadow: colors.toRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick)
-  }), !!variant && styles[variant], animation && styles.animation);
+    shadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin),
+    lighterShadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick)
+  }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(classNames[className.SkeletonClassToken.Skeleton], className$1, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)

package/dist/components/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
 import type { SkeletonProps } from "musae/types/skeleton";
 import React from "react";
-declare const Skeleton: ({ animation, variant, className, style }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: ({ animation, className, style }: SkeletonProps) => React.JSX.Element;
 export default Skeleton;

package/dist/components/skeleton/skeleton.mjs

@@ -7,7 +7,7 @@ import { clsx } from '@aiszlab/relax';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { toRgba } from '../../utils/colors.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 
 var styles = {
   variables: function variables(props) {
@@ -20,48 +20,6 @@ var styles = {
       "----lighter-shadow": props.lighterShadow != null ? props.lighterShadow : "initial"
     }];
   },
-  title: {
-    width: "musaex-1fvqbsf",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-ok3b7d",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  button: {
-    width: "musaex-1lwsb27",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  avatar: {
-    width: "musaex-rdd3y",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
   skeleton: {
     background: "musaex-uwpeme",
     backgroundAttachment: null,
@@ -97,16 +55,15 @@ var styles = {
 };
 var Skeleton = function Skeleton(_ref) {
   var _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? false : _ref$animation,
-    variant = _ref.variant,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
     className = _ref.className,
     style = _ref.style;
   var classNames = useClassNames(ComponentToken.Skeleton);
   var theme = useTheme();
   var styled = _stylex.props(styles.variables({
-    shadow: toRgba(theme.colors.shadow, OPACITY.thin),
-    lighterShadow: toRgba(theme.colors.shadow, OPACITY.thick)
-  }), !!variant && styles[variant], animation && styles.animation);
+    shadow: hexToRgba(theme.colors.shadow, OPACITY.thin),
+    lighterShadow: hexToRgba(theme.colors.shadow, OPACITY.thick)
+  }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[SkeletonClassToken.Skeleton], className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)

package/dist/components/steps/context.d.ts

@@ -1,2 +1,2 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/steps";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/steps/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { StepItemProps } from "./types";
+import type { StepItemProps } from "musae/types/steps";
 declare const Item: ({ leading, title, description, value }: StepItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/steps/steps.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StepsProps } from "./types";
+import type { StepsProps } from "musae/types/steps";
 /**
  * @description
  * `Steps` component

package/dist/components/switch/switch.cjs

@@ -11,6 +11,7 @@ var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var componentToken = require('../../utils/component-token.cjs');
+var color = require('@aiszlab/fuzzy/color');
 var check = require('../icon/icons/navigation/check.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
 
@@ -258,28 +259,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[colors.ColorToken.SurfaceContainerHighest],
       color: theme.colors[colors.ColorToken.OnSurfaceVariant]
     }, disabled && {
-      borderColor: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
-      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.SurfaceVariant], tokens_stylex.OPACITY.medium),
-      color: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
+      borderColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.SurfaceVariant], tokens_stylex.OPACITY.medium),
+      color: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.Primary],
       color: theme.colors[colors.ColorToken.OnPrimary]
     }, disabled && {
-      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
       color: theme.colors[colors.ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
     slider: stylex.default.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.OnSurfaceVariant],
       color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
     }, disabled && {
-      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
       color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.OnPrimary],
       color: theme.colors[colors.ColorToken.OnPrimaryContainer]
     }, disabled && {
       backgroundColor: theme.colors[colors.ColorToken.Surface],
-      color: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
+      color: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
     }))),
     supporting: stylex.default.props(styles.supporting["default"], isChecked && styles.supporting.checked),
     leading: stylex.default.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),

package/dist/components/switch/switch.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { SwitchProps } from "./types";
+import type { SwitchProps } from "musae/types/switch";
 declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, onChange, }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/dist/components/switch/switch.mjs

@@ -5,10 +5,11 @@ import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken, toRgba } from '../../utils/colors.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { SwitchClassToken } from '../../utils/class-name.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 import Check from '../icon/icons/navigation/check.mjs';
 import Close from '../icon/icons/navigation/close.mjs';
 
@@ -256,28 +257,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest],
       color: theme.colors[ColorToken.OnSurfaceVariant]
     }, disabled && {
-      borderColor: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
-      backgroundColor: toRgba(theme.colors[ColorToken.SurfaceVariant], OPACITY.medium),
-      color: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
+      borderColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.SurfaceVariant], OPACITY.medium),
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors[ColorToken.Primary],
       color: theme.colors[ColorToken.OnPrimary]
     }, disabled && {
-      backgroundColor: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
       color: theme.colors[ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
     slider: _stylex.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnSurfaceVariant],
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }, disabled && {
-      backgroundColor: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnPrimary],
       color: theme.colors[ColorToken.OnPrimaryContainer]
     }, disabled && {
       backgroundColor: theme.colors[ColorToken.Surface],
-      color: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
     }))),
     supporting: _stylex.props(styles.supporting["default"], isChecked && styles.supporting.checked),
     leading: _stylex.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),

package/dist/components/table/body.cjs

@@ -76,7 +76,9 @@ var Body = function Body() {
   }));
   var rows = table.getRowModel().rows;
   var _isEmpty = relax.isEmpty(rows);
-  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: table.getAllColumns().length
+  }, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
       key: row.id
     }, row.getVisibleCells().map(function (cell) {

package/dist/components/table/body.mjs

@@ -74,7 +74,9 @@ var Body = function Body() {
   }));
   var rows = table.getRowModel().rows;
   var _isEmpty = isEmpty(rows);
-  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: table.getAllColumns().length
+  }, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
       key: row.id
     }, row.getVisibleCells().map(function (cell) {

package/dist/components/tabs/context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/tabs";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

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

@@ -1,11 +1,11 @@
 import { type Key, type RefObject } from "react";
-import type { TabItem } from "./types";
+import type { TabItem } from "musae/types/tabs";
 import type { Partialable } from "@aiszlab/relax/types";
 /**
  * @description
  * use tab context
  */
-export declare const useTabsContext: () => import("./types").ContextValue;
+export declare const useTabsContext: () => import("musae/types/tabs").ContextValue;
 /**
  * @description
  * tabs

package/dist/components/tabs/navigation.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type NavigationProps } from "./types";
+import { type NavigationProps } from "musae/types/tabs";
 declare const Navigation: ({ onChange }: NavigationProps) => React.JSX.Element;
 export default Navigation;

package/dist/components/tabs/panels.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type PanelsProps } from "./types";
+import { type PanelsProps } from "musae/types/tabs";
 declare const Panels: ({ forceRender, destroyable, activatedKeys }: PanelsProps) => React.JSX.Element;
 export default Panels;

package/dist/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TabItemProps } from "./types";
+import type { TabItemProps } from "musae/types/tabs";
 declare const Tab: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default Tab;

package/dist/components/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TabsProps } from "./types";
+import type { TabsProps } from "musae/types/tabs";
 declare const Tabs: ({ items, className, style, activeKey: _activeKey, defaultActiveKey, forceRender, destroyable, }: TabsProps) => React.JSX.Element | null;
 export default Tabs;

package/dist/components/tag/tag.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TagProps } from "./types";
+import type { TagProps } from "musae/types/tag";
 declare const Tag: ({ children, size, className, style, closable, onClose, leading, }: TagProps) => React.JSX.Element;
 export default Tag;

package/dist/components/theme/hooks.cjs

@@ -8,7 +8,7 @@ var rxjs = require('rxjs');
 
 var PALETTE = {
   primary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#21005D",
     "20": "#381E72",
     "30": "#4F378B",
@@ -23,7 +23,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   secondary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D192B",
     "20": "#332D41",
     "30": "#4A4458",
@@ -38,7 +38,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   tertiary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#31111D",
     "20": "#492532",
     "30": "#633B48",
@@ -53,7 +53,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   error: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#410E0B",
     "20": "#601410",
     "30": "#8C1D18",
@@ -68,7 +68,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutral: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1B20",
     "20": "#48464C",
     "30": "#48464C",
@@ -83,7 +83,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutralVariant: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1A22",
     "20": "#322F37",
     "30": "#49454F",

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

@@ -1,5 +1,5 @@
 import { MouseEvent } from "react";
-import type { Palette, ContextValue, Theme, Mode } from "./types";
+import type { Palette, ContextValue, Theme, Mode } from "musae/types/theme";
 export declare const PALETTE: Readonly<Palette>;
 /**
  * @description

package/dist/components/theme/hooks.mjs

@@ -8,7 +8,7 @@ import { Observable, distinctUntilChanged } from 'rxjs';
 
 var PALETTE = {
   primary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#21005D",
     "20": "#381E72",
     "30": "#4F378B",
@@ -23,7 +23,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   secondary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D192B",
     "20": "#332D41",
     "30": "#4A4458",
@@ -38,7 +38,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   tertiary: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#31111D",
     "20": "#492532",
     "30": "#633B48",
@@ -53,7 +53,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   error: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#410E0B",
     "20": "#601410",
     "30": "#8C1D18",
@@ -68,7 +68,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutral: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1B20",
     "20": "#48464C",
     "30": "#48464C",
@@ -83,7 +83,7 @@ var PALETTE = {
     "100": "#FFF"
   },
   neutralVariant: {
-    "0": "#000",
+    "0": "#000000",
     "10": "#1D1A22",
     "20": "#322F37",
     "30": "#49454F",

package/dist/components/theme/theme-provider.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var hooks = require('./hooks.cjs');
-var deepmerge = require('deepmerge');
+var relax = require('@aiszlab/relax');
 
 /**
  * @author murukal
@@ -11,13 +11,19 @@ var deepmerge = require('deepmerge');
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-var ThemeProvider = function ThemeProvider(props) {
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _theme = _ref.theme,
+    children = _ref.children;
   var theme = React.useMemo(function () {
-    var _props$theme;
-    return deepmerge((_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : {}, {
+    if (!_theme) {
+      return {
+        palette: hooks.PALETTE
+      };
+    }
+    return relax.merge(_theme, {
       palette: hooks.PALETTE
     });
-  }, [props.theme]);
+  }, [_theme]);
   var _useSwitchable = hooks.useSwitchable({
       theme: theme
     }),
@@ -30,7 +36,7 @@ var ThemeProvider = function ThemeProvider(props) {
       mode: mode,
       toggle: toggle
     }
-  }, props.children);
+  }, children);
 };
 
 exports.default = ThemeProvider;

package/dist/components/theme/theme-provider.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Props } from "./types";
+import type { Props } from "musae/types/theme";
 /**
  * @author murukal
  *
@@ -7,5 +7,5 @@ import type { Props } from "./types";
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-declare const ThemeProvider: (props: Props) => React.JSX.Element;
+declare const ThemeProvider: ({ theme: _theme, children }: Props) => React.JSX.Element;
 export default ThemeProvider;

package/dist/components/theme/theme-provider.mjs

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { PALETTE, useSwitchable, Context } from './hooks.mjs';
-import deepmerge from 'deepmerge';
+import { merge } from '@aiszlab/relax';
 
 /**
  * @author murukal
@@ -9,13 +9,19 @@ import deepmerge from 'deepmerge';
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-var ThemeProvider = function ThemeProvider(props) {
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _theme = _ref.theme,
+    children = _ref.children;
   var theme = useMemo(function () {
-    var _props$theme;
-    return deepmerge((_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : {}, {
+    if (!_theme) {
+      return {
+        palette: PALETTE
+      };
+    }
+    return merge(_theme, {
       palette: PALETTE
     });
-  }, [props.theme]);
+  }, [_theme]);
   var _useSwitchable = useSwitchable({
       theme: theme
     }),
@@ -28,7 +34,7 @@ var ThemeProvider = function ThemeProvider(props) {
       mode: mode,
       toggle: toggle
     }
-  }, props.children);
+  }, children);
 };
 
 export { ThemeProvider as default };