@tenstorrent/vesper 0.1.0

package/dist/components/theme-switcher/theme-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.d.ts","sourceRoot":"","sources":["../../../src/components/theme-switcher/theme-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,eAAO,MAAM,oBAAoB,uBAAwB,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,CACX;IACC,kDAAkD;IAClD,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAKD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAuCtD"}

package/dist/components/theme-switcher/theme-switcher.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModeDark, ModeLight, ModeSystem } from "../icons/icons.js";
+import { cn } from "../../utils/cn.js";
+export const THEME_SWITCHER_SIZES = ["sm", "lg"];
+const setTheme = (theme) => document.documentElement.setAttribute("data-vesper-theme", theme);
+/**
+ * A three-way toggle for switching between system, light, and dark color themes by setting the `data-vesper-theme` attribute on the document root.
+ *
+ * @param {ThemeSwitcherSize} [props.size] - (optional) The size of the theme switcher. @default lg
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <ThemeSwitcher />
+ *
+ * @example
+ * <ThemeSwitcher size="sm" />
+ */
+export function ThemeSwitcher(props) {
+    const { className, size = "lg", ...rest } = props;
+    return (_jsxs("div", { className: cn("vesper-theme-switcher", `vesper-theme-switcher-${size}`, className), ...rest, children: [_jsx("button", { type: "button", className: "vesper-theme-switcher-button vesper-theme-switcher-button-system", onClick: () => setTheme("system"), "aria-label": "Switch color theme to system preference", children: _jsx(ModeSystem, {}) }), _jsx("button", { type: "button", className: "vesper-theme-switcher-button vesper-theme-switcher-button-light", onClick: () => setTheme("light"), "aria-label": "Switch color theme to light mode", children: _jsx(ModeLight, {}) }), _jsx("button", { type: "button", className: "vesper-theme-switcher-button vesper-theme-switcher-button-dark", onClick: () => setTheme("dark"), "aria-label": "Switch color theme to dark mode", children: _jsx(ModeDark, {}) }), _jsx("span", { className: "vesper-theme-switcher-indicator" })] }));
+}
+//# sourceMappingURL=theme-switcher.js.map

package/dist/components/theme-switcher/theme-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.js","sourceRoot":"","sources":["../../../src/components/theme-switcher/theme-switcher.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AAc1D,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE,CACtC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AAEpE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,yBAAyB,IAAI,EAAE,EAC/B,SAAS,CACV,KACG,IAAI,aAER,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,kEAAkE,EAC5E,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,gBACtB,yCAAyC,YAEpD,KAAC,UAAU,KAAG,GACP,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iEAAiE,EAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,gBACrB,kCAAkC,YAE7C,KAAC,SAAS,KAAG,GACN,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gEAAgE,EAC1E,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,gBACpB,iCAAiC,YAE5C,KAAC,QAAQ,KAAG,GACL,EACT,eAAM,SAAS,EAAC,iCAAiC,GAAG,IAChD,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,3 @@
+export declare const animateToastEnter: (wrapper: HTMLDivElement | null, toast: HTMLDivElement | null, onFinished: () => void) => Promise<void> | undefined;
+export declare const animateToastExit: (wrapper: HTMLDivElement | null, toast: HTMLDivElement | null, onFinished: () => void) => Promise<void> | undefined;
+//# sourceMappingURL=animations.d.ts.map

package/dist/components/toast/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../src/components/toast/animations.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAC5B,SAAS,cAAc,GAAG,IAAI,EAC9B,OAAO,cAAc,GAAG,IAAI,EAC5B,YAAY,MAAM,IAAI,8BAeM,CAAC;AAE/B,eAAO,MAAM,gBAAgB,GAC3B,SAAS,cAAc,GAAG,IAAI,EAC9B,OAAO,cAAc,GAAG,IAAI,EAC5B,YAAY,MAAM,IAAI,8BAmBM,CAAC"}

package/dist/components/toast/animations.js

