bits-lab 0.0.0-stage → 0.1.2

package/dist/ThinkingShimmer.js

@@ -0,0 +1,132 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-thinking";
+const CSS = `
+.bl-think { width: 100%; max-width: var(--bl-w); color: var(--bl-ink); font-family: var(--bl-font); font-size: 14px; }
+.bl-think__head { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); font: inherit; cursor: pointer; }
+.bl-think__head:hover { background: var(--bl-hover); color: var(--bl-ink); }
+.bl-think__head:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-think__shine { background: linear-gradient(90deg, var(--bl-muted) 0%, var(--bl-muted) 35%, var(--bl-shine) 50%, var(--bl-muted) 65%, var(--bl-muted) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bl-think-shine var(--bl-speed) linear infinite; }
+.bl-think__time { font-variant-numeric: tabular-nums; opacity: 0.8; }
+.bl-think__chev { transition: transform 220ms cubic-bezier(.2,.9,.25,1); }
+.bl-think__head[aria-expanded="true"] .bl-think__chev { transform: rotate(90deg); }
+.bl-think__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(.2,.9,.25,1); }
+.bl-think__panel[data-open] { grid-template-rows: 1fr; }
+.bl-think__panel > div { overflow: hidden; }
+.bl-think__steps { margin: 6px 0 4px 4px; padding: 0 0 0 16px; border-left: 2px solid var(--bl-line); list-style: none; }
+.bl-think__step { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 6px 0; }
+.bl-think__icon { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; color: var(--bl-muted); }
+.bl-think__step[data-status="done"] .bl-think__icon { color: var(--bl-success); }
+.bl-think__step[data-status="active"] .bl-think__icon { color: var(--bl-accent); }
+.bl-think__step[data-status="pending"] { opacity: 0.55; }
+.bl-think__label { line-height: 1.45; }
+.bl-think__detail { display: block; margin-top: 2px; color: var(--bl-muted); font-size: 13px; line-height: 1.5; }
+.bl-think__spin { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bl-think-spin 800ms linear infinite; }
+.bl-think__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.bl-think__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-think-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
+@keyframes bl-think-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .bl-think__shine { animation: none; color: var(--bl-muted); background: none; } .bl-think__panel, .bl-think__chev { transition: none; } .bl-think__spin { animation-duration: 2.4s; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const formatSeconds = (seconds) => seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+function ThinkingShimmer({
+  thinking = true,
+  steps = [],
+  label = "Thinking",
+  doneLabel = (seconds) => `Thought for ${formatSeconds(seconds)}`,
+  startedAt,
+  showTimer = true,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  shimmerSpeed = 1800,
+  width = 560,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  shineColor = "#f4f4f4",
+  lineColor = "rgba(255,255,255,0.12)",
+  hoverColor = "rgba(255,255,255,0.06)",
+  accentColor = "#73eff7",
+  successColor = "#38b764",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? innerOpen;
+  const began = useRef(startedAt ?? Date.now());
+  const [elapsed, setElapsed] = useState(0);
+  const [final, setFinal] = useState(null);
+  useEffect(() => {
+    if (startedAt) began.current = startedAt;
+  }, [startedAt]);
+  useEffect(() => {
+    if (!thinking) {
+      setFinal(Math.max(1, Math.round((Date.now() - began.current) / 1e3)));
+      return void 0;
+    }
+    if (final !== null) {
+      began.current = startedAt ?? Date.now();
+      setFinal(null);
+    }
+    const tick = () => setElapsed(Math.floor((Date.now() - began.current) / 1e3));
+    tick();
+    const timer = setInterval(tick, 1e3);
+    return () => clearInterval(timer);
+  }, [thinking]);
+  const toggle = () => {
+    if (controlledOpen === void 0) setInnerOpen((o) => !o);
+    onOpenChange?.(!open);
+  };
+  const icon = (status) => status === "done" ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7.5 5.5 10.5 11.5 3.5" }) }) : status === "active" ? /* @__PURE__ */ jsx("span", { className: "bl-think__spin" }) : /* @__PURE__ */ jsx("span", { className: "bl-think__dot" });
+  const headText = thinking ? `${label}\u2026` : doneLabel(final ?? elapsed);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-think ${className}`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-shine": shineColor,
+        "--bl-line": lineColor,
+        "--bl-hover": hoverColor,
+        "--bl-accent": accentColor,
+        "--bl-success": successColor,
+        "--bl-speed": `${shimmerSpeed}ms`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-think__head", "aria-expanded": open, "aria-controls": `${uid}-steps`, onClick: toggle, disabled: !steps.length, children: [
+          /* @__PURE__ */ jsx("svg", { className: "bl-think__chev", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", style: { opacity: steps.length ? 1 : 0 }, children: /* @__PURE__ */ jsx("path", { d: "M4.5 2.5 8 6l-3.5 3.5" }) }),
+          /* @__PURE__ */ jsx("span", { className: thinking ? "bl-think__shine" : void 0, children: headText }),
+          thinking && showTimer && /* @__PURE__ */ jsx("span", { className: "bl-think__time", children: formatSeconds(elapsed) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { id: `${uid}-steps`, className: "bl-think__panel", "data-open": open || void 0, inert: !open || void 0, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ol", { className: "bl-think__steps", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "bl-think__step", "data-status": step.status ?? "pending", children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-think__icon", "aria-hidden": "true", children: icon(step.status ?? "pending") }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("span", { className: `bl-think__label ${step.status === "active" ? "bl-think__shine" : ""}`, children: step.label }),
+            /* @__PURE__ */ jsx("span", { className: "bl-think__sr", children: step.status === "done" ? " (done)" : step.status === "active" ? " (in progress)" : " (waiting)" }),
+            step.detail && /* @__PURE__ */ jsx("span", { className: "bl-think__detail", children: step.detail })
+          ] })
+        ] }, step.id ?? i)) }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-think__sr", role: "status", children: thinking ? "" : doneLabel(final ?? elapsed) })
+      ]
+    }
+  );
+}
+export {
+  ThinkingShimmer as default
+};

