musae 1.0.27-beta.2 → 1.0.27-beta.21

package/dist/components/tabs/panels.mjs

@@ -1,8 +1,8 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _createForOfIteratorHelper from '@babel/runtime/helpers/createForOfIteratorHelper';
 import React, { useMemo } from 'react';
 import { stringify } from '@aiszlab/relax/class-name';
-import { isUndefined, isVoid } from '@aiszlab/relax';
-import { useTabsContext } from './hooks.mjs';
+import { isUndefined } from '@aiszlab/relax';
+import { useTabsContext } from './hooks/use-tabs-context.mjs';
 
 var Panels = function Panels(_ref) {
   var forceRender = _ref.forceRender,
@@ -12,53 +12,70 @@ var Panels = function Panels(_ref) {
     items = _useTabsContext.items,
     activeKey = _useTabsContext.activeKey,
     classNames = _useTabsContext.classNames;
-  var styled = {
-    panels: {
-      className: "musaex-bvu51n"
-    },
-    panel: {
-      active: {},
-      hidden: {
-        className: "musaex-1s85apg"
-      }
-    }
-  };
+  // 收集需要渲染的面板内容
   var panels = useMemo(function () {
+    var renderedPanels = [];
     if (isUndefined(activeKey)) {
-      return [];
+      return renderedPanels;
     }
-    if (destroyable) {
-      var _items$find;
-      return [[activeKey, (_items$find = items.find(function (item) {
-        return item.key === activeKey;
-      })) === null || _items$find === void 0 ? void 0 : _items$find.children]];
-    }
-    if (forceRender) {
-      return items.map(function (item) {
-        return [item.key, item.children];
-      });
+    var _iterator = _createForOfIteratorHelper(items),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        if (destroyable) {
+          if (item.key !== activeKey) {
+            continue;
+          }
+          if (item.children) {
+            renderedPanels.push({
+              key: item.key,
+              children: item.children
+            });
+          }
+          break;
+        }
+        if (forceRender || activatedKeys.has(item.key)) {
+          if (item.children) {
+            renderedPanels.push({
+              key: item.key,
+              children: item.children
+            });
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
-    return items.map(function (item) {
-      return [item.key, activatedKeys.has(item.key) ? item.children : null];
-    });
+    return renderedPanels;
   }, [destroyable, forceRender, items, activeKey, activatedKeys]);
+  var styled = {
+    panels: {
+      0: {},
+      1: {
+        className: "musaex-1y9dh0z"
+      }
+    }[!!(panels.length > 0) << 0]
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.panels, styled.panels.className),
     style: styled.panels.style
   }, panels.map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      children = _ref3[1];
-    var _ref4 = key === activeKey ? styled.panel.active : styled.panel.hidden,
-      className = _ref4.className,
-      style = _ref4.style;
-    if (isVoid(children)) {
-      return null;
-    }
+    var key = _ref2.key,
+      children = _ref2.children;
+    var isActive = key === activeKey;
+    var panelStyled = {
+      0: {},
+      1: {
+        className: "musaex-1s85apg"
+      }
+    }[!!!isActive << 0];
     return /*#__PURE__*/React.createElement("div", {
       key: key,
-      className: stringify(classNames.panel, className),
-      style: style
+      className: stringify(classNames.panel, panelStyled.className),
+      style: panelStyled.style
     }, children);
   }));
 };

package/dist/components/tabs/tab.cjs

@@ -4,17 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var button = require('../button/button.cjs');
-var hooks = require('./hooks.cjs');
 var className = require('@aiszlab/relax/class-name');
 var relax = require('@aiszlab/relax');
+var useTabsContext = require('./hooks/use-tabs-context.cjs');
 
 var Tab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.value,
     onClick = _ref.onClick,
     label = _ref.label;
-  var _useTabsContext = hooks.useTabsContext(),
+  var _useTabsContext = useTabsContext.useTabsContext(),
     activeKey = _useTabsContext.activeKey,
