@hyvor/design 2.1.18 → 2.1.19

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 (24) hide show
  1. package/dist/components/Button/Button.svelte +413 -349
  2. package/dist/components/ButtonGroup/ButtonGroup.svelte +62 -63
  3. package/dist/components/Dropdown/Dropdown.svelte +9 -8
  4. package/dist/components/Dropdown/DropdownContent.svelte +14 -12
  5. package/dist/components/FileUploader/FileUploader.svelte +19 -17
  6. package/dist/components/FileUploader/Media/Media.svelte +44 -44
  7. package/dist/components/FileUploader/TabUpload/TabUpload.svelte +47 -45
  8. package/dist/components/FileUploader/Unsplash/Unsplash.svelte +38 -38
  9. package/dist/components/FormControl/Validation.svelte +30 -30
  10. package/dist/components/IconButton/IconButton.svelte +266 -204
  11. package/dist/components/Kbd/Kbd.svelte +33 -28
  12. package/dist/components/Loader/Loader.svelte +81 -78
  13. package/dist/components/Radio/Radio.svelte +71 -69
  14. package/dist/components/SplitControl/SplitControl.svelte +45 -40
  15. package/dist/components/Tag/Tag.svelte +152 -130
  16. package/dist/components/TextInput/TextInput.svelte +90 -89
  17. package/dist/components/Textarea/Textarea.svelte +1 -2
  18. package/dist/components/Usage/Usage.svelte +40 -40
  19. package/dist/index.d.ts +1 -1
  20. package/dist/index.js +1 -1
  21. package/dist/marketing/Docs/Toc.svelte +103 -91
  22. package/dist/marketing/Document/Document.svelte +77 -62
  23. package/dist/{variables.scss → variables.css} +1 -7
  24. package/package.json +19 -20
package/dist/components/ButtonGroup/ButtonGroup.svelte CHANGED
@@ -12,72 +12,71 @@
12
12
  {@render children?.()}
13
13
  </div>
14
14
 
15
- <style>.button-group {
16
- display: inline-flex;
17
- }
18
-
19
- .button-group.column {
20
- flex-direction: column;
21
- align-items: stretch;
22
- }
23
-
24
- .button-group :global(> .button) {
25
- position: relative;
26
- }
27
-
28
- .button-group :global(> .button:hover),
29
- .button-group :global(> .button:focus-visible) {
30
- z-index: 1;
31
- }
32
-
33
- .button-group:not(.column) :global(> .button:not(:first-child)) {
34
- border-top-left-radius: 0;
35
- border-bottom-left-radius: 0;
36
- }
37
-
38
- .button-group:not(.column) :global(> .button:not(:last-child)) {
39
- border-top-right-radius: 0;
40
- border-bottom-right-radius: 0;
41
- }
15
+ <style>
16
+ .button-group {
17
+ display: inline-flex;
18
+ }
42
19
 
43
- .button-group.column :global(> .button:not(:first-child)) {
44
- border-top-left-radius: 0;
45
- border-top-right-radius: 0;
46
- }
20
+ .button-group.column {
21
+ flex-direction: column;
22
+ align-items: stretch;
23
+ }
47
24
 
48
- .button-group.column :global(> .button:not(:last-child)) {
49
- border-bottom-left-radius: 0;
50
- border-bottom-right-radius: 0;
51
- }
25
+ .button-group :global(> .button) {
26
+ position: relative;
27
+ }
28
+ .button-group :global(> .button:hover),
29
+ .button-group :global(> .button:focus-visible) {
30
+ z-index: 1;
31
+ }
52
32
 
53
- .button-group:not(.column) :global(> .button:not(:first-child)) {
54
- margin-left: -1px;
55
- }
33
+ .button-group:not(.column) :global(> .button:not(:first-child)) {
34
+ border-top-left-radius: 0;
35
+ border-bottom-left-radius: 0;
36
+ }
37
+ .button-group:not(.column) :global(> .button:not(:last-child)) {
38
+ border-top-right-radius: 0;
39
+ border-bottom-right-radius: 0;
40
+ }
56
41
 
57
- .button-group.column :global(> .button:not(:first-child)) {
58
- margin-top: -1px;
59
- }
42
+ .button-group.column :global(> .button:not(:first-child)) {
43
+ border-top-left-radius: 0;
44
+ border-top-right-radius: 0;
45
+ }
46
+ .button-group.column :global(> .button:not(:last-child)) {
47
+ border-bottom-left-radius: 0;
48
+ border-bottom-right-radius: 0;
49
+ }
60
50
 
