musae 1.2.0 → 1.3.1-beta.1

package/dist/index.mjs

@@ -26,7 +26,6 @@ export { default as DatePicker } from './components/date-picker/date-picker.mjs'
 export { default as DateRangePicker } from './components/date-range-picker/date-range-picker.mjs';
 export { default as Dialog } from './components/dialog/dialog.mjs';
 export { default as Divider } from './components/divider/divider.mjs';
-export { default as Drawer } from './components/drawer/drawer.mjs';
 export { default as Ellipsis } from './components/ellipsis/ellipsis.mjs';
 export { default as Empty } from './components/empty/empty.mjs';
 export { default as Fab } from './components/fab/fab.mjs';
@@ -50,6 +49,7 @@ export { default as Rate } from './components/rate/rate.mjs';
 export { default as Search } from './components/search/search.mjs';
 export { default as Select } from './components/select/select.mjs';
 export { default as SessionStorage } from './components/session-storage/session-storage.mjs';
+export { default as SideSheet } from './components/side-sheet/side-sheet.mjs';
 export { default as Skeleton } from './components/skeleton/skeleton.mjs';
 export { default as Space } from './components/space/space.mjs';
 export { default as SplitPanel } from './components/split-panel/split-panel.mjs';
@@ -66,6 +66,7 @@ export { default as Tooltip } from './components/tooltip/tooltip.mjs';
 export { default as Tour } from './components/tour/tour.mjs';
 export { default as Transfer } from './components/transfer/transfer.mjs';
 export { default as Tree } from './components/tree/tree.mjs';
+export { default as Typography } from './components/typography/typography.mjs';
 export { default as Upload } from './components/upload/upload.mjs';
 export { default as VisuallyHidden } from './components/visually-hidden/visually-hidden.mjs';
 export { default as Waterfall } from './components/waterfall/waterfall.mjs';

package/dist/styles.css

@@ -235,6 +235,10 @@
     border-style: solid;
   }
 
+  .musaex-c342km {
+    border-width: 0;
+  }
+
   .musaex-1litavf {
     border-width: var(--border-width);
   }
@@ -251,6 +255,10 @@
     border-width: var(--musaex-mw242b);
   }
 
+  .musaex-3psx0u {
+    flex: none;
+  }
+
   .musaex-aovyj7 {
     flex: 0 0 var(--span);
   }
@@ -784,10 +792,26 @@
     box-shadow: var(--musaex-124bxhv);
   }
 
+  .musaex-1ltemje {
+    box-shadow: var(--musaex-14r7dmv);
+  }
+
   .musaex-bapks6 {
     box-shadow: var(--musaex-1ax77re);
   }
 
+  .musaex-vkh6yx {
+    box-shadow: var(--musaex-1bann2b);
+  }
+
+  .musaex-1tw10uf {
+    box-shadow: var(--musaex-1dem7f);
+  }
+
+  .musaex-15krw24 {
+    box-shadow: var(--musaex-1xue9qe);
+  }
+
   .musaex-9f619 {
     box-sizing: border-box;
   }
@@ -1372,6 +1396,10 @@
     padding-inline-end: var(--musaex-16072l3);
   }
 
+  .musaex-1max5gj {
+    padding-inline-end: var(--musaex-1vpnstl);
+  }
+
   .musaex-4qvwnj {
     padding-inline-start: calc(var(--musaex-16suft8) / 2 - var(--musaex-1035pbm));
   }
@@ -1380,10 +1408,18 @@
     padding-inline-start: calc(var(--musaex-qe7ci9) + var(--musaex-1035pbm) * 4);
   }
 
+  .musaex-1ox7qdy {
+    padding-inline-start: var(--musaex-14eq97i);
+  }
+
   .musaex-1rl4tsp {
     padding-inline-start: var(--musaex-16072l3);
   }
 
+  .musaex-150i2hq {
+    padding-inline-start: var(--musaex-1bvtfky);
+  }
+
   .musaex-1yyv1zj {
     padding-inline-start: var(--musaex-1vpnstl);
   }
@@ -1580,10 +1616,6 @@
     transition-property: background-color, border, color;
   }
 
-  .musaex-1ijdko7 {
-    transition-property: background-color, box-shadow, border-color;
-  }
-
   .musaex-1yyhn7k {
     transition-property: background-color, color, box-shadow;
   }
@@ -1592,6 +1624,10 @@
     transition-property: background-color;
   }
 
+  .musaex-f1bglv {
+    transition-property: box-shadow, background-color, border-color;
+  }
+
   .musaex-15wldfd {
     transition-property: box-shadow, background-color;
   }
