@mitcsutt/kiln-ui 0.5.0 → 0.7.0

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 {};

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

@@ -0,0 +1,131 @@
+import { isValidElement as e } from "react";
+//#region src/components/feedback/Toaster/toast.ts
+var t = [], n = /* @__PURE__ */ new Set(), r = 0, i = 1e3;
+function a(e) {
+	t = e;
+	for (let e of n) e();
+}
+function o(e) {
+	return n.add(e), () => {
+		n.delete(e);
+	};
+}
+function s() {
+	return t;
+}
+var c = [];
+function l() {
+	return c;
+}
+function u(e, t) {
+	return [
+		"title",
+		"description",
+		"tone",
+		"loading"
+	].some((n) => n in t && t[n] !== e[n]);
+}
+function d(e) {
+	let n = e.id ?? `toast-${String(++r)}`, i = t.find((e) => e.id === n && e.open);
+	if (i) {
+		let r = u(i, e) ? i.version + 1 : i.version;
+		a(t.map((t) => t === i ? {
+			...t,
+			...e,
+			id: n,
+			version: r
+		} : t));
+	} else a([...t.filter((e) => e.id !== n), {
+		...e,
+		id: n,
+		open: !0,
+		version: 0
+	}]);
+	return n;
+}
+function f(e) {
+	let n = t.filter((t) => t.open && (e === void 0 || t.id === e));
+	if (n.length !== 0) {
+		a(t.map((e) => n.includes(e) ? {
+			...e,
+			open: !1
+		} : e));
+		for (let e of n) e.onDismiss?.();
+		setTimeout(() => {
+			a(t.filter((e) => !n.some((t) => t.id === e.id && !e.open)));
+		}, i);
+	}
+}
+function p(t) {
+	return typeof t == "object" && !!t && !e(t) && !Array.isArray(t);
+}
+function m(e, t) {
+	let n = typeof e == "function" ? e(t) : e;
+	return p(n) ? n : { title: n };
+}
+function h(e) {
+	return d(p(e) ? e : { title: e });
+}
+h.update = (e, n) => {
+	t.some((t) => t.id === e && t.open) && d({
+		...n,
+		id: e
+	});
+}, h.dismiss = (e) => {
+	f(e);
+}, h.promise = (e, t) => {
+	let n = d({
+		...m(t.loading, void 0),
+		loading: !0,
+		dismissible: !1
+	});
+	return e.then((e) => {
+		d({
+			tone: "positive",
+			duration: void 0,
+			title: void 0,
+			description: void 0,
+			action: void 0,
+			onDismiss: void 0,
+			...m(t.success, e),
+			id: n,
+			loading: !1,
+			dismissible: !0
+		});
+	}, (e) => {
+		d({
+			tone: "critical",
+			duration: void 0,
+			title: void 0,
+			description: void 0,
+			action: void 0,
+			onDismiss: void 0,
+			...m(t.error, e),
+			id: n,
+			loading: !1,
+			dismissible: !0
+		});
+	}), e;
+};
+var g = [], _ = /* @__PURE__ */ new Set();
+function v(e) {
+	g.push(e);
+	for (let e of _) e();
+	return () => {
+		let t = g.indexOf(e);
+		t >= 0 && g.splice(t, 1);
+		for (let e of _) e();
+	};
+}
+function y(e) {
+	return _.add(e), () => {
+		_.delete(e);
+	};
+}
+function b() {
+	return g[0];
+}
+//#endregion
+export { l as getServerToasts, s as getToasts, b as primaryToaster, v as registerToaster, y as subscribeToasters, o as subscribeToasts, h as toast };
+
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":["toasts","listeners","nextId","REMOVE_AFTER_MS","emit","next","listener","subscribeToasts","getToasts","EMPTY","getServerToasts","changesMessage","key","options","record","upsert","id","existing","version","close","closing","closed","isOptions","message","isValidElement","toOptions","resolved","value","toast","messages","promise","error","toasters","toasterListeners","registerToaster","token","index","subscribeToasters","primaryToaster"],"sources":["../../../../src/components/feedback/Toaster/toast.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react'\n\nexport type ToastTone = 'neutral' | 'info' | 'positive' | 'caution' | 'critical'\n\nexport interface ToastAction {\n  /** The button's label: \"Undo\", \"Retry\", \"View invoice\". */\n  label: string\n  /** Runs when the button is pressed. The toast closes afterwards. */\n  onClick: () => void\n  /**\n   * What a screen reader user hears about how to do this without the toast, since it may have\n   * gone by the time they reach it: \"Undo from the Trash page\". Default: the label.\n   */\n  altText?: string\n}\n\nexport interface ToastOptions {\n  /**\n   * Names the toast. Raising a toast with the `id` of one still on screen updates it instead of\n   * stacking a second, so a repeated \"Sync failed\" shows once.\n   */\n  id?: string\n  /** The short message, read first: \"Invoice sent\". */\n  title?: ReactNode\n  /** One more sentence when the title needs it: \"Kittiwake Ltd, £1,240.00\". */\n  description?: ReactNode\n  /** Meaning: the glyph and the tab on the top edge. `critical` and `caution` interrupt. Default `neutral`. */\n  tone?: ToastTone\n  /** Shows a spinner in place of the glyph, for work still in progress. */\n  loading?: boolean\n  /** One button, such as Undo or Retry. */\n  action?: ToastAction\n  /**\n   * How long it stays, in milliseconds. `Infinity` keeps it until it's dismissed. Default 5000,\n   * 8000 for `caution`, and `Infinity` for `critical` and `loading`, so errors wait to be read.\n   * The timer pauses while the pointer or focus is on the toasts, and while the window is in the\n   * background.\n   */\n  duration?: number\n  /** Show the close button. Default `true`. */\n  dismissible?: boolean\n  /** Runs when the toast closes: on a timer, a swipe, Escape or the close button. */\n  onDismiss?: () => void\n}\n\n/** A toast as the `Toaster` sees it. */\nexport interface ToastRecord extends ToastOptions {\n  id: string\n  /** `false` once it's dismissed: it plays its exit and is then removed. */\n  open: boolean\n  /** Goes up each time the message changes, so the change is announced again. */\n  version: number\n}\n\ntype Listener = () => void\n\nlet toasts: ToastRecord[] = []\nconst listeners = new Set<Listener>()\nlet nextId = 0\n\nconst REMOVE_AFTER_MS = 1000\n\nfunction emit(next: ToastRecord[]) {\n  toasts = next\n  for (const listener of listeners) listener()\n}\n\n/** @internal The `Toaster`'s subscription. */\nexport function subscribeToasts(listener: Listener): () => void {\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n/** @internal The current toasts, oldest first. */\nexport function getToasts(): ToastRecord[] {\n  return toasts\n}\n\nconst EMPTY: ToastRecord[] = []\n/** @internal The server snapshot: nothing is raised during a server render. */\nexport function getServerToasts(): ToastRecord[] {\n  return EMPTY\n}\n\nfunction changesMessage(record: ToastRecord, options: ToastOptions): boolean {\n  return (['title', 'description', 'tone', 'loading'] as const).some(\n    (key) => key in options && options[key] !== record[key],\n  )\n}\n\nfunction upsert(options: ToastOptions): string {\n  const id = options.id ?? `toast-${String(++nextId)}`\n  const existing = toasts.find((record) => record.id === id && record.open)\n  if (existing) {\n    const version = changesMessage(existing, options) ? existing.version + 1 : existing.version\n    emit(\n      toasts.map((record) =>\n        record === existing ? { ...record, ...options, id, version } : record,\n      ),\n    )\n  } else {\n    emit([\n      ...toasts.filter((record) => record.id !== id),\n      { ...options, id, open: true, version: 0 },\n    ])\n  }\n  return id\n}\n\nfunction close(id?: string) {\n  const closing = toasts.filter((record) => record.open && (id === undefined || record.id === id))\n  if (closing.length === 0) return\n  emit(toasts.map((record) => (closing.includes(record) ? { ...record, open: false } : record)))\n  for (const record of closing) record.onDismiss?.()\n  // Long enough for the exit animation; then the record goes.\n  setTimeout(() => {\n    emit(\n      toasts.filter((record) => !closing.some((closed) => closed.id === record.id && !record.open)),\n    )\n  }, REMOVE_AFTER_MS)\n}\n\n/** A message for one stage of `toast.promise`: text, full options, or either worked out from the result. */\nexport type ToastPromiseMessage<T> =\n  ReactNode | ToastOptions | ((value: T) => ReactNode | ToastOptions)\n\nexport interface ToastPromiseMessages<T> {\n  /** While it's pending. Shown with a spinner. */\n  loading: ReactNode | ToastOptions\n  /** When it resolves. Shown in the `positive` tone. */\n  success: ToastPromiseMessage<T>\n  /** When it rejects, with the error. Shown in the `critical` tone. */\n  error: ToastPromiseMessage<unknown>\n}\n\nfunction isOptions(message: unknown): message is ToastOptions {\n  return (\n    typeof message === 'object' &&\n    message !== null &&\n    !isValidElement(message) &&\n    !Array.isArray(message)\n  )\n}\n\nfunction toOptions<T>(message: ToastPromiseMessage<T>, value: T): ToastOptions {\n  const resolved = typeof message === 'function' ? message(value) : message\n  return isOptions(resolved) ? resolved : { title: resolved }\n}\n\n/**\n * Raises a toast and returns its id. Takes the message as text, or full options.\n *\n * @remarks\n * Call it from anywhere, inside React or out of it: an event handler, a query's error callback, a\n * socket listener. A {@link Toaster | Toaster} mounted once near the root shows it.\n *\n * - `toast.update(id, options)` changes a toast on screen, such as a retry count.\n * - `toast.dismiss(id)` closes one; `toast.dismiss()` closes them all.\n * - `toast.promise(promise, { loading, success, error })` shows a loading toast that turns into\n *   the success or error message when the promise settles, and returns the same promise.\n */\nexport function toast(message: ReactNode | ToastOptions): string {\n  return upsert(isOptions(message) ? message : { title: message })\n}\n\n/** Changes a toast that's on screen. Does nothing if it has gone. */\ntoast.update = (id: string, options: ToastOptions): void => {\n  if (toasts.some((record) => record.id === id && record.open)) upsert({ ...options, id })\n}\n\n/** Closes one toast, or every toast when no id is given. */\ntoast.dismiss = (id?: string): void => {\n  close(id)\n}\n\n/**\n * Shows a loading toast while `promise` is pending, then the success or error message in its\n * place. Returns `promise`, so you can still await it.\n */\ntoast.promise = <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T> => {\n  const id = upsert({\n    ...toOptions(messages.loading, undefined),\n    loading: true,\n    dismissible: false,\n  })\n  promise.then(\n    (value) => {\n      upsert({\n        tone: 'positive',\n        duration: undefined,\n        title: undefined,\n        description: undefined,\n        action: undefined,\n        onDismiss: undefined,\n        ...toOptions(messages.success, value),\n        id,\n        loading: false,\n        dismissible: true,\n      })\n    },\n    (error: unknown) => {\n      upsert({\n        tone: 'critical',\n        duration: undefined,\n        title: undefined,\n        description: undefined,\n        action: undefined,\n        onDismiss: undefined,\n        ...toOptions(messages.error, error),\n        id,\n        loading: false,\n        dismissible: true,\n      })\n    },\n  )\n  return promise\n}\n\nconst toasters: object[] = []\nconst toasterListeners = new Set<Listener>()\n\n/**\n * @internal Registers a mounted `Toaster`. Only the first one registered shows toasts, so a page\n * that mounts two (a docs page with several examples) doesn't show each toast twice.\n */\nexport function registerToaster(token: object): () => void {\n  toasters.push(token)\n  for (const listener of toasterListeners) listener()\n  return () => {\n    const index = toasters.indexOf(token)\n    if (index >= 0) toasters.splice(index, 1)\n    for (const listener of toasterListeners) listener()\n  }\n}\n\n/** @internal Subscribes to changes in which `Toaster` shows toasts. */\nexport function subscribeToasters(listener: Listener): () => void {\n  toasterListeners.add(listener)\n  return () => {\n    toasterListeners.delete(listener)\n  }\n}\n\n/** @internal The `Toaster` that shows toasts, if any is mounted. */\nexport function primaryToaster(): object | undefined {\n  return toasters[0]\n}\n\n/** @internal Clears every toast at once, with no exit. For tests. */\nexport function resetToasts(): void {\n  emit([])\n}\n"],"mappings":"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"}

