musae 1.2.0 → 1.3.1-beta.1

package/dist/components/card/styles.mjs

@@ -1,3 +1,6 @@
+/**
+ * @zh Card 组件样式定义,每个 namespace 独立 $create 调用
+ */
 var styles = {
   card: {
     "default": {
@@ -5,7 +8,7 @@ var styles = {
       kVQacm: "musaex-b3r6kr",
       kaIpWk: "musaex-1k532am",
       kB7OPa: "musaex-9f619",
-      k1ekBW: "musaex-1ijdko7",
+      k1ekBW: "musaex-f1bglv",
       kIyJzY: "musaex-1dg6om",
       k5JduY: "musaex-100rkj9",
       kwXMNM: "musaex-1j6awrg",
@@ -13,31 +16,68 @@ var styles = {
       kloYau: "musaex-2q1x1w",
       kRicXK: "musaex-1ywzrc5",
       kPNhGg: "musaex-l3kudx",
+      ks3ayO: "musaex-86grr",
+      $$css: true
+    },
+    stacked: {
+      k1xSpc: "musaex-78zum5",
+      kXwgrk: "musaex-dt5ytf",
+      $$css: true
+    },
+    horizontal: {
+      k1xSpc: "musaex-78zum5",
+      kXwgrk: "musaex-1q0g3np",
+      kGNEyG: "musaex-1qjc9v5",
       $$css: true
     },
     interactive: {
       kkrTdU: "musaex-1ypdohk",
       $$css: true
     },
+    disabled: {
+      kkrTdU: "musaex-1h6gzvc",
+      $$css: true
+    },
     outlined: {
       kWkggS: "musaex-k7eln3",
       kMzoRj: "musaex-1iyq3db",
       ksu8eU: "musaex-1y0btm7",
       kVAM5u: "musaex-axmpxa",
-      ks3ayO: "musaex-yhc2n1",
+      kGVxlE: "musaex-1gnnqk1",
       $$css: true
     },
     elevated: {
       kWkggS: "musaex-1eai1fy",
-      kMzoRj: "musaex-k59kd",
-      kGVxlE: "musaex-bapks6",
-      ks3ayO: "musaex-yhc2n1",
+      kMzoRj: "musaex-c342km",
+      kGVxlE: "musaex-1tw10uf",
       $$css: true
     },
     filled: {
       kWkggS: "musaex-1mu49yl",
-      kMzoRj: "musaex-k59kd",
-      ks3ayO: "musaex-yhc2n1",
+      kMzoRj: "musaex-c342km",
+      kGVxlE: "musaex-1gnnqk1",
+      $$css: true
+    }
+  },
+  elevationState: {
+    outlinedHover: {
+      kGVxlE: "musaex-1tw10uf",
+      $$css: true
+    },
+    outlinedDragged: {
+      kGVxlE: "musaex-15krw24",
+      $$css: true
+    },
+    elevatedHover: {
+      kGVxlE: "musaex-vkh6yx",
+      $$css: true
+    },
+    elevatedDragged: {
+      kGVxlE: "musaex-1ltemje",
+      $$css: true
+    },
+    filledDragged: {
+      kGVxlE: "musaex-15krw24",
       $$css: true
     }
   },
@@ -50,7 +90,7 @@ var styles = {
       kUltx: "musaex-177puvd",
       $$css: true
     },
-    active: {
+    press: {
       kAcZsS: "musaex-6g40nx",
       $$css: true
     }
@@ -59,12 +99,21 @@ var styles = {
     "default": {
       k1xSpc: "musaex-78zum5",
       kGNEyG: "musaex-6s0dn4",
-      kg3NbH: "musaex-1v4gb6w",
-      k8WAf4: "musaex-s7sbuz",
-      kpe85a: "musaex-15ebt9c",
       kB7OPa: "musaex-9f619",
       kzqmXN: "musaex-92755x",
-      kAzted: "musaex-1qafhyn",
+      kmuXW: "musaex-2lah0s",
+      kZCmMZ: "musaex-1ox7qdy",
+      kwRFfy: "musaex-epcfto",
+      k8WAf4: "musaex-s7sbuz",
+      kOIVth: "musaex-g4b44g",
+      $$css: true
+    },
+    stacked: {
+      $$css: true
+    },
+    horizontal: {
+      kmVPX3: "musaex-1atb43h",
+      kUk6DE: "musaex-5mp9sv",
       $$css: true
     }
   },
@@ -111,15 +160,46 @@ var styles = {
       $$css: true
     }
   },
+  headerAction: {
+    "default": {
+      k1xSpc: "musaex-78zum5",
+      kGNEyG: "musaex-6s0dn4",
+      kjj79g: "musaex-l56j7k",
+      kzqmXN: "musaex-1useyqa",
+      kZKoxP: "musaex-sdox4t",
+      kmuXW: "musaex-2lah0s",
+      kSGwAc: "musaex-kh2ocl",
+      $$css: true
+    }
+  },
   media: {
     "default": {
       kVAEAm: "musaex-1n2onr6",
+      kVQacm: "musaex-b3r6kr",
+      $$css: true
+    },
+    stacked: {
       kzqmXN: "musaex-92755x",
       kUk6DE: "musaex-5mp9sv",
       kAzted: "musaex-2lwn1j",
-      kVQacm: "musaex-b3r6kr",
       $$css: true
-    }},
+    },
+    horizontal: {
+      kzqmXN: "musaex-1dmp6jm",
+      kZKoxP: "musaex-qg7gut",
+      kUk6DE: "musaex-3psx0u",
+      kEafiO: "musaex-uvson1",
+      kWqL5O: "musaex-a640vs",
+      kt9PQ7: "musaex-d1xpcx",
+      kPef9Z: "musaex-13fuv20",
+      kSWEuD: "musaex-32b0ac",
+      kfdmCh: "musaex-1q0q8m5",
+      kLZC3w: "musaex-6ogecl",
+      k26BEO: "musaex-imfbgf",
+      kL6WhQ: "musaex-quqrak",
+      $$css: true
+    }
+  },
   content: {
     "default": {
       k1xSpc: "musaex-78zum5",
@@ -131,6 +211,45 @@ var styles = {
       $$css: true
     }
   },
+  headline: {
+    "default": {
+      k1xSpc: "musaex-78zum5",
+      kXwgrk: "musaex-dt5ytf",
+      kOIVth: "musaex-15wobh7",
+      kzqmXN: "musaex-92755x",
+      $$css: true
+    }
+  },
+  title: {
+    "default": {
+      kGuDYH: "musaex-1j61zf2",
+      k63SB2: "musaex-o1l8bm",
+      kLWn49: "musaex-1o2sk6j",
+      kb6lSQ: "musaex-bac8wx",
+      kMwMTN: "musaex-1j14bxn",
+      $$css: true
+    }
+  },
+  subhead: {
+    "default": {
+      kGuDYH: "musaex-if65rj",
+      k63SB2: "musaex-o1l8bm",
+      kLWn49: "musaex-1fc57z9",
+      kb6lSQ: "musaex-f4yft",
+      kMwMTN: "musaex-bq1wot",
+      $$css: true
+    }
+  },
+  body: {
+    "default": {
+      kGuDYH: "musaex-if65rj",
+      k63SB2: "musaex-o1l8bm",
+      kLWn49: "musaex-1fc57z9",
+      kb6lSQ: "musaex-f4yft",
+      kMwMTN: "musaex-bq1wot",
+      $$css: true
+    }
+  },
   actions: {
     "default": {
       k1xSpc: "musaex-78zum5",

package/dist/components/card/subhead.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+/**
+ * @zh 卡片 Subhead 文本(14px body/medium)。
+ * @en Card subhead text (14px body/medium).
+ */
+var CardSubhead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var subheadStyled = stylex.props(styles.default.subhead["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.subhead, className$1, subheadStyled.className),
+    style: _objectSpread(_objectSpread({}, subheadStyled.style), style)
+  }, children);
+});
+
+exports.default = CardSubhead;

package/dist/components/card/subhead.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh 卡片 Subhead 文本(14px body/medium,on-surface-variant)
+ * @en Card subhead text (14px body/medium, on-surface-variant)
+ */
+interface CardSubheadProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * @zh 卡片 Subhead 文本(14px body/medium)。
+ * @en Card subhead text (14px body/medium).
+ */
+declare const CardSubhead: React.ForwardRefExoticComponent<CardSubheadProps & React.RefAttributes<HTMLDivElement>>;
+export default CardSubhead;
+export type { CardSubheadProps };

package/dist/components/card/subhead.mjs

@@ -0,0 +1,26 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { forwardRef } from 'react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import styles from './styles.mjs';
+
+/**
+ * @zh 卡片 Subhead 文本(14px body/medium)。
+ * @en Card subhead text (14px body/medium).
+ */
+var CardSubhead = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var subheadStyled = props(styles.subhead["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.subhead, className, subheadStyled.className),
+    style: _objectSpread(_objectSpread({}, subheadStyled.style), style)
+  }, children);
+});
+
+export { CardSubhead as default };

