@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/overlays/toast/examples.mdx

@@ -1,85 +0,0 @@
-import Toast, { toast } from './index'
-import Button from '../../button'
-import GlobalDemo from './global-demo'
-
-# States
-
-Each state sets the icon and its color. A toast with a description melts from the pill into a body a beat after it lands, and folds back before it leaves; hover keeps it open.
-
-<Toast position="bottom-right">
-  <div className="flex flex-wrap items-center justify-center gap-3">
-    <Toast.Trigger type="success" title="Saved" description="Your changes are live for everyone on the team." render={<Button variant="secondary">Success</Button>} />
-    <Toast.Trigger type="error" title="Upload failed" description="The file is larger than 25 MB." render={<Button variant="secondary">Error</Button>} />
-    <Toast.Trigger type="warning" title="Storage almost full" description="You've used 92% of your plan." render={<Button variant="secondary">Warning</Button>} />
-    <Toast.Trigger type="info" title="New version" render={<Button variant="secondary">Info</Button>} />
-  </div>
-</Toast>
-
-# From anywhere
-
-Mount one `Toast` with `manager={toast}` near the root, then call `toast()` from any handler or module, inside React or not. Each call returns a handle to `update` or `dismiss` it: a `loading` toast spins until it is updated to another state, then leaves on the `Toast`'s timeout; titles and descriptions take any node, `icon` swaps the glyph and `action` adds a button.
-
-<Toast manager={toast} position="bottom-right">
-  <GlobalDemo />
-</Toast>
-
-# Promise
-
-`promise` runs a task: the pill spins while it is pending, then crossfades into the `success` or `error` toast.
-
-<Toast position="bottom-right">
-  <Toast.Trigger
-    title="Publishing…"
-    promise={() => new Promise(resolve => setTimeout(resolve, 1800))}
-    success={{ title: 'Published', description: 'The page is live at modo.dev/docs.' }}
-    error={{ title: 'Could not publish' }}
-    render={<Button variant="secondary">Publish</Button>}
-  />
-</Toast>
-
-# Action
-
-An `action` puts a button in the body.
-
-<Toast position="bottom-right">
-  <Toast.Trigger
-    type="action"
-    title="Message archived"
-    description="It moved to the archive folder."
-    action={{ label: 'Undo' }}
-    render={<Button variant="secondary">Archive</Button>}
-  />
-</Toast>
-
-Any node works as the action: `Toast.Action` and `Toast.Close` are the toast's own buttons, so a custom row needs no Base UI import.
-
-<Toast position="bottom-right">
-  <Toast.Trigger
-    type="action"
-    title="Invite sent"
-    description="Ada can join the workspace for the next 7 days."
-    action={
-      <div className="flex gap-2">
-        <Toast.Action>Copy link</Toast.Action>
-        <Toast.Close>Dismiss</Toast.Close>
-      </div>
-    }
-    render={<Button variant="secondary">Invite</Button>}
-  />
-</Toast>
-
-# Positions
-
-`position` puts the stack in a corner or centered on an edge; the pill sits on that side and the body opens away from the edge.
-
-<div className="flex flex-wrap items-center justify-center gap-3">
-  <Toast position="top-left">
-    <Toast.Trigger type="success" title="Top left" description="The body opens downward." render={<Button variant="secondary">Top left</Button>} />
-  </Toast>
-  <Toast position="top-center">
-    <Toast.Trigger type="info" title="Top center" description="Centered on the top edge." render={<Button variant="secondary">Top center</Button>} />
-  </Toast>
-  <Toast position="bottom-center">
-    <Toast.Trigger type="info" title="Bottom center" description="The body opens upward." render={<Button variant="secondary">Bottom center</Button>} />
-  </Toast>
-</div>

package/components/overlays/toast/global-demo.tsx

@@ -1,72 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the docs stage of the
- * Toast page's global `toast()`. Plain buttons that call it, so the example
- * stays hook-free and shows the calls as they would sit in app code.
- */
-
-import { useIcon } from '../../../lib/icon-context'
-import Button from '../../button'
-import { toast } from './manager'
-
-const wait = (ms: number, fail = false) =>
-  new Promise<void>((resolve, reject) => setTimeout(() => (fail ? reject(new Error('Network error')) : resolve()), ms))
-
-export default function GlobalDemo() {
-  const Star = useIcon('star')
-
-  return (
-    <div className="flex flex-wrap items-center justify-center gap-3">
-      <Button
-        variant="secondary"
-        onClick={() => toast.success({ title: 'Saved', description: 'Called from a plain handler.' })}
-      >
-        Success
-      </Button>
-      <Button
-        variant="secondary"
-        onClick={() =>
-          toast.error({
-            title: 'Upload failed',
-            description: (
-              <>
-                <span className="weight-medium text-foreground">report.pdf</span> is larger than 25 MB.
-              </>
-            ),
-            action: { label: 'Retry', onClick: () => toast.info('Retrying…') },
-          })
-        }
-      >
-        Error with action
-      </Button>
-      <Button
-        variant="secondary"
-        onClick={() => {
-          const handle = toast.loading('Syncing…')
-          setTimeout(() => handle.update({ type: 'success', title: 'Synced' }), 1600)
-        }}
-      >
-        Loading, then update
-      </Button>
-      <Button
-        variant="secondary"
-        onClick={() =>
-          toast
-            .promise(wait(1600, Math.random() < 0.5), {
-              loading: 'Publishing…',
-              success: { title: 'Published' },
-              error: (error: unknown) => ({ title: 'Could not publish', description: String(error) }),
-            })
-            .catch(() => {})
-        }
-      >
-        Promise
-      </Button>
-      <Button variant="secondary" onClick={() => toast({ type: 'action', title: 'Starred', icon: Star })}>
-        Custom icon
-      </Button>
-      <Button variant="ghost" onClick={() => toast.dismiss()}>
-        Dismiss all
-      </Button>
-    </div>
-  )
-}