@x33025/sveltely 0.0.1 → 0.0.2

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 (5) hide show
  1. package/dist/components/Sheet/Sheet.svelte +16 -7
  2. package/dist/components/Sheet/Sheet.svelte.d.ts +1 -0
  3. package/dist/style/index.css +12 -0
  4. package/dist/style.css +15 -26
  5. package/package.json +1 -1
package/dist/components/Sheet/Sheet.svelte CHANGED
@@ -6,6 +6,7 @@
6
6
  label?: string;
7
7
  onClose?: () => void;
8
8
  class?: string;
9
+ maxWidth?: string;
9
10
  header?: Snippet;
10
11
  footer?: Snippet;
11
12
  children?: Snippet;
@@ -16,6 +17,7 @@
16
17
  label = 'Dialog',
17
18
  onClose,
18
19
  class: className = '',
20
+ maxWidth = '32rem',
19
21
  header,
20
22
  footer,
21
23
  children
@@ -39,28 +41,35 @@
39
41
 
40
42
  {#if open}
41
43
  <div class="center fixed inset-0 z-50 flex" use:portal>
42
- <div class="absolute inset-0 bg-black/20 backdrop-blur-sm" on:click|self={close}></div>
43
- <section
44
+ <button
45
+ type="button"
46
+ aria-label="Close dialog"
47
+ class="absolute inset-0"
48
+ style="background: var(--sheet-overlay); backdrop-filter: blur(var(--sheet-blur));"
49
+ onclick={close}
50
+ ></button>
51
+ <div
44
52
  role="dialog"
45
53
  aria-modal="true"
46
54
  aria-label={label}
47
- class="relative z-10 flex max-h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-zinc-950/10 {className}"
55
+ style={`border-radius: var(--sheet-border-radius); box-shadow: var(--sheet-shadow); max-width: ${maxWidth};`}
56
+ class="relative z-10 flex max-h-full w-full flex-col overflow-hidden bg-white ring-1 ring-zinc-950/10 {className}"
48
57
  >
49
58
  {#if header}
50
- <div class="border-b border-gray-200/70 px-4 py-3 text-sm font-medium text-gray-700">
59
+ <div class="border-b border-gray-200/70" style="padding: var(--sheet-content-padding);">
51
60
  {@render header()}
52
61
  </div>
53
62
  {/if}
54
- <div class="flex-1 overflow-auto px-4 py-4">
63
+ <div class="flex-1 overflow-auto" style="padding: var(--sheet-content-padding);">
55
64
  {#if children}
56
65
  {@render children()}
57
66
  {/if}
58
67
  </div>
59
68
  {#if footer}
60
- <div class="border-t border-gray-200/70 px-4 py-3 text-sm text-gray-600">
69
+ <div class="border-t border-gray-200/70" style="padding: var(--sheet-content-padding);">
61
70
  {@render footer()}
62
71
  </div>
63
72
  {/if}
64
- </section>
73
+ </div>
65
74
  </div>
66
75
  {/if}
package/dist/components/Sheet/Sheet.svelte.d.ts CHANGED
@@ -4,6 +4,7 @@ interface Props {
4
4
  label?: string;
5
5
  onClose?: () => void;
6
6
  class?: string;
7
+ maxWidth?: string;
7
8
  header?: Snippet;
8
9
  footer?: Snippet;
9
10
  children?: Snippet;
package/dist/style/index.css CHANGED
@@ -28,3 +28,15 @@
28
28
  @apply flex min-h-0 min-w-0 flex-1 flex-row;
29
29
  }
30
30
  }
31
+
32
+ @layer theme {
33
+ :root {
34
+ --sheet-border-radius: var(--radius-md);
35
+ --sheet-content-padding: calc(var(--spacing) * 4);
36
+
37
+ --sheet-background: var(--color-white);
38
+ --sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
39
+ --sheet-blur: var(--blur-sm);
40
+ --sheet-shadow: var(--shadow-md);
41
+ }
42
+ }
package/dist/style.css CHANGED
@@ -11,7 +11,6 @@
11
11
  --color-gray-100: oklch(96.7% 0.003 264.542);
12
12
  --color-gray-200: oklch(92.8% 0.006 264.531);
13
13
  --color-gray-500: oklch(55.1% 0.027 264.364);
14
- --color-gray-600: oklch(44.6% 0.03 256.802);
15
14
  --color-gray-700: oklch(37.3% 0.034 259.733);
16
15
  --color-gray-900: oklch(21% 0.034 264.665);
17
16
  --color-zinc-100: oklch(96.7% 0.001 286.375);
@@ -30,7 +29,7 @@
30
29
  --font-weight-semibold: 600;
31
30
  --tracking-wide: 0.025em;
32
31
  --radius-md: 0.375rem;
33
- --radius-2xl: 1rem;
32
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
34
33
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
35
34
  --animate-spin: spin 1s linear infinite;
36
35
  --blur-xs: 4px;
@@ -299,9 +298,6 @@
299
298
  .rounded {
300
299
  border-radius: 0.25rem;
301
300
  }
302
- .rounded-2xl {
303
- border-radius: var(--radius-2xl);
304
- }
305
301
  .rounded-full {
306
302
  border-radius: calc(infinity * 1px);
307
303
  }
@@ -340,12 +336,6 @@
340
336
  .border-zinc-200 {
341
337
  border-color: var(--color-zinc-200);
342
338
  }
343
- .bg-black\/20 {
344
- background-color: color-mix(in srgb, #000 20%, transparent);
345
- @supports (color: color-mix(in lab, red, red)) {
346
- background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
347
- }
348
- }
349
339
  .bg-gray-50 {
350
340
  background-color: var(--color-gray-50);
351
341
  }
@@ -382,12 +372,6 @@
382
372
  .py-2 {
383
373
  padding-block: calc(var(--spacing) * 2);
384
374
  }
385
- .py-3 {
386
- padding-block: calc(var(--spacing) * 3);
387
- }
388
- .py-4 {
389
- padding-block: calc(var(--spacing) * 4);
390
- }
391
375
  .text-left {
392
376
  text-align: left;
393
377
  }
@@ -414,9 +398,6 @@
414
398
  .text-gray-500 {
415
399
  color: var(--color-gray-500);
416
400
  }
417
- .text-gray-600 {
418
- color: var(--color-gray-600);
419
- }
420
401
  .text-gray-700 {
421
402
  color: var(--color-gray-700);
422
403
  }
@@ -436,10 +417,6 @@
436
417
  --tw-numeric-spacing: tabular-nums;
437
418
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
438
419
  }
439
- .shadow-2xl {
440
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
441
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
442
- }
443
420
  .shadow-lg {
444
421
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
445
422
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -486,8 +463,7 @@
486
463
  --tw-blur: blur(var(--blur-xs));
487
464
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
488
465
  }
489
- .backdrop-blur-sm {
490
- --tw-backdrop-blur: blur(var(--blur-sm));
466
+ .backdrop-filter {
491
467
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
492
468
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
493
469
  }
@@ -565,6 +541,19 @@
565
541
  flex-direction: row;
566
542
  }
567
543
  }
544
+ @layer theme {
545
+ :root {
546
+ --sheet-border-radius: var(--radius-md);
547
+ --sheet-content-padding: calc(var(--spacing) * 4);
548
+ --sheet-background: var(--color-white);
549
+ --sheet-overlay: color-mix(in srgb, #000 20%, transparent);
550
+ @supports (color: color-mix(in lab, red, red)) {
551
+ --sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
552
+ }
553
+ --sheet-blur: var(--blur-sm);
554
+ --sheet-shadow: var(--shadow-md);
555
+ }
556
+ }
568
557
  @property --tw-space-y-reverse {
569
558
  syntax: "*";
570
559
  inherits: false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x33025/sveltely",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run prepack",