fancy-ui-react 0.2.0

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

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useAnchorPosition } from "../../internals/use-anchor-position.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { useTimePickerContext } from "./types.js";
+/* empty css                      */
+const TimePickerPanel = forwardRef(
+  function TimePickerPanel2({ className }, forwardedRef) {
+    const ctx = useTimePickerContext();
+    const [panel, setPanelNode] = useElementRef();
+    const presence = usePresence(ctx.open);
+    const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+      anchor: () => ctx.triggerRef,
+      side: "bottom",
+      align: "start",
+      offset: 4
+    });
+    useDismissable(panel, {
+      onDismiss: ctx.close,
+      exclude: () => [ctx.triggerRef],
+      active: ctx.open
+    });
+    const panelRef = useComposedRefs(
+      setPanelNode,
+      forwardedRef,
+      presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+    );
+    function rowClasses(index) {
+      return cn(
+        "ft-time-picker-option flex cursor-pointer items-center justify-between gap-2 rounded-[6px] px-[10px] py-[6px] font-mono text-foreground select-none",
+        (ctx.isSelected(index) || ctx.isActive(index)) && "bg-accent text-accent-foreground"
+      );
+    }
+    return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: ctx.panelId,
+        role: "listbox",
+        className: cn(
+          "ft-time-picker-panel border-border bg-popover text-popover-foreground flex max-h-[220px] w-max min-w-[100px] flex-col gap-[1px] overflow-y-auto rounded-[10px] border p-[5px] text-[12px] shadow-lg outline-none",
+          className
+        ),
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": "start",
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        children: ctx.slots.length === 0 ? (
+          /* Reachable when `min`/`max` exclude every generated slot — see the
+             README. A real row, not silently nothing: an empty floating panel
+             with no explanation is a worse failure than this one line. */
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground px-[10px] py-[7px] text-[12px] italic", children: "No times available." })
+        ) : ctx.slots.map((slot, index) => (
+          /*
+          	Keyboard activation for this row is not local: the trigger
+          	button owns every keydown (Enter/Space/arrow keys/Home/End)
+          	and drives selection through `aria-activedescendant`, per the
+          	ARIA combobox-with-listbox-popup pattern. A row-level keydown
+          	handler would be dead code — focus never reaches a row to fire
+          	one — not a missing affordance.
+          */
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: ctx.optionId(index),
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": ctx.isSelected(index),
+              className: rowClasses(index),
+              onClick: () => ctx.commit(index),
+              onPointerEnter: () => ctx.setActive(index),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: ctx.labelFor(slot) }),
+                ctx.isSelected(index) ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[var(--ft-field-accent)]", children: "✓" }) : null
+              ]
+            },
+            slot
+          )
+        ))
+      }
+    ) : null });
+  }
+);
+TimePickerPanel.displayName = "TimePickerPanel";
+export {
+  TimePickerPanel
+};

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from "./TimePicker.js";
+export type { TimePickerProps } from "./TimePicker.js";

package/dist/components/time-picker/time-utils.d.ts

@@ -0,0 +1,33 @@
+/** Parses "HH:mm" into total minutes since midnight. Returns `null` for anything malformed. */
+export declare function toMinutes(value: string): number | null;
+/** Formats total minutes since midnight back into zero-padded "HH:mm". */
+export declare function fromMinutes(totalMinutes: number): string;
+/**
+ * The full slot grid for `step`-minute increments, anchored at 00:00 —
+ * 00:00, 00:{step}, 00:{2*step}, ... for as long as the slot start is still
+ * within the day. A `step` that does not divide 60 or 1440 evenly (45, say)
+ * is not special-cased: the loop simply stops once the next start would
+ * reach or pass 24:00, which can leave a shorter-than-usual final gap before
+ * midnight rather than inserting a partial slot — the defined behaviour the
+ * brief asks for, documented here and in the README.
+ */
+export declare function generateSlots(step: number): string[];
+/**
+ * Keeps only the slots within `[min, max]` (either bound optional, both
+ * inclusive). A bound that does not land exactly on a generated slot simply
+ * excludes the slot straddling it, rather than inserting a synthetic one at
+ * the bound itself — same "defined, not silently magic" behaviour as
+ * `generateSlots`'s own step handling.
+ */
+export declare function filterByBounds(slots: string[], min?: string, max?: string): string[];
+/**
+ * Index of the slot to highlight when the panel opens: an exact match for
+ * `value`, else the nearest slot at or after it, else the last slot (`value`
+ * is later than every slot), else -1 (no slots at all). A `value` that does
+ * not land on a generated boundary — set programmatically while `step`
+ * doesn't divide it evenly — still resolves to a sensible neighbour instead
+ * of leaving nothing highlighted.
+ */
+export declare function nearestIndex(slots: string[], value: string | null | undefined): number;
+/** Formats "HH:mm" for display, honouring `hour12` and `locale`. The underlying value never changes shape. */
+export declare function formatSlotLabel(value: string, hour12: boolean, locale?: string): string;

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

