@itilite/lumina-ui 1.0.2-alpha → 1.0.3-alpha

package/dist/chunk-7WSVCE2C.mjs

@@ -0,0 +1,269 @@
+import {
+  Chevron
+} from "./chunk-ZTRM4HZJ.mjs";
+
+// src/atom/AdvancedDateRangePicker/InternalCalendar.tsx
+import { memo, useEffect, useRef, useState } from "react";
+import dayjs from "dayjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InternalCalendar = ({
+  id = "",
+  onChange = () => {
+  },
+  dateRange = ["", ""],
+  showSingleCalendar: showSingleCalendarProp = false,
+  disablePastDates = false,
+  minDate = null,
+  maxDate = null,
+  minYear = 1900,
+  maxYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
+  allowSameDates = false
+}) => {
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  const getInitialDate = () => {
+    const today2 = /* @__PURE__ */ new Date();
+    today2.setHours(0, 0, 0, 0);
+    if (dateRange[0]) return new Date(dateRange[0]);
+    if (today2.getFullYear() >= minYear && today2.getFullYear() <= maxYear) {
+      return today2;
+    }
+    if (minDate) {
+      const minDateTime = new Date(minDate);
+      minDateTime.setHours(0, 0, 0, 0);
+      return minDateTime;
+    }
+    return today2;
+  };
+  const [currentDate, setCurrentDate] = useState(() => getInitialDate());
+  const [startDate, setStartDate] = useState(
+    dateRange[0] ? new Date(dateRange[0]) : null
+  );
+  const [endDate, setEndDate] = useState(
+    dateRange[0] && dateRange[1] ? new Date(dateRange[1]) : null
+  );
+  const [hoverDate, setHoverDate] = useState(null);
+  const [isSelectingEnd, setIsSelectingEnd] = useState(
+    dateRange[0] && !dateRange[1] ? true : false
+  );
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const showSingle = showSingleCalendarProp || isMobile;
+  const prevRangeRef = useRef(dateRange);
+  useEffect(() => {
+    const isSameRange = dateRange[0] === prevRangeRef.current[0] && dateRange[1] === prevRangeRef.current[1];
+    if (isSameRange) return;
+    prevRangeRef.current = dateRange;
+    const nextStart = dateRange[0] ? new Date(dateRange[0]) : null;
+    const nextEnd = dateRange[1] ? new Date(dateRange[1]) : null;
+    setStartDate(nextStart);
+    setEndDate(nextEnd);
+    if (nextStart) {
+      const startMonth = nextStart.getFullYear() * 12 + nextStart.getMonth();
+      const currentMonthVal = currentDate.getFullYear() * 12 + currentDate.getMonth();
+      const isVisibleInFirst = startMonth === currentMonthVal;
+      const isVisibleInSecond = !showSingle && startMonth === currentMonthVal + 1;
+      if (!isVisibleInFirst && !isVisibleInSecond) {
+        setCurrentDate(new Date(nextStart.getFullYear(), nextStart.getMonth(), 1));
+      }
+    }
+  }, [dateRange, showSingle]);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const firstMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+  const secondMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const generateCalendarDays = (monthDate) => {
+    const year = monthDate.getFullYear();
+    const month = monthDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startingDayOfWeek = firstDay.getDay();
+    const days = [];
+    for (let i = 0; i < startingDayOfWeek; i++) days.push(null);
+    for (let day = 1; day <= daysInMonth; day++) days.push(new Date(year, month, day));
+    return days;
+  };
+  const isSameDate = (d1, d2) => {
+    if (!d1 || !d2) return false;
+    return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+  };
+  const isDateDisabled = (date) => {
+    if (!date) return false;
+    const checkDate = new Date(date);
+    checkDate.setHours(0, 0, 0, 0);
+    if (disablePastDates && checkDate < today) return true;
+    if (minDate) {
+      const m = new Date(minDate);
+      m.setHours(0, 0, 0, 0);
+      if (checkDate < m) return true;
+    }
+    if (maxDate) {
+      const m = new Date(maxDate);
+      m.setHours(0, 0, 0, 0);
+      if (checkDate > m) return true;
+    }
+    return false;
+  };
+  const isDateBetweenRange = (date) => {
+    if (!startDate || !date) return false;
+    const comp = endDate || hoverDate;
+    if (!comp) return false;
+    const s = startDate < comp ? startDate : comp;
+    const e = startDate < comp ? comp : startDate;
+    return date > s && date < e;
+  };
+  const isDateInRange = (date) => {
+    if (!startDate || !date) return false;
+    const comp = endDate || hoverDate;
+    if (!comp) return false;
+    const s = startDate < comp ? startDate : comp;
+    const e = startDate < comp ? comp : startDate;
+    return date >= s && date <= e;
+  };
+  const handleDateClick = (date) => {
+    if (isDateDisabled(date)) return;
+    let nextStart = startDate;
+    let nextEnd = endDate;
+    const isSame = startDate && dayjs(date).isSame(startDate, "day");
+    if (!allowSameDates && isSame) {
+      setStartDate(null);
+      setEndDate(null);
+      setIsSelectingEnd(false);
+      onChangeRef.current(["", ""]);
+      return;
+    }
+    if (!startDate || startDate && endDate) {
+      nextStart = date;
+      nextEnd = null;
+      setStartDate(nextStart);
+      setEndDate(nextEnd);
+      setIsSelectingEnd(true);
+    } else {
+      if (date < startDate) {
+        nextEnd = startDate;
+        nextStart = date;
+      } else {
+        nextEnd = date;
+      }
+      setStartDate(nextStart);
+      setEndDate(nextEnd);
+      setIsSelectingEnd(false);
+    }
+    onChangeRef.current([
+      nextStart ? dayjs(nextStart).format("D MMM, YYYY") : "",
+      nextEnd ? dayjs(nextEnd).format("D MMM, YYYY") : ""
+    ]);
+  };
+  const handleDateHover = (date) => {
+    if (isDateDisabled(date)) return;
+    if (isSelectingEnd && startDate && !endDate) setHoverDate(date);
+  };
+  const navigateMonth = (direction) => {
+    const newDate = new Date(currentDate);
+    newDate.setMonth(currentDate.getMonth() + direction);
+    setCurrentDate(newDate);
+  };
+  const renderCalendar = (monthDate) => {
+    const days = generateCalendarDays(monthDate);
+    const monthName = monthNames[monthDate.getMonth()];
+    const year = monthDate.getFullYear();
+    return /* @__PURE__ */ jsxs("div", { className: "tw-flex-1 tw-mb-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "tw-text-center tw-mb-4", children: /* @__PURE__ */ jsxs("h3", { className: "tw-typography-footNoteBold tw-text-gray-900 tw-m-0", children: [
+        monthName,
+        " ",
+        year
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "tw-py-2 tw-text-center tw-typography-caption2 tw-text-gray-500", children: day }, day)) }),
+      /* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
+        if (!date) return /* @__PURE__ */ jsx("div", { className: "tw-h-7" }, index);
+        const isStart = isSameDate(date, startDate);
+        const isEnd = isSameDate(date, endDate);
+        const isInRange = isDateBetweenRange(date);
+        const isSelected = isDateInRange(date);
+        const isDisabled = isDateDisabled(date);
+        const isHovering = isSelectingEnd && hoverDate && isSameDate(date, hoverDate);
+        let cellClasses = "tw-relative tw-z-20 tw-h-7 tw-w-7 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold tw-cursor-pointer tw-transition-all ";
+        if (isDisabled) {
+          cellClasses += "tw-text-gray-300 tw-cursor-not-allowed ";
+        } else if (isStart || isEnd) {
+          cellClasses += "tw-bg-black tw-text-white tw-rounded-full ";
+        } else if (isInRange) {
+          cellClasses += "tw-text-gray-900 ";
+        } else {
+          cellClasses += "tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-full ";
+        }
+        if (isHovering && !isEnd) {
+          cellClasses += "tw-border-2 tw-border-gray-400 tw-border-dashed ";
+        }
+        return /* @__PURE__ */ jsxs("div", { className: "tw-relative tw-flex tw-justify-center", children: [
+          isInRange && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#f2efec] tw-z-10" }),
+          isStart && endDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-1 tw-right-0 tw-left-1/2 tw-bg-[#f2efec] tw-z-10" }),
+          isEnd && startDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-1 tw-left-0 tw-right-1/2 tw-bg-[#f2efec] tw-z-10" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cellClasses,
+              onClick: () => handleDateClick(date),
+              onMouseEnter: () => handleDateHover(date),
+              children: date.getDate()
+            }
+          )
+        ] }, date.toISOString());
+      }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "tw-relative tw-bg-white tw-w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between tw-absolute tw-inset-x-0 tw-top-0 tw-z-30 tw-px-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tw-cursor-pointer tw-p-2 tw-rounded-full hover:tw-bg-gray-100",
+          onClick: () => navigateMonth(-1),
+          children: /* @__PURE__ */ jsx(Chevron, { size: "medium" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tw-cursor-pointer tw-p-2 tw-rounded-full hover:tw-bg-gray-100",
+          onClick: () => navigateMonth(1),
+          children: /* @__PURE__ */ jsx(Chevron, { size: "medium", className: "tw-rotate-180" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-gap-8 tw-pt-2", children: [
+      renderCalendar(firstMonth),
+      !showSingle && renderCalendar(secondMonth)
+    ] })
+  ] });
+};
+var InternalCalendar_default = memo(InternalCalendar);
+
+export {
+  InternalCalendar_default
+};