@@ -0,0 +1,28 @@
+const getIsReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+export const animateToastEnter = (wrapper, toast, onFinished) => wrapper
+    ?.animate({
+    opacity: [0, 1],
+    transform: [
+        "translateX(calc(100% + var(--vesper-spacing-6)))",
+        "translateX(0%)",
+    ],
+    marginTop: ["0px", "var(--vesper-spacing-4)"],
+    height: ["0px", (toast?.getBoundingClientRect().height || 0) + "px"],
+}, { duration: getIsReducedMotion() ? 0 : 300, easing: "ease" })
+    .finished.then(onFinished);
+export const animateToastExit = (wrapper, toast, onFinished) => wrapper
+    ?.animate({
+    opacity: [1, 0],
+    transform: [
+        "translateX(0%)",
+        "translateX(calc(100% + var(--vesper-spacing-6)))",
+    ],
+    marginTop: ["var(--vesper-spacing-4)", "0px"],
+    height: [(toast?.getBoundingClientRect().height || 0) + "px", "0px"],
+}, {
+    fill: "forwards",
+    duration: getIsReducedMotion() ? 0 : 300,
+    easing: "ease",
+})
+    .finished.then(onFinished);
+//# sourceMappingURL=animations.js.map

package/dist/components/toast/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../src/components/toast/animations.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAC9B,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AAEhE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAA8B,EAC9B,KAA4B,EAC5B,UAAsB,EACtB,EAAE,CACF,OAAO;IACL,EAAE,OAAO,CACP;IACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACf,SAAS,EAAE;QACT,kDAAkD;QAClD,gBAAgB;KACjB;IACD,SAAS,EAAE,CAAC,KAAK,EAAE,yBAAyB,CAAC;IAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;CACrE,EACD,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAC7D;KACA,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAE/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAA8B,EAC9B,KAA4B,EAC5B,UAAsB,EACtB,EAAE,CACF,OAAO;IACL,EAAE,OAAO,CACP;IACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACf,SAAS,EAAE;QACT,gBAAgB;QAChB,kDAAkD;KACnD;IACD,SAAS,EAAE,CAAC,yBAAyB,EAAE,KAAK,CAAC;IAC7C,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC;CACrE,EACD;IACE,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;IACxC,MAAM,EAAE,MAAM;CACf,CACF;KACA,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,77 @@
+import { type ReactNode } from "react";
+export declare const TOAST_VARIANTS: readonly ["default", "loading", "success", "warning", "danger"];
+export interface ToastOptions {
+    /** The content displayed in the toast. Typically this will be just text, though any `ReactNode` is supported. */
+    content: ReactNode;
+    /** Optional action to render a button at the bottom of the toast.  */
+    action?: ToastAction;
+    /** The duration in milliseconds the toast will be visible for. Omitting or setting this property to false will show the toast indefinitely until the user dismisses it manually. @default false */
+    timeout?: number | false;
+    /** Determines which visual style to render the toast in. @default default */
+    variant?: ToastVariant;
+    /** Customizes the `aria-label` text for the dismiss button. */
+    dismissText?: string;
+}
+export interface ToastAction {
+    /** Callback function that fires when the user clicks the action button. */
+    handler: () => void;
+    /** The content displayed in the button. Typically this will be just text, though any `ReactNode` is supported. */
+    content: ReactNode;
+    /** Short description of an alternative way for users to achieve the desired action. This field is important for screen reader users who may not be able to access the toast easily, especially if it is time-sensitive. */
+    altText?: string;
+}
+export interface ToastHandle {
+    /** Dismisses the toast */
+    dismiss(): void;
+    /** Updates the toast */
+    update(options: Partial<ToastOptions>): void;
+}
+export type ToastState = "entering" | "active" | "dismissed";
+export type ToastVariant = (typeof TOAST_VARIANTS)[number];
+export interface ToastData {
+    options: ToastOptions;
+    id: string;
+    state: ToastState;
+}
+declare class ToastsStore {
+    data: {
+        toasts: ToastData[];
+        announcement: string | null;
+    };
+    listeners: Set<() => void>;
+    subscribe: (listener: () => void) => () => boolean;
+    getSnapshot: () => {
+        toasts: ToastData[];
+        announcement: string | null;
+    };
+    emitChange: () => void;
+    /**
+     * Spawns a new toast, and returns a handle to that toast which allows you to update or dismiss it.
+     *
+     * @example
+     * const toast = addToast({
+     *   variant: 'loading',
+     *   content: 'Loading...',
+     * })
+     * await someAsynchronousTask()
+     * toast.update({
+     *   variant: 'success',
+     *   content: 'Success!',
+     *   timeout: 5000,
+     * })
+     * */
+    addToast: (options: ToastOptions) => ToastHandle;
+    updateToast: (id: string, updates: Partial<ToastOptions>) => void;
+    updateToastState: (id: string, state: ToastState) => void;
+    dismissToast: (id: string) => void;
+    destroyToast: (id: string) => void;
+    destroyAllToasts: () => void;
+    setAnnouncement: (announcement: string | null) => void;
+}
+export declare const store: ToastsStore;
+export declare const useStore: () => {
+    toasts: ToastData[];
+    announcement: string | null;
+};
+export {};
+//# sourceMappingURL=store.d.ts.map

