@emeraldemperaur/vector-sigma 1.4.18 → 1.4.19

package/lib/types/components/file/file.d.ts

@@ -2,22 +2,87 @@ import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type FileInputDesign = 'fileinput' | 'fileinput-material' | 'fileinput-outline' | 'fileinput-neumorphic';
 export interface FileInputProps {
-    inputtype?: FileInputDesign & {};
+    /**
+     * * The required unique identifier for the File input field in useFormikContext().
+     * Alias referenced as `name` attribute and Formik state key.
+     * * @example
+     * alias="pmpCertificationFile"
+     */
     alias: string;
+    /**
+     * * The design variation of the File input.
+     * Default: 'fileinput-outline'
+     * Variants: 'fileinput', 'fileinput-outline', 'fileinput-material', 'fileinput-neumorphic'.
+     * * @example
+     * inputtype="fileinput-neumorphic"
+     */
+    inputtype?: FileInputDesign & {};
+    /**
+     * * The optional input label or description for the File input field.
+     * * @example
+     * inputLabel="Upload PMP® Certication"
+     */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+     * * The required viewport column width for the File input field.
+     * i.e. 1 - 12
+     * * @example
+     * width={5}
+     */
     width: number;
-    defaultvalue?: any;
-    value?: any;
+    /**
+     * * Option to render File input field on new row.
+     * * @example
+     * newRow
+     */
     newRow?: boolean;
-    placeholder?: string;
+    /**
+     * * Option to disable edits for File input field.
+     * * @example
+     * readOnly
+     */
     readOnly?: boolean;
+    /**
+       * * Option to enable a hint for File input field.
+       * * @example
+       * isHinted
+       */
     isHinted?: boolean;
+    /**
+     * * Option to specify hint text for File input field.
+     * * @example
+     * hintText="This is a hint for a VΣ File"
+     */
     hintText?: string;
+    /**
+     * * Option to specify a hint url reference or resource for File input field.
+     * * @example
+     * hintUrl="https://www.mekaegwim.ca"
+     */
     hintUrl?: string;
+    /**
+     * * Option to enable image file previews for File input field.
+     * * @example
+     * preview
+     */
     preview?: boolean;
+    /**
+     * * Option to specify the .scss class selector for the File input field.
+     * * @example
+     * className="teletraan-1-file"
+     */
     className?: string;
+    /**
+     * * Option to specify the isRequired error text for the File input field.
+     * * @example
+     * errorText="Proof of PMP® certificartion is required"
+     */
     errorText?: ReactNode | string | null;
+    /**
+     * * Option to inject custom CSS the File input field.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
     style?: React.CSSProperties;
 }
-export declare const File: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, preview, className, style, ...props }: FileInputProps) => React.JSX.Element;
+export declare const File: ({ inputtype, alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, preview, className, style, ...props }: FileInputProps) => React.JSX.Element;

package/lib/types/components/file/filemultiple.d.ts

@@ -2,22 +2,93 @@ import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type FileMultipleInputDesign = 'filemultiple' | 'filemultiple-material' | 'filemultiple-outline' | 'filemultiple-neumorphic';
 export interface FileMultipleInputProps {
-    inputtype?: FileMultipleInputDesign;
+    /**
+     * * The required unique identifier for the FileMultiple input field in useFormikContext().
+     * Alias referenced as `name` attribute and Formik state key.
+     * * @example
+     * alias="awsCertificationFiles"
+     */
     alias: string;
+    /**
+     * * The design variation of the FileMultiple input.
+     * Default: 'fileinput-outline'
+     * Variants: 'fileinput', 'fileinput-outline', 'fileinput-material', 'fileinput-neumorphic'.
+     * * @example
+     * inputtype="fileinput-neumorphic"
+     */
+    inputtype?: FileMultipleInputDesign;
+    /**
+     * * The optional input label or description for the FileMultiple input field.
+     * * @example
+     * inputLabel="Upload AWS Certication(s)"
+     */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+     * * The required viewport column width for the FileMultiple input field.
+     * i.e. 1 - 12
+     * * @example
+     * width={5}
+     */
     width: number;
-    defaultvalue?: any;
-    value?: any;
+    /**
+     * * Option to render FileMultiple input field on new row.
+     * * @example
+     * newRow
+     */
     newRow?: boolean;
+    /**
+     * * Option to force set the placeholder text for a FileMultiple input field.
+     * * @example
+     * placeholder="Select an auto model"
+     */
     placeholder?: string;
+    /**
+     * * Option to disable edits for FileMultiple input field.
+     * * @example
+     * readOnly
+     */
     readOnly?: boolean;
+    /**
+       * * Option to enable a hint for FileMultiple input field.
+       * * @example
+       * isHinted
+       */
     isHinted?: boolean;
+    /**
+     * * Option to specify hint text for FileMultiple input field.
+     * * @example
+     * hintText="This is a hint for a VΣ FileMultiple"
+     */
     hintText?: string;
+    /**
+     * * Option to specify a hint url reference or resource for FileMultiple input field.
+     * * @example
+     * hintUrl="https://www.mekaegwim.ca"
+     */
     hintUrl?: string;
+    /**
+     * * Option to enable image file previews for FileMultiple input field.
+     * * @example
+     * preview
+     */
     preview?: boolean;
+    /**
+     * * Option to specify the isRequired error text for the FileMultiple input field.
+     * * @example
+     * errorText="Proof of AWS certificartion is required"
+     */
     errorText?: ReactNode | string | null;
+    /**
+     * * Option to specify the .scss class selector for the FileMultiple input field.
+     * * @example
+     * className="teletraan-1-file"
+     */
     className?: string;
+    /**
+     * * Option to inject custom CSS the FileMultiple input field.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
     style?: React.CSSProperties;
 }
 export declare const FileMultiple: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, preview, className, style, ...props }: FileMultipleInputProps) => React.JSX.Element;

package/lib/types/components/icons/flagicon.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import * as Flags from "country-flag-icons/react/3x2";
 type CountryCode = keyof typeof Flags;
 export interface FlagIconProps {
+    /**
+    * * The required country identifier for the FlagIcon component.
+    * * @example
+    * alias="NG"
+    */
     country: CountryCode | 'EU';
 }
 export declare const FlagIcon: ({ country }: FlagIconProps) => React.JSX.Element;

