@emeraldemperaur/vector-sigma 1.4.17 → 1.4.19

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;

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

@@ -3,25 +3,108 @@ import { InputOption } from 'utils/vinci';
 import '../../styles/main.scss';
 export type RadioDesign = 'radio' | 'radio-material' | 'radio-outline' | 'radio-neumorphic';
 interface RadioGroupProps {
-    inputtype?: RadioDesign & {};
+    /**
+   * * The required unique identifier for the Radio Group input field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="productSKUPrice"
+   */
     alias: string;
+    /**
+   * * The optional input label or description for the Radio Group input field.
+   * * @example
+   * inputLabel="VΣ Stock Price"
+   */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+   * * The optional input value type for the Radio Group input field.
+   * Default: 'text'
+   * Options: "number" | "hidden" | "date" | "datetime-local" |
+   * "email" | "month" | "password" | "search" |
+   * "tel" | "text" | "time" | "url" | "week"
+   * * @example
+   * inputtype="email"
+   */
+    inputtype?: RadioDesign & {};
+    /**
+   * * The required viewport column width for the Radio Group input field.
+   * i.e. 1 - 12
+   * * @example
+   * width={5}
+   */
     width: number;
-    defaultvalue?: any[];
-    value?: any[];
+    /**
+   * * Option to render Radio Group input field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
-    placeholder?: string;
+    /**
+   * * Option to disable edits for Radio Group input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+     * * Option to enable a hint for Radio Group input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for Radio Group input field.
+   * * @example
+   * hintText="This is a hint for a VΣ RadioGroup"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for Radio Group input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * Required  inputOptions{} for the Radio Group input field.
+   * * @example
+   * inputOptions={
+            [
+              {optionid: 1, optionvalue: "Kaiju", optionurl:"https://github.com/emeraldemperaur", text: "Kaiju"},
+              {optionid: 2, optionvalue: "MekaGodzilla", optionurl:"https://github.com/emeraldemperaur", text: "MekaGodzilla"},
+              {optionid: 3, optionvalue: "Zaibatsu", optionurl:"https://github.com/emeraldemperaur", text: "Zaibatsu"},
+              ]}
+    */
     inputOptions: InputOption[];
+    /**
+   * * Option to specify CSS layout direction for the Radio Group input field.
+   * Default: "row"
+   * * @example
+   * direction="column"
+   */
     direction?: 'row' | 'column';
+    /**
+   * * Option to specify CSS grid template columns for the Radio Group input field.
+   * * @example
+   * columns="1fr 1fr"
+   */
     columns?: string;
+    /**
+   * * Option to specify the .scss class selector for the Radio Group input field.
+   * * @example
+   * className="teletraan-1-stockinput"
+   */
     className?: string;
+    /**
+   * * Option to specify the isRequired error text for the Radio Group input field.
+   * * @example
+   * errorText="VΣ product price is required"
+   */
     errorText?: ReactNode | string | null;
+    /**
+   * * Option to inject custom CSS the Radio Group input field.
+   * * @example
+   * style={{ color: "#000000" }}
+   */
     style?: React.CSSProperties;
 }
-export declare const RadioGroupInput: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction, columns, className, ...props }: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroupInput: ({ inputtype, alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction, columns, className, ...props }: RadioGroupProps) => React.JSX.Element;
 export {};

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

@@ -1,32 +1,106 @@
 import React, { ReactNode } from 'react';
