musae 1.3.0 → 1.3.1-beta.2

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

@@ -1,12 +1,13 @@
 import { type ColumnDef, type DeepValue, type DeepKeys } from "@tanstack/react-table";
 import type { Column, ContextValue, SortDescriptor } from "../../types/table";
-import type { CLASS_NAMES } from "./context";
+import { type CLASS_NAMES } from "./context";
 /**
  * @description
  * use columns
  */
-export declare const useColumns: <T>({ columns }: {
+export declare const useColumns: <T>({ columns, expandable, }: {
     columns: Column<T>[];
+    expandable?: boolean;
 }) => ColumnDef<T, DeepValue<T, DeepKeys<T>>>[];
 /**
  * @author murukal

package/dist/components/table/hooks.mjs

@@ -1,18 +1,25 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { createColumnHelper } from '@tanstack/react-table';
 import React, { useRef, useMemo } from 'react';
 import Cell from './header/cell.mjs';
 import { useControlledState, useEvent } from '@aiszlab/relax';
+import { EXPAND_COLUMN_ID } from './context.mjs';
+import { Button } from '../button/button.mjs';
+import IconExpandLess from '../icon/icons/navigation/expand-less.mjs';
+import IconExpandMore from '../icon/icons/navigation/expand-more.mjs';
 
 /**
  * @description
  * use columns
  */
 var useColumns = function useColumns(_ref) {
-  var columns = _ref.columns;
+  var columns = _ref.columns,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? false : _ref$expandable;
   var helper = useRef(createColumnHelper());
   return useMemo(function () {
-    return columns.map(function (_ref2, index) {
+    var dataColumns = columns.map(function (_ref2, index) {
       var _ref3;
       var key = _ref2.key,
         render = _ref2.render,
@@ -39,19 +46,34 @@ var useColumns = function useColumns(_ref) {
         }
       });
     });
-  }, [columns]);
+    if (!expandable) return dataColumns;
+    return [helper.current.display({
+      id: EXPAND_COLUMN_ID,
+      header: null,
+      cell: function cell(_ref4) {
+        var row = _ref4.row;
+        return row.getCanExpand() ? (/*#__PURE__*/React.createElement(Button, {
+          variant: "text",
+          size: "small",
+          "aria-label": row.getIsExpanded() ? "收起" : "展开",
+          "aria-expanded": row.getIsExpanded(),
+          onClick: row.getToggleExpandedHandler()
+        }, row.getIsExpanded() ? /*#__PURE__*/React.createElement(IconExpandLess, null) : /*#__PURE__*/React.createElement(IconExpandMore, null))) : null;
+      }
+    })].concat(_toConsumableArray(dataColumns));
+  }, [columns, expandable]);
 };
 /**
  * @author murukal
  * @description
  * for context value
  */
