pixelize-design-library 2.2.43 → 2.2.45

package/dist/Components/DatePicker/ThemeDatePicker.d.ts

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

package/dist/Components/DatePicker/ThemeDatePicker.js

@@ -0,0 +1,43 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var RangeDatePicker_1 = require("./RangeDatePicker");
+var SingleDatePicker_1 = require("./SingleDatePicker");
+var TimeOnlyPicker_1 = require("./TimeOnlyPicker");
+var inferPickerTypeFromFormat = function (formatStr) {
+    var lower = formatStr.toLowerCase();
+    var hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
+    var hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+var ThemeDatePicker = function (props) {
+    var _a, _b;
+    if (props.isRange) {
+        return react_1.default.createElement(RangeDatePicker_1.RangeDatePicker, __assign({}, props));
+    }
+    var dateFormat = (_a = props.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
+    var pickerType = (_b = props.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
+    if (pickerType === "time") {
+        return react_1.default.createElement(TimeOnlyPicker_1.TimeOnlyPicker, __assign({}, props));
+    }
+    return react_1.default.createElement(SingleDatePicker_1.SingleDatePicker, __assign({}, props));
+};
+exports.default = ThemeDatePicker;

package/dist/Components/DatePicker/TimeOnlyPicker.d.ts

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

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -0,0 +1,119 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeOnlyPicker = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var date_fns_1 = require("date-fns");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormLabel_1 = require("../Common/FormLabel");
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var TimePicker_1 = __importDefault(require("./TimePicker"));
+var TimePickerInput_1 = require("./TimePickerInput");
+var formatToPlaceholder = function (formatStr) {
+    return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+};
+var TimeOnlyPicker = function (props) {
+    var _a;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
+    var popoverRef = (0, react_1.useRef)(null);
+    var triggerRef = (0, react_1.useRef)(null);
+    var inputWrapperRef = (0, react_1.useRef)(null);
+    var today = new Date();
+    var tomorrow = (0, date_fns_1.addDays)(today, 1);
+    var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
+    var _g = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _g[0], setTempDate = _g[1];
+    (0, react_1.useEffect)(function () {
+        setTempDate(selectedDate ? new Date(selectedDate) : null);
+    }, [selectedDate]);
+    var placeholder = (0, react_1.useMemo)(function () { return placeholderText || formatToPlaceholder(dateFormat); }, [placeholderText, dateFormat]);
+    var handleTimeInputChange = function (date) {
+        setTempDate(date);
+        props.onChange(date);
+    };
+    var handleTimePickerChange = function (date) {
+        setTempDate(date);
+        props.onChange(date);
+    };
+    var handleClear = function () {
+        setTempDate(null);
+        props.onChange(null);
+        // Do not close; user asked only outside-click and OK to close
+    };
+    var handleOk = function () {
+        onClose();
+    };
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return;
+        var handleMouseDownOutside = function (event) {
+            var target = event.target;
+            var inputEl = inputWrapperRef.current;
+            var triggerEl = triggerRef.current;
+            var popoverEl = popoverRef.current;
+            var insideInput = !!inputEl && inputEl.contains(target);
+            var insideTrigger = !!triggerEl && triggerEl.contains(target);
+            var insidePopover = !!popoverEl && popoverEl.contains(target);
+            if (!insideInput && !insideTrigger && !insidePopover) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDownOutside, true);
+        return function () {
+            document.removeEventListener("mousedown", handleMouseDownOutside, true);
+        };
+    }, [isOpen, onClose]);
+    var resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
+    return (react_1.default.createElement(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
+        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
+            react_1.default.createElement(react_2.PopoverAnchor, null,
+                react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
+                    react_1.default.createElement(react_2.Box, { ref: inputWrapperRef },
+                        react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: function (date) {
+                                handleTimeInputChange(date);
+                            }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: function () {
+                                if (!disabled && !isOpen)
+                                    onOpen();
+                            } })))),
+            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
+                react_1.default.createElement(react_2.PopoverBody, null,
+                    react_1.default.createElement(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: function (updatedDate) {
+                            handleTimePickerChange(updatedDate);
+                        } }),
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
+                        react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear }, "Clear"),
+                        react_1.default.createElement(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk }, "OK"))))),
+        error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+};
+exports.TimeOnlyPicker = TimeOnlyPicker;
+exports.default = exports.TimeOnlyPicker;

