@ktjs/mui 0.23.2 → 0.24.2

package/dist/index.d.ts

@@ -1,1330 +1,161 @@
-type otherstring = string & {};
+import { KTReactive, KTRawContent, KTMaybeReactive as KTMaybeReactive$1, JSX } from '@ktjs/core';
 
-// 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 KTMuiProps {
+  class?: string | KTReactive<string>;
+  style?: string | Partial<CSSStyleDeclaration> | KTReactive<string> | KTReactive<Partial<CSSStyleDeclaration>>;
+  children?: KTRawContent;
 }
 
-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;
-    'on:close'?: () => void;
-}
-declare function Alert(props: KTMuiAlertProps): JSX.Element;
+type KTMaybeReactive<T> = T | KTReactive<T>;
 
-declare class KTComputed<T> {
+interface KTMuiAlertProps extends KTMuiProps {
+    children: NonNullable<KTMuiProps['children']>;
+    /**
+     * 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'
+     */
+    severity?: KTMaybeReactive$1<'error' | 'warning' | 'info' | 'success'>;
     /**
-     * Indicates that this is a KTRef instance
+     * 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'
      */
-    isKT: true;
-    ktType: KTReactiveType;
-    constructor(_calculator: () => T, reactives: Array<KTReactive<unknown>>);
+    variant?: KTMaybeReactive$1<'standard' | 'filled' | 'outlined'>;
     /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     * 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
      */
-    get value(): T;
-    set value(_newValue: T);
+    icon?: KTMaybeReactive$1<JSX.Element | boolean>;
     /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
+     * 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`.
      */
-    addOnChange(callback: ReactiveChangeHandler<T>): void;
+    iconSize?: KTMaybeReactive$1<string>;
     /**
-     * Unregister a callback
-     * @param callback (newValue, oldValue) => xxx
+     * Callback fired when the component requests to be closed. If provided, a close icon button will be displayed.
      */
-    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
+    'on:close'?: () => void;
 }
+declare function Alert(props: KTMuiAlertProps): JSX.Element;
 
-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
+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;
 }
-type ReactiveChangeHandler<T> = (newValue: T, oldValue: T) => void;
+/**
+ * Button component - mimics MUI Button appearance and behavior
+ */
+declare function Button(props: KTMuiButtonProps): JSX.Element;
 
-declare class KTRef<T> {
+interface KTMuiDropdownButtonOption {
+    value: string;
+    label: string | JSX.Element;
+    disabled?: 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'>;
     /**
-     * Indicates that this is a KTRef instance
+     * The color to use - 'primary', 'secondary', 'error', 'warning', 'info' or 'success'
      */
-    isKT: true;
-    ktType: KTReactiveType;
-    constructor(_value: T, _onChanges: Array<ReactiveChangeHandler<T>>);
+    color?: KTMaybeReactive<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
     /**
-     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     * The size of the button - 'small', 'medium' or 'large'
      */
-    get value(): T;
-    set value(newValue: T);
+    size?: KTMaybeReactive<'small' | 'medium' | 'large'>;
     /**
-     * Register a callback when the value changes
-     * @param callback (newValue, oldValue) => xxx
+     * Whether the button is disabled
      */
-    addOnChange(callback: ReactiveChangeHandler<T>): void;
-    removeOnChange(callback: ReactiveChangeHandler<T>): boolean;
+    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;
 }
-
-type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
-type KTAvailableContent = SingleContent | KTAvailableContent[];
-type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
-
+type KTMuiDropdownButton = JSX.Element & {};
 /**
- * Used to create enhanced HTML elements
+ * DropdownButton component - mimics MUI Dropdown Button appearance and behavior
  */
-interface KTBaseAttribute {
-  [k: string]: any;
-
-  // # 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;
-  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;
+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 KTPrefixedEventAttribute = {
-  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+type KTMuiCheckbox = JSX.Element & {
+    checked: boolean;
+    value: string;
+    disabled: boolean;
 };
-
-type KTAttribute = KTBaseAttribute & KTPrefixedEventAttribute;
-
-// Base events available to all HTML elements
-type BaseAttr = KTPrefixedEventAttribute &
-  KTReactifyProps<{
-    [k: string]: any;
-
-    // # base attributes
-    class?: string;
-    className?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-  }>;
-
-interface AttributesMap {
-  // Anchor element
-  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 &
-    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 &
-    KTReactifyProps<{
-      autoplay?: boolean;
-      controls?: boolean;
-      crossorigin?: 'anonymous' | 'use-credentials' | '';
-      loop?: boolean;
-      muted?: boolean;
-      preload?: 'none' | 'metadata' | 'auto' | '';
-      src?: string;
-    }>;
-
-  // Base element
-  base: BaseAttr &
-    KTReactifyProps<{
-      href?: string;
-      target?: '_self' | '_blank' | '_parent' | '_top' | string;
-    }>;
-
-  // Body element
-  body: BaseAttr & KTReactifyProps<{}>;
-
-  // BR element
-  br: BaseAttr & KTReactifyProps<{}>;
-
-  // Button element
-  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 &
-    KTReactifyProps<{
-      height?: number | string;
-      width?: number | string;
-    }>;
-
-  // Table caption element
-  caption: BaseAttr & KTReactifyProps<{}>;
-
-  // Col element
-  col: BaseAttr &
-    KTReactifyProps<{
-      span?: number | string;
-    }>;
-
-  // Colgroup element
-  colgroup: BaseAttr &
-    KTReactifyProps<{
-      span?: number | string;
-    }>;
-
-  // Data element
-  data: BaseAttr &
-    KTReactifyProps<{
-      value?: string;
-    }>;
-
-  // Datalist element
-  datalist: BaseAttr & KTReactifyProps<{}>;
-
-  // Del element
-  del: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-      datetime?: string;
-    }>;
-
-  // Details element
-  details: BaseAttr &
-    KTReactifyProps<{
-      open?: boolean;
-    }>;
-
-  // Dialog element
-  dialog: BaseAttr &
-    KTReactifyProps<{
-      open?: boolean;
-    }>;
-
-  // Embed element
-  embed: BaseAttr &
-    KTReactifyProps<{
-      height?: number | string;
-      src?: string;
-      type?: string;
-      width?: number | string;
-    }>;
-
-  // Fieldset element
-  fieldset: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      form?: string;
-      name?: string;
-    }>;
-
-  // Form element
-  form: BaseAttr &
-    KTReactifyProps<{
-      '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 & KTReactifyProps<{}>;
-
-  // HR element
-  hr: BaseAttr & KTReactifyProps<{}>;
-
-  // HTML element
-  html: BaseAttr & KTReactifyProps<{}>;
-
-  // IFrame element
-  iframe: BaseAttr &
-    KTReactifyProps<{
-      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 &
-    KTReactifyProps<{
-      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 &
-    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 &
-    KTReactifyProps<{
-      cite?: string;
-      datetime?: string;
-    }>;
-
-  // Label element
-  label: BaseAttr &
-    KTReactifyProps<{
-      for?: string;
-    }>;
-
-  // Legend element
-  legend: BaseAttr & KTReactifyProps<{}>;
-
-  // LI element
-  li: BaseAttr &
-    KTReactifyProps<{
-      value?: number | string;
-    }>;
-
-  // Link element
-  link: BaseAttr &
-    KTReactifyProps<{
-      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 &
-    KTReactifyProps<{
-      name?: string;
-    }>;
-
-  // Menu element
-  menu: BaseAttr & KTReactifyProps<{}>;
-
-  // Meta element
-  meta: BaseAttr &
-    KTReactifyProps<{
-      charset?: string;
-      content?: string;
-      'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
-      name?: string;
-    }>;
-
-  // Meter element
-  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 &
-    KTReactifyProps<{
-      data?: string;
-      form?: string;
-      height?: number | string;
-      name?: string;
-      type?: string;
-      usemap?: string;
-      width?: number | string;
-    }>;
-
-  // OL element
-  ol: BaseAttr &
-    KTReactifyProps<{
-      reversed?: boolean;
-      start?: number | string;
-      type?: '1' | 'a' | 'A' | 'i' | 'I';
-    }>;
-
-  // Optgroup element
-  optgroup: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      label?: string;
-    }>;
-
-  // Option element
-  option: BaseAttr &
-    KTReactifyProps<{
-      disabled?: boolean;
-      label?: string;
-      selected?: boolean;
-      value?: string;
-    }>;
-
-  // Output element
-  output: BaseAttr &
-    KTReactifyProps<{
-      for?: string;
-      form?: string;
-      name?: string;
-    }>;
-
-  // Picture element
-  picture: BaseAttr & KTReactifyProps<{}>;
-
-  // Pre element
-  pre: BaseAttr & KTReactifyProps<{}>;
-
-  // Progress element
-  progress: BaseAttr &
-    KTReactifyProps<{
-      max?: number | string;
-      value?: number | string;
-    }>;
-
-  // Quote element (q and blockquote)
-  q: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-    }>;
-
-  blockquote: BaseAttr &
-    KTReactifyProps<{
-      cite?: string;
-    }>;
-
-  // Script element
-  script: BaseAttr &
-    KTReactifyProps<{
-      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 &
-    KTReactifyProps<{
-      autocomplete?: string;
-      disabled?: boolean;
-      form?: string;
-      multiple?: boolean;
-      name?: string;
-      required?: boolean;
-      size?: number | string;
-    }>;
-
-  // Slot element
-  slot: BaseAttr &
-    KTReactifyProps<{
-      name?: string;
-    }>;
-
-  // Source element
-  source: BaseAttr &
-    KTReactifyProps<{
-      height?: number | string;
-      media?: string;
-      sizes?: string;
-      src?: string;
-      srcset?: string;
-      type?: string;
-      width?: number | string;
-    }>;
-
-  // Style element
-  style: BaseAttr &
-    KTReactifyProps<{
-      media?: string;
-    }>;
-
-  // Table element
-  table: BaseAttr & KTReactifyProps<{}>;
-
-  // Table body/footer/header elements
-  tbody: BaseAttr & KTReactifyProps<{}>;
-
-  tfoot: BaseAttr & KTReactifyProps<{}>;
-
-  thead: BaseAttr & KTReactifyProps<{}>;
-
-  // Table cell elements
-  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 & KTReactifyProps<{}>;
-
-  // Textarea element
-  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 &
-    KTReactifyProps<{
-      datetime?: string;
-    }>;
-
-  // Title element
-  title: BaseAttr & KTReactifyProps<{}>;
-
-  // TR element
-  tr: BaseAttr & KTReactifyProps<{}>;
-
-  // Track element
-  track: BaseAttr &
-    KTReactifyProps<{
-      default?: boolean;
-      kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-      label?: string;
-      src?: string;
-      srclang?: string;
-    }>;
-
-  // UL element
-  ul: BaseAttr & KTReactifyProps<{}>;
-
-  // Video element
-  video: BaseAttr &
-    KTReactifyProps<{
-      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 & 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;
-    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'];
-    }
-
-    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: {};
-    }
-  }
-}
-
-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
+ * Create a checkbox component.
+ * @param props normal props
+ * @param onChangeForGroup onchange event only for checkbox group
  */
-declare function Button(props: KTMuiButtonProps & KTPrefixedEventAttribute): JSX.Element;
-
-interface KTMuiCheckboxProps {
-  value?: string;
-  label?: string | JSX.Element | HTMLElement;
-  checked?: boolean;
-  size?: 'small' | 'medium';
-  'on:change'?: (checked: boolean, value: string) => void;
-  disabled?: boolean;
-  color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
-  indeterminate?: boolean;
-}
-
-interface KTMuiCheckboxGroupProps {
-  class?: string;
-  style?: string;
-  value?: string[];
-  size?: 'small' | 'medium';
-  options: (Omit<KTMuiCheckboxProps, 'value'> & { value: string })[];
-  'on:change'?: (values: string[]) => void;
-  row?: boolean;
+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 KTMuiCheckbox = JSX.Element & {
-  checked: boolean;
-  value: string;
-  disabled: boolean;
-};
-
 type KTMuiCheckboxGroup = JSX.Element & {};
-
-/**
- * Checkbox component - mimics MUI Checkbox appearance and behavior
- */
-declare function Checkbox(props: KTMuiCheckboxProps): KTMuiCheckbox;
 /**
  * CheckboxGroup component - groups multiple checkboxes together
  */
 declare function CheckboxGroup(props: KTMuiCheckboxGroupProps): KTMuiCheckboxGroup;
 
 type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-interface KTMuiDialogProps {
+interface KTMuiDialogProps extends Omit<KTMuiProps, 'children'> {
     /**
      * Controls whether the dialog is open or closed
      * - Provide a `KTReactive` to make it reactive
      */
-    open?: boolean | KTReactive<boolean>;
-    'on:close'?: () => void;
+    open?: KTMaybeReactive$1<boolean>;
     title?: string;
-    children?: HTMLElement | HTMLElement[] | JSX.Element | JSX.Element[] | string;
-    actions?: HTMLElement | HTMLElement[];
-    size?: DialogSize | KTReactive<DialogSize>;
-    fullWidth?: boolean | KTReactive<boolean>;
+    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;
 /**
@@ -1333,167 +164,113 @@ type KTMuiDialog = JSX.Element;
  */
 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';
+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>;
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
 }
-type KTMuiLinearProgress = JSX.Element & {};
+type KTMuiLinearProgress = JSX.Element & {
+    value: number;
+};
 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'> {
-  /**
-   * 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 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 of the input field
-   * - Provide a `KTReactive` to make it reactive
-   */
-  type?: T | KTReactive<T>;
-  /**
-   * Whether the input is disabled
-   * - Provide a `KTReactive` to make it reactive
-   */
-  disabled?: boolean | KTReactive<boolean>;
-  /**
-   * 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.
-   */
-  readOnly?: boolean | KTReactive<boolean>;
-  /**
-   * Whether the input is required
-   * - Provide a `KTReactive` to make it reactive
-   */
-  required?: boolean | KTReactive<boolean>;
-  /**
-   * Whether the input is in error state
-   * - Provide a `KTReactive` to make it reactive
-   */
-  error?: boolean | KTReactive<boolean>;
-  /**
-   * Helper text displayed below the input
-   * - Provide a `KTReactive` to make it reactive
-   */
-  helperText?: string | KTReactive<string>;
-  /**
-   * Whether the input should take full width
-   * - Provide a `KTReactive` to make it reactive
-   */
-  fullWidth?: boolean | KTReactive<boolean>;
-  /**
-   * Whether the input is multiline (textarea)
-   * - Provide a `KTReactive` to make it reactive
-   */
-  multiline?: boolean | KTReactive<boolean>;
-  /**
-   * Number of rows for multiline input
-   * - Provide a `KTReactive` to make it reactive
-   */
-  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;
+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;
 
-interface KTMuiRadioProps {
-  class?: string;
-  style?: string | Partial<CSSStyleDeclaration>;
-  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 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[];
-  'on:change'?: (value: string) => void;
-  'on: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
  */
@@ -1503,25 +280,19 @@ 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;
+    label: string | JSX.Element;
 }
 interface KTMuiSelectProps extends KTMuiProps {
-    size?: 'small' | 'medium';
-    value?: string;
-    options: KTMuiSelectOption[] | KTReactive<KTMuiSelectOption[]>;
-    label?: string | KTReactive<string>;
-    placeholder?: string;
+    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;
-    fullWidth?: boolean;
-    disabled?: boolean | KTReactive<boolean>;
 }
 type KTMuiSelect = JSX.Element & {};
 /**
@@ -1534,7 +305,7 @@ interface KTMuiCardProps extends KTMuiProps {
     elevation?: number | KTReactive<number>;
     square?: boolean | KTReactive<boolean>;
     raised?: boolean | KTReactive<boolean>;
-    'on:click'?: (event: MouseEvent) => void;
+    'on:click'?: (event: PointerEvent) => void;
 }
 type KTMuiCard = JSX.Element & {};
 /**
@@ -1543,12 +314,11 @@ type KTMuiCard = JSX.Element & {};
 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';
+    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 & {};
@@ -1557,49 +327,93 @@ type KTMuiSwitch = JSX.Element & {};
  */
 declare function Switch(props: KTMuiSwitchProps): KTMuiSwitch;
 
-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;
+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, 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 };
+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 };