oolib 2.68.4 → 2.69.0

package/dist/components/SimpleTable/index.js

@@ -52,15 +52,18 @@ var BlockLabel_1 = require("../BlockLabel");
 var styled_components_1 = require("styled-components");
 var utilsOolib_1 = require("../../utilsOolib");
 var AddRowColButtons_1 = require("./comps/AddRowColButtons");
+var UIContent_1 = require("../../UIContent");
+var ActionMenu_1 = require("../ActionMenu");
 var ColActionsMenu_1 = require("./comps/rowColActionMenus/ColActionsMenu");
 var RowActionsMenu_1 = require("./comps/rowColActionMenus/RowActionsMenu");
 var handleColActions_1 = require("./handlers/handleColActions");
 var handleRowActions_1 = require("./handlers/handleRowActions");
+var handleStretchToFullWidth_1 = require("./handlers/handleStretchToFullWidth");
+var handleToggleRowHeader_1 = require("./handlers/handleToggleRowHeader");
 var styled_1 = require("./styled");
 var useResizeTableColumns_1 = require("./useResizeTableColumns");
 var convertColHeaderConfigToRowData_1 = require("./utils/convertColHeaderConfigToRowData");
 var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
-var lodash_1 = require("lodash");
 var greyColor100 = themes_1.colors.greyColor100;
 /*pending:
 - first test whatever is done on okf
@@ -93,11 +96,14 @@ function SimpleTable(_a) {
     //   }
     //   return _RichTextEditor && React.memo(_RichTextEditor, checkMemoFn)
     // },[])
-    var _e = (0, react_1.useMemo)(function () { return (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
-        _value: _value,
-        config: config,
-        defaultColWidth: defaultColWidth,
-    }); }, [_value]), value = _e.value, enableColActions = _e.enableColActions, //returns all possible actions config if no config.colHeaderData is defined. else undefined\
+    var _e = (0, react_1.useMemo)(function () {
+        return (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
+            //memo v.imp cuz otherwise cell and row id keep changing on rerender if value doesnt exist, and this messes with their react keys, this leads to bugs
+            _value: _value,
+            config: config,
+            defaultColWidth: defaultColWidth,
+        });
+    }, [_value]), value = _e.value, enableColActions = _e.enableColActions, //returns all possible actions config if no config.colHeaderData is defined. else undefined\
     enableRowActions = _e.enableRowActions, canToggleColHeaderStyle = _e.canToggleColHeaderStyle;
     var _f = (0, useResizeTableColumns_1.useResizeTableColumns)({
         setColWidthConfig: function (setterFn) {
@@ -128,7 +134,7 @@ function SimpleTable(_a) {
             typo: "SANS_3",
             placeholder: " ",
             style: {
-                padding: "0.8rem 1rem",
+                padding: "0.9rem 1rem",
             },
         },
         // KPDropdown: {
@@ -151,6 +157,16 @@ function SimpleTable(_a) {
         newData[rowIdx].cellData[cellIdx].value = v;
         onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
     };
+    /**
+     * we are explicitly defining this here and passing it on to AddColButton comp
+     * since we need this width to calculate stretch to full width
+     */
+    var addColButtonWidth = 20;
+    // these are explicitly defined here cuz we need to calc offset padding and margin using these, so that overflowX doesnt hide them
+    var rowActionsButtonWidth = 15;
+    var colActionsButtonHeight = 15;
+    var primaryTableActionsMenuHeight = 30;
+    var primaryTableActionsMenuGap = 5;
     var genRow = function (_a) {
         var row = _a.row, rowIdx = _a.rowIdx;
         var StyledWrapper = row.isColHeader
@@ -196,38 +212,93 @@ function SimpleTable(_a) {
                     onChange: onChange,
                     id: id,
                     defaultColWidth: defaultColWidth,
+                    colActionsButtonHeight: colActionsButtonHeight,
                 }))),
                 !readOnly &&
                     enableRowActions &&
                     cellIdx === 0 &&
                     rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined
-                    hoveredRowAndCol.rowIdx === rowIdx && (react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, { value: value, rowIdx: rowIdx, onChange: onChange, id: id, setActionsActiveOnRow: setActionsActiveOnRow }))),
+                    hoveredRowAndCol.rowIdx === rowIdx && (react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, {
+                    value: value,
+                    rowIdx: rowIdx,
+                    onChange: onChange,
+                    id: id,
+                    setActionsActiveOnRow: setActionsActiveOnRow,
+                    rowActionsButtonWidth: rowActionsButtonWidth,
+                }))),
                 react_1.default.createElement(CellComp, __assign({}, cellProps, { id: "kp_table_cell__".concat(cell.id, "__rich_input") /*dont mess with this id nomenclature. it needs to stay this way. check out the handleCellInputChange fn to understand */, value: cellValue, readOnly: readOnly || cell.readOnly, onChange: function (k, v) {
                         return handleCellInputChange({ v: v, rowIdx: rowIdx, cellIdx: cellIdx });
                     } }))));
         })));
     };
