@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/time-picker/time-picker.js

@@ -0,0 +1,201 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { labelVariants } from "../label/label.js";
+import { RollingValue } from "../lib/rolling-value.js";
+import { selectTriggerVariants, selectVariants } from "../select/select.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, Text, useLocale } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
+//#region src/time-picker/time-picker.tsx
+/**
+* TimePicker, a field that shows a time and opens a list of times to pick from.
+*
+* Values are `TimeValue` objects from `@internationalized/date`, as Calendar and
+* DatePicker use `DateValue` (ADR 0006), not "HH:MM" strings: a time of day has
+* no time zone or format of its own. Unlike those two, this one builds a `Time`
+* at runtime to hand back, so the package is a real (peer) dependency here and
+* not only a type.
+*
+* The control is a React Aria `Select`, so the list is a listbox with typeahead,
+* arrow keys and a roving highlight; the motion (the value rolling like a clock
+* face, the chevron, the list growing from the field) sits on top of it.
+*/
+/** The list: it grows from the field, and the highlight follows the pointer and the arrows. */
+const timePickerListVariants = cva([
+	"picker-pop w-(--trigger-width) origin-top overflow-hidden",
+	"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]",
+	"rounded-md border-(length:--border-width) border-border p-1",
+	"bg-card text-card-foreground shadow-floating",
+	"box-border font-sans text-sm leading-(--leading-normal)"
+]);
+/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */
+const timePickerItemVariants = cva([
+	"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2",
+	"rounded-2xs px-3 py-1.5 tabular-nums outline-none",
+	"text-sm leading-(--leading-normal) text-card-foreground",
+	"data-[focused]:bg-muted",
+	"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle",
+	"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)"
+]);
+const descriptionClass = "text-sm leading-(--leading-normal) text-muted-foreground";
+const pad = (value) => String(value).padStart(2, "0");
+const keyOf = (minutes) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;
+const minutesOf = (value) => value.hour * 60 + value.minute;
+function ClockGlyph() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "5.5"
+		}), /* @__PURE__ */ jsx("path", { d: "M8 5v3l2 1.5" })]
+	});
+}
+/** The chevron turns half a turn while the list is open, on the gentle spring. */
+function Chevron() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+		children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+	});
+}
+/**
+* The list of times. It opens centred on the chosen time (or at the top with
+* none), before the first frame, so there is no scroll to watch; the arrow keys
+* then keep the highlight in view, which React Aria does.
+*/
+function CenteredListBox({ children }) {
+	const ref = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const list = ref.current;
+		const chosen = list?.querySelector("[role=\"option\"][aria-selected=\"true\"]");
+		if (!list || !chosen) return;
+		list.scrollTop = chosen.offsetTop - (list.clientHeight - chosen.offsetHeight) / 2;
+	}, []);
+	return /* @__PURE__ */ jsx(ListBox, {
+		ref,
+		"data-slot": "time-picker-list",
+		className: "relative max-h-62.5 overflow-y-auto overscroll-contain outline-none",
+		children
+	});
+}
+/**
+* A time picker.
+*
+* @example
+* <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />
+*/
+const TimePicker = forwardRef(function TimePicker({ label, labelHidden, description, placeholder = "Select a time", value, defaultValue = null, onChange, minuteStep = 15, hourCycle = 12, size = "md", isDisabled, className }, ref) {
+	const { locale } = useLocale();
+	const [inner, setInner] = useState(defaultValue);
+	const current = value === void 0 ? inner : value;
+	const minutes = current ? minutesOf(current) : null;
+	const key = minutes === null ? null : keyOf(minutes);
+	const display = useMemo(() => {
+		const format = new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			minute: "2-digit",
+			hourCycle: hourCycle === 24 ? "h23" : "h12",
+			timeZone: "UTC"
+		});
+		return (total) => format.format(new Date(Date.UTC(2e3, 0, 1, Math.floor(total / 60), total % 60))).replace(/\u202f/g, " ");
+	}, [locale, hourCycle]);
+	const options = useMemo(() => {
+		const all = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, i) => i * minuteStep);
+		if (minutes !== null && !all.includes(minutes)) all.push(minutes);
+		return all.sort((a, b) => a - b);
+	}, [minuteStep, minutes]);
+	const [previous, setPrevious] = useState(minutes);
+	const [dir, setDir] = useState(1);
+	if (previous !== minutes) {
+		setPrevious(minutes);
+		setDir(minutes !== null && previous !== null && minutes < previous ? -1 : 1);
+	}
+	return /* @__PURE__ */ jsxs(Select, {
+		"data-slot": "time-picker",
+		selectedKey: key,
+		onSelectionChange: (next) => {
+			if (next == null) return;
+			const [hour = 0, minute = 0] = String(next).split(":").map(Number);
+			const time = new Time(hour, minute);
+			if (value === void 0) setInner(time);
+			onChange?.(time);
+		},
+		isDisabled,
+		placeholder,
+		className: cn(selectVariants(), className),
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				"data-slot": "time-picker-label",
+				className: cnAll(labelVariants(), labelHidden && "sr-only"),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				ref,
+				"data-slot": "time-picker-trigger",
+				className: selectTriggerVariants({ size }),
+				children: [
+					/* @__PURE__ */ jsx(ClockGlyph, {}),
+					/* @__PURE__ */ jsx(RollingValue, {
+						srValue: /* @__PURE__ */ jsx(SelectValue, {
+							"data-slot": "time-picker-value",
+							className: "sr-only",
+							children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder : selectedText
+						}),
+						swapKey: key ?? "placeholder",
+						dir: key === null ? -1 : dir,
+						children: minutes === null ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "time-picker-placeholder",
+							className: "text-muted-foreground",
+							children: placeholder
+						}) : display(minutes)
+					}),
+					/* @__PURE__ */ jsx(Chevron, {})
+				]
+			}),
+			description ? /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "time-picker-description",
+				className: descriptionClass,
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsx(Popover, {
+				"data-slot": "time-picker-popover",
+				className: timePickerListVariants(),
+				children: /* @__PURE__ */ jsx(CenteredListBox, { children: options.map((total) => /* @__PURE__ */ jsx(ListBoxItem, {
+					id: keyOf(total),
+					textValue: display(total),
+					"data-slot": "time-picker-item",
+					className: timePickerItemVariants(),
+					children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [display(total), isSelected ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "time-picker-dot",
+						className: "size-1.5 rounded-full bg-foreground"
+					}) : null] })
+				}, keyOf(total))) })
+			})
+		]
+	});
+});
+//#endregion
+export { TimePicker, timePickerItemVariants, timePickerListVariants };
+
+//# sourceMappingURL=time-picker.js.map

