seam-react 0.9.2 → 0.10.0

package/README.md

@@ -15,7 +15,14 @@ npm install seam-react
 ## 使用
 
 ```tsx
-import { Button, Tabs, Dialog, Sidebar } from "seam-react";
+import {
+  Button,
+  Tabs,
+  Dialog,
+  Sidebar,
+  ToastStack,
+  useToast,
+} from "seam-react";
 import { SeamStyles } from "seam-react/styles";
 
 export function Root() {
@@ -28,11 +35,12 @@ export function Root() {
 }
 ```
 
-组件包含：Button、Input、Switch、Tabs、Dialog、Tooltip、Sidebar。
+组件包含：Button、Input、Switch、Tabs、Dialog、Toast、Tooltip、Sidebar。
 
 - Tabs 支持方向键切换、ARIA 关联与 fluid 指示器。
 - Switch 支持点击、键盘和拖拽 spring。
 - Dialog 提供 Root / Trigger / Content 与语义化内容层，自带 Motion 进出场、焦点陷阱、Esc 关闭与滚动锁定。
+- Toast 提供 `useToast` 状态队列与 `ToastStack` 呈现层，支持六向定位、自动关闭、状态图标、操作和拖拽关闭。
 - Tooltip 提供延迟显示、键盘与触屏访问、视口翻转/避让，以及可让相邻触发器共享并连续移动表面的 Group / Item 组合。
 - Sidebar 提供可折叠 Group、可配置分组间距，以及互斥的轨道与背景 hover 模式。
 

package/dist/Toast.d.ts

@@ -0,0 +1,68 @@
+import { type HTMLMotionProps } from "motion/react";
+import type { ReactNode } from "react";
+export type ToastStatus = "neutral" | "info" | "loading" | "success" | "error";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToastAction = {
+    label: ReactNode;
+    onClick: (toast: Toast) => void;
+};
+export type Toast = {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    status?: ToastStatus;
+    action?: ToastAction;
+    duration?: number;
+    dismissible?: boolean;
+    createdAt?: number;
+};
+export type ToastInput = Omit<Toast, "id" | "createdAt"> & {
+    id?: string;
+};
+export type UseToastOptions = {
+    initialToasts?: ToastInput[];
+    defaultDuration?: number;
+    limit?: number;
+};
+export type ToastPlacement = "static" | "absolute" | "fixed";
+export type ToastClassNames = {
+    root?: string;
+    item?: string;
+    surface?: string;
+    iconWrap?: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    action?: string;
+    close?: string;
+};
+export type ToastIcons = Partial<Record<ToastStatus, ReactNode>>;
+export type ToastStackProps = Omit<HTMLMotionProps<"ol">, "children"> & {
+    toasts: Toast[];
+    onDismiss?: (id: string) => void;
+    onPauseToast?: (id: string) => void;
+    onResumeToast?: (id: string) => void;
+    position?: ToastPosition;
+    placement?: ToastPlacement;
+    portal?: boolean;
+    portalRoot?: Element | null;
+    maxVisible?: number;
+    className?: string;
+    classNames?: ToastClassNames;
+    icons?: ToastIcons;
+    renderToast?: (toast: Toast) => ReactNode;
+};
+type ManagedToast = Toast & {
+    pausedAt?: number;
+};
+export declare function useToast({ initialToasts, defaultDuration, limit, }?: UseToastOptions): {
+    toasts: ManagedToast[];
+    showToast: (input: ToastInput) => string;
+    updateToast: (id: string, patch: Partial<ToastInput>) => void;
+    dismissToast: (id: string) => void;
+    clearToasts: () => void;
+    pauseToast: (id: string) => void;
+    resumeToast: (id: string) => void;
+};
+export declare function ToastStack({ toasts, onDismiss, onPauseToast, onResumeToast, position, placement, portal, portalRoot, maxVisible, className, classNames, icons, renderToast, ...listProps }: ToastStackProps): import("react").JSX.Element | null;
+export {};