@@ -0,0 +1,65 @@
+"use client";
+const MINUTES_PER_DAY = 24 * 60;
+function toMinutes(value) {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(value);
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;
+  return hours * 60 + minutes;
+}
+function fromMinutes(totalMinutes) {
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+function generateSlots(step) {
+  const safeStep = Math.max(1, Math.floor(step));
+  const slots = [];
+  for (let minutes = 0; minutes < MINUTES_PER_DAY; minutes += safeStep) {
+    slots.push(fromMinutes(minutes));
+  }
+  return slots;
+}
+function filterByBounds(slots, min, max) {
+  const minMinutes = min ? toMinutes(min) : null;
+  const maxMinutes = max ? toMinutes(max) : null;
+  return slots.filter((slot) => {
+    const value = toMinutes(slot);
+    if (value === null) return false;
+    if (minMinutes !== null && value < minMinutes) return false;
+    if (maxMinutes !== null && value > maxMinutes) return false;
+    return true;
+  });
+}
+function nearestIndex(slots, value) {
+  if (slots.length === 0) return -1;
+  const target = value ? toMinutes(value) : null;
+  if (target === null) return 0;
+  let best = -1;
+  for (let i = 0; i < slots.length; i++) {
+    const slotMinutes = toMinutes(slots[i]);
+    if (slotMinutes === null) continue;
+    if (slotMinutes >= target) {
+      best = i;
+      break;
+    }
+  }
+  return best === -1 ? slots.length - 1 : best;
+}
+function formatSlotLabel(value, hour12, locale) {
+  const minutes = toMinutes(value);
+  if (minutes === null) return value;
+  const reference = new Date(2e3, 0, 1, Math.floor(minutes / 60), minutes % 60);
+  return new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", hour12 }).format(
+    reference
+  );
+}
+export {
+  filterByBounds,
+  formatSlotLabel,
+  fromMinutes,
+  generateSlots,
+  nearestIndex,
+  toMinutes
+};

package/dist/components/time-picker/types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The contract between the `TimePicker` trigger and its portalled listbox
+ * panel — the same split `Select`/`SelectPanel` use, for the same reason:
+ * the root owns the slot list, the value and where the active (highlighted)
+ * index sits, and the panel only ever reads that or reports back through
+ * `setActive`/`commit`.
+ */
+export interface TimePickerContext {
+    /** Whether the panel is open. Read by the panel's own presence clock, which
+     *  needs it to tell an entrance from a departure. Also the panel's
+     *  dismissable `active` gate: the instant this flips false the layer stops
+     *  answering Escape, so a second Escape during the fade reaches whatever is
+     *  underneath instead of being swallowed by a panel that is already
+     *  leaving. */
+    readonly open: boolean;
+    /** The panel's own id — also what the trigger's `aria-controls` points at while open. */
+    readonly panelId: string;
+    /** The "HH:mm" slots to render as rows, in order. */
+    readonly slots: string[];
+    /** Index of the highlighted option, or -1 when nothing is active. */
+    readonly activeIndex: number;
+    /** Display label for a slot, honouring `hour12`/`locale`. */
+    labelFor(slot: string): string;
+    /** The real trigger button — what the panel anchors against and excludes from its own outside-click check. */
+    readonly triggerRef: HTMLElement | null;
+    /** The id a given option row must carry — also what `aria-activedescendant` points at while it's active. */
+    optionId(index: number): string;
+    /** Whether the slot at `index` is the current selection. */
+    isSelected(index: number): boolean;
+    /** Whether the slot at `index` is the highlighted (`aria-activedescendant`) one. */
+    isActive(index: number): boolean;
+    /** Highlights `index` without selecting it — a pointer hover, not a commit. */
+    setActive(index: number): void;
+    /** Selects the slot at `index` and closes the panel, the same way Enter does. */
+    commit(index: number): void;
+    /** Closes the panel without changing the value — what Escape and an outside click do. */
+    close(): void;
+}
+/**
+ * The React counterpart of the source's `TIME_PICKER_KEY` symbol: a context
+ * object plus its readers, per the internals contract's naming table
+ * (`FOO_KEY` → `FooReactContext` + `useFoo()`).
+ *
+ * Not re-exported from this folder's `index.ts`, because the source barrel
+ * does not export `TIME_PICKER_KEY` either — the trigger/panel wiring is
+ * private to the pair.
+ */
+export declare const TimePickerReactContext: import("../../internals/dom/context.js").InternalContext<TimePickerContext>;
+/** Reads the surrounding `TimePicker`'s context. Throws outside one, which is
+ *  the compound-component contract: `TimePickerPanel` is only ever rendered by
+ *  `TimePicker`, so there is no standalone-usage fallback to design for — the
+ *  same as the source's `getContext(TIME_PICKER_KEY)` with no fallback branch. */
+export declare const useTimePickerContext: () => TimePickerContext;

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

