@surdeddd/bottom-sheet 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +51 -21
  2. package/dist/{BottomSheetEngine-CIT9Htti.d.cts → BottomSheetEngine-CAymrH-P.d.cts} +67 -1
  3. package/dist/{BottomSheetEngine-Df9MwBbm.d.ts → BottomSheetEngine-DcqcuudN.d.ts} +67 -1
  4. package/dist/element.cjs +699 -116
  5. package/dist/element.d.cts +7 -2
  6. package/dist/element.d.ts +7 -2
  7. package/dist/element.iife.global.js +2 -2
  8. package/dist/element.js +699 -116
  9. package/dist/index.cjs +715 -145
  10. package/dist/index.d.cts +17 -3
  11. package/dist/index.d.ts +17 -3
  12. package/dist/index.js +713 -146
  13. package/dist/integrations/formik.d.cts +1 -1
  14. package/dist/integrations/formik.d.ts +1 -1
  15. package/dist/integrations/react-hook-form.d.cts +1 -1
  16. package/dist/integrations/react-hook-form.d.ts +1 -1
  17. package/dist/overlay.cjs +168 -35
  18. package/dist/overlay.d.cts +13 -0
  19. package/dist/overlay.d.ts +13 -0
  20. package/dist/overlay.js +168 -35
  21. package/dist/preact.d.cts +1 -1
  22. package/dist/preact.d.ts +1 -1
  23. package/dist/qwik.cjs +619 -119
  24. package/dist/qwik.d.cts +2 -2
  25. package/dist/qwik.d.ts +2 -2
  26. package/dist/qwik.js +620 -120
  27. package/dist/react.cjs +821 -191
  28. package/dist/react.d.cts +20 -3
  29. package/dist/react.d.ts +20 -3
  30. package/dist/react.js +821 -191
  31. package/dist/solid.cjs +656 -161
  32. package/dist/solid.d.cts +263 -4
  33. package/dist/solid.d.ts +263 -4
  34. package/dist/solid.js +657 -162
  35. package/dist/solid.source.jsx +3215 -0
  36. package/dist/styles.css +10 -10
  37. package/dist/svelte-core.cjs +3149 -0
  38. package/dist/svelte-core.js +3147 -0
  39. package/dist/svelte-src/BottomSheet.svelte +210 -0
  40. package/dist/svelte-src/index.js +2 -0
  41. package/dist/svelte.cjs +618 -124
  42. package/dist/svelte.d.cts +100 -0
  43. package/dist/svelte.d.ts +7 -3
  44. package/dist/svelte.js +619 -125
  45. package/dist/vue.cjs +612 -119
  46. package/dist/vue.d.cts +78 -0
  47. package/dist/vue.d.ts +6 -2
  48. package/dist/vue.js +612 -119
  49. package/package.json +103 -43
package/dist/solid.d.cts CHANGED
@@ -1,7 +1,266 @@
1
1
  import { JSX } from 'solid-js';
