@mitcsutt/kiln-ui 0.6.0 → 0.8.0

package/dist/components/feedback/Indicator/Indicator.d.ts

@@ -0,0 +1,74 @@
+import { type HTMLAttributes, type ReactElement } from 'react';
+import { type Space, type Tone } from '../../../utils/tokens.js';
+import { type SwatchColor } from '../../display/Swatch/index.js';
+export type IndicatorPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export type IndicatorShape = 'rect' | 'round' | 'avatar';
+export interface IndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
+    /**
+     * The element the mark is pinned to: an `IconButton`, an `Avatar`, a link. It must accept
+     * `aria-describedby`, which carries `label`. Omit it to show the mark on its own, in the flow.
+     */
+    children?: ReactElement;
+    /**
+     * What the mark means, said in full: "3 unread messages", "Waiting for your answer". It's added
+     * to the child's accessible description, so the child is announced as "Inbox, 3 unread messages"
+     * rather than a bare number. Required, because a dot or a number alone is not information.
+     */
+    label: string;
+    /** A number to show. Without it the mark is a dot. */
+    count?: number;
+    /** The largest count shown in full. Above it the mark reads "99+". Default `99`. */
+    max?: number;
+    /** Show the mark when `count` is `0`. Hidden by default, since nothing is waiting. */
+    showZero?: boolean;
+    /** Hide the mark (and its description) without unmounting the child. */
+    invisible?: boolean;
+    /** Colour of the mark, from the shared tone set. Default `accent`. */
+    tone?: Tone;
+    /**
+     * Draw the mark as a colour swatch dot instead: identity, like a team's colour on an avatar,
+     * never status. A categorical slot (`1` to `8`) or a CSS colour from data. `count` and `tone`
+     * don't apply.
+     */
+    swatch?: SwatchColor;
+    /** A slow ring swells out of the mark, for something in progress. It stills under reduced motion. */
+    processing?: boolean;
+    /** Which corner, in the reading direction: `top-end` (default) is top right in English. */
+    position?: IndicatorPosition;
+    /**
+     * The child's outline, so the mark sits on its edge rather than in the empty corner of its box.
+     * `rect` (default) for square-cornered children, `round` for circles (a round `IconButton`),
+     * `avatar` to follow the theme's avatar radius.
+     */
+    shape?: IndicatorShape;
+    /** Move the mark in toward the child's centre by a space step, for a child with an empty edge. */
+    offset?: Space;
+}
+/**
+ * A count or a dot pinned to the corner of another element: unread messages on a button, a
+ * waiting dot on an avatar.
+ *
+ * @remarks
+ * `Indicator` wraps one element and places a small mark on its edge. With `count` it's a number,
+ * capped at `max` ("99+"), and hidden at zero unless you pass `showZero`. Without it, it's a dot.
+ * `invisible` hides the mark without moving or remounting the child.
+ *
+ * The mark is hidden from screen readers. What it means is `label`, which is added to the
+ * child's accessible description, so give the child its own name (an `IconButton`'s `label`, an
+ * `Avatar`'s `name`) and write `label` as the rest of the sentence.
+ *
+ * `position` is logical, so `top-end` is the top left in a right-to-left page. `shape` keeps the
+ * mark on the outline of a round child instead of floating in the corner of its box, and `offset`
+ * moves it in toward a child whose visible edge is inside its box, like a ghost `IconButton`.
+ *
+ * ## When it changes
+ *
+ * An `Indicator` doesn't announce changes: a count that speaks every time it ticks is noise.
+ * Where a change matters, such as a reply arriving, announce it where it happens. `processing`
+ * pulses a ring for something under way, and stills under reduced motion.
+ *
+ * @privateRemarks
+ * The tone colours match StatusDot and Badge's solid fill, the pulse is LiveIndicator's, and a
+ * `swatch` mark is the shared Swatch part, so the dots in the system stay one family.
+ */
+export declare const Indicator: import("react").ForwardRefExoticComponent<IndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/feedback/Indicator/Indicator.js