package/lib/types/components/image/image.d.ts

@@ -2,16 +2,77 @@ import React from 'react';
 export type ImageDesign = 'outline' | 'material' | 'neumorphic';
 export type ImageLayout = 'normal' | 'rounded' | 'squared';
 export interface ImageDisplayProps {
+    /**
+    * * The required unique identifier for the ImageOutput component.
+    * * @example
+    * id="profileImage"
+    */
     id: string | number;
+    /**
+     * * The required source or url file path for the ImageOutput component.
+     * * @example
+     * src="https://www.mekaegwim.ca/logo.png"
+     */
     src: string;
+    /**
+    * * The optional alternative text for ImageOutput component accessibility
+    * * @example
+    * src="https://www.mekaegwim.ca/logo.png"
+    */
     alt?: string;
+    /**
+     * * The design variation of the ImageOutput component.
+     * Default: 'outline'
+     * Variants: 'outline', 'material', 'neumorphic'.
+     * * @example
+     * design="neumorphic"
+     */
     design?: ImageDesign & {};
+    /**
+    * * The layout variation of the ImageOutput component.
+    * Default: 'normal'
+    * Variants: 'normal', 'rounded', 'squared'.
+    * * @example
+    * design="rounded"
+    */
     layout?: ImageLayout & {};
+    /**
+    * * The aspect ratio of the ImageOutput component.
+    * Default: 16 / 9
+    * Variants: 16 / 9, 4 / 3, 1.
+    * * @example
+    * aspectratio={ 16 / 9 || 4 / 3 }
+    */
     aspectratio?: number;
+    /**
+     * * Option to specify a height for ImageOutput component.
+     * * @example
+     * preview
+     */
     height?: string | number;
+    /**
+     * * Option to specify a width for ImageOutput component.
+     * * @example
+     * preview
+     */
     width?: string | number;
+    /**
+     * * Option to specify the .scss class selector for the ImageOutput component.
+     * * @example
+     * className="teletraan-1-image"
+     */
     className?: string;
+    /**
+     * * Option to inject custom CSS the ImageOutput component.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
     style?: React.CSSProperties;
+    /**
+      * * onClick event handler function for ImageOutput component.
+      * * @example
+      * onClick={onClickHandlerFunction}
+      */
     onClick?: () => void;
 }
 export declare const ImageOutput: ({ id, src, alt, design, layout, aspectratio, height, width, className, style, onClick, }: ImageDisplayProps) => React.JSX.Element;

package/lib/types/components/input/input.d.ts

