feat(types): add form field type definitions

Add type definitions for Checkbox, Radio, Select, Slider, Switch, and Textarea. Change single line comments to block comments and add missing props in TextField definition.

Author: csabageiszt

packages/svelte-materialify/@types/Checkbox.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from './shared';
+
+export interface CheckboxProps<T extends string | number | string[] = string[]> {
+  /** Classes to add to checkbox wrapper. */
+  class?: string;
+  /** Color class of the checkbox when checked or indeterminate. */
+  color?: string;
+  /** Whether the checkbox is selected. */
+  checked?: boolean;
+  /** Whether checkbox is indeterminate. */
+  indeterminate?: boolean;
+  /** Whether checkbox is disabled. */
+  disabled?: boolean;
+  /** Value of the checkbox. */
+  value?: T;
+  /** Bind checkbox to a group. */
+  group?: T;
+  /** Id of the checkbox. Defaults to a random uid. */
+  id?: string;
+  /** Styles to add to checkbox wrapper. */
+  style?: string;
+  /** Reference to checkbox input element in the DOM. */
+  inputElement?: Element;
+}
+
+declare class Checkbox extends SvelteComponent<CheckboxProps> {}
+
+export default Checkbox;

packages/svelte-materialify/@types/Radio.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from './shared';
+
+export interface RadioProps<T extends string | number | string[] = string[]> {
+  /** Classes to add to radio wrapper. */
+  class?: string;
+  /** Color of the radio when active. */
+  color?: string;
+  /** Disables the radio. */
+  disabled?: boolean;
+  /** Bind radio to a group. */
+  group?: T;
+  /** Value of the radio. */
+  value?: T;
+  /** Id of the radio. */
+  id?: string;
+  /** Styles to add to radio wrapper. */
+  style?: string;
+  /** DOM reference to radio input element. */
+  inputElement?: Element;
+}
+
+declare class Radio extends SvelteComponent<RadioProps> {}
+
+export default Radio;

packages/svelte-materialify/@types/Select.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponent } from './shared';
+
+interface SelectProps<T extends number[] | string[] = string[]> {
+  /** Classes to add to select wrapper. */
+  class?: string;
+  /** Whether select is opened. */
+  active?: string;
+  /** Value of the select. */
+  value?: T;
+  /** List of items to select from. */
+  items?: { name: string | number, value: string | number }[];
+  /** Whether select is the `filled` material design variant. */
+  filled?: boolean;
+  /** Whether select is the `outlined` material design variant. */
+  outlined?: boolean;
+  /** Whether select is outlined by elevation. */
+  solo?: boolean;
+  /** Whether select's height is reduced. */
+  dense?: boolean;
+  /** Placeholder content for select. */
+  placeholder?: string;
+  /** Hint text. */
+  hint?: string;
+  /** Whether at least one item must be selected. */
+  mandatory?: boolean;
+  /** Whether you can select multiple options. */
+  multiple?: boolean;
+  /** Maximum number of selectable options. Defaults to unlimited. */
+  max?: number;
+  /** Whether selected options appear as chips. */
+  chips?: boolean;
+  /** Whether select is disabled. */
+  disabled?: boolean;
+  /**
+   * Whether select closes on selection. Defaults to `true` on single select and `false`
+   * on multiple select.
+   */
+  closeOnClick?: boolean;
+  /** Convert the selected value for the underlying text field. */
+  format?: (value: string | number | string[] | number[]) => string | number;
+}
+
+declare class Select extends SvelteComponent<SelectProps> { }
+
+export default Select;

packages/svelte-materialify/@types/Slider.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponent } from './shared';
+
+interface SliderProps {
+  /** Minimum allowed value. */
+  min?: number;
+  /** Maximum allowed value. */
+  max?: number;
+  /** Value of the slider. */
+  value?: number | number[];
+  /** Display colored bars between handles. */
+  connect?: boolean | boolean[] | 'lower' | 'upper' ;
+  /** Color class of the slider when active. */
+  color?: string;
+  /** Slider jump interval. By default, the slider slides fluently. */
+  step?: number;
+  /** The minimum distance between the handles. Defaults to zero. */
+  margin?: number;
+  /** The maximum distance between two handles. Defaults to unlimited. */
+  limit?: number;
+  /** Limits how close to the slider edges handles can be. */
+  padding?: number | [number] | [number, number];
+  /**
+   * Whether to display thumb tooltips. Can be set individually for each handle with an
+   * array. Default formatter can be replaced by passing in a formatter function in place
+   * of the boolean. Defaults to `false`.
+   */
+  thumb?: boolean | ((value: number) => string) | (boolean | ((value: number) => string))[];
+  /**
+   * Whether handle tooltips are always visible. Defaults to `false` (Only active
+   * handle's tooltip is visible.).
+   */
+  persistentThumb?: boolean;
+  /** Custom tooltip class. Defaults to `primary-color`. */
+  thumbClass?: string;
+  /**
+   * Whether slider's orientation is vertical. Defaults to `false`.
+   * Vertical sliders don't assume a default `height`, so a height needs to be set.
+   */
+  vertical?: boolean;
+  /** Whether to display the label at the end of the slider. */
+  inverseLabel?: boolean;
+  /** Whether slider is read-only. */
+  readonly?: boolean;
+  /** Whether slider is disabled. */
+  disabled?: boolean;
+  /** Hint text. */
+  hint?: string;
+  /** Styles to add to slider element. */
+  style?: string;
+}
+
+declare class Slider extends SvelteComponent<SliderProps> { }
+
+export default Slider;