+    var fullWidthCompWrapper = (0, react_1.useRef)(null);
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
         react_1.default.createElement("div", { style: {
-                display: "flex",
-                alignItems: "stretch" /**without stretch AddColButton will be wonky */,
+                overflowX: "auto",
+                paddingLeft: rowActionsButtonWidth / 2 + "px",
+                marginLeft: "-" + rowActionsButtonWidth / 2 + "px",
+                paddingTop: primaryTableActionsMenuGap + primaryTableActionsMenuHeight + 'px'
             } },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(styled_1.StyledSimpleTable, { onMouseLeave: function () {
-                        return setHoveredRowAndCol({ rowIdx: undefined, colIdx: undefined });
-                    } },
-                    config.colHeaderData &&
-                        genRow({
-                            row: (0, convertColHeaderConfigToRowData_1.convertColHeaderConfigToRowData)({
-                                colHeaderData: config.colHeaderData,
-                                convertToRichText: convertToRichText,
+            react_1.default.createElement("div", { ref: fullWidthCompWrapper, style: {
+                    display: "flex",
+                    alignItems: "stretch" /**without stretch AddColButton will be wonky */,
+                } },
+                react_1.default.createElement("div", { style: { position: "relative" } },
+                    react_1.default.createElement("div", { style: {
+                            position: "absolute",
+                            right: 0,
+                            top: "-" + primaryTableActionsMenuGap + "px",
+                            transform: "translateY(-100%)",
+                            zIndex: 1,
+                        } },
+                        react_1.default.createElement(ActionMenu_1.ActionMenu, { ButtonComp: "ButtonPrimary", actions: __spreadArray(__spreadArray([
+                                {
+                                    display: UIContent_1.UIContent.SimpleTable.stretchToFullWidth,
+                                    onClick: function () {
+                                        return (0, handleStretchToFullWidth_1.handleStretchToFullWidth)({
+                                            value: value,
+                                            onChange: onChange,
+                                            id: id,
+                                            enableColActions: enableColActions,
+                                            addColButtonWidth: addColButtonWidth,
+                                            fullWidthCompWrapper: fullWidthCompWrapper,
+                                        });
+                                    },
+                                }
+                            ], (enableRowActions
+                                ? [
+                                    {
+                                        display: UIContent_1.UIContent.SimpleTable.addHeaderCol,
+                                        onClick: function () { },
+                                    },
+                                ]
+                                : []), true), (enableColActions
+                                ? [
+                                    {
+                                        display: value.data[0].isColHeader
+                                            ? UIContent_1.UIContent.SimpleTable.removeHeaderRow
+                                            : UIContent_1.UIContent.SimpleTable.addHeaderRow,
+                                        onClick: function () {
+                                            return (0, handleToggleRowHeader_1.handleToggleRowHeader)({ value: value, onChange: onChange, id: id });
+                                        },
+                                    },
+                                ]
+                                : []), true) })),
+                    react_1.default.createElement(styled_1.StyledSimpleTable, { onMouseLeave: function () {
+                            return setHoveredRowAndCol({ rowIdx: undefined, colIdx: undefined });
+                        } },
+                        config.colHeaderData &&
+                            genRow({
+                                row: (0, convertColHeaderConfigToRowData_1.convertColHeaderConfigToRowData)({
+                                    colHeaderData: config.colHeaderData,
+                                    convertToRichText: convertToRichText,
+                                }),
                             }),
-                        }),
-                    value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
-                !readOnly && enableRowActions && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, handleRowActions_1.handleAddRow)(value, props); } }))),
-            !readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { onClick: function () {
-                    return (0, handleColActions_1.handleAddCol)({ value: value, onChange: onChange, id: id, defaultColWidth: defaultColWidth });
-                } })))));
+                        value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
+                    !readOnly && enableRowActions && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, handleRowActions_1.handleAddRow)(value, props); } }))),
+                !readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { addColButtonWidth: addColButtonWidth, onClick: function () {
+                        return (0, handleColActions_1.handleAddCol)({ value: value, onChange: onChange, id: id, defaultColWidth: defaultColWidth });
+                    } }))))));
 }
 exports.SimpleTable = SimpleTable;

