@pathscale/ui 1.2.10 → 1.3.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 (126) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +132 -59
  3. package/dist/components/accordion/Accordion.css +158 -158
  4. package/dist/components/alert/Alert.css +116 -116
  5. package/dist/components/avatar/Avatar.css +124 -124
  6. package/dist/components/badge/Badge.css +164 -164
  7. package/dist/components/breadcrumbs/Breadcrumbs.css +63 -63
  8. package/dist/components/button/Button.css +194 -194
  9. package/dist/components/button-group/ButtonGroup.css +117 -117
  10. package/dist/components/calendar/Calendar.css +258 -258
  11. package/dist/components/card/Card.css +110 -110
  12. package/dist/components/chatbubble/ChatBubble.css +164 -164
  13. package/dist/components/checkbox/Checkbox.css +183 -183
  14. package/dist/components/checkbox-group/CheckboxGroup.css +10 -10
  15. package/dist/components/chip/Chip.css +197 -197
  16. package/dist/components/close-button/CloseButton.css +81 -81
  17. package/dist/components/color-area/ColorArea.css +54 -54
  18. package/dist/components/color-field/ColorField.css +88 -88
  19. package/dist/components/color-picker/ColorPicker.css +28 -28
  20. package/dist/components/color-slider/ColorSlider.css +57 -57
  21. package/dist/components/color-swatch/ColorSwatch.css +84 -84
  22. package/dist/components/color-swatch-picker/ColorSwatchPicker.css +12 -12
  23. package/dist/components/color-wheel-flower/ColorWheelFlower.css +147 -147
  24. package/dist/components/combo-box/ComboBox.css +344 -344
  25. package/dist/components/date-field/DateField.css +215 -215
  26. package/dist/components/date-picker/DatePicker.css +143 -143
  27. package/dist/components/date-range-picker/DateRangePicker.css +149 -149
  28. package/dist/components/description/Description.css +10 -10
  29. package/dist/components/disclosure/Disclosure.css +84 -84
  30. package/dist/components/disclosure-group/DisclosureGroup.css +9 -9
  31. package/dist/components/drawer/Drawer.css +463 -463
  32. package/dist/components/dropdown/Dropdown.css +211 -211
  33. package/dist/components/empty-state/EmptyState.css +39 -39
  34. package/dist/components/error-message/ErrorMessage.css +20 -20
  35. package/dist/components/field-error/FieldError.css +27 -27
  36. package/dist/components/fieldset/Fieldset.css +30 -30
  37. package/dist/components/flex/Flex.css +5 -5
  38. package/dist/components/floating-dock/FloatingDock.css +208 -208
  39. package/dist/components/footer/footer.css +51 -51
  40. package/dist/components/form/Form.css +5 -5
  41. package/dist/components/glass-panel/GlassPanel.css +359 -359
  42. package/dist/components/glow-card/GlowCard.css +100 -100
  43. package/dist/components/grid/Grid.css +5 -5
  44. package/dist/components/header/Header.css +13 -13
  45. package/dist/components/icon/Icon.css +10 -10
  46. package/dist/components/immersive-landing/ImmersiveLanding.css +565 -565
  47. package/dist/components/input/Input.css +155 -155
  48. package/dist/components/input-group/InputGroup.css +172 -172
  49. package/dist/components/input-otp/InputOTP.css +170 -170
  50. package/dist/components/kbd/Kbd.css +60 -60
  51. package/dist/components/label/Label.css +30 -30
  52. package/dist/components/language-switcher/LanguageSwitcher.css +56 -56
  53. package/dist/components/language-switcher/createI18n.d.ts +2 -1
  54. package/dist/components/link/Link.css +131 -131
  55. package/dist/components/list-box/ListBox.css +148 -148
  56. package/dist/components/live-chat/LiveChat.css +324 -324
  57. package/dist/components/menu/Menu.css +199 -199
  58. package/dist/components/metal-border/MetalBorder.classes.d.ts +26 -0
  59. package/dist/components/metal-border/MetalBorder.classes.js +27 -0
  60. package/dist/components/metal-border/MetalBorder.css +40 -0
  61. package/dist/components/metal-border/MetalBorder.d.ts +20 -0
  62. package/dist/components/metal-border/MetalBorder.js +322 -0
  63. package/dist/components/metal-border/engine/color.d.ts +4 -0
  64. package/dist/components/metal-border/engine/color.js +69 -0
  65. package/dist/components/metal-border/engine/glow/geometry.d.ts +35 -0
  66. package/dist/components/metal-border/engine/glow/geometry.js +176 -0
  67. package/dist/components/metal-border/engine/glow/glow.d.ts +38 -0
  68. package/dist/components/metal-border/engine/glow/glow.js +246 -0
  69. package/dist/components/metal-border/engine/index.d.ts +4 -0
  70. package/dist/components/metal-border/engine/index.js +2 -0
  71. package/dist/components/metal-border/engine/perfConfig.d.ts +9 -0
  72. package/dist/components/metal-border/engine/perfConfig.js +10 -0
  73. package/dist/components/metal-border/engine/presets.d.ts +57 -0
  74. package/dist/components/metal-border/engine/presets.js +214 -0
  75. package/dist/components/metal-border/engine/renderer/core.d.ts +69 -0
  76. package/dist/components/metal-border/engine/renderer/core.js +156 -0
  77. package/dist/components/metal-border/engine/renderer/loop.d.ts +30 -0
  78. package/dist/components/metal-border/engine/renderer/loop.js +248 -0
  79. package/dist/components/metal-border/engine/renderer/sampling.d.ts +14 -0
  80. package/dist/components/metal-border/engine/renderer/sampling.js +145 -0
  81. package/dist/components/metal-border/engine/shaders.d.ts +36 -0
  82. package/dist/components/metal-border/engine/shaders.js +215 -0
  83. package/dist/components/metal-border/engine/tween.d.ts +17 -0
  84. package/dist/components/metal-border/engine/tween.js +28 -0
  85. package/dist/components/metal-border/index.d.ts +2 -0
  86. package/dist/components/metal-border/index.js +1 -0
  87. package/dist/components/meter/Meter.css +89 -89
  88. package/dist/components/modal/Modal.css +320 -320
  89. package/dist/components/navbar/Navbar.css +110 -110
  90. package/dist/components/noise-background/NoiseBackground.css +66 -66
  91. package/dist/components/number-field/NumberField.css +198 -198
  92. package/dist/components/pagination/Pagination.css +121 -121
  93. package/dist/components/popover/Popover.css +117 -117
  94. package/dist/components/progress-bar/ProgressBar.css +104 -104
  95. package/dist/components/progress-circle/ProgressCircle.css +82 -82
  96. package/dist/components/radio/Radio.css +129 -129
  97. package/dist/components/radio-group/RadioGroup.css +58 -58
  98. package/dist/components/range-calendar/RangeCalendar.css +51 -51
  99. package/dist/components/scroll-shadow/ScrollShadow.css +93 -93
  100. package/dist/components/search-field/SearchField.css +183 -183
  101. package/dist/components/select/Select.css +284 -284
  102. package/dist/components/separator/Separator.css +35 -35
  103. package/dist/components/skeleton/Skeleton.css +95 -95
  104. package/dist/components/slider/Slider.css +122 -122
  105. package/dist/components/spinner/Spinner.css +131 -131
  106. package/dist/components/surface/Surface.css +37 -37
  107. package/dist/components/table/Table.css +426 -426
  108. package/dist/components/tabs/Tabs.css +203 -203
  109. package/dist/components/tag/Tag.css +121 -121
  110. package/dist/components/tag-group/TagGroup.css +22 -22
  111. package/dist/components/text/Text.css +66 -66
  112. package/dist/components/text-area/TextArea.css +95 -95
  113. package/dist/components/text-field/TextField.css +33 -33
  114. package/dist/components/time-field/TimeField.css +215 -215
  115. package/dist/components/toast/Toast.css +344 -344
  116. package/dist/components/toggle/Toggle.css +237 -237
  117. package/dist/components/toolbar/Toolbar.css +55 -55
  118. package/dist/components/tooltip/Tooltip.css +153 -153
  119. package/dist/index.css +74 -74
  120. package/dist/index.d.ts +2 -0
  121. package/dist/index.js +1 -0
  122. package/dist/purge-manifest.json +15836 -15583
  123. package/dist/styles/base/index.css +43 -43
  124. package/dist/styles/themes/dark.css +141 -141
  125. package/dist/styles/themes/light.css +143 -143
  126. package/package.json +17 -8