package/dist/time-picker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","names":["AriaListBox","AriaSelect","AriaLabel","AriaButton","AriaSelectValue","AriaText","AriaPopover","AriaListBoxItem"],"sources":["../../src/time-picker/time-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Time } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, useState } from \"react\";\nimport {\n  Button as AriaButton,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  Text as AriaText,\n  useLocale,\n  type TimeValue,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { RollingValue } from \"../lib/rolling-value.js\";\nimport { selectTriggerVariants, selectVariants } from \"../select/select.js\";\n\n/**\n * TimePicker, a field that shows a time and opens a list of times to pick from.\n *\n * Values are `TimeValue` objects from `@internationalized/date`, as Calendar and\n * DatePicker use `DateValue` (ADR 0006), not \"HH:MM\" strings: a time of day has\n * no time zone or format of its own. Unlike those two, this one builds a `Time`\n * at runtime to hand back, so the package is a real (peer) dependency here and\n * not only a type.\n *\n * The control is a React Aria `Select`, so the list is a listbox with typeahead,\n * arrow keys and a roving highlight; the motion (the value rolling like a clock\n * face, the chevron, the list growing from the field) sits on top of it.\n */\n\n/** The list: it grows from the field, and the highlight follows the pointer and the arrows. */\nexport const timePickerListVariants = cva([\n  \"picker-pop w-(--trigger-width) origin-top overflow-hidden\",\n  // A little less offset than a date picker: this list sits close under its field.\n  \"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]\",\n  \"rounded-md border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\n/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */\nexport const timePickerItemVariants = cva([\n  \"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2\",\n  \"rounded-2xs px-3 py-1.5 tabular-nums outline-none\",\n  \"text-sm leading-(--leading-normal) text-card-foreground\",\n  \"data-[focused]:bg-muted\",\n  \"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nconst descriptionClass = \"text-sm leading-(--leading-normal) text-muted-foreground\";\n\nconst pad = (value: number) => String(value).padStart(2, \"0\");\nconst keyOf = (minutes: number) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;\nconst minutesOf = (value: TimeValue) => value.hour * 60 + value.minute;\n\nfunction ClockGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground\"\n    >\n      <circle cx=\"8\" cy=\"8\" r=\"5.5\" />\n      <path d=\"M8 5v3l2 1.5\" />\n    </svg>\n  );\n}\n\n/** The chevron turns half a turn while the list is open, on the gentle spring. */\nfunction Chevron() {\n  return (\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      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\n/**\n * The list of times. It opens centred on the chosen time (or at the top with\n * none), before the first frame, so there is no scroll to watch; the arrow keys\n * then keep the highlight in view, which React Aria does.\n */\nfunction CenteredListBox({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  useIsomorphicLayoutEffect(() => {\n    const list = ref.current;\n    const chosen = list?.querySelector<HTMLElement>('[role=\"option\"][aria-selected=\"true\"]');\n    if (!list || !chosen) return;\n    list.scrollTop = chosen.offsetTop - (list.clientHeight - chosen.offsetHeight) / 2;\n  }, []);\n  return (\n    <AriaListBox\n      ref={ref}\n      data-slot=\"time-picker-list\"\n      className=\"relative max-h-62.5 overflow-y-auto overscroll-contain outline-none\"\n    >\n      {children}\n    </AriaListBox>\n  );\n}\n\nexport interface TimePickerProps {\n  /** What is being chosen, and the control's accessible name. Required, as on Select. */\n  label: string;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Help text under the control, named in `aria-describedby`. */\n  description?: string;\n  /** Shown while no time is chosen. @default \"Select a time\" */\n  placeholder?: string;\n  /** The chosen time. Controlled: pass `null` for none. */\n  value?: TimeValue | null;\n  /** The starting time when uncontrolled. @default null */\n  defaultValue?: TimeValue | null;\n  /** Called with the chosen time, as a `Time`. */\n  onChange?: (value: TimeValue) => void;\n  /** Minutes between the times in the list. @default 15 */\n  minuteStep?: 1 | 5 | 10 | 15 | 30;\n  /** 12-hour (9:00 AM) or 24-hour (09:00) times. @default 12 */\n  hourCycle?: 12 | 24;\n  /** Control scale of the trigger. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Disable the control. */\n  isDisabled?: boolean;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/**\n * A time picker.\n *\n * @example\n * <TimePicker label=\"Start time\" value={time} onChange={setTime} minuteStep={30} />\n */\nexport const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(function TimePicker(\n  {\n    label,\n    labelHidden,\n    description,\n    placeholder = \"Select a time\",\n    value,\n    defaultValue = null,\n    onChange,\n    minuteStep = 15,\n    hourCycle = 12,\n    size = \"md\",\n    isDisabled,\n    className,\n  },\n  ref,\n) {\n  const { locale } = useLocale();\n  const [inner, setInner] = useState<TimeValue | null>(defaultValue);\n  const current = value === undefined ? inner : value;\n  const minutes = current ? minutesOf(current) : null;\n  const key = minutes === null ? null : keyOf(minutes);\n\n  const display = useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n      hourCycle: hourCycle === 24 ? \"h23\" : \"h12\",\n      timeZone: \"UTC\",\n    });\n    return (total: number) =>\n      format\n        .format(new Date(Date.UTC(2000, 0, 1, Math.floor(total / 60), total % 60)))\n        .replace(/\\u202f/g, \" \");\n  }, [locale, hourCycle]);\n\n  // The list: every step of the day, plus the current time if it falls between steps.\n  const options = useMemo(() => {\n    const all = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, i) => i * minuteStep);\n    if (minutes !== null && !all.includes(minutes)) all.push(minutes);\n    return all.sort((a, b) => a - b);\n  }, [minuteStep, minutes]);\n\n  // Which way the time moved, so the shown value rolls like a clock face.\n  const [previous, setPrevious] = useState(minutes);\n  const [dir, setDir] = useState(1);\n  if (previous !== minutes) {\n    setPrevious(minutes);\n    setDir(minutes !== null && previous !== null && minutes < previous ? -1 : 1);\n  }\n\n  return (\n    <AriaSelect\n      data-slot=\"time-picker\"\n      selectedKey={key}\n      onSelectionChange={(next) => {\n        if (next == null) return;\n        const [hour = 0, minute = 0] = String(next).split(\":\").map(Number);\n        const time = new Time(hour, minute);\n        if (value === undefined) setInner(time);\n        onChange?.(time);\n      }}\n      isDisabled={isDisabled}\n      placeholder={placeholder}\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"time-picker-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <AriaButton ref={ref} data-slot=\"time-picker-trigger\" className={selectTriggerVariants({ size })}>\n        <ClockGlyph />\n        <RollingValue\n          srValue={\n            <AriaSelectValue data-slot=\"time-picker-value\" className=\"sr-only\">\n              {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n            </AriaSelectValue>\n          }\n          swapKey={key ?? \"placeholder\"}\n          dir={key === null ? -1 : dir}\n        >\n          {minutes === null ? (\n            <span data-slot=\"time-picker-placeholder\" className=\"text-muted-foreground\">\n              {placeholder}\n            </span>\n          ) : (\n            display(minutes)\n          )}\n        </RollingValue>\n        <Chevron />\n      </AriaButton>\n      {description ? (\n        <AriaText slot=\"description\" data-slot=\"time-picker-description\" className={descriptionClass}>\n          {description}\n        </AriaText>\n      ) : null}\n      <AriaPopover data-slot=\"time-picker-popover\" className={timePickerListVariants()}>\n        <CenteredListBox>\n          {options.map((total) => (\n            <AriaListBoxItem\n              key={keyOf(total)}\n              id={keyOf(total)}\n              textValue={display(total)}\n              data-slot=\"time-picker-item\"\n              className={timePickerItemVariants()}\n            >\n              {({ isSelected }) => (\n                <>\n                  {display(total)}\n                  {isSelected ? (\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"time-picker-dot\"\n                      className=\"size-1.5 rounded-full bg-foreground\"\n                    />\n                  ) : null}\n                </>\n              )}\n            </AriaListBoxItem>\n          ))}\n        </CenteredListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n"],"mappings":"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"}

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,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useExitBackstop } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
+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
@@ -44,8 +46,8 @@ 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"
+	"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",
@@ -59,6 +61,7 @@ const toastVariants = cva([
 const toastCloseVariants = cva([
 	"ms-auto shrink-0 rounded-sm cursor-pointer",
 	"text-current opacity-70 data-[hovered]:opacity-100",
+	"toast-close",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -90,55 +93,74 @@ function toast(content, timeout = 5e3) {
 	return toastQueue.add(content, timeout === 0 ? void 0 : { timeout });
 }
 /**
+* 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.
+*/
+function ToastItem({ queued, closeLabel }) {
+	const [closing, setClosing] = useState(false);
+	const finish = useCallback(() => toastQueue.close(queued.key), [queued.key]);
+	useExitBackstop(closing, finish);
+	return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
+		toast: queued,
+		"data-slot": "toast",
+		"data-tone": queued.content.tone ?? "neutral",
+		"data-closing": closing || void 0,
+		onAnimationEnd: (event) => {
+			if (closing && event.target === event.currentTarget) finish();
+		},
+		className: toastVariants({ tone: queued.content.tone }),
+		children: [/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
+			"data-slot": "toast-content",
+			className: "flex min-w-0 flex-col gap-1",
+			children: [/* @__PURE__ */ jsx(Text, {
+				slot: "title",
+				"data-slot": "toast-title",
+				className: "text-sm leading-(--leading-snug) font-medium",
+				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",
+				children: queued.content.description
+			})]
+		}), /* @__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",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.75",
+				strokeLinecap: "round",
+				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.
 */
-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",
 		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, {
-				"data-slot": "toast-content",
-				className: "flex min-w-0 flex-col gap-1",
-				children: [/* @__PURE__ */ jsx(Text, {
-					slot: "title",
-					"data-slot": "toast-title",
-					className: "text-sm leading-(--leading-snug) font-medium",
-					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",
-					children: queued.content.description
-				})]
-			}), /* @__PURE__ */ jsx(Button, {
-				slot: "close",
-				"aria-label": closeLabel,
-				"data-slot": "toast-close",
-				className: toastCloseVariants(),
-				children: /* @__PURE__ */ jsx("svg", {
-					"aria-hidden": "true",
-					viewBox: "0 0 16 16",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: "1.75",
-					strokeLinecap: "round",
-					className: "size-(--icon-sm)",
-					children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
-				})
-			})]
+		children: ({ toast: queued }) => /* @__PURE__ */ jsx(ToastItem, {
+			queued,
+			closeLabel
 		})
 	});