package/dist/components/toast/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../src/components/toast/store.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAI7D,eAAO,MAAM,cAAc,iEAMjB,CAAC;AAEX,MAAM,WAAW,YAAY;IAC3B,iHAAiH;IACjH,OAAO,EAAE,SAAS,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mMAAmM;IACnM,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kHAAkH;IAClH,OAAO,EAAE,SAAS,CAAC;IACnB,2NAA2N;IAC3N,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,0BAA0B;IAC1B,OAAO,IAAI,IAAI,CAAC;IAChB,wBAAwB;IACxB,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;CAC9C;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,cAAM,WAAW;IACf,IAAI;gBACY,SAAS,EAAE;sBACH,MAAM,GAAG,IAAI;MACnC;IAEF,SAAS,YAAiB,IAAI,EAAI;IAClC,SAAS,GAAI,UAAU,MAAM,IAAI,mBAG/B;IAEF,WAAW;gBAVK,SAAS,EAAE;sBACH,MAAM,GAAG,IAAI;MASP;IAE9B,UAAU,aAIR;IAEF;;;;;;;;;;;;;;SAcK;IACL,QAAQ,GAAI,SAAS,YAAY,KAAG,WAAW,CAgB7C;IAEF,WAAW,GAAI,IAAI,MAAM,EAAE,SAAS,OAAO,CAAC,YAAY,CAAC,UAOvD;IAEF,gBAAgB,GAAI,IAAI,MAAM,EAAE,OAAO,UAAU,UAO/C;IAEF,YAAY,GAAI,IAAI,MAAM,UAGxB;IAEF,YAAY,GAAI,IAAI,MAAM,UAIxB;IAEF,gBAAgB,aAGd;IAEF,eAAe,GAAI,cAAc,MAAM,GAAG,IAAI,UAG5C;CACH;AAED,eAAO,MAAM,KAAK,aAAoB,CAAC;AAEvC,eAAO,MAAM,QAAQ;YA7FH,SAAS,EAAE;kBACH,MAAM,GAAG,IAAI;CA6FsC,CAAC"}

package/dist/components/toast/store.js

