@vesture/react 0.1.1 → 0.2.1

package/dist/index.js

@@ -1079,7 +1079,7 @@ function Alert({
 }
 
 // src/components/DataGrid/DataGrid.tsx
-import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef3, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect, useMemo as useMemo2, useRef as useRef3, useState as useState8 } from "react";
 
 // src/components/DataGrid/DataGrid.css.ts
 var actionsCell = "DataGrid_actionsCell__7xivx7g";
@@ -1087,12 +1087,18 @@ var body3 = "DataGrid_body__7xivx77";
 var cell = "DataGrid_cell__7xivx79";
 var checkboxCell = "DataGrid_checkboxCell__7xivx7a";
 var container = "DataGrid_container__7xivx71";
-var editInput = "DataGrid_editInput__7xivx7i";
+var editInput = "DataGrid_editInput__7xivx7o";
 var emptyState = "DataGrid_emptyState__7xivx7b";
+var filterCell = "DataGrid_filterCell__7xivx7j";
+var filterInput = "DataGrid_filterInput__7xivx7k";
+var filterRow = "DataGrid_filterRow__7xivx7i";
+var gridWrapper = "DataGrid_gridWrapper__7xivx7l";
 var headerButton = "DataGrid_headerButton__7xivx74";
 var headerCell = "DataGrid_headerCell__7xivx73";
 var headerRow = "DataGrid_headerRow__7xivx72";
 var iconButton = "DataGrid_iconButton__7xivx7h";
+var loadingOverlay = "DataGrid_loadingOverlay__7xivx7m";
+var paginationFooter = "DataGrid_paginationFooter__7xivx7n";
 var pinnedCell = "DataGrid_pinnedCell__7xivx7c";
 var pinnedHeaderCell = "DataGrid_pinnedHeaderCell__7xivx7d";
 var pinnedLeftEdge = "DataGrid_pinnedLeftEdge__7xivx7e";
@@ -1107,6 +1113,45 @@ import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-r
 var DEFAULT_COLUMN_WIDTH = 160;
 var CHECKBOX_COLUMN_WIDTH = 44;
 var ACTIONS_COLUMN_WIDTH = 72;
+var FILTER_DEBOUNCE_MS = 200;
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = useState8(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+function FilterTextInput({
+  value,
+  onChange,
+  ...rest
+}) {
+  const [draft, setDraft] = useState8(value);
+  const debounced = useDebouncedValue(draft, FILTER_DEBOUNCE_MS);
+  const onChangeRef = useRef3(onChange);
+  onChangeRef.current = onChange;
+  const mounted = useRef3(false);
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    onChangeRef.current(debounced);
+  }, [debounced]);
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx34(
+    "input",
+    {
+      type: "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      ...rest
+    }
+  );
+}
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") {
     return a - b;
