@ktjs/mui 0.18.9 → 0.20.0

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.
package/dist/index.d.ts CHANGED
@@ -1,43 +1,1296 @@
1
- import { KTHTMLElement, KTRef as KTRef$1, KTAttribute } from 'kt.js';
2
- import { KTHTMLElement as KTHTMLElement$1, KTRef } from '@ktjs/core';
3
-
4
- interface AlertProps {
1
+ interface KTMuiAlertProps {
5
2
  class?: string;
6
3
  style?: string | Partial<CSSStyleDeclaration>;
7
- children: string | HTMLElement | KTHTMLElement | Array<string | HTMLElement | KTHTMLElement>;
4
+ children: string | HTMLElement | JSX.Element | Array<string | HTMLElement | JSX.Element>;
8
5
  severity?: 'error' | 'warning' | 'info' | 'success';
9
6
  variant?: 'standard' | 'filled' | 'outlined';
10
- icon?: HTMLElement | KTHTMLElement | false;
7
+ icon?: HTMLElement | false;
11
8
  'kt:close'?: () => void;
12
9
  }
13
- /**s
14
- * Alert component - mimics MUI Alert appearance and behavior
15
- */
16
- declare function Alert(props: AlertProps): KTHTMLElement;
10
+ declare function Alert(props: KTMuiAlertProps): JSX.Element;
17
11
 
18
- interface ButtonProps {
12
+ interface KTMuiButtonProps {
19
13
  class?: string;
20
14
  style?: string | Partial<CSSStyleDeclaration>;
21
- children: string | HTMLElement | KTHTMLElement;
15
+ children?: string | HTMLElement | JSX.Element;
22
16
  variant?: 'contained' | 'outlined' | 'text';
23
17
  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
24
18
  size?: 'small' | 'medium' | 'large';
25
19
  disabled?: boolean;
26
20
  fullWidth?: boolean;
27
21
  iconOnly?: boolean;
28
- startIcon?: HTMLElement | KTHTMLElement;
29
- endIcon?: HTMLElement | KTHTMLElement;
22
+ startIcon?: HTMLElement | JSX.Element;
23
+ endIcon?: HTMLElement | JSX.Element;
30
24
  type?: 'button' | 'submit' | 'reset';
31
25
  'on:click'?: (event: Event) => void;
32
26
  }
33
27
  /**
34
28
  * Button component - mimics MUI Button appearance and behavior
35
29
  */
36
- declare function Button(props: ButtonProps): KTHTMLElement;
30
+ declare function Button(props: KTMuiButtonProps): JSX.Element;
31
+
32
+ type otherstring = string & {};
33
+
34
+ type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
35
+ declare class KTRef<T> {
36
+ /**
37
+ * Indicates that this is a KTRef instance
38
+ */
39
+ isKT: boolean;
40
+ private _value;
41
+ private _onChanges;
42
+ constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
43
+ /**
44
+ * If new value and old value are both nodes, the old one will be replaced in the DOM
45
+ */
46
+ get value(): T;
47
+ set value(newValue: T);
48
+ addOnChange(callback: RefChangeHandler<T>): void;
49
+ removeOnChange(callback: RefChangeHandler<T>): boolean;
50
+ }
51
+
52
+ type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
53
+ type KTAvailableContent = SingleContent | KTAvailableContent[];
54
+ type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
55
+
56
+ /**
57
+ * Used to create enhanced HTML elements
58
+ */
59
+ interface KTBaseAttribute {
60
+ [k: string]: any;
61
+
62
+ // # kt-specific attributes
63
+ ref?: KTRef<JSX.Element>;
64
+ 'k-if'?: any;
65
+
66
+ // # normal HTML attributes
67
+ id?: string;
68
+ class?: string;
69
+ className?: string;
70
+ style?: string | Partial<CSSStyleDeclaration>;
71
+
72
+ type?:
73
+ | 'text'
74
+ | 'password'
75
+ | 'email'
76
+ | 'number'
77
+ | 'tel'
78
+ | 'url'
79
+ | 'search'
80
+ | 'date'
81
+ | 'datetime-local'
82
+ | 'time'
83
+ | 'month'
84
+ | 'week'
85
+ | 'color'
86
+ | 'range'
87
+ | 'file'
88
+ | 'checkbox'
89
+ | 'radio'
90
+ | 'hidden'
91
+ | 'submit'
92
+ | 'reset'
93
+ | 'button'
94
+ | 'image'
95
+ | otherstring;
96
+ for?: string;
97
+
98
+ name?: string;
99
+ title?: string;
100
+ placeholder?: string;
101
+ contenteditable?: boolean;
102
+ value?: any;
103
+ valueAsDate?: Date;
104
+ valueAsNumber?: number;
105
+ label?: string;
106
+ disabled?: boolean;
107
+
108
+ min?: string | number;
109
+ max?: string | number;
110
+ step?: string | number;
111
+
112
+ selected?: boolean;
113
+ checked?: boolean;
114
+
115
+ action?: string;
116
+ method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
117
+ }
118
+
119
+ type KTPrefixedEventHandlers = {
120
+ [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
121
+ };
122
+
123
+ type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
124
+
125
+ // Base events available to all HTML elements
126
+ interface BaseAttr {
127
+ [k: string]: any;
128
+
129
+ // # base attributes
130
+ class?: string;
131
+ className?: string;
132
+ style?: string | Partial<CSSStyleDeclaration>;
133
+
134
+ // # Events
135
+ // Mouse events
136
+ 'on:click'?: (ev: PointerEvent) => void;
137
+ 'on:dblclick'?: (ev: PointerEvent) => void;
138
+ 'on:mousedown'?: (ev: PointerEvent) => void;
139
+ 'on:mouseup'?: (ev: MouseEvent) => void;
140
+ 'on:mousemove'?: (ev: MouseEvent) => void;
141
+ 'on:mouseenter'?: (ev: MouseEvent) => void;
142
+ 'on:mouseleave'?: (ev: MouseEvent) => void;
143
+ 'on:mouseover'?: (ev: MouseEvent) => void;
144
+ 'on:mouseout'?: (ev: MouseEvent) => void;
145
+ 'on:contextmenu'?: (ev: PointerEvent) => void;
146
+
147
+ // Keyboard events
148
+ 'on:keydown'?: (ev: KeyboardEvent) => void;
149
+ 'on:keyup'?: (ev: KeyboardEvent) => void;
150
+ 'on:keypress'?: (ev: KeyboardEvent) => void;
151
+
152
+ // Focus events
153
+ 'on:focus'?: (ev: FocusEvent) => void;
154
+ 'on:blur'?: (ev: FocusEvent) => void;
155
+ 'on:focusin'?: (ev: FocusEvent) => void;
156
+ 'on:focusout'?: (ev: FocusEvent) => void;
157
+
158
+ // Input events
159
+ 'on:input'?: (ev: Event) => void;
160
+ 'on:change'?: (ev: Event) => void;
161
+ 'on:beforeinput'?: (ev: InputEvent) => void;
162
+
163
+ // Drag events
164
+ 'on:drag'?: (ev: DragEvent) => void;
165
+ 'on:dragstart'?: (ev: DragEvent) => void;
166
+ 'on:dragend'?: (ev: DragEvent) => void;
167
+ 'on:dragenter'?: (ev: DragEvent) => void;
168
+ 'on:dragleave'?: (ev: DragEvent) => void;
169
+ 'on:dragover'?: (ev: DragEvent) => void;
170
+ 'on:drop'?: (ev: DragEvent) => void;
171
+
172
+ // Clipboard events
173
+ 'on:copy'?: (ev: ClipboardEvent) => void;
174
+ 'on:cut'?: (ev: ClipboardEvent) => void;
175
+ 'on:paste'?: (ev: ClipboardEvent) => void;
176
+
177
+ // Touch events
178
+ 'on:touchstart'?: (ev: TouchEvent) => void;
179
+ 'on:touchmove'?: (ev: TouchEvent) => void;
180
+ 'on:touchend'?: (ev: TouchEvent) => void;
181
+ 'on:touchcancel'?: (ev: TouchEvent) => void;
182
+
183
+ // Wheel event
184
+ 'on:wheel'?: (ev: WheelEvent) => void;
185
+
186
+ // Animation events
187
+ 'on:animationstart'?: (ev: AnimationEvent) => void;
188
+ 'on:animationend'?: (ev: AnimationEvent) => void;
189
+ 'on:animationiteration'?: (ev: AnimationEvent) => void;
190
+
191
+ // Transition events
192
+ 'on:transitionstart'?: (ev: TransitionEvent) => void;
193
+ 'on:transitionend'?: (ev: TransitionEvent) => void;
194
+ 'on:transitionrun'?: (ev: TransitionEvent) => void;
195
+ 'on:transitioncancel'?: (ev: TransitionEvent) => void;
196
+
197
+ // Pointer events
198
+ 'on:pointerdown'?: (ev: PointerEvent) => void;
199
+ 'on:pointerup'?: (ev: PointerEvent) => void;
200
+ 'on:pointermove'?: (ev: PointerEvent) => void;
201
+ 'on:pointerenter'?: (ev: PointerEvent) => void;
202
+ 'on:pointerleave'?: (ev: PointerEvent) => void;
203
+ 'on:pointerover'?: (ev: PointerEvent) => void;
204
+ 'on:pointerout'?: (ev: PointerEvent) => void;
205
+ 'on:pointercancel'?: (ev: PointerEvent) => void;
206
+ 'on:gotpointercapture'?: (ev: PointerEvent) => void;
207
+ 'on:lostpointercapture'?: (ev: PointerEvent) => void;
208
+
209
+ // Selection events
210
+ 'on:select'?: (ev: Event) => void;
211
+ 'on:selectstart'?: (ev: Event) => void;
212
+
213
+ // Scroll event
214
+ 'on:scroll'?: (ev: Event) => void;
215
+
216
+ // Resize event
217
+ 'on:resize'?: (ev: UIEvent) => void;
218
+ }
219
+
220
+ // Form-specific events
221
+ interface FormElementEvents {
222
+ 'on:submit'?: (ev: SubmitEvent) => void;
223
+ 'on:reset'?: (ev: Event) => void;
224
+ 'on:invalid'?: (ev: Event) => void;
225
+ }
226
+
227
+ // Media-specific events
228
+ interface MediaElementEvents {
229
+ 'on:play'?: (ev: Event) => void;
230
+ 'on:pause'?: (ev: Event) => void;
231
+ 'on:playing'?: (ev: Event) => void;
232
+ 'on:ended'?: (ev: Event) => void;
233
+ 'on:canplay'?: (ev: Event) => void;
234
+ 'on:canplaythrough'?: (ev: Event) => void;
235
+ 'on:durationchange'?: (ev: Event) => void;
236
+ 'on:emptied'?: (ev: Event) => void;
237
+ 'on:loadeddata'?: (ev: Event) => void;
238
+ 'on:loadedmetadata'?: (ev: Event) => void;
239
+ 'on:loadstart'?: (ev: Event) => void;
240
+ 'on:progress'?: (ev: ProgressEvent) => void;
241
+ 'on:ratechange'?: (ev: Event) => void;
242
+ 'on:seeked'?: (ev: Event) => void;
243
+ 'on:seeking'?: (ev: Event) => void;
244
+ 'on:stalled'?: (ev: Event) => void;
245
+ 'on:suspend'?: (ev: Event) => void;
246
+ 'on:timeupdate'?: (ev: Event) => void;
247
+ 'on:volumechange'?: (ev: Event) => void;
248
+ 'on:waiting'?: (ev: Event) => void;
249
+ 'on:abort'?: (ev: UIEvent) => void;
250
+ 'on:error'?: (ev: ErrorEvent) => void;
251
+ }
252
+
253
+ // Details-specific events
254
+ interface DetailsElementEvents {
255
+ 'on:toggle'?: (ev: Event) => void;
256
+ }
257
+
258
+ // Dialog-specific events
259
+ interface DialogElementEvents {
260
+ 'on:cancel'?: (ev: Event) => void;
261
+ 'on:close'?: (ev: Event) => void;
262
+ }
263
+
264
+ // Image-specific events
265
+ interface ImageElementEvents {
266
+ 'on:load'?: (ev: Event) => void;
267
+ 'on:error'?: (ev: ErrorEvent) => void;
268
+ }
269
+
270
+ interface AttributesMap {
271
+ // Anchor element
272
+ a: BaseAttr & {
273
+ download?: string;
274
+ href?: string;
275
+ hreflang?: string;
276
+ ping?: string;
277
+ referrerpolicy?:
278
+ | 'no-referrer'
279
+ | 'no-referrer-when-downgrade'
280
+ | 'origin'
281
+ | 'origin-when-cross-origin'
282
+ | 'same-origin'
283
+ | 'strict-origin'
284
+ | 'strict-origin-when-cross-origin'
285
+ | 'unsafe-url';
286
+ rel?: string;
287
+ target?: '_self' | '_blank' | '_parent' | '_top' | string;
288
+ type?: string;
289
+ };
290
+
291
+ // Area element
292
+ area: BaseAttr & {
293
+ alt?: string;
294
+ coords?: string;
295
+ download?: string;
296
+ href?: string;
297
+ ping?: string;
298
+ referrerpolicy?:
299
+ | 'no-referrer'
300
+ | 'no-referrer-when-downgrade'
301
+ | 'origin'
302
+ | 'origin-when-cross-origin'
303
+ | 'same-origin'
304
+ | 'strict-origin'
305
+ | 'strict-origin-when-cross-origin'
306
+ | 'unsafe-url';
307
+ rel?: string;
308
+ shape?: 'rect' | 'circle' | 'poly' | 'default';
309
+ target?: '_self' | '_blank' | '_parent' | '_top' | string;
310
+ };
311
+
312
+ // Audio element
313
+ audio: BaseAttr &
314
+ MediaElementEvents & {
315
+ autoplay?: boolean;
316
+ controls?: boolean;
317
+ crossorigin?: 'anonymous' | 'use-credentials' | '';
318
+ loop?: boolean;
319
+ muted?: boolean;
320
+ preload?: 'none' | 'metadata' | 'auto' | '';
321
+ src?: string;
322
+ };
323
+
324
+ // Base element
325
+ base: BaseAttr & {
326
+ href?: string;
327
+ target?: '_self' | '_blank' | '_parent' | '_top' | string;
328
+ };
329
+
330
+ // Body element
331
+ body: BaseAttr & {};
332
+
333
+ // BR element
334
+ br: BaseAttr & {};
335
+
336
+ // Button element
337
+ button: BaseAttr & {
338
+ disabled?: boolean;
339
+ form?: string;
340
+ formaction?: string;
341
+ formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
342
+ formmethod?: 'get' | 'post' | 'dialog';
343
+ formnovalidate?: boolean;
344
+ formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
345
+ name?: string;
346
+ type?: 'submit' | 'reset' | 'button';
347
+ value?: string;
348
+ };
349
+
350
+ // Canvas element
351
+ canvas: BaseAttr & {
352
+ height?: number | string;
353
+ width?: number | string;
354
+ };
355
+
356
+ // Table caption element
357
+ caption: BaseAttr & {};
358
+
359
+ // Col element
360
+ col: BaseAttr & {
361
+ span?: number | string;
362
+ };
363
+
364
+ // Colgroup element
365
+ colgroup: BaseAttr & {
366
+ span?: number | string;
367
+ };
368
+
369
+ // Data element
370
+ data: BaseAttr & {
371
+ value?: string;
372
+ };
373
+
374
+ // Datalist element
375
+ datalist: BaseAttr & {};
376
+
377
+ // Del element
378
+ del: BaseAttr & {
379
+ cite?: string;
380
+ datetime?: string;
381
+ };
382
+
383
+ // Details element
384
+ details: BaseAttr &
385
+ DetailsElementEvents & {
386
+ open?: boolean;
387
+ };
388
+
389
+ // Dialog element
390
+ dialog: BaseAttr &
391
+ DialogElementEvents & {
392
+ open?: boolean;
393
+ };
394
+
395
+ // Embed element
396
+ embed: BaseAttr & {
397
+ height?: number | string;
398
+ src?: string;
399
+ type?: string;
400
+ width?: number | string;
401
+ };
402
+
403
+ // Fieldset element
404
+ fieldset: BaseAttr & {
405
+ disabled?: boolean;
406
+ form?: string;
407
+ name?: string;
408
+ };
409
+
410
+ // Form element
411
+ form: BaseAttr &
412
+ FormElementEvents & {
413
+ 'accept-charset'?: string;
414
+ action?: string;
415
+ autocomplete?: 'on' | 'off';
416
+ enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
417
+ method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
418
+
419
+ name?: string;
420
+ novalidate?: boolean;
421
+ target?: '_self' | '_blank' | '_parent' | '_top' | string;
422
+ };
423
+
424
+ // Head element
425
+ head: BaseAttr & {};
426
+
427
+ // HR element
428
+ hr: BaseAttr & {};
429
+
430
+ // HTML element
431
+ html: BaseAttr & {};
432
+
433
+ // IFrame element
434
+ iframe: BaseAttr &
435
+ ImageElementEvents & {
436
+ allow?: string;
437
+ allowfullscreen?: boolean;
438
+ allowpaymentrequest?: boolean;
439
+ height?: number | string;
440
+ loading?: 'eager' | 'lazy';
441
+ name?: string;
442
+ referrerpolicy?:
443
+ | 'no-referrer'
444
+ | 'no-referrer-when-downgrade'
445
+ | 'origin'
446
+ | 'origin-when-cross-origin'
447
+ | 'same-origin'
448
+ | 'strict-origin'
449
+ | 'strict-origin-when-cross-origin'
450
+ | 'unsafe-url';
451
+ sandbox?: string;
452
+ src?: string;
453
+ srcdoc?: string;
454
+ width?: number | string;
455
+ };
456
+
457
+ // Image element
458
+ img: BaseAttr &
459
+ ImageElementEvents & {
460
+ alt?: string;
461
+ crossorigin?: 'anonymous' | 'use-credentials' | '';
462
+ decoding?: 'sync' | 'async' | 'auto';
463
+ height?: number | string;
464
+ ismap?: boolean;
465
+ loading?: 'eager' | 'lazy';
466
+ referrerpolicy?:
467
+ | 'no-referrer'
468
+ | 'no-referrer-when-downgrade'
469
+ | 'origin'
470
+ | 'origin-when-cross-origin'
471
+ | 'same-origin'
472
+ | 'strict-origin'
473
+ | 'strict-origin-when-cross-origin'
474
+ | 'unsafe-url';
475
+ sizes?: string;
476
+ src?: string;
477
+ srcset?: string;
478
+ usemap?: string;
479
+ width?: number | string;
480
+ };
481
+
482
+ // Input element
483
+ input: BaseAttr & {
484
+ accept?: string;
485
+ alt?: string;
486
+ autocomplete?: string;
487
+ checked?: boolean;
488
+ dirname?: string;
489
+ disabled?: boolean;
490
+ form?: string;
491
+ formaction?: string;
492
+ formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
493
+ formmethod?: 'get' | 'post';
494
+ formnovalidate?: boolean;
495
+ formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
496
+ height?: number | string;
497
+ list?: string;
498
+ max?: number | string;
499
+ maxlength?: number | string;
500
+ min?: number | string;
501
+ minlength?: number | string;
502
+ multiple?: boolean;
503
+ name?: string;
504
+ pattern?: string;
505
+ placeholder?: string;
506
+ readonly?: boolean;
507
+ required?: boolean;
508
+ size?: number | string;
509
+ src?: string;
510
+ step?: number | string;
511
+ type?:
512
+ | 'button'
513
+ | 'checkbox'
514
+ | 'color'
515
+ | 'date'
516
+ | 'datetime-local'
517
+ | 'email'
518
+ | 'file'
519
+ | 'hidden'
520
+ | 'image'
521
+ | 'month'
522
+ | 'number'
523
+ | 'password'
524
+ | 'radio'
525
+ | 'range'
526
+ | 'reset'
527
+ | 'search'
528
+ | 'submit'
529
+ | 'tel'
530
+ | 'text'
531
+ | 'time'
532
+ | 'url'
533
+ | 'week';
534
+ value?: string;
535
+ width?: number | string;
536
+ };
537
+
538
+ // Ins element
539
+ ins: BaseAttr & {
540
+ cite?: string;
541
+ datetime?: string;
542
+ };
543
+
544
+ // Label element
545
+ label: BaseAttr & {
546
+ for?: string;
547
+ };
548
+
549
+ // Legend element
550
+ legend: BaseAttr & {};
551
+
552
+ // LI element
553
+ li: BaseAttr & {
554
+ value?: number | string;
555
+ };
556
+
557
+ // Link element
558
+ link: BaseAttr &
559
+ ImageElementEvents & {
560
+ as?: string;
561
+ crossorigin?: 'anonymous' | 'use-credentials' | '';
562
+ disabled?: boolean;
563
+ href?: string;
564
+ hreflang?: string;
565
+ imagesizes?: string;
566
+ imagesrcset?: string;
567
+ integrity?: string;
568
+ media?: string;
569
+ referrerpolicy?:
570
+ | 'no-referrer'
571
+ | 'no-referrer-when-downgrade'
572
+ | 'origin'
573
+ | 'origin-when-cross-origin'
574
+ | 'same-origin'
575
+ | 'strict-origin'
576
+ | 'strict-origin-when-cross-origin'
577
+ | 'unsafe-url';
578
+ rel?: string;
579
+ sizes?: string;
580
+ type?: string;
581
+ };
582
+
583
+ // Map element
584
+ map: BaseAttr & {
585
+ name?: string;
586
+ };
587
+
588
+ // Menu element
589
+ menu: BaseAttr & {};
590
+
591
+ // Meta element
592
+ meta: BaseAttr & {
593
+ charset?: string;
594
+ content?: string;
595
+ 'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
596
+ name?: string;
597
+ };
598
+
599
+ // Meter element
600
+ meter: BaseAttr & {
601
+ form?: string;
602
+ high?: number | string;
603
+ low?: number | string;
604
+ max?: number | string;
605
+ min?: number | string;
606
+ optimum?: number | string;
607
+ value?: number | string;
608
+ };
609
+
610
+ // Object element
611
+ object: BaseAttr &
612
+ ImageElementEvents & {
613
+ data?: string;
614
+ form?: string;
615
+ height?: number | string;
616
+ name?: string;
617
+ type?: string;
618
+ usemap?: string;
619
+ width?: number | string;
620
+ };
621
+
622
+ // OL element
623
+ ol: BaseAttr & {
624
+ reversed?: boolean;
625
+ start?: number | string;
626
+ type?: '1' | 'a' | 'A' | 'i' | 'I';
627
+ };
628
+
629
+ // Optgroup element
630
+ optgroup: BaseAttr & {
631
+ disabled?: boolean;
632
+ label?: string;
633
+ };
634
+
635
+ // Option element
636
+ option: BaseAttr & {
637
+ disabled?: boolean;
638
+ label?: string;
639
+ selected?: boolean;
640
+ value?: string;
641
+ };
642
+
643
+ // Output element
644
+ output: BaseAttr & {
645
+ for?: string;
646
+ form?: string;
647
+ name?: string;
648
+ };
649
+
650
+ // Picture element
651
+ picture: BaseAttr & {};
652
+
653
+ // Pre element
654
+ pre: BaseAttr & {};
655
+
656
+ // Progress element
657
+ progress: BaseAttr & {
658
+ max?: number | string;
659
+ value?: number | string;
660
+ };
661
+
662
+ // Quote element (q and blockquote)
663
+ q: BaseAttr & {
664
+ cite?: string;
665
+ };
666
+
667
+ blockquote: BaseAttr & {
668
+ cite?: string;
669
+ };
670
+
671
+ // Script element
672
+ script: BaseAttr &
673
+ ImageElementEvents & {
674
+ async?: boolean;
675
+ crossorigin?: 'anonymous' | 'use-credentials' | '';
676
+ defer?: boolean;
677
+ integrity?: string;
678
+ nomodule?: boolean;
679
+ referrerpolicy?:
680
+ | 'no-referrer'
681
+ | 'no-referrer-when-downgrade'
682
+ | 'origin'
683
+ | 'origin-when-cross-origin'
684
+ | 'same-origin'
685
+ | 'strict-origin'
686
+ | 'strict-origin-when-cross-origin'
687
+ | 'unsafe-url';
688
+ src?: string;
689
+ type?: string;
690
+ };
691
+
692
+ // Select element
693
+ select: BaseAttr & {
694
+ autocomplete?: string;
695
+ disabled?: boolean;
696
+ form?: string;
697
+ multiple?: boolean;
698
+ name?: string;
699
+ required?: boolean;
700
+ size?: number | string;
701
+ };
702
+
703
+ // Slot element
704
+ slot: BaseAttr & {
705
+ name?: string;
706
+ };
707
+
708
+ // Source element
709
+ source: BaseAttr & {
710
+ height?: number | string;
711
+ media?: string;
712
+ sizes?: string;
713
+ src?: string;
714
+ srcset?: string;
715
+ type?: string;
716
+ width?: number | string;
717
+ };
718
+
719
+ // Style element
720
+ style: BaseAttr &
721
+ ImageElementEvents & {
722
+ media?: string;
723
+ };
724
+
725
+ // Table element
726
+ table: BaseAttr & {};
727
+
728
+ // Table body/footer/header elements
729
+ tbody: BaseAttr & {};
730
+
731
+ tfoot: BaseAttr & {};
732
+
733
+ thead: BaseAttr & {};
734
+
735
+ // Table cell elements
736
+ td: BaseAttr & {
737
+ colspan?: number | string;
738
+ headers?: string;
739
+ rowspan?: number | string;
740
+ };
741
+
742
+ th: BaseAttr & {
743
+ abbr?: string;
744
+ colspan?: number | string;
745
+ headers?: string;
746
+ rowspan?: number | string;
747
+ scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
748
+ };
749
+
750
+ // Template element
751
+ template: BaseAttr & {};
752
+
753
+ // Textarea element
754
+ textarea: BaseAttr & {
755
+ autocomplete?: string;
756
+ cols?: number | string;
757
+ dirname?: string;
758
+ disabled?: boolean;
759
+ form?: string;
760
+ maxlength?: number | string;
761
+ minlength?: number | string;
762
+ name?: string;
763
+ placeholder?: string;
764
+ readonly?: boolean;
765
+ required?: boolean;
766
+ rows?: number | string;
767
+ wrap?: 'hard' | 'soft' | 'off';
768
+ };
769
+
770
+ // Time element
771
+ time: BaseAttr & {
772
+ datetime?: string;
773
+ };
774
+
775
+ // Title element
776
+ title: BaseAttr & {};
777
+
778
+ // TR element
779
+ tr: BaseAttr & {};
780
+
781
+ // Track element
782
+ track: BaseAttr & {
783
+ default?: boolean;
784
+ kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
785
+ label?: string;
786
+ src?: string;
787
+ srclang?: string;
788
+ };
789
+
790
+ // UL element
791
+ ul: BaseAttr & {};
792
+
793
+ // Video element
794
+ video: BaseAttr &
795
+ MediaElementEvents & {
796
+ autoplay?: boolean;
797
+ controls?: boolean;
798
+ crossorigin?: 'anonymous' | 'use-credentials' | '';
799
+ height?: number | string;
800
+ loop?: boolean;
801
+ muted?: boolean;
802
+ playsinline?: boolean;
803
+ poster?: string;
804
+ preload?: 'none' | 'metadata' | 'auto' | '';
805
+ src?: string;
806
+ width?: number | string;
807
+ };
808
+
809
+ // Generic HTMLElement (no specific attributes beyond BaseEvent)
810
+ abbr: BaseAttr & {};
811
+ address: BaseAttr & {};
812
+ article: BaseAttr & {};
813
+ aside: BaseAttr & {};
814
+ b: BaseAttr & {};
815
+ bdi: BaseAttr & {};
816
+ bdo: BaseAttr & {};
817
+ cite: BaseAttr & {};
818
+ code: BaseAttr & {};
819
+ dd: BaseAttr & {};
820
+ dfn: BaseAttr & {};
821
+ div: BaseAttr & {};
822
+ dl: BaseAttr & {};
823
+ dt: BaseAttr & {};
824
+ em: BaseAttr & {};
825
+ figcaption: BaseAttr & {};
826
+ figure: BaseAttr & {};
827
+ footer: BaseAttr & {};
828
+ h1: BaseAttr & {};
829
+ h2: BaseAttr & {};
830
+ h3: BaseAttr & {};
831
+ h4: BaseAttr & {};
832
+ h5: BaseAttr & {};
833
+ h6: BaseAttr & {};
834
+ header: BaseAttr & {};
835
+ hgroup: BaseAttr & {};
836
+ i: BaseAttr & {};
837
+ kbd: BaseAttr & {};
838
+ main: BaseAttr & {};
839
+ mark: BaseAttr & {};
840
+ nav: BaseAttr & {};
841
+ noscript: BaseAttr & {};
842
+ p: BaseAttr & {};
843
+ rp: BaseAttr & {};
844
+ rt: BaseAttr & {};
845
+ ruby: BaseAttr & {};
846
+ s: BaseAttr & {};
847
+ samp: BaseAttr & {};
848
+ search: BaseAttr & {};
849
+ section: BaseAttr & {};
850
+ small: BaseAttr & {};
851
+ span: BaseAttr & {};
852
+ strong: BaseAttr & {};
853
+ sub: BaseAttr & {};
854
+ summary: BaseAttr & {};
855
+ sup: BaseAttr & {};
856
+ u: BaseAttr & {};
857
+ var: BaseAttr & {};
858
+ wbr: BaseAttr & {};
859
+
860
+ svg: BaseAttr & {
861
+ class?: string;
862
+ style?: string | Partial<CSSStyleDeclaration>;
863
+ width?: number | string;
864
+ height?: number | string;
865
+ viewBox?: string;
866
+ xmlns?: string;
867
+ fill?: string;
868
+ stroke?: string;
869
+ strokeWidth?: number | string;
870
+ strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
871
+ strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
872
+ strokeDasharray?: string;
873
+ strokeDashoffset?: number | string;
874
+ opacity?: number | string;
875
+ preserveAspectRatio?: string;
876
+ transform?: string;
877
+ x?: number | string;
878
+ y?: number | string;
879
+ rx?: number | string;
880
+ ry?: number | string;
881
+ r?: number | string;
882
+ cx?: number | string;
883
+ cy?: number | string;
884
+ d?: string;
885
+ points?: string;
886
+ pathLength?: number | string;
887
+ viewbox?: string;
888
+ role?: string;
889
+ focusable?: boolean | 'true' | 'false';
890
+ xlinkHref?: string; // legacy xlink:href
891
+ };
892
+ }
893
+
894
+ interface SVGAttributesMap {
895
+ a: AttributesMap['svg'] & { href?: string; x?: number | string; y?: number | string };
896
+ animate: AttributesMap['svg'] & {
897
+ attributeName?: string;
898
+ from?: string | number;
899
+ to?: string | number;
900
+ dur?: string;
901
+ repeatCount?: string | number;
902
+ };
903
+ animateMotion: AttributesMap['svg'] & { path?: string; dur?: string; rotate?: string };
904
+ animateTransform: AttributesMap['svg'] & { type?: string; from?: string; to?: string; dur?: string };
905
+ circle: AttributesMap['svg'] & { cx?: number | string; cy?: number | string; r?: number | string };
906
+ clipPath: AttributesMap['svg'] & { clipPathUnits?: 'userSpaceOnUse' | 'objectBoundingBox' };
907
+ defs: AttributesMap['svg'];
908
+ desc: AttributesMap['svg'];
909
+ ellipse: AttributesMap['svg'] & {
910
+ cx?: number | string;
911
+ cy?: number | string;
912
+ rx?: number | string;
913
+ ry?: number | string;
914
+ };
915
+
916
+ // Filter primitives (provide common props)
917
+ feBlend: AttributesMap['svg'] & { in?: string; in2?: string; mode?: string };
918
+ feColorMatrix: AttributesMap['svg'] & {
919
+ type?: 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';
920
+ values?: string;
921
+ };
922
+ feComponentTransfer: AttributesMap['svg'] & {};
923
+ feComposite: AttributesMap['svg'] & {
924
+ in?: string;
925
+ in2?: string;
926
+ operator?: string;
927
+ k1?: number | string;
928
+ k2?: number | string;
929
+ k3?: number | string;
930
+ k4?: number | string;
931
+ };
932
+ feConvolveMatrix: AttributesMap['svg'] & {
933
+ order?: string | number;
934
+ kernelMatrix?: string;
935
+ divisor?: string | number;
936
+ bias?: string | number;
937
+ };
938
+ feDiffuseLighting: AttributesMap['svg'] & {};
939
+ feDisplacementMap: AttributesMap['svg'] & {
940
+ in?: string;
941
+ in2?: string;
942
+ scale?: number | string;
943
+ xChannelSelector?: string;
944
+ yChannelSelector?: string;
945
+ };
946
+ feDistantLight: AttributesMap['svg'] & { azimuth?: number | string; elevation?: number | string };
947
+ feDropShadow: AttributesMap['svg'] & {
948
+ dx?: number | string;
949
+ dy?: number | string;
950
+ stdDeviation?: number | string;
951
+ floodColor?: string;
952
+ floodOpacity?: number | string;
953
+ };
954
+ feFlood: AttributesMap['svg'] & { floodColor?: string; floodOpacity?: number | string };
955
+ feFuncA: AttributesMap['svg'] & {};
956
+ feFuncB: AttributesMap['svg'] & {};
957
+ feFuncG: AttributesMap['svg'] & {};
958
+ feFuncR: AttributesMap['svg'] & {};
959
+ feGaussianBlur: AttributesMap['svg'] & { stdDeviation?: number | string; edgeMode?: string };
960
+ feImage: AttributesMap['svg'] & { href?: string };
961
+ feMerge: AttributesMap['svg'] & {};
962
+ feMergeNode: AttributesMap['svg'] & { in?: string };
963
+ feMorphology: AttributesMap['svg'] & { operator?: 'erode' | 'dilate'; radius?: number | string };
964
+ feOffset: AttributesMap['svg'] & { dx?: number | string; dy?: number | string };
965
+ fePointLight: AttributesMap['svg'] & { x?: number | string; y?: number | string; z?: number | string };
966
+ feSpecularLighting: AttributesMap['svg'] & {
967
+ specularConstant?: number | string;
968
+ specularExponent?: number | string;
969
+ surfaceScale?: number | string;
970
+ };
971
+ feSpotLight: AttributesMap['svg'] & {
972
+ x?: number | string;
973
+ y?: number | string;
974
+ z?: number | string;
975
+ pointsAtX?: number | string;
976
+ pointsAtY?: number | string;
977
+ pointsAtZ?: number | string;
978
+ specularExponent?: number | string;
979
+ limitingConeAngle?: number | string;
980
+ };
981
+ feTile: AttributesMap['svg'] & {};
982
+ feTurbulence: AttributesMap['svg'] & {
983
+ baseFrequency?: number | string;
984
+ numOctaves?: number | string;
985
+ seed?: number | string;
986
+ stitchTiles?: string;
987
+ type?: 'fractalNoise' | 'turbulence';
988
+ };
989
+
990
+ filter: AttributesMap['svg'] & {
991
+ x?: number | string;
992
+ y?: number | string;
993
+ width?: number | string;
994
+ height?: number | string;
995
+ filterUnits?: string;
996
+ primitiveUnits?: string;
997
+ };
998
+ foreignObject: AttributesMap['svg'] & {
999
+ x?: number | string;
1000
+ y?: number | string;
1001
+ width?: number | string;
1002
+ height?: number | string;
1003
+ };
1004
+ g: AttributesMap['svg'];
1005
+ image: AttributesMap['svg'] & {
1006
+ href?: string;
1007
+ x?: number | string;
1008
+ y?: number | string;
1009
+ width?: number | string;
1010
+ height?: number | string;
1011
+ };
1012
+ line: AttributesMap['svg'] & {
1013
+ x1?: number | string;
1014
+ y1?: number | string;
1015
+ x2?: number | string;
1016
+ y2?: number | string;
1017
+ };
1018
+ linearGradient: AttributesMap['svg'] & {
1019
+ x1?: number | string;
1020
+ y1?: number | string;
1021
+ x2?: number | string;
1022
+ y2?: number | string;
1023
+ gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
1024
+ gradientTransform?: string;
1025
+ };
1026
+ marker: AttributesMap['svg'] & {
1027
+ markerUnits?: string;
1028
+ markerWidth?: number | string;
1029
+ markerHeight?: number | string;
1030
+ refX?: number | string;
1031
+ refY?: number | string;
1032
+ orient?: string;
1033
+ };
1034
+ mask: AttributesMap['svg'] & {
1035
+ maskUnits?: string;
1036
+ maskContentUnits?: string;
1037
+ x?: number | string;
1038
+ y?: number | string;
1039
+ width?: number | string;
1040
+ height?: number | string;
1041
+ };
1042
+ metadata: AttributesMap['svg'];
1043
+ mpath: AttributesMap['svg'] & { href?: string };
1044
+ path: AttributesMap['svg'] & { d?: string; pathLength?: number | string };
1045
+ pattern: AttributesMap['svg'] & {
1046
+ patternUnits?: string;
1047
+ patternContentUnits?: string;
1048
+ width?: number | string;
1049
+ height?: number | string;
1050
+ x?: number | string;
1051
+ y?: number | string;
1052
+ };
1053
+ polygon: AttributesMap['svg'] & { points?: string };
1054
+ polyline: AttributesMap['svg'] & { points?: string };
1055
+ radialGradient: AttributesMap['svg'] & {
1056
+ cx?: number | string;
1057
+ cy?: number | string;
1058
+ r?: number | string;
1059
+ fx?: number | string;
1060
+ fy?: number | string;
1061
+ gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
1062
+ gradientTransform?: string;
1063
+ };
1064
+ rect: AttributesMap['svg'] & {
1065
+ x?: number | string;
1066
+ y?: number | string;
1067
+ width?: number | string;
1068
+ height?: number | string;
1069
+ rx?: number | string;
1070
+ ry?: number | string;
1071
+ };
1072
+ script: AttributesMap['svg'] & { href?: string; type?: string };
1073
+ set: AttributesMap['svg'] & { attributeName?: string; to?: string | number; begin?: string; dur?: string };
1074
+ stop: AttributesMap['svg'] & { offset?: number | string; stopColor?: string; stopOpacity?: number | string };
1075
+ style: AttributesMap['svg'] & { media?: string };
1076
+ svg: AttributesMap['svg'];
1077
+ switch: AttributesMap['svg'];
1078
+ symbol: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
1079
+ text: AttributesMap['svg'] & {
1080
+ x?: number | string;
1081
+ y?: number | string;
1082
+ dx?: number | string;
1083
+ dy?: number | string;
1084
+ textLength?: number | string;
1085
+ };
1086
+ textPath: AttributesMap['svg'] & { href?: string; startOffset?: number | string };
1087
+ title: AttributesMap['svg'];
1088
+ tspan: AttributesMap['svg'] & {
1089
+ x?: number | string;
1090
+ y?: number | string;
1091
+ dx?: number | string;
1092
+ dy?: number | string;
1093
+ };
1094
+ use: AttributesMap['svg'] & {
1095
+ href?: string;
1096
+ x?: number | string;
1097
+ y?: number | string;
1098
+ width?: number | string;
1099
+ height?: number | string;
1100
+ };
1101
+ view: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
1102
+ }
1103
+
1104
+ declare global {
1105
+ namespace JSX {
1106
+ type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
1107
+
1108
+ interface IntrinsicElements {
1109
+ // Document-level & metadata
1110
+ html: AttributesMap['html'];
1111
+ head: AttributesMap['head'];
1112
+ title: AttributesMap['title'];
1113
+ base: AttributesMap['base'];
1114
+ link: AttributesMap['link'];
1115
+ meta: AttributesMap['meta'];
1116
+
1117
+ // Sectioning
1118
+ body: AttributesMap['body'];
1119
+ header: AttributesMap['header'];
1120
+ footer: AttributesMap['footer'];
1121
+ nav: AttributesMap['nav'];
1122
+ main: AttributesMap['main'];
1123
+ section: AttributesMap['section'];
1124
+ article: AttributesMap['article'];
1125
+ aside: AttributesMap['aside'];
1126
+
1127
+ // Headings
1128
+ h1: AttributesMap['h1'];
1129
+ h2: AttributesMap['h2'];
1130
+ h3: AttributesMap['h3'];
1131
+ h4: AttributesMap['h4'];
1132
+ h5: AttributesMap['h5'];
1133
+ h6: AttributesMap['h6'];
1134
+
1135
+ // Text content
1136
+ p: AttributesMap['p'];
1137
+ pre: AttributesMap['pre'];
1138
+ code: AttributesMap['code'];
1139
+ strong: AttributesMap['strong'];
1140
+ small: AttributesMap['small'];
1141
+ em: AttributesMap['em'];
1142
+ br: AttributesMap['br'];
1143
+ i: AttributesMap['i'];
1144
+
1145
+ // Lists
1146
+ ul: AttributesMap['ul'];
1147
+ ol: AttributesMap['ol'];
1148
+ li: AttributesMap['li'];
1149
+
1150
+ // Tables
1151
+ table: AttributesMap['table'];
1152
+ thead: AttributesMap['thead'];
1153
+ tbody: AttributesMap['tbody'];
1154
+ tfoot: AttributesMap['tfoot'];
1155
+ tr: AttributesMap['tr'];
1156
+ th: AttributesMap['th'];
1157
+ td: AttributesMap['td'];
1158
+
1159
+ // Forms
1160
+ form: AttributesMap['form'];
1161
+ label: AttributesMap['label'];
1162
+ input: AttributesMap['input'];
1163
+ textarea: AttributesMap['textarea'];
1164
+ select: AttributesMap['select'];
1165
+ option: AttributesMap['option'];
1166
+ optgroup: AttributesMap['optgroup'];
1167
+ button: AttributesMap['button'];
1168
+ fieldset: AttributesMap['fieldset'];
1169
+ legend: AttributesMap['legend'];
1170
+ datalist: AttributesMap['datalist'];
1171
+ output: AttributesMap['output'];
1172
+
1173
+ // Media & embedded
1174
+ img: AttributesMap['img'];
1175
+ picture: AttributesMap['picture'];
1176
+ source: AttributesMap['source'];
1177
+ audio: AttributesMap['audio'];
1178
+ video: AttributesMap['video'];
1179
+ track: AttributesMap['track'];
1180
+ iframe: AttributesMap['iframe'];
1181
+ embed: AttributesMap['embed'];
1182
+ object: AttributesMap['object'];
1183
+ canvas: AttributesMap['canvas'];
1184
+
1185
+ // Interactive & misc
1186
+ a: AttributesMap['a'] & SVGAttributesMap['a'];
1187
+ area: AttributesMap['area'];
1188
+ map: AttributesMap['map'];
1189
+ details: AttributesMap['details'];
1190
+ dialog: AttributesMap['dialog'];
1191
+ summary: AttributesMap['summary'];
1192
+ slot: AttributesMap['slot'];
1193
+
1194
+ // Scripting & styles
1195
+ script: AttributesMap['script'];
1196
+ style: AttributesMap['style'];
1197
+
1198
+ // Semantic & phrasing
1199
+ figure: AttributesMap['figure'];
1200
+ figcaption: AttributesMap['figcaption'];
1201
+ blockquote: AttributesMap['blockquote'];
1202
+ q: AttributesMap['q'];
1203
+
1204
+ // Generic elements
1205
+ div: AttributesMap['div'];
1206
+ span: AttributesMap['span'];
1207
+ address: AttributesMap['address'];
1208
+ abbr: AttributesMap['abbr'];
1209
+ b: AttributesMap['b'];
1210
+ cite: AttributesMap['cite'];
1211
+ dl: AttributesMap['dl'];
1212
+ dt: AttributesMap['dt'];
1213
+ dd: AttributesMap['dd'];
1214
+ hr: AttributesMap['hr'];
1215
+
1216
+ // SVG
1217
+ svg: AttributesMap['svg'];
1218
+ // a: SVGAttributesMap['a'];
1219
+ animate: SVGAttributesMap['animate'];
1220
+ animateMotion: SVGAttributesMap['animateMotion'];
1221
+ animateTransform: SVGAttributesMap['animateTransform'];
1222
+ circle: SVGAttributesMap['circle'];
1223
+ clipPath: SVGAttributesMap['clipPath'];
1224
+ defs: SVGAttributesMap['defs'];
1225
+ desc: SVGAttributesMap['desc'];
1226
+ ellipse: SVGAttributesMap['ellipse'];
1227
+ feBlend: SVGAttributesMap['feBlend'];
1228
+ feColorMatrix: SVGAttributesMap['feColorMatrix'];
1229
+ feComponentTransfer: SVGAttributesMap['feComponentTransfer'];
1230
+ feComposite: SVGAttributesMap['feComposite'];
1231
+ feConvolveMatrix: SVGAttributesMap['feConvolveMatrix'];
1232
+ feDiffuseLighting: SVGAttributesMap['feDiffuseLighting'];
1233
+ feDisplacementMap: SVGAttributesMap['feDisplacementMap'];
1234
+ feDistantLight: SVGAttributesMap['feDistantLight'];
1235
+ feDropShadow: SVGAttributesMap['feDropShadow'];
1236
+ feFlood: SVGAttributesMap['feFlood'];
1237
+ feFuncA: SVGAttributesMap['feFuncA'];
1238
+ feFuncB: SVGAttributesMap['feFuncB'];
1239
+ feFuncG: SVGAttributesMap['feFuncG'];
1240
+ feFuncR: SVGAttributesMap['feFuncR'];
1241
+ feGaussianBlur: SVGAttributesMap['feGaussianBlur'];
1242
+ feImage: SVGAttributesMap['feImage'];
1243
+ feMerge: SVGAttributesMap['feMerge'];
1244
+ feMergeNode: SVGAttributesMap['feMergeNode'];
1245
+ feMorphology: SVGAttributesMap['feMorphology'];
1246
+ feOffset: SVGAttributesMap['feOffset'];
1247
+ fePointLight: SVGAttributesMap['fePointLight'];
1248
+ feSpecularLighting: SVGAttributesMap['feSpecularLighting'];
1249
+ feSpotLight: SVGAttributesMap['feSpotLight'];
1250
+ feTile: SVGAttributesMap['feTile'];
1251
+ feTurbulence: SVGAttributesMap['feTurbulence'];
1252
+ filter: SVGAttributesMap['filter'];
1253
+ foreignObject: SVGAttributesMap['foreignObject'];
1254
+ g: SVGAttributesMap['g'];
1255
+ image: SVGAttributesMap['image'];
1256
+ line: SVGAttributesMap['line'];
1257
+ linearGradient: SVGAttributesMap['linearGradient'];
1258
+ marker: SVGAttributesMap['marker'];
1259
+ mask: SVGAttributesMap['mask'];
1260
+ metadata: SVGAttributesMap['metadata'];
1261
+ mpath: SVGAttributesMap['mpath'];
1262
+ path: SVGAttributesMap['path'];
1263
+ pattern: SVGAttributesMap['pattern'];
1264
+ polygon: SVGAttributesMap['polygon'];
1265
+ polyline: SVGAttributesMap['polyline'];
1266
+ radialGradient: SVGAttributesMap['radialGradient'];
1267
+ rect: SVGAttributesMap['rect'];
1268
+ set: SVGAttributesMap['set'];
1269
+ stop: SVGAttributesMap['stop'];
1270
+ switch: SVGAttributesMap['switch'];
1271
+ symbol: SVGAttributesMap['symbol'];
1272
+ text: SVGAttributesMap['text'];
1273
+ textPath: SVGAttributesMap['textPath'];
1274
+ tspan: SVGAttributesMap['tspan'];
1275
+ use: SVGAttributesMap['use'];
1276
+ view: SVGAttributesMap['view'];
1277
+ }
1278
+
1279
+ interface IntrinsicAttributes {
1280
+ ref?: KTRef<any>;
1281
+ 'k-if'?: any;
1282
+ children?: KTRawContent;
1283
+ }
1284
+
1285
+ interface ElementChildrenAttribute {
1286
+ children: {};
1287
+ }
1288
+ }
1289
+ }
37
1290
 
38
1291
  interface KTMuiCheckboxProps {
39
1292
  value: string;
40
- label?: string | KTHTMLElement$1 | HTMLElement;
1293
+ label?: string | JSX.Element | HTMLElement;
41
1294
  checked?: boolean;
42
1295
  size?: 'small' | 'medium';
43
1296
  'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
@@ -56,13 +1309,13 @@ interface KTMuiCheckboxGroupProps {
56
1309
  row?: boolean;
57
1310
  }
58
1311
 
59
- type KTMuiCheckbox = KTHTMLElement$1 & {
1312
+ type KTMuiCheckbox = JSX.Element & {
60
1313
  checked: boolean;
61
1314
  value: string;
62
1315
  disabled: boolean;
63
1316
  };
64
1317
 
65
- type KTMuiCheckboxGroup = KTHTMLElement$1 & {
1318
+ type KTMuiCheckboxGroup = JSX.Element & {
66
1319
  value: string[];
67
1320
  disabled: boolean[];
68
1321
  disableAll: () => void;
@@ -82,12 +1335,12 @@ interface KTMuiDialogProps {
82
1335
  open?: boolean;
83
1336
  'kt:close'?: () => void;
84
1337
  title?: string;
85
- children?: HTMLElement | HTMLElement[] | string;
1338
+ children?: HTMLElement | HTMLElement[] | JSX.Element | JSX.Element[] | string;
86
1339
  actions?: HTMLElement | HTMLElement[];
87
1340
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
88
1341
  fullWidth?: boolean;
89
1342
  }
90
- type KTMuiDialog = KTHTMLElement$1 & {
1343
+ type KTMuiDialog = JSX.Element & {
91
1344
  /**
92
1345
  * Controls whether the dialog is open or closed
93
1346
  */
@@ -100,7 +1353,7 @@ type KTMuiDialog = KTHTMLElement$1 & {
100
1353
  declare function Dialog(props: KTMuiDialogProps): KTMuiDialog;
101
1354
 
102
1355
  interface FormLabelProps {
103
- children: string | HTMLElement | KTHTMLElement;
1356
+ children: string | HTMLElement | JSX.Element;
104
1357
  required?: boolean;
105
1358
  error?: boolean;
106
1359
  disabled?: boolean;
@@ -112,7 +1365,7 @@ interface FormLabelProps {
112
1365
  /**
113
1366
  * FormLabel component - mimics MUI FormLabel appearance and behavior
114
1367
  */
115
- declare function FormLabel(props: FormLabelProps): KTHTMLElement;
1368
+ declare function FormLabel(props: FormLabelProps): JSX.Element;
116
1369
 
117
1370
  interface LinearProgressProps {
118
1371
  class?: string;
@@ -121,7 +1374,7 @@ interface LinearProgressProps {
121
1374
  progress?: number;
122
1375
  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
123
1376
  }
124
- type KTMuiLinearProgress = KTHTMLElement$1 & {
1377
+ type KTMuiLinearProgress = JSX.Element & {
125
1378
  /**
126
1379
  * Reactive property to get or set the current progress value (0-100)
127
1380
  */
@@ -152,15 +1405,15 @@ interface KTMuiTextFieldProps<T extends InputTypes> {
152
1405
  multiline?: boolean;
153
1406
  rows?: number;
154
1407
  size?: 'small' | 'medium';
155
- 'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
156
- 'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
157
- 'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
158
- 'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
1408
+ 'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
1409
+ 'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
1410
+ 'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
1411
+ 'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
159
1412
  'kt:blur'?: () => void;
160
1413
  'kt:focus'?: () => void;
161
1414
  }
162
1415
 
163
- type KTMuiTextField = KTHTMLElement & {
1416
+ type KTMuiTextField = JSX.Element & {
164
1417
  /**
165
1418
  * Reactive `value` of the input field
166
1419
  */
@@ -217,7 +1470,7 @@ interface KTMuiRadioProps {
217
1470
  class?: string;
218
1471
  style?: string | Partial<CSSStyleDeclaration>;
219
1472
  value: string;
220
- label: string | KTHTMLElement$1 | HTMLElement;
1473
+ label: string | JSX.Element | HTMLElement;
221
1474
  checked?: boolean;
222
1475
  size?: 'small' | 'medium';
223
1476
  'kt:change'?: (checked: boolean, value: string) => void;
@@ -237,7 +1490,7 @@ interface KTMuiRadioGroupProps {
237
1490
  row?: boolean;
238
1491
  }
239
1492
 
240
- type KTMuiRadio = KTHTMLElement$1 & {
1493
+ type KTMuiRadio = JSX.Element & {
241
1494
  /**
242
1495
  * The value of the radio button
243
1496
  * @readonly
@@ -249,7 +1502,7 @@ type KTMuiRadio = KTHTMLElement$1 & {
249
1502
  */
250
1503
  checked: boolean;
251
1504
  };
252
- type KTMuiRadioGroup = KTHTMLElement$1 & {
1505
+ type KTMuiRadioGroup = JSX.Element & {
253
1506
  /**
254
1507
  * Reactive checked state of the radio button
255
1508
  */
@@ -281,10 +1534,20 @@ interface KTMuiSelectProps {
281
1534
  fullWidth?: boolean;
282
1535
  disabled?: boolean;
283
1536
  }
1537
+ type KTMuiSelect = JSX.Element & {
1538
+ /**
1539
+ * Reactive `value` of the select component
1540
+ */
1541
+ value: string;
1542
+ /**
1543
+ * Reactive `disabled` state of the select component
1544
+ */
1545
+ disabled: boolean;
1546
+ };
284
1547
  /**
285
1548
  * Select component - mimics MUI Select appearance and behavior
286
1549
  */
287
- declare function Select(props: KTMuiSelectProps): JSX.Element;
1550
+ declare function Select(props: KTMuiSelectProps): KTMuiSelect;
288
1551
 
289
1552
  declare function DownloadIcon(props: KTAttribute): JSX.Element;
290
1553
 
@@ -330,5 +1593,5 @@ declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
330
1593
 
331
1594
  declare function SelectAllIcon(props: KTAttribute): JSX.Element;
332
1595
 
333
- export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon as FileOpen, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
1596
+ export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
334
1597
  export type { KTMuiDialog, KTMuiLinearProgress, KTMuiRadio, KTMuiRadioGroup, KTMuiRadioProps, KTMuiSelectProps, KTMuiTextField, KTMuiTextFieldProps };