package/dist/Components/DatePicker/TimePickerInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface TimePickerInputProps {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    dateFormat: string;
+    disabled?: boolean;
+    placeholder?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare const TimePickerInput: React.FC<TimePickerInputProps>;
+export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -0,0 +1,362 @@
+"use strict";
+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.TimePickerInput = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var date_fns_1 = require("date-fns");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var sanitizeDigits = function (input) { return input.replace(/\D/g, "").slice(0, 4); };
+var adjustDigits = function (digits, is12Hour) {
+    var result = sanitizeDigits(digits);
+    if (!result)
+        return "";
+    var maxFirstHour = is12Hour ? 1 : 2;
+    var firstDigit = parseInt(result.charAt(0), 10);
+    if (!isNaN(firstDigit) && firstDigit > maxFirstHour) {
+        result = ("0" + firstDigit.toString() + result.slice(1)).slice(0, 4);
+    }
+    if (result.length >= 2) {
+        var hour = parseInt(result.slice(0, 2), 10);
+        if (isNaN(hour))
+            hour = 0;
+        if (is12Hour) {
+            if (hour < 1)
+                hour = 1;
+            if (hour > 12)
+                hour = 12;
+        }
+        else {
+            if (hour < 0)
+                hour = 0;
+            if (hour > 23)
+                hour = 23;
+        }
+        result = hour.toString().padStart(2, "0") + result.slice(2);
+    }
+    if (result.length >= 3) {
+        var firstMinuteDigit = parseInt(result.charAt(2), 10);
+        if (!isNaN(firstMinuteDigit) && firstMinuteDigit > 5) {
+            result = result.slice(0, 2) + "5" + result.slice(3);
+        }
+    }
+    if (result.length >= 4) {
+        var minute = parseInt(result.slice(2, 4), 10);
+        if (isNaN(minute))
+            minute = 0;
+        if (minute < 0)
+            minute = 0;
+        if (minute > 59)
+            minute = 59;
+        result = result.slice(0, 2) + minute.toString().padStart(2, "0") + result.slice(4);
+    }
+    return result.slice(0, 4);
+};
+var formatDigits = function (digits) {
+    if (!digits)
+        return "";
+    if (digits.length === 1)
+        return digits;
+    if (digits.length === 2)
+        return "".concat(digits, ":");
+    if (digits.length === 3)
+        return "".concat(digits.slice(0, 2), ":").concat(digits.slice(2, 3));
+    return "".concat(digits.slice(0, 2), ":").concat(digits.slice(2, 4));
+};
+var getDigitIndexFromCaret = function (formatted, caret) {
+    var digitIndex = 0;
+    for (var i = 0; i < caret && i < formatted.length; i++) {
+        if (/\d/.test(formatted[i]))
+            digitIndex++;
+    }
+    return digitIndex;
+};
+var caretFromDigitIndex = function (digitIndex, digitsLen) {
+    if (digitIndex < 0)
+        return 0;
+    if (digitsLen <= 1)
+        return Math.min(digitIndex, digitsLen);
+    if (digitsLen === 2) {
+        if (digitIndex <= 1)
+            return digitIndex;
+        return 3; // after colon
+    }
+    // digitsLen >= 3
+    if (digitIndex <= 1)
+        return digitIndex;
+    if (digitIndex === 2)
+        return 3;
+    return digitIndex + 1;
+};
+var formatToPlaceholder = function (formatStr) { return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM"); };
+var TimePickerInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var inputRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(""), digits = _c[0], setDigits = _c[1];
+    var digitsRef = (0, react_1.useRef)("");
+    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var isFocusedRef = (0, react_1.useRef)(false);
+    var _e = (0, react_1.useState)("hour"), activeSegment = _e[0], setActiveSegment = _e[1];
+    var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
+    var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
+    var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
+        requestAnimationFrame(function () {
+            var el = inputRef.current;
+            if (!el)
+                return;
+            el.value = formatted;
+            var caretPos = Math.min(caretFromDigitIndex(caretDigitIndex, digitsRef.current.length), formatted.length);
+            el.setSelectionRange(caretPos, caretPos);
+        });
+    }, []);
+    var applyDigits = (0, react_1.useCallback)(function (rawDigits, desiredDigitIndex) {
+        var clamped = adjustDigits(rawDigits, is12Hour);
+        digitsRef.current = clamped;
+        setDigits(clamped);
+        var formatted = formatDigits(clamped);
+        var maxDigitIndex = clamped.length === 2 ? 2 : clamped.length;
+        var nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
+        setInputValueAndCaret(formatted, nextDigitIndex);
+        if (clamped.length === 4) {
+            var parsed = (0, date_fns_1.parse)(formatted, dateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed))
+                onChange(parsed);
+        }
+        else if (clamped.length === 0) {
+            onChange(null);
+        }
+        return { digits: clamped, nextDigitIndex: nextDigitIndex };
+    }, [dateFormat, is12Hour, onChange, setInputValueAndCaret]);
+    var handleDigitInput = (0, react_1.useCallback)(function (digit) {
+        var _a, _b;
+        var el = inputRef.current;
+        var formatted = formatDigits(digitsRef.current);
+        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        var newDigits = digitsRef.current;
+        newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
+        newDigits = newDigits.slice(0, startDigitIndex) + digit + newDigits.slice(startDigitIndex);
+        newDigits = newDigits.slice(0, 4);
+        var _c = applyDigits(newDigits, startDigitIndex + 1), finalDigits = _c.digits, nextDigitIndex = _c.nextDigitIndex;
+        if (startDigitIndex < 2 && finalDigits.length >= 2) {
+            setActiveSegment("minute");
+        }
+        else if (nextDigitIndex <= 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    var handleBackspace = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (!digitsRef.current)
+            return;
+        var el = inputRef.current;
+        var formatted = formatDigits(digitsRef.current);
+        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        if (startDigitIndex === endDigitIndex) {
+            if (startDigitIndex === 0)
+                return;
+            startDigitIndex -= 1;
+        }
+        var newDigits = digitsRef.current;
+        newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
+        var _c = applyDigits(newDigits, startDigitIndex), nextDigitIndex = _c.nextDigitIndex, finalDigits = _c.digits;
+        if (finalDigits.length < 2 || nextDigitIndex <= 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    var handleDelete = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (!digitsRef.current)
+            return;
+        var el = inputRef.current;
+        var formatted = formatDigits(digitsRef.current);
+        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        if (startDigitIndex === endDigitIndex) {
+            if (startDigitIndex >= digitsRef.current.length)
+                return;
+            endDigitIndex = startDigitIndex + 1;
+        }
+        var newDigits = digitsRef.current;
+        newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
+        var _c = applyDigits(newDigits, startDigitIndex), nextDigitIndex = _c.nextDigitIndex, finalDigits = _c.digits;
+        if (finalDigits.length < 2 || nextDigitIndex <= 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    var handleArrow = (0, react_1.useCallback)(function (direction) {
+        if (direction === "left") {
+            setActiveSegment("hour");
+            setInputValueAndCaret(formatDigits(digitsRef.current), 0);
+        }
+        else {
+            if (digitsRef.current.length >= 2) {
+                setActiveSegment("minute");
+                setInputValueAndCaret(formatDigits(digitsRef.current), 3);
+            }
+        }
+    }, [setInputValueAndCaret]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        if (disabled)
+            return;
+        var key = e.key;
+        if (/^[0-9]$/.test(key)) {
+            e.preventDefault();
+            handleDigitInput(key);
+            return;
+        }
+        if (key === "Backspace") {
+            e.preventDefault();
+            handleBackspace();
+            return;
+        }
+        if (key === "Delete") {
+            e.preventDefault();
+            handleDelete();
+            return;
+        }
+        if (key === ":") {
+            e.preventDefault();
+            return;
+        }
+        if (key === "ArrowLeft") {
+            e.preventDefault();
+            handleArrow("left");
+            return;
+        }
+        if (key === "ArrowRight") {
+            e.preventDefault();
+            handleArrow("right");
+            return;
+        }
+        if (key === "Tab" || key === "Shift" || key === "Enter" || key === "Escape") {
+            return;
+        }
+        e.preventDefault();
+    }, [disabled, handleDigitInput, handleBackspace, handleDelete, handleArrow]);
+    var handleFocus = (0, react_1.useCallback)(function () {
+        setIsFocused(true);
+        isFocusedRef.current = true;
+        setActiveSegment("hour");
+        requestAnimationFrame(function () {
+            var el = inputRef.current;
+            if (!el)
+                return;
+            el.focus();
+            el.setSelectionRange(0, Math.min(2, el.value.length));
+        });
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    var handleBlur = (0, react_1.useCallback)(function () {
+        setIsFocused(false);
+        isFocusedRef.current = false;
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    var handleClick = (0, react_1.useCallback)(function () {
+        var _a;
+        var el = inputRef.current;
+        if (!el)
+            return;
+        var caret = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        var formatted = formatDigits(digitsRef.current);
+        var digitIndex = getDigitIndexFromCaret(formatted, caret);
+        if (digitIndex < 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            if (digitsRef.current.length >= 2)
+                setActiveSegment("minute");
+        }
+    }, []);
+    var handleInput = (0, react_1.useCallback)(function (e) {
+        // Prevent uncontrolled edits – we manage value ourselves
+        var el = inputRef.current;
+        if (!el)
+            return;
+        var formatted = formatDigits(digitsRef.current);
+        if (el.value !== formatted) {
+            el.value = formatted;
+        }
+    }, []);
+    var handlePaste = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        var pasted = sanitizeDigits(e.clipboardData.getData("text"));
+        if (!pasted)
+            return;
+        applyDigits(pasted, pasted.length);
+        if (pasted.length >= 2) {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    (0, react_1.useEffect)(function () {
+        if (value) {
+            var newDigits = adjustDigits((0, date_fns_1.format)(value, dateFormat).replace(/\D/g, ""), is12Hour);
+            digitsRef.current = newDigits;
+            setDigits(newDigits);
+            if (!isFocusedRef.current) {
+                var formatted = formatDigits(newDigits);
+                if (inputRef.current) {
+                    inputRef.current.value = formatted;
+                }
+            }
+        }
+        else {
+            digitsRef.current = "";
+            setDigits("");
+            if (inputRef.current && !isFocusedRef.current) {
+                inputRef.current.value = "";
+            }
+        }
+    }, [value, dateFormat, is12Hour]);
+    (0, react_1.useEffect)(function () {
+        var formatted = formatDigits(digits);
+        if (!isFocusedRef.current && inputRef.current) {
+            inputRef.current.value = formatted;
+        }
+    }, [digits]);
+    return (react_1.default.createElement(react_2.InputGroup, null,
+        react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off" }),
+        react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none" },
+            react_1.default.createElement(lucide_react_1.ClockIcon, { size: 18, color: theme.colors.gray[500] }))));
+};
+exports.TimePickerInput = TimePickerInput;

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, }: NoteTextAreaProps): React.JSX.Element;
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder }: NoteTextAreaProps): React.JSX.Element;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -45,16 +45,16 @@ var countWords = function (text) {
 };
 function NoteTextArea(_a) {
     var _b;
-    var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref;
+    var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var noteAreaRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)(false), isActive = _h[0], setIsActive = _h[1];
-    var _j = (0, react_1.useState)(""), noteValue = _j[0], setNoteValue = _j[1];
-    var _k = (0, react_1.useState)(""), titleValue = _k[0], setTitleValue = _k[1];
-    var _l = (0, react_1.useState)(false), titleShow = _l[0], setTitleShow = _l[1];
-    var _m = (0, react_1.useState)([]), files = _m[0], setFiles = _m[1];
-    var _o = (0, react_1.useState)(""), fileError = _o[0], setFileError = _o[1];
-    var _p = (0, react_1.useState)(false), isSaveDisabled = _p[0], setIsSaveDisabled = _p[1];
+    var _j = (0, react_1.useState)(false), isActive = _j[0], setIsActive = _j[1];
+    var _k = (0, react_1.useState)(""), noteValue = _k[0], setNoteValue = _k[1];
+    var _l = (0, react_1.useState)(""), titleValue = _l[0], setTitleValue = _l[1];
+    var _m = (0, react_1.useState)(false), titleShow = _m[0], setTitleShow = _m[1];
+    var _o = (0, react_1.useState)([]), files = _o[0], setFiles = _o[1];
+    var _p = (0, react_1.useState)(""), fileError = _p[0], setFileError = _p[1];
+    var _q = (0, react_1.useState)(false), isSaveDisabled = _q[0], setIsSaveDisabled = _q[1];
     (0, react_1.useEffect)(function () {
         setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
     }, [titleValue, maxNoteWordCount]);
@@ -151,7 +151,7 @@ function NoteTextArea(_a) {
     };
     return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
         !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
-            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, "Add a note..."))),
+            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, customPlaceholder))),
         isActive && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
                 titleShow && (react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -13,4 +13,5 @@ export type NoteTextAreaProps = {
     maxNoteWordCount?: number;
     onChange?: (value: string) => void;
     ref?: LegacyRef<HTMLInputElement>;
+    customPlaceholder?: string;
 };