@trackunit/react-form-components 0.0.139 → 0.0.141

package/index.cjs.js

@@ -97,12 +97,12 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
-                return "PhoneArrowUpRightIcon";
+                return "PhoneArrowUpRight";
             case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquareIcon";
+                return "ArrowTopRightOnSquare";
             case "EMAIL":
             default:
-                return "EnvelopeIcon";
+                return "Envelope";
         }
     };
     const ButtonAction = () => {
@@ -2922,7 +2922,7 @@ const DateInput = React.forwardRef((_a, ref) => {
     const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid" }) }, rest)));
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) }, rest)));
 });
 
 /**
@@ -3063,7 +3063,7 @@ const DropZone = (_a) => {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
+        } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
 };
 
 /**
@@ -14090,7 +14090,7 @@ const getOrderedOptions = (options, value) => {
  * @returns {JSX.Element} SingleSelectMenuItem
  */
 const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "CheckIcon", size: "small" }) : undefined }));
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -14239,13 +14239,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsxRuntime.jsx(reactComponents.Spinner, { size: "small", className: "mt-1.5 mr-1" });
             }, DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDownIcon", size: "medium" }));
+                const icon = props.selectProps.menuIsOpen ? (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronUp", size: "medium" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsxRuntime.jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsxRuntime.jsx(components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircleIcon", size: "medium" }) }) })));
+                return (jsxRuntime.jsx(components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XCircle", size: "medium" }) }) })));
             }, Control: props => {
                 return jsxRuntime.jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
@@ -14760,6 +14760,117 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
         }) }));
 };
 
