1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T24bd,"use client"; import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { AlertGlyph, CloseGlyph, InfoGlyph, SuccessGlyph } from "@/registry/tier-2-primitives/glyphs"; import { Button } from "@/registry/tier-3-components/button"; /** * Toast. * * Slides in from the bottom-right over 240ms, leaves on a fade and an 8px fall. * * A TOAST IS NOT A DIALOG * It doesn't take focus and it doesn't block. That makes it right for "Saved" * and wrong for "Your card was declined" — anything a person MUST act on * belongs in the flow, not in a corner on a timer. If a toast has more than * one action, it should have been an `Alert` in the page. * * Announcements are live-region-correct: `status` for information (polite, * waits for a pause) and `alert` for errors (assertive, interrupts). Using * `alert` for a success message means interrupting a screen-reader user to tell * them a thing they did worked. * * Errors do not auto-dismiss. A message that disappears before it can be read * is a message that was never delivered. */ export type ToastTone = "info" | "success" | "warning" | "danger"; export type Toast = { id: string; title: string; description?: string; tone?: ToastTone; /** One action, at most. Two means this should have been an Alert. */ action?: { label: string; onClick: () => void }; /** ms. `null` means it stays until dismissed. Errors default to `null`. */ duration?: number | null; }; type ToastContextValue = { toast: (toast: Omit) => string; dismiss: (id: string) => void; }; const ToastContext = createContext(null); export function useToast(): ToastContextValue { const context = useContext(ToastContext); if (!context) { throw new Error("useToast must be used inside a ."); } return context; } export function ToastProvider({ children, max = 3, }: { children: ReactNode; /** More than three stacked toasts is a queue nobody is reading. */ max?: number; }) { const [toasts, setToasts] = useState([]); const dismiss = useCallback((id: string) => { setToasts((current) => current.filter((toast) => toast.id !== id)); }, []); const toast = useCallback( (input: Omit) => { const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; setToasts((current) => [...current, { ...input, id }].slice(-max)); return id; }, [max], ); const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]); return ( {children} ); } function ToastViewport({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) { if (toasts.length === 0) return null; return (

{toasts.map((toast) => ( ))}

); } type ToneGlyph = typeof InfoGlyph; const TONE: Record = { info: { Glyph: InfoGlyph, className: "text-info" }, success: { Glyph: SuccessGlyph, className: "text-success" }, warning: { Glyph: AlertGlyph, className: "text-warning" }, danger: { Glyph: AlertGlyph, className: "text-danger" }, }; function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) { const tone = toast.tone ?? "info"; // Errors stay. Everything else clears itself after four seconds. const duration = toast.duration === undefined ? (tone === "danger" ? null : 4000) : toast.duration; useEffect(() => { if (duration === null) return; const timer = setTimeout(() => onDismiss(toast.id), duration); return () => clearTimeout(timer); }, [duration, onDismiss, toast.id]); const { Glyph, className } = TONE[tone]; return (

{toast.title}

{toast.description && (

{toast.description}

)} {toast.action && ( )}

); } /** * Alert — a toast's in-page counterpart. * * Use this when the message is part of the page rather than a passing * acknowledgement: a declined payment above a checkout form, a delivery delay * on an order. It doesn't disappear, and it sits where the problem is. */ const TONE_SURFACE: Record = { info: { bg: "bg-info-subtle", border: "border-info-border", fg: "text-info", Glyph: InfoGlyph }, success: { bg: "bg-success-subtle", border: "border-success-border", fg: "text-success", Glyph: SuccessGlyph }, warning: { bg: "bg-warning-subtle", border: "border-warning-border", fg: "text-warning", Glyph: AlertGlyph }, danger: { bg: "bg-danger-subtle", border: "border-danger-border", fg: "text-danger", Glyph: AlertGlyph }, }; export function Alert({ tone = "info", title, children, onDismiss, className, }: { tone?: ToastTone; title: string; children?: ReactNode; onDismiss?: () => void; className?: string; }) { const map = TONE_SURFACE[tone]; return (

{/* The status fills are light tints in both themes, so text on them is pinned to Ink rather than to --text-primary, which inverts. */}

{title}

{children && (

{children}

)}

{onDismiss && ( )}

); } /* ------------------------------------------------ alert: composition parts */ /** * The shadcn-shaped alert, for a banner whose body is more than a line of text * — a list of failed rows, a link to the thing that broke. * * `Alert` above takes `title`/`children` and wires the tone glyph and the * `role` for you; prefer it. These parts leave both to the caller, so remember * that a danger alert needs `role="alert"` to be announced. */ export function AlertRoot({ className, tone, variant, ...props }: ComponentProps<"div"> & { tone?: ToastTone; /** shadcn's spelling. `destructive` is the design system's `danger`. */ variant?: "default" | "destructive"; }) { const resolved: ToastTone = tone ?? (variant === "destructive" ? "danger" : "info"); const map = TONE_SURFACE[resolved]; return (

svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3", map.bg, map.border, className, )} {...props} /> ); } export function AlertTitle({ className, ...props }: ComponentProps<"div">) { return (

); } export function AlertDescription({ className, ...props }: ComponentProps<"div">) { return (

); } export function AlertAction({ className, ...props }: ComponentProps<"div">) { return (

); } 24:T1502f,

