musae 0.2.26 → 0.3.0

package/dist/components/table/table.cjs

@@ -0,0 +1,41 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var header = require('./header/header.cjs');
+var context = require('./context.cjs');
+var body = require('./body.cjs');
+
+var Table = function Table(_ref) {
+  var _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    _ref$columns = _ref.columns,
+    _columns = _ref$columns === void 0 ? [] : _ref$columns,
+    sortDescriptor = _ref.sortDescriptor,
+    onSortChange = _ref.onSortChange;
+  var columns = hooks.useColumns({
+    columns: _columns
+  });
+  var table = reactTable.useReactTable({
+    columns: columns,
+    data: dataSource,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  var contextValue = hooks.useContextValue({
+    table: table,
+    bordered: bordered,
+    sortDescriptor: sortDescriptor,
+    onSortChange: onSortChange
+  });
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("table", _objectSpread({}, {
+    className: "musaex-h8yej3"
+  }), /*#__PURE__*/React.createElement(header.default, null), /*#__PURE__*/React.createElement(body.default, null)));
+};
+
+exports.default = Table;

package/dist/components/table/table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TableProps } from "./types";
+import type { TableProps } from "musae/types/table";
 declare const Table: <T>({ bordered, dataSource, columns: _columns, sortDescriptor, onSortChange, }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/components/table/{table.js → table.mjs}

@@ -1,10 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
 import React from 'react';
-import { useColumns, useContextValue } from './hooks.js';
-import Header from './header/header.js';
-import Context from './context.js';
-import Body from './body.js';
+import { useColumns, useContextValue } from './hooks.mjs';
+import Header from './header/header.mjs';
+import Context from './context.mjs';
+import Body from './body.mjs';
 
 var Table = function Table(_ref) {
   var _ref$bordered = _ref.bordered,
@@ -35,6 +35,5 @@ var Table = function Table(_ref) {
     className: "musaex-h8yej3"
   }), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Body, null)));
 };
-var Table$1 = Table;
 
-export { Table$1 as default };
+export { Table as default };

package/dist/components/tabs/context.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext(null);
+
+exports.default = Context;

package/dist/components/tabs/hooks.cjs