package/dist/components/TimePicker/handlers/handleTimeValidation.d.ts

@@ -0,0 +1 @@
+export function handleTimeValidation(newValue: any, setErrorMessage: any, setInputValue: any): void;

package/dist/components/TimePicker/handlers/handleTimeValidation.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleTimeValidation = void 0;
+function handleTimeValidation(newValue, setErrorMessage, setInputValue) {
+    // Check if the input has at least 2 characters
+    if (newValue.length >= 2) {
+        // Parse the first 2 characters as hours
+        var hours = parseInt(newValue.substring(0, 2));
+        // Validate the hours: should be between 1 and 12
+        if (isNaN(hours) || hours < 1 || hours > 12) {
+            setErrorMessage('Invalid hour');
+            return;
+        }
+    }
+    // Check if the input has at least 4 characters
+    if (newValue.length >= 4) {
+        // Validate the format of the input: should have a colon (:) at the right position
+        if ((newValue[2] !== ':' && newValue[1] !== ':') || (newValue[2] === ':' && newValue[1] === ':')) {
+            setErrorMessage('Invalid format');
+            return;
+        }
+    }
+    // Check if the input has at least 5 characters
+    if (newValue.length >= 5) {
+        // Parse the last 2 characters as minutes
+        var minutes = parseInt(newValue.substring(3, 5));
+        // Validate the minutes: should be between 0 and 59
+        if (isNaN(minutes) || minutes < 0 || minutes > 59) {
+            setErrorMessage('Invalid minutes');
+            return;
+        }
+    }
+    // Check if the input has at least 7 characters
+    if (newValue.length >= 7) {
+        // Validate the AM/PM part and ensure there's a space after the time
+        if (newValue[2] === ':' && (newValue[6] !== 'A' && newValue[6] !== 'P' && newValue[7] !== 'M')) {
+            setErrorMessage('Invalid AM/PM, Add space after time');
+            return;
+        }
+        if (newValue[3] === ':' && (newValue[7] !== 'A' && newValue[7] !== 'P' && newValue[8] !== 'M')) {
+            setErrorMessage('Invalid AM/PM, Add space after time');
+            return;
+        }
+        // Convert AM/PM to uppercase and truncate the input to 8 characters
+        newValue = newValue.substring(0, 8).toUpperCase();
+    }
+    // Set the cleaned and validated value, and clear any previous error message
+    setInputValue(newValue);
+    setErrorMessage(null);
+}
+exports.handleTimeValidation = handleTimeValidation;
+// The current behaviour of this component works well with format of 00:00 AM/PM values, not validating correctly when 0:00 AM/PM is entered 
+// This will be important to solve. It should let you input 230 and then take you to 2:30PM. -> 
+// This happens because we are not allowing user to enter hours before ":" >= than 12 (12 hours format), so if user enters 13 it is invalid hour
+// may be regex can be applied to autoformat
+// The keyboard function is not working - but this can be layer 2 - 
+// [need to figure out functionality, right now if Enter is pressed it selects nearest time if to current time If incorrect time is entered, 
+// and if right time is entered blur gets called]

package/dist/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export function TimePicker(props: any): React.JSX.Element;
+import React from "react";

package/dist/components/TimePicker/index.js

