{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "title": "Toast",
  "author": "Tori Bryan",
  "description": "A brief message in the corner about something that just happened.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://fibo.toribryan.com/r/button.json",
    "https://fibo.toribryan.com/r/progress.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/toast.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  TriangleAlertIcon,\n  XIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The app-wide toast queue. Call `toast.add({ title, description, type })`\n * from anywhere, including outside React, and the Toaster shows it.\n */\nconst toast = ToastPrimitive.createToastManager()\n\nfunction ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {\n  return <ToastPrimitive.Provider {...props} />\n}\n\nfunction ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {\n  return <ToastPrimitive.Portal data-slot=\"toast-portal\" {...props} />\n}\n\nfunction ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {\n  return (\n    <ToastPrimitive.Viewport\n      data-slot=\"toast-viewport\"\n      className={cn(\n        \"pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/*\n * Toasts stack at the bottom: the newest in front at full size, older ones\n * peeking out above it a little smaller each. Hovering or focusing the stack\n * fans them out. The custom properties come from Base UI as the stack and\n * any swipe change.\n */\nfunction Toast({ className, ...props }: ToastPrimitive.Root.Props) {\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(\n        \"group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-xl border border-border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring-subtle\",\n        \"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]\",\n        \"h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms] motion-reduce:[transition:opacity_150ms]\",\n        \"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n        \"data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]\",\n        \"data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]\",\n        \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\",\n        \"data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n        \"data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n        \"data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n        \"data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n        \"data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n        \"data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n        \"data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n        \"data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {\n  return (\n    <ToastPrimitive.Content\n      data-slot=\"toast-content\"\n      className={cn(\n        \"flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {\n  return (\n    <ToastPrimitive.Title\n      data-slot=\"toast-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ToastDescription({\n  className,\n  ...props\n}: ToastPrimitive.Description.Props) {\n  return (\n    <ToastPrimitive.Description\n      data-slot=\"toast-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n// Renders only when the toast was added with `actionProps`.\nfunction ToastAction({\n  className,\n  render = <Button variant=\"outline\" size=\"sm\" />,\n  ...props\n}: ToastPrimitive.Action.Props) {\n  return (\n    <ToastPrimitive.Action\n      data-slot=\"toast-action\"\n      render={render}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ToastClose({\n  className,\n  children,\n  render = <Button variant=\"ghost\" size=\"icon-sm\" />,\n  ...props\n}: ToastPrimitive.Close.Props) {\n  return (\n    <ToastPrimitive.Close\n      data-slot=\"toast-close\"\n      aria-label=\"Dismiss\"\n      render={render}\n      className={cn(\n        \"relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <XIcon aria-hidden=\"true\" />}\n    </ToastPrimitive.Close>\n  )\n}\n\n// Color only where the type carries meaning; a plain toast has no icon.\nconst ICONS: Record<string, React.ReactNode> = {\n  success: <CircleCheckIcon className=\"text-success\" />,\n  info: <InfoIcon className=\"text-info\" />,\n  warning: <TriangleAlertIcon className=\"text-warning\" />,\n  error: <CircleAlertIcon className=\"text-destructive\" />,\n  loading: (\n    <Progress\n      type=\"circle\"\n      size=\"sm\"\n      value={null}\n      aria-hidden=\"true\"\n      className=\"text-muted-foreground\"\n    />\n  ),\n}\n\nfunction ToastIcon({ type }: { type: string | undefined }) {\n  const icon = type ? ICONS[type] : undefined\n  if (!icon) return null\n  return (\n    <span\n      data-slot=\"toast-icon\"\n      aria-hidden=\"true\"\n      className=\"shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\"\n    >\n      {icon}\n    </span>\n  )\n}\n\nfunction ToastList() {\n  const { toasts } = ToastPrimitive.useToastManager()\n\n  return toasts.map((item) => (\n    <Toast key={item.id} toast={item}>\n      <ToastContent>\n        <ToastIcon type={item.type} />\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <ToastTitle />\n          <ToastDescription />\n        </div>\n        <ToastAction />\n        <ToastClose />\n      </ToastContent>\n    </Toast>\n  ))\n}\n\n/**\n * Mount once near the root of the app. It renders every toast added to the\n * `toast` manager, stacked in the bottom corner.\n */\nfunction Toaster({\n  children,\n  toastManager = toast,\n  ...props\n}: ToastPrimitive.Provider.Props) {\n  return (\n    <ToastProvider toastManager={toastManager} {...props}>\n      {children}\n      <ToastPortal>\n        <ToastViewport>\n          <ToastList />\n        </ToastViewport>\n      </ToastPortal>\n    </ToastProvider>\n  )\n}\n\nconst createToastManager = ToastPrimitive.createToastManager\nconst useToastManager = ToastPrimitive.useToastManager\n\nexport {\n  Toaster,\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastContent,\n  ToastDescription,\n  ToastPortal,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n  createToastManager,\n  toast,\n  useToastManager,\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-success": "var(--success)",
      "color-warning": "var(--warning)",
      "color-info": "var(--info)",
      "color-ring-subtle": "var(--ring-subtle)",
      "text-color-destructive": "var(--destructive-text)",
      "text-color-success": "var(--success-text)",
      "text-color-warning": "var(--warning-text)",
      "text-color-info": "var(--info-text)"
    },
    "light": {
      "success": "var(--color-green-700)",
      "warning": "var(--color-amber-700)",
      "info": "var(--color-blue-700)",
      "ring-subtle": "color-mix(in oklch, var(--color-neutral-400) 50%, transparent)",
      "destructive-text": "var(--destructive)",
      "success-text": "var(--color-green-800)",
      "warning-text": "var(--color-amber-800)",
      "info-text": "var(--info)"
    },
    "dark": {
      "success": "var(--color-green-400)",
      "warning": "var(--color-amber-400)",
      "info": "var(--color-blue-400)",
      "ring-subtle": "color-mix(in oklch, var(--color-neutral-500) 50%, transparent)",
      "destructive-text": "var(--destructive)",
      "success-text": "var(--success)",
      "warning-text": "var(--warning)",
      "info-text": "var(--info)"
    }
  },
  "meta": {
    "tier": "base-components",
    "group": "Feedback",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-feedback-toast--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-feedback-toast--docs",
  "categories": [
    "base-components",
    "feedback"
  ],
  "type": "registry:ui"
}