@surdeddd/bottom-sheet 0.2.0 → 0.4.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-BJrH7qY3.d.cts} +105 -3
  3. package/dist/{BottomSheetEngine-Df9MwBbm.d.ts → BottomSheetEngine-L05jGZvU.d.ts} +105 -3
  4. package/dist/element.cjs +1170 -196
  5. package/dist/element.d.cts +29 -5
  6. package/dist/element.d.ts +29 -5
  7. package/dist/element.iife.global.js +2 -2
  8. package/dist/element.js +1170 -196
  9. package/dist/index.cjs +1051 -220
  10. package/dist/index.d.cts +18 -3
  11. package/dist/index.d.ts +18 -3
  12. package/dist/index.js +1049 -221
  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 +181 -37
  18. package/dist/overlay.d.cts +13 -0
  19. package/dist/overlay.d.ts +13 -0
  20. package/dist/overlay.js +181 -37
  21. package/dist/preact.d.cts +1 -1
  22. package/dist/preact.d.ts +1 -1
  23. package/dist/qwik.cjs +966 -195
  24. package/dist/qwik.d.cts +4 -2
  25. package/dist/qwik.d.ts +4 -2
  26. package/dist/qwik.js +967 -196
  27. package/dist/react.cjs +1242 -272
  28. package/dist/react.d.cts +47 -5
  29. package/dist/react.d.ts +47 -5
  30. package/dist/react.js +1242 -272
  31. package/dist/solid.cjs +992 -236
  32. package/dist/solid.d.cts +299 -4
  33. package/dist/solid.d.ts +299 -4
  34. package/dist/solid.js +993 -237
  35. package/dist/solid.source.jsx +3476 -0
  36. package/dist/styles.css +67 -66
  37. package/dist/svelte-core.cjs +3415 -0
  38. package/dist/svelte-core.js +3413 -0
  39. package/dist/svelte-src/BottomSheet.svelte +308 -0
  40. package/dist/svelte-src/index.js +2 -0
  41. package/dist/svelte.cjs +1034 -207
  42. package/dist/svelte.d.cts +121 -0
  43. package/dist/svelte.d.ts +28 -3
  44. package/dist/svelte.js +1035 -208
  45. package/dist/vue.cjs +1191 -205
  46. package/dist/vue.d.cts +127 -0
  47. package/dist/vue.d.ts +57 -4
  48. package/dist/vue.js +1192 -206
  49. package/package.json +105 -45