packages/svelte-materialify/@types/Switch.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from './shared';
+
+export interface SwitchProps {
+  /** Classes to add to switch wrapper. */
+  class?: string;
+  /** Color class of the switch when active. */
+  color?: string;
+  /** Value of the switch. */
+  value?: string | number;
+  /** Bind switch to a group. */
+  group?: string[] | number[];
+  /** Whether the switch is on. */
+  checked?: boolean;
+  /** Whether switch thumb is inside the switch track. */
+  inset?: boolean;
+  /** Whether switch height is reduced. */
+  dense?: boolean;
+  /** Whether switch is disabled. */
+  disabled?: boolean;
+  /** Id of the switch. Defaults to a random uid. */
+  id?: string;
+  /** Styles to add to switch wrapper. */
+  style?: string;
+  /** Reference to switch input element in the DOM. */
+  inputElement?: Element;
+}
+
+declare class Switch extends SvelteComponent<SwitchProps> { }
+
+export default Switch;

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

@@ -1,42 +1,55 @@
 import { SvelteComponent } from './shared';
 
 interface TextFieldProps {
-  // Value of the text input.
+  /** Classes to add to text field wrapper. */
+  class?: string;
+  /** Value of the text field. */
   value?: string;
-  // The color of the input when active.
+  /** Color class of the text field when active. */
   color?: string;
-  // Changes the variant of the input to filled.
+  /** Whether text field is the `filled` material design variant. */
   filled?: boolean;
-  // Changes the variant of the input to solo.
+  /** Whether text field is outlined by elevation. */
   solo?: boolean;
-  // Changes the variant of the input to outlined.
+  /** Whether text field is the `outlined` material design variant. */
   outlined?: boolean;
-  // Removes any shadow from the input.
+  /** Whether text field do not have elevation. */
   flat?: boolean;
-  // Reduces the input height.
+  /** Whether text field height is reduced. */
   dense?: boolean;
-  // Adds a border radius to the input.
+  /** Whether text field has rounded corners. */
   rounded?: boolean;
-  // Add input clear functionality.
+  /** Whether text field has a clear button. */
   clearable?: boolean;
-  // Puts input in readonly state.
+  /** Whether text field is read-only. */
   readonly?: boolean;
-  // Disable the input.
+  /** Whether text field is disabled. */
   disabled?: boolean;
-  // The input placeholder content.
+  /** Placeholder content for text field. */
   placeholder?: string;
-  // Hint text.
+  /** Hint text. */
   hint?: string;
-  // Creates counter for input length.
+  /** Display a counter set to a desired input length. */
   counter?: number;
-  // An array of functions which take input value as arguement and return error message.
-  rules?: ((value) => string | true)[];
-  // Delays validation till blur.
+  /** Error messages to display. */
+  messages?: string[];
+  /**
+   * A list of validator functions that take the textarea value and return an error
+   * message, or `true` otherwise.
+   */
+  rules?: ((value: string) => string | true)[];
+  /** Number of error messages to display. Defaults to one. */
+  errorCount?: number;
+  /** Whether to delay validation until blur. */
   validateOnBlur?: boolean;
-  // Error state of the input.
+  /** Whether text field has error. */
   error?: boolean;
-  // Id of the text input.
+  /** Id of the text field. Defaults to a random uid. */
   id?: string;
+  /** Styles to add to textarea wrapper. */
+  style?: string;
+  /** Reference to textarea element in the DOM. */
+  inputElement?: Element;
 }
 
 declare class TextField extends SvelteComponent<TextFieldProps> {}

packages/svelte-materialify/@types/Textarea.d.ts

