@astryxdesign/lab 0.1.9-canary.fef7dca → 0.2.0-canary.0e01213

package/dist/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @file BottomSheet.tsx
+ * @input Uses React, StyleX, theme tokens, core hooks (useScrollLock), utils, useSheetGestures
+ * @output Exports BottomSheet component and BottomSheetProps
+ * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
+ *
+ * A mobile touch surface that rises from the bottom edge: grab handle, snap
+ * points, and swipe-to-dismiss. It owns a native modal `<dialog>` directly and
+ * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
+ * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
+ * heavier overlay component — so it controls its own sizing and can render a
+ * full-height transparent shell with the visible sheet bottom-anchored inside.
+ * That shell is what lets the sheet translate freely (including a little past
+ * fully-open) without clipping against a fixed dialog edge.
+ *
+ * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
+ * geometry lives in the pure, tested `snapOffsets` module. Both are internal
+ * to BottomSheet and not exported from the lab entry point.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs (props table, features, usage)
+ * - /packages/lab/src/BottomSheet/BottomSheet.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/BottomSheet/index.ts (exports if types change)
+ * - /apps/storybook/stories/BottomSheet.stories.tsx (examples and visual coverage)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+/**
+ * Height budget for each named size, as a fraction of the viewport:
+ * - `hug` — fits its content, never taller than 92%.
+ * - `capped` — a scrolling mid-height panel (62%).
+ * - `tall` — a pinned near-full panel (92%); use when content streams in so
+ *   the sheet doesn't resize under the user.
+ */
+declare const HEIGHT_BUDGETS: {
+    readonly hug: "92dvh";
+    readonly capped: "62dvh";
+    readonly tall: "92dvh";
+};
+export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
+export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
+    /** Ref forwarded to the underlying <dialog> element. */
+    ref?: React.Ref<HTMLDialogElement>;
+    /** Whether the sheet is open. Fully controlled — pair with `onOpenChange`. */
+    isOpen: boolean;
+    /**
+     * Called when the sheet opens or closes. The boolean is the requested next
+     * state (`false` on Escape, scrim click, or a swipe past the dismiss
+     * threshold). The caller owns the open state.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Accessible label for the sheet (required — the sheet has no built-in
+     * heading to derive a name from).
+     */
+    label: string;
+    /** Sheet content, rendered below the grab handle in a scrollable area. */
+    children: ReactNode;
+    /**
+     * How tall the sheet is. A named budget, or any explicit height:
+     * - `'hug'` — fits its content, never taller than 92% of the viewport.
+     * - `'capped'` — a scrolling mid-height panel (~62%).
+     * - `'tall'` — a pinned near-full panel (~92%); use when content streams in
+     *   so the sheet doesn't resize under the user.
+     * - a `number` (px) or CSS length string (e.g. `'70dvh'`, `480`) for a
+     *   custom budget.
+     *
+     * The user can still drag between snap points regardless of the starting
+     * height. On viewports shorter than the budget the sheet fills the
+     * available height.
+     * @default 'capped'
+     */
+    height?: BottomSheetHeight | number | string;
+    /** Test ID for the root element. */
+    'data-testid'?: string;
+}
+/**
+ * A mobile touch sheet that rises from the bottom edge, with a grab handle,
+ * drag-to-resize snap points, and swipe-to-dismiss. It owns a native modal
+ * `<dialog>` (top layer, focus trap, `::backdrop` scrim) and locks body scroll
+ * while open; a slow drag settles to the nearest snap point, a flick down
+ * dismisses, and Escape closes — so the swipe always has a keyboard
+ * equivalent.
+ *
+ * @example
+ * ```
+ * const [isOpen, setIsOpen] = useState(false);
+ * <BottomSheet
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   label="Filters">
+ *   <FilterControls />
+ * </BottomSheet>
+ * ```
+ */
+export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
+export declare namespace BottomSheet {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=BottomSheet.d.ts.map

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAqBlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAuJ5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAyKlB;yBAlLe,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -0,0 +1,297 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file BottomSheet.tsx
+ * @input Uses React, StyleX, theme tokens, core hooks (useScrollLock), utils, useSheetGestures
+ * @output Exports BottomSheet component and BottomSheetProps
+ * @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
+ *
+ * A mobile touch surface that rises from the bottom edge: grab handle, snap
+ * points, and swipe-to-dismiss. It owns a native modal `<dialog>` directly and
+ * composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
+ * top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
+ * heavier overlay component — so it controls its own sizing and can render a
+ * full-height transparent shell with the visible sheet bottom-anchored inside.
+ * That shell is what lets the sheet translate freely (including a little past
+ * fully-open) without clipping against a fixed dialog edge.
+ *
+ * The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
+ * geometry lives in the pure, tested `snapOffsets` module. Both are internal
+ * to BottomSheet and not exported from the lab entry point.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/BottomSheet/BottomSheet.doc.mjs (props table, features, usage)
+ * - /packages/lab/src/BottomSheet/BottomSheet.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/BottomSheet/index.ts (exports if types change)
+ * - /apps/storybook/stories/BottomSheet.stories.tsx (examples and visual coverage)
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, durationVars, easeVars, radiusVars, shadowVars, sizeVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { useDevWarning, useScrollLock } from '@astryxdesign/core/hooks';
+import { mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
+import { useSheetGestures } from "./useSheetGestures.js";
+
+// Detent fractions of the viewport, ascending (peek / mid / full). Detents
+// that land within DETENT_DEDUP_PX of each other (e.g. a hug height next to a
+// snap) are de-duped in the gesture hook, and any taller than the sheet are
+// dropped, so a full set is safe to offer. The shortest is a glance "peek";
+// the scrim hides as the sheet collapses onto it (see onScrimOpacity).
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SNAP_FRACTIONS = [0.14, 0.5, 0.92];
+
+/**
+ * Height budget for each named size, as a fraction of the viewport:
+ * - `hug` — fits its content, never taller than 92%.
+ * - `capped` — a scrolling mid-height panel (62%).
+ * - `tall` — a pinned near-full panel (92%); use when content streams in so
+ *   the sheet doesn't resize under the user.
+ */
+const HEIGHT_BUDGETS = {
+  hug: '92dvh',
+  // upper bound only; the sheet hugs its content beneath it
+  capped: '62dvh',
+  tall: '92dvh'
+};
+// px the sheet extends below its budget as reserved padding, revealed by an
+// upward overdrag rather than showing a gap.
+// SYNC: must match OVERSCROLL_MAX in useSheetGestures.ts (the drag cap).
+const OVERSCROLL_PADDING = 48;
+
+/**
+ * Default snap detents in px, resolved against the *visual* viewport (like iOS
+ * detents), so a mid rest point is ~half the screen regardless of the sheet's
+ * own height budget. Read lazily at drag start (no persistent listener) so it
+ * reflects the live viewport after a rotation or the virtual keyboard opening.
+ * SSR-safe: returns `[]` off the client.
+ */
+function defaultSnapHeights() {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+  const vh = window.visualViewport?.height ?? window.innerHeight;
+  return SNAP_FRACTIONS.map(f => f * vh);
+}
+const styles = {
+  sheet: {
+    kfzvcC: "x67bb7w",
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kAzted: "x2lwn1j",
+    kzqmXN: "xh8yej3",
+    ks0D6T: "x11gisft",
+    kWkggS: "x10xzikg",
+    krdFHd: "x81l70g",
+    kfmiAY: "x7hs6f1",
+    kGVxlE: "x1kcpxr7",
+    kI3sdo: "x1a2a7pz",
+    kVQacm: "xb3r6kr",
+    kGO01o: "x1wkw6tp",
+    k1K539: "x1if0o47",
+    k3aq6I: "xnn1q72 xhbqy3z",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "x80gvsz",
+    kAMwcw: "xlr8y92",
+    k6sLGO: "x1so62im",
+    k6CgDc: "xzg1mie",
+    $$css: true
+  },
+  sheetClosing: {
+    k3aq6I: "x1weeur4",
+    $$css: true
+  },
+  budget: {
+    kZKoxP: "x1tpcejd",
+    $$css: true
+  },
+  hugHeight: {
+    kZKoxP: "xg7h5cd",
+    kskxy: "x14bu9tk",
+    $$css: true
+  }
+};
+/**
+ * A mobile touch sheet that rises from the bottom edge, with a grab handle,
+ * drag-to-resize snap points, and swipe-to-dismiss. It owns a native modal
+ * `<dialog>` (top layer, focus trap, `::backdrop` scrim) and locks body scroll
+ * while open; a slow drag settles to the nearest snap point, a flick down
+ * dismisses, and Escape closes — so the swipe always has a keyboard
+ * equivalent.
+ *
+ * @example
+ * ```
+ * const [isOpen, setIsOpen] = useState(false);
+ * <BottomSheet
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   label="Filters">
+ *   <FilterControls />
+ * </BottomSheet>
+ * ```
+ */
+export function BottomSheet({
+  ref,
+  isOpen,
+  onOpenChange,
+  label,
+  children,
+  height = 'capped',
+  xstyle,
+  ...props
+}) {
+  const dialogRef = useRef(null);
+  const triggerRef = useRef(null);
+  const sheetNodeRef = useRef(null);
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+
+  // Set imperatively (not via state) so a 60fps drag doesn't re-render. The
+  // hook reports the scrim opacity for the current detent (hidden at the peek).
+  const handleScrimOpacity = useCallback(opacity => {
+    dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
+  }, []);
+  const {
+    contentProps,
+    handleProps,
+    bodyProps,
+    sheetRef
+  } = useSheetGestures({
+    isOpen,
+    onDismiss: close,
+    snapHeights: defaultSnapHeights,
+    onScrimOpacity: handleScrimOpacity
+  });
+
+  // showModal() enters the top layer with a focus trap + ::backdrop; on close
+  // we animate out (below) then restore focus to the opener.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+      dialog.style.setProperty('--_sheet-scrim-opacity', '1');
+      if (!dialog.open) {
+        dialog.showModal();
+        // Override showModal()'s default (first tabbable) to land on the panel,
+        // so AT reads from the label — unless a descendant sets data-autofocus.
+        const autofocus = dialog.querySelector('[data-autofocus]');
+        if (autofocus) {
+          autofocus.focus();
+        } else {
+          sheetNodeRef.current?.focus();
+        }
+      }
+    } else if (dialog.open) {
+      // Wait for the slide-out (sheetClosing, applied this render) before
+      // close() releases the top layer. Timeout backstops a missing
+      // transitionend (reduced motion, hidden tab).
+      const sheet = sheetNodeRef.current;
+      let done = false;
+      const finish = () => {
+        if (done) {
+          return;
+        }
+        done = true;
+        clearTimeout(timer);
+        sheet?.removeEventListener('transitionend', onEnd);
+        if (dialog.open) {
+          dialog.close();
+        }
+        triggerRef.current?.focus();
+        triggerRef.current = null;
+      };
+      const onEnd = event => {
+        if (event.target === sheet && event.propertyName === 'transform') {
+          finish();
+        }
+      };
+      sheet?.addEventListener('transitionend', onEnd);
+      // Backstop above --duration-medium (410ms) so transitionend normally
+      // fires first; this only covers environments that don't emit it.
+      const timer = setTimeout(finish, 450);
+      return () => {
+        clearTimeout(timer);
+        sheet?.removeEventListener('transitionend', onEnd);
+      };
+    }
+  }, [isOpen]);
+  useScrollLock(isOpen);
+
+  // Enforce an accessible name: label is required by types, but a JS caller
+  // can still pass an empty string, leaving the sheet unnamed.
+  useDevWarning('BottomSheet', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isOpen && !label);
+  const handleCancel = useCallback(event => {
+    event.preventDefault();
+    close();
+  }, [close]);
+  // Explicit Escape handler in addition to the native `cancel` event, for
+  // environments that don't synthesize `cancel`.
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close();
+    }
+  }, [close]);
+  const handleClick = useCallback(event => {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  }, [close]);
+  const isNamed = typeof height === 'string' && height in HEIGHT_BUDGETS;
+  const budget = isNamed ? HEIGHT_BUDGETS[height] : typeof height === 'number' ? `${height}px` : height;
+  const isHug = height === 'hug';
+  return /*#__PURE__*/_jsx("dialog", {
+    ...{
+      0: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x47corl x1s85apg x1a2a7pz xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+      },
+      1: {
+        className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x47corl x1a2a7pz x1lliihq xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
+      }
+    }[!!isOpen << 0],
+    ref: mergeRefs(ref, dialogRef),
+    "aria-label": label,
+    "aria-modal": "true",
+    onCancel: handleCancel,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...props,
+    children: /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x10l6tqk x17y0mx6 x1ey2m1c x78zum5 xl56j7k x47corl"
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        ref: mergeRefs(sheetRef, sheetNodeRef),
+        tabIndex: -1,
+        ...mergeProps(themeProps('bottom-sheet'), stylex.props(styles.sheet, isHug ? styles.hugHeight : styles.budget, !isOpen && styles.sheetClosing, xstyle), undefined, {
+          ['--_sheet-budget']: budget,
+          ...contentProps.style
+        }),
+        children: [/*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1k15mir x5ve5x3 x1jm3nie"
+          },
+          ...handleProps,
+          "aria-hidden": "true",
+          children: /*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x1m747yf x11c6zpc xjspbzw x1m4xfpy"
+            }
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x1iyjqo2 x2lwn1j x1odjw0f x8du1vd xx69xxh"
+          },
+          ...bodyProps,
+          children: children
+        })]
+      })
+    })
+  });
+}
+BottomSheet.displayName = 'BottomSheet';

package/dist/BottomSheet/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file index.ts
+ * @input BottomSheet.tsx
+ * @output Re-exports BottomSheet component and BottomSheetProps type
+ * @position Lab entry point for the BottomSheet directory
+ */
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC"}

package/dist/BottomSheet/index.js

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input BottomSheet.tsx
+ * @output Re-exports BottomSheet component and BottomSheetProps type
+ * @position Lab entry point for the BottomSheet directory
+ */
+
+export { BottomSheet } from "./BottomSheet.js";

package/dist/BottomSheet/snapOffsets.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @file snapOffsets.ts
+ * @input Pure geometry helpers — no React, no DOM.
+ * @output Converts snap points to translateY offsets for the sheet surface.
+ * @position Internal to BottomSheet; consumed by useSheetGestures, tested by
+ *   snapOffsets.test.ts.
+ *
+ * The sheet is rendered at its full (fully-open) height and *translated down*
+ * to express shorter detents — translate is GPU-composited, so this is cheaper
+ * than animating layout height. A detent is therefore a translateY offset in
+ * px from the fully-open position (0 = fully open, larger = more collapsed).
+ * These helpers turn snap points into that offset list; they are pure so the
+ * geometry can be unit-tested without a DOM.
+ */
+/**
+ * Detents whose resting offsets land within this many px of each other are
+ * treated as the same stop (the taller one wins). Stops the sheet from having
+ * two near-identical rest positions — e.g. when a content-hugging height sits
+ * a hair away from a fractional snap point.
+ */
+export declare const DETENT_DEDUP_PX = 48;
+/** Resolve snap points given as viewport fractions (0, 1] to px heights. */
+export declare function snapFractionsToHeights(fractions: readonly number[], viewportPx: number): number[];
+/**
+ * Given the sheet's full height (px, as rendered fully open) and a set of
+ * candidate detent *visible heights* (px), return the resting translateY
+ * offsets from fully-open, ascending and de-duplicated.
+ *
+ * - `0` (fully open) is always the first detent.
+ * - Only heights strictly shorter than the sheet become collapsed detents; a
+ *   height >= the sheet can't be shown by translating down, so it's dropped.
+ * - Offsets closer than `dedupPx` collapse to the smaller (taller) offset, so
+ *   near-identical detents — e.g. a hug height ≈ a snap point — become one stop.
+ */
+export declare function computeDetentOffsets(sheetHeight: number, detentHeights: readonly number[], dedupPx?: number): number[];
+/** Nearest value in `offsets` to `value` (offsets must be non-empty). */
+export declare function nearestOffset(value: number, offsets: readonly number[]): number;
+/**
+ * Scrim opacity (1 = fully visible, 0 = hidden) for a drag/settle `offset`.
+ * The scrim stays full while the sheet is at or above its second-shortest
+ * detent, then fades to 0 as it collapses onto the shortest ("peek") detent —
+ * a glance state that reveals the content behind — and stays hidden below it.
+ * A single-detent sheet has no peek, so it instead fades across the dismiss
+ * overshoot toward `dismissOffset`.
+ */
+export declare function scrimOpacityForOffset(offset: number, offsets: readonly number[], dismissOffset: number): number;
+/**
+ * Settle target for a released drag. Restricts candidates to the drag
+ * direction so a committed drag never snaps *back past* where it started
+ * (a down-drag settles at/below the start, an up-drag at/above), then picks
+ * the nearest remaining detent. `dir`: 1 = dragged down, -1 = up, 0 = neither.
+ */
+export declare function resolveSettleOffset(value: number, offsets: readonly number[], dir: number, baseOffset: number): number;
+//# sourceMappingURL=snapOffsets.d.ts.map

package/dist/BottomSheet/snapOffsets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,GACpB,MAAM,CAWR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,CAcR"}

package/dist/BottomSheet/snapOffsets.js

@@ -0,0 +1,101 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file snapOffsets.ts
+ * @input Pure geometry helpers — no React, no DOM.
+ * @output Converts snap points to translateY offsets for the sheet surface.
+ * @position Internal to BottomSheet; consumed by useSheetGestures, tested by
+ *   snapOffsets.test.ts.
+ *
+ * The sheet is rendered at its full (fully-open) height and *translated down*
+ * to express shorter detents — translate is GPU-composited, so this is cheaper
+ * than animating layout height. A detent is therefore a translateY offset in
+ * px from the fully-open position (0 = fully open, larger = more collapsed).
+ * These helpers turn snap points into that offset list; they are pure so the
+ * geometry can be unit-tested without a DOM.
+ */
+
+/**
+ * Detents whose resting offsets land within this many px of each other are
+ * treated as the same stop (the taller one wins). Stops the sheet from having
+ * two near-identical rest positions — e.g. when a content-hugging height sits
+ * a hair away from a fractional snap point.
+ */
+export const DETENT_DEDUP_PX = 48;
+
+/** Resolve snap points given as viewport fractions (0, 1] to px heights. */
+export function snapFractionsToHeights(fractions, viewportPx) {
+  return fractions.filter(f => f > 0 && f <= 1).map(f => f * viewportPx);
+}
+
+/**
+ * Given the sheet's full height (px, as rendered fully open) and a set of
+ * candidate detent *visible heights* (px), return the resting translateY
+ * offsets from fully-open, ascending and de-duplicated.
+ *
+ * - `0` (fully open) is always the first detent.
+ * - Only heights strictly shorter than the sheet become collapsed detents; a
+ *   height >= the sheet can't be shown by translating down, so it's dropped.
+ * - Offsets closer than `dedupPx` collapse to the smaller (taller) offset, so
+ *   near-identical detents — e.g. a hug height ≈ a snap point — become one stop.
+ */
+export function computeDetentOffsets(sheetHeight, detentHeights, dedupPx = DETENT_DEDUP_PX) {
+  const collapsed = detentHeights.filter(h => h > 0 && h < sheetHeight).map(h => sheetHeight - h);
+  const ascending = [0, ...collapsed].sort((a, b) => a - b);
+  const deduped = [];
+  for (const offset of ascending) {
+    const last = deduped[deduped.length - 1];
+    if (last === undefined || offset - last >= dedupPx) {
+      deduped.push(offset);
+    }
+  }
+  return deduped;
+}
+
+/** Nearest value in `offsets` to `value` (offsets must be non-empty). */
+export function nearestOffset(value, offsets) {
+  return offsets.reduce((best, o) => Math.abs(o - value) < Math.abs(best - value) ? o : best, offsets[0]);
+}
+
+/**
+ * Scrim opacity (1 = fully visible, 0 = hidden) for a drag/settle `offset`.
+ * The scrim stays full while the sheet is at or above its second-shortest
+ * detent, then fades to 0 as it collapses onto the shortest ("peek") detent —
+ * a glance state that reveals the content behind — and stays hidden below it.
+ * A single-detent sheet has no peek, so it instead fades across the dismiss
+ * overshoot toward `dismissOffset`.
+ */
+export function scrimOpacityForOffset(offset, offsets, dismissOffset) {
+  const shortest = offsets[offsets.length - 1];
+  const fadeStart = offsets.length >= 2 ? offsets[offsets.length - 2] : 0;
+  const fadeEnd = offsets.length >= 2 ? shortest : dismissOffset;
+  if (offset <= fadeStart) {
+    return 1;
+  }
+  if (offset >= fadeEnd) {
+    return 0;
+  }
+  return 1 - (offset - fadeStart) / (fadeEnd - fadeStart);
+}
+
+/**
+ * Settle target for a released drag. Restricts candidates to the drag
+ * direction so a committed drag never snaps *back past* where it started
+ * (a down-drag settles at/below the start, an up-drag at/above), then picks
+ * the nearest remaining detent. `dir`: 1 = dragged down, -1 = up, 0 = neither.
+ */
+export function resolveSettleOffset(value, offsets, dir, baseOffset) {
+  let candidates = offsets;
+  if (dir > 0) {
+    const downward = offsets.filter(o => o >= baseOffset);
+    if (downward.length > 0) {
+      candidates = downward;
+    }
+  } else if (dir < 0) {
+    const upward = offsets.filter(o => o <= baseOffset);
+    if (upward.length > 0) {
+      candidates = upward;
+    }
+  }
+  return nearestOffset(value, candidates);
+}