@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/marketing/Docs/Toc.svelte CHANGED
@@ -67,94 +67,106 @@
67
67
  </div>
68
68
  </div>
69
69
 
70
- <style>.wrap {
71
- padding: 25px;
72
- max-height: calc(100vh - var(--header-height) - 50px);
73
- overflow-y: auto;
74
- }
75
-
76
- .toc-wrap {
77
- align-self: flex-start;
78
- overflow-y: auto;
79
- }
80
- .toc-wrap :global(> .toc-list) {
81
- overflow: hidden;
82
- position: relative;
83
- overflow: hidden;
84
- position: relative;
85
- margin: 0;
86
- padding-left: 15px;
87
- }
88
- .toc-wrap :global(> .toc-list) :global(li) {
89
- list-style: none;
90
- }
91
- .toc-wrap :global(.js-toc) {
92
- overflow-y: hidden;
93
- }
94
- .toc-wrap :global(.toc-list) {
95
- margin: 0;
96
- padding-left: 15px;
97
- }
98
- .toc-wrap :global(.toc-list) :global(li) {
99
- list-style: none;
100
- }
101
- .toc-wrap :global(a.toc-link) {
102
- color: currentColor;
103
- height: 100%;
104
- display: inline-block;
105
- padding: 3px 0;
106
- }
107
- .toc-wrap :global(a.toc-link):hover {
108
- text-decoration: underline;
109
- }
110
- .toc-wrap :global(.is-collapsible) {
111
- max-height: 1000px;
112
- overflow: hidden;
113
- transition: all 300ms ease-in-out;
114
- }
115
- .toc-wrap :global(.is-collapsed) {
116
- max-height: 0;
117
- }
118
- .toc-wrap :global(.is-position-fixed) {
119
- position: fixed !important;
120
- top: 0;
121
- }
122
- .toc-wrap :global(.is-active-link) {
123
- font-weight: 700;
124
- }
125
- .toc-wrap :global(.toc-link::before) {
126
- background-color: #eee;
127
- content: " ";
128
- display: inline-block;
129
- height: inherit;
130
- left: 0;
131
- margin-top: -1px;
132
- position: absolute;
133
- width: 2px;
134
- }
135
- .toc-wrap :global(.is-active-link::before) {
136
- background-color: var(--accent);
137
- }
138
-
139
- .mobile {
140
- display: none;
141
- }
142
-
143
- @media (max-width: 992px) {
144
- .wrap {
145
- padding: 10px 15px;
146
- }
147
- .mobile {
148
- display: block;
149
- }
150
- .toc-wrap {
151
- display: none;
152
- margin-top: 15px;
153
- }
154
- :global(.is-active-link) {
155
- font-weight: normal !important;
156
- }
157
- :global(.is-active-link::before) {
158
- background-color: #eee !important;
159
- }
160
- }</style>
70
+ <style>
71
+ .wrap {
72
+ padding: 25px;
73
+ max-height: calc(100vh - var(--header-height) - 50px);
74
+ overflow-y: auto;
75
+ }
76
+
77
+ .toc-wrap {
78
+ align-self: flex-start;
79
+ overflow-y: auto;
80
+
81
+ :global(> .toc-list) {
82
+ overflow: hidden;
83
+ position: relative;
84
+ overflow: hidden;
85
+ position: relative;
86
+ margin: 0;
87
+ padding-left: 15px;
88
+ :global(li) {
89
+ list-style: none;
90
+ }
91
+ }
92
+
93
+ :global(.js-toc) {
94
+ overflow-y: hidden;
95
+ }
96
+
97
+ :global(.toc-list) {
98
+ margin: 0;
99
+ padding-left: 15px;
100
+ :global(li) {
101
+ list-style: none;
102
+ }
103
+ }
104
+
105
+ :global(a.toc-link) {
106
+ color: currentColor;
107
+ height: 100%;
108
+ display: inline-block;
109
+ padding: 3px 0;
110
+ &:hover {
111
+ text-decoration: underline;
112
+ }
113
+ }
114
+
115
+ :global(.is-collapsible) {
116
+ max-height: 1000px;
117
+ overflow: hidden;
118
+ transition: all 300ms ease-in-out;
119
+ }
120
+
121
+ :global(.is-collapsed) {
122
+ max-height: 0;
123
+ }
124
+
125
+ :global(.is-position-fixed) {
126
+ position: fixed !important;
127
+ top: 0;
128
+ }
129
+
130
+ :global(.is-active-link) {
131
+ font-weight: 700;
132
+ }
133
+
134
+ :global(.toc-link::before) {
135
+ background-color: #eee;
136
+ content: ' ';
137
+ display: inline-block;
138
+ height: inherit;
139
+ left: 0;
140
+ margin-top: -1px;
141
+ position: absolute;
142
+ width: 2px;
143
+ }
144
+
145
+ :global(.is-active-link::before) {
146
+ background-color: var(--accent);
147
+ }
148
+ }
149
+
150
+ .mobile {
151
+ display: none;
152
+ }
153
+
154
+ @media (max-width: 992px) {
155
+ .wrap {
156
+ padding: 10px 15px;
157
+ }
158
+ .mobile {
159
+ display: block;
160
+ }
161
+ .toc-wrap {
162
+ display: none;
163
+ margin-top: 15px;
164
+ }
165
+ :global(.is-active-link) {
166
+ font-weight: normal !important;
167
+ }
168
+ :global(.is-active-link::before) {
169
+ background-color: #eee !important;
170
+ }
171
+ }
172
+ </style>
package/dist/marketing/Document/Document.svelte CHANGED
@@ -51,65 +51,80 @@
51
51
  </div>
