musae 1.3.0 → 1.3.1-beta.2

package/dist/components/side-sheet/styles.d.ts

@@ -0,0 +1,83 @@
+export declare const styles: {
+    panel: Readonly<{
+        readonly default: Readonly<{
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container-low)">;
+            readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+        }>;
+    }>;
+    standard: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--size)">;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly flexShrink: import("@stylexjs/stylex").StyleXClassNameFor<"flexShrink", 0>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface)">;
+            readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+        }>;
+        readonly right: Readonly<{
+            readonly borderLeftWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderLeftWidth", string>;
+            readonly borderLeftStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderLeftStyle", "solid">;
+            readonly borderLeftColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderLeftColor", "var(--color-outline-variant)">;
+        }>;
+        readonly left: Readonly<{
+            readonly borderRightWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightWidth", string>;
+            readonly borderRightStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightStyle", "solid">;
+            readonly borderRightColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightColor", "var(--color-outline-variant)">;
+        }>;
+        readonly top: Readonly<{
+            readonly borderBottomWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomWidth", string>;
+            readonly borderBottomStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomStyle", "solid">;
+            readonly borderBottomColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomColor", "var(--color-outline-variant)">;
+        }>;
+        readonly bottom: Readonly<{
+            readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+            readonly borderTopStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopStyle", "solid">;
+            readonly borderTopColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopColor", "var(--color-outline-variant)">;
+        }>;
+    }>;
+    header: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "flex-start">;
+            readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+            readonly paddingBottom: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBottom", string>;
+            readonly paddingInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineEnd", string>;
+        }>;
+        readonly withTitle: Readonly<{
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", string>;
+        }>;
+        readonly withBack: Readonly<{
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", string>;
+        }>;
+    }>;
+    title: Readonly<{
+        readonly default: Readonly<{
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
+            readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", 0>;
+            readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
+        }>;
+    }>;
+    content: Readonly<{
+        readonly default: Readonly<{
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
+            readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", 0>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "auto">;
+            readonly overscrollBehavior: import("@stylexjs/stylex").StyleXClassNameFor<"overscrollBehavior", "contain">;
+        }>;
+    }>;
+    actions: Readonly<{
+        readonly default: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+        }>;
+        readonly row: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly paddingTop: import("@stylexjs/stylex").StyleXClassNameFor<"paddingTop", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+    }>;
+};

package/dist/components/side-sheet/styles.mjs

@@ -0,0 +1,104 @@
+var panel = {
+  "default": {
+    kWkggS: "musaex-1eai1fy",
+    kGO01o: "musaex-1oxn6w8",
+    $$css: true
+  }
+};
+var standard = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kzqmXN: "musaex-1fjlwjz",
+    kZKoxP: "musaex-qg7gut",
+    kmuXW: "musaex-2lah0s",
+    kWkggS: "musaex-k7eln3",
+    kGO01o: "musaex-1oxn6w8",
+    $$css: true
+  },
+  right: {
+    kZ1KPB: "musaex-6vwjc",
+    k4WBpm: "musaex-19ypqd9",
+    kaZRDh: "musaex-svd4c5",
+    $$css: true
+  },
+  left: {
+    kWqL5O: "musaex-a640vs",
+    kSWEuD: "musaex-32b0ac",
+    k26BEO: "musaex-imfbgf",
+    $$css: true
+  },
+  top: {
+    kt9PQ7: "musaex-d1xpcx",
+    kfdmCh: "musaex-1q0q8m5",
+    kL6WhQ: "musaex-quqrak",
+    $$css: true
+  },
+  bottom: {
+    kEafiO: "musaex-uvson1",
+    kPef9Z: "musaex-13fuv20",
+    kLZC3w: "musaex-6ogecl",
+    $$css: true
+  }
+};
+var header = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-1cy8zhl",
+    kLKAdn: "musaex-h1u3e4",
+    kGO01o: "musaex-5ynjmo",
+    kwRFfy: "musaex-1max5gj",
+    $$css: true
+  },
+  withTitle: {
+    kZCmMZ: "musaex-150i2hq",
+    $$css: true
+  },
+  withBack: {
+    kZCmMZ: "musaex-1rl4tsp",
+    $$css: true
+  }
+};
+var content = {
+  "default": {
+    kUk6DE: "musaex-98rzlu",
+    kAzted: "musaex-2lwn1j",
+    kVQacm: "musaex-ysyzu8",
+    kZeWKH: "musaex-ish69e",
+    $$css: true
+  }
+};
+var title = {
+  "default": {
+    kUk6DE: "musaex-98rzlu",
+    k7Eaqz: "musaex-euugli",
+    kLKAdn: "musaex-h1u3e4",
+    kMwMTN: "musaex-bq1wot",
+    $$css: true
+  }
+};
+var actions = {
+  "default": {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    $$css: true
+  },
+  row: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1wm2zkp",
+    kLKAdn: "musaex-1oop6c3",
+    kg3NbH: "musaex-1pyhihf",
+    $$css: true
+  }
+};
+var styles = {
+  panel: panel,
+  standard: standard,
+  header: header,
+  title: title,
+  content: content,
+  actions: actions
+};
+
+export { styles };

