@ktnpm_devops/react-component 0.7.1 → 0.9.0

package/dist/index22.js

@@ -1,21 +1,140 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "./index48.js";
-import styles from "./index71.js";
-const DashboardLayout = ({
-  sidebar,
-  filterBar,
-  children,
-  sidebarCollapsed = false,
-  className
-}) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-  sidebar && /* @__PURE__ */ jsx("aside", { className: clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed }), children: sidebar }),
-  /* @__PURE__ */ jsxs("main", { className: styles.main, children: [
-    filterBar && /* @__PURE__ */ jsx("div", { className: styles.filterBar, children: filterBar }),
-    /* @__PURE__ */ jsx("div", { className: styles.content, children })
-  ] })
-] });
-DashboardLayout.displayName = "DashboardLayout";
+import { useState, useMemo } from "react";
+import { clsx } from "./index51.js";
+import { COUNTERS_PAGE_SIZE } from "./index56.js";
+import styles from "./index88.js";
+import { CounterTimeseriesChart } from "./index21.js";
+const COLUMN_HEADERS = [
+  { key: "counter", label: "Counter" },
+  { key: "nodeType", label: "Node Type" },
+  { key: "bureauName", label: "Bureau" },
+  { key: "objectType", label: "Object Type" },
+  { key: "objectValue", label: "Object Value" },
+  { key: "anomalyName", label: "Anomaly" },
+  { key: "distinctTimestamps", label: "Timestamps" }
+];
+const isRowMatch = (a, b) => a.counter === b.counter && a.nodeType === b.nodeType && a.bureauName === b.bureauName && a.objectType === b.objectType && a.objectValue === b.objectValue && a.anomalyName === b.anomalyName;
+const CountersAnalysisCard = ({
+  title,
+  isLoading,
+  error,
+  onRetry,
+  onChartReady,
+  actions,
+  className,
+  rows,
+  selectedRow,
+  onSelectRow,
+  timeseriesData,
+  timeseriesLoading,
+  timePeriod = "7d",
+  onTimePeriodChange,
+  pageSize = COUNTERS_PAGE_SIZE
+}) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+  const paginatedRows = useMemo(
+    () => rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize),
+    [rows, currentPage, pageSize]
+  );
+  const handlePrevious = () => {
+    setCurrentPage((prev) => Math.max(0, prev - 1));
+  };
+  const handleNext = () => {
+    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+      /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading..." })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+      /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
+        /* @__PURE__ */ jsx("span", { children: error }),
+        onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
+      ] })
+    ] });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+      /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }),
+        actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No counters available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }),
+      actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.splitContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.tablePanel, children: [
+        /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: COLUMN_HEADERS.map(({ key, label }) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, key)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: paginatedRows.map((row, index) => {
+            const isSelected = selectedRow != null && isRowMatch(row, selectedRow);
+            return /* @__PURE__ */ jsx(
+              "tr",
+              {
+                className: clsx(styles.tableRow, {
+                  [styles.tableRowSelected]: isSelected
+                }),
+                "aria-selected": isSelected,
+                onClick: () => onSelectRow == null ? void 0 : onSelectRow(row),
+                children: COLUMN_HEADERS.map(({ key }) => /* @__PURE__ */ jsx("td", { children: String(row[key] ?? "") }, key))
+              },
+              `${row.counter}-${row.nodeType}-${row.objectValue}-${index}`
+            );
+          }) })
+        ] }),
+        totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: styles.pagination, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.paginationButton,
+              disabled: currentPage === 0,
+              onClick: handlePrevious,
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: styles.paginationInfo, children: [
+            "Page ",
+            currentPage + 1,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.paginationButton,
+              disabled: currentPage >= totalPages - 1,
+              onClick: handleNext,
+              children: "Next"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.chartPanel, children: selectedRow ? /* @__PURE__ */ jsx(
+        CounterTimeseriesChart,
+        {
+          data: timeseriesData ?? [],
+          isLoading: timeseriesLoading,
+          timeRange: timePeriod,
+          onTimeRangeChange: onTimePeriodChange,
+          onChartReady
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: styles.placeholder, children: "Select a counter to view timeseries" }) })
+    ] })
+  ] });
+};
 export {
-  DashboardLayout
+  CountersAnalysisCard
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/layouts/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { DashboardLayoutProps } from './DashboardLayout.types';\nimport styles from './DashboardLayout.module.css';\n\nexport const DashboardLayout = ({\n  sidebar,\n  filterBar,\n  children,\n  sidebarCollapsed = false,\n  className,\n}: DashboardLayoutProps) => (\n  <div className={clsx(styles.root, className)}>\n    {sidebar && (\n      <aside className={clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed })}>\n        {sidebar}\n      </aside>\n    )}\n    <main className={styles.main}>\n      {filterBar && <div className={styles.filterBar}>{filterBar}</div>}\n      <div className={styles.content}>{children}</div>\n    </main>\n  </div>\n);\n\nDashboardLayout.displayName = 'DashboardLayout';\n"],"names":[],"mappings":";;;AAIO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AACF,2BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACxC,UAAA;AAAA,EAAA,WACC,oBAAC,SAAA,EAAM,WAAW,KAAK,OAAO,SAAS,EAAE,CAAC,OAAO,gBAAgB,GAAG,iBAAA,CAAkB,GACnF,UAAA,SACH;AAAA,EAEF,qBAAC,QAAA,EAAK,WAAW,OAAO,MACrB,UAAA;AAAA,IAAA,aAAa,oBAAC,OAAA,EAAI,WAAW,OAAO,WAAY,UAAA,WAAU;AAAA,IAC3D,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,EAAA,EAAA,CAC5C;AAAA,EAAA,CACF;AAGF,gBAAgB,cAAc;"}
+{"version":3,"file":"index22.js","sources":["../src/charts/CountersAnalysisCard/CountersAnalysisCard.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport type { CountersAnalysisCardProps } from './CountersAnalysisCard.types';\nimport type { DistinctCounterRow } from '../../types/chart.types';\nimport { COUNTERS_PAGE_SIZE } from '../../constants';\nimport { CounterTimeseriesChart } from '../CounterTimeseriesChart';\nimport styles from './CountersAnalysisCard.module.css';\n\nconst COLUMN_HEADERS: { key: keyof DistinctCounterRow; label: string }[] = [\n  { key: 'counter', label: 'Counter' },\n  { key: 'nodeType', label: 'Node Type' },\n  { key: 'bureauName', label: 'Bureau' },\n  { key: 'objectType', label: 'Object Type' },\n  { key: 'objectValue', label: 'Object Value' },\n  { key: 'anomalyName', label: 'Anomaly' },\n  { key: 'distinctTimestamps', label: 'Timestamps' },\n];\n\nconst isRowMatch = (a: DistinctCounterRow, b: DistinctCounterRow): boolean =>\n  a.counter === b.counter &&\n  a.nodeType === b.nodeType &&\n  a.bureauName === b.bureauName &&\n  a.objectType === b.objectType &&\n  a.objectValue === b.objectValue &&\n  a.anomalyName === b.anomalyName;\n\nexport const CountersAnalysisCard = ({\n  title,\n  isLoading,\n  error,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  rows,\n  selectedRow,\n  onSelectRow,\n  timeseriesData,\n  timeseriesLoading,\n  timePeriod = '7d',\n  onTimePeriodChange,\n  pageSize = COUNTERS_PAGE_SIZE,\n}: CountersAnalysisCardProps) => {\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));\n\n  const paginatedRows = useMemo(\n    () => rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize),\n    [rows, currentPage, pageSize],\n  );\n\n  const handlePrevious = () => {\n    setCurrentPage((prev) => Math.max(0, prev - 1));\n  };\n\n  const handleNext = () => {\n    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));\n  };\n\n  if (isLoading) {\n    return (\n      <div className={clsx(styles.root, className)}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n        </header>\n        <div className={styles.loading}>Loading...</div>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className={clsx(styles.root, className)}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n        </header>\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  if (rows.length === 0) {\n    return (\n      <div className={clsx(styles.root, className)}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n          {actions && <div className={styles.headerActions}>{actions}</div>}\n        </header>\n        <div className={styles.empty}>No counters available</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <header className={styles.header}>\n        <h2 className={styles.title}>{title}</h2>\n        {actions && <div className={styles.headerActions}>{actions}</div>}\n      </header>\n\n      <div className={styles.splitContainer}>\n        <div className={styles.tablePanel}>\n          <table className={styles.table}>\n            <thead>\n              <tr>\n                {COLUMN_HEADERS.map(({ key, label }) => (\n                  <th key={key} scope=\"col\">\n                    {label}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {paginatedRows.map((row, index) => {\n                const isSelected = selectedRow != null && isRowMatch(row, selectedRow);\n                return (\n                  <tr\n                    key={`${row.counter}-${row.nodeType}-${row.objectValue}-${index}`}\n                    className={clsx(styles.tableRow, {\n                      [styles.tableRowSelected]: isSelected,\n                    })}\n                    aria-selected={isSelected}\n                    onClick={() => onSelectRow?.(row)}\n                  >\n                    {COLUMN_HEADERS.map(({ key }) => (\n                      <td key={key}>{String(row[key] ?? '')}</td>\n                    ))}\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n\n          {totalPages > 1 && (\n            <div className={styles.pagination}>\n              <button\n                type=\"button\"\n                className={styles.paginationButton}\n                disabled={currentPage === 0}\n                onClick={handlePrevious}\n              >\n                Previous\n              </button>\n              <span className={styles.paginationInfo}>\n                Page {currentPage + 1} of {totalPages}\n              </span>\n              <button\n                type=\"button\"\n                className={styles.paginationButton}\n                disabled={currentPage >= totalPages - 1}\n                onClick={handleNext}\n              >\n                Next\n              </button>\n            </div>\n          )}\n        </div>\n\n        <div className={styles.chartPanel}>\n          {selectedRow ? (\n            <CounterTimeseriesChart\n              data={timeseriesData ?? []}\n              isLoading={timeseriesLoading}\n              timeRange={timePeriod as string as import('../../types/chart.types').TimeRangeOption}\n              onTimeRangeChange={onTimePeriodChange as unknown as ((range: import('../../types/chart.types').TimeRangeOption) => void) | undefined}\n              onChartReady={onChartReady}\n            />\n          ) : (\n            <div className={styles.placeholder}>Select a counter to view timeseries</div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index23.cjs

@@ -2,167 +2,124 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index48.cjs");
+const clsx = require("./index51.cjs");
 const useClickOutside = require("./index4.cjs");
 const useEscapeKey = require("./index5.cjs");
-const DatePickerDropdown_module = require("./index75.cjs");
-const MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-const MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-const WEEKDAYS = ["M", "T", "W", "T", "F", "S", "S"];
-const pad2 = (n) => String(n).padStart(2, "0");
-const toIso = (y, m, d) => `${y}-${pad2(m + 1)}-${pad2(d)}`;
-function defaultFormat(iso) {
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-  if (!match) return iso;
-  return `${+match[3]} ${MONTHS_SHORT[+match[2] - 1]} ${match[1]}`;
-}
-function anchorMonth(value, allowedDates) {
-  const anchor = value ?? [...allowedDates].sort().at(-1);
-  if (anchor) {
-    const [y, m] = anchor.split("-").map(Number);
-    return { year: y, month: m - 1 };
-  }
-  const now = /* @__PURE__ */ new Date();
-  return { year: now.getFullYear(), month: now.getMonth() };
-}
-const DatePickerDropdown = ({
-  value,
-  onChange,
-  allowedDates,
-  formatLabel = defaultFormat,
-  placeholder = "Select date",
-  monthLabels = MONTHS,
-  weekdayLabels = WEEKDAYS,
-  "aria-label": ariaLabel,
-  className
-}) => {
+const format = require("./index7.cjs");
+const CustomRangePicker_module = require("./index75.cjs");
+const formatInputValue = (iso) => {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  const y = date.getFullYear();
+  const m = `${date.getMonth() + 1}`.padStart(2, "0");
+  const d = `${date.getDate()}`.padStart(2, "0");
+  const h = `${date.getHours()}`.padStart(2, "0");
+  const min = `${date.getMinutes()}`.padStart(2, "0");
+  return `${y}-${m}-${d}T${h}:${min}`;
+};
+const toLocalTimestamp = (value) => {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return format.formatLocalISOString(date);
+};
+const CustomRangePicker = ({ from, to, onApply }) => {
   const [isOpen, setIsOpen] = react.useState(false);
-  const [view, setView] = react.useState(() => anchorMonth(value, allowedDates));
+  const [startValue, setStartValue] = react.useState(() => formatInputValue(from));
+  const [endValue, setEndValue] = react.useState(() => formatInputValue(to));
+  const [error, setError] = react.useState(null);
   const containerRef = react.useRef(null);
-  const anchorArgs = react.useRef({ value, allowedDates });
-  anchorArgs.current = { value, allowedDates };
+  const isActive = Boolean(from && to);
   const close = react.useCallback(() => setIsOpen(false), []);
   useClickOutside.useClickOutside(containerRef, close);
   useEscapeKey.useEscapeKey(close, isOpen);
   react.useEffect(() => {
-    if (isOpen) setView(anchorMonth(anchorArgs.current.value, anchorArgs.current.allowedDates));
-  }, [isOpen]);
-  const allowedSet = react.useMemo(() => new Set(allowedDates), [allowedDates]);
-  const { year, month } = view;
-  const startDow = (new Date(year, month, 1).getDay() + 6) % 7;
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const pick = (iso) => {
-    onChange(iso);
+    if (!isOpen) return;
+    setStartValue(formatInputValue(from));
+    setEndValue(formatInputValue(to));
+    setError(null);
+  }, [from, to, isOpen]);
+  const summary = react.useMemo(() => {
+    if (!from || !to) return null;
+    const s = new Date(from);
+    const e = new Date(to);
+    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;
+    const fmt = new Intl.DateTimeFormat(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    return `${fmt.format(s)} – ${fmt.format(e)}`;
+  }, [from, to]);
+  const handleApply = () => {
+    const startIso = toLocalTimestamp(startValue);
+    const endIso = toLocalTimestamp(endValue);
+    if (!startIso || !endIso) {
+      setError("Both start and end date are required.");
+      return;
+    }
+    if (startIso >= endIso) {
+      setError("End of range must be after the start.");
+      return;
+    }
+    onApply({ from: startIso, to: endIso });
     setIsOpen(false);
   };
-  const shiftMonth = (delta) => {
-    const next = new Date(year, month + delta, 1);
-    setView({ year: next.getFullYear(), month: next.getMonth() });
+  const handleCancel = () => {
+    setStartValue(formatInputValue(from));
+    setEndValue(formatInputValue(to));
+    setError(null);
+    setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx.clsx(DatePickerDropdown_module.default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CustomRangePicker_module.default.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        className: clsx.clsx(DatePickerDropdown_module.default.trigger, isOpen && DatePickerDropdown_module.default.isOpen),
-        "aria-haspopup": "dialog",
-        "aria-expanded": isOpen,
-        "aria-label": ariaLabel,
-        onClick: () => setIsOpen((open) => !open),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "svg",
-            {
-              className: DatePickerDropdown_module.default.icon,
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: value ? formatLabel(value) : placeholder }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: DatePickerDropdown_module.default.arrow, children: isOpen ? "▲" : "▼" })
-        ]
+        className: clsx.clsx(CustomRangePicker_module.default.chip, { [CustomRangePicker_module.default.active]: isActive }),
+        onClick: () => setIsOpen((v) => !v),
+        children: "Custom"
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DatePickerDropdown_module.default.pop, role: "dialog", "aria-label": ariaLabel ?? "Calendar", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DatePickerDropdown_module.default.head, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: DatePickerDropdown_module.default.nav,
-            "aria-label": "Previous month",
-            onClick: () => shiftMonth(-1),
-            children: "‹"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: DatePickerDropdown_module.default.title, children: [
-          monthLabels[month],
-          " ",
-          year
+    summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: CustomRangePicker_module.default.summary, children: summary }),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CustomRangePicker_module.default.popover, role: "dialog", "aria-modal": "false", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("header", { className: CustomRangePicker_module.default.popoverHeader, children: /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "Custom Time Range" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CustomRangePicker_module.default.fields, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: CustomRangePicker_module.default.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Start" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "datetime-local",
+              value: startValue,
+              onChange: (e) => setStartValue(e.target.value),
+              max: endValue || void 0
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: DatePickerDropdown_module.default.nav,
-            "aria-label": "Next month",
-            onClick: () => shiftMonth(1),
-            children: "›"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: DatePickerDropdown_module.default.dows, children: weekdayLabels.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: d }, i)) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DatePickerDropdown_module.default.grid, children: [
-        Array.from({ length: startDow }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(DatePickerDropdown_module.default.day, DatePickerDropdown_module.default.empty) }, `e${i}`)),
-        Array.from({ length: daysInMonth }).map((_, i) => {
-          const d = i + 1;
-          const iso = toIso(year, month, d);
-          const able = allowedSet.has(iso);
-          const selected = iso === value;
-          if (!able) {
-            return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(DatePickerDropdown_module.default.day, DatePickerDropdown_module.default.off), "aria-disabled": "true", children: d }, iso);
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: CustomRangePicker_module.default.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "End" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
-              type: "button",
-              className: clsx.clsx(DatePickerDropdown_module.default.day, DatePickerDropdown_module.default.able, selected && DatePickerDropdown_module.default.selected),
-              "aria-label": formatLabel(iso),
-              "aria-current": selected ? "date" : void 0,
-              onClick: () => pick(iso),
-              children: d
-            },
-            iso
-          );
-        })
+              type: "datetime-local",
+              value: endValue,
+              onChange: (e) => setEndValue(e.target.value),
+              min: startValue || void 0
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: CustomRangePicker_module.default.error, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: CustomRangePicker_module.default.actions, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: CustomRangePicker_module.default.btnGhost, onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: CustomRangePicker_module.default.btnPrimary, onClick: handleApply, children: "Apply" })
       ] })
     ] })
   ] });
 };