@@ -0,0 +1,94 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import { generateId } from "../../utils/generateId.js";
+export const TOAST_VARIANTS = [
+    "default",
+    "loading",
+    "success",
+    "warning",
+    "danger",
+];
+class ToastsStore {
+    data = {
+        toasts: [],
+        announcement: null,
+    };
+    listeners = new Set();
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+    getSnapshot = () => this.data;
+    emitChange = () => {
+        for (const listener of this.listeners) {
+            listener();
+        }
+    };
+    /**
+     * Spawns a new toast, and returns a handle to that toast which allows you to update or dismiss it.
+     *
+     * @example
+     * const toast = addToast({
+     *   variant: 'loading',
+     *   content: 'Loading...',
+     * })
+     * await someAsynchronousTask()
+     * toast.update({
+     *   variant: 'success',
+     *   content: 'Success!',
+     *   timeout: 5000,
+     * })
+     * */
+    addToast = (options) => {
+        const toast = {
+            options,
+            id: generateId(),
+            state: "entering",
+        };
+        const toasts = [...this.data.toasts, toast];
+        this.data = { ...this.data, toasts };
+        this.emitChange();
+        return {
+            dismiss: () => this.dismissToast(toast.id),
+            update: (updates) => this.updateToast(toast.id, updates),
+        };
+    };
+    updateToast = (id, updates) => {
+        const toasts = this.data.toasts.map((t) => {
+            if (t.id !== id)
+                return t;
+            return { ...t, options: { ...t.options, ...updates } };
+        });
+        this.data = { ...this.data, toasts };
+        this.emitChange();
+    };
+    updateToastState = (id, state) => {
+        const toasts = this.data.toasts.map((t) => {
+            if (t.id !== id)
+                return t;
+            return { ...t, state };
+        });
+        this.data = { ...this.data, toasts };
+        this.emitChange();
+    };
+    dismissToast = (id) => {
+        this.updateToastState(id, "dismissed");
+        this.emitChange();
+    };
+    destroyToast = (id) => {
+        const toasts = this.data.toasts.filter((t) => t.id !== id);
+        this.data = { ...this.data, toasts };
+        this.emitChange();
+    };
+    destroyAllToasts = () => {
+        this.data = { ...this.data, toasts: [] };
+        this.emitChange();
+    };
+    setAnnouncement = (announcement) => {
+        this.data = { ...this.data, announcement };
+        this.emitChange();
+    };
+}
+export const store = new ToastsStore();
+export const useStore = () => useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+//# sourceMappingURL=store.js.map

package/dist/components/toast/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../../src/components/toast/store.ts"],"names":[],"mappings":"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"}

package/dist/components/toast/toast.css

