{ "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Temporary success feedback and other brief, dismissible status messages after a real user action.", "registryDependencies": [ "@siteplane/base", "@siteplane/button" ], "dependencies": [ "@base-ui/react@1.5.0", "lucide-react@1.18.0" ], "files": [ { "path": "src/components/ui/toast.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n CircleAlertIcon,\n CircleCheckIcon,\n InfoIcon,\n LoaderCircleIcon,\n TriangleAlertIcon,\n XIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { buttonVariants } from \"@/components/ui/button\";\n\nconst TOAST_ICONS = {\n error: CircleAlertIcon,\n info: InfoIcon,\n loading: LoaderCircleIcon,\n success: CircleCheckIcon,\n warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype ToastData = {\n rootProps?: Omit<\n React.ComponentProps,\n \"children\" | \"className\" | \"swipeDirection\" | \"toast\"\n >;\n};\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n ? \"up\"\n : \"down\";\n\n if (position.includes(\"center\")) {\n return [verticalDirection];\n }\n\n if (position.includes(\"left\")) {\n return [\"left\", verticalDirection];\n }\n\n return [\"right\", verticalDirection];\n}\n\nfunction upsertReplayClassName(toast: {\n type?: string | undefined;\n updateKey?: number | undefined;\n}): string | undefined {\n const k = toast.updateKey ?? 0;\n if (k <= 0) return undefined;\n const isEven = k % 2 === 0;\n if (toast.type === \"error\") {\n return isEven ? \"animate-toast-error-even\" : \"animate-toast-error-odd\";\n }\n return isEven ? \"animate-toast-success-even\" : \"animate-toast-success-odd\";\n}\n\nfunction Toasts({\n position,\n portalProps,\n}: {\n position: ToastPosition;\n portalProps?: React.ComponentProps | undefined;\n}): React.ReactElement {\n const { toasts } = Toast.useToastManager();\n const swipeDirection = getSwipeDirection(position);\n\n return (\n \n \n {toasts.map((toast) => {\n const Icon = toast.type\n ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n : null;\n const toastData = toast.data as ToastData | undefined;\n\n return (\n \n \n
\n {Icon && (\n svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n data-slot=\"toast-icon\"\n >\n \n
\n )}\n\n
\n \n \n
\n \n {toast.actionProps && (\n \n {toast.actionProps.children}\n \n )}\n \n \n \n );\n })}\n \n \n );\n}\n\nfunction ToastCloseButton(): React.ReactElement {\n return (\n \n \n \n );\n}\n\nexport const toastManager: ReturnType =\n Toast.createToastManager();\n\nexport type ToastPosition =\n | \"top-left\"\n | \"top-center\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-center\"\n | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n position?: ToastPosition;\n portalProps?: React.ComponentProps;\n}\n\nexport function ToastProvider({\n children,\n position = \"bottom-right\",\n portalProps,\n ...props\n}: ToastProviderProps): React.ReactElement {\n return (\n \n {children}\n \n \n );\n}\n\nexport { Toast as ToastPrimitive };\n" } ], "categories": [ "feedback" ], "docs": "# Toast\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Toast for brief feedback after a real user action when the message does not require a blocking decision.\n\n## Import\n\n```tsx\nimport { ToastProvider, toastManager } from \"@/components/ui/toast\";\n```\n\n## Public API\n\n- Mount one `ToastProvider` at the app root. Its `position` supports `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` and `bottom-right`.\n- Use `toastManager.add`, `toastManager.update`, `toastManager.close` and `toastManager.promise(promise, { loading, success, error })` from anywhere below the provider.\n- Position controls viewport corner, stack direction, entry and exit direction, and the permitted swipe direction.\n\n## Public Motion\n\n- Toast stacking, height, opacity, transform and swipe exit use the central Siteplane motion tokens.\n- The forced `reducedMotionPreset` shortens the tokenized stack transitions. Provider and operating-system reduced-motion modes stop both the continuous loading-icon spin and the cosmetic success/error update replay; messages and dismissal remain functional.\n\n## Public Accessibility\n\n- Keep messages concise and announce the result of a real action; do not hide critical instructions only in a transient Toast.\n- Every Toast remains manually dismissible in addition to its timeout.\n- Choose wording and urgency that match the result, and avoid firing repeated messages for routine state changes.\n\n## Public Agent Guidance\n\n- Mount exactly one app-wide provider and set its position deliberately.\n- Use `toastManager.promise` for a promise lifecycle instead of manually recreating loading, success and error updates.\n- Use Alert, inline validation or Dialog for information that must remain visible or requires a decision.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/feedback/toast)\n\n- [Registry source](https://ui.siteplane.io/r/toast.json)\n", "meta": { "siteplane:agentContractVersion": 1, "siteplane:docs": "https://ui.siteplane.io/docs/components/feedback/toast", "siteplane:releaseVersion": "0.1.1", "siteplane:sourceOwned": true }, "devDependencies": [] }