package/dist/components/inputs/Calendar/Calendar.d.ts

@@ -0,0 +1,87 @@
+import { type HTMLAttributes } from 'react';
+import type { DateRangeValue } from '../DateRangeField/index.js';
+/** Accessible names of the calendar's own buttons. */
+export interface CalendarLabels {
+    /** Default `'Previous month'`. */
+    previousMonth: string;
+    /** Default `'Next month'`. */
+    nextMonth: string;
+}
+interface CalendarCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Earliest date that can be picked (`YYYY-MM-DD`). */
+    min?: string;
+    /** Latest date that can be picked (`YYYY-MM-DD`). */
+    max?: string;
+    /** Marks other dates unavailable: weekends, public holidays, booked nights. */
+    isDateDisabled?: (date: string) => boolean;
+    /** 0 (Sunday) to 6 (Saturday). Defaults to the locale's own week. */
+    firstDayOfWeek?: number;
+    /** BCP 47 locale for month and weekday names. Default `en-AU`. */
+    locale?: string;
+    /** The zone "today" is read in. Defaults to the device's. */
+    timeZone?: string;
+    /** How many months to show side by side (they wrap when narrow). Default `1`. */
+    months?: 1 | 2;
+    /** The first month shown (`YYYY-MM`). Controlled. */
+    month?: string;
+    /** The first month shown at first (`YYYY-MM`). Defaults to the selected or current month. */
+    defaultMonth?: string;
+    onMonthChange?: (month: string) => void;
+    disabled?: boolean;
+    /** Dates can be focused and read but not picked. */
+    readOnly?: boolean;
+    /** Focus the current day once mounted, as a picker's popover does. */
+    autoFocus?: boolean;
+    labels?: Partial<CalendarLabels>;
+}
+export interface CalendarSingleProps extends CalendarCommonProps {
+    /** `single` (default) picks one date; `range` picks a start and an end. */
+    mode?: 'single';
+    /** `YYYY-MM-DD`, or `''` for none. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface CalendarRangeProps extends CalendarCommonProps {
+    mode: 'range';
+    /** The first click sets `start` (and clears `end`), the second sets `end`. */
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onValueChange?: (value: DateRangeValue) => void;
+}
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+/**
+ * A month grid for picking a date or a range, with the full keyboard of a date grid.
+ *
+ * @remarks
+ * `Calendar` shows one or two months as a grid of days. Click a day or move with the arrow keys
+ * and press Enter. In `range` mode the first pick is the start and the second the end, with the
+ * days between shaded as you go. `min`, `max` and `isDateDisabled` mark days that can't be picked;
+ * they stay focusable, so a screen reader can still say why a date is missing. Month and weekday
+ * names come from `locale`, and so does the first day of the week unless you set
+ * `firstDayOfWeek`.
+ *
+ * {@link DateInput | DateInput}, {@link DateTimeInput | DateTimeInput} and
+ * {@link DateRangePickerField | DateRangePickerField} open it in a popover. Use it on its own for a calendar
+ * that's always visible, such as a booking page.
+ *
+ * ## Keyboard
+ *
+ * | Key | Moves to |
+ * | --- | --- |
+ * | Arrow keys | The previous or next day, or the same day in the previous or next week |
+ * | Home / End | The first or last day of the week |
+ * | Page Up / Page Down | The same day in the previous or next month |
+ * | Shift + Page Up / Page Down | The same day in the previous or next year |
+ * | Enter / Space | Picks the focused day |
+ *
+ * @privateRemarks
+ * ARIA grid pattern: one `<table role="grid">` per month, labelled by its title, with a roving
+ * tabindex on the day cells (the focused date is the only tab stop). Cells outside the month are
+ * empty, so two months side by side never show a date twice. Values are ISO strings; all date
+ * maths goes through `internal/dates` (ADR 0042).
+ *
+ * <Calendar mode="range" months={2} value={stay} onValueChange={setStay} />
+ */
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};