+const weekDay = {
+    Monday: "monday",
+    Tuesday: "tuesday",
+    Wednesday: "wednesday",
+    Thursday: "thursday",
+    Friday: "friday",
+    Saturday: "saturday",
+    Sunday: "sunday",
+};
+exports.ScheduleVariant = void 0;
+(function (ScheduleVariant) {
+    ScheduleVariant["ALL_DAYS"] = "all";
+    ScheduleVariant["WEEKDAYS"] = "week";
+    ScheduleVariant["CUSTOM"] = "custom";
+})(exports.ScheduleVariant || (exports.ScheduleVariant = {}));
+/**
+ * Parse a string of week range schedule string to human readable schedule range.
+ *
+ * @param {string} scheduleString String of week schedule
+ * @returns {WeekSchedule} Week schedule range
+ */
+const parseSchedule = (scheduleString) => {
+    if (!scheduleString) {
+        return {
+            variant: exports.ScheduleVariant.ALL_DAYS,
+            schedule: [],
+        };
+    }
+    const schedule = scheduleString.split(",").map(daySchedule => {
+        const [day, timeRange] = daySchedule.split("#");
+        const [timeFrom, timeTo] = timeRange.split("-");
+        const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
+        return {
+            day: Number(day),
+            range: isAllDay
+                ? undefined
+                : {
+                    timeFrom,
+                    timeTo,
+                },
+            isAllDay,
+        };
+    });
+    const filteredSchedule = schedule
+        .filter(daySchedule => daySchedule.range !== null && daySchedule.range !== undefined)
+        .map(daySchedule => ({ day: daySchedule.day, range: daySchedule.range, isAllDay: daySchedule.isAllDay }));
+    let variant;
+    switch (schedule.length) {
+        case 7:
+            const areEqual = schedule.every((day, _, collection) => {
+                var _a, _b, _c, _d, _e, _f;
+                return ((_b = (_a = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day === null || day === void 0 ? void 0 : day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) &&
+                    ((_e = (_d = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day === null || day === void 0 ? void 0 : day.range) === null || _f === void 0 ? void 0 : _f.timeTo);
+            });
+            if (areEqual) {
+                variant = exports.ScheduleVariant.ALL_DAYS;
+            }
+            else {
+                variant = exports.ScheduleVariant.CUSTOM;
+            }
+            break;
+        case 5:
+            const days = [1, 2, 3, 4, 5];
+            const hasConsecutiveDays = schedule.every(({ day }, index) => day === days[index]);
+            if (hasConsecutiveDays) {
+                variant = exports.ScheduleVariant.WEEKDAYS;
+            }
+            else {
+                variant = exports.ScheduleVariant.CUSTOM;
+            }
+            break;
+        default:
+            return {
+                variant: exports.ScheduleVariant.CUSTOM,
+                schedule: filteredSchedule,
+            };
+    }
+    return {
+        variant,
+        schedule: filteredSchedule,
+    };
+};
+/**
+ * Serialize week schedule to string schedule
+ *
+ * @param {WeekSchedule} weekSchedule Week schedule range
+ * @returns {string} Schedule string
+ */
+const serializeSchedule = (weekSchedule) => {
+    return weekSchedule.schedule
+        .filter(({ range, day, isAllDay }) => {
+        const hasRange = (range === null || range === void 0 ? void 0 : range.timeFrom) && (range === null || range === void 0 ? void 0 : range.timeTo);
+        switch (weekSchedule.variant) {
+            case exports.ScheduleVariant.WEEKDAYS:
+                return day <= 5 && hasRange;
+            case exports.ScheduleVariant.ALL_DAYS:
+                return day <= 7 && hasRange;
+            case exports.ScheduleVariant.CUSTOM:
+            default:
+                return hasRange || isAllDay;
+        }
+    })
+        .map(({ day, range, isAllDay }) => {
+        if (isAllDay) {
+            return `${day}#00:00-24:00`;
+        }
+        return `${day}#${range.timeFrom}-${range.timeTo}`;
+    })
+        .join(",");
+};
+
 /**
  * A thin wrapper around the `BaseInput` component for text input fields.
  *
@@ -14801,9 +14912,9 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  */
 const Search = (_a) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMarkIcon", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+            }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
 
 const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
@@ -15087,5 +15198,8 @@ exports.cvaSelectPrefix = cvaSelectPrefix;
 exports.cvaSelectXIcon = cvaSelectXIcon;
 exports.getOrderedOptions = getOrderedOptions;
 exports.isMultiValue = isMultiValue;
+exports.parseSchedule = parseSchedule;
+exports.serializeSchedule = serializeSchedule;
 exports.useCustomComponents = useCustomComponents;
 exports.usePhoneInput = usePhoneInput;
+exports.weekDay = weekDay;

package/index.esm.js

@@ -71,12 +71,12 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className,
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
-                return "PhoneArrowUpRightIcon";
+                return "PhoneArrowUpRight";
             case "WEB_ADDRESS":
-                return "ArrowTopRightOnSquareIcon";
+                return "ArrowTopRightOnSquare";
             case "EMAIL":
             default:
-                return "EnvelopeIcon";
+                return "Envelope";
         }
     };
     const ButtonAction = () => {
@@ -2896,7 +2896,7 @@ const DateInput = forwardRef((_a, ref) => {
     const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
     // Chrome and Firefox need their default icon to have datepicker functionality.
     const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx$1(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsx$1(Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid" }) }, rest)));
+    return (jsx$1(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsx$1(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }) }, rest)));
 });
 
 /**
@@ -3037,7 +3037,7 @@ const DropZone = (_a) => {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        } }, rest, { children: [jsx$1("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx$1(Icon, { type: "solid", name: "ArrowUpCircleIcon", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
+        } }, rest, { children: [jsx$1("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx$1(Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
 };
 
 /**
@@ -14064,7 +14064,7 @@ const getOrderedOptions = (options, value) => {
  * @returns {JSX.Element} SingleSelectMenuItem
  */
 const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx$1(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx$1(Icon, { name: "CheckIcon", size: "small" }) : undefined }));