61
- .button-group:not(.no-divider):not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
62
- content: "";
63
- position: absolute;
64
- top: 22%;
65
- bottom: 22%;
66
- left: 0;
67
- width: 1px;
68
- background-color: currentColor;
69
- opacity: 0.25;
70
- pointer-events: none;
71
- }
51
+ .button-group:not(.column) :global(> .button:not(:first-child)) {
52
+ margin-left: -1px;
53
+ }
54
+ .button-group.column :global(> .button:not(:first-child)) {
55
+ margin-top: -1px;
56
+ }
72
57
 
73
- .button-group.column:not(.no-divider) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
74
- content: "";
75
- position: absolute;
76
- left: 22%;
77
- right: 22%;
78
- top: 0;
79
- height: 1px;
80
- background-color: currentColor;
81
- opacity: 0.25;
82
- pointer-events: none;
83
- }</style>
58
+ .button-group:not(.no-divider):not(.column)
59
+ :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
60
+ content: '';
61
+ position: absolute;
62
+ top: 22%;
63
+ bottom: 22%;
64
+ left: 0;
65
+ width: 1px;
66
+ background-color: currentColor;
67
+ opacity: 0.25;
68
+ pointer-events: none;
69
+ }
70
+ .button-group.column:not(.no-divider)
71
+ :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
72
+ content: '';
73
+ position: absolute;
74
+ left: 22%;
75
+ right: 22%;
76
+ top: 0;
77
+ height: 1px;
78
+ background-color: currentColor;
79
+ opacity: 0.25;
80
+ pointer-events: none;
81
+ }
82
+ </style>
package/dist/components/Dropdown/Dropdown.svelte CHANGED
@@ -62,11 +62,12 @@
62
62
  {/if}
63
63
  </span>
64
64
 
65
- <style>.dropdown {
66
- position: relative;
67
- display: inline-block;
68
- }
69
-
70
- .dropdown.relative > :global(.content-wrap) {
71
- position: relative !important;
72
- }</style>
65
+ <style>
66
+ .dropdown {
67
+ position: relative;
68
+ display: inline-block;
69
+ }
70
+ .dropdown.relative > :global(.content-wrap) {
71
+ position: relative !important;
72
+ }
73
+ </style>
package/dist/components/Dropdown/DropdownContent.svelte CHANGED
@@ -142,15 +142,17 @@
142
142
  </div>
143
143
  </div>
144
144
 
145
- <style>.content-wrap {
146
- position: fixed;
147
- z-index: 1000000;
148
- display: flex;
149
- flex-direction: column;
150
- }
151
-
152
- .content {
153
- overflow-y: auto;
154
- min-height: 0;
155
- overscroll-behavior: contain;
156
- }</style>
145
+ <style>
146
+ .content-wrap {
147
+ position: fixed;
148
+ z-index: 1000000;
149
+ display: flex;
150
+ flex-direction: column;
151
+ }
152
+
153
+ .content {
154
+ overflow-y: auto;
155
+ min-height: 0;
156
+ overscroll-behavior: contain;
157
+ }
158
+ </style>
package/dist/components/FileUploader/FileUploader.svelte CHANGED
@@ -126,21 +126,23 @@
126
126
  </Modal>
127
127
  </div>
128
128
 
129
- <style>.image-uploader :global(.inner) {
130
- height: 100%;
131
- width: 1100px !important;
132
- display: flex;
133
- flex-direction: column;
134
- }
135
- .image-uploader :global(.inner) :global(> .content) {
136
- flex: 1;
137
- padding-top: 0;
138
- min-height: 0;
139
- display: flex;
140
- flex-direction: column;
141
- }
129
+ <style>
130
+ .image-uploader :global(.inner) {
131
+ height: 100%;
132
+ width: 1100px !important;
133
+ display: flex;
134
+ flex-direction: column;
135
+ :global(> .content) {
136
+ flex: 1;
137
+ padding-top: 0;
138
+ min-height: 0;
139
+ display: flex;
140
+ flex-direction: column;
141
+ }
142
+ }
142
143
 
143
- .body {
144
- flex: 1;
145
- min-height: 0;
146
- }</style>
144
+ .body {
145
+ flex: 1;
146
+ min-height: 0;
147
+ }
148
+ </style>
package/dist/components/FileUploader/Media/Media.svelte CHANGED
@@ -72,47 +72,47 @@
72
72
  {/if}