@@ -0,0 +1,61 @@
+import { SvelteComponent } from './shared';
+
+interface TextareaProps<T extends string | number | string[] = string[]> {
+  /** Value of the textarea. */
+  value?: T;
+  /** Color class of the textarea when active. */
+  color?: string;
+  /** Whether textarea is the `filled` material design variant. */
+  filled?: boolean;
+  /** Whether textarea is outlined by elevation. */
+  solo?: boolean;
+  /** Whether textarea is the `outlined` material design variant. */
+  outlined?: boolean;
+  /** Whether textarea do not have elevation. */
+  flat?: boolean;
+  /** Whether textarea has rounded corners. */
+  rounded?: boolean;
+  /** Whether textarea has a clear button. */
+  clearable?: boolean;
+  /** Whether textarea is read-only. */
+  readonly?: boolean;
+  /** Number of initial textarea lines. Defaults to 5. */
+  rows?: number;
+  /** Whether textarea is allowed to grow with the text. */
+  autogrow?: boolean;
+  /** Whether textarea is not allowed to grow with the text. */
+  noResize?: boolean;
+  /** Whether textarea is disabled. */
+  disabled?: boolean;
+  /** Placeholder content for textarea. */
+  placeholder?: string;
+  /** Hint text. */
+  hint?: string;
+  /** Display a counter set to a desired input length. */
+  counter?: number;
+  /**
+   * A list of validator functions that take the textarea value and return an error
+   * message, or `true` otherwise.
+   */
+  rules?: ((value: T) => string | true)[];
+  /** Number of error messages to display. Defaults to one. */
+  errorCount?: number;
+  /** Error messages to display. */
+  messages?: string[];
+  /** Whether to delay validation until blur. */
+  validateOnBlur?: boolean;
+  /** Whether textarea has error. */
+  error?: boolean;
+  /** Whether textarea wrapper has `success` class. */
+  success?: boolean;
+  /** Id of the textarea. Defaults to a random uid. */
+  id?: string;
+  /** Styles to add to textarea wrapper. */
+  style?: string;
+  /** Reference to textarea element in the DOM. */
+  textarea?: Element;
+}
+
+declare class Textarea extends SvelteComponent<TextareaProps> { }
+
+export default Textarea;

packages/svelte-materialify/@types/index.d.ts

@@ -1,40 +1,46 @@
-export { default as Ripple } from './Ripple';
 export { default as ClickOutside } from './ClickOutside';
 export { default as Intersect } from './Intersect';
 export { default as Jump } from './Jump';
+export { default as Ripple } from './Ripple';
 export { default as Touch } from './Touch';
 
 export { default as Alert } from './Alert';
-export { default as Avatar } from './Avatar';
 export { default as AppBar } from './AppBar';
+export { default as Avatar } from './Avatar';
 export { default as Badge } from './Badge';
-export { default as Button } from './Button';
 export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as Button } from './Button';
 export { default as Card } from './Card';
-export { default as CardTitle } from './CardTitle';
+export { default as CardActions } from './CardActions';
 export { default as CardSubtitle } from './CardSubtitle';
 export { default as CardText } from './CardText';
-export { default as CardActions } from './CardActions';
-export { default as Container } from './Container';
+export { default as CardTitle } from './CardTitle';
+export { default as Checkbox } from './Checkbox';
 export { default as Col } from './Col';
+export { default as Container } from './Container';
+export { default as Dialog } from './Dialog';
 export { default as Divider } from './Divider';
-export { default as ItemGroup } from './ItemGroup';
+export { default as ExpansionPanel } from './ExpansionPanel';
+export { default as ExpansionPanels } from './ExpansionPanels';
 export { default as Icon } from './Icon';
 export { default as Input } from './Input';
+export { default as ItemGroup } from './ItemGroup';
 export { default as List } from './List';
 export { default as ListGroup } from './ListGroup';
-export { default as ListItemGroup } from './ListItemGroup';
 export { default as ListItem } from './ListItem';
+export { default as ListItemGroup } from './ListItemGroup';
 export { default as MaterialApp } from './MaterialApp';
 export { default as Menu } from './Menu';
 export { default as NavigationDrawer } from './NavigationDrawer';
-export { default as Dialog } from './Dialog';
 export { default as Overlay } from './Overlay';
+export { default as ProgressCircular } from './ProgressCircular';
+export { default as ProgressLinear } from './ProgressLinear';
+export { default as Radio } from './Radio';
 export { default as Row } from './Row';
+export { default as Select } from './Select';
+export { default as Slider } from './Slider';
 export { default as Snackbar } from './Snackbar';
+export { default as Switch } from './Switch';
+export { default as Textarea } from './Textarea';
 export { default as TextField } from './TextField';
-export { default as ProgressLinear } from './ProgressLinear';
-export { default as ProgressCircular } from './ProgressCircular';
-export { default as ExpansionPanel } from './ExpansionPanel';
-export { default as ExpansionPanels } from './ExpansionPanels';
 export { default as Tooltip } from './Tooltip';