-var useContextValue = function useContextValue(_ref4) {
-  var _table = _ref4.table,
-    bordered = _ref4.bordered,
-    _sortDescriptor = _ref4.sortDescriptor,
-    _onSortChange = _ref4.onSortChange,
-    classNames = _ref4.classNames;
+var useContextValue = function useContextValue(_ref5) {
+  var _table = _ref5.table,
+    bordered = _ref5.bordered,
+    _sortDescriptor = _ref5.sortDescriptor,
+    _onSortChange = _ref5.onSortChange,
+    classNames = _ref5.classNames;
   var _useControlledState = useControlledState(_sortDescriptor),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     sortDescriptor = _useControlledState2[0],

package/dist/components/table/styles.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  table: {
+    "default": {
+      kzqmXN: "musaex-h8yej3",
+      kLvRdT: "musaex-1mwwwfo",
+      $$css: true
+    }
+  },
+  bodyCell: {
+    "default": {
+      kjGldf: "musaex-aafj1c",
+      kEafiO: "musaex-1ndz9a0",
+      kg3NbH: "musaex-1g3a7fl",
+      k8WAf4: "musaex-s7sbuz",
+      kVAM5u: "musaex-axmpxa",
+      ksu8eU: "musaex-1y0btm7",
+      kt9PQ7: "musaex-d1xpcx",
+      $$css: true
+    },
+    bordered: {
+      kjGldf: "musaex-imutj9",
+      $$css: true
+    },
+    child: {
+      kZCmMZ: "musaex-1sznsej",
+      $$css: true
+    }
+  },
+  headerCell: {
+    "default": {
+      kMzoRj: "musaex-k59kd",
+      kWkggS: "musaex-k7eln3",
+      kVAM5u: "musaex-axmpxa",
+      k9WMMc: "musaex-1yc453h",
+      kVAEAm: "musaex-1n2onr6",
+      kg3NbH: "musaex-1g3a7fl",
+      k8WAf4: "musaex-s7sbuz",
+      ksu8eU: "musaex-1y0btm7",
+      kt9PQ7: "musaex-d1xpcx",
+      $$css: true
+    },
+    unbordered: {
+      kI9HWG: "musaex-x7gz8e",
+      ko2eyy: "musaex-no41pc",
+      kqR9dF: "musaex-1o8gf8",
+      kpPfZE: "musaex-1rvbi93",
+      kOSWPn: "musaex-8l2ero",
+      kQUujV: "musaex-11jkr13",
+      knGBE: "musaex-1kmnipp",
+      kpnlHG: "musaex-192i3sz",
+      $$css: true
+    },
+    bordered: {
+      kMzoRj: "musaex-1iyq3db",
+      $$css: true
+    }
+  },
+  headerContent: {
+    "default": {
+      k1xSpc: "musaex-78zum5",
+      kjj79g: "musaex-1qughib",
+      kGNEyG: "musaex-6s0dn4",
+      $$css: true
+    },
+    handlers: {
+      k1xSpc: "musaex-3nfvp2",
+      kXwgrk: "musaex-1q0g3np",
+      kOIVth: "musaex-15wobh7",
+      kMwMTN: "musaex-14kusyn",
+      kfSwDN: "musaex-87ps6o",
+      $$css: true
+    }
+  },
+  sort: {
+    "default": {
+      kVAEAm: "musaex-1n2onr6",
+      kkrTdU: "musaex-1ypdohk",
+      $$css: true
+    },
+    half: {
+      kVAEAm: "musaex-10l6tqk",
+      k87sOh: "musaex-13vifvy",
+      kLqNvP: "musaex-1o0tod",
+      kZKoxP: "musaex-11g3na9",
+      kVQacm: "musaex-b3r6kr",
+      $$css: true
+    },
+    checked: {
+      kMwMTN: "musaex-14qql8p",
+      $$css: true
+    }
+  }
+};
+
+exports.default = styles;

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

@@ -0,0 +1,84 @@
+declare const styles: {
+    table: Readonly<{
+        readonly default: Readonly<{
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "100%">;
+            readonly borderCollapse: import("@stylexjs/stylex").StyleXClassNameFor<"borderCollapse", "collapse">;
+        }>;
+    }>;
+    bodyCell: Readonly<{
+        readonly default: Readonly<{
+            readonly borderInlineWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderInlineWidth", string>;
+            readonly borderBlockStartWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockStartWidth", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+            readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
+            readonly borderBlockEndWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockEndWidth", string>;
+        }>;
+        readonly bordered: Readonly<{
+            readonly borderInlineWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderInlineWidth", string>;
+        }>;
+        readonly child: Readonly<{
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", `calc(var(--depth) * ${import("@stylexjs/stylex").StyleXVar<string>})`>;
+        }>;
+    }>;
+    headerCell: Readonly<{
+        readonly default: Readonly<{
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface)">;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+            readonly textAlign: import("@stylexjs/stylex").StyleXClassNameFor<"textAlign", "start">;
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "relative">;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
+            readonly borderBottomWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomWidth", string>;
+        }>;
+        readonly unbordered: Readonly<{
+            readonly ":not(:last-of-type)::after": import("@stylexjs/stylex").StyleXClassNameFor<":not(:last-of-type)::after", {
+                readonly content: "\"\"";
+                readonly position: "absolute";
+                readonly top: "50%";
+                readonly width: import("@stylexjs/stylex").StyleXVar<string>;
+                readonly height: import("@stylexjs/stylex").StyleXVar<string>;
+                readonly backgroundColor: "var(--color-outline-variant)";
+                readonly transform: "translateY(-50%)";
+                readonly insetInlineEnd: 0;
+            }>;
+        }>;
+        readonly bordered: Readonly<{
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+        }>;
+    }>;
+    headerContent: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "space-between">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        }>;
+        readonly handlers: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "row">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-surface-container-highest)">;
+            readonly userSelect: import("@stylexjs/stylex").StyleXClassNameFor<"userSelect", "none">;
+        }>;
+    }>;
+    sort: Readonly<{
+        readonly default: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "relative">;
+            readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
+        }>;
+        readonly half: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly insetBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockStart", 0>;
+            readonly insetInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineStart", 0>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+        }>;
+        readonly checked: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-primary)">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/table/styles.mjs