73
73
  </div>
74
74
 
75
- <style>.media {
76
- height: 100%;
77
- display: flex;
78
- flex-direction: column;
79
- overflow-y: auto;
80
- }
81
-
82
- .grid {
83
- display: grid;
84
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
85
- gap: 10px;
86
- }
87
-
88
- .item {
89
- display: block;
90
- width: 100%;
91
- aspect-ratio: 1;
92
- padding: 0;
93
- border: 1px solid var(--border);
94
- border-radius: 5px;
95
- background: var(--input);
96
- cursor: pointer;
97
- overflow: hidden;
98
- transition: 0.2s box-shadow;
99
- }
100
- .item:hover {
101
- box-shadow: 0 0 0 2px var(--accent-light);
102
- }
103
- .item img {
104
- display: block;
105
- width: 100%;
106
- height: 100%;
107
- object-fit: cover;
108
- }
109
- .item .audio-name {
110
- display: flex;
111
- align-items: center;
112
- justify-content: center;
113
- height: 100%;
114
- padding: 10px;
115
- font-size: 13px;
116
- text-align: center;
117
- word-break: break-word;
118
- }</style>
75
+ <style>
76
+ .media {
77
+ height: 100%;
78
+ display: flex;
79
+ flex-direction: column;
80
+ overflow-y: auto;
81
+ }
82
+ .grid {
83
+ display: grid;
84
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
85
+ gap: 10px;
86
+ }
87
+ .item {
88
+ display: block;
89
+ width: 100%;
90
+ aspect-ratio: 1;
91
+ padding: 0;
92
+ border: 1px solid var(--border);
93
+ border-radius: 5px;
94
+ background: var(--input);
95
+ cursor: pointer;
96
+ overflow: hidden;
97
+ transition: 0.2s box-shadow;
98
+ &:hover {
99
+ box-shadow: 0 0 0 2px var(--accent-light);
100
+ }
101
+ img {
102
+ display: block;
103
+ width: 100%;
104
+ height: 100%;
105
+ object-fit: cover;
106
+ }
107
+ .audio-name {
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ height: 100%;
112
+ padding: 10px;
113
+ font-size: 13px;
114
+ text-align: center;
115
+ word-break: break-word;
116
+ }
117
+ }
118
+ </style>
package/dist/components/FileUploader/TabUpload/TabUpload.svelte CHANGED
@@ -235,48 +235,50 @@
235
235
  {/if}
236
236
  </div>
237
237
 
238
- <style>.tab {
239
- height: 100%;
240
- display: flex;
241
- flex-direction: column;
242
- padding-bottom: 15px;
243
- }
244
-
245
- .upload-wrap {
246
- flex: 1;
247
- width: 100%;
248
- height: 100%;
249
- }
250
- .upload-wrap .upload-area {
251
- background-color: var(--input);
252
- width: 100%;
253
- height: 100%;
254
- border-radius: 20px;
255
- display: flex;
256
- align-items: center;
257
- justify-content: center;
258
- font-size: 14px;
259
- color: var(--text-light);
260
- transition: 0.2s box-shadow;
261
- cursor: pointer;
262
- }
263
- .upload-wrap .upload-area:hover {
264
- box-shadow: 0 0 0 2px var(--accent-light);
265
- }
266
-
267
- .by-url-wrap {
268
- margin-top: 15px;
269
- }
270
- .by-url-wrap .title {
271
- font-size: 0.9rem;
272
- font-weight: 500;
273
- color: var(--text-light);
274
- margin-bottom: 10px;
275
- padding-left: 5px;
276
- text-align: center;
277
- }
278
- .by-url-wrap .input-button {
279
- display: flex;
280
- align-items: center;
281
- gap: 10px;
282
- }</style>
238
+ <style>
239
+ .tab {
240
+ height: 100%;
241
+ display: flex;
242
+ flex-direction: column;
243
+ padding-bottom: 15px;
244
+ }
245
+
246
+ .upload-wrap {
247
+ flex: 1;
248
+ width: 100%;
249
+ height: 100%;
250
+ .upload-area {
251
+ background-color: var(--input);
252
+ width: 100%;
253
+ height: 100%;
254
+ border-radius: 20px;
255
+ display: flex;
256
+ align-items: center;
257
+ justify-content: center;
258
+ font-size: 14px;
259
+ color: var(--text-light);
260
+ transition: 0.2s box-shadow;
261
+ cursor: pointer;
262
+ &:hover {
263
+ box-shadow: 0 0 0 2px var(--accent-light);
264
+ }
265
+ }
266
+ }
267
+
268
+ .by-url-wrap {
269
+ margin-top: 15px;
270
+ .title {
271
+ font-size: 0.9rem;
272
+ font-weight: 500;
273
+ color: var(--text-light);
274
+ margin-bottom: 10px;
275
+ padding-left: 5px;
276
+ text-align: center;
277
+ }
278
+ .input-button {
279
+ display: flex;
280
+ align-items: center;
281
+ gap: 10px;
282
+ }
283
+ }
284
+ </style>
package/dist/components/FileUploader/Unsplash/Unsplash.svelte CHANGED
@@ -116,41 +116,41 @@
116
116
  </div>