package/dist/components/card/title.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+/**
+ * @zh 卡片 Title 文本(16px body/large)。
+ * @en Card title text (16px body/large).
+ */
+var CardTitle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var titleStyled = stylex.props(styles.default.title["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.title, className$1, titleStyled.className),
+    style: _objectSpread(_objectSpread({}, titleStyled.style), style)
+  }, children);
+});
+
+exports.default = CardTitle;

package/dist/components/card/title.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh 卡片 Title 文本(16px body/large)
+ * @en Card title text (16px body/large)
+ */
+interface CardTitleProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * @zh 卡片 Title 文本(16px body/large)。
+ * @en Card title text (16px body/large).
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;
+export default CardTitle;
+export type { CardTitleProps };

package/dist/components/card/title.mjs

@@ -0,0 +1,26 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { forwardRef } from 'react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import styles from './styles.mjs';
+
+/**
+ * @zh 卡片 Title 文本(16px body/large)。
+ * @en Card title text (16px body/large).
+ */
+var CardTitle = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var titleStyled = props(styles.title["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.title, className, titleStyled.className),
+    style: _objectSpread(_objectSpread({}, titleStyled.style), style)
+  }, children);
+});
+
+export { CardTitle as default };

package/dist/components/search/search.cjs

@@ -35,7 +35,8 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     searchButton = _ref.searchButton,
-    onSearch = _ref.onSearch;
+    onSearch = _ref.onSearch,
+    onClear = _ref.onClear;
   var inputRef = React.useRef(null);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "surface-container-high", "on-surface-variant", ["on-surface-variant", tokens_stylex.OPACITY.thin], ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.thin]]);