@@ -1881,6 +1917,26 @@
     border-bottom-width: var(--musaex-1xf102v);
   }
 
+  .musaex-svd4c5 {
+    border-left-color: var(--color-outline-variant);
+  }
+
+  .musaex-19ypqd9 {
+    border-left-style: solid;
+  }
+
+  .musaex-6vwjc {
+    border-left-width: var(--musaex-1xf102v);
+  }
+
+  .musaex-imfbgf {
+    border-right-color: var(--color-outline-variant);
+  }
+
+  .musaex-32b0ac {
+    border-right-style: solid;
+  }
+
   .musaex-a640vs {
     border-right-width: var(--musaex-1xf102v);
   }
@@ -1969,6 +2025,10 @@
     height: 24px;
   }
 
+  .musaex-sdox4t {
+    height: 48px;
+  }
+
   .musaex-t7dq6l {
     height: auto;
   }
@@ -2189,10 +2249,6 @@
     min-height: 0;
   }
 
-  .musaex-1qafhyn {
-    min-height: 72px;
-  }
-
   .musaex-epu74c {
     min-height: var(--musaex-10wwlfh);
   }
@@ -2325,10 +2381,6 @@
     padding-right: var(--musaex-14eq97i);
   }
 
-  .musaex-15ebt9c {
-    padding-right: var(--musaex-16072l3);
-  }
-
   .musaex-9y2cgd {
     padding-right: var(--musaex-1vpnstl);
   }
@@ -2349,6 +2401,10 @@
     padding-top: var(--musaex-1fxazvh);
   }
 
+  .musaex-h1u3e4 {
+    padding-top: var(--musaex-1vpnstl);
+  }
+
   .musaex-3nylsr {
     padding-top: var(--musaex-48i97p);
   }
@@ -2397,10 +2453,18 @@
     width: 24px;
   }
 
+  .musaex-1useyqa {
+    width: 48px;
+  }
+
   .musaex-14rvwrp {
     width: 600px;
   }
 
+  .musaex-1dmp6jm {
+    width: 80px;
+  }
+
   .musaex-o4cs04 {
     width: calc((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns));
   }
@@ -2553,6 +2617,32 @@
     border-bottom-width: 0;
   }
 