package/dist/components/table/body.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var context = require('./context.cjs');
 var reactTable = require('@tanstack/react-table');
@@ -11,23 +12,8 @@ var empty = require('../empty/empty.cjs');
 var className = require('@aiszlab/relax/class-name');
 var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var styles = require('./styles.cjs');
 
-var styles = {
-  cell: {
-    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
-  }
-};
 var Body = function Body() {
   var _useTable = context.useTable(),
     table = _useTable.table,
@@ -35,7 +21,7 @@ var Body = function Body() {
     classNames = _useTable.classNames;
   var _themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant"]);
   if (!table) return null;
-  var styled = stylex.props(styles.cell, bordered && styles.bordered, theme.$body.small);
+  var styled = stylex.props(styles.default.bodyCell["default"], bordered && styles.default.bodyCell.bordered, theme.$body.small);
   var rows = table.getRowModel().rows;
   var _isEmpty = relax.isEmpty(rows);
   return /*#__PURE__*/React.createElement("tbody", {
@@ -45,12 +31,17 @@ var Body = function Body() {
     colSpan: table.getAllColumns().length
   }, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
-      key: row.id
+      key: row.id,
+      className: className.stringify(row.getCanExpand() && classNames.expandableRow, row.depth > 0 && classNames.childRow)
     }, row.getVisibleCells().map(function (cell) {
+      var isFirstChildDataCell = row.depth > 0 && cell.column.id !== context.EXPAND_COLUMN_ID && cell.column.getIndex() === 1;
+      var cellStyled = stylex.props(isFirstChildDataCell && styles.default.bodyCell.child);
       return /*#__PURE__*/React.createElement("td", {
         key: cell.id,
-        className: className.stringify(styled.className),
-        style: styled.style
+        className: className.stringify(styled.className, cellStyled.className, cell.column.id === context.EXPAND_COLUMN_ID && classNames.expandColumn),
+        style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), cellStyled.style), isFirstChildDataCell && {
+          "--depth": row.depth
+        })
       }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()));
     }));
   }));

package/dist/components/table/body.mjs

@@ -1,5 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useTable } from './context.mjs';
+import { useTable, EXPAND_COLUMN_ID } from './context.mjs';
 import { flexRender } from '@tanstack/react-table';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { isEmpty } from '@aiszlab/relax';
@@ -7,23 +8,8 @@ import Empty from '../empty/empty.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { $body } from '../theme/theme.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import styles from './styles.mjs';
 
