@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/toast/toast.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useExitBackstop } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useCallback, useState } from "react";
 import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/toast/toast.tsx
@@ -43,23 +44,43 @@ const toastRegionVariants = cva([
 ]);
 const toastVariants = cva([
 	"flex items-start gap-3 box-border w-full",
-	"rounded-md border-(length:--border-width) p-(--density-bar-pad-x)",
-	"font-sans shadow-surface",
-	"motion-safe:transition-opacity motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-	"data-[animation=exiting]:opacity-0"
+	"rounded-panel border-(length:--border-width) border-border bg-surface text-foreground",
+	"py-3.5 ps-4 pe-3.5 font-sans shadow-floating",
+	"motion-safe:animate-toast-in motion-reduce:animate-fade-in",
+	"motion-safe:data-[closing]:animate-toast-out motion-reduce:data-[closing]:animate-fade-out"
 ], {
 	variants: { tone: {
-		neutral: "bg-background border-separator text-foreground",
-		success: "bg-success-subtle border-success-strong text-success-foreground",
-		warning: "bg-warning-subtle border-warning-strong text-warning-foreground",
-		danger: "bg-destructive-subtle border-destructive-strong text-destructive-subtle-foreground",
-		info: "bg-info-subtle border-info-strong text-info-foreground"
+		neutral: "",
+		success: "",
+		warning: "",
+		danger: "",
+		info: ""
 	} },
 	defaultVariants: { tone: "neutral" }
 });
