@kws3/ui 2.0.5 → 2.1.1

package/controls/Radio.svelte

@@ -5,8 +5,8 @@
   @param {object} [value=null] - Value of radio button, Default: `null`
   @param {string} [style=""] - Inline CSS for the Radio button, Default: `""`
   @param {string} [label_style=""] - Inline CSS for Radio label, Default: `""`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Radio Button, Default: `""`
-  @param {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Radio button when selected, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Radio Button, Default: ``
+  @param {ColorOptions} [color=] - Color of the Radio button when selected, Default: ``
   @param {boolean} [inverted=false] - Inverts the Radio colour theme, Default: `false`
   @param {boolean} [circle=false] - Circular Radio button instead of the default square, Default: `false`
   @param {boolean} [disabled=false] - Disables Radio button, Default: `false`

package/controls/RangeSlider.svelte

@@ -12,8 +12,8 @@ This property can be bound to, to fetch the current value
 This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {boolean} [output=false] - Displays the current value, Default: `false`
   @param {boolean} [disabled=false] - Disables the Slider, Default: `false`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Slider, Default: `""`
-  @param {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the Slider, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Slider, Default: ``
+  @param {ColorOptions} [color=] - Colour of the Slider, Default: ``
   @param {string} [style=""] - Inline CSS for the Slider, Default: `""`
   @param {boolean} [circle=false] - Uses a round slider thumb instead of the default square, Default: `false`
   @param {boolean} [tooltip=false] - Displays the current value of the Slider as a tooltip
@@ -23,7 +23,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 
   ### Events
   - `change` - Native input change event
-  - `input` - Native input event
+  - `input`
 
 -->
 <div class="kws-range-control">

package/controls/Toggle.svelte

@@ -6,10 +6,10 @@
 
 This property can be bound to, to fetch the current value, Default: `false`
   @param {boolean} [disabled=false] - Disables the Toggle, Default: `false`
-  @param {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Toggle, Default: `""`
+  @param {ColorOptions} [color=] - Color of the Toggle, Default: ``
   @param {string} [on_text=""] - Text displayed on the Toggle when ON, Default: `""`
   @param {string} [off_text=""] - Text displayed on the Toggle when OFF, Default: `""`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Toggle, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Toggle, Default: ``
   @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
   @param {string} [class=""] - CSS classes for the Toggle, Default: `""`
 

package/controls/ToggleButtons.svelte

@@ -19,7 +19,7 @@ This property can be bound to, to fetch the current value, Default: `null`
   @param {string} [inner_class=""] - CSS classes for Button `.control` wrapper, Default: `""`
   @param {string} [active_class="is-primary"] - CSS classes to apply when a button is active (pressed), Default: `"is-primary"`
   @param {string} [inactive_class="is-outlined"] - CSS classes to apply when a button is inactive (not pressed), Default: `"is-outlined"`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Toggle Buttons, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Toggle Buttons, Default: ``
   @param {boolean} [fullwidth=false] - Expand all buttons so that they occupy full width of wrapping element, Default: `false`
   @param {string} [class=""] - CSS classes for the Button container, Default: `""`
 

package/datagrid/GridView/GridRow.svelte

@@ -12,12 +12,12 @@
   @param {object} [classNames={}] - Contails all CSS class for each column, Default: `{}`
   @param {boolean} [transition=false] - Determines whether the row has transition effect or not, Default: `false`
   @param {object} [styles={}] - Contains all CSS styles for each column, Default: `{}`
-  @param {array} [column_keys=[]] - Column_keys property, Default: `[]`
+  @param {array} [column_keys=[]] - Column keys, Default: `[]`
   @param {boolean} [bulk_actions=false] - Determines if selecting multiple rows and doing multiple actions is allowed, Default: `false`
   @param {boolean} [checked=false] - Determines whether the checkbox is checked or not, Default: `false`
   @param {array} [selectedIds=[]] - List of unique IDs of all the selected rows, Default: `[]`
-  @param {string} [selectCheckboxColor="info"] - Selected checkbox color, Default: `"info"`
-  @param {string} [selectCheckboxSize="medium"] - selected checkbox size, Default: `"medium"`
+  @param {ColorOptions} [selectCheckboxColor=info] - Selected checkbox color, Default: `info`
+  @param {SizeOptions} [selectCheckboxSize=medium] - selected checkbox size, Default: `medium`
   @param {function} [cellComponent()] - Custom cell component for a column
 
   ### Events
@@ -166,7 +166,7 @@
     selectedIds = [],
     /**
      * Selected checkbox color
-     * @type {Exclude<ColorOptions, 'success'>}
+     * @type {ColorOptions}
      */
     selectCheckboxColor = "info",
     /**

package/datagrid/GridView/GridView.svelte

@@ -14,9 +14,9 @@
   @param {boolean} [bulk_actions=false] - Determines if selecting multiple rows and doing multiple actions is allowed, Default: `false`
   @param {boolean} [selectAll=false] - Determines if all rows are selected, Default: `false`
   @param {array} [selectedIds=[]] - List of unique IDs of all the selected rows, Default: `[]`
-  @param {string} [selectAllCheckboxColor="primary"] - Colour of the `select all` checkbox, Default: `"primary"`
-  @param {string} [selectCheckboxColor="info"] - Color of the checkbox on each row, Default: `"info"`
-  @param {string} [selectCheckboxSize="medium"] - Size of the checkbox, Default: `"medium"`
+  @param {ColorOptions} [selectAllCheckboxColor=primary] - Colour of the `select all` checkbox, Default: `primary`
+  @param {ColorOptions} [selectCheckboxColor=info] - Color of the checkbox on each row, Default: `info`
+  @param {SizeOptions} [selectCheckboxSize=medium] - Size of the checkbox, Default: `medium`
   @param {object} [valueTransformers={}] - Contains all custom values for each column, Default: `{}`
   @param {object} [classTransformers={}] - CSS classes for each column, Default: `{}`
   @param {object} [styleTransformers={}] - CSS styles for each column, Default: `{}`
@@ -95,6 +95,7 @@
 
   /**
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
    */
 
   /**
@@ -149,15 +150,17 @@
     selectedIds = [],
     /**
      * Colour of the `select all` checkbox
-     * @type {Exclude<ColorOptions, 'success'>}
+     * @type {ColorOptions}
      */
     selectAllCheckboxColor = "primary",
     /**
      * Color of the checkbox on each row
+     * @type {ColorOptions}
      */
     selectCheckboxColor = "info",
     /**
      * Size of the checkbox
+     * @type {SizeOptions}
      */
     selectCheckboxSize = "medium",
     /**

package/datagrid/Pagination/Pagination.svelte

@@ -5,20 +5,20 @@
   @param {object} [meta={}] - Object containing `total`, `count`, `limit` and `offset` values
 
 **DEPRECATED**: Use `total`, `count`, `limit` and `offset`  props instead, Default: `{}`
-  @param {number} [limit=0] - How many items are meant to be per page, Default: `0`
-  @param {number} [count=0] - How many items are actually in this page, Default: `0`
+  @param {number} [limit=0] - Number of items to be displayed per page, Default: `0`
+  @param {number} [count=0] - Number of items being displayed in this page, Default: `0`
   @param {number} [total=0] - Total number of items available, Default: `0`
   @param {number} [offset=0] - Offset of the first item in this page, Default: `0`
   @param {boolean} [showTotal=true] - Determines whether to show total or not, Default: `true`
-  @param {boolean} [showCurrent=true] - Determines whether to show current page details, Default: `true`
-  @param {boolean} [showPerPage=true] - Determines whether to show per page options, Default: `true`
+  @param {boolean} [showCurrent=true] - Determines whether to display a breakdown of the range of items currently being displayed in a page, Default: `true`
+  @param {boolean} [showPerPage=true] - Determines whether to display the UI that allows user to choose the number of items to be displayed per page, Default: `true`
   @param {number} [maxVisiblePages=10] - Maximum number of consecutive pages to show in pagination after which a break is introduced in between them, Default: `10`
   @param {string} [entityName="entries"] - String to display total entries, Default: `"entries"`
-  @param {''|'small'|'medium'|'large'} [size="small"] - Size of the pagination elements, Default: `"small"`
+  @param {SizeOptions} [size=small] - Size of the pagination elements, Default: `small`
   @param {boolean} [frame=false] - Determines whether to show pagination frame or not, Default: `false`
   @param {string} [iconRight="chevron-right"] - Right navigation icon, Default: `"chevron-right"`
   @param {string} [iconLeft="chevron-left"] - Left navigation icon, Default: `"chevron-left"`
-  @param {array} [perPageOptions=[]] - Displays the options for how many items to show per page, Default: `[]`
+  @param {array} [perPageOptions=[]] - Available options given to the user, to choose the number of items displayed per page, Default: `[]`
   @method `goto(targetPage)` - Go to an arbitrary page number
   @method `prev()` - Go to the previous page
   @method `next()` - Go to the next page
@@ -152,11 +152,11 @@
       offset: 0,
     },
     /**
-     * How many items are meant to be per page
+     * Number of items to be displayed per page
      */
     limit = 0,
     /**
-     * How many items are actually in this page
+     * Number of items being displayed in this page
      */
     count = 0,
     /**
@@ -172,11 +172,11 @@
      */
     showTotal = true,
     /**
-     * Determines whether to show current page details
+     * Determines whether to display a breakdown of the range of items currently being displayed in a page
      */
     showCurrent = true,
     /**
-     * Determines whether to show per page options
+     * Determines whether to display the UI that allows user to choose the number of items to be displayed per page
      */
     showPerPage = true,
     /**
@@ -189,6 +189,7 @@
     entityName = "entries",
     /**
      * Size of the pagination elements
+     *
      * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "small",
@@ -205,7 +206,7 @@
      */
     iconLeft = "chevron-left",
     /**
-     * Displays the options for how many items to show per page
+     * Available options given to the user, to choose the number of items displayed per page
      */
     perPageOptions = [20, 50, 100, 150, 200, 250];
 

package/form/index.d.ts

@@ -0,0 +1,15 @@
+export function makeForms(items: any): any[] | {
+    formData: import("svelte/store").Writable<any>;
+    errors: import("svelte/store").Readable<any>;
+    touched: import("svelte/store").Readable<any>;
+    isValid: import("svelte/store").Readable<boolean>;
+    isTouched: import("svelte/store").Readable<any>;
+    tracker: import("svelte/store").Writable<any>;
+    update: (newData: any) => void;
+    reset: (e: any) => void;
+    setValidators: (newValidators: any) => void;
+};
+export function notEmpty(v: any): boolean;
+export function noDigits(v: any): boolean;
+export function withMsg(msg: any, fn: any): (v: any, otherFields: any) => any;
+//# sourceMappingURL=index.d.ts.map

package/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAGA;;;;;;;;;;EAWC;AA2ID,0CAA4C;AAE5C,0CAAqC;AAErC,8EAA8E"}

package/forms/AutoComplete.svelte

@@ -16,9 +16,9 @@ Only send this prop if you want to fetch `options` asynchronously.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
   @param {boolean} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
   @param {number} [score_threshold=5] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `5`
-  @param {number} [scoreThreshold=5] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `5`
-  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
-  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {number} [scoreThreshold=undefined] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `undefined`
+  @param {SizeOptions} [size=] - Size of the input, Default: ``
+  @param {ColorOptions} [color=] - Color of the input, Default: ``
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
@@ -192,12 +192,12 @@ Default value: `<span>{option.label}</span>`
   export let scoreThreshold = score_threshold;
   /**
    * Size of the input
-   *  @type {import('@kws3/ui/types').SizeOptions}
+   *  @type {SizeOptions}
    */
   export let size = "";
   /**
    * Color of the input
-   * @type {import('@kws3/ui/types').ColorOptions}
+   * @type {ColorOptions}
    */
   export let color = "";
   /**

package/forms/Datepicker.svelte

@@ -8,10 +8,11 @@ In `range_mode`, the expected format is `yyyy-mm-dd to yyyy-mm-dd`
 
 This property can be bound to, to fetch the selected date or date range. Output is in the same format as input., Default: `""`
   @param {string} [style=""] - Inline CSS for the input, Default: `""`
-  @param {string|''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the Date picker input, Default: `""`
+  @param {ColorOptions} [color=] - Colour of the Date picker input, Default: ``
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
+  @param {boolean} [readonly=false] - Make input value read-only, Default: `false`
   @param {string} [placeholder="Select Date.."] - Placeholder text for the input, Default: `"Select Date.."`
-  @param {string|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [calendar_color="primary"] - Colour of the Calendar, Default: `"primary"`
+  @param {ColorOptions} [calendar_color=primary] - Colour of the Calendar, Default: `primary`
   @param {any} [min_date=null] - Set earliest selectable date as an object or string
 
 **Example:** `"2021-06-06"` or `"(new Date('2021-01-01'))"`, Default: `null`
@@ -95,7 +96,7 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let placeholder = "Select Date..";
   /**
    * Colour of the Calendar
-   * @type {Exclude<ColorOptions, ''>}
+   * @type {ColorOptions}
    */
   export let calendar_color = "primary";
   /**

package/forms/MaskedInput.svelte

@@ -36,7 +36,7 @@ Requires `guide` to be `true`, Default: `false`
   import {
     createTextMaskInputElement,
     conformToMask,
-  } from "text-mask-core/src";
+  } from "@kws3/text-mask-core";
   /**
    * Mask array
    *

package/forms/PasswordInput.svelte

@@ -0,0 +1,224 @@
+<!--
+  @component
+
+
+  @param {boolean} [show_field_icon=true] - whether to show field icon or not, Default: `true`
+  @param {string} [field_icon="lock"] - field icon name, Default: `"lock"`
+  @param {FontFamilies} [field_icon_family=fa] - Icon family to be used
+
+Defaults to global family set via `Icon.setDefaultIconType()`
+
+Ultimately defaults to `fa`, if family is not set anywhere, Default: `fa`
+  @param {boolean} [show_visibility_switch=true] - whether has visibility feature or not, Default: `true`
+  @param {FontFamilies} [visibility_switch_icon_family=fa] - Icon family to be used
+
+Defaults to global family set via `Icon.setDefaultIconType()`
+
+Ultimately defaults to `fa`, if family is not set anywhere, Default: `fa`
+  @param {string} [visibility_switch_on_icon="eye"] - visibility switch on icon name, Default: `"eye"`
+  @param {string} [visibility_switch_off_icon="eye-slash"] - visibility switch off icon icon name, Default: `"eye-slash"`
+  @param {ExtendedColorOptions} [visibility_switch_on_color=grey] - visibility switch on icon color, Default: `grey`
+  @param {ExtendedColorOptions} [visibility_switch_off_color=grey] - visibility switch off icon color, Default: `grey`
+  @param {?string} [value=] - Value of the Input
+
+This property can be bound to, to fetch the current value, Default: ``
+  @param {SizeOptions} [size=] - Size of the PasswordInput, Default: ``
+  @param {ColorOptions} [color=] - Colour of the PasswordInput, Default: ``
+  @param {string} [style=""] - Inline CSS for the PasswordInput, Default: `""`
+  @param {boolean} [disabled=false] - Disables the PasswordInput, Default: `false`
+  @param {string} [placeholder=""] - Input placeholder, Default: `""`
+  @param {string} [class=""] - CSS classes of the PasswordInput, Default: `""`
+
+  ### Events
+  - `focus`
+  - `blur`
+  - `change`
+  - `input`
+  - `keyup`
+  - `keydown`
+  - `paste`
+
+-->
+
+<div class="field is-marginless">
+  <p class="control has-icons-left has-icons-right is-marginless">
+    <input
+      type="password"
+      bind:this={PASSWORD_INPUT}
+      {style}
+      bind:value
+      class="input is-{size} is-{color} {klass} {style}"
+      on:focus
+      on:blur
+      on:change
+      on:input
+      on:keyup
+      on:keydown
+      on:paste
+      {placeholder}
+      {disabled} />
+    {#if show_field_icon}
+      <span class="icon is-left">
+        <Icon
+          family={field_icon_family}
+          icon={field_icon}
+          size={iconSizes[size]} />
+      </span>
+    {/if}
+
+    {#if show_visibility_switch}
+      <span
+        class="icon is-right visibility-btn"
+        on:click={() => {
+          visibility = !visibility;
+        }}>
+        <Icon
+          family={visibility_switch_icon_family}
+          color={visibility
+            ? visibility_switch_on_color
+            : visibility_switch_off_color}
+          icon={visibility
+            ? visibility_switch_on_icon
+            : visibility_switch_off_icon}
+          size={iconSizes[size]} />
+      </span>
+    {/if}
+  </p>
+</div>
+
+<style lang="scss">
+  .visibility-btn {
+    pointer-events: fill !important;
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  import { Icon } from "@kws3/ui";
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').ExtendedColorOptions} ExtendedColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').FontFamilies} FontFamilies
+   *
+   */
+  let visibility = false;
+  let PASSWORD_INPUT;
+
+  /**
+   * whether to show field icon or not
+   * @type {boolean}
+   */
+  export let show_field_icon = true;
+
+  /**
+   * field icon name
+   * @type {string}
+   */
+  export let field_icon = "lock";
+
+  /**
+   * Icon family to be used
+   *
+   * Defaults to global family set via `Icon.setDefaultIconType()`
+   *
+   * Ultimately defaults to `fa`, if family is not set anywhere
+   *
+   * @type {FontFamilies}
+   */
+  export let field_icon_family = "fa";
+
+  /**
+   * whether has visibility feature or not
+   * @type {boolean}
+   */
+  export let show_visibility_switch = true;
+  /**
+   * Icon family to be used
+   *
+   * Defaults to global family set via `Icon.setDefaultIconType()`
+   *
+   * Ultimately defaults to `fa`, if family is not set anywhere
+   *
+   * @type {FontFamilies}
+   */
+  export let visibility_switch_icon_family = "fa";
+  /**
+   * visibility switch on icon name
+   * @type {string}
+   */
+  export let visibility_switch_on_icon = "eye";
+  /**
+   * visibility switch off icon icon name
+   * @type {string}
+   */
+  export let visibility_switch_off_icon = "eye-slash";
+  /**
+   * visibility switch on icon color
+   * @type {ExtendedColorOptions}
+   */
+  export let visibility_switch_on_color = "grey";
+  /**
+   * visibility switch off icon color
+   * @type {ExtendedColorOptions}
+   */
+  export let visibility_switch_off_color = "grey";
+
+  /**
+   * Value of the Input
+   *
+   * This property can be bound to, to fetch the current value
+   * @type {?string}
+   */
+  export let value = "";
+
+  /**
+   * Size of the PasswordInput
+   * @type {SizeOptions}
+   */
+  export let size = "";
+  /**
+   * Colour of the PasswordInput
+   * @type {ColorOptions}
+   */
+  export let color = "";
+  /**
+   * Inline CSS for the PasswordInput
+   * @type {string}
+   */
+  export let style = "";
+  /**
+   * Disables the PasswordInput
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Input placeholder
+   * @type {string}
+   */
+  export let placeholder = "";
+
+  /**
+   * CSS classes of the PasswordInput
+   * @type {string}
+   */
+  let klass = "";
+  export { klass as class };
+
+  // function onInput(event) {
+  //   value = event.target.value;
+  // }
+
+  let iconSizes = {
+    large: "medium",
+  };
+
+  $: visibility, setInputType();
+
+  function setInputType() {
+    if (PASSWORD_INPUT) {
+      PASSWORD_INPUT.type = visibility ? "text" : "password";
+    }
+  }
+</script>

package/forms/PasswordValidator/validatePassword.d.ts

@@ -0,0 +1,5 @@
+export default function _default(password: any, options: any): {
+    items: any[];
+    overall: boolean;
+};
+//# sourceMappingURL=validatePassword.d.ts.map

package/forms/PasswordValidator/validatePassword.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validatePassword.d.ts","sourceRoot":"","sources":["validatePassword.js"],"names":[],"mappings":"AAAA;;;EAwCC"}

package/forms/SearchInput.svelte

@@ -2,8 +2,8 @@
   @component
 
 
-  @param {string|''|'small'|'medium'|'large'} [size="small"] - Size of the input, Default: `"small"`
-  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {SizeOptions} [size=small] - Size of the input, Default: `small`
+  @param {ColorOptions} [color=] - Color of the input, Default: ``
   @param {string} [placeholder="Search"] - Placeholder text for the input, Default: `"Search"`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
@@ -11,7 +11,7 @@
   @param {array} [searchableKeys=[]] - array of object properties to search in., Default: `[]`
   @param {boolean} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
   @param {number} [score_threshold=2] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `2`
-  @param {number} [scoreThreshold=2] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `2`
+  @param {number} [scoreThreshold=undefined] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `undefined`
   @param {boolean} [word_match=false] - Whether to match against each word seperatly or whole sentence in flow., Default: `false`
   @param {string} [style=""] - Inline CSS for the input, Default: `""`
   @param {string} [class=""] - CSS classes for the input, Default: `""`
@@ -49,14 +49,19 @@
   import { onDestroy, onMount } from "svelte";
   import { makeSearchEngine } from "@kws3/ui/search";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Size of the input
-   *  @type {import('@kws3/ui/types').SizeOptions} size
+   *  @type {SizeOptions}
    */
   export let size = "small";
   /**
    * Color of the input
-   * @type {import('@kws3/ui/types').ColorOptions} color
+   * @type {ColorOptions}
    */
   export let color = "";
   /**

package/forms/Timepicker.svelte

@@ -8,18 +8,21 @@ Where `H` is in 24hr format
 
 This property can be bound to, to fetch the selected time. Output is in the same format as input., Default: `""`
   @param {string} [style=""] - Inline CSS for the input, Default: `""`
-  @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the Time picker input, Default: `""`
+  @param {ColorOptions} [color=] - Colour of the Time picker input, Default: ``
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [placeholder="Select Time.."] - Placeholder text for the input, Default: `"Select Time.."`
-  @param {'primary'|'warning'|'info'|'danger'|'dark'|'light'} [ui_color="primary"] - Colour of popup time selection UI, Default: `"primary"`
+  @param {ColorOptions} [ui_color=primary] - Colour of popup time selection UI, Default: `primary`
   @param {boolean} [time_24hr=false] - Display time selection UI in 24hr format, Default: `false`
-  @param {object} [options={}] - Extended set of options as supported by Flatpicker
   @param {any} [min_time=null] - Set earliest selectable time as string
-  **Example:** `"12:00 PM"` Default: `null`
+
+**Example:** `"01:00 PM"` or "13:00"`, Default: `null`
   @param {any} [max_time=null] - Set latest selectable time as string
-  **Example:** `"12:00 AM"` Default: `null`
+
+**Example:** `"03:00 PM"` or "15:00"`, Default: `null`
+  @param {object} [options={}] - Extended set of options as supported by Flatpicker
 
 See: https://flatpickr.js.org/options/, Default: `{}`
+  @param {boolean} [readonly=false] - Make input value read-only, Default: `false`
   @param {string} [class=""] - CSS classes for the input, Default: `""`
 
   ### Events
@@ -83,7 +86,7 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let placeholder = "Select Time..";
   /**
    * Colour of popup time selection UI
-   * @type {Exclude<ColorOptions, ''>}
+   * @type {ColorOptions}
    */
   export let ui_color = "primary";
 

package/forms/actions.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @type {import("svelte/action").Action}
+ */
+export let datepicker: import("svelte/action").Action;
+/**
+ * @type {import("svelte/action").Action}
+ */
+export let timepicker: import("svelte/action").Action;
+//# sourceMappingURL=actions.d.ts.map

package/forms/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["actions.js"],"names":[],"mappings":"AAiHA;;GAEG;AACH,uBAFU,OAAO,eAAe,EAAE,MAAM,CAUtC;AAEF;;GAEG;AACH,uBAFU,OAAO,eAAe,EAAE,MAAM,CAYtC"}

package/forms/actions.js

@@ -111,6 +111,9 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
   };
 }
 
+/**
+ * @type {import("svelte/action").Action}
+ */
 export let datepicker = createFlatpickrAction(
   {
     altInput: true,
@@ -121,6 +124,9 @@ export let datepicker = createFlatpickrAction(
   "date"
 );
 
+/**
+ * @type {import("svelte/action").Action}
+ */
 export let timepicker = createFlatpickrAction(
   {
     altInput: true,

package/forms/colorpicker/Colorpicker.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=Colorpicker.d.ts.map

package/forms/colorpicker/Colorpicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colorpicker.d.ts","sourceRoot":"","sources":["Colorpicker.js"],"names":[],"mappings":""}

package/forms/colorpicker/Colorpicker.js

@@ -1,6 +1,16 @@
+/**
+ *
+ * @param {window} win
+ * @param {document} doc
+ * @returns {any}
+ */
 function initialize(win, doc) {
-  var CP,
-    instance = "__instance__",
+  /**
+   * @type {any}
+   */
+  var CP;
+
+  var instance = "__instance__",
     first = "firstChild",
     scroll_left = "scrollLeft",
     scroll_top = "scrollTop",