@neut/ui 0.0.17 → 0.0.18

package/dist/components/toast/Toast/ToastCloseButton.js

@@ -0,0 +1,26 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, setAttribute as o, template as s } from "solid-js/web";
+import { X as c } from "lucide-solid";
+//#region src/components/toast/Toast/ToastCloseButton.tsx
+var l = /*#__PURE__*/ s("<button type=button data-slot=toast-close>");
+function u(r) {
+	return (() => {
+		var s = l();
+		return s.$$click = () => r.onClose(), a(s, n(c, { class: "size-3.5" })), i((n) => {
+			var i = r.ariaLabel ?? "Close toast", a = e("absolute top-2.5 right-2.5 flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground", r.class);
+			return i !== n.e && o(s, "aria-label", n.e = i), a !== n.t && t(s, n.t = a), n;
+		}, {
+			e: void 0,
+			t: void 0
+		}), s;
+	})();
+}
+function d(e, t) {
+	let n = e.type ?? "default";
+	return t && e.dismissible !== !1 && n !== "loading";
+}
+r(["click"]);
+//#endregion
+export { u as ToastCloseButton, d as isCloseButtonVisible };
+
+//# sourceMappingURL=ToastCloseButton.js.map

package/dist/components/toast/Toast/ToastCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastCloseButton.js","names":["clsx","X","ToastT","ToastCloseButton","props","ariaLabel","class","onClose","_el$","_tmpl$","$$click","_$insert","_$createComponent","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","undefined","isCloseButtonVisible","toast","closeButton","type","dismissible","_$delegateEvents","_$createComponent","_$setAttribute","_$className","_$delegateEvents","_tmpl$","ToastCloseButton","_el$","props","insert","createComponent","X","\"class\"","effect","_v$","_v$2","clsx","_p$","setAttribute","className","isCloseButtonVisible","type","toast","closeButton","delegateEvents"],"sources":["../../../../src/components/toast/Toast/ToastCloseButton.tsx"],"sourcesContent":["import { clsx } from \"~/utils\";\nimport { X } from \"lucide-solid\";\nimport type { ToastT } from \"./Toast.types\";\n\n/**\n * 关闭按钮。只负责\"长什么样 + 报告点击\"，是否显示、点了之后做什么\n * 都由调用方决定（关闭本身属于生命周期，不在渲染层）。\n */\nexport function ToastCloseButton(props: {\n  ariaLabel?: string;\n  class?: string;\n  onClose: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"toast-close\"\n      aria-label={props.ariaLabel ?? \"Close toast\"}\n      class={clsx(\n        \"absolute top-2.5 right-2.5 flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground\",\n        props.class,\n      )}\n      onClick={(): void => props.onClose()}\n    >\n      <X class=\"size-3.5\" />\n    </button>\n  );\n}\n\n/** 关闭按钮的可见性：显式开启、可关闭、且不是常驻的 loading */\nexport function isCloseButtonVisible(\n  toast: ToastT,\n  closeButton: boolean,\n): boolean {\n  const type = toast.type ?? \"default\";\n  return closeButton && toast.dismissible !== false && type !== \"loading\";\n}\n"],"mappings":";;;;;AAQA,SAAgBG,EAAiBC,GAI9B;CACD,cAAA;EAAA,IAAAI,IAAAC,EAAA;EAQK,OARLD,EAAAE,gBASyBN,EAAMG,QAAQ,GAACI,EAAAH,GAAAI,EAEnCX,GAAC,EAAAsC,OAAA,WAAA,CAAA,CAAA,GAAA1B,GAAAC,MAAA;GAAA,IAAAC,IAPUX,EAAMC,aAAa,eAAaW,IACrChB,EACL,0JACAI,EAAME,KACR;GAAC,OAAAS,MAAAD,EAAAG,KAAAC,EAAAV,GAAA,cAAAM,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAC,EAAAZ,GAAAM,EAAAK,IAAAH,CAAA,GAAAF;EAAA,GAAA;GAAAG,GAAAI,KAAAA;GAAAF,GAAAE,KAAAA;EAAA,CAAA,GAAAb;CAAA,EAAA,CAAA;AAMP;AAGA,SAAgBc,EACdC,GACAC,GACS;CACT,IAAMC,IAAOF,EAAME,QAAQ;CAC3B,OAAOD,KAAeD,EAAMG,gBAAgB,MAASD,MAAS;AAChE;AAACE,EAAA,CAAA,OAAA,CAAA"}

package/dist/components/toast/Toast/ToastContent.d.ts

@@ -0,0 +1,8 @@
+import { ToastT } from './Toast.types';
+/**
+ * 标题 + 描述。两者都支持惰性函数（内容可能随信号变化），
+ * 求值统一走 `resolveToastContent`；描述为空时整块不渲染。
+ */
+export declare function ToastContent(props: {
+    toast: ToastT;
+}): import('solid-js').JSX.Element;

package/dist/components/toast/Toast/ToastContent.js

@@ -0,0 +1,30 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { resolveToastContent as t } from "./Toast.utils.js";
+import { className as n, createComponent as r, effect as i, insert as a, template as o } from "solid-js/web";
+import { Show as s } from "solid-js";
+//#region src/components/toast/Toast/ToastContent.tsx
+var c = /*#__PURE__*/ o("<div data-slot=toast-description>"), l = /*#__PURE__*/ o("<div data-slot=toast-content><div data-slot=toast-title>");
+function u(o) {
+	return (() => {
+		var u = l(), d = u.firstChild;
+		return a(d, () => t(o.toast.title)), a(u, r(s, {
+			get when() {
+				return o.toast.description;
+			},
+			get children() {
+				var r = c();
+				return a(r, () => t(o.toast.description)), i(() => n(r, e("text-sm leading-relaxed text-muted-foreground", o.toast.descriptionClass, o.toast.classes?.description))), r;
+			}
+		}), null), i((t) => {
+			var r = e("flex min-w-0 flex-1 flex-col gap-0.5", o.toast.classes?.content), i = e("text-sm font-medium leading-snug", o.toast.classes?.title);
+			return r !== t.e && n(u, t.e = r), i !== t.t && n(d, t.t = i), t;
+		}, {
+			e: void 0,
+			t: void 0
+		}), u;
+	})();
+}
+//#endregion
+export { u as ToastContent };
+
+//# sourceMappingURL=ToastContent.js.map