+  @media (width <= 904px) {
+    .musaex-1m33i82.musaex-1m33i82 {
+      border-bottom-left-radius: 0;
+    }
+
+    .musaex-1uogugb.musaex-1uogugb {
+      border-bottom-right-radius: 0;
+    }
+
+    .musaex-1se81xg.musaex-1se81xg {
+      border-top-left-radius: 0;
+    }
+
+    .musaex-19wv56r.musaex-19wv56r {
+      border-top-right-radius: 0;
+    }
+
+    .musaex-1pzvw0h.musaex-1pzvw0h {
+      height: 100vh;
+    }
+
+    .musaex-1ej3teu.musaex-1ej3teu {
+      width: 100vw;
+    }
+  }
+
   @media (hover: hover) {
     .musaex-1fjziz3.musaex-1fjziz3:hover {
       overflow-y: auto;
@@ -2629,8 +2719,8 @@
     animation-timing-function: linear;
   }
 
-  .musaex-yhc2n1:after {
-    background-color: #0000;
+  .musaex-86grr:after {
+    background-color: var(--card-state-layer, transparent);
   }
 
   .musaex-1l043wi:before {
@@ -3273,15 +3363,6 @@
   --musaex-1aqg0g1: 1s;
 }
 
-:root, .musaex-gtkjbd {
-  --musaex-1ueuqz2: none;
-  --musaex-1ax77re: #0003 0px 2px 1px -1px, #00000024 0px 1px 1px 0px, #0000001f 0px 1px 3px 0px;
-  --musaex-124bxhv: #0003 0px 3px 3px -2px, #00000024 0px 3px 4px 0px, #0000001f 0px 1px 8px 0px;
-  --musaex-blb018: #0003 0px 3px 5px -1px, #00000024 0px 6px 10px 0px, #0000001f 0px 1px 18px 0px;
-  --musaex-j9kthj: #0003 0px 5px 5px -3px, #00000024 0px 8px 10px 1px, #0000001f 0px 3px 14px 2px;
-  --musaex-1h5b470: #0003 0px 7px 8px -4px, #00000024 0px 12px 17px 2px, #0000001f 0px 5px 22px 4px;
-}
-
 :root, .musaex-kg7w83 {
   --musaex-mw242b: 0px;
   --musaex-1xf102v: 1px;
@@ -3317,6 +3398,20 @@
   --musaex-eliz3k: fit-content;
 }
 
+:root, .musaex-gtkjbd {
+  --musaex-t6xqpa: none;
+  --musaex-1dem7f: 0px 1px 2px 0px #0000004d, 0px 1px 3px 1px #00000026;
+  --musaex-1bann2b: 0px 1px 2px 0px #0000004d, 0px 2px 6px 2px #00000026;
+  --musaex-1xue9qe: 0px 1px 3px 0px #0000004d, 0px 4px 8px 3px #00000026;
+  --musaex-14r7dmv: 0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026;
+  --musaex-1ueuqz2: none;
+  --musaex-1ax77re: #0003 0px 2px 1px -1px, #00000024 0px 1px 1px 0px, #0000001f 0px 1px 3px 0px;
+  --musaex-124bxhv: #0003 0px 3px 3px -2px, #00000024 0px 3px 4px 0px, #0000001f 0px 1px 8px 0px;
+  --musaex-blb018: #0003 0px 3px 5px -1px, #00000024 0px 6px 10px 0px, #0000001f 0px 1px 18px 0px;
+  --musaex-j9kthj: #0003 0px 5px 5px -3px, #00000024 0px 8px 10px 1px, #0000001f 0px 3px 14px 2px;
+  --musaex-1h5b470: #0003 0px 7px 8px -4px, #00000024 0px 12px 17px 2px, #0000001f 0px 5px 22px 4px;
+}
+
 .musaex-omsca5 {
   --border-width: var(--musaex-1035pbm);
 }

package/dist/types/card.d.ts

@@ -1,10 +1,19 @@
-import type { ReactNode, MouseEvent } from "react";
+import type { ReactNode, MouseEvent, DragEvent } from "react";
 import type { ComponentProps } from "./element";
 /**
  * @zh 卡片样式变体
  * @en Card style variant
  */
 export type CardVariant = "outlined" | "elevated" | "filled";
+/**
+ * @zh 卡片布局变体
+ * - `stacked`: 垂直堆叠(Header 在上,Media 在中,Content/Actions 在下)
+ * - `horizontal`: 水平排布(Header 在左,Media 在右,固定 80px 高)
+ * @en Card layout variant
+ * - `stacked`: vertical stack (Header on top, Media in middle, Content/Actions at bottom)
+ * - `horizontal`: horizontal layout (Header on left, Media on right, fixed 80px height)
+ */
+export type CardLayout = "stacked" | "horizontal";
 /**
  * @zh 卡片组件属性
  * @en Card component props
@@ -16,13 +25,19 @@ export interface CardProps extends ComponentProps {
      * @default "outlined"
      */
     variant?: CardVariant;
+    /**
+     * @zh 卡片布局变体
+     * @en Card layout variant
+     * @default "stacked"
+     */
+    layout?: CardLayout;
     /**
      * @zh 卡片内容
      * @en Card content
      */
     children?: ReactNode;
     /**
-     * @zh 点击事件处理函数，设置后卡片将展示交互状态层
+     * @zh 点击事件处理函数,设置后卡片将展示交互状态层
      * @en Click handler, when set the card will show interaction state layers
      */
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
@@ -32,4 +47,26 @@ export interface CardProps extends ComponentProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * @zh 拖拽中状态(16% state layer + 提升 elevation),可通过 `draggable` 自动检测或手动控制
+     * @en Dragged state (16% state layer + raised elevation), can be auto-detected via `draggable` or controlled manually
+     * @default false
+     */
+    dragged?: boolean;
+    /**
+     * @zh 启用 HTML5 拖拽事件自动检测 dragged 状态。设置为 true 时,组件会监听 onDragStart/onDragEnd 自动切换 dragged。
+     * @en Enable HTML5 drag events to auto-detect dragged state. When true, the component listens to onDragStart/onDragEnd to toggle dragged.
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * @zh 拖拽开始事件
+     * @en Drag start event handler
+     */
+    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
+    /**
+     * @zh 拖拽结束事件
+     * @en Drag end event handler
+     */
+    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
 }

package/dist/types/search.d.ts

@@ -79,4 +79,10 @@ export type SearchProps = ComponentProps & {
      * @default undefined
      */
     onSearch?: (keyword?: string) => void;
+    /**
+     * @zh 点击清除按钮时的回调函数
+     * @en Callback when the clear button is clicked
+     * @default undefined
+     */
+    onClear?: () => void;
 };

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/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.2.0",
+  "version": "1.3.1-beta.1",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -135,9 +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",
-    "changesets": "z cs",
-    "version": "z cs version",
-    "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;