@agilant/toga-blox 1.0.134 → 1.0.135

package/dist/components/BaseInput/BaseToggle.js

@@ -3,6 +3,6 @@ import { Controller } from "react-hook-form";
 import ToggleButton from "../ToggleButton/ToggleButton";
 const BaseToggle = (props) => {
     const { control, valueKey, inputContainerClasses, defaultValue, 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, } = props;
-    return (_jsx("div", { className: `${inputContainerClasses}`, children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field: { value, onChange } }) => (_jsx(ToggleButton, { initialStatus: Boolean(value), onClick: () => onChange(!value), textPosition: toggleTextPosition, textSize: toggleTextSize, activeColorBackground: toggleActiveColorBackground, inactiveColorBackground: toggleInactiveColorBackground, activeColorBorder: toggleActiveColorBorder, inactiveColorBorder: toggleInactiveColorBorder, activeTextColor: toggleActiveTextColor, inactiveTextColor: toggleInactiveTextColor, additionalClasses: toggleAdditionalClasses, hasDivider: toggleHasDivider, fontFamily: toggleFontFamily, activeLabel: toggleActiveLabel, inactiveLabel: toggleInactiveLabel, id: valueKey, smallToggle: toggleSmallToggle, borderStyle: toggleBorderStyle })) }) }));
+    return (_jsx("div", { className: `${inputContainerClasses}`, children: _jsx(Controller, { control: control, name: valueKey, defaultValue: defaultValue, render: ({ field: { value, onChange } }) => (_jsx(ToggleButton, { initialStatus: Boolean(value), onClick: () => onChange(!value), textPosition: toggleTextPosition, textSize: toggleTextSize, activeColorBackground: toggleActiveColorBackground, inactiveColorBackground: toggleInactiveColorBackground, activeColorBorder: toggleActiveColorBorder, inactiveColorBorder: toggleInactiveColorBorder, activeTextColor: toggleActiveTextColor, inactiveTextColor: toggleInactiveTextColor, additionalClasses: toggleAdditionalClasses, hasDivider: toggleHasDivider, fontFamily: toggleFontFamily, activeLabel: toggleActiveLabel, inactiveLabel: toggleInactiveLabel, id: valueKey, smallToggle: toggleSmallToggle, borderStyle: toggleBorderStyle, activeCircleColor: "", inactiveCircleColor: "" })) }) }));
 };
 export default BaseToggle;

package/dist/components/Input/Input.d.ts

@@ -30,6 +30,7 @@ interface InputFieldProps {
     focusRingColor?: string;
     firstIconClasses?: string;
     firstIconTop?: string;
+    placeHolderColor?: string;
 }
 /**
  * A properly formed forwardRef component: exactly two parameters:

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  * A properly formed forwardRef component: exactly two parameters:
  * (props, ref). We pass `ref` to the <input ref={ref} ...>.
  */