package/dist/components/toast/Toast/ToastContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContent.js","names":["Show","clsx","ToastT","resolveToastContent","ToastContent","props","toast","_el$","_tmpl$2","_el$2","firstChild","_$insert","title","_$createComponent","when","description","children","_el$3","_tmpl$","_$effect","_$className","descriptionClass","classes","_p$","_v$","content","_v$2","e","t","undefined","_$createComponent","_$className","_tmpl$","_tmpl$2","ToastContent","_el$","_el$2","insert","resolveToastContent","props","createComponent","Show","_el$3","effect","className","clsx","_v$","_v$2","_p$"],"sources":["../../../../src/components/toast/Toast/ToastContent.tsx"],"sourcesContent":["import { Show } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport type { ToastT } from \"./Toast.types\";\nimport { resolveToastContent } from \"./Toast.utils\";\n\n/**\n * 标题 + 描述。两者都支持惰性函数（内容可能随信号变化），\n * 求值统一走 `resolveToastContent`；描述为空时整块不渲染。\n */\nexport function ToastContent(props: { toast: ToastT }) {\n  return (\n    <div\n      data-slot=\"toast-content\"\n      class={clsx(\n        \"flex min-w-0 flex-1 flex-col gap-0.5\",\n        props.toast.classes?.content,\n      )}\n    >\n      <div\n        data-slot=\"toast-title\"\n        class={clsx(\n          \"text-sm font-medium leading-snug\",\n          props.toast.classes?.title,\n        )}\n      >\n        {resolveToastContent(props.toast.title)}\n      </div>\n      <Show when={props.toast.description}>\n        <div\n          data-slot=\"toast-description\"\n          class={clsx(\n            \"text-sm leading-relaxed text-muted-foreground\",\n            props.toast.descriptionClass,\n            props.toast.classes?.description,\n          )}\n        >\n          {resolveToastContent(props.toast.description)}\n        </div>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgBI,EAAaC,GAA0B;CACrD,cAAA;EAAA,IAAAE,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;EAaO,OAbPC,EAAAF,SAeON,EAAoBE,EAAMC,MAAMM,KAAK,CAAC,GAAAD,EAAAJ,GAAAM,EAExCb,GAAI;GAAA,IAACc,OAAI;IAAA,OAAET,EAAMC,MAAMS;GAAW;GAAA,IAAAC,WAAA;IAAA,IAAAC,IAAAC,EAAA;IAO9B,OAP8BP,EAAAM,SAS9Bd,EAAoBE,EAAMC,MAAMS,WAAW,CAAC,GAAAI,QAAAC,EAAAH,GANtChB,EACL,iDACAI,EAAMC,MAAMe,kBACZhB,EAAMC,MAAMgB,SAASP,WACvB,CAAC,CAAA,GAAAE;GAAA;EAAA,CAAA,GAAA,IAAA,GAAAE,GAAAI,MAAA;GAAA,IAAAC,IArBEvB,EACL,wCACAI,EAAMC,MAAMgB,SAASG,OACvB,GAACC,IAIQzB,EACL,oCACAI,EAAMC,MAAMgB,SAASV,KACvB;GAAC,OAAAY,MAAAD,EAAAI,KAAAP,EAAAb,GAAAgB,EAAAI,IAAAH,CAAA,GAAAE,MAAAH,EAAAK,KAAAR,EAAAX,GAAAc,EAAAK,IAAAF,CAAA,GAAAH;EAAA,GAAA;GAAAI,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;EAAA,CAAA,GAAAtB;CAAA,EAAA,CAAA;AAkBT"}

package/dist/components/toast/Toast/ToastIcon.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'solid-js';
+import { ToastIcons, ToastT, ToastTypes } from './Toast.types';
+/** 内置图标：类型 → lucide 图标；`default` 没有内置图标 */
+export declare function getDefaultIcon(type: ToastTypes): JSX.Element;
+/** 图标优先级：单条 toast 自带的 `icon` > Toaster 的 `icons` 映射 > 内置图标 */
+export declare function resolveToastIcon(toast: ToastT, icons?: ToastIcons): JSX.Element;
+/**
+ * 图标槽位：只负责"展示哪个图标"和它的容器类名，不参与任何布局/生命周期决策。
+ * 没有图标时整块不渲染，避免占位。
+ */
+export declare function ToastIcon(props: {
+    toast: ToastT;
+    icons?: ToastIcons;
+}): JSX.Element;

package/dist/components/toast/Toast/ToastIcon.js

@@ -0,0 +1,36 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { toastIconVariants as t } from "./Toast.styles.js";
+import { className as n, createComponent as r, effect as i, insert as a, template as o } from "solid-js/web";
+import { Show as s } from "solid-js";
+import { CircleCheck as c, CircleX as l, Info as u, LoaderCircle as d, TriangleAlert as f } from "lucide-solid";
+//#region src/components/toast/Toast/ToastIcon.tsx
+var p = /*#__PURE__*/ o("<div data-slot=toast-icon>");
+function m(e) {
+	switch (e) {
+		case "success": return r(c, {});
+		case "info": return r(u, {});
+		case "warning": return r(f, {});
+		case "error": return r(l, {});
+		case "loading": return r(d, { class: "animate-spin" });
+		default: return;
+	}
+}
+function h(e, t) {
+	let n = e.type ?? "default";
+	return e.icon === void 0 ? t?.[n] ?? m(n) : e.icon;
+}
+function g(o) {
+	return r(s, {
+		get when() {
+			return h(o.toast, o.icons);
+		},
+		get children() {
+			var r = p();
+			return a(r, () => h(o.toast, o.icons)), i(() => n(r, e(t({ type: o.toast.type ?? "default" }), o.toast.classes?.icon))), r;
+		}
+	});
+}
+//#endregion
+export { g as ToastIcon, m as getDefaultIcon, h as resolveToastIcon };
+
+//# sourceMappingURL=ToastIcon.js.map

package/dist/components/toast/Toast/ToastIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastIcon.js","names":["Show","JSX","CircleCheck","CircleX","Info","LoaderCircle","TriangleAlert","clsx","toastIconVariants","ToastIcons","ToastT","ToastTypes","getDefaultIcon","type","Element","_$createComponent","undefined","resolveToastIcon","toast","icons","icon","ToastIcon","props","when","children","_el$","_tmpl$","_$insert","_$effect","_$className","classes","_$createComponent","_$className","_tmpl$","getDefaultIcon","type","createComponent","CircleCheck","Info","TriangleAlert","CircleX","LoaderCircle","\"class\"","resolveToastIcon","toast","icons","ToastIcon","Show","props","_el$","insert","effect","className","clsx","toastIconVariants"],"sources":["../../../../src/components/toast/Toast/ToastIcon.tsx"],"sourcesContent":["import { Show, type JSX } from \"solid-js\";\nimport {\n  CircleCheck,\n  CircleX,\n  Info,\n  LoaderCircle,\n  TriangleAlert,\n} from \"lucide-solid\";\nimport { clsx } from \"~/utils\";\nimport { toastIconVariants } from \"./Toast.styles\";\nimport type { ToastIcons, ToastT, ToastTypes } from \"./Toast.types\";\n\n/** 内置图标：类型 → lucide 图标；`default` 没有内置图标 */\nexport function getDefaultIcon(type: ToastTypes): JSX.Element {\n  switch (type) {\n    case \"success\":\n      return <CircleCheck />;\n    case \"info\":\n      return <Info />;\n    case \"warning\":\n      return <TriangleAlert />;\n    case \"error\":\n      return <CircleX />;\n    case \"loading\":\n      return <LoaderCircle class=\"animate-spin\" />;\n    default:\n      return undefined;\n  }\n}\n\n/** 图标优先级：单条 toast 自带的 `icon` > Toaster 的 `icons` 映射 > 内置图标 */\nexport function resolveToastIcon(\n  toast: ToastT,\n  icons?: ToastIcons,\n): JSX.Element {\n  const type = toast.type ?? \"default\";\n  if (toast.icon !== undefined) return toast.icon;\n  return icons?.[type as keyof ToastIcons] ?? getDefaultIcon(type);\n}\n\n/**\n * 图标槽位：只负责\"展示哪个图标\"和它的容器类名，不参与任何布局/生命周期决策。\n * 没有图标时整块不渲染，避免占位。\n */\nexport function ToastIcon(props: { toast: ToastT; icons?: ToastIcons }) {\n  return (\n    <Show when={resolveToastIcon(props.toast, props.icons)}>\n      <div\n        data-slot=\"toast-icon\"\n        class={clsx(\n          toastIconVariants({ type: props.toast.type ?? \"default\" }),\n          props.toast.classes?.icon,\n        )}\n      >\n        {resolveToastIcon(props.toast, props.icons)}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;AAaA,SAAgBY,EAAeC,GAA+B;CAC5D,QAAQA,GAAR;EACE,KAAK,WACH,OAAAE,EAAQb,GAAW,CAAA,CAAA;EACrB,KAAK,QACH,OAAAa,EAAQX,GAAI,CAAA,CAAA;EACd,KAAK,WACH,OAAAW,EAAQT,GAAa,CAAA,CAAA;EACvB,KAAK,SACH,OAAAS,EAAQZ,GAAO,CAAA,CAAA;EACjB,KAAK,WACH,OAAAY,EAAQV,GAAY,EAAAqC,OAAA,eAAA,CAAA;EACtB,SACE;CACJ;AACF;AAGA,SAAgBzB,EACdC,GACAC,GACa;CACb,IAAMN,IAAOK,EAAML,QAAQ;CAE3B,OADIK,EAAME,SAASJ,KAAAA,IACZG,IAAQN,MAA6BD,EAAeC,CAAI,IAD1BK,EAAME;AAE7C;AAMA,SAAgBC,EAAUC,GAA8C;CACtE,OAAAP,EACGf,GAAI;EAAA,IAACuB,OAAI;GAAA,OAAEN,EAAiBK,EAAMJ,OAAOI,EAAMH,KAAK;EAAC;EAAA,IAAAK,WAAA;GAAA,IAAAC,IAAAC,EAAA;GAMjD,OANiDC,EAAAF,SAQjDR,EAAiBK,EAAMJ,OAAOI,EAAMH,KAAK,CAAC,GAAAS,QAAAC,EAAAJ,GALpClB,EACLC,EAAkB,EAAEK,MAAMS,EAAMJ,MAAML,QAAQ,UAAU,CAAC,GACzDS,EAAMJ,MAAMY,SAASV,IACvB,CAAC,CAAA,GAAAK;EAAA;CAAA,CAAA;AAMT"}