-    classNames = _useTabsContext.classNames;
+    classNames = _useTabsContext.classNames,
+    size = _useTabsContext.size;
   var isActive = activeKey === value;
   var click = relax.useEvent(function () {
     onClick(value);
@@ -29,7 +30,8 @@ var Tab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: click,
     className: className.stringify(classNames.tab, styled.className),
     ripple: false,
-    style: styled.style
+    style: styled.style,
+    size: size
   }, label);
 });
 

package/dist/components/tabs/tab.mjs

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import { Button } from '../button/button.mjs';
-import { useTabsContext } from './hooks.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useEvent } from '@aiszlab/relax';
+import { useTabsContext } from './hooks/use-tabs-context.mjs';
 
 var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
@@ -10,7 +10,8 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label = _ref.label;
   var _useTabsContext = useTabsContext(),
     activeKey = _useTabsContext.activeKey,
-    classNames = _useTabsContext.classNames;
+    classNames = _useTabsContext.classNames,
+    size = _useTabsContext.size;
   var isActive = activeKey === value;
   var click = useEvent(function () {
     onClick(value);
@@ -25,7 +26,8 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: click,
     className: stringify(classNames.tab, styled.className),
     ripple: false,
-    style: styled.style
+    style: styled.style,
+    size: size
   }, label);
 });
 

package/dist/components/tabs/tabs.cjs

