musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/styles.css

@@ -53,6 +53,10 @@
     inset: 0;
   }
 
+  .musaex-sl765j {
+    inset: var(--musaex-mw242b);
+  }
+
   .musaex-bwpcu0 {
     margin: var(--musaex-16suft8);
   }
@@ -223,6 +227,10 @@
     border-radius: var(--musaex-jo49ah);
   }
 
+  .musaex-mgj2z {
+    border-radius: var(--musaex-mw242b);
+  }
+
   .musaex-qesrb1 {
     border-radius: var(--musaex-zv0eff);
   }
@@ -287,10 +295,6 @@
     gap: var(--musaex-1bvtfky);
   }
 
-  .musaex-xfrshk {
-    gap: var(--musaex-1fxazvh);
-  }
-
   .musaex-wcf3z5 {
     gap: var(--musaex-1ninzqv);
   }
@@ -348,6 +352,10 @@
     grid-template-areas: var(--layout);
   }
 
+  .musaex-vg9ial {
+    inset-block: var(--musaex-1fxazvh);
+  }
+
   .musaex-17y0mx6 {
     inset-inline: 0;
   }
@@ -420,10 +428,6 @@
     padding-block: var(--musaex-16072l3);
   }
 
-  .musaex-gr5jxa {
-    padding-block: var(--musaex-16suft8);
-  }
-
   .musaex-g98ter {
     padding-block: var(--musaex-1bvtfky);
   }
@@ -432,18 +436,10 @@
     padding-block: var(--musaex-1fxazvh);
   }
 
-  .musaex-1nsg7hs {
-    padding-block: var(--musaex-1ninzqv);
-  }
-
   .musaex-s7sbuz {
     padding-block: var(--musaex-1vpnstl);
   }
 
-  .musaex-bge23m {
-    padding-block: var(--musaex-48i97p);
-  }
-
   .musaex-a0rzc7 {
     padding-block: var(--musaex-jo49ah);
   }
@@ -452,10 +448,6 @@
     padding-block: var(--musaex-joam4e);
   }
 
-  .musaex-1a4cq7x {
-    padding-block: var(--musaex-mk8wyj);
-  }
-
   .musaex-13bwjiu {
     padding-inline: calc(var(--padding-inline) - var(--musaex-6ewyph));
   }
@@ -524,12 +516,16 @@
     transition: transform .3s;
   }
 