+/** The status icon's circle: the tone's light fill with its AA text colour. */
+const toastIconVariants = cva("mt-px grid size-7.5 shrink-0 place-items-center rounded-circle [&_svg]:size-4", {
+	variants: { tone: {
+		neutral: "bg-muted text-text-secondary",
+		success: "bg-success-subtle text-success-foreground",
+		warning: "bg-warning-subtle text-warning-foreground",
+		danger: "bg-destructive-subtle text-destructive-subtle-foreground",
+		info: "bg-info-subtle text-info-foreground"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const TONE_ICON_PATHS = {
+	neutral: "M6 16v-5a6 6 0 1 1 12 0v5l1.5 2h-15zM10 20.5a2 2 0 0 0 4 0",
+	success: "M4 12.5l5 5L20 6.5",
+	warning: "M12 7v6.5M12 17.25h.01",
+	danger: "M7 7l10 10M17 7L7 17",
+	info: "M12 11v6M12 7.25h.01"
+};
 const toastCloseVariants = cva([
-	"ms-auto shrink-0 rounded-sm cursor-pointer",
-	"text-current opacity-70 data-[hovered]:opacity-100",
+	"-mt-px -me-0.5 ms-auto grid size-8 shrink-0 place-items-center rounded-circle cursor-pointer",
+	"border-0 bg-transparent p-0 text-text-secondary",
+	"data-[hovered]:bg-muted data-[hovered]:text-foreground",
+	"toast-close",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -91,42 +112,64 @@ function toast(content, timeout = 5e3) {
 	return toastQueue.add(content, timeout === 0 ? void 0 : { timeout });
 }
 /**
-* Renders the queue. Mount ONCE, near the root.
-*
-* React Aria only renders the landmark while something is queued, so this
-* costs nothing on a quiet screen.
+* One toast. Pressing its close control plays the exit first, then closes it in the
+* queue; React Aria unmounts a closed toast at once and has no exit of its own, so a
+* toast closed any other way (the timeout, `toastQueue.close`) leaves without one.
 */
-const ToastRegion = forwardRef(function ToastRegion({ label, closeLabel = "Dismiss", className }, ref) {
-	return /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
-		ref,
-		queue: toastQueue,
-		"aria-label": label,
-		"data-slot": "toast-region",
-		className: cn(toastRegionVariants(), className),
-		children: ({ toast: queued }) => /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
-			toast: queued,
-			"data-slot": "toast",
-			"data-tone": queued.content.tone ?? "neutral",
-			className: toastVariants({ tone: queued.content.tone }),
-			children: [/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
+function ToastItem({ queued, closeLabel }) {
+	const [closing, setClosing] = useState(false);
+	const tone = queued.content.tone ?? "neutral";
+	const finish = useCallback(() => toastQueue.close(queued.key), [queued.key]);
+	useExitBackstop(closing, finish);
+	return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
+		toast: queued,
+		"data-slot": "toast",
+		"data-tone": tone,
+		"data-closing": closing || void 0,
+		onAnimationEnd: (event) => {
+			if (closing && event.target === event.currentTarget) finish();
+		},
+		className: toastVariants({ tone }),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "toast-icon",
+				"data-tone": tone,
+				"aria-hidden": "true",
+				className: toastIconVariants({ tone }),
+				children: queued.content.icon ?? /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.25",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", {
+						d: TONE_ICON_PATHS[tone],
+						pathLength: 1,
+						className: tone === "success" ? "toast-check" : void 0
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
 				"data-slot": "toast-content",
-				className: "flex min-w-0 flex-col gap-1",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-1.25",
 				children: [/* @__PURE__ */ jsx(Text, {
 					slot: "title",
 					"data-slot": "toast-title",
-					className: "text-sm leading-(--leading-snug) font-medium",
+					className: "text-sm leading-(--leading-normal) font-medium text-foreground",
 					children: queued.content.title
 				}), queued.content.description == null ? null : /* @__PURE__ */ jsx(Text, {
 					slot: "description",
 					"data-slot": "toast-description",
-					className: "text-sm leading-(--leading-normal) opacity-90",
+					className: "text-sm leading-(--leading-normal) text-text-secondary",
 					children: queued.content.description
 				})]
-			}), /* @__PURE__ */ jsx(Button, {
-				slot: "close",
+			}),
+			/* @__PURE__ */ jsx(Button, {
 				"aria-label": closeLabel,
 				"data-slot": "toast-close",
 				className: toastCloseVariants(),
+				onPress: () => setClosing(true),
 				children: /* @__PURE__ */ jsx("svg", {
 					"aria-hidden": "true",
 					viewBox: "0 0 16 16",
@@ -137,11 +180,30 @@ const ToastRegion = forwardRef(function ToastRegion({ label, closeLabel = "Dismi
 					className: "size-(--icon-sm)",
 					children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
 				})
-			})]
+			})
+		]
+	});
+}
+/**
+* Renders the queue. Mount ONCE, near the root.
+*
+* React Aria only renders the landmark while something is queued, so this
+* costs nothing on a quiet screen.
+*/
+const ToastRegion = forwardRef(function ToastRegion({ label, closeLabel = "Dismiss", className }, ref) {
+	return /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
+		ref,
+		queue: toastQueue,
+		"aria-label": label,
+		"data-slot": "toast-region",
+		className: cn(toastRegionVariants(), className),
+		children: ({ toast: queued }) => /* @__PURE__ */ jsx(ToastItem, {
+			queued,
+			closeLabel
 		})
 	});
 });
 //#endregion
-export { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants };
+export { ToastRegion, toast, toastCloseVariants, toastIconVariants, toastQueue, toastRegionVariants, toastVariants };
 
 //# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["AriaToastQueue","AriaToastRegion","AriaToast","AriaToastContent","AriaText","AriaButton"],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Text as AriaText,\n  UNSTABLE_Toast as AriaToast,\n  UNSTABLE_ToastContent as AriaToastContent,\n  UNSTABLE_ToastQueue as AriaToastQueue,\n  UNSTABLE_ToastRegion as AriaToastRegion,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Toast: a transient message, announced without stealing focus.\n *\n * Maturity: **experimental**, and the reason is upstream rather than here.\n * React Aria ships this API as `UNSTABLE_Toast*` in 1.21.1, so a RAC minor\n * bump can rename or reshape it. The alternative was hand-rolling the live\n * region, the queue, the timers and the focus behaviour, which is how every\n * toast implementation acquires its accessibility bugs -- so this takes the\n * upstream one and labels the risk instead of hiding it.\n *\n * THE PRODUCT HAS 30 FILES CALLING `useToast` AND 67 `toast(...)` CALLS, and\n * its implementation is the shadcn reducer with both of its known defects\n * still in place:\n *\n *   TOAST_LIMIT = 1          -- a second toast REPLACES the first, so a\n *                               burst of results shows only the last one.\n *   TOAST_REMOVE_DELAY = 1e6 -- sixteen minutes. Nothing auto-dismisses;\n *                               every toast waits to be closed by hand.\n *\n * Neither is ported. `maxVisibleToasts` defaults to 3 and `timeout` to 5s,\n * which is the WCAG 2.2.1 floor React Aria enforces -- it REFUSES a timeout\n * under 5000ms, because a message that vanishes faster cannot be read by\n * someone using a screen magnifier.\n *\n * The queue is a module singleton on purpose. The product's `toast()` is\n * importable from anywhere and called from API error handlers and effects\n * that have no component to hang a hook off, and a context-based queue would\n * have made those 67 call sites into 67 refactors.\n */\n\n/** Where the region sits. Fixed, above everything, out of the way of content. */\nexport const toastRegionVariants = cva([\n  \"fixed z-50 flex flex-col gap-2 box-border\",\n  // Logical insets so the stack follows the writing direction.\n  \"bottom-(--density-bar-pad-y) end-(--density-bar-pad-x)\",\n  \"w-[min(24rem,calc(100vw-2rem))]\",\n  \"outline-none\",\n]);\n\nexport const toastVariants = cva(\n  [\n    \"flex items-start gap-3 box-border w-full\",\n    \"rounded-md border-(length:--border-width) p-(--density-bar-pad-x)\",\n    \"font-sans shadow-surface\",\n    \"motion-safe:transition-opacity motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n    // Not colour alone: an exiting toast fades AND the region reflows.\n    \"data-[animation=exiting]:opacity-0\",\n  ],\n  {\n    variants: {\n      /*\n       * The same vocabulary as Badge, deliberately. The product's toast had\n       * `default` and `destructive` only, so 38 of its 67 calls pass a variant\n       * that cannot say \"this worked\" -- and a save confirmation styled\n       * identically to a failure is the most common thing a toast gets wrong.\n       */\n      tone: {\n        neutral: \"bg-background border-separator text-foreground\",\n        success: \"bg-success-subtle border-success-strong text-success-foreground\",\n        warning: \"bg-warning-subtle border-warning-strong text-warning-foreground\",\n        danger:\n          \"bg-destructive-subtle border-destructive-strong text-destructive-subtle-foreground\",\n        info: \"bg-info-subtle border-info-strong text-info-foreground\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\nexport const toastCloseVariants = cva([\n  \"ms-auto shrink-0 rounded-sm cursor-pointer\",\n  \"text-current opacity-70 data-[hovered]:opacity-100\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/** What a toast carries. `title` is required: an unnamed toast announces nothing. */\nexport interface ToastContent extends VariantProps<typeof toastVariants> {\n  /** The message. Required -- a toast with only a description announces as loose text. */\n  title: ReactNode;\n  /** Secondary detail, beneath the title. */\n  description?: ReactNode;\n}\n\n/**\n * The queue every `toast()` call feeds.\n *\n * Exported so a consumer can read `visibleToasts` in a test, or dismiss them\n * on a route change -- there is no `clear()` upstream, so that is\n * `[...toastQueue.visibleToasts].forEach((t) => toastQueue.close(t.key))`.\n * Not something to touch in normal use.\n */\nexport const toastQueue = new AriaToastQueue<ToastContent>({\n  /*\n   * Three, against the product's one. Its TOAST_LIMIT of 1 means a second\n   * toast REPLACES the first -- so a page that reports three failed uploads\n   * shows one and silently drops the rest.\n   */\n  maxVisibleToasts: 3,\n});\n\n/**\n * Show a toast.\n *\n * @example\n * toast({ title: \"Report saved\" });\n * toast({ title: \"Upload failed\", description: err.message, tone: \"danger\" });\n *\n * @param timeout - ms before it dismisses itself. React Aria REFUSES anything\n * under 5000 and anything at all while the region is focused, because a\n * message that disappears before it can be read fails WCAG 2.2.1. Pass 0 to\n * require a manual dismiss, which is right for an error a user must act on.\n */\nexport function toast(content: ToastContent, timeout = 5000) {\n  return toastQueue.add(content, timeout === 0 ? undefined : { timeout });\n}\n\nexport interface ToastRegionProps {\n  /**\n   * Names the region for assistive tech.\n   *\n   * **Required.** React Aria renders the region as a labelled landmark, and\n   * an unnamed one is announced as \"region\" with no indication of what just\n   * arrived. It is a prop rather than a default string because\n   * ARCHITECTURE section 7 rule 9 routes user-visible copy through the\n   * consumer until `useMessages()` exists.\n   */\n  label: string;\n  /** Accessible name for each toast's dismiss control. */\n  closeLabel?: string;\n  /** Extra classes for the region. Merged last. */\n  className?: string;\n}\n\n/**\n * Renders the queue. Mount ONCE, near the root.\n *\n * React Aria only renders the landmark while something is queued, so this\n * costs nothing on a quiet screen.\n */\nexport const ToastRegion = forwardRef<HTMLDivElement, ToastRegionProps>(function ToastRegion(\n  { label, closeLabel = \"Dismiss\", className },\n  ref,\n) {\n  return (\n    <AriaToastRegion\n      ref={ref}\n      queue={toastQueue}\n      aria-label={label}\n      data-slot=\"toast-region\"\n      className={cn(toastRegionVariants(), className)}\n    >\n      {({ toast: queued }) => (\n        <AriaToast\n          toast={queued}\n          data-slot=\"toast\"\n          data-tone={queued.content.tone ?? \"neutral\"}\n          className={toastVariants({ tone: queued.content.tone })}\n        >\n          <AriaToastContent data-slot=\"toast-content\" className=\"flex min-w-0 flex-col gap-1\">\n            {/*\n              slot=\"title\" is what React Aria announces. A plain div here\n              renders identically and leaves the toast unnamed.\n            */}\n            <AriaText\n              slot=\"title\"\n              data-slot=\"toast-title\"\n              className=\"text-sm leading-(--leading-snug) font-medium\"\n            >\n              {queued.content.title}\n            </AriaText>\n            {queued.content.description == null ? null : (\n              <AriaText\n                slot=\"description\"\n                data-slot=\"toast-description\"\n                className=\"text-sm leading-(--leading-normal) opacity-90\"\n              >\n                {queued.content.description}\n              </AriaText>\n            )}\n          </AriaToastContent>\n          <AriaButton\n            slot=\"close\"\n            aria-label={closeLabel}\n            data-slot=\"toast-close\"\n            className={toastCloseVariants()}\n          >\n            <svg\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.75\"\n              strokeLinecap=\"round\"\n              className=\"size-(--icon-sm)\"\n            >\n              <path d=\"m4 4 8 8M12 4l-8 8\" />\n            </svg>\n          </AriaButton>\n        </AriaToast>\n      )}\n    </AriaToastRegion>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,sBAAsB,IAAI;CACrC;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,gBAAgB,IAC3B;CACE;CACA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU,EAOR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QACE;EACF,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAEA,MAAa,qBAAqB,IAAI;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;;;;;AAkBD,MAAa,aAAa,IAAIA,oBAA6B,EAMzD,kBAAkB,EACpB,CAAC;;;;;;;;;;;;;AAcD,SAAgB,MAAM,SAAuB,UAAU,KAAM;CAC3D,OAAO,WAAW,IAAI,SAAS,YAAY,IAAI,KAAA,IAAY,EAAE,QAAQ,CAAC;AACxE;;;;;;;AAyBA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,OAAO,aAAa,WAAW,aACjC,KACA;CACA,OACE,oBAACC,sBAAD;EACO;EACL,OAAO;EACP,cAAY;EACZ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;EAE5C,WAAA,EAAE,OAAO,aACT,qBAACC,gBAAD;GACE,OAAO;GACP,aAAU;GACV,aAAW,OAAO,QAAQ,QAAQ;GAClC,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,KAAK,CAAC;GAJxD,UAAA,CAME,qBAACC,uBAAD;IAAkB,aAAU;IAAgB,WAAU;IAAtD,UAAA,CAKE,oBAACC,MAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KAET,UAAA,OAAO,QAAQ;IACR,CAAA,GACT,OAAO,QAAQ,eAAe,OAAO,OACpC,oBAACA,MAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KAET,UAAA,OAAO,QAAQ;IACR,CAAA,CAEI;GAClB,CAAA,GAAA,oBAACC,QAAD;IACE,MAAK;IACL,cAAY;IACZ,aAAU;IACV,WAAW,mBAAmB;IAE9B,UAAA,oBAAC,OAAD;KACE,eAAY;KACZ,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,WAAU;KAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC3B,CAAA;GACK,CAAA,CACH;;CAEE,CAAA;AAErB,CAAC"}
+{"version":3,"file":"toast.js","names":["AriaToastQueue","AriaToast","AriaToastContent","AriaText","AriaButton","AriaToastRegion"],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useState, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Text as AriaText,\n  UNSTABLE_Toast as AriaToast,\n  UNSTABLE_ToastContent as AriaToastContent,\n  UNSTABLE_ToastQueue as AriaToastQueue,\n  UNSTABLE_ToastRegion as AriaToastRegion,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useExitBackstop } from \"../lib/motion.js\";\n\n/**\n * Toast: a transient message, announced without stealing focus.\n *\n * Maturity: **experimental**, and the reason is upstream rather than here.\n * React Aria ships this API as `UNSTABLE_Toast*` in 1.21.1, so a RAC minor\n * bump can rename or reshape it. The alternative was hand-rolling the live\n * region, the queue, the timers and the focus behaviour, which is how every\n * toast implementation acquires its accessibility bugs -- so this takes the\n * upstream one and labels the risk instead of hiding it.\n *\n * THE PRODUCT HAS 30 FILES CALLING `useToast` AND 67 `toast(...)` CALLS, and\n * its implementation is the shadcn reducer with both of its known defects\n * still in place:\n *\n *   TOAST_LIMIT = 1          -- a second toast REPLACES the first, so a\n *                               burst of results shows only the last one.\n *   TOAST_REMOVE_DELAY = 1e6 -- sixteen minutes. Nothing auto-dismisses;\n *                               every toast waits to be closed by hand.\n *\n * Neither is ported. `maxVisibleToasts` defaults to 3 and `timeout` to 5s,\n * which is the WCAG 2.2.1 floor React Aria enforces -- it REFUSES a timeout\n * under 5000ms, because a message that vanishes faster cannot be read by\n * someone using a screen magnifier.\n *\n * The queue is a module singleton on purpose. The product's `toast()` is\n * importable from anywhere and called from API error handlers and effects\n * that have no component to hang a hook off, and a context-based queue would\n * have made those 67 call sites into 67 refactors.\n */\n\n/** Where the region sits. Fixed, above everything, out of the way of content. */\nexport const toastRegionVariants = cva([\n  \"fixed z-50 flex flex-col gap-2 box-border\",\n  // Logical insets so the stack follows the writing direction.\n  \"bottom-(--density-bar-pad-y) end-(--density-bar-pad-x)\",\n  \"w-[min(24rem,calc(100vw-2rem))]\",\n  \"outline-none\",\n]);\n\nexport const toastVariants = cva(\n  [\n    \"flex items-start gap-3 box-border w-full\",\n    // A white card on every tone: the status lives in the icon, not the fill.\n    \"rounded-panel border-(length:--border-width) border-border bg-surface text-foreground\",\n    \"py-3.5 ps-4 pe-3.5 font-sans shadow-floating\",\n    // Rises in when it mounts. When its own close control is pressed it sinks out\n    // first (data-closing) and the queue is told when that ends. Reduced motion:\n    // opacity only. Not colour alone: the region reflows too.\n    \"motion-safe:animate-toast-in motion-reduce:animate-fade-in\",\n    \"motion-safe:data-[closing]:animate-toast-out motion-reduce:data-[closing]:animate-fade-out\",\n  ],\n  {\n    variants: {\n      /*\n       * The same vocabulary as Badge, deliberately. The product's toast had\n       * `default` and `destructive` only, so 38 of its 67 calls pass a variant\n       * that cannot say \"this worked\" -- and a save confirmation styled\n       * identically to a failure is the most common thing a toast gets wrong.\n       *\n       * The tone no longer tints the card (every tone is the same white card);\n       * it picks the icon. The variant stays so `toastVariants({ tone })` still\n       * type-checks for existing callers.\n       */\n      tone: {\n        neutral: \"\",\n        success: \"\",\n        warning: \"\",\n        danger: \"\",\n        info: \"\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/** The status icon's circle: the tone's light fill with its AA text colour. */\nexport const toastIconVariants = cva(\n  \"mt-px grid size-7.5 shrink-0 place-items-center rounded-circle [&_svg]:size-4\",\n  {\n    variants: {\n      tone: {\n        neutral: \"bg-muted text-text-secondary\",\n        success: \"bg-success-subtle text-success-foreground\",\n        warning: \"bg-warning-subtle text-warning-foreground\",\n        danger: \"bg-destructive-subtle text-destructive-subtle-foreground\",\n        info: \"bg-info-subtle text-info-foreground\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n// One 24px glyph per tone. Success draws its tick on arrival (toast-check).\nconst TONE_ICON_PATHS = {\n  neutral: \"M6 16v-5a6 6 0 1 1 12 0v5l1.5 2h-15zM10 20.5a2 2 0 0 0 4 0\",\n  success: \"M4 12.5l5 5L20 6.5\",\n  warning: \"M12 7v6.5M12 17.25h.01\",\n  danger: \"M7 7l10 10M17 7L7 17\",\n  info: \"M12 11v6M12 7.25h.01\",\n} as const;\n\nexport const toastCloseVariants = cva([\n  // A plain icon: no fill, no border at rest. It hovers to the muted wash.\n  \"-mt-px -me-0.5 ms-auto grid size-8 shrink-0 place-items-center rounded-circle cursor-pointer\",\n  \"border-0 bg-transparent p-0 text-text-secondary\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  // Quick press, spring release (styles.css).\n  \"toast-close\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/** What a toast carries. `title` is required: an unnamed toast announces nothing. */\nexport interface ToastContent extends VariantProps<typeof toastVariants> {\n  /** The message. Required -- a toast with only a description announces as loose text. */\n  title: ReactNode;\n  /** Secondary detail, beneath the title. */\n  description?: ReactNode;\n  /** Replaces the tone's status icon. Pass a 16px glyph; it is hidden from assistive tech. */\n  icon?: ReactNode;\n}\n\n/**\n * The queue every `toast()` call feeds.\n *\n * Exported so a consumer can read `visibleToasts` in a test, or dismiss them\n * on a route change -- there is no `clear()` upstream, so that is\n * `[...toastQueue.visibleToasts].forEach((t) => toastQueue.close(t.key))`.\n * Not something to touch in normal use.\n */\nexport const toastQueue = new AriaToastQueue<ToastContent>({\n  /*\n   * Three, against the product's one. Its TOAST_LIMIT of 1 means a second\n   * toast REPLACES the first -- so a page that reports three failed uploads\n   * shows one and silently drops the rest.\n   */\n  maxVisibleToasts: 3,\n});\n\n/**\n * Show a toast.\n *\n * @example\n * toast({ title: \"Report saved\" });\n * toast({ title: \"Upload failed\", description: err.message, tone: \"danger\" });\n *\n * @param timeout - ms before it dismisses itself. React Aria REFUSES anything\n * under 5000 and anything at all while the region is focused, because a\n * message that disappears before it can be read fails WCAG 2.2.1. Pass 0 to\n * require a manual dismiss, which is right for an error a user must act on.\n */\nexport function toast(content: ToastContent, timeout = 5000) {\n  return toastQueue.add(content, timeout === 0 ? undefined : { timeout });\n}\n\ntype Queued = (typeof toastQueue.visibleToasts)[number];\n\n/**\n * One toast. Pressing its close control plays the exit first, then closes it in the\n * queue; React Aria unmounts a closed toast at once and has no exit of its own, so a\n * toast closed any other way (the timeout, `toastQueue.close`) leaves without one.\n */\nfunction ToastItem({ queued, closeLabel }: { queued: Queued; closeLabel: string }) {\n  const [closing, setClosing] = useState(false);\n  const tone = queued.content.tone ?? \"neutral\";\n  const finish = useCallback(() => toastQueue.close(queued.key), [queued.key]);\n  // If the animation never reports (reduced motion, a hidden tab), close anyway.\n  useExitBackstop(closing, finish);\n  return (\n    <AriaToast\n      toast={queued}\n      data-slot=\"toast\"\n      data-tone={tone}\n      data-closing={closing || undefined}\n      onAnimationEnd={(event) => {\n        if (closing && event.target === event.currentTarget) finish();\n      }}\n      className={toastVariants({ tone })}\n    >\n      <span\n        data-slot=\"toast-icon\"\n        data-tone={tone}\n        aria-hidden=\"true\"\n        className={toastIconVariants({ tone })}\n      >\n        {queued.content.icon ?? (\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.25\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path\n              d={TONE_ICON_PATHS[tone]}\n              pathLength={1}\n              className={tone === \"success\" ? \"toast-check\" : undefined}\n            />\n          </svg>\n        )}\n      </span>\n      <AriaToastContent\n        data-slot=\"toast-content\"\n        className=\"flex min-w-0 flex-1 flex-col gap-0.5 pt-1.25\"\n      >\n        {/*\n          slot=\"title\" is what React Aria announces. A plain div here\n          renders identically and leaves the toast unnamed.\n        */}\n        <AriaText\n          slot=\"title\"\n          data-slot=\"toast-title\"\n          className=\"text-sm leading-(--leading-normal) font-medium text-foreground\"\n        >\n          {queued.content.title}\n        </AriaText>\n        {queued.content.description == null ? null : (\n          <AriaText\n            slot=\"description\"\n            data-slot=\"toast-description\"\n            className=\"text-sm leading-(--leading-normal) text-text-secondary\"\n          >\n            {queued.content.description}\n          </AriaText>\n        )}\n      </AriaToastContent>\n      <AriaButton\n        aria-label={closeLabel}\n        data-slot=\"toast-close\"\n        className={toastCloseVariants()}\n        onPress={() => setClosing(true)}\n      >\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          className=\"size-(--icon-sm)\"\n        >\n          <path d=\"m4 4 8 8M12 4l-8 8\" />\n        </svg>\n      </AriaButton>\n    </AriaToast>\n  );\n}\n\nexport interface ToastRegionProps {\n  /**\n   * Names the region for assistive tech.\n   *\n   * **Required.** React Aria renders the region as a labelled landmark, and\n   * an unnamed one is announced as \"region\" with no indication of what just\n   * arrived. It is a prop rather than a default string because\n   * ARCHITECTURE section 7 rule 9 routes user-visible copy through the\n   * consumer until `useMessages()` exists.\n   */\n  label: string;\n  /** Accessible name for each toast's dismiss control. */\n  closeLabel?: string;\n  /** Extra classes for the region. Merged last. */\n  className?: string;\n}\n\n/**\n * Renders the queue. Mount ONCE, near the root.\n *\n * React Aria only renders the landmark while something is queued, so this\n * costs nothing on a quiet screen.\n */\nexport const ToastRegion = forwardRef<HTMLDivElement, ToastRegionProps>(function ToastRegion(\n  { label, closeLabel = \"Dismiss\", className },\n  ref,\n) {\n  return (\n    <AriaToastRegion\n      ref={ref}\n      queue={toastQueue}\n      aria-label={label}\n      data-slot=\"toast-region\"\n      className={cn(toastRegionVariants(), className)}\n    >\n      {({ toast: queued }) => <ToastItem queued={queued} closeLabel={closeLabel} />}\n    </AriaToastRegion>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,sBAAsB,IAAI;CACrC;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,gBAAgB,IAC3B;CACE;CAEA;CACA;CAIA;CACA;AACF,GACA;CACE,UAAU,EAWR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;;AAGA,MAAa,oBAAoB,IAC/B,iFACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAGA,MAAM,kBAAkB;CACtB,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR;AAEA,MAAa,qBAAqB,IAAI;CAEpC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;;;;;AAoBD,MAAa,aAAa,IAAIA,oBAA6B,EAMzD,kBAAkB,EACpB,CAAC;;;;;;;;;;;;;AAcD,SAAgB,MAAM,SAAuB,UAAU,KAAM;CAC3D,OAAO,WAAW,IAAI,SAAS,YAAY,IAAI,KAAA,IAAY,EAAE,QAAQ,CAAC;AACxE;;;;;;AASA,SAAS,UAAU,EAAE,QAAQ,cAAsD;CACjF,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,OAAO,OAAO,QAAQ,QAAQ;CACpC,MAAM,SAAS,kBAAkB,WAAW,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,GAAG,CAAC;CAE3E,gBAAgB,SAAS,MAAM;CAC/B,OACE,qBAACC,gBAAD;EACE,OAAO;EACP,aAAU;EACV,aAAW;EACX,gBAAc,WAAW,KAAA;EACzB,iBAAiB,UAAU;GACzB,IAAI,WAAW,MAAM,WAAW,MAAM,eAAe,OAAO;EAC9D;EACA,WAAW,cAAc,EAAE,KAAK,CAAC;EARnC,UAAA;GAUE,oBAAC,QAAD;IACE,aAAU;IACV,aAAW;IACX,eAAY;IACZ,WAAW,kBAAkB,EAAE,KAAK,CAAC;IAEpC,UAAA,OAAO,QAAQ,QACd,oBAAC,OAAD;KACE,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KAEf,UAAA,oBAAC,QAAD;MACE,GAAG,gBAAgB;MACnB,YAAY;MACZ,WAAW,SAAS,YAAY,gBAAgB,KAAA;KACjD,CAAA;IACE,CAAA;GAEH,CAAA;GACN,qBAACC,uBAAD;IACE,aAAU;IACV,WAAU;IAFZ,UAAA,CAQE,oBAACC,MAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KAET,UAAA,OAAO,QAAQ;IACR,CAAA,GACT,OAAO,QAAQ,eAAe,OAAO,OACpC,oBAACA,MAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KAET,UAAA,OAAO,QAAQ;IACR,CAAA,CAEI;;GAClB,oBAACC,QAAD;IACE,cAAY;IACZ,aAAU;IACV,WAAW,mBAAmB;IAC9B,eAAe,WAAW,IAAI;IAE9B,UAAA,oBAAC,OAAD;KACE,eAAY;KACZ,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,WAAU;KAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC3B,CAAA;GACK,CAAA;EACH;;AAEf;;;;;;;AAyBA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,OAAO,aAAa,WAAW,aACjC,KACA;CACA,OACE,oBAACC,sBAAD;EACO;EACL,OAAO;EACP,cAAY;EACZ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;EAE5C,WAAA,EAAE,OAAO,aAAa,oBAAC,WAAD;GAAmB;GAAoB;EAAa,CAAA;CAC7D,CAAA;AAErB,CAAC"}

package/dist/tooltip/tooltip.d.ts

@@ -39,12 +39,19 @@ interface TooltipProps$1 extends Omit<TooltipProps, "className" | "style" | "chi
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
   /**
-   * Where it opens. The legacy `side` prop: `"top"` 11 times, `"bottom"`
-   * once, and the default for the other 22.
+   * Where it opens: above the trigger by default. The legacy `side` prop
+   * (`"top"` 11 times, `"bottom"` once).
    *
    * @default "top"
    */
   placement?: TooltipProps["placement"];
+  /**
+   * Draw a small arrow pointing at the trigger. Off by default: the bubble
+   * floats clear of the trigger with no arrow.
+   *
+   * @default false
+   */
+  showArrow?: boolean;
 }
 declare const Tooltip$1: import("react").ForwardRefExoticComponent<TooltipProps$1 & import("react").RefAttributes<HTMLDivElement>>;
 /**
@@ -64,7 +71,7 @@ export interface TooltipTriggerProps extends TooltipTriggerComponentProps {
   /** Hover cool-down in ms. @default 0 */
   closeDelay?: number;
 }