@@ -0,0 +1,134 @@
+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.default)) !== 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];
+  React.useLayoutEffect(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);
+  }, []);
+  var _useMemo = React.useMemo(function () {
+      return {
+        maxOffset: Math.max(0, tabsSize - navigatorSize),
+        minOffset: 0
+      };
+    }, [navigatorSize, tabsSize]),
+    maxOffset = _useMemo.maxOffset,
+    minOffset = _useMemo.minOffset;
+  var _useMemo2 = React.useMemo(function () {
+      return {
+        isLeadingOverflow: offset > minOffset,
+        isTrailingOverflow: offset < maxOffset
+      };
+    }, [minOffset, maxOffset, offset]),
+    isLeadingOverflow = _useMemo2.isLeadingOverflow,
+    isTrailingOverflow = _useMemo2.isTrailingOverflow;
+  var scroll = relax.useEvent(function (delta) {
+    setOffset(function (prev) {
+      return relax.clamp(prev + delta, minOffset, maxOffset);
+    });
+  });
+  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.js → hooks.mjs}

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useControlledState, isUndefined, useEvent, clamp } from '@aiszlab/relax';
 import { useState, useContext, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
-import Context from './context.js';
+import Context from './context.mjs';
 
 /**
  * @description

package/dist/components/tabs/navigation.cjs

@@ -0,0 +1,168 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var tab = require('./tab.cjs');
+var framerMotion = require('framer-motion');
+var relax = require('@aiszlab/relax');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var hooks = require('./hooks.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  navigation: {
+    "default": function _default(props) {
+      return [{
+        borderBottomColor: "musaex-43481e",
+        borderBottomWidth: "musaex-cql0v9",
+        borderBottomStyle: "musaex-1q0q8m5",
+        $$css: true
+      }, {
+        "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    }
+  },
+  navigator: {
+    "default": {
+      position: "musaex-1n2onr6",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    leading: {
+      "::before_content": "musaex-1cpjm7i",
+      "::before_position": "musaex-1hmns74",
+      "::before_insetBlock": "musaex-1nc033x",
+      "::before_top": null,
+      "::before_bottom": null,
+      "::before_insetInlineStart": "musaex-1682cnc",
+      "::before_left": null,
+      "::before_right": null,
+      "::before_pointerEvents": "musaex-kk1bqk",
+      "::before_width": "musaex-bplea8",
+      "::before_boxShadow": "musaex-91zhsk",
+      $$css: true
+    },
+    trailing: {
+      "::after_content": "musaex-1s928wv",
+      "::after_position": "musaex-1j6awrg",
+      "::after_insetBlock": "musaex-d54j2p",
+      "::after_top": null,
+      "::after_bottom": null,
+      "::after_insetInlineEnd": "musaex-1unh1gc",
+      "::after_left": null,
+      "::after_right": null,
+      "::after_pointerEvents": "musaex-2q1x1w",
+      "::after_width": "musaex-1glcteh",
+      "::after_boxShadow": "musaex-15cyge6",
+      $$css: true
+    }
+  },
+  list: {
+    "default": function _default(props) {
+      return [{
+        display: "musaex-78zum5",
+        width: "musaex-eq5yr9",
+        transform: "musaex-1v0jg1i",
+        $$css: true
+      }, {
+        "--transform": "translateX(-".concat(props.offset, "px)") != null ? "translateX(-".concat(props.offset, "px)") : "initial"
+      }];
+    }
+  },
+  indicator: {
+    "default": function _default(props) {
+      return [{
+        height: "musaex-26n3vf",
+        backgroundColor: "musaex-q1mx2j",
+        position: "musaex-10l6tqk",
+        bottom: "musaex-1al2we5",
+        $$css: true
+      }, {
+        "--backgroundColor": props.color != null ? props.color : "initial"
+      }];
+    }
+  }
+};
+var Navigation = function Navigation(_ref) {
+  var onChange = _ref.onChange;
+  var _useTabsContext = hooks.useTabsContext(),
+    activeKey = _useTabsContext.activeKey,
+    items = _useTabsContext.items;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tabs);
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    indicatorRef = _useAnimate2[0],
+    animateIndicator = _useAnimate2[1];
+  var tabRefs = React.useRef(new Map());
+  var theme = hooks$1.useTheme();
+  var _useNavigation = hooks.useNavigation(),
+    navigatorRef = _useNavigation.navigatorRef,
+    tabsRef = _useNavigation.tabsRef,
+    scroll = _useNavigation.scroll,
+    offset = _useNavigation.offset,
+    isLeadingOverflow = _useNavigation.isLeadingOverflow,
+    isTrailingOverflow = _useNavigation.isTrailingOverflow;
+  // control tabs scroll
+  hooks.useNavigatorScroll({
+    navigatorRef: navigatorRef,
+    scroll: scroll
+  });
+  var styled = {
+    navigation: stylex.default.props(styles.navigation["default"]({
+      outlineColor: theme.colors[colors.ColorToken.Outline]
+    })),
+    navigator: stylex.default.props(styles.navigator["default"], isLeadingOverflow && styles.navigator.leading, isTrailingOverflow && styles.navigator.trailing),
+    list: stylex.default.props(styles.list["default"]({
+      offset: offset
+    })),
+    indicator: stylex.default.props(styles.indicator["default"]({
+      color: theme.colors[colors.ColorToken.Primary]
+    }))
+  };
+  // repaint indicator when activeKey changed
+  // animate indicator to correct position & width
+  React.useEffect(function () {
+    if (relax.isUndefined(activeKey)) return;
+    var tab = tabRefs.current.get(activeKey);
+    animateIndicator(indicatorRef.current, {
+      left: tab === null || tab === void 0 ? void 0 : tab.offsetLeft,
+      width: tab === null || tab === void 0 ? void 0 : tab.clientWidth
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "tablist",
+    className: relax.clsx(classNames[className.TabsClassToken.TabsNavigation], styled.navigation.className),
+    style: styled.navigation.style
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: navigatorRef,
+    className: relax.clsx(classNames[className.TabsClassToken.TabsNavigator], styled.navigator.className),
+    style: styled.navigator.style
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: tabsRef,
+    className: relax.clsx(classNames[className.TabsClassToken.TabList], styled.list.className),
+    style: styled.list.style
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(tab.default, {
+      key: item.key,
+      value: item.key,
+      label: item.label,
+      onClick: onChange,
+      ref: function ref(_tab) {
+        tabRefs.current.set(item.key, _tab);
+      }
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: indicatorRef,
+    className: relax.clsx(classNames[className.TabsClassToken.Indicator], styled.indicator.className),
+    style: styled.indicator.style
+  }))), /*#__PURE__*/React.createElement("div", null));
+};
+
+exports.default = Navigation;

package/dist/components/tabs/{navigation.js → navigation.mjs}

