@hyvor/design 2.1.18 → 2.1.20-beta.1

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 (30) 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 +14 -12
  4. package/dist/components/Dropdown/Dropdown.svelte.d.ts +1 -0
  5. package/dist/components/Dropdown/DropdownContent.svelte +21 -13
  6. package/dist/components/FileUploader/FileUploader.svelte +19 -17
  7. package/dist/components/FileUploader/Media/Media.svelte +44 -44
  8. package/dist/components/FileUploader/TabUpload/TabUpload.svelte +47 -45
  9. package/dist/components/FileUploader/Unsplash/Unsplash.svelte +38 -38
  10. package/dist/components/FormControl/Validation.svelte +30 -30
  11. package/dist/components/IconButton/IconButton.svelte +266 -204
  12. package/dist/components/Kbd/Kbd.svelte +33 -28
  13. package/dist/components/Loader/Loader.svelte +81 -78
  14. package/dist/components/Radio/Radio.svelte +71 -69
  15. package/dist/components/SplitControl/SplitControl.svelte +45 -40
  16. package/dist/components/Tag/Tag.svelte +152 -130
  17. package/dist/components/TextInput/TextInput.svelte +90 -89
  18. package/dist/components/Textarea/Textarea.svelte +1 -2
  19. package/dist/components/Tooltip/Tooltip.svelte +4 -1
  20. package/dist/components/Usage/Usage.svelte +40 -40
  21. package/dist/components/directives/clickOutside.d.ts +2 -1
  22. package/dist/components/directives/clickOutside.js +25 -7
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.js +1 -1
  25. package/dist/marketing/Docs/Toc.svelte +103 -91
  26. package/dist/marketing/Document/Document.svelte +77 -62
  27. package/dist/marketing/Testimonials/Testimonials.svelte +3 -27
  28. package/dist/marketing/Testimonials/Testimonials.svelte.d.ts +0 -1
  29. package/dist/{variables.scss → variables.css} +1 -7
  30. package/package.json +20 -20
package/dist/components/Loader/Loader.svelte CHANGED
@@ -120,81 +120,84 @@
120
120
  {/if}
121
121
  </div>
122
122
 
123
- <style>.loader {
124
- display: inline-flex;
125
- align-items: center;
126
- }
127
- .loader .message {
128
- margin-left: 10px;
129
- }
130
-
131
- .loader.block {
132
- display: flex;
133
- align-items: center;
134
- justify-content: center;
135
- flex-direction: column;
136
- }
137
- .loader.block .message {
138
- margin-top: 10px;
139
- }
140
-
141
- .loader.full {
142
- width: 100%;
143
- height: 100%;
144
- flex: 1;
145
- display: flex;
146
- align-items: center;
147
- justify-content: center;
148
- flex-direction: column;
149
- }
150
- .loader.full .message {
151
- margin-top: 10px;
152
- }
153
-
154
- .loader-wrap {
155
- display: inline-flex;
156
- width: var(--local-size);
157
- height: var(--local-size);
158
- border-radius: var(--local-size);
159
- position: relative;
160
- }
161
-
162
- .success-icon,
163
- .error-icon {
164
- animation: scale 0.2s ease-in-out;
165
- }
166
-
167
- svg {
168
- width: inherit;
169
- height: inherit;
170
- display: inherit;
171
- box-sizing: inherit;
172
- position: absolute;
173
- top: 0;
174
- left: 0;
175
- }
176
-
177
- circle.progress {
178
- transform: rotate(-90deg);
179
- transform-origin: center;
180
- animation: 0.8s linear 0s infinite normal none running rotate;
181
- }
182
-
183
- @keyframes rotate {
184
- 0% {
185
- transform: rotate(-90deg);
186
- }
187
- 100% {
188
- transform: rotate(270deg);
189
- }
190
- }
191
- @keyframes scale {
192
- 0% {
193
- transform: scale(0.5);
194
- opacity: 0.4;
195
- }
196
- 100% {
197
- transform: scale(1);
198
- opacity: 1;
199
- }
200
- }</style>
123
+ <style>
124
+ .loader {
125
+ display: inline-flex;
126
+ align-items: center;
127
+ .message {
128
+ margin-left: 10px;
129
+ }
130
+ }
131
+
132
+ .loader.block {
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ flex-direction: column;
137
+ .message {
138
+ margin-top: 10px;
139
+ }
140
+ }
141
+
142
+ .loader.full {
143
+ width: 100%;
144
+ height: 100%;
145
+ flex: 1;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ flex-direction: column;
150
+ .message {
151
+ margin-top: 10px;
152
+ }
153
+ }
154
+
155
+ .loader-wrap {
156
+ display: inline-flex;
157
+ width: var(--local-size);
158
+ height: var(--local-size);
159
+ border-radius: var(--local-size);
160
+ position: relative;
161
+ }
162
+
163
+ .success-icon,
164
+ .error-icon {
165
+ animation: scale 0.2s ease-in-out;
166
+ }
167
+
168
+ svg {
169
+ width: inherit;
170
+ height: inherit;
171
+ display: inherit;
172
+ box-sizing: inherit;
173
+ position: absolute;
174
+ top: 0;
175
+ left: 0;
176
+ }
177
+
178
+ circle.progress {
179
+ transform: rotate(-90deg);
180
+ transform-origin: center;
181
+ animation: 0.8s linear 0s infinite normal none running rotate;
182
+ }
183
+
184
+ @keyframes rotate {
185
+ 0% {
186
+ transform: rotate(-90deg);
187
+ }
188
+ 100% {
189
+ transform: rotate(270deg);
190
+ }
191
+ }
192
+
193
+ @keyframes scale {
194
+ 0% {
195
+ transform: scale(0.5);
196
+ opacity: 0.4;
197
+ }
198
+ 100% {
199
+ transform: scale(1);
200
+ opacity: 1;
201
+ }
202
+ }
203
+ </style>
package/dist/components/Radio/Radio.svelte CHANGED
@@ -48,72 +48,74 @@
48
48
  {@render children?.()}