-const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, firstIconTop = "top-[8px]", }, ref) {
+const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, firstIconTop = "top-[8px]", placeHolderColor = "placeholder:text-gray-500", }, ref) {
     const [isFocused, setIsFocused] = useState(false);
     const hasValue = value != null && !!value.toString().trim();
     const isNumberInput = type === "number";
@@ -67,18 +67,19 @@ const InputField = forwardRef(function InputField({ label, placeholder, required
     }
     // Normal input mode
     return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsx("input", { ref: ref, autoComplete: "", ...registerProps, className: `
-              ${focusRingColor}
-              focus:ring-1
-              focus:outline-none
-              block w-full py-2 px-2
-              outline outline-0
-              md:w-full
-              ${disabled ? "border-gray-500 focus:ring-gray-500" : ""}
-              ${isValid ? "" : "border-redText focus:ring-red-500"}
-              ${firstIcon ? "pl-10" : ""}
-              ${secondIcon ? "pr-10" : ""}
-              ${isFocused ? "" : ""}
-              ${additionalClasses}
-            `, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, checked: type === "checkbox" ? checked : undefined, onChange: onChange, onKeyDown: onKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue })] })] }));
+						${focusRingColor}
+						focus:ring-1
+						focus:outline-none
+						block w-full py-2 px-2
+						outline outline-0
+						md:w-full
+						${placeHolderColor}
+						${disabled ? "border-gray-500 focus:ring-gray-500" : ""}
+						${isValid ? "" : "border-redText focus:ring-red-500"}
+						${firstIcon ? "pl-10" : ""}
+						${secondIcon ? "pr-10" : ""}
+						${isFocused ? "" : ""}
+						${additionalClasses}
+            			`, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, checked: type === "checkbox" ? checked : undefined, onChange: onChange, onKeyDown: onKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue })] })] }));
 });
 export default InputField;

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -8,7 +8,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -20,11 +20,11 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
                 case "text":
                     return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily, removePattern: removePattern, textHighlight: textHighlight, hasOperator: hasOperator, tooltipText: tooltipText }));
                 case "number":
-                    return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop }));
+                    return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor }));
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable, setSearchItems: setSearchItems, fontFamily: fontFamily, pillColor: pillColor, hoverBgColor: hoverBgColor, clearTextHoverColor: clearTextHoverColor }));
                 case "date":
-                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp, hasOperator: hasOperator, tooltipText: tooltipText }));
+                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp, hasOperator: hasOperator, tooltipText: tooltipText, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor }));
                 default:
                     return null;
             }

package/dist/components/SearchInput/SearchInput.stories.js

@@ -101,9 +101,7 @@ const Template = (args) => {
             name: "dummy-name",
         });
     }, []);
-    return (_jsx(SearchInput, { ...args, column: mockColumn, 
-        // States from the story
-        selectedDropdownOption: selectedOption, onDropdownOptionSelect: handleDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader, removePattern: /^[^:]*:/, pillColor: "bg-sky-500", 
+    return (_jsx(SearchInput, { ...args, column: mockColumn, selectedDropdownOption: selectedOption, onDropdownOptionSelect: handleDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader, removePattern: /^[^:]*:/, pillColor: "bg-sky-500", 
         // Overwrite the dropdownOptions with our memoized version
         dropdownOptions: stableDropdownOptions }));
 };

package/dist/components/SearchInput/SearchInput.types.d.ts

@@ -57,6 +57,9 @@ export type SearchInputProps<T extends object> = {
         weight: string;
     };
     firstIconTop?: string;
+    activeCircleColor?: string;
+    inactiveCircleColor?: string;
+    placeHolderColor?: string;
 };
 export interface OptionType {
     uuid: string;

package/dist/components/SearchInput/SearchInputDatePicker.d.ts

@@ -34,6 +34,9 @@ export interface SearchDatePickerInputProps<T extends object> {
     removePattern?: RegExp | string;
     hasOperator?: boolean;
     tooltipText?: string;
+    inactiveCircleColor?: string;
+    activeCircleColor?: string;
+    placeHolderColor?: string;
 }
-declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor, activeCircleColor, placeHolderColor, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -23,13 +23,16 @@ function parseOperatorAndDate(text) {
     return { operator: "", dateStr: text };
 }
 /** Formats a JS Date as YYYY-MM-DD in local time */
-function formatAsYMD(date) {
-    if (!date)
-        return "";
-    const year = date.getFullYear();
+function formatDateAsMonthDayYear(date) {
     const month = (date.getMonth() + 1).toString().padStart(2, "0");
     const day = date.getDate().toString().padStart(2, "0");
-    return `${year}-${month}-${day}`;
+    const year = date.getFullYear();
+    return `${month}/${day}/${year}`;
+}
+function formatDateAsYearMonthDay(date) {
+    if (!date)
+        return "";
+    return date.toISOString().slice(0, 10);
 }
 /** Attempts to parse a date string input by the user as a local date */
 function parseUserDateInput(input) {
@@ -63,7 +66,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, }) {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor = "after:bg-gray-300", activeCircleColor = "peer-checked:after:bg-sky-500", placeHolderColor, }) {
     const containerRef = useRef(null);
     // Local operator state.
     const [localOperator, setLocalOperator] = useState(() => {
@@ -75,15 +78,19 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     });
     // Local single-date and its input value.
     const [localDate, setLocalDate] = useState(selectedDate);
-    const [dateInputValue, setDateInputValue] = useState(selectedDate ? formatAsYMD(selectedDate) : "");
+    const [dateInputValue, setDateInputValue] = useState(selectedDate ? formatDateAsMonthDayYear(selectedDate) : "");
     // Local start/end for range mode and their input values.
     const [localStartDate, setLocalStartDate] = useState(selectedStartDate);
-    const [startDateInputValue, setStartDateInputValue] = useState(selectedStartDate ? formatAsYMD(selectedStartDate) : "");
+    const [startDateInputValue, setStartDateInputValue] = useState(selectedStartDate ? formatDateAsMonthDayYear(selectedStartDate) : "");
     const [localEndDate, setLocalEndDate] = useState(selectedEndDate);
-    const [endDateInputValue, setEndDateInputValue] = useState(selectedEndDate ? formatAsYMD(selectedEndDate) : "");
+    const [endDateInputValue, setEndDateInputValue] = useState(selectedEndDate ? formatDateAsMonthDayYear(selectedEndDate) : "");
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
     // activeInput can be "start", "end", "single" or null (when not editing)
     const [activeInput, setActiveInput] = useState(null);
+    const handlePickerClose = () => {
+        setIsDatePickerOpen(false);
+        setActiveInput(null);
+    };
     // Load from localStorage if there's an existing criterion for this column.
     useEffect(() => {
         if (!column?.id)
@@ -104,7 +111,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                         const d = new Date(dateStr.trim());
                         if (!isNaN(d.getTime())) {
                             setLocalDate(d);
-                            setDateInputValue(formatAsYMD(d));
+                            setDateInputValue(formatDateAsMonthDayYear(d));
                         }
                     }
                     else if (toggleStatus && dateStr) {
@@ -114,11 +121,11 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                             const endDate = new Date(parts[1].trim());
                             if (!isNaN(startDate.getTime())) {
                                 setLocalStartDate(startDate);
-                                setStartDateInputValue(formatAsYMD(startDate));
+                                setStartDateInputValue(formatDateAsMonthDayYear(startDate));
                             }
                             if (!isNaN(endDate.getTime())) {
                                 setLocalEndDate(endDate);
-                                setEndDateInputValue(formatAsYMD(endDate));
+                                setEndDateInputValue(formatDateAsMonthDayYear(endDate));
                             }
                         }
                     }
@@ -133,19 +140,19 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     useEffect(() => {
         if (selectedDate && activeInput !== "single") {
             setLocalDate(selectedDate);
-            setDateInputValue(formatAsYMD(selectedDate));
+            setDateInputValue(formatDateAsMonthDayYear(selectedDate));
         }
     }, [selectedDate, activeInput]);
     useEffect(() => {
         if (selectedStartDate && activeInput !== "start") {
             setLocalStartDate(selectedStartDate);
-            setStartDateInputValue(formatAsYMD(selectedStartDate));
+            setStartDateInputValue(formatDateAsMonthDayYear(selectedStartDate));
         }
     }, [selectedStartDate, activeInput]);
     useEffect(() => {
         if (selectedEndDate && activeInput !== "end") {
             setLocalEndDate(selectedEndDate);
-            setEndDateInputValue(formatAsYMD(selectedEndDate));
+            setEndDateInputValue(formatDateAsMonthDayYear(selectedEndDate));
         }
     }, [selectedEndDate, activeInput]);
     useEffect(() => {
@@ -220,13 +227,20 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     const handleFilterClick = () => {
         let finalText = "";
         if (!toggleStatus) {
-            const dateStr = localDate ? formatAsYMD(localDate) : "";
+            const dateStr = localDate
+                ? formatDateAsYearMonthDay(localDate)
+                : "";
+            console.log(dateStr, "HERE");
             finalText = localOperator.value + dateStr;
             onDateSelect?.(localDate);
         }
         else {
-            const startStr = localStartDate ? formatAsYMD(localStartDate) : "";
-            const endStr = localEndDate ? formatAsYMD(localEndDate) : "";
+            const startStr = localStartDate
+                ? formatDateAsYearMonthDay(localStartDate)
+                : "";
+            const endStr = localEndDate
+                ? formatDateAsYearMonthDay(localEndDate)
+                : "";
             if (startStr && endStr) {
                 finalText = `${startStr} - ${endStr}`;
             }
@@ -281,56 +295,56 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     }, [isDatePickerOpen]);
     // Render the DayPicker – for both single and range modes.
     const dayPicker = !toggleStatus
-        ? isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: parseUserDateInput(dateInputValue) || localDate, onSelect: (day) => {
-                    if (day) {
-                        setLocalDate(day);
-                        setDateInputValue(formatAsYMD(day));
-                        onDateSelect?.(day);
-                    }
-                    setIsDatePickerOpen(false);
-                    setActiveInput(null);
-                } }) }))
+        ? isDatePickerOpen && (_jsxs("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: [_jsx("div", { onClick: handlePickerClose, className: "hover:cursor-pointer text-right pr-3", children: getFontAwesomeIcon("x", "regular") }), _jsx(DayPicker, { mode: "single", selected: parseUserDateInput(dateInputValue) || localDate, onSelect: (day) => {
+                        if (day) {
+                            setLocalDate(day);
+                            setDateInputValue(formatDateAsMonthDayYear(day));
+                            onDateSelect?.(day);
+                        }
+                        setIsDatePickerOpen(false);
+                        setActiveInput(null);
+                    } })] }))
         : isDatePickerOpen &&
-            activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: parseUserDateInput(startDateInputValue) ||
-                    localStartDate, onSelect: (day) => {
-                    if (day) {
-                        setLocalStartDate(day);
-                        setStartDateInputValue(formatAsYMD(day));
-                        onStartDateSelect?.(day);
-                    }
-                    setIsDatePickerOpen(false);
-                    setActiveInput(null);
-                } })) : (_jsx(DayPicker, { mode: "single", selected: parseUserDateInput(endDateInputValue) ||
-                    localEndDate, onSelect: (day) => {
-                    if (day) {
-                        setLocalEndDate(day);
-                        setEndDateInputValue(formatAsYMD(day));
-                        onEndDateSelect?.(day);
-                    }
-                    setIsDatePickerOpen(false);
-                    setActiveInput(null);
-                } })) }));
-    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [activeInput === "start" ? (_jsx(Input, { type: "text", value: startDateInputValue, onChange: handleStartDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
+            activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsxs(_Fragment, { children: [_jsx("div", { onClick: handlePickerClose, className: "hover:cursor-pointer text-right pr-3", children: getFontAwesomeIcon("x", "regular") }), _jsx(DayPicker, { mode: "single", selected: parseUserDateInput(startDateInputValue) ||
+                            localStartDate, onSelect: (day) => {
+                            if (day) {
+                                setLocalStartDate(day);
+                                setStartDateInputValue(formatDateAsMonthDayYear(day));
+                                onStartDateSelect?.(day);
+                            }
+                            setIsDatePickerOpen(false);
+                            setActiveInput(null);
+                        } })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { onClick: handlePickerClose, className: "hover:cursor-pointer text-right pr-3", children: getFontAwesomeIcon("x", "regular") }), _jsx(DayPicker, { mode: "single", selected: parseUserDateInput(endDateInputValue) ||
+                            localEndDate, onSelect: (day) => {
+                            if (day) {
+                                setLocalEndDate(day);
+                                setEndDateInputValue(formatDateAsMonthDayYear(day));
+                                onEndDateSelect?.(day);
+                            }
+                            setIsDatePickerOpen(false);
+                            setActiveInput(null);
+                        } })] })) }));
+    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [activeInput === "start" ? (_jsx(Input, { type: "text", value: startDateInputValue, onChange: handleStartDateInputChange, placeholder: "mm/dd/yyy", placeHolderColor: placeHolderColor, onKeyDown: (e) => {
                                 if (e.key === "Enter") {
                                     setIsDatePickerOpen(false);
                                     setActiveInput(null);
                                 }
-                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
-                                    ? formatAsYMD(localStartDate)
-                                    : "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
+                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 ", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
+                                    ? formatDateAsMonthDayYear(localStartDate)
+                                    : "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyy", placeHolderColor: placeHolderColor, onKeyDown: (e) => {
                                 if (e.key === "Enter") {
                                     setIsDatePickerOpen(false);
                                     setActiveInput(null);
                                 }
                             }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44", hasAutoFocus: true })) : (_jsxs("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localEndDate
-                                    ? formatAsYMD(localEndDate)
-                                    : "mm/dd/yyyy"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), activeInput === "single" ? (_jsx("div", { children: _jsx(Input, { type: "text", value: dateInputValue, onChange: handleSingleDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
+                                    ? formatDateAsMonthDayYear(localEndDate)
+                                    : "mm/dd/yyyy"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center ", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto min-w-44 max-w-44", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), activeInput === "single" ? (_jsx(_Fragment, { children: _jsx(Input, { type: "text", value: dateInputValue, onChange: handleSingleDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
                                     if (e.key === "Enter") {
                                         setIsDatePickerOpen(false);
                                         setActiveInput(null);
                                     }
-                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", hasAutoFocus: true }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
-                                        ? formatAsYMD(localDate)
+                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left ", hasAutoFocus: true, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left ", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
+                                        ? formatDateAsMonthDayYear(localDate)
                                         : "mm/dd/yyyy"] }) }))] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
                     const cleanedText = getCleanedText(item, removePattern);
                     return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => {
@@ -343,6 +357,6 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                 return filtered;
                             });
                         }, text: _jsx(Text, { color: "text-white", size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1`, type: "span" }, index));
