musae 1.0.17 → 1.0.18

package/dist/components/divider/divider.cjs

@@ -112,10 +112,10 @@ var Divider = function Divider(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.divider, className$1, styled.divider.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.divider.style), style), {}, {
-      "--offset": "".concat(offset, "%"),
       "--color-outline-variant": theme$1.colors["outline-variant"],
       "--margin-start": "".concat(margins[0], "px"),
-      "--margin-end": "".concat(margins[1], "px")
+      "--margin-end": "".concat(margins[1], "px"),
+      "--offset": "".concat(offset, "%")
     })
   }, isLabeled && (/*#__PURE__*/React.createElement("span", {
     className: className.stringify(classNames.label, styled.label.className),

package/dist/components/divider/divider.mjs

@@ -108,10 +108,10 @@ var Divider = function Divider(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.divider, className, styled.divider.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.divider.style), style), {}, {
-      "--offset": "".concat(offset, "%"),
       "--color-outline-variant": theme.colors["outline-variant"],
       "--margin-start": "".concat(margins[0], "px"),
-      "--margin-end": "".concat(margins[1], "px")
+      "--margin-end": "".concat(margins[1], "px"),
+      "--offset": "".concat(offset, "%")
     })
   }, isLabeled && (/*#__PURE__*/React.createElement("span", {
     className: stringify(classNames.label, styled.label.className),

package/dist/components/drawer/popup.cjs

@@ -10,10 +10,9 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var react = require('motion/react');
-var hooks$1 = require('./hooks.cjs');
+var hooks = require('./hooks.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.16.1/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var hooks = require('../theme/hooks.cjs');
 var className = require('@aiszlab/relax/class-name');
 var dom = require('@aiszlab/relax/dom');
 var useClosable = require('../../hooks/use-closable.cjs');
@@ -23,6 +22,7 @@ var useLocale = require('../../locale/use-locale.cjs');
 var context = require('./context.cjs');
 var relax = require('@aiszlab/relax');
 var theme = require('../theme/theme.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
 var _excluded = ["open", "onClose", "placement", "closable", "onClosed", "size", "className", "onConfirm"];
 var styles = {
@@ -114,14 +114,14 @@ var Popup = function Popup(_ref) {
     onConfirm = _ref.onConfirm,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var _placement = hooks$1.PLACEMENTS[placement];
-  var theme$1 = hooks.useTheme();
+  var _placement = hooks.PLACEMENTS[placement];
   var panelRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var _useLocale = useLocale.useLocale("drawer"),
     _useLocale2 = _slicedToArray(_useLocale, 1),
     locale = _useLocale2[0];
   var ref = React.useRef(null);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["on-primary", "surface-dim", "outline-variant"]);
   // children render hooks
   var _useClosable = useClosable.useClosable({
       closable: closable,
@@ -197,10 +197,7 @@ var Popup = function Popup(_ref) {
     tabIndex: -1,
     ref: ref,
     className: className.stringify(classNames.drawer, className$1, styled.popup.className),
-    style: _objectSpread(_objectSpread({}, styled.popup.style), {}, {
-      "--color-on-primary": theme$1.colors["on-primary"],
-      "--color-surface-dim": theme$1.colors["surface-dim"],
-      "--color-outline-variant": theme$1.colors["outline-variant"],
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.popup.style), themeColorVars), {}, {
       "--default-position": relax.at(_placement, 0),
       "--size": "".concat(size, "px")
     }),

package/dist/components/drawer/popup.mjs

@@ -9,7 +9,6 @@ import { animate } from 'motion/react';
 import { PLACEMENTS } from './hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.16.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useTheme } from '../theme/hooks.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { contains } from '@aiszlab/relax/dom';
 import { useClosable } from '../../hooks/use-closable.mjs';
@@ -19,6 +18,7 @@ import { useLocale } from '../../locale/use-locale.mjs';
 import { CLASS_NAMES } from './context.mjs';
 import { useAsyncEffect, at } from '@aiszlab/relax';
 import { $body } from '../theme/theme.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
 var _excluded = ["open", "onClose", "placement", "closable", "onClosed", "size", "className", "onConfirm"];
 var styles = {
@@ -111,13 +111,13 @@ var Popup = function Popup(_ref) {
     props$1 = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(CLASS_NAMES);
   var _placement = PLACEMENTS[placement];
-  var theme = useTheme();
   var panelRef = useRef(null);
   var overlayRef = useRef(null);
   var _useLocale = useLocale("drawer"),
     _useLocale2 = _slicedToArray(_useLocale, 1),
     locale = _useLocale2[0];
   var ref = useRef(null);
+  var themeColorVars = useThemeColorVars(["on-primary", "surface-dim", "outline-variant"]);
   // children render hooks
   var _useClosable = useClosable({
       closable: closable,
@@ -193,10 +193,7 @@ var Popup = function Popup(_ref) {
     tabIndex: -1,
     ref: ref,
     className: stringify(classNames.drawer, className, styled.popup.className),
-    style: _objectSpread(_objectSpread({}, styled.popup.style), {}, {
-      "--color-on-primary": theme.colors["on-primary"],
-      "--color-surface-dim": theme.colors["surface-dim"],
-      "--color-outline-variant": theme.colors["outline-variant"],
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.popup.style), themeColorVars), {}, {
       "--default-position": at(_placement, 0),
       "--size": "".concat(size, "px")
     }),

package/dist/components/grid/row.cjs

@@ -20,7 +20,6 @@ var Row = function Row(_ref) {
     _ref$as = _ref.as,
     As = _ref$as === void 0 ? "div" : _ref$as,
     style = _ref.style;
-  // col and row gap in grid
   var _useGutters = useGutters.useGutters({
       gutter: gutter
     }),

package/dist/components/grid/row.mjs

@@ -16,7 +16,6 @@ var Row = function Row(_ref) {
     _ref$as = _ref.as,
     As = _ref$as === void 0 ? "div" : _ref$as,
     style = _ref.style;
-  // col and row gap in grid
   var _useGutters = useGutters({
       gutter: gutter
     }),

package/dist/components/image/image.cjs

@@ -25,8 +25,6 @@ var styles = {
     "default": {
       k1xSpc: "musaex-3nfvp2",
       kVAEAm: "musaex-1n2onr6",
-      kzqmXN: "musaex-1bl4301",
-      kZKoxP: "musaex-1f5funs",
       $$css: true
     }
   },
@@ -57,8 +55,8 @@ var styles = {
   },
   img: {
     "default": {
-      kzqmXN: "musaex-1bl4301",
-      kZKoxP: "musaex-1f5funs",
+      kzqmXN: "musaex-92755x",
+      kZKoxP: "musaex-kyvkcq",
       $$css: true
     }
   }
@@ -114,7 +112,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     turnOn();
   });
   var styled = {
-    loading: stylex.props(styles.img["default"]),
+    loading: stylex.props(styles.image["default"]),
     image: stylex.props(styles.image["default"]),
     overlay: stylex.props(styles.overlay["default"], !isHovered && styles.overlay.hidden, actions.size === 1 && actions.has("preview") && styles.overlay.previewable),
     img: stylex.props(styles.img["default"])
@@ -129,8 +127,8 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement(skeleton.default, {
       className: className.stringify(className$1, styled.loading.className),
       style: _objectSpread(_objectSpread({}, styled.loading.style), {}, {
-        "--width": width,
-        "--height": height
+        width: width,
+        height: height
       })
     });
   }
@@ -141,20 +139,18 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return fallback;
   }
   return /*#__PURE__*/React.createElement("div", _objectSpread({
-    className: className.stringify(classNames.image, styled.image.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.image.style), themeColorVars), {}, {
-      "--width": width,
-      "--height": height
+    className: className.stringify(classNames.image, className$1, styled.image.className),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.image.style), style), themeColorVars), {}, {
+      width: width,
+      height: height
     }),
     ref: imageRef
   }, hoverProps), /*#__PURE__*/React.createElement("img", {
     ref: imgRef,
-    className: className.stringify(classNames.img, className$1, styled.img.className),
-    style: _objectSpread(_objectSpread({}, styled.img.style), style),
+    className: className.stringify(classNames.img, styled.img.className),
+    style: styled.img.style,
     src: src,
     alt: alt,
-    width: width,
-    height: height,
     draggable: false,
     crossOrigin: crossOrigin,
     referrerPolicy: referrerPolicy

package/dist/components/image/image.mjs

@@ -21,8 +21,6 @@ var styles = {
     "default": {
       k1xSpc: "musaex-3nfvp2",
       kVAEAm: "musaex-1n2onr6",
-      kzqmXN: "musaex-1bl4301",
-      kZKoxP: "musaex-1f5funs",
       $$css: true
     }
   },
@@ -53,8 +51,8 @@ var styles = {
   },
   img: {
     "default": {
-      kzqmXN: "musaex-1bl4301",
-      kZKoxP: "musaex-1f5funs",
+      kzqmXN: "musaex-92755x",
+      kZKoxP: "musaex-kyvkcq",
       $$css: true
     }
   }
@@ -110,7 +108,7 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     turnOn();
   });
   var styled = {
-    loading: props(styles.img["default"]),
+    loading: props(styles.image["default"]),
     image: props(styles.image["default"]),
     overlay: props(styles.overlay["default"], !isHovered && styles.overlay.hidden, actions.size === 1 && actions.has("preview") && styles.overlay.previewable),
     img: props(styles.img["default"])
@@ -125,8 +123,8 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement(Skeleton, {
       className: stringify(className, styled.loading.className),
       style: _objectSpread(_objectSpread({}, styled.loading.style), {}, {
-        "--width": width,
-        "--height": height
+        width: width,
+        height: height
       })
     });
   }
@@ -137,20 +135,18 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return fallback;
   }
   return /*#__PURE__*/React.createElement("div", _objectSpread({
-    className: stringify(classNames.image, styled.image.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.image.style), themeColorVars), {}, {
-      "--width": width,
-      "--height": height
+    className: stringify(classNames.image, className, styled.image.className),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.image.style), style), themeColorVars), {}, {
+      width: width,
+      height: height
     }),
     ref: imageRef
   }, hoverProps), /*#__PURE__*/React.createElement("img", {
     ref: imgRef,
-    className: stringify(classNames.img, className, styled.img.className),
-    style: _objectSpread(_objectSpread({}, styled.img.style), style),
+    className: stringify(classNames.img, styled.img.className),
+    style: styled.img.style,
     src: src,
     alt: alt,
-    width: width,
-    height: height,
     draggable: false,
     crossOrigin: crossOrigin,
     referrerPolicy: referrerPolicy

package/dist/components/popover/popover.cjs

@@ -199,7 +199,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.popover, className$1, styled.popover.className),
     style: _objectSpread(_objectSpread({}, styled.popover.style), {}, {
-      "--padding": typeof padding === "number" ? "".concat(padding, "px") : void 0
+      "--padding": relax.isNumber(padding) ? "".concat(padding, "px") : void 0
     }, style)
   }, !!title && (/*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.title, styled.title.className),

package/dist/components/popover/popover.mjs

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useEvent, useHover, useFocus, isRefable, useClickAway } from '@aiszlab/relax';
+import { useEvent, useHover, useFocus, isRefable, useClickAway, isNumber } from '@aiszlab/relax';
 import { mountRef } from '@aiszlab/relax/react';
 import React, { forwardRef, useRef, useCallback, isValidElement, useMemo, cloneElement, useImperativeHandle } from 'react';
 import Popper from '../popper/popper.mjs';
@@ -195,7 +195,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.popover, className, styled.popover.className),
     style: _objectSpread(_objectSpread({}, styled.popover.style), {}, {
-      "--padding": typeof padding === "number" ? "".concat(padding, "px") : void 0
+      "--padding": isNumber(padding) ? "".concat(padding, "px") : void 0
     }, style)
   }, !!title && (/*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.title, styled.title.className),

package/dist/components/split-panel/hooks.cjs

@@ -7,8 +7,7 @@ var relax = require('@aiszlab/relax');
 
 var _excluded = ["defaultSize"];
 /**
- * @description panels hooks
- *
+ * panels hooks
  * in split panel, every panel should be sized
  * if we dragged the bar, only change effected panels
  */

package/dist/components/split-panel/hooks.d.ts

@@ -2,8 +2,7 @@ import type { PanelItem, PanelProps, PanelRef } from "../../types/split-panel";
 import type { Nullable } from "@aiszlab/relax/types";
 type _PanelProps = Omit<PanelProps, "children">;
 /**
- * @description panels hooks
- *
+ * panels hooks
  * in split panel, every panel should be sized
  * if we dragged the bar, only change effected panels
  */

package/dist/components/split-panel/hooks.mjs

@@ -5,8 +5,7 @@ import { useEvent, useMounted } from '@aiszlab/relax';
 
 var _excluded = ["defaultSize"];
 /**
- * @description panels hooks
- *
+ * panels hooks
  * in split panel, every panel should be sized
  * if we dragged the bar, only change effected panels
  */

package/dist/components/steps/item.cjs

@@ -137,8 +137,8 @@ var Item = function Item(_ref) {
     style: styled.leading.style
   }, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.sign, styled.sign.className),
-    style: _objectSpread(_objectSpread({}, styled.sign.style), !relax.isUndefined(size) && {
-      "--size": "".concat(size, "px")
+    style: _objectSpread(_objectSpread({}, styled.sign.style), {}, {
+      "--size": relax.isNumber(size) ? "".concat(size, "px") : void 0
     })
   }, leading !== null && leading !== void 0 ? leading : status === "done" ? /*#__PURE__*/React.createElement(done.default, null) : value)), /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.title, styled.title.className),

package/dist/components/steps/item.mjs

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useContext } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.16.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useEvent, isUndefined } from '@aiszlab/relax';
+import { useEvent, isNumber } from '@aiszlab/relax';
 import { Context } from './context.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { $body, $title } from '../theme/theme.mjs';
@@ -133,8 +133,8 @@ var Item = function Item(_ref) {
     style: styled.leading.style
   }, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.sign, styled.sign.className),
-    style: _objectSpread(_objectSpread({}, styled.sign.style), !isUndefined(size) && {
-      "--size": "".concat(size, "px")
+    style: _objectSpread(_objectSpread({}, styled.sign.style), {}, {
+      "--size": isNumber(size) ? "".concat(size, "px") : void 0
     })
   }, leading !== null && leading !== void 0 ? leading : status === "done" ? /*#__PURE__*/React.createElement(Done, null) : value)), /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.title, styled.title.className),

package/dist/styles.css

@@ -1816,10 +1816,6 @@
     height: var(--check-size);
   }
 
-  .musaex-1f5funs {
-    height: var(--height);
-  }
-
   .musaex-1evh9kd {
     height: var(--max-height);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",