@marcoschwartz/lite-ui 0.18.1 → 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" })
+    ] })
   ] });
 }