musae 1.3.0 → 1.3.1-beta.2

package/dist/types/sheet.d.ts

@@ -72,4 +72,10 @@ export interface SheetProps extends ComponentProps {
      * @en Body content rendered below the header.
      */
     children?: ReactNode;
+    /**
+     * @zh 渲染在主体下方的底部内容。使用此插槽注入操作按钮栏或任意自定义底部。
+     * @en Content rendered below the body. Use this slot to inject an action bar
+     * or any custom footer.
+     */
+    footer?: ReactNode;
 }

package/dist/types/side-sheet.d.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from "react";
+import type { Closable } from "../hooks/use-closable";
+import type { ComponentProps } from "./element";
+/**
+ * @zh Side Sheet 类型。`standard` 内嵌在布局中展示（无遮罩层），`modal` 以带遮罩层的模态形式展示。
+ * @en Side sheet type. `standard` renders inline alongside layout content (no scrim);
+ * `modal` renders above content with a scrim.
+ */
+export type SideSheetType = "standard" | "modal";
+/**
+ * @zh Side Sheet 停靠方向。
+ * @en The edge the side sheet is anchored to.
+ */
+export type SideSheetPlacement = "left" | "right" | "top" | "bottom";
+/**
+ * @zh SideSheet 组件属性。
+ * @en Props for the SideSheet component.
+ */
+export interface SideSheetProps extends ComponentProps {
+    /**
+     * @zh 是否打开。
+     * @en Whether the side sheet is open.
+     */
+    open: boolean;
+    /**
+     * @zh 类型。`standard` 与主内容并排展示，`modal` 覆盖在主内容之上并带有遮罩层。
+     * @en Type. `standard` sits alongside the main content;
+     * `modal` overlays the main content with a scrim.
+     * @default "modal"
+     */
+    type?: SideSheetType;
+    /**
+     * @zh 头部标题。
+     * @en Headline rendered in the header.
+     * @default void 0
+     */
+    title?: ReactNode;
+    /**
+     * @zh 返回回调。传入后头部展示返回按钮。
+     * @en Back handler. When provided, a back button is rendered in the header.
+     * @default void 0
+     */
+    onBack?: VoidFunction;
+    /**
+     * @zh 是否可关闭。控制关闭按钮的展示，以及是否可以通过点击遮罩层或按 Esc 键关闭（仅 `modal` 生效）。
+     * 传入 `Closable` 数组以启用特定的关闭触发器。
+     * @en Whether the side sheet is closable. Controls the close button, and whether it can be
+     * closed by clicking on the overlay or pressing the Esc key (`modal` only).
+     * Pass an array of `Closable` values to enable specific close triggers.
+     * @default true
+     */
+    closable?: boolean | Closable[];
+    /**
+     * @zh 确认回调。传入后头部展示确认按钮。
+     * @en Confirm handler. When provided, a confirm button is rendered in the header.
+     * @default void 0
+     */
+    onConfirm?: VoidFunction;
+    /**
+     * @zh 关闭回调。
+     * @en Called when the side sheet requests to close.
+     * @default void 0
+     */
+    onClose?: VoidFunction;
+    /**
+     * @zh 底部操作区内容。传入后在主体下方渲染分割线和操作按钮行。
+     * @en Footer actions. When provided, a divider and an actions row are rendered below the body.
+     * @default void 0
+     */
+    actions?: ReactNode;
+    /**
+     * @zh 面板宽度。接受数字（px）或任意 CSS 尺寸字符串。
+     * @en Panel width. Accepts a number (px) or any CSS dimension string.
+     * @default 400
+     */
+    size?: number | string;
+    /**
+     * @zh 停靠方向。`left` / `right` 水平滑入，`top` / `bottom` 垂直滑入。
+     * @en The edge the side sheet is anchored to.
+     * `left` / `right` slides horizontally, `top` / `bottom` slides vertically.
+     * @default "right"
+     */
+    placement?: SideSheetPlacement;
+    /**
+     * @zh 主体内容。
+     * @en Body content.
+     * @default void 0
+     */
+    children?: ReactNode;
+}

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/dist/types/typography.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { ComponentProps } from "./element";
+export interface TypographyProps extends ComponentProps {
+    /**
+     * @zh 字体尺寸等级
+     * @en Font size level
+     * @default "medium"
+     */
+    size?: "large" | "medium" | "small";
+    /**
+     * @zh 文本内容
+     * @en Text content
+     */
+    children?: ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.3.0",
+  "version": "1.3.1-beta.2",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -135,7 +135,7 @@
     "dev": "rollup -c -w --environment NODE_ENV:development",
     "build": "z rm dist && rollup -c --environment NODE_ENV:production",
     "authors": "zx scripts/contributors.mjs",
-    "storybook": "pnpm run build && storybook dev -p 6006",
+    "storybook": "pnpm run build && storybook dev",
     "build-storybook": "storybook build",
     "lint": "eslint ."
   }

