feat(typing): fixes after review

packages/svelte-materialify/@types/components/AppBar.d.ts

@@ -1,18 +1,17 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class AppBar extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    height?: string;
-    tile?: boolean;
-    flat?: boolean;
-    dense?: boolean;
-    prominent?: boolean;
-    fixed?: boolean;
-    absolute?: boolean;
-    collapsed?: boolean;
-    style?: string;
-  } & Record<string, any>;
+interface AppBarProps {
+  height?: string;
+  tile?: boolean;
+  flat?: boolean;
+  dense?: boolean;
+  prominent?: boolean;
+  fixed?: boolean;
+  absolute?: boolean;
+  collapsed?: boolean;
+  style?: string;
 }
 
+declare class AppBar extends LocalSvelteComponent<AppBarProps> {}
+
 export default AppBar;

packages/svelte-materialify/@types/components/Button.d.ts

@@ -1,24 +1,23 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class Button extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    fab?: boolean;
-    icon?: boolean;
-    block?: boolean;
-    size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
-    tile?: boolean;
-    text?: boolean;
-    depressed?: boolean;
-    outlined?: boolean;
-    rounded?: boolean;
-    disabled?: boolean;
-    active?: boolean;
-    activeClass?: string;
-    type?: 'button' | 'reset' | 'submit';
-    ripple?: any;
-    style?: string;
-  } & Record<string, any>;
+interface ButtonProps {
+  fab?: boolean;
+  icon?: boolean;
+  block?: boolean;
+  size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
+  tile?: boolean;
+  text?: boolean;
+  depressed?: boolean;
+  outlined?: boolean;
+  rounded?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+  activeClass?: string;
+  type?: 'button' | 'reset' | 'submit';
+  ripple?: any;
+  style?: string;
 }
 
+declare class Button extends LocalSvelteComponent<ButtonProps> {}
+
 export default Button;

packages/svelte-materialify/@types/components/Icon.d.ts

@@ -1,16 +1,15 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class Icon extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    size?: string;
-    rotate?: number;
-    spin?: boolean;
-    disabled?: boolean;
-    path?: any;
-    label?: any;
-    style?: string;
-  } & Record<string, any>;
+interface IconProps {
+  size?: string;
+  rotate?: number;
+  spin?: boolean;
+  disabled?: boolean;
+  path?: any;
+  label?: any;
+  style?: string;
 }
 
+declare class Icon extends LocalSvelteComponent<IconProps> {}
+
 export default Icon;

packages/svelte-materialify/@types/components/Input.d.ts

@@ -1,19 +1,18 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class Input extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    value?: any;
-    color?: string;
-    dense?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-    counter?: boolean;
-    hint?: string;
-    messages?: string[];
-    messagesCount?: number;
-    error?: boolean;
-  } & Record<string, any>;
+interface InputProps {
+  value?: any;
+  color?: string;
+  dense?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  counter?: boolean;
+  hint?: string;
+  messages?: string[];
+  messagesCount?: number;
+  error?: boolean;
 }
 
+declare class Input extends LocalSvelteComponent<InputProps> {}
+
 export default Input;

packages/svelte-materialify/@types/components/MaterialApp.d.ts

@@ -1,9 +1,9 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class MaterialApp extends SvelteComponent {
-  $$prop_def: {
-    theme?: string;
-  } & Record<string, any>;
+interface MaterialAppProps {
+  theme?: string;
 }
 
+declare class MaterialApp extends LocalSvelteComponent<MaterialAppProps> {}
+
 export default MaterialApp;

packages/svelte-materialify/@types/components/NavigationDrawer.d.ts

@@ -1,23 +1,21 @@
-import { SvelteComponent } from 'svelte';
-import { TransitionConfig } from 'svelte/transition';
+import { LocalSvelteComponent } from '../shared';
 
-declare class MaterialApp extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    width?: string;
-    active?: boolean;
-    fixed?: boolean;
-    absolute?: boolean;
-    right?: boolean;
-    mini?: boolean;
-    clipped?: boolean;
-    noBorder?: boolean;
-    miniWidth?: string;
-    clippedHeight?: string;
-    transition?: (node: Element, options: Record<string, any>) => TransitionConfig; // Svelte transition???
-    transitionOpts?: Record<string, any>;
-    style?: string;
-  } & Record<string, any>;
+interface NavigationDrawerProps {
+  width?: string;
+  active?: boolean;
+  fixed?: boolean;
+  absolute?: boolean;
+  right?: boolean;
+  mini?: boolean;
+  clipped?: boolean;
+  noBorder?: boolean;
+  miniWidth?: string;
+  clippedHeight?: string;
+  transition?: any;
+  transitionOpts?: Record<string, any>;
+  style?: string;
 }
 
-export default MaterialApp;
+declare class NavigationDrawer extends LocalSvelteComponent<NavigationDrawerProps> {}
+
+export default NavigationDrawer;

packages/svelte-materialify/@types/components/Overlay.d.ts