+import { InputOption } from "utils/vinci";
 import '../../styles/main.scss';
 export type OptionSelectDesign = 'dropdown' | 'dropdown-material' | 'dropdown-outline' | 'dropdown-neumorphic';
 export interface SelectProps {
-    inputtype?: OptionSelectDesign & {};
+    /**
+     * * The required unique identifier for the OptionSelect input field in useFormikContext().
+     * Alias referenced as `name` attribute and Formik state key.
+     * * @example
+     * alias="productCategory"
+     */
     alias: string;
+    /**
+     * * The design variation of the OptionSelect input field.
+     * Default: 'dropdown-outline'
+     * Variants: 'dropdown', 'dropdown-outline', 'dropdown-material', 'dropdown-neumorphic'.
+     * * @example
+     * inputtype="dropdown-neumorphic"
+     */
+    inputtype?: OptionSelectDesign & {};
+    /**
+     * * The optional input label or description for the OptionSelect input field.
+     * * @example
+     * inputLabel="Choose a VΣ category"
+     */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+     * * The required viewport column width for the OptionSelect input field.
+     * i.e. 1 - 12
+     * * @example
+     * width={5}
+     */
     width: number;
-    defaultvalue?: string;
-    value?: string;
+    /**
+     * * Option to render OptionSelect input field on new row.
+     * * @example
+     * newRow
+     */
     newRow?: boolean;
+    /**
+    * * Option to force set the placeholder text for a OptionSelect input field.
+    * * @example
+    * placeholder="Select a category"
+    */
     placeholder?: string;
+    /**
+    * * Option to disable edits for OptionSelect input field.
+    * * @example
+    * readOnly
+    */
     readOnly?: boolean;
+    /**
+       * * Option to enable a hint for OptionSelect input field.
+       * * @example
+       * isHinted
+       */
     isHinted?: boolean;
+    /**
+     * * Option to specify hint text for OptionSelect input field.
+     * * @example
+     * hintText="This is a hint for a VΣ OptionSelect"
+     */
     hintText?: string;
+    /**
+     * * Option to specify a hint url reference or resource for OptionSelect input field.
+     * * @example
+     * hintUrl="https://www.mekaegwim.ca"
+     */
     hintUrl?: string;
+    /**
+      * * onValueChange event handler function for OptionSelect input field.
+      * * @example
+      * props.onValueChange(finalVal)
+      */
     onValueChange?: (value: string) => void;
+    /**
+     * * Option to specify the isRequired error text for the OptionSelect input field.
+     * * @example
+     * errorText="VΣ category is required"
+     */
     errorText?: ReactNode | string | null;
-    inputOptions: {
-        optionid: number | string;
-        text: string;
-        optionvalue: string;
-        tag?: string;
-        score?: number | string;
-        note?: string;
-        optionurl?: string;
-    }[];
+    /**
+     * * Required  inputOptions{} for the OptionSelect input field.
+     * * @example
+     * inputOptions={
+              [
+                {optionid: 1, optionvalue: "Kaiju", optionurl:"https://github.com/emeraldemperaur", text: "Kaiju"},
+                {optionid: 2, optionvalue: "MekaGodzilla", optionurl:"https://github.com/emeraldemperaur", text: "MekaGodzilla"},
+                {optionid: 3, optionvalue: "Zaibatsu", optionurl:"https://github.com/emeraldemperaur", text: "Zaibatsu"},
+                ]}
+    */
+    inputOptions: InputOption[];
+    /**
+     * * Option to specify the .scss class selector for the OptionSelect input field.
+     * * @example
+     * className="teletraan-1-optionselect"
+     */
     className?: string;
+    /**
+     * * Option to inject custom CSS the OptionSelect input field.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
     style?: React.CSSProperties;
 }
-export declare const OptionSelect: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, value, inputOptions, style, newRow, isHinted, hintText, hintUrl, defaultvalue, errorText, ...props }: SelectProps) => React.JSX.Element;
+export declare const OptionSelect: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, ...props }: SelectProps) => React.JSX.Element;

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

@@ -3,22 +3,98 @@ import { InputOption } from "utils/vinci";
 import '../../styles/main.scss';
 export type MultipleSelectDesign = 'multiselect' | 'multiselect-material' | 'multiselect-outline' | 'multiselect-neumorphic';
 interface MultipleSelectProps {
-    inputtype?: MultipleSelectDesign & {};
+    /**
+   * * The required unique identifier for the MultipleSelect input field in useFormikContext().
+   * Alias referenced as `name` attribute and Formik state key.
+   * * @example
+   * alias="productCategories"
+   */
     alias: string;
+    /**
+    * * The design variation of the MultipleSelect input.
+    * Default: 'multiselect-outline'
+    * Variants: 'multiselect', 'multiselect-outline', 'multiselect-material', 'multiselect-neumorphic'.
+    * * @example
+    * inputtype="multiselect-neumorphic"
+    */
+    inputtype?: MultipleSelectDesign & {};
+    /**
+   * * The optional input label or description for the MultipleSelect input field.
+   * * @example
+   * inputLabel="Choose at least one VΣ category"
+   */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+   * * The required viewport column width for the MultipleSelect input field.
+   * i.e. 1 - 12
+   * * @example
+   * width={5}
+   */
     width: number;
-    defaultvalue?: any[];
-    value?: any[];
+    /**
+   * * Option to render MultipleSelect input field on new row.
+   * * @example
+   * newRow
+   */
     newRow?: boolean;
+    /**
+   * * Option to force set the placeholder text for a MultipleSelect input field.
+   * * @example
+   * placeholder="Select products of interest"
+   */
     placeholder?: string;
+    /**
+   * * Option to disable edits for MultipleSelect input field.
+   * * @example
+   * readOnly
+   */
     readOnly?: boolean;
+    /**
+     * * Option to enable a hint for MultipleSelect input field.
+     * * @example
+     * isHinted
+     */
     isHinted?: boolean;
+    /**
+   * * Option to specify hint text for MultipleSelect input field.
+   * * @example
+   * hintText="This is a hint for a VΣ MultipleSelect"
+   */
     hintText?: string;
+    /**
+   * * Option to specify a hint url reference or resource for MultipleSelect input field.
+   * * @example
+   * hintUrl="https://www.mekaegwim.ca"
+   */
     hintUrl?: string;
+    /**
+   * * Required  inputOptions{} for the MultipleSelect input field.
+   * * @example
+   * inputOptions={
+            [
+              {optionid: 1, optionvalue: "Kaiju", optionurl:"https://github.com/emeraldemperaur", text: "Kaiju"},
+              {optionid: 2, optionvalue: "MekaGodzilla", optionurl:"https://github.com/emeraldemperaur", text: "MekaGodzilla"},
+              {optionid: 3, optionvalue: "Zaibatsu", optionurl:"https://github.com/emeraldemperaur", text: "Zaibatsu"},
+              ]}
+    */
     inputOptions: InputOption[];
+    /**
+   * * Option to specify the isRequired error text for the MultipleSelect input field.
+   * * @example
+   * errorText="At least one product category selection is required"
+   */
     errorText?: ReactNode | string | null;
+    /**
+   * * Option to specify the .scss class selector for the MultipleSelect input field.
+   * * @example
+   * className="teletraan-1-multipleselect"
+   */
     className?: string;
+    /**
+   * * Option to inject custom CSS the MultipleSelect input field.
+   * * @example
+   * style={{ color: "#000000" }}
+   */
     style?: React.CSSProperties;
 }
 export declare const MultipleSelect: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className, ...props }: MultipleSelectProps) => React.JSX.Element;