"use client";

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ComponentProps,
  type ReactNode,
} from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { AlertGlyph, CloseGlyph, InfoGlyph, SuccessGlyph } from "@/registry/tier-2-primitives/glyphs";
import { Button } from "@/registry/tier-3-components/button";

/**
 * Toast.
 *
 * Slides in from the bottom-right over 240ms, leaves on a fade and an 8px fall.
 *
 * A TOAST IS NOT A DIALOG
 *   It doesn't take focus and it doesn't block. That makes it right for "Saved"
 *   and wrong for "Your card was declined" — anything a person MUST act on
 *   belongs in the flow, not in a corner on a timer. If a toast has more than
 *   one action, it should have been an `Alert` in the page.
 *
 * Announcements are live-region-correct: `status` for information (polite,
 * waits for a pause) and `alert` for errors (assertive, interrupts). Using
 * `alert` for a success message means interrupting a screen-reader user to tell
 * them a thing they did worked.
 *
 * Errors do not auto-dismiss. A message that disappears before it can be read
 * is a message that was never delivered.
 */

export type ToastTone = "info" | "success" | "warning" | "danger";

export type Toast = {
  id: string;
  title: string;
  description?: string;
  tone?: ToastTone;
  /** One action, at most. Two means this should have been an Alert. */
  action?: { label: string; onClick: () => void };
  /** ms. `null` means it stays until dismissed. Errors default to `null`. */
  duration?: number | null;
};

type ToastContextValue = {
  toast: (toast: Omit<Toast, "id">) => string;
  dismiss: (id: string) => void;
};

const ToastContext = createContext<ToastContextValue | null>(null);

export function useToast(): ToastContextValue {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error("useToast must be used inside a <ToastProvider>.");
  }
  return context;
}

export function ToastProvider({
  children,
  max = 3,
}: {
  children: ReactNode;
  /** More than three stacked toasts is a queue nobody is reading. */
  max?: number;
}) {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const dismiss = useCallback((id: string) => {
    setToasts((current) => current.filter((toast) => toast.id !== id));
  }, []);

  const toast = useCallback(
    (input: Omit<Toast, "id">) => {
      const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
      setToasts((current) => [...current, { ...input, id }].slice(-max));
      return id;
    },
    [max],
  );

  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);

  return (
    <ToastContext.Provider value={value}>
      {children}
      <ToastViewport toasts={toasts} onDismiss={dismiss} />
    </ToastContext.Provider>
  );
}

function ToastViewport({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
  if (toasts.length === 0) return null;
  return (
    <div
      data-slot="toast-viewport"
      className="pointer-events-none fixed right-4 bottom-4 z-toast flex w-full max-w-[380px] flex-col gap-2.5"
    >
      {toasts.map((toast) => (
        <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
      ))}
    </div>
  );
}

type ToneGlyph = typeof InfoGlyph;

const TONE: Record<ToastTone, { Glyph: ToneGlyph; className: string }> = {
  info: { Glyph: InfoGlyph, className: "text-info" },
  success: { Glyph: SuccessGlyph, className: "text-success" },
  warning: { Glyph: AlertGlyph, className: "text-warning" },
  danger: { Glyph: AlertGlyph, className: "text-danger" },
};

function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
  const tone = toast.tone ?? "info";
  // Errors stay. Everything else clears itself after four seconds.
  const duration = toast.duration === undefined ? (tone === "danger" ? null : 4000) : toast.duration;

  useEffect(() => {
    if (duration === null) return;
    const timer = setTimeout(() => onDismiss(toast.id), duration);
    return () => clearTimeout(timer);
  }, [duration, onDismiss, toast.id]);

  const { Glyph, className } = TONE[tone];

  return (
    <div
      role={tone === "danger" ? "alert" : "status"}
      aria-live={tone === "danger" ? "assertive" : "polite"}
      className={cn(
        "pointer-events-auto flex items-start gap-3 rounded-xl border border-border-subtle",
        "bg-surface-raised p-4 font-ui shadow-e2",
        "animate-woohl-rise",
      )}
    >
      <Glyph size={18} className={cn("mt-px", className)} />
      <div className="min-w-0 flex-1">
        <p className="text-body font-bold text-text-primary">{toast.title}</p>
        {toast.description && (
          <p className="mt-0.5 text-label leading-[1.5] text-text-secondary">
            {toast.description}
          </p>
        )}
        {toast.action && (
          <Button
            variant="link"
            size="sm"
            className="mt-2"
            onClick={() => {
              toast.action?.onClick();
              onDismiss(toast.id);
            }}
          >
            {toast.action.label}
          </Button>
        )}
      </div>
      <Button
        variant="ghost"
        size="icon-sm"
        onClick={() => onDismiss(toast.id)}
        aria-label="Dismiss notification"
        className="-mt-1 -mr-1"
      >
        <CloseGlyph size={16} />
      </Button>
    </div>
  );
}