package/dist/components/toast/Toast/useToastLifecycle.d.ts

@@ -0,0 +1,29 @@
+import { Accessor } from 'solid-js';
+import { ToastT } from './Toast.types';
+/** 未指定 duration 时的存活时间 */
+export declare const TOAST_LIFETIME = 4000;
+/** 退场动画时长：状态先变 closed，动画结束后才通知父级移除 */
+export declare const EXIT_ANIMATION_MS = 200;
+export interface UseToastLifecycleOptions {
+    /** 当前 toast 数据（响应式读取，外部可随时改写 delete/duration） */
+    toast: Accessor<ToastT>;
+    /** Toaster 级别的兜底 duration */
+    duration: Accessor<number | undefined>;
+    /** 退场动画结束后的真正移除 */
+    onRemove: (id: string) => void;
+}
+export interface ToastLifecycle {
+    /** open 表示已进入；closed 表示正在退场（或尚未进入） */
+    animationState: Accessor<"open" | "closed">;
+    close: () => void;
+}
+/**
+ * Toast 的进出场生命周期：只关心"什么时候 open、什么时候 closed、什么时候移除"，
+ * 不关心长什么样。渲染层订阅 `animationState` 决定 data-state 与动画。
+ *
+ * - 挂载后延后一帧再置 open：让浏览器先以 closed 状态完成首次绘制，动画才有起点；
+ * - `close()` 幂等：退场中的重复调用不会重复回调与重复排队移除；
+ * - 外部 dismiss（`toast.delete`）复用了同一条退场路径，避免两套退出逻辑；
+ * - loading 类型、`duration` 为 `0`/`Infinity` 时视为常驻，不安排自动关闭。
+ */
+export declare function useToastLifecycle(options: UseToastLifecycleOptions): ToastLifecycle;

package/dist/components/toast/Toast/useToastLifecycle.js

@@ -0,0 +1,30 @@
+import { createEffect as e, createSignal as t, onCleanup as n, onMount as r } from "solid-js";
+//#region src/components/toast/Toast/useToastLifecycle.ts
+var i = 4e3;
+function a(i) {
+	let [a, o] = t("closed");
+	r(() => {
+		let e = requestAnimationFrame(() => o("open"));
+		n(() => cancelAnimationFrame(e));
+	});
+	let s = () => {
+		a() === "open" && (o("closed"), i.toast().onDismiss?.(i.toast()), setTimeout(() => i.onRemove(i.toast().id), 200));
+	};
+	return e(() => {
+		i.toast().delete && a() === "open" && s();
+	}), e(() => {
+		let e = i.toast();
+		if (e.delete || e.type === "loading" || e.duration === Infinity || e.duration === 0) return;
+		let t = e.duration ?? i.duration() ?? 4e3, r = setTimeout(() => {
+			e.onAutoClose?.(e), s();
+		}, t);
+		n(() => clearTimeout(r));
+	}), {
+		animationState: a,
+		close: s
+	};
+}
+//#endregion
+export { i as TOAST_LIFETIME, a as useToastLifecycle };
+
+//# sourceMappingURL=useToastLifecycle.js.map