@@ -0,0 +1 @@
+.vesper-toasts-container{pointer-events:none;padding:var(--vesper-spacing-6);width:26.25rem;max-width:100vw;position:fixed;bottom:0;right:0}.vesper-toast-wrapper{margin-top:var(--vesper-spacing-4);position:relative;overflow:visible}.vesper-toast{width:100%;padding:var(--vesper-spacing-5);box-shadow:var(--vesper-shadow-200);border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-background-primary);border-radius:var(--vesper-radius-2);transition:background-color var(--vesper-transition-duration-fast) ease, border-color var(--vesper-transition-duration-fast) ease;position:absolute;bottom:0}@media (forced-colors:active){.vesper-toast{background:canvas;border-color:canvastext}.vesper-toast:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-toast:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-toast-entering{pointer-events:auto}.vesper-toast-active{pointer-events:auto;position:relative}.vesper-toast-dismissed{pointer-events:none}.vesper-toast-content{align-items:center;gap:var(--vesper-spacing-3);display:flex}.vesper-toast-icon{width:1rem;height:1rem;transition:color var(--vesper-transition-duration-default) ease}@media (forced-colors:active){.vesper-toast-icon{color:canvastext}}@media not (forced-colors:active){.vesper-toast-loading .vesper-toast-icon{color:var(--vesper-icon-tertiary)}}.vesper-toast-loading .vesper-toast-icon{animation:vesper-toast-icon-spin var(--vesper-transition-duration-slow) linear infinite}@keyframes vesper-toast-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vesper-toast-success{border-color:var(--vesper-border-success-subtle);background:var(--vesper-background-success-subtle)}@media not (forced-colors:active){.vesper-toast-success .vesper-toast-icon{color:var(--vesper-text-success)}}@media not (forced-colors:active){.vesper-toast-success .vesper-toast-children{color:var(--vesper-text-success)}}.vesper-toast-warning{border-color:var(--vesper-border-warning-subtle);background:var(--vesper-background-warning-subtle)}@media not (forced-colors:active){.vesper-toast-warning .vesper-toast-icon{color:var(--vesper-text-warning)}}@media not (forced-colors:active){.vesper-toast-warning .vesper-toast-children{color:var(--vesper-text-warning)}}.vesper-toast-danger{border-color:var(--vesper-border-error-subtle);background:var(--vesper-background-error-subtle)}@media not (forced-colors:active){.vesper-toast-danger .vesper-toast-icon{color:var(--vesper-text-error)}}@media not (forced-colors:active){.vesper-toast-danger .vesper-toast-children{color:var(--vesper-text-error)}}.vesper-toast-children{color:var(--vesper-text-primary);flex:1}@media (forced-colors:active){.vesper-toast-children{color:canvastext}}.vesper-toast-close-button{cursor:pointer;color:var(--vesper-icon-primary);border-radius:var(--vesper-radius-half);width:1rem;height:1rem}.vesper-toast-close-button svg{width:100%}@media (forced-colors:active){.vesper-toast-close-button{color:canvastext}.vesper-toast-close-button:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-toast-close-button:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-toast-buttons{justify-content:flex-end;gap:var(--vesper-spacing-3);margin-top:var(--vesper-spacing-3);display:flex}.vesper-toast-announcer{opacity:0;width:0;height:0;position:absolute;overflow:hidden}

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

@@ -0,0 +1,32 @@
+export { TOAST_VARIANTS, type ToastAction, type ToastHandle, type ToastOptions, } from "./store.js";
+export declare const addToast: (options: import("./store.js").ToastOptions) => import("./store.js").ToastHandle;
+export type ToastsShortcut = string | {
+    key: string;
+    alt?: boolean;
+    ctrl?: boolean;
+    shift?: boolean;
+    meta?: boolean;
+};
+export interface ToastsProps {
+    /** The accessible label for the toast region, announced by screen readers. The keyboard shortcut is automatically appended. Defaults to `"Notifications"`. */
+    ariaLabel?: string;
+    /** A keyboard shortcut that moves focus to the oldest active toast. Accepts a key name string or an object specifying modifier keys. Defaults to `"F8"`. */
+    shortcut?: ToastsShortcut;
+    /** The DOM element or shadow root to portal the toast container into. Defaults to the `document.body`. */
+    container?: Element | DocumentFragment;
+}
+/**
+ * A toast notification container that renders and manages active toasts with keyboard navigation and screen-reader announcements.
+ *
+ * @param {string} [props.ariaLabel] - (optional) The accessible label for the toast region. @default Notifications`
+ * @param {ToastsShortcut} [props.shortcut] - (optional) Keyboard shortcut that moves focus to the oldest active toast. @default F8`
+ * @param {Element | DocumentFragment} [props.container] - (optional) The DOM element to portal toasts into. @default document.body
+ *
+ * @example
+ * <Toasts />
+ *
+ * @example
+ * <Toasts shortcut={{ key: "t", ctrl: true }} ariaLabel="Alerts" />
+ */
+export declare function Toasts(props: ToastsProps): import("react").ReactPortal | null;
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"AAqBA,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAQ,QAAQ,4EAAU,CAAC;AAkMlC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEN,MAAM,WAAW,WAAW;IAC1B,8JAA8J;IAC9J,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4JAA4J;IAC5J,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0GAA0G;IAC1G,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;CACxC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,sCAmHxC"}

package/dist/components/toast/toast.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "../button/button.js";
+import { Close, ErrorSolid, Spinner, SuccessSolid, WarningSolid, } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+import { animateToastEnter, animateToastExit } from "./animations.js";
+import { store, useStore } from "./store.js";
+import { focusOldestToast, getNearestActiveToast, isFocusable } from "./utils.js";
+export { TOAST_VARIANTS, } from "./store.js";
+export const { addToast } = store;
+function Toast({ options: { content, action, timeout = false, variant = "default", dismissText = "Dismiss", }, state, id, }) {
+    const wrapperRef = useRef(null);
+    const toastRef = useRef(null);
+    // handle updating announcement text when content changes
+    useEffect(() => {
+        if (state === "dismissed" || !toastRef.current)
+            return;
+        const updateAnnouncement = () => {
+            if (!toastRef.current)
+                return;
+            const contentText = toastRef.current.querySelector(".vesper-toast-children")?.innerText;
+            const announcement = [contentText, action?.altText]
+                .filter(Boolean)
+                .join(". ");
+            store.setAnnouncement(announcement);
+        };
+        updateAnnouncement();
+        const observer = new MutationObserver(updateAnnouncement);
+        observer.observe(toastRef.current, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        return () => observer.disconnect();
+    }, [state, action]);
+    const [hasFocus, setHasFocus] = useState(false);
+    const [hasPointer, setHasPointer] = useState(false);
+    // handle timeout if present
+    useEffect(() => {
+        if (timeout === false || hasFocus || hasPointer) {
+            return;
+        }
+        const t = setTimeout(() => {
+            store.dismissToast(id);
+        }, timeout);
+        return () => clearTimeout(t);
+    }, [timeout, id, hasFocus, hasPointer]);
+    // handle enter and exit animations
+    useEffect(() => {
+        switch (state) {
+            case "entering":
+                animateToastEnter(wrapperRef.current, toastRef.current, () => store.updateToastState(id, "active"));
+                break;
+            case "dismissed":
+                animateToastExit(wrapperRef.current, toastRef.current, () => store.destroyToast(id));
+                break;
+            default:
+                break;
+        }
+    }, [state, id]);
+    // move focus to the nearest active toast if this one was dismissed while focused
+    useEffect(() => {
+        if (state === "dismissed" && hasFocus && toastRef.current) {
+            const ref = toastRef.current;
+            /**
+             * requestAnimationFrame gives React a chance to flush all pending state updates
+             * (e.g., if multiple toasts were dismissed in the same batch), so by the time we
+             * query for the nearest active toast, the DOM reflects the true current state
+             * */
+            requestAnimationFrame(() => {
+                const nearestToast = getNearestActiveToast(ref);
+                if (nearestToast)
+                    nearestToast.focus();
+                else
+                    ref.blur();
+            });
+        }
+    }, [state, hasFocus]);
+    return (_jsx("div", { ref: wrapperRef, className: "vesper-toast-wrapper", inert: state === "dismissed", onPointerEnter: () => setHasPointer(true), onPointerLeave: () => setHasPointer(false), onFocus: () => setHasFocus(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                setHasFocus(false);
+            }
+        }, onKeyDown: (e) => {
+            if (e.key !== "Escape")
+                return;
+            store.dismissToast(id);
+        }, children: _jsxs("div", { ref: toastRef, "data-state": state, className: cn("vesper-toast", `vesper-toast-${state}`, `vesper-toast-${variant}`), tabIndex: 0, children: [_jsxs("div", { className: "vesper-toast-content", children: [variant === "loading" && (_jsx(Spinner, { "aria-hidden": true, className: "vesper-toast-icon" })), variant === "success" && (_jsx(SuccessSolid, { "aria-hidden": true, className: "vesper-toast-icon" })), variant === "warning" && (_jsx(WarningSolid, { "aria-hidden": true, className: "vesper-toast-icon" })), variant === "danger" && (_jsx(ErrorSolid, { "aria-hidden": true, className: "vesper-toast-icon" })), _jsx(Typography, { as: "span", className: "vesper-toast-children", variant: "copy-sm", children: content }), !action && (_jsx("button", { type: "button", "aria-label": dismissText, className: "vesper-toast-close-button", onClick: () => store.dismissToast(id), children: _jsx(Close, { "aria-hidden": true }) }))] }), action && (_jsxs("div", { className: "vesper-toast-buttons", children: [_jsx(Button, { size: "xs", type: "button", variant: "ghost", onClick: () => store.dismissToast(id), children: dismissText }), _jsx(Button, { size: "xs", type: "button", variant: "contrast", onClick: action.handler, children: action.content })] }))] }) }));
+}
+function ToastAnnouncer() {
+    const { announcement, toasts } = useStore();
+    const numToasts = toasts.length;
+    useEffect(() => {
+        if (numToasts === 0)
+            store.setAnnouncement(null);
+    }, [numToasts]);
+    return (_jsx("span", { className: "vesper-toast-announcer", role: "status", "aria-atomic": false, children: announcement }));
+}
+/**
+ * A toast notification container that renders and manages active toasts with keyboard navigation and screen-reader announcements.
+ *
+ * @param {string} [props.ariaLabel] - (optional) The accessible label for the toast region. @default Notifications`
+ * @param {ToastsShortcut} [props.shortcut] - (optional) Keyboard shortcut that moves focus to the oldest active toast. @default F8`
+ * @param {Element | DocumentFragment} [props.container] - (optional) The DOM element to portal toasts into. @default document.body
+ *
+ * @example
+ * <Toasts />
+ *
+ * @example
+ * <Toasts shortcut={{ key: "t", ctrl: true }} ariaLabel="Alerts" />
+ */
+export function Toasts(props) {
+    const { ariaLabel = "Notifications", shortcut = "F8", container } = props;
+    const { toasts } = useStore();
+    const ref = useRef(null);
+    const shortcutString = typeof shortcut === "string"
+        ? `(${shortcut})`
+        : `(${[
+            shortcut.ctrl && "Ctrl",
+            shortcut.alt && "Alt",
+            shortcut.shift && "Shift",
+            shortcut.meta && "Cmd",
+            shortcut.key,
+        ]
+            .filter(Boolean)
+            .join("+")})`;
+    useEffect(() => {
+        const handleKeydown = (e) => {
+            if (typeof shortcut === "string") {
+                if (e.key === shortcut) {
+                    e.preventDefault();
+                    focusOldestToast();
+                }
+                return;
+            }
+            if (e.key === shortcut.key &&
+                !!shortcut.alt === e.altKey &&
+                !!shortcut.meta === e.metaKey &&
+                !!shortcut.ctrl === e.ctrlKey &&
+                !!shortcut.shift === e.shiftKey) {
+                e.preventDefault();
+                focusOldestToast();
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return () => window.removeEventListener("keydown", handleKeydown);
+    }, [shortcut, toasts]);
+    const previouslyFocused = useRef(null);
+    const pointerDown = useRef(false);
+    useEffect(() => {
+        const handlePointerDown = () => (pointerDown.current = true);
+        const handlePointerUp = () => (pointerDown.current = false);
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("pointerup", handlePointerUp);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("pointerup", handlePointerUp);
+        };
+    }, []);
+    // makes rendering Toasts SSR-safe
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    if (!mounted)
+        return null;
+    return createPortal(_jsxs("div", { className: "vesper-toasts-container", role: "region", "aria-label": `${ariaLabel} ${shortcutString}`, ref: ref, onFocus: (e) => {
+            if (document.body.contains(e.relatedTarget) &&
+                !ref.current?.contains(e.relatedTarget) &&
+                e.relatedTarget instanceof HTMLElement) {
+                previouslyFocused.current = e.relatedTarget;
+            }
+        }, onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                const elementToRestore = previouslyFocused.current;
+                previouslyFocused.current = null;
+                /**
+                 * If focus is moving to a specific element outside the container
+                 * (e.g., the user clicked a button), don't interfere.
+                 * */
+                if (e.relatedTarget)
+                    return;
+                /**
+                 * If the blur was triggered by a pointer event
+                 * (e.g., clicking on empty space), don't restore focus.
+                 * */
+                if (pointerDown.current)
+                    return;
+                /**
+                 * requestAnimationFrame gives React a chance to flush all pending state updates
+                 * in case the DOM structure changes and the element we want to restore focus to
+                 * no longer exists in the dom or otherwise becomes not focusable.
+                 */
+                requestAnimationFrame(() => {
+                    if (elementToRestore && isFocusable(elementToRestore)) {
+                        elementToRestore.focus();
+                    }
+                });
+            }
+        }, children: [_jsx(ToastAnnouncer, {}), toasts.map(({ id, options, state }) => (_jsx(Toast, { id: id, options: options, state: state }, id)))] }), container || document.body);
+}
+//# sourceMappingURL=toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+export declare const focusOldestToast: () => void;
+export declare const getNearestActiveToast: (ref: HTMLDivElement) => HTMLDivElement | undefined;
+/**
+ * Checks where an element can be focused. An element can be focused if:
+ * - It exists in the document
+ * - Neither it nor any of its ancestors are inert or disabled
+ *
+ */
+export declare function isFocusable(el: HTMLElement): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/toast/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/toast/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,YAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,KAAK,cAAc,+BAgBxD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAMpD"}

