@ktjs/mui 0.20.2 → 0.24.1

package/dist/index.d.ts

@@ -1,1575 +1,276 @@
-interface KTMuiAlertProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    children: string | HTMLElement | JSX.Element | Array<string | HTMLElement | JSX.Element>;
-    severity?: 'error' | 'warning' | 'info' | 'success';
-    variant?: 'standard' | 'filled' | 'outlined';
-    icon?: HTMLElement | false;
-    'kt:close'?: () => void;
-}
-declare function Alert(props: KTMuiAlertProps): JSX.Element;
+import { KTReactive, KTRawContent, KTMaybeReactive as KTMaybeReactive$1, JSX } from '@ktjs/core';
 
-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;
+interface KTMuiProps {
+  class?: string | KTReactive<string>;
+  style?: string | Partial<CSSStyleDeclaration> | KTReactive<string> | KTReactive<Partial<CSSStyleDeclaration>>;
+  children?: KTRawContent;
 }
-/**
- * Button component - mimics MUI Button appearance and behavior
- */
-declare function Button(props: KTMuiButtonProps): JSX.Element;
 
-type otherstring = string & {};
+type KTMaybeReactive<T> = T | KTReactive<T>;
 
-type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
-declare class KTRef<T> {
+interface KTMuiAlertProps extends KTMuiProps {
+    children: NonNullable<KTMuiProps['children']>;
     /**
-     * Indicates that this is a KTRef instance
+     * The severity of the alert. It defines the color and icon used in the alert.
+     * - 'error': Red color, error icon.
+     * - 'warning': Orange color, warning icon.
+     * - 'info': Blue color, info icon.
+     * - 'success': Green color, success icon.
+     * @default 'info'
      */
-    isKT: boolean;
-    constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
+    severity?: KTMaybeReactive$1<'error' | 'warning' | 'info' | 'success'>;
     /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     * The variant to use. It defines the style of the alert.
+     * - 'standard': The default style of the alert.
+     * - 'filled': A filled version of the alert with a background color.
+     * - 'outlined': An outlined version of the alert with a border.
+     * @default 'standard'
      */
-    get value(): T;
-    set value(newValue: T);
-    addOnChange(callback: RefChangeHandler<T>): void;
-    removeOnChange(callback: RefChangeHandler<T>): boolean;
+    variant?: KTMaybeReactive$1<'standard' | 'filled' | 'outlined'>;
+    /**
+     * The icon to display in the alert. It can be a custom icon or a boolean value.
+     * - If `true`, the default icon based on the severity will be displayed.
+     * - If `false`, no icon will be displayed.
+     * - If a custom JSX element is provided, it will be used as the icon.
+     * @default true
+     */
+    icon?: KTMaybeReactive$1<JSX.Element | boolean>;
+    /**
+     * The size of the icon. It can be any valid CSS size value (e.g., '24px', '1.5em', '2rem').
+     * - This prop is **only** applicable when the `icon` prop is set to `true`.
+     */
+    iconSize?: KTMaybeReactive$1<string>;
+    /**
+     * Callback fired when the component requests to be closed. If provided, a close icon button will be displayed.
+     */
+    'on:close'?: () => void;
 }
+declare function Alert(props: KTMuiAlertProps): JSX.Element;
 
-type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
-type KTAvailableContent = SingleContent | KTAvailableContent[];
-type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
-
+interface KTMuiButtonProps extends KTMuiProps {
+    variant?: KTMaybeReactive<'contained' | 'outlined' | 'text'>;
+    color?: KTMaybeReactive<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
+    size?: KTMaybeReactive<'small' | 'medium' | 'large'>;
+    disabled?: KTMaybeReactive<boolean>;
+    fullWidth?: KTMaybeReactive<boolean>;
+    iconOnly?: KTMaybeReactive<boolean>;
+    startIcon?: KTMaybeReactive<JSX.Element>;
+    endIcon?: KTMaybeReactive<JSX.Element>;
+    type?: KTMaybeReactive<'button' | 'submit' | 'reset'>;
+    'on:click'?: (e: MouseEvent) => void;
+    'on:dblclick'?: (e: MouseEvent) => void;
+}
 /**
- * Used to create enhanced HTML elements
+ * Button component - mimics MUI Button appearance and behavior
  */
-interface KTBaseAttribute {
-  [k: string]: any;
-
-  // # kt-specific attributes
-  ref?: KTRef<JSX.Element>;
-  'k-if'?: any;
-
-  // # normal HTML attributes
-  id?: string;
-  class?: string;
-  className?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-
-  type?:
-    | 'text'
-    | 'password'
-    | 'email'
-    | 'number'
-    | 'tel'
-    | 'url'
-    | 'search'
-    | 'date'
-    | 'datetime-local'
-    | 'time'
-    | 'month'
-    | 'week'
-    | 'color'
-    | 'range'
-    | 'file'
-    | 'checkbox'
-    | 'radio'
-    | 'hidden'
-    | 'submit'
-    | 'reset'
-    | 'button'
-    | 'image'
-    | otherstring;
-  for?: string;
-
-  name?: string;
-  title?: string;
-  placeholder?: string;
-  contenteditable?: boolean;
-  value?: any;
-  valueAsDate?: Date;
-  valueAsNumber?: number;
-  label?: string;
-  disabled?: boolean;
-
-  min?: string | number;
-  max?: string | number;
-  step?: string | number;
-
-  selected?: boolean;
-  checked?: boolean;
-
-  action?: string;
-  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
-}
-
-type KTPrefixedEventHandlers = {
-  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
-};
-
-type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
-
-// 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;
-}
-
-// 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;
-}
-
-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;
-  };
-
-  // 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;
-  };
-
-  // Audio element
-  audio: BaseAttr &
-    MediaElementEvents & {
-      autoplay?: boolean;
-      controls?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      loop?: boolean;
-      muted?: boolean;
-      preload?: 'none' | 'metadata' | 'auto' | '';
-      src?: string;
-    };
-
-  // Base element
-  base: BaseAttr & {
-    href?: string;
-    target?: '_self' | '_blank' | '_parent' | '_top' | string;
-  };
-
-  // Body element
-  body: BaseAttr & {};
-
-  // BR element
-  br: BaseAttr & {};
-
-  // 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;
-  };
-
-  // Canvas element
-  canvas: BaseAttr & {
-    height?: number | string;
-    width?: number | string;
-  };
-
-  // Table caption element
-  caption: BaseAttr & {};
-
-  // Col element
-  col: BaseAttr & {
-    span?: number | string;
-  };
-
-  // Colgroup element
-  colgroup: BaseAttr & {
-    span?: number | string;
-  };
-
-  // Data element
-  data: BaseAttr & {
-    value?: string;
-  };
-
-  // Datalist element
-  datalist: BaseAttr & {};
-
-  // Del element
-  del: BaseAttr & {
-    cite?: string;
-    datetime?: string;
-  };
-
-  // Details element
-  details: BaseAttr &
-    DetailsElementEvents & {
-      open?: boolean;
-    };
-
-  // Dialog element
-  dialog: BaseAttr &
-    DialogElementEvents & {
-      open?: boolean;
-    };
-
-  // Embed element
-  embed: BaseAttr & {
-    height?: number | string;
-    src?: string;
-    type?: string;
-    width?: number | string;
-  };
-
-  // Fieldset element
-  fieldset: BaseAttr & {
-    disabled?: boolean;
-    form?: string;
-    name?: string;
-  };
-
-  // Form element
-  form: BaseAttr &
-    FormElementEvents & {
-      'accept-charset'?: string;
-      action?: string;
-      autocomplete?: 'on' | 'off';
-      enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-      method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
-
-      name?: string;
-      novalidate?: boolean;
-      target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    };
-
-  // Head element
-  head: BaseAttr & {};
-
-  // HR element
-  hr: BaseAttr & {};
-
-  // HTML element
-  html: BaseAttr & {};
-
-  // IFrame element
-  iframe: BaseAttr &
-    ImageElementEvents & {
-      allow?: string;
-      allowfullscreen?: boolean;
-      allowpaymentrequest?: boolean;
-      height?: number | string;
-      loading?: 'eager' | 'lazy';
-      name?: string;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      sandbox?: string;
-      src?: string;
-      srcdoc?: string;
-      width?: number | string;
-    };
-
-  // Image element
-  img: BaseAttr &
-    ImageElementEvents & {
-      alt?: string;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      decoding?: 'sync' | 'async' | 'auto';
-      height?: number | string;
-      ismap?: boolean;
-      loading?: 'eager' | 'lazy';
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | 'unsafe-url';
-      sizes?: string;
-      src?: string;
-      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;
-  };
-
-  // Ins element
-  ins: BaseAttr & {
-    cite?: string;
-    datetime?: string;
-  };
-
-  // Label element
-  label: BaseAttr & {
-    for?: string;
-  };
-
-  // Legend element
-  legend: BaseAttr & {};
-
-  // LI element
-  li: BaseAttr & {
-    value?: number | string;
-  };
-
-  // Link element
-  link: BaseAttr &
-    ImageElementEvents & {
-      as?: string;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      disabled?: boolean;
-      href?: string;
-      hreflang?: string;
-      imagesizes?: string;
-      imagesrcset?: string;
-      integrity?: string;
-      media?: 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;
-      sizes?: string;
-      type?: string;
-    };
-
-  // Map element
-  map: BaseAttr & {
-    name?: string;
-  };
-
-  // Menu element
-  menu: BaseAttr & {};
-
-  // Meta element
-  meta: BaseAttr & {
-    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;
-  };
-
-  // Object element
-  object: BaseAttr &
-    ImageElementEvents & {
-      data?: string;
-      form?: string;
-      height?: number | string;
-      name?: string;
-      type?: string;
-      usemap?: string;
-      width?: number | string;
-    };
-
-  // OL element
-  ol: BaseAttr & {
-    reversed?: boolean;
-    start?: number | string;
-    type?: '1' | 'a' | 'A' | 'i' | 'I';
-  };
-
-  // Optgroup element
-  optgroup: BaseAttr & {
-    disabled?: boolean;
-    label?: string;
-  };
-
-  // Option element
-  option: BaseAttr & {
-    disabled?: boolean;
-    label?: string;
-    selected?: boolean;
-    value?: string;
-  };
-
-  // Output element
-  output: BaseAttr & {
-    for?: string;
-    form?: string;
-    name?: string;
-  };
-
-  // Picture element
-  picture: BaseAttr & {};
-
-  // Pre element
-  pre: BaseAttr & {};
-
-  // Progress element
-  progress: BaseAttr & {
-    max?: number | string;
-    value?: number | string;
-  };
-
-  // Quote element (q and blockquote)
-  q: BaseAttr & {
-    cite?: string;
-  };
-
-  blockquote: BaseAttr & {
-    cite?: string;
-  };
-
-  // Script element
-  script: BaseAttr &
-    ImageElementEvents & {
-      async?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      defer?: boolean;
-      integrity?: string;
-      nomodule?: boolean;
-      referrerpolicy?:
-        | 'no-referrer'
-        | 'no-referrer-when-downgrade'
-        | 'origin'
-        | 'origin-when-cross-origin'
-        | 'same-origin'
-        | 'strict-origin'
-        | 'strict-origin-when-cross-origin'
-        | '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;
-  };
-
-  // Slot element
-  slot: BaseAttr & {
-    name?: string;
-  };
-
-  // Source element
-  source: BaseAttr & {
-    height?: number | string;
-    media?: string;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    type?: string;
-    width?: number | string;
-  };
-
-  // Style element
-  style: BaseAttr &
-    ImageElementEvents & {
-      media?: string;
-    };
-
-  // Table element
-  table: BaseAttr & {};
-
-  // Table body/footer/header elements
-  tbody: BaseAttr & {};
-
-  tfoot: BaseAttr & {};
-
-  thead: BaseAttr & {};
-
-  // 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';
-  };
-
-  // Template element
-  template: BaseAttr & {};
+declare function Button(props: KTMuiButtonProps): JSX.Element;
 