package/dist/components/toast/Toast/useToastLifecycle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastLifecycle.js","names":["TOAST_LIFETIME","useToastLifecycle","animationState","setAnimationState","createSignal","raf","close","options","createEffect","current","delay","timer"],"sources":["../../../../src/components/toast/Toast/useToastLifecycle.ts"],"sourcesContent":["import {\n  type Accessor,\n  createEffect,\n  createSignal,\n  onCleanup,\n  onMount,\n} from \"solid-js\";\nimport type { ToastT } from \"./Toast.types\";\n\n/** 未指定 duration 时的存活时间 */\nexport const TOAST_LIFETIME = 4000;\n/** 退场动画时长：状态先变 closed，动画结束后才通知父级移除 */\nexport const EXIT_ANIMATION_MS = 200;\n\nexport interface UseToastLifecycleOptions {\n  /** 当前 toast 数据（响应式读取，外部可随时改写 delete/duration） */\n  toast: Accessor<ToastT>;\n  /** Toaster 级别的兜底 duration */\n  duration: Accessor<number | undefined>;\n  /** 退场动画结束后的真正移除 */\n  onRemove: (id: string) => void;\n}\n\nexport interface ToastLifecycle {\n  /** open 表示已进入；closed 表示正在退场（或尚未进入） */\n  animationState: Accessor<\"open\" | \"closed\">;\n  close: () => void;\n}\n\n/**\n * Toast 的进出场生命周期：只关心\"什么时候 open、什么时候 closed、什么时候移除\"，\n * 不关心长什么样。渲染层订阅 `animationState` 决定 data-state 与动画。\n *\n * - 挂载后延后一帧再置 open：让浏览器先以 closed 状态完成首次绘制，动画才有起点；\n * - `close()` 幂等：退场中的重复调用不会重复回调与重复排队移除；\n * - 外部 dismiss（`toast.delete`）复用了同一条退场路径，避免两套退出逻辑；\n * - loading 类型、`duration` 为 `0`/`Infinity` 时视为常驻，不安排自动关闭。\n */\nexport function useToastLifecycle(\n  options: UseToastLifecycleOptions,\n): ToastLifecycle {\n  const [animationState, setAnimationState] = createSignal<\"open\" | \"closed\">(\n    \"closed\",\n  );\n\n  onMount(() => {\n    const raf = requestAnimationFrame(() => setAnimationState(\"open\"));\n    onCleanup(() => cancelAnimationFrame(raf));\n  });\n\n  const close = () => {\n    if (animationState() !== \"open\") return;\n\n    setAnimationState(\"closed\");\n    options.toast().onDismiss?.(options.toast());\n    setTimeout(() => options.onRemove(options.toast().id), EXIT_ANIMATION_MS);\n  };\n\n  // 外部 dismiss：把 delete 标记转换成退场动画\n  createEffect(() => {\n    if (options.toast().delete && animationState() === \"open\") {\n      close();\n    }\n  });\n\n  // 自动关闭计时器\n  createEffect(() => {\n    const current = options.toast();\n    if (\n      current.delete ||\n      current.type === \"loading\" ||\n      current.duration === Infinity ||\n      current.duration === 0\n    ) {\n      return;\n    }\n\n    const delay = current.duration ?? options.duration() ?? TOAST_LIFETIME;\n    const timer = setTimeout(() => {\n      current.onAutoClose?.(current);\n      close();\n    }, delay);\n\n    onCleanup(() => clearTimeout(timer));\n  });\n\n  return { animationState, close };\n}\n"],"mappings":";;AAUA,IAAaA,IAAiB;AA4B9B,SAAgBC,EACd,GACgB;CAChB,IAAM,CAACC,GAAgBC,KAAqBC,EAC1C,QACF;CAEA,QAAc;EACZ,IAAMC,IAAM,4BAA4BF,EAAkB,MAAM,CAAC;EACjE,QAAgB,qBAAqBE,CAAG,CAAC;CAC3C,CAAC;CAED,IAAMC,UAAc;EAClB,AAAIJ,EAAe,MAAM,WAEzBC,EAAkB,QAAQ,GAC1BI,EAAQ,MAAM,CAAC,CAAC,YAAYA,EAAQ,MAAM,CAAC,GAC3C,iBAAiBA,EAAQ,SAASA,EAAQ,MAAM,CAAC,CAAC,EAAE,GAAA,GAAoB;CAC1E;CA8BA,OA3BAC,QAAmB;EACjB,AAAID,EAAQ,MAAM,CAAC,CAAC,UAAUL,EAAe,MAAM,UACjDI,EAAM;CAEV,CAAC,GAGDE,QAAmB;EACjB,IAAMC,IAAUF,EAAQ,MAAM;EAC9B,IACEE,EAAQ,UACRA,EAAQ,SAAS,aACjBA,EAAQ,aAAa,YACrBA,EAAQ,aAAa,GAErB;EAGF,IAAMC,IAAQD,EAAQ,YAAYF,EAAQ,SAAS,KAAA,KAC7CI,IAAQ,iBAAiB;GAE7B,AADAF,EAAQ,cAAcA,CAAO,GAC7BH,EAAM;EACR,GAAGI,CAAK;EAER,QAAgB,aAAaC,CAAK,CAAC;CACrC,CAAC,GAEM;EAAE;EAAgB;CAAM;AACjC"}

package/dist/components/toast/Toaster/ToastViewport.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+import { Position, ToastIcons, ToastT } from '../Toast/Toast.types';
+import { Offset, ToastOptions } from './Toaster.types';
+export interface ToastViewportProps {
+    /** 该视口负责的位置 */
+    position: Position;
+    /** 展开态：由容器悬停/热键驱动 */
+    expanded: boolean;
+    /** 视口内的 toast（已按 visibleToasts 截断） */
+    toasts: ToastT[];
+    gap: number;
+    ariaLabel: string;
+    offset?: Offset;
+    mobileOffset?: Offset;
+    style?: JSX.CSSProperties;
+    /** Toaster 级配置：逐条 toast 的兜底值 */
+    closeButton?: boolean;
+    duration?: number;
+    icons?: ToastIcons;
+    richColors?: boolean;
+    toastOptions?: ToastOptions;
+    /** 展开态变化（悬停进入/离开） */
+    onExpandChange: (expanded: boolean) => void;
+    onRemove: (id: string) => void;
+}
+/**
+ * 一个位置上的 toast 视口：live region 语义 + 定位样式 + 逐条渲染。
+ *
+ * 它同时承担"Toaster 级配置 → 单条 Toast 配置"的优先级解析
+ * （单条 > `toastOptions` > 根级），因为这是纯读取、无副作用；
+ * 每个属性都写成 getter 表达式，配置变化时仍然逐条响应式更新。
+ */
+export declare function ToastViewport(props: ToastViewportProps): JSX.Element;

package/dist/components/toast/Toaster/ToastViewport.js

@@ -0,0 +1,73 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { getPositionClass as t, getViewportLayoutClass as n, resolveOffsetStyle as r } from "./Toaster.utils.js";
+import { Toast as i } from "../Toast/Toast.js";
+import { toasterContainerClass as a } from "./Toaster.styles.js";
+import { className as o, createComponent as s, effect as c, insert as l, setAttribute as u, style as d, template as f } from "solid-js/web";
+import { For as p } from "solid-js";
+//#region src/components/toast/Toaster/ToastViewport.tsx
+var m = /*#__PURE__*/ f("<ol data-slot=toaster-viewport aria-live=polite aria-relevant=\"additions text\"aria-atomic=false tabindex=-1>");
+function h(f) {
+	return (() => {
+		var h = m();
+		return h.addEventListener("mouseleave", () => f.onExpandChange(!1)), h.addEventListener("mouseenter", () => f.onExpandChange(!0)), l(h, s(p, {
+			get each() {
+				return f.toasts;
+			},
+			children: (e, t) => s(i, {
+				toast: e,
+				get index() {
+					return t();
+				},
+				get total() {
+					return f.toasts.length;
+				},
+				get expanded() {
+					return f.expanded;
+				},
+				get position() {
+					return f.position;
+				},
+				get gap() {
+					return f.gap;
+				},
+				get closeButton() {
+					return e.closeButton ?? f.toastOptions?.closeButton ?? f.closeButton ?? !1;
+				},
+				get duration() {
+					return f.toastOptions?.duration ?? f.duration;
+				},
+				get class() {
+					return f.toastOptions?.class;
+				},
+				get icons() {
+					return f.icons;
+				},
+				get closeButtonAriaLabel() {
+					return f.toastOptions?.closeButtonAriaLabel;
+				},
+				get defaultRichColors() {
+					return f.richColors;
+				},
+				get onRemove() {
+					return f.onRemove;
+				}
+			})
+		})), c((i) => {
+			var s = f.position, c = f.ariaLabel, l = e(a, t(f.position), n(f.position, f.expanded)), p = {
+				gap: `${f.gap}px`,
+				...r(f.position, f.offset, f.mobileOffset),
+				...f.style
+			};
+			return s !== i.e && u(h, "data-position", i.e = s), c !== i.t && u(h, "aria-label", i.t = c), l !== i.a && o(h, i.a = l), i.o = d(h, p, i.o), i;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		}), h;
+	})();
+}
+//#endregion
+export { h as ToastViewport };
+
+//# sourceMappingURL=ToastViewport.js.map

