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

package/dist/styles.css

@@ -420,6 +420,10 @@
     padding-block: var(--musaex-mk8wyj);
   }
 
+  .musaex-13bwjiu {
+    padding-inline: calc(var(--padding-inline) - var(--musaex-6ewyph));
+  }
+
   .musaex-1v4gb6w {
     padding-inline: var(--musaex-14eq97i);
   }
@@ -464,6 +468,10 @@
     padding-inline: var(--musaex-mk8wyj);
   }
 
+  .musaex-1ioy7le {
+    padding-inline: var(--padding-inline);
+  }
+
   .musaex-mqliwb {
     text-decoration: line-through;
   }
@@ -472,6 +480,10 @@
     text-decoration: none;
   }
 
+  .musaex-bngzmg {
+    transition: transform .3s ease-in-out;
+  }
+
   .musaex-1yssd5k {
     transition: transform .3s;
   }
@@ -1450,12 +1462,12 @@
     transform: translateX(50%)translateY(50%);
   }
 
-  .musaex-14dcsj8 {
-    transform: translateX(var(--movement-x)) translateY(var(--movement-y));
+  .musaex-12eyqs9 {
+    transform: translateX(calc(var(--offset) * -1));
   }
 
-  .musaex-o9m17b {
-    transform: translateX(var(--offset));
+  .musaex-14dcsj8 {
+    transform: translateX(var(--movement-x)) translateY(var(--movement-y));
   }
 
   .musaex-1cb1t30 {
@@ -1599,10 +1611,6 @@
     z-index: var(--musaex-15xdox1);
   }
 
-  .musaex-1nnj97i {
-    z-index: var(--musaex-1cifd33);
-  }
-
   .musaex-qgk00j {
     z-index: var(--musaex-1ktvdf5);
   }
@@ -1917,10 +1925,6 @@
     height: var(--musaex-9xrpwn);
   }
 
-  .musaex-1r6gm7t {
-    height: var(--musaex-eliz3k);
-  }
-
   .musaex-1svyby3 {
     height: var(--musaex-hio464);
   }
@@ -2253,10 +2257,6 @@
     width: var(--check-size);
   }
 
-  .musaex-k64pxh {
-    width: var(--flex);
-  }
-
   .musaex-1po6ib {
     width: var(--musaex-10wwlfh);
   }
@@ -2533,7 +2533,7 @@
     display: none;
   }
 
-  .musaex-1unh1gc:after, .musaex-typ5od:before {
+  .musaex-1unh1gc:after {
     inset-inline-end: 0;
   }
 
@@ -2541,6 +2541,10 @@
     inset-inline-end: 50%;
   }
 
+  .musaex-vgnsxj:before {
+    inset-inline-end: calc(var(--musaex-joam4e) * -1);
+  }
+
   .musaex-1682cnc:before {
     inset-inline-start: 0;
   }
@@ -2553,6 +2557,10 @@
     inset-inline-start: calc((100% - var(--musaex-1xf102v)) / 2);
   }
 
+  .musaex-1d34y9o:before {
+    inset-inline-start: calc(var(--musaex-joam4e) * -1);
+  }
+
   .musaex-1stqopg:after, .musaex-bres09:before {
     inset-inline-start: var(--musaex-12cvltn);
   }
@@ -2616,10 +2624,6 @@
   .musaex-1jszi47::view-transition-old(root), .musaex-ltipp6::view-transition-new(root) {
     z-index: 9999;
   }
-
-  .musaex-rt65ts:before {
-    z-index: var(--musaex-1ktvdf5);
-  }
 }
 
 @layer priority8 {
@@ -3125,6 +3129,18 @@
   --check-size: var(--musaex-qe7ci9);
 }
 
+.musaex-58z396 {
+  --padding-inline: var(--musaex-14eq97i);
+}
+
+.musaex-1ur110t {
+  --padding-inline: var(--musaex-1vpnstl);
+}
+
+.musaex-1rb5leg {
+  --padding-inline: var(--musaex-jo49ah);
+}
+
 .musaex-1me236a {
   --size: var(--musaex-5c864h);
 }

package/dist/types/tabs.d.ts

@@ -1,5 +1,6 @@
 import type { Key, ReactNode } from "react";
 import type { ComponentProps } from "./element";