-DatePickerDropdown.displayName = "DatePickerDropdown";
-exports.DatePickerDropdown = DatePickerDropdown;
+exports.CustomRangePicker = CustomRangePicker;
 //# sourceMappingURL=index23.cjs.map

package/dist/index23.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index23.cjs","sources":["../src/composites/DatePickerDropdown/DatePickerDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport type { DatePickerDropdownProps } from './DatePickerDropdown.types';\nimport styles from './DatePickerDropdown.module.css';\n\nconst MONTHS = [\n  'January', 'February', 'March', 'April', 'May', 'June',\n  'July', 'August', 'September', 'October', 'November', 'December',\n];\nconst MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst WEEKDAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];\n\nconst pad2 = (n: number) => String(n).padStart(2, '0');\nconst toIso = (y: number, m: number, d: number) => `${y}-${pad2(m + 1)}-${pad2(d)}`;\n\nfunction defaultFormat(iso: string): string {\n  const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  if (!match) return iso;\n  return `${+match[3]} ${MONTHS_SHORT[+match[2] - 1]} ${match[1]}`;\n}\n\n/** Month/year to display first: the selected value, else the latest allowed date, else today. */\nfunction anchorMonth(value: string | null, allowedDates: string[]): { year: number; month: number } {\n  const anchor = value ?? [...allowedDates].sort().at(-1);\n  if (anchor) {\n    const [y, m] = anchor.split('-').map(Number);\n    return { year: y, month: m - 1 };\n  }\n  const now = new Date();\n  return { year: now.getFullYear(), month: now.getMonth() };\n}\n\nexport const DatePickerDropdown = ({\n  value,\n  onChange,\n  allowedDates,\n  formatLabel = defaultFormat,\n  placeholder = 'Select date',\n  monthLabels = MONTHS,\n  weekdayLabels = WEEKDAYS,\n  'aria-label': ariaLabel,\n  className,\n}: DatePickerDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [view, setView] = useState(() => anchorMonth(value, allowedDates));\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Read latest props inside the open effect without making it re-run on every\n  // render (callers often pass an inline `allowedDates` array).\n  const anchorArgs = useRef({ value, allowedDates });\n  anchorArgs.current = { value, allowedDates };\n\n  const close = useCallback(() => setIsOpen(false), []);\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  // Reset the visible month to the anchor whenever the popover opens.\n  useEffect(() => {\n    if (isOpen) setView(anchorMonth(anchorArgs.current.value, anchorArgs.current.allowedDates));\n  }, [isOpen]);\n\n  const allowedSet = useMemo(() => new Set(allowedDates), [allowedDates]);\n\n  const { year, month } = view;\n  const startDow = (new Date(year, month, 1).getDay() + 6) % 7;\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n\n  const pick = (iso: string) => {\n    onChange(iso);\n    setIsOpen(false);\n  };\n\n  const shiftMonth = (delta: number) => {\n    const next = new Date(year, month + delta, 1);\n    setView({ year: next.getFullYear(), month: next.getMonth() });\n  };\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, isOpen && styles.isOpen)}\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label={ariaLabel}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        <svg\n          className={styles.icon}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" />\n          <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" />\n          <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" />\n          <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\" />\n        </svg>\n        <span>{value ? formatLabel(value) : placeholder}</span>\n        <span className={styles.arrow}>{isOpen ? '▲' : '▼'}</span>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop} role=\"dialog\" aria-label={ariaLabel ?? 'Calendar'}>\n          <div className={styles.head}>\n            <button\n              type=\"button\"\n              className={styles.nav}\n              aria-label=\"Previous month\"\n              onClick={() => shiftMonth(-1)}\n            >\n              {'‹'}\n            </button>\n            <span className={styles.title}>\n              {monthLabels[month]} {year}\n            </span>\n            <button\n              type=\"button\"\n              className={styles.nav}\n              aria-label=\"Next month\"\n              onClick={() => shiftMonth(1)}\n            >\n              {'›'}\n            </button>\n          </div>\n          <div className={styles.dows}>\n            {weekdayLabels.map((d, i) => (\n              <span key={i}>{d}</span>\n            ))}\n          </div>\n          <div className={styles.grid}>\n            {Array.from({ length: startDow }).map((_, i) => (\n              <span key={`e${i}`} className={clsx(styles.day, styles.empty)} />\n            ))}\n            {Array.from({ length: daysInMonth }).map((_, i) => {\n              const d = i + 1;\n              const iso = toIso(year, month, d);\n              const able = allowedSet.has(iso);\n              const selected = iso === value;\n              if (!able) {\n                return (\n                  <span key={iso} className={clsx(styles.day, styles.off)} aria-disabled=\"true\">\n                    {d}\n                  </span>\n                );\n              }\n              return (\n                <button\n                  key={iso}\n                  type=\"button\"\n                  className={clsx(styles.day, styles.able, selected && styles.selected)}\n                  aria-label={formatLabel(iso)}\n                  aria-current={selected ? 'date' : undefined}\n                  onClick={() => pick(iso)}\n                >\n                  {d}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nDatePickerDropdown.displayName = 'DatePickerDropdown';\n"],"names":["useState","useRef","useCallback","useClickOutside","useEscapeKey","useEffect","useMemo","jsxs","clsx","styles","jsx"],"mappings":"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"}
+{"version":3,"file":"index23.cjs","sources":["../src/composites/CustomRangePicker/CustomRangePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { formatLocalISOString } from '../../utils/format';\nimport styles from './CustomRangePicker.module.css';\n\nexport interface CustomRangePickerProps {\n  /** Start of the current range (ISO string). */\n  from?: string;\n  /** End of the current range (ISO string). */\n  to?: string;\n  /** Called when user applies a valid range. */\n  onApply: (range: { from: string; to: string }) => void;\n}\n\nconst formatInputValue = (iso?: string): string => {\n  if (!iso) return '';\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return '';\n  const y = date.getFullYear();\n  const m = `${date.getMonth() + 1}`.padStart(2, '0');\n  const d = `${date.getDate()}`.padStart(2, '0');\n  const h = `${date.getHours()}`.padStart(2, '0');\n  const min = `${date.getMinutes()}`.padStart(2, '0');\n  return `${y}-${m}-${d}T${h}:${min}`;\n};\n\nconst toLocalTimestamp = (value: string): string | null => {\n  if (!value) return null;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return null;\n  return formatLocalISOString(date);\n};\n\nexport const CustomRangePicker = ({ from, to, onApply }: CustomRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [startValue, setStartValue] = useState(() => formatInputValue(from));\n  const [endValue, setEndValue] = useState(() => formatInputValue(to));\n  const [error, setError] = useState<string | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isActive = Boolean(from && to);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n  }, [from, to, isOpen]);\n\n  const summary = useMemo(() => {\n    if (!from || !to) return null;\n    const s = new Date(from);\n    const e = new Date(to);\n    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;\n    const fmt = new Intl.DateTimeFormat(undefined, {\n      year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',\n    });\n    return `${fmt.format(s)} – ${fmt.format(e)}`;\n  }, [from, to]);\n\n  const handleApply = () => {\n    const startIso = toLocalTimestamp(startValue);\n    const endIso = toLocalTimestamp(endValue);\n    if (!startIso || !endIso) {\n      setError('Both start and end date are required.');\n      return;\n    }\n    if (startIso >= endIso) {\n      setError('End of range must be after the start.');\n      return;\n    }\n    onApply({ from: startIso, to: endIso });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n    setIsOpen(false);\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.chip, { [styles.active]: isActive })}\n        onClick={() => setIsOpen((v) => !v)}\n      >\n        Custom\n      </button>\n      {summary && <span className={styles.summary}>{summary}</span>}\n\n      {isOpen && (\n        <div className={styles.popover} role=\"dialog\" aria-modal=\"false\">\n          <header className={styles.popoverHeader}>\n            <h4>Custom Time Range</h4>\n          </header>\n          <div className={styles.fields}>\n            <label className={styles.field}>\n              <span>Start</span>\n              <input\n                type=\"datetime-local\"\n                value={startValue}\n                onChange={(e) => setStartValue(e.target.value)}\n                max={endValue || undefined}\n              />\n            </label>\n            <label className={styles.field}>\n              <span>End</span>\n              <input\n                type=\"datetime-local\"\n                value={endValue}\n                onChange={(e) => setEndValue(e.target.value)}\n                min={startValue || undefined}\n              />\n            </label>\n          </div>\n          {error && <p className={styles.error}>{error}</p>}\n          <footer className={styles.actions}>\n            <button type=\"button\" className={styles.btnGhost} onClick={handleCancel}>\n              Cancel\n            </button>\n            <button type=\"button\" className={styles.btnPrimary} onClick={handleApply}>\n              Apply\n            </button>\n          </footer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["formatLocalISOString","useState","useRef","useCallback","useClickOutside","useEscapeKey","useEffect","useMemo","styles","jsx","clsx","jsxs"],"mappings":"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"}