@surdeddd/bottom-sheet 0.3.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 (45) hide show
  1. package/dist/{BottomSheetEngine-CAymrH-P.d.cts → BottomSheetEngine-BJrH7qY3.d.cts} +39 -3
  2. package/dist/{BottomSheetEngine-DcqcuudN.d.ts → BottomSheetEngine-L05jGZvU.d.ts} +39 -3
  3. package/dist/element.cjs +480 -89
  4. package/dist/element.d.cts +23 -4
  5. package/dist/element.d.ts +23 -4
  6. package/dist/element.iife.global.js +2 -2
  7. package/dist/element.js +480 -89
  8. package/dist/index.cjs +341 -80
  9. package/dist/index.d.cts +3 -2
  10. package/dist/index.d.ts +3 -2
  11. package/dist/index.js +341 -80
  12. package/dist/integrations/formik.d.cts +1 -1
  13. package/dist/integrations/formik.d.ts +1 -1
  14. package/dist/integrations/react-hook-form.d.cts +1 -1
  15. package/dist/integrations/react-hook-form.d.ts +1 -1
  16. package/dist/overlay.cjs +13 -2
  17. package/dist/overlay.js +13 -2
  18. package/dist/preact.d.cts +1 -1
  19. package/dist/preact.d.ts +1 -1
  20. package/dist/qwik.cjs +352 -81
  21. package/dist/qwik.d.cts +4 -2
  22. package/dist/qwik.d.ts +4 -2
  23. package/dist/qwik.js +352 -81
  24. package/dist/react.cjs +427 -87
  25. package/dist/react.d.cts +29 -4
  26. package/dist/react.d.ts +29 -4
  27. package/dist/react.js +427 -87
  28. package/dist/solid.cjs +341 -80
  29. package/dist/solid.d.cts +38 -2
  30. package/dist/solid.d.ts +38 -2
  31. package/dist/solid.js +341 -80
  32. package/dist/solid.source.jsx +341 -80
  33. package/dist/styles.css +57 -56
  34. package/dist/svelte-core.cjs +346 -80
  35. package/dist/svelte-core.js +346 -80
  36. package/dist/svelte-src/BottomSheet.svelte +103 -5
  37. package/dist/svelte.cjs +421 -88
  38. package/dist/svelte.d.cts +21 -0
  39. package/dist/svelte.d.ts +21 -0
  40. package/dist/svelte.js +421 -88
  41. package/dist/vue.cjs +584 -91
  42. package/dist/vue.d.cts +51 -2
  43. package/dist/vue.d.ts +51 -2
  44. package/dist/vue.js +585 -92
  45. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,10 +1,10 @@
1
1
  :where(.bs-root) {
2
2
 
3
- --bs-surface: #ffffff;
4
- --bs-surface-border: rgba(225, 227, 237, 1);
5
- --bs-radius: 20px;
3
+ --bs-surface-d: #ffffff;
4
+ --bs-surface-border-d: rgba(225, 227, 237, 1);
5
+ --bs-radius-d: 20px;
6
6
 
7
- --bs-handle-color: #b5b3a8;
7
+ --bs-handle-color-d: rgba(26, 22, 20, 0.3);
8
8
  --bs-handle-width: 40px;
9
9
  --bs-handle-height: 5px;
10
10
 
@@ -12,9 +12,9 @@
12
12
  --bs-z-sheet: 100;
13
13
  --bs-header-min-height: 80px;
14
14
 
15
- --bs-backdrop-color: rgba(0, 0, 0, 0.5);
15
+ --bs-backdrop-color-d: rgba(0, 0, 0, 0.5);
16
16
 
17
- --bs-scrim-color: rgba(0, 0, 0, 0.4);
17
+ --bs-scrim-color-d: transparent;
18
18
  --bs-scrim-blur: 0px;
19
19
  --bs-z-scrim: calc(var(--bs-z-sheet) - 1);
20
20
 
@@ -25,12 +25,12 @@
25
25
  .bs-backdrop {
26
26
  position: fixed;
27
27
  inset: 0;
28
- background: var(--bs-backdrop-color);
28
+ background: var(--bs-backdrop-color, var(--bs-backdrop-color-d));
29
29
  opacity: 0;
30
30
  pointer-events: none;
31
31
  z-index: var(--bs-z-backdrop);
32
32
 
33
- transition: opacity 0.15s linear;
33
+ transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
34
34
  will-change: opacity;
35
35
  }
36
36
  .bs-root[data-dragging="true"] .bs-backdrop,
@@ -40,9 +40,10 @@
40
40
 
41
41
  .bs-sheet {
42
42
  position: fixed;
43
- background: var(--bs-surface);
43
+ background: var(--bs-surface, var(--bs-surface-d));
44
44
  box-shadow: var(--bs-shadow, var(--bs-shadow-auto, none));
45
45
  z-index: var(--bs-z-sheet);
46
+ pointer-events: auto;
46
47
  overflow: hidden;
47
48
  display: flex;
48
49
  flex-direction: column;
@@ -58,9 +59,9 @@
58
59
  right: 0;
59
60
  bottom: 0;
60
61
  width: 100%;
61
- border-top-left-radius: var(--bs-radius);
62
- border-top-right-radius: var(--bs-radius);
63
- 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));
64
65
 
