pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { Check, Copy } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+    const theme = useCustomTheme();
+    const [copied, setCopied] = useState(false);
+    const timer = useRef();
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), feedbackDuration);
+        }
+        catch {
+            /* clipboard unavailable — silently ignore */
+        }
+    };
+    // primary[500] is tuned for a white label on a filled button, not for reading as ink on the
+    // canvas — it fails AA here in 5 of 7 brands in dark mode. accentTextOnCanvas steps to the
+    // nearest rung that clears AA against the canvas this button actually sits on.
+    const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
+    const success = theme.colors.semanticText.success;
+    if (variant === "menu-item") {
+        return (_jsxs(Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize, color: success }) : _jsx(Copy, { size: iconSize, color: accent }), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+    }
+    if (variant === "button") {
+        return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
+            // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
+            borderColor: copied ? success : theme.colors.boxborder[800], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+    }
+    return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
+};
+export default CopyButton;

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, Heading, HStack, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
+import { Boxes, Pencil, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import EditModuleModal from "./EditModuleModal.js";
+import DeleteModuleModal from "./DeleteModuleModal.js";
+const DEFAULT_LABELS = {
+    title: "Custom Modules",
+    moduleName: "Module Name",
+    moduleOwner: "Module Owner",
+    action: "Action",
+    edit: "Edit",
+    delete: "Delete",
+    noModules: "No custom modules found",
+    loading: "Loading...",
+    editModuleTitle: "Edit Module Name",
+    moduleNamePlaceholder: "Enter module name",
+    cancel: "Cancel",
+    update: "Update",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmPrefix: "Are you sure you want to delete",
+};
+const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [editTarget, setEditTarget] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.text[800];
+    const headBg = colors.backgroundColor.tableHeader;
+    const thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+                    if (editTarget) {
+                        await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
+                            moduleId: editTarget.module_id,
+                            moduleName: name,
+                        }));
+                    }
+                    setEditTarget(null);
+                }, labels: labels }), _jsx(DeleteModuleModal, { isOpen: deleteTarget !== null, onClose: () => setDeleteTarget(null), moduleName: deleteTarget === null || deleteTarget === void 0 ? void 0 : deleteTarget.moduleName, isLoading: isDeleting, onConfirm: async () => {
+                    if (deleteTarget) {
+                        await (onDeleteModule === null || onDeleteModule === void 0 ? void 0 : onDeleteModule(deleteTarget.module_id));
+                    }
+                    setDeleteTarget(null);
+                }, labels: labels })] }));
+};
+export default CustomModulesTable;

package/dist/esm/Components/CustomModulesTable/CustomModulesTableProps.js

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

package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import Button from "../Button/Button.js";
+const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+};
+export default DeleteModuleModal;