@@ -6,9 +6,9 @@ var React = require('react');
 var context = require('./context.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
-var hooks = require('./hooks.cjs');
 var panels = require('./panels.cjs');
 var navigation = require('./navigation.cjs');
+var useTabs = require('./hooks/use-tabs.cjs');
 
 var Tabs = function Tabs(_ref) {
   var _ref$items = _ref.items,
@@ -20,11 +20,15 @@ var Tabs = function Tabs(_ref) {
     _ref$forceRender = _ref.forceRender,
     forceRender = _ref$forceRender === void 0 ? false : _ref$forceRender,
     _ref$destroyable = _ref.destroyable,
-    destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable;
-  var _useTabs = hooks.useTabs({
+    destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    onChange = _ref.onChange;
+  var _useTabs = useTabs.useTabs({
       items: items,
       activeKey: _activeKey,
-      defaultActiveKey: defaultActiveKey
+      defaultActiveKey: defaultActiveKey,
+      onChange: onChange
     }),
     activeKey = _useTabs.activeKey,
     activatedKeys = _useTabs.activatedKeys,
@@ -35,9 +39,10 @@ var Tabs = function Tabs(_ref) {
     return {
       activeKey: activeKey,
       items: items,
-      classNames: classNames
+      classNames: classNames,
+      size: size
     };
-  }, [activeKey, items, classNames]);
+  }, [activeKey, items, classNames, size]);
   // if there is not any item, return null
   if (items.length === 0) return null;
   return /*#__PURE__*/React.createElement(context.Context.Provider, {

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

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

package/dist/components/tabs/tabs.mjs

@@ -2,9 +2,9 @@ import React, { useMemo } from 'react';
 import { Context, CLASS_NAMES } from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
-import { useTabs } from './hooks.mjs';
 import Panels from './panels.mjs';
 import Navigation from './navigation.mjs';
+import { useTabs } from './hooks/use-tabs.mjs';
 
 var Tabs = function Tabs(_ref) {
   var _ref$items = _ref.items,
@@ -16,11 +16,15 @@ var Tabs = function Tabs(_ref) {
     _ref$forceRender = _ref.forceRender,
     forceRender = _ref$forceRender === void 0 ? false : _ref$forceRender,
     _ref$destroyable = _ref.destroyable,
-    destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable;
+    destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    onChange = _ref.onChange;
   var _useTabs = useTabs({
       items: items,
       activeKey: _activeKey,
-      defaultActiveKey: defaultActiveKey
+      defaultActiveKey: defaultActiveKey,
+      onChange: onChange
     }),
     activeKey = _useTabs.activeKey,
     activatedKeys = _useTabs.activatedKeys,
@@ -31,9 +35,10 @@ var Tabs = function Tabs(_ref) {
     return {
       activeKey: activeKey,
       items: items,
-      classNames: classNames
+      classNames: classNames,
+      size: size
     };
-  }, [activeKey, items, classNames]);
+  }, [activeKey, items, classNames, size]);
   // if there is not any item, return null
   if (items.length === 0) return null;
   return /*#__PURE__*/React.createElement(Context.Provider, {

package/dist/components/tag/tag.cjs

@@ -14,38 +14,61 @@ var close = require('../icon/icons/navigation/close.cjs');
 
 var styles = {
   tag: {
-    kWkggS: "musaex-1ncffr6",
-    kMwMTN: "musaex-cm04b4",
-    k1xSpc: "musaex-3nfvp2",
-    kXwgrk: "musaex-1q0g3np",
-    kGNEyG: "musaex-6s0dn4",
-    kZKoxP: "musaex-1r6gm7t",
-    $$css: true
+    "default": {
+      k1xSpc: "musaex-3nfvp2",
+      kXwgrk: "musaex-1q0g3np",
+      kGNEyG: "musaex-6s0dn4",
+      kzqmXN: "musaex-1yklyfh",
+      kB7OPa: "musaex-9f619",
+      $$css: true
+    }
   },
-  small: {
-    kg3NbH: "musaex-1g3a7fl",
-    k8WAf4: "musaex-11owsmz",
-    kaIpWk: "musaex-dshwmh",
-    kOIVth: "musaex-15wobh7",
-    $$css: true
+  size: {
+    small: {
+      kaIpWk: "musaex-dshwmh",
+      kOIVth: "musaex-15wobh7",
+      kZKoxP: "musaex-1ksoi14",
+      "--padding-inline": "musaex-1rb5leg",
+      $$css: true
+    },
+    medium: {
+      kaIpWk: "musaex-1ezz4s",
+      kOIVth: "musaex-wcf3z5",
+      kZKoxP: "musaex-1si1pn3",
+      "--padding-inline": "musaex-1ur110t",
+      $$css: true
+    },
+    large: {
+      kg3NbH: "musaex-1v4gb6w",
+      kaIpWk: "musaex-142dr1e",
+      kOIVth: "musaex-1wm2zkp",
+      kZKoxP: "musaex-4etbzz",
+      "--padding-inline": "musaex-58z396",
+      $$css: true
+    }
   },
-  medium: {
-    kg3NbH: "musaex-81lxrv",
-    k8WAf4: "musaex-1nsg7hs",
-    kaIpWk: "musaex-1ezz4s",
-    kOIVth: "musaex-wcf3z5",
-    $$css: true
-  },
-  large: {
-    kg3NbH: "musaex-1v4gb6w",
-    k8WAf4: "musaex-a0rzc7",
-    kaIpWk: "musaex-142dr1e",
-    kOIVth: "musaex-1wm2zkp",
-    $$css: true
+  variant: {
+    filled: {
+      kWkggS: "musaex-1ncffr6",
+      kMwMTN: "musaex-cm04b4",
+      kg3NbH: "musaex-1ioy7le",
+      $$css: true
+    },
+    outlined: {
+      kWkggS: "musaex-k7eln3",
+      kMzoRj: "musaex-1iyq3db",
+      ksu8eU: "musaex-1y0btm7",
+      kVAM5u: "musaex-axmpxa",
+      kMwMTN: "musaex-1heor9g",
+      kg3NbH: "musaex-13bwjiu",
+      $$css: true
+    }
   }
 };
 var Tag = function Tag(_ref) {
   var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "filled" : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
     className$1 = _ref.className,
@@ -55,8 +78,8 @@ var Tag = function Tag(_ref) {
     onClose = _ref.onClose,
     leading = _ref.leading;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary-container", "on-primary-container"]);
-  var styled = stylex.props(theme.$label[size], styles.tag, styles[size]);
+  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary-container", "on-primary-container", "surface", "on-surface-variant", "outline"]);
+  var styled = stylex.props(theme.$label[size], styles.tag["default"], styles.size[size], styles.variant[variant]);
   return /*#__PURE__*/React.createElement("span", {
     className: className.stringify(classNames.tag, className$1, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), _themeColorVars), style)

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

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

package/dist/components/tag/tag.mjs

@@ -10,38 +10,61 @@ import Close from '../icon/icons/navigation/close.mjs';
 
 var styles = {
   tag: {
-    kWkggS: "musaex-1ncffr6",
-    kMwMTN: "musaex-cm04b4",
-    k1xSpc: "musaex-3nfvp2",
-    kXwgrk: "musaex-1q0g3np",
-    kGNEyG: "musaex-6s0dn4",
-    kZKoxP: "musaex-1r6gm7t",
-    $$css: true
+    "default": {
+      k1xSpc: "musaex-3nfvp2",
+      kXwgrk: "musaex-1q0g3np",
+      kGNEyG: "musaex-6s0dn4",
+      kzqmXN: "musaex-1yklyfh",
+      kB7OPa: "musaex-9f619",
+      $$css: true
+    }
   },
-  small: {
-    kg3NbH: "musaex-1g3a7fl",
-    k8WAf4: "musaex-11owsmz",
-    kaIpWk: "musaex-dshwmh",
-    kOIVth: "musaex-15wobh7",
-    $$css: true
+  size: {
+    small: {
+      kaIpWk: "musaex-dshwmh",
+      kOIVth: "musaex-15wobh7",
+      kZKoxP: "musaex-1ksoi14",
+      "--padding-inline": "musaex-1rb5leg",
+      $$css: true
+    },
+    medium: {
+      kaIpWk: "musaex-1ezz4s",
+      kOIVth: "musaex-wcf3z5",
+      kZKoxP: "musaex-1si1pn3",
+      "--padding-inline": "musaex-1ur110t",
+      $$css: true
+    },
+    large: {
+      kg3NbH: "musaex-1v4gb6w",
+      kaIpWk: "musaex-142dr1e",
+      kOIVth: "musaex-1wm2zkp",
+      kZKoxP: "musaex-4etbzz",
+      "--padding-inline": "musaex-58z396",
+      $$css: true
+    }
   },
-  medium: {
-    kg3NbH: "musaex-81lxrv",
-    k8WAf4: "musaex-1nsg7hs",
-    kaIpWk: "musaex-1ezz4s",
-    kOIVth: "musaex-wcf3z5",
-    $$css: true
-  },
-  large: {
-    kg3NbH: "musaex-1v4gb6w",
-    k8WAf4: "musaex-a0rzc7",
-    kaIpWk: "musaex-142dr1e",
-    kOIVth: "musaex-1wm2zkp",
-    $$css: true
+  variant: {
+    filled: {
+      kWkggS: "musaex-1ncffr6",
+      kMwMTN: "musaex-cm04b4",
+      kg3NbH: "musaex-1ioy7le",
+      $$css: true
+    },
+    outlined: {
+      kWkggS: "musaex-k7eln3",
+      kMzoRj: "musaex-1iyq3db",
+      ksu8eU: "musaex-1y0btm7",
+      kVAM5u: "musaex-axmpxa",
+      kMwMTN: "musaex-1heor9g",
+      kg3NbH: "musaex-13bwjiu",
+      $$css: true
+    }
   }
 };
 var Tag = function Tag(_ref) {
   var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "filled" : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
     className = _ref.className,
@@ -51,8 +74,8 @@ var Tag = function Tag(_ref) {
     onClose = _ref.onClose,
     leading = _ref.leading;
   var classNames = useClassNames(CLASS_NAMES);
-  var _themeColorVars = useThemeColorVars(["primary-container", "on-primary-container"]);
-  var styled = props($label[size], styles.tag, styles[size]);
+  var _themeColorVars = useThemeColorVars(["primary-container", "on-primary-container", "surface", "on-surface-variant", "outline"]);
+  var styled = props($label[size], styles.tag["default"], styles.size[size], styles.variant[variant]);
   return /*#__PURE__*/React.createElement("span", {
     className: stringify(classNames.tag, className, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), _themeColorVars), style)

package/dist/components/theme/tokens.stylex.d.ts

@@ -1,3 +1,4 @@
+import { ValueOf } from "@aiszlab/relax/types";
 /**
  * @description
  * elevations
@@ -117,6 +118,7 @@ export declare const OPACITY: {
     readonly heavier: 0.8;
     readonly heaviest: 0.9;
 };
+export type Opacity = ValueOf<typeof OPACITY>;
 export declare const opacity: import("@stylexjs/stylex").VarGroup<Readonly<{
     readonly thin: 0.08;
     readonly medium: 0.12;

package/dist/hooks/use-theme-color-vars.cjs

@@ -4,7 +4,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var hooks = require('../components/theme/hooks.cjs');
 var relax = require('@aiszlab/relax');
-var color = require('@aiszlab/fuzzy/color');
 
 /**
  * @description 主题色样式变量
@@ -18,14 +17,13 @@ var useThemeColorVars = function useThemeColorVars(tokens) {
         _toArray2 = _slicedToArray(_toArray, 2),
         token = _toArray2[0],
         opacity = _toArray2[1];
-      var color$1 = colors[token];
-      // 透明度特殊逻辑
-      if (relax.isUndefined(opacity)) {
-        prev["--color-".concat(token)] = color$1;
-      } else {
-        prev["--color-".concat(token, "-opacity-").concat((opacity * 100).toString().padStart(2, "0"))] =
-        // 透明度场景下页面渲染统一使用`rgba`格式
-        color.hexToRgba(color$1, opacity).toString();
+      var color = colors[token];
+      var colorVar = "--color-".concat(token);
+      // 指定透明度时，创建原颜色变量后，基于原颜色变量创建透明度变量
+      prev[colorVar] = color;
+      if (!relax.isUndefined(opacity) && opacity < 1) {
+        var _opacity = (opacity * 100).toString().padStart(2, "0");
+        prev["--color-".concat(token, "-opacity-").concat(_opacity)] = "color-mix(in srgb, var(".concat(colorVar, ") ").concat(_opacity, "%, transparent)");
       }
       return prev;
     }, {});

package/dist/hooks/use-theme-color-vars.d.ts

@@ -1,8 +1,9 @@
 import { type ColorRole } from "../utils/color-role";
+import { type Opacity } from "../components/theme/tokens.stylex";
 type ThemeColorVarToken = `--color-${ColorRole}` | `--color-${ColorRole}-opacity-${string}`;
 export type ThemeColorVariable = `var(${ThemeColorVarToken})`;
 /**
  * @description 主题色样式变量
  */
-export declare const useThemeColorVars: (tokens: (ColorRole | [ColorRole, number])[]) => Partial<Record<ThemeColorVarToken, string>>;
+export declare const useThemeColorVars: (tokens: (ColorRole | [ColorRole, Opacity])[]) => Partial<Record<ThemeColorVarToken, string>>;
 export {};

package/dist/hooks/use-theme-color-vars.mjs

@@ -2,7 +2,6 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useMemo } from 'react';
 import { useTheme } from '../components/theme/hooks.mjs';
 import { toArray, isUndefined } from '@aiszlab/relax';
-import { hexToRgba } from '@aiszlab/fuzzy/color';
 
 /**
  * @description 主题色样式变量
@@ -17,13 +16,12 @@ var useThemeColorVars = function useThemeColorVars(tokens) {
         token = _toArray2[0],
         opacity = _toArray2[1];
       var color = colors[token];
-      // 透明度特殊逻辑
-      if (isUndefined(opacity)) {
-        prev["--color-".concat(token)] = color;
-      } else {
-        prev["--color-".concat(token, "-opacity-").concat((opacity * 100).toString().padStart(2, "0"))] =
-        // 透明度场景下页面渲染统一使用`rgba`格式
-        hexToRgba(color, opacity).toString();
+      var colorVar = "--color-".concat(token);
+      // 指定透明度时，创建原颜色变量后，基于原颜色变量创建透明度变量
+      prev[colorVar] = color;
+      if (!isUndefined(opacity) && opacity < 1) {
+        var _opacity = (opacity * 100).toString().padStart(2, "0");
+        prev["--color-".concat(token, "-opacity-").concat(_opacity)] = "color-mix(in srgb, var(".concat(colorVar, ") ").concat(_opacity, "%, transparent)");
       }
       return prev;
     }, {});