@agilant/toga-blox 1.0.93 → 1.0.94

package/dist/components/BaseInput/BaseCheckbox.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface BaseCheckboxProps {
+    control: any;
+    valueKey: string;
+    defaultValue: boolean;
+    checkboxBorderColorOnChecked: string;
+    checkboxBackgroundColor: string;
+}
+declare const BaseCheckbox: React.FC<BaseCheckboxProps>;
+export default BaseCheckbox;

package/dist/components/BaseInput/BaseCheckbox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const BaseCheckbox = (props) => {
+    const { control, valueKey, defaultValue, checkboxBorderColorOnChecked, checkboxBackgroundColor, } = props;
+    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: defaultValue, render: ({ field }) => (_jsx(_Fragment, { children: _jsx("div", { className: "inline-flex items-center", children: _jsxs("label", { className: "flex items-center cursor-pointer relative", children: [_jsx("input", { type: "checkbox", className: `peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-stroke ${checkboxBorderColorOnChecked} ${checkboxBackgroundColor} `, id: valueKey, checked: field.value, onChange: (e) => {
+                                field.onChange(e.target.checked);
+                            } }), _jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.5 w-3.5", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] }) }) })) }));
+};
+export default BaseCheckbox;

package/dist/components/BaseInput/BaseInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BaseInputTypes } from "./BaseInput.types";
+declare const BaseInput: React.FC<BaseInputTypes>;
+export default BaseInput;

package/dist/components/BaseInput/BaseInput.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+import DisabledSelect from "./DisabledSelect";
+import getColSpanClass from "../../utils/getColSPanClass.js";
+import BaseTextInput from "./BaseTextInput";
+import BaseTextareaInput from "./BaseTextareaInput";
+import BaseCheckbox from "./BaseCheckbox";
+import BaseToggle from "./BaseToggle";
+import BaseSelect from "./BaseSelect";
+import BaseMultiSelect from "./BaseMultiSelect";
+import BaseRadioInput from "./BaseRadio";
+const BaseInput = ({ dataItem, field, mobileBreakpoint, inputFontColor = "text-gray-800", inputBorderColor = "border-gray-200", inputBorderHoverColor = "hover:border-1 hover:border-black", inputBorderFocusColor = "focus:border-blue-600", dropDownInputBorderFocusColor = "focus:border-blue-600", dropDownInputBorderHoverColor = "hover:border-black", dropdownIndicatorClasses = "text-lg pr-2", dropdownIndicatorColor = "text-gray-800", checkboxBackgroundColor = "checked:bg-blue-600", checkboxBorderColorOnChecked = "checked:border-blue-600", menuBackgroundColor = "bg-white", menuBorderColor, options, inputTextSize, uuid, dynamicDefaultValue, isArrayValue, onBlur, menuPlacement, hasDirtyValidation, inputAndLabelContainerClasses = "flex mb-1 w-full", labelTextClasses = "text-sm pr-2 text-left", inputContainerClasses = "text-left relative", inputHasLeftIcon, inputLabel, isRequired, showRequiredIndicator, inputClasses, valueType, valueKey, requireUuidField, hasTypeCheck, placeholder, afterInputTextClasses, afterInputText, isSearchable, useDefaultValue, inputType, characterLimit, disabledSelectContainerClasses = "border-1 rounded bg-gray-200", disabledSelectText = "Not Editable", textAreaHeight = "small", colSpan, onSearchChange, isSearchLoading, toggleTextPosition = "right", toggleTextSize = "sm", toggleActiveColorBackground = "bg-blue-600", toggleInactiveColorBackground = "bg-blue-300", toggleActiveColorBorder = "border-blue-500", toggleInactiveColorBorder = "border-blue-300", toggleActiveTextColor = "text-blue-800", toggleInactiveTextColor = "text-blue-600", toggleAdditionalClasses = `w-1/4`, toggleHasDivider = false, toggleFontFamily = "font-omnes-regular", toggleActiveLabel = "Yes", toggleInactiveLabel = "No", toggleSmallToggle = true, toggleBorderStyle = true, extraSmallTextAreaClasses = "h-28 min-h-12 max-h-16 w-full", smallTextAreaClasses = "h-32 min-h-12 max-h-36 w-full", largeTextAreaClasses = "h-72 min-h-12 max-h-72 w-full", controlClasses = `rounded border-1 bg-gray-100 w-full`, selectInputDirtyFieldClasses = "border-green-600 w-full", selectInputErrorFieldClasses = "border-crimson-500 w-full", menuClasses = "", textAreaDirtyFieldClasses = "", textAreaErrorFieldClasses = "", textDirtyFieldClasses = "", textErrorFieldClasses = "", radioBorderColorOnChecked, radioBackgroundColor, containerClasses, radioOptionTextClasses, }) => {
+    const input = field;
+    const { register, control, watch, getValues, formState: { errors, dirtyFields }, setValue, } = useFormContext();
+    const handleInputChange = (inputValue) => {
+        if (onSearchChange) {
+            onSearchChange(inputValue);
+        }
+    };
+    const getDefaultValue = (dynamicDefaultValue, valueKey) => {
+        const value = dynamicDefaultValue ?? getValues(valueKey);
+        if (value === undefined || value === null) {
+            return "";
+        }
+        else {
+            return value;
+        }
+    };
+    ////// TEXT AREA CLASSES //////
+    const textAreaInputDirtyFieldClasses = `p-1 w-full border-1 border-green-600 rounded ${inputBorderFocusColor} ${textAreaDirtyFieldClasses}`;
+    const textAreaInputErrorFieldClasses = `"p-1 w-full border-1 border-red-500 rounded  ${inputBorderFocusColor} ${textAreaErrorFieldClasses}`;
+    ////// TEXT INPUT CLASSES //////
+    const textInputDirtyFieldClasses = `border-1 border-primary-600 rounded  ${inputBorderFocusColor} ${textDirtyFieldClasses}`;
+    const textInputErrorFieldClasses = `border-1 border-red-500 rounded ${inputBorderFocusColor} ${textErrorFieldClasses}`;
+    ////// SELECT & MULTISELECT INPUT CLASSES //////
+    const finalMenuClasses = `rounded border-1 shadow-md ${menuBackgroundColor} ${menuBorderColor} ${menuClasses} overflow-x-hidden`;
+    const getInput = (input) => {
+        const getNestedValue = (obj, path) => {
+            if (!obj || !path)
+                return undefined;
+            const keys = path.split(".");
+            let current = obj;
+            for (let key of keys) {
+                if (current[key] === undefined)
+                    return undefined;
+                current = current[key];
+            }
+            return current;
+        };
+        let isFieldError;
+        let errorMessage;
+        let isFieldDirty;
+        if (requireUuidField && !isArrayValue && uuid) {
+            isFieldError = getNestedValue(errors, uuid);
+            errorMessage = getNestedValue(errors, `${uuid}.message`);
+            isFieldDirty = getNestedValue(dirtyFields, valueKey);
+        }
+        else if (requireUuidField && isArrayValue && uuid) {
+            isFieldDirty = getNestedValue(dirtyFields, uuid);
+            isFieldError = getNestedValue(errors, `${uuid}.message`);
+            errorMessage = getNestedValue(errors, `${uuid}.message`);
+        }
+        else {
+            isFieldError = getNestedValue(errors, valueKey);
+            errorMessage = getNestedValue(errors, `${valueKey}.message`);
+            isFieldDirty = getNestedValue(dirtyFields, valueKey);
+        }
+        const validMenuPlacement = menuPlacement === "top" ||
+            menuPlacement === "bottom" ||
+            menuPlacement === "auto"
+            ? menuPlacement
+            : undefined;
+        return (_jsxs("div", { className: `${mobileBreakpoint} ${inputAndLabelContainerClasses} ${colSpan && getColSpanClass(colSpan)}`, children: [_jsxs("label", { htmlFor: valueKey, className: `${labelTextClasses}`, children: [inputLabel, isRequired && showRequiredIndicator && (_jsx("span", { className: "text-red-700 ml-0.5", children: "*" }))] }), (() => {
+                    switch (inputType) {
+                        case "text":
+                            return (_jsx(BaseTextInput, { inputBorderColor: inputBorderColor, inputBorderHoverColor: inputBorderHoverColor, inputBorderFocusColor: inputBorderFocusColor, uuid: uuid, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), control: control, onBlur: onBlur, inputContainerClasses: inputContainerClasses, inputHasLeftIcon: inputHasLeftIcon, isRequired: isRequired, showRequiredIndicator: showRequiredIndicator, inputClasses: inputClasses, valueType: valueType, valueKey: valueKey, requireUuidField: requireUuidField, hasTypeCheck: hasTypeCheck, placeholder: placeholder, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, textInputDirtyFieldClasses: textInputDirtyFieldClasses, textInputErrorFieldClasses: textInputErrorFieldClasses }));
+                        case "select":
+                            return (_jsx(BaseSelect, { control: control, valueKey: valueKey, options: options, getValues: getValues, setValue: setValue, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), isRequired: isRequired, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, placeholder: placeholder, inputContainerClasses: inputContainerClasses, inputClasses: inputClasses, inputBorderColor: inputBorderColor, inputBorderHoverColor: inputBorderHoverColor, dropDownInputBorderFocusColor: dropDownInputBorderFocusColor, dropDownInputBorderHoverColor: dropDownInputBorderHoverColor, dropdownIndicatorClasses: dropdownIndicatorClasses, dropdownIndicatorColor: dropdownIndicatorColor, menuBackgroundColor: menuBackgroundColor, menuBorderColor: menuBorderColor, isSearchable: isSearchable, handleInputChange: handleInputChange, isSearchLoading: isSearchLoading, validMenuPlacement: validMenuPlacement, hasDirtyValidation: hasDirtyValidation, requireUuidField: requireUuidField }));
+                        case "multiSelect":
+                            return (_jsx(BaseMultiSelect, { control: control, defaultValue: getValues(valueKey), valueKey: valueKey, inputContainerClasses: inputContainerClasses, isRequired: isRequired, options: options, isSearchable: isSearchable, placeholder: placeholder, dropdownIndicatorColor: dropdownIndicatorColor, useDefaultValue: useDefaultValue, input: input, inputTextSize: inputTextSize, controlClasses: controlClasses, dropdownIndicatorClasses: dropdownIndicatorClasses, inputBorderColor: inputBorderColor, dropDownInputBorderFocusColor: dropDownInputBorderFocusColor, dropDownInputBorderHoverColor: dropDownInputBorderHoverColor, selectInputDirtyFieldClasses: selectInputDirtyFieldClasses, selectInputErrorFieldClasses: selectInputErrorFieldClasses, isFieldDirty: isFieldDirty, isFieldError: isFieldError, hasDirtyValidation: hasDirtyValidation, errorMessage: errorMessage, inputFontColor: inputFontColor, menuClasses: finalMenuClasses }));
+                        case "toggle":
+                            return (_jsx(BaseToggle, { control: control, valueKey: valueKey, inputContainerClasses: inputContainerClasses, defaultValue: dataItem
+                                    ? dataItem[valueKey]
+                                    : "", toggleTextPosition: toggleTextPosition, toggleTextSize: toggleTextSize, toggleActiveColorBackground: toggleActiveColorBackground, toggleInactiveColorBackground: toggleInactiveColorBackground, toggleActiveColorBorder: toggleActiveColorBorder, toggleInactiveColorBorder: toggleInactiveColorBorder, toggleActiveTextColor: toggleActiveTextColor, toggleInactiveTextColor: toggleInactiveTextColor, toggleAdditionalClasses: toggleAdditionalClasses, toggleHasDivider: toggleHasDivider, toggleFontFamily: toggleFontFamily, toggleActiveLabel: toggleActiveLabel, toggleInactiveLabel: toggleInactiveLabel, toggleSmallToggle: toggleSmallToggle, toggleBorderStyle: toggleBorderStyle }));
+                        case "textArea":
+                            return (_jsx(BaseTextareaInput, { input: input, inputTextSize: inputTextSize, watch: watch, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), valueKey: valueKey, errorMessage: errorMessage, isFieldDirty: isFieldDirty, isFieldError: isFieldError, placeholder: placeholder, characterLimit: characterLimit, textAreaHeight: textAreaHeight, textAreaInputDirtyFieldClasses: textAreaInputDirtyFieldClasses, textAreaInputErrorFieldClasses: textAreaInputErrorFieldClasses, smallTextAreaClasses: smallTextAreaClasses, largeTextAreaClasses: largeTextAreaClasses, extraSmallTextAreaClasses: extraSmallTextAreaClasses, inputContainerClasses: inputContainerClasses, inputFontColor: inputFontColor, inputBorderColor: inputBorderColor, inputBorderHoverColor: inputBorderHoverColor, inputBorderFocusColor: inputBorderFocusColor }));
+                        case "disabledSelect":
+                            return (_jsx(DisabledSelect, { disabledSelectText: disabledSelectText, containerClasses: `${inputContainerClasses} ${disabledSelectContainerClasses}`, labelTextClasses: labelTextClasses }));
+                        case "checkbox":
+                            return (_jsx(BaseCheckbox, { control: control, valueKey: valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), checkboxBorderColorOnChecked: checkboxBorderColorOnChecked, checkboxBackgroundColor: checkboxBackgroundColor }));
+                        case "radio":
+                            return (_jsx(BaseRadioInput, { control: control, valueKey: valueKey, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), radioBorderColorOnChecked: radioBorderColorOnChecked, radioBackgroundColor: radioBackgroundColor, radioOptionTextClasses: radioOptionTextClasses, containerClasses: containerClasses, options: options }));
+                        default:
+                            return null;
+                    }
+                })(), input.afterInputText && (_jsx("div", { className: "flex items-center ml-2 text-nowrap", children: _jsx("p", { className: `${afterInputTextClasses}`, children: afterInputText }) }))] }, input.uuid));
+    };
+    return input && _jsx(_Fragment, { children: getInput(input) });
+};
+export default BaseInput;

package/dist/components/BaseInput/BaseInput.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const TextInput: any;
+export declare const NumberInput: any;
+export declare const TextAreaInput: any;
+export declare const SelectInput: any;
+export declare const MultiSelectInput: any;
+export declare const DisabledSelectInput: any;
+export declare const ToggleInput: any;
+export declare const CheckboxInput: any;
+export declare const RadioInput: any;

package/dist/components/BaseInput/BaseInput.stories.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useForm, FormProvider } from "react-hook-form";
+import BaseInput from "./BaseInput";
+export default {
+    title: "FormInputs/Input",
+    component: BaseInput,
+    tags: ["autodocs"],
+    argTypes: {
+        inputType: {
+            control: {
+                type: "select",
+                options: [
+                    "text",
+                    "number",
+                    "select",
+                    "multiSelect",
+                    "toggle",
+                    "textArea",
+                    "checkbox",
+                ],
+            },
+            description: "Specifies the type of input field.",
+        },
+        inputLabel: {
+            control: "text",
+            description: "Label for the input field.",
+        },
+        placeholder: {
+            control: "text",
+            description: "Placeholder text for the input.",
+        },
+        isRequired: {
+            control: "boolean",
+            description: "Indicates whether the field is required.",
+        },
+        showRequiredIndicator: {
+            control: "boolean",
+            description: "Displays an asterisk (*) for required fields.",
+        },
+        valueType: {
+            control: { type: "select", options: ["text", "number", "phone"] },
+            description: "Defines the expected value format.",
+        },
+        dropdownOptions: {
+            control: "array",
+            description: "Options for dropdown and multiSelect inputs.",
+        },
+        menuPlacement: {
+            control: { type: "select", options: ["top", "bottom", "auto"] },
+            description: "Controls the dropdown menu position.",
+        },
+        isSearchable: {
+            control: "boolean",
+            description: "Allows searching in select/multiSelect fields.",
+        },
+        characterLimit: {
+            control: "number",
+            description: "Limits character count for text and textarea inputs.",
+        },
+        inputBorderColor: {
+            control: "color",
+            description: "Border color of the input field.",
+        },
+        inputFontColor: {
+            control: "color",
+            description: "Text color of the input field.",
+        },
+        hasTypeCheck: {
+            control: { type: "select", options: ["none", "number"] },
+            description: "Validation type for text inputs.",
+        },
+        disabledSelectText: {
+            control: "text",
+            description: "Text displayed when disabled select is active.",
+        },
+        colSpan: {
+            control: "number",
+            description: "Defines column span for grid layouts.",
+        },
+        inputHasLeftIcon: {
+            control: "boolean",
+            description: "Indicates whether an icon is displayed inside the input.",
+        },
+        isDoubleValue: {
+            control: "boolean",
+            description: "Used in select/multiSelect for special formatting.",
+        },
+        useDefaultValue: {
+            control: "boolean",
+            description: "Pre-fills the input with a default value.",
+        },
+        toggleStatus: {
+            control: "boolean",
+            description: "Initial state for toggle button inputs.",
+        },
+    },
+    parameters: { layout: "centered" },
+};
+const Template = (args) => {
+    const methods = useForm(); // Create a form context
+    return (_jsx(FormProvider, { ...methods, children: _jsx(BaseInput, { ...args }, 1) }));
+};
+export const TextInput = Template.bind({});
+TextInput.args = {
+    key: 1,
+    field: {
+        uuid: "3d",
+        label: "Label",
+        valueKey: "valueKey",
+        type: "text",
+        inputType: "text",
+        placeholder: "Placeholder",
+        colSpan: "col-span-2",
+        isRequired: true,
+        showRequiredIndicator: true,
+        valueType: "",
+    },
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    placeholder: "Placeholder",
+    inputLabel: "Label",
+    valueKey: "valueKey",
+    hasDirtyValidation: true,
+    inputClasses: "w-full h-10 border-1 rounded border-transparent bg-gray-100",
+    inputContainerClasses: "w-full relative block",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    isRequired: true,
+    inputType: "text",
+    showRequiredIndicator: true,
+    colSpan: "col-span-2",
+    valueType: "",
+    dropDownInputBorderFocusColor: "border-primary-600",
+    inputBorderFocusColor: `focus:border-1 focus:border-primary-600 focus:outline-none focus:ring-0`,
+    textAreaHeight: "small",
+    options: [],
+};
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+    key: 1,
+    field: {
+        uuid: "3d",
+        label: "Label",
+        valueKey: "valueKey",
+        type: "text",
+        inputType: "text",
+        placeholder: "Number Placeholder",
+        colSpan: "col-span-2",
+        isRequired: true,
+        hasTypeCheck: "number",
+        showRequiredIndicator: true,
+        valueType: "",
+    },
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    placeholder: "Number Placeholder",
+    inputLabel: "Label",
+    valueKey: "valueKey",
+    hasDirtyValidation: true,
+    hasTypeCheck: "number",
+    inputClasses: "w-full h-10 border-1 rounded border-transparent bg-gray-100",
+    inputContainerClasses: "w-full relative block",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    isRequired: true,
+    inputType: "text",
+    showRequiredIndicator: true,
+    colSpan: "col-span-2",
+    valueType: "",
+    dropDownInputBorderFocusColor: "border-primary-600",
+    inputBorderFocusColor: `focus:border-1 focus:border-primary-600 focus:outline-none focus:ring-0`,
+    textAreaHeight: "small",
+    options: [],
+};
+export const TextAreaInput = Template.bind({});
+TextAreaInput.args = {
+    inputType: "textArea",
+    inputLabel: "Textarea Input",
+    placeholder: "Type here...",
+    key: 2,
+    field: {
+        uuid: "4d",
+        label: "Textarea Label",
+        valueKey: "valueKey",
+        type: "textArea",
+        inputType: "textArea",
+        placeholder: "Placeholder",
+        colSpan: "col-span-2",
+        isRequired: true,
+        showRequiredIndicator: true,
+        valueType: "",
+        inputClasses: "border-2",
+    },
+    label: "Textarea Label",
+    valueKey: "valueKey",
+    characterLimit: 200,
+    textAreaHeight: "small",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    textAreaInputDirtyFieldClasses: "p-1 w-full border-1 border-mint-600 rounded focus:border-primary-600",
+    textAreaInputErrorFieldClasses: "p-1 w-full border-1 border-crimson-500 rounded focus:border-primary-600",
+    smallTextAreaClasses: "h-28 min-h-12 max-h-16 w-full",
+    largeTextAreaClasses: "h-72 min-h-12 max-h-72 w-full",
+    extraSmallTextAreaClasses: "h-32 min-h-12 max-h-36 w-full",
+    inputContainerClasses: "w-full text-left relative",
+    inputFontColor: "text-gray-800",
+    inputBorderColor: "border-gray-200",
+    inputBorderHoverColor: "hover:border-1 hover:border-black",
+    inputBorderFocusColor: "focus:border-primary-600",
+};
+export const SelectInput = Template.bind({});
+SelectInput.args = {
+    inputType: "select",
+    inputLabel: "Select Input",
+    options: [
+        { uuid: "1", name: "Option 1" },
+        { uuid: "2", name: "Option 2" },
+    ],
+    isSearchable: true,
+    key: 1,
+    field: {
+        uuid: "8d",
+        label: "Select Label",
+        valueKey: "valueKey",
+        type: "select",
+        inputType: "select",
+        placeholder: "Placeholder",
+        colSpan: "col-span-2",
+        isRequired: true,
+        showRequiredIndicator: true,
+        valueType: "",
+    },
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    placeholder: "Placeholder",
+    valueKey: "valueKey",
+    hasDirtyValidation: true,
+    inputClasses: "w-full h-10 border-1 rounded border-transparent bg-blue-100",
+    inputContainerClasses: "w-40 relative block",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    isRequired: true,
+    showRequiredIndicator: true,
+    colSpan: "col-span-2",
+    valueType: "",
+    dropDownInputBorderFocusColor: "border-blue-600",
+    inputBorderFocusColor: `focus:border-1 focus:border-blue-600 focus:outline-none focus:ring-0`,
+    textAreaHeight: "small",
+};
+export const MultiSelectInput = Template.bind({});
+MultiSelectInput.args = {
+    inputType: "multiSelect",
+    inputLabel: "Multi Select Input",
+    options: [
+        { uuid: "1", name: "Option 1" },
+        { uuid: "2", name: "Option 2" },
+        { uuid: "3", name: "Option 3" },
+        { uuid: "4", name: "Option 4" },
+    ],
+    isSearchable: true,
+    key: 1,
+    field: {
+        uuid: "8d",
+        label: "Select Label",
+        valueKey: "valueKey",
+        type: "multiSelect",
+        inputType: "multiSelect",
+        placeholder: "Placeholder",
+        colSpan: "col-span-2",
+        isRequired: true,
+        showRequiredIndicator: true,
+        valueType: "",
+    },
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    placeholder: "Placeholder",
+    valueKey: "valueKey",
+    hasDirtyValidation: true,
+    inputClasses: "w-full h-10 border-1 rounded border-transparent bg-blue-100",
+    inputContainerClasses: "w-40 relative block",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    isRequired: true,
+    showRequiredIndicator: true,
+    colSpan: "col-span-2",
+    valueType: "",
+    dropDownInputBorderFocusColor: "border-primary-600",
+    inputBorderFocusColor: `focus:border-1 focus:border-primary-600 focus:outline-none focus:ring-0`,
+    textAreaHeight: "small",
+};
+export const DisabledSelectInput = Template.bind({});
+DisabledSelectInput.args = {
+    inputType: "disabledSelect",
+    inputLabel: "Disabled Select",
+    disabledSelectText: "Not Editable",
+    valueKey: "valueKey",
+    field: {
+        uuid: "5d",
+        label: "Disabled Select",
+        valueKey: "valueKey",
+        type: "disabledSelect",
+        inputType: "disabledSelect",
+        valueType: "",
+    },
+    inputAndLabelContainerClasses: "w-full flex flex-col relative block",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    disabledSelectContainerClasses: "w-full h-10 border-1 rounded border-transparent bg-gray-100",
+};
+export const ToggleInput = Template.bind({});
+ToggleInput.args = {
+    inputType: "toggle",
+    inputLabel: "Toggle Input",
+    placeholder: "Type here...",
+    key: 2,
+    field: {
+        uuid: "7d",
+        label: "Toggle Label",
+        valueKey: "valueKey",
+        type: "toggle",
+        inputType: "toggle",
+        placeholder: "Placeholder",
+        colSpan: "col-span-2",
+        isRequired: true,
+        showRequiredIndicator: true,
+        valueType: "",
+        inputClasses: "border-2",
+    },
+    label: "Toggle Label",
+    valueKey: "valueKey",
+    characterLimit: 200,
+    labelTextClasses: "font-sm pb-1 pr-2",
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    inputContainerClasses: "w-full text-left relative",
+};
+export const CheckboxInput = Template.bind({});
+CheckboxInput.args = {
+    inputType: "checkbox",
+    inputLabel: "Checkbox Input",
+    valueKey: "valueKey",
+    field: {
+        uuid: "6d",
+        label: "Checkbox",
+        valueKey: "valueKey",
+        type: "checkbox",
+        inputType: "checkbox",
+        valueType: "",
+    },
+    inputAndLabelContainerClasses: "w-full flex relative block",
+    labelTextClasses: "font-sm pb-1 pr-2",
+    checkboxBackgroundColor: "bg-blue-500",
+    checkboxBorderColorOnChecked: "border-white",
+};
+export const RadioInput = Template.bind({});
+RadioInput.args = {
+    inputType: "radio",
+    inputLabel: "Radio Input Label",
+    valueKey: "valueKey",
+    field: {
+        uuid: "6d",
+        label: "Radio Input Label",
+        valueKey: "valueKey",
+        type: "radio",
+        inputType: "radio",
+        valueType: "",
+        options: [
+            { value: "option1", label: "Option 1" },
+            { value: "option2", label: "Option 2" },
+            { value: "option3", label: "Option 3" },
+        ],
+    },
+    options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+    ],
+    defaultValue: "option1",
+    radioBorderColorOnChecked: "checked:border-blue-600",
+    radioBackgroundColor: "checked:bg-blue-600",
+    radioOptionTextClasses: "text-sm text-gray-800",
+    containerClasses: "flex flex-col space-y-2",
+    inputAndLabelContainerClasses: "flex flex-col items-start  w-full",
+    labelTextClasses: "font-sm pb-1 font-bold",
+};

package/dist/components/BaseInput/BaseInput.test.d.ts

@@ -0,0 +1 @@
+export {};