@kreativa/ui 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -386,6 +386,9 @@ function Table({
   ] }) });
 }
 
+// src/components/DataTable.tsx
+import { useState as useState3, useMemo as useMemo3, useCallback } from "react";
+
 // src/components/Select.tsx
 import { useState as useState2, useRef, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -569,9 +572,245 @@ function Select({
   ] });
 }
 
-// src/components/Tabs.tsx
-import { useState as useState3 } from "react";
+// src/components/DataTable.tsx
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function ColumnFilter({ column, value, onChange }) {
+  const filterType = column.filterType ?? "text";
+  if (filterType === "none") {
+    return /* @__PURE__ */ jsx15("div", { className: "h-9" });
+  }
+  if (filterType === "select" && column.filterOptions) {
+    return /* @__PURE__ */ jsx15(
+      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__ */ jsx15(
+      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__ */ jsx15(
+      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__ */ jsx15(
+    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] = useState3({});
+  const [sortKey, setSortKey] = useState3(initialSortKey || null);
+  const [sortDirection, setSortDirection] = useState3(initialSortDirection);
+  const handleFilterChange = 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 = useCallback(() => {
+    setFilters({});
+  }, []);
+  const filteredData = useMemo3(() => {
+    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 = useMemo3(() => {
+    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]);
+  useMemo3(() => {
+    onFilteredDataChange?.(sortedData);
+  }, [sortedData, onFilteredDataChange]);
+  const handleSort = useCallback((columnKey) => {
+    if (sortKey === columnKey) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(columnKey);
+      setSortDirection("asc");
+    }
+  }, [sortKey]);
+  const tableColumns = useMemo3(() => {
+    return columns.map((column) => {
+      const isSortable = column.sortable !== false && column.filterType !== "none";
+      const isCurrentSort = sortKey === column.key;
+      return {
+        key: column.key,
+        header: isSortable ? /* @__PURE__ */ jsxs11(
+          "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__ */ jsx15("span", { className: "text-primary-600", children: sortDirection === "asc" ? "\u2191" : "\u2193" }) : /* @__PURE__ */ jsx15("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__ */ jsxs11("div", { className, children: [
+    showFilters && /* @__PURE__ */ jsxs11("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxs11("span", { className: "text-sm text-gray-500", children: [
+          "Visar ",
+          sortedData.length,
+          " av ",
+          data.length
+        ] }),
+        hasActiveFilters && /* @__PURE__ */ jsx15(
+          "button",
+          {
+            onClick: clearFilters,
+            className: "text-sm text-primary-600 hover:underline",
+            children: "Rensa filter"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx15("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__ */ jsxs11("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx15("label", { className: "text-xs text-gray-500 mb-1 block truncate", children: column.header }),
+        /* @__PURE__ */ jsx15(
+          ColumnFilter,
+          {
+            column,
+            value: filters[column.key] || "",
+            onChange: (value) => handleFilterChange(column.key, value)
+          }
+        )
+      ] }, column.key)) })
+    ] }),
+    /* @__PURE__ */ jsx15(
+      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
+import { useState as useState4 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function Tabs({
   tabs,
   activeTab: controlledActiveTab,
@@ -582,7 +821,7 @@ function Tabs({
   className = ""
 }) {
   const isControlled = controlledActiveTab !== void 0;
-  const [internalActiveTab, setInternalActiveTab] = useState3(
+  const [internalActiveTab, setInternalActiveTab] = useState4(
     defaultTab || tabs.find((t) => !t.disabled)?.id || tabs[0]?.id
   );
   const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
@@ -650,11 +889,11 @@ function Tabs({
     }
   };
   const styles = variantStyles[variant];
-  return /* @__PURE__ */ jsxs11("div", { className, children: [
-    /* @__PURE__ */ jsx15("div", { className: `flex ${styles.container}`, role: "tablist", children: tabs.map((tab, index) => {
+  return /* @__PURE__ */ jsxs12("div", { className, children: [
+    /* @__PURE__ */ jsx16("div", { className: `flex ${styles.container}`, role: "tablist", children: tabs.map((tab, index) => {
       const isActive = tab.id === activeTab;
       const isDisabled = tab.disabled ?? false;
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -666,7 +905,7 @@ function Tabs({
           className: styles.tab(isActive, isDisabled),
           onClick: () => handleTabClick(tab),
           onKeyDown: (e) => handleKeyDown(e, index),
-          children: /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2", children: [
+          children: /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-2", children: [
             tab.icon,
             tab.label
           ] })
@@ -674,13 +913,13 @@ function Tabs({
         tab.id
       );
     }) }),
-    renderContent && activeContent && /* @__PURE__ */ jsx15("div", { className: "pt-4", role: "tabpanel", children: activeContent })
+    renderContent && activeContent && /* @__PURE__ */ jsx16("div", { className: "pt-4", role: "tabpanel", children: activeContent })
   ] });
 }
 
 // src/components/DatePicker.tsx
-import { useState as useState4, useRef as useRef2, useEffect as useEffect3, useMemo as useMemo3 } from "react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState5, useRef as useRef2, useEffect as useEffect3, useMemo as useMemo4 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTHS = [
   "January",
@@ -783,11 +1022,11 @@ function DatePicker({
   disabled = false,
   className = ""
 }) {
-  const [isOpen, setIsOpen] = useState4(false);
-  const [viewDate, setViewDate] = useState4(/* @__PURE__ */ new Date());
-  const [hoverDate, setHoverDate] = useState4(null);
+  const [isOpen, setIsOpen] = useState5(false);
+  const [viewDate, setViewDate] = useState5(/* @__PURE__ */ new Date());
+  const [hoverDate, setHoverDate] = useState5(null);
   const containerRef = useRef2(null);
-  const [selectingEnd, setSelectingEnd] = useState4(false);
+  const [selectingEnd, setSelectingEnd] = useState5(false);
   useEffect3(() => {
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -798,7 +1037,7 @@ function DatePicker({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const displayText = useMemo3(() => {
+  const displayText = useMemo4(() => {
     if (!value) return "";
     if (range) {
       const rangeValue = value;
@@ -815,7 +1054,7 @@ function DatePicker({
     }
     return formatDate(value);
   }, [value, range]);
-  const calendarDays = useMemo3(() => {
+  const calendarDays = useMemo4(() => {
     const year = viewDate.getFullYear();
     const month = viewDate.getMonth();
     const firstDay = new Date(year, month, 1);
@@ -898,9 +1137,9 @@ function DatePicker({
   };
   const today = /* @__PURE__ */ new Date();
   today.setHours(0, 0, 0, 0);
-  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: `relative ${className}`, children: [
-    label && /* @__PURE__ */ jsx16("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs13("div", { ref: containerRef, className: `relative ${className}`, children: [
+    label && /* @__PURE__ */ jsx17("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+    /* @__PURE__ */ jsx17(
       "div",
       {
         className: `
@@ -910,15 +1149,15 @@ function DatePicker({
           transition-all
         `,
         onClick: () => !disabled && setIsOpen(!isOpen),
-        children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx16("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
-          /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("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__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx17("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
+          /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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__ */ jsx16("p", { className: "mt-1 text-xs text-red-600", children: error }),
-    isOpen && /* @__PURE__ */ jsx16("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-4", children: /* @__PURE__ */ jsxs12("div", { className: range ? "flex gap-4" : "", children: [
-      range && /* @__PURE__ */ jsx16("div", { className: "border-r border-gray-100 pr-4 space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ jsx16(
+    error && /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-red-600", children: error }),
+    isOpen && /* @__PURE__ */ jsx17("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-4", children: /* @__PURE__ */ jsxs13("div", { className: range ? "flex gap-4" : "", children: [
+      range && /* @__PURE__ */ jsx17("div", { className: "border-r border-gray-100 pr-4 space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -928,42 +1167,42 @@ function DatePicker({
         },
         preset.label
       )) }),
-      /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-4", children: [
-          /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
               className: "p-1 hover:bg-gray-100 rounded",
               onClick: goToPrevMonth,
-              children: /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              children: /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          /* @__PURE__ */ jsxs12("span", { className: "text-sm font-semibold text-gray-800", children: [
+          /* @__PURE__ */ jsxs13("span", { className: "text-sm font-semibold text-gray-800", children: [
             MONTHS[viewDate.getMonth()],
             " ",
             viewDate.getFullYear()
           ] }),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
               className: "p-1 hover:bg-gray-100 rounded",
               onClick: goToNextMonth,
-              children: /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx16("div", { className: "text-center text-xs font-medium text-gray-500 py-1", children: day }, day)) }),
-        /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+        /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx17("div", { className: "text-center text-xs font-medium text-gray-500 py-1", children: day }, day)) }),
+        /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
           if (!date) {
-            return /* @__PURE__ */ jsx16("div", { className: "w-9 h-9" }, `empty-${index}`);
+            return /* @__PURE__ */ jsx17("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__ */ jsx16(
+          return /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -989,8 +1228,8 @@ function DatePicker({
 }
 
 // src/components/Timer.tsx
-import { useState as useState5, useEffect as useEffect4, useCallback, useRef as useRef3 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState6, useEffect as useEffect4, useCallback as useCallback2, useRef as useRef3 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatTime(totalSeconds) {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor(totalSeconds % 3600 / 60);
@@ -1014,8 +1253,8 @@ function Timer({
   elapsedSeconds: controlledElapsedSeconds
 }) {
   const isControlled = controlledIsRunning !== void 0;
-  const [internalIsRunning, setInternalIsRunning] = useState5(false);
-  const [internalElapsedSeconds, setInternalElapsedSeconds] = useState5(initialSeconds);
+  const [internalIsRunning, setInternalIsRunning] = useState6(false);
+  const [internalElapsedSeconds, setInternalElapsedSeconds] = useState6(initialSeconds);
   const isRunning = isControlled ? controlledIsRunning : internalIsRunning;
   const elapsedSeconds = isControlled ? controlledElapsedSeconds ?? 0 : internalElapsedSeconds;
   const intervalRef = useRef3(null);
@@ -1050,7 +1289,7 @@ function Timer({
       }
     };
   }, [isRunning, isControlled, onTick]);
-  const handleStart = useCallback(() => {
+  const handleStart = useCallback2(() => {
     const now = /* @__PURE__ */ new Date();
     startTimeRef.current = now;
     if (!isControlled) {
@@ -1058,13 +1297,13 @@ function Timer({
     }
     onStart?.(now);
   }, [isControlled, onStart]);
-  const handleStop = useCallback(() => {
+  const handleStop = useCallback2(() => {
     if (!isControlled) {
       setInternalIsRunning(false);
     }
     onStop?.(elapsedSeconds);
   }, [isControlled, elapsedSeconds, onStop]);
-  const handleReset = useCallback(() => {
+  const handleReset = useCallback2(() => {
     if (!isControlled) {
       setInternalIsRunning(false);
       setInternalElapsedSeconds(0);
@@ -1072,7 +1311,7 @@ function Timer({
     startTimeRef.current = null;
     onReset?.();
   }, [isControlled, onReset]);
-  const handleToggle = useCallback(() => {
+  const handleToggle = useCallback2(() => {
     if (isRunning) {
       handleStop();
     } else {
@@ -1100,10 +1339,10 @@ function Timer({
     }
   };
   const styles = sizeClasses3[size];
-  return /* @__PURE__ */ jsxs13("div", { className: `flex items-center ${styles.container} ${className}`, children: [
-    /* @__PURE__ */ jsx17("div", { className: `font-mono font-bold text-gray-800 ${styles.time} tabular-nums`, children: formatTime(elapsedSeconds) }),
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs14("div", { className: `flex items-center ${styles.container} ${className}`, children: [
+    /* @__PURE__ */ jsx18("div", { className: `font-mono font-bold text-gray-800 ${styles.time} tabular-nums`, children: formatTime(elapsedSeconds) }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -1117,14 +1356,14 @@ function Timer({
           title: isRunning ? "Pause" : "Start",
           children: isRunning ? (
             // Pause icon
-            /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })
+            /* @__PURE__ */ jsx18("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })
           ) : (
             // Play icon
-            /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M8 5v14l11-7z" }) })
+            /* @__PURE__ */ jsx18("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { d: "M8 5v14l11-7z" }) })
           )
         }
       ),
-      elapsedSeconds > 0 && /* @__PURE__ */ jsx17(
+      elapsedSeconds > 0 && /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -1135,10 +1374,10 @@ function Timer({
               transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
             `,
           title: "Stop",
-          children: /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M6 6h12v12H6z" }) })
+          children: /* @__PURE__ */ jsx18("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { d: "M6 6h12v12H6z" }) })
         }
       ),
-      showReset && elapsedSeconds > 0 && !isRunning && /* @__PURE__ */ jsx17(
+      showReset && elapsedSeconds > 0 && !isRunning && /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -1149,7 +1388,7 @@ function Timer({
               transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
             `,
           title: "Reset",
-          children: /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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__ */ jsx18("svg", { className: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("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" }) })
         }
       )
     ] })
@@ -1158,6 +1397,7 @@ function Timer({
 export {
   Button,
   Card,
+  DataTable,
   DatePicker,
   EmptyState,
   FormButtonGroup,
@@ -1173,6 +1413,7 @@ export {
   Table,
   Tabs,
   Timer,
+  createFilterOptions,
   formatTime
 };
 //# sourceMappingURL=index.mjs.map