package/dist/components/drawer/context.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-/**
- * @zh Drawer 的 class 名称
- * @en class names for Drawer
- */
-var CLASS_NAMES = {
-  drawer: "drawer",
-  header: "drawer__header",
-  body: "drawer__body",
-  actions: "drawer__actions"
-};
-
-exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -1,10 +0,0 @@
-/**
- * @zh Drawer 的 class 名称
- * @en class names for Drawer
- */
-export declare const CLASS_NAMES: {
-    readonly drawer: "drawer";
-    readonly header: "drawer__header";
-    readonly body: "drawer__body";
-    readonly actions: "drawer__actions";
-};

package/dist/components/drawer/context.mjs

@@ -1,12 +0,0 @@
-/**
- * @zh Drawer 的 class 名称
- * @en class names for Drawer
- */
-var CLASS_NAMES = {
-  drawer: "drawer",
-  header: "drawer__header",
-  body: "drawer__body",
-  actions: "drawer__actions"
-};
-
-export { CLASS_NAMES };

package/dist/components/drawer/drawer.cjs

@@ -1,92 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var sheet = require('../sheet/sheet.cjs');
-var button = require('../button/button.cjs');
-var space = require('../space/space.cjs');
-var useLocale = require('../../locale/use-locale.cjs');
-var useClosable = require('../../hooks/use-closable.cjs');
-var useClassNames = require('../../hooks/use-class-names.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 useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
-var theme = require('../theme/theme.cjs');
-var context = require('./context.cjs');
-
-var _excluded = ["open", "size", "closable", "placement"];
-/**
- * @zh Drawer 专用样式：包含关闭按钮、标题和确认按钮的头部栏，以及面板背景。
- * @en Drawer-specific styles: header bar with closer, title, confirm button, and panel background.
- */
-var styles = {
-  header: {
-    k1xSpc: "musaex-78zum5",
-    kg3NbH: "musaex-1v4gb6w",
-    k8WAf4: "musaex-1aur8i7",
-    kGNEyG: "musaex-6s0dn4",
-    kOIVth: "musaex-wcf3z5",
-    kt9PQ7: "musaex-d1xpcx",
-    kfdmCh: "musaex-1q0q8m5",
-    kL6WhQ: "musaex-quqrak",
-    $$css: true
-  }
-};
-/**
- * @zh Drawer 组件。从屏幕任意边缘滑入的模态面板。基于共享的 Sheet 基础组件构建。
- * @en Drawer component. A modal panel that slides in from any screen edge.
- * Built on the shared Sheet base component.
- */
-var Drawer = function Drawer(_ref) {
-  var open = _ref.open,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 400 : _ref$size,
-    _ref$closable = _ref.closable,
-    closable = _ref$closable === void 0 ? true : _ref$closable,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "right" : _ref$placement,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var _useLocale = useLocale.useLocale("drawer"),
-    _useLocale2 = _slicedToArray(_useLocale, 1),
-    locale = _useLocale2[0];
-  var themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant"]);
-  var _useClosable = useClosable.useClosable({
-      closable: closable,
-      onClose: props.onClose
-    }),
-    closer = _useClosable.closer;
-  var styled = {
-    header: stylex.props(theme.$body.large, styles.header),
-    actions: {
-      className: "musaex-vc5jky"
-    },
-    panel: {
-      className: "musaex-1q2mt7c"
-    }
-  };
-  return /*#__PURE__*/React.createElement(sheet.default, {
-    visible: open,
-    placement: placement,
-    size: size,
-    closable: closable,
-    onClose: props.onClose,
-    className: classNames.drawer,
-    header: /*#__PURE__*/React.createElement("div", {
-      className: className.stringify(classNames.header, styled.header.className),
-      style: _objectSpread(_objectSpread({}, styled.header.style), themeColorVars)
-    }, closer, props.title, props.onConfirm && (/*#__PURE__*/React.createElement(space.default, {
-      className: styled.actions.className,
-      style: styled.actions.style
-    }, /*#__PURE__*/React.createElement(button.Button, {
-      onClick: props.onConfirm
-    }, locale.confirm)))),
-    panelClassName: styled.panel.className
-  }, props.children);
-};
-
-exports.default = Drawer;

package/dist/components/drawer/drawer.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import type { DrawerProps } from "../../types/drawer";
-/**
- * @zh Drawer 组件。从屏幕任意边缘滑入的模态面板。基于共享的 Sheet 基础组件构建。
- * @en Drawer component. A modal panel that slides in from any screen edge.
- * Built on the shared Sheet base component.
- */
-declare const Drawer: ({ open, size, closable, placement, ...props }: DrawerProps) => React.JSX.Element;
-export default Drawer;

package/dist/components/drawer/drawer.mjs

@@ -1,88 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React from 'react';
-import Sheet from '../sheet/sheet.mjs';
-import { Button } from '../button/button.mjs';
-import Space from '../space/space.mjs';
-import { useLocale } from '../../locale/use-locale.mjs';
-import { useClosable } from '../../hooks/use-closable.mjs';
-import { useClassNames } from '../../hooks/use-class-names.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 { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
-import { $body } from '../theme/theme.mjs';
-import { CLASS_NAMES } from './context.mjs';
-
-var _excluded = ["open", "size", "closable", "placement"];
-/**
- * @zh Drawer 专用样式：包含关闭按钮、标题和确认按钮的头部栏，以及面板背景。
- * @en Drawer-specific styles: header bar with closer, title, confirm button, and panel background.
- */
-var styles = {
-  header: {
-    k1xSpc: "musaex-78zum5",
-    kg3NbH: "musaex-1v4gb6w",
-    k8WAf4: "musaex-1aur8i7",
-    kGNEyG: "musaex-6s0dn4",
-    kOIVth: "musaex-wcf3z5",
-    kt9PQ7: "musaex-d1xpcx",
-    kfdmCh: "musaex-1q0q8m5",
-    kL6WhQ: "musaex-quqrak",
-    $$css: true
-  }
-};
-/**
- * @zh Drawer 组件。从屏幕任意边缘滑入的模态面板。基于共享的 Sheet 基础组件构建。
- * @en Drawer component. A modal panel that slides in from any screen edge.
- * Built on the shared Sheet base component.
- */
-var Drawer = function Drawer(_ref) {
-  var open = _ref.open,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 400 : _ref$size,
-    _ref$closable = _ref.closable,
-    closable = _ref$closable === void 0 ? true : _ref$closable,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "right" : _ref$placement,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
-  var classNames = useClassNames(CLASS_NAMES);
-  var _useLocale = useLocale("drawer"),
-    _useLocale2 = _slicedToArray(_useLocale, 1),
-    locale = _useLocale2[0];
-  var themeColorVars = useThemeColorVars(["outline-variant"]);
-  var _useClosable = useClosable({
-      closable: closable,
-      onClose: props$1.onClose
-    }),
-    closer = _useClosable.closer;
-  var styled = {
-    header: props($body.large, styles.header),
-    actions: {
-      className: "musaex-vc5jky"
-    },
-    panel: {
-      className: "musaex-1q2mt7c"
-    }
-  };
-  return /*#__PURE__*/React.createElement(Sheet, {
-    visible: open,
-    placement: placement,
-    size: size,
-    closable: closable,
-    onClose: props$1.onClose,
-    className: classNames.drawer,
-    header: /*#__PURE__*/React.createElement("div", {
-      className: stringify(classNames.header, styled.header.className),
-      style: _objectSpread(_objectSpread({}, styled.header.style), themeColorVars)
-    }, closer, props$1.title, props$1.onConfirm && (/*#__PURE__*/React.createElement(Space, {
-      className: styled.actions.className,
-      style: styled.actions.style
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: props$1.onConfirm
-    }, locale.confirm)))),
-    panelClassName: styled.panel.className
-  }, props$1.children);
-};
-
-export { Drawer as default };

