@frontpage/weasel 1.2.0-rc.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.
Files changed (7) hide show
  1. package/LICENSE.md +9 -0
  2. package/dist/index.d.mts +147 -0
  3. package/dist/index.d.ts +147 -0
  4. package/dist/index.js +1776 -0
  5. package/dist/index.mjs +1748 -0
  6. package/dist/style.css +259 -0
  7. package/package.json +73 -0
package/dist/style.css ADDED
@@ -0,0 +1,259 @@
1
+ [data-vaul-drawer] {
2
+ touch-action: none;
3
+ will-change: transform;
4
+ transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
5
+ animation-duration: 0.5s;
6
+ animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
7
+ }
8
+
9
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
10
+ animation-name: slideFromBottom;
11
+ }
12
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed'] {
13
+ animation-name: slideToBottom;
14
+ }
15
+
16
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='open'] {
17
+ animation-name: slideFromTop;
18
+ }
19
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='closed'] {
20
+ animation-name: slideToTop;
21
+ }
22
+
23
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='open'] {
24
+ animation-name: slideFromLeft;
25
+ }
26
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='closed'] {
27
+ animation-name: slideToLeft;
28
+ }
29
+
30
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='open'] {
31
+ animation-name: slideFromRight;
32
+ }
33
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='closed'] {
34
+ animation-name: slideToRight;
35
+ }
36
+
37
+ [data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom'] {
38
+ transform: translate3d(0, var(--initial-transform, 100%), 0);
39
+ }
40
+
41
+ [data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top'] {
42
+ transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
43
+ }
44
+
45
+ [data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left'] {
46
+ transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
47
+ }
48
+
49
+ [data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right'] {
50
+ transform: translate3d(var(--initial-transform, 100%), 0, 0);
51
+ }
52
+
53
+ [data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top'] {
54
+ transform: translate3d(0, var(--snap-point-height, 0), 0);
55
+ }
56
+
57
+ [data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='bottom'] {
58
+ transform: translate3d(0, var(--snap-point-height, 0), 0);
59
+ }
60
+
61
+ [data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='left'] {
62
+ transform: translate3d(var(--snap-point-height, 0), 0, 0);
63
+ }
64
+
65
+ [data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='right'] {
66
+ transform: translate3d(var(--snap-point-height, 0), 0, 0);
67
+ }
68
+
69
+ [data-vaul-overlay][data-vaul-snap-points='false'] {
70
+ animation-duration: 0.5s;
71
+ animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
72
+ }
73
+ [data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
74
+ animation-name: fadeIn;
75
+ }
76
+ [data-vaul-overlay][data-state='closed'] {
77
+ animation-name: fadeOut;
78
+ }
79
+
80
+ [data-vaul-animate='false'] {
81
+ /* eslint-disable-next-line css/no-important -- respect the setting */
82
+ animation: none !important;
83
+ }
84
+
85
+ [data-vaul-overlay][data-vaul-snap-points='true'] {
86
+ opacity: 0;
87
+ transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
88
+ }
89
+
90
+ [data-vaul-overlay][data-vaul-snap-points='true'] {
91
+ opacity: 1;
92
+ }
93
+
94
+ [data-vaul-drawer]:not([data-vaul-custom-container='true'])::after {
95
+ content: '';
96
+ position: absolute;
97
+ background: inherit;
98
+ background-color: inherit;
99
+ }
100
+
101
+ [data-vaul-drawer][data-vaul-drawer-direction='top']::after {
102
+ top: initial;
103
+ bottom: 100%;
104
+ left: 0;
105
+ right: 0;
106
+ height: 200%;
107
+ }
108
+
109
+ [data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
110
+ top: 100%;
111
+ bottom: initial;
112
+ left: 0;
113
+ right: 0;
114
+ height: 200%;
115
+ }
116
+
117
+ [data-vaul-drawer][data-vaul-drawer-direction='left']::after {
118
+ left: initial;
119
+ right: 100%;
120
+ top: 0;
121
+ bottom: 0;
122
+ width: 200%;
123
+ }
124
+
125
+ [data-vaul-drawer][data-vaul-drawer-direction='right']::after {
126
+ left: 100%;
127
+ right: initial;
128
+ top: 0;
129
+ bottom: 0;
130
+ width: 200%;
131
+ }
132
+
133
+ [data-vaul-overlay][data-vaul-snap-points='true']:not(
134
+ [data-vaul-snap-points-overlay='true']
135
+ ):not([data-state='closed']) {
136
+ opacity: 0;
137
+ }
138
+
139
+ [data-vaul-overlay][data-vaul-snap-points-overlay='true'] {
140
+ opacity: 1;
141
+ }
142
+
143
+ [data-vaul-handle] {
144
+ display: block;
145
+ position: relative;
146
+ opacity: 0.7;
147
+ background: #e2e2e4;
148
+ margin-left: auto;
149
+ margin-right: auto;
150
+ height: 5px;
151
+ width: 32px;
152
+ border-radius: 1rem;
153
+ touch-action: pan-y;
154
+ }
155
+
156
+ [data-vaul-handle]:hover,
157
+ [data-vaul-handle]:active {
158
+ opacity: 1;
159
+ }
160
+
161
+ [data-vaul-handle-hitarea] {
162
+ position: absolute;
163
+ left: 50%;
164
+ top: 50%;
165
+ transform: translate(-50%, -50%);
166
+ width: max(100%, 2.75rem); /* 44px */
167
+ height: max(100%, 2.75rem); /* 44px */
168
+ touch-action: inherit;
169
+ }
170
+
171
+ @media (hover: hover) and (pointer: fine) {
172
+ [data-vaul-drawer] {
173
+ -webkit-user-select: none;
174
+ /* eslint-disable-next-line css/use-baseline -- It's fine to not have this for iOS webview and opera mini since it shouldn't break anything */
175
+ user-select: none;
176
+ }
177
+ }
178
+
179
+ @media (pointer: fine) {
180
+ [data-vaul-handle-hitarea] {
181
+ width: 100%;
182
+ height: 100%;
183
+ }
184
+ }
185
+
186
+ @keyframes fadeIn {
187
+ from {
188
+ opacity: 0;
189
+ }
190
+ to {
191
+ opacity: 1;
192
+ }
193
+ }
194
+
195
+ @keyframes fadeOut {
196
+ to {
197
+ opacity: 0;
198
+ }
199
+ }
200
+
201
+ @keyframes slideFromBottom {
202
+ from {
203
+ transform: translate3d(0, var(--initial-transform, 100%), 0);
204
+ }
205
+ to {
206
+ transform: translate3d(0, 0, 0);
207
+ }
208
+ }
209
+
210
+ @keyframes slideToBottom {
211
+ to {
212
+ transform: translate3d(0, var(--initial-transform, 100%), 0);
213
+ }
214
+ }
215
+
216
+ @keyframes slideFromTop {
217
+ from {
218
+ transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
219
+ }
220
+ to {
221
+ transform: translate3d(0, 0, 0);
222
+ }
223
+ }
224
+
225
+ @keyframes slideToTop {
226
+ to {
227
+ transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
228
+ }
229
+ }
230
+
231
+ @keyframes slideFromLeft {
232
+ from {
233
+ transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
234
+ }
235
+ to {
236
+ transform: translate3d(0, 0, 0);
237
+ }
238
+ }
239
+
240
+ @keyframes slideToLeft {
241
+ to {
242
+ transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
243
+ }
244
+ }
245
+
246
+ @keyframes slideFromRight {
247
+ from {
248
+ transform: translate3d(var(--initial-transform, 100%), 0, 0);
249
+ }
250
+ to {
251
+ transform: translate3d(0, 0, 0);
252
+ }
253
+ }
254
+
255
+ @keyframes slideToRight {
256
+ to {
257
+ transform: translate3d(var(--initial-transform, 100%), 0, 0);
258
+ }
259
+ }
package/package.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "name": "@frontpage/weasel",
3
+ "version": "1.2.0-rc.1",
4
+ "description": "Drawer component for React.",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "files": [
9
+ "dist",
10
+ "style.css"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "import": {
15
+ "types": "./dist/index.d.mts",
16
+ "default": "./dist/index.mjs"
17
+ },
18
+ "require": {
19
+ "types": "./dist/index.d.ts",
20
+ "default": "./dist/index.js"
21
+ }
22
+ },
23
+ "./style.css": "./dist/style.css"
24
+ },
25
+ "keywords": [
26
+ "react",
27
+ "drawer",
28
+ "dialog",
29
+ "modal"
30
+ ],
31
+ "author": "frontpage.fyi <team@frontpage.fyi>",
32
+ "license": "MIT",
33
+ "homepage": "https://github.com/frontpagefyi/weasel",
34
+ "repository": {
35
+ "type": "git",
36
+ "url": "https://github.com/frontpagefyi/weasel.git",
37
+ "directory": "packages/weasel"
38
+ },
39
+ "bugs": {
40
+ "url": "https://github.com/frontpagefyi/weasel/issues"
41
+ },
42
+ "devDependencies": {
43
+ "@radix-ui/react-dialog": "^1.0.4",
44
+ "@types/node": "^22.0.0",
45
+ "@types/react": "^19.2.0",
46
+ "@types/react-dom": "^19.2.0",
47
+ "bunchee": "^5.1.5",
48
+ "eslint": "9.39.2",
49
+ "globals": "^16.5.0",
50
+ "ncp": "^2.0.0",
51
+ "prettier": "^2.5.1",
52
+ "react": "^19.2.0",
53
+ "react-dom": "^19.2.0",
54
+ "typescript": "^5.2.0",
55
+ "@repo/eslint-config": "^0.0.0",
56
+ "@repo/typescript-config": "^0.0.0"
57
+ },
58
+ "peerDependencies": {
59
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
60
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
61
+ },
62
+ "dependencies": {
63
+ "@radix-ui/react-dialog": "^1.1.1"
64
+ },
65
+ "scripts": {
66
+ "type-check": "tsc --noEmit",
67
+ "build": "pnpm type-check && bunchee && pnpm copy-assets",
68
+ "copy-assets": "ncp ./src/style.css ./dist/style.css",
69
+ "dev": "bunchee --watch",
70
+ "lint": "eslint --flag unstable_native_nodejs_ts_config src/",
71
+ "lint:fix": "pnpm lint --fix"
72
+ }
73
+ }