2
- import { S as SnapPointDef, a as SheetMode, E as EngineState, B as BottomSheetEngine } from './BottomSheetEngine-CIT9Htti.cjs';
3
- export { b as EngineOptions, c as SnapPoint } from './BottomSheetEngine-CIT9Htti.cjs';
4
- import './transform-jVfAikE9.cjs';
2
+
3
+ type TransformAxis = "bottom" | "top" | "left" | "right";
4
+
5
+ type SnapPoint = number | `${number}%` | "fit" | "full" | (string & {});
6
+ type SnapPointDef<Id extends string = string> = {
7
+ id: Id;
8
+ size: SnapPoint;
9
+ };
10
+ type SheetMode = TransformAxis;
11
+ type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
12
+ type ScrimUpdate = {
13
+ color?: string | null;
14
+ blur?: string | null;
15
+ interactive?: boolean;
16
+ range?: [number, number];
17
+ preset?: ScrimPreset;
18
+ mode?: "full" | "above-sheet" | "off";
19
+ tapToClose?: boolean;
20
+ enabled?: boolean;
21
+ };
22
+ 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";
23
+ type ScrimOverlayOptions = {
24
+ children: HTMLElement | DocumentFragment;
25
+ position?: ScrimOverlayPosition;
26
+ interactive?: boolean;
27
+ inset?: string;
28
+ };
29
+ type SheetEventMap = {
30
+ "before-snap": {
31
+ id: string;
32
+ size: number;
33
+ cancel: () => void;
34
+ previousId: string;
35
+ };
36
+ snap: {
37
+ id: string;
38
+ size: number;
39
+ };
40
+ progress: {
41
+ value: number;
42
+ size: number;
43
+ };
44
+ dragstart: {
45
+ size: number;
46
+ };
47
+ drag: {
48
+ size: number;
49
+ delta: number;
50
+ };
51
+ dragend: {
52
+ size: number;
53
+ velocity: number;
54
+ };
55
+ close: void;
56
+ open: {
57
+ id: string;
58
+ };
59
+ };
60
+ type EngineOptions = {
61
+ element: HTMLElement;
62
+ handle?: HTMLElement;
63
+ scrollContainer?: HTMLElement;
64
+ backdrop?: HTMLElement;
65
+ scrim?: HTMLElement;
66
+ screenComponent?: HTMLElement;
67
+ mode?: SheetMode;
68
+ snapPoints: SnapPointDef[];
69
+ allowed?: string[];
70
+ initial?: string;
71
+ duration?: number;
72
+ easing?: (t: number) => number;
73
+ respectReducedMotion?: boolean;
74
+ flickVelocity?: number;
75
+ dragThreshold?: number;
76
+ rubberBand?: boolean;
77
+ backdropRange?: [number, number];
78
+ screenRange?: [number, number];
79
+ scrimMode?: "full" | "above-sheet" | "off";
80
+ scrimColor?: string;
81
+ scrimBlur?: string;
82
+ scrimInteractive?: boolean;
83
+ scrimTapToClose?: boolean;
84
+ scrimPreset?: ScrimPreset;
85
+ animation?: "spring" | "tween" | "ios-spring" | "material-bounce" | "linear" | "snappy";
86
+ spring?: {
87
+ stiffness?: number;
88
+ damping?: number;
89
+ mass?: number;
90
+ };
91
+ focusTrap?: boolean;
92
+ initialFocus?: string | HTMLElement;
93
+ closeOnEscape?: boolean;
94
+ lockBodyScroll?: boolean;
95
+ closeOnBack?: boolean;
96
+ routedTo?: string;
97
+ inertSiblings?: boolean;
98
+ persistKey?: string;
99
+ autoCollapseAfter?: number;
100
+ linkedSheets?: BottomSheetEngineLike[];
101
+ viewTransitions?: boolean;
102
+ stackEffect?: boolean;
103
+ };
104
+
105
+ type BottomSheetEngineLike = BottomSheetEngine;
106
+ type TeardownScope = {
107
+ add: (fn: (() => void) | null | undefined) => void;
108
+ };
109
+ type Plugin = {
110
+ name: string;
111
+ install: (engine: BottomSheetEngine, scope: TeardownScope) => void | (() => void);
112
+ };
113
+ type EngineState = {
114
+ size: number;
115
+ activeId: string;
116
+ isDragging: boolean;
117
+ isAnimating: boolean;
118
+ progress: number;
119
+ };
120
+
121
+ type AnchorAnimationPreset = "fade" | "scale" | "slide" | "pop" | "none";
122
+ type AnchorAnimationSpec = AnchorAnimationPreset | {
123
+ preset?: AnchorAnimationPreset;
124
+ enter?: Keyframe[];
125
+ exit?: Keyframe[];
126
+ duration?: number;
127
+ easing?: string;
128
+ respectReducedMotion?: boolean;
129
+ };
130
+
131
+ type AnchorState = {
132
+ activeId: string;
133
+ size: number;
134
+ progress: number;
135
+ };
136
+ type AnchorPosition = ScrimOverlayPosition | "dock-bottom" | "dock-top";
137
+ type AnchorOptions = {
138
+ element: HTMLElement;
139
+ position?: AnchorPosition;
140
+ inset?: string;
141
+ showOn?: string[] | ((state: AnchorState) => boolean);
142
+ fadeRange?: [number, number];
143
+ interactive?: boolean;
144
+ animation?: AnchorAnimationSpec;
145
+ };
146
+
147
+ type ScrimStageDef = {
148
+ id?: string;
149
+ for?: string | string[];
150
+ forRange?: [number, number];
151
+ element: HTMLElement;
152
+ position?: ScrimOverlayPosition;
153
+ inset?: string;
154
+ interactive?: boolean;
155
+ animation?: AnchorAnimationSpec;
156
+ };
157
+ type ScrimStagesOptions = {
158
+ stages: ScrimStageDef[];
159
+ position?: ScrimOverlayPosition;
160
+ inset?: string;
161
+ interactive?: boolean;
162
+ animation?: AnchorAnimationSpec;
163
+ };
164
+
165
+ type Listener<K extends keyof SheetEventMap> = (payload: SheetEventMap[K]) => void;
166
+ declare class BottomSheetEngine {
167
+ private id;
168
+ private element;
169
+ private handle;
170
+ private scrollContainer?;
171
+ private backdrop?;
172
+ private screenComponent?;
173
+ private scrimParent;
174
+ private mode;
175
+ private flickVelocity;
176
+ private dragThreshold;
177
+ private rubberBandEnabled;
178
+ private scrim;
179
+ private aria;
180
+ private animation;
181
+ private lifecycle;
182
+ private closeOnBack;
183
+ private routedTo;
184
+ private snapPointsRaw;
185
+ private snaps;
186
+ private activeId;
187
+ private size;
188
+ private gesture;
189
+ private rootEl;
190
+ private destroyed;
191
+ private currentViewTransition;
192
+ private currentAbort;
193
+ private sizeWriteSentinel;
194
+ private progressWriteSentinel;
195
+ private isTopSheet;
196
+ private progressPayload;
197
+ private dragContextBuf;
198
+ private bus;
199
+ private persistKey;
200
+ private linkedSheets;
201
+ private scrollCache;
202
+ private teardowns;
203
+ private anchors;
204
+ private anchorHost;
205
+ private stackZ;
206
+ private detachScrimStages;
207
+ private stackEffectEnabled;
208
+ private stackEffectPrimed;
209
+ private transformTemplate;
210
+ constructor(opts: EngineOptions);
211
+ get state(): EngineState;
212
+ on<K extends keyof SheetEventMap>(event: K, fn: Listener<K>): () => void;
213
+ use(plugin: Plugin): this;
214
+ setLinkedSheets(sheets: BottomSheetEngine[]): void;
215
+ getAllowedIds(): string[];
216
+ snapTo(id: string, velocityOrOpts?: number | {
217
+ velocity?: number;
218
+ signal?: AbortSignal;
219
+ }, _skipBeforeSnap?: boolean): Promise<void>;
220
+ dragTo(targetSize: number, velocityOrOpts?: number | {
221
+ velocity?: number;
222
+ signal?: AbortSignal;
223
+ }): Promise<void>;
224
+ open(id?: string): Promise<void>;
225
+ close(): Promise<void>;
226
+ setAllowed(ids: string[], snap?: string): void;
227
+ setBackdropRange(range: [number, number]): void;
228
+ setScreenRange(range: [number, number]): void;
229
+ setScrimColor(color: string | undefined | null): void;
230
+ setScrimBlur(blur: string | undefined | null): void;
231
+ setScrimInteractive(interactive: boolean): void;
232
+ setScrim(opts: ScrimUpdate): void;
233
+ setScrimMode(mode: "full" | "above-sheet" | "off"): void;
234
+ setScrimTapToClose(enabled: boolean): void;
235
+ setScrimEnabled(enabled: boolean): void;
236
+ setScrimOverlay(opts: ScrimOverlayOptions): () => void;
237
+ addAnchor(opts: AnchorOptions): () => void;
238
+ setScrimStages(opts: ScrimStagesOptions | null): () => void;
239
+ getScrimState(): {
240
+ mode: "full" | "above-sheet" | "off";
241
+ enabled: boolean;
242
+ };
243
+ setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
244
+ destroy(): void;
245
+ private emit;
246
+ private newCycle;
247
+ private emitBeforeSnap;
248
+ private recomputeSnaps;
249
+ private getAllowedRange;
250
+ private allowedIdsBySize;
251
+ private updateAriaSlider;
252
+ private registerInStack;
253
+ private applyStackDepth;
254
+ private attach;
255
+ private attachFeatures;
256
+ private settleAfterDrag;
257
+ private haptic;
258
+ private applySize;
259
+ private computeProgress;
260
+ private handleOpen;
261
+ private resyncAfterResize;
262
+ private handleClose;
263
+ }
5
264
 