package/dist/components/drawer/index.d.ts

@@ -1,2 +0,0 @@
-import Drawer from "./drawer";
-export { Drawer };

package/dist/types/drawer.d.ts

@@ -1,74 +0,0 @@
-import type { ReactNode } from "react";
-import type { Closable } from "../hooks/use-closable";
-import type { ComponentProps } from "./element";
-export type Placement = "right" | "left" | "top" | "bottom";
-/**
- * @description
- * drawer props
- */
-export type DrawerProps = Pick<ComponentProps, "className"> & {
-    /**
-     * @description
-     * children
-     * @default void 0
-     */
-    children?: ReactNode;
-    /**
-     * @description
-     * is open
-     * @requires
-     */
-    open: boolean;
-    /**
-     * @description
-     * title
-     * @default void 0
-     */
-    title?: ReactNode;
-    /**
-     * @description
-     * placement
-     * @default "right"
-     */
-    placement?: Placement;
-    /**
-     * @description
-     * Whether the drawer can be closed by clicking on the overlay or pressing the Esc key.
-     * @default true
-     */
-    closable?: boolean | Closable[];
-    /**
-     * @description
-     * size
-     * horizontal drawer, size prop mean width
-     * vertical drawer, size prop mean height
-     *
-     * @default 400
-     */
-    size?: number;
-    /**
-     * @description
-     * close handler
-     * @default void 0
-     */
-    onClose?: VoidFunction;
-    /**
-     * @description
-     * on confirm handler
-     */
-    onConfirm?: VoidFunction;
-};
-/**
- * @description
- * popup
- */
-export type PopupProps = DrawerProps & {
-    size: number;
-    closable: boolean | Closable[];
-    placement: Placement;
-    /**
-     * @description
-     * callback will be toggled after close animation end
-     */
-    onClosed?: () => void;
-};