@kreativa/ui 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -286,7 +286,7 @@ function FormButtonGroup({
 }
 
 // src/components/Table.tsx
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef, useCallback } from "react";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function Table({
   data,
@@ -295,10 +295,15 @@ function Table({
   onRowClick,
   loading = false,
   emptyMessage = "No data available",
-  className = ""
+  className = "",
+  resizable = false,
+  fixedLayout = false
 }) {
   const [sortKey, setSortKey] = useState(null);
   const [sortDirection, setSortDirection] = useState(null);
+  const [columnWidths, setColumnWidths] = useState({});
+  const tableRef = useRef(null);
+  const resizingRef = useRef(null);
   const handleHeaderClick = (column) => {
     if (!column.sortable) return;
     if (sortKey === column.key) {
@@ -327,70 +332,140 @@ function Table({
     });
     return sortDirection === "desc" ? sorted.reverse() : sorted;
   }, [data, columns, sortKey, sortDirection]);
+  const handleResizeStart = 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 = 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 = 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__ */ jsx13("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
+      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-gray-400 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
+      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-primary-600 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
     }
-    return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
+    return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-primary-600 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ jsxs9("table", { className: "w-full border-collapse", children: [
-    /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column) => /* @__PURE__ */ jsx13(
-      "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__ */ jsx13("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ jsxs9(
+    "table",
+    {
+      ref: tableRef,
+      className: "w-full border-collapse",
+      style: { tableLayout: fixedLayout || resizable ? "fixed" : "auto" },
+      children: [
+        /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column, index) => /* @__PURE__ */ jsxs9(
+          "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__ */ jsxs9("div", { className: `flex items-center gap-1 ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`, children: [
-          /* @__PURE__ */ jsx13("span", { children: column.header }),
-          getSortIcon(column)
-        ] })
-      },
-      column.key
-    )) }) }),
-    /* @__PURE__ */ jsx13("tbody", { children: loading ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ jsx13("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx13("span", { children: "Loading..." })
-    ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ jsx13(
-      "tr",
-      {
-        className: `
+            style: getColumnStyle(column),
+            onClick: () => handleHeaderClick(column),
+            children: [
+              /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  className: `flex items-center gap-1 overflow-hidden ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx13("span", { className: "truncate", children: column.header }),
+                    getSortIcon(column)
+                  ]
+                }
+              ),
+              resizable && index < columns.length - 1 && /* @__PURE__ */ jsx13(
+                "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__ */ jsx13("tbody", { children: loading ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx13("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
+          /* @__PURE__ */ jsx13("span", { children: "Loading..." })
+        ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ jsx13(
+          "tr",
+          {
+            className: `
                   border-b border-gray-100 hover:bg-gray-50 transition-colors
                   ${onRowClick ? "cursor-pointer" : ""}
                 `,
-        onClick: () => onRowClick?.(item),
-        children: columns.map((column) => /* @__PURE__ */ jsx13(
-          "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__ */ jsx13(
+              "td",
+              {
+                className: `px-4 py-3 text-sm text-gray-800 overflow-hidden ${alignmentClasses[column.align ?? "left"]}`,
+                style: getColumnStyle(column),
+                children: /* @__PURE__ */ jsx13("div", { className: "truncate", children: column.render(item) })
+              },
+              column.key
+            ))
           },
-          column.key
-        ))
-      },
-      getRowKey(item)
-    )) })
-  ] }) });
+          getRowKey(item)
+        )) })
+      ]
+    }
+  ) });
 }
 
 // src/components/DataTable.tsx
-import { useState as useState3, useMemo as useMemo3, useCallback } from "react";
+import { useState as useState3, useMemo as useMemo3, useCallback as useCallback2 } from "react";
 
 // src/components/Select.tsx