+export type TabsSize = "small" | "medium" | "large";
 export interface TabsProps extends ComponentProps {
     /**
      * @description
@@ -31,6 +32,17 @@ export interface TabsProps extends ComponentProps {
      * @default false
      */
     destroyable?: boolean;
+    /**
+     * @description
+     * size of tabs
+     * @default "medium"
+     */
+    size?: TabsSize;
+    /**
+     * @zh 修改`activeKey`时触发的回调函数
+     * @en Callback function triggered when `activeKey` changes
+     */
+    onChange?: (key: Key) => void;
 }
 export interface TabItemProps {
     /**
@@ -44,7 +56,7 @@ export interface TabItemProps {
      * label
      * @requires
      */
-    label: string;
+    label: ReactNode;
     /**
      * @description
      * on tab item click
@@ -64,7 +76,7 @@ export type TabItem = {
      * label
      * @requires
      */
-    label: string;
+    label: ReactNode;
     /**
      * @description
      * children
@@ -83,6 +95,10 @@ export interface ContextValue {
      * items
      */
     items: TabItem[];
+    /**
+     * size of tabs
+     */
+    size: TabsSize;
 }
 /**
  * @description

package/dist/types/tag.d.ts

@@ -1,11 +1,18 @@
 import type { MouseEvent, ReactNode } from "react";
 import type { ComponentProps } from "./element";
 type Size = "small" | "medium" | "large";
+type Variant = "filled" | "outlined";
 /**
  * @description
  * tag props
  */
 export type TagProps = ComponentProps & {
+    /**
+     * @description
+     * variant
+     * @default "filled"
+     */
+    variant?: Variant;
     /**
      * @description
      * children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.27-beta.2",
+  "version": "1.0.27-beta.21",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -82,9 +82,9 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/addon-onboarding": "^10.2.17",
-    "@storybook/react-vite": "^10.2.17",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@stylexjs/babel-plugin": "^0.17.5",
     "@stylexjs/rollup-plugin": "^0.17.5",
     "@stylexjs/stylex": "^0.17.5",
@@ -99,13 +99,13 @@
     "eslint": "^10.0.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.17",
+    "eslint-plugin-storybook": "^10.3.3",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rollup": "^4.57.1",
-    "storybook": "^10.2.17",
+    "storybook": "^10.3.3",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.55.0",
     "zx": "^8.8.5"

package/dist/components/tabs/hooks.cjs

@@ -1,145 +0,0 @@
-'use strict';
-
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var relax = require('@aiszlab/relax');
-var React = require('react');
-var context = require('./context.cjs');
-
-/**
- * @description
- * use tab context
- */
-var useTabsContext = function useTabsContext() {
-  var _useContext;
-  return (_useContext = React.useContext(context.Context)) !== null && _useContext !== void 0 ? _useContext : {
-    items: [],
-    activeKey: void 0
-  };
-};
-/**
- * @description
- * tabs
- */
-var useTabs = function useTabs(_ref) {
-  var _items$at;
-  var _activeKey = _ref.activeKey,
-    items = _ref.items,
-    defaultActiveKey = _ref.defaultActiveKey;
-  var _useControlledState = relax.useControlledState(_activeKey, {
-      defaultState: defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : (_items$at = items.at(0)) === null || _items$at === void 0 ? void 0 : _items$at.key
-    }),
-    _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    activeKey = _useControlledState2[0],
-    setActiveKey = _useControlledState2[1];
-  var _useState = React.useState(function () {
-      return new Set(relax.isUndefined(activeKey) ? [] : [activeKey]);
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    activatedKeys = _useState2[0],
-    setActivatedKeys = _useState2[1];
-  var changeActiveKey = relax.useEvent(function (key) {
-    setActiveKey(key);
-    setActivatedKeys(function (prev) {
-      return new Set(prev).add(key);
-    });
-  });
-  return {
-    activeKey: activeKey,
-    activatedKeys: activatedKeys,
-    changeActiveKey: changeActiveKey
-  };
-};
-/**
- * @description
- * count dom ele size
- */
-var useNavigation = function useNavigation() {
-  var navigatorRef = React.useRef(null);
-  var tabsRef = React.useRef(null);
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    offset = _useState4[0],
-    setOffset = _useState4[1];
-  // navigator size
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    navigatorSize = _useState6[0],
-    setNavigatorSize = _useState6[1];
-  // tabs size
-  var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    tabsSize = _useState8[0],
-    setTabsSize = _useState8[1];
-  var _useMemo = React.useMemo(function () {
-      return {
-        maxOffset: Math.max(0, tabsSize - navigatorSize),
-        minOffset: 0
-      };
-    }, [navigatorSize, tabsSize]),
-    maxOffset = _useMemo.maxOffset,
-    minOffset = _useMemo.minOffset;
-  // handle scroll
-  var scroll = relax.useEvent(function (delta) {
-    setOffset(function (prev) {
-      return relax.clamp(prev + delta, minOffset, maxOffset);
-    });
-  });
-  var resize = relax.useEvent(function () {
-    var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
-    var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
-    var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
-    setNavigatorSize(_navigatorSize);
-    setTabsSize(_tabsSize);
-    scroll(0);
-  });
-  var _useMemo2 = React.useMemo(function () {
-      return {
-        isLeadingOverflow: offset > minOffset,
-        isTrailingOverflow: offset < maxOffset
-      };
-    }, [minOffset, maxOffset, offset]),
-    isLeadingOverflow = _useMemo2.isLeadingOverflow,
-    isTrailingOverflow = _useMemo2.isTrailingOverflow;
-  // if window resize
-  // re-calculate offsets range
-  relax.useResize(resize);
-  // calculate size once at mounting step
-  relax.useMount(function () {
-    resize();
-  });
-  return {
-    navigatorRef: navigatorRef,
-    tabsRef: tabsRef,
-    scroll: scroll,
-    offset: offset,
-    isLeadingOverflow: isLeadingOverflow,
-    isTrailingOverflow: isTrailingOverflow
-  };
-};
-/**
- * @description
- * use navigator scroll
- */
-var useNavigatorScroll = function useNavigatorScroll(_ref2) {
-  var navigatorRef = _ref2.navigatorRef,
-    scroll = _ref2.scroll;
-  // mouse wheel
-  var onWheel = relax.useEvent(function (event) {
-    event.preventDefault();
-    var deltaY = event.deltaY;
-    scroll(deltaY);
-  });
-  React.useEffect(function () {
-    var navigator = navigatorRef.current;
-    navigator === null || navigator === void 0 || navigator.addEventListener("wheel", onWheel);
-    return function () {
-      navigator === null || navigator === void 0 || navigator.removeEventListener("wheel", onWheel);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};
-
-exports.useNavigation = useNavigation;
-exports.useNavigatorScroll = useNavigatorScroll;
-exports.useTabs = useTabs;
-exports.useTabsContext = useTabsContext;

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

@@ -1,43 +0,0 @@
-import { type Key, type RefObject } from "react";
-import type { TabItem } from "../../types/tabs";
-import type { Nullable, Partialable } from "@aiszlab/relax/types";
-/**
- * @description
- * use tab context
- */
-export declare const useTabsContext: () => import("../../types/tabs").ContextValue & {
-    classNames: typeof import("./context").CLASS_NAMES;
-};
-/**
- * @description
- * tabs
- */
-export declare const useTabs: ({ activeKey: _activeKey, items, defaultActiveKey, }: {
-    activeKey?: Key;
-    items: TabItem[];
-    defaultActiveKey?: Key;
-}) => {
-    activeKey: Partialable<Key>;
-    activatedKeys: Set<Key>;
-    changeActiveKey: (key: Key) => void;
-};
-/**
- * @description
- * count dom ele size
- */
-export declare const useNavigation: () => {
-    navigatorRef: RefObject<HTMLDivElement | null>;
-    tabsRef: RefObject<HTMLDivElement | null>;
-    scroll: (delta: number) => void;
-    offset: number;
-    isLeadingOverflow: boolean;
-    isTrailingOverflow: boolean;
-};
-/**
- * @description
- * use navigator scroll
- */
-export declare const useNavigatorScroll: ({ navigatorRef, scroll, }: {
-    navigatorRef: RefObject<Nullable<HTMLDivElement>>;
-    scroll: (delta: number) => void;
-}) => void;

package/dist/components/tabs/hooks.mjs

@@ -1,140 +0,0 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useControlledState, isUndefined, useEvent, clamp, useResize, useMount } from '@aiszlab/relax';
-import { useState, useContext, useRef, useMemo, useEffect } from 'react';
-import { Context } from './context.mjs';
-
-/**
- * @description
- * use tab context
- */
-var useTabsContext = function useTabsContext() {
-  var _useContext;
-  return (_useContext = useContext(Context)) !== null && _useContext !== void 0 ? _useContext : {
-    items: [],
-    activeKey: void 0
-  };
-};
-/**
- * @description
- * tabs
- */
-var useTabs = function useTabs(_ref) {
-  var _items$at;
-  var _activeKey = _ref.activeKey,
-    items = _ref.items,
-    defaultActiveKey = _ref.defaultActiveKey;
-  var _useControlledState = useControlledState(_activeKey, {
-      defaultState: defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : (_items$at = items.at(0)) === null || _items$at === void 0 ? void 0 : _items$at.key
-    }),
-    _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    activeKey = _useControlledState2[0],
-    setActiveKey = _useControlledState2[1];
-  var _useState = useState(function () {
-      return new Set(isUndefined(activeKey) ? [] : [activeKey]);
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    activatedKeys = _useState2[0],
-    setActivatedKeys = _useState2[1];
-  var changeActiveKey = useEvent(function (key) {
-    setActiveKey(key);
-    setActivatedKeys(function (prev) {
-      return new Set(prev).add(key);
-    });
-  });
-  return {
-    activeKey: activeKey,
-    activatedKeys: activatedKeys,
-    changeActiveKey: changeActiveKey
-  };
-};
-/**
- * @description
- * count dom ele size
- */
-var useNavigation = function useNavigation() {
-  var navigatorRef = useRef(null);
-  var tabsRef = useRef(null);
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    offset = _useState4[0],
-    setOffset = _useState4[1];
-  // navigator size
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    navigatorSize = _useState6[0],
-    setNavigatorSize = _useState6[1];
-  // tabs size
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    tabsSize = _useState8[0],
-    setTabsSize = _useState8[1];
-  var _useMemo = useMemo(function () {
-      return {
-        maxOffset: Math.max(0, tabsSize - navigatorSize),
-        minOffset: 0
-      };
-    }, [navigatorSize, tabsSize]),
-    maxOffset = _useMemo.maxOffset,
-    minOffset = _useMemo.minOffset;
-  // handle scroll
-  var scroll = useEvent(function (delta) {
-    setOffset(function (prev) {
-      return clamp(prev + delta, minOffset, maxOffset);
-    });
-  });
-  var resize = useEvent(function () {
-    var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
-    var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
-    var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
-    setNavigatorSize(_navigatorSize);
-    setTabsSize(_tabsSize);
-    scroll(0);
-  });
-  var _useMemo2 = useMemo(function () {
-      return {
-        isLeadingOverflow: offset > minOffset,
-        isTrailingOverflow: offset < maxOffset
-      };
-    }, [minOffset, maxOffset, offset]),
-    isLeadingOverflow = _useMemo2.isLeadingOverflow,
-    isTrailingOverflow = _useMemo2.isTrailingOverflow;
-  // if window resize
-  // re-calculate offsets range
-  useResize(resize);
-  // calculate size once at mounting step
-  useMount(function () {
-    resize();
-  });
-  return {
-    navigatorRef: navigatorRef,
-    tabsRef: tabsRef,
-    scroll: scroll,
-    offset: offset,
-    isLeadingOverflow: isLeadingOverflow,
-    isTrailingOverflow: isTrailingOverflow
-  };
-};
-/**
- * @description
- * use navigator scroll
- */
-var useNavigatorScroll = function useNavigatorScroll(_ref2) {
-  var navigatorRef = _ref2.navigatorRef,
-    scroll = _ref2.scroll;
-  // mouse wheel
-  var onWheel = useEvent(function (event) {
-    event.preventDefault();
-    var deltaY = event.deltaY;
-    scroll(deltaY);
-  });
-  useEffect(function () {
-    var navigator = navigatorRef.current;
-    navigator === null || navigator === void 0 || navigator.addEventListener("wheel", onWheel);
-    return function () {
-      navigator === null || navigator === void 0 || navigator.removeEventListener("wheel", onWheel);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};
-
-export { useNavigation, useNavigatorScroll, useTabs, useTabsContext };