{"name":"toast","title":"Toast","description":"A succinct message that is displayed temporarily.","installCommand":"bunx marko-ui add toast -y","usageTags":"<Toaster>","importSnippet":"import Toaster from \"@/components/ui/toast/toast.marko\";\nimport { toast } from \"@/components/ui/toast/store.ts\";","usageSnippet":"<button type=\"button\" onClick() { toast.message({ title: \"Event has been created\" }); }>\n  Show toast\n</button>\n\n<Toaster/>","tags":["Toast"],"parts":[],"props":[{"name":"dir","type":"import(\"marko/tags-html\").AttrMissing | 'ltr' | 'rtl' | 'auto'","required":false,"description":"Text direction passed to the group machine.\n\nTyped as the full HTML `dir` surface, not just `\"ltr\" | \"rtl\"`: this Input\nextends `Marko.Input<\"div\">`, and re-declaring `dir` more narrowly than\nthe attribute it inherits makes every `...rest` spread from a div-shaped\nparent (e.g. `sonner.marko`) a type error. `\"auto\"` and the absent values\nare normalized away below, since Zag's group machine accepts only the two\nconcrete directions."},{"name":"label","type":"string","required":false,"description":"Accessible label for the notification region."},{"name":"toastClass","type":"string","required":false,"description":"Extra class(es) applied to every toast's root element. The zag-native\nequivalent of sonner's `toastOptions.classNames.toast`. `sonner.marko`\npasses the `mu-toast` style hook through here, mirroring upstream\n`sonner.tsx`'s `toastOptions={{ classNames: { toast: \"cn-toast\" } }}`."}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"toast-demo","title":"Default","source":"import Toaster from \"@marko-ui/shadcn/ui/toast/toast.marko\";\nimport { toast } from \"@marko-ui/shadcn/ui/toast/store.ts\";\n\n<button type=\"button\"\n  onClick() { toast.message({ title: \"Event has been created\" }); }\n  class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n>\n  Show Toast\n</button>\n<Toaster/>","description":"Call `toast.*` from anywhere in the app; a single `<Toaster/>` region renders whatever is queued."},{"id":"toast-types","title":"Types","source":"import Toaster from \"@marko-ui/shadcn/ui/toast/toast.marko\";\nimport { toast } from \"@marko-ui/shadcn/ui/toast/store.ts\";\n\n<div class=\"flex flex-wrap gap-2\">\n  <button type=\"button\"\n    onClick() { toast.success({ title: \"Success\", description: \"Your changes have been saved.\" }); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Success\n  </button>\n  <button type=\"button\"\n    onClick() { toast.error({ title: \"Error\", description: \"Something went wrong.\" }); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Error\n  </button>\n  <button type=\"button\"\n    onClick() { toast.info({ title: \"Heads up\", description: \"This is an informational message.\" }); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Info\n  </button>\n  <button type=\"button\"\n    onClick() { toast.warning({ title: \"Warning\", description: \"Please double check this.\" }); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Warning\n  </button>\n  <button type=\"button\"\n    onClick() { toast.loading({ title: \"Loading\", description: \"Fetching your data...\" }); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Loading\n  </button>\n</div>\n<Toaster/>","description":"Every `toast.*` helper sets the `type` used to pick the toast's icon and styling."},{"id":"toast-description","title":"With description only","source":"import Toaster from \"@marko-ui/shadcn/ui/toast/toast.marko\";\nimport { toast } from \"@marko-ui/shadcn/ui/toast/store.ts\";\n\n<button type=\"button\"\n  onClick() { toast.message({ description: \"The file has been uploaded successfully.\" }); }\n  class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n>\n  Show Toast\n</button>\n<Toaster/>","description":"`title` is optional — a toast can carry just a `description`."},{"id":"toast-promise","title":"Promise","source":"import Toaster from \"@marko-ui/shadcn/ui/toast/toast.marko\";\nimport { toast } from \"@marko-ui/shadcn/ui/toast/store.ts\";\n\nstatic function fetchData() {\n  return new Promise<{ name: string }>((resolve) => {\n    setTimeout(() => resolve({ name: \"Toast\" }), 2000);\n  });\n}\n\n<button type=\"button\"\n  onClick() {\n    toast.promise(fetchData, {\n      loading: { title: \"Loading...\" },\n      success: (data) => ({ title: `${data.name} toast has been added` }),\n      error: { title: \"Error\" },\n    });\n  }\n  class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n>\n  Show Toast\n</button>\n<Toaster/>","description":"`toast.promise` shows a loading toast, then swaps it for the success or error toast once the promise settles.","essential":true},{"id":"toast-dismiss","title":"Dismiss all","source":"import Toaster from \"@marko-ui/shadcn/ui/toast/toast.marko\";\nimport { toast } from \"@marko-ui/shadcn/ui/toast/store.ts\";\n\n<div class=\"flex flex-wrap gap-2\">\n  <button type=\"button\"\n    onClick() { toast.message({ title: \"Event has been created\" }); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Show Toast\n  </button>\n  <button type=\"button\"\n    onClick() { toast.dismiss(); }\n    class=\"border-input rounded-md border px-4 py-2 text-sm font-medium\"\n  >\n    Dismiss all\n  </button>\n</div>\n<Toaster/>","description":"`toast.dismiss()` with no id clears every toast currently on screen."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}