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

package/components/overlays/toast/manager.ts

@@ -1,193 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the toast options and the
- * global `toast()` that works outside React. One module-level Base UI toast
- * manager (`Toast.createToastManager`) carries every call to the `Toast`
- * mounted with `manager={toast}`; calls made before that `Toast` subscribes
- * (a child's mount effect runs before its parent's) wait in a queue and play
- * once it does, so no toast is lost on the first render. On the server (no
- * `window`) nothing will ever subscribe, so calls there are dropped instead of
- * queued for the life of the process.
- */
-
-import { type ToastManager, Toast as ToastPrimitive } from '@base-ui/react/toast'
-import { isValidElement, type ReactNode } from 'react'
-import type { IconComponent } from '../../../lib/icon-context'
-
-type ToastType = 'success' | 'loading' | 'error' | 'warning' | 'info' | 'action'
-
-/** A button in the toast's body. */
-interface ToastActionOptions {
-  label: ReactNode
-  onClick?: () => void
-}
-
-interface ToastOptions {
-  /** Reuse an id to replace a toast that is still showing. */
-  id?: string
-  title?: ReactNode
-  description?: ReactNode
-  type?: ToastType
-  /** Ms before it leaves; 0 keeps it until dismissed. */
-  timeout?: number
-  /** Same as `timeout`; `timeout` wins when both are set. */
-  duration?: number
-  /** Replaces the state's icon in the pill: an icon component, or any node. */
-  icon?: IconComponent | ReactNode
-  /** A button in the body (`{ label, onClick }`), or any node. */
-  action?: ToastActionOptions | ReactNode
-  /** Runs once the toast starts to leave, however it was closed. */
-  onClose?: () => void
-  /** `high` is announced at once by screen readers; `low` waits its turn. */
-  priority?: 'low' | 'high'
-}
-
-/** What a toast keeps beside Base UI's own fields. */
-interface ToastData {
-  icon?: IconComponent | ReactNode
-  action?: ReactNode
-}
-
-type ToastInput = string | ToastOptions
-type ToastResult<T> = ToastInput | ((value: T) => ToastInput)
-
-interface ToastPromiseOptions<T> {
-  loading: ToastInput
-  success: ToastResult<T>
-  error: ToastResult<unknown>
-}
-
-/** A shown toast: its id, and updating or dismissing it. */
-interface ToastHandle {
-  id: string
-  update: (options: ToastInput) => void
-  dismiss: () => void
-}
-
-const isActionButton = (action: unknown): action is ToastActionOptions =>
-  typeof action === 'object' && action !== null && !isValidElement(action) && 'label' in action
-
-/** Drops `undefined` keys: Base UI merges an update over the toast, so a missing key must not clear a field. */
-function defined<T extends object>(value: T): T {
-  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined)) as T
-}
-
-/** Options as Base UI's manager takes them: the action button as `actionProps`, the rest in `data`. */
-function toManagerOptions(input: ToastInput) {
-  const { action, icon, duration, timeout, ...rest } = typeof input === 'string' ? { title: input } : input
-  const button = isActionButton(action)
-  return defined({
-    ...rest,
-    timeout: timeout ?? duration,
-    actionProps: button ? { children: action.label, onClick: action.onClick } : undefined,
-    data:
-      icon !== undefined || (action !== undefined && !button)
-        ? { icon, action: button ? undefined : action }
-        : undefined,
-  })
-}
-
-const withType = (input: ToastInput, type: ToastType): ToastOptions =>
-  typeof input === 'string' ? { title: input, type } : { ...input, type }
-
-const resultOptions = <T>(result: ToastResult<T>) =>
-  typeof result === 'function' ? (value: T) => toManagerOptions(result(value)) : toManagerOptions(result)
-
-/** Base UI's manager, holding its events until a provider listens. */
-function createQueuedManager(): ToastManager<ToastData> {
-  const manager = ToastPrimitive.createToastManager<ToastData>()
-  let listeners = 0
-  let queue: (() => void)[] = []
-  let count = 0
-  // No window, no provider to come: drop the call rather than hold it forever.
-  const browser = () => typeof window !== 'undefined'
-  const whenHeard = (run: () => void) => {
-    if (listeners) run()
-    else if (browser()) queue.push(run)
-  }
-
-  return {
-    ' subscribe': listener => {
-      const unsubscribe = manager[' subscribe'](listener)
-      listeners++
-      const queued = queue
-      queue = []
-      for (const run of queued) run()
-      return () => {
-        listeners--
-        unsubscribe()
-      }
-    },
-    add: options => {
-      // A known id, so the caller can update or dismiss a toast still queued.
-      const id = options.id ?? `toast-global-${++count}`
-      whenHeard(() => manager.add({ ...options, id }))
-      return id
-    },
-    close: id => whenHeard(() => manager.close(id)),
-    update: (id, updates) => whenHeard(() => manager.update(id, updates)),
-    promise: (promise, options) => {
-      if (listeners) return manager.promise(promise, options)
-      // The toast reports a rejection; the caller still gets the original promise.
-      if (browser()) queue.push(() => manager.promise(promise, options).catch(() => {}))
-      return promise
-    },
-  }
-}
-
-const manager = createQueuedManager()
-
-function show(input: ToastInput, type?: ToastType): ToastHandle {
-  const options = toManagerOptions(input)
-  const id = manager.add({ type: 'info', ...options, ...(type && { type }) })
-  return {
-    id,
-    update: next => manager.update(id, toManagerOptions(next)),
-    dismiss: () => manager.close(id),
-  }
-}
-
-/**
- * Shows a toast from anywhere — an event handler, a fetch wrapper, code
- * outside React — in the `Toast` mounted with `manager={toast}`. Returns a
- * handle with the id, `update` and `dismiss`.
- */
-const toast = Object.assign((input: ToastInput) => show(input), {
-  /** A `success` toast. */
-  success: (input: ToastInput) => show(input, 'success'),
-  /** An `error` toast. */
-  error: (input: ToastInput) => show(input, 'error'),
-  /** A `warning` toast. */
-  warning: (input: ToastInput) => show(input, 'warning'),
-  /** An `info` toast. */
-  info: (input: ToastInput) => show(input, 'info'),
-  /** A spinning `loading` toast. It stays while its type is `loading`; once updated to another type it leaves on its own `timeout` or the `Toast`'s. */
-  loading: (input: ToastInput) => show(withType(input, 'loading')),
-  /** Runs `promise` behind a `loading` toast that turns into its `success` or `error` toast. Returns the promise. */
-  promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) =>
-    manager.promise(promise, {
-      loading: toManagerOptions(options.loading),
-      success: resultOptions(options.success),
-      error: resultOptions(options.error),
-    }),
-  /** Changes a toast that is showing. */
-  update: (id: string, input: ToastInput) => manager.update(id, toManagerOptions(input)),
-  /** Closes one toast, or every toast without an id. */
-  dismiss: (id?: string) => manager.close(id),
-  // Base UI's provider subscribes through this key, so `toast` itself is what `<Toast manager>` takes.
-  ' subscribe': manager[' subscribe'],
-})
-
-/** What `<Toast manager>` takes: the global `toast`, or a manager from Base UI's `Toast.createToastManager()`. */
-type ToastSource = Pick<ToastManager, ' subscribe'>
-
-export type {
-  ToastActionOptions,
-  ToastData,
-  ToastHandle,
-  ToastInput,
-  ToastOptions,
-  ToastPromiseOptions,
-  ToastSource,
-  ToastType,
-}
-export { toast, toManagerOptions }