-                }) })) : null, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
+                }) })) : null, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
 }
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchNumberInput.d.ts

@@ -49,6 +49,9 @@ type SearchNumberInputProps<T extends object> = {
         weight: string;
     };
     firstIconTop?: string;
+    inactiveCircleColor: string;
+    activeCircleColor: string;
+    placeHolderColor?: string;
 };
 /**
  * A numeric filter component that:
@@ -56,5 +59,5 @@ type SearchNumberInputProps<T extends object> = {
  * 2. On Filter => either remove or store a string in localStorage
  * 3. On mount => read any existing filter for this column, parse, and set min/max
  */
-declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon, firstIconTop, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -22,7 +22,7 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
     weight: "solid",
 }, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter, 
 // local-storage
-searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon = { icon: "x", weight: "regular" }, firstIconTop, }) => {
+searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon = { icon: "x", weight: "regular" }, firstIconTop, inactiveCircleColor = "after:bg-gray-300", activeCircleColor = "peer-checked:after:bg-sky-500", placeHolderColor = "placeholder:text-gray-500", }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     /** Decide if we can store for this column */
@@ -162,12 +162,12 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
         });
     };
     return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col pt-4 p pb-1  border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] mx-4 ${toggleStatus ? "" : "border-2"}
-          h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs("div", { className: "flex items-center", children: [_jsx(Input, { focusRingColor: "focus:ring-2 ", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 border-2", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
+          h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs("div", { className: "flex items-center", children: [_jsx(Input, { focusRingColor: "focus:ring-2 ", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 border-2", placeholder: "Min", placeHolderColor: placeHolderColor }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max", placeHolderColor: placeHolderColor })] })) : (
                     // Single value mode
                     _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
                                     label: "",
                                     value: "",
-                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 flex items-center", placeholder: "Amount", hasIcons: true, iconPosition: "both", firstIcon: _jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) }), firstIconTop: firstIconTop })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md", children: searchItems.map((item, index) => {
+                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 flex items-center", placeholder: "Amount", placeHolderColor: placeHolderColor, hasIcons: true, iconPosition: "both", firstIcon: numberTypeIcon?.icon ? (_jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) })) : null, firstIconTop: firstIconTop })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, activeCircleColor: activeCircleColor, inactiveCircleColor: inactiveCircleColor }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md ", children: searchItems.map((item, index) => {
                             const cleanedText = getCleanedText(item, removePattern);
                             return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor}  cursor-pointer p-1  max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1`, type: "span" }, index));
                         }) }) })) : null] }) }));

package/dist/components/SearchInput/SearchTextInput.js

@@ -91,7 +91,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
     };
     return (_jsx("div", { ref: containerRef, className: "rounded-md", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || { label: "", value: "" }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center ", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto ", isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: getCleanedText(localSearchText, removePattern), iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", firstIconClasses: firstIconClasses, onChange: handleInputChange, additionalClasses: "min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-14", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500 text-base", onClick: () => setLocalSearchText(""), "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { onClick: handleSubmit, className: `${textHighlight}  text-base hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => setLocalSearchText("") })] }), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2  rounded-md", children: searchItems.map((item, index) => {
                         const cleanedText = getCleanedText(item, removePattern);
-                        return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1`, type: "span" }, index));
+                        return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1 mx-4`, type: "span" }, index));
                     }) })) : null] }) }));
 };
 export default SearchTextInput;

