kilya-ui 0.0.2 → 0.0.4

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 (4) hide show
  1. package/dist/kilya-ui.css +1 -465
  2. package/dist/kilya-ui.es.js +44 -50
  3. package/dist/kilya-ui.umd.js +2 -2
  4. package/package.json +9 -5
package/dist/kilya-ui.css CHANGED
@@ -1,465 +1 @@
1
- .kilya-button-white path[fill],
2
- .kilya-button-reset path[fill],
3
- .kilya-button-link path[fill],
4
- .kilya-button-border path[fill],
5
- .kilya-button-default path[fill],
6
- .kilya-button-white rect[fill],
7
- .kilya-button-reset rect[fill],
8
- .kilya-button-link rect[fill],
9
- .kilya-button-border rect[fill],
10
- .kilya-button-default rect[fill],
11
- .kilya-button-white circle[fill],
12
- .kilya-button-reset circle[fill],
13
- .kilya-button-link circle[fill],
14
- .kilya-button-border circle[fill],
15
- .kilya-button-default circle[fill] {
16
- fill: currentColor;
17
- transition: 0.2s fill;
18
- }
19
- .kilya-button-white path[stroke],
20
- .kilya-button-reset path[stroke],
21
- .kilya-button-link path[stroke],
22
- .kilya-button-border path[stroke],
23
- .kilya-button-default path[stroke],
24
- .kilya-button-white rect[stroke],
25
- .kilya-button-reset rect[stroke],
26
- .kilya-button-link rect[stroke],
27
- .kilya-button-border rect[stroke],
28
- .kilya-button-default rect[stroke],
29
- .kilya-button-white circle[stroke],
30
- .kilya-button-reset circle[stroke],
31
- .kilya-button-link circle[stroke],
32
- .kilya-button-border circle[stroke],
33
- .kilya-button-default circle[stroke] {
34
- stroke: currentColor;
35
- transition: 0.2s stroke;
36
- }
37
- .kilya-button-white svg,
38
- .kilya-button-reset svg,
39
- .kilya-button-link svg,
40
- .kilya-button-border svg,
41
- .kilya-button-default svg {
42
- max-width: 100%;
43
- width: 100%;
44
- height: 100%;
45
- object-fit: contain;
46
- }
47
- .kilya-button-white,
48
- .kilya-button-reset,
49
- .kilya-button-link,
50
- .kilya-button-border,
51
- .kilya-button-default {
52
- font-style: normal;
53
- line-height: 1.5;
54
- width: fit-content;
55
- background-color: transparent;
56
- border: 0.0625rem solid transparent;
57
- padding: 0;
58
- cursor: pointer;
59
- -webkit-user-select: none;
60
- user-select: none;
61
- transition: 0.2s color, 0.2s background-color, 0.2s border-color;
62
- }
63
- .kilya-button-white:focus-visible,
64
- .kilya-button-reset:focus-visible,
65
- .kilya-button-link:focus-visible,
66
- .kilya-button-border:focus-visible,
67
- .kilya-button-default:focus-visible {
68
- outline: none;
69
- }
70
- .kilya-button-white:disabled,
71
- .kilya-button-reset:disabled,
72
- .kilya-button-link:disabled,
73
- .kilya-button-border:disabled,
74
- .kilya-button-default:disabled {
75
- background-color: var(--disabled-bg-primary, #ddd);
76
- color: var(--disabled-color-white, #818181);
77
- border-color: var(--disabled-br-default, #ddd);
78
- pointer-events: none;
79
- }
80
- .kilya-button-white,
81
- .kilya-button-border,
82
- .kilya-button-default {
83
- font-family: var(--button-font-family);
84
- font-size: var(--button-font-size);
85
- font-weight: var(--button-font-weight);
86
- text-align: center;
87
- display: flex;
88
- align-items: center;
89
- justify-content: center;
90
- gap: 0.625rem;
91
- }
92
- .kilya-button-white,
93
- .kilya-button-border,
94
- .kilya-button-default {
95
- background-color: var(--background-color);
96
- color: var(--color);
97
- border-color: var(--border-color);
98
- border-radius: var(--border-radius);
99
- padding: 0.5rem 1rem;
100
- }
101
- @media (hover: hover) {
102
- .kilya-button-white:hover,
103
- .kilya-button-border:hover,
104
- .kilya-button-default:hover {
105
- background-color: var(--hover-background-color);
106
- color: var(--hover-color);
107
- border-color: var(--hover-border-color);
108
- }
109
- }
110
- @media (hover: none) {
111
- .kilya-button-white:active,
112
- .kilya-button-border:active,
113
- .kilya-button-default:active {
114
- background-color: var(--hover-background-color);
115
- color: var(--hover-color);
116
- border-color: var(--hover-border-color);
117
- }
118
- }
119
- .kilya-button-white:active,
120
- .kilya-button-border:active,
121
- .kilya-button-default:active {
122
- background-color: var(--pressed-background-color);
123
- color: var(--pressed-color);
124
- border-color: var(--pressed-border-color);
125
- }
126
- .kilya-button-default {
127
- --background-color: var(--bg-primary, #1677ff);
128
- --color: var(--color-white, #fff);
129
- --border-color: var(--bg-primary, #1677ff);
130
- --border-radius: var(--button-br-small);
131
- --hover-background-color: var(--hover-bg-primary, #4096ff);
132
- --hover-color: var(--color-white, #fff);
133
- --hover-border-color: var(--hover-bg-primary, #4096ff);
134
- --pressed-background-color: var(--pressed-bg-primary, #0958d9);
135
- --pressed-color: var(--color-white, #fff);
136
- --pressed-border-color: var(--pressed-bg-primary, #0958d9);
137
- }
138
- .kilya-button-border {
139
- --background-color: transparent;
140
- --color: var(--color-text, #000);
141
- --border-color: var(--bg-primary, #1677ff);
142
- --border-radius: var(--button-br-small);
143
- --hover-background-color: var(--hover-bg-primary, #4096ff);
144
- --hover-color: var(--color-white, #fff);
145
- --hover-border-color: var(--hover-bg-primary, #4096ff);
146
- --pressed-background-color: var(--pressed-bg-primary, #0958d9);
147
- --pressed-color: var(--color-white, #fff);
148
- --pressed-border-color: var(--pressed-bg-primary, #0958d9);
149
- }
150
- .kilya-button-link {
151
- --color: var(--color-link, #1677ff);
152
- --hover-color: var(--hover-color-link, #4096ff);
153
- --pressed-color: var(--pressed-color-link, #0958d9);
154
- color: var(--color);
155
- border: none;
156
- border-radius: 0;
157
- }
158
- @media (hover: hover) {
159
- .kilya-button-link:hover {
160
- color: var(--hover-color);
161
- }
162
- }
163
- @media (hover: none) {
164
- .kilya-button-link:active {
165
- color: var(--hover-color);
166
- }
167
- }
168
- .kilya-button-link:active {
169
- color: var(--pressed-color);
170
- }
171
- .kilya-button-white {
172
- --background-color: var(--bg-white, #fff);
173
- --color: var(--color-text, #000);
174
- --border-color: var(--bg-white, #fff);
175
- --border-radius: var(--button-br-small);
176
- --hover-background-color: var(--hover-bg-primary, #4096ff);
177
- --hover-color: var(--color-white, #fff);
178
- --hover-border-color: var(--hover-bg-primary, #4096ff);
179
- --pressed-background-color: var(--pressed-bg-primary, #0958d9);
180
- --pressed-color: var(--color-white, #fff);
181
- --pressed-border-color: var(--pressed-bg-primary, #0958d9);
182
- }
183
- .kilya-button-white.kilya-active {
184
- color: red;
185
- }
186
- .kilya-button-close path[fill],
187
- .kilya-button-close rect[fill],
188
- .kilya-button-close circle[fill] {
189
- fill: currentColor;
190
- transition: 0.2s fill;
191
- }
192
- .kilya-button-close path[stroke],
193
- .kilya-button-close rect[stroke],
194
- .kilya-button-close circle[stroke] {
195
- stroke: currentColor;
196
- transition: 0.2s stroke;
197
- }
198
- .kilya-button-close svg {
199
- max-width: 100%;
200
- width: 100%;
201
- height: 100%;
202
- object-fit: contain;
203
- }
204
- .kilya-button-close {
205
- font-style: normal;
206
- line-height: 1.5;
207
- width: fit-content;
208
- background-color: transparent;
209
- border: 0.0625rem solid transparent;
210
- padding: 0;
211
- cursor: pointer;
212
- -webkit-user-select: none;
213
- user-select: none;
214
- transition: 0.2s color, 0.2s background-color, 0.2s border-color;
215
- }
216
- .kilya-button-close:focus-visible {
217
- outline: none;
218
- }
219
- .kilya-button-close:disabled {
220
- background-color: var(--disabled-bg-primary, #ddd);
221
- color: var(--disabled-color-white, #818181);
222
- border-color: var(--disabled-br-default, #ddd);
223
- pointer-events: none;
224
- }
225
- .kilya-button-close {
226
- --ava: 1.875rem;
227
- max-width: var(--ava);
228
- min-width: var(--ava);
229
- width: var(--ava);
230
- height: var(--ava);
231
- max-height: var(--ava);
232
- font-size: 0;
233
- position: relative;
234
- border-radius: 0.25rem;
235
- color: var(--button-color-close);
236
- }
237
- @media (hover: hover) {
238
- .kilya-button-close:hover {
239
- color: var(--button-hover-color-close);
240
- }
241
- }
242
- @media (hover: none) {
243
- .kilya-button-close:active {
244
- color: var(--button-hover-color-close);
245
- }
246
- }
247
- .kilya-button-close:before {
248
- content: "";
249
- height: 100dvh;
250
- position: fixed;
251
- left: 50%;
252
- top: 50%;
253
- translate: -50% -50%;
254
- width: 100vw;
255
- z-index: -1;
256
- }
257
- .kilya-button-close path {
258
- stroke: currentColor;
259
- stroke-width: 0.125rem;
260
- }
261
- .kilya-input-button path[fill],
262
- .kilya-input-submit path[fill],
263
- .kilya-input-reset path[fill],
264
- .kilya-input-button rect[fill],
265
- .kilya-input-submit rect[fill],
266
- .kilya-input-reset rect[fill],
267
- .kilya-input-button circle[fill],
268
- .kilya-input-submit circle[fill],
269
- .kilya-input-reset circle[fill] {
270
- fill: currentColor;
271
- transition: 0.2s fill;
272
- }
273
- .kilya-input-button path[stroke],
274
- .kilya-input-submit path[stroke],
275
- .kilya-input-reset path[stroke],
276
- .kilya-input-button rect[stroke],
277
- .kilya-input-submit rect[stroke],
278
- .kilya-input-reset rect[stroke],
279
- .kilya-input-button circle[stroke],
280
- .kilya-input-submit circle[stroke],
281
- .kilya-input-reset circle[stroke] {
282
- stroke: currentColor;
283
- transition: 0.2s stroke;
284
- }
285
- .kilya-input-button svg,
286
- .kilya-input-submit svg,
287
- .kilya-input-reset svg {
288
- max-width: 100%;
289
- width: 100%;
290
- height: 100%;
291
- object-fit: contain;
292
- }
293
- .kilya-input-button,
294
- .kilya-input-submit,
295
- .kilya-input-reset {
296
- font-style: normal;
297
- line-height: 1.5;
298
- width: fit-content;
299
- background-color: transparent;
300
- border: 0.0625rem solid transparent;
301
- padding: 0;
302
- cursor: pointer;
303
- -webkit-user-select: none;
304
- user-select: none;
305
- transition: 0.2s color, 0.2s background-color, 0.2s border-color;
306
- }
307
- .kilya-input-button:focus-visible,
308
- .kilya-input-submit:focus-visible,
309
- .kilya-input-reset:focus-visible {
310
- outline: none;
311
- }
312
- .kilya-input-button:disabled,
313
- .kilya-input-submit:disabled,
314
- .kilya-input-reset:disabled {
315
- background-color: var(--disabled-bg-primary, #ddd);
316
- color: var(--disabled-color-white, #818181);
317
- border-color: var(--disabled-br-default, #ddd);
318
- pointer-events: none;
319
- }
320
- .kilya-input-button,
321
- .kilya-input-submit,
322
- .kilya-input-reset {
323
- font-family: var(--button-font-family);
324
- font-size: var(--button-font-size);
325
- font-weight: var(--button-font-weight);
326
- text-align: center;
327
- display: flex;
328
- align-items: center;
329
- justify-content: center;
330
- gap: 0.625rem;
331
- }
332
- .kilya-input-button,
333
- .kilya-input-submit,
334
- .kilya-input-reset {
335
- background-color: var(--background-color);
336
- color: var(--color);
337
- border-color: var(--border-color);
338
- border-radius: var(--border-radius);
339
- padding: 0.5rem 1rem;
340
- }
341
- @media (hover: hover) {
342
- .kilya-input-button:hover,
343
- .kilya-input-submit:hover,
344
- .kilya-input-reset:hover {
345
- background-color: var(--hover-background-color);
346
- color: var(--hover-color);
347
- border-color: var(--hover-border-color);
348
- }
349
- }
350
- @media (hover: none) {
351
- .kilya-input-button:active,
352
- .kilya-input-submit:active,
353
- .kilya-input-reset:active {
354
- background-color: var(--hover-background-color);
355
- color: var(--hover-color);
356
- border-color: var(--hover-border-color);
357
- }
358
- }
359
- .kilya-input-button:active,
360
- .kilya-input-submit:active,
361
- .kilya-input-reset:active {
362
- background-color: var(--pressed-background-color);
363
- color: var(--pressed-color);
364
- border-color: var(--pressed-border-color);
365
- }
366
- .kilya-input-button,
367
- .kilya-input-submit,
368
- .kilya-input-reset {
369
- --background-color: var(--bg-primary, #1677ff);
370
- --color: var(--color-white, #fff);
371
- --border-color: var(--bg-primary, #1677ff);
372
- --border-radius: var(--button-br-small);
373
- --hover-background-color: var(--hover-bg-primary, #4096ff);
374
- --hover-color: var(--color-white, #fff);
375
- --hover-border-color: var(--hover-bg-primary, #4096ff);
376
- --pressed-background-color: var(--pressed-bg-primary, #0958d9);
377
- --pressed-color: var(--color-white, #fff);
378
- --pressed-border-color: var(--pressed-bg-primary, #0958d9);
379
- }
380
- :root {
381
- --bg-primary: #1677ff;
382
- --bg-default: #d9d9d9;
383
- --bg-white: #fff;
384
- --color-text: #000;
385
- --color-white: #fff;
386
- --color-link: #1677ff;
387
- --br-default: #d9d9d9;
388
- --hover-bg-primary: #4096ff;
389
- --hover-bg-default: #0000000f;
390
- --hover-color-link: #4096ff;
391
- --hover-br-default: #0000000f;
392
- --focused-bg-primary: #4096ff;
393
- --focused-bg-default: #0000000f;
394
- --focused-color-link: #4096ff;
395
- --focused-br-default: #0000000f;
396
- --pressed-bg-primary: #0958d9;
397
- --pressed-bg-default: #00000026;
398
- --pressed-color-link: #0958d9;
399
- --pressed-br-default: #00000026;
400
- --disabled-bg-primary: #ddd;
401
- --disabled-bg-default: #ddd;
402
- --disabled-bg-white: #ddd;
403
- --disabled-color-text: #818181;
404
- --disabled-color-white: #818181;
405
- --disabled-color-link: #818181;
406
- --disabled-br-default: #ddd;
407
- --button-br-small: 0.25rem;
408
- --button-font-family: monospace;
409
- --button-font-size: 1rem;
410
- --button-font-weight: 300;
411
- --button-color-close: #000;
412
- --button-hover-color-close: #ff0000;
413
- }
414
- html {
415
- font-size: 16px;
416
- }
417
- .kilya-input-color {
418
- width: 50px;
419
- height: 30px;
420
- padding: 2px;
421
- }
422
- .kilya-input-checkbox,
423
- .kilya-input-radio {
424
- margin-right: 8px;
425
- transform: scale(1.2);
426
- }
427
- .kilya-input-date,
428
- .kilya-input-datetime-local,
429
- .kilya-input-month,
430
- .kilya-input-time,
431
- .kilya-input-week {
432
- border: 1px solid #ccc;
433
- padding: 8px;
434
- font-family: inherit;
435
- }
436
- .kilya-input-file {
437
- padding: 8px;
438
- border: 1px dashed #ccc;
439
- }
440
- .kilya-input-number,
441
- .kilya-input-text,
442
- .kilya-input-email,
443
- .kilya-input-password,
444
- .kilya-input-search,
445
- .kilya-input-tel,
446
- .kilya-input-url {
447
- border: 1px solid #ccc;
448
- padding: 8px 12px;
449
- border-radius: 4px;
450
- font-size: 14px;
451
- }
452
- .kilya-input-image {
453
- padding: 10px 20px;
454
- border: none;
455
- border-radius: 4px;
456
- cursor: pointer;
457
- font-weight: 700;
458
- }
459
- .kilya-input-hidden {
460
- display: none;
461
- }
462
- .kilya-input-range {
463
- width: 100%;
464
- height: 6px;
465
- }
1
+ .kilya-button-white path[fill],.kilya-button-reset path[fill],.kilya-button-link path[fill],.kilya-button-border path[fill],.kilya-button-default path[fill],.kilya-button-white rect[fill],.kilya-button-reset rect[fill],.kilya-button-link rect[fill],.kilya-button-border rect[fill],.kilya-button-default rect[fill],.kilya-button-white circle[fill],.kilya-button-reset circle[fill],.kilya-button-link circle[fill],.kilya-button-border circle[fill],.kilya-button-default circle[fill]{fill:currentColor;transition:.2s fill}.kilya-button-white path[stroke],.kilya-button-reset path[stroke],.kilya-button-link path[stroke],.kilya-button-border path[stroke],.kilya-button-default path[stroke],.kilya-button-white rect[stroke],.kilya-button-reset rect[stroke],.kilya-button-link rect[stroke],.kilya-button-border rect[stroke],.kilya-button-default rect[stroke],.kilya-button-white circle[stroke],.kilya-button-reset circle[stroke],.kilya-button-link circle[stroke],.kilya-button-border circle[stroke],.kilya-button-default circle[stroke]{stroke:currentColor;transition:.2s stroke}.kilya-button-white svg,.kilya-button-reset svg,.kilya-button-link svg,.kilya-button-border svg,.kilya-button-default svg{max-width:100%;width:100%;height:100%;object-fit:contain}.kilya-button-white,.kilya-button-reset,.kilya-button-link,.kilya-button-border,.kilya-button-default{font-style:normal;line-height:1.5;width:fit-content;background-color:transparent;border:.0625rem solid transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.2s color,.2s background-color,.2s border-color}.kilya-button-white:focus-visible,.kilya-button-reset:focus-visible,.kilya-button-link:focus-visible,.kilya-button-border:focus-visible,.kilya-button-default:focus-visible{outline:none}.kilya-button-white:disabled,.kilya-button-reset:disabled,.kilya-button-link:disabled,.kilya-button-border:disabled,.kilya-button-default:disabled{background-color:var(--disabled-bg-primary, #ddd);color:var(--disabled-color-white, #818181);border-color:var(--disabled-br-default, #ddd);pointer-events:none}.kilya-button-white,.kilya-button-border,.kilya-button-default{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;display:flex;align-items:center;justify-content:center;gap:.625rem}.kilya-button-white,.kilya-button-border,.kilya-button-default{background-color:var(--background-color);color:var(--color);border-color:var(--border-color);border-radius:var(--border-radius);padding:.5rem 1rem}@media(hover:hover){.kilya-button-white:hover,.kilya-button-border:hover,.kilya-button-default:hover{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}@media(hover:none){.kilya-button-white:active,.kilya-button-border:active,.kilya-button-default:active{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}.kilya-button-white:active,.kilya-button-border:active,.kilya-button-default:active{background-color:var(--pressed-background-color);color:var(--pressed-color);border-color:var(--pressed-border-color)}.kilya-button-default{--background-color: var(--bg-primary, #1677ff);--color: var(--color-white, #fff);--border-color: var(--bg-primary, #1677ff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}.kilya-button-border{--background-color: transparent;--color: var(--color-text, #000);--border-color: var(--bg-primary, #1677ff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}.kilya-button-link{--color: var(--color-link, #1677ff);--hover-color: var(--hover-color-link, #4096ff);--pressed-color: var(--pressed-color-link, #0958d9);color:var(--color);border:none;border-radius:0}@media(hover:hover){.kilya-button-link:hover{color:var(--hover-color)}}@media(hover:none){.kilya-button-link:active{color:var(--hover-color)}}.kilya-button-link:active{color:var(--pressed-color)}.kilya-button-white{--background-color: var(--bg-white, #fff);--color: var(--color-text, #000);--border-color: var(--bg-white, #fff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}.kilya-button-close path[fill],.kilya-button-close rect[fill],.kilya-button-close circle[fill]{fill:currentColor;transition:.2s fill}.kilya-button-close path[stroke],.kilya-button-close rect[stroke],.kilya-button-close circle[stroke]{stroke:currentColor;transition:.2s stroke}.kilya-button-close svg{max-width:100%;width:100%;height:100%;object-fit:contain}.kilya-button-close{font-style:normal;line-height:1.5;width:fit-content;background-color:transparent;border:.0625rem solid transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.2s color,.2s background-color,.2s border-color}.kilya-button-close:focus-visible{outline:none}.kilya-button-close:disabled{background-color:var(--disabled-bg-primary, #ddd);color:var(--disabled-color-white, #818181);border-color:var(--disabled-br-default, #ddd);pointer-events:none}.kilya-button-close{--ava: 1.875rem;max-width:var(--ava);min-width:var(--ava);width:var(--ava);height:var(--ava);max-height:var(--ava);font-size:0;position:relative;border-radius:.25rem;color:var(--button-color-close)}@media(hover:hover){.kilya-button-close:hover{color:var(--button-hover-color-close)}}@media(hover:none){.kilya-button-close:active{color:var(--button-hover-color-close)}}.kilya-button-close:before{content:"";height:100dvh;position:fixed;left:50%;top:50%;translate:-50% -50%;width:100vw;z-index:-1}.kilya-button-close path{stroke:currentColor;stroke-width:.125rem}.kilya-input-button path[fill],.kilya-input-submit path[fill],.kilya-input-reset path[fill],.kilya-input-button rect[fill],.kilya-input-submit rect[fill],.kilya-input-reset rect[fill],.kilya-input-button circle[fill],.kilya-input-submit circle[fill],.kilya-input-reset circle[fill]{fill:currentColor;transition:.2s fill}.kilya-input-button path[stroke],.kilya-input-submit path[stroke],.kilya-input-reset path[stroke],.kilya-input-button rect[stroke],.kilya-input-submit rect[stroke],.kilya-input-reset rect[stroke],.kilya-input-button circle[stroke],.kilya-input-submit circle[stroke],.kilya-input-reset circle[stroke]{stroke:currentColor;transition:.2s stroke}.kilya-input-button svg,.kilya-input-submit svg,.kilya-input-reset svg{max-width:100%;width:100%;height:100%;object-fit:contain}.kilya-input-button,.kilya-input-submit,.kilya-input-reset{font-style:normal;line-height:1.5;width:fit-content;background-color:transparent;border:.0625rem solid transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.2s color,.2s background-color,.2s border-color}.kilya-input-button:focus-visible,.kilya-input-submit:focus-visible,.kilya-input-reset:focus-visible{outline:none}.kilya-input-button:disabled,.kilya-input-submit:disabled,.kilya-input-reset:disabled{background-color:var(--disabled-bg-primary, #ddd);color:var(--disabled-color-white, #818181);border-color:var(--disabled-br-default, #ddd);pointer-events:none}.kilya-input-button,.kilya-input-submit,.kilya-input-reset{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;display:flex;align-items:center;justify-content:center;gap:.625rem}.kilya-input-button,.kilya-input-submit,.kilya-input-reset{background-color:var(--background-color);color:var(--color);border-color:var(--border-color);border-radius:var(--border-radius);padding:.5rem 1rem}@media(hover:hover){.kilya-input-button:hover,.kilya-input-submit:hover,.kilya-input-reset:hover{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}@media(hover:none){.kilya-input-button:active,.kilya-input-submit:active,.kilya-input-reset:active{background-color:var(--hover-background-color);color:var(--hover-color);border-color:var(--hover-border-color)}}.kilya-input-button:active,.kilya-input-submit:active,.kilya-input-reset:active{background-color:var(--pressed-background-color);color:var(--pressed-color);border-color:var(--pressed-border-color)}.kilya-input-button,.kilya-input-submit,.kilya-input-reset{--background-color: var(--bg-primary, #1677ff);--color: var(--color-white, #fff);--border-color: var(--bg-primary, #1677ff);--border-radius: var(--button-br-small);--hover-background-color: var(--hover-bg-primary, #4096ff);--hover-color: var(--color-white, #fff);--hover-border-color: var(--hover-bg-primary, #4096ff);--pressed-background-color: var(--pressed-bg-primary, #0958d9);--pressed-color: var(--color-white, #fff);--pressed-border-color: var(--pressed-bg-primary, #0958d9)}:root{--bg-primary: #1677ff;--bg-default: #d9d9d9;--bg-white: #fff;--color-text: #000;--color-white: #fff;--color-link: #1677ff;--br-default: #d9d9d9;--hover-bg-primary: #4096ff;--hover-bg-default: #0000000f;--hover-color-link: #4096ff;--hover-br-default: #0000000f;--focused-bg-primary: #4096ff;--focused-bg-default: #0000000f;--focused-color-link: #4096ff;--focused-br-default: #0000000f;--pressed-bg-primary: #0958d9;--pressed-bg-default: #00000026;--pressed-color-link: #0958d9;--pressed-br-default: #00000026;--disabled-bg-primary: #ddd;--disabled-bg-default: #ddd;--disabled-bg-white: #ddd;--disabled-color-text: #818181;--disabled-color-white: #818181;--disabled-color-link: #818181;--disabled-br-default: #ddd;--button-br-small: .25rem;--button-font-family: monospace;--button-font-size: 1rem;--button-font-weight: 300;--button-color-close: #000;--button-hover-color-close: #ff0000}html{font-size:16px}.kilya-input-color{width:50px;height:30px;padding:2px}.kilya-input-checkbox,.kilya-input-radio{margin-right:8px;transform:scale(1.2)}.kilya-input-date,.kilya-input-datetime-local,.kilya-input-month,.kilya-input-time,.kilya-input-week{border:1px solid #ccc;padding:8px;font-family:inherit}.kilya-input-file{padding:8px;border:1px dashed #ccc}.kilya-input-number,.kilya-input-text,.kilya-input-email,.kilya-input-password,.kilya-input-search,.kilya-input-tel,.kilya-input-url{border:1px solid #ccc;padding:8px 12px;border-radius:4px;font-size:14px}.kilya-input-image{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.kilya-input-hidden{display:none}.kilya-input-range{width:100%;height:6px}
package/dist/kilya-ui.es.js CHANGED
@@ -7,23 +7,23 @@ var L;
7
7
  function ae() {
8
8
  if (L) return E;
9
9
  L = 1;
10
- var n = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
11
- function o(d, i, t) {
10
+ var n = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
11
+ function o(d, c, t) {
12
12
  var s = null;
13
- if (t !== void 0 && (s = "" + t), i.key !== void 0 && (s = "" + i.key), "key" in i) {
13
+ if (t !== void 0 && (s = "" + t), c.key !== void 0 && (s = "" + c.key), "key" in c) {
14
14
  t = {};
15
- for (var f in i)
16
- f !== "key" && (t[f] = i[f]);
17
- } else t = i;
18
- return i = t.ref, {
15
+ for (var f in c)
16
+ f !== "key" && (t[f] = c[f]);
17
+ } else t = c;
18
+ return c = t.ref, {
19
19
  $$typeof: n,
20
20
  type: d,
21
21
  key: s,
22
- ref: i !== void 0 ? i : null,
22
+ ref: c !== void 0 ? c : null,
23
23
  props: t
24
24
  };
25
25
  }
26
- return E.Fragment = c, E.jsx = o, E.jsxs = o, E;
26
+ return E.Fragment = i, E.jsx = o, E.jsxs = o, E;
27
27
  }
28
28
  var _ = {};
29
29
  var W;
@@ -54,9 +54,9 @@ function se() {
54
54
  ), e.$$typeof) {
55
55
  case V:
56
56
  return "Portal";
57
- case G:
58
- return e.displayName || "Context";
59
57
  case B:
58
+ return e.displayName || "Context";
59
+ case G:
60
60
  return (e._context.displayName || "Context") + ".Consumer";
61
61
  case X:
62
62
  var r = e.render;
@@ -72,12 +72,12 @@ function se() {
72
72
  }
73
73
  return null;
74
74
  }
75
- function c(e) {
75
+ function i(e) {
76
76
  return "" + e;
77
77
  }
78
78
  function o(e) {
79
79
  try {
80
- c(e);
80
+ i(e);
81
81
  var r = !1;
82
82
  } catch {
83
83
  r = !0;
@@ -89,7 +89,7 @@ function se() {
89
89
  r,
90
90
  "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
91
91
  u
92
- ), c(e);
92
+ ), i(e);
93
93
  }
94
94
  }
95
95
  function d(e) {
@@ -103,7 +103,7 @@ function se() {
103
103
  return "<...>";
104
104
  }
105
105
  }
106
- function i() {
106
+ function c() {
107
107
  var e = x.A;
108
108
  return e === null ? null : e.getOwner();
109
109
  }
@@ -211,7 +211,7 @@ React keys must be passed directly to JSX without using spread:
211
211
  e,
212
212
  l,
213
213
  a,
214
- i(),
214
+ c(),
215
215
  R,
216
216
  S
217
217
  );
@@ -222,7 +222,7 @@ React keys must be passed directly to JSX without using spread:
222
222
  function g(e) {
223
223
  return typeof e == "object" && e !== null && e.$$typeof === C;
224
224
  }
225
- var v = ne, C = Symbol.for("react.transitional.element"), V = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), x = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, re = Array.isArray, A = console.createTask ? console.createTask : function() {
225
+ var v = ne, C = /* @__PURE__ */ Symbol.for("react.transitional.element"), V = /* @__PURE__ */ Symbol.for("react.portal"), j = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), G = /* @__PURE__ */ Symbol.for("react.consumer"), B = /* @__PURE__ */ Symbol.for("react.context"), X = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), Z = /* @__PURE__ */ Symbol.for("react.suspense_list"), Q = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), K = /* @__PURE__ */ Symbol.for("react.activity"), ee = /* @__PURE__ */ Symbol.for("react.client.reference"), x = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, re = Array.isArray, A = console.createTask ? console.createTask : function() {
226
226
  return null;
227
227
  };
228
228
  v = {
@@ -266,11 +266,11 @@ var U;
266
266
  function le() {
267
267
  return U || (U = 1, (function(n) {
268
268
  (function() {
269
- var c = {}.hasOwnProperty;
269
+ var i = {}.hasOwnProperty;
270
270
  function o() {
271
271
  for (var t = "", s = 0; s < arguments.length; s++) {
272
272
  var f = arguments[s];
273
- f && (t = i(t, d(f)));
273
+ f && (t = c(t, d(f)));
274
274
  }
275
275
  return t;
276
276
  }
@@ -285,51 +285,51 @@ function le() {
285
285
  return t.toString();
286
286
  var s = "";
287
287
  for (var f in t)
288
- c.call(t, f) && t[f] && (s = i(s, f));
288
+ i.call(t, f) && t[f] && (s = c(s, f));
289
289
  return s;
290
290
  }
291
- function i(t, s) {
291
+ function c(t, s) {
292
292
  return s ? t ? t + " " + s : t + s : t;
293
293
  }
294
294
  n.exports ? (o.default = o, n.exports = o) : window.classNames = o;
295
295
  })();
296
296
  })(w)), w.exports;
297
297
  }
298
- var ce = le();
299
- const ie = /* @__PURE__ */ oe(ce), P = (n, c) => ie(fe(n), c), fe = (n) => {
298
+ var ie = le();
299
+ const ce = /* @__PURE__ */ oe(ie), P = (n, i) => ce(fe(n), i), fe = (n) => {
300
300
  if (typeof n == "string")
301
301
  return `kilya-${n}`;
302
302
  if (Array.isArray(n))
303
303
  return n.map((o) => `kilya-${o}`).join(" ");
304
- const c = {};
304
+ const i = {};
305
305
  return Object.keys(n).forEach((o) => {
306
- c[`kilya-${o}`] = n[o];
307
- }), c;
308
- }, de = ({
306
+ i[`kilya-${o}`] = n[o];
307
+ }), i;
308
+ }, me = ({
309
309
  children: n,
310
- disabled: c = !1,
310
+ disabled: i = !1,
311
311
  type: o = "button",
312
312
  button: d = "default",
313
- className: i = "",
313
+ className: c = "",
314
314
  ...t
315
315
  }) => /* @__PURE__ */ p.jsx(
316
316
  "button",
317
317
  {
318
318
  type: o,
319
- className: P(`button-${d}`, i),
320
- disabled: c,
319
+ className: P(`button-${d}`, c),
320
+ disabled: i,
321
321
  ...t,
322
322
  children: n
323
323
  }
324
- ), me = ({
324
+ ), pe = ({
325
325
  disabled: n = !1,
326
- className: c = "",
326
+ className: i = "",
327
327
  ...o
328
328
  }) => /* @__PURE__ */ p.jsxs(
329
329
  "button",
330
330
  {
331
331
  type: "button",
332
- className: P("button-close", c),
332
+ className: P("button-close", i),
333
333
  disabled: n,
334
334
  ...o,
335
335
  children: [
@@ -340,15 +340,12 @@ const ie = /* @__PURE__ */ oe(ce), P = (n, c) => ie(fe(n), c), fe = (n) => {
340
340
  ] })
341
341
  ]
342
342
  }
343
- ), pe = {
344
- Button: de,
345
- ButtonClose: me
346
- }, Ee = ({
343
+ ), Ee = ({
347
344
  id: n,
348
- type: c,
345
+ type: i,
349
346
  name: o,
350
347
  className: d,
351
- disabled: i,
348
+ disabled: c,
352
349
  required: t,
353
350
  readOnly: s,
354
351
  onBlur: f,
@@ -358,11 +355,11 @@ const ie = /* @__PURE__ */ oe(ce), P = (n, c) => ie(fe(n), c), fe = (n) => {
358
355
  }) => /* @__PURE__ */ p.jsx(
359
356
  "input",
360
357
  {
361
- type: c,
362
- className: P(`input-${c}`, d),
358
+ type: i,
359
+ className: P(`input-${i}`, d),
363
360
  name: o,
364
361
  id: n,
365
- disabled: i,
362
+ disabled: c,
366
363
  required: t,
367
364
  readOnly: s,
368
365
  onBlur: f,
@@ -370,12 +367,9 @@ const ie = /* @__PURE__ */ oe(ce), P = (n, c) => ie(fe(n), c), fe = (n) => {
370
367
  onClick: O,
371
368
  ...b
372
369
  }
373
- ), _e = {
374
- Button: pe,
375
- Input: Ee
376
- }, ve = {
377
- components: _e
378
- };
370
+ );
379
371
  export {
380
- ve as default
372
+ me as Button,
373
+ pe as ButtonClose,
374
+ Ee as Input
381
375
  };
package/dist/kilya-ui.umd.js CHANGED
@@ -1,6 +1,6 @@
1
- (function(m,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("react")):typeof define=="function"&&define.amd?define(["react"],_):(m=typeof globalThis<"u"?globalThis:m||self,m["kilya-ui"]=_(m.React))})(this,(function(m){"use strict";function _(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var R={exports:{}},b={};var C;function J(){if(C)return b;C=1;var n=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function o(d,c,t){var s=null;if(t!==void 0&&(s=""+t),c.key!==void 0&&(s=""+c.key),"key"in c){t={};for(var f in c)f!=="key"&&(t[f]=c[f])}else t=c;return c=t.ref,{$$typeof:n,type:d,key:s,ref:c!==void 0?c:null,props:t}}return b.Fragment=i,b.jsx=o,b.jsxs=o,b}var v={};var $;function z(){return $||($=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case A:return"Fragment";case re:return"Profiler";case ee:return"StrictMode";case ae:return"Suspense";case se:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case K:return"Portal";case ne:return e.displayName||"Context";case te:return(e._context.displayName||"Context")+".Consumer";case oe:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function i(e){return""+e}function o(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),i(e)}}function d(e){if(e===A)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=w.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function s(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function f(e,r){function a(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function x(){var e=n(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,r,a,u,O,N){var l=a.ref;return e={$$typeof:M,type:e,key:r,props:a,_owner:u},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,a,u,O,N){var l=r.children;if(l!==void 0)if(u)if(ce(l)){for(u=0;u<l.length;u++)F(l[u]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else F(l);if(L.call(r,"key")){l=n(e);var E=Object.keys(r).filter(function(fe){return fe!=="key"});u=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",V[l+u]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
1
+ (function(p,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],E):(p=typeof globalThis<"u"?globalThis:p||self,E(p["kilya-ui"]={},p.React))})(this,(function(p,E){"use strict";function z(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var R={exports:{}},_={};var C;function B(){if(C)return _;C=1;var n=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function o(d,c,t){var s=null;if(t!==void 0&&(s=""+t),c.key!==void 0&&(s=""+c.key),"key"in c){t={};for(var f in c)f!=="key"&&(t[f]=c[f])}else t=c;return c=t.ref,{$$typeof:n,type:d,key:s,ref:c!==void 0?c:null,props:t}}return _.Fragment=i,_.jsx=o,_.jsxs=o,_}var v={};var Y;function G(){return Y||(Y=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case ae:return"Profiler";case oe:return"StrictMode";case ie:return"Suspense";case ce:return"SuspenseList";case de:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ne:return"Portal";case ue:return e.displayName||"Context";case se:return(e._context.displayName||"Context")+".Consumer";case le:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case fe:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case A:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function i(e){return""+e}function o(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),i(e)}}function d(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===A)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=P.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function s(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function f(e,r){function a(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function x(){var e=n(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function S(e,r,a,u,O,g){var l=a.ref;return e={$$typeof:D,type:e,key:r,props:a,_owner:u},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,a,u,O,g){var l=r.children;if(l!==void 0)if(u)if(me(l)){for(u=0;u<l.length;u++)F(l[u]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else F(l);if(L.call(r,"key")){l=n(e);var b=Object.keys(r).filter(function(be){return be!=="key"});u=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",J[l+u]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
2
2
  let props = %s;
3
3
  <%s {...props} />
4
4
  React keys must be passed directly to JSX without using spread:
5
5
  let props = %s;
6
- <%s key={someKey} {...props} />`,u,l,E,l),V[l+u]=!0)}if(l=null,a!==void 0&&(o(a),l=""+a),s(r)&&(o(r.key),l=""+r.key),"key"in r){a={};for(var g in r)g!=="key"&&(a[g]=r[g])}else a=r;return l&&f(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,l,a,c(),O,N)}function F(e){D(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===S&&(e._payload.status==="fulfilled"?D(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function D(e){return typeof e=="object"&&e!==null&&e.$$typeof===M}var y=m,M=Symbol.for("react.transitional.element"),K=Symbol.for("react.portal"),A=Symbol.for("react.fragment"),ee=Symbol.for("react.strict_mode"),re=Symbol.for("react.profiler"),te=Symbol.for("react.consumer"),ne=Symbol.for("react.context"),oe=Symbol.for("react.forward_ref"),ae=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),w=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,ce=Array.isArray,P=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(e){return e()}};var W,q={},B=y.react_stack_bottom_frame.bind(y,t)(),U=P(d(t)),V={};v.Fragment=A,v.jsx=function(e,r,a){var u=1e4>w.recentlyCreatedOwnerStacks++;return T(e,r,a,!1,u?Error("react-stack-top-frame"):B,u?P(d(e)):U)},v.jsxs=function(e,r,a){var u=1e4>w.recentlyCreatedOwnerStacks++;return T(e,r,a,!0,u?Error("react-stack-top-frame"):B,u?P(d(e)):U)}})()),v}var Y;function G(){return Y||(Y=1,process.env.NODE_ENV==="production"?R.exports=J():R.exports=z()),R.exports}var p=G(),j={exports:{}};var I;function X(){return I||(I=1,(function(n){(function(){var i={}.hasOwnProperty;function o(){for(var t="",s=0;s<arguments.length;s++){var f=arguments[s];f&&(t=c(t,d(f)))}return t}function d(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return o.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var f in t)i.call(t,f)&&t[f]&&(s=c(s,f));return s}function c(t,s){return s?t?t+" "+s:t+s:t}n.exports?(o.default=o,n.exports=o):window.classNames=o})()})(j)),j.exports}var H=X();const Z=_(H),k=(n,i)=>Z(Q(n),i),Q=n=>{if(typeof n=="string")return`kilya-${n}`;if(Array.isArray(n))return n.map(o=>`kilya-${o}`).join(" ");const i={};return Object.keys(n).forEach(o=>{i[`kilya-${o}`]=n[o]}),i};return{components:{Button:{Button:({children:n,disabled:i=!1,type:o="button",button:d="default",className:c="",...t})=>p.jsx("button",{type:o,className:k(`button-${d}`,c),disabled:i,...t,children:n}),ButtonClose:({disabled:n=!1,className:i="",...o})=>p.jsxs("button",{type:"button",className:k("button-close",i),disabled:n,...o,children:["Close",p.jsxs("svg",{viewBox:"0 0 24 25",children:[p.jsx("path",{d:"M6.34314 18.1567L17.6568 6.84303"}),p.jsx("path",{d:"M17.6569 18.1567L6.34315 6.84303"})]})]})},Input:({id:n,type:i,name:o,className:d,disabled:c,required:t,readOnly:s,onBlur:f,onFocus:x,onClick:h,...T})=>p.jsx("input",{type:i,className:k(`input-${i}`,d),name:o,id:n,disabled:c,required:t,readOnly:s,onBlur:f,onFocus:x,onClick:h,...T})}}}));
6
+ <%s key={someKey} {...props} />`,u,l,b,l),J[l+u]=!0)}if(l=null,a!==void 0&&(o(a),l=""+a),s(r)&&(o(r.key),l=""+r.key),"key"in r){a={};for(var N in r)N!=="key"&&(a[N]=r[N])}else a=r;return l&&f(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),S(e,l,a,c(),O,g)}function F(e){M(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===A&&(e._payload.status==="fulfilled"?M(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function M(e){return typeof e=="object"&&e!==null&&e.$$typeof===D}var y=E,D=Symbol.for("react.transitional.element"),ne=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),oe=Symbol.for("react.strict_mode"),ae=Symbol.for("react.profiler"),se=Symbol.for("react.consumer"),ue=Symbol.for("react.context"),le=Symbol.for("react.forward_ref"),ie=Symbol.for("react.suspense"),ce=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),pe=Symbol.for("react.client.reference"),P=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,me=Array.isArray,w=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(e){return e()}};var W,q={},U=y.react_stack_bottom_frame.bind(y,t)(),V=w(d(t)),J={};v.Fragment=h,v.jsx=function(e,r,a){var u=1e4>P.recentlyCreatedOwnerStacks++;return T(e,r,a,!1,u?Error("react-stack-top-frame"):U,u?w(d(e)):V)},v.jsxs=function(e,r,a){var u=1e4>P.recentlyCreatedOwnerStacks++;return T(e,r,a,!0,u?Error("react-stack-top-frame"):U,u?w(d(e)):V)}})()),v}var $;function X(){return $||($=1,process.env.NODE_ENV==="production"?R.exports=B():R.exports=G()),R.exports}var m=X(),j={exports:{}};var I;function H(){return I||(I=1,(function(n){(function(){var i={}.hasOwnProperty;function o(){for(var t="",s=0;s<arguments.length;s++){var f=arguments[s];f&&(t=c(t,d(f)))}return t}function d(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return o.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var f in t)i.call(t,f)&&t[f]&&(s=c(s,f));return s}function c(t,s){return s?t?t+" "+s:t+s:t}n.exports?(o.default=o,n.exports=o):window.classNames=o})()})(j)),j.exports}var Z=H();const Q=z(Z),k=(n,i)=>Q(K(n),i),K=n=>{if(typeof n=="string")return`kilya-${n}`;if(Array.isArray(n))return n.map(o=>`kilya-${o}`).join(" ");const i={};return Object.keys(n).forEach(o=>{i[`kilya-${o}`]=n[o]}),i},ee=({children:n,disabled:i=!1,type:o="button",button:d="default",className:c="",...t})=>m.jsx("button",{type:o,className:k(`button-${d}`,c),disabled:i,...t,children:n}),re=({disabled:n=!1,className:i="",...o})=>m.jsxs("button",{type:"button",className:k("button-close",i),disabled:n,...o,children:["Close",m.jsxs("svg",{viewBox:"0 0 24 25",children:[m.jsx("path",{d:"M6.34314 18.1567L17.6568 6.84303"}),m.jsx("path",{d:"M17.6569 18.1567L6.34315 6.84303"})]})]}),te=({id:n,type:i,name:o,className:d,disabled:c,required:t,readOnly:s,onBlur:f,onFocus:x,onClick:S,...T})=>m.jsx("input",{type:i,className:k(`input-${i}`,d),name:o,id:n,disabled:c,required:t,readOnly:s,onBlur:f,onFocus:x,onClick:S,...T});p.Button=ee,p.ButtonClose=re,p.Input=te,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,19 +1,21 @@
1
1
  {
2
2
  "name": "kilya-ui",
3
3
  "private": false,
4
- "version": "0.0.2",
4
+ "version": "0.0.4",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"
8
8
  ],
9
9
  "main": "./dist/kilya-ui.umd.js",
10
10
  "module": "./dist/kilya-ui.es.js",
11
+ "types": "./dist/kilya-ui.es.d.ts",
11
12
  "exports": {
12
- "./package.json": "./package.json",
13
13
  ".": {
14
14
  "types": "./dist/kilya-ui.es.d.ts",
15
- "import": "./dist/kilya-ui.es.js"
16
- }
15
+ "import": "./dist/kilya-ui.es.js",
16
+ "require": "./dist/kilya-ui.umd.js"
17
+ },
18
+ "./package.json": "./package.json"
17
19
  },
18
20
  "scripts": {
19
21
  "dev": "vite",
@@ -32,6 +34,7 @@
32
34
  "@eslint/js": "^9.39.1",
33
35
  "@storybook/addon-docs": "^10.0.8",
34
36
  "@storybook/addon-onboarding": "^10.0.8",
37
+ "@storybook/react": "^10.1.10",
35
38
  "@storybook/react-vite": "^10.0.8",
36
39
  "@types/node": "^24.10.1",
37
40
  "@types/react": "^19.2.5",
@@ -49,7 +52,8 @@
49
52
  "styled-components": "^6.1.19",
50
53
  "typescript": "~5.9.3",
51
54
  "typescript-eslint": "^8.46.4",
52
- "vite": "^7.2.4"
55
+ "vite": "^7.2.4",
56
+ "vite-plugin-dts": "^4.5.4"
53
57
  },
54
58
  "peerDependencies": {
55
59
  "react": "*",