package/lib/types/components/slider/range.d.ts

@@ -2,27 +2,106 @@ import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type RangeDesign = 'range' | 'range-material' | 'range-outline' | 'range-neumorphic';
 interface RangeProps {
-    inputtype?: RangeDesign & {};
+    /**
+    * * The required unique identifier for the RangeSlider input field in useFormikContext().
+    * Alias referenced as `name` attribute and Formik state key.
+    * * @example
+    * alias="coverageRange"
+    */
     alias: string;
+    /**
+     * * The optional input label or description for the RangeSlider input field.
+     * * @example
+     * inputLabel="Specify the desired coverage radius"
+     */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+     * * The design variation of the RangeSlider input.
+     * Default: 'range-outline'
+     * Variants: 'range', 'range-outline', 'range-material', 'range-neumorphic'.
+     * * @example
+     * inputtype="range-neumorphic"
+     */
+    inputtype?: RangeDesign & {};
+    /**
+    * * The required viewport column width for the RangeSlider input field.
+    * i.e. 1 - 12
+    * * @example
+    * width={5}
+    */
     width: number;
-    defaultvalue?: string;
-    value?: string;
+    /**
+    * * Option to render RangeSlider input field on new row.
+    * * @example
+    * newRow
+    */
     newRow?: boolean;
+    /**
+    * * Option to specify the isRequired error text for the RangeSlider input field.
+    * * @example
+    * errorText="A coverage range selection is required"
+    */
     errorText?: ReactNode | string | null;
-    placeholder?: string;
+    /**
+     * * Option to disable edits for RangeSlider input field.
+     * * @example
+     * readOnly
+     */
     readOnly?: boolean;
+    /**
+       * * Option to enable a hint for RangeSlider input field.
+       * * @example
+       * isHinted
+       */
     isHinted?: boolean;
+    /**
+     * * Option to specify hint text for RangeSlider input field.
+     * * @example
+     * hintText="This is a hint for a VΣ RangeSlider"
+     */
     hintText?: string;
+    /**
+     * * Option to specify a hint url reference or resource for RangeSlider input field.
+     * * @example
+     * hintUrl="https://www.mekaegwim.ca"
+     */
     hintUrl?: string;
+    /**
+    * * Option to specify a minimum value for RangeSlider input field.
+    * * @example
+    * minvalue={10}
+    */
     minvalue?: number;
+    /**
+   * * Option to specify a maximum value for RangeSlider input field.
+   * * @example
+   * minvalue={100}
+   */
     maxvalue?: number;
+    /**
+   * * Option to specify an incremental step value for RangeSlider input field.
+   * * @example
+   * minvalue={10}
+   */
     stepvalue?: number;
+    /**
+    * * Option to specify a number for the minimum steps expected between values for RangeSlider input field.
+    * * @example
+    * minvalue={10}
+    */
     minStepsBetweenThumbs?: number;
-    design?: RangeDesign;
+    /**
+     * * Option to specify the .scss class selector for the RangeSlider input field.
+     * * @example
+     * className="teletraan-1-rangeslider"
+     */
     className?: string;
+    /**
+     * * Option to inject custom CSS the RangeSlider input field.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
     style?: React.CSSProperties;
 }
-export declare const RangeSlider: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, minvalue, maxvalue, stepvalue, minStepsBetweenThumbs, className, style, ...props }: RangeProps) => React.JSX.Element;
+export declare const RangeSlider: ({ inputtype, alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue, maxvalue, stepvalue, minStepsBetweenThumbs, className, style, ...props }: RangeProps) => React.JSX.Element;
 export {};

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

@@ -2,25 +2,100 @@ import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type SliderDesign = 'slider' | 'slider-material' | 'slider-outline' | 'slider-neumorphic';
 interface SliderProps {
-    inputtype?: SliderDesign & {};
+    /**
+       * * The required unique identifier for the SliderInput field in useFormikContext().
+       * Alias referenced as `name` attribute and Formik state key.
+       * * @example
+       * alias="numberOfRentalRooms"
+       */
     alias: string;
+    /**
+     * * The optional input label or description for the SliderInput field.
+     * * @example
+     * inputLabel="Specify number of rooms for rental"
+     */
     inputLabel?: string;
-    icon?: React.ReactNode;
+    /**
+     * * The design variation of the SliderInput field.
+     * Default: 'slider-outline'
+     * Variants: 'slider', 'slider-outline', 'slider-material', 'slider-neumorphic'.
+     * * @example
+     * inputtype="slider-neumorphic"
+     */
+    inputtype?: SliderDesign & {};
+    /**
+    * * The required viewport column width for the SliderInput field.
+    * i.e. 1 - 12
+    * * @example
+    * width={5}
+    */
     width: number;
-    defaultvalue?: string;
-    value?: string;
+    /**
+    * * Option to render SliderInput field on new row.
+    * * @example
+    * newRow
+    */
     newRow?: boolean;
+    /**
+    * * Option to specify the isRequired error text for the SliderInput field.
+    * * @example
+    * errorText="A number range selection is required"
+    */
     errorText?: ReactNode | string | null;
-    placeholder?: string;
+    /**
+     * * Option to disable edits for SliderInput field.
+     * * @example
+     * readOnly
+     */
     readOnly?: boolean;
+    /**
+       * * Option to enable a hint for SliderInput field.
+       * * @example
+       * isHinted
+       */
     isHinted?: boolean;
+    /**
+     * * Option to specify hint text for SliderInput field.
+     * * @example
+     * hintText="This is a hint for a VΣ SliderInput"
+     */
     hintText?: string;
+    /**
+     * * Option to specify a hint url reference or resource for SliderInput field.
+     * * @example
+     * hintUrl="https://www.mekaegwim.ca"
+     */
     hintUrl?: string;
-    minValue?: number;
-    maxValue?: number;
-    stepValue?: number;
+    /**
+    * * Option to specify a minimum value for SliderInput field.
+    * * @example
+    * minvalue={10}
+    */
+    minvalue?: number;
+    /**
+   * * Option to specify a maximum value for SliderInput field.
+   * * @example
+   * minvalue={100}
+   */
+    maxvalue?: number;
+    /**
+   * * Option to specify an incremental step value for SliderInput field.
+   * * @example
+   * minvalue={10}
+   */
+    stepvalue?: number;
+    /**
+     * * Option to specify the .scss class selector for the SliderInput field.
+     * * @example
+     * className="teletraan-1-sliderinput"
+     */
     className?: string;
+    /**
+     * * Option to inject custom CSS the SliderInput field.
+     * * @example
+     * style={{ color: "#000000" }}
+     */
     style?: React.CSSProperties;
 }
-export declare const SliderInput: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, newRow, isHinted, hintText, hintUrl, errorText, minValue, maxValue, stepValue, className, style, ...props }: SliderProps) => React.JSX.Element;
+export declare const SliderInput: ({ inputtype, alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue, maxvalue, stepvalue, className, style, ...props }: SliderProps) => React.JSX.Element;
 export {};