@@ -0,0 +1,136 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePicker = void 0;
+var react_1 = __importStar(require("react"));
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var styled_1 = require("./styled");
+var Typo_1 = require("../Typo");
+var convertToMiltaryTime_1 = require("./utils/convertToMiltaryTime");
+var getNearestTimeToCurrentTime_1 = require("./utils/getNearestTimeToCurrentTime");
+var highLightTime_1 = require("./utils/highLightTime");
+var handleTimeValidation_1 = require("./handlers/handleTimeValidation");
+var convertTo12Hour_1 = require("./utils/convertTo12Hour");
+var TimePicker = function (props) {
+    var readOnly = props.readOnly, invert = props.invert, disabled = props.disabled, onParentChange = props.onChange, id = props.id, value = props.value;
+    var _a = (0, react_1.useState)(value ? (0, convertTo12Hour_1.convertTo12Hour)(value) : null), inputValue = _a[0], setInputValue = _a[1];
+    var _b = (0, react_1.useState)(""), errorMessage = _b[0], setErrorMessage = _b[1];
+    var inputRef = (0, react_1.useRef)();
+    var timeStripRef = (0, react_1.useRef)();
+    var timeStripArray = [];
+    // generate Time array for dropdown
+    for (var hour = 0; hour <= 23; hour++) {
+        for (var minute = 0; minute <= 45; minute += 15) {
+            var formattedHour = hour % 12 || 12; // Convert to 12-hour format
+            var formattedMinute = minute === 0 ? "00" : "".concat(minute);
+            var period = hour < 12 ? "AM" : "PM";
+            var timeString = "".concat(formattedHour, ":").concat(formattedMinute, " ").concat(period);
+            timeStripArray.push(timeString);
+        }
+    }
+    (0, react_1.useEffect)(function () {
+        // Function to scroll the element (specific Time) to the top
+        var scrollTimeElementToTop = function () {
+            var list = timeStripRef.current;
+            if (!list)
+                return;
+            // Find all elements with data-value attribute
+            var allListElements = list.querySelectorAll('[data-value]');
+            // Initialize variables to keep track of the closest match
+            var closestMatch = null;
+            var closestMatchValue = Number.MAX_SAFE_INTEGER;
+            // Loop through all elements and find the closest match
+            allListElements.forEach(function (element) {
+                var elementValue = element.getAttribute('data-value');
+                if (elementValue.startsWith(inputValue)) {
+                    var diff = elementValue.length - inputValue.length;
+                    if (diff < closestMatchValue) {
+                        closestMatch = element;
+                        closestMatchValue = diff;
+                    }
+                }
+            });
+            if (!closestMatch) {
+                // When there is no exact match, highlight the closest time to the current time
+                closestMatch = list.querySelector("[data-value=\"".concat((0, getNearestTimeToCurrentTime_1.getNearestTimeToCurrentTime)(timeStripArray), "\"]"));
+            }
+            if (closestMatch) {
+                (0, highLightTime_1.highLightTime)(closestMatch, invert);
+            }
+        };
+        scrollTimeElementToTop();
+    }, [inputValue, timeStripRef]);
+    // useEffect(() => {
+    //   if(value){
+    //     setInputValue(convertTo12Hour(value))
+    //   }
+    // }, [])
+    var handleTimeClick = function (e, item) {
+        setInputValue(item);
+    };
+    var handleOnFocus = function () {
+        setInputValue(undefined);
+    };
+    var handleOnBlur = function () {
+        if ((0, convertToMiltaryTime_1.convertToMiltaryTime)(inputValue) === "Invalid time input") {
+            setInputValue((0, getNearestTimeToCurrentTime_1.getNearestTimeToCurrentTime)(timeStripArray));
+            setErrorMessage(null);
+        }
+        onParentChange && onParentChange(id, (0, convertToMiltaryTime_1.convertToMiltaryTime)(inputValue));
+    };
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        (0, handleTimeValidation_1.handleTimeValidation)(newValue, setErrorMessage, setInputValue);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: { display: "flex", position: 'relative' } },
+            readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, inputValue)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(styled_1.StyledTimeInputWrapper, { invert: invert },
+                    react_1.default.createElement(styled_1.StyledTimeInput, { type: "test", className: "SANS_3", placeholder: "HH:MM AA", maxLength: "8", invert: invert, value: inputValue, ref: inputRef, autoCapitalize: "characters", onChange: function (e) { return handleInputChange(e); }, onBlur: function () { return handleOnBlur(); }, onFocus: function () { return handleOnFocus(); }, onKeyDown: function (e) {
+                            if (e.key === 'Enter') {
+                                e.target.blur();
+                            }
+                        }, disabled: disabled }),
+                    react_1.default.createElement(styled_1.StyledDropDown, { className: "drop-down", invert: invert },
+                        react_1.default.createElement(styled_1.StyledDropDownList, { className: "drop-list", ref: timeStripRef },
+                            " ",
+                            timeStripArray.map(function (item) { return (react_1.default.createElement(styled_1.StyledListItem, { "data-value": item, key: item, onMouseDown: function (e) { return handleTimeClick(e, item); }, invert: invert, className: "listElement" },
+                                react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, item))); })))))),
+            errorMessage && react_1.default.createElement(Typo_1.SANS_0, { color: "red", style: { position: 'absolute', top: '-1.5rem' } }, errorMessage))));
+};
+exports.TimePicker = TimePicker;

package/dist/components/TimePicker/styled.d.ts