package/dist/styles.css CHANGED
@@ -1,11 +1,10 @@
1
1
  :where(.bs-root) {
2
2
 
3
- --bs-surface: #ffffff;
4
- --bs-surface-border: rgba(225, 227, 237, 1);
5
- --bs-shadow: 0 -3px 12px rgba(0, 0, 0, 0.12);
6
- --bs-radius: 20px;
3
+ --bs-surface-d: #ffffff;
4
+ --bs-surface-border-d: rgba(225, 227, 237, 1);
5
+ --bs-radius-d: 20px;
7
6
 
8
- --bs-handle-color: #b5b3a8;
7
+ --bs-handle-color-d: rgba(26, 22, 20, 0.3);
9
8
  --bs-handle-width: 40px;
10
9
  --bs-handle-height: 5px;
11
10
 
@@ -13,9 +12,9 @@
13
12
  --bs-z-sheet: 100;
14
13
  --bs-header-min-height: 80px;
15
14
 
16
- --bs-backdrop-color: rgba(0, 0, 0, 0.5);
15
+ --bs-backdrop-color-d: rgba(0, 0, 0, 0.5);
17
16
 
18
- --bs-scrim-color: rgba(0, 0, 0, 0.4);
17
+ --bs-scrim-color-d: transparent;
19
18
  --bs-scrim-blur: 0px;
20
19
  --bs-z-scrim: calc(var(--bs-z-sheet) - 1);
21
20
 
@@ -26,12 +25,12 @@
26
25
  .bs-backdrop {
27
26
  position: fixed;
28
27
  inset: 0;
29
- background: var(--bs-backdrop-color);
28
+ background: var(--bs-backdrop-color, var(--bs-backdrop-color-d));
30
29
  opacity: 0;
31
30
  pointer-events: none;
32
31
  z-index: var(--bs-z-backdrop);
33
32
 
34
- transition: opacity 0.15s linear;
33
+ transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
35
34
  will-change: opacity;
36
35
  }
37
36
  .bs-root[data-dragging="true"] .bs-backdrop,
@@ -41,9 +40,10 @@
41
40
 
42
41
  .bs-sheet {
43
42
  position: fixed;
44
- background: var(--bs-surface);
45
- box-shadow: var(--bs-shadow);
43
+ background: var(--bs-surface, var(--bs-surface-d));
44
+ box-shadow: var(--bs-shadow, var(--bs-shadow-auto, none));
46
45
  z-index: var(--bs-z-sheet);
46
+ pointer-events: auto;
47
47
  overflow: hidden;
48
48
  display: flex;
49
49
  flex-direction: column;
@@ -59,27 +59,27 @@
59
59
  right: 0;
60
60
  bottom: 0;
61
61
  width: 100%;
62
- border-top-left-radius: var(--bs-radius);
63
- border-top-right-radius: var(--bs-radius);
64
- border-top: 1px solid var(--bs-surface-border);
62
+ border-top-left-radius: var(--bs-radius, var(--bs-radius-d));
63
+ border-top-right-radius: var(--bs-radius, var(--bs-radius-d));
64
+ border-top: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
65
65
 
66
66
  padding-bottom: env(safe-area-inset-bottom);
67
67
 
68
- box-shadow: 0
69
- calc(var(--bs-progress, 0) * -2px - 3px)
70
- calc(var(--bs-progress, 0) * 18px + 12px)
71
- rgba(0, 0, 0, calc(var(--bs-progress, 0) * 0.15 + 0.12));
68
+ --bs-shadow-auto: 0
69
+ calc(var(--bs-progress, 0) * -2px - 3px)
70
+ calc(var(--bs-progress, 0) * 18px + 12px)
71
+ rgba(0, 0, 0, calc(var(--bs-progress, 0) * 0.15 + 0.12));
72
72
  }
73
73
  .bs-sheet[data-mode="top"] {
74
74
  left: 0;
75
75
  right: 0;
76
76
  top: 0;
77
77
  width: 100%;
78
- border-bottom-left-radius: var(--bs-radius);
79
- border-bottom-right-radius: var(--bs-radius);
80
- border-bottom: 1px solid var(--bs-surface-border);
78
+ border-bottom-left-radius: var(--bs-radius, var(--bs-radius-d));
79
+ border-bottom-right-radius: var(--bs-radius, var(--bs-radius-d));
80
+ border-bottom: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
81
81
  flex-direction: column-reverse;
82
- box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
82
+ --bs-shadow-auto: 0 3px 12px rgba(0, 0, 0, 0.12);
83
83
  padding-top: env(safe-area-inset-top);
84
84
  }
85
85
  .bs-sheet[data-mode="left"] {
@@ -87,21 +87,21 @@
87
87
  bottom: 0;
88
88
  left: 0;
89
89
  height: 100%;
90
- border-top-right-radius: var(--bs-radius);
91
- border-bottom-right-radius: var(--bs-radius);
92
- border-right: 1px solid var(--bs-surface-border);
90
+ border-top-right-radius: var(--bs-radius, var(--bs-radius-d));
91
+ border-bottom-right-radius: var(--bs-radius, var(--bs-radius-d));
92
+ border-right: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
93
93
 
94
- box-shadow: 3px 0 12px rgba(0, 0, 0, 0.12);
94
+ --bs-shadow-auto: 3px 0 12px rgba(0, 0, 0, 0.12);
95
95
  }
96
96
  .bs-sheet[data-mode="right"] {
97
97
  top: 0;
98
98
  bottom: 0;
99
99
  right: 0;
100
100
  height: 100%;
101
- border-top-left-radius: var(--bs-radius);
102
- border-bottom-left-radius: var(--bs-radius);
103
- border-left: 1px solid var(--bs-surface-border);
104
- box-shadow: -3px 0 12px rgba(0, 0, 0, 0.12);
101
+ border-top-left-radius: var(--bs-radius, var(--bs-radius-d));
102
+ border-bottom-left-radius: var(--bs-radius, var(--bs-radius-d));
103
+ border-left: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
104
+ --bs-shadow-auto: -3px 0 12px rgba(0, 0, 0, 0.12);
105
105
  }
106
106
 
107
107
  .bs-sheet[data-mode="left"] .bs-content {
@@ -122,7 +122,7 @@
122
122
  cursor: grab;
123
123
  touch-action: none;
124
124
  user-select: none;
125
- background: var(--bs-surface);
125
+ background: var(--bs-surface, var(--bs-surface-d));
126
126
  -webkit-tap-highlight-color: transparent;
127
127
  outline: none;
128
128
 
@@ -134,7 +134,7 @@
134
134
  .bs-handle:focus-visible {
135
135
  outline: 2px solid currentColor;
136
136
  outline-offset: -2px;
137
- border-radius: var(--bs-radius);
137
+ border-radius: var(--bs-radius, var(--bs-radius-d));
138
138
  }
139
139
 
140
140
  .bs-handle::before {
@@ -142,7 +142,7 @@
142
142
  display: block;
143
143
  width: var(--bs-handle-width);
144
144
  height: var(--bs-handle-height);
145
- background: var(--bs-handle-color);
145
+ background: var(--bs-handle-color, var(--bs-handle-color-d));
146
146
  border-radius: calc(var(--bs-handle-height) / 2);
147
147
  margin: 0 auto 8px;
148
148
  transition: width 0.15s ease, background 0.15s ease, transform 0.15s ease;
@@ -162,7 +162,7 @@
162
162
  align-items: center;
163
163
  justify-content: center;
164
164
  padding: 0;
165
- background: var(--bs-surface);
165
+ background: var(--bs-surface, var(--bs-surface-d));
166
166
  z-index: 1;
167
167
  overflow: hidden;
168
168
  }
@@ -172,11 +172,11 @@
172
172
  }
173
173
  .bs-sheet[data-mode="left"] .bs-handle {
174
174
  right: 0;
175
- border-left: 1px solid var(--bs-surface-border);
175
+ border-left: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
176
176
  }
177
177
  .bs-sheet[data-mode="right"] .bs-handle {
178
178
  left: 0;
179
- border-right: 1px solid var(--bs-surface-border);
179
+ border-right: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
180
180
  }
181
181
 
182
182
  .bs-sheet[data-mode="left"] .bs-handle::before,
@@ -187,10 +187,10 @@
187
187
  }