package/dist/components/TableRow/TableRow.d.ts

@@ -31,6 +31,8 @@ export interface TableRowProps<T extends DataWithUUID> {
      * @param event - the click event on the <tr>
      */
     onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    /** Determines if this row should have an expandable drop down */
+    hasDropDown?: boolean;
 }
-declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, hasDropDown, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -1,19 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import TableCell from "../TableCell";
-const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-red-100 hover:cursor-pointer", onRowClick, }) => {
+const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-red-100 hover:cursor-pointer", onRowClick, hasDropDown = false, }) => {
     prepareRow(row);
     const isActive = activeIndex === row.index;
     let rowClasses = `border-primary`;
     if (isActive) {
         rowClasses += ` activeRow ${activeRowColor}`;
     }
-    return (_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: (event) => {
-            onRowClick?.(row.index, rowUuid || "", event);
-        }, children: row.cells.map((cell, index) => {
-            const isLastCell = index === row.cells.length - 1;
-            const cellProps = cell.getCellProps();
-            return (_jsx(Fragment, { children: _jsx(TableCell, { cell: cell, rowUuid: rowUuid, globalTrimActive: globalTrimActive, columnInputs: columnInputs, isLastCell: isLastCell }) }, cellProps.key));
-        }) }, rowUuid));
+    // Local state for expansion, only used if hasDropDown is true.
+    const [isExpanded, setIsExpanded] = useState(false);
+    const handleRowClick = (event) => {
+        onRowClick?.(row.index, rowUuid || "", event);
+        if (hasDropDown) {
+            setIsExpanded((prev) => !prev);
+            // TODO: Trigger API call with rowUuid, handle loading/error states.
+        }
+    };
+    return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: handleRowClick, children: row.cells.map((cell, index) => {
+                    const isLastCell = index === row.cells.length - 1;
+                    const cellProps = cell.getCellProps();
+                    return (_jsx(Fragment, { children: _jsx(TableCell, { cell: cell, rowUuid: rowUuid, globalTrimActive: globalTrimActive, columnInputs: columnInputs, isLastCell: isLastCell }) }, cellProps.key));
+                }) }, rowUuid), hasDropDown && (_jsx(AnimatePresence, { children: isExpanded && (_jsx("tr", { "data-testid": "expanded-row", children: _jsx("td", { colSpan: row.cells.length, className: "p-0", children: _jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, className: "overflow-hidden w-full", children: _jsx("div", { className: "h-96 w-full border flex items-center justify-center", children: _jsxs("span", { children: ["drop down - ", rowUuid] }) }) }) }) })) }))] }));
 };
 export default TableRow;

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

