@kreativa/ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
+  DataTable: () => DataTable,
   DatePicker: () => DatePicker,
   EmptyState: () => EmptyState,
   FormButtonGroup: () => FormButtonGroup,
@@ -37,6 +38,7 @@ __export(index_exports, {
   Table: () => Table,
   Tabs: () => Tabs,
   Timer: () => Timer,
+  createFilterOptions: () => createFilterOptions,
   formatTime: () => formatTime
 });
 module.exports = __toCommonJS(index_exports);
@@ -338,10 +340,15 @@ function Table({
   onRowClick,
   loading = false,
   emptyMessage = "No data available",
-  className = ""
+  className = "",
+  resizable = false,
+  fixedLayout = false
 }) {
   const [sortKey, setSortKey] = (0, import_react5.useState)(null);
   const [sortDirection, setSortDirection] = (0, import_react5.useState)(null);
+  const [columnWidths, setColumnWidths] = (0, import_react5.useState)({});
+  const tableRef = (0, import_react5.useRef)(null);
+  const resizingRef = (0, import_react5.useRef)(null);
   const handleHeaderClick = (column) => {
     if (!column.sortable) return;
     if (sortKey === column.key) {
@@ -370,65 +377,138 @@ function Table({
     });
     return sortDirection === "desc" ? sorted.reverse() : sorted;
   }, [data, columns, sortKey, sortDirection]);
+  const handleResizeStart = (0, import_react5.useCallback)(
+    (e, columnKey) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const headerCell = e.currentTarget.parentElement;
+      if (!headerCell) return;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      resizingRef.current = {
+        columnKey,
+        startX: e.clientX,
+        startWidth
+      };
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    []
+  );
+  const handleResizeMove = (0, import_react5.useCallback)((e) => {
+    if (!resizingRef.current) return;
+    const { columnKey, startX, startWidth } = resizingRef.current;
+    const column = columns.find((c) => c.key === columnKey);
+    const minWidth = column?.minWidth ?? 50;
+    const newWidth = Math.max(minWidth, startWidth + (e.clientX - startX));
+    setColumnWidths((prev) => ({
+      ...prev,
+      [columnKey]: newWidth
+    }));
+  }, [columns]);
+  const handleResizeEnd = (0, import_react5.useCallback)(() => {
+    resizingRef.current = null;
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, [handleResizeMove]);
   const getSortIcon = (column) => {
     if (!column.sortable) return null;
     if (sortKey !== column.key) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-gray-400 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
     }
     if (sortDirection === "asc") {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
   };
   const alignmentClasses = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full border-collapse", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "th",
-      {
-        className: `
-                  px-4 py-3 text-sm font-semibold text-gray-700
+  const getColumnStyle = (column) => {
+    if (columnWidths[column.key]) {
+      return { width: columnWidths[column.key], minWidth: columnWidths[column.key] };
+    }
+    if (column.width) {
+      return { width: column.width, minWidth: column.minWidth ?? 50 };
+    }
+    return { minWidth: column.minWidth ?? 50 };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "table",
+    {
+      ref: tableRef,
+      className: "w-full border-collapse",
+      style: { tableLayout: fixedLayout || resizable ? "fixed" : "auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "th",
+          {
+            className: `
+                  px-4 py-3 text-sm font-semibold text-gray-700 relative
                   ${alignmentClasses[column.align ?? "left"]}
                   ${column.sortable ? "cursor-pointer select-none hover:bg-gray-100" : ""}
                 `,
-        style: { width: column.width },
-        onClick: () => handleHeaderClick(column),
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-center gap-1 ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: column.header }),
-          getSortIcon(column)
-        ] })
-      },
-      column.key
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Loading..." })
-    ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "tr",
-      {
-        className: `
+            style: getColumnStyle(column),
+            onClick: () => handleHeaderClick(column),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "div",
+                {
+                  className: `flex items-center gap-1 overflow-hidden ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: column.header }),
+                    getSortIcon(column)
+                  ]
+                }
+              ),
+              resizable && index < columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "div",
+                {
+                  className: "absolute top-0 right-0 w-1 h-full cursor-col-resize bg-transparent hover:bg-primary-300 transition-colors",
+                  onMouseDown: (e) => handleResizeStart(e, column.key),
+                  onClick: (e) => e.stopPropagation()
+                }
+              )
+            ]
+          },
+          column.key
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Loading..." })
+        ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "tr",
+          {
+            className: `
                   border-b border-gray-100 hover:bg-gray-50 transition-colors
                   ${onRowClick ? "cursor-pointer" : ""}
                 `,
-        onClick: () => onRowClick?.(item),
-        children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "td",
-          {
-            className: `px-4 py-3 text-sm text-gray-800 ${alignmentClasses[column.align ?? "left"]}`,
-            style: { width: column.width },
-            children: column.render(item)
+            onClick: () => onRowClick?.(item),
+            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "td",
+              {
+                className: `px-4 py-3 text-sm text-gray-800 overflow-hidden ${alignmentClasses[column.align ?? "left"]}`,
+                style: getColumnStyle(column),
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "truncate", children: column.render(item) })
+              },
+              column.key
+            ))
           },
-          column.key
-        ))
-      },
-      getRowKey(item)
-    )) })
-  ] }) });
+          getRowKey(item)
+        )) })
+      ]
+    }
+  ) });
 }
 
+// src/components/DataTable.tsx
+var import_react7 = require("react");
+
 // src/components/Select.tsx
 var import_react6 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -612,9 +692,245 @@ function Select({
   ] });
 }
 
-// src/components/Tabs.tsx
-var import_react7 = require("react");
+// src/components/DataTable.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function ColumnFilter({ column, value, onChange }) {
+  const filterType = column.filterType ?? "text";
+  if (filterType === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-9" });
+  }
+  if (filterType === "select" && column.filterOptions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Select,
+      {
+        options: [{ value: "", label: "Alla" }, ...column.filterOptions],
+        value: value || "",
+        onChange: (val) => onChange(val),
+        placeholder: column.filterPlaceholder || "Alla",
+        className: "w-full text-sm"
+      }
+    );
+  }
+  if (filterType === "multiselect" && column.filterOptions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Select,
+      {
+        options: column.filterOptions,
+        value: value || [],
+        onChange: (val) => onChange(val),
+        placeholder: column.filterPlaceholder || "Alla",
+        multiple: true,
+        className: "w-full text-sm"
+      }
+    );
+  }
+  if (filterType === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Select,
+      {
+        options: [
+          { value: "", label: "Alla" },
+          { value: "true", label: "Ja" },
+          { value: "false", label: "Nej" }
+        ],
+        value: value || "",
+        onChange: (val) => onChange(val),
+        className: "w-full text-sm"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Input,
+    {
+      type: "text",
+      value: value || "",
+      onChange: (e) => onChange(e.target.value),
+      placeholder: column.filterPlaceholder || `Filtrera ${column.header.toLowerCase()}...`,
+      className: "w-full text-sm h-9"
+    }
+  );
+}
+function DataTable({
+  data,
+  columns,
+  getRowKey,
+  onRowClick,
+  loading,
+  emptyMessage = "Ingen data att visa.",
+  className,
+  showFilters = true,
+  initialSortKey,
+  initialSortDirection = "asc",
+  onFilteredDataChange
+}) {
+  const [filters, setFilters] = (0, import_react7.useState)({});
+  const [sortKey, setSortKey] = (0, import_react7.useState)(initialSortKey || null);
+  const [sortDirection, setSortDirection] = (0, import_react7.useState)(initialSortDirection);
+  const handleFilterChange = (0, import_react7.useCallback)((columnKey, value) => {
+    setFilters((prev) => {
+      const next = { ...prev };
+      if (value === "" || Array.isArray(value) && value.length === 0) {
+        delete next[columnKey];
+      } else {
+        next[columnKey] = value;
+      }
+      return next;
+    });
+  }, []);
+  const clearFilters = (0, import_react7.useCallback)(() => {
+    setFilters({});
+  }, []);
+  const filteredData = (0, import_react7.useMemo)(() => {
+    let result = [...data];
+    for (const [columnKey, filterValue] of Object.entries(filters)) {
+      if (!filterValue || Array.isArray(filterValue) && filterValue.length === 0) continue;
+      const column = columns.find((c) => c.key === columnKey);
+      if (!column) continue;
+      const getFilterableValue = column.filterValue || ((item) => {
+        return item[columnKey];
+      });
+      result = result.filter((item) => {
+        const itemValue = getFilterableValue(item);
+        if (itemValue === null || itemValue === void 0) {
+          return filterValue === "";
+        }
+        const filterType = column.filterType ?? "text";
+        if (filterType === "boolean") {
+          const boolFilterValue = filterValue === "true";
+          return itemValue === boolFilterValue;
+        }
+        if (filterType === "multiselect" && Array.isArray(filterValue)) {
+          return filterValue.includes(String(itemValue));
+        }
+        if (filterType === "select") {
+          return String(itemValue).toLowerCase() === String(filterValue).toLowerCase();
+        }
+        return String(itemValue).toLowerCase().includes(String(filterValue).toLowerCase());
+      });
+    }
+    return result;
+  }, [data, filters, columns]);
+  const sortedData = (0, import_react7.useMemo)(() => {
+    if (!sortKey) return filteredData;
+    const column = columns.find((c) => c.key === sortKey);
+    if (!column) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
+      if (column.sortFn) {
+        return column.sortFn(a, b);
+      }
+      const getValueForSort = column.filterValue || ((item) => {
+        return item[sortKey];
+      });
+      const aVal = getValueForSort(a);
+      const bVal = getValueForSort(b);
+      if (aVal === null || aVal === void 0) return 1;
+      if (bVal === null || bVal === void 0) return -1;
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return aVal.localeCompare(bVal, "sv");
+      }
+      if (aVal < bVal) return -1;
+      if (aVal > bVal) return 1;
+      return 0;
+    });
+    return sortDirection === "desc" ? sorted.reverse() : sorted;
+  }, [filteredData, sortKey, sortDirection, columns]);
+  (0, import_react7.useMemo)(() => {
+    onFilteredDataChange?.(sortedData);
+  }, [sortedData, onFilteredDataChange]);
+  const handleSort = (0, import_react7.useCallback)((columnKey) => {
+    if (sortKey === columnKey) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(columnKey);
+      setSortDirection("asc");
+    }
+  }, [sortKey]);
+  const tableColumns = (0, import_react7.useMemo)(() => {
+    return columns.map((column) => {
+      const isSortable = column.sortable !== false && column.filterType !== "none";
+      const isCurrentSort = sortKey === column.key;
+      return {
+        key: column.key,
+        header: isSortable ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "button",
+          {
+            onClick: () => handleSort(column.key),
+            className: "flex items-center gap-1 hover:text-gray-900 transition-colors w-full text-left",
+            children: [
+              column.header,
+              isCurrentSort ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-primary-600", children: sortDirection === "asc" ? "\u2191" : "\u2193" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-gray-400 opacity-50", children: "\u2195" })
+            ]
+          }
+        ) : column.header,
+        render: column.render,
+        width: column.width,
+        align: column.align,
+        sortable: false
+        // We handle sorting ourselves
+      };
+    });
+  }, [columns, sortKey, sortDirection, handleSort]);
+  const hasActiveFilters = Object.keys(filters).length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className, children: [
+    showFilters && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-sm text-gray-500", children: [
+          "Visar ",
+          sortedData.length,
+          " av ",
+          data.length
+        ] }),
+        hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            onClick: clearFilters,
+            className: "text-sm text-primary-600 hover:underline",
+            children: "Rensa filter"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3 p-3 bg-gray-50 border border-gray-200 rounded-lg", children: columns.filter((col) => col.filterType !== "none").map((column) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: "text-xs text-gray-500 mb-1 block truncate", children: column.header }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ColumnFilter,
+          {
+            column,
+            value: filters[column.key] || "",
+            onChange: (value) => handleFilterChange(column.key, value)
+          }
+        )
+      ] }, column.key)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Table,
+      {
+        data: sortedData,
+        columns: tableColumns,
+        getRowKey,
+        onRowClick,
+        loading,
+        emptyMessage
+      }
+    )
+  ] });
+}
+function createFilterOptions(data, getValue, labelMap) {
+  const uniqueValues = /* @__PURE__ */ new Set();
+  for (const item of data) {
+    const value = getValue(item);
+    if (value !== null && value !== void 0 && value !== "") {
+      uniqueValues.add(value);
+    }
+  }
+  return Array.from(uniqueValues).sort((a, b) => a.localeCompare(b, "sv")).map((value) => ({
+    value,
+    label: labelMap?.[value] || value
+  }));
+}
+
+// src/components/Tabs.tsx
+var import_react8 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Tabs({
   tabs,
   activeTab: controlledActiveTab,
@@ -625,7 +941,7 @@ function Tabs({
   className = ""
 }) {
   const isControlled = controlledActiveTab !== void 0;
-  const [internalActiveTab, setInternalActiveTab] = (0, import_react7.useState)(
+  const [internalActiveTab, setInternalActiveTab] = (0, import_react8.useState)(
     defaultTab || tabs.find((t) => !t.disabled)?.id || tabs[0]?.id
   );
   const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
@@ -693,11 +1009,11 @@ function Tabs({
     }
   };
   const styles = variantStyles[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `flex ${styles.container}`, role: "tablist", children: tabs.map((tab, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `flex ${styles.container}`, role: "tablist", children: tabs.map((tab, index) => {
       const isActive = tab.id === activeTab;
       const isDisabled = tab.disabled ?? false;
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
@@ -709,7 +1025,7 @@ function Tabs({
           className: styles.tab(isActive, isDisabled),
           onClick: () => handleTabClick(tab),
           onKeyDown: (e) => handleKeyDown(e, index),
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center gap-2", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "flex items-center gap-2", children: [
             tab.icon,
             tab.label
           ] })
@@ -717,13 +1033,13 @@ function Tabs({
         tab.id
       );
     }) }),
-    renderContent && activeContent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pt-4", role: "tabpanel", children: activeContent })
+    renderContent && activeContent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pt-4", role: "tabpanel", children: activeContent })
   ] });
 }
 
 // src/components/DatePicker.tsx
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTHS = [
   "January",
@@ -826,12 +1142,12 @@ function DatePicker({
   disabled = false,
   className = ""
 }) {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const [viewDate, setViewDate] = (0, import_react8.useState)(/* @__PURE__ */ new Date());
-  const [hoverDate, setHoverDate] = (0, import_react8.useState)(null);
-  const containerRef = (0, import_react8.useRef)(null);
-  const [selectingEnd, setSelectingEnd] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react9.useState)(/* @__PURE__ */ new Date());
+  const [hoverDate, setHoverDate] = (0, import_react9.useState)(null);
+  const containerRef = (0, import_react9.useRef)(null);
+  const [selectingEnd, setSelectingEnd] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -841,7 +1157,7 @@ function DatePicker({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const displayText = (0, import_react8.useMemo)(() => {
+  const displayText = (0, import_react9.useMemo)(() => {
     if (!value) return "";
     if (range) {
       const rangeValue = value;
@@ -858,7 +1174,7 @@ function DatePicker({
     }
     return formatDate(value);
   }, [value, range]);
-  const calendarDays = (0, import_react8.useMemo)(() => {
+  const calendarDays = (0, import_react9.useMemo)(() => {
     const year = viewDate.getFullYear();
     const month = viewDate.getMonth();
     const firstDay = new Date(year, month, 1);
@@ -941,9 +1257,9 @@ function DatePicker({
   };
   const today = /* @__PURE__ */ new Date();
   today.setHours(0, 0, 0, 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: containerRef, className: `relative ${className}`, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: containerRef, className: `relative ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         className: `
@@ -953,15 +1269,15 @@ function DatePicker({
           transition-all
         `,
         onClick: () => !disabled && setIsOpen(!isOpen),
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ] })
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-xs text-red-600", children: error }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: range ? "flex gap-4" : "", children: [
-      range && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "border-r border-gray-100 pr-4 space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-1 text-xs text-red-600", children: error }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: range ? "flex gap-4" : "", children: [
+      range && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "border-r border-gray-100 pr-4 space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
           type: "button",
@@ -971,42 +1287,42 @@ function DatePicker({
         },
         preset.label
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               type: "button",
               className: "p-1 hover:bg-gray-100 rounded",
               onClick: goToPrevMonth,
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-sm font-semibold text-gray-800", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-sm font-semibold text-gray-800", children: [
             MONTHS[viewDate.getMonth()],
             " ",
             viewDate.getFullYear()
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               type: "button",
               className: "p-1 hover:bg-gray-100 rounded",
               onClick: goToNextMonth,
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center text-xs font-medium text-gray-500 py-1", children: day }, day)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center text-xs font-medium text-gray-500 py-1", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
           if (!date) {
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-9 h-9" }, `empty-${index}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-9 h-9" }, `empty-${index}`);
           }
           const isDisabled = isDateDisabled(date);
           const isSelected = isDateSelected(date);
           const inRange = isDateInRange(date);
           const isToday = isSameDay(date, today);
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               type: "button",
@@ -1032,8 +1348,8 @@ function DatePicker({
 }
 
 // src/components/Timer.tsx
-var import_react9 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function formatTime(totalSeconds) {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor(totalSeconds % 3600 / 60);
@@ -1057,20 +1373,20 @@ function Timer({
   elapsedSeconds: controlledElapsedSeconds
 }) {
   const isControlled = controlledIsRunning !== void 0;
-  const [internalIsRunning, setInternalIsRunning] = (0, import_react9.useState)(false);
-  const [internalElapsedSeconds, setInternalElapsedSeconds] = (0, import_react9.useState)(initialSeconds);
+  const [internalIsRunning, setInternalIsRunning] = (0, import_react10.useState)(false);
+  const [internalElapsedSeconds, setInternalElapsedSeconds] = (0, import_react10.useState)(initialSeconds);
   const isRunning = isControlled ? controlledIsRunning : internalIsRunning;
   const elapsedSeconds = isControlled ? controlledElapsedSeconds ?? 0 : internalElapsedSeconds;
-  const intervalRef = (0, import_react9.useRef)(null);
-  const startTimeRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const intervalRef = (0, import_react10.useRef)(null);
+  const startTimeRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isControlled) return;
     if (isRunning) {
       intervalRef.current = setInterval(() => {
@@ -1093,7 +1409,7 @@ function Timer({
       }
     };
   }, [isRunning, isControlled, onTick]);
-  const handleStart = (0, import_react9.useCallback)(() => {
+  const handleStart = (0, import_react10.useCallback)(() => {
     const now = /* @__PURE__ */ new Date();
     startTimeRef.current = now;
     if (!isControlled) {
@@ -1101,13 +1417,13 @@ function Timer({
     }
     onStart?.(now);
   }, [isControlled, onStart]);
-  const handleStop = (0, import_react9.useCallback)(() => {
+  const handleStop = (0, import_react10.useCallback)(() => {
     if (!isControlled) {
       setInternalIsRunning(false);
     }
     onStop?.(elapsedSeconds);
   }, [isControlled, elapsedSeconds, onStop]);
-  const handleReset = (0, import_react9.useCallback)(() => {
+  const handleReset = (0, import_react10.useCallback)(() => {
     if (!isControlled) {
       setInternalIsRunning(false);
       setInternalElapsedSeconds(0);
@@ -1115,7 +1431,7 @@ function Timer({
     startTimeRef.current = null;
     onReset?.();
   }, [isControlled, onReset]);
-  const handleToggle = (0, import_react9.useCallback)(() => {
+  const handleToggle = (0, import_react10.useCallback)(() => {
     if (isRunning) {
       handleStop();
     } else {
@@ -1143,10 +1459,10 @@ function Timer({
     }
   };
   const styles = sizeClasses3[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `flex items-center ${styles.container} ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `font-mono font-bold text-gray-800 ${styles.time} tabular-nums`, children: formatTime(elapsedSeconds) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `flex items-center ${styles.container} ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `font-mono font-bold text-gray-800 ${styles.time} tabular-nums`, children: formatTime(elapsedSeconds) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -1160,14 +1476,14 @@ function Timer({
           title: isRunning ? "Pause" : "Start",
           children: isRunning ? (
             // Pause icon
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })
           ) : (
             // Play icon
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 5v14l11-7z" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M8 5v14l11-7z" }) })
           )
         }
       ),
-      elapsedSeconds > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      elapsedSeconds > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -1178,10 +1494,10 @@ function Timer({
               transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
             `,
           title: "Stop",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 6h12v12H6z" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6 6h12v12H6z" }) })
         }
       ),
-      showReset && elapsedSeconds > 0 && !isRunning && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      showReset && elapsedSeconds > 0 && !isRunning && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -1192,7 +1508,7 @@ function Timer({
               transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
             `,
           title: "Reset",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) })
         }
       )
     ] })
@@ -1202,6 +1518,7 @@ function Timer({
 0 && (module.exports = {
   Button,
   Card,
+  DataTable,
   DatePicker,
   EmptyState,
   FormButtonGroup,
@@ -1217,6 +1534,7 @@ function Timer({
   Table,
   Tabs,
   Timer,
+  createFilterOptions,
   formatTime
 });
 //# sourceMappingURL=index.js.map