package/dist/components/alert/Alert.css CHANGED
@@ -1,116 +1,116 @@
1
- @layer components {
2
- /* -------------------------------------------------------------------------------------------------
3
- * Root
4
- * -----------------------------------------------------------------------------------------------*/
5
- .alert {
6
- display: flex;
7
- width: 100%;
8
- flex-direction: row;
9
- align-items: flex-start;
10
- justify-content: flex-start;
11
- gap: 1rem;
12
- border-radius: var(--radius-box, 1.5rem);
13
- padding: 0.75rem 1rem;
14
- background-color: var(--color-base-200);
15
- color: var(--color-base-content);
16
- font-size: 0.875rem;
17
- line-height: 1.25rem;
18
- box-shadow:
19
- 0 1px 2px oklch(0% 0 0 / 0.05),
20
- 0 1px 3px oklch(0% 0 0 / 0.1);
21
- }
22
-
23
- /* -------------------------------------------------------------------------------------------------
24
- * Indicator
25
- * -----------------------------------------------------------------------------------------------*/
26
- .alert__indicator {
27
- display: flex;
28
- align-items: center;
29
- justify-content: center;
30
- padding: 0.25rem;
31
- flex-shrink: 0;
32
- user-select: none;
33
- }
34
-
35
- .alert__indicator [data-slot="alert-default-icon"] {
36
- width: 1rem;
37
- height: 1rem;
38
- }
39
-
40
- /* -------------------------------------------------------------------------------------------------
41
- * Content
42
- * -----------------------------------------------------------------------------------------------*/
43
- .alert__content {
44
- display: flex;
45
- flex: 1 1 0%;
46
- min-width: 0;
47
- flex-direction: column;
48
- align-items: flex-start;
49
- }
50
-
51
- /* -------------------------------------------------------------------------------------------------
52
- * Title
53
- * -----------------------------------------------------------------------------------------------*/
54
- .alert__title {
55
- font-size: 0.875rem;
56
- font-weight: 500;
57
- line-height: 1.5rem;
58
- }
59
-
60
- /* -------------------------------------------------------------------------------------------------
61
- * Description
62
- * -----------------------------------------------------------------------------------------------*/
63
- .alert__description {
64
- font-size: 0.875rem;
65
- color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
66
- }
67
-
68
- /* -------------------------------------------------------------------------------------------------
69
- * Status variants
70
- * -----------------------------------------------------------------------------------------------*/
71
-
72
- /* Default */
73
- .alert--default .alert__indicator {
74
- color: var(--color-base-content);
75
- }
76
-
77
- .alert--default .alert__title {
78
- color: var(--color-base-content);
79
- }
80
-
81
- /* Accent */
82
- .alert--accent .alert__indicator {
83
- color: var(--color-accent);
84
- }
85
-
86
- .alert--accent .alert__title {
87
- color: var(--color-accent);
88
- }
89
-
90
- /* Success */
91
- .alert--success .alert__indicator {
92
- color: var(--color-success);
93
- }
94
-
95
- .alert--success .alert__title {
96
- color: var(--color-success);
97
- }
98
-
99
- /* Warning */
100
- .alert--warning .alert__indicator {
101
- color: var(--color-warning);
102
- }
103
-
104
- .alert--warning .alert__title {
105
- color: var(--color-warning);
106
- }
107
-
108
- /* Danger */
109
- .alert--danger .alert__indicator {
110
- color: var(--color-error);
111
- }
112
-
113
- .alert--danger .alert__title {
114
- color: var(--color-error);
115
- }
116
- }
1
+ @layer components {
2
+ /* -------------------------------------------------------------------------------------------------
3
+ * Root
4
+ * -----------------------------------------------------------------------------------------------*/
5
+ .alert {
6
+ display: flex;
7
+ width: 100%;
8
+ flex-direction: row;
9
+ align-items: flex-start;
10
+ justify-content: flex-start;
11
+ gap: 1rem;
12
+ border-radius: var(--radius-box, 1.5rem);
13
+ padding: 0.75rem 1rem;
14
+ background-color: var(--color-base-200);
15
+ color: var(--color-base-content);
16
+ font-size: 0.875rem;
17
+ line-height: 1.25rem;
18
+ box-shadow:
19
+ 0 1px 2px oklch(0% 0 0 / 0.05),
20
+ 0 1px 3px oklch(0% 0 0 / 0.1);
21
+ }
22
+
23
+ /* -------------------------------------------------------------------------------------------------
24
+ * Indicator
25
+ * -----------------------------------------------------------------------------------------------*/
26
+ .alert__indicator {
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ padding: 0.25rem;
31
+ flex-shrink: 0;
32
+ user-select: none;
33
+ }
34
+
35
+ .alert__indicator [data-slot="alert-default-icon"] {
36
+ width: 1rem;
37
+ height: 1rem;
38
+ }
39
+
40
+ /* -------------------------------------------------------------------------------------------------
41
+ * Content
42
+ * -----------------------------------------------------------------------------------------------*/
43
+ .alert__content {
44
+ display: flex;
45
+ flex: 1 1 0%;
46
+ min-width: 0;
47
+ flex-direction: column;
48
+ align-items: flex-start;
49
+ }
50
+
51
+ /* -------------------------------------------------------------------------------------------------
52
+ * Title
53
+ * -----------------------------------------------------------------------------------------------*/
54
+ .alert__title {
55
+ font-size: 0.875rem;
56
+ font-weight: 500;
57
+ line-height: 1.5rem;
58
+ }
59
+
60
+ /* -------------------------------------------------------------------------------------------------
61
+ * Description
62
+ * -----------------------------------------------------------------------------------------------*/
63
+ .alert__description {
64
+ font-size: 0.875rem;
65
+ color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
66
+ }
67
+
68
+ /* -------------------------------------------------------------------------------------------------
69
+ * Status variants
70
+ * -----------------------------------------------------------------------------------------------*/
71
+
72
+ /* Default */
73
+ .alert--default .alert__indicator {
74
+ color: var(--color-base-content);
75
+ }
76
+
77
+ .alert--default .alert__title {
78
+ color: var(--color-base-content);
79
+ }
80
+
81
+ /* Accent */
82
+ .alert--accent .alert__indicator {
83
+ color: var(--color-accent);
84
+ }
85
+
86
+ .alert--accent .alert__title {
87
+ color: var(--color-accent);
88
+ }
89
+
90
+ /* Success */
91
+ .alert--success .alert__indicator {
92
+ color: var(--color-success);
93
+ }
94
+
95
+ .alert--success .alert__title {
96
+ color: var(--color-success);
97
+ }
98
+
99
+ /* Warning */
100
+ .alert--warning .alert__indicator {
101
+ color: var(--color-warning);
102
+ }
103
+
104
+ .alert--warning .alert__title {
105
+ color: var(--color-warning);
106
+ }
107
+
108
+ /* Danger */
109
+ .alert--danger .alert__indicator {
110
+ color: var(--color-error);
111
+ }
112
+
113
+ .alert--danger .alert__title {
114
+ color: var(--color-error);
115
+ }
116
+ }
package/dist/components/avatar/Avatar.css CHANGED
@@ -1,124 +1,124 @@
1
- @layer components {
2
- /* -------------------------------------------------------------------------------------------------
3
- * Root
4
- * -----------------------------------------------------------------------------------------------*/
5
- .avatar {
6
- position: relative;
7
- display: inline-flex;
8
- flex-shrink: 0;
9
- align-items: center;
10
- justify-content: center;
11
- overflow: hidden;
12
- border-radius: 9999px;
13
- width: 2.5rem;
14
- height: 2.5rem;
15
- background-color: var(--color-base-200);
16
- }
17
-
18
- /* -------------------------------------------------------------------------------------------------
19
- * Size modifiers
20
- * -----------------------------------------------------------------------------------------------*/
21
- .avatar--sm {
22
- width: 2rem;
23
- height: 2rem;
24
- }
25
-
26
- /* md is default — no extra styles */
27
-
28
- .avatar--lg {
29
- width: 3rem;
30
- height: 3rem;
31
- }
32
-
33
- .avatar--lg .avatar__fallback {
34
- font-size: 1rem;
35
- }
36
-
37
- /* -------------------------------------------------------------------------------------------------
38
- * Image
39
- * -----------------------------------------------------------------------------------------------*/
40
- .avatar__image {
41
- position: absolute;
42
- inset: 0;
43
- width: 100%;
44
- height: 100%;
45
- aspect-ratio: 1 / 1;
46
- object-fit: cover;
47
- transition: opacity 250ms ease;
48
- }
49
-
50
- @media (prefers-reduced-motion: reduce) {
51
- .avatar__image {
52
- transition: none;
53
- }
54
- }
55
-
56
- /* -------------------------------------------------------------------------------------------------
57
- * Fallback
58
- * -----------------------------------------------------------------------------------------------*/
59
- .avatar__fallback {
60
- display: flex;
61
- width: 100%;
62
- height: 100%;
63
- align-items: center;
64
- justify-content: center;
65
- background-color: var(--color-base-200);
66
- font-size: 0.875rem;
67
- font-weight: 500;
68
- }
69
-
70
- /* -------------------------------------------------------------------------------------------------
71
- * Fallback color modifiers
72
- * -----------------------------------------------------------------------------------------------*/
73
- .avatar__fallback--default {
74
- color: var(--color-base-content);
75
- }
76
-
77
- .avatar__fallback--accent {
78
- color: var(--color-accent);
79
- }
80
-
81
- .avatar__fallback--success {
82
- color: var(--color-success);
83
- }
84
-
85
- .avatar__fallback--warning {
86
- color: var(--color-warning);
87
- }
88
-
89
- .avatar__fallback--danger {
90
- color: var(--color-error);
91
- }
92
-
93
- /* -------------------------------------------------------------------------------------------------
94
- * Variant: soft
95
- * -----------------------------------------------------------------------------------------------*/
96
- .avatar--soft {
97
- background-color: transparent;
98
- }
99
-
100
- .avatar--soft .avatar__fallback--accent {
101
- background-color: color-mix(in oklab, var(--color-accent) 12%, transparent);
102
- color: var(--color-accent);
103
- }
104
-
105
- .avatar--soft .avatar__fallback--success {
106
- background-color: color-mix(in oklab, var(--color-success) 12%, transparent);
107
- color: var(--color-success);
108
- }
109
-
110
- .avatar--soft .avatar__fallback--warning {
111
- background-color: color-mix(in oklab, var(--color-warning) 12%, transparent);
112
- color: var(--color-warning);
113
- }
114
-
115
- .avatar--soft .avatar__fallback--danger {
116
- background-color: color-mix(in oklab, var(--color-error) 12%, transparent);
117
- color: var(--color-error);
118
- }
119
-
120
- .avatar--soft .avatar__fallback--default {
121
- background-color: var(--color-base-200);
122
- color: var(--color-base-content);
123
- }
124
- }
1
+ @layer components {
2
+ /* -------------------------------------------------------------------------------------------------
3
+ * Root
4
+ * -----------------------------------------------------------------------------------------------*/
5
+ .avatar {
6
+ position: relative;
7
+ display: inline-flex;
8
+ flex-shrink: 0;
9
+ align-items: center;
10
+ justify-content: center;
11
+ overflow: hidden;
12
+ border-radius: 9999px;
13
+ width: 2.5rem;
14
+ height: 2.5rem;
15
+ background-color: var(--color-base-200);
16
+ }
17
+
18
+ /* -------------------------------------------------------------------------------------------------
19
+ * Size modifiers
20
+ * -----------------------------------------------------------------------------------------------*/
21
+ .avatar--sm {
22
+ width: 2rem;
23
+ height: 2rem;
24
+ }
25
+
26
+ /* md is default — no extra styles */
27
+
28
+ .avatar--lg {
29
+ width: 3rem;
30
+ height: 3rem;
31
+ }
32
+
33
+ .avatar--lg .avatar__fallback {
34
+ font-size: 1rem;
35
+ }
36
+
37
+ /* -------------------------------------------------------------------------------------------------
38
+ * Image
39
+ * -----------------------------------------------------------------------------------------------*/
40
+ .avatar__image {
41
+ position: absolute;
42
+ inset: 0;
43
+ width: 100%;
44
+ height: 100%;
45
+ aspect-ratio: 1 / 1;
46
+ object-fit: cover;
47
+ transition: opacity 250ms ease;
48
+ }
49
+
50
+ @media (prefers-reduced-motion: reduce) {
51
+ .avatar__image {
52
+ transition: none;
53
+ }
54
+ }
55
+
56
+ /* -------------------------------------------------------------------------------------------------
57
+ * Fallback
58
+ * -----------------------------------------------------------------------------------------------*/
59
+ .avatar__fallback {
60
+ display: flex;
61
+ width: 100%;
62
+ height: 100%;
63
+ align-items: center;
64
+ justify-content: center;
65
+ background-color: var(--color-base-200);
66
+ font-size: 0.875rem;
67
+ font-weight: 500;
68
+ }
69
+
70
+ /* -------------------------------------------------------------------------------------------------
71
+ * Fallback color modifiers
72
+ * -----------------------------------------------------------------------------------------------*/
73
+ .avatar__fallback--default {
74
+ color: var(--color-base-content);
75
+ }
76
+
77
+ .avatar__fallback--accent {
78
+ color: var(--color-accent);
79
+ }
80
+
81
+ .avatar__fallback--success {
82
+ color: var(--color-success);
83
+ }
84
+
85
+ .avatar__fallback--warning {
86
+ color: var(--color-warning);
87
+ }
88
+
89
+ .avatar__fallback--danger {
90
+ color: var(--color-error);
91
+ }
92
+
93
+ /* -------------------------------------------------------------------------------------------------
94
+ * Variant: soft
95
+ * -----------------------------------------------------------------------------------------------*/
96
+ .avatar--soft {
97
+ background-color: transparent;
98
+ }
99
+
100
+ .avatar--soft .avatar__fallback--accent {
101
+ background-color: color-mix(in oklab, var(--color-accent) 12%, transparent);
102
+ color: var(--color-accent);
103
+ }
104
+
105
+ .avatar--soft .avatar__fallback--success {
106
+ background-color: color-mix(in oklab, var(--color-success) 12%, transparent);
107
+ color: var(--color-success);
108
+ }
109
+
110
+ .avatar--soft .avatar__fallback--warning {
111
+ background-color: color-mix(in oklab, var(--color-warning) 12%, transparent);
112
+ color: var(--color-warning);
113
+ }
114
+
115
+ .avatar--soft .avatar__fallback--danger {
116
+ background-color: color-mix(in oklab, var(--color-error) 12%, transparent);
117
+ color: var(--color-error);
118
+ }
119
+
120
+ .avatar--soft .avatar__fallback--default {
121
+ background-color: var(--color-base-200);
122
+ color: var(--color-base-content);
123
+ }
124
+ }