@@ -0,0 +1,6 @@
+export const StyledTimeInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTimeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export const StyledDropDown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMotionDiv: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledDropDownList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledListItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/dist/components/TimePicker/styled.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../themes");
+var globalVariables_1 = require("../../globalStyles/globalVariables");
+var mixins_1 = require("../../themes/mixins");
+var framer_motion_1 = require("framer-motion");
+var greyColor80 = themes_1.colors.greyColor80, greyColor10 = themes_1.colors.greyColor10, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40;
+exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  &:focus-within {\n    background-color: ", ";\n\n    &::after {\n      width: 100%;\n    }\n\n    &:focus-within .drop-down {\n      display: block;\n    }\n  }\n\n  \n"], ["\n  position: relative;\n  ", "\n  &:focus-within {\n    background-color: ", ";\n\n    &::after {\n      width: 100%;\n    }\n\n    &:focus-within .drop-down {\n      display: block;\n    }\n  }\n\n  \n"])), globalVariables_1.globalInputElemFocused, greyColor10);
+exports.StyledTimeInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"], ["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor80 : greyColor5);
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return invert
+        ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
+        : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? '' : globalVariables_1.globalInputElemHover);
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "], ["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "])), greyColor40, greyColor15);
+}, greyColor40, (0, mixins_1.transition)('background-color', 'width'));
+exports.StyledDropDown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    position: absolute;\n    display: none;\n    left: 0;\n    overflow-y: scroll;\n    /* scroll-behavior: smooth; */\n    height: 20rem;\n    width: 15rem;\n    z-index: 1;\n"], ["\n    ", "\n    position: absolute;\n    display: none;\n    left: 0;\n    overflow-y: scroll;\n    /* scroll-behavior: smooth; */\n    height: 20rem;\n    width: 15rem;\n    z-index: 1;\n"])), globalVariables_1.globalLightboxStyle);
+exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+exports.StyledDropDownList = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    list-style: none;\n    padding-left: 0;\n\n    &:hover{\n        .drop-list{\n            background-color: inherit;\n        }\n    }\n"], ["\n    list-style: none;\n    padding-left: 0;\n\n    &:hover{\n        .drop-list{\n            background-color: inherit;\n        }\n    }\n"])));
+exports.StyledListItem = styled_components_1.default.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    padding: 9px 20px;\n    cursor: pointer;\n    ", "\n\n    .highlight{\n        background-color: red;\n    }\n"], ["\n    padding: 9px 20px;\n    cursor: pointer;\n    ", "\n\n    .highlight{\n        background-color: red;\n    }\n"])), globalVariables_1.globalHoverOnWhiteBG);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/TimePicker/utils/convertTo12Hour.d.ts

@@ -0,0 +1 @@
+export function convertTo12Hour(time24: any): any;

package/dist/components/TimePicker/utils/convertTo12Hour.js

@@ -0,0 +1,27 @@
+"use strict";
+// This function converts a 24-hour time format to a 12-hour time format with AM or PM. 
+// Also if passed valued is already in 12 Hour format with AM PM then it just returns it as is 
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTo12Hour = void 0;
+function convertTo12Hour(time24) {
+    // Check if the input is already in the expected format
+    if (/^\d{1,2}:\d{2} [APM]{2}$/i.test(time24)) {
+        return time24.toUpperCase();
+    }
+    var _a = time24.split(':').map(Number), hours = _a[0], minutes = _a[1];
+    if (hours >= 0 && hours <= 11) {
+        // Convert to 12-hour format with "AM"
+        var amTime = "".concat(hours === 0 ? 12 : hours, ":").concat(minutes.toString().padStart(2, '0'), " AM");
+        return amTime.toUpperCase();
+    }
+    else if (hours >= 12 && hours <= 23) {
+        // Convert to 12-hour format with "PM"
+        var pmTime = "".concat(hours === 12 ? 12 : hours - 12, ":").concat(minutes.toString().padStart(2, '0'), " PM");
+        return pmTime.toUpperCase();
+    }
+    else {
+        // Handle invalid input
+        return 'Invalid Time';
+    }
+}
+exports.convertTo12Hour = convertTo12Hour;

package/dist/components/TimePicker/utils/convertToMiltaryTime.d.ts

@@ -0,0 +1 @@
+export function convertToMiltaryTime(time: any): string;