52
52
  </section>
53
53
 
54
- <style>* {
55
- line-height: 30px;
56
- }
57
-
58
- .container {
59
- margin: 0 auto 20px auto;
60
- padding: 30px 15px 20px 15px;
61
- }
62
- .container :global(.wrap) {
63
- margin-top: 0 !important;
64
- }
65
- .container content :global(h2) {
66
- font-size: 32px !important;
67
- font-weight: 600;
68
- margin-top: 40px;
69
- position: relative;
70
- }
71
- .container content :global(h3) {
72
- font-size: 24px;
73
- font-weight: 600;
74
- margin-top: 40px;
75
- }
76
- .container content :global(p) {
77
- margin-top: 20px;
78
- }
79
- .container content :global(ul) {
80
- margin-top: 20px;
81
- }
82
- .container content :global(ol) {
83
- margin-top: 20px;
84
- }
85
- .container content :global(hr) {
86
- margin: 40px 0;
87
- border: none;
88
- height: 1px;
89
- background-color: var(--border);
90
- }
91
- .container content :global(a) {
92
- color: var(--link);
93
- text-decoration: underline;
94
- }
95
- .container content :global(a.heading-anchor-link) {
96
- position: absolute;
97
- right: 100%;
98
- margin-right: 7px;
99
- opacity: 0;
100
- top: 50%;
101
- transform: translateY(-50%);
102
- display: inline-flex;
103
- align-items: center;
104
- }
105
- .container content :global(.heading-anchor:hover + .heading-anchor-link) {
106
- opacity: 1;
107
- }
108
- .container content :global(h2 a:not(.heading-anchor-link)),
109
- .container content :global(h3 a:not(.heading-anchor-link)),
110
- .container content :global(h4 a:not(.heading-anchor-link)),
111
- .container content :global(h5 a:not(.heading-anchor-link)),
112
- .container content :global(h6 a:not(.heading-anchor-link)) {
113
- text-decoration: none;
114
- color: inherit;
115
- }</style>
54
+ <style>
55
+ * {
56
+ line-height: 30px;
57
+ }
58
+
59
+ .container {
60
+ margin: 0 auto 20px auto;
61
+ padding: 30px 15px 20px 15px;
62
+
63
+ :global(.wrap) {
64
+ margin-top: 0 !important;
65
+ }
66
+
67
+ content :global(h2) {
68
+ font-size: 32px !important;
69
+ font-weight: 600;
70
+ margin-top: 40px;
71
+ position: relative;
72
+ }
73
+
74
+ content :global(h3) {
75
+ font-size: 24px;
76
+ font-weight: 600;
77
+ margin-top: 40px;
78
+ }
79
+
80
+ content :global(p) {
81
+ margin-top: 20px;
82
+ }
83
+
84
+ content :global(ul) {
85
+ margin-top: 20px;
86
+ }
87
+
88
+ content :global(ol) {
89
+ margin-top: 20px;
90
+ }
91
+
92
+ content :global(hr) {
93
+ margin: 40px 0;
94
+ border: none;
95
+ height: 1px;
96
+ background-color: var(--border);
97
+ }
98
+
99
+ content :global(a) {
100
+ color: var(--link);
101
+ text-decoration: underline;
102
+ }
103
+
104
+ content :global(a.heading-anchor-link) {
105
+ position: absolute;
106
+ right: 100%;
107
+ margin-right: 7px;
108
+ opacity: 0;
109
+ top: 50%;
110
+ transform: translateY(-50%);
111
+ display: inline-flex;
112
+ align-items: center;
113
+ }
114
+
115
+ content {
116
+ :global(.heading-anchor:hover + .heading-anchor-link) {
117
+ opacity: 1;
118
+ }
119
+
120
+ :global(h2 a:not(.heading-anchor-link)),
121
+ :global(h3 a:not(.heading-anchor-link)),
122
+ :global(h4 a:not(.heading-anchor-link)),
123
+ :global(h5 a:not(.heading-anchor-link)),
124
+ :global(h6 a:not(.heading-anchor-link)) {
125
+ text-decoration: none;
126
+ color: inherit;
127
+ }
128
+ }
129
+ }
130
+ </style>
package/dist/{variables.scss → variables.css} RENAMED
@@ -17,7 +17,7 @@
17
17
  --text-light: #777;
