@surdeddd/bottom-sheet 0.1.0 → 0.3.0

package/dist/solid.d.cts

@@ -1,28 +1,269 @@
 import { JSX } from 'solid-js';
-import { S as SnapPointDef, a as SheetMode, E as EngineState, B as BottomSheetEngine } from './BottomSheetEngine-CvSVbo6c.cjs';
-export { b as EngineOptions, c as SnapPoint } from './BottomSheetEngine-CvSVbo6c.cjs';
-import './transform-Brkf-wzo.cjs';
+
+type TransformAxis = "bottom" | "top" | "left" | "right";
+
+type SnapPoint = number | `${number}%` | "fit" | "full" | (string & {});
+type SnapPointDef<Id extends string = string> = {
+    id: Id;
+    size: SnapPoint;
+};
+type SheetMode = TransformAxis;
+type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
+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;
+    stackEffect?: 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 AnchorAnimationPreset = "fade" | "scale" | "slide" | "pop" | "none";
+type AnchorAnimationSpec = AnchorAnimationPreset | {
+    preset?: AnchorAnimationPreset;
+    enter?: Keyframe[];
+    exit?: Keyframe[];
+    duration?: number;
+    easing?: string;
+    respectReducedMotion?: boolean;
+};
+
+type AnchorState = {
+    activeId: string;
+    size: number;
+    progress: number;
+};
+type AnchorPosition = ScrimOverlayPosition | "dock-bottom" | "dock-top";
+type AnchorOptions = {
+    element: HTMLElement;
+    position?: AnchorPosition;
+    inset?: string;
+    showOn?: string[] | ((state: AnchorState) => boolean);
+    fadeRange?: [number, number];
+    interactive?: boolean;
+    animation?: AnchorAnimationSpec;
+};
+
+type ScrimStageDef = {
+    id?: string;
+    for?: string | string[];
+    forRange?: [number, number];
+    element: HTMLElement;
+    position?: ScrimOverlayPosition;
+    inset?: string;
+    interactive?: boolean;
+    animation?: AnchorAnimationSpec;
+};
+type ScrimStagesOptions = {
+    stages: ScrimStageDef[];
+    position?: ScrimOverlayPosition;
+    inset?: string;
+    interactive?: boolean;
+    animation?: AnchorAnimationSpec;
+};
+
+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 anchors;
+    private anchorHost;
+    private stackZ;
+    private detachScrimStages;
+    private stackEffectEnabled;
+    private stackEffectPrimed;
+    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;
+    addAnchor(opts: AnchorOptions): () => void;
+    setScrimStages(opts: ScrimStagesOptions | null): () => 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 allowedIdsBySize;
+    private updateAriaSlider;
+    private registerInStack;
+    private applyStackDepth;
+    private attach;
+    private attachFeatures;
+    private settleAfterDrag;
+    private haptic;
+    private applySize;
+    private computeProgress;
+    private handleOpen;
+    private resyncAfterResize;
+    private handleClose;
+}
 
 /** @jsxImportSource solid-js */
 
