@ktjs/mui 0.19.0 → 0.20.0

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;
@@ -18,6 +49,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,17 +1101,9 @@ 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 {
       // Document-level & metadata
@@ -1181,7 +1277,7 @@ declare global {
     }
 
     interface IntrinsicAttributes {
-      ref?: KTRef<HTMLElement>;
+      ref?: KTRef<any>;
       'k-if'?: any;
       children?: KTRawContent;
     }
@@ -1192,116 +1288,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 +1309,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 +1335,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 +1353,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 +1365,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 +1374,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)
      */
@@ -1424,7 +1413,7 @@ interface KTMuiTextFieldProps<T extends InputTypes> {
   'kt:focus'?: () => void;
 }
 
-type KTMuiTextField = KTHTMLElement & {
+type KTMuiTextField = JSX.Element & {
   /**
    * Reactive `value` of the input field
    */
@@ -1481,7 +1470,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 +1490,7 @@ interface KTMuiRadioGroupProps {
   row?: boolean;
 }
 
-type KTMuiRadio = KTHTMLElement & {
+type KTMuiRadio = JSX.Element & {
   /**
    * The value of the radio button
    * @readonly
@@ -1513,7 +1502,7 @@ type KTMuiRadio = KTHTMLElement & {
    */
   checked: boolean;
 };
-type KTMuiRadioGroup = KTHTMLElement & {
+type KTMuiRadioGroup = JSX.Element & {
   /**
    * Reactive checked state of the radio button
    */
@@ -1545,10 +1534,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 +1593,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 };