@@ -1,15 +1,15 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useEffect } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TabsClassToken } from '../../utils/class-name.js';
-import Tab from './tab.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TabsClassToken } from '../../utils/class-name.mjs';
+import Tab from './tab.mjs';
 import { useAnimate } from 'framer-motion';
 import { isUndefined, clsx } from '@aiszlab/relax';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useTabsContext, useNavigation, useNavigatorScroll } from './hooks.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useTabsContext, useNavigation, useNavigatorScroll } from './hooks.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   navigation: {

package/dist/components/tabs/panels.cjs

@@ -0,0 +1,88 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  panels: {
+    "default": {
+      marginTop: "musaex-xhh4n9",
+      $$css: true
+    }
+  },
+  panel: {
+    "default": {
+      $$css: true
+    },
+    active: {
+      display: null,
+      $$css: true
+    },
+    hidden: {
+      display: "musaex-1s85apg",
+      $$css: true
+    }
+  }
+};
+var Panels = function Panels(_ref) {
+  var forceRender = _ref.forceRender,
+    destroyable = _ref.destroyable,
+    activatedKeys = _ref.activatedKeys;
+  var _useTabsContext = hooks.useTabsContext(),
+    items = _useTabsContext.items,
+    activeKey = _useTabsContext.activeKey;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tabs);
+  var styled = {
+    panels: stylex.default.props(styles.panels["default"]),
+    panel: {
+      active: stylex.default.props(styles.panel["default"], styles.panel.active),
+      hidden: stylex.default.props(styles.panel["default"], styles.panel.hidden)
+    }
+  };
+  var panels = React.useMemo(function () {
+    if (relax.isUndefined(activeKey)) {
+      return [];
+    }
+    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];
+      });
+    }
+    return items.map(function (item) {
+      return [item.key, activatedKeys.has(item.key) ? item.children : null];
+    });
+  }, [destroyable, forceRender, items, activeKey, activatedKeys]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TabsClassToken.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$1 = _ref4.className,
+      style = _ref4.style;
+    if (relax.isVoid(children)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: relax.clsx(classNames[className.TabsClassToken.Panel], className$1),
+      style: style
+    }, children);
+  }));
+};
+
+exports.default = Panels;

package/dist/components/tabs/{panels.js → panels.mjs}

@@ -1,11 +1,11 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TabsClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TabsClassToken } from '../../utils/class-name.mjs';
 import { isUndefined, clsx, isVoid } from '@aiszlab/relax';
-import { useTabsContext } from './hooks.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useTabsContext } from './hooks.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   panels: {

package/dist/components/tabs/tab.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var button = require('../button/button.cjs');
+var context = require('./context.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var Tab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _useContext;
+  var value = _ref.value,
+    onClick = _ref.onClick,
+    label = _ref.label;
+  var _ref2 = (_useContext = React.useContext(context.default)) !== null && _useContext !== void 0 ? _useContext : {},
+    activeKey = _ref2.activeKey;
+  var isActive = activeKey === value;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tabs);
+  var click = React.useCallback(function () {
+    onClick(value);
+  }, [onClick, value]);
+  return /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    color: isActive ? "primary" : "secondary",
+    ref: ref,
+    onClick: click,
+    className: classNames[className.TabsClassToken.Tab],
+    ripple: false,
+    style: {
+      borderRadius: "10% 10% 0 0"
+    }
+  }, label);
+});
+
+exports.default = Tab;

package/dist/components/tabs/{tab.js → tab.mjs}

@@ -1,9 +1,9 @@
 import React, { forwardRef, useContext, useCallback } from 'react';
-import Button from '../button/button.js';
-import Context from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TabsClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { Button } from '../button/button.mjs';
+import Context from './context.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TabsClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useContext;

package/dist/components/tabs/tabs.cjs

@@ -0,0 +1,56 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context = require('./context.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+var panels = require('./panels.cjs');
+var navigation = require('./navigation.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var Tabs = function Tabs(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _activeKey = _ref.activeKey,
+    defaultActiveKey = _ref.defaultActiveKey,
+    _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({
+      items: items,
+      activeKey: _activeKey,
+      defaultActiveKey: defaultActiveKey
+    }),
+    activeKey = _useTabs.activeKey,
+    activatedKeys = _useTabs.activatedKeys,
+    changeActiveKey = _useTabs.changeActiveKey;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Tabs);
+  /// context value
+  var contextValue = React.useMemo(function () {
+    return {
+      activeKey: activeKey,
+      items: items
+    };
+  }, [activeKey, items]);
+  // if there is not any item, return null
+  if (items.length === 0) return null;
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.TabsClassToken.Tabs], className$1),
+    style: style
+  }, /*#__PURE__*/React.createElement(navigation.default, {
+    onChange: changeActiveKey
+  }), /*#__PURE__*/React.createElement(panels.default, {
+    activatedKeys: activatedKeys,
+    destroyable: destroyable,
+    forceRender: forceRender
+  })));
+};
+
+exports.default = Tabs;

package/dist/components/tabs/{tabs.js → tabs.mjs}

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import Context from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { TabsClassToken } from '../../utils/class-name.js';
+import Context from './context.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { TabsClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useTabs } from './hooks.js';
-import Panels from './panels.js';
-import Navigation from './navigation.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useTabs } from './hooks.mjs';
+import Panels from './panels.mjs';
+import Navigation from './navigation.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Tabs = function Tabs(_ref) {
   var _ref$items = _ref.items,
@@ -50,6 +50,5 @@ var Tabs = function Tabs(_ref) {
     forceRender: forceRender
   })));
 };
-var Tabs$1 = Tabs;
 
-export { Tabs$1 as default };
+export { Tabs as default };

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

@@ -1,5 +1,5 @@
 import type { Key, ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 export interface TabsProps extends ComponentProps {
     /**
      * @description