package/dist/components/toast/Toaster/ToastViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastViewport.js","names":["For","JSX","clsx","Toast","Position","ToastIcons","ToastT","toasterContainerClass","Offset","ToastOptions","getPositionClass","getViewportLayoutClass","resolveOffsetStyle","ToastViewportProps","position","expanded","toasts","gap","ariaLabel","offset","mobileOffset","style","CSSProperties","closeButton","duration","icons","richColors","toastOptions","onExpandChange","onRemove","id","ToastViewport","props","_el$","_tmpl$","addEventListener","_$insert","_$createComponent","each","children","toast","index","total","length","class","closeButtonAriaLabel","defaultRichColors","_$effect","_p$","_v$","_v$2","_v$3","_v$4","Record","e","_$setAttribute","t","a","_$className","o","_$style","undefined","_$createComponent","_$setAttribute","_$className","_$style","_tmpl$","ToastViewport","_el$","props","insert","createComponent","For","Toast","index","toast","\"class\"","effect","_v$","_v$2","_v$3","clsx","toasterContainerClass","getPositionClass","getViewportLayoutClass","_v$4","resolveOffsetStyle","_p$","setAttribute","className","style"],"sources":["../../../../src/components/toast/Toaster/ToastViewport.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { Toast } from \"../Toast\";\nimport type { Position, ToastIcons, ToastT } from \"../Toast/Toast.types\";\nimport { toasterContainerClass } from \"./Toaster.styles\";\nimport type { Offset, ToastOptions } from \"./Toaster.types\";\nimport {\n  getPositionClass,\n  getViewportLayoutClass,\n  resolveOffsetStyle,\n} from \"./Toaster.utils\";\n\nexport interface ToastViewportProps {\n  /** 该视口负责的位置 */\n  position: Position;\n  /** 展开态：由容器悬停/热键驱动 */\n  expanded: boolean;\n  /** 视口内的 toast（已按 visibleToasts 截断） */\n  toasts: ToastT[];\n  gap: number;\n  ariaLabel: string;\n  offset?: Offset;\n  mobileOffset?: Offset;\n  style?: JSX.CSSProperties;\n  /** Toaster 级配置：逐条 toast 的兜底值 */\n  closeButton?: boolean;\n  duration?: number;\n  icons?: ToastIcons;\n  richColors?: boolean;\n  toastOptions?: ToastOptions;\n  /** 展开态变化（悬停进入/离开） */\n  onExpandChange: (expanded: boolean) => void;\n  onRemove: (id: string) => void;\n}\n\n/**\n * 一个位置上的 toast 视口：live region 语义 + 定位样式 + 逐条渲染。\n *\n * 它同时承担\"Toaster 级配置 → 单条 Toast 配置\"的优先级解析\n * （单条 > `toastOptions` > 根级），因为这是纯读取、无副作用；\n * 每个属性都写成 getter 表达式，配置变化时仍然逐条响应式更新。\n */\nexport function ToastViewport(props: ToastViewportProps) {\n  return (\n    <ol\n      data-slot=\"toaster-viewport\"\n      data-position={props.position}\n      aria-live=\"polite\"\n      aria-relevant=\"additions text\"\n      aria-atomic=\"false\"\n      aria-label={props.ariaLabel}\n      tabIndex={-1}\n      class={clsx(\n        toasterContainerClass,\n        getPositionClass(props.position),\n        getViewportLayoutClass(props.position, props.expanded),\n      )}\n      style={{\n        gap: `${props.gap}px`,\n        ...resolveOffsetStyle(props.position, props.offset, props.mobileOffset),\n        ...(props.style as Record<string, string | number>),\n      }}\n      onMouseEnter={() => props.onExpandChange(true)}\n      onMouseLeave={() => props.onExpandChange(false)}\n    >\n      <For each={props.toasts}>\n        {(toast: ToastT, index) => (\n          <Toast\n            toast={toast}\n            index={index()}\n            total={props.toasts.length}\n            expanded={props.expanded}\n            position={props.position}\n            gap={props.gap}\n            closeButton={\n              toast.closeButton ??\n              props.toastOptions?.closeButton ??\n              props.closeButton ??\n              false\n            }\n            duration={props.toastOptions?.duration ?? props.duration}\n            class={props.toastOptions?.class}\n            icons={props.icons}\n            closeButtonAriaLabel={props.toastOptions?.closeButtonAriaLabel}\n            defaultRichColors={props.richColors}\n            onRemove={props.onRemove}\n          />\n        )}\n      </For>\n    </ol>\n  );\n}\n"],"mappings":";;;;;;;;AA0CA,SAAgB+B,EAAcC,GAA2B;CACvD,cAAA;EAAA,IAAAC,IAAAC,EAAA;EAkBK,OAlBLD,EAAAE,iBAAA,oBAoBwBH,EAAMJ,eAAe,EAAK,CAAC,GAAAK,EAAAE,iBAAA,oBAD3BH,EAAMJ,eAAe,EAAI,CAAC,GAAAQ,EAAAH,GAAAI,EAG7CrC,GAAG;GAAA,IAACsC,OAAI;IAAA,OAAEN,EAAMhB;GAAM;GAAAuB,WACnBC,GAAeC,MAAKJ,EACnBlC,GAAK;IACGqC;IAAK,IACZC,QAAK;KAAA,OAAEA,EAAM;IAAC;IAAA,IACdC,QAAK;KAAA,OAAEV,EAAMhB,OAAO2B;IAAM;IAAA,IAC1B5B,WAAQ;KAAA,OAAEiB,EAAMjB;IAAQ;IAAA,IACxBD,WAAQ;KAAA,OAAEkB,EAAMlB;IAAQ;IAAA,IACxBG,MAAG;KAAA,OAAEe,EAAMf;IAAG;IAAA,IACdM,cAAW;KAAA,OACTiB,EAAMjB,eACNS,EAAML,cAAcJ,eACpBS,EAAMT,eACN;IAAK;IAAA,IAEPC,WAAQ;KAAA,OAAEQ,EAAML,cAAcH,YAAYQ,EAAMR;IAAQ;IAAA,IAAAoD,QAAA;KAAA,OACjD5C,EAAML,cAAciB;IAAK;IAAA,IAChCnB,QAAK;KAAA,OAAEO,EAAMP;IAAK;IAAA,IAClBoB,uBAAoB;KAAA,OAAEb,EAAML,cAAckB;IAAoB;IAAA,IAC9DC,oBAAiB;KAAA,OAAEd,EAAMN;IAAU;IAAA,IACnCG,WAAQ;KAAA,OAAEG,EAAMH;IAAQ;GAAA,CAAA;EAE3B,CAAA,CAAA,GAAAkB,GAAAC,MAAA;GAAA,IAAAC,IAzCYjB,EAAMlB,UAAQoC,IAIjBlB,EAAMd,WAASiC,IAEpBjD,EACLK,GACAG,EAAiBsB,EAAMlB,QAAQ,GAC/BH,EAAuBqB,EAAMlB,UAAUkB,EAAMjB,QAAQ,CACvD,GAACqC,IACM;IACLnC,KAAK,GAAGe,EAAMf,IAAG;IACjB,GAAGL,EAAmBoB,EAAMlB,UAAUkB,EAAMb,QAAQa,EAAMZ,YAAY;IACtE,GAAIY,EAAMX;GACZ;GAAC,OAAA4B,MAAAD,EAAAM,KAAAC,EAAAtB,GAAA,iBAAAe,EAAAM,IAAAL,CAAA,GAAAC,MAAAF,EAAAQ,KAAAD,EAAAtB,GAAA,cAAAe,EAAAQ,IAAAN,CAAA,GAAAC,MAAAH,EAAAS,KAAAC,EAAAzB,GAAAe,EAAAS,IAAAN,CAAA,GAAAH,EAAAW,IAAAC,EAAA3B,GAAAmB,GAAAJ,EAAAW,CAAA,GAAAX;EAAA,GAAA;GAAAM,GAAAO,KAAAA;GAAAL,GAAAK,KAAAA;GAAAJ,GAAAI,KAAAA;GAAAF,GAAAE,KAAAA;EAAA,CAAA,GAAA5B;CAAA,EAAA,CAAA;AA8BP"}