package/dist/chunk-BFFLWW7N.mjs

@@ -0,0 +1,250 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/atom/Table/Table.tsx
+import * as React from "react";
+import { Table as AntTable } from "antd";
+import clsx from "clsx";
+
+// src/atom/Table/Table.module.scss
+var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "table": "Table-module__table___5d7g0", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
+
+// src/atom/Table/Table.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildPagination(pagination, overrides = {}) {
+  var _a, _b, _c, _d;
+  if (pagination === false) {
+    return false;
+  }
+  const defaults = {
+    showSizeChanger: true,
+    pageSizeOptions: ["10", "25", "50"],
+    locale: { items_per_page: "" },
+    // Removes "/ page" text
+    showTotal: (total, range) => `${range[0]}\u2013${range[1]} of ${total} items`
+  };
+  const baseConfig = pagination === true || pagination === void 0 ? defaults : __spreadValues(__spreadValues({}, defaults), pagination);
+  return __spreadProps(__spreadValues({}, baseConfig), {
+    total: (_a = overrides.total) != null ? _a : baseConfig.total,
+    current: (_b = overrides.current) != null ? _b : baseConfig.current,
+    pageSize: (_c = overrides.pageSize) != null ? _c : baseConfig.pageSize,
+    onChange: (_d = overrides.onChange) != null ? _d : baseConfig.onChange
+  });
+}
+function nextSortOrder(current) {
+  if (current === void 0) return "ascend";
+  if (current === "ascend") return "descend";
+  return void 0;
+}
+function ColumnHeader({
+  label,
+  sortable = false,
+  sortOrder,
+  onSortChange,
+  sortIcon,
+  filterCount = 0,
+  filterIcon,
+  filterContent,
+  className = ""
+}) {
+  const [filterOpen, setFilterOpen] = React.useState(false);
+  const wrapperRef = React.useRef(null);
+  const filterActive = filterCount > 0;
+  const hasFilter = filterContent !== void 0 && filterIcon !== void 0;
+  const hasSort = sortable && sortIcon !== void 0;
+  React.useEffect(() => {
+    if (!filterOpen) return;
+    const onOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setFilterOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, [filterOpen]);
+  return /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeader, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderLeft, children: hasSort ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: Table_module_default.columnHeaderSortArea,
+        onClick: () => onSortChange == null ? void 0 : onSortChange(nextSortOrder(sortOrder)),
+        "aria-label": typeof label === "string" ? `Sort by ${label}` : "Sort",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(Table_module_default.columnHeaderSortIcon, {
+                [Table_module_default.columnHeaderSortIconActive]: sortOrder !== void 0
+              }),
+              children: sortIcon
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }) }),
+    hasFilter && /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeaderFilterWrapper, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: clsx(Table_module_default.columnHeaderFilterBtn, {
+            [Table_module_default.columnHeaderFilterBtnActive]: filterActive
+          }),
+          onClick: () => setFilterOpen((v) => !v),
+          "aria-label": typeof label === "string" ? `Filter ${label}` : "Filter",
+          "aria-expanded": filterOpen,
+          "aria-haspopup": "dialog",
+          children: [
+            filterIcon,
+            filterActive && /* @__PURE__ */ jsx("span", { className: Table_module_default.columnHeaderFilterBadge, children: filterCount })
+          ]
+        }
+      ),
+      filterOpen && /* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderFilterDropdown, role: "dialog", children: filterContent })
+    ] })
+  ] });
+}
+function processColumns(columns) {
+  if (!columns) return void 0;
+  return columns.map((col) => {
+    const _a = col, { headerProps, title } = _a, rest = __objRest(_a, ["headerProps", "title"]);
+    if (!headerProps) return __spreadValues({ title }, rest);
+    return __spreadProps(__spreadValues({}, rest), {
+      title: /* @__PURE__ */ jsx(ColumnHeader, __spreadValues({ label: title }, headerProps))
+    });
+  });
+}
+function Table(props) {
+  var _b;
+  const _a = props, {
+    size = "middle",
+    variant = "default",
+    isAccordion = false,
+    isToolbar = false,
+    className = "",
+    pagination,
+    loading,
+    total,
+    current,
+    pageSize,
+    onPaginationChange,
+    columns,
+    rowSelection,
+    rowKey = "key",
+    onRow,
+    dataSource,
+    emptyState,
+    hideHeader,
+    loadingIndicator,
+    style
+  } = _a, rest = __objRest(_a, [
+    "size",
+    "variant",
+    "isAccordion",
+    "isToolbar",
+    "className",
+    "pagination",
+    "loading",
+    "total",
+    "current",
+    "pageSize",
+    "onPaginationChange",
+    "columns",
+    "rowSelection",
+    "rowKey",
+    "onRow",
+    "dataSource",
+    "emptyState",
+    "hideHeader",
+    "loadingIndicator",
+    "style"
+  ]);
+  const isChildVariant = isAccordion || isToolbar;
+  const resolvedPagination = buildPagination(pagination, {
+    total,
+    current,
+    pageSize,
+    onChange: onPaginationChange
+  });
+  const processedColumns = React.useMemo(
+    () => processColumns(columns),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columns]
+  );
+  const resolvedOnRow = React.useMemo(() => {
+    const onChange = rowSelection == null ? void 0 : rowSelection.onChange;
+    if (variant !== "selectable" || !onChange) return onRow;
+    return (record, index) => {
+      var _a2;
+      const base = (_a2 = onRow == null ? void 0 : onRow(record, index)) != null ? _a2 : {};
+      const getKey = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : r[rowKey];
+      return __spreadProps(__spreadValues({}, base), {
+        style: __spreadValues({ cursor: "pointer" }, base.style),
+        onClick: (e) => {
+          var _a3, _b2;
+          (_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
+          const key = getKey(record, index);
+          const current2 = (_b2 = rowSelection.selectedRowKeys) != null ? _b2 : [];
+          const isSelected = current2.some((k) => k === key);
+          const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
+          const newRows = (dataSource != null ? dataSource : []).filter(
+            (r) => newKeys.some((k) => k === getKey(r))
+          );
+          onChange(newKeys, newRows, { type: "single" });
+        }
+      });
+    };
+  }, [variant, rowSelection, rowKey, onRow, dataSource]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        Table_module_default.tableWrapper,
+        Table_module_default.showHoverEffect,
+        { [Table_module_default.isAccordion]: isAccordion },
+        { [Table_module_default.isToolbar]: isToolbar },
+        className
+      ),
+      style,
+      "data-testid": "lumina-table",
+      children: /* @__PURE__ */ jsx(
+        AntTable,
+        __spreadProps(__spreadValues({
+          className: Table_module_default.table,
+          size,
+          pagination: resolvedPagination,
+          columns: processedColumns,
+          rowSelection,
+          rowKey,
+          onRow: resolvedOnRow,
+          dataSource,
+          showHeader: !hideHeader,
+          locale: {
+            emptyText: loading && loadingIndicator ? loadingIndicator : loading ? " " : emptyState
+          }
+        }, rest), {
+          loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
+          rowClassName: (_, index) => {
+            var _a2;
+            return clsx({
+              [Table_module_default.firstRow]: index === 0,
+              [Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
+            });
+          }
+        })
+      )
+    }
+  );
+}
+Table.displayName = "Table";
+var Table_default = Table;
+
+export {
+  Table,
+  Table_default
+};