49
49
  </label>
50
50
 
51
- <style>label {
52
- position: relative;
53
- padding-left: 30px;
54
- cursor: pointer;
55
- user-select: none;
56
- height: 20px;
57
- display: flex;
58
- align-items: center;
59
- }
60
-
61
- label.disabled {
62
- cursor: not-allowed;
63
- opacity: 0.5;
64
- }
65
- label.disabled .checkmark {
66
- box-shadow: none !important;
67
- }
68
-
69
- input {
70
- position: absolute;
71
- opacity: 0;
72
- cursor: pointer;
73
- height: 0;
74
- width: 0;
75
- }
76
-
77
- .checkmark {
78
- position: absolute;
79
- top: 0;
80
- left: 0;
81
- height: 20px;
82
- width: 20px;
83
- background-color: var(--input);
84
- border-radius: 50%;
85
- transition: 0.4s;
86
- }
87
-
88
- .checkmark:after {
89
- content: "";
90
- position: absolute;
91
- display: none;
92
- top: 50%;
93
- left: 50%;
94
- transform: translate(-50%, -50%);
95
- width: 8px;
96
- height: 8px;
97
- border-radius: 50%;
98
- background: var(--accent-text);
99
- }
100
-
101
- label:hover input ~ .checkmark {
102
- box-shadow: 0 0 0 3px var(--accent-light);
103
- }
104
-
105
- label:active input ~ .checkmark {
106
- box-shadow: 0 0 0 4px var(--accent-light);
107
- }
108
-
109
- label input:focus-visible ~ .checkmark {
110
- box-shadow: 0 0 0 3px var(--accent-light);
111
- }
112
-
113
- label input:checked ~ .checkmark {
114
- background-color: var(--accent);
115
- }
116
-
117
- input:checked ~ .checkmark:after {
118
- display: block;
119
- }</style>
51
+ <style>
52
+ label {
53
+ position: relative;
54
+ padding-left: 30px;
55
+ cursor: pointer;
56
+ user-select: none;
57
+ height: 20px;
58
+ display: flex;
59
+ align-items: center;
60
+ }
61
+
62
+ label.disabled {
63
+ cursor: not-allowed;
64
+ opacity: 0.5;
65
+ .checkmark {
66
+ box-shadow: none !important;
67
+ }
68
+ }
69
+
70
+ input {
71
+ position: absolute;
72
+ opacity: 0;
73
+ cursor: pointer;
74
+ height: 0;
75
+ width: 0;
76
+ }
77
+
78
+ .checkmark {
79
+ position: absolute;
80
+ top: 0;
81
+ left: 0;
82
+ height: 20px;
83
+ width: 20px;
84
+ background-color: var(--input);
85
+ border-radius: 50%;
86
+ transition: 0.4s;
87
+ }
88
+
89
+ .checkmark:after {
90
+ content: '';
91
+ position: absolute;
92
+ display: none;
93
+ top: 50%;
94
+ left: 50%;
95
+ transform: translate(-50%, -50%);
96
+ width: 8px;
97
+ height: 8px;
98
+ border-radius: 50%;
99
+ background: var(--accent-text);
100
+ }
101
+
102
+ label:hover input ~ .checkmark {
103
+ box-shadow: 0 0 0 3px var(--accent-light);
104
+ }
105
+
106
+ label:active input ~ .checkmark {
107
+ box-shadow: 0 0 0 4px var(--accent-light);
108
+ }
109
+
110
+ label input:focus-visible ~ .checkmark {
111
+ box-shadow: 0 0 0 3px var(--accent-light);
112
+ }
113
+
114
+ label input:checked ~ .checkmark {
115
+ background-color: var(--accent);
116
+ }
117
+
118
+ input:checked ~ .checkmark:after {
119
+ display: block;
120
+ }
121
+ </style>
package/dist/components/SplitControl/SplitControl.svelte CHANGED
@@ -67,48 +67,53 @@
67
67
  </div>