@@ -0,0 +1,10 @@
+"use client";
+import { createInternalContext } from "../../internals/dom/context.js";
+const TimePickerReactContext = createInternalContext(
+  "TimePicker context"
+);
+const useTimePickerContext = TimePickerReactContext.useRequired;
+export {
+  TimePickerReactContext,
+  useTimePickerContext
+};

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface TimelineItem {
+    id: string;
+    label: string;
+}
+export interface TimelineProps {
+    /** Timeline entries */
+    items?: TimelineItem[];
+    /** Heading text */
+    title?: string;
+    /** Subheading text */
+    description?: string;
+    /** Additional CSS classes for the outer wrapper */
+    className?: string;
+    /** Content render prop, called for each item */
+    content?: (item: TimelineItem) => ReactNode;
+}
+export declare function Timeline({ items, title, description, className, content }: TimelineProps): import("react").JSX.Element;

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { rafThrottle } from "../../internals/motion/raf.js";
+function writeProgressLine(line, progress, height) {
+  if (!line) return;
+  line.style.height = `${progress * height}px`;
+  line.style.opacity = String(Math.min(progress / 0.1, 1));
+}
+function Timeline({ items = [], title, description, className, content }) {
+  const timelineRef = useRef(null);
+  const progressRef = useRef(null);
+  const heightRef = useRef(0);
+  const progressValueRef = useRef(0);
+  const [timelineHeight, setTimelineHeight] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    function measure(el2) {
+      heightRef.current = el2.getBoundingClientRect().height;
+      setTimelineHeight(heightRef.current);
+    }
+    function updateProgress() {
+      const el2 = timelineRef.current;
+      if (!el2) return;
+      const rect = el2.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const startOffset = viewportHeight * 0.1;
+      const endOffset = viewportHeight * 0.5;
+      const start = rect.top - startOffset;
+      const end = rect.bottom - endOffset;
+      const total = end - start;
+      if (total <= 0) {
+        progressValueRef.current = 0;
+      } else {
+        const progress = -start / total;
+        progressValueRef.current = Math.max(0, Math.min(1, progress));
+      }
+      writeProgressLine(progressRef.current, progressValueRef.current, heightRef.current);
+    }
+    const el = timelineRef.current;
+    if (el) {
+      measure(el);
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (timelineRef.current) {
+        measure(timelineRef.current);
+        writeProgressLine(progressRef.current, progressValueRef.current, heightRef.current);
+      }
+    });
+    if (el) {
+      resizeObserver.observe(el);
+    }
+    const onScroll = rafThrottle(updateProgress);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    updateProgress();
+    return () => {
+      onScroll.cancel();
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full font-sans md:px-10", className), children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-4 py-20 md:px-8 lg:px-10", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 max-w-4xl text-lg md:text-4xl", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-sm text-sm md:text-base", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: timelineRef, className: "relative z-0 mx-auto max-w-7xl pb-20", children: [
+      items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex justify-start pt-10 md:gap-10 md:pt-40", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sticky top-40 z-40 flex max-w-xs flex-col items-center self-start md:w-full md:flex-row lg:max-w-sm", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-background absolute left-3 flex size-10 items-center justify-center rounded-full md:left-3", children: /* @__PURE__ */ jsx("div", { className: "size-4 rounded-full border border-neutral-300 bg-neutral-200 p-2 dark:border-neutral-700 dark:bg-neutral-800" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "hidden text-xl font-bold text-neutral-500 md:block md:pl-20 md:text-5xl dark:text-neutral-500", children: item.label })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-full pr-4 pl-20 md:pl-4", children: content ? content(item) : null })
+      ] }, `${item.id}-${index}`)),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { height: `${timelineHeight}px` },
+          className: "absolute top-0 left-8 w-[2px] overflow-hidden bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-0% via-neutral-200 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] md:left-8 dark:via-neutral-700",
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: progressRef,
+              style: { height: "0px", opacity: 0 },
+              className: "absolute inset-x-0 top-0 w-[2px] rounded-full bg-gradient-to-t from-purple-500 from-0% via-blue-500 via-10% to-transparent"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Timeline
+};