-}
+});
 //#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","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    \"rounded-md border-(length:--border-width) p-(--density-bar-pad-x)\",\n    \"font-sans shadow-surface\",\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      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  // 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}\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 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={queued.content.tone ?? \"neutral\"}\n      data-closing={closing || undefined}\n      onAnimationEnd={(event) => {\n        if (closing && event.target === event.currentTarget) finish();\n      }}\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        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;CACA;CACA;CAIA;CACA;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;CAEA;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;;;;;;AASA,SAAS,UAAU,EAAE,QAAQ,cAAsD;CACjF,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,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,OAAO,QAAQ,QAAQ;EAClC,gBAAc,WAAW,KAAA;EACzB,iBAAiB,UAAU;GACzB,IAAI,WAAW,MAAM,WAAW,MAAM,eAAe,OAAO;EAC9D;EACA,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,KAAK,CAAC;EARxD,UAAA,CAUE,qBAACC,uBAAD;GAAkB,aAAU;GAAgB,WAAU;GAAtD,UAAA,CAKE,oBAACC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IAET,UAAA,OAAO,QAAQ;GACR,CAAA,GACT,OAAO,QAAQ,eAAe,OAAO,OACpC,oBAACA,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IAET,UAAA,OAAO,QAAQ;GACR,CAAA,CAEI;EAClB,CAAA,GAAA,oBAACC,QAAD;GACE,cAAY;GACZ,aAAU;GACV,WAAW,mBAAmB;GAC9B,eAAe,WAAW,IAAI;GAE9B,UAAA,oBAAC,OAAD;IACE,eAAY;IACZ,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;GAC3B,CAAA;EACK,CAAA,CACH;;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

@@ -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.
  *
@@ -64,7 +64,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,6 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
+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
@@ -31,32 +33,81 @@ 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"
+	"outline-none",
+	"tooltip-motion"
 ]);
-function Tooltip$1({ children, className, placement = "top", ...props }) {
+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", ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Tooltip, {
+		ref,
 		...props,
 		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: [
+			/* @__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" })
+				})
+			}),
+			/* @__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 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, 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  \"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  // 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. 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      <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;CACjC;CAKA;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;AAyBA,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;GAkBE,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;GAClB,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"}