@seekalfred/primitives 0.5.0 → 0.5.1

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["AriaTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  TextArea as AriaTextArea,\n  type TextAreaProps as AriaTextAreaProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Textarea, ported from the legacy component onto React Aria's TextArea.\n *\n * Census: 3 files, 3 uses -- `value`, `onChange`, `placeholder`, `id`,\n * `ref`. All native props, all still native here.\n *\n * The surface comes from `fieldSurfaceVariants`, shared with Input. The two\n * legacy files styled it separately and had already drifted -- different\n * background, different focus ring, invalid styling on one and not the\n * other -- and none of those differences was a decision anyone made.\n */\nexport const textareaVariants = cva([\n  fieldSurfaceVariants(),\n\n  // min-h-20 is 80px, the legacy min-h-[80px] -- but as a spacing-scale step\n  // rather than a bracket value, which check:hardcoding rejects.\n  \"min-h-20\",\n  \"px-(--density-control-pad-md) py-(--density-control-pad-sm)\",\n  \"text-base\",\n\n  // A textarea is resizable by the user agent, and horizontal resize breaks\n  // any layout it sits in. Vertical only.\n  \"resize-y\",\n  // Height is content, not a control slot, so the line-height has to be set\n  // explicitly -- unset it computes to `normal`, which varies with the\n  // font's own metrics.\n  \"leading-(--leading-normal)\",\n]);\n\n/**\n * A multi-line text field.\n *\n * @example\n * <Textarea placeholder=\"Tell us more\" value={v} onChange={e => set(e.target.value)} />\n */\nexport interface TextareaProps extends Omit<AriaTextAreaProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function Textarea({ className, ...props }: TextareaProps) {\n  return (\n    <AriaTextArea {...props} data-slot=\"textarea\" className={cn(textareaVariants(), className)} />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,MAAa,mBAAmB,IAAI;CAClC,qBAAqB;CAIrB;CACA;CACA;CAIA;CAIA;AACF,CAAC;AAaD,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OACE,oBAACA,UAAD;EAAc,GAAI;EAAO,aAAU;EAAW,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAAI,CAAA;AAEjG"}
+{"version":3,"file":"textarea.js","names":["AriaTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport {\n  TextArea as AriaTextArea,\n  type TextAreaProps as AriaTextAreaProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Textarea, ported from the legacy component onto React Aria's TextArea.\n *\n * Census: 3 files, 3 uses -- `value`, `onChange`, `placeholder`, `id`,\n * `ref`. All native props, all still native here.\n *\n * The surface comes from `fieldSurfaceVariants`, shared with Input. The two\n * legacy files styled it separately and had already drifted -- different\n * background, different focus ring, invalid styling on one and not the\n * other -- and none of those differences was a decision anyone made.\n */\nexport const textareaVariants = cva([\n  fieldSurfaceVariants(),\n\n  // min-h-20 is 80px, the legacy min-h-[80px] -- but as a spacing-scale step\n  // rather than a bracket value, which check:hardcoding rejects.\n  \"min-h-20\",\n  \"px-(--density-control-pad-md) py-(--density-control-pad-sm)\",\n  \"text-base\",\n\n  // A textarea is resizable by the user agent, and horizontal resize breaks\n  // any layout it sits in. Vertical only.\n  \"resize-y\",\n  // Height is content, not a control slot, so the line-height has to be set\n  // explicitly -- unset it computes to `normal`, which varies with the\n  // font's own metrics.\n  \"leading-(--leading-normal)\",\n]);\n\n/**\n * A multi-line text field.\n *\n * @example\n * <Textarea placeholder=\"Tell us more\" value={v} onChange={e => set(e.target.value)} />\n */\nexport interface TextareaProps extends Omit<AriaTextAreaProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTextArea\n      ref={ref}\n      {...props}\n      data-slot=\"textarea\"\n      className={cn(textareaVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,mBAAmB,IAAI;CAClC,qBAAqB;CAIrB;CACA;CACA;CAIA;CAIA;AACF,CAAC;AAaD,MAAa,WAAW,WAA+C,SAAS,SAC9E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC"}

package/dist/toast/toast.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "class-variance-authority";
-import { UNSTABLE_ToastQueue } from "react-aria-components";
 import { ReactNode } from "react";
+import { UNSTABLE_ToastQueue } from "react-aria-components";
 //#region src/toast/toast.d.ts
 /**
  * Toast: a transient message, announced without stealing focus.
@@ -88,6 +88,6 @@ export interface ToastRegionProps {
  * React Aria only renders the landmark while something is queued, so this
  * costs nothing on a quiet screen.
  */
-export declare function ToastRegion({ label, closeLabel, className }: ToastRegionProps): import("react").JSX.Element;
+export declare const ToastRegion: import("react").ForwardRefExoticComponent<ToastRegionProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=toast.d.ts.map

package/dist/toast/toast.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "class-variance-authority";
+import { forwardRef } 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
@@ -95,8 +96,9 @@ function toast(content, timeout = 5e3) {
 * React Aria only renders the landmark while something is queued, so this
 * costs nothing on a quiet screen.
 */
-function ToastRegion({ label, closeLabel = "Dismiss", className }) {
+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",
@@ -138,7 +140,7 @@ function ToastRegion({ label, closeLabel = "Dismiss", className }) {
 			})]
 		})
 	});