@@ -0,0 +1,95 @@
+var styles = {
+  table: {
+    "default": {
+      kzqmXN: "musaex-h8yej3",
+      kLvRdT: "musaex-1mwwwfo",
+      $$css: true
+    }
+  },
+  bodyCell: {
+    "default": {
+      kjGldf: "musaex-aafj1c",
+      kEafiO: "musaex-1ndz9a0",
+      kg3NbH: "musaex-1g3a7fl",
+      k8WAf4: "musaex-s7sbuz",
+      kVAM5u: "musaex-axmpxa",
+      ksu8eU: "musaex-1y0btm7",
+      kt9PQ7: "musaex-d1xpcx",
+      $$css: true
+    },
+    bordered: {
+      kjGldf: "musaex-imutj9",
+      $$css: true
+    },
+    child: {
+      kZCmMZ: "musaex-1sznsej",
+      $$css: true
+    }
+  },
+  headerCell: {
+    "default": {
+      kMzoRj: "musaex-k59kd",
+      kWkggS: "musaex-k7eln3",
+      kVAM5u: "musaex-axmpxa",
+      k9WMMc: "musaex-1yc453h",
+      kVAEAm: "musaex-1n2onr6",
+      kg3NbH: "musaex-1g3a7fl",
+      k8WAf4: "musaex-s7sbuz",
+      ksu8eU: "musaex-1y0btm7",
+      kt9PQ7: "musaex-d1xpcx",
+      $$css: true
+    },
+    unbordered: {
+      kI9HWG: "musaex-x7gz8e",
+      ko2eyy: "musaex-no41pc",
+      kqR9dF: "musaex-1o8gf8",
+      kpPfZE: "musaex-1rvbi93",
+      kOSWPn: "musaex-8l2ero",
+      kQUujV: "musaex-11jkr13",
+      knGBE: "musaex-1kmnipp",
+      kpnlHG: "musaex-192i3sz",
+      $$css: true
+    },
+    bordered: {
+      kMzoRj: "musaex-1iyq3db",
+      $$css: true
+    }
+  },
+  headerContent: {
+    "default": {
+      k1xSpc: "musaex-78zum5",
+      kjj79g: "musaex-1qughib",
+      kGNEyG: "musaex-6s0dn4",
+      $$css: true
+    },
+    handlers: {
+      k1xSpc: "musaex-3nfvp2",
+      kXwgrk: "musaex-1q0g3np",
+      kOIVth: "musaex-15wobh7",
+      kMwMTN: "musaex-14kusyn",
+      kfSwDN: "musaex-87ps6o",
+      $$css: true
+    }
+  },
+  sort: {
+    "default": {
+      kVAEAm: "musaex-1n2onr6",
+      kkrTdU: "musaex-1ypdohk",
+      $$css: true
+    },
+    half: {
+      kVAEAm: "musaex-10l6tqk",
+      k87sOh: "musaex-13vifvy",
+      kLqNvP: "musaex-1o0tod",
+      kZKoxP: "musaex-11g3na9",
+      kVQacm: "musaex-b3r6kr",
+      $$css: true
+    },
+    checked: {
+      kMwMTN: "musaex-14qql8p",
+      $$css: true
+    }
+  }
+};
+
+export { styles as default };