/**
 * Alert — a toast's in-page counterpart.
 *
 * Use this when the message is part of the page rather than a passing
 * acknowledgement: a declined payment above a checkout form, a delivery delay
 * on an order. It doesn't disappear, and it sits where the problem is.
 */
const TONE_SURFACE: Record<ToastTone, { bg: string; border: string; fg: string; Glyph: ToneGlyph }> = {
  info: { bg: "bg-info-subtle", border: "border-info-border", fg: "text-info", Glyph: InfoGlyph },
  success: { bg: "bg-success-subtle", border: "border-success-border", fg: "text-success", Glyph: SuccessGlyph },
  warning: { bg: "bg-warning-subtle", border: "border-warning-border", fg: "text-warning", Glyph: AlertGlyph },
  danger: { bg: "bg-danger-subtle", border: "border-danger-border", fg: "text-danger", Glyph: AlertGlyph },
};

export function Alert({
  tone = "info",
  title,
  children,
  onDismiss,
  className,
}: {
  tone?: ToastTone;
  title: string;
  children?: ReactNode;
  onDismiss?: () => void;
  className?: string;
}) {
  const map = TONE_SURFACE[tone];

  return (
    <div
      data-slot="alert"
      role={tone === "danger" ? "alert" : "status"}
      className={cn("flex gap-3 rounded-lg border p-4 font-ui", map.bg, map.border, className)}
    >
      <map.Glyph size={18} className={cn("mt-px flex-none", map.fg)} />
      <div className="min-w-0 flex-1">
        {/* The status fills are light tints in both themes, so text on them is
            pinned to Ink rather than to --text-primary, which inverts. */}
        <p className="text-body font-bold text-ink">{title}</p>
        {children && (
          <div className="mt-1 text-label leading-[1.55] text-ink/75">{children}</div>
        )}
      </div>
      {onDismiss && (
        <button
          type="button"
          onClick={onDismiss}
          aria-label="Dismiss"
          className="text-ink/50 transition-opacity hover:text-ink"
        >
          <CloseGlyph size={16} />
        </button>
      )}
    </div>
  );
}

/* ------------------------------------------------ alert: composition parts */

/**
 * The shadcn-shaped alert, for a banner whose body is more than a line of text
 * — a list of failed rows, a link to the thing that broke.
 *
 * `Alert` above takes `title`/`children` and wires the tone glyph and the
 * `role` for you; prefer it. These parts leave both to the caller, so remember
 * that a danger alert needs `role="alert"` to be announced.
 */
export function AlertRoot({
  className,
  tone,
  variant,
  ...props
}: ComponentProps<"div"> & {
  tone?: ToastTone;
  /** shadcn's spelling. `destructive` is the design system's `danger`. */
  variant?: "default" | "destructive";
}) {
  const resolved: ToastTone = tone ?? (variant === "destructive" ? "danger" : "info");
  const map = TONE_SURFACE[resolved];
  return (
    <div
      data-slot="alert"
      role={resolved === "danger" ? "alert" : "status"}
      className={cn(
        "grid grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border p-4 font-ui",
        "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3",
        map.bg,
        map.border,
        className,
      )}
      {...props}
    />
  );
}

export function AlertTitle({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn("col-start-2 text-body font-bold text-ink", className)}
      {...props}
    />
  );
}

export function AlertDescription({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn("col-start-2 text-label leading-[1.55] text-ink/75", className)}
      {...props}
    />
  );
}

export function AlertAction({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-action"
      className={cn("col-start-2 mt-2 flex items-center gap-2", className)}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Toast & Alert"}],["$","$L1f",null,{"children":"The transient queue and the inline banner, sharing one tone scale."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"toast"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/toast","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/button","@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]