@ktjs/mui 0.20.2 → 0.23.2

package/dist/index.d.ts

@@ -1,3 +1,17 @@
+type otherstring = string & {};
+
+// declare function $throw(message: string): never;
+// declare const $warn: typeof console.warn;
+// declare const $error: typeof console.error;
+// declare const $debug: typeof console.debug;
+declare global {
+  const $throw: (message?: string) => never;
+  const $warn: typeof console.warn;
+  const $log: typeof console.log;
+  const $error: typeof console.error;
+  const $debug: typeof console.debug;
+}
+
 interface KTMuiAlertProps {
     class?: string;
     style?: string | Partial<CSSStyleDeclaration>;
@@ -5,46 +19,64 @@ interface KTMuiAlertProps {
     severity?: 'error' | 'warning' | 'info' | 'success';
     variant?: 'standard' | 'filled' | 'outlined';
     icon?: HTMLElement | false;
-    'kt:close'?: () => void;
+    'on:close'?: () => void;
 }
 declare function Alert(props: KTMuiAlertProps): JSX.Element;
 
-interface KTMuiButtonProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    children?: string | HTMLElement | JSX.Element;
-    variant?: 'contained' | 'outlined' | 'text';
-    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
-    size?: 'small' | 'medium' | 'large';
-    disabled?: boolean;
-    fullWidth?: boolean;
-    iconOnly?: boolean;
-    startIcon?: HTMLElement | JSX.Element;
-    endIcon?: HTMLElement | JSX.Element;
-    type?: 'button' | 'submit' | 'reset';
-    'on:click'?: (event: Event) => void;
+declare class KTComputed<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: true;
+    ktType: KTReactiveType;
+    constructor(_calculator: () => T, reactives: Array<KTReactive<unknown>>);
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value(): T;
+    set value(_newValue: T);
+    /**
+     * Register a callback when the value changes
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    /**
+     * Unregister a callback
+     * @param callback (newValue, oldValue) => xxx
+     */
+    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
 }
-/**
- * Button component - mimics MUI Button appearance and behavior
- */
-declare function Button(props: KTMuiButtonProps): JSX.Element;
 
-type otherstring = string & {};
+type KTReactive<T> = KTRef<T> | KTComputed<T>;
+type KTReactify<T> = T extends boolean ? KTReactive<boolean> : T extends any ? KTReactive<T> : never;
+type KTReactifyProps<T extends object> = {
+    [K in keyof T]: KTReactify<Exclude<T[K], undefined>> | T[K];
+};
+
+declare const enum KTReactiveType {
+    REF = 1,
+    COMPUTED = 2
+}
+type ReactiveChangeHandler<T> = (newValue: T, oldValue: T) => void;
 
-type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
 declare class KTRef<T> {
     /**
      * Indicates that this is a KTRef instance
      */
-    isKT: boolean;
-    constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
+    isKT: true;
+    ktType: KTReactiveType;
+    constructor(_value: T, _onChanges: Array<ReactiveChangeHandler<T>>);
     /**
      * If new value and old value are both nodes, the old one will be replaced in the DOM
      */
     get value(): T;
     set value(newValue: T);
-    addOnChange(callback: RefChangeHandler<T>): void;
-    removeOnChange(callback: RefChangeHandler<T>): boolean;
+    /**
+     * Register a callback when the value changes
+     * @param callback (newValue, oldValue) => xxx
+     */
+    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
 }
 
 type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
