@itilite/lumina-ui 1.0.1 → 1.0.3-alpha

package/dist/chunk-62VAYFZA.mjs

@@ -0,0 +1,437 @@
+import {
+  Select_default
+} from "./chunk-GU5F7Z7I.mjs";
+import {
+  InternalCalendar_default
+} from "./chunk-N4DPPZVJ.mjs";
+import {
+  Button_default
+} from "./chunk-AF2RKLH6.mjs";
+
+// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js";
+
+// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.module.scss
+var AdvancedDateRangePicker_module_default = { "root": "AdvancedDateRangePicker-module__root___udir8", "inner": "AdvancedDateRangePicker-module__inner___P4OHa", "left": "AdvancedDateRangePicker-module__left___T6E84", "sidebarItem": "AdvancedDateRangePicker-module__sidebarItem___-NXPm", "sidebarItemActive": "AdvancedDateRangePicker-module__sidebarItemActive___5GmBY", "main": "AdvancedDateRangePicker-module__main___G4MU9", "header": "AdvancedDateRangePicker-module__header___mxXEE", "timezoneWrapper": "AdvancedDateRangePicker-module__timezoneWrapper___886Qm", "dateTimeWrapper": "AdvancedDateRangePicker-module__dateTimeWrapper___unDQJ", "headerGroup": "AdvancedDateRangePicker-module__headerGroup___J7mJB", "headerLabel": "AdvancedDateRangePicker-module__headerLabel___Yvhkr", "headerSeparator": "AdvancedDateRangePicker-module__headerSeparator___Vwx6P", "timezoneSelect": "AdvancedDateRangePicker-module__timezoneSelect___f4oln", "timezoneSelectContainer": "AdvancedDateRangePicker-module__timezoneSelectContainer___8SMc4", "timezoneDisabledBadge": "AdvancedDateRangePicker-module__timezoneDisabledBadge___VBxOd", "inputWrapper": "AdvancedDateRangePicker-module__inputWrapper___bFFNF", "dateTimeColumn": "AdvancedDateRangePicker-module__dateTimeColumn___tdDV3", "dateTimeGroup": "AdvancedDateRangePicker-module__dateTimeGroup___azF09", "dateInput": "AdvancedDateRangePicker-module__dateInput___0t9ww", "inputError": "AdvancedDateRangePicker-module__inputError___A5hid", "timeInput": "AdvancedDateRangePicker-module__timeInput___Jalr9", "errorMessage": "AdvancedDateRangePicker-module__errorMessage___gx7ag", "body": "AdvancedDateRangePicker-module__body___f8XYj", "footer": "AdvancedDateRangePicker-module__footer___rsJ2w", "doneBtn": "AdvancedDateRangePicker-module__doneBtn___mt-Sv" };
+
+// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+dayjs.extend(customParseFormat);
+dayjs.extend(isSameOrBefore);
+var DEFAULT_TIME = { hour: "12", minute: "00", period: "PM" };
+function getPresets() {
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  return [
+    {
+      label: "Custom",
+      key: "custom",
+      getRange: () => [null, null]
+    },
+    {
+      label: "Yesterday",
+      key: "yesterday",
+      getRange: () => {
+        const d = new Date(today);
+        d.setDate(d.getDate() - 1);
+        return [d, d];
+      }
+    },
+    {
+      label: "Previous week",
+      key: "previous-week",
+      getRange: () => {
+        const dayOfWeek = today.getDay();
+        const start = new Date(today);
+        start.setDate(today.getDate() - dayOfWeek - 6);
+        const end = new Date(today);
+        return [start, end];
+      }
+    },
+    {
+      label: "This month",
+      key: "this-month",
+      getRange: () => {
+        const start = new Date(today.getFullYear(), today.getMonth(), 1);
+        const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+        return [start, end];
+      }
+    },
+    {
+      label: "Previous month",
+      key: "previous-month",
+      getRange: () => {
+        const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+        const end = new Date(today.getFullYear(), today.getMonth(), 0);
+        return [start, end];
+      }
+    },
+    {
+      label: "Previous quarter",
+      key: "previous-quarter",
+      getRange: () => {
+        const month = today.getMonth();
+        const quarter = Math.floor(month / 3);
+        const startMonth = (quarter - 1) * 3;
+        const start = new Date(today.getFullYear(), startMonth, 1);
+        const end = new Date(today.getFullYear(), startMonth + 3, 0);
+        return [start, end];
+      }
+    }
+  ];
+}
+function applyDateMask(v, prev) {
+  if (v.length < prev.length) return v;
+  const digits = v.replace(/[^\d]/g, "").slice(0, 8);
+  if (digits.length >= 2) {
+    const d = Number(digits.slice(0, 2));
+    if (d < 1 || d > 31) return prev;
+  }
+  if (digits.length >= 4) {
+    const m = Number(digits.slice(2, 4));
+    if (m < 1 || m > 12) return prev;
+  }
+  let result = "";
+  if (digits.length > 0) result += digits.slice(0, 2);
+  if (digits.length >= 2) result += "-";
+  if (digits.length > 2) result += digits.slice(2, 4);
+  if (digits.length >= 4) result += "-";
+  if (digits.length > 4) result += digits.slice(4, 8);
+  return result.slice(0, 10);
+}
+function applyTimeMask(v, prev) {
+  if (v.length < prev.length) return v;
+  const digits = v.replace(/[^\d]/g, "").slice(0, 4);
+  if (digits.length >= 2) {
+    const h = Number(digits.slice(0, 2));
+    if (h < 1 || h > 12) return prev;
+  }
+  if (digits.length >= 4) {
+    const m = Number(digits.slice(2, 4));
+    if (m > 59) return prev;
+  }
+  let result = "";
+  if (digits.length > 0) result += digits.slice(0, 2);
+  if (digits.length >= 2) result += ":";
+  if (digits.length > 2) result += digits.slice(2, 4);
+  if (v.toUpperCase().includes("A")) result += " AM";
+  else if (v.toUpperCase().includes("P")) result += " PM";
+  else if (digits.length === 4) result += " ";
+  return result.slice(0, 8);
+}
+function formatForDisplay(date) {
+  if (!date) return "";
+  return dayjs(date).format("DD-MM-YYYY");
+}
+function validateDateString(raw) {
+  const regex = /^(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
+  if (!regex.test(raw)) return false;
+  const [d, m, y] = raw.split("-").map(Number);
+  const date = new Date(y, m - 1, d);
+  return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d;
+}
+function validateTimeString(raw) {
+  const regex = /^(0[1-9]|1[0-2]):(0[0-9]|[1-5][0-9])\s(AM|PM)$/i;
+  return regex.test(raw);
+}
+function parseDateInput(raw) {
+  if (!validateDateString(raw)) return null;
+  return dayjs(raw, "DD-MM-YYYY", true).toDate();
+}
+function parseTimeInput(raw) {
+  if (!validateTimeString(raw)) return null;
+  const match = raw.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+  if (!match) return null;
+  return {
+    hour: match[1].padStart(2, "0"),
+    minute: match[2].padStart(2, "0"),
+    period: match[3].toUpperCase()
+  };
+}
+function formatTime(t) {
+  return `${t.hour}:${t.minute} ${t.period}`;
+}
+var DateTimeInputGroup = memo(function DateTimeInputGroup2({
+  label,
+  dateValue,
+  timeValue,
+  dateError,
+  timeError,
+  onDateChange,
+  onTimeChange
+}) {
+  const [isDateFocused, setIsDateFocused] = useState(false);
+  const [isTimeFocused, setIsTimeFocused] = useState(false);
+  const showDateError = dateError && !isDateFocused;
+  const showTimeError = timeError && !isTimeFocused;
+  return /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.headerGroup, children: [
+    /* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: label }),
+    /* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.dateTimeColumn, children: /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.dateTimeGroup, children: [
+      /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.inputWrapper, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "dd-mm-yyyy",
+            value: dateValue,
+            onFocus: () => setIsDateFocused(true),
+            onBlur: () => setIsDateFocused(false),
+            onChange: (e) => onDateChange(e.target.value),
+            className: clsx(AdvancedDateRangePicker_module_default.dateInput, { [AdvancedDateRangePicker_module_default.inputError]: showDateError })
+          }
+        ),
+        showDateError && /* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid date" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.inputWrapper, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "12:00 PM",
+            value: timeValue,
+            onFocus: () => setIsTimeFocused(true),
+            onBlur: () => setIsTimeFocused(false),
+            onChange: (e) => onTimeChange(e.target.value),
+            className: clsx(AdvancedDateRangePicker_module_default.timeInput, { [AdvancedDateRangePicker_module_default.inputError]: showTimeError })
+          }
+        ),
+        showTimeError && /* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid time" })
+      ] })
+    ] }) })
+  ] });
+});
+function AdvancedDateRangePicker({
+  value,
+  onChange,
+  confirmLabel = "Done",
+  className = "",
+  disabled = false,
+  disablePastDates = false,
+  minDate = null,
+  maxDate = null,
+  showSingleCalendar = false,
+  id = "adv-drp",
+  defaultTimezone = "UTC",
+  isTimezoneDisabled = false,
+  timezoneOptions = [],
+  defaultPreset = "custom"
+}) {
+  var _a, _b, _c;
+  const PRESETS = useMemo(() => getPresets(), []);
+  const [startDate, setStartDate] = useState((_a = value == null ? void 0 : value.startDate) != null ? _a : null);
+  const [endDate, setEndDate] = useState((_b = value == null ? void 0 : value.endDate) != null ? _b : null);
+  const [timezone, setTimezone] = useState((_c = value == null ? void 0 : value.timezone) != null ? _c : defaultTimezone);
+  const [fromDateStr, setFromDateStr] = useState(formatForDisplay(startDate));
+  const [toDateStr, setToDateStr] = useState(formatForDisplay(endDate));
+  const [fromTimeStr, setFromTimeStr] = useState(
+    (value == null ? void 0 : value.startTime) ? formatTime(value.startTime) : "12:00 PM"
+  );
+  const [toTimeStr, setToTimeStr] = useState(
+    (value == null ? void 0 : value.endTime) ? formatTime(value.endTime) : "12:00 PM"
+  );
+  const [activePreset, setActivePreset] = useState(defaultPreset);
+  const fromDateError = useMemo(() => fromDateStr.length > 0 && (fromDateStr.length < 10 || !validateDateString(fromDateStr)), [fromDateStr]);
+  const toDateError = useMemo(() => toDateStr.length > 0 && (toDateStr.length < 10 || !validateDateString(toDateStr)), [toDateStr]);
+  const fromTimeError = useMemo(() => fromTimeStr.length > 0 && (fromTimeStr.length < 8 || !validateTimeString(fromTimeStr)), [fromTimeStr]);
+  const toTimeError = useMemo(() => toTimeStr.length > 0 && (toTimeStr.length < 8 || !validateTimeString(toTimeStr)), [toTimeStr]);
+  const isReady = useMemo(() => {
+    return startDate !== null && endDate !== null && validateDateString(fromDateStr) && validateDateString(toDateStr) && validateTimeString(fromTimeStr) && validateTimeString(toTimeStr) && dayjs(startDate).isSameOrBefore(dayjs(endDate), "day");
+  }, [startDate, endDate, fromDateStr, toDateStr, fromTimeStr, toTimeStr]);
+  useEffect(() => {
+    var _a2, _b2, _c2;
+    if (value) {
+      setStartDate((_a2 = value.startDate) != null ? _a2 : null);
+      setEndDate((_b2 = value.endDate) != null ? _b2 : null);
+      setTimezone((_c2 = value.timezone) != null ? _c2 : defaultTimezone);
+      if (value.startTime) setFromTimeStr(formatTime(value.startTime));
+      if (value.endTime) setToTimeStr(formatTime(value.endTime));
+    }
+  }, [value, defaultTimezone]);
+  useEffect(() => {
+    setFromDateStr(formatForDisplay(startDate));
+  }, [startDate]);
+  useEffect(() => {
+    setToDateStr(formatForDisplay(endDate));
+  }, [endDate]);
+  const rangeValue = useMemo(() => [
+    startDate ? startDate.toISOString() : "",
+    endDate ? endDate.toISOString() : ""
+  ], [startDate, endDate]);
+  const handleRangeChange = useCallback(
+    (range) => {
+      const [s, e] = range;
+      if (s) {
+        const sDateByDayjs = dayjs(s, "D MMM, YYYY").toDate();
+        setStartDate(sDateByDayjs);
+      } else {
+        setStartDate(null);
+      }
+      if (e) {
+        const eDateByDayjs = dayjs(e, "D MMM, YYYY").toDate();
+        setEndDate(eDateByDayjs);
+      } else {
+        setEndDate(null);
+      }
+      setActivePreset("custom");
+    },
+    []
+  );
+  const handlePreset = useCallback(
+    (preset) => {
+      const [s, e] = preset.getRange();
+      setStartDate(s);
+      setEndDate(e);
+      setActivePreset(preset.key);
+    },
+    []
+  );
+  const handleFromDateChange = useCallback((v) => {
+    const masked = applyDateMask(v, fromDateStr);
+    setFromDateStr(masked);
+    setActivePreset("custom");
+    if (masked.length === 10) {
+      const parsed = parseDateInput(masked);
+      if (parsed) {
+        setStartDate(parsed);
+        if (endDate && dayjs(parsed).isAfter(dayjs(endDate), "day")) {
+          setEndDate(null);
+        }
+      }
+    }
+  }, [fromDateStr, endDate]);
+  const handleToDateChange = useCallback((v) => {
+    const masked = applyDateMask(v, toDateStr);
+    setToDateStr(masked);
+    setActivePreset("custom");
+    if (masked.length === 10) {
+      const parsed = parseDateInput(masked);
+      if (parsed) {
+        setEndDate(parsed);
+        if (startDate && dayjs(parsed).isBefore(dayjs(startDate), "day")) {
+          setStartDate(null);
+        }
+      }
+    }
+  }, [toDateStr, startDate]);
+  const handleFromTimeChange = useCallback((v) => {
+    const masked = applyTimeMask(v, fromTimeStr);
+    setFromTimeStr(masked);
+    setActivePreset("custom");
+  }, [fromTimeStr]);
+  const handleToTimeChange = useCallback((v) => {
+    const masked = applyTimeMask(v, toTimeStr);
+    setToTimeStr(masked);
+    setActivePreset("custom");
+  }, [toTimeStr]);
+  const handleDone = useCallback(() => {
+    var _a2, _b2;
+    if (!isReady) return;
+    const fromTime = (_a2 = parseTimeInput(fromTimeStr)) != null ? _a2 : DEFAULT_TIME;
+    const toTime = (_b2 = parseTimeInput(toTimeStr)) != null ? _b2 : DEFAULT_TIME;
+    onChange == null ? void 0 : onChange({
+      startDate,
+      endDate,
+      startTime: fromTime,
+      endTime: toTime,
+      timezone
+    });
+  }, [isReady, onChange, startDate, endDate, fromTimeStr, toTimeStr, timezone]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx(AdvancedDateRangePicker_module_default.root, className), id, children: [
+    /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.inner, children: [
+      /* @__PURE__ */ jsx("aside", { className: AdvancedDateRangePicker_module_default.left, children: PRESETS.map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handlePreset(p),
+          className: clsx(AdvancedDateRangePicker_module_default.sidebarItem, {
+            [AdvancedDateRangePicker_module_default.sidebarItemActive]: activePreset === p.key
+          }),
+          children: p.label
+        },
+        p.key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.main, children: [
+        /* @__PURE__ */ jsxs("header", { className: AdvancedDateRangePicker_module_default.header, children: [
+          /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.timezoneWrapper, children: [
+            /* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: "Timezone" }),
+            isTimezoneDisabled ? (
+              /* Disabled state: plain text badge instead of empty dropdown */
+              /* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.timezoneDisabledBadge, children: timezone })
+            ) : /* @__PURE__ */ jsx(
+              Select_default,
+              {
+                value: timezone,
+                onChange: (val) => {
+                  if (val) setTimezone(String(val));
+                },
+                options: timezoneOptions,
+                size: "small",
+                allowClear: false,
+                enableSearch: false,
+                wrapperClassName: AdvancedDateRangePicker_module_default.timezoneSelectContainer
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.dateTimeWrapper, children: [
+            /* @__PURE__ */ jsx(
+              DateTimeInputGroup,
+              {
+                label: "From",
+                dateValue: fromDateStr,
+                timeValue: fromTimeStr,
+                dateError: fromDateError,
+                timeError: fromTimeError,
+                onDateChange: handleFromDateChange,
+                onTimeChange: handleFromTimeChange
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DateTimeInputGroup,
+              {
+                label: "To",
+                dateValue: toDateStr,
+                timeValue: toTimeStr,
+                dateError: toDateError,
+                timeError: toTimeError,
+                onDateChange: handleToDateChange,
+                onTimeChange: handleToTimeChange
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.body, children: /* @__PURE__ */ jsx(
+          InternalCalendar_default,
+          {
+            id: `${id}-calendar`,
+            dateRange: rangeValue,
+            onChange: handleRangeChange,
+            disablePastDates,
+            minDate,
+            maxDate,
+            showSingleCalendar
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("footer", { className: AdvancedDateRangePicker_module_default.footer, children: /* @__PURE__ */ jsx(
+      Button_default,
+      {
+        onClick: handleDone,
+        disabled: disabled || !isReady,
+        shape: "round",
+        children: confirmLabel
+      }
+    ) })
+  ] });
+}
+AdvancedDateRangePicker.displayName = "AdvancedDateRangePicker";
+var AdvancedDateRangePicker_default = AdvancedDateRangePicker;
+
+export {
+  AdvancedDateRangePicker,
+  AdvancedDateRangePicker_default
+};