package/dist/components/toast/Toaster/Toaster.d.ts

@@ -1,3 +1,7 @@
 import { Component } from 'solid-js';
 import { ToasterProps } from './Toaster.types';
+/**
+ * toast 容器：负责"有哪些视口、每个视口放哪些 toast"，具体渲染交给
+ * `ToastViewport`，选择/展开算法交给 `useToaster`。
+ */
 export declare const Toaster: Component<ToasterProps>;

package/dist/components/toast/Toaster/Toaster.js

@@ -1,102 +1,84 @@
-import { clsx as e } from "../../../utils/clsx.js";
-import { Toast as t } from "../Toast/Toast.js";
-import { removeToast as n, useSonner as r } from "../state/toast.js";
-import { toasterContainerClass as i } from "./Toaster.styles.js";
-import { getDocumentDirection as a, getPositionClass as o, resolveOffsetStyle as s } from "./Toaster.utils.js";
-import { Portal as c, className as l, createComponent as u, effect as d, insert as f, setAttribute as p, style as m, template as h } from "solid-js/web";
-import { For as g, Show as _, createMemo as v, createSignal as y, mergeProps as b, onCleanup as x, onMount as S } from "solid-js";
+import { removeToast as e, useSonner as t } from "../state/store.js";
+import { getDocumentDirection as n } from "./Toaster.utils.js";
+import { ToastViewport as r } from "./ToastViewport.js";
+import { useToaster as i } from "./useToaster.js";
+import { Portal as a, createComponent as o, effect as s, insert as c, setAttribute as l, template as u } from "solid-js/web";
+import { For as d, Show as f, mergeProps as p } from "solid-js";
 //#region src/components/toast/Toaster/Toaster.tsx
