@ktjs/mui 0.19.0 → 0.20.2

package/dist/index.d.ts

@@ -1,3 +1,34 @@
+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;
+
+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;
+}
+/**
+ * Button component - mimics MUI Button appearance and behavior
+ */
+declare function Button(props: KTMuiButtonProps): JSX.Element;
+
 type otherstring = string & {};
 
 type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
@@ -6,8 +37,6 @@ declare class KTRef<T> {
      * Indicates that this is a KTRef instance
      */
     isKT: boolean;
-    private _value;
-    private _onChanges;
     constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
     /**
      * If new value and old value are both nodes, the old one will be replaced in the DOM
@@ -18,6 +47,79 @@ declare class KTRef<T> {
     removeOnChange(callback: RefChangeHandler<T>): boolean;
 }
 
+type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
+type KTAvailableContent = SingleContent | KTAvailableContent[];
+type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
+
+/**
+ * Used to create enhanced HTML elements
+ */
+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;
@@ -997,19 +1099,13 @@ interface SVGAttributesMap {
   view: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
 }
 
-type KTHTMLElement<El extends HTMLElement = HTMLElement> = El & {
-  /**
-   * Automically generate a redraw function if it is not provided
-   * @param props
-   */
-  redraw: (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
-};
-
 declare global {
   namespace JSX {
-    type Element = KTHTMLElement;
+    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'];
@@ -1178,10 +1274,71 @@ declare global {
       tspan: SVGAttributesMap['tspan'];
       use: SVGAttributesMap['use'];
       view: SVGAttributesMap['view'];
+
+      // 'svg:svg': AttributesMap['svg'];
+      // 'svg:a': SVGAttributesMap['a'];
+      // 'svg:animate': SVGAttributesMap['animate'];
+      // 'svg:animateMotion': SVGAttributesMap['animateMotion'];
+      // 'svg:animateTransform': SVGAttributesMap['animateTransform'];
+      // 'svg:circle': SVGAttributesMap['circle'];
+      // 'svg:clipPath': SVGAttributesMap['clipPath'];
+      // 'svg:defs': SVGAttributesMap['defs'];
+      // 'svg:desc': SVGAttributesMap['desc'];
+      // 'svg:ellipse': SVGAttributesMap['ellipse'];
+      // 'svg:feBlend': SVGAttributesMap['feBlend'];
+      // 'svg:feColorMatrix': SVGAttributesMap['feColorMatrix'];
+      // 'svg:feComponentTransfer': SVGAttributesMap['feComponentTransfer'];
+      // 'svg:feComposite': SVGAttributesMap['feComposite'];
+      // 'svg:feConvolveMatrix': SVGAttributesMap['feConvolveMatrix'];
+      // 'svg:feDiffuseLighting': SVGAttributesMap['feDiffuseLighting'];
+      // 'svg:feDisplacementMap': SVGAttributesMap['feDisplacementMap'];
+      // 'svg:feDistantLight': SVGAttributesMap['feDistantLight'];
+      // 'svg:feDropShadow': SVGAttributesMap['feDropShadow'];
+      // 'svg:feFlood': SVGAttributesMap['feFlood'];
+      // 'svg:feFuncA': SVGAttributesMap['feFuncA'];
+      // 'svg:feFuncB': SVGAttributesMap['feFuncB'];
+      // 'svg:feFuncG': SVGAttributesMap['feFuncG'];
+      // 'svg:feFuncR': SVGAttributesMap['feFuncR'];
+      // 'svg:feGaussianBlur': SVGAttributesMap['feGaussianBlur'];
+      // 'svg:feImage': SVGAttributesMap['feImage'];
+      // 'svg:feMerge': SVGAttributesMap['feMerge'];
+      // 'svg:feMergeNode': SVGAttributesMap['feMergeNode'];
+      // 'svg:feMorphology': SVGAttributesMap['feMorphology'];
+      // 'svg:feOffset': SVGAttributesMap['feOffset'];
+      // 'svg:fePointLight': SVGAttributesMap['fePointLight'];
+      // 'svg:feSpecularLighting': SVGAttributesMap['feSpecularLighting'];
+      // 'svg:feSpotLight': SVGAttributesMap['feSpotLight'];
+      // 'svg:feTile': SVGAttributesMap['feTile'];
+      // 'svg:feTurbulence': SVGAttributesMap['feTurbulence'];
+      // 'svg:filter': SVGAttributesMap['filter'];
+      // 'svg:foreignObject': SVGAttributesMap['foreignObject'];
+      // 'svg:g': SVGAttributesMap['g'];
+      // 'svg:image': SVGAttributesMap['image'];
+      // 'svg:line': SVGAttributesMap['line'];
+      // 'svg:linearGradient': SVGAttributesMap['linearGradient'];
+      // 'svg:marker': SVGAttributesMap['marker'];
+      // 'svg:mask': SVGAttributesMap['mask'];
+      // 'svg:metadata': SVGAttributesMap['metadata'];
+      // 'svg:mpath': SVGAttributesMap['mpath'];
+      // 'svg:path': SVGAttributesMap['path'];
+      // 'svg:pattern': SVGAttributesMap['pattern'];
+      // 'svg:polygon': SVGAttributesMap['polygon'];
+      // 'svg:polyline': SVGAttributesMap['polyline'];
+      // 'svg:radialGradient': SVGAttributesMap['radialGradient'];
+      // 'svg:rect': SVGAttributesMap['rect'];
+      // 'svg:set': SVGAttributesMap['set'];
+      // 'svg:stop': SVGAttributesMap['stop'];
+      // 'svg:switch': SVGAttributesMap['switch'];
+      // 'svg:symbol': SVGAttributesMap['symbol'];
+      // 'svg:text': SVGAttributesMap['text'];
+      // 'svg:textPath': SVGAttributesMap['textPath'];
+      // 'svg:tspan': SVGAttributesMap['tspan'];
+      // 'svg:use': SVGAttributesMap['use'];
+      // 'svg:view': SVGAttributesMap['view'];
     }
 
     interface IntrinsicAttributes {
-      ref?: KTRef<HTMLElement>;
+      ref?: KTRef<any>;
       'k-if'?: any;
       children?: KTRawContent;
     }
@@ -1192,116 +1349,9 @@ declare global {
   }
 }
 
-type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
-type KTAvailableContent = SingleContent | KTAvailableContent[];
-type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
-
-/**
- * Used to create enhanced HTML elements
- */
-interface KTBaseAttribute {
-  [k: string]: any;
-
-  // # kt-specific attributes
-  ref?: KTRef<KTHTMLElement>;
-  '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;
-
-interface AlertProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    children: string | HTMLElement | KTHTMLElement | Array<string | HTMLElement | KTHTMLElement>;
-    severity?: 'error' | 'warning' | 'info' | 'success';
-    variant?: 'standard' | 'filled' | 'outlined';
-    icon?: HTMLElement | KTHTMLElement | false;
-    'kt:close'?: () => void;
-}
-/**s
- * Alert component - mimics MUI Alert appearance and behavior
- */
-declare function Alert(props: AlertProps): KTHTMLElement;
-
-interface ButtonProps {
-    class?: string;
-    style?: string | Partial<CSSStyleDeclaration>;
-    children: string | HTMLElement | KTHTMLElement;
-    variant?: 'contained' | 'outlined' | 'text';
-    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
-    size?: 'small' | 'medium' | 'large';
-    disabled?: boolean;
-    fullWidth?: boolean;
-    iconOnly?: boolean;
-    startIcon?: HTMLElement | KTHTMLElement;
-    endIcon?: HTMLElement | KTHTMLElement;
-    type?: 'button' | 'submit' | 'reset';
-    'on:click'?: (event: Event) => void;
-}
-/**
- * Button component - mimics MUI Button appearance and behavior
- */
-declare function Button(props: ButtonProps): KTHTMLElement;
-
 interface KTMuiCheckboxProps {
   value: string;
-  label?: string | KTHTMLElement | HTMLElement;
+  label?: string | JSX.Element | HTMLElement;
   checked?: boolean;
   size?: 'small' | 'medium';
   'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
@@ -1320,13 +1370,13 @@ interface KTMuiCheckboxGroupProps {
   row?: boolean;
 }
 
-type KTMuiCheckbox = KTHTMLElement & {
+type KTMuiCheckbox = JSX.Element & {
   checked: boolean;
   value: string;
   disabled: boolean;
 };
 
-type KTMuiCheckboxGroup = KTHTMLElement & {
+type KTMuiCheckboxGroup = JSX.Element & {
   value: string[];
   disabled: boolean[];
   disableAll: () => void;
@@ -1346,12 +1396,12 @@ interface KTMuiDialogProps {
     open?: boolean;
     'kt:close'?: () => void;
     title?: string;
-    children?: HTMLElement | HTMLElement[] | string;
+    children?: HTMLElement | HTMLElement[] | JSX.Element | JSX.Element[] | string;
     actions?: HTMLElement | HTMLElement[];
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
     fullWidth?: boolean;
 }
-type KTMuiDialog = KTHTMLElement & {
+type KTMuiDialog = JSX.Element & {
     /**
      * Controls whether the dialog is open or closed
      */
@@ -1364,7 +1414,7 @@ type KTMuiDialog = KTHTMLElement & {
 declare function Dialog(props: KTMuiDialogProps): KTMuiDialog;
 
 interface FormLabelProps {
-    children: string | HTMLElement | KTHTMLElement;
+    children: string | HTMLElement | JSX.Element;
     required?: boolean;
     error?: boolean;
     disabled?: boolean;
@@ -1376,7 +1426,7 @@ interface FormLabelProps {
 /**
  * FormLabel component - mimics MUI FormLabel appearance and behavior
  */
-declare function FormLabel(props: FormLabelProps): KTHTMLElement;
+declare function FormLabel(props: FormLabelProps): JSX.Element;
 
 interface LinearProgressProps {
     class?: string;
@@ -1385,7 +1435,7 @@ interface LinearProgressProps {
     progress?: number;
     color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
 }
-type KTMuiLinearProgress = KTHTMLElement & {
+type KTMuiLinearProgress = JSX.Element & {
     /**
      * Reactive property to get or set the current progress value (0-100)
      */
@@ -1400,7 +1450,7 @@ type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 
 type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
-interface KTMuiTextFieldProps<T extends InputTypes> {
+interface KTMuiTextFieldProps<T extends InputTypes = 'text'> {
   class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
   label?: string;
@@ -1424,7 +1474,7 @@ interface KTMuiTextFieldProps<T extends InputTypes> {
   'kt:focus'?: () => void;
 }
 
-type KTMuiTextField = KTHTMLElement & {
+type KTMuiTextField = JSX.Element & {
   /**
    * Reactive `value` of the input field
    */
@@ -1481,7 +1531,7 @@ interface KTMuiRadioProps {
   class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
   value: string;
-  label: string | KTHTMLElement | HTMLElement;
+  label: string | JSX.Element | HTMLElement;
   checked?: boolean;
   size?: 'small' | 'medium';
   'kt:change'?: (checked: boolean, value: string) => void;
@@ -1501,7 +1551,7 @@ interface KTMuiRadioGroupProps {
   row?: boolean;
 }
 
-type KTMuiRadio = KTHTMLElement & {
+type KTMuiRadio = JSX.Element & {
   /**
    * The value of the radio button
    * @readonly
@@ -1513,7 +1563,7 @@ type KTMuiRadio = KTHTMLElement & {
    */
   checked: boolean;
 };
-type KTMuiRadioGroup = KTHTMLElement & {
+type KTMuiRadioGroup = JSX.Element & {
   /**
    * Reactive checked state of the radio button
    */
@@ -1545,10 +1595,20 @@ interface KTMuiSelectProps {
     fullWidth?: boolean;
     disabled?: boolean;
 }
+type KTMuiSelect = JSX.Element & {
+    /**
+     * Reactive `value` of the select component
+     */
+    value: string;
+    /**
+     * Reactive `disabled` state of the select component
+     */
+    disabled: boolean;
+};
 /**
  * Select component - mimics MUI Select appearance and behavior
  */
-declare function Select(props: KTMuiSelectProps): JSX.Element;
+declare function Select(props: KTMuiSelectProps): KTMuiSelect;
 
 declare function DownloadIcon(props: KTAttribute): JSX.Element;
 
@@ -1594,5 +1654,5 @@ declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
 
 declare function SelectAllIcon(props: KTAttribute): JSX.Element;
 
-export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon as FileOpen, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
+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 };