-var styles = {
-  cell: {
-    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
-  }
-};
 var Body = function Body() {
   var _useTable = useTable(),
     table = _useTable.table,
@@ -31,7 +17,7 @@ var Body = function Body() {
     classNames = _useTable.classNames;
   var _themeColorVars = useThemeColorVars(["outline-variant"]);
   if (!table) return null;
-  var styled = props(styles.cell, bordered && styles.bordered, $body.small);
+  var styled = props(styles.bodyCell["default"], bordered && styles.bodyCell.bordered, $body.small);
   var rows = table.getRowModel().rows;
   var _isEmpty = isEmpty(rows);
   return /*#__PURE__*/React.createElement("tbody", {
@@ -41,12 +27,17 @@ var Body = function Body() {
     colSpan: table.getAllColumns().length
   }, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
-      key: row.id
+      key: row.id,
+      className: stringify(row.getCanExpand() && classNames.expandableRow, row.depth > 0 && classNames.childRow)
     }, row.getVisibleCells().map(function (cell) {
+      var isFirstChildDataCell = row.depth > 0 && cell.column.id !== EXPAND_COLUMN_ID && cell.column.getIndex() === 1;
+      var cellStyled = props(isFirstChildDataCell && styles.bodyCell.child);
       return /*#__PURE__*/React.createElement("td", {
         key: cell.id,
-        className: stringify(styled.className),
-        style: styled.style
+        className: stringify(styled.className, cellStyled.className, cell.column.id === EXPAND_COLUMN_ID && classNames.expandColumn),
+        style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), cellStyled.style), isFirstChildDataCell && {
+          "--depth": row.depth
+        })
       }, flexRender(cell.column.columnDef.cell, cell.getContext()));
     }));
   }));

package/dist/components/table/context.cjs

@@ -2,10 +2,14 @@
 
 var React = require('react');
 