6
265
  /** @jsxImportSource solid-js */
7
266
 
@@ -36,4 +295,4 @@ type BottomSheetProps<TId extends string = string> = {
36
295
  };
37
296
  declare const BottomSheet: <TId extends string = string>(props: BottomSheetProps<TId>) => JSX.Element;
38
297
 
39
- export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
298
+ export { BottomSheet, type BottomSheetProps, type EngineOptions, type EngineState, type SheetMode, type SnapPoint, type SnapPointDef };
package/dist/solid.d.ts CHANGED
@@ -1,7 +1,266 @@
1
1
  import { JSX } from 'solid-js';
2
- import { S as SnapPointDef, a as SheetMode, E as EngineState, B as BottomSheetEngine } from './BottomSheetEngine-Df9MwBbm.js';
3
- export { b as EngineOptions, c as SnapPoint } from './BottomSheetEngine-Df9MwBbm.js';
4
- import './transform-jVfAikE9.js';
2
+
3
+ type TransformAxis = "bottom" | "top" | "left" | "right";
4
+
5
+ type SnapPoint = number | `${number}%` | "fit" | "full" | (string & {});
6
+ type SnapPointDef<Id extends string = string> = {
7
+ id: Id;
8
+ size: SnapPoint;
9
+ };
10
+ type SheetMode = TransformAxis;
11
+ type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
12
+ type ScrimUpdate = {
13
+ color?: string | null;
14
+ blur?: string | null;
15
+ interactive?: boolean;
16
+ range?: [number, number];
17
+ preset?: ScrimPreset;
18
+ mode?: "full" | "above-sheet" | "off";
19
+ tapToClose?: boolean;
20
+ enabled?: boolean;
21
+ };
22
+ 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";
23
+ type ScrimOverlayOptions = {
24
+ children: HTMLElement | DocumentFragment;
25
+ position?: ScrimOverlayPosition;
26
+ interactive?: boolean;
27
+ inset?: string;
28
+ };
29
+ type SheetEventMap = {
30
+ "before-snap": {
31
+ id: string;
32
+ size: number;
33
+ cancel: () => void;
34
+ previousId: string;
35
+ };
36
+ snap: {
37
+ id: string;
38
+ size: number;
39
+ };
40
+ progress: {
41
+ value: number;
42
+ size: number;
43
+ };
44
+ dragstart: {
45
+ size: number;
46
+ };
47
+ drag: {
48
+ size: number;
49
+ delta: number;
50
+ };
51
+ dragend: {
52
+ size: number;
53
+ velocity: number;
54
+ };
55
+ close: void;
56
+ open: {
57
+ id: string;
58
+ };
59
+ };
60
+ type EngineOptions = {
61
+ element: HTMLElement;
62
+ handle?: HTMLElement;
63
+ scrollContainer?: HTMLElement;
64
+ backdrop?: HTMLElement;
65
+ scrim?: HTMLElement;
66
+ screenComponent?: HTMLElement;
67
+ mode?: SheetMode;
68
+ snapPoints: SnapPointDef[];
69
+ allowed?: string[];
70
+ initial?: string;
71
+ duration?: number;
72
+ easing?: (t: number) => number;
73
+ respectReducedMotion?: boolean;
74
+ flickVelocity?: number;
75
+ dragThreshold?: number;
76
+ rubberBand?: boolean;
77
+ backdropRange?: [number, number];
78
+ screenRange?: [number, number];
79
+ scrimMode?: "full" | "above-sheet" | "off";
80
+ scrimColor?: string;
81
+ scrimBlur?: string;
82
+ scrimInteractive?: boolean;
83
+ scrimTapToClose?: boolean;
84
+ scrimPreset?: ScrimPreset;
85
+ animation?: "spring" | "tween" | "ios-spring" | "material-bounce" | "linear" | "snappy";
86
+ spring?: {
87
+ stiffness?: number;
88
+ damping?: number;
89
+ mass?: number;
90
+ };
91
+ focusTrap?: boolean;
92
+ initialFocus?: string | HTMLElement;
93
+ closeOnEscape?: boolean;
94
+ lockBodyScroll?: boolean;
95
+ closeOnBack?: boolean;
96
+ routedTo?: string;
97
+ inertSiblings?: boolean;
98
+ persistKey?: string;
99
+ autoCollapseAfter?: number;
100
+ linkedSheets?: BottomSheetEngineLike[];
101
+ viewTransitions?: boolean;
102
+ stackEffect?: boolean;
103
+ };
104
+
105
+ type BottomSheetEngineLike = BottomSheetEngine;
106
+ type TeardownScope = {
107
+ add: (fn: (() => void) | null | undefined) => void;
108
+ };
109
+ type Plugin = {
110
+ name: string;
111
+ install: (engine: BottomSheetEngine, scope: TeardownScope) => void | (() => void);
112
+ };
113
+ type EngineState = {
114
+ size: number;
115
+ activeId: string;
116
+ isDragging: boolean;
117
+ isAnimating: boolean;
118
+ progress: number;
119
+ };
120
+
121
+ type AnchorAnimationPreset = "fade" | "scale" | "slide" | "pop" | "none";
122
+ type AnchorAnimationSpec = AnchorAnimationPreset | {
123
+ preset?: AnchorAnimationPreset;
124
+ enter?: Keyframe[];
125
+ exit?: Keyframe[];
126
+ duration?: number;
127
+ easing?: string;
128
+ respectReducedMotion?: boolean;
129
+ };
130
+
131
+ type AnchorState = {
132
+ activeId: string;
133
+ size: number;
134
+ progress: number;
135
+ };
136
+ type AnchorPosition = ScrimOverlayPosition | "dock-bottom" | "dock-top";
137
+ type AnchorOptions = {
138
+ element: HTMLElement;
139
+ position?: AnchorPosition;
140
+ inset?: string;
141
+ showOn?: string[] | ((state: AnchorState) => boolean);
142
+ fadeRange?: [number, number];
143
+ interactive?: boolean;
144
+ animation?: AnchorAnimationSpec;
145
+ };
146
+
147
+ type ScrimStageDef = {
148
+ id?: string;
149
+ for?: string | string[];
150
+ forRange?: [number, number];
151
+ element: HTMLElement;
152
+ position?: ScrimOverlayPosition;
153
+ inset?: string;
154
+ interactive?: boolean;
155
+ animation?: AnchorAnimationSpec;
156
+ };
157
+ type ScrimStagesOptions = {
158
+ stages: ScrimStageDef[];
159
+ position?: ScrimOverlayPosition;
160
+ inset?: string;
161
+ interactive?: boolean;
162
+ animation?: AnchorAnimationSpec;
163
+ };
164
+
165
+ type Listener<K extends keyof SheetEventMap> = (payload: SheetEventMap[K]) => void;
166
+ declare class BottomSheetEngine {
167
+ private id;
168
+ private element;
169
+ private handle;
170
+ private scrollContainer?;
171
+ private backdrop?;
172
+ private screenComponent?;
173
+ private scrimParent;
174
+ private mode;
175
+ private flickVelocity;
176
+ private dragThreshold;
177
+ private rubberBandEnabled;
178
+ private scrim;
179
+ private aria;
180
+ private animation;
181
+ private lifecycle;
182
+ private closeOnBack;
183
+ private routedTo;
184
+ private snapPointsRaw;
185
+ private snaps;
186
+ private activeId;
187
+ private size;
188
+ private gesture;
189
+ private rootEl;
190
+ private destroyed;
191
+ private currentViewTransition;
192
+ private currentAbort;
193
+ private sizeWriteSentinel;
194
+ private progressWriteSentinel;
195
+ private isTopSheet;
196
+ private progressPayload;
197
+ private dragContextBuf;
198
+ private bus;
199
+ private persistKey;
200
+ private linkedSheets;
201
+ private scrollCache;
202
+ private teardowns;
203
+ private anchors;
204
+ private anchorHost;
205
+ private stackZ;
206
+ private detachScrimStages;
207
+ private stackEffectEnabled;
208
+ private stackEffectPrimed;
209
+ private transformTemplate;
210
+ constructor(opts: EngineOptions);
211
+ get state(): EngineState;
212
+ on<K extends keyof SheetEventMap>(event: K, fn: Listener<K>): () => void;
213
+ use(plugin: Plugin): this;
214
+ setLinkedSheets(sheets: BottomSheetEngine[]): void;
215
+ getAllowedIds(): string[];
216
+ snapTo(id: string, velocityOrOpts?: number | {
217
+ velocity?: number;
218
+ signal?: AbortSignal;
219
+ }, _skipBeforeSnap?: boolean): Promise<void>;
220
+ dragTo(targetSize: number, velocityOrOpts?: number | {
221
+ velocity?: number;
222
+ signal?: AbortSignal;
223
+ }): Promise<void>;
224
+ open(id?: string): Promise<void>;
225
+ close(): Promise<void>;
226
+ setAllowed(ids: string[], snap?: string): void;
227
+ setBackdropRange(range: [number, number]): void;
228
+ setScreenRange(range: [number, number]): void;
229
+ setScrimColor(color: string | undefined | null): void;
230
+ setScrimBlur(blur: string | undefined | null): void;
231
+ setScrimInteractive(interactive: boolean): void;
232
+ setScrim(opts: ScrimUpdate): void;
233
+ setScrimMode(mode: "full" | "above-sheet" | "off"): void;
234
+ setScrimTapToClose(enabled: boolean): void;
235
+ setScrimEnabled(enabled: boolean): void;
236
+ setScrimOverlay(opts: ScrimOverlayOptions): () => void;
237
+ addAnchor(opts: AnchorOptions): () => void;
238
+ setScrimStages(opts: ScrimStagesOptions | null): () => void;
239
+ getScrimState(): {
240
+ mode: "full" | "above-sheet" | "off";
241
+ enabled: boolean;
242
+ };
243
+ setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
244
+ destroy(): void;
245
+ private emit;
246
+ private newCycle;
247
+ private emitBeforeSnap;
248
+ private recomputeSnaps;
249
+ private getAllowedRange;
250
+ private allowedIdsBySize;
251
+ private updateAriaSlider;
252
+ private registerInStack;
253
+ private applyStackDepth;
254
+ private attach;
255
+ private attachFeatures;
256
+ private settleAfterDrag;
257
+ private haptic;
258
+ private applySize;
259
+ private computeProgress;
260
+ private handleOpen;
261
+ private resyncAfterResize;
262
+ private handleClose;
263
+ }
5
264
 
6
265
  /** @jsxImportSource solid-js */
7
266
 
@@ -36,4 +295,4 @@ type BottomSheetProps<TId extends string = string> = {
36
295
  };
37
296
  declare const BottomSheet: <TId extends string = string>(props: BottomSheetProps<TId>) => JSX.Element;
38
297
 
39
- export { BottomSheet, type BottomSheetProps, EngineState, SheetMode, SnapPointDef };
298
+ export { BottomSheet, type BottomSheetProps, type EngineOptions, type EngineState, type SheetMode, type SnapPoint, type SnapPointDef };