188
188
 
189
189
  .bs-sheet:hover .bs-handle::before {
190
- background: color-mix(in oklab, var(--bs-handle-color), #000 15%);
190
+ background: color-mix(in oklab, var(--bs-handle-color, var(--bs-handle-color-d)), #000 15%);
191
191
  }
192
192
  .bs-handle:active::before {
193
- background: color-mix(in oklab, var(--bs-handle-color), #000 35%);
193
+ background: color-mix(in oklab, var(--bs-handle-color, var(--bs-handle-color-d)), #000 35%);
194
194
  transform: scaleX(1.15);
195
195
  }
196
196
 
@@ -207,7 +207,7 @@
207
207
 
208
208
  background-image: radial-gradient(
209
209
  circle,
210
- var(--bs-handle-color) 0 1.5px,
210
+ var(--bs-handle-color, var(--bs-handle-color-d)) 0 1.5px,
211
211
  transparent 1.6px
212
212
  );
213
213
  background-size: 8px 3px;
@@ -250,36 +250,35 @@
250
250
  overflow-y: auto;
251
251
  -webkit-overflow-scrolling: touch;
252
252
  overscroll-behavior: contain;
253
+ user-select: text;
253
254
  padding: 0 16px 16px;
254
255
  }
255
256
 
257
+ .bs-footer {
258
+ flex: 0 0 auto;
259
+ padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
260
+ border-top: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
261
+ background: var(--bs-surface, var(--bs-surface-d));
262
+ }
263
+
256
264
  .bs-screen {
257
265
  position: absolute;
258
266
  inset: 0;
259
267
  pointer-events: none;
260
-
261
268
  z-index: var(--bs-z-scrim);
262
- }
263
-
264
- .bs-scrim-overlay {
265
- z-index: calc(var(--bs-z-sheet) + 1);
266
- pointer-events: none;
267
- }
268
269
 
269
- .bs-scrim {
270
- background: var(--bs-scrim-color);
271
-
272
- transition: opacity 0.15s linear;
270
+ background: var(--bs-scrim-color, var(--bs-scrim-color-d));
271
+ transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
273
272
  will-change: opacity;
274
273
  }
275
- .bs-root[data-dragging="true"] .bs-scrim,
276
- .bs-root[data-animating="true"] .bs-scrim {
274
+ .bs-root[data-dragging="true"] .bs-screen,
275
+ .bs-root[data-animating="true"] .bs-screen {
277
276
  transition: none;
278
277
  }
279
278
 
280
- .bs-scrim {
281
- backdrop-filter: blur(var(--bs-scrim-blur));
282
- -webkit-backdrop-filter: blur(var(--bs-scrim-blur));
279
+ .bs-scrim-overlay {
280
+ z-index: calc(var(--bs-z-sheet) + 1);
281
+ pointer-events: none;
283
282
  }
284
283
 
285
284
  .bs-button-slot {
@@ -289,13 +288,15 @@
289
288
  }
290
289
  .bs-button-slot[data-side="left"] {
291
290
  left: 16px;
292
- bottom: calc(var(--bs-size, 0px) + 12px);
293
- transition: bottom 0.15s ease;
291
+ bottom: calc(100% + 12px);
294
292
  }
295
293
  .bs-button-slot[data-side="right"] {
296
294
  right: 16px;
297
- bottom: calc(var(--bs-size, 0px) + 12px);
298
- transition: bottom 0.15s ease;
295
+ bottom: calc(100% + 12px);
296
+ }
297
+ .bs-sheet[data-mode="top"] .bs-button-slot {
298
+ bottom: auto;
299
+ top: calc(100% + 12px);
299
300
  }
300
301
 
301
302
  @media (prefers-reduced-motion: reduce) {
@@ -309,11 +310,11 @@
309
310
 
310
311
  @media (prefers-color-scheme: dark) {
311
312
  :where(.bs-root) {
312
- --bs-surface: #1a1a1d;
313
- --bs-surface-border: rgba(255, 255, 255, 0.08);
313
+ --bs-surface-d: #1a1a1d;
314
+ --bs-surface-border-d: rgba(255, 255, 255, 0.08);
314
315
 
315
- --bs-handle-color: rgba(255, 255, 255, 0.45);
316
- --bs-shadow: 0 -3px 16px rgba(0, 0, 0, 0.5);
316
+ --bs-handle-color-d: rgba(255, 255, 255, 0.45);
317
+ --bs-shadow-auto: 0 -3px 16px rgba(0, 0, 0, 0.5);
317
318
  }
318
319
  }
319
320
 
@@ -330,10 +331,10 @@
330
331
  }
331
332
 
332
333
  :where(.ovl-root) {
333
- --ovl-surface: var(--bs-surface, #ffffff);
334
- --ovl-surface-border: var(--bs-surface-border, rgba(0, 0, 0, 0.08));
334
+ --ovl-surface: var(--bs-surface, var(--bs-surface-d, #ffffff));
335
+ --ovl-surface-border: var(--bs-surface-border, var(--bs-surface-border-d, rgba(0, 0, 0, 0.08)));
335
336
  --ovl-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
336
- --ovl-radius: var(--bs-radius, 20px);
337
+ --ovl-radius: var(--bs-radius, var(--bs-radius-d, 20px));
337
338
  --ovl-backdrop-color: rgba(0, 0, 0, 0.5);
338
339
  --ovl-z-backdrop: 200;
339
340
  --ovl-z-panel: 201;