-  .musaex-101nlry:not(#\#) {
-    border-radius: 0;
+  .musaex-7rzjjb.musaex-7rzjjb:where(.musaex-19ap9w9:focus-within *) {
+    border-color: var(--color-error);
   }
 
-  .musaex-1me2y4k:not(#\#) {
-    border-radius: var(--musaex-mw242b);
+  .musaex-48fzr0.musaex-48fzr0:where(.musaex-19ap9w9:focus-within *) {
+    border-color: var(--color-primary);
+  }
+
+  .musaex-101nlry:not(#\#) {
+    border-radius: 0;
   }
 
   .musaex-3e2p9r:not(#\#) {
@@ -756,6 +752,10 @@
     background-size: 400% 100%;
   }
 
+  .musaex-kap2c3 {
+    border-block-width: var(--musaex-1xf102v);
+  }
+
   .musaex-1mwwwfo {
     border-collapse: collapse;
   }
@@ -764,24 +764,60 @@
     border-collapse: separate;
   }
 
+  .musaex-1ogpvgu {
+    border-end-end-radius: var(--musaex-110l7oq);
+  }
+
+  .musaex-1otce61 {
+    border-end-end-radius: var(--musaex-17d148i);
+  }
+
+  .musaex-e8lclw {
+    border-end-start-radius: var(--musaex-110l7oq);
+  }
+
+  .musaex-1hcldrm {
+    border-end-start-radius: var(--musaex-17d148i);
+  }
+
+  .musaex-1pmqwba {
+    border-inline-end-width: var(--musaex-1xf102v);
+  }
+
+  .musaex-19gmo5p {
+    border-inline-end-width: var(--musaex-mw242b);
+  }
+
+  .musaex-3677ob {
+    border-inline-start-width: var(--musaex-1xf102v);
+  }
+
+  .musaex-yj4l0 {
+    border-inline-start-width: var(--musaex-mw242b);
+  }
+
   .musaex-4jqler {
     border-spacing: var(--musaex-16072l3);
   }
 
-  .musaex-4ms1xy {
-    box-shadow: 0 0 0 var(--musaex-1035pbm) var(--color-error) inset;
+  .musaex-ortkii {
+    border-start-end-radius: var(--musaex-110l7oq);
   }
 
-  .musaex-bxw2on {
-    box-shadow: 0 0 0 var(--musaex-1xf102v) var(--color-on-primary);
+  .musaex-73jug0 {
+    border-start-end-radius: var(--musaex-17d148i);
   }
 
-  .musaex-yb4mll {
-    box-shadow: 0 0 0 var(--musaex-1xf102v) var(--color-on-surface-opacity-38) inset;
+  .musaex-16hqlox {
+    border-start-start-radius: var(--musaex-110l7oq);
   }
 
-  .musaex-7u4mnu {
-    box-shadow: 0 0 0 var(--musaex-1xf102v) var(--color-outline) inset;
+  .musaex-eoaxol {
+    border-start-start-radius: var(--musaex-17d148i);
+  }
+
+  .musaex-bxw2on {
+    box-shadow: 0 0 0 var(--musaex-1xf102v) var(--color-on-primary);
   }
 
   .musaex-1gnnqk1 {
@@ -816,6 +852,10 @@
     box-sizing: border-box;
   }
 
+  .musaex-l7pqhg {
+    caret-color: var(--color-primary);
+  }
+
   .musaex-zpqnlu {
     clip: rect(0,0,0,0);
   }
@@ -924,6 +964,10 @@
     column-gap: var(--column-gap);
   }
 
+  .musaex-1ccab4z {
+    column-gap: var(--musaex-14eq97i);
+  }
+
   .musaex-5xj0sk {
     column-gap: var(--musaex-16072l3);
   }
@@ -1000,6 +1044,10 @@
     fill: none;
   }
 
+  .musaex-qmh4cb {
+    filter: drop-shadow(0 3px 3px var(--color-shadow-opacity-20)) drop-shadow(0 3px 4px var(--color-shadow-opacity-16)) drop-shadow(0 1px 8px var(--color-shadow-opacity-12));
+  }
+
   .musaex-1t1x2f9 {
     flex-basis: 0%;
   }
@@ -1140,6 +1188,10 @@
     inset-inline-end: 0;
   }
 
+  .musaex-1swhz51 {
+    inset-inline-end: var(--musaex-14eq97i);
+  }
+
   .musaex-1aovfyv {
     inset-inline-end: var(--musaex-1bvtfky);
   }
@@ -1160,6 +1212,10 @@
     inset-inline-start: var(--musaex-12cvltn);
   }
 
+  .musaex-82zlsq {
+    inset-inline-start: var(--musaex-14eq97i);
+  }
+
   .musaex-lrh9k8 {
     inset-inline-start: var(--musaex-1ninzqv);
   }
@@ -1312,10 +1368,6 @@
     margin-inline-end: var(--margin-end);
   }
 
-  .musaex-1j0o5cy {
-    margin-inline-end: var(--musaex-16072l3);
-  }
-
   .musaex-nvd5go {
     margin-inline-end: var(--musaex-1fxazvh);
   }
@@ -1344,10 +1396,6 @@
     margin-inline-start: var(--musaex-17p6t00);
   }
 
-  .musaex-1y714p4 {
-    margin-inline-start: var(--musaex-1vpnstl);
-  }
-
   .musaex-1dzd4em {
     mix-blend-mode: hard-light;
   }
@@ -1376,6 +1424,10 @@
     opacity: var(--musaex-1seeq2j);
   }
 
+  .musaex-17l7b8s {
+    opacity: var(--musaex-cypv6b);
+  }
+
   .musaex-1hpiskz {
     opacity: var(--musaex-rkqjb0);
   }
@@ -1400,6 +1452,10 @@
     padding-inline-end: var(--musaex-1vpnstl);
   }
 
+  .musaex-1kav6dm {
+    padding-inline-end: var(--musaex-mk8wyj);
+  }
+
   .musaex-1sznsej {
     padding-inline-start: calc(var(--depth) * var(--musaex-14eq97i));
   }
