@impulse-ui-native/flyout 2.0.0 → 2.0.1
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/README.md +36 -0
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# @impulse-ui-native/flyout
|
|
2
|
+
|
|
3
|
+
A token-driven, gesture-enabled sheet that can enter from the top or bottom of the screen.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @impulse-ui-native/flyout
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
This package uses React Native Gesture Handler, Reanimated, Safe Area Context, and Worklets. Complete their native setup and render the flyout inside both `GestureHandlerRootView` and `SafeAreaProvider`.
|
|
12
|
+
|
|
13
|
+
## Main exports
|
|
14
|
+
|
|
15
|
+
- `Flyout` renders the sheet, overlay, drag handle, title, safe-area padding, and lifecycle animations.
|
|
16
|
+
- `FlyoutProps` adds `open`, `placement`, `topOffset`, and `bottomOffset` to the common layer contract.
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import { Flyout } from "@impulse-ui-native/flyout";
|
|
22
|
+
|
|
23
|
+
<Flyout
|
|
24
|
+
id="filters"
|
|
25
|
+
title="Filters"
|
|
26
|
+
open={filtersOpen}
|
|
27
|
+
placement="bottom"
|
|
28
|
+
onClose={() => setFiltersOpen(false)}
|
|
29
|
+
>
|
|
30
|
+
<Filters />
|
|
31
|
+
</Flyout>;
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The overlay closes the sheet when pressed. A drag past half the measured sheet height, or a sufficiently fast swipe toward the edge, closes it as well.
|
|
35
|
+
|
|
36
|
+
For app-wide imperative sheets, register flyouts through `@impulse-ui-native/layers` and mount `LayerCenter` once.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/flyout",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.mts",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"LICENSE"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@impulse-ui-native/
|
|
22
|
-
"@impulse-ui-native/
|
|
23
|
-
"@impulse-ui-native/
|
|
24
|
-
"@impulse-ui-native/
|
|
21
|
+
"@impulse-ui-native/core": "2.0.1",
|
|
22
|
+
"@impulse-ui-native/types": "2.0.1",
|
|
23
|
+
"@impulse-ui-native/theme": "2.0.1",
|
|
24
|
+
"@impulse-ui-native/primitives": "2.0.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/react": "~19.2.14",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"react-native-safe-area-context": "~5.6.0",
|
|
35
35
|
"react-native-worklets": "0.7.4",
|
|
36
36
|
"typescript": "~5.9.2",
|
|
37
|
-
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
38
37
|
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
38
|
+
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
39
39
|
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|