68
68
  {/if}
69
69
 
70
- <style>.split-control {
71
- display: flex;
72
- flex-direction: row;
73
- border-bottom: 1px solid var(--accent-lightest);
74
- line-height: 1.3;
75
- }
76
- .split-control:last-child, .split-control.has-nested {
77
- border-bottom: none;
78
- }
79
- .split-control.column {
80
- flex-direction: column;
81
- }
82
- .split-control.column .left {
83
- padding-bottom: 10px;
84
- }
85
- .split-control.column .right {
86
- padding-top: 0;
87
- }
70
+ <style>
71
+ .split-control {
72
+ display: flex;
73
+ flex-direction: row;
74
+ border-bottom: 1px solid var(--accent-lightest);
75
+ line-height: 1.3;
76
+ &:last-child,
77
+ &.has-nested {
78
+ border-bottom: none;
79
+ }
80
+ &.column {
81
+ flex-direction: column;
82
+ .left {
83
+ padding-bottom: 10px;
84
+ }
85
+ .right {
86
+ padding-top: 0;
87
+ }
88
+ }
89
+ }
88
90
 
89
- .nested {
90
- margin-left: 40px;
91
- padding-top: 0;
92
- padding-left: 15px;
93
- border-left: 2px solid var(--accent-light);
94
- margin-bottom: 15px;
95
- }
91
+ .nested {
92
+ margin-left: 40px;
93
+ padding-top: 0;
94
+ padding-left: 15px;
95
+ border-left: 2px solid var(--accent-light);
96
+ margin-bottom: 15px;
97
+ }
96
98
 
97
- .left {
98
- padding: 15px;
99
- }
99
+ .left {
100
+ padding: 15px;
101
+ }
100
102
 
101
- .right {
102
- padding: 15px;
103
- min-width: 0;
104
- }
103
+ .right {
104
+ padding: 15px;
105
+ min-width: 0;
106
+ }
105
107
 
106
- .no-hpadding .left,
107
- .no-hpadding .right {
108
- padding-left: 0;
109
- padding-right: 0;
110
- }
108
+ .no-hpadding {
109
+ .left,
110
+ .right {
111
+ padding-left: 0;
112
+ padding-right: 0;
113
+ }
114
+ }
111
115
 
112
- .caption-wrap {
113
- margin-top: 4px;
114
- }</style>
116
+ .caption-wrap {
117
+ margin-top: 4px;
118
+ }
119
+ </style>