@howells/stacksheet 1.0.1 → 1.1.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.
- package/dist/index.d.ts +37 -17
- package/dist/index.js +534 -251
- package/dist/index.js.map +1 -1
- package/package.json +16 -5
package/dist/index.d.ts
CHANGED
|
@@ -5,28 +5,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
5
5
|
/**
|
|
6
6
|
* Spring presets inspired by iOS animation feel.
|
|
7
7
|
*
|
|
8
|
-
* - `soft` — Very gentle, slow settle. Loaders, radial pickers.
|
|
9
8
|
* - `subtle` — Barely noticeable bounce, professional.
|
|
10
|
-
* - `natural` — Balanced, general-purpose default.
|
|
11
9
|
* - `snappy` — Quick, responsive for interactions.
|
|
12
10
|
* - `stiff` — Very quick, controlled. Panels, drawers. **(default)**
|
|
13
11
|
*/
|
|
14
12
|
declare const springs: {
|
|
15
|
-
readonly soft: {
|
|
16
|
-
readonly stiffness: 120;
|
|
17
|
-
readonly damping: 18;
|
|
18
|
-
readonly mass: 1;
|
|
19
|
-
};
|
|
20
13
|
readonly subtle: {
|
|
21
14
|
readonly stiffness: 300;
|
|
22
15
|
readonly damping: 30;
|
|
23
16
|
readonly mass: 1;
|
|
24
17
|
};
|
|
25
|
-
readonly natural: {
|
|
26
|
-
readonly stiffness: 200;
|
|
27
|
-
readonly damping: 20;
|
|
28
|
-
readonly mass: 1;
|
|
29
|
-
};
|
|
30
18
|
readonly snappy: {
|
|
31
19
|
readonly stiffness: 400;
|
|
32
20
|
readonly damping: 28;
|
|
@@ -40,6 +28,15 @@ declare const springs: {
|
|
|
40
28
|
};
|
|
41
29
|
type SpringPreset = keyof typeof springs;
|
|
42
30
|
|
|
31
|
+
/** Why the sheet stack was closed or popped */
|
|
32
|
+
type CloseReason = "escape" | "backdrop" | "swipe" | "programmatic";
|
|
33
|
+
/**
|
|
34
|
+
* A snap point for bottom sheets.
|
|
35
|
+
* - `number` 0-1: fraction of viewport height (e.g. 0.5 = 50vh)
|
|
36
|
+
* - `number` > 1: pixel value (e.g. 300 = 300px)
|
|
37
|
+
* - `string`: CSS length (e.g. "148px", "30rem")
|
|
38
|
+
*/
|
|
39
|
+
type SnapPoint = number | string;
|
|
43
40
|
interface StacksheetClassNames {
|
|
44
41
|
/** Applied to backdrop overlay */
|
|
45
42
|
backdrop?: string;
|
|
@@ -75,13 +72,13 @@ type SideConfig = Side | ResponsiveSide;
|
|
|
75
72
|
interface StackingConfig {
|
|
76
73
|
/** Scale reduction per depth level (default: 0.04) */
|
|
77
74
|
scaleStep: number;
|
|
78
|
-
/**
|
|
75
|
+
/** Pixel offset per depth level — shifts panels away from the stack edge (default: 16) */
|
|
79
76
|
offsetStep: number;
|
|
80
77
|
/** Opacity reduction per depth level (default: 0) */
|
|
81
78
|
opacityStep: number;
|
|
82
79
|
/** Border radius applied to stacked panels in px (default: 12) */
|
|
83
80
|
radius: number;
|
|
84
|
-
/** Max depth before content stops rendering (default:
|
|
81
|
+
/** Max depth before content stops rendering (default: 3) */
|
|
85
82
|
renderThreshold: number;
|
|
86
83
|
}
|
|
87
84
|
interface SpringConfig {
|
|
@@ -122,7 +119,15 @@ interface StacksheetConfig {
|
|
|
122
119
|
/** Called when the top panel's entrance animation completes */
|
|
123
120
|
onOpenComplete?: () => void;
|
|
124
121
|
/** Called when the last panel's exit animation completes (stack fully closed) */
|
|
125
|
-
onCloseComplete?: () => void;
|
|
122
|
+
onCloseComplete?: (reason: CloseReason) => void;
|
|
123
|
+
/** Snap positions for bottom sheets. Numbers 0-1 = viewport fraction, >1 = px, strings = CSS lengths. */
|
|
124
|
+
snapPoints?: SnapPoint[];
|
|
125
|
+
/** Currently active snap point index (controlled). */
|
|
126
|
+
snapPointIndex?: number;
|
|
127
|
+
/** Called when the active snap point changes. */
|
|
128
|
+
onSnapPointChange?: (index: number) => void;
|
|
129
|
+
/** When true, velocity can't skip intermediate snap points. Default: false */
|
|
130
|
+
snapToSequentialPoints?: boolean;
|
|
126
131
|
/** Enable drag-to-dismiss. Default: true */
|
|
127
132
|
drag?: boolean;
|
|
128
133
|
/** Fraction of panel dimension to trigger close (0-1). Default: 0.25 */
|
|
@@ -154,7 +159,11 @@ interface ResolvedConfig {
|
|
|
154
159
|
zIndex: number;
|
|
155
160
|
ariaLabel: string;
|
|
156
161
|
onOpenComplete?: () => void;
|
|
157
|
-
onCloseComplete?: () => void;
|
|
162
|
+
onCloseComplete?: (reason: CloseReason) => void;
|
|
163
|
+
snapPoints: SnapPoint[];
|
|
164
|
+
snapPointIndex?: number;
|
|
165
|
+
onSnapPointChange?: (index: number) => void;
|
|
166
|
+
snapToSequentialPoints: boolean;
|
|
158
167
|
drag: boolean;
|
|
159
168
|
closeThreshold: number;
|
|
160
169
|
velocityThreshold: number;
|
|
@@ -241,6 +250,7 @@ interface StacksheetInstance<TMap extends object> {
|
|
|
241
250
|
store: zustand.StoreApi<StacksheetSnapshot<TMap> & SheetActions<TMap>>;
|
|
242
251
|
}
|
|
243
252
|
|
|
253
|
+
/** Merge user-provided config with defaults. Resolves union types (side, spring) to concrete values. */
|
|
244
254
|
declare function resolveConfig(config?: StacksheetConfig): ResolvedConfig;
|
|
245
255
|
|
|
246
256
|
/**
|
|
@@ -364,6 +374,16 @@ interface SheetBackProps {
|
|
|
364
374
|
children?: ReactNode;
|
|
365
375
|
}
|
|
366
376
|
declare function SheetBack({ asChild, className, style, children }: SheetBackProps): react_jsx_runtime.JSX.Element | null;
|
|
377
|
+
/**
|
|
378
|
+
* Composable sheet parts for building custom panel layouts.
|
|
379
|
+
*
|
|
380
|
+
* Use with `renderHeader={false}` on the provider to opt into
|
|
381
|
+
* composable mode — no auto header or scroll wrapper, full control
|
|
382
|
+
* over the panel's structure.
|
|
383
|
+
*
|
|
384
|
+
* `Sheet.Title` and `Sheet.Description` are linked to the panel's
|
|
385
|
+
* `aria-labelledby` and `aria-describedby` via matching IDs.
|
|
386
|
+
*/
|
|
367
387
|
declare const Sheet: {
|
|
368
388
|
readonly Handle: typeof SheetHandle;
|
|
369
389
|
readonly Header: typeof SheetHeader;
|
|
@@ -398,4 +418,4 @@ declare function getSlideFrom(side: Side): SlideValues;
|
|
|
398
418
|
*/
|
|
399
419
|
declare function getPanelStyles(side: Side, config: ResolvedConfig, _depth: number, index: number): CSSProperties;
|
|
400
420
|
|
|
401
|
-
export { type ContentMap, type HeaderRenderProps, type ResolvedConfig, type ResponsiveSide, Sheet, type SheetActions, type SheetBackProps, type SheetBodyProps, type SheetCloseProps, type SheetContentComponent, type SheetDescriptionProps, type SheetFooterProps, type SheetHandleProps, type SheetHeaderProps, type SheetItem, type SheetPanelContextValue, type SheetTitleProps, type Side, type SideConfig, type SpringConfig, type SpringPreset, type StackingConfig, type StacksheetClassNames, type StacksheetConfig, type StacksheetInstance, type StacksheetProviderProps, type StacksheetSnapshot, createStacksheet, getPanelStyles, getSlideFrom, getStackTransform, resolveConfig, springs, useIsMobile, useResolvedSide, useSheetPanel };
|
|
421
|
+
export { type CloseReason, type ContentMap, type HeaderRenderProps, type ResolvedConfig, type ResponsiveSide, Sheet, type SheetActions, type SheetBackProps, type SheetBodyProps, type SheetCloseProps, type SheetContentComponent, type SheetDescriptionProps, type SheetFooterProps, type SheetHandleProps, type SheetHeaderProps, type SheetItem, type SheetPanelContextValue, type SheetTitleProps, type Side, type SideConfig, type SnapPoint, type SpringConfig, type SpringPreset, type StackingConfig, type StacksheetClassNames, type StacksheetConfig, type StacksheetInstance, type StacksheetProviderProps, type StacksheetSnapshot, createStacksheet, getPanelStyles, getSlideFrom, getStackTransform, resolveConfig, springs, useIsMobile, useResolvedSide, useSheetPanel };
|