package/dist/components/timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { Timeline } from "./Timeline.js";
+export type { TimelineProps, TimelineItem } from "./Timeline.js";

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,16 @@
+import type { ToastItem } from "./store.js";
+export interface ToastProps {
+    /** The toast to render. */
+    item: ToastItem;
+    /** Additional classes for the toast panel. */
+    className?: string;
+}
+/**
+ * One toast panel. Renders what the store hands it and wires the pause /
+ * resume protocol; the entrance and exit animation belong to `<Toaster>`,
+ * whose per-item presence clock attaches to this component's forwarded ref —
+ * the React spelling of the source's two separate `in:`/`out:` directives on
+ * this same root element (a toast has no `open` boolean: its existence IS its
+ * open state, so the mount clock has to live with whatever renders the list).
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/toast/Toast.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { cn } from "../../utils.js";
+import { dismissToast, pauseToast, resumeToast } from "./store.js";
+/* empty css          */
+const VARIANT_ICON_CLASSES = {
+  success: "ft-toast-icon--success",
+  error: "ft-toast-icon--error",
+  info: "ft-toast-icon--info",
+  loading: ""
+};
+const Toast = forwardRef(function Toast2({ item, className }, forwardedRef) {
+  const hovering = useRef(false);
+  const focusedWithin = useRef(false);
+  function syncTimer() {
+    if (hovering.current || focusedWithin.current) {
+      pauseToast(item.id);
+    } else {
+      resumeToast(item.id);
+    }
+  }
+  function handlePointerEnter() {
+    hovering.current = true;
+    syncTimer();
+  }
+  function handlePointerLeave() {
+    hovering.current = false;
+    syncTimer();
+  }
+  function handleFocusIn() {
+    focusedWithin.current = true;
+    syncTimer();
+  }
+  function handleFocusOut() {
+    focusedWithin.current = false;
+    syncTimer();
+  }
+  function handleAction() {
+    item.action?.onClick();
+  }
+  function handleDismiss() {
+    dismissToast(item.id);
+  }
+  const classes = cn(
+    "ft-toast bg-popover text-popover-foreground border-border flex w-[300px] items-center gap-3 rounded-xl border p-3 shadow-[0_12px_32px_rgba(0,0,0,.5)]",
+    item.variant === "error" && "border-destructive/30",
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: forwardedRef,
+      className: classes,
+      "data-state": "open",
+      "data-variant": item.variant,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onFocus: handleFocusIn,
+      onBlur: handleFocusOut,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("ft-toast-icon flex-none text-[14px]", VARIANT_ICON_CLASSES[item.variant]),
+            "aria-hidden": "true",
+            children: item.variant === "loading" ? /* @__PURE__ */ jsx("span", { className: "ft-toast-spinner" }) : item.variant === "success" ? "✓" : item.variant === "error" ? "✕" : "ℹ"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium", children: item.title }),
+          item.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px]", children: item.description }) : null
+        ] }),
+        item.action ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ft-toast-action shrink-0 text-[12px] font-medium hover:underline",
+            onClick: handleAction,
+            children: item.action.label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-muted-foreground hover:text-foreground shrink-0 text-[12px] transition-colors",
+            "aria-label": "Dismiss",
+            onClick: handleDismiss,
+            children: "✕"
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Toast
+};

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