package/dist/ToastStack.d.ts

@@ -0,0 +1,62 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type ToastType = 'default' | 'success' | 'error' | 'info' | 'loading';
+export interface ToastOptions {
+    /** Pass an existing id to update that toast in place. */
+    id?: number;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Time on screen, in ms (Infinity to stay until dismissed). */
+    duration?: number;
+    /** A button on the toast; clicking it also dismisses the toast. */
+    action?: {
+        label: ReactNode;
+        onClick?: () => void;
+    };
+}
+export interface ToastData extends ToastOptions {
+    title?: ReactNode;
+    type?: ToastType;
+}
+export interface PromiseMessages<T> {
+    loading?: ReactNode;
+    success?: ReactNode | ((value: T) => ReactNode);
+    error?: ReactNode | ((error: unknown) => ReactNode);
+}
+/** Shows a toast; returns its id. Pass a title (any node) and options, or one ToastData object. */
+export declare function toast(message: ReactNode | ToastData, options?: ToastOptions): number;
+export declare namespace toast {
+    var success: (message: ReactNode | ToastData, options?: ToastOptions) => number;
+    var error: (message: ReactNode | ToastData, options?: ToastOptions) => number;
+    var info: (message: ReactNode | ToastData, options?: ToastOptions) => number;
+    var loading: (message: ReactNode | ToastData, options?: ToastOptions) => number;
+    var dismiss: (id?: number) => void;
+    var promise: <T>(promise: Promise<T> | T, messages: PromiseMessages<T>) => number;
+}
+export interface ToasterProps {
+    position?: 'bottom-right' | 'bottom-center' | 'bottom-left' | 'top-right' | 'top-center' | 'top-left';
+    /** Default time on screen, in ms. */
+    duration?: number;
+    /** How many show when stacked. */
+    visibleToasts?: number;
+    /** Always fan out instead of stacking. */
+    expand?: boolean;
+    gap?: number;
+    width?: number;
+    /** Distance from the edges, in px. */
+    offset?: number;
+    /** Position inside the nearest positioned parent instead of the window. */
+    contained?: boolean;
+    radius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    successColor?: string;
+    errorColor?: string;
+    infoColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Toaster({ position, duration, visibleToasts, expand, gap, width, offset, contained, radius, backgroundColor, textColor, mutedColor, lineColor, accentColor, successColor, errorColor, infoColor, fontFamily, className, style }: ToasterProps): import("react").JSX.Element;

package/dist/ToastStack.js

@@ -0,0 +1,289 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+const STYLE_ID = "bl-toast-stack";
+const CSS = `
+.bl-toaster { position: fixed; z-index: 1100; width: var(--bl-w); max-width: calc(100% - 32px); margin: 0; padding: 0; list-style: none; font-family: var(--bl-font); pointer-events: none; }
+.bl-toaster[data-contained] { position: absolute; }
+.bl-toaster[data-y="bottom"] { bottom: var(--bl-offset); }
+.bl-toaster[data-y="top"] { top: var(--bl-offset); }
+.bl-toaster[data-x="right"] { right: var(--bl-offset); }
+.bl-toaster[data-x="left"] { left: var(--bl-offset); }
+.bl-toaster[data-x="center"] { left: 50%; transform: translateX(-50%); }
+.bl-toast { position: absolute; left: 0; right: 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); box-shadow: inset 0 0 0 1px var(--bl-line), 0 10px 30px -12px rgba(0,0,0,0.6); pointer-events: auto; touch-action: pan-y; user-select: none; transition: transform 380ms cubic-bezier(.2,.9,.25,1), opacity 380ms, height 380ms; will-change: transform; overflow: hidden; }
+.bl-toaster[data-y="bottom"] .bl-toast { bottom: 0; transform-origin: 50% 100%; }
+.bl-toaster[data-y="top"] .bl-toast { top: 0; transform-origin: 50% 0; }
+.bl-toast[data-swiping] { transition: none; }
+.bl-toast__icon { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: var(--bl-icon-radius); color: var(--bl-bg); font-size: 13px; font-weight: 800; }
+.bl-toast__text { flex: 1; min-width: 0; }
+.bl-toast__title { font-weight: 650; line-height: 1.35; }
+.bl-toast__desc { margin-top: 3px; color: var(--bl-muted); font-size: 0.9em; line-height: 1.4; }
+.bl-toast__action { flex: 0 0 auto; align-self: center; padding: 6px 10px; border: 0; border-radius: calc(var(--bl-radius) * 0.6); background: var(--bl-accent); color: var(--bl-bg); font: inherit; font-size: 0.85em; font-weight: 700; cursor: pointer; }
+.bl-toast__close { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--bl-muted); cursor: pointer; opacity: 0; transition: opacity 150ms; }
+.bl-toast:hover .bl-toast__close, .bl-toast:focus-within .bl-toast__close { opacity: 1; }
+.bl-toast button:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; opacity: 1; }
+.bl-toast__spinner { width: 16px; height: 16px; border: 2px solid var(--bl-line); border-top-color: var(--bl-accent); border-radius: 50%; animation: bl-toast-spin 700ms linear infinite; }
+@keyframes bl-toast-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .bl-toast { transition: opacity 200ms; } .bl-toast__spinner { animation-duration: 2s; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+let toasts = [];
+let nextId = 1;
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => listeners.forEach((listener) => listener());
+const subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+const getSnapshot = () => toasts;
+function upsert(data) {
+  const id = data.id ?? nextId++;
+  const existing = toasts.find((t) => t.id === id);
+  toasts = existing ? toasts.map((t) => t.id === id ? { ...t, ...data, id, updated: Date.now() } : t) : [{ type: "default", ...data, id, created: Date.now() }, ...toasts];
+  emit();
+  return id;
+}
+const normalize = (message, options) => typeof message === "object" && message !== null && !Array.isArray(message) && !message.$$typeof ? message : { title: message, ...options };
+function toast(message, options) {
+  return upsert(normalize(message, options));
+}
+toast.success = (message, options) => upsert({ ...normalize(message, options), type: "success" });
+toast.error = (message, options) => upsert({ ...normalize(message, options), type: "error" });
+toast.info = (message, options) => upsert({ ...normalize(message, options), type: "info" });
+toast.loading = (message, options) => upsert({ ...normalize(message, options), type: "loading" });
+toast.dismiss = (id) => {
+  toasts = id == null ? toasts.map((t) => ({ ...t, leaving: true })) : toasts.map((t) => t.id === id ? { ...t, leaving: true } : t);
+  emit();
+};
+toast.promise = (promise, messages) => {
+  const id = upsert({ type: "loading", title: messages.loading ?? "Loading\u2026" });
+  const resolve = (value, key, type) => {
+    const message = typeof messages[key] === "function" ? messages[key](value) : messages[key];
+    upsert({ id, type, title: message ?? (type === "success" ? "Done" : "Something went wrong") });
+  };
+  Promise.resolve(promise).then(
+    (value) => resolve(value, "success", "success"),
+    (error) => resolve(error, "error", "error")
+  );
+  return id;
+};
+const remove = (id) => {
+  toasts = toasts.filter((t) => t.id !== id);
+  emit();
+};
+const ICONS = { success: "\u2713", error: "!", info: "i" };
+function ToastItem({ item, index, expanded, offset, frontHeight, setHeight, duration, gap, colors, y, visibleCount, paused }) {
+  const ref = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [swipe, setSwipe] = useState(0);
+  const drag = useRef(null);
+  const remaining = useRef(item.duration ?? duration);
+  const started = useRef(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const prev = el.style.height;
+    el.style.height = "auto";
+    setHeight(item.id, el.getBoundingClientRect().height);
+    el.style.height = prev;
+  });
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  useEffect(() => {
+    remaining.current = item.duration ?? duration;
+  }, [item.updated, item.duration, duration]);
+  useEffect(() => {
+    if (item.leaving) {
+      const timer2 = setTimeout(() => remove(item.id), 320);
+      return () => clearTimeout(timer2);
+    }
+    if (item.type === "loading" || paused || remaining.current === Infinity) return;
+    started.current = Date.now();
+    const timer = setTimeout(() => toast.dismiss(item.id), remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current -= Date.now() - started.current;
+    };
+  }, [paused, item.leaving, item.type, item.updated, item.id]);
+  const onPointerDown = (event) => {
+    if (event.target.closest("button")) return;
+    drag.current = { x: event.clientX, t: performance.now() };
+    try {
+      ref.current.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    ref.current.setAttribute("data-swiping", "");
+  };
+  const onPointerMove = (event) => {
+    if (drag.current) setSwipe(event.clientX - drag.current.x);
+  };
+  const onPointerUp = (event) => {
+    if (!drag.current) return;
+    const dx = event.clientX - drag.current.x;
+    const velocity = Math.abs(dx) / Math.max(1, performance.now() - drag.current.t);
+    drag.current = null;
+    ref.current.removeAttribute("data-swiping");
+    if (Math.abs(dx) > 90 || velocity > 0.6) {
+      setSwipe(Math.sign(dx || 1) * (ref.current.offsetWidth + 40));
+      toast.dismiss(item.id);
+    } else setSwipe(0);
+  };
+  const dir = y === "bottom" ? -1 : 1;
+  const hiddenBehind = index >= visibleCount;
+  const entering = !mounted;
+  const translateY = entering ? -dir * 24 : expanded ? dir * offset : dir * index * gap;
+  const scale = expanded || entering ? 1 : Math.max(0, 1 - index * 0.06);
+  const opacity = entering || item.leaving || hiddenBehind ? 0 : 1;
+  const accent = { success: colors.success, error: colors.error, info: colors.info }[item.type];
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: "bl-toast",
+      "data-type": item.type,
+      role: item.type === "error" ? "alert" : "status",
+      "aria-live": item.type === "error" ? "assertive" : "polite",
+      "aria-atomic": "true",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      style: {
+        zIndex: 100 - index,
+        height: !expanded && index > 0 ? frontHeight : void 0,
+        opacity: swipe ? Math.max(0, 1 - Math.abs(swipe) / 260) * opacity : opacity,
+        transform: `translate(${swipe}px, ${translateY + (item.leaving && !swipe ? -dir * 12 : 0)}px) scale(${scale})`,
+        pointerEvents: hiddenBehind || item.leaving ? "none" : void 0
+      },
+      children: [
+        item.type === "loading" ? /* @__PURE__ */ jsx("span", { className: "bl-toast__spinner", "aria-hidden": "true" }) : accent && /* @__PURE__ */ jsx("span", { className: "bl-toast__icon", style: { background: accent }, "aria-hidden": "true", children: item.icon ?? ICONS[item.type] }),
+        item.type === "default" && item.icon && /* @__PURE__ */ jsx("span", { className: "bl-toast__icon", "aria-hidden": "true", children: item.icon }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-toast__text", children: [
+          /* @__PURE__ */ jsx("div", { className: "bl-toast__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsx("div", { className: "bl-toast__desc", children: item.description })
+        ] }),
+        item.action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "bl-toast__action",
+            onClick: () => {
+              item.action.onClick?.();
+              toast.dismiss(item.id);
+            },
+            children: item.action.label
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "bl-toast__close", "aria-label": "Dismiss notification", onClick: () => toast.dismiss(item.id), children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 1l8 8M9 1 1 9" }) }) })
+      ]
+    }
+  );
+}
+function Toaster({
+  position = "bottom-right",
+  duration = 4e3,
+  visibleToasts = 3,
+  expand = false,
+  gap = 10,
+  width = 360,
+  offset = 24,
+  contained = false,
+  radius = 12,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.12)",
+  accentColor = "#73eff7",
+  successColor = "#38b764",
+  errorColor = "#b13e53",
+  infoColor = "#41a6f6",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const [heights, setHeights] = useState({});
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [y, x] = position.split("-");
+  useEffect(() => {
+    const onVisibility = () => setHidden(document.hidden);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  const setHeight = (id, h) => setHeights((prev) => prev[id] === h ? prev : { ...prev, [id]: h });
+  const live = items.filter((t) => !t.leaving);
+  const expanded = expand || hovered || focused;
+  const front = live[0] ?? items[0];
+  const frontHeight = front ? heights[front.id] : void 0;
+  let running = 0;
+  const offsets = {};
+  for (const item of items) {
+    offsets[item.id] = running;
+    if (!item.leaving) running += (heights[item.id] ?? 64) + gap;
+  }
+  const stackHeight = expanded ? running : (frontHeight ?? 64) + Math.min(live.length - 1, visibleToasts - 1) * gap;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: `bl-toaster ${className}`,
+      "data-x": x ?? "right",
+      "data-y": y,
+      "data-contained": contained || void 0,
+      "aria-label": "Notifications",
+      onPointerEnter: (event) => event.pointerType === "mouse" && setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: (event) => !event.currentTarget.contains(event.relatedTarget) && setFocused(false),
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-offset": `${offset}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-icon-radius": radius ? "50%" : "0",
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        height: items.length ? stackHeight : 0,
+        ...style
+      },
+      children: items.map((item) => {
+        const index = live.indexOf(item);
+        return /* @__PURE__ */ jsx(
+          ToastItem,
+          {
+            item,
+            index: index < 0 ? 0 : index,
+            expanded,
+            offset: offsets[item.id],
+            frontHeight,
+            setHeight,
+            duration,
+            gap,
+            y,
+            visibleCount: expanded ? Infinity : visibleToasts,
+            colors: { success: successColor, error: errorColor, info: infoColor },
+            paused: hovered || focused || hidden
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+export {
+  Toaster as default,
+  toast
+};

package/dist/ToggleGroup.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ToggleItem {
+    value: string;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Accessible name for icon-only options. */
+    ariaLabel?: string;
+}
+export interface ToggleGroupProps {
+    items?: ToggleItem[];
+    /** A radio group with a sliding thumb, or toggle buttons whose neighbouring selections fuse. */
+    type?: 'single' | 'multiple';
+    /** Controlled value: a string in single mode, a string[] (in item order) in multiple mode. */
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    /** Accessible name of the group. */
+    label?: string;
+    /** Stretch options to fill the row. */
+    fullWidth?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Thumb slide length, in ms. */
+    duration?: number;
+    radius?: number;
+    gap?: number;
+    padding?: number;
+    trackColor?: string;
+    lineColor?: string;
+    thumbColor?: string;
+    thumbTextColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ToggleGroup({ items, type, value, defaultValue, onChange, label, fullWidth, size, duration, radius, gap, padding, trackColor, lineColor, thumbColor, thumbTextColor, textColor, mutedColor, accentColor, fontFamily, className, style }: ToggleGroupProps): import("react").JSX.Element;