+    return (jsx$1(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx$1(Icon, { name: "Check", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -14213,13 +14213,13 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsx$1(Spinner, { size: "small", className: "mt-1.5 mr-1" });
             }, DropdownIndicator: props => {
-                const icon = props.selectProps.menuIsOpen ? (jsx$1(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx$1(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                const icon = props.selectProps.menuIsOpen ? (jsx$1(Icon, { name: "ChevronUp", size: "medium" })) : (jsx$1(Icon, { name: "ChevronDown", size: "medium" }));
                 return props.selectProps.isLoading ? null : (jsx$1(components.DropdownIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectIcon(), children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsx$1(components.ClearIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx$1(Icon, { name: "XCircleIcon", size: "medium" }) }) })));
+                return (jsx$1(components.ClearIndicator, Object.assign({}, props, { children: jsx$1("div", { className: cvaSelectXIcon(), onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon`, children: jsx$1(Icon, { name: "XCircle", size: "medium" }) }) })));
             }, Control: props => {
                 return jsx$1(components.Control, Object.assign({}, props, { className: props.isDisabled ? "bg-slate-100" : "" }));
             }, SingleValue: props => {
@@ -14734,6 +14734,117 @@ const Schedule = ({ className, dataTestId, schedule, onChange, invalidKeys = []
         }) }));
 };
 
+const weekDay = {
+    Monday: "monday",
+    Tuesday: "tuesday",
+    Wednesday: "wednesday",
+    Thursday: "thursday",
+    Friday: "friday",
+    Saturday: "saturday",
+    Sunday: "sunday",
+};
+var ScheduleVariant;
+(function (ScheduleVariant) {
+    ScheduleVariant["ALL_DAYS"] = "all";
+    ScheduleVariant["WEEKDAYS"] = "week";
+    ScheduleVariant["CUSTOM"] = "custom";
+})(ScheduleVariant || (ScheduleVariant = {}));
+/**
+ * Parse a string of week range schedule string to human readable schedule range.
+ *
+ * @param {string} scheduleString String of week schedule
+ * @returns {WeekSchedule} Week schedule range
+ */
+const parseSchedule = (scheduleString) => {
+    if (!scheduleString) {
+        return {
+            variant: ScheduleVariant.ALL_DAYS,
+            schedule: [],
+        };
+    }
+    const schedule = scheduleString.split(",").map(daySchedule => {
+        const [day, timeRange] = daySchedule.split("#");
+        const [timeFrom, timeTo] = timeRange.split("-");
+        const isAllDay = timeFrom === "00:00" && timeTo === "24:00";
+        return {
+            day: Number(day),
+            range: isAllDay
+                ? undefined
+                : {
+                    timeFrom,
+                    timeTo,
+                },
+            isAllDay,
+        };
+    });
+    const filteredSchedule = schedule
+        .filter(daySchedule => daySchedule.range !== null && daySchedule.range !== undefined)
+        .map(daySchedule => ({ day: daySchedule.day, range: daySchedule.range, isAllDay: daySchedule.isAllDay }));
+    let variant;
+    switch (schedule.length) {
+        case 7:
+            const areEqual = schedule.every((day, _, collection) => {
+                var _a, _b, _c, _d, _e, _f;
+                return ((_b = (_a = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.timeFrom) === ((_c = day === null || day === void 0 ? void 0 : day.range) === null || _c === void 0 ? void 0 : _c.timeFrom) &&
+                    ((_e = (_d = collection === null || collection === void 0 ? void 0 : collection[0]) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e.timeTo) === ((_f = day === null || day === void 0 ? void 0 : day.range) === null || _f === void 0 ? void 0 : _f.timeTo);
+            });
+            if (areEqual) {
+                variant = ScheduleVariant.ALL_DAYS;
+            }
+            else {
+                variant = ScheduleVariant.CUSTOM;
+            }
+            break;
+        case 5:
+            const days = [1, 2, 3, 4, 5];
+            const hasConsecutiveDays = schedule.every(({ day }, index) => day === days[index]);
+            if (hasConsecutiveDays) {
+                variant = ScheduleVariant.WEEKDAYS;
+            }
+            else {
+                variant = ScheduleVariant.CUSTOM;
+            }
+            break;
+        default:
+            return {
+                variant: ScheduleVariant.CUSTOM,
+                schedule: filteredSchedule,
+            };
+    }
+    return {
+        variant,
+        schedule: filteredSchedule,
+    };
+};
+/**
+ * Serialize week schedule to string schedule
+ *
+ * @param {WeekSchedule} weekSchedule Week schedule range
+ * @returns {string} Schedule string
+ */
+const serializeSchedule = (weekSchedule) => {
+    return weekSchedule.schedule
+        .filter(({ range, day, isAllDay }) => {
+        const hasRange = (range === null || range === void 0 ? void 0 : range.timeFrom) && (range === null || range === void 0 ? void 0 : range.timeTo);
+        switch (weekSchedule.variant) {
+            case ScheduleVariant.WEEKDAYS:
+                return day <= 5 && hasRange;
+            case ScheduleVariant.ALL_DAYS:
+                return day <= 7 && hasRange;
+            case ScheduleVariant.CUSTOM:
+            default:
+                return hasRange || isAllDay;
+        }
+    })
+        .map(({ day, range, isAllDay }) => {
+        if (isAllDay) {
+            return `${day}#00:00-24:00`;
+        }
+        return `${day}#${range.timeFrom}-${range.timeTo}`;
+    })
+        .join(",");
+};
+
 /**
  * A thin wrapper around the `BaseInput` component for text input fields.
  *
@@ -14775,9 +14886,9 @@ const cvaSearch = cvaMerge([
  */
 const Search = (_a) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsx$1(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx$1(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            }, children: jsx$1(Icon, { name: "XMarkIcon", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+            }, children: jsx$1(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
 
 const cvaTextArea = cvaMerge([
@@ -15008,4 +15119,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, isMultiValue, useCustomComponents, usePhoneInput };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,8 +9,9 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.14",
     "@trackunit/i18n-library-translation": "0.0.77",
-    "@trackunit/react-components": "0.1.156",
+    "@trackunit/react-components": "0.1.157",
     "@trackunit/shared-utils": "0.0.7",
+    "@trackunit/ui-icons": "0.0.76",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",

package/src/components/Schedule/ScheduleParser.d.ts

@@ -0,0 +1,39 @@
+import { TimeRangeInput } from "../TimeRange";
+export declare const weekDay: {
+    readonly Monday: "monday";
+    readonly Tuesday: "tuesday";
+    readonly Wednesday: "wednesday";
+    readonly Thursday: "thursday";
+    readonly Friday: "friday";
+    readonly Saturday: "saturday";
+    readonly Sunday: "sunday";
+};
+export type WeekDay = (typeof weekDay)[keyof typeof weekDay];
+export declare enum ScheduleVariant {
+    ALL_DAYS = "all",
+    WEEKDAYS = "week",
+    CUSTOM = "custom"
+}
+export interface DaySchedule {
+    day: number;
+    range: TimeRangeInput;
+    isAllDay: boolean;
+}
+export interface WeekSchedule {
+    variant: ScheduleVariant;
+    schedule: DaySchedule[];
+}
+/**
+ * Parse a string of week range schedule string to human readable schedule range.
+ *
+ * @param {string} scheduleString String of week schedule
+ * @returns {WeekSchedule} Week schedule range
+ */
+export declare const parseSchedule: (scheduleString: string) => WeekSchedule;
+/**
+ * Serialize week schedule to string schedule
+ *
+ * @param {WeekSchedule} weekSchedule Week schedule range
+ * @returns {string} Schedule string
+ */
+export declare const serializeSchedule: (weekSchedule: WeekSchedule) => string;

package/src/index.d.ts

@@ -15,6 +15,7 @@ export * from "./components/PhoneField/PhoneField";
 export * from "./components/PhoneInput/PhoneInput";
 export * from "./components/RadioGroup";
 export * from "./components/Schedule/Schedule";
+export * from "./components/Schedule/ScheduleParser";
 export * from "./components/Search";
 export * from "./components/Select";
 export * from "./components/TextArea";