-import { useState as useState2, useRef, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Select({
   options,
@@ -407,8 +482,8 @@ function Select({
   const [isOpen, setIsOpen] = useState2(false);
   const [searchTerm, setSearchTerm] = useState2("");
   const [highlightedIndex, setHighlightedIndex] = useState2(0);
-  const containerRef = useRef(null);
-  const inputRef = useRef(null);
+  const containerRef = useRef2(null);
+  const inputRef = useRef2(null);
   const filteredOptions = useMemo2(() => {
     if (!searchTerm) return options;
     const term = searchTerm.toLowerCase();
@@ -646,7 +721,7 @@ function DataTable({
   const [filters, setFilters] = useState3({});
   const [sortKey, setSortKey] = useState3(initialSortKey || null);
   const [sortDirection, setSortDirection] = useState3(initialSortDirection);
-  const handleFilterChange = useCallback((columnKey, value) => {
+  const handleFilterChange = useCallback2((columnKey, value) => {
     setFilters((prev) => {
       const next = { ...prev };
       if (value === "" || Array.isArray(value) && value.length === 0) {
@@ -657,7 +732,7 @@ function DataTable({
       return next;
     });
   }, []);
-  const clearFilters = useCallback(() => {
+  const clearFilters = useCallback2(() => {
     setFilters({});
   }, []);
   const filteredData = useMemo3(() => {
@@ -717,7 +792,7 @@ function DataTable({
   useMemo3(() => {
     onFilteredDataChange?.(sortedData);
   }, [sortedData, onFilteredDataChange]);
-  const handleSort = useCallback((columnKey) => {
+  const handleSort = useCallback2((columnKey) => {
     if (sortKey === columnKey) {
       setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
     } else {
@@ -918,7 +993,7 @@ function Tabs({
 }
 
 // src/components/DatePicker.tsx
-import { useState as useState5, useRef as useRef2, useEffect as useEffect3, useMemo as useMemo4 } from "react";
+import { useState as useState5, useRef as useRef3, 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 = [
@@ -1025,7 +1100,7 @@ function DatePicker({
   const [isOpen, setIsOpen] = useState5(false);
   const [viewDate, setViewDate] = useState5(/* @__PURE__ */ new Date());
   const [hoverDate, setHoverDate] = useState5(null);
-  const containerRef = useRef2(null);
+  const containerRef = useRef3(null);
   const [selectingEnd, setSelectingEnd] = useState5(false);
   useEffect3(() => {
     const handleClickOutside = (e) => {
@@ -1228,7 +1303,7 @@ function DatePicker({
 }
 
 // src/components/Timer.tsx
-import { useState as useState6, useEffect as useEffect4, useCallback as useCallback2, useRef as useRef3 } from "react";
+import { useState as useState6, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef4 } from "react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatTime(totalSeconds) {
   const hours = Math.floor(totalSeconds / 3600);
@@ -1257,8 +1332,8 @@ function Timer({
   const [internalElapsedSeconds, setInternalElapsedSeconds] = useState6(initialSeconds);
   const isRunning = isControlled ? controlledIsRunning : internalIsRunning;
   const elapsedSeconds = isControlled ? controlledElapsedSeconds ?? 0 : internalElapsedSeconds;
-  const intervalRef = useRef3(null);
-  const startTimeRef = useRef3(null);
+  const intervalRef = useRef4(null);
+  const startTimeRef = useRef4(null);
   useEffect4(() => {
     return () => {
       if (intervalRef.current) {
@@ -1289,7 +1364,7 @@ function Timer({
       }
     };
   }, [isRunning, isControlled, onTick]);
-  const handleStart = useCallback2(() => {
+  const handleStart = useCallback3(() => {
     const now = /* @__PURE__ */ new Date();
     startTimeRef.current = now;
     if (!isControlled) {
@@ -1297,13 +1372,13 @@ function Timer({
     }
     onStart?.(now);
   }, [isControlled, onStart]);
-  const handleStop = useCallback2(() => {
+  const handleStop = useCallback3(() => {
     if (!isControlled) {
       setInternalIsRunning(false);
     }
     onStop?.(elapsedSeconds);
   }, [isControlled, elapsedSeconds, onStop]);
-  const handleReset = useCallback2(() => {
+  const handleReset = useCallback3(() => {
     if (!isControlled) {
       setInternalIsRunning(false);
       setInternalElapsedSeconds(0);
@@ -1311,7 +1386,7 @@ function Timer({
     startTimeRef.current = null;
     onReset?.();
   }, [isControlled, onReset]);
-  const handleToggle = useCallback2(() => {
+  const handleToggle = useCallback3(() => {
     if (isRunning) {
       handleStop();
     } else {