{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-toast",
  "type": "registry:ui",
  "title": "Toast",
  "dependencies": [
    "react",
    "react-aria-components",
    "lucide-react",
    "react-dom",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Toast.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React, {type CSSProperties} from 'react';\nimport {\n  UNSTABLE_ToastRegion as ToastRegion,\n  UNSTABLE_Toast as Toast,\n  UNSTABLE_ToastQueue as ToastQueue,\n  UNSTABLE_ToastContent as ToastContent,\n  type ToastProps,\n  Button,\n  Text\n} from 'react-aria-components/Toast';\nimport {XIcon} from 'lucide-react';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\nimport {flushSync} from 'react-dom';\nimport './Toast.css';\n\n// Define the type for your toast content. This interface defines the properties of your toast content, affecting what you\n// pass to the queue calls as arguments.\ninterface MyToastContent {\n  title: string;\n  description?: string;\n}\n\n// This is a global toast queue, to be imported and called where ever you want to queue a toast via queue.add().\nexport const queue = new ToastQueue<MyToastContent>({\n  // Wrap state updates in a CSS view transition.\n  wrapUpdate(fn) {\n    if ('startViewTransition' in document) {\n      document.startViewTransition(() => {\n        flushSync(fn);\n      });\n    } else {\n      fn();\n    }\n  }\n});\n\nexport function MyToastRegion() {\n  return (\n    // The ToastRegion should be rendered at the root of your app.\n    (<ToastRegion\n      queue={queue}\n      className=\"fixed bottom-4 right-4 flex flex-col-reverse gap-2 rounded-lg outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2\">\n      {({toast}) => (\n        <MyToast toast={toast}>\n          <ToastContent className=\"flex flex-col flex-1 min-w-0\">\n            <Text slot=\"title\" className=\"font-semibold text-white text-sm\">\n              {toast.content.title}\n            </Text>\n            {toast.content.description && (\n              <Text slot=\"description\" className=\"text-xs text-white\">\n                {toast.content.description}\n              </Text>\n            )}\n          </ToastContent>\n          <Button\n            slot=\"close\"\n            aria-label=\"Close\"\n            className=\"flex flex-none appearance-none w-8 h-8 rounded-sm bg-transparent border-none text-white p-0 outline-none hover:bg-white/10 pressed:bg-white/15 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 items-center justify-center [-webkit-tap-highlight-color:transparent]\">\n            <XIcon className=\"w-4 h-4\" />\n          </Button>\n        </MyToast>\n      )}\n    </ToastRegion>)\n  );\n}\n\nexport function MyToast(props: ToastProps<MyToastContent>) {\n  return (\n    <Toast\n      {...props}\n      style={{viewTransitionName: props.toast.key} as CSSProperties}\n      className={composeTailwindRenderProps(\n        props.className,\n        'flex items-center gap-4 bg-blue-600 px-4 py-3 rounded-lg outline-none forced-colors:outline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 [view-transition-class:toast] font-sans w-[230px]'\n      )}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}