@sakaniui/react 0.8.12 → 0.9.0

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 6,
   "name": "@sakaniui/react",
-  "version": "0.8.12",
+  "version": "0.9.0",
   "description": "Machine-readable contract of the SakaniUI React library, generated from its TypeScript source.",
   "docs": "https://www.sakaniui.com",
   "guide": "https://www.sakaniui.com/llms-full.txt",
@@ -23,7 +23,7 @@
     "@sakaniui/react/icons": "Tabler icons: IconName and IconNameFilled, one module each (5184 outline, 1054 filled)."
   },
   "conventions": {
-    "version": "This manifest describes @sakaniui/react@0.8.12. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything newer than that does not exist there.",
+    "version": "This manifest describes @sakaniui/react@0.9.0. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything newer than that does not exist there.",
     "acceptsNativeProps": "Components forward native HTML attributes (className, style, aria-*, event handlers) to their root element unless a prop says otherwise; only the props that are specific to SakaniUI are listed here.",
     "accessibleName": "When `contract.requiresAccessibleName` is true, a required prop (aria-label, aria-labelledby or an alt text) is the only thing that names the control or image. Do not omit it.",
     "tokens": "Use only the token names listed under `tokens`. Colour tokens follow the theme (the `.dark` class flips them); do not hard-code colours.",
@@ -458,9 +458,9 @@
     }
   },
   "counts": {
-    "components": 126,
+    "components": 127,
     "blocks": 42,
-    "utilities": 6
+    "utilities": 7
   },
   "components": [
     {
@@ -7613,12 +7613,143 @@
       "example": "import { Toast } from '@sakaniui/react';\n\n<Toast />",
       "aliases": [
         "snackbar",
-        "toaster",
         "toast notification",
         "flash message",
         "transient notification"
       ]
     },
+    {
+      "name": "Toaster",
+      "kind": "component",
+      "category": "Composite",
+      "import": "@sakaniui/react",
+      "summary": "Renders the toasts that toast() creates, as a stack on one edge of the screen. Mount one near the root of the app, then call toast() from any handler or module.",
+      "props": [
+        {
+          "name": "position",
+          "type": "\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"",
+          "required": false,
+          "values": [
+            "top-left",
+            "top-center",
+            "top-right",
+            "bottom-left",
+            "bottom-center",
+            "bottom-right"
+          ],
+          "default": "bottom-right",
+          "description": "Corner or edge the stack sits on. Defaults to \"bottom-right\"."
+        },
+        {
+          "name": "richColors",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Tints success, info, warning and error toasts by type."
+        },
+        {
+          "name": "closeButton",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Shows the round close button on every toast."
+        },
+        {
+          "name": "expand",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Keeps the stack spread out instead of piled up."
+        },
+        {
+          "name": "visibleToasts",
+          "type": "number",
+          "required": false,
+          "default": 3,
+          "description": "How many toasts show at once; older ones fade out. Defaults to 3."
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "required": false,
+          "default": 4000,
+          "description": "Milliseconds before a toast closes itself. Defaults to 4000."
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": 14,
+          "description": "Space between toasts when spread out, in px. Defaults to 14."
+        },
+        {
+          "name": "offset",
+          "type": "string | number",
+          "required": false,
+          "default": 24,
+          "description": "Distance from the viewport edge, in px or any CSS length. Defaults to 24."
+        },
+        {
+          "name": "mobileOffset",
+          "type": "string | number",
+          "required": false,
+          "default": 16,
+          "description": "Distance from the viewport edge on screens 600px wide or less. Defaults to 16."
+        },
+        {
+          "name": "hotkey",
+          "type": "string[]",
+          "required": false,
+          "default": "['altKey', 'KeyT']",
+          "description": "Keys that focus the stack. Defaults to alt+T (`['altKey', 'KeyT']`)."
+        },
+        {
+          "name": "containerAriaLabel",
+          "type": "string",
+          "required": false,
+          "default": "Notifications",
+          "description": "Accessible name of the notifications region. The hotkey is appended. Defaults to \"Notifications\"."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false
+        }
+      ],
+      "contract": {
+        "requiredProps": [],
+        "requiresAccessibleName": false
+      },
+      "since": "0.9.0",
+      "example": "import { Toaster } from '@sakaniui/react';\n\n<Toaster />",
+      "recipes": [
+        {
+          "title": "Show a toast from anywhere",
+          "description": "Mount one `<Toaster />` near the root of the app, then call `toast()` (or `toast.success`, `.info`, `.warning`, `.error`, `.loading`) from any handler or module. Do not render `<Toast>` yourself for this: `Toast` is the static, presentational card.",
+          "code": "import { Button, Toaster, toast } from '@sakaniui/react';\n\nexport const App = () => (\n  <>\n    <Button\n      onClick={() =>\n        toast.success('Event has been created', {\n          description: 'Monday, January 3rd at 6:00pm',\n          action: { label: 'Undo', onClick: () => toast('Undone') },\n        })\n      }\n    >\n      Create event\n    </Button>\n    <Toaster position=\"bottom-right\" richColors />\n  </>\n);"
+        },
+        {
+          "title": "One toast for an async task",
+          "description": "`toast.promise` shows a loading toast and turns the same toast into success or error when the promise settles. To update any toast by hand, pass the id that `toast()` returned as `id`.",
+          "code": "import { toast } from '@sakaniui/react';\n\ndeclare function saveInvoice(): Promise<{ number: string }>;\n\nexport function onSave() {\n  toast.promise(saveInvoice(), {\n    loading: 'Saving invoice…',\n    success: (invoice) => `Invoice ${invoice.number} saved`,\n    error: 'Could not save the invoice',\n  });\n\n  const id = toast.loading('Uploading…');\n  setTimeout(() => toast.success('Uploaded', { id }), 1000);\n}"
+        }
+      ],
+      "aliases": [
+        "sonner",
+        "toast stack",
+        "toast provider",
+        "toast container",
+        "toast queue",
+        "notification stack",
+        "stacked toasts",
+        "toast manager"
+      ]
+    },
     {
       "name": "Tooltip",
       "kind": "component",
@@ -11080,6 +11211,12 @@
       "import": "@sakaniui/react",
       "since": "0.4.3"
     },
+    {
+      "name": "toast",
+      "kind": "helper",
+      "import": "@sakaniui/react",
+      "since": "0.9.0"
+    },
     {
       "name": "useHoverHighlight",
       "kind": "hook",