-}
+});
 //#endregion
 export { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants };
 

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 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 function ToastRegion({ label, closeLabel = \"Dismiss\", className }: ToastRegionProps) {\n  return (\n    <AriaToastRegion\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,SAAgB,YAAY,EAAE,OAAO,aAAa,WAAW,aAA+B;CAC1F,OACE,oBAACC,sBAAD;EACE,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"}
+{"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"}

package/dist/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
-import { TooltipProps, TooltipTriggerComponentProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { TooltipProps, TooltipTriggerComponentProps } from "react-aria-components";
 //#region src/tooltip/tooltip.d.ts
 /**
  * Tooltip, ported from the legacy shadcn/Radix component.
@@ -46,7 +46,7 @@ interface TooltipProps$1 extends Omit<TooltipProps, "className" | "style" | "chi
    */
   placement?: TooltipProps["placement"];
 }
-declare function Tooltip$1({ children, className, placement, ...props }: TooltipProps$1): import("react").JSX.Element;
+declare const Tooltip$1: import("react").ForwardRefExoticComponent<TooltipProps$1 & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * Pairs a trigger with a tooltip.
  *

package/dist/tooltip/tooltip.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
 import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/tooltip/tooltip.tsx
@@ -33,8 +34,9 @@ const tooltipVariants = cva([
 	"box-border font-sans text-xs leading-(--leading-snug) text-balance",
 	"outline-none"
 ]);
-function Tooltip$1({ children, className, placement = "top", ...props }) {
+const Tooltip$1 = forwardRef(function Tooltip$2({ children, className, placement = "top", ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Tooltip, {
+		ref,
 		...props,
 		placement,
 		offset: 8,
@@ -51,7 +53,7 @@ function Tooltip$1({ children, className, placement = "top", ...props }) {
 			})
 		}), children]
 	});
-}
+});
 function TooltipTrigger$1({ delay = 0, closeDelay = 0, ...props }) {
 	return /* @__PURE__ */ jsx(TooltipTrigger, {
 		...props,

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 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 function Tooltip({ children, className, placement = \"top\", ...props }: TooltipProps) {\n  return (\n    <AriaTooltip\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,SAAgBA,UAAQ,EAAE,UAAU,WAAW,YAAY,OAAO,GAAG,SAAuB;CAC1F,OACE,qBAACC,SAAD;EACE,GAAI;EACO;EACX,QAAQ;EACR,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;EAL5C,UAAA,CAcE,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;AAoBA,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, 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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekalfred/primitives",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "license": "MIT",
   "description": "Accessible, styled primitives built on React Aria Components.",
@@ -154,7 +154,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@seekalfred/tokens": "^0.5.0",
+    "@seekalfred/tokens": "^0.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "3.6.0"
@@ -162,7 +162,7 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
     "@internationalized/date": "3.12.4",
-    "@seekalfred/styles": "^0.5.0",
+    "@seekalfred/styles": "^0.5.1",
     "@seekalfred/tsconfig": "0.0.0",
     "@size-limit/preset-small-lib": "13.0.3",
     "@storybook/react-vite": "10.6.0",