@@ -1,16 +1,15 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class Overlay extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    active?: boolean;
-    opacity?: number;
-    color?: string;
-    index?: number;
-    absolute?: boolean;
-    fadeOptions?: any;
-    style?: string;
-  } & Record<string, any>;
+interface OverlayProps {
+  active?: boolean;
+  opacity?: number;
+  color?: string;
+  index?: number;
+  absolute?: boolean;
+  fadeOptions?: any;
+  style?: string;
 }
 
+declare class Overlay extends LocalSvelteComponent<OverlayProps> {}
+
 export default Overlay;

packages/svelte-materialify/@types/components/TextField.d.ts

@@ -1,50 +1,50 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../shared';
 
-declare class TextField extends SvelteComponent {
-  $$prop_def: {
-    // Value of the text input.
-    value?: string;
-    // The color of the input when active.
-    color?: string;
-    // Changes the variant of the input to filled.
-    filled?: boolean;
-    // Changes the variant of the input to solo.
-    solo?: boolean;
-    // Changes the variant of the input to outlined.
-    outlined?: boolean;
-    // Removes any shadow from the input.
-    flat?: boolean;
-    // Reduces the input height.
-    dense?: boolean;
-    // Adds a border radius to the input.
-    rounded?: boolean;
-    // Add input clear functionality.
-    clearable?: boolean;
-    // Puts input in readonly state.
-    readonly?: boolean;
-    // Disable the input.
-    disabled?: boolean;
-    // The input placeholder content.
-    placeholder?: string;
-    // Hint text.
-    hint?: string;
-    /**
-     * Creates counter for input length.
-     * @type {number}
-     */
-    counter?: number;
-    /**
-     * An array of functions which take input value as arguement and return error message.
-     * @type {Array}
-     */
-    rules: ((value) => string | false)[];
-    // Delays validation till blur.
-    validateOnBlur: boolean;
-    // Error state of the input.
-    error: boolean;
-    // Id of the text input.
-    id?: string;
-  } & Record<string, any>;
+interface TextFieldProps {
+  // Value of the text input.
+  value?: string;
+  // The color of the input when active.
+  color?: string;
+  // Changes the variant of the input to filled.
+  filled?: boolean;
+  // Changes the variant of the input to solo.
+  solo?: boolean;
+  // Changes the variant of the input to outlined.
+  outlined?: boolean;
+  // Removes any shadow from the input.
+  flat?: boolean;
+  // Reduces the input height.
+  dense?: boolean;
+  // Adds a border radius to the input.
+  rounded?: boolean;
+  // Add input clear functionality.
+  clearable?: boolean;
+  // Puts input in readonly state.
+  readonly?: boolean;
+  // Disable the input.
+  disabled?: boolean;
+  // The input placeholder content.
+  placeholder?: string;
+  // Hint text.
+  hint?: string;
+  /**
+   * Creates counter for input length.
+   * @type {number}
+   */
+  counter?: number;
+  /**
+   * An array of functions which take input value as arguement and return error message.
+   * @type {Array}
+   */
+  rules: ((value) => string | false)[];
+  // Delays validation till blur.
+  validateOnBlur: boolean;
+  // Error state of the input.
+  error: boolean;
+  // Id of the text input.
+  id?: string;
 }
 
+declare class TextField extends LocalSvelteComponent<TextFieldProps> {}
+
 export default TextField;

packages/svelte-materialify/@types/components/card/card.d.ts

@@ -1,18 +1,17 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../../shared';
 
-declare class Card extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    flat?: boolean;
-    tile?: boolean;
-    outlined?: boolean;
-    raised?: boolean;
-    shaped?: boolean;
-    hover?: boolean;
-    link?: boolean;
-    disabled?: boolean;
-    style?: string;
-  } & Record<string, any>;
+interface CardProps {
+  flat?: boolean;
+  tile?: boolean;
+  outlined?: boolean;
+  raised?: boolean;
+  shaped?: boolean;
+  hover?: boolean;
+  link?: boolean;
+  disabled?: boolean;
+  style?: string;
 }
 
+declare class Card extends LocalSvelteComponent<CardProps> {}
+
 export default Card;

packages/svelte-materialify/@types/components/list/List.d.ts

@@ -1,16 +1,15 @@
-import { SvelteComponent } from 'svelte';
+import { LocalSvelteComponent } from '../../shared';
 
-declare class List extends SvelteComponent {
-  $$prop_def: {
-    class?: string;
-    dense?: boolean;
-    disabled?: boolean;
-    flat?: boolean;
-    rounded?: boolean;
-    nav?: boolean;
-    outlined?: boolean;
-    style?: string;
-  } & Record<string, any>;
+interface ListProps {
+  dense?: boolean;
+  disabled?: boolean;
+  flat?: boolean;
+  rounded?: boolean;
+  nav?: boolean;
+  outlined?: boolean;
+  style?: string;
 }
 
+declare class List extends LocalSvelteComponent<ListProps> {}
+
 export default List;