65
66
  padding-bottom: env(safe-area-inset-bottom);
66
67
 
@@ -74,9 +75,9 @@
74
75
  right: 0;
75
76
  top: 0;
76
77
  width: 100%;
77
- border-bottom-left-radius: var(--bs-radius);
78
- border-bottom-right-radius: var(--bs-radius);
79
- 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));
80
81
  flex-direction: column-reverse;
81
82
  --bs-shadow-auto: 0 3px 12px rgba(0, 0, 0, 0.12);
82
83
  padding-top: env(safe-area-inset-top);
@@ -86,9 +87,9 @@
86
87
  bottom: 0;
87
88
  left: 0;
88
89
  height: 100%;
89
- border-top-right-radius: var(--bs-radius);
90
- border-bottom-right-radius: var(--bs-radius);
91
- 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));
92
93
 
93
94
  --bs-shadow-auto: 3px 0 12px rgba(0, 0, 0, 0.12);
94
95
  }
@@ -97,9 +98,9 @@
97
98
  bottom: 0;
98
99
  right: 0;
99
100
  height: 100%;
100
- border-top-left-radius: var(--bs-radius);
101
- border-bottom-left-radius: var(--bs-radius);
102
- border-left: 1px solid var(--bs-surface-border);
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));
103
104
  --bs-shadow-auto: -3px 0 12px rgba(0, 0, 0, 0.12);
104
105
  }
105
106
 
@@ -121,7 +122,7 @@
121
122
  cursor: grab;
122
123
  touch-action: none;
123
124
  user-select: none;
124
- background: var(--bs-surface);
125
+ background: var(--bs-surface, var(--bs-surface-d));
125
126
  -webkit-tap-highlight-color: transparent;
126
127
  outline: none;
127
128
 
@@ -133,7 +134,7 @@
133
134
  .bs-handle:focus-visible {
134
135
  outline: 2px solid currentColor;
135
136
  outline-offset: -2px;
136
- border-radius: var(--bs-radius);
137
+ border-radius: var(--bs-radius, var(--bs-radius-d));
137
138
  }
138
139
 
139
140
  .bs-handle::before {
@@ -141,7 +142,7 @@
141
142
  display: block;
142
143
  width: var(--bs-handle-width);
143
144
  height: var(--bs-handle-height);
144
- background: var(--bs-handle-color);
145
+ background: var(--bs-handle-color, var(--bs-handle-color-d));
145
146
  border-radius: calc(var(--bs-handle-height) / 2);
146
147
  margin: 0 auto 8px;
147
148
  transition: width 0.15s ease, background 0.15s ease, transform 0.15s ease;
@@ -161,7 +162,7 @@
161
162
  align-items: center;
162
163
  justify-content: center;
163
164
  padding: 0;
164
- background: var(--bs-surface);
165
+ background: var(--bs-surface, var(--bs-surface-d));
165
166
  z-index: 1;
166
167
  overflow: hidden;
167
168
  }
@@ -171,11 +172,11 @@
171
172
  }
172
173
  .bs-sheet[data-mode="left"] .bs-handle {
173
174
  right: 0;
174
- border-left: 1px solid var(--bs-surface-border);
175
+ border-left: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
175
176
  }
176
177
  .bs-sheet[data-mode="right"] .bs-handle {
177
178
  left: 0;
178
- border-right: 1px solid var(--bs-surface-border);
179
+ border-right: 1px solid var(--bs-surface-border, var(--bs-surface-border-d));
179
180
  }
180
181
 
181
182
  .bs-sheet[data-mode="left"] .bs-handle::before,
@@ -186,10 +187,10 @@
186
187
  }
187
188
 
188
189
  .bs-sheet:hover .bs-handle::before {
189
- 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%);
190
191
  }
191
192
  .bs-handle:active::before {
192
- 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%);
193
194
  transform: scaleX(1.15);
194
195
  }
195
196
 
@@ -206,7 +207,7 @@
206
207
 
207
208
  background-image: radial-gradient(
208
209
  circle,
209
- var(--bs-handle-color) 0 1.5px,
210
+ var(--bs-handle-color, var(--bs-handle-color-d)) 0 1.5px,
210
211
  transparent 1.6px
211
212
  );
212
213
  background-size: 8px 3px;
@@ -253,33 +254,31 @@
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,10 +310,10 @@
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-handle-color-d: rgba(255, 255, 255, 0.45);
316
317
  --bs-shadow-auto: 0 -3px 16px rgba(0, 0, 0, 0.5);
317
318
  }
318
319
  }
@@ -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;