package/dist/components/TimePicker/utils/convertToMiltaryTime.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToMiltaryTime = void 0;
+function convertToMiltaryTime(time) {
+    var _a = time === null || time === void 0 ? void 0 : time.split(/[:\s]/), hh = _a[0], mm = _a[1], period = _a[2];
+    var hour = parseInt(hh);
+    var minute = mm;
+    if (isNaN(hour) || isNaN(minute) || hour < 1 || hour > 12 || minute < 0 || minute > 59) {
+        // Invalid input, return an error message or handle as needed.
+        return "Invalid time input";
+    }
+    if (period === "PM" && hour !== 12) {
+        hour += 12;
+    }
+    else if (period === "AM" && hour === 12) {
+        // Handle "12:00 AM" as midnight (00:00)
+        hour = 0;
+    }
+    // Format hour and minute as two-digit strings
+    var formattedHour = hour.toString().padStart(2, "0");
+    var formattedMinute = minute.padStart(2, "0");
+    // Construct and return the military time string
+    var militaryTime = "".concat(formattedHour, ":").concat(formattedMinute);
+    return militaryTime;
+}
+exports.convertToMiltaryTime = convertToMiltaryTime;

package/dist/components/TimePicker/utils/getNearestTimeToCurrentTime.d.ts

@@ -0,0 +1 @@
+export function getNearestTimeToCurrentTime(timeArray: any): any;

package/dist/components/TimePicker/utils/getNearestTimeToCurrentTime.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNearestTimeToCurrentTime = void 0;
+var convertTo12Hour_1 = require("./convertTo12Hour");
+var timeToMinutes_1 = require("./timeToMinutes");
+function getNearestTimeToCurrentTime(timeArray) {
+    var currentTime = new Date();
+    var hours = currentTime.getHours().toString().padStart(2, "0");
+    var minutes = currentTime.getMinutes().toString().padStart(2, "0");
+    // let's format time to match timeArray so it can be compared, example 00:00 = 12:00 AM
+    var formattedTime = (0, convertTo12Hour_1.convertTo12Hour)("".concat(hours, ":").concat(minutes));
+    //format time to minutes, example, formatedTime === 12:45 AM, it will converted to "765", with help of timeToMinutes()
+    var formattedTimeMinutes = (0, timeToMinutes_1.timeToMinutes)(formattedTime);
+    var nearestTime = timeArray[0];
+    // now find minimum difference between current form formattedTimeMinutes and timeArray[0]
+    var minDifference = Math.abs(formattedTimeMinutes - (0, timeToMinutes_1.timeToMinutes)(timeArray[0]));
+    for (var i = 1; i < timeArray.length; i++) {
+        var currentDifference = Math.abs(formattedTimeMinutes - (0, timeToMinutes_1.timeToMinutes)(timeArray[i]));
+        if (currentDifference < minDifference) {
+            nearestTime = timeArray[i];
+            minDifference = currentDifference;
+        }
+    }
+    return nearestTime;
+}
+exports.getNearestTimeToCurrentTime = getNearestTimeToCurrentTime;

package/dist/components/TimePicker/utils/highLightTime.d.ts

@@ -0,0 +1 @@
+export function highLightTime(elementToScroll: any, invert: any): void;

package/dist/components/TimePicker/utils/highLightTime.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highLightTime = void 0;
+var themes_1 = require("../../../themes");
+function highLightTime(elementToScroll, invert) {
+    elementToScroll.scrollIntoView({ behavior: "auto" });
+    // elementToScroll.style.backgroundColor = invert ? colors.greyColor70 : colors.greyColor10;
+}
+exports.highLightTime = highLightTime;

package/dist/components/TimePicker/utils/timeToMinutes.d.ts

@@ -0,0 +1 @@
+export function timeToMinutes(time: any): number;

package/dist/components/TimePicker/utils/timeToMinutes.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timeToMinutes = void 0;
+function timeToMinutes(time) {
+    // Split the input time string into three parts: hours (hh), minutes (mm), and period (AM/PM).
+    var _a = time.split(/[:\s]/), hh = _a[0], mm = _a[1], period = _a[2];
+    // Convert the hours and minutes to minutes since midnight.
+    var minutes = parseInt(hh) * 60 + parseInt(mm);
+    // Check if the period is "PM" and if the hour is not already 12 (noon).
+    if (period === "PM" && hh !== "12") {
+        // If it's "PM" and not noon, add 12 hours' worth of minutes to the total.
+        minutes += 12 * 60;
+    }
+    else if (period === "AM" && hh === "12") {
+        // Handle "12:00 AM" as midnight (00:00)
+        minutes = 0;
+    }
+    return minutes;
+}
+exports.timeToMinutes = timeToMinutes;

package/dist/components/TimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export function TimeRangePicker(props: any): React.JSX.Element;
+import React from "react";