-var C = /*#__PURE__*/ h("<div data-slot=toaster>"), w = /*#__PURE__*/ h("<ol data-slot=toaster-viewport aria-live=polite aria-relevant=\"additions text\"aria-atomic=false tabindex=-1>"), T = (h) => {
-	let T = b({
+var m = /*#__PURE__*/ u("<div data-slot=toaster>"), h = (u) => {
+	let h = p({
 		position: "bottom-right",
 		gap: 14,
 		visibleToasts: 3,
-		dir: a(),
+		dir: n(),
 		containerAriaLabel: "Notifications",
 		hotkey: ["altKey", "KeyT"]
-	}, h), { toasts: E } = r(), [D, O] = y(!1), k = v(() => {
-		let e = T.id;
-		return e ? E.filter((t) => t.toasterId === e) : E.filter((e) => !e.toasterId);
-	}), A = v(() => Array.from(new Set([T.position].concat(k().filter((e) => e.position).map((e) => e.position))))), j = (e) => k().filter((t) => t.position ? t.position === e : e === T.position), M = (e) => {
-		let t = j(e);
-		return T.expand ? t : t.slice(0, T.visibleToasts);
-	};
-	S(() => {
-		let e = (e) => {
-			T.hotkey.length > 0 && T.hotkey.every((t) => e[t] || e.code === t) && O(!0), e.code === "Escape" && O(!1);
-		};
-		document.addEventListener("keydown", e), x(() => document.removeEventListener("keydown", e));
+	}, u), { toasts: g } = t(), { expanded: _, setExpanded: v, possiblePositions: y, visibleToastsForPosition: b } = i({
+		toasts: () => g,
+		toasterId: () => h.id,
+		position: () => h.position,
+		visibleToasts: () => h.visibleToasts,
+		expand: () => h.expand,
+		hotkey: () => h.hotkey
 	});
-	let N = (e) => s(e, T.offset, T.mobileOffset);
-	return u(c, { get children() {
-		var r = C();
-		return f(r, u(g, {
+	return o(a, { get children() {
+		var t = m();
+		return c(t, o(d, {
 			get each() {
-				return A();
+				return y();
 			},
-			children: (r) => u(_, {
+			children: (t) => o(f, {
 				get when() {
-					return M(r).length > 0;
+					return b(t).length > 0;
 				},
 				get children() {
-					var a = w();
-					return a.addEventListener("mouseleave", () => O(!1)), a.addEventListener("mouseenter", () => O(!0)), p(a, "data-position", r), f(a, u(g, {
-						get each() {
-							return M(r);
+					return o(r, {
+						position: t,
+						get toasts() {
+							return b(t);
 						},
-						children: (e, i) => u(t, {
-							toast: e,
-							get index() {
-								return i();
-							},
-							get total() {
-								return M(r).length;
-							},
-							get expanded() {
-								return D();
-							},
-							position: r,
-							get gap() {
-								return T.gap;
-							},
-							get closeButton() {
-								return e.closeButton ?? T.toastOptions?.closeButton ?? T.closeButton ?? !1;
-							},
-							get duration() {
-								return T.toastOptions?.duration ?? T.duration;
-							},
-							get class() {
-								return T.toastOptions?.class;
-							},
-							get icons() {
-								return T.icons;
-							},
-							get closeButtonAriaLabel() {
-								return T.toastOptions?.closeButtonAriaLabel;
-							},
-							get defaultRichColors() {
-								return T.richColors;
-							},
-							onRemove: n
-						})
-					})), d((t) => {
-						var n = T.customAriaLabel ?? T.containerAriaLabel, s = e(i, o(r), D() ? r.startsWith("top") ? "flex flex-col" : "flex flex-col-reverse" : "grid"), c = {
-							gap: `${T.gap}px`,
-							...N(r),
-							...T.style
-						};
-						return n !== t.e && p(a, "aria-label", t.e = n), s !== t.t && l(a, t.t = s), t.a = m(a, c, t.a), t;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0
-					}), a;
+						get expanded() {
+							return _();
+						},
+						get gap() {
+							return h.gap;
+						},
+						get ariaLabel() {
+							return h.customAriaLabel ?? h.containerAriaLabel;
+						},
+						get offset() {
+							return h.offset;
+						},
+						get mobileOffset() {
+							return h.mobileOffset;
+						},
+						get style() {
+							return h.style;
+						},
+						get closeButton() {
+							return h.closeButton;
+						},
+						get duration() {
+							return h.duration;
+						},
+						get icons() {
+							return h.icons;
+						},
+						get richColors() {
+							return h.richColors;
+						},
+						get toastOptions() {
+							return h.toastOptions;
+						},
+						onExpandChange: v,
+						onRemove: e
+					});
 				}
 			})
-		})), d(() => p(r, "dir", T.dir === "auto" ? a() : T.dir)), r;
+		})), s(() => l(t, "dir", h.dir === "auto" ? n() : h.dir)), t;
 	} });
 };
 //#endregion
-export { T as Toaster };
+export { h as Toaster };
 
 //# sourceMappingURL=Toaster.js.map

package/dist/components/toast/Toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","names":["For","createMemo","createSignal","mergeProps","onCleanup","onMount","Show","Component","Portal","clsx","Toast","Position","ToastT","removeToast","useSonner","ToasterProps","toasterContainerClass","getDocumentDirection","getPositionClass","resolveOffsetStyle","Toaster","props","merged","position","gap","visibleToasts","dir","containerAriaLabel","hotkey","const","toasts","expanded","setExpanded","filteredToasts","id","filter","toast","toasterId","possiblePositions","Array","from","Set","concat","map","toastsForPosition","visibleToastsForPosition","list","expand","slice","onKeyDown","e","KeyboardEvent","hotkeyPressed","length","every","key","code","document","addEventListener","removeEventListener","offsetStyle","offset","mobileOffset","_$createComponent","children","_el$","_tmpl$","_$insert","each","when","_el$2","_tmpl$2","_$setAttribute","index","total","closeButton","toastOptions","duration","class","icons","closeButtonAriaLabel","defaultRichColors","richColors","onRemove","_$effect","_p$","_v$","customAriaLabel","_v$2","startsWith","_v$3","style","Record","t","_$className","a","_$style","undefined","mergeProps","_$createComponent","_$setAttribute","_$className","_$style","mergeProps$1","_tmpl$","_tmpl$2","Toaster","merged","getDocumentDirection","props","useSonner","expanded","setExpanded","createSignal","filteredToasts","createMemo","id","toasts","toast","possiblePositions","toastsForPosition","position","visibleToastsForPosition","list","onKeyDown","key","onCleanup","offsetStyle","resolveOffsetStyle","createComponent","Portal","_el$","insert","For","Show","_el$2","setAttribute","Toast","index","\"class\"","removeToast","effect","_v$","_v$2","clsx","toasterContainerClass","getPositionClass","_v$3","_p$","className","style"],"sources":["../../../../src/components/toast/Toaster/Toaster.tsx"],"sourcesContent":["import {\n  For,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  type Component,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { clsx } from \"~/utils\";\nimport { Toast } from \"../Toast\";\nimport type { Position, ToastT } from \"../Toast/Toast.types\";\nimport { removeToast, useSonner } from \"../state/toast\";\nimport type { ToasterProps } from \"./Toaster.types\";\nimport { toasterContainerClass } from \"./Toaster.styles\";\nimport {\n  getDocumentDirection,\n  getPositionClass,\n  resolveOffsetStyle,\n} from \"./Toaster.utils\";\n\nexport const Toaster: Component<ToasterProps> = (props) => {\n  const merged = mergeProps(\n    {\n      position: \"bottom-right\",\n      gap: 14,\n      visibleToasts: 3,\n      dir: getDocumentDirection(),\n      containerAriaLabel: \"Notifications\",\n      hotkey: [\"altKey\", \"KeyT\"] as string[],\n    } as const,\n    props,\n  );\n\n  const { toasts } = useSonner();\n  const [expanded, setExpanded] = createSignal(false);\n\n  const filteredToasts = createMemo(() => {\n    const id = merged.id;\n    return id\n      ? toasts.filter((toast) => toast.toasterId === id)\n      : toasts.filter((toast) => !toast.toasterId);\n  });\n\n  const possiblePositions = createMemo(() =>\n    Array.from(\n      new Set(\n        [merged.position].concat(\n          filteredToasts()\n            .filter((toast) => toast.position)\n            .map((toast) => toast.position as Position),\n        ),\n      ),\n    ),\n  );\n\n  const toastsForPosition = (position: Position) =>\n    filteredToasts().filter((toast) => {\n      if (toast.position) return toast.position === position;\n      return position === merged.position;\n    });\n\n  const visibleToastsForPosition = (position: Position) => {\n    const list = toastsForPosition(position);\n    if (merged.expand) return list;\n    return list.slice(0, merged.visibleToasts);\n  };\n\n  onMount(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      const hotkeyPressed =\n        merged.hotkey.length > 0 &&\n        merged.hotkey.every((key) => (e as any)[key] || e.code === key);\n      if (hotkeyPressed) setExpanded(true);\n      if (e.code === \"Escape\") setExpanded(false);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const offsetStyle = (position: Position) =>\n    resolveOffsetStyle(position, merged.offset, merged.mobileOffset);\n\n  return (\n    <Portal>\n      <div\n        data-slot=\"toaster\"\n        dir={merged.dir === \"auto\" ? getDocumentDirection() : merged.dir}\n      >\n        <For each={possiblePositions()}>\n          {(position) => (\n            <Show when={visibleToastsForPosition(position).length > 0}>\n              <ol\n                data-slot=\"toaster-viewport\"\n                data-position={position}\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                aria-atomic=\"false\"\n                aria-label={merged.customAriaLabel ?? merged.containerAriaLabel}\n                tabIndex={-1}\n                class={clsx(\n                  toasterContainerClass,\n                  getPositionClass(position),\n                  expanded()\n                    ? position.startsWith(\"top\")\n                      ? \"flex flex-col\"\n                      : \"flex flex-col-reverse\"\n                    : \"grid\",\n                )}\n                style={{\n                  gap: `${merged.gap}px`,\n                  ...offsetStyle(position),\n                  ...(merged.style as Record<string, string | number>),\n                }}\n                onMouseEnter={() => setExpanded(true)}\n                onMouseLeave={() => setExpanded(false)}\n              >\n                <For each={visibleToastsForPosition(position)}>\n                  {(toast: ToastT, index) => (\n                    <Toast\n                      toast={toast}\n                      index={index()}\n                      total={visibleToastsForPosition(position).length}\n                      expanded={expanded()}\n                      position={position}\n                      gap={merged.gap}\n                      closeButton={\n                        toast.closeButton ??\n                        merged.toastOptions?.closeButton ??\n                        merged.closeButton ??\n                        false\n                      }\n                      duration={\n                        merged.toastOptions?.duration ?? merged.duration\n                      }\n                      class={merged.toastOptions?.class}\n                      icons={merged.icons}\n                      closeButtonAriaLabel={\n                        merged.toastOptions?.closeButtonAriaLabel\n                      }\n                      defaultRichColors={merged.richColors}\n                      onRemove={removeToast}\n                    />\n                  )}\n                </For>\n              </ol>\n            </Show>\n          )}\n        </For>\n      </div>\n    </Portal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Toaster.js","names":["For","Show","mergeProps","Component","Portal","removeToast","useSonner","ToasterProps","getDocumentDirection","ToastViewport","useToaster","Toaster","props","merged","position","gap","visibleToasts","dir","containerAriaLabel","hotkey","const","toasts","expanded","setExpanded","possiblePositions","visibleToastsForPosition","toasterId","id","expand","_$createComponent","children","_el$","_tmpl$","_$insert","each","when","length","ariaLabel","customAriaLabel","offset","mobileOffset","style","closeButton","duration","icons","richColors","toastOptions","onExpandChange","onRemove","_$effect","_$setAttribute","mergeProps","_$createComponent","_$setAttribute","mergeProps$1","_tmpl$","Toaster","merged","getDocumentDirection","props","useSonner","useToaster","toasts","createComponent","Portal","_el$","insert","For","possiblePositions","Show","visibleToastsForPosition","position","ToastViewport","expanded","setExpanded","removeToast","effect","setAttribute"],"sources":["../../../../src/components/toast/Toaster/Toaster.tsx"],"sourcesContent":["import { For, Show, mergeProps, type Component } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { removeToast, useSonner } from \"../state/toast\";\nimport type { ToasterProps } from \"./Toaster.types\";\nimport { getDocumentDirection } from \"./Toaster.utils\";\nimport { ToastViewport } from \"./ToastViewport\";\nimport { useToaster } from \"./useToaster\";\n\n/**\n * toast 容器：负责\"有哪些视口、每个视口放哪些 toast\"，具体渲染交给\n * `ToastViewport`，选择/展开算法交给 `useToaster`。\n */\nexport const Toaster: Component<ToasterProps> = (props) => {\n  const merged = mergeProps(\n    {\n      position: \"bottom-right\",\n      gap: 14,\n      visibleToasts: 3,\n      dir: getDocumentDirection(),\n      containerAriaLabel: \"Notifications\",\n      hotkey: [\"altKey\", \"KeyT\"] as string[],\n    } as const,\n    props,\n  );\n\n  const { toasts } = useSonner();\n\n  const { expanded, setExpanded, possiblePositions, visibleToastsForPosition } =\n    useToaster({\n      toasts: () => toasts,\n      toasterId: () => merged.id,\n      position: () => merged.position,\n      visibleToasts: () => merged.visibleToasts,\n      expand: () => merged.expand,\n      hotkey: () => merged.hotkey,\n    });\n\n  return (\n    <Portal>\n      <div\n        data-slot=\"toaster\"\n        dir={merged.dir === \"auto\" ? getDocumentDirection() : merged.dir}\n      >\n        <For each={possiblePositions()}>\n          {(position) => (\n            <Show when={visibleToastsForPosition(position).length > 0}>\n              <ToastViewport\n                position={position}\n                toasts={visibleToastsForPosition(position)}\n                expanded={expanded()}\n                gap={merged.gap}\n                ariaLabel={merged.customAriaLabel ?? merged.containerAriaLabel}\n                offset={merged.offset}\n                mobileOffset={merged.mobileOffset}\n                style={merged.style}\n                closeButton={merged.closeButton}\n                duration={merged.duration}\n                icons={merged.icons}\n                richColors={merged.richColors}\n                toastOptions={merged.toastOptions}\n                onExpandChange={setExpanded}\n                onRemove={removeToast}\n              />\n            </Show>\n          )}\n        </For>\n      </div>\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;;oDAYaW,KAAoCC,MAAU;CACzD,IAAMC,IAASX,EACb;EACEY,UAAU;EACVC,KAAK;EACLC,eAAe;EACfC,KAAKT,EAAqB;EAC1BU,oBAAoB;EACpBC,QAAQ,CAAC,UAAU,MAAM;CAC3B,GACAP,CACF,GAEM,EAAES,cAAWf,EAAU,GAEvB,EAAEgB,aAAUC,gBAAaC,sBAAmBC,gCAChDf,EAAW;EACTW,cAAcA;EACdK,iBAAiBb,EAAOc;EACxBb,gBAAgBD,EAAOC;EACvBE,qBAAqBH,EAAOG;EAC5BY,cAAcf,EAAOe;EACrBT,cAAcN,EAAOM;CACvB,CAAC;CAEH,OAAAU,EACGzB,GAAM,EAAA,IAAA0B,WAAA;EAAA,IAAAC,IAAAC,EAAA;EAG6D,OAH7DC,EAAAF,GAAAF,EAKF7B,GAAG;GAAA,IAACkC,OAAI;IAAA,OAAEV,EAAkB;GAAC;GAAAM,WAC1BhB,MAAQe,EACP5B,GAAI;IAAA,IAACkC,OAAI;KAAA,OAAEV,EAAyBX,CAAQ,CAAC,CAACsB,SAAS;IAAC;IAAA,IAAAN,WAAA;KAAA,OAAAD,EACtDpB,GAAa;MACFK;MAAQ,IAClBO,SAAM;OAAA,OAAEI,EAAyBX,CAAQ;MAAC;MAAA,IAC1CQ,WAAQ;OAAA,OAAEA,EAAS;MAAC;MAAA,IACpBP,MAAG;OAAA,OAAEF,EAAOE;MAAG;MAAA,IACfsB,YAAS;OAAA,OAAExB,EAAOyB,mBAAmBzB,EAAOK;MAAkB;MAAA,IAC9DqB,SAAM;OAAA,OAAE1B,EAAO0B;MAAM;MAAA,IACrBC,eAAY;OAAA,OAAE3B,EAAO2B;MAAY;MAAA,IACjCC,QAAK;OAAA,OAAE5B,EAAO4B;MAAK;MAAA,IACnBC,cAAW;OAAA,OAAE7B,EAAO6B;MAAW;MAAA,IAC/BC,WAAQ;OAAA,OAAE9B,EAAO8B;MAAQ;MAAA,IACzBC,QAAK;OAAA,OAAE/B,EAAO+B;MAAK;MAAA,IACnBC,aAAU;OAAA,OAAEhC,EAAOgC;MAAU;MAAA,IAC7BC,eAAY;OAAA,OAAEjC,EAAOiC;MAAY;MACjCC,gBAAgBxB;MAChByB,UAAU3C;KAAW,CAAA;IAAA;GAAA,CAAA;EAG1B,CAAA,CAAA,GAAA4C,QAAAC,EAAAnB,GAAA,OAvBElB,EAAOI,QAAQ,SAAST,EAAqB,IAAIK,EAAOI,GAAG,CAAA,GAAAc;CAAA,EAAA,CAAA;AA4BxE"}

package/dist/components/toast/Toaster/Toaster.utils.d.ts

@@ -3,5 +3,20 @@ import { Position, SwipeDirection } from '../Toast/Toast.types';
 import { Offset } from './Toaster.types';
 export declare function getPositionClass(position: Position): string;
 export declare function resolveOffsetStyle(position: Position, offset?: Offset, mobileOffset?: Offset): JSX.CSSProperties;
+/**
+ * 根据位置推导默认的滑动关闭方向。
+ *
+ * `Position` 的第二段可能是 `"center"`，而它**不是**合法的 `SwipeDirection`
+ * （只有 top/right/bottom/left）。之前实现直接把它 `as SwipeDirection` 塞进结果，
+ * 导致 `top-center` 会产出 `["top", "center"]` —— 调用方按方向匹配手势时
+ * 永远命中不了 `"center"`，等于多了一个无效方向。
+ * 这里按白名单过滤，保证返回的每一项都是真正可用的方向。
+ */
 export declare function getDefaultSwipeDirections(position: Position): SwipeDirection[];
 export declare function getDocumentDirection(): "rtl" | "ltr" | "auto";
+/**
+ * 视口的排布类名：收起时用 `grid` 把多层叠在同一格（靠 Toast 的 transform 错开），
+ * 展开时按位置改成纵向 flex——顶部位置正向排、底部位置反向排，
+ * 保证"最新的一条永远靠近视口边缘"。
+ */
+export declare function getViewportLayoutClass(position: Position, expanded: boolean): string;

package/dist/components/toast/Toaster/Toaster.utils.js

@@ -27,7 +27,10 @@ function a() {
 	let e = document.documentElement.getAttribute("dir");
 	return e === "auto" || !e ? getComputedStyle(document.documentElement).direction : e;
 }
+function o(e, t) {
+	return t ? e.startsWith("top") ? "flex flex-col" : "flex flex-col-reverse" : "grid";
+}
 //#endregion
-export { a as getDocumentDirection, n as getPositionClass, i as resolveOffsetStyle };
+export { a as getDocumentDirection, n as getPositionClass, o as getViewportLayoutClass, i as resolveOffsetStyle };
 
 //# sourceMappingURL=Toaster.utils.js.map