@@ -1428,6 +1484,10 @@
     padding-inline-start: var(--musaex-1vpnstl);
   }
 
+  .musaex-t0f09o {
+    padding-inline-start: var(--musaex-mk8wyj);
+  }
+
   .musaex-67bb7w {
     pointer-events: auto;
   }
@@ -1524,6 +1584,10 @@
     transform-origin: 50%;
   }
 
+  .musaex-1nf803f {
+    transform-origin: 0;
+  }
+
   .musaex-9tu13d {
     transform: rotate(-90deg);
   }
@@ -1544,6 +1608,14 @@
     transform: rotateX(180deg);
   }
 
+  .musaex-3oybdh {
+    transform: scale(1);
+  }
+
+  .musaex-a2xx8z {
+    transform: scale(1.33333);
+  }
+
   .musaex-dewxu2 {
     transform: translate(var(--check-offset),var(--check-offset));
   }
@@ -1628,16 +1700,16 @@
     transition-property: background-color;
   }
 
-  .musaex-f1bglv {
-    transition-property: box-shadow, background-color, border-color;
+  .musaex-1xwloaz {
+    transition-property: border;
   }
 
-  .musaex-15wldfd {
-    transition-property: box-shadow, background-color;
+  .musaex-f1bglv {
+    transition-property: box-shadow, background-color, border-color;
   }
 
-  .musaex-kdsq27 {
-    transition-property: box-shadow;
+  .musaex-1e5ewcy {
+    transition-property: color, top, transform;
   }
 
   .musaex-t3l3uh {
@@ -1697,12 +1769,12 @@
     will-change: background-color,color,box-shadow;
   }
 
-  .musaex-1o9dqaq {
-    will-change: box-shadow,transform;
+  .musaex-i35ycn {
+    will-change: border;
   }
 
-  .musaex-1sj8a8t {
-    will-change: box-shadow;
+  .musaex-1qr74f0 {
+    will-change: color,top,transform;
   }
 
   .musaex-xnarah {
@@ -1757,32 +1829,36 @@
     z-index: var(--musaex-rq72b6);
   }
 
-  .musaex-1jcey5v:not(#\#) {
-    background-color: #0000;
+  .musaex-hkrz9u.musaex-hkrz9u:where(.musaex-19ap9w9:focus-within *) {
+    border-block-width: var(--musaex-1035pbm);
   }
 
-  .musaex-11jkr13:not(:last-of-type):after {
-    background-color: var(--color-outline-variant);
+  .musaex-1km01uu.musaex-1km01uu:where(.musaex-19ap9w9:focus-within *) {
+    border-inline-end-width: var(--musaex-1035pbm);
   }
 
-  .musaex-8pombj:focus-within {
-    box-shadow: 0 0 0 var(--musaex-1035pbm) var(--color-primary) inset;
+  .musaex-1ombdet.musaex-1ombdet:where(.musaex-19ap9w9:focus-within *) {
+    border-inline-start-width: var(--musaex-1035pbm);
   }
 
-  .musaex-1utxejx:focus-within {
-    box-shadow: 0 0 0 var(--musaex-1xf102v) var(--color-on-surface-opacity-38) inset;
+  .musaex-19uxsja.musaex-19uxsja:where(.musaex-19ap9w9:focus-within *) {
+    color: var(--color-error);
   }
 
-  .musaex-4v1e0s:not(#\#), .musaex-yttm51:focus-within:not(#\#) {
-    box-shadow: none;
+  .musaex-1lxvvmp.musaex-1lxvvmp:where(.musaex-19ap9w9:focus-within *) {
+    color: var(--color-primary);
   }
 
-  .musaex-x7gz8e:not(:last-of-type):after {
-    content: "";
+  .musaex-1e669r5.musaex-1e669r5:where(.musaex-19ap9w9:focus-within *) {
+    transform: scale(1);
   }
 
-  .musaex-19h0how:not(#\#) {
-    font-size: var(--musaex-zv0eff);
+  .musaex-11jkr13:not(:last-of-type):after {
+    background-color: var(--color-outline-variant);
+  }
+
+  .musaex-x7gz8e:not(:last-of-type):after {
+    content: "";
   }
 
   .musaex-192i3sz:not(:last-of-type):after {
@@ -1821,6 +1897,10 @@
     background-color: var(--color-primary-opacity-12);
   }
 
+  .musaex-usidmp:active {
+    background-color: color-mix(in srgb,var(--color-on-surface) NaN%,var(--color-surface-container-high));
+  }
+
   @media (hover: hover) {
     .musaex-1senyb1.musaex-1senyb1:not(:hover) > [role="button"], .musaex-s2sk4o.musaex-s2sk4o:hover > [role="separator"] {
       display: none;
@@ -1846,10 +1926,6 @@
       background-color: var(--color-on-surface-opacity-08);
     }
 
-    .musaex-m45hjz.musaex-m45hjz:hover {
-      background-color: var(--color-on-surface-variant-opacity-08);
-    }
-
     .musaex-1bg01ek.musaex-1bg01ek:hover {
       background-color: var(--color-primary-opacity-08);
     }
@@ -1889,6 +1965,10 @@
     border-bottom-color: var(--color-outline-variant);
   }
 
+  .musaex-ubuf2d {
+    border-bottom-color: var(--color-outline);
+  }
+
   .musaex-3wq0gx {
     border-bottom-left-radius: var(--musaex-1035pbm);
   }
@@ -1945,6 +2025,10 @@
     border-right-width: var(--musaex-1xf102v);
   }
 
+  .musaex-1v8p93f {
+    border-top-color: #0000;
+  }
+
   .musaex-6ogecl {
     border-top-color: var(--color-outline-variant);
   }
@@ -2089,6 +2173,10 @@
     height: var(--musaex-1hteljg);
   }
 
+  .musaex-gnqa1e {
+    height: var(--musaex-1jlhe6);
+  }
+
   .musaex-tbkiit {
     height: var(--musaex-1rxoe21);
   }
@@ -2245,6 +2333,10 @@
     max-width: var(--musaex-1btye60);
   }
 
+  .musaex-wzqzfi {
+    max-width: var(--musaex-8eucsi);
+  }
+
   .musaex-1wf3z74 {
     max-width: var(--span);
   }
@@ -2277,6 +2369,18 @@
     min-height: var(--musaex-9xrpwn);
   }
 
+  .musaex-1t89waw {
+    min-height: var(--musaex-kiwrir);
+  }
+
+  .musaex-aw5wtj {
+    min-height: var(--musaex-mw242b);
+  }
+
+  .musaex-1szcog6 {
+    min-height: var(--musaex-pyd8wb);
+  }
+
   .musaex-5ihfrj {
     min-height: var(--musaex-qe7ci9);
   }
@@ -2309,6 +2413,10 @@
     min-width: var(--musaex-177xvl3);
   }
 
+  .musaex-19tpzfy {
+    min-width: var(--musaex-17v1dsa);
+  }
+
   .musaex-16wgjtg {
     min-width: var(--musaex-19fxx0u);
   }
@@ -2349,6 +2457,10 @@
     overflow-x: hidden;
   }
 
+  .musaex-1odjw0f {
+    overflow-y: auto;
+  }
+
   .musaex-10wlt62 {
     overflow-y: hidden;
   }
@@ -2421,6 +2533,10 @@
     right: 0;
   }
 
+  .musaex-13k8yb0 {
+    top: -50%;
+  }
+
   .musaex-13vifvy {
     top: 0;
   }
@@ -2513,6 +2629,10 @@
     width: var(--musaex-1btye60);
   }
 
+  .musaex-165vr4g {
+    width: var(--musaex-1htmfgh);
+  }
+
   .musaex-108untq {
     width: var(--musaex-1rxoe21);
   }
@@ -2577,6 +2697,18 @@
     width: var(--width);
   }
 
+  .musaex-1bq66p9.musaex-1bq66p9:where(.musaex-19ap9w9:focus-within *) {
+    border-top-color: #0000;
+  }
+
+  .musaex-14zl4sw.musaex-14zl4sw:where(.musaex-19ap9w9:focus-within *) {
+    border-top-width: var(--musaex-1xf102v);
+  }
+
+  .musaex-1skm1u1.musaex-1skm1u1:where(.musaex-19ap9w9:focus-within *) {
+    top: -50%;
+  }
+
   .musaex-q3rc72:not(:hover):after {
     border-bottom-color: #0000;
   }
@@ -2621,32 +2753,6 @@
     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;
@@ -2763,8 +2869,12 @@
     color: var(--color-error);
   }
 
-  .musaex-1ew5llu::placeholder {
-    color: var(--color-on-surface);
+  .musaex-1tfpmi6::placeholder {
+    color: var(--color-on-surface-opacity-38);
+  }
+
+  .musaex-19r3k9r::placeholder {
+    color: var(--color-on-surface-variant);
   }
 
   .musaex-100rkj9:after, .musaex-10tli2e:before, .musaex-1cpjm7i:before, .musaex-1s928wv:after {
@@ -2783,6 +2893,10 @@
     display: block;
   }
 
+  .musaex-10emqs4::-ms-reveal {
+    display: none;
+  }
+
   .musaex-15ozc13:before {
     display: none;
   }
@@ -3328,6 +3442,14 @@
   --musaex-1u97ag4: .9;
 }
 
+:root, .musaex-1k6ur2x {
+  --musaex-17v1dsa: 360px;
+  --musaex-8eucsi: 720px;
+  --musaex-kiwrir: 240px;
+  --musaex-1jlhe6: 72px;
+  --musaex-pyd8wb: 72px;
+}
+
 :root, .musaex-fntqy3 {
   --musaex-1dmad9h: 0px;
   --musaex-189evwd: .1px;

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

@@ -1,39 +1,53 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { ComponentProps } from "./element";
 import type { Closable } from "../hooks/use-closable";
 export interface BottomSheetProps extends ComponentProps {
     /**
-     * @description
-     * Controls open/close state of the bottom sheet.
+     * @zh 控制 Bottom Sheet 的打开状态。
+     * @en Controls whether the Bottom Sheet is open.
+     * @default false
      */
-    open: boolean;
+    open?: boolean;
     /**
-     * @description
-     * Called when the sheet requests to close (overlay click, Esc key).
+     * @zh Bottom Sheet 请求关闭时调用，例如点击遮罩层或按下 Esc 键。
+     * @en Called when the Bottom Sheet requests to close, such as after an overlay click or Esc key press.
+     * @default void 0
      */
-    onClose: VoidFunction;
+    onClose?: VoidFunction;
     /**
-     * @description
-     * Sheet content rendered below the drag handle.
+     * @zh 渲染在拖拽手柄下方的内容。
+     * @en Content rendered below the drag handle.
+     * @default void 0
      */
     children?: ReactNode;
     /**
-     * @description
-     * Height of the sheet panel. Accepts any CSS height value.
+     * @zh 应用到 Bottom Sheet 面板元素上的额外类名。
+     * @en Additional class name applied to the Bottom Sheet panel element.
+     * @default void 0
+     */
+    panelClassName?: string;
+    /**
+     * @zh 应用到 Bottom Sheet 面板元素上的额外内联样式。
+     * @en Additional inline styles applied to the Bottom Sheet panel element.
+     * @default void 0
+     */
+    panelStyle?: CSSProperties;
+    /**
+     * @zh 面板高度，接受数字（px）或任意 CSS 高度值。
+     * @en Height of the sheet panel. Accepts a number (px) or any CSS height value.
      * @default "50vh"
      */
     height?: number | string;
     /**
-     * @description
-     * Whether the sheet can be closed by overlay click or Esc key.
+     * @zh 是否可以通过点击遮罩层或按 Esc 键关闭。传入 `Closable` 数组以启用特定关闭方式。
+     * @en Whether the sheet can be closed by clicking the overlay or pressing Esc.
      * Pass an array of `Closable` values to enable specific close triggers.
      * @default true (all triggers enabled)
      */
     closable?: boolean | Closable[];
     /**
-     * @description
-     * Whether to enable modal locking (lock body scroll).
-     * Pass `false` to disable scroll locking.
+     * @zh 是否启用模态锁定（锁定 body 滚动）。传入 `false` 可禁用滚动锁定。
+     * @en Whether to enable modal locking (lock body scroll). Pass `false` to disable scroll locking.
      * @default true
      */
     modal?: boolean;