@marcoschwartz/lite-ui 0.18.0 → 0.19.0

package/dist/index.d.mts

@@ -220,8 +220,9 @@ interface TableProps<T = any> {
     striped?: boolean;
     hoverable?: boolean;
     className?: string;
+    responsive?: boolean;
 }
-declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, responsive, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     currentPage: number;

package/dist/index.d.ts

@@ -220,8 +220,9 @@ interface TableProps<T = any> {
     striped?: boolean;
     hoverable?: boolean;
     className?: string;
+    responsive?: boolean;
 }
-declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, responsive, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     currentPage: number;

package/dist/index.js

@@ -2078,49 +2078,79 @@ function Table({
   keyField = "id",
   striped = false,
   hoverable = true,
-  className = ""
+  className = "",
+  responsive = true
 }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: `overflow-x-auto ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("table", { className: "w-full text-left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tr", { children: columns.map((column, colIndex) => {
-        const isLast = colIndex === columns.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          "th",
-          {
-            className: isLast ? "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
-            style: { width: column.width },
-            children: column.title
-          },
-          column.key
-        );
-      }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
-        const rowClasses = [
-          striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : "",
-          hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("table", { className: "w-full text-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tr", { children: columns.map((column, colIndex) => {
+          const isLast = colIndex === columns.length - 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "th",
+            {
+              className: isLast ? "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
+              style: { width: column.width },
+              children: column.title
+            },
+            column.key
+          );
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
+          const rowClasses = [
+            striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : "",
+            hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "tr",
+            {
+              className: rowClasses,
+              children: columns.map((column, colIndex) => {
+                const isLast = colIndex === columns.length - 1;
+                return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "td",
+                  {
+                    className: isLast ? "px-6 py-4 text-sm text-gray-900 dark:text-gray-100 overflow-visible" : "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
+                    children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key]
+                  },
+                  column.key
+                );
+              })
+            },
+            row[keyField] || rowIndex
+          );
+        }) })
+      ] }),
+      data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+    ] }),
+    responsive && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: `md:hidden space-y-4 ${className}`, children: [
+      data.map((row, rowIndex) => {
+        const cardClasses = [
+          "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm",
+          hoverable ? "hover:shadow-md transition-shadow" : ""
         ].filter(Boolean).join(" ");
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-          "tr",
+          "div",
           {
-            className: rowClasses,
-            children: columns.map((column, colIndex) => {
-              const isLast = colIndex === columns.length - 1;
-              return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-                "td",
-                {
-                  className: isLast ? "px-6 py-4 text-sm text-gray-900 dark:text-gray-100 overflow-visible" : "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
-                  children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key]
-                },
-                column.key
-              );
-            })
+            className: cardClasses,
+            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+              "div",
+              {
+                className: "flex justify-between items-start py-2 border-b border-gray-100 dark:border-gray-800 last:border-b-0",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-shrink-0 mr-4", children: column.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-sm text-gray-900 dark:text-gray-100 text-right", children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key] })
+                ]
+              },
+              column.key
+            ))
           },
           row[keyField] || rowIndex
         );
-      }) })
-    ] }),
-    data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+      }),
+      data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+    ] })
   ] });
 }
 
@@ -3095,15 +3125,22 @@ var Slider = ({
     setInternalValue(newValue);
     onChange?.(newValue);
   };
-  const handleRangeMouseDown = (e, handle) => {
+  const handleRangeStart = (clientX, handle) => {
     if (disabled) return;
-    e.preventDefault();
     setIsDragging(handle);
   };
-  const handleRangeMouseMove = (e) => {
+  const handleRangeMouseDown = (e, handle) => {
+    e.preventDefault();
+    handleRangeStart(e.clientX, handle);
+  };
+  const handleRangeTouchStart = (e, handle) => {
+    e.preventDefault();
+    handleRangeStart(e.touches[0].clientX, handle);
+  };
+  const updateRangeValue = (clientX) => {
     if (!isDragging || !trackRef.current || disabled) return;
     const rect = trackRef.current.getBoundingClientRect();
-    const percentage2 = Math.max(0, Math.min(100, (e.clientX - rect.left) / rect.width * 100));
+    const percentage2 = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
     const newValue = Math.round(percentage2 / 100 * (max - min) / step) * step + min;
     if (isDragging === "min") {
       const newMin = Math.min(newValue, rangeValue[1] - step);
@@ -3117,16 +3154,28 @@ var Slider = ({
       onRangeChange?.(newRange);
     }
   };
-  const handleRangeMouseUp = () => {
+  const handleRangeMouseMove = (e) => {
+    updateRangeValue(e.clientX);
+  };
+  const handleRangeTouchMove = (e) => {
+    if (e.touches.length > 0) {
+      updateRangeValue(e.touches[0].clientX);
+    }
+  };
+  const handleRangeEnd = () => {
     setIsDragging(null);
   };
   import_react18.default.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleRangeMouseMove);
-      document.addEventListener("mouseup", handleRangeMouseUp);
+      document.addEventListener("mouseup", handleRangeEnd);
+      document.addEventListener("touchmove", handleRangeTouchMove);
+      document.addEventListener("touchend", handleRangeEnd);
       return () => {
         document.removeEventListener("mousemove", handleRangeMouseMove);
-        document.removeEventListener("mouseup", handleRangeMouseUp);
+        document.removeEventListener("mouseup", handleRangeEnd);
+        document.removeEventListener("touchmove", handleRangeTouchMove);
+        document.removeEventListener("touchend", handleRangeEnd);
       };
     }
   }, [isDragging, rangeValue]);
@@ -3163,6 +3212,7 @@ var Slider = ({
             `,
             style: { left: `${minPercentage}%` },
             onMouseDown: (e) => handleRangeMouseDown(e, "min"),
+            onTouchStart: (e) => handleRangeTouchStart(e, "min"),
             role: "slider",
             "aria-label": `${label ? label + " " : ""}minimum value`,
             "aria-valuemin": min,
@@ -3179,6 +3229,7 @@ var Slider = ({
             `,
             style: { left: `${maxPercentage}%` },
             onMouseDown: (e) => handleRangeMouseDown(e, "max"),
+            onTouchStart: (e) => handleRangeTouchStart(e, "max"),
             role: "slider",
             "aria-label": `${label ? label + " " : ""}maximum value`,
             "aria-valuemin": rangeValue[0],