@@ -59,8 +91,24 @@ interface KTBaseAttribute {
 
   // # kt-specific attributes
   ref?: KTRef<JSX.Element>;
+
+  /**
+   * If a `KTRef` is bound, it will be reactive; otherwise, it will be static.
+   */
   'k-if'?: any;
 
+  /**
+   * Register two-way data binding between an input element and a KTRef.
+   * - Default to regist `input` event and `value` property(`checked` for checkboxes and radios).
+   */
+  'k-model'?: KTRef<any>;
+
+  /**
+   * Directly apply html string to `innerHTML`.
+   * - Would be reactive if `KTRef` instance is provided
+   */
+  'k-html'?: any;
+
   // # normal HTML attributes
   id?: string;
   class?: string;
@@ -114,202 +162,70 @@ interface KTBaseAttribute {
   method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
 }
 
-type KTPrefixedEventHandlers = {
+type KTPrefixedEventAttribute = {
   [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
 };
 
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
+type KTAttribute = KTBaseAttribute & KTPrefixedEventAttribute;
 
 // Base events available to all HTML elements
-interface BaseAttr {
-  [k: string]: any;
-
-  // # base attributes
-  class?: string;
-  className?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-
-  // # Events
-  // Mouse events
-  'on:click'?: (ev: PointerEvent) => void;
-  'on:dblclick'?: (ev: PointerEvent) => void;
-  'on:mousedown'?: (ev: PointerEvent) => void;
-  'on:mouseup'?: (ev: MouseEvent) => void;
-  'on:mousemove'?: (ev: MouseEvent) => void;
-  'on:mouseenter'?: (ev: MouseEvent) => void;
-  'on:mouseleave'?: (ev: MouseEvent) => void;
-  'on:mouseover'?: (ev: MouseEvent) => void;
-  'on:mouseout'?: (ev: MouseEvent) => void;
-  'on:contextmenu'?: (ev: PointerEvent) => void;
-
-  // Keyboard events
-  'on:keydown'?: (ev: KeyboardEvent) => void;
-  'on:keyup'?: (ev: KeyboardEvent) => void;
-  'on:keypress'?: (ev: KeyboardEvent) => void;
-
-  // Focus events
-  'on:focus'?: (ev: FocusEvent) => void;
-  'on:blur'?: (ev: FocusEvent) => void;
-  'on:focusin'?: (ev: FocusEvent) => void;
-  'on:focusout'?: (ev: FocusEvent) => void;
-
-  // Input events
-  'on:input'?: (ev: Event) => void;
-  'on:change'?: (ev: Event) => void;
-  'on:beforeinput'?: (ev: InputEvent) => void;
-
-  // Drag events
-  'on:drag'?: (ev: DragEvent) => void;
-  'on:dragstart'?: (ev: DragEvent) => void;
-  'on:dragend'?: (ev: DragEvent) => void;
-  'on:dragenter'?: (ev: DragEvent) => void;
-  'on:dragleave'?: (ev: DragEvent) => void;
-  'on:dragover'?: (ev: DragEvent) => void;
-  'on:drop'?: (ev: DragEvent) => void;
-
-  // Clipboard events
-  'on:copy'?: (ev: ClipboardEvent) => void;
-  'on:cut'?: (ev: ClipboardEvent) => void;
-  'on:paste'?: (ev: ClipboardEvent) => void;
-
-  // Touch events
-  'on:touchstart'?: (ev: TouchEvent) => void;
-  'on:touchmove'?: (ev: TouchEvent) => void;
-  'on:touchend'?: (ev: TouchEvent) => void;
-  'on:touchcancel'?: (ev: TouchEvent) => void;
-
-  // Wheel event
-  'on:wheel'?: (ev: WheelEvent) => void;
-
-  // Animation events
-  'on:animationstart'?: (ev: AnimationEvent) => void;
-  'on:animationend'?: (ev: AnimationEvent) => void;
-  'on:animationiteration'?: (ev: AnimationEvent) => void;
-
-  // Transition events
-  'on:transitionstart'?: (ev: TransitionEvent) => void;
-  'on:transitionend'?: (ev: TransitionEvent) => void;
-  'on:transitionrun'?: (ev: TransitionEvent) => void;
-  'on:transitioncancel'?: (ev: TransitionEvent) => void;
-
-  // Pointer events
-  'on:pointerdown'?: (ev: PointerEvent) => void;
-  'on:pointerup'?: (ev: PointerEvent) => void;
-  'on:pointermove'?: (ev: PointerEvent) => void;
-  'on:pointerenter'?: (ev: PointerEvent) => void;
-  'on:pointerleave'?: (ev: PointerEvent) => void;
-  'on:pointerover'?: (ev: PointerEvent) => void;
-  'on:pointerout'?: (ev: PointerEvent) => void;
-  'on:pointercancel'?: (ev: PointerEvent) => void;
-  'on:gotpointercapture'?: (ev: PointerEvent) => void;
-  'on:lostpointercapture'?: (ev: PointerEvent) => void;
-
-  // Selection events
-  'on:select'?: (ev: Event) => void;
-  'on:selectstart'?: (ev: Event) => void;
-
-  // Scroll event
-  'on:scroll'?: (ev: Event) => void;
-
-  // Resize event
-  'on:resize'?: (ev: UIEvent) => void;
-}
-
-// Form-specific events
-interface FormElementEvents {
-  'on:submit'?: (ev: SubmitEvent) => void;
-  'on:reset'?: (ev: Event) => void;
-  'on:invalid'?: (ev: Event) => void;
-}
-
-// Media-specific events
-interface MediaElementEvents {
-  'on:play'?: (ev: Event) => void;
-  'on:pause'?: (ev: Event) => void;
-  'on:playing'?: (ev: Event) => void;
-  'on:ended'?: (ev: Event) => void;
-  'on:canplay'?: (ev: Event) => void;
-  'on:canplaythrough'?: (ev: Event) => void;
-  'on:durationchange'?: (ev: Event) => void;
-  'on:emptied'?: (ev: Event) => void;
-  'on:loadeddata'?: (ev: Event) => void;
-  'on:loadedmetadata'?: (ev: Event) => void;
-  'on:loadstart'?: (ev: Event) => void;
-  'on:progress'?: (ev: ProgressEvent) => void;
-  'on:ratechange'?: (ev: Event) => void;
-  'on:seeked'?: (ev: Event) => void;
-  'on:seeking'?: (ev: Event) => void;
-  'on:stalled'?: (ev: Event) => void;
-  'on:suspend'?: (ev: Event) => void;
-  'on:timeupdate'?: (ev: Event) => void;
-  'on:volumechange'?: (ev: Event) => void;
-  'on:waiting'?: (ev: Event) => void;
-  'on:abort'?: (ev: UIEvent) => void;
-  'on:error'?: (ev: ErrorEvent) => void;
-}
-
-// Details-specific events
-interface DetailsElementEvents {
-  'on:toggle'?: (ev: Event) => void;
-}
+type BaseAttr = KTPrefixedEventAttribute &
+  KTReactifyProps<{
+    [k: string]: any;
 
-// Dialog-specific events
-interface DialogElementEvents {
-  'on:cancel'?: (ev: Event) => void;
-  'on:close'?: (ev: Event) => void;
-}
-
-// Image-specific events
-interface ImageElementEvents {
-  'on:load'?: (ev: Event) => void;
-  'on:error'?: (ev: ErrorEvent) => void;
-}
+    // # base attributes
+    class?: string;
+    className?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
+  }>;
 
 interface AttributesMap {
   // Anchor element
-  a: BaseAttr & {
-    download?: string;
-    href?: string;
-    hreflang?: string;
-    ping?: string;
-    referrerpolicy?:
-      | 'no-referrer'
-      | 'no-referrer-when-downgrade'
-      | 'origin'
-      | 'origin-when-cross-origin'
-      | 'same-origin'
-      | 'strict-origin'
-      | 'strict-origin-when-cross-origin'
-      | 'unsafe-url';
-    rel?: string;
-    target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    type?: string;
-  };
+  a: BaseAttr &
+    KTReactifyProps<{
+      download?: string;
+      href?: string;
+      hreflang?: string;
+      ping?: string;
+      referrerpolicy?:
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url';
+      rel?: string;
+      target?: '_self' | '_blank' | '_parent' | '_top' | string;
+      type?: string;
+    }>;
 
   // Area element
-  area: BaseAttr & {
-    alt?: string;
-    coords?: string;
-    download?: string;
-    href?: string;
-    ping?: string;
-    referrerpolicy?:
-      | 'no-referrer'
-      | 'no-referrer-when-downgrade'
-      | 'origin'
-      | 'origin-when-cross-origin'
-      | 'same-origin'
-      | 'strict-origin'
-      | 'strict-origin-when-cross-origin'
-      | 'unsafe-url';
-    rel?: string;
-    shape?: 'rect' | 'circle' | 'poly' | 'default';
-    target?: '_self' | '_blank' | '_parent' | '_top' | string;
-  };
+  area: BaseAttr &
+    KTReactifyProps<{
+      alt?: string;
+      coords?: string;
+      download?: string;
+      href?: string;
+      ping?: string;
+      referrerpolicy?:
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url';
+      rel?: string;
+      shape?: 'rect' | 'circle' | 'poly' | 'default';
+      target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    }>;
 
   // Audio element
   audio: BaseAttr &
-    MediaElementEvents & {
+    KTReactifyProps<{
       autoplay?: boolean;
       controls?: boolean;
       crossorigin?: 'anonymous' | 'use-credentials' | '';
@@ -317,97 +233,106 @@ interface AttributesMap {
       muted?: boolean;
       preload?: 'none' | 'metadata' | 'auto' | '';
       src?: string;
-    };
+    }>;
 
   // Base element
-  base: BaseAttr & {
-    href?: string;
-    target?: '_self' | '_blank' | '_parent' | '_top' | string;
-  };
+  base: BaseAttr &
+    KTReactifyProps<{
+      href?: string;
+      target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    }>;
 
   // Body element
-  body: BaseAttr & {};
+  body: BaseAttr & KTReactifyProps<{}>;
 
   // BR element
-  br: BaseAttr & {};
+  br: BaseAttr & KTReactifyProps<{}>;
 
   // Button element
-  button: BaseAttr & {
-    disabled?: boolean;
-    form?: string;
-    formaction?: string;
-    formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-    formmethod?: 'get' | 'post' | 'dialog';
-    formnovalidate?: boolean;
-    formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
-    name?: string;
-    type?: 'submit' | 'reset' | 'button';
-    value?: string;
-  };
+  button: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      form?: string;
+      formaction?: string;
+      formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+      formmethod?: 'get' | 'post' | 'dialog';
+      formnovalidate?: boolean;
+      formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
+      name?: string;
+      type?: 'submit' | 'reset' | 'button';
+      value?: string;
+    }>;
 
   // Canvas element
-  canvas: BaseAttr & {
-    height?: number | string;
-    width?: number | string;
-  };
+  canvas: BaseAttr &
+    KTReactifyProps<{
+      height?: number | string;
+      width?: number | string;
+    }>;
 
   // Table caption element
-  caption: BaseAttr & {};
+  caption: BaseAttr & KTReactifyProps<{}>;
 
   // Col element
-  col: BaseAttr & {
-    span?: number | string;
-  };
+  col: BaseAttr &
+    KTReactifyProps<{
+      span?: number | string;
+    }>;
 
   // Colgroup element
-  colgroup: BaseAttr & {
-    span?: number | string;
-  };
+  colgroup: BaseAttr &
+    KTReactifyProps<{
+      span?: number | string;
+    }>;
 
   // Data element
-  data: BaseAttr & {
-    value?: string;
-  };
+  data: BaseAttr &
+    KTReactifyProps<{
+      value?: string;
+    }>;
 
   // Datalist element
-  datalist: BaseAttr & {};
+  datalist: BaseAttr & KTReactifyProps<{}>;
 
   // Del element
-  del: BaseAttr & {
-    cite?: string;
-    datetime?: string;
-  };
+  del: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+      datetime?: string;
+    }>;
 
   // Details element
   details: BaseAttr &
-    DetailsElementEvents & {
+    KTReactifyProps<{
       open?: boolean;
-    };
+    }>;
 
   // Dialog element
   dialog: BaseAttr &
-    DialogElementEvents & {
+    KTReactifyProps<{
       open?: boolean;
-    };
+    }>;
 
   // Embed element
-  embed: BaseAttr & {
-    height?: number | string;
-    src?: string;
-    type?: string;
-    width?: number | string;
-  };
+  embed: BaseAttr &
+    KTReactifyProps<{
+      height?: number | string;
+      src?: string;
+      type?: string;
+      width?: number | string;
+    }>;
 
   // Fieldset element
-  fieldset: BaseAttr & {
-    disabled?: boolean;
-    form?: string;
-    name?: string;
-  };
+  fieldset: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      form?: string;
+      name?: string;
+    }>;
 
   // Form element
   form: BaseAttr &
-    FormElementEvents & {
+    KTReactifyProps<{
       'accept-charset'?: string;
       action?: string;
       autocomplete?: 'on' | 'off';
@@ -417,20 +342,20 @@ interface AttributesMap {
       name?: string;
       novalidate?: boolean;
       target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    };
+    }>;
 
   // Head element
-  head: BaseAttr & {};
+  head: BaseAttr & KTReactifyProps<{}>;
 
   // HR element
-  hr: BaseAttr & {};
+  hr: BaseAttr & KTReactifyProps<{}>;
 
   // HTML element
-  html: BaseAttr & {};
+  html: BaseAttr & KTReactifyProps<{}>;
 
   // IFrame element
   iframe: BaseAttr &
-    ImageElementEvents & {
+    KTReactifyProps<{
       allow?: string;
       allowfullscreen?: boolean;
       allowpaymentrequest?: boolean;
@@ -450,11 +375,11 @@ interface AttributesMap {
       src?: string;
       srcdoc?: string;
       width?: number | string;
-    };
+    }>;
 
   // Image element
   img: BaseAttr &
-    ImageElementEvents & {
+    KTReactifyProps<{
       alt?: string;
       crossorigin?: 'anonymous' | 'use-credentials' | '';
       decoding?: 'sync' | 'async' | 'auto';
@@ -475,86 +400,90 @@ interface AttributesMap {
       srcset?: string;
       usemap?: string;
       width?: number | string;
-    };
+    }>;
 
   // Input element
-  input: BaseAttr & {
-    accept?: string;
-    alt?: string;
-    autocomplete?: string;
-    checked?: boolean;
-    dirname?: string;
-    disabled?: boolean;
-    form?: string;
-    formaction?: string;
-    formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-    formmethod?: 'get' | 'post';
-    formnovalidate?: boolean;
-    formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
-    height?: number | string;
-    list?: string;
-    max?: number | string;
-    maxlength?: number | string;
-    min?: number | string;
-    minlength?: number | string;
-    multiple?: boolean;
-    name?: string;
-    pattern?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    size?: number | string;
-    src?: string;
-    step?: number | string;
-    type?:
-      | 'button'
-      | 'checkbox'
-      | 'color'
-      | 'date'
-      | 'datetime-local'
-      | 'email'
-      | 'file'
-      | 'hidden'
-      | 'image'
-      | 'month'
-      | 'number'
-      | 'password'
-      | 'radio'
-      | 'range'
-      | 'reset'
-      | 'search'
-      | 'submit'
-      | 'tel'
-      | 'text'
-      | 'time'
-      | 'url'
-      | 'week';
-    value?: string;
-    width?: number | string;
-  };
+  input: BaseAttr &
+    KTReactifyProps<{
+      accept?: string;
+      alt?: string;
+      autocomplete?: string;
+      checked?: boolean;
+      dirname?: string;
+      disabled?: boolean;
+      form?: string;
+      formaction?: string;
+      formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+      formmethod?: 'get' | 'post';
+      formnovalidate?: boolean;
+      formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
+      height?: number | string;
+      list?: string;
+      max?: number | string;
+      maxlength?: number | string;
+      min?: number | string;
+      minlength?: number | string;
+      multiple?: boolean;
+      name?: string;
+      pattern?: string;
+      placeholder?: string;
+      readonly?: boolean;
+      required?: boolean;
+      size?: number | string;
+      src?: string;
+      step?: number | string;
+      type?:
+        | 'button'
+        | 'checkbox'
+        | 'color'
+        | 'date'
+        | 'datetime-local'
+        | 'email'
+        | 'file'
+        | 'hidden'
+        | 'image'
+        | 'month'
+        | 'number'
+        | 'password'
+        | 'radio'
+        | 'range'
+        | 'reset'
+        | 'search'
+        | 'submit'
+        | 'tel'
+        | 'text'
+        | 'time'
+        | 'url'
+        | 'week';
+      value?: string;
+      width?: number | string;
+    }>;
 
   // Ins element
-  ins: BaseAttr & {
-    cite?: string;
-    datetime?: string;
-  };
+  ins: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+      datetime?: string;
+    }>;
 
   // Label element
-  label: BaseAttr & {
-    for?: string;
-  };
+  label: BaseAttr &
+    KTReactifyProps<{
+      for?: string;
+    }>;
 
   // Legend element
-  legend: BaseAttr & {};
+  legend: BaseAttr & KTReactifyProps<{}>;
 
   // LI element
-  li: BaseAttr & {
-    value?: number | string;
-  };
+  li: BaseAttr &
+    KTReactifyProps<{
+      value?: number | string;
+    }>;
 
   // Link element
   link: BaseAttr &
-    ImageElementEvents & {
+    KTReactifyProps<{
       as?: string;
       crossorigin?: 'anonymous' | 'use-credentials' | '';
       disabled?: boolean;
@@ -576,38 +505,41 @@ interface AttributesMap {
       rel?: string;
       sizes?: string;
       type?: string;
-    };
+    }>;
 
   // Map element
-  map: BaseAttr & {
-    name?: string;
-  };
+  map: BaseAttr &
+    KTReactifyProps<{
+      name?: string;
+    }>;
 
   // Menu element
-  menu: BaseAttr & {};
+  menu: BaseAttr & KTReactifyProps<{}>;
 
   // Meta element
-  meta: BaseAttr & {
-    charset?: string;
-    content?: string;
-    'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
-    name?: string;
-  };
+  meta: BaseAttr &
+    KTReactifyProps<{
+      charset?: string;
+      content?: string;
+      'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
+      name?: string;
+    }>;
 
   // Meter element
-  meter: BaseAttr & {
-    form?: string;
-    high?: number | string;
-    low?: number | string;
-    max?: number | string;
-    min?: number | string;
-    optimum?: number | string;
-    value?: number | string;
-  };
+  meter: BaseAttr &
+    KTReactifyProps<{
+      form?: string;
+      high?: number | string;
+      low?: number | string;
+      max?: number | string;
+      min?: number | string;
+      optimum?: number | string;
+      value?: number | string;
+    }>;
 
   // Object element
   object: BaseAttr &
-    ImageElementEvents & {
+    KTReactifyProps<{
       data?: string;
       form?: string;
       height?: number | string;
@@ -615,60 +547,67 @@ interface AttributesMap {
       type?: string;
       usemap?: string;
       width?: number | string;
-    };
+    }>;
 
   // OL element
-  ol: BaseAttr & {
-    reversed?: boolean;
-    start?: number | string;
-    type?: '1' | 'a' | 'A' | 'i' | 'I';
-  };
+  ol: BaseAttr &
+    KTReactifyProps<{
+      reversed?: boolean;
+      start?: number | string;
+      type?: '1' | 'a' | 'A' | 'i' | 'I';
+    }>;
 
   // Optgroup element
-  optgroup: BaseAttr & {
-    disabled?: boolean;
-    label?: string;
-  };
+  optgroup: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      label?: string;
+    }>;
 
   // Option element
-  option: BaseAttr & {
-    disabled?: boolean;
-    label?: string;
-    selected?: boolean;
-    value?: string;
-  };
+  option: BaseAttr &
+    KTReactifyProps<{
+      disabled?: boolean;
+      label?: string;
+      selected?: boolean;
+      value?: string;
+    }>;
 
   // Output element
-  output: BaseAttr & {
-    for?: string;
-    form?: string;
-    name?: string;
-  };
+  output: BaseAttr &
+    KTReactifyProps<{
+      for?: string;
+      form?: string;
+      name?: string;
+    }>;
 
   // Picture element
-  picture: BaseAttr & {};
+  picture: BaseAttr & KTReactifyProps<{}>;
 
   // Pre element
-  pre: BaseAttr & {};
+  pre: BaseAttr & KTReactifyProps<{}>;
 
   // Progress element
-  progress: BaseAttr & {
-    max?: number | string;
-    value?: number | string;
-  };
+  progress: BaseAttr &
+    KTReactifyProps<{
+      max?: number | string;
+      value?: number | string;
+    }>;
 
   // Quote element (q and blockquote)
-  q: BaseAttr & {
-    cite?: string;
-  };
+  q: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+    }>;
 
-  blockquote: BaseAttr & {
-    cite?: string;
-  };
+  blockquote: BaseAttr &
+    KTReactifyProps<{
+      cite?: string;
+    }>;
 
   // Script element
   script: BaseAttr &
-    ImageElementEvents & {
+    KTReactifyProps<{
       async?: boolean;
       crossorigin?: 'anonymous' | 'use-credentials' | '';
       defer?: boolean;
@@ -685,112 +624,120 @@ interface AttributesMap {
         | 'unsafe-url';
       src?: string;
       type?: string;
-    };
+    }>;
 
   // Select element
-  select: BaseAttr & {
-    autocomplete?: string;
-    disabled?: boolean;
-    form?: string;
-    multiple?: boolean;
-    name?: string;
-    required?: boolean;
-    size?: number | string;
-  };
+  select: BaseAttr &
+    KTReactifyProps<{
+      autocomplete?: string;
+      disabled?: boolean;
+      form?: string;
+      multiple?: boolean;
+      name?: string;
+      required?: boolean;
+      size?: number | string;
+    }>;
 
   // Slot element
-  slot: BaseAttr & {
-    name?: string;
-  };
+  slot: BaseAttr &
+    KTReactifyProps<{
+      name?: string;
+    }>;
 
   // Source element
-  source: BaseAttr & {
-    height?: number | string;
-    media?: string;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    type?: string;
-    width?: number | string;
-  };
+  source: BaseAttr &
+    KTReactifyProps<{
+      height?: number | string;
+      media?: string;
+      sizes?: string;
+      src?: string;
+      srcset?: string;
+      type?: string;
+      width?: number | string;
+    }>;
 
   // Style element
   style: BaseAttr &
-    ImageElementEvents & {
+    KTReactifyProps<{
       media?: string;
-    };
+    }>;
 
   // Table element
-  table: BaseAttr & {};
+  table: BaseAttr & KTReactifyProps<{}>;
 
   // Table body/footer/header elements
-  tbody: BaseAttr & {};
+  tbody: BaseAttr & KTReactifyProps<{}>;
 
-  tfoot: BaseAttr & {};
+  tfoot: BaseAttr & KTReactifyProps<{}>;
 
-  thead: BaseAttr & {};
+  thead: BaseAttr & KTReactifyProps<{}>;
 
   // Table cell elements
-  td: BaseAttr & {
-    colspan?: number | string;
-    headers?: string;
-    rowspan?: number | string;
-  };
-
-  th: BaseAttr & {
-    abbr?: string;
-    colspan?: number | string;
-    headers?: string;
-    rowspan?: number | string;
-    scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
-  };
+  td: BaseAttr &
+    KTReactifyProps<{
+      colspan?: number | string;
+      headers?: string;
+      rowspan?: number | string;
+    }>;
+
+  th: BaseAttr &
+    KTReactifyProps<{
+      abbr?: string;
+      colspan?: number | string;
+      headers?: string;
+      rowspan?: number | string;
+      scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
+    }>;
 
   // Template element
-  template: BaseAttr & {};
+  template: BaseAttr & KTReactifyProps<{}>;
 
   // Textarea element
-  textarea: BaseAttr & {
-    autocomplete?: string;
-    cols?: number | string;
-    dirname?: string;
-    disabled?: boolean;
-    form?: string;
-    maxlength?: number | string;
-    minlength?: number | string;
-    name?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    rows?: number | string;
-    wrap?: 'hard' | 'soft' | 'off';
-  };
+  textarea: BaseAttr &
+    KTReactifyProps<{
+      autocomplete?: string;
+      cols?: number | string;
+      dirname?: string;
+      disabled?: boolean;
+      form?: string;
+      maxlength?: number | string;
+      minlength?: number | string;
+      name?: string;
+      placeholder?: string;
+      readonly?: boolean;
+      required?: boolean;
+      rows?: number | string;
+      wrap?: 'hard' | 'soft' | 'off';
+    }>;
 
   // Time element
-  time: BaseAttr & {
-    datetime?: string;
-  };
+  time: BaseAttr &
+    KTReactifyProps<{
+      datetime?: string;
+    }>;
 
   // Title element
-  title: BaseAttr & {};
+  title: BaseAttr & KTReactifyProps<{}>;
 
   // TR element
-  tr: BaseAttr & {};
+  tr: BaseAttr & KTReactifyProps<{}>;
 
   // Track element
-  track: BaseAttr & {
-    default?: boolean;
-    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    label?: string;
-    src?: string;
-    srclang?: string;
-  };
+  track: BaseAttr &
+    KTReactifyProps<{
+      default?: boolean;
+      kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+      label?: string;
+      src?: string;
+      srclang?: string;
+    }>;
 
   // UL element
-  ul: BaseAttr & {};
+  ul: BaseAttr & KTReactifyProps<{}>;
 
   // Video element
   video: BaseAttr &
-    MediaElementEvents & {
+    KTReactifyProps<{
       autoplay?: boolean;
       controls?: boolean;
       crossorigin?: 'anonymous' | 'use-credentials' | '';
@@ -802,58 +749,58 @@ interface AttributesMap {
       preload?: 'none' | 'metadata' | 'auto' | '';
       src?: string;
       width?: number | string;
-    };
+    }>;
 
   // Generic HTMLElement (no specific attributes beyond BaseEvent)
-  abbr: BaseAttr & {};
-  address: BaseAttr & {};
-  article: BaseAttr & {};
-  aside: BaseAttr & {};
-  b: BaseAttr & {};
-  bdi: BaseAttr & {};
-  bdo: BaseAttr & {};
-  cite: BaseAttr & {};
-  code: BaseAttr & {};
-  dd: BaseAttr & {};
-  dfn: BaseAttr & {};
-  div: BaseAttr & {};
-  dl: BaseAttr & {};
-  dt: BaseAttr & {};
-  em: BaseAttr & {};
-  figcaption: BaseAttr & {};
-  figure: BaseAttr & {};
-  footer: BaseAttr & {};
-  h1: BaseAttr & {};
-  h2: BaseAttr & {};
-  h3: BaseAttr & {};
-  h4: BaseAttr & {};
-  h5: BaseAttr & {};
-  h6: BaseAttr & {};
-  header: BaseAttr & {};
-  hgroup: BaseAttr & {};
-  i: BaseAttr & {};
-  kbd: BaseAttr & {};
-  main: BaseAttr & {};
-  mark: BaseAttr & {};
-  nav: BaseAttr & {};
-  noscript: BaseAttr & {};
-  p: BaseAttr & {};
-  rp: BaseAttr & {};
-  rt: BaseAttr & {};
-  ruby: BaseAttr & {};
-  s: BaseAttr & {};
-  samp: BaseAttr & {};
-  search: BaseAttr & {};
-  section: BaseAttr & {};
-  small: BaseAttr & {};
-  span: BaseAttr & {};
-  strong: BaseAttr & {};
-  sub: BaseAttr & {};
-  summary: BaseAttr & {};
-  sup: BaseAttr & {};
-  u: BaseAttr & {};
-  var: BaseAttr & {};
-  wbr: BaseAttr & {};
+  abbr: BaseAttr & KTReactifyProps<{}>;
+  address: BaseAttr & KTReactifyProps<{}>;
+  article: BaseAttr & KTReactifyProps<{}>;
+  aside: BaseAttr & KTReactifyProps<{}>;
+  b: BaseAttr & KTReactifyProps<{}>;
+  bdi: BaseAttr & KTReactifyProps<{}>;
+  bdo: BaseAttr & KTReactifyProps<{}>;
+  cite: BaseAttr & KTReactifyProps<{}>;
+  code: BaseAttr & KTReactifyProps<{}>;
+  dd: BaseAttr & KTReactifyProps<{}>;
+  dfn: BaseAttr & KTReactifyProps<{}>;
+  div: BaseAttr & KTReactifyProps<{}>;
+  dl: BaseAttr & KTReactifyProps<{}>;
+  dt: BaseAttr & KTReactifyProps<{}>;
+  em: BaseAttr & KTReactifyProps<{}>;
+  figcaption: BaseAttr & KTReactifyProps<{}>;
+  figure: BaseAttr & KTReactifyProps<{}>;
+  footer: BaseAttr & KTReactifyProps<{}>;
+  h1: BaseAttr & KTReactifyProps<{}>;
+  h2: BaseAttr & KTReactifyProps<{}>;
+  h3: BaseAttr & KTReactifyProps<{}>;
+  h4: BaseAttr & KTReactifyProps<{}>;
+  h5: BaseAttr & KTReactifyProps<{}>;
+  h6: BaseAttr & KTReactifyProps<{}>;
+  header: BaseAttr & KTReactifyProps<{}>;
+  hgroup: BaseAttr & KTReactifyProps<{}>;
+  i: BaseAttr & KTReactifyProps<{}>;
+  kbd: BaseAttr & KTReactifyProps<{}>;
+  main: BaseAttr & KTReactifyProps<{}>;
+  mark: BaseAttr & KTReactifyProps<{}>;
+  nav: BaseAttr & KTReactifyProps<{}>;
+  noscript: BaseAttr & KTReactifyProps<{}>;
+  p: BaseAttr & KTReactifyProps<{}>;
+  rp: BaseAttr & KTReactifyProps<{}>;
+  rt: BaseAttr & KTReactifyProps<{}>;
+  ruby: BaseAttr & KTReactifyProps<{}>;
+  s: BaseAttr & KTReactifyProps<{}>;
+  samp: BaseAttr & KTReactifyProps<{}>;
+  search: BaseAttr & KTReactifyProps<{}>;
+  section: BaseAttr & KTReactifyProps<{}>;
+  small: BaseAttr & KTReactifyProps<{}>;
+  span: BaseAttr & KTReactifyProps<{}>;
+  strong: BaseAttr & KTReactifyProps<{}>;
+  sub: BaseAttr & KTReactifyProps<{}>;
+  summary: BaseAttr & KTReactifyProps<{}>;
+  sup: BaseAttr & KTReactifyProps<{}>;
+  u: BaseAttr & KTReactifyProps<{}>;
+  var: BaseAttr & KTReactifyProps<{}>;
+  wbr: BaseAttr & KTReactifyProps<{}>;
 
   svg: BaseAttr & {
     class?: string;
@@ -1274,74 +1221,33 @@ declare global {
       tspan: SVGAttributesMap['tspan'];
       use: SVGAttributesMap['use'];
       view: SVGAttributesMap['view'];
-
-      // 'svg:svg': AttributesMap['svg'];
-      // 'svg:a': SVGAttributesMap['a'];
-      // 'svg:animate': SVGAttributesMap['animate'];
-      // 'svg:animateMotion': SVGAttributesMap['animateMotion'];
-      // 'svg:animateTransform': SVGAttributesMap['animateTransform'];
-      // 'svg:circle': SVGAttributesMap['circle'];
-      // 'svg:clipPath': SVGAttributesMap['clipPath'];
-      // 'svg:defs': SVGAttributesMap['defs'];
-      // 'svg:desc': SVGAttributesMap['desc'];
-      // 'svg:ellipse': SVGAttributesMap['ellipse'];
-      // 'svg:feBlend': SVGAttributesMap['feBlend'];
-      // 'svg:feColorMatrix': SVGAttributesMap['feColorMatrix'];
-      // 'svg:feComponentTransfer': SVGAttributesMap['feComponentTransfer'];
-      // 'svg:feComposite': SVGAttributesMap['feComposite'];
-      // 'svg:feConvolveMatrix': SVGAttributesMap['feConvolveMatrix'];
-      // 'svg:feDiffuseLighting': SVGAttributesMap['feDiffuseLighting'];
-      // 'svg:feDisplacementMap': SVGAttributesMap['feDisplacementMap'];
-      // 'svg:feDistantLight': SVGAttributesMap['feDistantLight'];
-      // 'svg:feDropShadow': SVGAttributesMap['feDropShadow'];
-      // 'svg:feFlood': SVGAttributesMap['feFlood'];
-      // 'svg:feFuncA': SVGAttributesMap['feFuncA'];
-      // 'svg:feFuncB': SVGAttributesMap['feFuncB'];
-      // 'svg:feFuncG': SVGAttributesMap['feFuncG'];
-      // 'svg:feFuncR': SVGAttributesMap['feFuncR'];
-      // 'svg:feGaussianBlur': SVGAttributesMap['feGaussianBlur'];
-      // 'svg:feImage': SVGAttributesMap['feImage'];
-      // 'svg:feMerge': SVGAttributesMap['feMerge'];
-      // 'svg:feMergeNode': SVGAttributesMap['feMergeNode'];
-      // 'svg:feMorphology': SVGAttributesMap['feMorphology'];
-      // 'svg:feOffset': SVGAttributesMap['feOffset'];
-      // 'svg:fePointLight': SVGAttributesMap['fePointLight'];
-      // 'svg:feSpecularLighting': SVGAttributesMap['feSpecularLighting'];
-      // 'svg:feSpotLight': SVGAttributesMap['feSpotLight'];
-      // 'svg:feTile': SVGAttributesMap['feTile'];
-      // 'svg:feTurbulence': SVGAttributesMap['feTurbulence'];
-      // 'svg:filter': SVGAttributesMap['filter'];
-      // 'svg:foreignObject': SVGAttributesMap['foreignObject'];
-      // 'svg:g': SVGAttributesMap['g'];
-      // 'svg:image': SVGAttributesMap['image'];
-      // 'svg:line': SVGAttributesMap['line'];
-      // 'svg:linearGradient': SVGAttributesMap['linearGradient'];
-      // 'svg:marker': SVGAttributesMap['marker'];
-      // 'svg:mask': SVGAttributesMap['mask'];
-      // 'svg:metadata': SVGAttributesMap['metadata'];
-      // 'svg:mpath': SVGAttributesMap['mpath'];
-      // 'svg:path': SVGAttributesMap['path'];
-      // 'svg:pattern': SVGAttributesMap['pattern'];
-      // 'svg:polygon': SVGAttributesMap['polygon'];
-      // 'svg:polyline': SVGAttributesMap['polyline'];
-      // 'svg:radialGradient': SVGAttributesMap['radialGradient'];
-      // 'svg:rect': SVGAttributesMap['rect'];
-      // 'svg:set': SVGAttributesMap['set'];
-      // 'svg:stop': SVGAttributesMap['stop'];
-      // 'svg:switch': SVGAttributesMap['switch'];
-      // 'svg:symbol': SVGAttributesMap['symbol'];
-      // 'svg:text': SVGAttributesMap['text'];
-      // 'svg:textPath': SVGAttributesMap['textPath'];
-      // 'svg:tspan': SVGAttributesMap['tspan'];
-      // 'svg:use': SVGAttributesMap['use'];
-      // 'svg:view': SVGAttributesMap['view'];
     }
 
-    interface IntrinsicAttributes {
+    type IntrinsicAttributes = {
+      /**
+       * Make a reference to the created element
+       */
       ref?: KTRef<any>;
+
+      /**
+       * Conditional rendering
+       * - Provide a `KTRef` to make it reactive
+       */
       'k-if'?: any;
+
+      /**
+       * 2-way binding
+       * - Provide a `KTRef` to make it reactive
+       */
+      'k-model'?: KTRef<any>;
+
+      /**
+       * Raw html binding
+       * - Provide a `KTRef` to make it reactive
+       */
+      'k-html'?: any;
       children?: KTRawContent;
-    }
+    };
 
     interface ElementChildrenAttribute {
       children: {};
@@ -1349,12 +1255,31 @@ declare global {
   }
 }
 
+interface KTMuiButtonProps {
+    class?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
+    children?: string | HTMLElement | JSX.Element | Array<string | HTMLElement | JSX.Element>;
+    variant?: 'contained' | 'outlined' | 'text';
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean | KTReactive<boolean>;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    startIcon?: SVGElement | HTMLElement | JSX.Element;
+    endIcon?: SVGElement | HTMLElement | JSX.Element;
+    type?: 'button' | 'submit' | 'reset';
+}
+/**
+ * Button component - mimics MUI Button appearance and behavior
+ */
+declare function Button(props: KTMuiButtonProps & KTPrefixedEventAttribute): JSX.Element;
+
 interface KTMuiCheckboxProps {
-  value: string;
+  value?: string;
   label?: string | JSX.Element | HTMLElement;
   checked?: boolean;
   size?: 'small' | 'medium';
-  'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
+  'on:change'?: (checked: boolean, value: string) => void;
   disabled?: boolean;
   color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
   indeterminate?: boolean;
@@ -1365,8 +1290,8 @@ interface KTMuiCheckboxGroupProps {
   style?: string;
   value?: string[];
   size?: 'small' | 'medium';
-  options: KTMuiCheckboxProps[];
-  'kt:change'?: ((values: string[]) => void) | KTRef<string[]>;
+  options: (Omit<KTMuiCheckboxProps, 'value'> & { value: string })[];
+  'on:change'?: (values: string[]) => void;
   row?: boolean;
 }
 
@@ -1376,12 +1301,7 @@ type KTMuiCheckbox = JSX.Element & {
   disabled: boolean;
 };
 
-type KTMuiCheckboxGroup = JSX.Element & {
-  value: string[];
-  disabled: boolean[];
-  disableAll: () => void;
-  enableAll: () => void;
-};
+type KTMuiCheckboxGroup = JSX.Element & {};
 
 /**
  * Checkbox component - mimics MUI Checkbox appearance and behavior
@@ -1392,21 +1312,21 @@ declare function Checkbox(props: KTMuiCheckboxProps): KTMuiCheckbox;
  */
 declare function CheckboxGroup(props: KTMuiCheckboxGroupProps): KTMuiCheckboxGroup;
 
+type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
 interface KTMuiDialogProps {
-    open?: boolean;
-    'kt:close'?: () => void;
+    /**
+     * Controls whether the dialog is open or closed
+     * - Provide a `KTReactive` to make it reactive
+     */
+    open?: boolean | KTReactive<boolean>;
+    'on:close'?: () => void;
     title?: string;
     children?: HTMLElement | HTMLElement[] | JSX.Element | JSX.Element[] | string;
     actions?: HTMLElement | HTMLElement[];
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-    fullWidth?: boolean;
+    size?: DialogSize | KTReactive<DialogSize>;
+    fullWidth?: boolean | KTReactive<boolean>;
 }
-type KTMuiDialog = JSX.Element & {
-    /**
-     * Controls whether the dialog is open or closed
-     */
-    open: boolean;
-};
+type KTMuiDialog = JSX.Element;
 /**
  * Dialog component - mimics MUI Dialog appearance and behavior
  * Only handles open/close state, title and content are passed as props
@@ -1435,15 +1355,7 @@ interface LinearProgressProps {
     progress?: number;
     color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
 }
-type KTMuiLinearProgress = JSX.Element & {
-    /**
-     * Reactive property to get or set the current progress value (0-100)
-     */
-    progress: number;
-};
-/**
- * LinearProgress component - mimics MUI LinearProgress appearance and behavior
- */
+type KTMuiLinearProgress = JSX.Element & {};
 declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress;
 
 type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
@@ -1451,90 +1363,102 @@ type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
 interface KTMuiTextFieldProps<T extends InputTypes = 'text'> {
+  /**
+   * Two-way binding for the input value
+   * - Provide a `KTReactive` to make it reactive
+   */
+  'k-model'?: T extends 'number' ? KTReactive<number> : KTReactive<string>;
+
   class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
-  label?: string;
-  placeholder?: string;
+  /**
+   * Label text for the input field
+   * - Provide a `KTReactive` to make it reactive
+   */
+  label?: string | KTReactive<string>;
+  /**
+   * Placeholder text for the input field
+   * - Provide a `KTReactive` to make it reactive
+   */
+  placeholder?: string | KTReactive<string>;
+  /**
+   * Current value of the input field
+   * - Provide a `KTReactive` to make it reactive
+   * - If both `value` and `k-model` are provided, `k-model` takes precedence
+   */
   value?: any;
-  type?: T;
-  disabled?: boolean;
-  readonly?: boolean;
-  required?: boolean;
-  error?: boolean;
-  helperText?: string;
-  fullWidth?: boolean;
-  multiline?: boolean;
-  rows?: number;
-  size?: 'small' | 'medium';
-  'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
-  'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
-  'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
-  'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
-  'kt:blur'?: () => void;
-  'kt:focus'?: () => void;
-}
-
-type KTMuiTextField = JSX.Element & {
   /**
-   * Reactive `value` of the input field
+   * Type of the input field
+   * - Provide a `KTReactive` to make it reactive
    */
-  value: string;
-
+  type?: T | KTReactive<T>;
   /**
-   * Reactive `label` of the input field
+   * Whether the input is disabled
+   * - Provide a `KTReactive` to make it reactive
    */
-  label: string;
-
+  disabled?: boolean | KTReactive<boolean>;
   /**
-   * Reactive `placeholder` of the input field
+   * Whether the input is readonly
+   * - Provide a `KTReactive` to make it reactive
+   *
+   * __Note:__ The correct prop name is `readOnly` with a capital "O". Same as it is in DOM.
    */
-  placeholder: string;
-
+  readOnly?: boolean | KTReactive<boolean>;
   /**
-   * Reactive `type` of the input field
+   * Whether the input is required
+   * - Provide a `KTReactive` to make it reactive
    */
-  type: string;
-
+  required?: boolean | KTReactive<boolean>;
   /**
-   * Reactive `disabled` state of the input field
+   * Whether the input is in error state
+   * - Provide a `KTReactive` to make it reactive
    */
-  disabled: boolean;
-
+  error?: boolean | KTReactive<boolean>;
   /**
-   * Reactive `readonly` state of the input field
+   * Helper text displayed below the input
+   * - Provide a `KTReactive` to make it reactive
    */
-  readonly: boolean;
-
+  helperText?: string | KTReactive<string>;
   /**
-   * `required` state of the input field
-   * @readonly
+   * Whether the input should take full width
+   * - Provide a `KTReactive` to make it reactive
    */
-  readonly required: boolean;
-
+  fullWidth?: boolean | KTReactive<boolean>;
   /**
-   * Reactive `error` state of the input field
+   * Whether the input is multiline (textarea)
+   * - Provide a `KTReactive` to make it reactive
    */
-  error: boolean;
-
+  multiline?: boolean | KTReactive<boolean>;
   /**
-   * Reactive `helperText` of the input field
+   * Number of rows for multiline input
+   * - Provide a `KTReactive` to make it reactive
    */
-  helperText: string;
-};
+  rows?: number | KTReactive<number>;
+  /**
+   * Size of the input field
+   * - Provide a `KTReactive` to make it reactive
+   */
+  size?: 'small' | 'medium' | KTReactive<'small' | 'medium'>;
+  'on:input'?: ChangeHandler<T extends 'number' ? number : string>;
+  'on-trim:input'?: ChangeHandler<T extends 'number' ? number : string>;
+  'on:change'?: ChangeHandler<T extends 'number' ? number : string>;
+  'on-trim:change'?: ChangeHandler<T extends 'number' ? number : string>;
+  'on:blur'?: () => void;
+  'on:focus'?: () => void;
+}
 
-/**
- * TextField component - mimics MUI TextField appearance and behavior
- */
-declare function TextField<T extends InputTypes>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
+type KTMuiTextField = JSX.Element;
+
+declare function TextField<T extends InputTypes = 'text'>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
 
 interface KTMuiRadioProps {
   class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
   value: string;
-  label: string | JSX.Element | HTMLElement;
+  label: string | JSX.Element | HTMLElement | KTReactive<string | JSX.Element | HTMLElement>;
   checked?: boolean;
   size?: 'small' | 'medium';
-  'kt:change'?: (checked: boolean, value: string) => void;
+  'on:change'?: (checked: boolean, value: string) => void;
   disabled?: boolean;
   color?: 'primary' | 'secondary' | 'default';
 }
@@ -1546,8 +1470,8 @@ interface KTMuiRadioGroupProps {
   name?: string;
   size?: 'small' | 'medium';
   options: KTMuiRadioProps[];
-  'kt:change'?: ((value: string) => void) | KTRef<string>;
-  'kt:click'?: (checked: boolean) => void;
+  'on:change'?: (value: string) => void;
+  'on:click'?: (checked: boolean) => void;
   row?: boolean;
 }
 
@@ -1579,37 +1503,60 @@ declare function Radio(props: KTMuiRadioProps): KTMuiRadio;
  */
 declare function RadioGroup(props: KTMuiRadioGroupProps): KTMuiRadioGroup;
 
+interface KTMuiProps {
+  class?: string | KTReactive<string>;
+  style?: string | Partial<CSSStyleDeclaration> | KTReactive<string> | KTReactive<Partial<CSSStyleDeclaration>>;
+  children?: JSX.Element | JSX.Element[];
+}
+
 interface KTMuiSelectOption {
     value: string;
     label: string;
 }
-interface KTMuiSelectProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
+interface KTMuiSelectProps extends KTMuiProps {
     size?: 'small' | 'medium';
     value?: string;
-    options: KTMuiSelectOption[];
-    label?: string;
+    options: KTMuiSelectOption[] | KTReactive<KTMuiSelectOption[]>;
+    label?: string | KTReactive<string>;
     placeholder?: string;
-    'kt:change'?: (value: string) => void;
+    'on:change'?: (value: string) => void;
     fullWidth?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | KTReactive<boolean>;
 }
-type KTMuiSelect = JSX.Element & {
-    /**
-     * Reactive `value` of the select component
-     */
-    value: string;
-    /**
-     * Reactive `disabled` state of the select component
-     */
-    disabled: boolean;
-};
+type KTMuiSelect = JSX.Element & {};
 /**
  * Select component - mimics MUI Select appearance and behavior
  */
 declare function Select(props: KTMuiSelectProps): KTMuiSelect;
 
+interface KTMuiCardProps extends KTMuiProps {
+    variant?: 'elevation' | 'outlined' | 'contained';
+    elevation?: number | KTReactive<number>;
+    square?: boolean | KTReactive<boolean>;
+    raised?: boolean | KTReactive<boolean>;
+    'on:click'?: (event: MouseEvent) => void;
+}
+type KTMuiCard = JSX.Element & {};
+/**
+ * Card component - mimics MUI Card appearance and behavior
+ */
+declare function Card(props: KTMuiCardProps): KTMuiCard;
+
+interface KTMuiSwitchProps extends KTMuiProps {
+    checked?: boolean;
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+    size?: 'small' | 'medium' | 'large';
+    'on:change'?: (checked: boolean, value?: string) => void;
+}
+type KTMuiSwitch = JSX.Element & {};
+/**
+ * Switch component - mimics MUI Switch appearance and behavior
+ */
+declare function Switch(props: KTMuiSwitchProps): KTMuiSwitch;
+
 declare function DownloadIcon(props: KTAttribute): JSX.Element;
 
 declare function CompressIcon(props: KTAttribute): JSX.Element;
@@ -1654,5 +1601,5 @@ declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
 
 declare function SelectAllIcon(props: KTAttribute): JSX.Element;
 
-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 };
-export type { KTMuiDialog, KTMuiLinearProgress, KTMuiRadio, KTMuiRadioGroup, KTMuiRadioProps, KTMuiSelectProps, KTMuiTextField, KTMuiTextFieldProps };
+export { Alert, Button, Card, 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, Switch, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
+export type { KTMuiCard, KTMuiCardProps, KTMuiDialog, KTMuiLinearProgress, KTMuiRadio, KTMuiRadioGroup, KTMuiRadioProps, KTMuiSelectProps, KTMuiSwitch, KTMuiSwitchProps, KTMuiTextField, KTMuiTextFieldProps };