musae 1.3.1-beta.1 → 1.3.1-beta.2

package/dist/__test__/table.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

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],

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/styles.css

@@ -1400,6 +1400,10 @@
     padding-inline-end: var(--musaex-1vpnstl);
   }
 
+  .musaex-1sznsej {
+    padding-inline-start: calc(var(--depth) * var(--musaex-14eq97i));
+  }
+
   .musaex-4qvwnj {
     padding-inline-start: calc(var(--musaex-16suft8) / 2 - var(--musaex-1035pbm));
   }

package/dist/types/table.d.ts

@@ -85,6 +85,23 @@ export type TableProps<T> = ComponentProps & {
      * @default false
      */
     loading?: boolean;
+    /** Enable hierarchical rows. Records are read from their `children` property. @default false */
+    expandable?: boolean;
+    /** Stable identifiers of expanded rows (controlled). */
+    expandedKeys?: Key[];
+    /** Initially expanded row identifiers (uncontrolled). */
+    defaultExpandedKeys?: Key[];
+    /** Called whenever the expanded row identifiers change. */
+    onExpandedKeysChange?: (keys: Key[]) => void;
+    /**
+     * Stable row identifier. Hierarchical tables should always provide this rather than relying on
+     * TanStack Table's positional row ids.
+     */
+    rowKey?: DeepKeys<T> | ((record: T, index: number, parent?: T) => Key);
+};
+/** Recursive record shape used by the built-in hierarchical-row reader. */
+export type ExpandableRecord<T> = T & {
+    children?: ExpandableRecord<T>[];
 };
 /**
  * @author murukal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.3.1-beta.1",
+  "version": "1.3.1-beta.2",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",