-/**
- * Props for the Solid `BottomSheet` component. Optionally narrows to a
- * literal-id union `TId` when the consumer pins `snapPoints` with `as const`
- * and explicitly types the call site:
- *
- * ```tsx
- * const points = [
- *   { id: "min", size: 96 },
- *   { id: "full", size: "85%" },
- * ] as const;
- * <BottomSheet<"min" | "full"> snapPoints={points} onSnap={id => ...} />
- * ```
- *
- * Without an explicit type argument `TId` defaults to `string` so existing
- * call sites compile unchanged. The underlying engine stays `string`-typed;
- * the literal narrowing is a TS-only convenience layered on top of the
- * runtime.
- */
 type BottomSheetProps<TId extends string = string> = {
     snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
     allowed?: TId[] | ReadonlyArray<TId>;
@@ -43,24 +284,15 @@ type BottomSheetProps<TId extends string = string> = {
     backdrop?: boolean;
     closeOnBackdrop?: boolean;
     ariaLabel?: string;
-    /** Fires when the active snap settles. */
     onSnap?: (id: TId) => void;
-    /** Fires on every state-affecting engine event (snap/dragstart/dragend). */
     onChange?: (state: EngineState & {
         activeId: TId;
     }) => void;
-    /**
-     * Imperative escape hatch. Invoked once after the engine is constructed
-     * inside `onMount` (and once with `null` on cleanup). Use this to subscribe
-     * to per-frame events the adapter intentionally skips, e.g.
-     * `engineRef={(e) => e?.on("progress", ...)}`. Mirrors React's
-     * `useBottomSheet` engine handle.
-     */
     engineRef?: (engine: BottomSheetEngine | null) => void;
-    /** Header content rendered inside the drag handle. */
     header?: JSX.Element;
+    screen?: JSX.Element;
     children?: JSX.Element;
 };
 declare const BottomSheet: <TId extends string = string>(props: BottomSheetProps<TId>) => JSX.Element;
 
-export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
+export { BottomSheet, type BottomSheetProps, type EngineOptions, type EngineState, type SheetMode, type SnapPoint, type SnapPointDef };

package/dist/solid.d.ts

@@ -1,28 +1,269 @@
 import { JSX } from 'solid-js';
-import { S as SnapPointDef, a as SheetMode, E as EngineState, B as BottomSheetEngine } from './BottomSheetEngine-DbO8rW_3.js';
-export { b as EngineOptions, c as SnapPoint } from './BottomSheetEngine-DbO8rW_3.js';
-import './transform-Brkf-wzo.js';
+
+type TransformAxis = "bottom" | "top" | "left" | "right";
+
+type SnapPoint = number | `${number}%` | "fit" | "full" | (string & {});
+type SnapPointDef<Id extends string = string> = {
+    id: Id;
+    size: SnapPoint;
+};
+type SheetMode = TransformAxis;
+type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
+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;
+    stackEffect?: 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 AnchorAnimationPreset = "fade" | "scale" | "slide" | "pop" | "none";
+type AnchorAnimationSpec = AnchorAnimationPreset | {
+    preset?: AnchorAnimationPreset;
+    enter?: Keyframe[];
+    exit?: Keyframe[];
+    duration?: number;
+    easing?: string;
+    respectReducedMotion?: boolean;
+};
+
+type AnchorState = {
+    activeId: string;
+    size: number;
+    progress: number;
+};
+type AnchorPosition = ScrimOverlayPosition | "dock-bottom" | "dock-top";
+type AnchorOptions = {
+    element: HTMLElement;
+    position?: AnchorPosition;
+    inset?: string;
+    showOn?: string[] | ((state: AnchorState) => boolean);
+    fadeRange?: [number, number];
+    interactive?: boolean;
+    animation?: AnchorAnimationSpec;
+};
+
+type ScrimStageDef = {
+    id?: string;
+    for?: string | string[];
+    forRange?: [number, number];
+    element: HTMLElement;
+    position?: ScrimOverlayPosition;
+    inset?: string;
+    interactive?: boolean;
+    animation?: AnchorAnimationSpec;
+};
+type ScrimStagesOptions = {
+    stages: ScrimStageDef[];
+    position?: ScrimOverlayPosition;
+    inset?: string;
+    interactive?: boolean;
+    animation?: AnchorAnimationSpec;
+};
+
+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 anchors;
+    private anchorHost;
+    private stackZ;
+    private detachScrimStages;
+    private stackEffectEnabled;
+    private stackEffectPrimed;
+    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;
+    addAnchor(opts: AnchorOptions): () => void;
+    setScrimStages(opts: ScrimStagesOptions | null): () => 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 allowedIdsBySize;
+    private updateAriaSlider;
+    private registerInStack;
+    private applyStackDepth;
+    private attach;
+    private attachFeatures;
+    private settleAfterDrag;
+    private haptic;
+    private applySize;
+    private computeProgress;
+    private handleOpen;
+    private resyncAfterResize;
+    private handleClose;
+}
 
 /** @jsxImportSource solid-js */
 
-/**
- * Props for the Solid `BottomSheet` component. Optionally narrows to a
- * literal-id union `TId` when the consumer pins `snapPoints` with `as const`
- * and explicitly types the call site:
- *
- * ```tsx
- * const points = [
- *   { id: "min", size: 96 },
- *   { id: "full", size: "85%" },
- * ] as const;
- * <BottomSheet<"min" | "full"> snapPoints={points} onSnap={id => ...} />
- * ```
- *
- * Without an explicit type argument `TId` defaults to `string` so existing
- * call sites compile unchanged. The underlying engine stays `string`-typed;
- * the literal narrowing is a TS-only convenience layered on top of the
- * runtime.
- */
 type BottomSheetProps<TId extends string = string> = {
     snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
     allowed?: TId[] | ReadonlyArray<TId>;
@@ -43,24 +284,15 @@ type BottomSheetProps<TId extends string = string> = {
     backdrop?: boolean;
     closeOnBackdrop?: boolean;
     ariaLabel?: string;
-    /** Fires when the active snap settles. */
     onSnap?: (id: TId) => void;
-    /** Fires on every state-affecting engine event (snap/dragstart/dragend). */
     onChange?: (state: EngineState & {
         activeId: TId;
     }) => void;
-    /**
-     * Imperative escape hatch. Invoked once after the engine is constructed
-     * inside `onMount` (and once with `null` on cleanup). Use this to subscribe
-     * to per-frame events the adapter intentionally skips, e.g.
-     * `engineRef={(e) => e?.on("progress", ...)}`. Mirrors React's
-     * `useBottomSheet` engine handle.
-     */
     engineRef?: (engine: BottomSheetEngine | null) => void;
-    /** Header content rendered inside the drag handle. */
     header?: JSX.Element;
+    screen?: JSX.Element;
     children?: JSX.Element;
 };
 declare const BottomSheet: <TId extends string = string>(props: BottomSheetProps<TId>) => JSX.Element;
 
-export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
+export { BottomSheet, type BottomSheetProps, type EngineOptions, type EngineState, type SheetMode, type SnapPoint, type SnapPointDef };