@@ -0,0 +1,50 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { space as n } from "../../../utils/tokens.js";
+import { joinIds as r } from "../../inputs/internal/refs.js";
+import { Swatch as i } from "../../display/Swatch/Swatch.js";
+import a from "./Indicator.module.js";
+import { cloneElement as o, forwardRef as s, isValidElement as c, useId as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/feedback/Indicator/Indicator.tsx
+var f = (e, t) => e > t ? `${String(t)}+` : String(e), p = s(function({ children: s, label: p, count: m, max: h = 99, showZero: g = !1, invisible: _ = !1, tone: v = "accent", swatch: y, processing: b = !1, position: x = "top-end", shape: S = "rect", offset: C, className: w, style: T, ...E }, D) {
+	let O = l(), k = y === void 0 && m !== void 0, A = !_ && !(k && m === 0 && !g), j = c(s), M = A ? y === void 0 ? /* @__PURE__ */ u("span", {
+		className: a.mark,
+		"data-kind": k ? "count" : "dot",
+		"data-tone": v,
+		"data-processing": b || void 0,
+		"aria-hidden": "true",
+		children: k ? f(m, h) : null
+	}) : /* @__PURE__ */ u("span", {
+		className: a.mark,
+		"data-kind": "swatch",
+		"data-processing": b || void 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u(i, {
+			color: y,
+			className: a.fill
+		})
+	}) : null;
+	return /* @__PURE__ */ d("span", {
+		ref: D,
+		className: e(a.indicator, w),
+		"data-position": x,
+		"data-shape": S,
+		"data-pinned": j || void 0,
+		style: t(C ? { "--_offset": n(C) } : void 0, T),
+		...E,
+		children: [
+			j ? o(s, { "aria-describedby": r(s.props["aria-describedby"], A ? O : void 0) }) : null,
+			M,
+			A ? /* @__PURE__ */ u("span", {
+				id: O,
+				className: a.label,
+				children: p
+			}) : null
+		]
+	});
+});
+//#endregion
+export { p as Indicator };
+
+//# sourceMappingURL=Indicator.js.map

package/dist/components/feedback/Indicator/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","names":["styles","Indicator_module_default","formatCount","count","max","Indicator","forwardRef","rest","labelId","useId","hasCount","swatch","shown","invisible","showZero","pinned","isValidElement","children","mark","tone","processing","Swatch","cx","className","position","shape","mergeStyles","offset","space","style","cloneElement","joinIds","label"],"sources":["../../../../src/components/feedback/Indicator/Indicator.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space, type Tone } from '#utils/tokens'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport { Swatch, type SwatchColor } from '#components/display/Swatch'\nimport styles from './Indicator.module.css'\n\nexport type IndicatorPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\nexport type IndicatorShape = 'rect' | 'round' | 'avatar'\n\nexport interface IndicatorProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'children' | 'color'\n> {\n  /**\n   * The element the mark is pinned to: an `IconButton`, an `Avatar`, a link. It must accept\n   * `aria-describedby`, which carries `label`. Omit it to show the mark on its own, in the flow.\n   */\n  children?: ReactElement\n  /**\n   * What the mark means, said in full: \"3 unread messages\", \"Waiting for your answer\". It's added\n   * to the child's accessible description, so the child is announced as \"Inbox, 3 unread messages\"\n   * rather than a bare number. Required, because a dot or a number alone is not information.\n   */\n  label: string\n  /** A number to show. Without it the mark is a dot. */\n  count?: number\n  /** The largest count shown in full. Above it the mark reads \"99+\". Default `99`. */\n  max?: number\n  /** Show the mark when `count` is `0`. Hidden by default, since nothing is waiting. */\n  showZero?: boolean\n  /** Hide the mark (and its description) without unmounting the child. */\n  invisible?: boolean\n  /** Colour of the mark, from the shared tone set. Default `accent`. */\n  tone?: Tone\n  /**\n   * Draw the mark as a colour swatch dot instead: identity, like a team's colour on an avatar,\n   * never status. A categorical slot (`1` to `8`) or a CSS colour from data. `count` and `tone`\n   * don't apply.\n   */\n  swatch?: SwatchColor\n  /** A slow ring swells out of the mark, for something in progress. It stills under reduced motion. */\n  processing?: boolean\n  /** Which corner, in the reading direction: `top-end` (default) is top right in English. */\n  position?: IndicatorPosition\n  /**\n   * The child's outline, so the mark sits on its edge rather than in the empty corner of its box.\n   * `rect` (default) for square-cornered children, `round` for circles (a round `IconButton`),\n   * `avatar` to follow the theme's avatar radius.\n   */\n  shape?: IndicatorShape\n  /** Move the mark in toward the child's centre by a space step, for a child with an empty edge. */\n  offset?: Space\n}\n\nconst formatCount = (count: number, max: number) =>\n  count > max ? `${String(max)}+` : String(count)\n\n/**\n * A count or a dot pinned to the corner of another element: unread messages on a button, a\n * waiting dot on an avatar.\n *\n * @remarks\n * `Indicator` wraps one element and places a small mark on its edge. With `count` it's a number,\n * capped at `max` (\"99+\"), and hidden at zero unless you pass `showZero`. Without it, it's a dot.\n * `invisible` hides the mark without moving or remounting the child.\n *\n * The mark is hidden from screen readers. What it means is `label`, which is added to the\n * child's accessible description, so give the child its own name (an `IconButton`'s `label`, an\n * `Avatar`'s `name`) and write `label` as the rest of the sentence.\n *\n * `position` is logical, so `top-end` is the top left in a right-to-left page. `shape` keeps the\n * mark on the outline of a round child instead of floating in the corner of its box, and `offset`\n * moves it in toward a child whose visible edge is inside its box, like a ghost `IconButton`.\n *\n * ## When it changes\n *\n * An `Indicator` doesn't announce changes: a count that speaks every time it ticks is noise.\n * Where a change matters, such as a reply arriving, announce it where it happens. `processing`\n * pulses a ring for something under way, and stills under reduced motion.\n *\n * @privateRemarks\n * The tone colours match StatusDot and Badge's solid fill, the pulse is LiveIndicator's, and a\n * `swatch` mark is the shared Swatch part, so the dots in the system stay one family.\n */\nexport const Indicator = forwardRef<HTMLSpanElement, IndicatorProps>(function Indicator(\n  {\n    children,\n    label,\n    count,\n    max = 99,\n    showZero = false,\n    invisible = false,\n    tone = 'accent',\n    swatch,\n    processing = false,\n    position = 'top-end',\n    shape = 'rect',\n    offset,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const labelId = useId()\n  const hasCount = swatch === undefined && count !== undefined\n  const shown = !invisible && !(hasCount && count === 0 && !showZero)\n  const pinned = isValidElement<{ 'aria-describedby'?: string }>(children)\n\n  const mark = shown ? (\n    swatch !== undefined ? (\n      <span\n        className={styles.mark}\n        data-kind=\"swatch\"\n        data-processing={processing || undefined}\n        aria-hidden=\"true\"\n      >\n        <Swatch color={swatch} className={styles.fill} />\n      </span>\n    ) : (\n      <span\n        className={styles.mark}\n        data-kind={hasCount ? 'count' : 'dot'}\n        data-tone={tone}\n        data-processing={processing || undefined}\n        aria-hidden=\"true\"\n      >\n        {hasCount ? formatCount(count, max) : null}\n      </span>\n    )\n  ) : null\n\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.indicator, className)}\n      data-position={position}\n      data-shape={shape}\n      data-pinned={pinned || undefined}\n      style={mergeStyles(\n        offset ? ({ '--_offset': space(offset) } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    >\n      {pinned\n        ? cloneElement(children, {\n            'aria-describedby': joinIds(\n              children.props['aria-describedby'],\n              shown ? labelId : undefined,\n            ),\n          })\n        : null}\n      {mark}\n      {shown ? (\n        <span id={labelId} className={styles.label}>\n          {label}\n        </span>\n      ) : null}\n    </span>\n  )\n})\n"],"mappings":";;;;;;;;;AAgEA,IAAME,KAAe,GAAe,MAClCC,IAAQC,IAAM,GAAG,OAAOA,CAAG,EAAE,KAAK,OAAOD,CAAK,GA6BnCE,IAAYC,EAA4C,SACnE,EACE,aACA,UACA,UACA,SAAM,IACN,cAAW,IACX,eAAY,IACZ,UAAO,UACP,WACA,gBAAa,IACb,cAAW,WACX,WAAQ,QACR,WACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAWC,MAAW,KAAA,KAAaR,MAAU,KAAA,GAC7CS,IAAQ,CAACC,KAAa,EAAEH,KAAYP,MAAU,KAAK,CAACW,IACpDC,IAASC,EAAgDC,CAAQ,GAEjEC,IAAON,IACXD,MAAW,KAAA,IAUT,kBAAC,QAAD;EACE,WAAWX,EAAO;EAClB,aAAWU,IAAW,UAAU;EAChC,aAAWS;EACX,mBAAiBC,KAAc,KAAA;EAC/B,eAAY;EAEX,UAAAV,IAAWR,EAAYC,GAAOC,CAAG,IAAI;CAClC,CAAA,IAjBN,kBAAC,QAAD;EACE,WAAWJ,EAAO;EAClB,aAAU;EACV,mBAAiBoB,KAAc,KAAA;EAC/B,eAAY;EAEZ,UAAA,kBAACC,GAAD;GAAQ,OAAOV;GAAQ,WAAWX,EAAO;EAAO,CAAA;CAC5C,CAAA,IAYN;CAEJ,OACE,kBAAC,QAAD;EACO;EACL,WAAWsB,EAAGtB,EAAO,WAAWuB,CAAS;EACzC,iBAAeC;EACf,cAAYC;EACZ,eAAaV,KAAU,KAAA;EACvB,OAAOW,EACLC,IAAU,EAAE,aAAaC,EAAMD,CAAM,EAAE,IAAsB,KAAA,GAC7DE,CACF;EACA,GAAItB;EAVN,UAAA;GAYGQ,IACGe,EAAab,GAAU,EACrB,oBAAoBc,EAClBd,EAAS,MAAM,qBACfL,IAAQJ,IAAU,KAAA,CACpB,EACF,CAAC,IACD;GACHU;GACAN,IACC,kBAAC,QAAD;IAAM,IAAIJ;IAAS,WAAWR,EAAO;IAClC,UAAAgC;GACG,CAAA,IACJ;EACA;;AAEV,CAAC"}

package/dist/components/feedback/Indicator/Indicator.module.js

@@ -0,0 +1,12 @@
+//#region src/components/feedback/Indicator/Indicator.module.css
+var e = "kiln-Indicator__indicator", t = "kiln-Indicator__mark", n = "kiln-Indicator__fill", r = "kiln-Indicator__ring", i = "kiln-Indicator__label", a = {
+	indicator: e,
+	mark: t,
+	fill: n,
+	ring: r,
+	label: i
+};
+//#endregion
+export { a as default, n as fill, e as indicator, i as label, t as mark, r as ring };
+
+//# sourceMappingURL=Indicator.module.js.map

package/dist/components/feedback/Indicator/Indicator.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.module.js","names":["indicator","mark","fill","ring","label","Indicator_module_default"],"sources":["../../../../src/components/feedback/Indicator/Indicator.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --indicator-ring          the gap drawn round the mark so it reads over its child,\n *                             default var(--color-surface)\n *   --indicator-dot-size      default var(--space-2)\n *   --indicator-count-size    height of a count, default var(--space-4)\n *   --indicator-radius        default var(--radius-chip)\n *   --indicator-pulse-scale   how far the processing ring swells, default 2.4\n *\n * The mark sits centred on the child's corner: the inset follows the child's outline (`shape`)\n * plus `offset`, and negative margins of half the mark's height centre it on that point. A count\n * grows inward from there, so it never needs a transform and RTL needs nothing extra.\n */\n.indicator {\n  --_offset: 0px;\n  --_inset: 0px;\n\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  vertical-align: middle;\n}\n\n/* On a circle, the point of the outline nearest the corner is 1 − 1/√2 of the radius in. */\n.indicator[data-shape='round'] {\n  --_inset: 14.645%;\n}\n.indicator[data-shape='avatar'] {\n  --_inset: calc(var(--avatar-radius, var(--radius-avatar)) * 0.2929);\n}\n\n.mark {\n  --_c: var(--color-accent);\n  --_c-ink: var(--color-accent-ink);\n  --_h: var(--indicator-dot-size, var(--space-2));\n  --_edge: calc(var(--_inset) + var(--_offset));\n\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  box-sizing: border-box;\n  min-inline-size: var(--_h);\n  block-size: var(--_h);\n  border-radius: var(--indicator-radius, var(--radius-chip));\n  background: var(--_c);\n  color: var(--_c-ink);\n  box-shadow: 0 0 0 2px var(--indicator-ring, var(--color-surface));\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-size: var(--text-2xs);\n  font-weight: var(--label-weight);\n  font-variant-numeric: tabular-nums lining-nums;\n  line-height: 1;\n  white-space: nowrap;\n  pointer-events: none;\n}\n.mark[data-kind='count'] {\n  --_h: var(--indicator-count-size, var(--space-4));\n\n  padding-inline: calc(var(--_h) / 4);\n}\n.mark[data-kind='swatch'] {\n  inline-size: var(--_h);\n  background: none;\n}\n.mark > .fill {\n  position: relative;\n  inline-size: 100%;\n  block-size: 100%;\n  border-radius: inherit;\n}\n\n.indicator[data-pinned] > .mark {\n  position: absolute;\n  z-index: 1;\n}\n.indicator[data-position^='top'] > .mark {\n  inset-block-start: var(--_edge);\n  margin-block-start: calc(var(--_h) / -2);\n}\n.indicator[data-position^='bottom'] > .mark {\n  inset-block-end: var(--_edge);\n  margin-block-end: calc(var(--_h) / -2);\n}\n.indicator[data-position$='-start'] > .mark {\n  inset-inline-start: var(--_edge);\n  margin-inline-start: calc(var(--_h) / -2);\n}\n.indicator[data-position$='-end'] > .mark {\n  inset-inline-end: var(--_edge);\n  margin-inline-end: calc(var(--_h) / -2);\n}\n\n.mark[data-tone='neutral'] {\n  --_c: var(--color-surface-inverse);\n  --_c-ink: var(--color-ink-inverse);\n}\n.mark[data-tone='positive'] {\n  --_c: var(--tone-positive);\n  --_c-ink: var(--tone-positive-ink);\n}\n.mark[data-tone='caution'] {\n  --_c: var(--tone-caution);\n  --_c-ink: var(--tone-caution-ink);\n}\n.mark[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_c-ink: var(--tone-critical-ink);\n}\n.mark[data-tone='info'] {\n  --_c: var(--tone-info);\n  --_c-ink: var(--tone-info-ink);\n}\n\n/* The same slow ring as LiveIndicator. */\n.mark[data-processing]:not([data-kind='swatch'])::after,\n.mark[data-processing] > .fill::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: currentColor;\n  color: var(--_c);\n  animation: ring calc(var(--dur-3) * 5) var(--ease-out) infinite;\n}\n.mark[data-processing] > .fill::after {\n  background: inherit;\n}\n\n@keyframes ring {\n  0% {\n    scale: 1;\n    opacity: 0.5;\n  }\n  70%,\n  100% {\n    scale: var(--indicator-pulse-scale, 2.4);\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mark[data-processing]:not([data-kind='swatch'])::after,\n  .mark[data-processing] > .fill::after {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n/* Read through the child's aria-describedby; kept in the tree for reading order. */\n.label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n@media (forced-colors: active) {\n  .mark:not([data-kind='swatch']) {\n    border: 1px solid CanvasText;\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/Indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { Indicator } from './Indicator.js';
+export type { IndicatorProps, IndicatorPosition, IndicatorShape } from './Indicator.js';

package/dist/components/feedback/Toaster/Toaster.d.ts

@@ -0,0 +1,71 @@
+export type ToastPosition = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export interface ToasterProps {
+    /** Where the toasts stack. Default `bottom-end`. */
+    position?: ToastPosition;
+    /**
+     * How many toasts show at once. Older ones beyond it wait, with their timers stopped, and come
+     * back as the newer ones close. Default 3.
+     */
+    max?: number;
+    /**
+     * Names the region for screen readers. `{hotkey}` is replaced with the shortcut. Default
+     * "Notifications ({hotkey})".
+     */
+    label?: string;
+    /** The keys that move focus to the toasts. Default `['F8']`. */
+    hotkey?: string[];
+    /** Accessible name of each toast's close button. Default "Dismiss". */
+    closeLabel?: string;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    /** Class on the region the toasts stack in. */
+    className?: string;
+}
+/**
+ * The region that shows toasts. Mount it once near the root, then raise toasts with `toast()` from
+ * anywhere.
+ *
+ * @remarks
+ * A toast tells someone that something happened away from where they're looking: a save
+ * finished, a background job failed, a link landed on the clipboard. For a message about the
+ * content beside it, use an {@link Alert | Alert} instead; it stays in the layout.
+ *
+ * ```tsx
+ * <ThemeProvider>
+ *   <App />
+ *   <Toaster />
+ * </ThemeProvider>
+ * ```
+ *
+ * Each toast has the same frame as an `Alert`: a hairline, the tone in its glyph and a short tab
+ * on the top edge. It can carry one action, such as Undo, and a close button. It closes on its
+ * own after a few seconds; `critical` toasts and loading ones stay until they're dismissed. The
+ * timer pauses while the pointer or keyboard focus is on the toasts, and while the window is in
+ * the background.
+ *
+ * Toasts are announced as they appear, and again when one changes (a loading toast turning into
+ * "Saved"). `critical` and `caution` toasts interrupt; the rest wait their turn. F8 moves focus to
+ * the region, Escape closes the focused toast, and a swipe toward the nearest edge dismisses one.
+ * The toasts take the theme of the place the `Toaster` is mounted, and slide in from that edge;
+ * with reduced motion they appear and go without moving. If more than one `Toaster` is mounted,
+ * the first one shows the toasts.
+ *
+ * ## Updating and dismissing
+ *
+ * `toast()` returns an id. `toast.update(id, options)` changes that toast, `toast.dismiss(id)`
+ * closes it, and `toast.dismiss()` closes every toast. Raising a toast with an `id` that's still on
+ * screen updates it rather than stacking a copy.
+ *
+ * `toast.promise(promise, { loading, success, error })` shows a loading toast, then turns it into
+ * the success or error message when the promise settles.
+ *
+ * @privateRemarks
+ * Radix Toast underneath (swipe, hotkey, pause, live announcements). Radix announces a toast's
+ * text once, on mount, so a changed message bumps `version` and remounts the toast under a new
+ * key; `data-updated` stops that remount from replaying the entrance. The viewport is portalled
+ * and copies the theme of a hidden anchor where the Toaster sits (usePortalTheme).
+ *
+ * <Toaster position="bottom-end" />
+ * toast({ title: 'Invoice sent', tone: 'positive' })
+ */
+export declare function Toaster({ position, max, label, hotkey, closeLabel, container, className, }: ToasterProps): import("react").JSX.Element | null;

package/dist/components/feedback/Toaster/Toaster.js

@@ -0,0 +1,121 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CircleCheckIcon as t, CloseIcon as n, ErrorIcon as r, InfoIcon as i, WarningIcon as a } from "../../../icons/icons.js";
+import { Spinner as o } from "../Spinner/Spinner.js";
+import { PortalAnchorContext as s, composeRefs as c, usePortalAnchor as l, usePortalAnchorRef as u, usePortalTheme as d } from "../../overlays/usePortalTheme.js";
+import { getServerToasts as f, getToasts as p, primaryToaster as m, registerToaster as h, subscribeToasters as g, subscribeToasts as _, toast as v } from "./toast.js";
+import y from "./Toaster.module.js";
+import { forwardRef as b, useEffect as x, useState as S, useSyncExternalStore as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Portal as E, Toast as D } from "radix-ui";
+//#region src/components/feedback/Toaster/Toaster.tsx
+var O = {
+	neutral: /* @__PURE__ */ w(i, {}),
+	info: /* @__PURE__ */ w(i, {}),
+	positive: /* @__PURE__ */ w(t, {}),
+	caution: /* @__PURE__ */ w(a, {}),
+	critical: /* @__PURE__ */ w(r, {})
+};
+function k(e) {
+	if (e.duration !== void 0) return e.duration;
+	if (e.loading || e.tone === "critical") return Infinity;
+	if (e.tone === "caution") return 8e3;
+}
+function A(e) {
+	return e.endsWith("-end") ? "right" : e.endsWith("-start") ? "left" : e.startsWith("top") ? "up" : "down";
+}
+function j({ record: e, closeLabel: t }) {
+	let r = e.tone ?? "neutral", i = r === "critical" || r === "caution";
+	return /* @__PURE__ */ T(D.Root, {
+		className: y.toast,
+		open: e.open,
+		onOpenChange: (t) => {
+			t || v.dismiss(e.id);
+		},
+		duration: k(e),
+		type: i ? "foreground" : "background",
+		"data-tone": r,
+		"data-loading": e.loading === !0 ? "" : void 0,
+		"data-updated": e.version > 0 || void 0,
+		children: [
+			/* @__PURE__ */ w("span", {
+				className: y.glyph,
+				"aria-hidden": "true",
+				children: e.loading ? /* @__PURE__ */ w(o, { label: null }) : O[r]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: y.body,
+				children: [
+					e.title === void 0 ? null : /* @__PURE__ */ w(D.Title, {
+						className: y.title,
+						children: e.title
+					}),
+					e.description === void 0 ? null : /* @__PURE__ */ w(D.Description, {
+						className: y.description,
+						children: e.description
+					}),
+					e.action ? /* @__PURE__ */ w("div", {
+						className: y.actions,
+						children: /* @__PURE__ */ w(D.Action, {
+							className: y.action,
+							altText: e.action.altText ?? e.action.label,
+							onClick: e.action.onClick,
+							children: e.action.label
+						})
+					}) : null
+				]
+			}),
+			e.dismissible === !1 ? null : /* @__PURE__ */ w(D.Close, {
+				className: y.close,
+				"aria-label": t,
+				children: /* @__PURE__ */ w(n, {})
+			})
+		]
+	});
+}
+var M = b(function({ position: t, label: n, hotkey: r, container: i, className: a }, o) {
+	let s = d(i);
+	return /* @__PURE__ */ w(D.Viewport, {
+		ref: o,
+		className: e(y.viewport, a),
+		"data-position": t,
+		label: n,
+		hotkey: r,
+		...s
+	});
+});
+function N() {
+	let e = l();
+	return /* @__PURE__ */ w("span", {
+		ref: c(e ?? void 0),
+		hidden: !0
+	});
+}
+function P({ position: e = "bottom-end", max: t = 3, label: n = "Notifications ({hotkey})", hotkey: r, closeLabel: i = "Dismiss", container: a, className: o }) {
+	let c = u(), l = C(_, p, f), [d] = S(() => ({}));
+	if (x(() => h(d), [d]), C(g, m, () => void 0) !== d) return null;
+	let v = new Set(l.filter((e) => e.open).slice(-Math.max(1, t)).map((e) => e.id)), y = l.filter((e) => !e.open || v.has(e.id));
+	return /* @__PURE__ */ T(s.Provider, {
+		value: c,
+		children: [/* @__PURE__ */ w(N, {}), /* @__PURE__ */ T(D.Provider, {
+			swipeDirection: A(e),
+			label: "Notification",
+			children: [y.map((e) => /* @__PURE__ */ w(j, {
+				record: e,
+				closeLabel: i
+			}, `${e.id}:${String(e.version)}`)), /* @__PURE__ */ w(E.Root, {
+				container: a,
+				children: /* @__PURE__ */ w(M, {
+					position: e,
+					label: n,
+					hotkey: r,
+					container: a,
+					className: o
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { P as Toaster };
+
+//# sourceMappingURL=Toaster.js.map

package/dist/components/feedback/Toaster/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","names":["styles","Toaster_module_default","GLYPH","InfoIcon","CircleCheckIcon","WarningIcon","ErrorIcon","durationOf","record","swipeDirection","position","ToastItem","tone","interrupt","Toast","open","toast","Spinner","closeLabel","CloseIcon","Viewport","forwardRef","theme","usePortalTheme","container","cx","className","Anchor","anchor","usePortalAnchor","composeRefs","Toaster","usePortalAnchorRef","records","useSyncExternalStore","subscribeToasts","getToasts","getServerToasts","token","useState","useEffect","registerToaster","subscribeToasters","primaryToaster","shown","max","visible","PortalAnchorContext","Portal"],"sources":["../../../../src/components/feedback/Toaster/Toaster.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState, useSyncExternalStore, type ReactNode } from 'react'\nimport { Portal, Toast } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { CircleCheckIcon, CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from '#icons'\nimport { Spinner } from '#components/feedback/Spinner'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchor,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport {\n  getServerToasts,\n  getToasts,\n  primaryToaster,\n  registerToaster,\n  subscribeToasters,\n  subscribeToasts,\n  toast,\n  type ToastRecord,\n  type ToastTone,\n} from './toast'\nimport styles from './Toaster.module.css'\n\nexport type ToastPosition =\n  'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'\n\nexport interface ToasterProps {\n  /** Where the toasts stack. Default `bottom-end`. */\n  position?: ToastPosition\n  /**\n   * How many toasts show at once. Older ones beyond it wait, with their timers stopped, and come\n   * back as the newer ones close. Default 3.\n   */\n  max?: number\n  /**\n   * Names the region for screen readers. `{hotkey}` is replaced with the shortcut. Default\n   * \"Notifications ({hotkey})\".\n   */\n  label?: string\n  /** The keys that move focus to the toasts. Default `['F8']`. */\n  hotkey?: string[]\n  /** Accessible name of each toast's close button. Default \"Dismiss\". */\n  closeLabel?: string\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  /** Class on the region the toasts stack in. */\n  className?: string\n}\n\nconst GLYPH: Record<ToastTone, ReactNode> = {\n  neutral: <InfoIcon />,\n  info: <InfoIcon />,\n  positive: <CircleCheckIcon />,\n  caution: <WarningIcon />,\n  critical: <ErrorIcon />,\n}\n\nfunction durationOf(record: ToastRecord): number | undefined {\n  if (record.duration !== undefined) return record.duration\n  if (record.loading || record.tone === 'critical') return Infinity\n  if (record.tone === 'caution') return 8000\n  return undefined\n}\n\nfunction swipeDirection(position: ToastPosition): 'up' | 'down' | 'left' | 'right' {\n  if (position.endsWith('-end')) return 'right'\n  if (position.endsWith('-start')) return 'left'\n  return position.startsWith('top') ? 'up' : 'down'\n}\n\nfunction ToastItem({ record, closeLabel }: { record: ToastRecord; closeLabel: string }) {\n  const tone = record.tone ?? 'neutral'\n  const interrupt = tone === 'critical' || tone === 'caution'\n  return (\n    <Toast.Root\n      className={styles.toast}\n      open={record.open}\n      onOpenChange={(open) => {\n        if (!open) toast.dismiss(record.id)\n      }}\n      duration={durationOf(record)}\n      type={interrupt ? 'foreground' : 'background'}\n      data-tone={tone}\n      data-loading={record.loading === true ? '' : undefined}\n      data-updated={record.version > 0 || undefined}\n    >\n      <span className={styles.glyph} aria-hidden=\"true\">\n        {record.loading ? <Spinner label={null} /> : GLYPH[tone]}\n      </span>\n      <div className={styles.body}>\n        {record.title !== undefined ? (\n          <Toast.Title className={styles.title}>{record.title}</Toast.Title>\n        ) : null}\n        {record.description !== undefined ? (\n          <Toast.Description className={styles.description}>{record.description}</Toast.Description>\n        ) : null}\n        {record.action ? (\n          <div className={styles.actions}>\n            <Toast.Action\n              className={styles.action}\n              altText={record.action.altText ?? record.action.label}\n              onClick={record.action.onClick}\n            >\n              {record.action.label}\n            </Toast.Action>\n          </div>\n        ) : null}\n      </div>\n      {record.dismissible !== false ? (\n        <Toast.Close className={styles.close} aria-label={closeLabel}>\n          <CloseIcon />\n        </Toast.Close>\n      ) : null}\n    </Toast.Root>\n  )\n}\n\nconst Viewport = forwardRef<\n  HTMLOListElement,\n  {\n    position: ToastPosition\n    label: string\n    hotkey?: string[]\n    container?: HTMLElement | null\n    className?: string\n  }\n>(function Viewport({ position, label, hotkey, container, className }, ref) {\n  const theme = usePortalTheme(container)\n  return (\n    <Toast.Viewport\n      ref={ref}\n      className={cx(styles.viewport, className)}\n      data-position={position}\n      label={label}\n      hotkey={hotkey}\n      {...theme}\n    />\n  )\n})\n\n/** Marks where the Toaster is mounted, so the toasts take the theme of that place. */\nfunction Anchor() {\n  const anchor = usePortalAnchor()\n  return <span ref={composeRefs(anchor ?? undefined)} hidden />\n}\n\n/**\n * The region that shows toasts. Mount it once near the root, then raise toasts with `toast()` from\n * anywhere.\n *\n * @remarks\n * A toast tells someone that something happened away from where they're looking: a save\n * finished, a background job failed, a link landed on the clipboard. For a message about the\n * content beside it, use an {@link Alert | Alert} instead; it stays in the layout.\n *\n * ```tsx\n * <ThemeProvider>\n *   <App />\n *   <Toaster />\n * </ThemeProvider>\n * ```\n *\n * Each toast has the same frame as an `Alert`: a hairline, the tone in its glyph and a short tab\n * on the top edge. It can carry one action, such as Undo, and a close button. It closes on its\n * own after a few seconds; `critical` toasts and loading ones stay until they're dismissed. The\n * timer pauses while the pointer or keyboard focus is on the toasts, and while the window is in\n * the background.\n *\n * Toasts are announced as they appear, and again when one changes (a loading toast turning into\n * \"Saved\"). `critical` and `caution` toasts interrupt; the rest wait their turn. F8 moves focus to\n * the region, Escape closes the focused toast, and a swipe toward the nearest edge dismisses one.\n * The toasts take the theme of the place the `Toaster` is mounted, and slide in from that edge;\n * with reduced motion they appear and go without moving. If more than one `Toaster` is mounted,\n * the first one shows the toasts.\n *\n * ## Updating and dismissing\n *\n * `toast()` returns an id. `toast.update(id, options)` changes that toast, `toast.dismiss(id)`\n * closes it, and `toast.dismiss()` closes every toast. Raising a toast with an `id` that's still on\n * screen updates it rather than stacking a copy.\n *\n * `toast.promise(promise, { loading, success, error })` shows a loading toast, then turns it into\n * the success or error message when the promise settles.\n *\n * @privateRemarks\n * Radix Toast underneath (swipe, hotkey, pause, live announcements). Radix announces a toast's\n * text once, on mount, so a changed message bumps `version` and remounts the toast under a new\n * key; `data-updated` stops that remount from replaying the entrance. The viewport is portalled\n * and copies the theme of a hidden anchor where the Toaster sits (usePortalTheme).\n *\n * <Toaster position=\"bottom-end\" />\n * toast({ title: 'Invoice sent', tone: 'positive' })\n */\nexport function Toaster({\n  position = 'bottom-end',\n  max = 3,\n  label = 'Notifications ({hotkey})',\n  hotkey,\n  closeLabel = 'Dismiss',\n  container,\n  className,\n}: ToasterProps) {\n  const anchor = usePortalAnchorRef()\n  const records = useSyncExternalStore(subscribeToasts, getToasts, getServerToasts)\n  const [token] = useState(() => ({}))\n  useEffect(() => registerToaster(token), [token])\n  const primary = useSyncExternalStore(subscribeToasters, primaryToaster, () => undefined)\n  if (primary !== token) return null\n  // The newest `max` open toasts show; closing ones stay until their exit has played.\n  const shown = new Set(\n    records\n      .filter((record) => record.open)\n      .slice(-Math.max(1, max))\n      .map((record) => record.id),\n  )\n  const visible = records.filter((record) => !record.open || shown.has(record.id))\n  return (\n    <PortalAnchorContext.Provider value={anchor}>\n      <Anchor />\n      <Toast.Provider swipeDirection={swipeDirection(position)} label=\"Notification\">\n        {visible.map((record) => (\n          <ToastItem\n            key={`${record.id}:${String(record.version)}`}\n            record={record}\n            closeLabel={closeLabel}\n          />\n        ))}\n        <Portal.Root container={container}>\n          <Viewport\n            position={position}\n            label={label}\n            hotkey={hotkey}\n            container={container}\n            className={className}\n          />\n        </Portal.Root>\n      </Toast.Provider>\n    </PortalAnchorContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/feedback/Toaster/Toaster.module.js

@@ -0,0 +1,20 @@
+//#region src/components/feedback/Toaster/Toaster.module.css
+var e = "kiln-Toaster__viewport", t = "kiln-Toaster__toast", n = "kiln-Toaster__glyph", r = "kiln-Toaster__body", i = "kiln-Toaster__title", a = "kiln-Toaster__description", o = "kiln-Toaster__actions", s = "kiln-Toaster__action", c = "kiln-Toaster__close", l = {
+	viewport: e,
+	toast: t,
+	glyph: n,
+	body: r,
+	title: i,
+	description: a,
+	actions: o,
+	action: s,
+	close: c,
+	"toast-in": "kiln-Toaster__toast-in",
+	"toast-out": "kiln-Toaster__toast-out",
+	"toast-swipe-out": "kiln-Toaster__toast-swipe-out",
+	"toast-fade-in": "kiln-Toaster__toast-fade-in"
+};
+//#endregion
+export { s as action, o as actions, r as body, c as close, l as default, a as description, n as glyph, i as title, t as toast, e as viewport };
+
+//# sourceMappingURL=Toaster.module.js.map

package/dist/components/feedback/Toaster/Toaster.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.module.js","names":["viewport","toast","glyph","body","title","description","actions","action","close","Toaster_module_default"],"sources":["../../../../src/components/feedback/Toaster/Toaster.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --toast-width         default 24rem (capped by the viewport)\n *   --toast-radius        default var(--radius-surface)\n *   --toast-bg            default var(--color-surface-raised)\n *   --toast-edge          default var(--color-line-strong)\n *   --toast-rule-length   the tone tab on the top edge, default var(--space-6)\n *\n * A toast floats, so it takes the floating shadow; otherwise it's the Alert frame: a hairline,\n * the tone only in the glyph and a short tab set into the top edge. No tinted box, no stripe.\n * It slides in from the edge it's pinned to (the same edge a swipe sends it back to) and fades\n * out; reduced motion keeps only the fade, which the collapsed durations make instant.\n */\n.viewport {\n  --_gap: var(--space-3);\n  --_edge-gap: var(--space-5);\n\n  position: fixed;\n  z-index: var(--z-toast);\n  display: flex;\n  flex-direction: column;\n  gap: var(--_gap);\n  inline-size: min(var(--toast-width, 24rem), calc(100vw - 2 * var(--_edge-gap)));\n  max-block-size: 100vh;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  outline: none;\n}\n.viewport:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 4px;\n}\n\n.viewport[data-position^='top'] {\n  inset-block-start: var(--_edge-gap);\n  flex-direction: column-reverse;\n}\n.viewport[data-position^='bottom'] {\n  inset-block-end: var(--_edge-gap);\n}\n.viewport[data-position$='-start'] {\n  inset-inline-start: var(--_edge-gap);\n}\n.viewport[data-position$='-end'] {\n  inset-inline-end: var(--_edge-gap);\n}\n.viewport[data-position$='-center'] {\n  inset-inline-start: 50%;\n  translate: -50% 0;\n}\n\n.toast {\n  --_c: var(--tone-info);\n  --_text: var(--tone-info-text);\n  --_from-x: 0px;\n  --_from-y: 0px;\n\n  position: relative;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n  column-gap: var(--space-3);\n  padding-block: var(--space-3);\n  padding-inline: var(--space-4);\n  border: var(--border-width) solid var(--toast-edge, var(--color-line-strong));\n  border-radius: var(--toast-radius, var(--radius-surface));\n  background: var(--toast-bg, var(--color-surface-raised));\n  box-shadow: var(--shadow-float);\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n.toast:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.toast::before {\n  content: '';\n  position: absolute;\n  inset-block-start: calc(var(--border-width) * -1);\n  inset-inline-start: var(--space-4);\n  inline-size: var(--toast-rule-length, var(--space-6));\n  block-size: calc(var(--border-width) + 2px);\n  background: var(--_c);\n}\n\n.toast[data-tone='neutral'] {\n  --_c: var(--color-ink-subtle);\n  --_text: var(--color-ink-muted);\n}\n.toast[data-tone='positive'] {\n  --_c: var(--tone-positive);\n  --_text: var(--tone-positive-text);\n}\n.toast[data-tone='caution'] {\n  --_c: var(--tone-caution);\n  --_text: var(--tone-caution-text);\n}\n.toast[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_text: var(--tone-critical-text);\n}\n\n.glyph {\n  display: inline-flex;\n  block-size: calc(var(--text-md) * var(--leading-snug));\n  align-items: center;\n  color: var(--_text);\n  font-size: var(--text-lg);\n}\n.toast[data-loading] .glyph {\n  color: var(--color-ink-muted);\n  font-size: var(--text-md);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.title {\n  margin: 0;\n  color: var(--color-ink);\n  font-family: var(--heading-font);\n  font-size: var(--text-md);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  line-height: var(--leading-snug);\n  text-wrap: balance;\n}\n\n.description {\n  margin: 0;\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n.body > .description:first-child {\n  color: var(--color-ink);\n}\n\n.actions {\n  display: flex;\n  gap: var(--space-2);\n  margin-block-start: var(--space-2);\n}\n\n.action {\n  display: inline-flex;\n  align-items: center;\n  min-block-size: var(--control-sm);\n  padding-inline: var(--space-3);\n  border: var(--border-width) solid var(--color-line-control);\n  border-radius: var(--radius-action);\n  background: transparent;\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  cursor: pointer;\n  transition: background-color var(--dur-1) var(--ease-out);\n}\n@media (hover: hover) {\n  .action:hover {\n    background: var(--color-surface-sunken);\n  }\n}\n.action:focus-visible,\n.close:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.close {\n  display: grid;\n  place-items: center;\n  inline-size: var(--control-sm);\n  block-size: var(--control-sm);\n  margin-block: calc(var(--space-2) * -1);\n  margin-inline-end: calc(var(--space-2) * -1);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-action);\n  background: transparent;\n  color: var(--color-ink-muted);\n  font-size: var(--text-md);\n  cursor: pointer;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n@media (hover: hover) {\n  .close:hover {\n    background: var(--color-surface-sunken);\n    color: var(--color-ink);\n  }\n}\n\n/* ── Motion: in from the pinned edge, out by fading; a swipe follows the finger ─────── */\n.toast[data-swipe-direction='right'] {\n  --_from-x: var(--space-7);\n}\n.toast[data-swipe-direction='left'] {\n  --_from-x: calc(var(--space-7) * -1);\n}\n.toast[data-swipe-direction='up'] {\n  --_from-y: calc(var(--space-7) * -1);\n}\n.toast[data-swipe-direction='down'] {\n  --_from-y: var(--space-7);\n}\n\n.toast[data-state='open'] {\n  animation: toast-in var(--dur-3) var(--ease-out);\n}\n.toast[data-state='open'][data-updated] {\n  animation: none;\n}\n.toast[data-state='closed'] {\n  animation: toast-out var(--dur-2) var(--ease-in-out) forwards;\n}\n.toast[data-swipe='move'] {\n  translate: var(--radix-toast-swipe-move-x, 0px) var(--radix-toast-swipe-move-y, 0px);\n}\n.toast[data-swipe='cancel'] {\n  translate: 0 0;\n  transition: translate var(--dur-2) var(--ease-out);\n}\n.toast[data-swipe='end'] {\n  animation: toast-swipe-out var(--dur-2) var(--ease-out) forwards;\n}\n\n@keyframes toast-in {\n  from {\n    opacity: 0;\n    translate: var(--_from-x) var(--_from-y);\n  }\n}\n@keyframes toast-out {\n  to {\n    opacity: 0;\n  }\n}\n@keyframes toast-swipe-out {\n  from {\n    translate: var(--radix-toast-swipe-end-x, 0px) var(--radix-toast-swipe-end-y, 0px);\n  }\n  to {\n    opacity: 0;\n    translate: calc(var(--radix-toast-swipe-end-x, 0px) + var(--_from-x))\n      calc(var(--radix-toast-swipe-end-y, 0px) + var(--_from-y));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast[data-state='open'] {\n    animation-name: toast-fade-in;\n  }\n  .toast[data-swipe='end'] {\n    animation-name: toast-out;\n  }\n  .toast[data-swipe='cancel'] {\n    transition: none;\n  }\n}\n@keyframes toast-fade-in {\n  from {\n    opacity: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/Toaster/index.d.ts

@@ -0,0 +1,4 @@
+export { Toaster } from './Toaster.js';
+export type { ToasterProps, ToastPosition } from './Toaster.js';
+export { toast } from './toast.js';
+export type { ToastOptions, ToastTone, ToastAction, ToastPromiseMessage, ToastPromiseMessages, } from './toast.js';

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

@@ -0,0 +1,96 @@
+import { type ReactNode } from 'react';
+export type ToastTone = 'neutral' | 'info' | 'positive' | 'caution' | 'critical';
+export interface ToastAction {
+    /** The button's label: "Undo", "Retry", "View invoice". */
+    label: string;
+    /** Runs when the button is pressed. The toast closes afterwards. */
+    onClick: () => void;
+    /**
+     * What a screen reader user hears about how to do this without the toast, since it may have
+     * gone by the time they reach it: "Undo from the Trash page". Default: the label.
+     */
+    altText?: string;
+}
+export interface ToastOptions {
+    /**
+     * Names the toast. Raising a toast with the `id` of one still on screen updates it instead of
+     * stacking a second, so a repeated "Sync failed" shows once.
+     */
+    id?: string;
+    /** The short message, read first: "Invoice sent". */
+    title?: ReactNode;
+    /** One more sentence when the title needs it: "Kittiwake Ltd, £1,240.00". */
+    description?: ReactNode;
+    /** Meaning: the glyph and the tab on the top edge. `critical` and `caution` interrupt. Default `neutral`. */
+    tone?: ToastTone;
+    /** Shows a spinner in place of the glyph, for work still in progress. */
+    loading?: boolean;
+    /** One button, such as Undo or Retry. */
+    action?: ToastAction;
+    /**
+     * How long it stays, in milliseconds. `Infinity` keeps it until it's dismissed. Default 5000,
+     * 8000 for `caution`, and `Infinity` for `critical` and `loading`, so errors wait to be read.
+     * The timer pauses while the pointer or focus is on the toasts, and while the window is in the
+     * background.
+     */
+    duration?: number;
+    /** Show the close button. Default `true`. */
+    dismissible?: boolean;
+    /** Runs when the toast closes: on a timer, a swipe, Escape or the close button. */
+    onDismiss?: () => void;
+}
+/** A toast as the `Toaster` sees it. */
+export interface ToastRecord extends ToastOptions {
+    id: string;
+    /** `false` once it's dismissed: it plays its exit and is then removed. */
+    open: boolean;
+    /** Goes up each time the message changes, so the change is announced again. */
+    version: number;
+}
+type Listener = () => void;
+/** @internal The `Toaster`'s subscription. */
+export declare function subscribeToasts(listener: Listener): () => void;
+/** @internal The current toasts, oldest first. */
+export declare function getToasts(): ToastRecord[];
+/** @internal The server snapshot: nothing is raised during a server render. */
+export declare function getServerToasts(): ToastRecord[];
+/** A message for one stage of `toast.promise`: text, full options, or either worked out from the result. */
+export type ToastPromiseMessage<T> = ReactNode | ToastOptions | ((value: T) => ReactNode | ToastOptions);
+export interface ToastPromiseMessages<T> {
+    /** While it's pending. Shown with a spinner. */
+    loading: ReactNode | ToastOptions;
+    /** When it resolves. Shown in the `positive` tone. */
+    success: ToastPromiseMessage<T>;
+    /** When it rejects, with the error. Shown in the `critical` tone. */
+    error: ToastPromiseMessage<unknown>;
+}
+/**
+ * Raises a toast and returns its id. Takes the message as text, or full options.
+ *
+ * @remarks
+ * Call it from anywhere, inside React or out of it: an event handler, a query's error callback, a
+ * socket listener. A {@link Toaster | Toaster} mounted once near the root shows it.
+ *
+ * - `toast.update(id, options)` changes a toast on screen, such as a retry count.
+ * - `toast.dismiss(id)` closes one; `toast.dismiss()` closes them all.
+ * - `toast.promise(promise, { loading, success, error })` shows a loading toast that turns into
+ *   the success or error message when the promise settles, and returns the same promise.
+ */
+export declare function toast(message: ReactNode | ToastOptions): string;
+export declare namespace toast {
+    var update: (id: string, options: ToastOptions) => void;
+    var dismiss: (id?: string) => void;
+    var promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>) => Promise<T>;
+}
+/**
+ * @internal Registers a mounted `Toaster`. Only the first one registered shows toasts, so a page
+ * that mounts two (a docs page with several examples) doesn't show each toast twice.
+ */
+export declare function registerToaster(token: object): () => void;
+/** @internal Subscribes to changes in which `Toaster` shows toasts. */
+export declare function subscribeToasters(listener: Listener): () => void;
+/** @internal The `Toaster` that shows toasts, if any is mounted. */
+export declare function primaryToaster(): object | undefined;
+/** @internal Clears every toast at once, with no exit. For tests. */
+export declare function resetToasts(): void;
+export {};