@@ -4,24 +4,103 @@ import '../../styles/main.scss';
 export type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type InputDesign = "input" | "input-material" | "input-outline" | "input-neumorphic";
 export type xInputFieldProps = React.ComponentProps<typeof TextField.Root> & {
+    /**
+   * * The required unique identifier for the Input field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="userInput"
+   */
     alias: string;
+    /**
+   * * The optional input value type for the Input field.
+   * Default: 'text'
+   * Options: "number" | "hidden" | "date" | "datetime-local" |
+   * "email" | "month" | "password" | "search" |
+   * "tel" | "text" | "time" | "url" | "week"
+   * * @example
+   * inputtype="email"
+   */
     inputtype?: InputType;
+    /**
+   * * The optional input label or description for the Input field.
+   * * @example
+   * inputLabel="Upload PMP® Certication"
+   */
     inputLabel?: string;
+    /**
+   * * The required viewport column width for the Input field.
+   * i.e. 1 - 12
+   * * @example
+   * width={5}
+   */
     width: number;
+    /**
+   * * Option to render Input field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+   * * Option to force set the default value for Input field.
+   * * @example
+   * placeholder="Enter a value"
+   */
     placeholder?: string;
+    /**
+  * * Option to disable edits for Input field.
+  * * @example
+  * readOnly
+  */
     readOnly?: boolean;
+    /**
+     * * Option to enable a hint for Input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for Input field.
+   * * @example
+   * hintText="This is a hint for a VΣ Input field"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for Input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+    * * Option to render Input field with icon passed as a ReactNode {}.
+    * * @example
+    * icon={<Icon name="stack"/>}
+    */
     icon?: React.ReactNode;
-    defaultvalue?: string;
-    value?: string;
+    /**
+   * * Option to specify the isRequired error text for the Input field.
+   * * @example
+   * errorText="Username is required"
+   */
     errorText?: ReactNode | string | null;
+    /**
+   * * Option to specify the .scss class selector for the Input field.
+   * * @example
+   * className="teletraan-1-input"
+   */
     className?: string;
+    /**
+   * * Option to inject custom CSS the Input field.
+   * * @example
+   * style={{ color: "#000000" }}
+   */
     style?: React.CSSProperties;
+    /**
+   * * The design variation of the Input field.
+   * Default: 'input-outline'
+   * Variants: 'input', 'input-outline', 'input-material', 'input-neumorphic'.
+   * * @example
+   * inputvariant="input-neumorphic"
+   */
     inputvariant?: InputDesign;
-    delimiter?: string;
-    format?: number[];
 };
 export declare const Input: ({ alias, inputtype, width, inputLabel, readOnly, placeholder, newRow, isHinted, hintText, hintUrl, errorText, className, size, style, inputvariant, icon, ...props }: xInputFieldProps) => React.JSX.Element;

package/lib/types/components/inputcurrency/inputcurrency.d.ts