package/dist/esm/Components/CustomModulesTable/EditModuleModal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, Input, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
+    const { colors } = useCustomTheme();
+    const [name, setName] = useState(initialName);
+    useEffect(() => {
+        if (isOpen)
+            setName(initialName);
+    }, [isOpen, initialName]);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+                                // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
+                                // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
+                                // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
+                                borderColor: colors.boxborder[800], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+};
+export default EditModuleModal;

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Grid } from "@chakra-ui/react";
+import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays } from "date-fns";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
+    const theme = useCustomTheme();
+    const rangeBg = theme.colors.primary.opacity[16];
+    const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
+    // Effective range end: the committed end, or a tentative end from hover.
+    const tentativeEnd = isRange && tempRangeStart && !tempRangeEnd && hoveredDate && isAfter(hoveredDate, tempRangeStart)
+        ? hoveredDate
+        : null;
+    const rangeStart = tempRangeStart;
+    const rangeEnd = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tentativeEnd;
+    const isTentative = !tempRangeEnd && !!tentativeEnd;
+    const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
+    const selectStyles = {
+        border: "1px solid",
+        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
+        // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
+        borderColor: theme.colors.boxborder[500],
+        borderRadius: "md",
+        px: 2,
+        py: 1,
+        fontSize: "xs",
+        fontWeight: 600,
+        color: theme.colors.text[700],
+        cursor: "pointer",
+        bg: theme.colors.background[50],
+        outline: "none",
+        _hover: { borderColor: theme.colors.primary[300] },
+        _focus: {
+            outline: "none",
+            borderColor: theme.colors.primary[500],
+            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
+        },
+        style: {
+            WebkitAppearance: "menulist",
+            MozAppearance: "menulist",
+            appearance: "menulist",
+        },
+    };
+    const renderDays = () => {
+        const monthStart = startOfMonth(currentMonth);
+        const monthEnd = endOfMonth(currentMonth);
+        const startDate = startOfWeek(monthStart);
+        const endDate = endOfWeek(monthEnd);
+        const rows = [];
+        let day = startDate;
+        while (day <= endDate) {
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                const thisDay = day;
+                const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                const isToday = isSameDay(thisDay, today);
+                const isStart = !!(isRange && rangeStart && isSameDay(thisDay, rangeStart));
+                const isEnd = !!(isRange && rangeEnd && isSameDay(thisDay, rangeEnd));
+                const isInRange = !!(isRange && rangeStart && rangeEnd && isAfter(thisDay, rangeStart) && isBefore(thisDay, rangeEnd));
+                const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
+                const isTentativeEnd = isEnd && isTentative;
+                const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                const disabled = !isInCurrentMonth ||
+                    !!(minDate && isBefore(thisDay, minDate)) ||
+                    !!(maxDate && isAfter(thisDay, maxDate)) ||
+                    !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableToday && isToday);
+                // Connected range band painted on the cell background; start/end use a
+                // half gradient so the band meets the solid day circle cleanly.
+                let cellBg;
+                if (isRange && hasRange) {
+                    if (isInRange)
+                        cellBg = rangeBg;
+                    else if (isStart && isEnd)
+                        cellBg = undefined;
+                    else if (isStart)
+                        cellBg = `linear-gradient(to right, transparent 50%, ${rangeBg} 50%)`;
+                    else if (isEnd)
+                        cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
+                }
+                // Solid fill (selected/range-endpoint) needs the ink checked against that
+                // specific fill — `primary[500]` doesn't reliably clear AA for white text on
+                // every brand/mode (same gap the solid Button variant already accounts for).
+                const solidFill = theme.colors.primary[500];
+                const solidHoverFill = theme.colors.primary[600];
+                const circleColor = circleSolid
+                    ? onFilled(solidFill, theme.colors.white, theme.colors.black)
+                    : isInCurrentMonth
+                        ? theme.colors.text[700]
+                        : theme.colors.gray[400];
+                const circleHoverColor = circleSolid
+                    ? onFilled(solidHoverFill, theme.colors.white, theme.colors.black)
+                    : circleColor;
+                const circleBorder = circleSolid
+                    ? "1px solid transparent"
+                    : isTentativeEnd
+                        ? `1px solid ${theme.colors.primary[400]}`
+                        : isToday
+                            ? `1px solid ${theme.colors.primary[300]}`
+                            : "1px solid transparent";
+                days.push(_jsx(Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsx(Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                            ? {}
+                            : circleSolid
+                                ? { bg: solidHoverFill, color: circleHoverColor }
+                                : { bg: rangeBg }, children: format(thisDay, "d") }) }, thisDay.toString()));
+                day = addDays(day, 1);
+            }
+            rows.push(_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
+        }
+        return rows;
+    };
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [_jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [_jsx(Box, { as: "select", value: currentMonth.getMonth(), onChange: (e) => {
+                                    const newMonth = parseInt(e.target.value, 10);
+                                    setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
+                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx(Box, { as: "select", value: currentMonth.getFullYear(), onChange: (e) => {
+                                    const newYear = parseInt(e.target.value, 10);
+                                    setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                                }, ...selectStyles, children: Array.from({ length: 100 }).map((_, i) => {
+                                    const year = new Date().getFullYear() - 50 + i;
+                                    return (_jsx("option", { value: year, children: year }, year));
+                                }) })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [!isRange && !isViewingCurrentMonth && (_jsx(Button, { variant: "ghost", size: "xs", onClick: () => {
+                                    setCurrentMonth(() => new Date(today.getFullYear(), today.getMonth(), 1));
+                                    if (!disableToday) {
+                                        onDaySelect(new Date(today));
+                                    }
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
+};
+export default CalendarPanel;

package/dist/esm/Components/DatePicker/DatePicker.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Box, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, Grid, useDisclosure, } from "@chakra-ui/react";
+import { format, isSameDay, isBefore, isAfter, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addMonths, subMonths, } from "date-fns";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import TimePicker from "./TimePicker.js";
+const inferPickerTypeFromFormat = (formatStr) => {
+    const lower = formatStr.toLowerCase();
+    const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
+    const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+export default function CustomDatePicker(props) {
+    var _a, _b;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    const singleProps = !isRange ? props : null;
+    const rangeProps = isRange ? props : null;
+    const emitSingle = useCallback((date) => {
+        singleProps === null || singleProps === void 0 ? void 0 : singleProps.onChange(date);
+    }, [singleProps]);
+    const emitRange = (range) => {
+        rangeProps === null || rangeProps === void 0 ? void 0 : rangeProps.onChange(range);
+    };
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    const inputRef = useRef(null);
+    const today = new Date();
+    const tomorrow = addDays(today, 1);
+    const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+    const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    const selectedDate = singleProps !== null
+        ? (_b = ((_a = singleProps.value) !== null && _a !== void 0 ? _a : singleProps.selectedDate)) !== null && _b !== void 0 ? _b : null
+        : null;
+    // const [currentMonth, setCurrentMonth] = useState<Date>(
+    //   isRange ? new Date() : selectedDate ?? new Date()
+    // );
+    const [currentMonth, setCurrentMonth] = useState(isRange ? new Date() :
+        selectedDate
+            ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
+            : (disableToday ? tomorrow : today));
+    const [rangeStart, setRangeStart] = useState(null);
+    const [rangeEnd, setRangeEnd] = useState(null);
+    const [selectingStart, setSelectingStart] = useState(true);
+    const [tempDate, setTempDate] = useState(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+    //   const [tempDate, setTempDate] = useState<Date | null>(
+    //   selectedDate
+    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
+    //     : (disableToday ? tomorrow : null)
+    // );
+    const [tempRangeStart, setTempRangeStart] = useState(rangeStart);
+    const [tempRangeEnd, setTempRangeEnd] = useState(rangeEnd);
+    const popoverRef = useRef(null);
+    const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
+    const handleOpen = () => {
+        if (!isRange && !selectedDate) {
+            // setTempDate(new Date());
+            setTempDate(disableToday ? tomorrow : new Date());
+        }
+        if (showTime) {
+            // setTempDate(new Date()); // add new
+            //  setTempDate(disableToday ? tomorrow : new Date());
+            // console.log(selectedDate,"selectedDateselectedDate")
+            setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
+        }
+        onOpen();
+    };
+    useEffect(() => {
+        if (!isRange) {
+            if (selectedDate instanceof Date) {
+                setTempDate(new Date(selectedDate));
+                // const corrected = disableToday && isSameDay(selectedDate, today)
+                //   ? tomorrow
+                //   : selectedDate;
+                // setTempDate(new Date(corrected));
+            }
+            else {
+                setTempDate(null);
+                // setTempDate(disableToday ? tomorrow : null);
+            }
+        }
+    }, [selectedDate, isRange, disableToday]);
+    const handleDaySelect = (day) => {
+        // const updated = new Date(day);
+        let updated = new Date(day);
+        // 👇 Redirect selection from today → tomorrow
+        if (disableToday && isSameDay(updated, today)) {
+            updated = tomorrow;
+        }
+        if (isRange) {
+            if (selectingStart) {
+                setTempRangeStart(updated);
+                setTempRangeEnd(null);
+                setSelectingStart(false);
+            }
+            else {
+                const finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
+                const finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+                const safeStart = finalStart !== null && finalStart !== void 0 ? finalStart : updated;
+                setTempRangeStart(safeStart);
+                setTempRangeEnd(finalEnd);
+                setSelectingStart(true);
+                if (safeStart && finalEnd) {
+                    emitRange({ from: safeStart, to: finalEnd });
+                }
+            }
+        }
+        else {
+            const updatedDate = tempDate
+                ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
+                : updated;
+            setTempDate(updatedDate);
+            emitSingle(updatedDate);
+        }
+    };
+    const renderDays = () => {
+        const monthStart = startOfMonth(currentMonth);
+        const monthEnd = endOfMonth(currentMonth);
+        const startDate = startOfWeek(monthStart);
+        const endDate = endOfWeek(monthEnd);
+        const rows = [];
+        let day = startDate;
+        while (day <= endDate) {
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                const thisDay = day;
+                const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                const isToday = isSameDay(thisDay, today);
+                const isStart = isRange && tempRangeStart && isSameDay(thisDay, tempRangeStart);
+                const isEnd = isRange && tempRangeEnd && isSameDay(thisDay, tempRangeEnd);
+                const isInRange = isRange &&
+                    tempRangeStart &&
+                    tempRangeEnd &&
+                    isAfter(thisDay, tempRangeStart) &&
+                    isBefore(thisDay, tempRangeEnd);
+                const isSelected = !isRange && tempDate && isSameDay(thisDay, tempDate);
+                const disabled = !isInCurrentMonth ||
+                    (minDate && isBefore(thisDay, minDate)) ||
+                    (maxDate && isAfter(thisDay, maxDate)) ||
+                    (disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    (disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    (disableToday && isToday);
+                days.push(_jsx(Button, { size: "sm", variant: isStart || isEnd
+                        ? "solid"
+                        : isInRange
+                            ? "outline"
+                            : isSelected
+                                ? "solid"
+                                : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.4, onClick: () => !disabled && handleDaySelect(new Date(thisDay)), isDisabled: disabled, border: isToday ? `0.125rem solid ${theme.colors.primary[500]}` : undefined, borderRadius: "md", children: format(thisDay, "d") }, thisDay.toString()));
+                day = addDays(day, 1);
+            }
+            rows.push(_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, children: days }, day.toString()));
+        }
+        return rows;
+    };
+    const displayValue = isRange
+        ? tempRangeStart && tempRangeEnd
+            ? `${format(tempRangeStart, dateFormat)} - ${format(tempRangeEnd, dateFormat)}`
+            : tempRangeStart
+                ? `${format(tempRangeStart, dateFormat)} -`
+                : ""
+        : tempDate
+            ? format(tempDate, dateFormat)
+            : "";
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            var _a;
+            if (popoverRef.current &&
+                !popoverRef.current.contains(event.target) &&
+                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                if (tempDate) {
+                    emitSingle(tempDate); // commit latest temp on outside click
+                }
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, tempDate, props, emitSingle]);
+    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.background[50], children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
+                                                                    const newMonth = parseInt(e.target.value, 10);
+                                                                    setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
+                                                                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { value: currentMonth.getFullYear(), onChange: (e) => {
+                                                                    const newYear = parseInt(e.target.value, 10);
+                                                                    setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                                                                }, children: Array.from({ length: 100 }).map((_, i) => {
+                                                                    const year = new Date().getFullYear() - 50 + i;
+                                                                    return (_jsx("option", { value: year, children: year }, year));
+                                                                }) })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [!isViewingCurrentMonth && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                    setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+                                                                    if (!disableToday && !isRange) {
+                                                                        handleDaySelect(new Date(today));
+                                                                    }
+                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker
+                                    // date={tempDate ?? new Date()}
+                                    , { 
+                                        // date={tempDate ?? new Date()}
+                                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, 
+                                        // onChange={(updatedDate) => {
+                                        // 👇 Redirect time change if today
+                                        //   const corrected = disableToday && isSameDay(updatedDate, today)
+                                        //     ? tomorrow
+                                        //     : updatedDate;
+                                        //   setTempDate(corrected);
+                                        //   emitSingle(corrected);
+                                        // }}
+                                        onChange: (updatedDate) => {
+                                            setTempDate(updatedDate);
+                                            emitSingle(updatedDate);
+                                        } })), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                                    setTempDate(null);
+                                                    // setTempDate(disableToday ? tomorrow : null);
+                                                    setTempRangeStart(null);
+                                                    setTempRangeEnd(null);
+                                                    setRangeStart(null);
+                                                    setRangeEnd(null);
+                                                    setSelectingStart(true);
+                                                    if (isRange) {
+                                                        emitRange(null);
+                                                    }
+                                                    else {
+                                                        emitSingle(null);
+                                                    }
+                                                    onClose();
+                                                }, children: "Clear" }), _jsx(Button, { size: "sm", colorScheme: "primary", onClick: () => {
+                                                    if (isRange && tempRangeStart && tempRangeEnd) {
+                                                        setRangeStart(tempRangeStart);
+                                                        setRangeEnd(tempRangeEnd);
+                                                        emitRange({ from: tempRangeStart, to: tempRangeEnd });
+                                                    }
+                                                    else if (!isRange && tempDate) {
+                                                        emitSingle(tempDate);
+                                                    }
+                                                    onClose();
+                                                }, children: "OK" })] })] }) }) })] })] }));
+}

package/dist/esm/Components/DatePicker/DatePickerProps.js

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