-  // Textarea element
-  textarea: BaseAttr & {
-    autocomplete?: string;
-    cols?: number | string;
-    dirname?: string;
+interface KTMuiDropdownButtonOption {
+    value: string;
+    label: string | JSX.Element;
     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;
-  };
-
-  // Title element
-  title: BaseAttr & {};
-
-  // TR element
-  tr: BaseAttr & {};
-
-  // Track element
-  track: BaseAttr & {
-    default?: boolean;
-    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    label?: string;
-    src?: string;
-    srclang?: string;
-  };
-
-  // UL element
-  ul: BaseAttr & {};
-
-  // Video element
-  video: BaseAttr &
-    MediaElementEvents & {
-      autoplay?: boolean;
-      controls?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      height?: number | string;
-      loop?: boolean;
-      muted?: boolean;
-      playsinline?: boolean;
-      poster?: string;
-      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 & {};
-
-  svg: BaseAttr & {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    width?: number | string;
-    height?: number | string;
-    viewBox?: string;
-    xmlns?: string;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number | string;
-    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
-    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
-    strokeDasharray?: string;
-    strokeDashoffset?: number | string;
-    opacity?: number | string;
-    preserveAspectRatio?: string;
-    transform?: string;
-    x?: number | string;
-    y?: number | string;
-    rx?: number | string;
-    ry?: number | string;
-    r?: number | string;
-    cx?: number | string;
-    cy?: number | string;
-    d?: string;
-    points?: string;
-    pathLength?: number | string;
-    viewbox?: string;
-    role?: string;
-    focusable?: boolean | 'true' | 'false';
-    xlinkHref?: string; // legacy xlink:href
-  };
 }
-
-interface SVGAttributesMap {
-  a: AttributesMap['svg'] & { href?: string; x?: number | string; y?: number | string };
-  animate: AttributesMap['svg'] & {
-    attributeName?: string;
-    from?: string | number;
-    to?: string | number;
-    dur?: string;
-    repeatCount?: string | number;
-  };
-  animateMotion: AttributesMap['svg'] & { path?: string; dur?: string; rotate?: string };
-  animateTransform: AttributesMap['svg'] & { type?: string; from?: string; to?: string; dur?: string };
-  circle: AttributesMap['svg'] & { cx?: number | string; cy?: number | string; r?: number | string };
-  clipPath: AttributesMap['svg'] & { clipPathUnits?: 'userSpaceOnUse' | 'objectBoundingBox' };
-  defs: AttributesMap['svg'];
-  desc: AttributesMap['svg'];
-  ellipse: AttributesMap['svg'] & {
-    cx?: number | string;
-    cy?: number | string;
-    rx?: number | string;
-    ry?: number | string;
-  };
-
-  // Filter primitives (provide common props)
-  feBlend: AttributesMap['svg'] & { in?: string; in2?: string; mode?: string };
-  feColorMatrix: AttributesMap['svg'] & {
-    type?: 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';
-    values?: string;
-  };
-  feComponentTransfer: AttributesMap['svg'] & {};
-  feComposite: AttributesMap['svg'] & {
-    in?: string;
-    in2?: string;
-    operator?: string;
-    k1?: number | string;
-    k2?: number | string;
-    k3?: number | string;
-    k4?: number | string;
-  };
-  feConvolveMatrix: AttributesMap['svg'] & {
-    order?: string | number;
-    kernelMatrix?: string;
-    divisor?: string | number;
-    bias?: string | number;
-  };
-  feDiffuseLighting: AttributesMap['svg'] & {};
-  feDisplacementMap: AttributesMap['svg'] & {
-    in?: string;
-    in2?: string;
-    scale?: number | string;
-    xChannelSelector?: string;
-    yChannelSelector?: string;
-  };
-  feDistantLight: AttributesMap['svg'] & { azimuth?: number | string; elevation?: number | string };
-  feDropShadow: AttributesMap['svg'] & {
-    dx?: number | string;
-    dy?: number | string;
-    stdDeviation?: number | string;
-    floodColor?: string;
-    floodOpacity?: number | string;
-  };
-  feFlood: AttributesMap['svg'] & { floodColor?: string; floodOpacity?: number | string };
-  feFuncA: AttributesMap['svg'] & {};
-  feFuncB: AttributesMap['svg'] & {};
-  feFuncG: AttributesMap['svg'] & {};
-  feFuncR: AttributesMap['svg'] & {};
-  feGaussianBlur: AttributesMap['svg'] & { stdDeviation?: number | string; edgeMode?: string };
-  feImage: AttributesMap['svg'] & { href?: string };
-  feMerge: AttributesMap['svg'] & {};
-  feMergeNode: AttributesMap['svg'] & { in?: string };
-  feMorphology: AttributesMap['svg'] & { operator?: 'erode' | 'dilate'; radius?: number | string };
-  feOffset: AttributesMap['svg'] & { dx?: number | string; dy?: number | string };
-  fePointLight: AttributesMap['svg'] & { x?: number | string; y?: number | string; z?: number | string };
-  feSpecularLighting: AttributesMap['svg'] & {
-    specularConstant?: number | string;
-    specularExponent?: number | string;
-    surfaceScale?: number | string;
-  };
-  feSpotLight: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    z?: number | string;
-    pointsAtX?: number | string;
-    pointsAtY?: number | string;
-    pointsAtZ?: number | string;
-    specularExponent?: number | string;
-    limitingConeAngle?: number | string;
-  };
-  feTile: AttributesMap['svg'] & {};
-  feTurbulence: AttributesMap['svg'] & {
-    baseFrequency?: number | string;
-    numOctaves?: number | string;
-    seed?: number | string;
-    stitchTiles?: string;
-    type?: 'fractalNoise' | 'turbulence';
-  };
-
-  filter: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-    filterUnits?: string;
-    primitiveUnits?: string;
-  };
-  foreignObject: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  g: AttributesMap['svg'];
-  image: AttributesMap['svg'] & {
-    href?: string;
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  line: AttributesMap['svg'] & {
-    x1?: number | string;
-    y1?: number | string;
-    x2?: number | string;
-    y2?: number | string;
-  };
-  linearGradient: AttributesMap['svg'] & {
-    x1?: number | string;
-    y1?: number | string;
-    x2?: number | string;
-    y2?: number | string;
-    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
-    gradientTransform?: string;
-  };
-  marker: AttributesMap['svg'] & {
-    markerUnits?: string;
-    markerWidth?: number | string;
-    markerHeight?: number | string;
-    refX?: number | string;
-    refY?: number | string;
-    orient?: string;
-  };
-  mask: AttributesMap['svg'] & {
-    maskUnits?: string;
-    maskContentUnits?: string;
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  metadata: AttributesMap['svg'];
-  mpath: AttributesMap['svg'] & { href?: string };
-  path: AttributesMap['svg'] & { d?: string; pathLength?: number | string };
-  pattern: AttributesMap['svg'] & {
-    patternUnits?: string;
-    patternContentUnits?: string;
-    width?: number | string;
-    height?: number | string;
-    x?: number | string;
-    y?: number | string;
-  };
-  polygon: AttributesMap['svg'] & { points?: string };
-  polyline: AttributesMap['svg'] & { points?: string };
-  radialGradient: AttributesMap['svg'] & {
-    cx?: number | string;
-    cy?: number | string;
-    r?: number | string;
-    fx?: number | string;
-    fy?: number | string;
-    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
-    gradientTransform?: string;
-  };
-  rect: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-    rx?: number | string;
-    ry?: number | string;
-  };
-  script: AttributesMap['svg'] & { href?: string; type?: string };
-  set: AttributesMap['svg'] & { attributeName?: string; to?: string | number; begin?: string; dur?: string };
-  stop: AttributesMap['svg'] & { offset?: number | string; stopColor?: string; stopOpacity?: number | string };
-  style: AttributesMap['svg'] & { media?: string };
-  svg: AttributesMap['svg'];
-  switch: AttributesMap['svg'];
-  symbol: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
-  text: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    dx?: number | string;
-    dy?: number | string;
-    textLength?: number | string;
-  };
-  textPath: AttributesMap['svg'] & { href?: string; startOffset?: number | string };
-  title: AttributesMap['svg'];
-  tspan: AttributesMap['svg'] & {
-    x?: number | string;
-    y?: number | string;
-    dx?: number | string;
-    dy?: number | string;
-  };
-  use: AttributesMap['svg'] & {
-    href?: string;
-    x?: number | string;
-    y?: number | string;
-    width?: number | string;
-    height?: number | string;
-  };
-  view: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
-}
-
-declare global {
-  namespace JSX {
-    type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-    interface IntrinsicElements {
-      [k: string]: AttributesMap['div']; // Allow any element with div attributes as fallback
-
-      // Document-level & metadata
-      html: AttributesMap['html'];
-      head: AttributesMap['head'];
-      title: AttributesMap['title'];
-      base: AttributesMap['base'];
-      link: AttributesMap['link'];
-      meta: AttributesMap['meta'];
-
-      // Sectioning
-      body: AttributesMap['body'];
-      header: AttributesMap['header'];
-      footer: AttributesMap['footer'];
-      nav: AttributesMap['nav'];
-      main: AttributesMap['main'];
-      section: AttributesMap['section'];
-      article: AttributesMap['article'];
-      aside: AttributesMap['aside'];
-
-      // Headings
-      h1: AttributesMap['h1'];
-      h2: AttributesMap['h2'];
-      h3: AttributesMap['h3'];
-      h4: AttributesMap['h4'];
-      h5: AttributesMap['h5'];
-      h6: AttributesMap['h6'];
-
-      // Text content
-      p: AttributesMap['p'];
-      pre: AttributesMap['pre'];
-      code: AttributesMap['code'];
-      strong: AttributesMap['strong'];
-      small: AttributesMap['small'];
-      em: AttributesMap['em'];
-      br: AttributesMap['br'];
-      i: AttributesMap['i'];
-
-      // Lists
-      ul: AttributesMap['ul'];
-      ol: AttributesMap['ol'];
-      li: AttributesMap['li'];
-
-      // Tables
-      table: AttributesMap['table'];
-      thead: AttributesMap['thead'];
-      tbody: AttributesMap['tbody'];
-      tfoot: AttributesMap['tfoot'];
-      tr: AttributesMap['tr'];
-      th: AttributesMap['th'];
-      td: AttributesMap['td'];
-
-      // Forms
-      form: AttributesMap['form'];
-      label: AttributesMap['label'];
-      input: AttributesMap['input'];
-      textarea: AttributesMap['textarea'];
-      select: AttributesMap['select'];
-      option: AttributesMap['option'];
-      optgroup: AttributesMap['optgroup'];
-      button: AttributesMap['button'];
-      fieldset: AttributesMap['fieldset'];
-      legend: AttributesMap['legend'];
-      datalist: AttributesMap['datalist'];
-      output: AttributesMap['output'];
-
-      // Media & embedded
-      img: AttributesMap['img'];
-      picture: AttributesMap['picture'];
-      source: AttributesMap['source'];
-      audio: AttributesMap['audio'];
-      video: AttributesMap['video'];
-      track: AttributesMap['track'];
-      iframe: AttributesMap['iframe'];
-      embed: AttributesMap['embed'];
-      object: AttributesMap['object'];
-      canvas: AttributesMap['canvas'];
-
-      // Interactive & misc
-      a: AttributesMap['a'] & SVGAttributesMap['a'];
-      area: AttributesMap['area'];
-      map: AttributesMap['map'];
-      details: AttributesMap['details'];
-      dialog: AttributesMap['dialog'];
-      summary: AttributesMap['summary'];
-      slot: AttributesMap['slot'];
-
-      // Scripting & styles
-      script: AttributesMap['script'];
-      style: AttributesMap['style'];
-
-      // Semantic & phrasing
-      figure: AttributesMap['figure'];
-      figcaption: AttributesMap['figcaption'];
-      blockquote: AttributesMap['blockquote'];
-      q: AttributesMap['q'];
-
-      // Generic elements
-      div: AttributesMap['div'];
-      span: AttributesMap['span'];
-      address: AttributesMap['address'];
-      abbr: AttributesMap['abbr'];
-      b: AttributesMap['b'];
-      cite: AttributesMap['cite'];
-      dl: AttributesMap['dl'];
-      dt: AttributesMap['dt'];
-      dd: AttributesMap['dd'];
-      hr: AttributesMap['hr'];
-
-      // SVG
-      svg: AttributesMap['svg'];
-      // a: SVGAttributesMap['a'];
-      animate: SVGAttributesMap['animate'];
-      animateMotion: SVGAttributesMap['animateMotion'];
-      animateTransform: SVGAttributesMap['animateTransform'];
-      circle: SVGAttributesMap['circle'];
-      clipPath: SVGAttributesMap['clipPath'];
-      defs: SVGAttributesMap['defs'];
-      desc: SVGAttributesMap['desc'];
-      ellipse: SVGAttributesMap['ellipse'];
-      feBlend: SVGAttributesMap['feBlend'];
-      feColorMatrix: SVGAttributesMap['feColorMatrix'];
-      feComponentTransfer: SVGAttributesMap['feComponentTransfer'];
-      feComposite: SVGAttributesMap['feComposite'];
-      feConvolveMatrix: SVGAttributesMap['feConvolveMatrix'];
-      feDiffuseLighting: SVGAttributesMap['feDiffuseLighting'];
-      feDisplacementMap: SVGAttributesMap['feDisplacementMap'];
-      feDistantLight: SVGAttributesMap['feDistantLight'];
-      feDropShadow: SVGAttributesMap['feDropShadow'];
-      feFlood: SVGAttributesMap['feFlood'];
-      feFuncA: SVGAttributesMap['feFuncA'];
-      feFuncB: SVGAttributesMap['feFuncB'];
-      feFuncG: SVGAttributesMap['feFuncG'];
-      feFuncR: SVGAttributesMap['feFuncR'];
-      feGaussianBlur: SVGAttributesMap['feGaussianBlur'];
-      feImage: SVGAttributesMap['feImage'];
-      feMerge: SVGAttributesMap['feMerge'];
-      feMergeNode: SVGAttributesMap['feMergeNode'];
-      feMorphology: SVGAttributesMap['feMorphology'];
-      feOffset: SVGAttributesMap['feOffset'];
-      fePointLight: SVGAttributesMap['fePointLight'];
-      feSpecularLighting: SVGAttributesMap['feSpecularLighting'];
-      feSpotLight: SVGAttributesMap['feSpotLight'];
-      feTile: SVGAttributesMap['feTile'];
-      feTurbulence: SVGAttributesMap['feTurbulence'];
-      filter: SVGAttributesMap['filter'];
-      foreignObject: SVGAttributesMap['foreignObject'];
-      g: SVGAttributesMap['g'];
-      image: SVGAttributesMap['image'];
-      line: SVGAttributesMap['line'];
-      linearGradient: SVGAttributesMap['linearGradient'];
-      marker: SVGAttributesMap['marker'];
-      mask: SVGAttributesMap['mask'];
-      metadata: SVGAttributesMap['metadata'];
-      mpath: SVGAttributesMap['mpath'];
-      path: SVGAttributesMap['path'];
-      pattern: SVGAttributesMap['pattern'];
-      polygon: SVGAttributesMap['polygon'];
-      polyline: SVGAttributesMap['polyline'];
-      radialGradient: SVGAttributesMap['radialGradient'];
-      rect: SVGAttributesMap['rect'];
-      set: SVGAttributesMap['set'];
-      stop: SVGAttributesMap['stop'];
-      switch: SVGAttributesMap['switch'];
-      symbol: SVGAttributesMap['symbol'];
-      text: SVGAttributesMap['text'];
-      textPath: SVGAttributesMap['textPath'];
-      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 {
-      ref?: KTRef<any>;
-      'k-if'?: any;
-      children?: KTRawContent;
-    }
-
-    interface ElementChildrenAttribute {
-      children: {};
-    }
-  }
-}
-
-interface KTMuiCheckboxProps {
-  value: string;
-  label?: string | JSX.Element | HTMLElement;
-  checked?: boolean;
-  size?: 'small' | 'medium';
-  'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
-  disabled?: boolean;
-  color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
-  indeterminate?: boolean;
+interface KTMuiDropdownButtonProps extends KTMuiProps {
+    /**
+     * The label for the dropdown button - can be a string or a JSX element
+     */
+    label?: KTMaybeReactive<string | JSX.Element>;
+    /**
+     * The options for the dropdown menu - array of objects with `value`, `label` and optional `disabled`
+     */
+    options: KTMaybeReactive<KTMuiDropdownButtonOption[]>;
+    /**
+     * The variant to use - 'contained', 'outlined' or 'text'
+     */
+    variant?: KTMaybeReactive<'contained' | 'outlined' | 'text'>;
+    /**
+     * The color to use - 'primary', 'secondary', 'error', 'warning', 'info' or 'success'
+     */
+    color?: KTMaybeReactive<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
+    /**
+     * The size of the button - 'small', 'medium' or 'large'
+     */
+    size?: KTMaybeReactive<'small' | 'medium' | 'large'>;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: KTMaybeReactive<boolean>;
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: KTMaybeReactive<boolean>;
+    'on:click'?: (event: MouseEvent) => void;
+    'on:select'?: (value: string, option: KTMuiDropdownButtonOption) => void;
 }
-
-interface KTMuiCheckboxGroupProps {
-  class?: string;
-  style?: string;
-  value?: string[];
-  size?: 'small' | 'medium';
-  options: KTMuiCheckboxProps[];
-  'kt:change'?: ((values: string[]) => void) | KTRef<string[]>;
-  row?: boolean;
+type KTMuiDropdownButton = JSX.Element & {};
+/**
+ * DropdownButton component - mimics MUI Dropdown Button appearance and behavior
+ */
+declare function DropdownButton(props: KTMuiDropdownButtonProps): KTMuiDropdownButton;
+
+interface KTMuiCheckboxProps extends Omit<KTMuiProps, 'children'> {
+    value?: KTMaybeReactive$1<string>;
+    label?: KTMaybeReactive$1<string | JSX.Element | HTMLElement>;
+    size?: KTMaybeReactive$1<'small' | 'medium'>;
+    disabled?: KTMaybeReactive$1<boolean>;
+    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning'>;
+    indeterminate?: KTMaybeReactive$1<boolean>;
+    'on:change'?: (checked: boolean, value: string) => void;
 }
-
 type KTMuiCheckbox = JSX.Element & {
-  checked: boolean;
-  value: string;
-  disabled: boolean;
-};
-
-type KTMuiCheckboxGroup = JSX.Element & {
-  value: string[];
-  disabled: boolean[];
-  disableAll: () => void;
-  enableAll: () => void;
+    checked: boolean;
+    value: string;
+    disabled: boolean;
 };
-
 /**
- * Checkbox component - mimics MUI Checkbox appearance and behavior
+ * Create a checkbox component.
+ * @param props normal props
+ * @param onChangeForGroup onchange event only for checkbox group
  */
-declare function Checkbox(props: KTMuiCheckboxProps): KTMuiCheckbox;
+declare function Checkbox(props: KTMuiCheckboxProps, onChangeForGroup?: (checked: boolean, value: string) => void): KTMuiCheckbox;
+
+interface KTMuiCheckboxGroupProps extends Omit<KTMuiProps, 'children'> {
+    size?: KTMaybeReactive$1<'small' | 'medium'>;
+    options: KTMaybeReactive$1<Array<Omit<KTMuiCheckboxProps, 'value'> & {
+        value: string;
+    }>>;
+    row?: KTMaybeReactive$1<boolean>;
+    'on:change'?: (values: string[]) => void;
+}
+type KTMuiCheckboxGroup = JSX.Element & {};
 /**
  * CheckboxGroup component - groups multiple checkboxes together
  */
 declare function CheckboxGroup(props: KTMuiCheckboxGroupProps): KTMuiCheckboxGroup;
 
-interface KTMuiDialogProps {
-    open?: boolean;
-    'kt:close'?: () => void;
-    title?: string;
-    children?: HTMLElement | HTMLElement[] | JSX.Element | JSX.Element[] | string;
-    actions?: HTMLElement | HTMLElement[];
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-    fullWidth?: boolean;
-}
-type KTMuiDialog = JSX.Element & {
+type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+interface KTMuiDialogProps extends Omit<KTMuiProps, 'children'> {
     /**
      * Controls whether the dialog is open or closed
+     * - Provide a `KTReactive` to make it reactive
      */
-    open: boolean;
-};
+    open?: KTMaybeReactive$1<boolean>;
+    title?: string;
+    children?: JSX.Element | JSX.Element[] | string | KTMaybeReactive$1<string> | KTMaybeReactive$1<JSX.Element> | KTMaybeReactive$1<JSX.Element[]>;
+    actions?: KTMaybeReactive$1<HTMLElement | HTMLElement[]>;
+    size?: KTMaybeReactive$1<DialogSize>;
+    fullWidth?: KTMaybeReactive$1<boolean>;
+    'on:close'?: () => void;
+}
+type KTMuiDialog = JSX.Element;
 /**
  * Dialog component - mimics MUI Dialog appearance and behavior
  * Only handles open/close state, title and content are passed as props
  */
 declare function Dialog(props: KTMuiDialogProps): KTMuiDialog;
 
-interface FormLabelProps {
+interface KTMuiFormLabelProps extends Omit<KTMuiProps, 'children'> {
     children: string | HTMLElement | JSX.Element;
-    required?: boolean;
-    error?: boolean;
-    disabled?: boolean;
-    focused?: boolean;
-    filled?: boolean;
+    /**
+     * If `true`, the label will indicate that the input is required by displaying an asterisk (*).
+     */
+    required?: KTMaybeReactive$1<boolean>;
+    /**
+     * If `true`, the label will be displayed in an error state.
+     */
+    error?: KTMaybeReactive$1<boolean>;
+    /**
+     * If `true`, the label will be displayed in a disabled state.
+     */
+    disabled?: KTMaybeReactive$1<boolean>;
+    /**
+     * If `true`, the label will be displayed in a focused state.
+     */
+    focused?: KTMaybeReactive$1<boolean>;
+    /**
+     * If `true`, the label will be displayed in a filled state (used when the associated input has a value).
+     */
+    filled?: KTMaybeReactive$1<boolean>;
+    /**
+     * The component used for the root node. Either 'label' or 'legend'.
+     * - Not reactive
+     */
     component?: 'label' | 'legend';
-    htmlFor?: string;
+    htmlFor?: KTMaybeReactive$1<string>;
 }
 /**
  * FormLabel component - mimics MUI FormLabel appearance and behavior
  */
-declare function FormLabel(props: FormLabelProps): JSX.Element;
+declare function FormLabel(props: KTMuiFormLabelProps): JSX.Element;
 
-interface LinearProgressProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    variant?: 'determinate' | 'indeterminate';
-    progress?: number;
-    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
-}
-type KTMuiLinearProgress = JSX.Element & {
+interface LinearProgressProps extends KTMuiProps {
+    /**
+     * The variant to use.
+     * - `determinate` - Use when the progress is a specific value.
+     * - `indeterminate` - Use when the progress is unknown.
+     * Default is `indeterminate`.
+     */
+    variant?: KTMaybeReactive$1<'determinate' | 'indeterminate'>;
+    /**
+     * The value of the progress indicator for the determinate variant. Value between 0 and 100.
+     */
+    value?: KTMaybeReactive$1<number>;
     /**
-     * Reactive property to get or set the current progress value (0-100)
+     * The color of the component. It supports those theme colors that make sense for this component.
      */
-    progress: number;
+    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
+}
+type KTMuiLinearProgress = JSX.Element & {
+    value: number;
 };
-/**
- * LinearProgress component - mimics MUI LinearProgress appearance and behavior
- */
 declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress;
 
 type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 
 type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-
-interface KTMuiTextFieldProps<T extends InputTypes = 'text'> {
-  class?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-  label?: string;
-  placeholder?: string;
-  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;
+interface KTMuiTextFieldProps<T extends InputTypes = 'text'> extends KTMuiProps {
+    'k-model'?: T extends 'number' ? KTReactive<number> : KTReactive<string>;
+    label?: KTMaybeReactive<string>;
+    placeholder?: KTMaybeReactive<string>;
+    value?: any;
+    type?: KTMaybeReactive<T>;
+    disabled?: KTMaybeReactive<boolean>;
+    readOnly?: KTMaybeReactive<boolean>;
+    required?: KTMaybeReactive<boolean>;
+    error?: KTMaybeReactive<boolean>;
+    helperText?: KTMaybeReactive<string>;
+    fullWidth?: KTMaybeReactive<boolean>;
+    multiline?: boolean;
+    rows?: KTMaybeReactive<number>;
+    size?: 'small' | 'medium' | KTReactive<'small' | 'medium'>;
+    'on:input'?: ChangeHandler<T extends 'number' ? number : T extends 'date' ? Date : string>;
+    'on:change'?: ChangeHandler<T extends 'number' ? number : T extends 'date' ? Date : string>;
+    'on:blur'?: () => void;
+    'on:focus'?: () => void;
 }
+type KTMuiTextField = JSX.Element;
+declare function TextField<T extends InputTypes = 'text'>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
 
-type KTMuiTextField = JSX.Element & {
-  /**
-   * Reactive `value` of the input field
-   */
-  value: string;
-
-  /**
-   * Reactive `label` of the input field
-   */
-  label: string;
-
-  /**
-   * Reactive `placeholder` of the input field
-   */
-  placeholder: string;
-
-  /**
-   * Reactive `type` of the input field
-   */
-  type: string;
-
-  /**
-   * Reactive `disabled` state of the input field
-   */
-  disabled: boolean;
-
-  /**
-   * Reactive `readonly` state of the input field
-   */
-  readonly: boolean;
-
-  /**
-   * `required` state of the input field
-   * @readonly
-   */
-  readonly required: boolean;
-
-  /**
-   * Reactive `error` state of the input field
-   */
-  error: boolean;
-
-  /**
-   * Reactive `helperText` of the input field
-   */
-  helperText: string;
-};
-
-/**
- * TextField component - mimics MUI TextField appearance and behavior
- */
-declare function TextField<T extends InputTypes>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
-
-interface KTMuiRadioProps {
-  class?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-  value: string;
-  label: string | JSX.Element | HTMLElement;
-  checked?: boolean;
-  size?: 'small' | 'medium';
-  'kt:change'?: (checked: boolean, value: string) => void;
-  disabled?: boolean;
-  color?: 'primary' | 'secondary' | 'default';
+interface KTMuiRadioProps extends KTMuiProps {
+    value: string;
+    label: string | JSX.Element | HTMLElement | KTReactive<string | JSX.Element | HTMLElement>;
+    checked?: boolean;
+    size?: 'small' | 'medium';
+    'on:change'?: (checked: boolean, value: string) => void;
+    disabled?: boolean;
+    color?: 'primary' | 'secondary' | 'default';
 }
-
-interface KTMuiRadioGroupProps {
-  class?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-  value?: string;
-  name?: string;
-  size?: 'small' | 'medium';
-  options: KTMuiRadioProps[];
-  'kt:change'?: ((value: string) => void) | KTRef<string>;
-  'kt:click'?: (checked: boolean) => void;
-  row?: boolean;
+interface KTMuiRadioGroupProps extends KTMuiProps {
+    value?: string;
+    name?: string;
+    size?: 'small' | 'medium';
+    options: KTMuiRadioProps[];
+    'on:change'?: (value: string) => void;
+    'on:click'?: (checked: boolean) => void;
+    row?: boolean;
 }
-
 type KTMuiRadio = JSX.Element & {
-  /**
-   * The value of the radio button
-   * @readonly
-   */
-  readonly value: string;
-
-  /**
-   * Reactive checked state of the radio button
-   */
-  checked: boolean;
+    readonly value: string;
+    checked: boolean;
 };
 type KTMuiRadioGroup = JSX.Element & {
-  /**
-   * Reactive checked state of the radio button
-   */
-  value: string;
+    value: string;
 };
-
 /**
  * Radio component - mimics MUI Radio appearance and behavior
  */
@@ -1581,78 +282,138 @@ declare function RadioGroup(props: KTMuiRadioGroupProps): KTMuiRadioGroup;
 
 interface KTMuiSelectOption {
     value: string;
-    label: string;
+    label: string | JSX.Element;
 }
-interface KTMuiSelectProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    size?: 'small' | 'medium';
-    value?: string;
-    options: KTMuiSelectOption[];
-    label?: string;
-    placeholder?: string;
-    'kt:change'?: (value: string) => void;
-    fullWidth?: boolean;
-    disabled?: boolean;
+interface KTMuiSelectProps extends KTMuiProps {
+    size?: KTMaybeReactive$1<'small' | 'medium'>;
+    value?: KTMaybeReactive$1<string>;
+    options: KTMaybeReactive$1<KTMuiSelectOption[]>;
+    label?: KTMaybeReactive$1<string>;
+    placeholder?: KTMaybeReactive$1<string>;
+    fullWidth?: KTMaybeReactive$1<boolean>;
+    disabled?: KTMaybeReactive$1<boolean>;
+    'on:change'?: (value: string) => void;
 }
-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;
 
-declare function DownloadIcon(props: KTAttribute): JSX.Element;
-
-declare function CompressIcon(props: KTAttribute): JSX.Element;
-
-declare function SubtitlesIcon(props: KTAttribute): JSX.Element;
-
-declare function SettingsIcon(props: KTAttribute): JSX.Element;
-
-declare function NewReleasesIcon(props: KTAttribute): JSX.Element;
-
-declare function FolderOpenIcon(props: KTAttribute): JSX.Element;
-
-declare function PlayArrowIcon(props: KTAttribute): JSX.Element;
-
-declare function ContentPasteIcon(props: KTAttribute): JSX.Element;
-
-declare function DeleteIcon(props: KTAttribute): JSX.Element;
-
-declare function StopIcon(props: KTAttribute): JSX.Element;
-
-declare function FileOpenIcon(props: KTAttribute): JSX.Element;
-
-declare function ColorLensIcon(props: KTAttribute): JSX.Element;
-
-declare function WallpaperIcon(props: KTAttribute): JSX.Element;
-
-declare function ExpandMoreIcon(props: KTAttribute): JSX.Element;
-
-declare function SaveIcon(props: KTAttribute): JSX.Element;
-
-declare function UploadFileIcon(props: KTAttribute): JSX.Element;
-
-declare function VideoFileIcon(props: KTAttribute): JSX.Element;
-
-declare function QueuePlayNextIcon(props: KTAttribute): JSX.Element;
-
-declare function MenuIcon(props: KTAttribute): JSX.Element;
-
-declare function HomeIcon(props: KTAttribute): JSX.Element;
-
-declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
+interface KTMuiCardProps extends KTMuiProps {
+    variant?: 'elevation' | 'outlined' | 'contained';
+    elevation?: number | KTReactive<number>;
+    square?: boolean | KTReactive<boolean>;
+    raised?: boolean | KTReactive<boolean>;
+    'on:click'?: (event: PointerEvent) => void;
+}
+type KTMuiCard = JSX.Element & {};
+/**
+ * Card component - mimics MUI Card appearance and behavior
+ */
+declare function Card(props: KTMuiCardProps): KTMuiCard;
+
+interface KTMuiSwitchProps extends KTMuiProps {
+    value?: KTMaybeReactive$1<string>;
+    label?: KTMaybeReactive$1<string>;
+    disabled?: KTMaybeReactive$1<boolean>;
+    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
+    size?: KTMaybeReactive$1<'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;
+
+type PillColor = 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type PillVariant = 'filled' | 'outlined';
+type PillSize = 'small' | 'medium';
+interface KTMuiPillProps extends KTMuiProps {
+    label?: KTMaybeReactive$1<string>;
+    icon?: KTMaybeReactive$1<HTMLElement | JSX.Element>;
+    deleteIcon?: KTMaybeReactive$1<HTMLElement | JSX.Element>;
+    color?: KTMaybeReactive$1<PillColor>;
+    variant?: KTMaybeReactive$1<PillVariant>;
+    size?: KTMaybeReactive$1<PillSize>;
+    clickable?: KTMaybeReactive$1<boolean>;
+    disabled?: KTMaybeReactive$1<boolean>;
+    autoRemoveOnDelete?: KTMaybeReactive$1<boolean>;
+    'on:click'?: (event: MouseEvent) => void;
+    'on:delete'?: (event: MouseEvent) => void | boolean;
+}
+type KTMuiPill = JSX.Element & {};
+/**
+ * Pill component - mimics MUI chip/pill appearance and behavior
+ */
+declare function Pill(props: KTMuiPillProps): KTMuiPill;
+
+type BadgeColor = 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type BadgeVariant = 'standard' | 'dot';
+type BadgeOverlap = 'rectangular' | 'circular';
+type BadgeContent = string | number;
+interface KTMuiBadgeAnchorOrigin {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'right';
+}
+interface KTMuiBadgeProps extends KTMuiProps {
+    badgeContent?: BadgeContent | KTReactive<number> | KTReactive<string>;
+    max?: KTMaybeReactive$1<number>;
+    showZero?: KTMaybeReactive$1<boolean>;
+    invisible?: KTMaybeReactive$1<boolean>;
+    color?: KTMaybeReactive$1<BadgeColor>;
+    variant?: KTMaybeReactive$1<BadgeVariant>;
+    overlap?: KTMaybeReactive$1<BadgeOverlap>;
+    anchorOrigin?: KTMaybeReactive$1<KTMuiBadgeAnchorOrigin>;
+}
+type KTMuiBadge = JSX.Element & {};
+/**
+ * Badge component - mimics MUI Badge appearance and behavior
+ */
+declare function Badge(props: KTMuiBadgeProps): KTMuiBadge;
 
-declare function SelectAllIcon(props: KTAttribute): JSX.Element;
+type PopoverVerticalOrigin = 'top' | 'center' | 'bottom';
+type PopoverHorizontalOrigin = 'left' | 'center' | 'right';
+interface KTMuiPopoverOrigin {
+    vertical: PopoverVerticalOrigin;
+    horizontal: PopoverHorizontalOrigin;
+}
+type KTMuiPopoverCloseReason = 'backdropClick' | 'escapeKeyDown';
+interface KTMuiPopoverProps extends KTMuiProps {
+    /**
+     * Indicates whether the popover is open.
+     */
+    open?: KTMaybeReactive$1<boolean>;
+    /**
+     * The DOM element used as the anchor of the popover. The popover will appear next to this element.
+     */
+    anchorEl?: HTMLElement | null | KTReactive<HTMLElement | null>;
+    /**
+     * Defines which part of the anchor element to align the popover with.
+     */
+    anchorOrigin?: KTMaybeReactive$1<KTMuiPopoverOrigin>;
+    /**
+     * Defines which part of the popover to align with the anchor element.
+     */
+    transformOrigin?: KTMaybeReactive$1<KTMuiPopoverOrigin>;
+    /**
+     * The margin between the popover and the edge of the screen.
+     * This is used to prevent the popover from being positioned in a way that it would be inaccessible to users, such as being off-screen.
+     */
+    marginThreshold?: KTMaybeReactive$1<number>;
+    /**
+     * The elevation of the popover, which affects the shadow depth.
+     * It can be a value between 0 and 24.
+     */
+    elevation?: KTMaybeReactive$1<number>;
+    'on:close'?: (reason: KTMuiPopoverCloseReason) => void;
+}
+type KTMuiPopover = JSX.Element & {};
+/**
+ * Popover component - mimics MUI Popover appearance and behavior
+ */
+declare function Popover(props: KTMuiPopoverProps): KTMuiPopover;
 
-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, Badge, Button, Card, Checkbox, CheckboxGroup, Dialog, DropdownButton, FormLabel, LinearProgress, Pill, Popover, Radio, RadioGroup, Select, Switch, TextField };
+export type { KTMuiBadge, KTMuiBadgeAnchorOrigin, KTMuiBadgeProps, KTMuiCard, KTMuiCardProps, KTMuiCheckbox, KTMuiCheckboxGroup, KTMuiCheckboxGroupProps, KTMuiCheckboxProps, KTMuiDialog, KTMuiDropdownButton, KTMuiDropdownButtonOption, KTMuiDropdownButtonProps, KTMuiLinearProgress, KTMuiPill, KTMuiPillProps, KTMuiPopover, KTMuiPopoverCloseReason, KTMuiPopoverOrigin, KTMuiPopoverProps, KTMuiRadio, KTMuiRadioGroup, KTMuiRadioProps, KTMuiSelect, KTMuiSelectOption, KTMuiSelectProps, KTMuiSwitch, KTMuiSwitchProps, KTMuiTextField, KTMuiTextFieldProps };