package/dist/components/toast/utils.js

@@ -0,0 +1,26 @@
+export const focusOldestToast = () => {
+    document
+        .querySelector('.vesper-toast:not([data-state="dismissed"])')
+        ?.focus();
+};
+export const getNearestActiveToast = (ref) => {
+    const toastElements = Array.from(document.querySelectorAll(".vesper-toast"));
+    const currentIndex = toastElements.indexOf(ref);
+    const prev = toastElements
+        .filter((e, i) => i < currentIndex && e.dataset.state !== "dismissed")
+        .reverse()[0];
+    const next = toastElements.filter((e, i) => i > currentIndex && e.dataset.state !== "dismissed")[0];
+    return prev || next;
+};
+/**
+ * Checks where an element can be focused. An element can be focused if:
+ * - It exists in the document
+ * - Neither it nor any of its ancestors are inert or disabled
+ *
+ */
+export function isFocusable(el) {
+    return (document.body.contains(el) &&
+        !el.closest("[disabled], [inert]") &&
+        el.checkVisibility());
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/toast/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/toast/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,QAAQ;SACL,aAAa,CACZ,6CAA6C,CAC9C;QACD,EAAE,KAAK,EAAE,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,GAAmB,EAAE,EAAE;IAC3D,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAiB,eAAe,CAAC,CAC3D,CAAC;IAEF,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,IAAI,GAAG,aAAa;SACvB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,KAAK,WAAW,CAAC;SACrE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAEhB,MAAM,IAAI,GAAG,aAAa,CAAC,MAAM,CAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,KAAK,WAAW,CAC9D,CAAC,CAAC,CAAC,CAAC;IAEL,OAAO,IAAI,IAAI,IAAI,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAe;IACzC,OAAO,CACL,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC1B,CAAC,EAAE,CAAC,OAAO,CAAC,qBAAqB,CAAC;QAClC,EAAE,CAAC,eAAe,EAAE,CACrB,CAAC;AACJ,CAAC"}

package/dist/components/toggle/toggle.css

@@ -0,0 +1 @@
+.vesper-toggle{gap:var(--vesper-spacing-1);width:fit-content;padding:var(--vesper-spacing-1);border-radius:var(--vesper-radius-2);border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);background:var(--vesper-tint-inverse-400);display:inline-flex}.vesper-toggle-select{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.vesper-toggle-sm .vesper-toggle-item{height:1.5rem;padding:0 var(--vesper-spacing-3)}.vesper-toggle-sm .vesper-toggle-icon{width:1.25rem;height:1.25rem}.vesper-toggle-md .vesper-toggle-item{height:2rem;padding:0 var(--vesper-spacing-3)}.vesper-toggle-md .vesper-toggle-icon{width:1.25rem;height:1.25rem}.vesper-toggle-lg .vesper-toggle-item{height:2.5rem;padding:0 var(--vesper-spacing-4)}.vesper-toggle-lg .vesper-toggle-icon{width:1.5rem;height:1.5rem}.vesper-toggle-item{cursor:pointer;border-radius:var(--vesper-radius-1);color:var(--vesper-text-secondary);align-items:center;display:inline-flex}.vesper-toggle-item:hover{background:var(--vesper-tint-neutral-200)}.vesper-toggle-item.vesper-toggle-item-active{background:var(--vesper-tint-neutral-400);color:var(--vesper-text-primary)}@media (forced-colors:active){.vesper-toggle-item.vesper-toggle-item-active{color:canvas;forced-color-adjust:none;background:canvastext}}.vesper-toggle-disabled{pointer-events:none;border-color:var(--vesper-border-disabled);background:var(--vesper-background-disabled)}.vesper-toggle-disabled .vesper-toggle-item{color:var(--vesper-text-disabled)}.vesper-toggle-disabled .vesper-toggle-item.vesper-toggle-item-active{background:var(--vesper-background-disabled)}