@@ -3,7 +3,13 @@ import TableRow from "./TableRow";
 declare const meta: Meta<typeof TableRow>;
 export default meta;
 export declare const Default: any;
-export declare const ActiveRow: any;
-export declare const WithRowClickHandler: any;
-export declare const NoTrimming: any;
-export declare const CustomCellRendering: any;
+export declare const MultipleRows: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/components/TableRow/TableRow.stories.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableRow from "./TableRow";
-// Sample data for testing
 const sampleData = {
     uuid: "12345",
     name: "John Doe",
@@ -10,45 +9,115 @@ const sampleData = {
     phone: "+1 555-123-4567",
     status: "Active",
 };
-// Mock row data
+const sampleData2 = {
+    uuid: "67890",
+    name: "Jane Smith",
+    age: 25,
+    address: "456 Another St, Springfield, IL, 62702, United States",
+    email: "jane.smith@example.com",
+    phone: "+1 555-987-6543",
+    status: "Inactive",
+};
+const cellsForRow1 = [
+    {
+        value: sampleData.name,
+        render: (type) => (type === "Cell" ? sampleData.name : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData.age,
+        render: (type) => type === "Cell" ? sampleData.age.toString() : null,
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData.address,
+        render: (type) => (type === "Cell" ? sampleData.address : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData.email,
+        render: (type) => (type === "Cell" ? sampleData.email : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData.phone,
+        render: (type) => (type === "Cell" ? sampleData.phone : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData.status,
+        render: (type) => type === "Cell" ? (_jsx("span", { className: "text-green-500", children: sampleData.status })) : null,
+        getCellProps: () => ({}),
+    },
+];
+const cellsForRow2 = [
+    {
+        value: sampleData2.name,
+        render: (type) => (type === "Cell" ? sampleData2.name : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData2.age,
+        render: (type) => type === "Cell" ? sampleData2.age.toString() : null,
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData2.address,
+        render: (type) => type === "Cell" ? sampleData2.address : null,
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData2.email,
+        render: (type) => (type === "Cell" ? sampleData2.email : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData2.phone,
+        render: (type) => (type === "Cell" ? sampleData2.phone : null),
+        getCellProps: () => ({}),
+    },
+    {
+        value: sampleData2.status,
+        render: (type) => type === "Cell" ? (_jsx("span", { className: "text-red-500", children: sampleData2.status })) : null,
+        getCellProps: () => ({}),
+    },
+];
 const mockRow = {
     index: 0,
     rowUuid: sampleData.uuid,
-    cells: [
-        {
-            value: sampleData.name,
-            render: (type) => type === "Cell" ? sampleData.name : null,
-            getCellProps: () => ({}),
-        },
-        {
-            value: sampleData.age,
-            render: (type) => type === "Cell" ? sampleData.age.toString() : null,
-            getCellProps: () => ({}),
-        },
-        {
-            value: sampleData.address,
-            render: (type) => type === "Cell" ? sampleData.address : null,
-            getCellProps: () => ({}),
-        },
-        {
-            value: sampleData.email,
-            render: (type) => type === "Cell" ? sampleData.email : null,
-            getCellProps: () => ({}),
-        },
-        {
-            value: sampleData.phone,
-            render: (type) => type === "Cell" ? sampleData.phone : null,
-            getCellProps: () => ({}),
-        },
-        {
-            value: sampleData.status,
-            render: (type) => type === "Cell" ? (_jsx("span", { className: "text-green-500", children: sampleData.status })) : null,
-            getCellProps: () => ({}),
-        },
-    ],
+    cells: cellsForRow1,
     getRowProps: () => ({}),
+    original: sampleData,
+    id: "0",
+    values: {
+        name: sampleData.name,
+        age: sampleData.age,
+        address: sampleData.address,
+        email: sampleData.email,
+        phone: sampleData.phone,
+        status: sampleData.status,
+    },
+    subRows: [],
+    allCells: cellsForRow1,
+};
+const mockRow2 = {
+    index: 1,
+    rowUuid: sampleData2.uuid,
+    cells: cellsForRow2,
+    getRowProps: () => ({}),
+    original: sampleData2,
+    id: "1",
+    values: {
+        name: sampleData2.name,
+        age: sampleData2.age,
+        address: sampleData2.address,
+        email: sampleData2.email,
+        phone: sampleData2.phone,
+        status: sampleData2.status,
+    },
+    subRows: [],
+    allCells: cellsForRow2,
 };
-// Mock prepareRow function
 const prepareRow = (row) => { };
 const meta = {
     title: "Table/TableRow",
@@ -76,7 +145,7 @@ const meta = {
         },
         rowHoverClasses: {
             control: "text",
-            description: "CSS classes to apply when the row is hovered. Defaults to `hover:bg-navy-100 hover:cursor-pointer`.",
+            description: "CSS classes to apply when the row is hovered. Defaults to `hover:bg-red-100 hover:cursor-pointer`.",
         },
         onRowClick: {
             control: "function",
@@ -86,21 +155,23 @@ const meta = {
             control: "number",
             description: "The index of the currently active row. If the row's index matches this value, the row will be highlighted.",
         },
+        hasDropDown: {
+            control: "boolean",
+            description: "Determines if the row has an expandable drop down.",
+        },
     },
     tags: ["autodocs"],
     parameters: {
         layout: "centered",
         docs: {
             description: {
-                component: "A table row component that renders a row of data with optional hover effects, active states, and click handlers. It supports text trimming and custom rendering for individual cells.",
+                component: "A table row component that renders a row of data with optional hover effects, active states, and click handlers. It supports text trimming, custom cell rendering, and an expandable drop down with Framer Motion animations.",
             },
         },
     },
 };
 export default meta;
-// Template for the story
 const Template = (args) => (_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { ...args }) }) }));
-// Default story
 export const Default = Template.bind({});
 Default.args = {
     row: mockRow,
@@ -113,83 +184,15 @@ Default.args = {
 Default.parameters = {
     docs: {
         description: {
-            story: "Default table row with text trimming enabled. Long text will be truncated to 30 characters.",
+            story: "Default table row with text trimming enabled.",
         },
     },
 };
-// Story with active row
-export const ActiveRow = Template.bind({});
-ActiveRow.args = {
-    ...Default.args,
-    activeIndex: 0,
-};
-ActiveRow.parameters = {
-    docs: {
-        description: {
-            story: "Table row with an active state. The active row is highlighted to indicate selection.",
-        },
-    },
-};
-// Story with custom row click handler
-export const WithRowClickHandler = Template.bind({});
-WithRowClickHandler.args = {
-    ...Default.args,
-    onRowClick: (index, rowUuid, event) => {
-        alert(`Row clicked!\nIndex: ${index}\nRow UUID: ${rowUuid}`);
-        console.log("Row clicked:", index, rowUuid, event);
-    },
-};
-WithRowClickHandler.parameters = {
-    docs: {
-        description: {
-            story: "Table row with a custom click handler. The `onRowClick` prop is used to handle row click events. In this example, an alert is shown when the row is clicked.",
-        },
-    },
-};
-// Story with disabled text trimming
-export const NoTrimming = Template.bind({});
-NoTrimming.args = {
-    ...Default.args,
-    globalTrimActive: false, // Disable text trimming
-};
-NoTrimming.parameters = {
-    docs: {
-        description: {
-            story: "Table row with text trimming disabled. The full text is displayed for each cell.",
-        },
-    },
-};
-// Story with custom cell rendering
-export const CustomCellRendering = Template.bind({});
-CustomCellRendering.args = {
-    ...Default.args,
-    row: {
-        ...mockRow,
-        cells: [
-            {
-                value: sampleData.name,
-                id: "name",
-                render: (type) => type === "Cell" ? _jsx("strong", { children: sampleData.name }) : null,
-                getCellProps: () => ({}),
-            },
-            {
-                value: sampleData.age,
-                id: "age",
-                render: (type) => type === "Cell" ? (_jsx("span", { className: "text-blue-500", children: sampleData.age })) : null,
-                getCellProps: () => ({}),
-            },
-            {
-                value: sampleData.address,
-                render: (type) => type === "Cell" ? sampleData.address : null,
-                getCellProps: () => ({}),
-            },
-        ],
-    },
-};
-CustomCellRendering.parameters = {
+export const MultipleRows = () => (_jsx("table", { children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, globalTrimActive: true, rowUuid: sampleData.uuid, columnInputs: [], rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer", hasDropDown: true }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, globalTrimActive: true, rowUuid: sampleData2.uuid, columnInputs: [], rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer", hasDropDown: false })] }) }));
+MultipleRows.parameters = {
     docs: {
         description: {
-            story: "Table row with custom rendering for individual cells. The `render` function is used to customize the appearance of cell content (e.g., bold text, colored text).",
+            story: "Table with two rows. The first row is expandable. When expanded, its slide-down section (displaying the UUID) pushes the second row down.",
         },
     },
 };