package/components/overlays/tooltip/examples.mdx

@@ -1,106 +0,0 @@
-import Tooltip from './index'
-import Button from '../../button'
-import { Plus } from 'lucide-react'
-
-# Basic
-
-One `content` prop and a trigger child. The tooltip opens after the hover
-delay and closes on pointer-out, blur or Escape.
-
-<Tooltip content="Save your changes">
-  <Button>Hover me</Button>
-</Tooltip>
-
-# Placement
-
-`side` picks the preferred side; `sideOffset` is the gap in pixels. A
-tooltip that would collide with the viewport edge flips to the opposite
-side and animates from there.
-
-<div className="flex flex-wrap gap-3">
-  {['top', 'right', 'bottom', 'left'].map((side) => (
-    <Tooltip key={side} content={side} side={side}>
-      <Button variant="secondary" className="capitalize">{side}</Button>
-    </Tooltip>
-  ))}
-</div>
-
-# Rich Content
-
-`content` takes any node, not just a string — a shortcut hint, a label
-with a description, a small stack of rows.
-
-<Tooltip
-  content={
-    <div className="flex flex-col gap-1">
-      <span className="weight-semibold">Keyboard shortcut</span>
-      <span className="opacity-70">⌘ + S</span>
-    </div>
-  }
->
-  <Button leadingIcon={Plus}>Save</Button>
-</Tooltip>
-
-# Compound parts
-
-Leave `content` out and `Tooltip` is the root of a compound tooltip: a
-`Tooltip.Trigger` (`render` or Radix-style `asChild`) and a
-`Tooltip.Content` with `side`, `align` and the offsets (and `render` or
-`asChild` for the label's own element). It looks and moves the same as the
-flat form.
-
-<div className="flex flex-wrap gap-3">
-  <Tooltip>
-    <Tooltip.Trigger asChild>
-      <Button variant="secondary">Archive</Button>
-    </Tooltip.Trigger>
-    <Tooltip.Content asChild>
-      <span>Moves it out of the inbox</span>
-    </Tooltip.Content>
-  </Tooltip>
-  <Tooltip delay={0}>
-    <Tooltip.Trigger render={<Button variant="secondary">Start aligned</Button>} />
-    <Tooltip.Content side="bottom" align="start">Lines up with the trigger's left edge</Tooltip.Content>
-  </Tooltip>
-</div>
-
-# Follow cursor
-
-For tall or wide triggers, a centered tooltip sits far from the pointer —
-`followCursor` tracks it along one axis while the other stays anchored by
-`side`.
-
-<div className="flex flex-wrap items-center justify-center gap-6">
-  <Tooltip content="Following x" side="top" followCursor="x">
-    <div className="flex h-12 w-64 cursor-default items-center justify-center rounded-lg border border-border text-caption text-muted-foreground">
-      Move along me
-    </div>
-  </Tooltip>
-  <Tooltip content="Following y" side="right" followCursor="y">
-    <div className="flex h-40 w-12 cursor-default items-center justify-center rounded-lg border border-border text-caption text-muted-foreground">
-      <span className="rotate-90 whitespace-nowrap">Move along me</span>
-    </div>
-  </Tooltip>
-</div>
-
-# Delay
-
-`delayDuration` overrides the hover delay per tooltip. Wrap a region in
-`Tooltip.Provider` to share one delay and let adjacent tooltips skip it,
-and the morph: the next label shows in place. The provider takes Base UI's
-`delay` / `closeDelay` / `timeout` or Radix's `delayDuration` /
-`skipDelayDuration`, so a Radix provider config spreads straight in.
-
-<Tooltip.Provider delayDuration={300} skipDelayDuration={500}>
-  <div className="flex flex-wrap gap-3">
-    <Tooltip content="Instant" delayDuration={0}>
-      <Button variant="secondary">No delay</Button>
-    </Tooltip>
-    <Tooltip content="Grouped: 300ms, then instant between neighbours">
-      <Button variant="secondary">Grouped</Button>
-    </Tooltip>
-    <Tooltip content="Slow" delayDuration={500}>
-      <Button variant="secondary">500ms delay</Button>
-    </Tooltip>
-  </div>
-</Tooltip.Provider>