@@ -3,19 +3,107 @@ import { SupportedCurrency } from '../../utils/currencyconfig';
 import { InputDesign } from "components/input/input";
 import '../../styles/main.scss';
 type CurrencyInputProps = {
+    /**
+   * * The required unique identifier for the CurrencyInput field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="productSKUPrice"
+   */
     alias: string;
+    /**
+   * * The optional input value type for the CurrencyInput field.
+   * Default: 'currency' -> "USD"
+   * Options: "USD" | "CAD" | "MXN" | "GTQ" | "CRC" | "DOP" | "JMD" | "PAB" | "BRL"
+   * | "ARS" | "COP" | "CLP" | "PEN" | "UYU" | "PYG" | "BOB" | "VES" | "EUR" | "GBP"
+   * | "CHF" | "SEK" | "NOK" | "DKK" | "PLN" | "CZK" | "HUF" | "RON" | "ISK" | "UAH"
+   * | "JPY" | "CNY" | "HKD" | "TWD" | "INR" | "KRW" | "SGD" | "MYR" | "THB" | "VND"
+   * | "PHP" | "IDR" | "PKR" | "AED" | "SAR" | "ILS" | "TRY" | "QAR" | "ZAR" | "NGN"
+   * | "EGP" | "KES" | "GHS" | "MAD" | "TZS" | "UGX" | "XOF" | "AUD" | "NZD" | "FJD"
+   * * @example
+   * inputtype="currency"
+   */
     inputtype?: SupportedCurrency | "currency";
+    /**
+   * * The optional input label or description for the CurrencyInput field.
+   * * @example
+   * inputLabel="VΣ Product Price"
+   */
     inputLabel?: string;
+    /**
+   * * The required viewport column width for the CurrencyInput field.
+   * i.e. 1 - 12
+   * * @example
+   * width={5}
+   */
     width: number;
+    /**
+   * * Option to render CurrencyInput field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+  * * The optional default currency for the CurrencyInput field.
+  * Default: 'USD'
+  * Options: "USD" | "CAD" | "MXN" | "GTQ" | "CRC" | "DOP" | "JMD" | "PAB" | "BRL"
+  * | "ARS" | "COP" | "CLP" | "PEN" | "UYU" | "PYG" | "BOB" | "VES" | "EUR" | "GBP"
+  * | "CHF" | "SEK" | "NOK" | "DKK" | "PLN" | "CZK" | "HUF" | "RON" | "ISK" | "UAH"
+  * | "JPY" | "CNY" | "HKD" | "TWD" | "INR" | "KRW" | "SGD" | "MYR" | "THB" | "VND"
+  * | "PHP" | "IDR" | "PKR" | "AED" | "SAR" | "ILS" | "TRY" | "QAR" | "ZAR" | "NGN"
+  * | "EGP" | "KES" | "GHS" | "MAD" | "TZS" | "UGX" | "XOF" | "AUD" | "NZD" | "FJD"
+  * * @example
+  * defaultvalue="USD"
+  */
     defaultvalue?: string;
+    /**
+   * * Option to set the default placeholder text for the CurrencyInput input field.
+   * * @example
+   * placeholder="0.00"
+   */
     placeholder?: string;
+    /**
+   * * Option to disable edits for CurrencyInput input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+     * * Option to enable a hint for CurrencyInput input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for CurrencyInput input field.
+   * * @example
+   * hintText="This is a hint for a VΣ CurrencyInput"
+   */
     hintText?: string;
+    /**
+   * * Option to specify the isRequired error text for the CurrencyInput input field.
+   * * @example
+   * errorText="VΣ product price is required"
+   */
     errorText?: ReactNode | string | null;
+    /**
+   * * Option to specify a hint url reference or resource for CurrencyInput input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * The design variation of the CurrencyInput input.
+   * Default: 'input-outline'
+   * Variants: 'input', 'input-outline', 'input-material', 'input-neumorphic',
+   * * @example
+   * inputtype="input-neumorphic"
+   */
     inputvariant?: InputDesign & {};
+    /**
+   * * Option to specify the .scss class selector for the CurrencyInput input field.
+   * * @example
+   * className="teletraan-1-currencyinput"
+   */
     className?: string;
 };
 export declare const CurrencyInput: ({ alias, inputtype, inputLabel, width, defaultvalue, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant, className, ...props }: CurrencyInputProps) => React.JSX.Element;

package/lib/types/components/inputcurrency/stockInput.d.ts

@@ -2,18 +2,88 @@ import React, { ReactNode } from "react";
 import { InputDesign } from "components/input/input";
 import '../../styles/main.scss';
 type StockInputProps = {
+    /**
+   * * The required unique identifier for the StockInput field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="restrictedStocksTSLA"
+   */
     alias: string;
+    /**
+   * * The optional input label or description for the StockInput field.
+   * * @example
+   * inputLabel="VΣ Stock Price"
+   */
     inputLabel?: string;
+    /**
+   * * The required viewport column width for the StockInput field.
+   * i.e. 1 - 12
+   * * @example
+   * width={5}
+   */
     width: number;
+    /**
+   * * The optional default stock ticker symbol for the StockInput field.
+   * Renders a chart icon if no ticker symbol text value is provided
+   * * @example
+   * defaultvalue="TSLA"
+   */
     defaultvalue: string;
+    /**
+   * * Option to render StockInput field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+   * * Option to set the default placeholder text for the StockInput input field.
+   * * @example
+   * placeholder="00.00"
+   */
     placeholder?: string;
+    /**
+   * * Option to disable edits for StockInput input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+     * * Option to enable a hint for StockInput input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for StockInput input field.
+   * * @example
+   * hintText="This is a hint for a VΣ StockInput"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for StockInput input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * Option to specify the isRequired error text for the StockInput input field.
+   * * @example
+   * errorText="VΣ product price is required"
+   */
     errorText?: ReactNode | string | null;
+    /**
+   * * The design variation of the StockInput input.
+   * Default: 'input-outline'
+   * Variants: 'input', 'input-outline', 'input-material', 'input-neumorphic',
+   * * @example
+   * inputtype="input-neumorphic"
+   */
     inputvariant?: InputDesign & {};
+    /**
+   * * Option to specify the .scss class selector for the StockInput input field.
+   * * @example
+   * className="teletraan-1-stockinput"
+   */
     className?: string;
 };
 export declare const StockInput: ({ alias, inputLabel, width, defaultvalue, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant, className, ...props }: StockInputProps) => React.JSX.Element;