@@ -0,0 +1,19 @@
+export type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface ToasterProps {
+    /** Corner (or edge-center) the stack anchors to. Defaults to `"bottom-right"`. */
+    position?: ToasterPosition;
+    /** Additional classes for the viewport that stacks the toasts. */
+    className?: string;
+    /**
+     * Plays the `success`/`error` cue through the sound controller when a
+     * toast of that variant appears. Off by default; only audible once the
+     * user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The viewport: portals to `<body>`, renders the store's stack in order, and
+ * owns the two live regions plus the timer hand-off protocol (`rearm` on
+ * mount, `clear` on unmount).
+ */
+export declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/toast/Toaster.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useSyncExternalStore, useRef, useReducer, useCallback, useEffect, useState } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { JS_EASINGS, DURATIONS } from "../../internals/motion/tokens.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { toastStore, rearmToastTimers, clearAllToastTimers } from "./store.js";
+import { Toast } from "./Toast.js";
+const soundedIds = /* @__PURE__ */ new Set();
+const POSITION_CLASSES = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end"
+};
+const slide = preset("fade-up");
+function ToastSlot({ item, present, appear, onExited }) {
+  const presence = usePresence(present, {
+    appear,
+    onExitEnd: () => onExited(item.id)
+  });
+  const toastRef = presence.register(
+    slide,
+    (entering) => entering ? {
+      duration: prefersReducedMotion() ? 0 : DURATIONS.base,
+      distance: 8,
+      easing: JS_EASINGS.out
+    } : {
+      duration: prefersReducedMotion() ? 0 : DURATIONS.exit,
+      distance: 4,
+      easing: JS_EASINGS.in
+    }
+  );
+  const mounted = presence.mounted;
+  useEffect(() => {
+    if (!present && !mounted) onExited(item.id);
+  }, []);
+  if (!presence.mounted) return null;
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(Toast, { item, ref: toastRef }) });
+}
+function ToastSlots({ items, storeIds, onExited }) {
+  const initialIdsRef = useRef(null);
+  if (initialIdsRef.current === null) {
+    initialIdsRef.current = new Set(items.map((item) => item.id));
+  }
+  const initialIds = initialIdsRef.current;
+  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(
+    ToastSlot,
+    {
+      item,
+      present: storeIds.has(item.id),
+      appear: !initialIds.has(item.id),
+      onExited
+    },
+    item.id
+  )) });
+}
+function announcementText(item) {
+  return item.description ? `${item.title}. ${item.description}` : item.title;
+}
+const bumpReducer = (n) => n + 1;
+const Toaster = forwardRef(function Toaster2({ position = "bottom-right", className, sound = false }, forwardedRef) {
+  const playCue = useSoundCue(sound);
+  const storeItems = useSyncExternalStore(
+    toastStore.subscribe,
+    () => toastStore.items,
+    // `toast()` is a no-op outside the browser, so the server snapshot is
+    // the never-reassigned initial empty stack — referentially stable.
+    () => toastStore.items
+  );
+  const renderedRef = useRef([]);
+  const exitedRef = useRef(/* @__PURE__ */ new Set());
+  const [, bumpExited] = useReducer(bumpReducer, 0);
+  const storeIds = new Set(storeItems.map((item) => item.id));
+  const prev = renderedRef.current;
+  const prevIds = new Set(prev.map((item) => item.id));
+  const rendered = [];
+  for (const item of prev) {
+    if (storeIds.has(item.id) || !exitedRef.current.has(item.id)) rendered.push(item);
+  }
+  for (const item of storeItems) {
+    if (!prevIds.has(item.id)) rendered.push(item);
+  }
+  renderedRef.current = rendered;
+  const handleExited = useCallback((id) => {
+    exitedRef.current.add(id);
+    bumpExited();
+  }, []);
+  useEffect(() => {
+    const live = new Set(renderedRef.current.map((item) => item.id));
+    for (const id of [...exitedRef.current]) {
+      if (!live.has(id)) exitedRef.current.delete(id);
+    }
+  });
+  const [politeAnnouncement, setPoliteAnnouncement] = useState("");
+  const [assertiveAnnouncement, setAssertiveAnnouncement] = useState("");
+  const announcedIdsRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const current = storeItems;
+    const currentIds = new Set(current.map((item) => item.id));
+    for (const id of soundedIds) {
+      if (!currentIds.has(id)) soundedIds.delete(id);
+    }
+    for (const item of current) {
+      if (item.variant === "success" || item.variant === "error") {
+        if (!soundedIds.has(item.id)) playCue(item.variant);
+        soundedIds.add(item.id);
+      }
+      if (announcedIdsRef.current.has(item.id)) continue;
+      if (item.variant === "error") {
+        setAssertiveAnnouncement(announcementText(item));
+      } else {
+        setPoliteAnnouncement(announcementText(item));
+      }
+    }
+    announcedIdsRef.current = new Set(current.map((item) => item.id));
+  }, [storeItems, playCue]);
+  useEffect(() => {
+    rearmToastTimers();
+    return () => {
+      clearAllToastTimers();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { ref: forwardedRef, className: cn("ft-toaster contents", className), children: [
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: politeAnnouncement }),
+    /* @__PURE__ */ jsx("div", { "aria-live": "assertive", "aria-atomic": "true", className: "sr-only", children: assertiveAnnouncement }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "ft-toaster-viewport pointer-events-none fixed z-50 flex flex-col gap-2",
+          POSITION_CLASSES[position]
+        ),
+        children: /* @__PURE__ */ jsx(ToastSlots, { items: rendered, storeIds, onExited: handleExited })
+      }
+    )
+  ] }) });
+});
+export {
+  Toaster
+};