@dodlhuat/basix 1.2.0 → 1.2.2

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 (93) hide show
  1. package/README.md +266 -6
  2. package/css/accordion.scss +86 -87
  3. package/css/alert.scss +137 -137
  4. package/css/button.scss +48 -0
  5. package/css/calendar.scss +957 -0
  6. package/css/card.scss +65 -65
  7. package/css/chart.scss +270 -157
  8. package/css/chat-bubbles.scss +134 -68
  9. package/css/chips.scss +109 -19
  10. package/css/colors.scss +32 -32
  11. package/css/datepicker.scss +336 -336
  12. package/css/defaults.scss +90 -90
  13. package/css/docs.scss +529 -0
  14. package/css/editor.scss +36 -0
  15. package/css/file-uploader.scss +1 -1
  16. package/css/flyout-menu.scss +361 -361
  17. package/css/form.scss +0 -15
  18. package/css/gallery.scss +65 -6
  19. package/css/grid.scss +41 -40
  20. package/css/group-picker.scss +345 -0
  21. package/css/guitar-chords.css +250 -250
  22. package/css/icons.scss +330 -330
  23. package/css/parameters.scss +3 -3
  24. package/css/placeholder.scss +33 -33
  25. package/css/popover.scss +206 -0
  26. package/css/progress.scss +76 -32
  27. package/css/properties.scss +51 -36
  28. package/css/push-menu.scss +302 -174
  29. package/css/reset.scss +39 -39
  30. package/css/scrollbar.scss +62 -5
  31. package/css/sidebar-nav.scss +92 -0
  32. package/css/spinner.scss +65 -65
  33. package/css/stepper.scss +48 -12
  34. package/css/style.css +3155 -254
  35. package/css/style.css.map +1 -1
  36. package/css/style.min.css +1 -1
  37. package/css/style.scss +51 -45
  38. package/css/table.scss +199 -199
  39. package/css/tabs.scss +154 -123
  40. package/css/timeline.scss +83 -38
  41. package/css/timepicker.scss +100 -5
  42. package/css/toast.scss +81 -81
  43. package/css/virtual-dropdown.scss +35 -29
  44. package/js/calendar.js +532 -0
  45. package/js/calendar.ts +706 -0
  46. package/js/chart.js +573 -257
  47. package/js/chart.ts +692 -0
  48. package/js/code-viewer.js +10 -10
  49. package/js/code-viewer.ts +188 -188
  50. package/js/datepicker.ts +627 -627
  51. package/js/docs-nav.js +204 -0
  52. package/js/dropdown.ts +179 -179
  53. package/js/editor.js +50 -6
  54. package/js/editor.ts +483 -444
  55. package/js/file-uploader.js +1 -0
  56. package/js/file-uploader.ts +1 -0
  57. package/js/flyout-menu.js +14 -14
  58. package/js/flyout-menu.ts +249 -249
  59. package/js/form-builder.js +106 -106
  60. package/js/gallery.js +14 -8
  61. package/js/gallery.ts +245 -236
  62. package/js/group-picker.js +342 -0
  63. package/js/group-picker.ts +447 -0
  64. package/js/guitar-chords.js +268 -268
  65. package/js/lazy-loader.js +121 -121
  66. package/js/modal.ts +166 -166
  67. package/js/popover.js +163 -0
  68. package/js/popover.ts +219 -0
  69. package/js/position.js +108 -0
  70. package/js/position.ts +111 -0
  71. package/js/push-menu.js +113 -0
  72. package/js/push-menu.ts +284 -145
  73. package/js/request.js +50 -50
  74. package/js/scroll.ts +47 -47
  75. package/js/scrollbar.js +13 -0
  76. package/js/scrollbar.ts +324 -307
  77. package/js/select.ts +216 -216
  78. package/js/sidebar-nav.js +41 -0
  79. package/js/sidebar-nav.ts +66 -0
  80. package/js/table.ts +452 -452
  81. package/js/tabs.ts +279 -279
  82. package/js/theme.js +17 -6
  83. package/js/theme.ts +234 -224
  84. package/js/toast.ts +137 -137
  85. package/js/tooltip.js +6 -60
  86. package/js/tooltip.ts +184 -251
  87. package/js/tsconfig.json +18 -18
  88. package/js/utils.ts +83 -83
  89. package/js/virtual-dropdown.js +25 -25
  90. package/js/virtual-dropdown.ts +365 -365
  91. package/package.json +37 -39
  92. package/js/index.js +0 -816
  93. package/js/index.ts +0 -987
