@sabrenski/spire-ui-vue 0.3.2 → 0.3.4

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 (37) hide show
  1. package/README.md +72 -1
  2. package/dist/components/Autocomplete/Autocomplete.vue.d.ts +12 -1
  3. package/dist/components/Badge/types.d.ts +1 -1
  4. package/dist/components/DatePicker/DatePicker.vue.d.ts +6 -2
  5. package/dist/components/DatePicker/types.d.ts +5 -1
  6. package/dist/components/Dropdown/DropdownMenu.vue.d.ts +15 -2
  7. package/dist/components/IconPicker/IconPicker.vue.d.ts +15 -4
  8. package/dist/components/Input/Input.vue.d.ts +2 -1
  9. package/dist/components/Input/types.d.ts +3 -1
  10. package/dist/components/LineChart/LineChart.vue.d.ts +0 -1
  11. package/dist/components/LineChart/constants.d.ts +1 -8
  12. package/dist/components/LineChart/types.d.ts +0 -2
  13. package/dist/components/LineChart/utils.d.ts +0 -8
  14. package/dist/components/PhoneInput/PhoneInput.vue.d.ts +6 -3
  15. package/dist/components/Popover/Popover.vue.d.ts +11 -2
  16. package/dist/components/Select/Select.vue.d.ts +208 -7
  17. package/dist/components/Select/types.d.ts +5 -1
  18. package/dist/components/Sidebar/Sidebar.vue.d.ts +1 -1
  19. package/dist/components/Tabs/Tabs.vue.d.ts +0 -1
  20. package/dist/components/Tabs/types.d.ts +1 -5
  21. package/dist/components/TimeInput/TimeInput.vue.d.ts +1 -1
  22. package/dist/components/TimeInput/types.d.ts +1 -1
  23. package/dist/composables/index.d.ts +3 -0
  24. package/dist/composables/useDarkMode/index.d.ts +1 -0
  25. package/dist/composables/useDarkMode/useDarkMode.d.ts +42 -0
  26. package/dist/composables/useMobilePopover/index.d.ts +1 -0
  27. package/dist/composables/useMobilePopover/useMobilePopover.d.ts +8 -0
  28. package/dist/composables/useTheme/index.d.ts +1 -0
  29. package/dist/composables/useTheme/useTheme.d.ts +43 -0
  30. package/dist/spire-ui.cjs +39 -39
  31. package/dist/spire-ui.css +1 -1
  32. package/dist/spire-ui.js +20134 -19590
  33. package/dist/theme/anchor-positioning.css +35 -0
  34. package/dist/theme/base.css +54 -54
  35. package/dist/theme/components.css +48 -0
  36. package/dist/theme/semantic.css +407 -17
  37. package/package.json +1 -1
package/dist/theme/anchor-positioning.css CHANGED
@@ -421,3 +421,38 @@
421
421
  --fallback-left-2,
422
422
  --fallback-left-3;
423
423
  }
424
+
425
+ /**
426
+ * Mobile Modal Styles
427
+ *
428
+ * On mobile (<640px), popovers are rendered as centered modal dialogs
429
+ * using the native <dialog> element with showModal() for proper
430
+ * backdrop interaction blocking.
431
+ */
432
+ @media (max-width: 639px) {
433
+ dialog[data-spire-mobile-modal] {
434
+ position: fixed;
435
+ inset: 0;
436
+ margin: auto;
437
+ width: calc(100% - 2rem);
438
+ max-width: 24rem;
439
+ max-height: calc(100% - 4rem);
440
+ padding: 0;
441
+ border: 1px solid var(--color-border);
442
+ border-radius: 0.75rem;
443
+ background: var(--color-popover);
444
+ box-shadow: var(--shadow-xl);
445
+ overflow: visible;
446
+ }
447
+
448
+ dialog[data-spire-mobile-modal]::backdrop {
449
+ background: var(--color-overlay);
450
+ backdrop-filter: blur(4px);
451
+ }
452
+
453
+ /* Calendar should expand to fill mobile dialog */
454
+ dialog[data-spire-mobile-modal] [data-spire-calendar] {
455
+ width: 100%;
456
+ border: none;
457
+ }
458
+ }
package/dist/theme/base.css CHANGED
@@ -11,75 +11,75 @@
11
11
  @theme {
12
12
  --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.15) h);
13
13
  --color-primary-100: oklch(from var(--color-primary-base) 95% calc(c * 0.25) h);