@@ -1131,19 +1176,35 @@ function DataGrid({
   onSelectionChange,
   sort: controlledSort,
   onSortChange,
+  filters: controlledFilters,
+  onFilterChange,
   emptyMessage = "No data",
-  onRowEdit
+  onRowEdit,
+  serverSide = false,
+  loading = false,
+  totalRowCount,
+  page,
+  pageSize,
+  onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = useState8(null);
+  const [uncontrolledSort, setUncontrolledSort] = useState8(
+    null
+  );
+  const [uncontrolledFilters, setUncontrolledFilters] = useState8(
+    []
+  );
   const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState8(() => /* @__PURE__ */ new Set());
   const [columnWidths, setColumnWidths] = useState8(
-    () => Object.fromEntries(columns.map((c) => [c.key, c.width ?? DEFAULT_COLUMN_WIDTH]))
+    () => Object.fromEntries(
+      columns.map((c) => [c.key, c.width ?? DEFAULT_COLUMN_WIDTH])
+    )
   );
   const [scrollTop, setScrollTop] = useState8(0);
   const [editingRowId, setEditingRowId] = useState8(null);
   const [editDraft, setEditDraft] = useState8({});
   const editingEnabled = Boolean(onRowEdit);
   const sort = controlledSort !== void 0 ? controlledSort : uncontrolledSort;
+  const filters = controlledFilters !== void 0 ? controlledFilters : uncontrolledFilters;
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const setSort = (next) => {
     if (controlledSort === void 0) {
@@ -1151,6 +1212,17 @@ function DataGrid({
     }
     onSortChange?.(next);
   };
+  const setFilters = (next) => {
+    if (controlledFilters === void 0) {
+      setUncontrolledFilters(next);
+    }
+    onFilterChange?.(next);
+  };
+  const handleFilterChange = (key, value) => {
+    const next = value ? [...filters.filter((f) => f.key !== key), { key, value }] : filters.filter((f) => f.key !== key);
+    setFilters(next);
+  };
+  const getFilterValue = (key) => filters.find((f) => f.key === key)?.value ?? "";
   const setSelectedIds = (next) => {
     if (controlledSelectedIds === void 0) {
       setUncontrolledSelectedIds(next);
@@ -1167,17 +1239,50 @@ function DataGrid({
       setSort(null);
     }
   };
+  const filteredData = useMemo2(() => {
+    if (serverSide || filters.length === 0) {
+      return data;
+    }
+    return data.filter(
+      (row2) => filters.every((f) => {
+        if (!f.value) return true;
+        const column = columns.find((c) => c.key === f.key);
+        if (!column) return true;
+        const cellValue = String(getCellValue(column, row2) ?? "").toLowerCase();
+        return cellValue.includes(f.value.toLowerCase());
+      })
+    );
+  }, [data, filters, columns, serverSide]);
   const sortedData = useMemo2(() => {
-    if (!sort || !sort.direction) {
+    if (serverSide) {
       return data;
     }
+    if (!sort || !sort.direction) {
+      return filteredData;
+    }
     const column = columns.find((c) => c.key === sort.key);
     if (!column) {
-      return data;
+      return filteredData;
     }
-    const sorted = [...data].sort((a, b) => compareValues(getCellValue(column, a), getCellValue(column, b)));
+    const sorted = [...filteredData].sort(
+      (a, b) => compareValues(getCellValue(column, a), getCellValue(column, b))
+    );
     return sort.direction === "desc" ? sorted.reverse() : sorted;
-  }, [data, sort, columns]);
+  }, [filteredData, sort, columns, serverSide, data]);
+  const selectFilterOptions = useMemo2(() => {
+    const map = {};
+    for (const column of columns) {
+      if (!column.filterable || column.filterType !== "select") continue;
+      const values = /* @__PURE__ */ new Set();
+      for (const row2 of data) {
+        values.add(String(getCellValue(column, row2) ?? ""));
+      }
+      map[column.key] = Array.from(values).sort();
+    }
+    return map;
+  }, [columns, data]);
+  const hasFilterableColumns = columns.some((c) => c.filterable);
+  const showPagination = page !== void 0 && pageSize !== void 0 && onPageChange !== void 0;
   const allSelected = sortedData.length > 0 && sortedData.every((r) => selectedIds.has(getRowId(r)));
   const someSelected = !allSelected && sortedData.some((r) => selectedIds.has(getRowId(r)));
   const toggleAll = () => {
@@ -1212,18 +1317,24 @@ function DataGrid({
     },
     [columnWidths]
   );
-  const handleResizeMove = useCallback2((event) => {
-    const state = resizeState.current;
-    if (!state) return;
-    const delta = event.clientX - state.startX;
-    const minWidth = columns.find((c) => c.key === state.key)?.minWidth ?? 60;
-    const nextWidth = Math.max(minWidth, state.startWidth + delta);
-    setColumnWidths((prev) => ({ ...prev, [state.key]: nextWidth }));
-  }, [columns]);
-  const handleResizeEnd = useCallback2((event) => {
-    resizeState.current = null;
-    event.currentTarget.releasePointerCapture(event.pointerId);
-  }, []);
+  const handleResizeMove = useCallback2(
+    (event) => {
+      const state = resizeState.current;
+      if (!state) return;
+      const delta = event.clientX - state.startX;
+      const minWidth = columns.find((c) => c.key === state.key)?.minWidth ?? 60;
+      const nextWidth = Math.max(minWidth, state.startWidth + delta);
+      setColumnWidths((prev) => ({ ...prev, [state.key]: nextWidth }));
+    },
+    [columns]
+  );
+  const handleResizeEnd = useCallback2(
+    (event) => {
+      resizeState.current = null;
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    },
+    []
+  );
   const widthOf = useCallback2(
     (column) => columnWidths[column.key] ?? column.width ?? DEFAULT_COLUMN_WIDTH,
     [columnWidths]
@@ -1309,162 +1420,1201 @@ function DataGrid({
   const endIndex = Math.min(sortedData.length, startIndex + visibleCount);
   const visibleRows = sortedData.slice(startIndex, endIndex);
   const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + (editingEnabled ? ACTIONS_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + widthOf(c), 0);
-  return /* @__PURE__ */ jsxs17(
-    "div",
-    {
-      className: container,
-      style: { height },
-      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-      role: "table",
-      children: [
-        /* @__PURE__ */ jsxs17("div", { className: headerRow, style: { width: totalWidth, minWidth: "100%" }, role: "row", children: [
-          selectable ? /* @__PURE__ */ jsx34("div", { className: [checkboxCell, pinnedHeaderCell].join(" "), style: { left: 0 }, role: "columnheader", children: /* @__PURE__ */ jsx34(
-            "input",
-            {
-              type: "checkbox",
-              checked: allSelected,
-              ref: (el) => {
-                if (el) el.indeterminate = someSelected;
-              },
-              onChange: toggleAll,
-              "aria-label": "Select all rows"
-            }
-          ) }) : null,
-          layout.ordered.map((column) => {
-            const width = widthOf(column);
-            const isSorted = sort?.key === column.key;
-            const direction2 = isSorted ? sort.direction : null;
-            return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: gridWrapper, children: [
+      /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: container,
+          style: { height },
+          onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+          role: "table",
+          children: [
+            /* @__PURE__ */ jsxs17(
               "div",
               {
-                className: [headerCell, headerPinnedClass(column)].filter(Boolean).join(" "),
-                style: { width, ...pinnedStyle(column) },
-                role: "columnheader",
-                "aria-sort": direction2 === "asc" ? "ascending" : direction2 === "desc" ? "descending" : "none",
+                className: headerRow,
+                style: { width: totalWidth, minWidth: "100%" },
+                role: "row",
                 children: [
-                  column.sortable ? /* @__PURE__ */ jsxs17("button", { type: "button", className: headerButton, onClick: () => handleSortClick(column), children: [
-                    column.header,
-                    /* @__PURE__ */ jsx34("span", { className: sortIcon, "aria-hidden": "true", children: direction2 === "asc" ? "\u25B2" : direction2 === "desc" ? "\u25BC" : "" })
-                  ] }) : column.header,
-                  column.resizable !== false ? /* @__PURE__ */ jsx34(
+                  selectable ? /* @__PURE__ */ jsx34(
                     "div",
                     {
-                      className: resizeHandle,
-                      onPointerDown: (e) => handleResizeStart(e, column),
-                      onPointerMove: handleResizeMove,
-                      onPointerUp: handleResizeEnd,
-                      role: "separator",
-                      "aria-orientation": "vertical",
-                      "aria-label": `Resize ${String(column.header)} column`
-                    }
-                  ) : null
-                ]
-              },
-              column.key
-            );
-          }),
-          editingEnabled ? /* @__PURE__ */ jsx34(
-            "div",
-            {
-              className: [actionsCell, pinnedHeaderCell].join(" "),
-              style: { right: 0 },
-              role: "columnheader",
-              children: /* @__PURE__ */ jsx34("span", { className: srOnly2, children: "Actions" })
-            }
-          ) : null
-        ] }),
-        sortedData.length === 0 ? /* @__PURE__ */ jsx34("div", { className: emptyState, children: emptyMessage }) : /* @__PURE__ */ jsx34("div", { className: body3, style: { height: totalHeight, width: totalWidth, minWidth: "100%" }, children: visibleRows.map((rowData, i) => {
-          const index = startIndex + i;
-          const id = getRowId(rowData);
-          const isSelected = selectedIds.has(id);
-          const isEditing = editingRowId === id;
-          const style = { top: index * rowHeight, height: rowHeight, width: totalWidth };
-          return /* @__PURE__ */ jsxs17(
-            "div",
-            {
-              className: row,
-              style,
-              role: "row",
-              "data-selected": isSelected || void 0,
-              "data-editing": isEditing || void 0,
-              children: [
-                selectable ? /* @__PURE__ */ jsx34("div", { className: [checkboxCell, pinnedCell].join(" "), style: { left: 0 }, role: "cell", children: /* @__PURE__ */ jsx34(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: isSelected,
-                    onChange: () => toggleRow(id),
-                    "aria-label": `Select row ${index + 1}`
-                  }
-                ) }) : null,
-                layout.ordered.map((column) => /* @__PURE__ */ jsx34(
-                  "div",
-                  {
-                    className: [cell, pinnedClass(column)].filter(Boolean).join(" "),
-                    style: { width: widthOf(column), ...pinnedStyle(column) },
-                    role: "cell",
-                    children: isEditing && column.editable ? /* @__PURE__ */ jsx34(
-                      "input",
-                      {
-                        type: "text",
-                        className: editInput,
-                        value: editDraft[column.key] ?? "",
-                        onChange: (e) => setEditDraft((prev) => ({ ...prev, [column.key]: e.target.value })),
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter") saveEditing();
-                          if (e.key === "Escape") cancelEditing();
-                        },
-                        "aria-label": `Edit ${String(column.header)}`,
-                        autoFocus: column.key === columns.find((c) => c.editable)?.key
-                      }
-                    ) : column.render ? column.render(rowData) : String(getCellValue(column, rowData) ?? "")
-                  },
-                  column.key
-                )),
-                editingEnabled ? /* @__PURE__ */ jsx34(
-                  "div",
-                  {
-                    className: [actionsCell, pinnedCell].join(" "),
-                    style: { right: 0 },
-                    role: "cell",
-                    children: isEditing ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
-                      /* @__PURE__ */ jsx34(
-                        "button",
-                        {
-                          type: "button",
-                          className: iconButton,
-                          onClick: saveEditing,
-                          "aria-label": `Save row ${index + 1}`,
-                          children: "\u2713"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx34(
-                        "button",
+                      className: [checkboxCell, pinnedHeaderCell].join(" "),
+                      style: { left: 0 },
+                      role: "columnheader",
+                      children: /* @__PURE__ */ jsx34(
+                        "input",
                         {
-                          type: "button",
-                          className: iconButton,
-                          onClick: cancelEditing,
-                          "aria-label": `Cancel editing row ${index + 1}`,
-                          children: "\u2715"
+                          type: "checkbox",
+                          checked: allSelected,
+                          ref: (el) => {
+                            if (el) el.indeterminate = someSelected;
+                          },
+                          onChange: toggleAll,
+                          "aria-label": "Select all rows"
                         }
                       )
-                    ] }) : /* @__PURE__ */ jsx34(
-                      "button",
+                    }
+                  ) : null,
+                  layout.ordered.map((column) => {
+                    const width = widthOf(column);
+                    const isSorted = sort?.key === column.key;
+                    const direction2 = isSorted ? sort.direction : null;
+                    return /* @__PURE__ */ jsxs17(
+                      "div",
                       {
-                        type: "button",
-                        className: iconButton,
-                        onClick: () => startEditing(rowData),
-                        "aria-label": `Edit row ${index + 1}`,
-                        children: "\u270E"
-                      }
-                    )
-                  }
-                ) : null
-              ]
+                        className: [headerCell, headerPinnedClass(column)].filter(Boolean).join(" "),
+                        style: { width, ...pinnedStyle(column) },
+                        role: "columnheader",
+                        "aria-sort": direction2 === "asc" ? "ascending" : direction2 === "desc" ? "descending" : "none",
+                        children: [
+                          column.sortable ? /* @__PURE__ */ jsxs17(
+                            "button",
+                            {
+                              type: "button",
+                              className: headerButton,
+                              onClick: () => handleSortClick(column),
+                              children: [
+                                column.header,
+                                /* @__PURE__ */ jsx34("span", { className: sortIcon, "aria-hidden": "true", children: direction2 === "asc" ? "\u25B2" : direction2 === "desc" ? "\u25BC" : "" })
+                              ]
+                            }
+                          ) : column.header,
+                          column.resizable !== false ? /* @__PURE__ */ jsx34(
+                            "div",
+                            {
+                              className: resizeHandle,
+                              onPointerDown: (e) => handleResizeStart(e, column),
+                              onPointerMove: handleResizeMove,
+                              onPointerUp: handleResizeEnd,
+                              role: "separator",
+                              "aria-orientation": "vertical",
+                              "aria-label": `Resize ${String(column.header)} column`
+                            }
+                          ) : null
+                        ]
+                      },
+                      column.key
+                    );
+                  }),
+                  editingEnabled ? /* @__PURE__ */ jsx34(
+                    "div",
+                    {
+                      className: [actionsCell, pinnedHeaderCell].join(" "),
+                      style: { right: 0 },
+                      role: "columnheader",
+                      children: /* @__PURE__ */ jsx34("span", { className: srOnly2, children: "Actions" })
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            hasFilterableColumns ? /* @__PURE__ */ jsxs17(
+              "div",
+              {
+                className: filterRow,
+                style: { width: totalWidth, minWidth: "100%" },
+                role: "row",
+                children: [
+                  selectable ? /* @__PURE__ */ jsx34(
+                    "div",
+                    {
+                      className: [checkboxCell, pinnedHeaderCell].join(" "),
+                      style: { left: 0 },
+                      role: "cell"
+                    }
+                  ) : null,
+                  layout.ordered.map((column) => {
+                    const width = widthOf(column);
+                    return /* @__PURE__ */ jsx34(
+                      "div",
+                      {
+                        className: [filterCell, headerPinnedClass(column)].filter(Boolean).join(" "),
+                        style: { width, ...pinnedStyle(column) },
+                        role: "cell",
+                        children: column.filterable ? column.filterType === "select" ? /* @__PURE__ */ jsxs17(
+                          "select",
+                          {
+                            className: filterInput,
+                            value: getFilterValue(column.key),
+                            onChange: (e) => handleFilterChange(column.key, e.target.value),
+                            "aria-label": `Filter ${String(column.header)}`,
+                            children: [
+                              /* @__PURE__ */ jsx34("option", { value: "", children: "All" }),
+                              (selectFilterOptions[column.key] ?? []).map(
+                                (value) => /* @__PURE__ */ jsx34("option", { value, children: value }, value)
+                              )
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx34(
+                          FilterTextInput,
+                          {
+                            className: filterInput,
+                            value: getFilterValue(column.key),
+                            onChange: (value) => handleFilterChange(column.key, value),
+                            placeholder: `Filter ${String(column.header)}`,
+                            "aria-label": `Filter ${String(column.header)}`
+                          }
+                        ) : null
+                      },
+                      column.key
+                    );
+                  }),
+                  editingEnabled ? /* @__PURE__ */ jsx34(
+                    "div",
+                    {
+                      className: [actionsCell, pinnedHeaderCell].join(" "),
+                      style: { right: 0 },
+                      role: "cell"
+                    }
+                  ) : null
+                ]
+              }
+            ) : null,
+            sortedData.length === 0 ? /* @__PURE__ */ jsx34("div", { className: emptyState, children: emptyMessage }) : /* @__PURE__ */ jsx34(
+              "div",
+              {
+                className: body3,
+                style: {
+                  height: totalHeight,
+                  width: totalWidth,
+                  minWidth: "100%"
+                },
+                children: visibleRows.map((rowData, i) => {
+                  const index = startIndex + i;
+                  const id = getRowId(rowData);
+                  const isSelected = selectedIds.has(id);
+                  const isEditing = editingRowId === id;
+                  const style = {
+                    top: index * rowHeight,
+                    height: rowHeight,
+                    width: totalWidth
+                  };
+                  return /* @__PURE__ */ jsxs17(
+                    "div",
+                    {
+                      className: row,
+                      style,
+                      role: "row",
+                      "data-selected": isSelected || void 0,
+                      "data-editing": isEditing || void 0,
+                      children: [
+                        selectable ? /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            className: [checkboxCell, pinnedCell].join(" "),
+                            style: { left: 0 },
+                            role: "cell",
+                            children: /* @__PURE__ */ jsx34(
+                              "input",
+                              {
+                                type: "checkbox",
+                                checked: isSelected,
+                                onChange: () => toggleRow(id),
+                                "aria-label": `Select row ${index + 1}`
+                              }
+                            )
+                          }
+                        ) : null,
+                        layout.ordered.map((column) => /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            className: [cell, pinnedClass(column)].filter(Boolean).join(" "),
+                            style: {
+                              width: widthOf(column),
+                              ...pinnedStyle(column)
+                            },
+                            role: "cell",
+                            children: isEditing && column.editable ? /* @__PURE__ */ jsx34(
+                              "input",
+                              {
+                                type: "text",
+                                className: editInput,
+                                value: editDraft[column.key] ?? "",
+                                onChange: (e) => setEditDraft((prev) => ({
+                                  ...prev,
+                                  [column.key]: e.target.value
+                                })),
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter") saveEditing();
+                                  if (e.key === "Escape") cancelEditing();
+                                },
+                                "aria-label": `Edit ${String(column.header)}`,
+                                autoFocus: column.key === columns.find((c) => c.editable)?.key
+                              }
+                            ) : column.render ? column.render(rowData) : String(getCellValue(column, rowData) ?? "")
+                          },
+                          column.key
+                        )),
+                        editingEnabled ? /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            className: [actionsCell, pinnedCell].join(" "),
+                            style: { right: 0 },
+                            role: "cell",
+                            children: isEditing ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+                              /* @__PURE__ */ jsx34(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: iconButton,
+                                  onClick: saveEditing,
+                                  "aria-label": `Save row ${index + 1}`,
+                                  children: "\u2713"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx34(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: iconButton,
+                                  onClick: cancelEditing,
+                                  "aria-label": `Cancel editing row ${index + 1}`,
+                                  children: "\u2715"
+                                }
+                              )
+                            ] }) : /* @__PURE__ */ jsx34(
+                              "button",
+                              {
+                                type: "button",
+                                className: iconButton,
+                                onClick: () => startEditing(rowData),
+                                "aria-label": `Edit row ${index + 1}`,
+                                children: "\u270E"
+                              }
+                            )
+                          }
+                        ) : null
+                      ]
+                    },
+                    id
+                  );
+                })
+              }
+            )
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx34("div", { className: loadingOverlay, children: /* @__PURE__ */ jsx34(Spinner, { size: "md" }) }) : null
+    ] }),
+    showPagination ? /* @__PURE__ */ jsx34("div", { className: paginationFooter, children: /* @__PURE__ */ jsx34(
+      Pagination,
+      {
+        page,
+        totalPages: Math.max(
+          1,
+          Math.ceil((totalRowCount ?? data.length) / pageSize)
+        ),
+        onPageChange
+      }
+    ) }) : null
+  ] });
+}
+
+// src/components/Calendar/Calendar.tsx
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState9 } from "react";
+
+// src/components/Calendar/Calendar.css.ts
+var dayButton = "Calendar_dayButton__1uy43my8";
+var dayCell = "Calendar_dayCell__1uy43my7";
+var grid = "Calendar_grid__1uy43my4";
+var header = "Calendar_header__1uy43my1";
+var monthLabel = "Calendar_monthLabel__1uy43my2";
+var navButton = "Calendar_navButton__1uy43my3";
+var root2 = "Calendar_root__1uy43my0";
+var weekRow = "Calendar_weekRow__1uy43my5";
+var weekdayCell = "Calendar_weekdayCell__1uy43my6";
+
+// src/components/Calendar/Calendar.tsx
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function addDays(date, amount) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + amount);
+  return next;
+}
+function addMonths(date, amount) {
+  const next = new Date(date);
+  next.setMonth(next.getMonth() + amount);
+  return next;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function clampToMidnight(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfWeek(date, weekStartsOn) {
+  const diff = (date.getDay() - weekStartsOn + 7) % 7;
+  return addDays(date, -diff);
+}
+function endOfWeek(date, weekStartsOn) {
+  return addDays(startOfWeek(date, weekStartsOn), 6);
+}
+function dateKey(date) {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+function getCalendarWeeks(month, weekStartsOn) {
+  const gridStart = startOfWeek(startOfMonth(month), weekStartsOn);
+  const gridEnd = endOfWeek(endOfMonth(month), weekStartsOn);
+  const weeks = [];
+  let cursor = gridStart;
+  while (cursor <= gridEnd) {
+    const week = [];
+    for (let i = 0; i < 7; i++) {
+      week.push(cursor);
+      cursor = addDays(cursor, 1);
+    }
+    weeks.push(week);
+  }
+  return weeks;
+}
+function isDateDisabledBy(date, minDate, maxDate, isDateDisabled) {
+  const target = clampToMidnight(date);
+  if (minDate && target < clampToMidnight(minDate)) return true;
+  if (maxDate && target > clampToMidnight(maxDate)) return true;
+  if (isDateDisabled?.(target)) return true;
+  return false;
+}
+function findEnabledDate(date, direction2, minDate, maxDate, isDateDisabled) {
+  let cursor = date;
+  for (let i = 0; i < 366; i++) {
+    if (!isDateDisabledBy(cursor, minDate, maxDate, isDateDisabled)) {
+      return cursor;
+    }
+    cursor = addDays(cursor, direction2);
+  }
+  return null;
+}
+function getFocusableDate(month, value, minDate, maxDate, isDateDisabled) {
+  if (value && isSameMonth(value, month) && !isDateDisabledBy(value, minDate, maxDate, isDateDisabled)) {
+    return clampToMidnight(value);
+  }
+  const today = clampToMidnight(/* @__PURE__ */ new Date());
+  if (isSameMonth(today, month) && !isDateDisabledBy(today, minDate, maxDate, isDateDisabled)) {
+    return today;
+  }
+  const firstEnabled = findEnabledDate(
+    startOfMonth(month),
+    1,
+    minDate,
+    maxDate,
+    isDateDisabled
+  );
+  if (firstEnabled && isSameMonth(firstEnabled, month)) {
+    return firstEnabled;
+  }
+  return startOfMonth(month);
+}
+function Calendar({
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  month: controlledMonth,
+  onMonthChange,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale = "en-US",
+  rangeEnd
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState9(
+    defaultValue
+  );
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [uncontrolledMonth, setUncontrolledMonth] = useState9(
+    () => startOfMonth(controlledMonth ?? value ?? /* @__PURE__ */ new Date())
+  );
+  const month = controlledMonth !== void 0 ? startOfMonth(controlledMonth) : uncontrolledMonth;
+  const setMonth = (next) => {
+    const normalized = startOfMonth(next);
+    if (controlledMonth === void 0) {
+      setUncontrolledMonth(normalized);
+    }
+    onMonthChange?.(normalized);
+  };
+  const [rovingDate, setRovingDate] = useState9(
+    () => getFocusableDate(month, value, minDate, maxDate, isDateDisabled)
+  );
+  const shouldFocusRef = useRef4(false);
+  const dayRefs = useRef4(/* @__PURE__ */ new Map());
+  useEffect2(() => {
+    setRovingDate((prev) => {
+      if (isSameMonth(prev, month)) return prev;
+      return getFocusableDate(month, value, minDate, maxDate, isDateDisabled);
+    });
+  }, [month]);
+  useEffect2(() => {
+    if (!shouldFocusRef.current) return;
+    shouldFocusRef.current = false;
+    dayRefs.current.get(dateKey(rovingDate))?.focus();
+  }, [rovingDate, month]);
+  const weeks = useMemo3(
+    () => getCalendarWeeks(month, weekStartsOn),
+    [month, weekStartsOn]
+  );
+  const today = useMemo3(() => clampToMidnight(/* @__PURE__ */ new Date()), []);
+  const monthLabelFormatter = useMemo3(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+    [locale]
+  );
+  const weekdayFormatter = useMemo3(
+    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
+    [locale]
+  );
+  const handleDayClick = (date, disabled, inMonth) => {
+    if (disabled) return;
+    if (!inMonth) {
+      setMonth(startOfMonth(date));
+      return;
+    }
+    const normalized = clampToMidnight(date);
+    setValue(normalized);
+    setRovingDate(normalized);
+  };
+  const handleKeyDown = (event, date) => {
+    let targetRaw;
+    let direction2;
+    switch (event.key) {
+      case "ArrowLeft":
+        targetRaw = addDays(date, -1);
+        direction2 = -1;
+        break;
+      case "ArrowRight":
+        targetRaw = addDays(date, 1);
+        direction2 = 1;
+        break;
+      case "ArrowUp":
+        targetRaw = addDays(date, -7);
+        direction2 = -1;
+        break;
+      case "ArrowDown":
+        targetRaw = addDays(date, 7);
+        direction2 = 1;
+        break;
+      case "Home":
+        targetRaw = startOfWeek(date, weekStartsOn);
+        direction2 = -1;
+        break;
+      case "End":
+        targetRaw = endOfWeek(date, weekStartsOn);
+        direction2 = 1;
+        break;
+      case "PageUp":
+        targetRaw = addMonths(date, -1);
+        direction2 = -1;
+        break;
+      case "PageDown":
+        targetRaw = addMonths(date, 1);
+        direction2 = 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const target = findEnabledDate(
+      targetRaw,
+      direction2,
+      minDate,
+      maxDate,
+      isDateDisabled
+    );
+    if (!target) return;
+    shouldFocusRef.current = true;
+    setRovingDate(target);
+    if (!isSameMonth(target, month)) {
+      setMonth(startOfMonth(target));
+    }
+  };
+  const monthLabelText = monthLabelFormatter.format(month);
+  const clampedValue = value ? clampToMidnight(value) : null;
+  const clampedRangeEnd = rangeEnd ? clampToMidnight(rangeEnd) : null;
+  return /* @__PURE__ */ jsxs18("div", { className: root2, role: "application", "aria-label": monthLabelText, children: [
+    /* @__PURE__ */ jsxs18("div", { className: header, children: [
+      /* @__PURE__ */ jsx35(
+        "button",
+        {
+          type: "button",
+          className: navButton,
+          onClick: () => setMonth(addMonths(month, -1)),
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx35("span", { className: monthLabel, children: monthLabelText }),
+      /* @__PURE__ */ jsx35(
+        "button",
+        {
+          type: "button",
+          className: navButton,
+          onClick: () => setMonth(addMonths(month, 1)),
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs18("div", { className: grid, role: "grid", "aria-label": monthLabelText, children: [
+      /* @__PURE__ */ jsx35("div", { className: weekRow, role: "row", children: weeks[0].map((date) => /* @__PURE__ */ jsx35(
+        "div",
+        {
+          className: weekdayCell,
+          role: "columnheader",
+          children: weekdayFormatter.format(date)
+        },
+        dateKey(date)
+      )) }),
+      weeks.map((week, weekIndex) => /* @__PURE__ */ jsx35("div", { className: weekRow, role: "row", children: week.map((date) => {
+        const inMonth = isSameMonth(date, month);
+        const disabled = isDateDisabledBy(
+          date,
+          minDate,
+          maxDate,
+          isDateDisabled
+        );
+        const isRangeEndDay = clampedRangeEnd ? isSameDay(date, clampedRangeEnd) : false;
+        const selected = (clampedValue ? isSameDay(date, clampedValue) : false) || isRangeEndDay;
+        const inRange = Boolean(
+          clampedValue && clampedRangeEnd && date > clampedValue && date < clampedRangeEnd
+        );
+        const isToday = isSameDay(date, today);
+        const tabIndex = inMonth && !disabled && isSameDay(date, rovingDate) ? 0 : -1;
+        return /* @__PURE__ */ jsx35("div", { className: dayCell, role: "gridcell", children: /* @__PURE__ */ jsx35(
+          "button",
+          {
+            type: "button",
+            ref: (el) => {
+              if (el) {
+                dayRefs.current.set(dateKey(date), el);
+              } else {
+                dayRefs.current.delete(dateKey(date));
+              }
             },
-            id
-          );
-        }) })
+            className: dayButton,
+            "data-outside": !inMonth || void 0,
+            "data-today": isToday || void 0,
+            "data-selected": selected || void 0,
+            "data-in-range": inRange || void 0,
+            disabled,
+            tabIndex,
+            "aria-selected": selected || void 0,
+            "aria-current": isToday ? "date" : void 0,
+            "aria-disabled": disabled || void 0,
+            "aria-label": date.toDateString(),
+            onClick: () => handleDayClick(date, disabled, inMonth),
+            onKeyDown: inMonth ? (e) => handleKeyDown(e, date) : void 0,
+            children: date.getDate()
+          }
+        ) }, dateKey(date));
+      }) }, weekIndex))
+    ] })
+  ] });
+}
+
+// src/components/DatePicker/DatePicker.tsx
+import { useEffect as useEffect3, useRef as useRef5, useState as useState10 } from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager4,
+  FloatingPortal as FloatingPortal5,
+  autoUpdate as autoUpdate4,
+  flip as flip4,
+  offset as offset4,
+  shift as shift4,
+  useDismiss as useDismiss5,
+  useFloating as useFloating5,
+  useInteractions as useInteractions5,
+  useRole as useRole5
+} from "@floating-ui/react";
+
+// src/components/DatePicker/DatePicker.css.ts
+var dateInput = "DatePicker_dateInput__d7uy1a1";
+var iconButton2 = "DatePicker_iconButton__d7uy1a2";
+var popover2 = "DatePicker_popover__d7uy1a3";
+var wrapper6 = "DatePicker_wrapper__d7uy1a0";
+
+// src/components/DatePicker/DatePicker.tsx
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+function startOfMonth2(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function clampToMidnight2(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isDisabled(date, minDate, maxDate, isDateDisabled) {
+  const target = clampToMidnight2(date);
+  if (minDate && target < clampToMidnight2(minDate)) return true;
+  if (maxDate && target > clampToMidnight2(maxDate)) return true;
+  if (isDateDisabled?.(target)) return true;
+  return false;
+}
+function getDatePartOrder(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.filter(
+    (part) => part.type === "month" || part.type === "day" || part.type === "year"
+  ).map((part) => part.type);
+}
+function getDatePlaceholder(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.map((part) => {
+    switch (part.type) {
+      case "month":
+        return "MM";
+      case "day":
+        return "DD";
+      case "year":
+        return "YYYY";
+      default:
+        return part.value;
+    }
+  }).join("");
+}
+function formatDate(date, locale) {
+  return new Intl.DateTimeFormat(locale).format(date);
+}
+function parseDate(text, locale) {
+  const numbers = text.match(/\d+/g);
+  if (!numbers || numbers.length < 3) return null;
+  const order = getDatePartOrder(locale);
+  if (order.length < 3) return null;
+  const values = {};
+  order.forEach((type, i) => {
+    values[type] = Number.parseInt(numbers[i], 10);
+  });
+  const { month, day, year } = values;
+  if (!month || !day || !year) return null;
+  const fullYear = year < 100 ? 2e3 + year : year;
+  const date = new Date(fullYear, month - 1, day);
+  if (date.getFullYear() !== fullYear || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function DatePicker({
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale = "en-US",
+  placeholder,
+  disabled = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState10(
+    defaultValue
+  );
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const [month, setMonth] = useState10(
+    () => startOfMonth2(value ?? /* @__PURE__ */ new Date())
+  );
+  const [inputText, setInputText] = useState10(
+    () => value ? formatDate(value, locale) : ""
+  );
+  const inputRef = useRef5(null);
+  useEffect3(() => {
+    setInputText(value ? formatDate(value, locale) : "");
+  }, [value, locale]);
+  useEffect3(() => {
+    if (open && value) {
+      setMonth(startOfMonth2(value));
+    }
+  }, [open]);
+  const { refs, floatingStyles, context } = useFloating5({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate4,
+    middleware: [offset4(8), flip4(), shift4({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions5([
+    useDismiss5(context),
+    useRole5(context, { role: "dialog" })
+  ]);
+  const revertInputText = () => {
+    setInputText(value ? formatDate(value, locale) : "");
+  };
+  const commitTypedValue = () => {
+    const trimmed = inputText.trim();
+    if (!trimmed) {
+      if (value !== null) {
+        setValue(null);
+      }
+      return;
+    }
+    const parsed = parseDate(trimmed, locale);
+    if (!parsed || isDisabled(parsed, minDate, maxDate, isDateDisabled)) {
+      revertInputText();
+      return;
+    }
+    setValue(parsed);
+    setMonth(startOfMonth2(parsed));
+    setInputText(formatDate(parsed, locale));
+  };
+  const handleInputKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitTypedValue();
+    }
+  };
+  const handleCalendarChange = (date) => {
+    setValue(date);
+    setMonth(startOfMonth2(date));
+    setOpen(false);
+  };
+  const placeholderText = placeholder ?? getDatePlaceholder(locale);
+  return /* @__PURE__ */ jsxs19("div", { className: wrapper6, ref: refs.setReference, children: [
+    /* @__PURE__ */ jsx36(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: dateInput,
+        value: inputText,
+        placeholder: placeholderText,
+        disabled,
+        onChange: (e) => setInputText(e.target.value),
+        onBlur: commitTypedValue,
+        onKeyDown: handleInputKeyDown,
+        "aria-label": "Date"
+      }
+    ),
+    /* @__PURE__ */ jsx36(
+      "button",
+      {
+        type: "button",
+        className: iconButton2,
+        disabled,
+        "aria-label": open ? "Close calendar" : "Open calendar",
+        ...getReferenceProps({
+          onClick: () => {
+            if (disabled) return;
+            setOpen(!open);
+          }
+        }),
+        children: /* @__PURE__ */ jsxs19(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx36(
+                "rect",
+                {
+                  x: "1.5",
+                  y: "2.5",
+                  width: "13",
+                  height: "12",
+                  rx: "1.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.3"
+                }
+              ),
+              /* @__PURE__ */ jsx36("path", { d: "M1.5 6h13", stroke: "currentColor", strokeWidth: "1.3" }),
+              /* @__PURE__ */ jsx36(
+                "path",
+                {
+                  d: "M4.5 1v3M11.5 1v3",
+                  stroke: "currentColor",
+                  strokeWidth: "1.3",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    open ? /* @__PURE__ */ jsx36(FloatingPortal5, { children: /* @__PURE__ */ jsx36(
+      FloatingFocusManager4,
+      {
+        context,
+        modal: false,
+        returnFocus: inputRef,
+        children: /* @__PURE__ */ jsx36(
+          "div",
+          {
+            ref: refs.setFloating,
+            className: popover2,
+            style: floatingStyles,
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx36(
+              Calendar,
+              {
+                value,
+                onChange: handleCalendarChange,
+                month,
+                onMonthChange: setMonth,
+                minDate,
+                maxDate,
+                isDateDisabled,
+                weekStartsOn,
+                locale
+              }
+            )
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import { useEffect as useEffect4, useState as useState11 } from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager5,
+  FloatingPortal as FloatingPortal6,
+  autoUpdate as autoUpdate5,
+  flip as flip5,
+  offset as offset5,
+  shift as shift5,
+  useDismiss as useDismiss6,
+  useFloating as useFloating6,
+  useInteractions as useInteractions6,
+  useRole as useRole6
+} from "@floating-ui/react";
+
+// src/components/DateRangePicker/DateRangePicker.css.ts
+var dateInput2 = "DateRangePicker_dateInput__11t25r41";
+var iconButton3 = "DateRangePicker_iconButton__11t25r43";
+var popover3 = "DateRangePicker_popover__11t25r44";
+var separator2 = "DateRangePicker_separator__11t25r42";
+var wrapper7 = "DateRangePicker_wrapper__11t25r40";
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+function startOfMonth3(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function clampToMidnight3(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function compareDates(a, b) {
+  const x = clampToMidnight3(a).getTime();
+  const y = clampToMidnight3(b).getTime();
+  if (x < y) return -1;
+  if (x > y) return 1;
+  return 0;
+}
+function isDisabled2(date, minDate, maxDate, isDateDisabled) {
+  const target = clampToMidnight3(date);
+  if (minDate && target < clampToMidnight3(minDate)) return true;
+  if (maxDate && target > clampToMidnight3(maxDate)) return true;
+  if (isDateDisabled?.(target)) return true;
+  return false;
+}
+function getDatePartOrder2(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.filter(
+    (part) => part.type === "month" || part.type === "day" || part.type === "year"
+  ).map((part) => part.type);
+}
+function getDatePlaceholder2(locale) {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2e3, 0, 2)
+  );
+  return parts.map((part) => {
+    switch (part.type) {
+      case "month":
+        return "MM";
+      case "day":
+        return "DD";
+      case "year":
+        return "YYYY";
+      default:
+        return part.value;
+    }
+  }).join("");
+}
+function formatDate2(date, locale) {
+  return new Intl.DateTimeFormat(locale).format(date);
+}
+function parseDate2(text, locale) {
+  const numbers = text.match(/\d+/g);
+  if (!numbers || numbers.length < 3) return null;
+  const order = getDatePartOrder2(locale);
+  if (order.length < 3) return null;
+  const values = {};
+  order.forEach((type, i) => {
+    values[type] = Number.parseInt(numbers[i], 10);
+  });
+  const { month, day, year } = values;
+  if (!month || !day || !year) return null;
+  const fullYear = year < 100 ? 2e3 + year : year;
+  const date = new Date(fullYear, month - 1, day);
+  if (date.getFullYear() !== fullYear || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+var EMPTY_RANGE = { start: null, end: null };
+function DateRangePicker({
+  value: controlledValue,
+  defaultValue = EMPTY_RANGE,
+  onChange,
+  minDate,
+  maxDate,
+  isDateDisabled,
+  weekStartsOn = 1,
+  locale = "en-US",
+  startPlaceholder,
+  endPlaceholder,
+  disabled = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState11(defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+  const setValue = (next) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(next);
+  };
+  const [uncontrolledOpen, setUncontrolledOpen] = useState11(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const [month, setMonth] = useState11(
+    () => startOfMonth3(value.start ?? /* @__PURE__ */ new Date())
+  );
+  const [startText, setStartText] = useState11(
+    () => value.start ? formatDate2(value.start, locale) : ""
+  );
+  const [endText, setEndText] = useState11(
+    () => value.end ? formatDate2(value.end, locale) : ""
+  );
+  useEffect4(() => {
+    setStartText(value.start ? formatDate2(value.start, locale) : "");
+  }, [value.start, locale]);
+  useEffect4(() => {
+    setEndText(value.end ? formatDate2(value.end, locale) : "");
+  }, [value.end, locale]);
+  useEffect4(() => {
+    if (open && value.start) {
+      setMonth(startOfMonth3(value.start));
+    }
+  }, [open]);
+  const { refs, floatingStyles, context } = useFloating6({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate5,
+    middleware: [offset5(8), flip5(), shift5({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions6([
+    useDismiss6(context),
+    useRole6(context, { role: "dialog" })
+  ]);
+  const revertStartText = () => {
+    setStartText(value.start ? formatDate2(value.start, locale) : "");
+  };
+  const revertEndText = () => {
+    setEndText(value.end ? formatDate2(value.end, locale) : "");
+  };
+  const commitStartText = () => {
+    const trimmed = startText.trim();
+    if (!trimmed) {
+      if (value.start !== null) {
+        setValue({ start: null, end: value.end });
+      }
+      return;
+    }
+    const parsed = parseDate2(trimmed, locale);
+    if (!parsed || isDisabled2(parsed, minDate, maxDate, isDateDisabled) || value.end && compareDates(parsed, value.end) > 0) {
+      revertStartText();
+      return;
+    }
+    setValue({ start: parsed, end: value.end });
+    setMonth(startOfMonth3(parsed));
+  };
+  const commitEndText = () => {
+    const trimmed = endText.trim();
+    if (!trimmed) {
+      if (value.end !== null) {
+        setValue({ start: value.start, end: null });
+      }
+      return;
+    }
+    const parsed = parseDate2(trimmed, locale);
+    if (!parsed || isDisabled2(parsed, minDate, maxDate, isDateDisabled) || value.start && compareDates(parsed, value.start) < 0) {
+      revertEndText();
+      return;
+    }
+    setValue({ start: value.start, end: parsed });
+    setMonth(startOfMonth3(parsed));
+  };
+  const handleStartKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitStartText();
+    }
+  };
+  const handleEndKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitEndText();
+    }
+  };
+  const handleCalendarChange = (date) => {
+    const { start, end } = value;
+    if (!start || start && end) {
+      setValue({ start: date, end: null });
+      setMonth(startOfMonth3(date));
+      return;
+    }
+    if (compareDates(date, start) < 0) {
+      setValue({ start: date, end: start });
+    } else {
+      setValue({ start, end: date });
+    }
+    setOpen(false);
+  };
+  const startPlaceholderText = startPlaceholder ?? getDatePlaceholder2(locale);
+  const endPlaceholderText = endPlaceholder ?? getDatePlaceholder2(locale);
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: wrapper7,
+      "data-disabled": disabled || void 0,
+      ref: refs.setReference,
+      children: [
+        /* @__PURE__ */ jsx37(
+          "input",
+          {
+            type: "text",
+            className: dateInput2,
+            value: startText,
+            placeholder: startPlaceholderText,
+            disabled,
+            onChange: (e) => setStartText(e.target.value),
+            onBlur: commitStartText,
+            onKeyDown: handleStartKeyDown,
+            "aria-label": "Start date"
+          }
+        ),
+        /* @__PURE__ */ jsx37("span", { className: separator2, "aria-hidden": "true", children: "\u2013" }),
+        /* @__PURE__ */ jsx37(
+          "input",
+          {
+            type: "text",
+            className: dateInput2,
+            value: endText,
+            placeholder: endPlaceholderText,
+            disabled,
+            onChange: (e) => setEndText(e.target.value),
+            onBlur: commitEndText,
+            onKeyDown: handleEndKeyDown,
+            "aria-label": "End date"
+          }
+        ),
+        /* @__PURE__ */ jsx37(
+          "button",
+          {
+            type: "button",
+            className: iconButton3,
+            disabled,
+            "aria-label": open ? "Close calendar" : "Open calendar",
+            ...getReferenceProps({
+              onClick: () => {
+                if (disabled) return;
+                setOpen(!open);
+              }
+            }),
+            children: /* @__PURE__ */ jsxs20(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx37(
+                    "rect",
+                    {
+                      x: "1.5",
+                      y: "2.5",
+                      width: "13",
+                      height: "12",
+                      rx: "1.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx37("path", { d: "M1.5 6h13", stroke: "currentColor", strokeWidth: "1.3" }),
+                  /* @__PURE__ */ jsx37(
+                    "path",
+                    {
+                      d: "M4.5 1v3M11.5 1v3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.3",
+                      strokeLinecap: "round"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        open ? /* @__PURE__ */ jsx37(FloatingPortal6, { children: /* @__PURE__ */ jsx37(FloatingFocusManager5, { context, modal: false, children: /* @__PURE__ */ jsx37(
+          "div",
+          {
+            ref: refs.setFloating,
+            className: popover3,
+            style: floatingStyles,
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx37(
+              Calendar,
+              {
+                value: value.start,
+                rangeEnd: value.end,
+                onChange: handleCalendarChange,
+                month,
+                onMonthChange: setMonth,
+                minDate,
+                maxDate,
+                isDateDisabled,
+                weekStartsOn,
+                locale
+              }
+            )
+          }
+        ) }) }) : null
       ]
     }
   );
@@ -1483,9 +2633,12 @@ export {
   Breadcrumbs2 as Breadcrumbs,
   BreadcrumbsItem,
   Button,
+  Calendar,
   Card,
   Checkbox,
   DataGrid,
+  DatePicker,
+  DateRangePicker,
   Divider,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,