package/dist/components/table/table.cjs

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 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 stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var loading = require('../loading/loading.cjs');
+var styles = require('./styles.cjs');
+var relax = require('@aiszlab/relax');
 
 var Table = function Table(_ref) {
   var _ref$bordered = _ref.bordered,
@@ -25,16 +29,56 @@ var Table = function Table(_ref) {
     className$1 = _ref.className,
     style = _ref.style,
     _ref$loading = _ref.loading,
-    loading$1 = _ref$loading === void 0 ? false : _ref$loading;
+    loading$1 = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? false : _ref$expandable,
+    expandedKeys = _ref.expandedKeys,
+    _ref$defaultExpandedK = _ref.defaultExpandedKeys,
+    defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
+    onExpandedKeysChange = _ref.onExpandedKeysChange,
+    rowKey = _ref.rowKey;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var columns = hooks.useColumns({
-    columns: _columns
+    columns: _columns,
+    expandable: expandable
   });
-  var table = reactTable.useReactTable({
+  var _useState = React.useState(function () {
+      return Object.fromEntries(defaultExpandedKeys.map(function (key) {
+        return [String(key), true];
+      }));
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledExpanded = _useState2[0],
+    setUncontrolledExpanded = _useState2[1];
+  var expanded = React.useMemo(function () {
+    return relax.isUndefined(expandedKeys) ? uncontrolledExpanded : Object.fromEntries(expandedKeys.map(function (key) {
+      return [String(key), true];
+    }));
+  }, [expandedKeys, uncontrolledExpanded]);
+  var table = reactTable.useReactTable(_objectSpread(_objectSpread({
     columns: columns,
     data: dataSource,
     getCoreRowModel: reactTable.getCoreRowModel()
-  });
+  }, expandable && {
+    getSubRows: function getSubRows(record) {
+      return record.children;
+    },
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
+    state: {
+      expanded: expanded
+    },
+    onExpandedChange: function onExpandedChange(updater) {
+      var next = relax.isFunction(updater) ? updater(expanded) : updater;
+      if (relax.isUndefined(expandedKeys)) setUncontrolledExpanded(next);
+      onExpandedKeysChange === null || onExpandedKeysChange === void 0 || onExpandedKeysChange(next === true ? table.getRowModel().flatRows.map(function (row) {
+        return row.id;
+      }) : Object.keys(next));
+    }
+  }), rowKey && {
+    getRowId: function getRowId(record, index, parent) {
+      return String(relax.isFunction(rowKey) ? rowKey(record, index, parent === null || parent === void 0 ? void 0 : parent.original) : record[rowKey]);
+    }
+  }));
   var contextValue = hooks.useContextValue({
     table: table,
     bordered: bordered,
@@ -42,9 +86,7 @@ var Table = function Table(_ref) {
     onSortChange: onSortChange,
     classNames: classNames
   });
-  var styled = {
-    className: "musaex-h8yej3 musaex-1mwwwfo"
-  };
+  var styled = stylex.props(styles.default.table["default"]);
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(loading.default, {

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

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

package/dist/components/table/table.mjs

@@ -1,13 +1,17 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
-import React from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useReactTable, getCoreRowModel, getExpandedRowModel } from '@tanstack/react-table';
+import React, { useState, useMemo } from 'react';
 import { useColumns, useContextValue } from './hooks.mjs';
 import Header from './header/header.mjs';
 import { Context, CLASS_NAMES } from './context.mjs';
 import Body from './body.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import Loading from '../loading/loading.mjs';
+import styles from './styles.mjs';
+import { isUndefined, isFunction } from '@aiszlab/relax';
 
 var Table = function Table(_ref) {
   var _ref$bordered = _ref.bordered,
@@ -21,16 +25,56 @@ var Table = function Table(_ref) {
     className = _ref.className,
     style = _ref.style,
     _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading;
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? false : _ref$expandable,
+    expandedKeys = _ref.expandedKeys,
+    _ref$defaultExpandedK = _ref.defaultExpandedKeys,
+    defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
+    onExpandedKeysChange = _ref.onExpandedKeysChange,
+    rowKey = _ref.rowKey;
   var classNames = useClassNames(CLASS_NAMES);
   var columns = useColumns({
-    columns: _columns
+    columns: _columns,
+    expandable: expandable
   });
-  var table = useReactTable({
+  var _useState = useState(function () {
+      return Object.fromEntries(defaultExpandedKeys.map(function (key) {
+        return [String(key), true];
+      }));
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledExpanded = _useState2[0],
+    setUncontrolledExpanded = _useState2[1];
+  var expanded = useMemo(function () {
+    return isUndefined(expandedKeys) ? uncontrolledExpanded : Object.fromEntries(expandedKeys.map(function (key) {
+      return [String(key), true];
+    }));
+  }, [expandedKeys, uncontrolledExpanded]);
+  var table = useReactTable(_objectSpread(_objectSpread({
     columns: columns,
     data: dataSource,
     getCoreRowModel: getCoreRowModel()
-  });
+  }, expandable && {
+    getSubRows: function getSubRows(record) {
+      return record.children;
+    },
+    getExpandedRowModel: getExpandedRowModel(),
+    state: {
+      expanded: expanded
+    },
+    onExpandedChange: function onExpandedChange(updater) {
+      var next = isFunction(updater) ? updater(expanded) : updater;
+      if (isUndefined(expandedKeys)) setUncontrolledExpanded(next);
+      onExpandedKeysChange === null || onExpandedKeysChange === void 0 || onExpandedKeysChange(next === true ? table.getRowModel().flatRows.map(function (row) {
+        return row.id;
+      }) : Object.keys(next));
+    }
+  }), rowKey && {
+    getRowId: function getRowId(record, index, parent) {
+      return String(isFunction(rowKey) ? rowKey(record, index, parent === null || parent === void 0 ? void 0 : parent.original) : record[rowKey]);
+    }
+  }));
   var contextValue = useContextValue({
     table: table,
     bordered: bordered,
@@ -38,9 +82,7 @@ var Table = function Table(_ref) {
     onSortChange: onSortChange,
     classNames: classNames
   });
-  var styled = {
-    className: "musaex-h8yej3 musaex-1mwwwfo"
-  };
+  var styled = props(styles.table["default"]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Loading, {

package/dist/components/theme/theme.cjs

@@ -4,6 +4,29 @@
  * @description
  * typography - display
  */
+var $display = {
+  small: {
+    kGuDYH: "musaex-qozcyj",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-bzal7z",
+    kb6lSQ: "musaex-1jcmgtk",
+    $$css: true
+  },
+  medium: {
+    kGuDYH: "musaex-ujqvrl",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-5agonf",
+    kb6lSQ: "musaex-1jcmgtk",
+    $$css: true
+  },
+  large: {
+    kGuDYH: "musaex-8p9s6c",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-1kke7aa",
+    kb6lSQ: "musaex-1i67g9q",
+    $$css: true
+  }
+};
 /**
  * @description
  * typography - headline
@@ -36,6 +59,13 @@ var $headline = {
  * typography - title
  */
 var $title = {
+  small: {
+    kGuDYH: "musaex-if65rj",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-1fc57z9",
+    kb6lSQ: "musaex-19d5yem",
+    $$css: true
+  },
   medium: {
     kGuDYH: "musaex-1j61zf2",
     k63SB2: "musaex-o1l8bm",
@@ -117,6 +147,7 @@ var $scrollbar = {
 };
 
 exports.$body = $body;
+exports.$display = $display;
 exports.$headline = $headline;
 exports.$label = $label;
 exports.$scrollbar = $scrollbar;

package/dist/components/theme/theme.mjs

@@ -2,6 +2,29 @@
  * @description
  * typography - display
  */
+var $display = {
+  small: {
+    kGuDYH: "musaex-qozcyj",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-bzal7z",
+    kb6lSQ: "musaex-1jcmgtk",
+    $$css: true
+  },
+  medium: {
+    kGuDYH: "musaex-ujqvrl",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-5agonf",
+    kb6lSQ: "musaex-1jcmgtk",
+    $$css: true
+  },
+  large: {
+    kGuDYH: "musaex-8p9s6c",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-1kke7aa",
+    kb6lSQ: "musaex-1i67g9q",
+    $$css: true
+  }
+};
 /**
  * @description
  * typography - headline
@@ -34,6 +57,13 @@ var $headline = {
  * typography - title
  */
 var $title = {
+  small: {
+    kGuDYH: "musaex-if65rj",
+    k63SB2: "musaex-o1l8bm",
+    kLWn49: "musaex-1fc57z9",
+    kb6lSQ: "musaex-19d5yem",
+    $$css: true
+  },
   medium: {
     kGuDYH: "musaex-1j61zf2",
     k63SB2: "musaex-o1l8bm",
@@ -114,4 +144,4 @@ var $scrollbar = {
   }
 };
 
-export { $body, $headline, $label, $scrollbar, $title };
+export { $body, $display, $headline, $label, $scrollbar, $title };

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

@@ -148,3 +148,10 @@ export declare const duration: import("@stylexjs/stylex").VarGroup<Readonly<{
     long: string;
     longest: string;
 }>, symbol>;
+/**
+ * @zh 响应式断点。`mobile` 匹配宽度 < 905px 的视口。
+ * @en Responsive breakpoints. `mobile` matches viewports narrower than 905px.
+ */
+export declare const breakpoints: {
+    mobile: string;
+};