14
- --color-primary-200: oklch(from var(--color-primary-base) 91% calc(c * 0.40) h);
15
- --color-primary-300: oklch(from var(--color-primary-base) 84% calc(c * 0.60) h);
16
- --color-primary-400: oklch(from var(--color-primary-base) 75% calc(c * 0.85) h);
17
- --color-primary-500: oklch(from var(--color-primary-base) l c h);
18
- --color-primary-600: oklch(from var(--color-primary-base) 58% calc(c * 0.95) h);
19
- --color-primary-700: oklch(from var(--color-primary-base) 49% calc(c * 0.85) h);
20
- --color-primary-800: oklch(from var(--color-primary-base) 42% calc(c * 0.70) h);
21
- --color-primary-900: oklch(from var(--color-primary-base) 35% calc(c * 0.55) h);
22
- --color-primary-950: oklch(from var(--color-primary-base) 27% calc(c * 0.40) h);
14
+ --color-primary-200: oklch(from var(--color-primary-base) 90% calc(c * 0.40) h);
15
+ --color-primary-300: oklch(from var(--color-primary-base) 82% calc(c * 0.60) h);
16
+ --color-primary-400: oklch(from var(--color-primary-base) 72% calc(c * 0.92) h);
17
+ --color-primary-500: oklch(from var(--color-primary-base) 60% c h);
18
+ --color-primary-600: oklch(from var(--color-primary-base) 48% calc(c * 0.98) h);
19
+ --color-primary-700: oklch(from var(--color-primary-base) 38% calc(c * 0.85) h);
20
+ --color-primary-800: oklch(from var(--color-primary-base) 28% calc(c * 0.70) h);
21
+ --color-primary-900: oklch(from var(--color-primary-base) 20% calc(c * 0.55) h);
22
+ --color-primary-950: oklch(from var(--color-primary-base) 12% calc(c * 0.40) h);
23
23
 
24
24
  --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.15) h);
25
25
  --color-secondary-100: oklch(from var(--color-secondary-base) 95% calc(c * 0.25) h);
26
- --color-secondary-200: oklch(from var(--color-secondary-base) 91% calc(c * 0.40) h);
27
- --color-secondary-300: oklch(from var(--color-secondary-base) 84% calc(c * 0.60) h);
28
- --color-secondary-400: oklch(from var(--color-secondary-base) 75% calc(c * 0.85) h);
29
- --color-secondary-500: oklch(from var(--color-secondary-base) l c h);
30
- --color-secondary-600: oklch(from var(--color-secondary-base) 58% calc(c * 0.95) h);
31
- --color-secondary-700: oklch(from var(--color-secondary-base) 49% calc(c * 0.85) h);
32
- --color-secondary-800: oklch(from var(--color-secondary-base) 42% calc(c * 0.70) h);
33
- --color-secondary-900: oklch(from var(--color-secondary-base) 35% calc(c * 0.55) h);
34
- --color-secondary-950: oklch(from var(--color-secondary-base) 27% calc(c * 0.40) h);
26
+ --color-secondary-200: oklch(from var(--color-secondary-base) 90% calc(c * 0.40) h);
27
+ --color-secondary-300: oklch(from var(--color-secondary-base) 82% calc(c * 0.60) h);
28
+ --color-secondary-400: oklch(from var(--color-secondary-base) 72% calc(c * 0.92) h);
29
+ --color-secondary-500: oklch(from var(--color-secondary-base) 60% c h);
30
+ --color-secondary-600: oklch(from var(--color-secondary-base) 48% calc(c * 0.98) h);
31
+ --color-secondary-700: oklch(from var(--color-secondary-base) 38% calc(c * 0.85) h);
32
+ --color-secondary-800: oklch(from var(--color-secondary-base) 28% calc(c * 0.70) h);
33
+ --color-secondary-900: oklch(from var(--color-secondary-base) 20% calc(c * 0.55) h);
34
+ --color-secondary-950: oklch(from var(--color-secondary-base) 12% calc(c * 0.40) h);
35
35
 
36
36
  --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.15) h);
37
37
  --color-success-100: oklch(from var(--color-success-base) 95% calc(c * 0.25) h);