117
117
  </div>
118
118
 
119
- <style>.unsplash {
120
- display: flex;
121
- flex-direction: column;
122
- height: 100%;
123
- }
124
-
125
- .search-wrap {
126
- display: flex;
127
- align-items: center;
128
- margin-bottom: 15px;
129
- gap: 10px;
130
- }
131
-
132
- .results {
133
- flex: 1;
134
- overflow-y: auto;
135
- }
136
- .results .cols {
137
- display: flex;
138
- gap: 10px;
139
- }
140
- .results .col {
141
- flex: 1;
142
- }
143
- .results .img-wrap {
144
- display: block;
145
- width: 100%;
146
- margin-bottom: 10px;
147
- padding: 0;
148
- border: none;
149
- background: none;
150
- cursor: pointer;
151
- }
152
- .results .img-wrap img {
153
- display: block;
154
- width: 100%;
155
- border-radius: 5px;
156
- }</style>
119
+ <style>
120
+ .unsplash {
121
+ display: flex;
122
+ flex-direction: column;
123
+ height: 100%;
124
+ }
125
+ .search-wrap {
126
+ display: flex;
127
+ align-items: center;
128
+ margin-bottom: 15px;
129
+ gap: 10px;
130
+ }
131
+ .results {
132
+ flex: 1;
133
+ overflow-y: auto;
134
+ .cols {
135
+ display: flex;
136
+ gap: 10px;
137
+ }
138
+ .col {
139
+ flex: 1;
140
+ }
141
+ .img-wrap {
142
+ display: block;
143
+ width: 100%;
144
+ margin-bottom: 10px;
145
+ padding: 0;
146
+ border: none;
147
+ background: none;
148
+ cursor: pointer;
149
+ img {
150
+ display: block;
151
+ width: 100%;
152
+ border-radius: 5px;
153
+ }
154
+ }
155
+ }
156
+ </style>
package/dist/components/FormControl/Validation.svelte CHANGED
@@ -29,34 +29,34 @@
29
29
  </div>
30
30
  </div>
31
31
 
32
- <style>.validation {
33
- display: flex;
34
- align-items: center;
35
- font-size: 14px;
36
- }
37
-
38
- .icon {
39
- margin-right: 8px;
40
- }
41
-
42
- .validation.error {
43
- color: var(--red-dark);
44
- }
45
-
46
- .validation.warning {
47
- color: var(--orange-dark);
48
- }
49
-
50
- .validation.success {
51
- color: var(--green-dark);
52
- }
32
+ <style>
33
+ .validation {
34
+ display: flex;
35
+ align-items: center;
36
+ font-size: 14px;
37
+ }
38
+ .icon {
39
+ margin-right: 8px;
40
+ }
41
+ .validation.error {
42
+ color: var(--red-dark);
43
+ }
44
+ .validation.warning {
45
+ color: var(--orange-dark);
46
+ }
47
+ .validation.success {
48
+ color: var(--green-dark);
49
+ }
53
50
 
54
- :global(:root.dark) .validation.error {
55
- color: var(--red);
56
- }
57
- :global(:root.dark) .validation.warning {
58
- color: var(--orange);
59
- }
60
- :global(:root.dark) .validation.success {
61
- color: var(--green);
62
- }</style>
51
+ :global(:root.dark) {
52
+ .validation.error {
53
+ color: var(--red);
54
+ }
55
+ .validation.warning {
56
+ color: var(--orange);
57
+ }
58
+ .validation.success {
59
+ color: var(--green);
60
+ }
61
+ }
62
+ </style>