-declare function TooltipTrigger$1({ delay, closeDelay, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+declare function TooltipTrigger$1({ delay, closeDelay, onOpenChange, ...props }: TooltipTriggerProps): import("react").JSX.Element;
 //#endregion
 export { Tooltip$1 as Tooltip, TooltipProps$1 as TooltipProps, TooltipTrigger$1 as TooltipTrigger };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip/tooltip.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/tooltip/tooltip.tsx
@@ -29,12 +30,47 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * word -- so `delay` defaults to 0 here, and a story pins the default.
 */
 const tooltipVariants = cva([
-	"w-fit rounded-md px-3 py-1.5",
-	"bg-primary text-primary-foreground",
-	"box-border font-sans text-xs leading-(--leading-snug) text-balance",
-	"outline-none"
+	"w-fit max-w-60 rounded-control px-4 py-3",
+	"bg-foreground text-background shadow-raised",
+	"box-border font-sans text-sm leading-(--leading-normal) text-balance",
+	"outline-none",
+	"tooltip-motion"
 ]);
-const Tooltip$1 = forwardRef(function Tooltip$2({ children, className, placement = "top", ...props }, ref) {
+const WARM_MS = 300;
+let openCount = 0;
+let coolTimer;
+let warm = false;
+let openedWarm = false;
+function noteOpen(open) {
+	if (open) {
+		openedWarm = warm;
+		openCount += 1;
+		clearTimeout(coolTimer);
+		warm = true;
+		return;
+	}
+	openCount = Math.max(0, openCount - 1);
+	if (openCount) return;
+	clearTimeout(coolTimer);
+	coolTimer = setTimeout(() => {
+		warm = false;
+	}, WARM_MS);
+}
+/**
+* Mounts with the open tooltip (the Tooltip function itself runs while closed too) and
+* marks it `data-instant` if its trigger opened it inside the warm window, before paint.
+*/
+function WarmMark() {
+	const ref = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		if (openedWarm) ref.current?.parentElement?.setAttribute("data-instant", "");
+	}, []);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		hidden: true
+	});
+}
+const Tooltip$1 = forwardRef(function Tooltip$2({ children, className, placement = "top", showArrow = false, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		ref,
 		...props,
@@ -42,23 +78,36 @@ const Tooltip$1 = forwardRef(function Tooltip$2({ children, className, placement
 		offset: 8,
 		"data-slot": "tooltip",
 		className: cn(tooltipVariants(), className),
-		children: [/* @__PURE__ */ jsx(OverlayArrow, {
-			"data-slot": "tooltip-arrow",
-			children: /* @__PURE__ */ jsx("svg", {
-				width: "10",
-				height: "5",
-				viewBox: "0 0 10 5",
-				className: "fill-primary",
-				children: /* @__PURE__ */ jsx("path", { d: "M0 5 5 0l5 5z" })
-			})
-		}), children]
+		children: [
+			showArrow ? /* @__PURE__ */ jsx(OverlayArrow, {
+				"data-slot": "tooltip-arrow",
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "10",
+					height: "5",
+					viewBox: "0 0 10 5",
+					className: "fill-foreground",
+					children: /* @__PURE__ */ jsx("path", { d: "M0 5 5 0l5 5z" })
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(WarmMark, {}),
+			children
+		]
 	});
 });
-function TooltipTrigger$1({ delay = 0, closeDelay = 0, ...props }) {
+function TooltipTrigger$1({ delay = 0, closeDelay = 0, onOpenChange, ...props }) {
+	const isOpen = useRef(false);
+	useEffect(() => () => {
+		if (isOpen.current) noteOpen(false);
+	}, []);
 	return /* @__PURE__ */ jsx(TooltipTrigger, {
 		...props,
 		delay,
-		closeDelay
+		closeDelay,
+		onOpenChange: (open) => {
+			isOpen.current = open;
+			noteOpen(open);
+			onOpenChange?.(open);
+		}
 	});
 }
 //#endregion

package/dist/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["Tooltip","AriaTooltip","AriaOverlayArrow","TooltipTrigger","AriaTooltipTrigger"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  OverlayArrow as AriaOverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  type TooltipProps as AriaTooltipProps,\n  type TooltipTriggerComponentProps as AriaTooltipTriggerProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Tooltip, ported from the legacy shadcn/Radix component.\n *\n * Census: ten files import it but only SEVEN render anything -- three\n * import the parts and use none. Across those seven: `Tooltip` 34,\n * `TooltipTrigger` 34, `TooltipContent` 34, `TooltipProvider` 23. `side`\n * is passed 12 times: `\"top\"` 11, `\"bottom\"` once.\n *\n * `TooltipProvider` IS NOT PORTED, and that removes 23 call sites rather\n * than renaming them. The legacy `Tooltip` already wraps itself in a\n * provider, so every explicit `<TooltipProvider>` in app code nested a\n * second one inside the first -- harmless, but it also meant the\n * `skipDelayDuration` grouping the provider exists for never spanned two\n * tooltips. React Aria has no provider at all; that grouping is\n * module-global.\n *\n * THE DELAY IS THE ONE THING THAT WOULD HAVE CHANGED SILENTLY. The legacy\n * provider hardcodes `delayDuration = 0`, so all 34 tooltips appear\n * instantly on hover. React Aria's default is 1500ms. Porting without\n * noticing would have put a 1.5-second warm-up on every tooltip in the\n * app, and neither the type system nor the test suite would have said a\n * word -- so `delay` defaults to 0 here, and a story pins the default.\n */\nexport const tooltipVariants = cva([\n  \"w-fit rounded-md px-3 py-1.5\",\n  // The legacy palette, kept: primary-foreground on primary is 8.35:1 and\n  // is already in the contrast contract. An inverse-surface tooltip is the\n  // more common choice, but changing it would be a design decision with no\n  // defect behind it.\n  \"bg-primary text-primary-foreground\",\n  \"box-border font-sans text-xs leading-(--leading-snug) text-balance\",\n  \"outline-none\",\n]);\n\n/**\n * A hover and focus hint.\n *\n * @example\n * <TooltipTrigger>\n *   <Button aria-label=\"Mute\"><MicOff /></Button>\n *   <Tooltip>Mute</Tooltip>\n * </TooltipTrigger>\n */\nexport interface TooltipProps\n  extends Omit<AriaTooltipProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens. The legacy `side` prop: `\"top\"` 11 times, `\"bottom\"`\n   * once, and the default for the other 22.\n   *\n   * @default \"top\"\n   */\n  placement?: AriaTooltipProps[\"placement\"];\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  { children, className, placement = \"top\", ...props },\n  ref,\n) {\n  return (\n    <AriaTooltip\n      // The ref goes on the tooltip itself, not the OverlayArrow child below\n      // -- the arrow is a decorative sub-element, not the tooltip's own DOM\n      // node.\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={8}\n      data-slot=\"tooltip\"\n      className={cn(tooltipVariants(), className)}\n    >\n      {/*\n        An SVG arrow, not the legacy rotated square. That used\n        `translate-y-[calc(-50%_-_2px)]` and `rounded-[2px]` -- two bracket\n        values check:hardcoding rejects -- and a rotated box has to be\n        re-placed for every side. React Aria rotates the whole OverlayArrow\n        per placement, so one upward triangle serves all four.\n      */}\n      <AriaOverlayArrow data-slot=\"tooltip-arrow\">\n        <svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\" className=\"fill-primary\">\n          <path d=\"M0 5 5 0l5 5z\" />\n        </svg>\n      </AriaOverlayArrow>\n      {children}\n    </AriaTooltip>\n  );\n});\n\n/**\n * Pairs a trigger with a tooltip.\n *\n * React Aria's `TooltipTrigger`, EXCEPT that `delay` and `closeDelay`\n * default to 0 to match the legacy provider. React Aria ships 1500ms and\n * 500ms; taking those defaults would have changed all 34 call sites\n * without a word.\n *\n * Focus opens it immediately whatever `delay` says -- React Aria passes\n * `immediate` on focus -- which is the behaviour a keyboard user needs.\n */\nexport interface TooltipTriggerProps extends AriaTooltipTriggerProps {\n  /** Hover warm-up in ms. @default 0 */\n  delay?: number;\n  /** Hover cool-down in ms. @default 0 */\n  closeDelay?: number;\n}\n\nexport function TooltipTrigger({ delay = 0, closeDelay = 0, ...props }: TooltipTriggerProps) {\n  return <AriaTooltipTrigger {...props} delay={delay} closeDelay={closeDelay} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,kBAAkB,IAAI;CACjC;CAKA;CACA;CACA;AACF,CAAC;AAyBD,MAAaA,YAAU,WAAyC,SAASA,UACvE,EAAE,UAAU,WAAW,YAAY,OAAO,GAAG,SAC7C,KACA;CACA,OACE,qBAACC,SAAD;EAIO;EACL,GAAI;EACO;EACX,QAAQ;EACR,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;EAT5C,UAAA,CAkBE,oBAACC,cAAD;GAAkB,aAAU;GAC1B,UAAA,oBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAI,SAAQ;IAAW,WAAU;IACtD,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;GACtB,CAAA;EACW,CAAA,GACjB,QACU;;AAEjB,CAAC;AAoBD,SAAgBC,iBAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,GAAG,SAA8B;CAC3F,OAAO,oBAACC,gBAAD;EAAoB,GAAI;EAAc;EAAmB;CAAa,CAAA;AAC/E"}
+{"version":3,"file":"tooltip.js","names":["Tooltip","AriaTooltip","AriaOverlayArrow","TooltipTrigger","AriaTooltipTrigger"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useRef, type ReactNode } from \"react\";\nimport {\n  OverlayArrow as AriaOverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  type TooltipProps as AriaTooltipProps,\n  type TooltipTriggerComponentProps as AriaTooltipTriggerProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\n/**\n * Tooltip, ported from the legacy shadcn/Radix component.\n *\n * Census: ten files import it but only SEVEN render anything -- three\n * import the parts and use none. Across those seven: `Tooltip` 34,\n * `TooltipTrigger` 34, `TooltipContent` 34, `TooltipProvider` 23. `side`\n * is passed 12 times: `\"top\"` 11, `\"bottom\"` once.\n *\n * `TooltipProvider` IS NOT PORTED, and that removes 23 call sites rather\n * than renaming them. The legacy `Tooltip` already wraps itself in a\n * provider, so every explicit `<TooltipProvider>` in app code nested a\n * second one inside the first -- harmless, but it also meant the\n * `skipDelayDuration` grouping the provider exists for never spanned two\n * tooltips. React Aria has no provider at all; that grouping is\n * module-global.\n *\n * THE DELAY IS THE ONE THING THAT WOULD HAVE CHANGED SILENTLY. The legacy\n * provider hardcodes `delayDuration = 0`, so all 34 tooltips appear\n * instantly on hover. React Aria's default is 1500ms. Porting without\n * noticing would have put a 1.5-second warm-up on every tooltip in the\n * app, and neither the type system nor the test suite would have said a\n * word -- so `delay` defaults to 0 here, and a story pins the default.\n */\nexport const tooltipVariants = cva([\n  // Design spec (Oct 2026): a solid ink bubble with a large corner and\n  // comfortable padding, capped at 15rem so a long hint wraps onto a second line.\n  \"w-fit max-w-60 rounded-control px-4 py-3\",\n  // foreground/background, not a fixed black and white: the pair inverts with\n  // the theme (light bubble in dark mode) and its ratio is the page-text pair\n  // in the contrast contract.\n  \"bg-foreground text-background shadow-raised\",\n  \"box-border font-sans text-sm leading-(--leading-normal) text-balance\",\n  \"outline-none\",\n  // Rises from its trigger and fades; only fades in the warm window (styles.css).\n  \"tooltip-motion\",\n]);\n\n/*\n * The warm window: while any tooltip is open, and for 300ms after the last one\n * closes, the next opens with no travel. TooltipTrigger writes it; the tooltip\n * that mounts next reads whether it was warm when its trigger opened it.\n */\nconst WARM_MS = 300;\nlet openCount = 0;\nlet coolTimer: ReturnType<typeof setTimeout> | undefined;\nlet warm = false;\nlet openedWarm = false;\n\nfunction noteOpen(open: boolean) {\n  if (open) {\n    openedWarm = warm;\n    openCount += 1;\n    clearTimeout(coolTimer);\n    warm = true;\n    return;\n  }\n  openCount = Math.max(0, openCount - 1);\n  if (openCount) return;\n  clearTimeout(coolTimer);\n  coolTimer = setTimeout(() => {\n    warm = false;\n  }, WARM_MS);\n}\n\n/**\n * Mounts with the open tooltip (the Tooltip function itself runs while closed too) and\n * marks it `data-instant` if its trigger opened it inside the warm window, before paint.\n */\nfunction WarmMark() {\n  const ref = useRef<HTMLSpanElement>(null);\n  useIsomorphicLayoutEffect(() => {\n    if (openedWarm) ref.current?.parentElement?.setAttribute(\"data-instant\", \"\");\n  }, []);\n  return <span ref={ref} hidden />;\n}\n\n/**\n * A hover and focus hint.\n *\n * @example\n * <TooltipTrigger>\n *   <Button aria-label=\"Mute\"><MicOff /></Button>\n *   <Tooltip>Mute</Tooltip>\n * </TooltipTrigger>\n */\nexport interface TooltipProps\n  extends Omit<AriaTooltipProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens: above the trigger by default. The legacy `side` prop\n   * (`\"top\"` 11 times, `\"bottom\"` once).\n   *\n   * @default \"top\"\n   */\n  placement?: AriaTooltipProps[\"placement\"];\n  /**\n   * Draw a small arrow pointing at the trigger. Off by default: the bubble\n   * floats clear of the trigger with no arrow.\n   *\n   * @default false\n   */\n  showArrow?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  { children, className, placement = \"top\", showArrow = false, ...props },\n  ref,\n) {\n  return (\n    <AriaTooltip\n      // The ref goes on the tooltip itself, not the OverlayArrow child below\n      // -- the arrow is a decorative sub-element, not the tooltip's own DOM\n      // node.\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={8}\n      data-slot=\"tooltip\"\n      className={cn(tooltipVariants(), className)}\n    >\n      {/*\n        Opt-in. An SVG arrow, not the legacy rotated square. That used\n        `translate-y-[calc(-50%_-_2px)]` and `rounded-[2px]` -- two bracket\n        values check:hardcoding rejects -- and a rotated box has to be\n        re-placed for every side. React Aria rotates the whole OverlayArrow\n        per placement, so one upward triangle serves all four.\n      */}\n      {showArrow ? (\n        <AriaOverlayArrow data-slot=\"tooltip-arrow\">\n          <svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\" className=\"fill-foreground\">\n            <path d=\"M0 5 5 0l5 5z\" />\n          </svg>\n        </AriaOverlayArrow>\n      ) : null}\n      <WarmMark />\n      {children}\n    </AriaTooltip>\n  );\n});\n\n/**\n * Pairs a trigger with a tooltip.\n *\n * React Aria's `TooltipTrigger`, EXCEPT that `delay` and `closeDelay`\n * default to 0 to match the legacy provider. React Aria ships 1500ms and\n * 500ms; taking those defaults would have changed all 34 call sites\n * without a word.\n *\n * Focus opens it immediately whatever `delay` says -- React Aria passes\n * `immediate` on focus -- which is the behaviour a keyboard user needs.\n */\nexport interface TooltipTriggerProps extends AriaTooltipTriggerProps {\n  /** Hover warm-up in ms. @default 0 */\n  delay?: number;\n  /** Hover cool-down in ms. @default 0 */\n  closeDelay?: number;\n}\n\nexport function TooltipTrigger({\n  delay = 0,\n  closeDelay = 0,\n  onOpenChange,\n  ...props\n}: TooltipTriggerProps) {\n  const isOpen = useRef(false);\n  // A trigger that unmounts while open never reports closing; count it out.\n  useEffect(\n    () => () => {\n      if (isOpen.current) noteOpen(false);\n    },\n    [],\n  );\n  return (\n    <AriaTooltipTrigger\n      {...props}\n      delay={delay}\n      closeDelay={closeDelay}\n      onOpenChange={(open) => {\n        isOpen.current = open;\n        noteOpen(open);\n        onOpenChange?.(open);\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,kBAAkB,IAAI;CAGjC;CAIA;CACA;CACA;CAEA;AACF,CAAC;AAOD,MAAM,UAAU;AAChB,IAAI,YAAY;AAChB,IAAI;AACJ,IAAI,OAAO;AACX,IAAI,aAAa;AAEjB,SAAS,SAAS,MAAe;CAC/B,IAAI,MAAM;EACR,aAAa;EACb,aAAa;EACb,aAAa,SAAS;EACtB,OAAO;EACP;CACF;CACA,YAAY,KAAK,IAAI,GAAG,YAAY,CAAC;CACrC,IAAI,WAAW;CACf,aAAa,SAAS;CACtB,YAAY,iBAAiB;EAC3B,OAAO;CACT,GAAG,OAAO;AACZ;;;;;AAMA,SAAS,WAAW;CAClB,MAAM,MAAM,OAAwB,IAAI;CACxC,gCAAgC;EAC9B,IAAI,YAAY,IAAI,SAAS,eAAe,aAAa,gBAAgB,EAAE;CAC7E,GAAG,CAAC,CAAC;CACL,OAAO,oBAAC,QAAD;EAAW;EAAK,QAAA;CAAQ,CAAA;AACjC;AAgCA,MAAaA,YAAU,WAAyC,SAASA,UACvE,EAAE,UAAU,WAAW,YAAY,OAAO,YAAY,OAAO,GAAG,SAChE,KACA;CACA,OACE,qBAACC,SAAD;EAIO;EACL,GAAI;EACO;EACX,QAAQ;EACR,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;EAT5C,UAAA;GAkBG,YACC,oBAACC,cAAD;IAAkB,aAAU;IAC1B,UAAA,oBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAI,SAAQ;KAAW,WAAU;KACtD,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;IACtB,CAAA;GACW,CAAA,IAChB;GACJ,oBAAC,UAAD,CAAW,CAAA;GACV;EACU;;AAEjB,CAAC;AAoBD,SAAgBC,iBAAe,EAC7B,QAAQ,GACR,aAAa,GACb,cACA,GAAG,SACmB;CACtB,MAAM,SAAS,OAAO,KAAK;CAE3B,sBACc;EACV,IAAI,OAAO,SAAS,SAAS,KAAK;CACpC,GACA,CAAC,CACH;CACA,OACE,oBAACC,gBAAD;EACE,GAAI;EACG;EACK;EACZ,eAAe,SAAS;GACtB,OAAO,UAAU;GACjB,SAAS,IAAI;GACb,eAAe,IAAI;EACrB;CACD,CAAA;AAEL"}

package/dist/treemap/index.d.ts

@@ -0,0 +1,2 @@
+import { Treemap, TreemapNode, TreemapProps } from "./treemap.js";
+export { Treemap, type TreemapNode, type TreemapProps };

package/dist/treemap/index.js

@@ -0,0 +1,2 @@
+import { Treemap } from "./treemap.js";
+export { Treemap };

package/dist/treemap/treemap.d.ts

@@ -0,0 +1,53 @@
+//#region src/treemap/treemap.d.ts
+/**
+ * Treemap: a hierarchy of parts, such as revenue by region, country and plan,
+ * when sizes matter more than exact comparisons. Tiles are laid out by the
+ * squarified algorithm (rows along the short side, each closed when another tile
+ * would make the worst aspect ratio worse), two levels at a time: the branches
+ * of the node in view, each holding its own children under a header.
+ *
+ * Tiles grow in a quick wave from the largest the first time the chart is seen.
+ * Pressing a branch (or Enter) zooms into it: the tile grows to fill the view and
+ * its children open inside it; Escape or a breadcrumb zooms back out, the view
+ * shrinking into its tile. New data moves every tile from where it is on screen.
+ * Hovering or the arrow keys read a tile in a tooltip, and the rest of its branch
+ * steps back. An optional second measure (growth, say) shades tiles in steps.
+ *
+ * Tiles are absolutely placed and sized each frame by one small spring tween, so
+ * their text never scales while they grow or shrink.
+ */
+export interface TreemapNode {
+  /** Stable identity, unique in the tree. A tile that survives a data change morphs to its new size. */
+  id: string;
+  label: string;
+  /** Leaf size. A branch's size is the sum of its children. */
+  value?: number;
+  /** Optional second measure for shading, such as growth. A branch uses the size weighted mean of its children. */
+  color?: number;
+  children?: TreemapNode[];
+}
+export interface TreemapProps {
+  /** The root. Its label names the whole in the first breadcrumb. */
+  data: TreemapNode;
+  /** What the whole is, such as "Revenue". Names the chart for assistive technology. */
+  label: string;
+  formatValue?: (value: number) => string;
+  /** Names the shading measure in the tooltip and scale, such as "Growth". Tiles take the hue of their top level branch and grow deeper with the measure. Leave it out to draw every tile at one depth. */
+  colorLabel?: string;
+  formatColor?: (value: number) => string;
+  /** Range of the colour measure. Defaults to the range of the leaves. */
+  colorDomain?: [number, number];
+  /** Controlled id of the node that fills the view. */
+  focus?: string;
+  defaultFocus?: string;
+  onFocusChange?: (id: string) => void;
+  /** Height of the tiles in pixels. @default 420 */
+  height?: number;
+  /** @default "No data yet" */
+  emptyLabel?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const Treemap: import("react").ForwardRefExoticComponent<TreemapProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=treemap.d.ts.map