38
- --color-success-200: oklch(from var(--color-success-base) 91% calc(c * 0.40) h);
39
- --color-success-300: oklch(from var(--color-success-base) 84% calc(c * 0.60) h);
40
- --color-success-400: oklch(from var(--color-success-base) 75% calc(c * 0.85) h);
41
- --color-success-500: oklch(from var(--color-success-base) l c h);
42
- --color-success-600: oklch(from var(--color-success-base) 58% calc(c * 0.95) h);
43
- --color-success-700: oklch(from var(--color-success-base) 49% calc(c * 0.85) h);
44
- --color-success-800: oklch(from var(--color-success-base) 42% calc(c * 0.70) h);
45
- --color-success-900: oklch(from var(--color-success-base) 35% calc(c * 0.55) h);
46
- --color-success-950: oklch(from var(--color-success-base) 27% calc(c * 0.40) h);
38
+ --color-success-200: oklch(from var(--color-success-base) 90% calc(c * 0.40) h);
39
+ --color-success-300: oklch(from var(--color-success-base) 82% calc(c * 0.60) h);
40
+ --color-success-400: oklch(from var(--color-success-base) 72% calc(c * 0.92) h);
41
+ --color-success-500: oklch(from var(--color-success-base) 60% c h);
42
+ --color-success-600: oklch(from var(--color-success-base) 48% calc(c * 0.98) h);
43
+ --color-success-700: oklch(from var(--color-success-base) 38% calc(c * 0.85) h);
44
+ --color-success-800: oklch(from var(--color-success-base) 28% calc(c * 0.70) h);
45
+ --color-success-900: oklch(from var(--color-success-base) 20% calc(c * 0.55) h);
46
+ --color-success-950: oklch(from var(--color-success-base) 12% calc(c * 0.40) h);
47
47
 
48
48
  --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.15) h);
49
49
  --color-danger-100: oklch(from var(--color-danger-base) 95% calc(c * 0.25) h);
50
- --color-danger-200: oklch(from var(--color-danger-base) 91% calc(c * 0.40) h);
51
- --color-danger-300: oklch(from var(--color-danger-base) 84% calc(c * 0.60) h);
52
- --color-danger-400: oklch(from var(--color-danger-base) 75% calc(c * 0.85) h);
53
- --color-danger-500: oklch(from var(--color-danger-base) l c h);
54
- --color-danger-600: oklch(from var(--color-danger-base) 58% calc(c * 0.95) h);
55
- --color-danger-700: oklch(from var(--color-danger-base) 49% calc(c * 0.85) h);
56
- --color-danger-800: oklch(from var(--color-danger-base) 42% calc(c * 0.70) h);
57
- --color-danger-900: oklch(from var(--color-danger-base) 35% calc(c * 0.55) h);
58
- --color-danger-950: oklch(from var(--color-danger-base) 27% calc(c * 0.40) h);
50
+ --color-danger-200: oklch(from var(--color-danger-base) 90% calc(c * 0.40) h);
51
+ --color-danger-300: oklch(from var(--color-danger-base) 82% calc(c * 0.60) h);
52
+ --color-danger-400: oklch(from var(--color-danger-base) 72% calc(c * 0.92) h);
53
+ --color-danger-500: oklch(from var(--color-danger-base) 60% c h);
54
+ --color-danger-600: oklch(from var(--color-danger-base) 48% calc(c * 0.98) h);
55
+ --color-danger-700: oklch(from var(--color-danger-base) 38% calc(c * 0.85) h);
56
+ --color-danger-800: oklch(from var(--color-danger-base) 28% calc(c * 0.70) h);
57
+ --color-danger-900: oklch(from var(--color-danger-base) 20% calc(c * 0.55) h);
58
+ --color-danger-950: oklch(from var(--color-danger-base) 12% calc(c * 0.40) h);
59
59
 
60
60
  --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.15) h);
61
61
  --color-warning-100: oklch(from var(--color-warning-base) 95% calc(c * 0.25) h);
62
- --color-warning-200: oklch(from var(--color-warning-base) 91% calc(c * 0.40) h);
63
- --color-warning-300: oklch(from var(--color-warning-base) 84% calc(c * 0.60) h);
64
- --color-warning-400: oklch(from var(--color-warning-base) 75% calc(c * 0.85) h);
65
- --color-warning-500: oklch(from var(--color-warning-base) l c h);
66
- --color-warning-600: oklch(from var(--color-warning-base) 58% calc(c * 0.95) h);
67
- --color-warning-700: oklch(from var(--color-warning-base) 49% calc(c * 0.85) h);
68
- --color-warning-800: oklch(from var(--color-warning-base) 42% calc(c * 0.70) h);
69
- --color-warning-900: oklch(from var(--color-warning-base) 35% calc(c * 0.55) h);
70
- --color-warning-950: oklch(from var(--color-warning-base) 27% calc(c * 0.40) h);
62
+ --color-warning-200: oklch(from var(--color-warning-base) 90% calc(c * 0.40) h);
63
+ --color-warning-300: oklch(from var(--color-warning-base) 82% calc(c * 0.60) h);
64
+ --color-warning-400: oklch(from var(--color-warning-base) 72% calc(c * 0.92) h);
65
+ --color-warning-500: oklch(from var(--color-warning-base) 60% c h);
66
+ --color-warning-600: oklch(from var(--color-warning-base) 48% calc(c * 0.98) h);
67
+ --color-warning-700: oklch(from var(--color-warning-base) 38% calc(c * 0.85) h);
68
+ --color-warning-800: oklch(from var(--color-warning-base) 28% calc(c * 0.70) h);
69
+ --color-warning-900: oklch(from var(--color-warning-base) 20% calc(c * 0.55) h);
70
+ --color-warning-950: oklch(from var(--color-warning-base) 12% calc(c * 0.40) h);
71
71
 
