Initial commit

types/TextInput/TextInput.svelte.d.ts

@@ -4,45 +4,30 @@ import type { SvelteHTMLElements } from "svelte/elements";
 type RestProps = SvelteHTMLElements["input"];
 
 export interface TextInputProps extends RestProps {
-  /**
-   * Set the size of the input
-   * @default undefined
-   */
-  size?: "sm" | "lg";
-
-  /**
-   * Specify the input value.
-   *
-   * `value` will be set to `null` if type="number"
-   * and the value is empty.
-   * @default ""
-   */
-  value?: null | number | string;
-
-  /**
-   * Specify the placeholder text
-   * @default ""
-   */
-  placeholder?: string;
-
-  /**
-   * Set to `true` to enable the light variant
-   * @default false
-   */
-  light?: boolean;
-
   /**
    * Set to `true` to disable the input
    * @default false
    */
   disabled?: boolean;
 
+  /**
+   * Set to "char" to enable display the character counter or "word" to display the word count.
+   * @default undefined
+   */
+  counter?: "char" | "word";
+
   /**
    * Specify the helper text
    * @default ""
    */
   helperText?: string;
 
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
   /**
    * Set an id for the input element
    * @default "ccs-" + Math.random().toString(36)
@@ -50,22 +35,10 @@ export interface TextInputProps extends RestProps {
   id?: string;
 
   /**
-   * Specify a name attribute for the input
-   * @default undefined
-   */
-  name?: string;
-
-  /**
-   * Specify the label text
-   * @default ""
-   */
-  labelText?: string;
-
-  /**
-   * Set to `true` to visually hide the label text
+   * Set to `true` to use the inline variant
    * @default false
    */
-  hideLabel?: boolean;
+  inline?: boolean;
 
   /**
    * Set to `true` to indicate an invalid state
@@ -80,16 +53,44 @@ export interface TextInputProps extends RestProps {
   invalidText?: string;
 
   /**
-   * Set to `true` to indicate an warning state
-   * @default false
-   */
-  warn?: boolean;
-
-  /**
-   * Specify the warning state text
+   * Specify the label text
    * @default ""
    */
-  warnText?: string;
+  labelText?: string;
+
+  /**
+   * Set to `true` to enable the light variant
+   * For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
+   * The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
+   * @deprecated
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Specify the maximum number of characters/words allowed
+   * This is needed in order for `counter` to display
+   * @default undefined
+   */
+  maxCount?: number;
+
+  /**
+   * Specify a name attribute for the input
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Specify the placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
 
   /**
    * Obtain a reference to the input HTML element
@@ -104,16 +105,29 @@ export interface TextInputProps extends RestProps {
   required?: boolean;
 
   /**
-   * Set to `true` to use the inline variant
-   * @default false
+   * Set the size of the input
+   * @default undefined
    */
-  inline?: boolean;
+  size?: "sm" | "md" | "lg";
 
   /**
-   * Set to `true` to use the read-only variant
+   * Specify the input value
+   * `value` will be set to `null` if `type = "number"` and the value is empty
+   * @default ""
+   */
+  value?: null | number | string;
+
+  /**
+   * Set to `true` to indicate an warning state
    * @default false
    */
-  readonly?: boolean;
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
 
   [key: `data-${string}`]: any;
 }