{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "type": "registry:ui",
  "title": "Toast",
  "description": "Floating notification pill fixed below the header, for app-level messages.",
  "categories": [
    "overlays"
  ],
  "registryDependencies": [
    "https://whiskeyjack.net/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/toast.tsx",
      "type": "registry:ui",
      "target": "components/ui/toast.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Drives the fade/slide transition. The caller owns the state and any\n   *  auto-dismiss timing -- the component never dismisses itself. */\n  open: boolean\n  /** Optional leading icon element (e.g. a 16px Phosphor icon). */\n  icon?: React.ReactNode\n  /** Optional trailing action (e.g. a small accent Button). Its presence\n   *  makes the toast interactive (pointer events enabled). */\n  action?: React.ReactNode\n  /** When provided, renders an X dismiss button and enables pointer events. */\n  onDismiss?: () => void\n  /** aria-label for the dismiss button. */\n  dismissLabel?: string\n  /**\n   * When `true`, the toast is announced immediately via `role=\"alert\"` +\n   * `aria-live=\"assertive\"` -- use for time-sensitive or error messages.\n   * Default (`false`) uses `aria-live=\"polite\"`, which waits for the user\n   * to finish their current interaction before announcing.\n   */\n  assertive?: boolean\n}\n\n/**\n * Floating notification pill, fixed and centered below the app header.\n * Frosted-surface chrome (same recipe as BottomNav and the surface\n * ActionPill) so it reads as part of the header family.\n *\n * Use for app-level, out-of-flow notifications: transient state hints\n * (auto-dismissed by the caller, e.g. an armed destructive button) or\n * persistent action-carrying notices (e.g. \"update available\" with a\n * download button + dismiss). For context-bound inline status and error\n * boxes inside forms or settings sections, use `Notice` instead.\n *\n * Purely informational toasts (no `action`, no `onDismiss`) are\n * pointer-events-none so they never intercept clicks. Keep messages to a\n * single short sentence -- the pill shape does not suit multiline text.\n */\nconst Toast = React.forwardRef<HTMLDivElement, ToastProps>(\n  (\n    { open, icon, action, onDismiss, dismissLabel = 'Dismiss', className, children, ...props },\n    ref,\n  ) => {\n    const interactive = Boolean(action || onDismiss)\n    return (\n      <div\n        ref={ref}\n        aria-live=\"polite\"\n        className={cn(\n          'fixed left-1/2 -translate-x-1/2 z-40',\n          'top-[calc(env(safe-area-inset-top)+0.75rem)] md:top-20',\n          'flex items-center gap-2 px-4 py-2 rounded-full',\n          'max-w-[calc(100vw-2rem)]',\n          'backdrop-blur-[16px]',\n          'bg-[color-mix(in_srgb,var(--color-surface-light)_80%,transparent)]',\n          'dark:bg-[color-mix(in_srgb,var(--color-surface-dark)_80%,transparent)]',\n          'border border-[var(--color-border-light)] dark:border-[var(--color-border-dark)]',\n          'shadow-lg text-sm',\n          'text-[var(--color-text-primary-light)] dark:text-[var(--color-text-primary-dark)]',\n          'transition-all duration-300',\n          open ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2',\n          open && interactive ? 'pointer-events-auto' : 'pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0\">{children}</span>\n        {action}\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            aria-label={dismissLabel}\n            title={dismissLabel}\n            className=\"wj-focus-ring p-1 -me-1 rounded-full text-[var(--color-text-muted-light)] dark:text-[var(--color-text-muted-dark)] hover:bg-[var(--color-warm-200)] dark:hover:bg-[var(--color-surface-muted-dark)] transition-colors\"\n          >\n            {/* Inline X glyph: the DS stays icon-library-free (same documented\n                exception as the Select caret). */}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"M3.5 3.5l9 9m0-9l-9 9\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.8\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n        )}\n      </div>\n    )\n  },\n)\nToast.displayName = 'Toast'\n\nexport { Toast }\n"
    }
  ],
  "docs": "Toast is for app-level notifications that float above the page: an armed-state hint, an update-available message with an action. For a message bound to a specific surface, use Notice. The caller owns `open` and any auto-dismiss timing. Keep messages to one short sentence.",
  "meta": {
    "group": "overlays",
    "related": [
      "notice",
      "badge"
    ],
    "exports": [
      "Toast"
    ],
    "siteSlug": "toast"
  }
}