72
72
  --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.15) h);
73
73
  --color-neutral-100: oklch(from var(--color-neutral-base) 95% calc(c * 0.25) h);
74
- --color-neutral-200: oklch(from var(--color-neutral-base) 91% calc(c * 0.40) h);
75
- --color-neutral-300: oklch(from var(--color-neutral-base) 84% calc(c * 0.60) h);
76
- --color-neutral-400: oklch(from var(--color-neutral-base) 75% calc(c * 0.85) h);
77
- --color-neutral-500: oklch(from var(--color-neutral-base) l c h);
78
- --color-neutral-600: oklch(from var(--color-neutral-base) 58% calc(c * 0.95) h);
79
- --color-neutral-700: oklch(from var(--color-neutral-base) 49% calc(c * 0.85) h);
80
- --color-neutral-800: oklch(from var(--color-neutral-base) 42% calc(c * 0.70) h);
81
- --color-neutral-900: oklch(from var(--color-neutral-base) 35% calc(c * 0.55) h);
82
- --color-neutral-950: oklch(from var(--color-neutral-base) 27% calc(c * 0.40) h);
74
+ --color-neutral-200: oklch(from var(--color-neutral-base) 90% calc(c * 0.40) h);
75
+ --color-neutral-300: oklch(from var(--color-neutral-base) 82% calc(c * 0.60) h);
76
+ --color-neutral-400: oklch(from var(--color-neutral-base) 72% calc(c * 0.92) h);
77
+ --color-neutral-500: oklch(from var(--color-neutral-base) 60% c h);
78
+ --color-neutral-600: oklch(from var(--color-neutral-base) 48% calc(c * 0.98) h);
79
+ --color-neutral-700: oklch(from var(--color-neutral-base) 38% calc(c * 0.85) h);
80
+ --color-neutral-800: oklch(from var(--color-neutral-base) 28% calc(c * 0.70) h);
81
+ --color-neutral-900: oklch(from var(--color-neutral-base) 20% calc(c * 0.55) h);
82
+ --color-neutral-950: oklch(from var(--color-neutral-base) 12% calc(c * 0.40) h);
83
83
 
84
84
  --radius-base: 0.5rem;
85
85
 
package/dist/theme/components.css CHANGED
@@ -47,6 +47,54 @@
47
47
  }
48
48
  }
49
49
 
50
+ dialog[data-spire-mobile-modal] {
51
+ background-color: var(--color-popover);
52
+ color: var(--color-foreground);
53
+ border-radius: 0.75rem;
54
+ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
55
+ outline: none;
56
+ opacity: 0;
57
+ transform: scale(0.95);
58
+ transition:
59
+ opacity 300ms ease-out,
60
+ transform 300ms ease-out,
61
+ overlay 300ms allow-discrete,
62
+ display 300ms allow-discrete;
63
+ transition-behavior: allow-discrete;
64
+ }
65
+
66
+ dialog[data-spire-mobile-modal][open] {
67
+ opacity: 1;
68
+ transform: scale(1);
69
+ }
70
+
71
+ dialog[data-spire-mobile-modal]::backdrop {
72
+ background-color: var(--color-overlay);
73
+ backdrop-filter: blur(4px);
74
+ opacity: 0;
75
+ transition: opacity 300ms ease-out;
76
+ }
77
+
78
+ dialog[data-spire-mobile-modal][open]::backdrop {
79
+ opacity: 1;
80
+ }
81
+
82
+ @starting-style {
83
+ dialog[data-spire-mobile-modal][open] {
84
+ opacity: 0;
85
+ transform: scale(0.95);
86
+ }
87
+
88
+ dialog[data-spire-mobile-modal][open]::backdrop {
89
+ opacity: 0;
90
+ }
91
+ }
92
+
93
+ dialog[data-spire-mobile-modal][data-spire-datepicker] {
94
+ width: fit-content;
95
+ max-width: fit-content;
96
+ }
97
+
50
98
  @utility scrollbar-thin {
51
99
  scrollbar-width: thin;
52
100
  scrollbar-color: var(--color-border) transparent;