package/css/datepicker.scss CHANGED
@@ -1,337 +1,337 @@
1
- @use "parameters" as *;
2
- @use "properties";
3
-
4
- .container {
5
- max-width: 800px;
6
- margin: 0 auto;
7
- }
8
-
9
- .datepicker {
10
- background: var(--background);
11
- border: 1px solid var(--divider);
12
- border-radius: $border-radius;
13
- width: 320px;
14
- padding: 1rem;
15
- user-select: none;
16
- box-shadow: $shadow;
17
- display: none;
18
- position: absolute;
19
- z-index: 1000;
20
- box-sizing: border-box;
21
- }
22
-
23
- .datepicker.visible {
24
- display: block;
25
- }
26
-
27
- .datepicker-header {
28
- display: flex;
29
- justify-content: space-between;
30
- align-items: center;
31
- margin-bottom: 1rem;
32
- }
33
-
34
- .datepicker-nav {
35
- background: none;
36
- border: none;
37
- cursor: pointer;
38
- padding: 0.5rem;
39
- border-radius: $border-radius;
40
- color: var(--primary-text);
41
- transition: background-color 0.2s;
42
- }
43
-
44
- .datepicker-nav:hover {
45
- background-color: var(--accent-color-lighten);
46
- color: var(--accent-color-text);
47
- }
48
-
49
- .datepicker-title {
50
- display: flex;
51
- gap: calc($spacing / 2);
52
- font-weight: 600;
53
- }
54
-
55
- .datepicker-select {
56
- border: none;
57
- background: none;
58
- font-family: inherit;
59
- font-weight: 600;
60
- font-size: 1rem;
61
- cursor: pointer;
62
- padding: calc($spacing / 4);
63
- border-radius: calc($spacing / 4);
64
- }
65
-
66
- .datepicker-select:hover {
67
- background-color: var(--accent-color-lighten);
68
- }
69
-
70
- .datepicker-grid {
71
- display: grid;
72
- grid-template-columns: repeat(7, 1fr);
73
- gap: calc($spacing / 4);
74
- text-align: center;
75
- }
76
-
77
- .datepicker-day-header {
78
- font-size: 0.875rem;
79
- color: var(--text-muted);
80
- font-weight: 500;
81
- padding: calc($spacing / 2) 0;
82
- }
83
-
84
- .datepicker-day {
85
- padding: calc($spacing / 2) 0;
86
- font-size: $spacing;
87
- cursor: pointer;
88
- border-radius: $border-radius;
89
- transition: all 0.2s;
90
- }
91
-
92
- .datepicker-day:hover:not(.disabled) {
93
- background-color: var(--accent-color-lighten);
94
- }
95
-
96
- .datepicker-day.other-month {
97
- color: var(--disabled);
98
- }
99
-
100
- .datepicker-day.selected {
101
- background-color: var(--accent-color);
102
- color: var(--accent-color-text);
103
- }
104
-
105
- .datepicker-day.in-range {
106
- background-color: var(--accent-color-lighten);
107
- color: var(--accent-color-text);
108
- border-radius: 0;
109
- }
110
-
111
- .datepicker-day.range-start {
112
- background-color: var(--accent-color);
113
- color: var(--accent-color-text);
114
- border-top-left-radius: $border-radius;
115
- border-bottom-left-radius: $border-radius;
116
- }
117
-
118
- .datepicker-day.range-end {
119
- background-color: var(--accent-color);
120
- color: var(--accent-color-text);
121
- border-top-right-radius: $border-radius;
122
- border-bottom-right-radius: $border-radius;
123
- }
124
-
125
- .datepicker-day.today {
126
- font-weight: bold;
127
- color: var(--accent-color);
128
- }
129
-
130
- .datepicker-day.selected.today {
131
- color: var(--accent-color-text);
132
- }
133
-
134
- .datepicker-grid-months,
135
- .datepicker-grid-years {
136
- display: grid;
137
- grid-template-columns: repeat(3, 1fr);
138
- gap: 0.5rem;
139
- text-align: center;
140
- padding: 0.5rem 0;
141
- }
142
-
143
- .datepicker-month,
144
- .datepicker-year {
145
- padding: 0.75rem 0.25rem;
146
- font-size: 0.9rem;
147
- cursor: pointer;
148
- border-radius: $border-radius;
149
- transition: all 0.2s;
150
- }
151
-
152
- .datepicker-month:hover,
153
- .datepicker-year:hover {
154
- background-color: var(--accent-color-lighten);
155
- }
156
-
157
- .datepicker-month.selected,
158
- .datepicker-year.selected {
159
- background-color: var(--accent-color);
160
- color: var(--accent-color-text);
161
- }
162
-
163
- .datepicker-month.current,
164
- .datepicker-year.current {
165
- font-weight: bold;
166
- color: var(--accent-color);
167
- }
168
-
169
- .datepicker-month.selected.current,
170
- .datepicker-year.selected.current {
171
- color: var(--accent-color-text);
172
- }
173
-
174
- .datepicker-title-btn {
175
- background: none;
176
- border: none;
177
- font-family: inherit;
178
- font-weight: 600;
179
- font-size: $spacing;
180
- cursor: pointer;
181
- padding: calc($spacing / 4) calc($spacing / 2);
182
- border-radius: $border-radius;
183
- color: var(--primary-text);
184
- transition: background-color 0.2s;
185
- }
186
-
187
- .datepicker-title-btn:hover {
188
- background-color: var(--accent-color-lighten);
189
- }
190
-
191
- /* Time Picker */
192
- .datepicker-time {
193
- display: flex;
194
- align-items: center;
195
- justify-content: space-between;
196
- border-top: 1px solid var(--divider);
197
- margin-top: $spacing;
198
- padding-top: $spacing;
199
- }
200
-
201
- .datepicker-time-label {
202
- font-size: 0.875rem;
203
- font-weight: 600;
204
- color: var(--primary-text);
205
- }
206
-
207
- .datepicker-time-controls {
208
- display: flex;
209
- align-items: center;
210
- gap: calc($spacing / 4);
211
- }
212
-
213
- .datepicker-time-separator {
214
- font-size: 1.1rem;
215
- font-weight: 600;
216
- color: var(--primary-text);
217
- padding: 0 calc($spacing / 8);
218
- }
219
-
220
- .datepicker-time-spinner {
221
- display: flex;
222
- flex-direction: column;
223
- align-items: center;
224
- gap: calc($spacing / 8);
225
- }
226
-
227
- .datepicker-time-btn {
228
- background: none;
229
- border: 1px solid var(--divider);
230
- border-radius: $border-radius;
231
- cursor: pointer;
232
- padding: calc($spacing / 8) calc($spacing / 2);
233
- font-size: 0.6rem;
234
- line-height: 1;
235
- color: var(--primary-text);
236
- transition: background-color 0.2s;
237
-
238
- &:hover {
239
- background-color: var(--accent-color-lighten);
240
- color: var(--accent-color-text);
241
- }
242
- }
243
-
244
- .datepicker-time-display {
245
- width: 2.5rem;
246
- text-align: center;
247
- font-size: 1rem;
248
- font-weight: 600;
249
- font-family: inherit;
250
- border: 1px solid var(--divider);
251
- border-radius: $border-radius;
252
- padding: calc($spacing / 4) 0;
253
- background: var(--background);
254
- color: var(--primary-text);
255
- -moz-appearance: textfield;
256
-
257
- &::-webkit-inner-spin-button,
258
- &::-webkit-outer-spin-button {
259
- -webkit-appearance: none;
260
- margin: 0;
261
- }
262
-
263
- &:focus {
264
- outline: 2px solid var(--accent-color);
265
- outline-offset: -1px;
266
- }
267
- }
268
-
269
- /* Set Button */
270
- .datepicker-set-btn {
271
- width: 100%;
272
- padding: calc($spacing / 2) $spacing;
273
- margin-top: $spacing;
274
- background-color: var(--accent-color);
275
- color: var(--accent-color-text);
276
- border: none;
277
- border-radius: $border-radius;
278
- font-family: inherit;
279
- font-size: 0.875rem;
280
- font-weight: 600;
281
- cursor: pointer;
282
- transition: opacity 0.2s;
283
-
284
- &:hover {
285
- opacity: 0.9;
286
- }
287
- }
288
-
289
- /* Mobile Responsiveness */
290
- @media (max-width: 640px) {
291
- .datepicker-backdrop {
292
- position: fixed;
293
- top: 0;
294
- left: 0;
295
- width: 100%;
296
- height: 100%;
297
- background: rgba(0, 0, 0, 0.5);
298
- z-index: 999;
299
- display: none;
300
- }
301
-
302
- .datepicker-backdrop.visible {
303
- display: block;
304
- }
305
-
306
- .datepicker.mobile {
307
- position: fixed;
308
- top: auto;
309
- bottom: 0;
310
- left: 0;
311
- width: 100%;
312
- max-width: 100%;
313
- border-radius: $border-radius $border-radius 0 0;
314
- box-shadow: $shadow;
315
- animation: slideUp 0.3s ease-out;
316
- transform: none !important;
317
- }
318
-
319
- @keyframes slideUp {
320
- from {
321
- transform: translateY(100%);
322
- }
323
-
324
- to {
325
- transform: translateY(0);
326
- }
327
- }
328
-
329
- .datepicker {
330
- width: 100%;
331
- max-width: 320px;
332
- }
333
-
334
- .datepicker-day {
335
- padding: calc($spacing * 0.75) 0;
336
- }
1
+ @use "parameters" as *;
2
+ @use "properties";
3
+
4
+ .container {
5
+ max-width: 800px;
6
+ margin: 0 auto;
7
+ }
8
+
9
+ .datepicker {
10
+ background: var(--background);
11
+ border: 1px solid var(--divider);
12
+ border-radius: $border-radius;
13
+ width: 320px;
14
+ padding: 1rem;
15
+ user-select: none;
16
+ box-shadow: $shadow;
17
+ display: none;
18
+ position: absolute;
19
+ z-index: 1000;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ .datepicker.visible {
24
+ display: block;
25
+ }
26
+
27
+ .datepicker-header {
28
+ display: flex;
29
+ justify-content: space-between;
30
+ align-items: center;
31
+ margin-bottom: 1rem;
32
+ }
33
+
34
+ .datepicker-nav {
35
+ background: none;
36
+ border: none;
37
+ cursor: pointer;
38
+ padding: 0.5rem;
39
+ border-radius: $border-radius;
40
+ color: var(--primary-text);
41
+ transition: background-color 0.2s;
42
+ }
43
+
44
+ .datepicker-nav:hover {
45
+ background-color: var(--accent-color-lighten);
46
+ color: var(--accent-color-text);
47
+ }
48
+
49
+ .datepicker-title {
50
+ display: flex;
51
+ gap: calc($spacing / 2);
52
+ font-weight: 600;
53
+ }
54
+
55
+ .datepicker-select {
56
+ border: none;
57
+ background: none;
58
+ font-family: inherit;
59
+ font-weight: 600;
60
+ font-size: 1rem;
61
+ cursor: pointer;
62
+ padding: calc($spacing / 4);
63
+ border-radius: calc($spacing / 4);
64
+ }
65
+
66
+ .datepicker-select:hover {
67
+ background-color: var(--accent-color-lighten);
68
+ }
69
+
70
+ .datepicker-grid {
71
+ display: grid;
72
+ grid-template-columns: repeat(7, 1fr);
73
+ gap: calc($spacing / 4);
74
+ text-align: center;
75
+ }
76
+
77
+ .datepicker-day-header {
78
+ font-size: 0.875rem;
79
+ color: var(--text-muted);
80
+ font-weight: 500;
81
+ padding: calc($spacing / 2) 0;
82
+ }
83
+
84
+ .datepicker-day {
85
+ padding: calc($spacing / 2) 0;
86
+ font-size: $spacing;
87
+ cursor: pointer;
88
+ border-radius: $border-radius;
89
+ transition: all 0.2s;
90
+ }
91
+
92
+ .datepicker-day:hover:not(.disabled) {
93
+ background-color: var(--accent-color-lighten);
94
+ }
95
+
96
+ .datepicker-day.other-month {
97
+ color: var(--disabled);
98
+ }
99
+
100
+ .datepicker-day.selected {
101
+ background-color: var(--accent-color);
102
+ color: var(--accent-color-text);
103
+ }
104
+
105
+ .datepicker-day.in-range {
106
+ background-color: var(--accent-color-lighten);
107
+ color: var(--accent-color-text);
108
+ border-radius: 0;
109
+ }
110
+
111
+ .datepicker-day.range-start {
112
+ background-color: var(--accent-color);
113
+ color: var(--accent-color-text);
114
+ border-top-left-radius: $border-radius;
115
+ border-bottom-left-radius: $border-radius;
116
+ }
117
+
118
+ .datepicker-day.range-end {
119
+ background-color: var(--accent-color);
120
+ color: var(--accent-color-text);
121
+ border-top-right-radius: $border-radius;
122
+ border-bottom-right-radius: $border-radius;
123
+ }
124
+
125
+ .datepicker-day.today {
126
+ font-weight: bold;
127
+ color: var(--accent-color);
128
+ }
129
+
130
+ .datepicker-day.selected.today {
131
+ color: var(--accent-color-text);
132
+ }
133
+
134
+ .datepicker-grid-months,
135
+ .datepicker-grid-years {
136
+ display: grid;
137
+ grid-template-columns: repeat(3, 1fr);
138
+ gap: 0.5rem;
139
+ text-align: center;
140
+ padding: 0.5rem 0;
141
+ }
142
+
143
+ .datepicker-month,
144
+ .datepicker-year {
145
+ padding: 0.75rem 0.25rem;
146
+ font-size: 0.9rem;
147
+ cursor: pointer;
148
+ border-radius: $border-radius;
149
+ transition: all 0.2s;
150
+ }
151
+
152
+ .datepicker-month:hover,
153
+ .datepicker-year:hover {
154
+ background-color: var(--accent-color-lighten);
155
+ }
156
+
157
+ .datepicker-month.selected,
158
+ .datepicker-year.selected {
159
+ background-color: var(--accent-color);
160
+ color: var(--accent-color-text);
161
+ }
162
+
163
+ .datepicker-month.current,
164
+ .datepicker-year.current {
165
+ font-weight: bold;
166
+ color: var(--accent-color);
167
+ }
168
+
169
+ .datepicker-month.selected.current,
170
+ .datepicker-year.selected.current {
171
+ color: var(--accent-color-text);
172
+ }
173
+
174
+ .datepicker-title-btn {
175
+ background: none;
176
+ border: none;
177
+ font-family: inherit;
178
+ font-weight: 600;
179
+ font-size: $spacing;
180
+ cursor: pointer;
181
+ padding: calc($spacing / 4) calc($spacing / 2);
182
+ border-radius: $border-radius;
183
+ color: var(--primary-text);
184
+ transition: background-color 0.2s;
185
+ }
186
+
187
+ .datepicker-title-btn:hover {
188
+ background-color: var(--accent-color-lighten);
189
+ }
190
+
191
+ /* Time Picker */
192
+ .datepicker-time {
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: space-between;
196
+ border-top: 1px solid var(--divider);
197
+ margin-top: $spacing;
198
+ padding-top: $spacing;
199
+ }
200
+
201
+ .datepicker-time-label {
202
+ font-size: 0.875rem;
203
+ font-weight: 600;
204
+ color: var(--primary-text);
205
+ }
206
+
207
+ .datepicker-time-controls {
208
+ display: flex;
209
+ align-items: center;
210
+ gap: calc($spacing / 4);
211
+ }
212
+
213
+ .datepicker-time-separator {
214
+ font-size: 1.1rem;
215
+ font-weight: 600;
216
+ color: var(--primary-text);
217
+ padding: 0 calc($spacing / 8);
218
+ }
219
+
220
+ .datepicker-time-spinner {
221
+ display: flex;
222
+ flex-direction: column;
223
+ align-items: center;
224
+ gap: calc($spacing / 8);
225
+ }
226
+
227
+ .datepicker-time-btn {
228
+ background: none;
229
+ border: 1px solid var(--divider);
230
+ border-radius: $border-radius;
231
+ cursor: pointer;
232
+ padding: calc($spacing / 8) calc($spacing / 2);
233
+ font-size: 0.6rem;
234
+ line-height: 1;
235
+ color: var(--primary-text);
236
+ transition: background-color 0.2s;
237
+
238
+ &:hover {
239
+ background-color: var(--accent-color-lighten);
240
+ color: var(--accent-color-text);
241
+ }
242
+ }
243
+
244
+ .datepicker-time-display {
245
+ width: 2.5rem;
246
+ text-align: center;
247
+ font-size: 1rem;
248
+ font-weight: 600;
249
+ font-family: inherit;
250
+ border: 1px solid var(--divider);
251
+ border-radius: $border-radius;
252
+ padding: calc($spacing / 4) 0;
253
+ background: var(--background);
254
+ color: var(--primary-text);
255
+ -moz-appearance: textfield;
256
+
257
+ &::-webkit-inner-spin-button,
258
+ &::-webkit-outer-spin-button {
259
+ -webkit-appearance: none;
260
+ margin: 0;
261
+ }
262
+
263
+ &:focus {
264
+ outline: 2px solid var(--accent-color);
265
+ outline-offset: -1px;
266
+ }
267
+ }
268
+
269
+ /* Set Button */
270
+ .datepicker-set-btn {
271
+ width: 100%;
272
+ padding: calc($spacing / 2) $spacing;
273
+ margin-top: $spacing;
274
+ background-color: var(--accent-color);
275
+ color: var(--accent-color-text);
276
+ border: none;
277
+ border-radius: $border-radius;
278
+ font-family: inherit;
279
+ font-size: 0.875rem;
280
+ font-weight: 600;
281
+ cursor: pointer;
282
+ transition: opacity 0.2s;
283
+
284
+ &:hover {
285
+ opacity: 0.9;
286
+ }
287
+ }
288
+
289
+ /* Mobile Responsiveness */
290
+ @media (max-width: 640px) {
291
+ .datepicker-backdrop {
292
+ position: fixed;
293
+ top: 0;
294
+ left: 0;
295
+ width: 100%;
296
+ height: 100%;
297
+ background: rgba(0, 0, 0, 0.5);
298
+ z-index: 999;
299
+ display: none;
300
+ }
301
+
302
+ .datepicker-backdrop.visible {
303
+ display: block;
304
+ }
305
+
306
+ .datepicker.mobile {
307
+ position: fixed;
308
+ top: auto;
309
+ bottom: 0;
310
+ left: 0;
311
+ width: 100%;
312
+ max-width: 100%;
313
+ border-radius: $border-radius $border-radius 0 0;
314
+ box-shadow: $shadow;
315
+ animation: slideUp 0.3s ease-out;
316
+ transform: none !important;
317
+ }
318
+
319
+ @keyframes slideUp {
320
+ from {
321
+ transform: translateY(100%);
322
+ }
323
+
324
+ to {
325
+ transform: translateY(0);
326
+ }
327
+ }
328
+
329
+ .datepicker {
330
+ width: 100%;
331
+ max-width: 320px;
332
+ }
333
+
334
+ .datepicker-day {
335
+ padding: calc($spacing * 0.75) 0;
336
+ }
337
337
  }