@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/dist/Toast/ToastViewport.js

@@ -2,6 +2,17 @@
 
 'use client';
 
+/**
+ * @file ToastViewport.tsx
+ * @input Uses React state/effects, ToastContext, useAnnounce, viewport tokens,
+ *   and placement-derived motion variables
+ * @output Exports the ToastViewport provider, stack, live announcement dispatch,
+ *   focus handoff, safe-area-aware edge gutters, and motion context
+ * @position Core provider/imperative viewport for useToast()
+ *
+ * SYNC: When placement, stacking, focus, announcement, or safe-area behavior
+ *   changes, update ToastViewport.test.tsx, Toast.doc.mjs, and Toast.stories.tsx.
+ */
 import { isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
@@ -9,17 +20,27 @@ import { spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { INTERACTIVE_SELECTORS } from "../hooks/useClickableContainer.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
-import { Toast } from "./Toast.js";
+import { ToastSurface } from "./Toast.js";
 import { ToastContext } from "./ToastContext.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SAFE_AREA_INLINE_START = `max(${spacingVars['--spacing-4']}, env(safe-area-inset-left, 0px))`;
+const SAFE_AREA_INLINE_END = `max(${spacingVars['--spacing-4']}, env(safe-area-inset-right, 0px))`;
+const SAFE_AREA_BLOCK_START = `max(${spacingVars['--spacing-4']}, env(safe-area-inset-top, 0px))`;
+const SAFE_AREA_BLOCK_END = `max(${spacingVars['--spacing-4']}, env(safe-area-inset-bottom, 0px))`;
+const TOAST_EDGE_DRIFT = spacingVars['--spacing-2'];
+const TOAST_EDGE_DRIFT_NEGATIVE = `calc(-1 * ${TOAST_EDGE_DRIFT})`;
 const styles = {
   viewport: {
     kVAEAm: "xixxii4",
     kY2c9j: "x6cuj84",
     k1xSpc: "x78zum5",
+    kB7OPa: "x9f619",
     kXwgrk: "xdt5ytf",
-    kmVPX3: "x1shk3sm",
+    kLKAdn: "x1vjezoa",
+    kGO01o: "xew4nw4",
+    kZCmMZ: "xf4btlh x19efkpl",
+    kwRFfy: "x1g0rcpp x1n6uwha",
     kfzvcC: "x47corl",
     kpwlN0: "xh3736h",
     kogj98: "x1ghz6dp",
@@ -27,31 +48,67 @@ const styles = {
     kVQacm: "x1rea2x4",
     $$css: true
   },
+  viewportInlineSpan: {
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
+    $$css: true
+  },
   bottomEnd: {
     krVfgx: "x1ey2m1c",
-    kt4wiu: "xtijo5x",
     kGNEyG: "xuk3077",
     $$css: true
   },
   bottomStart: {
     krVfgx: "x1ey2m1c",
-    kLqNvP: "x1o0tod",
     kGNEyG: "x1cy8zhl",
     $$css: true
   },
   topEnd: {
     k87sOh: "x13vifvy",
-    kt4wiu: "xtijo5x",
     kGNEyG: "xuk3077",
     kXwgrk: "x3ieub6",
     $$css: true
   },
   topStart: {
     k87sOh: "x13vifvy",
-    kLqNvP: "x1o0tod",
     kGNEyG: "x1cy8zhl",
     kXwgrk: "x3ieub6",
     $$css: true
+  },
+  toastWrapper: {
+    kfzvcC: "x67bb7w",
+    k1xSpc: "xrvj5dj",
+    kzqmXN: "xh8yej3",
+    ks0D6T: "x1j9u4d2",
+    k7Eaqz: "xeuugli",
+    k9llMU: "x1tu4anv",
+    k1ekBW: "xjshnde",
+    kIyJzY: "xuedmi6 xsagj69",
+    kAMwcw: "xlr8y92",
+    ke1DCf: "x1sopeo2",
+    kNIiQF: "x5rzir7",
+    $$css: true
+  },
+  toastWrapperFromBottom: {
+    "--_toast-slide-y": "x1heqljd",
+    $$css: true
+  },
+  toastWrapperFromTop: {
+    "--_toast-slide-y": "x87gnkx",
+    $$css: true
+  },
+  toastWrapperGap: {
+    kGO01o: "x1wesfrj xup0pd7",
+    $$css: true
+  },
+  toastWrapperGapReversed: {
+    kGO01o: "x1wesfrj x1vjq31q",
+    $$css: true
+  },
+  toastWrapperExiting: {
+    k9llMU: "xihq33y",
+    kGO01o: "x18d9i69",
+    $$css: true
   }
 };
 
@@ -346,18 +403,21 @@ export function ToastViewport({
     };
   }, [hasToasts, getFocusable]);
   const posStyle = position === 'topEnd' ? styles.topEnd : position === 'topStart' ? styles.topStart : position === 'bottomStart' ? styles.bottomStart : styles.bottomEnd;
+  const isReversed = position === 'topEnd' || position === 'topStart';
+  const toastWrapperPositionStyle = isReversed ? styles.toastWrapperFromTop : styles.toastWrapperFromBottom;
+  const gapStyle = isReversed ? styles.toastWrapperGapReversed : styles.toastWrapperGap;
   return /*#__PURE__*/_jsxs(ToastContext, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx("div", {
       ref: viewportRef,
-      role: "region",
-      "aria-label": t('@astryx.toast.viewport'),
-      tabIndex: -1
+      role: hasToasts ? 'region' : undefined,
+      "aria-label": hasToasts ? t('@astryx.toast.viewport') : undefined,
+      tabIndex: hasToasts ? -1 : undefined
       // popover="manual" promotes to the top layer (above dialogs).
       // Omitted inside dialogs where the viewport is already in a top layer.
       ,
       popover: isTopLayer ? 'manual' : undefined,
-      ...mergeProps(stylex.props(styles.viewport, posStyle), {
+      ...mergeProps(stylex.props(styles.viewport, styles.viewportInlineSpan, posStyle), {
         style: Object.keys(insetStyle).length > 0 ? insetStyle : undefined
       }),
       children: visibleToasts.map(entry => {
@@ -368,14 +428,7 @@ export function ToastViewport({
         const isExiting = exitingIds.has(entry.id);
         return /*#__PURE__*/_jsx("div", {
           "data-toast-id": entry.id,
-          ...{
-            0: {
-              className: "x67bb7w xrvj5dj x1tu4anv xvmdzux xjshnde xuedmi6 xsagj69 xlr8y92 x1sopeo2 x5rzir7"
-            },
-            1: {
-              className: "x67bb7w xrvj5dj xjshnde xuedmi6 xsagj69 xlr8y92 x1sopeo2 x5rzir7 xihq33y x18d9i69"
-            }
-          }[!!isExiting << 0],
+          ...stylex.props(styles.toastWrapper, toastWrapperPositionStyle, gapStyle, isExiting && styles.toastWrapperExiting),
           onTransitionEnd: isExiting ? e => {
             if (e.propertyName === 'grid-template-rows') {
               handleExited(entry.id);
@@ -383,16 +436,18 @@ export function ToastViewport({
           } : undefined,
           children: /*#__PURE__*/_jsx("div", {
             ...{
-              className: "xb3r6kr"
+              className: "xh8yej3 x193iq5w xeuugli x2lwn1j xb3r6kr"
             },
-            children: /*#__PURE__*/_jsx(Toast, {
+            children: /*#__PURE__*/_jsx(ToastSurface, {
               type: type,
               body: o.body,
               endContent: o.endContent,
               isAutoHide: isAutoHide,
               autoHideDuration: dur,
               isExiting: isExiting,
-              onDismiss: reason => removeToast(entry.id, reason)
+              gestureDirection: isReversed ? -1 : 1,
+              onDismiss: reason => removeToast(entry.id, reason),
+              renderContent: o.renderContent
             })
           })
         }, entry.id);

package/dist/Toast/index.d.ts

@@ -1,5 +1,5 @@
 export { useToast } from './useToast';
-export type { ToastType, ToastPosition, ToastCollisionBehavior, ToastDismissReason, ToastOptions, ToastDismissFn, ShowToastFn, } from './types';
+export type { ToastType, ToastPosition, ToastCollisionBehavior, ToastDismissReason, ToastOptions, ToastDismissFn, ShowToastFn, ToastContentRenderProps, ToastContentRenderFn, } from './types';
 export { ToastViewport } from './ToastViewport';
 export type { ToastViewportProps } from './ToastViewport';
 export { Toast } from './Toast';

package/dist/Toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Toast/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AAEpC,YAAY,EACV,SAAS,EACT,aAAa,EACb,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Toast/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AAEpC,YAAY,EACV,SAAS,EACT,aAAa,EACb,sBAAsB,EACtB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,WAAW,EACX,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC"}

package/dist/Toast/types.d.ts

@@ -28,6 +28,21 @@ export interface ToastOptions {
     autoHideDuration?: number;
     /** Content rendered at the end of the toast (trailing slot). */
     endContent?: ReactNode;
+    /**
+     * Replaces the content of this toast's card with your own layout.
+     *
+     * Astryx keeps the card, live-region role and auto-hide behavior, then hands
+     * the renderer this toast's content, resolved settings and `dismiss`
+     * callback. The renderer owns every control inside its layout; call
+     * `dismiss` from the control that should close the toast. Astryx does not
+     * inject a fallback control into custom content.
+     *
+     * Per-toast rather than app-wide on purpose. An app that wants every one of
+     * its toasts to share a layout wraps `useToast()` once and passes this on
+     * every call; a toast raised by library code that knows nothing about that
+     * wrapper then renders as an ordinary Astryx toast.
+     */
+    renderContent?: ToastContentRenderFn;
     /** Unique identifier for deduplication. */
     uniqueID?: string;
     /**
@@ -40,6 +55,29 @@ export interface ToastOptions {
 }
 /** Function to programmatically dismiss a toast. */
 export type ToastDismissFn = () => void;
+/** Values passed to a custom toast content renderer. */
+export interface ToastContentRenderProps {
+    /** Primary message content, as passed to `showToast`. */
+    body: ReactNode;
+    /** Trailing content, as passed to `showToast`. Place it in your layout. */
+    endContent?: ReactNode;
+    /** Resolved toast type — `'error'` also makes the live region assertive. */
+    type: ToastType;
+    /** Whether this toast will dismiss itself. */
+    isAutoHide: boolean;
+    /** Milliseconds until auto-dismiss, when `isAutoHide`. */
+    autoHideDuration: number;
+    /**
+     * Dismisses this toast with reason `'manual'`. Pass it through any nested
+     * components that need to close the toast.
+     */
+    dismiss: ToastDismissFn;
+}
+/**
+ * Renders the content of one toast inside Astryx's card — see
+ * `ToastOptions.renderContent`.
+ */
+export type ToastContentRenderFn = (toast: ToastContentRenderProps) => ReactNode;
 /** Function returned by useToast to show toasts. */
 export type ShowToastFn = (options: ToastOptions) => ToastDismissFn;
 /** Internal toast state with ID and metadata. */

package/dist/Toast/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Toast/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,UAAU,GACV,WAAW,GACX,aAAa,CAAC;AAElB,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5D,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AAED,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,cAAc,CAAC;AAEpE,iDAAiD;AACjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Toast/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAEhF,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5D,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AAED,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,wDAAwD;AACxD,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,IAAI,EAAE,SAAS,CAAC;IAChB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,EAAE,SAAS,CAAC;IAChB,8CAA8C;IAC9C,UAAU,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,uBAAuB,KAC3B,SAAS,CAAC;AAEf,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,cAAc,CAAC;AAEpE,iDAAiD;AACjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/Toast/useToastGesture.d.ts

@@ -0,0 +1,26 @@
+import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+export type ToastGestureDirection = 1 | -1;
+interface UseToastGestureOptions {
+    direction: ToastGestureDirection;
+    enabled: boolean;
+    canPauseTimer: boolean;
+    isTimerPaused: () => boolean;
+    pauseTimer: () => void;
+    resumeTimer: () => void;
+    dismiss: () => void;
+    shouldIgnoreTarget: (target: EventTarget | null, root: HTMLElement) => boolean;
+}
+interface ToastGestureBindings {
+    onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onLostPointerCapture: (event: ReactPointerEvent<HTMLDivElement>) => void;
+}
+interface UseToastGestureResult {
+    rootRef: RefObject<HTMLDivElement | null>;
+    bindings: ToastGestureBindings;
+}
+export declare function useToastGesture({ direction, enabled, canPauseTimer, isTimerPaused, pauseTimer, resumeTimer, dismiss, shouldIgnoreTarget, }: UseToastGestureOptions): UseToastGestureResult;
+export {};
+//# sourceMappingURL=useToastGesture.d.ts.map

package/dist/Toast/useToastGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastGesture.d.ts","sourceRoot":"","sources":["../../src/Toast/useToastGesture.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAWxE,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAoB3C,UAAU,sBAAsB;IAC9B,SAAS,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,CAClB,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,WAAW,KACd,OAAO,CAAC;CACd;AAED,UAAU,oBAAoB;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAcD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,aAAa,EACb,UAAU,EACV,WAAW,EACX,OAAO,EACP,kBAAkB,GACnB,EAAE,sBAAsB,GAAG,qBAAqB,CA4QhD"}

package/dist/Toast/useToastGesture.js

@@ -0,0 +1,223 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useToastGesture.ts
+ * @input Uses a resolved Toast edge direction, timer pause/resume hooks,
+ *   dismissal callback, enabled state, and interactive-descendant policy
+ * @output Returns the Toast card root ref and touch/pen gesture bindings
+ * @position Internal Toast gesture unit; attached to the Toast card root
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const DRAG_PROMOTION_SLOP = 8;
+const SWIPE_DISMISS_RATIO = 0.4;
+const FLICK_MIN_DISTANCE = 48;
+const FLICK_VELOCITY = 1.2;
+const VERTICAL_INTENT_RATIO = 1.2;
+const SWIPE_EXIT_DISTANCE = '120%';
+const SWIPE_ACTIVE_FADE_MAX = 0.4;
+const SWIPE_ACTIVE_SCALE_MAX = 0.02;
+function swipeProgressValue(travel, surfaceSize) {
+  return Math.min(Math.max(travel / surfaceSize, 0), 1);
+}
+function clearTransientStyles(root) {
+  root.style.removeProperty('transition-duration');
+  root.style.removeProperty('--_toast-swipe-y');
+  root.style.removeProperty('--_toast-swipe-exit-y');
+  root.style.removeProperty('--_toast-swipe-opacity');
+  root.style.removeProperty('--_toast-swipe-scale');
+}
+export function useToastGesture({
+  direction,
+  enabled,
+  canPauseTimer,
+  isTimerPaused,
+  pauseTimer,
+  resumeTimer,
+  dismiss,
+  shouldIgnoreTarget
+}) {
+  const rootRef = useRef(null);
+  const gestureRef = useRef(null);
+  const resetGesture = useCallback(shouldResume => {
+    const root = rootRef.current;
+    const state = gestureRef.current;
+    gestureRef.current = null;
+    if (root) {
+      clearTransientStyles(root);
+    }
+    if (shouldResume && state?.pausedTimer) {
+      resumeTimer();
+    }
+  }, [resumeTimer]);
+  const beginGesture = useCallback((point, target) => {
+    const root = rootRef.current;
+    if (!root || !enabled || gestureRef.current != null || shouldIgnoreTarget(target, root)) {
+      return false;
+    }
+    const pausedTimer = canPauseTimer && !isTimerPaused();
+    if (pausedTimer) {
+      pauseTimer();
+    }
+    const surfaceSize = Math.max(root.getBoundingClientRect().height, 1);
+    gestureRef.current = {
+      pointerId: point.pointerId,
+      startX: point.clientX,
+      startY: point.clientY,
+      startTime: Date.now(),
+      direction,
+      intent: 'pending',
+      pausedTimer,
+      surfaceSize,
+      dismissThreshold: Math.max(surfaceSize * SWIPE_DISMISS_RATIO, FLICK_MIN_DISTANCE)
+    };
+    return true;
+  }, [canPauseTimer, direction, enabled, isTimerPaused, pauseTimer, shouldIgnoreTarget]);
+  const moveGesture = useCallback((point, preventDefault, releaseCapture) => {
+    const state = gestureRef.current;
+    const root = rootRef.current;
+    if (!state || !root || point.pointerId !== state.pointerId) {
+      return;
+    }
+    const deltaX = point.clientX - state.startX;
+    const deltaY = point.clientY - state.startY;
+    const absX = Math.abs(deltaX);
+    const absY = Math.abs(deltaY);
+    if (state.intent === 'pending') {
+      if (absX > DRAG_PROMOTION_SLOP && absX > absY) {
+        releaseCapture?.();
+        resetGesture(true);
+        return;
+      }
+      if (absY <= DRAG_PROMOTION_SLOP || absY <= absX * VERTICAL_INTENT_RATIO) {
+        return;
+      }
+      state.intent = deltaY * state.direction > 0 ? 'vertical' : 'opposite';
+      if (state.intent === 'opposite') {
+        releaseCapture?.();
+        resetGesture(true);
+        return;
+      }
+      root.style.setProperty('transition-duration', '0s');
+    }
+    preventDefault();
+    const travel = Math.max(0, deltaY * state.direction);
+    const progress = swipeProgressValue(travel, state.surfaceSize);
+    root.style.setProperty('--_toast-swipe-y', `${travel * state.direction}px`);
+    root.style.setProperty('--_toast-swipe-opacity', (1 - progress * SWIPE_ACTIVE_FADE_MAX).toFixed(3));
+    root.style.setProperty('--_toast-swipe-scale', (1 - progress * SWIPE_ACTIVE_SCALE_MAX).toFixed(3));
+  }, [resetGesture]);
+  const endGesture = useCallback(point => {
+    const state = gestureRef.current;
+    const root = rootRef.current;
+    if (!state || !root || point.pointerId !== state.pointerId) {
+      return;
+    }
+    const travel = Math.max(0, (point.clientY - state.startY) * state.direction);
+    const elapsed = Math.max(1, Date.now() - state.startTime);
+    const isDismissed = state.intent === 'vertical' && (travel >= state.dismissThreshold || travel >= FLICK_MIN_DISTANCE && travel / elapsed > FLICK_VELOCITY);
+    gestureRef.current = null;
+    root.style.removeProperty('transition-duration');
+    if (isDismissed) {
+      root.style.setProperty('--_toast-swipe-exit-y', state.direction === 1 ? SWIPE_EXIT_DISTANCE : `calc(-1 * ${SWIPE_EXIT_DISTANCE})`);
+      dismiss();
+      return;
+    }
+    clearTransientStyles(root);
+    if (state.pausedTimer) {
+      resumeTimer();
+    }
+  }, [dismiss, resumeTimer]);
+  const handlePointerDown = useCallback(event => {
+    if (event.pointerType === 'pen' && (event.button == null || event.button === 0) && beginGesture(event, event.target)) {
+      rootRef.current?.setPointerCapture?.(event.pointerId);
+    }
+  }, [beginGesture]);
+  const handlePointerMove = useCallback(event => {
+    if (event.pointerType !== 'pen') {
+      return;
+    }
+    moveGesture(event, () => event.preventDefault(), () => rootRef.current?.releasePointerCapture?.(event.pointerId));
+  }, [moveGesture]);
+  const handlePointerUp = useCallback(event => {
+    if (event.pointerType !== 'pen') {
+      return;
+    }
+    rootRef.current?.releasePointerCapture?.(event.pointerId);
+    endGesture(event);
+  }, [endGesture]);
+  const handlePointerCancel = useCallback(event => {
+    if (event.pointerType === 'pen' && gestureRef.current?.pointerId === event.pointerId) {
+      resetGesture(true);
+    }
+  }, [resetGesture]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !enabled) {
+      return;
+    }
+    const point = touch => ({
+      pointerId: touch.identifier,
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    const changedTouch = event => {
+      const pointerId = gestureRef.current?.pointerId;
+      return pointerId == null ? undefined : [...event.changedTouches].find(touch => touch.identifier === pointerId);
+    };
+    const handleTouchStart = event => {
+      const touch = event.touches.length === 1 ? event.changedTouches[0] : null;
+      if (touch) {
+        beginGesture(point(touch), event.target);
+      }
+    };
+    const handleTouchMove = event => {
+      const touch = changedTouch(event);
+      if (touch) {
+        moveGesture(point(touch), () => {
+          if (event.cancelable) {
+            event.preventDefault();
+          }
+        });
+      }
+    };
+    const handleTouchEnd = event => {
+      const touch = changedTouch(event);
+      if (touch) {
+        endGesture(point(touch));
+      } else if (event.touches.length === 0) {
+        resetGesture(true);
+      }
+    };
+    const handleTouchCancel = () => resetGesture(true);
+    root.addEventListener('touchstart', handleTouchStart, {
+      passive: true
+    });
+    root.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    root.addEventListener('touchend', handleTouchEnd, {
+      passive: true
+    });
+    root.addEventListener('touchcancel', handleTouchCancel, {
+      passive: true
+    });
+    return () => {
+      root.removeEventListener('touchstart', handleTouchStart);
+      root.removeEventListener('touchmove', handleTouchMove);
+      root.removeEventListener('touchend', handleTouchEnd);
+      root.removeEventListener('touchcancel', handleTouchCancel);
+    };
+  }, [beginGesture, enabled, endGesture, moveGesture, resetGesture]);
+  return {
+    rootRef,
+    bindings: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
+      onLostPointerCapture: handlePointerCancel
+    }
+  };
+}

package/dist/Token/Token.d.ts

@@ -95,7 +95,7 @@ export interface TokenProps extends BaseProps<HTMLElement> {
  * <Token label="Link" href="/path" />
  * ```
  */
-export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, ref, }: TokenProps): import("react").JSX.Element;
+export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, ref, ...rest }: TokenProps): import("react").JSX.Element;
 export declare namespace Token {
     var displayName: string;
 }

package/dist/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAM3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAqKD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,UAAU,+BAiLZ;yBAlMe,KAAK"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAM3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA8JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAwLZ;yBA1Me,KAAK"}

package/dist/Token/Token.js

@@ -26,6 +26,7 @@ import { useInteractiveRole } from "../hooks/useInteractiveRole.js";
 import { TokenLink } from "./TokenLink.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
@@ -65,7 +66,6 @@ const styles = {
     k1ekBW: "x12qzo2w",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
-    kKwaWg: "xmvprkv xq8i9tn",
     $$css: true
   },
   disabled: {
@@ -208,7 +208,8 @@ export function Token({
   className,
   style,
   'data-testid': testId,
-  ref
+  ref,
+  ...rest
 }) {
   const t = useTranslator();
   const LinkComponent = useLinkComponent();
@@ -253,20 +254,27 @@ export function Token({
   });
   const sharedProps = {
     'data-testid': testId,
-    'aria-label': isLabelHidden ? label : undefined,
-    'aria-description': description
+    ...(isLabelHidden ? {
+      'aria-label': label
+    } : {}),
+    ...(description != null ? {
+      'aria-description': description
+    } : {})
   };
   if (role === 'link') {
     if (onRemove == null) {
       return /*#__PURE__*/_jsx(LinkComponent, {
         ref: ref,
         href: href,
-        "aria-disabled": isDisabled || undefined,
-        ...sharedProps,
         ...mergeProps(themeProps('token', {
           color,
           size
-        }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, isDisabled && styles.disabled, xstyle), className, style),
+        }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style),
+        ...rest,
+        ...(isDisabled ? {
+          'aria-disabled': true
+        } : {}),
+        ...sharedProps,
         children: content
       });
     }
@@ -300,11 +308,12 @@ export function Token({
         }[!!isLabelHidden << 0],
         children: label
       }),
-      ...sharedProps,
       ...mergeProps(themeProps('token', {
         color,
         size
-      }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, isDisabled && styles.disabled, xstyle), className, style)
+      }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style),
+      ...rest,
+      ...sharedProps
     });
   }
   if (effectiveOnClick != null) {
@@ -318,11 +327,12 @@ export function Token({
     return /*#__PURE__*/_jsxs("span", {
       ref: ref,
       onClick: isDisabled ? undefined : handleContainerClick,
-      ...sharedProps,
       ...mergeProps(themeProps('token', {
         color,
         size
-      }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, isDisabled && styles.disabled, xstyle), className, style),
+      }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style),
+      ...rest,
+      ...sharedProps,
       children: [icon, /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: effectiveOnClick,
@@ -346,11 +356,12 @@ export function Token({
   }
   return /*#__PURE__*/_jsx("span", {
     ref: ref,
-    ...sharedProps,
     ...mergeProps(themeProps('token', {
       color,
       size
     }), stylex.props(styles.base, sizeStyles[size], colorStyles[color], isDisabled && styles.disabled, xstyle), className, style),
+    ...rest,
+    ...sharedProps,
     children: content
   });
 }

package/dist/Token/TokenLink.d.ts

@@ -55,7 +55,7 @@ export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
  * (including middle-click / cmd+click to open in a new tab) while the remove
  * button keeps handling its own clicks.
  */
-export declare function TokenLink({ ref, href, isDisabled, LinkComponent, linkStyleProps, labelContent, icon, endContent, removeButton, ...containerProps }: TokenLinkProps): import("react").JSX.Element;
+export declare function TokenLink({ ref, href, isDisabled, LinkComponent, linkStyleProps, labelContent, icon, endContent, removeButton, onClick: onClickProp, onMouseUp: onMouseUpProp, ...containerProps }: TokenLinkProps): import("react").JSX.Element;
 export declare namespace TokenLink {
     var displayName: string;
 }

package/dist/Token/TokenLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenLink.d.ts","sourceRoot":"","sources":["../../src/Token/TokenLink.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,aAAa,EAAE,iBAAiB,CAAC;IACjC,mEAAmE;IACnE,cAAc,EAAE;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IAC5D,wEAAwE;IACxE,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,YAAY,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,CAAC,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,GAAG,cAAc,EAClB,EAAE,cAAc,+BA6BhB;yBAxCe,SAAS"}
+{"version":3,"file":"TokenLink.d.ts","sourceRoot":"","sources":["../../src/Token/TokenLink.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,aAAa,EAAE,iBAAiB,CAAC;IACjC,mEAAmE;IACnE,cAAc,EAAE;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IAC5D,wEAAwE;IACxE,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,YAAY,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,CAAC,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,cAAc,EAClB,EAAE,cAAc,+BAmChB;yBAhDe,SAAS"}