@surdeddd/bottom-sheet 0.1.0 → 0.2.0

package/README.md

@@ -11,6 +11,12 @@ A framework-agnostic bottom-sheet primitive. Spring physics, Pointer Events,
 GPU-only motion, full keyboard a11y, hardware-back interception, multi-sheet
 stacking — and the exact same engine behind every adapter.
 
+## 🚀 [Live demo → bottom-sheet-demo.vercel.app](https://bottom-sheet-demo.vercel.app)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Surdeddd/BottomSheet/main/docs/gifs/01-drag-to-close.gif" alt="drag to close — spring physics" width="380" />
+</p>
+
 ```
 
                        ┌───────────────────────────────────────┐

package/dist/BottomSheetEngine-CIT9Htti.d.cts

@@ -0,0 +1,219 @@
+import { T as TransformAxis } from './transform-jVfAikE9.cjs';
+
+type SnapPoint = number | `${number}%` | "fit" | "full" | (string & {});
+type SnapPointDef<Id extends string = string> = {
+    id: Id;
+    size: SnapPoint;
+};
+type SnapId<T extends readonly SnapPointDef<string>[] | {
+    snapPoints: readonly SnapPointDef<string>[];
+}> = T extends {
+    snapPoints: readonly SnapPointDef<infer U>[];
+} ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
+type SheetMode = TransformAxis;
+type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
+type ScrimPresetConfig = {
+    color: string;
+    blur: string | undefined;
+    range: [number, number];
+    interactive: boolean;
+};
+declare const SCRIM_PRESETS: Readonly<Record<ScrimPreset, ScrimPresetConfig>>;
+type ScrimUpdate = {
+    color?: string | null;
+    blur?: string | null;
+    interactive?: boolean;
+    range?: [number, number];
+    preset?: ScrimPreset;
+    mode?: "full" | "above-sheet" | "off";
+    tapToClose?: boolean;
+    enabled?: boolean;
+};
+type ScrimOverlayPosition = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | "sheet-top-left" | "sheet-top-center" | "sheet-top-right";
+type ScrimOverlayOptions = {
+    children: HTMLElement | DocumentFragment;
+    position?: ScrimOverlayPosition;
+    interactive?: boolean;
+    inset?: string;
+};
+type SheetEventMap = {
+    "before-snap": {
+        id: string;
+        size: number;
+        cancel: () => void;
+        previousId: string;
+    };
+    snap: {
+        id: string;
+        size: number;
+    };
+    progress: {
+        value: number;
+        size: number;
+    };
+    dragstart: {
+        size: number;
+    };
+    drag: {
+        size: number;
+        delta: number;
+    };
+    dragend: {
+        size: number;
+        velocity: number;
+    };
+    close: void;
+    open: {
+        id: string;
+    };
+};
+type EngineOptions = {
+    element: HTMLElement;
+    handle?: HTMLElement;
+    scrollContainer?: HTMLElement;
+    backdrop?: HTMLElement;
+    scrim?: HTMLElement;
+    screenComponent?: HTMLElement;
+    mode?: SheetMode;
+    snapPoints: SnapPointDef[];
+    allowed?: string[];
+    initial?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    respectReducedMotion?: boolean;
+    flickVelocity?: number;
+    dragThreshold?: number;
+    rubberBand?: boolean;
+    backdropRange?: [number, number];
+    screenRange?: [number, number];
+    scrimMode?: "full" | "above-sheet" | "off";
+    scrimColor?: string;
+    scrimBlur?: string;
+    scrimInteractive?: boolean;
+    scrimTapToClose?: boolean;
+    scrimPreset?: ScrimPreset;
+    animation?: "spring" | "tween" | "ios-spring" | "material-bounce" | "linear" | "snappy";
+    spring?: {
+        stiffness?: number;
+        damping?: number;
+        mass?: number;
+    };
+    focusTrap?: boolean;
+    initialFocus?: string | HTMLElement;
+    closeOnEscape?: boolean;
+    lockBodyScroll?: boolean;
+    closeOnBack?: boolean;
+    routedTo?: string;
+    inertSiblings?: boolean;
+    persistKey?: string;
+    autoCollapseAfter?: number;
+    linkedSheets?: BottomSheetEngineLike[];
+    viewTransitions?: boolean;
+};
+
+type BottomSheetEngineLike = BottomSheetEngine;
+type TeardownScope = {
+    add: (fn: (() => void) | null | undefined) => void;
+};
+type Plugin = {
+    name: string;
+    install: (engine: BottomSheetEngine, scope: TeardownScope) => void | (() => void);
+};
+type EngineState = {
+    size: number;
+    activeId: string;
+    isDragging: boolean;
+    isAnimating: boolean;
+    progress: number;
+};
+
+type Listener<K extends keyof SheetEventMap> = (payload: SheetEventMap[K]) => void;
+declare class BottomSheetEngine {
+    private id;
+    private element;
+    private handle;
+    private scrollContainer?;
+    private backdrop?;
+    private screenComponent?;
+    private scrimParent;
+    private mode;
+    private flickVelocity;
+    private dragThreshold;
+    private rubberBandEnabled;
+    private scrim;
+    private aria;
+    private animation;
+    private lifecycle;
+    private closeOnBack;
+    private routedTo;
+    private snapPointsRaw;
+    private snaps;
+    private activeId;
+    private size;
+    private gesture;
+    private rootEl;
+    private destroyed;
+    private currentViewTransition;
+    private currentAbort;
+    private sizeWriteSentinel;
+    private progressWriteSentinel;
+    private isTopSheet;
+    private progressPayload;
+    private dragContextBuf;
+    private bus;
+    private persistKey;
+    private linkedSheets;
+    private scrollCache;
+    private teardowns;
+    private transformTemplate;
+    constructor(opts: EngineOptions);
+    get state(): EngineState;
+    on<K extends keyof SheetEventMap>(event: K, fn: Listener<K>): () => void;
+    use(plugin: Plugin): this;
+    setLinkedSheets(sheets: BottomSheetEngine[]): void;
+    getAllowedIds(): string[];
+    snapTo(id: string, velocityOrOpts?: number | {
+        velocity?: number;
+        signal?: AbortSignal;
+    }, _skipBeforeSnap?: boolean): Promise<void>;
+    dragTo(targetSize: number, velocityOrOpts?: number | {
+        velocity?: number;
+        signal?: AbortSignal;
+    }): Promise<void>;
+    open(id?: string): Promise<void>;
+    close(): Promise<void>;
+    setAllowed(ids: string[], snap?: string): void;
+    setBackdropRange(range: [number, number]): void;
+    setScreenRange(range: [number, number]): void;
+    setScrimColor(color: string | undefined | null): void;
+    setScrimBlur(blur: string | undefined | null): void;
+    setScrimInteractive(interactive: boolean): void;
+    setScrim(opts: ScrimUpdate): void;
+    setScrimMode(mode: "full" | "above-sheet" | "off"): void;
+    setScrimTapToClose(enabled: boolean): void;
+    setScrimEnabled(enabled: boolean): void;
+    setScrimOverlay(opts: ScrimOverlayOptions): () => void;
+    getScrimState(): {
+        mode: "full" | "above-sheet" | "off";
+        enabled: boolean;
+    };
+    setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
+    destroy(): void;
+    private emit;
+    private newCycle;
+    private emitBeforeSnap;
+    private recomputeSnaps;
+    private getAllowedRange;
+    private updateAriaSlider;
+    private registerInStack;
+    private attach;
+    private attachFeatures;
+    private settleAfterDrag;
+    private haptic;
+    private applySize;
+    private computeProgress;
+    private handleOpen;
+    private handleClose;
+}
+
+export { BottomSheetEngine as B, type EngineState as E, type Plugin as P, type SnapPointDef as S, type TeardownScope as T, type SheetMode as a, type EngineOptions as b, type SnapPoint as c, type SheetEventMap as d, SCRIM_PRESETS as e, type ScrimOverlayOptions as f, type ScrimOverlayPosition as g, type ScrimPreset as h, type ScrimPresetConfig as i, type ScrimUpdate as j, type SnapId as k };

package/dist/BottomSheetEngine-Df9MwBbm.d.ts

@@ -0,0 +1,219 @@
+import { T as TransformAxis } from './transform-jVfAikE9.js';
+
+type SnapPoint = number | `${number}%` | "fit" | "full" | (string & {});
+type SnapPointDef<Id extends string = string> = {
+    id: Id;
+    size: SnapPoint;
+};
+type SnapId<T extends readonly SnapPointDef<string>[] | {
+    snapPoints: readonly SnapPointDef<string>[];
+}> = T extends {
+    snapPoints: readonly SnapPointDef<infer U>[];
+} ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
+type SheetMode = TransformAxis;
+type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
+type ScrimPresetConfig = {
+    color: string;
+    blur: string | undefined;
+    range: [number, number];
+    interactive: boolean;
+};
+declare const SCRIM_PRESETS: Readonly<Record<ScrimPreset, ScrimPresetConfig>>;
+type ScrimUpdate = {
+    color?: string | null;
+    blur?: string | null;
+    interactive?: boolean;
+    range?: [number, number];
+    preset?: ScrimPreset;
+    mode?: "full" | "above-sheet" | "off";
+    tapToClose?: boolean;
+    enabled?: boolean;
+};
+type ScrimOverlayPosition = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | "sheet-top-left" | "sheet-top-center" | "sheet-top-right";
+type ScrimOverlayOptions = {
+    children: HTMLElement | DocumentFragment;
+    position?: ScrimOverlayPosition;
+    interactive?: boolean;
+    inset?: string;
+};
+type SheetEventMap = {
+    "before-snap": {
+        id: string;
+        size: number;
+        cancel: () => void;
+        previousId: string;
+    };
+    snap: {
+        id: string;
+        size: number;
+    };
+    progress: {
+        value: number;
+        size: number;
+    };
+    dragstart: {
+        size: number;
+    };
+    drag: {
+        size: number;
+        delta: number;
+    };
+    dragend: {
+        size: number;
+        velocity: number;
+    };
+    close: void;
+    open: {
+        id: string;
+    };
+};
+type EngineOptions = {
+    element: HTMLElement;
+    handle?: HTMLElement;
+    scrollContainer?: HTMLElement;
+    backdrop?: HTMLElement;
+    scrim?: HTMLElement;
+    screenComponent?: HTMLElement;
+    mode?: SheetMode;
+    snapPoints: SnapPointDef[];
+    allowed?: string[];
+    initial?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    respectReducedMotion?: boolean;
+    flickVelocity?: number;
+    dragThreshold?: number;
+    rubberBand?: boolean;
+    backdropRange?: [number, number];
+    screenRange?: [number, number];
+    scrimMode?: "full" | "above-sheet" | "off";
+    scrimColor?: string;
+    scrimBlur?: string;
+    scrimInteractive?: boolean;
+    scrimTapToClose?: boolean;
+    scrimPreset?: ScrimPreset;
+    animation?: "spring" | "tween" | "ios-spring" | "material-bounce" | "linear" | "snappy";
+    spring?: {
+        stiffness?: number;
+        damping?: number;
+        mass?: number;
+    };
+    focusTrap?: boolean;
+    initialFocus?: string | HTMLElement;
+    closeOnEscape?: boolean;
+    lockBodyScroll?: boolean;
+    closeOnBack?: boolean;
+    routedTo?: string;
+    inertSiblings?: boolean;
+    persistKey?: string;
+    autoCollapseAfter?: number;
+    linkedSheets?: BottomSheetEngineLike[];
+    viewTransitions?: boolean;
+};
+
+type BottomSheetEngineLike = BottomSheetEngine;
+type TeardownScope = {
+    add: (fn: (() => void) | null | undefined) => void;
+};
+type Plugin = {
+    name: string;
+    install: (engine: BottomSheetEngine, scope: TeardownScope) => void | (() => void);
+};
+type EngineState = {
+    size: number;
+    activeId: string;
+    isDragging: boolean;
+    isAnimating: boolean;
+    progress: number;
+};
+
+type Listener<K extends keyof SheetEventMap> = (payload: SheetEventMap[K]) => void;
+declare class BottomSheetEngine {
+    private id;
+    private element;
+    private handle;
+    private scrollContainer?;
+    private backdrop?;
+    private screenComponent?;
+    private scrimParent;
+    private mode;
+    private flickVelocity;
+    private dragThreshold;
+    private rubberBandEnabled;
+    private scrim;
+    private aria;
+    private animation;
+    private lifecycle;
+    private closeOnBack;
+    private routedTo;
+    private snapPointsRaw;
+    private snaps;
+    private activeId;
+    private size;
+    private gesture;
+    private rootEl;
+    private destroyed;
+    private currentViewTransition;
+    private currentAbort;
+    private sizeWriteSentinel;
+    private progressWriteSentinel;
+    private isTopSheet;
+    private progressPayload;
+    private dragContextBuf;
+    private bus;
+    private persistKey;
+    private linkedSheets;
+    private scrollCache;
+    private teardowns;
+    private transformTemplate;
+    constructor(opts: EngineOptions);
+    get state(): EngineState;
+    on<K extends keyof SheetEventMap>(event: K, fn: Listener<K>): () => void;
+    use(plugin: Plugin): this;
+    setLinkedSheets(sheets: BottomSheetEngine[]): void;
+    getAllowedIds(): string[];
+    snapTo(id: string, velocityOrOpts?: number | {
+        velocity?: number;
+        signal?: AbortSignal;
+    }, _skipBeforeSnap?: boolean): Promise<void>;
+    dragTo(targetSize: number, velocityOrOpts?: number | {
+        velocity?: number;
+        signal?: AbortSignal;
+    }): Promise<void>;
+    open(id?: string): Promise<void>;
+    close(): Promise<void>;
+    setAllowed(ids: string[], snap?: string): void;
+    setBackdropRange(range: [number, number]): void;
+    setScreenRange(range: [number, number]): void;
+    setScrimColor(color: string | undefined | null): void;
+    setScrimBlur(blur: string | undefined | null): void;
+    setScrimInteractive(interactive: boolean): void;
+    setScrim(opts: ScrimUpdate): void;
+    setScrimMode(mode: "full" | "above-sheet" | "off"): void;
+    setScrimTapToClose(enabled: boolean): void;
+    setScrimEnabled(enabled: boolean): void;
+    setScrimOverlay(opts: ScrimOverlayOptions): () => void;
+    getScrimState(): {
+        mode: "full" | "above-sheet" | "off";
+        enabled: boolean;
+    };
+    setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
+    destroy(): void;
+    private emit;
+    private newCycle;
+    private emitBeforeSnap;
+    private recomputeSnaps;
+    private getAllowedRange;
+    private updateAriaSlider;
+    private registerInStack;
+    private attach;
+    private attachFeatures;
+    private settleAfterDrag;
+    private haptic;
+    private applySize;
+    private computeProgress;
+    private handleOpen;
+    private handleClose;
+}
+
+export { BottomSheetEngine as B, type EngineState as E, type Plugin as P, type SnapPointDef as S, type TeardownScope as T, type SheetMode as a, type EngineOptions as b, type SnapPoint as c, type SheetEventMap as d, SCRIM_PRESETS as e, type ScrimOverlayOptions as f, type ScrimOverlayPosition as g, type ScrimPreset as h, type ScrimPresetConfig as i, type ScrimUpdate as j, type SnapId as k };