+var EXPAND_COLUMN_ID = "__table_expand";
 var CLASS_NAMES = {
   table: "table",
   header: "table__header",
-  body: "table__body"
+  body: "table__body",
+  expandColumn: "table__expand-column",
+  expandableRow: "table__row--expandable",
+  childRow: "table__row--child"
 };
 var Context = /*#__PURE__*/React.createContext({
   bordered: false,
@@ -22,4 +26,5 @@ var useTable = function useTable() {
 
 exports.CLASS_NAMES = CLASS_NAMES;
 exports.Context = Context;
+exports.EXPAND_COLUMN_ID = EXPAND_COLUMN_ID;
 exports.useTable = useTable;

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

@@ -1,8 +1,12 @@
 import type { ContextValue } from "../../types/table";
+export declare const EXPAND_COLUMN_ID = "__table_expand";
 export declare const CLASS_NAMES: {
     readonly table: "table";
     readonly header: "table__header";
     readonly body: "table__body";
+    readonly expandColumn: "table__expand-column";
+    readonly expandableRow: "table__row--expandable";
+    readonly childRow: "table__row--child";
 };
 declare const Context: import("react").Context<ContextValue<unknown> & {
     classNames: typeof CLASS_NAMES;

package/dist/components/table/context.mjs

@@ -1,9 +1,13 @@
 import { createContext, useContext } from 'react';
 
+var EXPAND_COLUMN_ID = "__table_expand";
 var CLASS_NAMES = {
   table: "table",
   header: "table__header",
-  body: "table__body"
+  body: "table__body",
+  expandColumn: "table__expand-column",
+  expandableRow: "table__row--expandable",
+  childRow: "table__row--child"
 };
 var Context = /*#__PURE__*/createContext({
   bordered: false,
@@ -18,4 +22,4 @@ var useTable = function useTable() {
   return useContext(Context);
 };
 
-export { CLASS_NAMES, Context, useTable };
+export { CLASS_NAMES, Context, EXPAND_COLUMN_ID, useTable };

package/dist/components/table/header/cell.cjs

@@ -5,8 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var relax = require('@aiszlab/relax');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('../context.cjs');
 var useThemeColorVars = require('../../../hooks/use-theme-color-vars.cjs');
+var styles = require('../styles.cjs');
 var unfoldMore = require('../../icon/icons/navigation/unfold-more.cjs');
 
 var Cell = function Cell(_ref) {
@@ -45,29 +47,11 @@ var Cell = function Cell(_ref) {
     return children;
   }
   var styled = {
-    cell: {
-      className: "musaex-78zum5 musaex-1qughib musaex-6s0dn4"
-    },
-    handlers: {
-      className: "musaex-3nfvp2 musaex-1q0g3np musaex-15wobh7 musaex-14kusyn musaex-87ps6o"
-    },
-    sort: {
-      className: "musaex-1n2onr6 musaex-1ypdohk"
-    },
-    fullSort: {
-      0: {},
-      1: {
-        className: "musaex-14qql8p"
-      }
-    }[!!(sort === "descending") << 0],
-    halfSort: {
-      0: {
-        className: "musaex-10l6tqk musaex-13vifvy musaex-1o0tod musaex-11g3na9 musaex-b3r6kr"
-      },
-      1: {
-        className: "musaex-10l6tqk musaex-13vifvy musaex-1o0tod musaex-11g3na9 musaex-b3r6kr musaex-14qql8p"
-      }
-    }[!!(sort === "ascending") << 0]
+    cell: stylex.props(styles.default.headerContent["default"]),
+    handlers: stylex.props(styles.default.headerContent.handlers),
+    sort: stylex.props(styles.default.sort["default"]),
+    fullSort: stylex.props(sort === "descending" && styles.default.sort.checked),
+    halfSort: stylex.props(styles.default.sort.half, sort === "ascending" && styles.default.sort.checked)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.cell.className,

package/dist/components/table/header/cell.mjs

@@ -1,8 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useMemo } from 'react';
 import { toFunction, useEvent } from '@aiszlab/relax';
+import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTable } from '../context.mjs';
 import { useThemeColorVars } from '../../../hooks/use-theme-color-vars.mjs';
+import styles from '../styles.mjs';
 import IconUnfoldMore from '../../icon/icons/navigation/unfold-more.mjs';
 
 var Cell = function Cell(_ref) {
@@ -41,29 +43,11 @@ var Cell = function Cell(_ref) {
     return children;
   }
   var styled = {
-    cell: {
-      className: "musaex-78zum5 musaex-1qughib musaex-6s0dn4"
-    },
-    handlers: {
-      className: "musaex-3nfvp2 musaex-1q0g3np musaex-15wobh7 musaex-14kusyn musaex-87ps6o"
-    },
-    sort: {
-      className: "musaex-1n2onr6 musaex-1ypdohk"
-    },
-    fullSort: {
-      0: {},
-      1: {
-        className: "musaex-14qql8p"
-      }
-    }[!!(sort === "descending") << 0],
-    halfSort: {
-      0: {
-        className: "musaex-10l6tqk musaex-13vifvy musaex-1o0tod musaex-11g3na9 musaex-b3r6kr"
-      },
-      1: {
-        className: "musaex-10l6tqk musaex-13vifvy musaex-1o0tod musaex-11g3na9 musaex-b3r6kr musaex-14qql8p"
-      }
-    }[!!(sort === "ascending") << 0]
+    cell: props(styles.headerContent["default"]),
+    handlers: props(styles.headerContent.handlers),
+    sort: props(styles.sort["default"]),
+    fullSort: props(sort === "descending" && styles.sort.checked),
+    halfSort: props(styles.sort.half, sort === "ascending" && styles.sort.checked)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.cell.className,

package/dist/components/table/header/header.cjs

@@ -10,36 +10,8 @@ var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_m
 var className = require('@aiszlab/relax/class-name');
 var theme = require('../../theme/theme.cjs');
 var useThemeColorVars = require('../../../hooks/use-theme-color-vars.cjs');
+var styles = require('../styles.cjs');
 
-var styles = {
-  cell: {
-    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
-  }
-};
 var Header = function Header(props) {
   var _useTable = context.useTable(),
     table = _useTable.table,
@@ -48,7 +20,7 @@ var Header = function Header(props) {
   var _themeColorVars = useThemeColorVars.useThemeColorVars(["surface", "outline-variant"]);
   if (!table) return null;
   var headerGroups = table.getHeaderGroups();
-  var styled = stylex.props(styles.cell, theme.$label.small, bordered && styles.bordered, !bordered && styles.unbordered);
+  var styled = stylex.props(styles.default.headerCell["default"], theme.$label.small, bordered && styles.default.headerCell.bordered, !bordered && styles.default.headerCell.unbordered);
   return /*#__PURE__*/React.createElement("thead", {
     className: className.stringify(classNames.header, props.className),
     style: _objectSpread(_objectSpread({}, styled.style), _themeColorVars)
@@ -58,7 +30,7 @@ var Header = function Header(props) {
     }, headerGroup.headers.map(function (header) {
       return /*#__PURE__*/React.createElement("th", {
         key: header.id,
-        className: className.stringify(styled.className),
+        className: className.stringify(styled.className, header.column.id === context.EXPAND_COLUMN_ID && classNames.expandColumn),
         style: styled.style
       }, header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()));
     }));

package/dist/components/table/header/header.mjs

@@ -1,41 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useTable } from '../context.mjs';
+import { useTable, EXPAND_COLUMN_ID } from '../context.mjs';
 import { flexRender } from '@tanstack/react-table';
 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 { $label } from '../../theme/theme.mjs';
 import { useThemeColorVars } from '../../../hooks/use-theme-color-vars.mjs';
+import styles from '../styles.mjs';
 
-var styles = {
-  cell: {
-    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
-  }
-};
 var Header = function Header(props$1) {
   var _useTable = useTable(),
     table = _useTable.table,
@@ -44,7 +16,7 @@ var Header = function Header(props$1) {
   var _themeColorVars = useThemeColorVars(["surface", "outline-variant"]);
   if (!table) return null;
   var headerGroups = table.getHeaderGroups();
-  var styled = props(styles.cell, $label.small, bordered && styles.bordered, !bordered && styles.unbordered);
+  var styled = props(styles.headerCell["default"], $label.small, bordered && styles.headerCell.bordered, !bordered && styles.headerCell.unbordered);
   return /*#__PURE__*/React.createElement("thead", {
     className: stringify(classNames.header, props$1.className),
     style: _objectSpread(_objectSpread({}, styled.style), _themeColorVars)
@@ -54,7 +26,7 @@ var Header = function Header(props$1) {
     }, headerGroup.headers.map(function (header) {
       return /*#__PURE__*/React.createElement("th", {
         key: header.id,
-        className: stringify(styled.className),
+        className: stringify(styled.className, header.column.id === EXPAND_COLUMN_ID && classNames.expandColumn),
         style: styled.style
       }, header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()));
     }));

package/dist/components/table/hooks.cjs

@@ -1,20 +1,27 @@
 'use strict';
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactTable = require('@tanstack/react-table');
 var React = require('react');
 var cell = require('./header/cell.cjs');
 var relax = require('@aiszlab/relax');
+var context = require('./context.cjs');
+var button = require('../button/button.cjs');
+var expandLess = require('../icon/icons/navigation/expand-less.cjs');
+var expandMore = require('../icon/icons/navigation/expand-more.cjs');
 
 /**
  * @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 = React.useRef(reactTable.createColumnHelper());
   return React.useMemo(function () {
-    return columns.map(function (_ref2, index) {
+    var dataColumns = columns.map(function (_ref2, index) {
       var _ref3;
       var key = _ref2.key,
         render = _ref2.render,
@@ -41,19 +48,34 @@ var useColumns = function useColumns(_ref) {
         }
       });
     });
-  }, [columns]);
+    if (!expandable) return dataColumns;
+    return [helper.current.display({
+      id: context.EXPAND_COLUMN_ID,
+      header: null,
+      cell: function cell(_ref4) {
+        var row = _ref4.row;
+        return row.getCanExpand() ? (/*#__PURE__*/React.createElement(button.Button, {
+          variant: "text",
+          size: "small",
+          "aria-label": row.getIsExpanded() ? "收起" : "展开",
+          "aria-expanded": row.getIsExpanded(),
+          onClick: row.getToggleExpandedHandler()
+        }, row.getIsExpanded() ? /*#__PURE__*/React.createElement(expandLess.default, null) : /*#__PURE__*/React.createElement(expandMore.default, 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 = relax.useControlledState(_sortDescriptor),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     sortDescriptor = _useControlledState2[0],