@@ -74,6 +75,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var handleClear = relax.useEvent(function () {
     _setValue("");
     onChange === null || onChange === void 0 || onChange("");
+    onClear === null || onClear === void 0 || onClear();
   });
   var handleKeyDown = React.useCallback(function (e) {
     if (e.key === "Enter") {

package/dist/components/search/search.d.ts

@@ -13,5 +13,6 @@ declare const Search: React.ForwardRefExoticComponent<import("../../types/elemen
     clearable?: boolean;
     searchButton?: React.ReactNode;
     onSearch?: (keyword?: string) => void;
+    onClear?: () => void;
 } & React.RefAttributes<SearchRef>>;
 export default Search;

package/dist/components/search/search.mjs

@@ -31,7 +31,8 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$clearable = _ref.clearable,
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     searchButton = _ref.searchButton,
-    onSearch = _ref.onSearch;
+    onSearch = _ref.onSearch,
+    onClear = _ref.onClear;
   var inputRef = useRef(null);
   var classNames = useClassNames(CLASS_NAMES);
   var themeColorVars = useThemeColorVars(["primary", "outline", "surface-container-high", "on-surface-variant", ["on-surface-variant", OPACITY.thin], ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.thin]]);
@@ -70,6 +71,7 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var handleClear = useEvent(function () {
     _setValue("");
     onChange === null || onChange === void 0 || onChange("");
+    onClear === null || onClear === void 0 || onClear();
   });
   var handleKeyDown = useCallback(function (e) {
     if (e.key === "Enter") {

package/dist/components/sheet/sheet.cjs

@@ -88,6 +88,15 @@ var styles = {
     kVQacm: "musaex-ysyzu8",
     kZeWKH: "musaex-ish69e",
     $$css: true
+  },
+  panelFullscreen: {
+    kRDq7Z: "musaex-1ej3teu",
+    kllhKz: "musaex-1pzvw0h",
+    kIfGbc: "musaex-1se81xg",
+    kBJAon: "musaex-19wv56r",
+    kGHaHD: "musaex-1m33i82",
+    kYNdYH: "musaex-1uogugb",
+    $$css: true
   }
 };
 /**
@@ -106,6 +115,7 @@ var Sheet = function Sheet(_ref) {
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
     header = _ref.header,
+    footer = _ref.footer,
     className$1 = _ref.className,
     panelClassName = _ref.panelClassName,
     panelStyle = _ref.panelStyle,
@@ -201,7 +211,7 @@ var Sheet = function Sheet(_ref) {
     overlay: {
       className: "musaex-10l6tqk musaex-10a8y8t musaex-67bb7w musaex-g01cxk musaex-11we2rp"
     },
-    panel: stylex.props(styles.panel, styles[placement]),
+    panel: stylex.props(styles.panel, styles[placement], styles.panelFullscreen),
     body: {
       className: "musaex-98rzlu musaex-ysyzu8 musaex-ish69e"
     }
@@ -220,7 +230,7 @@ var Sheet = function Sheet(_ref) {
     className: className.stringify(classNames.sheet, className$1, styled.container.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.container.style), themeColorVars), {}, {
       "--default-position": relax.at(_placement, 0),
-      "--size": "".concat(size, "px")
+      "--size": typeof size === "number" ? "".concat(size, "px") : size
     }),
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("div", {
@@ -235,7 +245,7 @@ var Sheet = function Sheet(_ref) {
   }, header, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.body, styled.body.className),
     style: styled.body.style
-  }, children)))));
+  }, children), footer))));
 };
 
 exports.default = Sheet;

package/dist/components/sheet/sheet.d.ts

@@ -7,5 +7,5 @@ import type { SheetProps } from "../../types/sheet";
  * placement-driven slide animation, focus management, and body scroll lock.
  * Drawer and BottomSheet are thin wrappers around this component.
  */
-declare const Sheet: ({ visible, onClose, placement, size, closable, header, className, panelClassName, panelStyle, modal, children, }: SheetProps) => React.JSX.Element;
+declare const Sheet: ({ visible, onClose, placement, size, closable, header, footer, className, panelClassName, panelStyle, modal, children, }: SheetProps) => React.JSX.Element;
 export default Sheet;

package/dist/components/sheet/sheet.mjs

@@ -84,6 +84,15 @@ var styles = {
     kVQacm: "musaex-ysyzu8",
     kZeWKH: "musaex-ish69e",
     $$css: true
+  },
+  panelFullscreen: {
+    kRDq7Z: "musaex-1ej3teu",
+    kllhKz: "musaex-1pzvw0h",
+    kIfGbc: "musaex-1se81xg",
+    kBJAon: "musaex-19wv56r",
+    kGHaHD: "musaex-1m33i82",
+    kYNdYH: "musaex-1uogugb",
+    $$css: true
   }
 };
 /**
@@ -102,6 +111,7 @@ var Sheet = function Sheet(_ref) {
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
     header = _ref.header,
+    footer = _ref.footer,
     className = _ref.className,
     panelClassName = _ref.panelClassName,
     panelStyle = _ref.panelStyle,
@@ -197,7 +207,7 @@ var Sheet = function Sheet(_ref) {
     overlay: {
       className: "musaex-10l6tqk musaex-10a8y8t musaex-67bb7w musaex-g01cxk musaex-11we2rp"
     },
-    panel: props(styles.panel, styles[placement]),
+    panel: props(styles.panel, styles[placement], styles.panelFullscreen),
     body: {
       className: "musaex-98rzlu musaex-ysyzu8 musaex-ish69e"
     }
@@ -216,7 +226,7 @@ var Sheet = function Sheet(_ref) {
     className: stringify(classNames.sheet, className, styled.container.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.container.style), themeColorVars), {}, {
       "--default-position": at(_placement, 0),
-      "--size": "".concat(size, "px")
+      "--size": typeof size === "number" ? "".concat(size, "px") : size
     }),
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("div", {
@@ -231,7 +241,7 @@ var Sheet = function Sheet(_ref) {
   }, header, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.body, styled.body.className),
     style: styled.body.style
-  }, children)))));
+  }, children), footer))));
 };
 
 export { Sheet as default };

package/dist/components/side-sheet/__test__/index.test.d.ts

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

package/dist/components/side-sheet/context.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * @zh SideSheet 的 class 名称
+ * @en class names for SideSheet
+ */
+var CLASS_NAMES = {
+  sideSheet: "side-sheet",
+  header: "side-sheet__header",
+  title: "side-sheet__title",
+  content: "side-sheet__content",
+  actions: "side-sheet__actions"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -0,0 +1,11 @@
+/**
+ * @zh SideSheet 的 class 名称
+ * @en class names for SideSheet
+ */
+export declare const CLASS_NAMES: {
+    readonly sideSheet: "side-sheet";
+    readonly header: "side-sheet__header";
+    readonly title: "side-sheet__title";
+    readonly content: "side-sheet__content";
+    readonly actions: "side-sheet__actions";
+};

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

@@ -0,0 +1,13 @@
+/**
+ * @zh SideSheet 的 class 名称
+ * @en class names for SideSheet
+ */
+var CLASS_NAMES = {
+  sideSheet: "side-sheet",
+  header: "side-sheet__header",
+  title: "side-sheet__title",
+  content: "side-sheet__content",
+  actions: "side-sheet__actions"
+};
+
+export { CLASS_NAMES };

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

@@ -0,0 +1,2 @@
+import SideSheet from "./side-sheet";
+export { SideSheet };