package/dist/components/ToggleButton/ToggleButton.js

@@ -6,36 +6,47 @@ const textPositionMap = {
     top: "flex flex-col items-start",
     bottom: "flex flex-col-reverse items-start",
 };
-const getToggleClasses = (status, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground) => {
-    const baseClasses = "peer rounded-full border";
-    const borderToggleClasses = "after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-blue-300 after:transition-all after:content-['']";
-    const borderToggleCircleClasses = "peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-blue-500";
-    const smallBackgroundToggleClasses = "after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-navy-300 after:transition-all after:content-['']";
-    const largeBackgroundToggleClasses = "after:absolute after:left-[3px] after:top-[4.5px] after:h-[19px] after:w-[19px] after:rounded-full after:bg-white after:transition-all after:content-['']";
-    switch (true) {
-        // small toggle with border style
-        case smallToggle && borderStyle:
-            return `${baseClasses} h-[1.25rem] w-[2rem] ${status ? activeColorBorder : inactiveColorBorder} ${borderToggleClasses} ${status ? borderToggleCircleClasses : ""} `;
-        // small toggle with background style
-        case smallToggle && !borderStyle:
-            return `${baseClasses} h-[1.25rem] w-[2rem] ${status ? activeColorBackground : inactiveColorBackground} ${smallBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""}`;
-        // large toggle with background style
-        case !smallToggle && !borderStyle:
-            return `${baseClasses} h-7 w-11 ${status ? activeColorBackground : inactiveColorBackground} ${largeBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""}`;
-        default:
-            return `${baseClasses}  h-7 w-11  ${status ? activeColorBorder : inactiveColorBorder} ${status ? activeColorBackground : inactiveColorBackground} ${largeBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""}`;
+const getToggleClasses = (status, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground, inactiveCircleColor, activeCircleColor) => {
+    // Base classes without a preset border
+    const baseClasses = "peer rounded-full";
+    // Build the dynamic border class based on status.
+    // The 'border' class here sets the border width.
+    const borderClasses = `border ${status ? activeColorBorder : inactiveColorBorder}`;
+    // For toggles with a border style, we use a pseudo-element for the inner circle.
+    const borderToggleClasses = `after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full ${inactiveCircleColor} after:transition-all after:content-['']`;
+    const borderToggleCircleClasses = `peer-checked:after:translate-x-full peer-checked:after:border-white ${activeCircleColor}`;
+    // For background style toggles, these classes style the inner circle.
+    const smallBackgroundToggleClasses = "after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full after:transition-all after:content-['']";
+    const largeBackgroundToggleClasses = "after:absolute after:left-[3px] after:top-[4.5px] after:h-[19px] after:w-[19px] after:rounded-full after:transition-all after:content-['']";
+    // Build the final classes based on toggle type and style.
+    if (smallToggle && borderStyle) {
+        return `${baseClasses} ${borderClasses} h-[1.25rem] w-[2rem] ${borderToggleClasses} ${status ? borderToggleCircleClasses : ""}`;
+    }
+    else if (smallToggle && !borderStyle) {
+        return `${baseClasses} ${borderClasses} h-[1.25rem] w-[2rem] ${smallBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""} ${status ? activeColorBackground : inactiveColorBackground}`;
+    }
+    else if (!smallToggle && !borderStyle) {
+        return `${baseClasses} ${borderClasses} h-7 w-11 ${largeBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""} ${status ? activeColorBackground : inactiveColorBackground}`;
+    }
+    else {
+        // Large toggle with border style.
+        return `${baseClasses} ${borderClasses} h-7 w-11 ${largeBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""} ${status ? activeColorBackground : inactiveColorBackground}`;
     }
 };
-const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize, activeColorBackground, inactiveColorBackground, activeColorBorder, inactiveColorBorder, activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor, inactiveTextColor, smallToggle, pillHeight, borderStyle, }) => {
+const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize, 
+// Background colors
+activeColorBackground = "bg-red-600", inactiveColorBackground = "bg-red-200", 
+// Border colors (active is red and inactive is blue by default)
+activeColorBorder = "border-red-600", inactiveColorBorder = "border-blue-600", activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor = "text-red-700", inactiveTextColor = "text-red-400", smallToggle, pillHeight, borderStyle, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500", }) => {
     const handleToggle = () => {
         const newValue = !initialStatus;
         onClick(newValue);
     };
-    const textColor = initialStatus === true ? activeTextColor : inactiveTextColor;
+    const textColor = initialStatus ? activeTextColor : inactiveTextColor;
     const textPositionClasses = textPositionMap[textPosition];
-    const toggleClasses = getToggleClasses(initialStatus, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground);
+    const toggleClasses = getToggleClasses(initialStatus, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground, inactiveCircleColor, activeCircleColor);
     return (_jsx("div", { className: `flex justify-center ${hasDivider && textPosition === "right"
             ? "border-r-1 border-navy-200 pr-2"
-            : ""} mr-2 ${pillHeight}`, children: hasDisabledStatus ? (_jsx("div", { className: `${pillHeight}`, children: _jsx(Text, { fontFamily: fontFamily, size: textSize, color: textColor, text: initialStatus ? activeLabel : inactiveLabel }) })) : (_jsxs("div", { className: `justify-between w-full ${textPositionClasses} ${textSize} ${textColor} ${additionalClasses} `, children: [_jsx("label", { htmlFor: id, "data-testid": "inactive-label", className: `flex justify-center pl-2 ${smallToggle ? " min-w-10" : "min-w-20"}`, children: initialStatus ? activeLabel : inactiveLabel }), _jsxs("label", { className: "relative inline-flex cursor-pointer items-center", children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: initialStatus, onChange: handleToggle }), _jsx("div", { className: toggleClasses })] })] })) }));
+            : ""} mr-2 ${pillHeight}`, children: hasDisabledStatus ? (_jsx("div", { className: `${pillHeight}`, children: _jsx(Text, { fontFamily: fontFamily, size: textSize, color: textColor, text: initialStatus ? activeLabel : inactiveLabel }) })) : (_jsxs("div", { className: `justify-between w-full ${textPositionClasses} ${textSize} ${textColor} ${additionalClasses}`, children: [_jsx("label", { htmlFor: id, "data-testid": "inactive-label", className: `flex justify-center pl-2 ${smallToggle ? "min-w-10" : "min-w-20"}`, children: initialStatus ? activeLabel : inactiveLabel }), _jsxs("label", { className: "relative inline-flex cursor-pointer items-center", children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: initialStatus, onChange: handleToggle }), _jsx("div", { className: toggleClasses })] })] })) }));
 };
 export default ToggleButton;

package/dist/components/ToggleButton/ToggleButton.test.js

@@ -25,7 +25,7 @@ describe("<ToggleButton />", () => {
         id: "toggle-button",
     };
     beforeEach(() => {
-        render(_jsx(ToggleButton, { ...defaultProps }));
+        render(_jsx(ToggleButton, { activeCircleColor: "", inactiveCircleColor: "", ...defaultProps }));
     });
     // test("renders correct element for divider", () => {
     // 	const { container } = render(
@@ -68,19 +68,19 @@ describe("<ToggleButton />", () => {
         expect(defaultProps.onClick).toHaveBeenCalledWith(true);
     });
     test("renders correct classes for small toggle", () => {
-        render(_jsx(ToggleButton, { ...defaultProps, smallToggle: true }));
+        render(_jsx(ToggleButton, { activeCircleColor: "", inactiveCircleColor: "", ...defaultProps, smallToggle: true }));
         const toggleButton = screen.getByLabelText("Inactive")
             .nextSibling;
         expect(toggleButton.className).toContain("h-7");
         expect(toggleButton.className).toContain("w-11");
     });
     test("renders correct disabled state", () => {
-        render(_jsx(ToggleButton, { ...defaultProps, hasDisabledStatus: true }));
+        render(_jsx(ToggleButton, { activeCircleColor: "", inactiveCircleColor: "", ...defaultProps, hasDisabledStatus: true }));
         const disabledText = screen.getAllByText("Inactive")[1]; // Target the specific occurrence
         expect(disabledText).toBeInTheDocument();
     });
     test("renders correct element for divider", async () => {
-        render(_jsx(ToggleButton, { ...defaultProps, hasDivider: true, textPosition: "right" }));
+        render(_jsx(ToggleButton, { activeCircleColor: "", inactiveCircleColor: "", ...defaultProps, hasDivider: true, textPosition: "right" }));
         const toggleContainer = screen
             .getByLabelText("Inactive")
             .closest("div");
@@ -92,7 +92,7 @@ describe("<ToggleButton />", () => {
         }, { timeout: 2000 });
     });
     test("handles custom text size class", () => {
-        render(_jsx(ToggleButton, { ...defaultProps, textSize: "2xl" }));
+        render(_jsx(ToggleButton, { activeCircleColor: "", inactiveCircleColor: "", ...defaultProps, textSize: "2xl" }));
         // Use `getByText` with a more specific query
         const inactiveLabel = screen
             .getAllByText("Inactive")

package/dist/components/ToggleButton/ToggleButton.types.d.ts

@@ -19,4 +19,6 @@ export interface ToggleProps {
     smallToggle: boolean;
     pillHeight?: string;
     borderStyle: boolean;
+    activeCircleColor: string;
+    inactiveCircleColor: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.134",
+	"version": "1.0.135",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",