18
18
  --text-white: #fff;
19
19
 
20
- /*
20
+ /*
21
21
  * Generally used colors
22
22
  * In most cases, no need to extend these colors
23
23
  */
@@ -78,9 +78,3 @@
78
78
 
79
79
  --input: #333;
80
80
  }
81
-
82
- $breakpoint-xs: 320px;
83
- $breakpoint-sm: 576px;
84
- $breakpoint-md: 768px;
85
- $breakpoint-lg: 992px;
86
- $breakpoint-xl: 1200px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "2.1.18",
3
+ "version": "2.1.19",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "repository": {
@@ -44,35 +44,34 @@
44
44
  "!dist/**/*.spec.*"
45
45
  ],
46
46
  "peerDependencies": {
47
- "@sveltejs/kit": "^2.49.0",
48
- "sass": "^1.68.0",
49
- "svelte": "^5.0.0"
47
+ "@sveltejs/kit": "^2.70.3",
48
+ "svelte": "^5.57.0"
50
49
  },
51
50
  "devDependencies": {
52
51
  "@sveltejs/adapter-static": "^3.0.10",
53
- "@sveltejs/package": "^2.5.7",
54
- "@sveltejs/vite-plugin-svelte": "^6.2.4",
55
- "prettier": "3.8.1",
56
- "prettier-plugin-svelte": "3.4.1",
57
- "publint": "^0.3.17",
58
- "svelte": "^5.49.1",
59
- "svelte-check": "^4.3.6",
52
+ "@sveltejs/package": "^2.5.8",
53
+ "@sveltejs/vite-plugin-svelte": "^7.3.0",
54
+ "prettier": "3.9.6",
55
+ "prettier-plugin-svelte": "4.1.1",
56
+ "publint": "^0.3.24",
57
+ "svelte": "^5.57.0",
58
+ "svelte-check": "^4.7.6",
60
59
  "tslib": "^2.8.1",
61
- "typescript": "^5.9.3",
62
- "vite": "^7.3"
60
+ "typescript": "^6.0.0",
61
+ "vite": "^8.0.0"
63
62
  },
64
63
  "dependencies": {
65
- "@apidevtools/json-schema-ref-parser": "^15.5.1",
66
- "@fontsource/readex-pro": "^5.2.11",
64
+ "@apidevtools/json-schema-ref-parser": "^16.0.2",
65
+ "@fontsource/readex-pro": "^5.3.0",
67
66
  "@fontsource/source-serif-4": "^5.3.0",
68
67
  "@hyvor/icons": "^1.1.1",
69
- "deepmerge-ts": "^7.1.5",
68
+ "deepmerge-ts": "^8.0.2",
70
69
  "emojibase-data": "^17.0.0",
71
- "intl-messageformat": "^11.1.2",
70
+ "intl-messageformat": "^11.2.14",
72
71
  "mdsvex": "^0.12.8",
73
- "shiki": "^3.22.0",
74
- "svelte-awesome-color-picker": "^4.1.1",
75
- "tocbot": "^4.36.4"
72
+ "shiki": "^4.4.3",
73
+ "svelte-awesome-color-picker": "^4.1.3",
74
+ "tocbot": "^4.36.8"
76
75
  },
77
76
  "type": "module",
78
77
  "publishConfig": {