@surdeddd/bottom-sheet 0.2.0 → 0.4.0

package/dist/svelte.d.cts

@@ -0,0 +1,121 @@
+import type { Component, Snippet } from "svelte";
+import type {
+  AnchorOptions,
+  BottomSheetEngine,
+  EngineOptions,
+  EngineState,
+  SheetEventMap,
+  SheetMode,
+  SnapPoint,
+  SnapPointDef,
+  ScrimStagesOptions,
+  ScrimUpdate,
+  ScrimOverlayOptions,
+} from "./index.cjs";
+
+export type SvelteBottomSheetOpts<TId extends string = string> = Omit<
+  EngineOptions,
+  | "element"
+  | "handle"
+  | "scrollContainer"
+  | "backdrop"
+  | "scrim"
+  | "snapPoints"
+  | "allowed"
+  | "initial"
+> & {
+  snapPoints: SnapPointDef<TId>[] | ReadonlyArray<SnapPointDef<TId>>;
+  allowed?: TId[] | ReadonlyArray<TId>;
+  initial?: TId;
+  onSnap?: (id: TId) => void;
+};
+
+export type SvelteAttachRefs = {
+  element: HTMLElement;
+  handle?: HTMLElement;
+  scrollContainer?: HTMLElement;
+  backdrop?: HTMLElement;
+  scrim?: HTMLElement;
+};
+
+export type SvelteBottomSheetController<TId extends string = string> = {
+  attach(refs: SvelteAttachRefs): () => void;
+  state(): EngineState & { activeId: TId };
+  on<K extends keyof SheetEventMap>(
+    event: K,
+    fn: (payload: SheetEventMap[K]) => void,
+  ): () => void;
+  snapTo(id: TId): Promise<void>;
+  open(id?: TId): Promise<void>;
+  close(): Promise<void>;
+  expand(): Promise<void>;
+  collapse(): Promise<void>;
+  isTop(): boolean;
+  depth(): number;
+  setAllowed(ids: TId[], snap?: TId): void;
+  setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
+  setScrim(opts: ScrimUpdate): void;
+  setScrimOverlay(opts: ScrimOverlayOptions): () => void;
+  addAnchor(opts: AnchorOptions): () => void;
+  setScrimStages(opts: ScrimStagesOptions | null): () => void;
+  recompute(): void;
+  getEngine(): BottomSheetEngine | null;
+  destroy(): void;
+};
+
+export function createBottomSheet<TId extends string = string>(
+  opts: SvelteBottomSheetOpts<TId>,
+): SvelteBottomSheetController<TId>;
+
+export type BottomSheetProps<TId extends string = string> = {
+  snapPoints: SnapPointDef<TId>[];
+  allowed?: TId[];
+  initial?: TId;
+  mode?: SheetMode;
+  animation?: "spring" | "tween";
+  spring?: { stiffness?: number; damping?: number; mass?: number };
+  focusTrap?: boolean;
+  closeOnEscape?: boolean;
+  closeOnBack?: boolean;
+  lockBodyScroll?: boolean;
+  rubberBand?: boolean;
+  backdropRange?: [number, number];
+  backdrop?: boolean;
+  closeOnBackdrop?: boolean;
+  persistent?: boolean;
+  disableClose?: boolean;
+  disableDrag?: boolean;
+  closeOnRouteChange?: boolean;
+  radius?: string | number;
+  maxHeight?: string | number;
+  backdropColor?: string;
+  backdropOpacity?: number;
+  open?: boolean;
+  snap?: TId;
+  returnFocusTo?: HTMLElement | string | (() => HTMLElement | null);
+  ariaLabel?: string;
+  header?: Snippet<[EngineState & { activeId: TId }]>;
+  leftButton?: Snippet;
+  rightButton?: Snippet;
+  screen?: Snippet;
+  children?: Snippet;
+  onsnap?: (id: TId) => void;
+  onopen?: (id: TId) => void;
+  onclose?: () => void;
+  onbeforeclose?: (payload: SheetEventMap["before-close"]) => void;
+  onopened?: (id: TId) => void;
+  onclosed?: () => void;
+  ondragstart?: () => void;
+  ondragend?: () => void;
+  onchange?: (state: EngineState & { activeId: TId }) => void;
+};
+
+export const BottomSheet: Component<BottomSheetProps>;
+
+export type {
+  SnapPoint,
+  SnapPointDef,
+  SheetMode,
+  EngineState,
+  EngineOptions,
+};

package/dist/svelte.d.ts

@@ -1,15 +1,17 @@
 import type { Component, Snippet } from "svelte";
 import type {
+  AnchorOptions,
+  BottomSheetEngine,
   EngineOptions,
   EngineState,
+  SheetEventMap,
   SheetMode,
   SnapPoint,
   SnapPointDef,
+  ScrimStagesOptions,
   ScrimUpdate,
   ScrimOverlayOptions,
-} from "../core/types";
-import type { SheetEventMap } from "../core/types";
-import type { BottomSheetEngine } from "../core/BottomSheetEngine";
+} from "./index.js";
 
 export type SvelteBottomSheetOpts<TId extends string = string> = Omit<
   EngineOptions,
@@ -46,10 +48,17 @@ export type SvelteBottomSheetController<TId extends string = string> = {
   snapTo(id: TId): Promise<void>;
   open(id?: TId): Promise<void>;
   close(): Promise<void>;
+  expand(): Promise<void>;
+  collapse(): Promise<void>;
+  isTop(): boolean;
+  depth(): number;
   setAllowed(ids: TId[], snap?: TId): void;
   setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
   setScrim(opts: ScrimUpdate): void;
   setScrimOverlay(opts: ScrimOverlayOptions): () => void;
+  addAnchor(opts: AnchorOptions): () => void;
+  setScrimStages(opts: ScrimStagesOptions | null): () => void;
+  recompute(): void;
   getEngine(): BottomSheetEngine | null;
   destroy(): void;
 };
@@ -73,6 +82,17 @@ export type BottomSheetProps<TId extends string = string> = {
   backdropRange?: [number, number];
   backdrop?: boolean;
   closeOnBackdrop?: boolean;
+  persistent?: boolean;
+  disableClose?: boolean;
+  disableDrag?: boolean;
+  closeOnRouteChange?: boolean;
+  radius?: string | number;
+  maxHeight?: string | number;
+  backdropColor?: string;
+  backdropOpacity?: number;
+  open?: boolean;
+  snap?: TId;
+  returnFocusTo?: HTMLElement | string | (() => HTMLElement | null);
   ariaLabel?: string;
   header?: Snippet<[EngineState & { activeId: TId }]>;
   leftButton?: Snippet;
@@ -82,6 +102,11 @@ export type BottomSheetProps<TId extends string = string> = {
   onsnap?: (id: TId) => void;
   onopen?: (id: TId) => void;
   onclose?: () => void;
+  onbeforeclose?: (payload: SheetEventMap["before-close"]) => void;
+  onopened?: (id: TId) => void;
+  onclosed?: () => void;
+  ondragstart?: () => void;
+  ondragend?: () => void;
   onchange?: (state: EngineState & { activeId: TId }) => void;
 };