@verdify/ui 0.1.0

package/dist/components/toast/index.js

@@ -0,0 +1,43 @@
+import {
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastIcon,
+  ToastContent,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose
+} from "./toast";
+import {
+  toastViewportClass,
+  toastVariants,
+  toastIconVariants,
+  toastContentClass,
+  toastTitleClass,
+  toastDescriptionClass,
+  toastActionClass,
+  toastCloseClass,
+  toastCloseGlyphClass
+} from "./toast.variants";
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastIcon,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  toastActionClass,
+  toastCloseClass,
+  toastCloseGlyphClass,
+  toastContentClass,
+  toastDescriptionClass,
+  toastIconVariants,
+  toastTitleClass,
+  toastVariants,
+  toastViewportClass
+};
+//# sourceMappingURL=index.js.map

package/dist/components/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toast/index.ts"],"sourcesContent":["export {\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastIcon,\n  ToastContent,\n  ToastTitle,\n  ToastDescription,\n  ToastAction,\n  ToastClose,\n  type ToastProviderProps,\n  type ToastViewportProps,\n  type ToastProps,\n  type ToastIconProps,\n  type ToastContentProps,\n  type ToastTitleProps,\n  type ToastDescriptionProps,\n  type ToastActionProps,\n  type ToastCloseProps,\n} from \"./toast\";\nexport {\n  toastViewportClass,\n  toastVariants,\n  toastIconVariants,\n  toastContentClass,\n  toastTitleClass,\n  toastDescriptionClass,\n  toastActionClass,\n  toastCloseClass,\n  toastCloseGlyphClass,\n  type ToastVariantProps,\n} from \"./toast.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAUK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import { type ToastVariantProps } from "./toast.variants";
+type ToastVariant = NonNullable<ToastVariantProps["variant"]>;
+export interface ToastProviderProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Provider> {
+}
+/**
+ * The queue + announcement manager for a surface's toasts (spec §2 region). Wraps the Radix Toast
+ * provider — a stateful primitive owning the stack, the auto-dismiss timers, and the swipe context,
+ * so this file is `'use client'`. One per surface. `swipeDirection="right"` makes a toast
+ * swipe-dismissable toward the inline-end edge (spec §4 swipe dismissal); `label` names the region
+ * landmark for screen readers (spec §7). The region owns the announcement behavior so individual
+ * toasts do not each fight to be read (spec §2).
+ */
+export declare function ToastProvider({ swipeDirection, label, children, ...props }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface ToastViewportProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {
+}
+/**
+ * The corner-anchored live region that holds the stack of toasts (spec §2 region, §7). Rendered as
+ * an `<ol>` with `role="region"` (Radix) — the landmark a screen-reader or keyboard user jumps to.
+ *
+ * The keyboard "jump to notifications" key is pinned to `F6` to honor the frozen spec §6, overriding
+ * Radix's default `F8` (the hotkey is configurable, so this is a setting, not a behavior deviation).
+ * On the jump, focus moves into the region; pressing it again returns focus to where you were
+ * (Radix). The region sits on the dedicated `--z-index-toast` layer above page content, NOT the
+ * modal layer the overlays use — a toast floats over content without the inert/scrim modality of a
+ * Dialog.
+ */
+export declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
+export interface ToastProps extends Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, "type">, ToastVariantProps {
+    /**
+     * The type the toast reports (spec §3): `verified` (an action succeeded or a claim is now proven —
+     * the in-product Verified Green status, NEVER the brand), `signal` (default — a neutral,
+     * informational result that needs no action), `caution` (a non-blocking warning completed with a
+     * caveat), or `critical` (a failure or error). The variant sets the border accent and the paired
+     * icon, and drives the announcement politeness; it never sets the brand color (brand != state).
+     */
+    variant?: ToastVariant;
+}
+/**
+ * Toast is a brief, transient message that floats over the page to confirm an action or report an
+ * async result without taking focus or blocking the page (spec §1). Use it for a passing
+ * acknowledgement — "Profile saved", "Link copied"; use Alert for a message that must persist in the
+ * layout, and a Dialog for a choice that must be answered before continuing.
+ *
+ * It is a feedback surface, not the brand: its color comes from the status it reports, never from
+ * Sovereign Violet — the brand violet is never a status, and a `verified` toast is the green status,
+ * never a branded moment (spec §3/§8, brand != state). The status is carried by the border color AND
+ * the per-variant icon AND the message text, so it survives for a reader who cannot perceive color
+ * (WCAG 1.4.1). Wraps the Radix Toast primitive (a stateful primitive — portal, queue, swipe, and
+ * the offscreen announce live region), so this file is `'use client'`.
+ *
+ * Severity drives announcement politeness (spec §7/§8): `critical` maps to Radix `type="foreground"`
+ * (the announce region is `aria-live="assertive"` — a failure must not be missed), while `verified`,
+ * `signal`, and `caution` map to `type="background"` (`aria-live="polite"` — a routine result waits
+ * for a pause and never interrupts). The toast does NOT take focus on appearance; the page's focus
+ * stays put, and the result is announced through the offscreen live region (WCAG 4.1.3).
+ *
+ * RADIX-VS-SPEC DEVIATION (skill step E): spec §7 names `role="alert"` for the `critical` type. The
+ * Radix Toast renders a single offscreen announce node as `role="status"` and switches only its
+ * `aria-live` by the toast `type` — so `critical` announces via `role="status"` + `aria-live="assertive"`
+ * rather than `role="alert"`. Both are APG-conformant (an alert role IS an implicit assertive live
+ * region; an explicit `aria-live="assertive"` on a status region produces the same announcement),
+ * and hand-rolling the announce node to emit `role="alert"` would mean abandoning the Radix queue and
+ * focus model. We ACCEPT the Radix behavior and PIN it with a dedicated test asserting the assertive
+ * politeness on `critical`; the spec note is to be amended.
+ *
+ * RADIX-VS-SPEC DEVIATION (skill step E): spec §7 also names `aria-atomic="true"` on the region "so
+ * the whole message is read, not a fragment". Radix does NOT set `aria-atomic` on its `role="status"`
+ * announce node; instead it CLONES the toast subtree's text (title + description, action `altText`)
+ * into the offscreen announce node as a single batch of children injected in one render — so the
+ * whole message is composed and announced as one unit, which IS the intent `aria-atomic` encodes (an
+ * atomic announcement is only needed to coalesce piecemeal updates to a persistent region; Radix's
+ * announce node is populated once, not mutated fragment-by-fragment). The live region is that
+ * offscreen announce node, not the viewport `<ol>` landmark, and Radix does not forward arbitrary
+ * `aria-*` onto it — hand-rolling the announce node to carry `aria-atomic` would mean abandoning the
+ * Radix queue + announce model. We ACCEPT the Radix behavior and PIN it with a dedicated test
+ * documenting that the announce-clone (not a literal `aria-atomic`) satisfies §7's intent; the spec
+ * note is to be amended.
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
+export interface ToastIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+/**
+ * The optional type icon that reinforces the status (spec §2). It pairs with the variant color and
+ * the message text so the status is never the only carrier of meaning, since status is not conveyed
+ * by color or icon alone (WCAG 1.4.1). Decorative — `aria-hidden`, so it is not announced twice; the
+ * message text carries the status if the icon is dropped. Being decorative, it takes the BRIGHT
+ * variant accent color (tokens 0.6.0) via the ToastContext, at the md icon role.
+ */
+export declare const ToastIcon: React.ForwardRefExoticComponent<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ToastContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The stacking message column (spec §2): wraps the message and any secondary line so they stack
+ * vertically beside the leading icon. `min-w-0` lets long message text wrap instead of overflowing
+ * the row, and `flex-1` lets it take the available width before the action and dismiss controls.
+ */
+export declare const ToastContent: React.ForwardRefExoticComponent<ToastContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ToastTitleProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title> {
+}
+/**
+ * The required message (spec §2): a plain statement ending in a period; for a failure it names what
+ * failed and what to do next and never blames you. It IS the toast's accessible name, wired to the
+ * toast via `aria-labelledby` by Radix (spec §7). The body type role in primary text.
+ */
+export declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
+export interface ToastDescriptionProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description> {
+}
+/**
+ * The optional secondary message line under the message (spec §2). Associated with the toast for
+ * screen readers via `aria-describedby` (Radix). The body type role in secondary text (spec §5).
+ */
+export declare const ToastDescription: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+export interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> {
+}
+/**
+ * The optional inline action (spec §2/§6): at most one, phrased as a verb ("Undo", "View"). A real
+ * native `<button>` (Radix ToastAction) so it is named, focusable, and operable on Enter / Space; it
+ * dismisses the toast on activation. A toast is not a place for a primary decision — if a choice is
+ * required, reach for a Dialog instead (spec §2/§8). Requires `altText`: a short description for
+ * screen-reader users who will not navigate to the button quickly (Radix). A neutral ghost surface
+ * at the label type role so it never competes with the status accent.
+ */
+export declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ToastCloseProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close> {
+    /** The accessible name for the close control (spec §7). Defaults to `"Dismiss"`. */
+    "aria-label"?: string;
+}
+/**
+ * The optional dismiss control (spec §2/§6/§7): an explicit close for toasts that do not auto-dismiss
+ * and for pointer users clearing one early. A real native `<button>` (Radix ToastClose) so it is a
+ * focus stop and activates on Enter / Space for free; closing flows through the toast's
+ * `onOpenChange(false)` and returns focus to where it was (Radix). It has an accessible name (default
+ * "Dismiss") and a decorative `aria-hidden` glyph (the placeholder is never the name). A neutral ghost
+ * icon-button with the square target-size floor and the persistent focus ring.
+ */
+export declare const ToastClose: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAUL,KAAK,iBAAiB,EACvB,MAAM,kBAAkB,CAAC;AAE1B,KAAK,YAAY,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;AAO9D,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,QAAQ,CAAC;CAAG;AAE3E;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,cAAwB,EACxB,KAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAMpB;AAED,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,QAAQ,CAAC;CAAG;AAE3E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,6FAYxB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,EAC9E,iBAAiB;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,KAAK,kFAgBhB,CAAC;AAEH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,wFAYrB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElF;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FAIxB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC;CAAG;AAExE;;;;GAIG;AACH,eAAO,MAAM,UAAU,wFAKrB,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC;CAAG;AAE9E;;;GAGG;AACH,eAAO,MAAM,gBAAgB,8FAW3B,CAAC;AAEH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC;CAAG;AAEzE;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,4FAOtB,CAAC;AAqBH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC;IACnE,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,2FAiBrB,CAAC"}

package/dist/components/toast/toast.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  toastViewportClass,
+  toastVariants,
+  toastIconVariants,
+  toastContentClass,
+  toastTitleClass,
+  toastDescriptionClass,
+  toastActionClass,
+  toastCloseClass,
+  toastCloseGlyphClass
+} from "./toast.variants";
+const ToastContext = React.createContext({ variant: "signal" });
+function ToastProvider({
+  swipeDirection = "right",
+  label = "Notifications",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ToastPrimitive.Provider, { swipeDirection, label, ...props, children });
+}
+const ToastViewport = React.forwardRef(function ToastViewport2({ className, hotkey = ["F6"], ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Viewport,
+    {
+      ref,
+      hotkey,
+      className: cn(toastViewportClass, className),
+      ...props
+    }
+  );
+});
+const Toast = React.forwardRef(function Toast2({ className, variant = "signal", ...props }, ref) {
+  const type = variant === "critical" ? "foreground" : "background";
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
+    ToastPrimitive.Root,
+    {
+      ref,
+      type,
+      className: cn(toastVariants({ variant }), className),
+      ...props
+    }
+  ) });
+});
+const ToastIcon = React.forwardRef(
+  function ToastIcon2({ className, ...props }, ref) {
+    const { variant } = React.useContext(ToastContext);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(toastIconVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+const ToastContent = React.forwardRef(
+  function ToastContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(toastContentClass, className), ...props });
+  }
+);
+const ToastTitle = React.forwardRef(function ToastTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(ToastPrimitive.Title, { ref, className: cn(toastTitleClass, className), ...props });
+});
+const ToastDescription = React.forwardRef(function ToastDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Description,
+    {
+      ref,
+      className: cn(toastDescriptionClass, className),
+      ...props
+    }
+  );
+});
+const ToastAction = React.forwardRef(function ToastAction2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(ToastPrimitive.Action, { ref, className: cn(toastActionClass, className), ...props });
+});
+function CloseGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "toast-close-glyph",
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      className: toastCloseGlyphClass,
+      children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+    }
+  );
+}
+const ToastClose = React.forwardRef(function ToastClose2({ className, children, "aria-label": ariaLabel = "Dismiss", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Close,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: cn(toastCloseClass, className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(CloseGlyph, {})
+    }
+  );
+});
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastIcon,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Toast as ToastPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  toastViewportClass,\n  toastVariants,\n  toastIconVariants,\n  toastContentClass,\n  toastTitleClass,\n  toastDescriptionClass,\n  toastActionClass,\n  toastCloseClass,\n  toastCloseGlyphClass,\n  type ToastVariantProps,\n} from \"./toast.variants\";\n\ntype ToastVariant = NonNullable<ToastVariantProps[\"variant\"]>;\n\n// The variant set on the Toast root travels to the ToastIcon via context (the Dialog/Sheet/Tabs/\n// Accordion/Alert precedent), so the icon takes the matching status fg without the caller repeating\n// `variant` on ToastIcon.\nconst ToastContext = React.createContext<{ variant: ToastVariant }>({ variant: \"signal\" });\n\nexport interface ToastProviderProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Provider> {}\n\n/**\n * The queue + announcement manager for a surface's toasts (spec §2 region). Wraps the Radix Toast\n * provider — a stateful primitive owning the stack, the auto-dismiss timers, and the swipe context,\n * so this file is `'use client'`. One per surface. `swipeDirection=\"right\"` makes a toast\n * swipe-dismissable toward the inline-end edge (spec §4 swipe dismissal); `label` names the region\n * landmark for screen readers (spec §7). The region owns the announcement behavior so individual\n * toasts do not each fight to be read (spec §2).\n */\nexport function ToastProvider({\n  swipeDirection = \"right\",\n  label = \"Notifications\",\n  children,\n  ...props\n}: ToastProviderProps) {\n  return (\n    <ToastPrimitive.Provider swipeDirection={swipeDirection} label={label} {...props}>\n      {children}\n    </ToastPrimitive.Provider>\n  );\n}\n\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\n/**\n * The corner-anchored live region that holds the stack of toasts (spec §2 region, §7). Rendered as\n * an `<ol>` with `role=\"region\"` (Radix) — the landmark a screen-reader or keyboard user jumps to.\n *\n * The keyboard \"jump to notifications\" key is pinned to `F6` to honor the frozen spec §6, overriding\n * Radix's default `F8` (the hotkey is configurable, so this is a setting, not a behavior deviation).\n * On the jump, focus moves into the region; pressing it again returns focus to where you were\n * (Radix). The region sits on the dedicated `--z-index-toast` layer above page content, NOT the\n * modal layer the overlays use — a toast floats over content without the inert/scrim modality of a\n * Dialog.\n */\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(function ToastViewport({ className, hotkey = [\"F6\"], ...props }, ref) {\n  return (\n    <ToastPrimitive.Viewport\n      ref={ref}\n      hotkey={hotkey}\n      className={cn(toastViewportClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface ToastProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">,\n    ToastVariantProps {\n  /**\n   * The type the toast reports (spec §3): `verified` (an action succeeded or a claim is now proven —\n   * the in-product Verified Green status, NEVER the brand), `signal` (default — a neutral,\n   * informational result that needs no action), `caution` (a non-blocking warning completed with a\n   * caveat), or `critical` (a failure or error). The variant sets the border accent and the paired\n   * icon, and drives the announcement politeness; it never sets the brand color (brand != state).\n   */\n  variant?: ToastVariant;\n}\n\n/**\n * Toast is a brief, transient message that floats over the page to confirm an action or report an\n * async result without taking focus or blocking the page (spec §1). Use it for a passing\n * acknowledgement — \"Profile saved\", \"Link copied\"; use Alert for a message that must persist in the\n * layout, and a Dialog for a choice that must be answered before continuing.\n *\n * It is a feedback surface, not the brand: its color comes from the status it reports, never from\n * Sovereign Violet — the brand violet is never a status, and a `verified` toast is the green status,\n * never a branded moment (spec §3/§8, brand != state). The status is carried by the border color AND\n * the per-variant icon AND the message text, so it survives for a reader who cannot perceive color\n * (WCAG 1.4.1). Wraps the Radix Toast primitive (a stateful primitive — portal, queue, swipe, and\n * the offscreen announce live region), so this file is `'use client'`.\n *\n * Severity drives announcement politeness (spec §7/§8): `critical` maps to Radix `type=\"foreground\"`\n * (the announce region is `aria-live=\"assertive\"` — a failure must not be missed), while `verified`,\n * `signal`, and `caution` map to `type=\"background\"` (`aria-live=\"polite\"` — a routine result waits\n * for a pause and never interrupts). The toast does NOT take focus on appearance; the page's focus\n * stays put, and the result is announced through the offscreen live region (WCAG 4.1.3).\n *\n * RADIX-VS-SPEC DEVIATION (skill step E): spec §7 names `role=\"alert\"` for the `critical` type. The\n * Radix Toast renders a single offscreen announce node as `role=\"status\"` and switches only its\n * `aria-live` by the toast `type` — so `critical` announces via `role=\"status\"` + `aria-live=\"assertive\"`\n * rather than `role=\"alert\"`. Both are APG-conformant (an alert role IS an implicit assertive live\n * region; an explicit `aria-live=\"assertive\"` on a status region produces the same announcement),\n * and hand-rolling the announce node to emit `role=\"alert\"` would mean abandoning the Radix queue and\n * focus model. We ACCEPT the Radix behavior and PIN it with a dedicated test asserting the assertive\n * politeness on `critical`; the spec note is to be amended.\n *\n * RADIX-VS-SPEC DEVIATION (skill step E): spec §7 also names `aria-atomic=\"true\"` on the region \"so\n * the whole message is read, not a fragment\". Radix does NOT set `aria-atomic` on its `role=\"status\"`\n * announce node; instead it CLONES the toast subtree's text (title + description, action `altText`)\n * into the offscreen announce node as a single batch of children injected in one render — so the\n * whole message is composed and announced as one unit, which IS the intent `aria-atomic` encodes (an\n * atomic announcement is only needed to coalesce piecemeal updates to a persistent region; Radix's\n * announce node is populated once, not mutated fragment-by-fragment). The live region is that\n * offscreen announce node, not the viewport `<ol>` landmark, and Radix does not forward arbitrary\n * `aria-*` onto it — hand-rolling the announce node to carry `aria-atomic` would mean abandoning the\n * Radix queue + announce model. We ACCEPT the Radix behavior and PIN it with a dedicated test\n * documenting that the announce-clone (not a literal `aria-atomic`) satisfies §7's intent; the spec\n * note is to be amended.\n */\nexport const Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Root>,\n  ToastProps\n>(function Toast({ className, variant = \"signal\", ...props }, ref) {\n  // severity -> Radix announce politeness: critical interrupts (assertive), the rest wait (polite)\n  const type = variant === \"critical\" ? \"foreground\" : \"background\";\n  return (\n    <ToastContext.Provider value={{ variant }}>\n      <ToastPrimitive.Root\n        ref={ref}\n        type={type}\n        className={cn(toastVariants({ variant }), className)}\n        {...props}\n      />\n    </ToastContext.Provider>\n  );\n});\n\nexport interface ToastIconProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/**\n * The optional type icon that reinforces the status (spec §2). It pairs with the variant color and\n * the message text so the status is never the only carrier of meaning, since status is not conveyed\n * by color or icon alone (WCAG 1.4.1). Decorative — `aria-hidden`, so it is not announced twice; the\n * message text carries the status if the icon is dropped. Being decorative, it takes the BRIGHT\n * variant accent color (tokens 0.6.0) via the ToastContext, at the md icon role.\n */\nexport const ToastIcon = React.forwardRef<HTMLSpanElement, ToastIconProps>(\n  function ToastIcon({ className, ...props }, ref) {\n    const { variant } = React.useContext(ToastContext);\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(toastIconVariants({ variant }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface ToastContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * The stacking message column (spec §2): wraps the message and any secondary line so they stack\n * vertically beside the leading icon. `min-w-0` lets long message text wrap instead of overflowing\n * the row, and `flex-1` lets it take the available width before the action and dismiss controls.\n */\nexport const ToastContent = React.forwardRef<HTMLDivElement, ToastContentProps>(\n  function ToastContent({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(toastContentClass, className)} {...props} />;\n  },\n);\n\nexport interface ToastTitleProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title> {}\n\n/**\n * The required message (spec §2): a plain statement ending in a period; for a failure it names what\n * failed and what to do next and never blames you. It IS the toast's accessible name, wired to the\n * toast via `aria-labelledby` by Radix (spec §7). The body type role in primary text.\n */\nexport const ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Title>,\n  ToastTitleProps\n>(function ToastTitle({ className, ...props }, ref) {\n  return <ToastPrimitive.Title ref={ref} className={cn(toastTitleClass, className)} {...props} />;\n});\n\nexport interface ToastDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description> {}\n\n/**\n * The optional secondary message line under the message (spec §2). Associated with the toast for\n * screen readers via `aria-describedby` (Radix). The body type role in secondary text (spec §5).\n */\nexport const ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Description>,\n  ToastDescriptionProps\n>(function ToastDescription({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Description\n      ref={ref}\n      className={cn(toastDescriptionClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface ToastActionProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> {}\n\n/**\n * The optional inline action (spec §2/§6): at most one, phrased as a verb (\"Undo\", \"View\"). A real\n * native `<button>` (Radix ToastAction) so it is named, focusable, and operable on Enter / Space; it\n * dismisses the toast on activation. A toast is not a place for a primary decision — if a choice is\n * required, reach for a Dialog instead (spec §2/§8). Requires `altText`: a short description for\n * screen-reader users who will not navigate to the button quickly (Radix). A neutral ghost surface\n * at the label type role so it never competes with the status accent.\n */\nexport const ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Action>,\n  ToastActionProps\n>(function ToastAction({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Action ref={ref} className={cn(toastActionClass, className)} {...props} />\n  );\n});\n\n// A neutral X glyph at the md icon role, drawn with currentColor so it inherits the close button's\n// ghost fg. Decorative (aria-hidden) — the button carries the accessible name (spec §7).\nfunction CloseGlyph() {\n  return (\n    <svg\n      data-testid=\"toast-close-glyph\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      className={toastCloseGlyphClass}\n    >\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nexport interface ToastCloseProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close> {\n  /** The accessible name for the close control (spec §7). Defaults to `\"Dismiss\"`. */\n  \"aria-label\"?: string;\n}\n\n/**\n * The optional dismiss control (spec §2/§6/§7): an explicit close for toasts that do not auto-dismiss\n * and for pointer users clearing one early. A real native `<button>` (Radix ToastClose) so it is a\n * focus stop and activates on Enter / Space for free; closing flows through the toast's\n * `onOpenChange(false)` and returns focus to where it was (Radix). It has an accessible name (default\n * \"Dismiss\") and a decorative `aria-hidden` glyph (the placeholder is never the name). A neutral ghost\n * icon-button with the square target-size floor and the persistent focus ring.\n */\nexport const ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Close>,\n  ToastCloseProps\n>(function ToastClose(\n  { className, children, \"aria-label\": ariaLabel = \"Dismiss\", ...props },\n  ref,\n) {\n  return (\n    <ToastPrimitive.Close\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cn(toastCloseClass, className)}\n      {...props}\n    >\n      {children ?? <CloseGlyph />}\n    </ToastPrimitive.Close>\n  );\n});\n"],"mappings":";AA2CI;AAzCJ,YAAY,WAAW;AACvB,SAAS,SAAS,sBAAsB;AACxC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAOP,MAAM,eAAe,MAAM,cAAyC,EAAE,SAAS,SAAS,CAAC;AAalF,SAAS,cAAc;AAAA,EAC5B,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,SACE,oBAAC,eAAe,UAAf,EAAwB,gBAAgC,OAAe,GAAG,OACxE,UACH;AAEJ;AAgBO,MAAM,gBAAgB,MAAM,WAGjC,SAASA,eAAc,EAAE,WAAW,SAAS,CAAC,IAAI,GAAG,GAAG,MAAM,GAAG,KAAK;AACtE,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAwDM,MAAM,QAAQ,MAAM,WAGzB,SAASC,OAAM,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,KAAK;AAEjE,QAAM,OAAO,YAAY,aAAa,eAAe;AACrD,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,QAAQ,GACtC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AAWM,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/C,UAAM,EAAE,QAAQ,IAAI,MAAM,WAAW,YAAY;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,QACtD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AASO,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO;AAAA,EAChF;AACF;AAUO,MAAM,aAAa,MAAM,WAG9B,SAASC,YAAW,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,SAAO,oBAAC,eAAe,OAAf,EAAqB,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,OAAO;AAC/F,CAAC;AASM,MAAM,mBAAmB,MAAM,WAGpC,SAASC,kBAAiB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACxD,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC;AAAA,MACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC7C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAaM,MAAM,cAAc,MAAM,WAG/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,SACE,oBAAC,eAAe,QAAf,EAAsB,KAAU,WAAW,GAAG,kBAAkB,SAAS,GAAI,GAAG,OAAO;AAE5F,CAAC;AAID,SAAS,aAAa;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,WAAW;AAAA,MAEX,8BAAC,UAAK,GAAE,wBAAuB;AAAA;AAAA,EACjC;AAEJ;AAgBO,MAAM,aAAa,MAAM,WAG9B,SAASC,YACT,EAAE,WAAW,UAAU,cAAc,YAAY,WAAW,GAAG,MAAM,GACrE,KACA;AACA,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA,MAEH,sBAAY,oBAAC,cAAW;AAAA;AAAA,EAC3B;AAEJ,CAAC;","names":["ToastViewport","Toast","ToastIcon","ToastContent","ToastTitle","ToastDescription","ToastAction","ToastClose"]}

package/dist/components/toast/toast.variants.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const toastViewportClass: string;
+export declare const toastVariants: (props?: ({
+    variant?: "verified" | "signal" | "caution" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const toastIconVariants: (props?: ({
+    variant?: "verified" | "signal" | "caution" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const toastContentClass = "flex min-w-0 flex-1 flex-col gap-(--space-2)";
+export declare const toastTitleClass = "text-body text-text-primary";
+export declare const toastDescriptionClass = "text-body text-text-secondary";
+export declare const toastActionClass: string;
+export declare const toastCloseClass: string;
+export declare const toastCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export type ToastVariantProps = VariantProps<typeof toastVariants>;
+//# sourceMappingURL=toast.variants.d.ts.map

package/dist/components/toast/toast.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.variants.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAelE,eAAO,MAAM,kBAAkB,QAGF,CAAC;AAkB9B,eAAO,MAAM,aAAa;;8EA0CzB,CAAC;AAQF,eAAO,MAAM,iBAAiB;;8EAa7B,CAAC;AAKF,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAKhF,eAAO,MAAM,eAAe,gCAAgC,CAAC;AAK7D,eAAO,MAAM,qBAAqB,kCAAkC,CAAC;AAWrE,eAAO,MAAM,gBAAgB,QAOoE,CAAC;AASlG,eAAO,MAAM,eAAe,QAOqE,CAAC;AAIlG,eAAO,MAAM,oBAAoB,0CAA0C,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/toast/toast.variants.js

@@ -0,0 +1,77 @@
+import { cva } from "class-variance-authority";
+const toastViewportClass = "fixed bottom-0 end-0 z-(--z-index-toast) flex max-h-screen w-full flex-col gap-(--space-3) p-(--space-4) sm:max-w-(--container-sm)";
+const toastVariants = cva(
+  [
+    // layout: a row holding the leading type icon, the stacked message column, then the inline
+    // action and the dismiss control; logical-property gap so it mirrors under dir="rtl" (G-U6)
+    "flex items-start gap-(--space-3)",
+    // the raised surface: neutral fill, neutral outer-surface fallback, internal padding off the
+    // edge, the md corner radius, the lg elevation shadow above the page content (spec §5)
+    "bg-surface-raised rounded-(--radius-md) border p-(--space-3) shadow-(--shadow-lg)",
+    // logical-property text alignment so the toast mirrors under dir="rtl" (G-U6)
+    "text-start",
+    // enter/exit slide-and-fade: the BASE duration on AMBIENT easing (spec §4/§5), collapsing to
+    // the instant endpoint under reduced motion. NEVER the verified-check theatre (G-U3).
+    "transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-ambient)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // enter/exit ride Radix's data-state — attribute-selector variants, not arbitrary values
+    "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+    // swipe-to-dismiss rides Radix's data-swipe — the toast follows the pointer on move, snaps back
+    // on cancel, and fades out on end (attribute-selector variants, not arbitrary values, spec §4)
+    "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
+    "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform]",
+    "data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]",
+    "data-[swipe=end]:opacity-0"
+  ],
+  {
+    variants: {
+      // STRUCTURAL axis = spec §3: the type the toast reports. Each maps to the matching
+      // --color-status-*-border accent on the neutral surface (spec §3/§5).
+      variant: {
+        // an action succeeded / a claim is now proven — the in-product Verified Green status,
+        // NEVER the brand (spec §3/§8)
+        verified: "border-status-verified-border",
+        // a neutral, informational result that needs no action (spec §3)
+        signal: "border-status-signal-border",
+        // a non-blocking warning — completed with a caveat worth seeing (spec §3)
+        caution: "border-status-caution-border",
+        // a failure or error — the highest-urgency type (spec §3)
+        critical: "border-status-critical-border"
+      }
+    },
+    // the lowest-urgency status is the default; a louder type is spent only when warranted (spec §8)
+    defaultVariants: { variant: "signal" }
+  }
+);
+const toastIconVariants = cva(
+  "inline-flex shrink-0 h-(--size-icon-md) w-(--size-icon-md)",
+  {
+    variants: {
+      variant: {
+        verified: "text-status-verified-accent",
+        signal: "text-status-signal-accent",
+        caution: "text-status-caution-accent",
+        critical: "text-status-critical-accent"
+      }
+    },
+    defaultVariants: { variant: "signal" }
+  }
+);
+const toastContentClass = "flex min-w-0 flex-1 flex-col gap-(--space-2)";
+const toastTitleClass = "text-body text-text-primary";
+const toastDescriptionClass = "text-body text-text-secondary";
+const toastActionClass = "inline-flex shrink-0 items-center justify-center rounded-(--radius-md) px-(--space-3) text-label font-medium text-action-ghost-fg hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const toastCloseClass = "inline-flex shrink-0 items-center justify-center rounded-(--radius-md) text-action-ghost-fg hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) min-w-(--size-target-mobile) sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const toastCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export {
+  toastActionClass,
+  toastCloseClass,
+  toastCloseGlyphClass,
+  toastContentClass,
+  toastDescriptionClass,
+  toastIconVariants,
+  toastTitleClass,
+  toastVariants,
+  toastViewportClass
+};
+//# sourceMappingURL=toast.variants.js.map

package/dist/components/toast/toast.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toast/toast.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Toast is a brief, transient feedback surface that floats over the page to confirm an action or\n// report an async result without taking focus (spec §1). It is NOT the brand: its type is carried\n// by the status it reports, never by Sovereign Violet, so this file binds nothing from the\n// --color-action-primary-* tier as a status (brand != state, G-U2). The only action-tier utility\n// used is the NEUTRAL ghost treatment on the inline action and dismiss controls — that is the\n// control's own treatment, not the toast's status (the brand != state gate scopes status keys to\n// the toast variant axis only). This is the ONLY token-binding site (skill §5 hard rule).\n\n// The viewport: the corner-anchored live region that holds the stack of toasts (spec §2 region). It\n// is the fixed <ol> on the toast z-layer (spec §5 --z-index-toast — the dedicated layer above page\n// content, distinct from the modal layer the overlays use). Logical-property anchoring (G-U6): the\n// stack sits at the block-end inline-end corner and flows as a column with the stack gap. It is a\n// landmark region (Radix role=region), decorative of fill — neutral, no status color.\nexport const toastViewportClass =\n  \"fixed bottom-0 end-0 z-(--z-index-toast) \" +\n  \"flex max-h-screen w-full flex-col gap-(--space-3) p-(--space-4) \" +\n  \"sm:max-w-(--container-sm)\";\n\n// The toast: one message in the stack (spec §2 toast). A NEUTRAL raised surface (spec §3/§5:\n// neutrals carry the body) with the lg elevation shadow above the page, the md corner radius, and a\n// 1px border whose COLOR is the single status accent — the status is an edge + the icon, never a\n// saturated fill that floods the surface (spec §3/§5, restraint over volume). The status border is\n// the ONLY status binding on the container; bg/text stay neutral.\n//\n// Enter/exit is a plain slide-and-fade on the BASE duration + AMBIENT easing (spec §4/§5), riding\n// Radix's data-state and data-swipe attributes (attribute-selector variants, not arbitrary values).\n// It collapses to the instant endpoint under reduced motion. A toast NEVER uses the 350ms\n// VerifiedBadge-only theatre duration — that motion is the one piece of theatre in the system and is\n// reserved for the verified moment (G-U3 motion-theatre gate). Even a `verified` toast slides in on\n// the base duration.\n//\n// variant = the type the toast reports (spec §3): the four statuses map one-to-one to the\n// --color-status-*-border accent; there is no neutral or brand-colored toast. NONE binds\n// --color-action-* as a status (brand != state, spec §3/§8).\nexport const toastVariants = cva(\n  [\n    // layout: a row holding the leading type icon, the stacked message column, then the inline\n    // action and the dismiss control; logical-property gap so it mirrors under dir=\"rtl\" (G-U6)\n    \"flex items-start gap-(--space-3)\",\n    // the raised surface: neutral fill, neutral outer-surface fallback, internal padding off the\n    // edge, the md corner radius, the lg elevation shadow above the page content (spec §5)\n    \"bg-surface-raised rounded-(--radius-md) border p-(--space-3) shadow-(--shadow-lg)\",\n    // logical-property text alignment so the toast mirrors under dir=\"rtl\" (G-U6)\n    \"text-start\",\n    // enter/exit slide-and-fade: the BASE duration on AMBIENT easing (spec §4/§5), collapsing to\n    // the instant endpoint under reduced motion. NEVER the verified-check theatre (G-U3).\n    \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-ambient)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // enter/exit ride Radix's data-state — attribute-selector variants, not arbitrary values\n    \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\",\n    // swipe-to-dismiss rides Radix's data-swipe — the toast follows the pointer on move, snaps back\n    // on cancel, and fades out on end (attribute-selector variants, not arbitrary values, spec §4)\n    \"data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform]\",\n    \"data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]\",\n    \"data-[swipe=end]:opacity-0\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: the type the toast reports. Each maps to the matching\n      // --color-status-*-border accent on the neutral surface (spec §3/§5).\n      variant: {\n        // an action succeeded / a claim is now proven — the in-product Verified Green status,\n        // NEVER the brand (spec §3/§8)\n        verified: \"border-status-verified-border\",\n        // a neutral, informational result that needs no action (spec §3)\n        signal: \"border-status-signal-border\",\n        // a non-blocking warning — completed with a caveat worth seeing (spec §3)\n        caution: \"border-status-caution-border\",\n        // a failure or error — the highest-urgency type (spec §3)\n        critical: \"border-status-critical-border\",\n      },\n    },\n    // the lowest-urgency status is the default; a louder type is spent only when warranted (spec §8)\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The type icon (spec §2/§5): a type icon reinforcing the status at the md icon role. It pairs\n// with the message text so status is never carried by color or icon alone (WCAG 1.4.1, spec §2).\n// Because the icon is DECORATIVE (aria-hidden in tsx) and the message text carries the status\n// meaning, it is exempt from the AA text floor and takes the BRIGHT variant ACCENT via the\n// matching --color-status-*-accent (tokens 0.6.0) — the vivid status color reads as an emphasis\n// mark, while the readable message keeps its AA text token.\nexport const toastIconVariants = cva(\n  \"inline-flex shrink-0 h-(--size-icon-md) w-(--size-icon-md)\",\n  {\n    variants: {\n      variant: {\n        verified: \"text-status-verified-accent\",\n        signal: \"text-status-signal-accent\",\n        caution: \"text-status-caution-accent\",\n        critical: \"text-status-critical-accent\",\n      },\n    },\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The stacked message column (spec §2): the primary message and an optional secondary line stack\n// vertically beside the leading icon. min-w-0 lets long message text wrap instead of overflowing the\n// row, and flex-1 lets it take the available width before the action/dismiss controls.\nexport const toastContentClass = \"flex min-w-0 flex-1 flex-col gap-(--space-2)\";\n\n// The message (spec §2/§5): the text. A plain statement ending in a period; for a failure it names\n// what failed and what to do next, and never blames you (spec §2). The body type role in primary\n// text. It is the toast's accessible name (Radix wires aria-labelledby). Brand violet never paints it.\nexport const toastTitleClass = \"text-body text-text-primary\";\n\n// The secondary message line (spec §2/§5): a supporting line under the message, where used. The body\n// type role in --color-text-secondary. It is the toast's accessible description (Radix wires\n// aria-describedby).\nexport const toastDescriptionClass = \"text-body text-text-secondary\";\n\n// The inline action (spec §2/§6): at most one inline action, phrased as a verb (\"Undo\", \"View\"). A\n// NEUTRAL ghost surface — the label in --color-action-ghost-fg at rest, the restrained ghost hover\n// fill (no bg/border at rest) — so the action is neutral and never competes with the status accent.\n// The ghost fg/hover is the control's OWN action treatment, not the toast's status (the brand !=\n// state gate scopes status keys to the toast container variant). It is a real focus stop (Radix\n// ToastAction renders a native <button>) with the label type role, the target-size floor (44px touch\n// / 40px pointer, spec §5 / DEC-B; the height EMERGES from the floor, never fixed below it), the\n// persistent focus ring, and the fast functional hover motion + verdify easing, instant under\n// reduced motion (G-U3).\nexport const toastActionClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) px-(--space-3) \" +\n  \"text-label font-medium \" +\n  \"text-action-ghost-fg hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The dismiss control (spec §2/§6/§7): an explicit close on the inline-end edge for toasts that do\n// not auto-dismiss and for pointer users clearing one early. A NEUTRAL ghost icon-button — the glyph\n// in --color-action-ghost-fg at rest, the restrained ghost hover fill — so it never competes with\n// the status. A real focus stop (Radix ToastClose renders a native <button>) with the square\n// target-size floor (44px touch / 40px pointer, spec §5 / DEC-B; height EMERGES from the floor,\n// never fixed below it), the persistent focus ring, and the fast functional hover motion + verdify\n// easing, instant under reduced motion (G-U3).\nexport const toastCloseClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) \" +\n  \"text-action-ghost-fg hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) min-w-(--size-target-mobile) \" +\n  \"sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The dismiss glyph (spec §7): a neutral X at the md icon role, drawn with currentColor so it\n// inherits the button's ghost fg. Decorative (aria-hidden in tsx) — the button carries the name.\nexport const toastCloseGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n\nexport type ToastVariantProps = VariantProps<typeof toastVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAehC,MAAM,qBACX;AAoBK,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,SAAS;AAAA;AAAA;AAAA,QAGP,UAAU;AAAA;AAAA,QAEV,QAAQ;AAAA;AAAA,QAER,SAAS;AAAA;AAAA,QAET,UAAU;AAAA,MACZ;AAAA,IACF;AAAA;AAAA,IAEA,iBAAiB,EAAE,SAAS,SAAS;AAAA,EACvC;AACF;AAQO,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,SAAS;AAAA,EACvC;AACF;AAKO,MAAM,oBAAoB;AAK1B,MAAM,kBAAkB;AAKxB,MAAM,wBAAwB;AAW9B,MAAM,mBACX;AAeK,MAAM,kBACX;AAUK,MAAM,uBAAuB;","names":[]}

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, type TooltipProviderProps, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps, type TooltipVariant, } from "./tooltip";
+export { tooltipContentClass, tooltipArrowClass } from "./tooltip.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,cAAc,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/tooltip/index.js

@@ -0,0 +1,16 @@
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent
+} from "./tooltip";
+import { tooltipContentClass, tooltipArrowClass } from "./tooltip.variants";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  tooltipArrowClass,
+  tooltipContentClass
+};
+//# sourceMappingURL=index.js.map

package/dist/components/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["export {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipVariant,\n} from \"./tooltip\";\nexport { tooltipContentClass, tooltipArrowClass } from \"./tooltip.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AACP,SAAS,qBAAqB,yBAAyB;","names":[]}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+export interface TooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {
+}
+/**
+ * Wraps the app (or a region of it) to provide global tooltip timing (spec §4). It owns the open
+ * DELAY: hovering a trigger opens its tooltip after a short delay (`delayDuration`), while moving
+ * between triggers within `skipDelayDuration` opens the next one immediately, so a row of icon
+ * buttons does not re-delay on every hover. Keyboard focus always opens with NO delay regardless of
+ * this setting, so a keyboard user gets the same information a pointer user does (spec §4 Focus).
+ *
+ * `disableHoverableContent` is intentionally NOT defaulted on: leaving it OFF keeps the tooltip open
+ * while the pointer moves onto the content, which is what makes the tooltip HOVERABLE under
+ * WCAG 1.4.13 — disabling it has accessibility consequences, so prefer the default.
+ *
+ * Place ONE Provider near the root of the app; individual tooltips read its timing. Wraps the Radix
+ * Tooltip Provider — a stateful primitive, so this file is `'use client'`.
+ */
+export declare function TooltipProvider({ delayDuration, ...props }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
+}
+/**
+ * One tooltip: the trigger-plus-tooltip pair (spec §2/§4). Wraps `TooltipTrigger` and
+ * `TooltipContent`. The tooltip is hidden until its trigger is hovered or focused, stays open while
+ * the trigger holds focus or the pointer is over the trigger or the content (WCAG 1.4.13 hoverable
+ * / persistent), and is dismissible with Escape (1.4.13 dismissible) — Radix wires all of this. Pass
+ * a per-tooltip `delayDuration` (e.g. `0` for an instant open) to override the Provider's timing.
+ */
+export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export interface TooltipTriggerProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> {
+}
+/**
+ * The control the tooltip describes (spec §2 trigger): a REAL control — a button, a link, a field —
+ * never inert text. The trigger owns the single tab stop and the 2px focus ring; the tooltip itself
+ * never takes focus (spec §2/§4 Focus/§7). Radix sets the trigger's `aria-describedby` to the
+ * tooltip's id while it is open, so the tooltip is announced as a DESCRIPTION after the trigger's own
+ * name (spec §7) — it supplements the name, it does not replace it.
+ *
+ * Pass `asChild` to project the trigger onto your own control (commonly a Button) so the trigger
+ * inherits that control's role, keyboard, and focus ring rather than nesting a second button — the
+ * Menu/Dialog trigger precedent.
+ *
+ * The `label` variant (spec §3): on an ICON-ONLY control with no other accessible name, give that
+ * control its OWN name (e.g. `aria-label="Revoke"`) so it is never nameless — the tooltip still
+ * describes it. The Tooltip surface is identical for both variants; the distinction is purely how the
+ * caller names the trigger, which is the caller's responsibility and cannot be forced onto an
+ * arbitrary child here.
+ */
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** The two spec §3 variants. They share ONE neutral surface; the distinction is how the trigger is named (§7). */
+export type TooltipVariant = "label" | "description";
+export interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+    /**
+     * Which spec §3 variant this tooltip plays (default `description`). `description` adds a short hint
+     * to a control that already has a visible label; `label` shows AND names an icon-only control (the
+     * trigger must still carry its own `aria-label`/`aria-labelledby` — see `TooltipTrigger`). This is
+     * a documentation/intent marker: the rendered surface is identical for both, and Radix wires the
+     * trigger's `aria-describedby` either way — neutrals carry the whole surface, no status or brand
+     * tint, by design (spec §3/§5).
+     */
+    variant?: TooltipVariant;
+    /** Render the optional decorative arrow connecting the content to its trigger (spec §2 arrow). Default `true`. */
+    arrow?: boolean;
+}
+/**
+ * The floating label (spec §2 content, §3/§5): a `role="tooltip"` element holding ONE short line of
+ * plain text, raised above the page on the POPOVER layer and anchored to its trigger. It holds NO
+ * interactive content — no link, no button, no field (if you need those, you need a Popover, spec
+ * §1/§2). It is a NON-MODAL popover: no scrim, no `aria-modal`, no focus-trap — focus never enters
+ * it, so there is nothing to trap (spec §7). A NEUTRAL surface: the brand violet and a status color
+ * never appear on a tooltip (spec §3/§5/§8, brand != state).
+ *
+ * The open/close is the FAST motion duration and a plain fade — no slide, no bounce — instant under
+ * `prefers-reduced-motion`; never the deliberate "check" duration, which is the VerifiedBadge-only
+ * theatre (spec §4, G-U3). Portaled so it escapes overflow clipping. The decorative arrow's `fill`
+ * matches the surface; Radix's bare arrow does not carry the surface's outer BORDER edge — a
+ * conformant, non-load-bearing deviation from the §5 "arrow edge" border, flagged for amendment
+ * rather than hand-rolling a custom bordered arrow polygon.
+ */
+export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC;CAAG;AAE7E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAAE,aAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAEtF;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;CAAG;AAEzE;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAE1C;AAED,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;CAAG;AAE5E;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,+FAKzB,CAAC;AAEH,kHAAkH;AAClH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,aAAa,CAAC;AAErD,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;IACvE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,kHAAkH;IAClH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,4FAiCzB,CAAC"}