@marcoschwartz/lite-ui 0.18.1 → 0.20.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;
@@ -405,6 +406,7 @@ interface StepperProps {
     currentStep: number;
     orientation?: 'horizontal' | 'vertical';
     className?: string;
+    compact?: boolean;
 }
 declare const Stepper: React.FC<StepperProps>;
 

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;
@@ -405,6 +406,7 @@ interface StepperProps {
     currentStep: number;
     orientation?: 'horizontal' | 'vertical';
     className?: string;
+    compact?: boolean;
 }
 declare const Stepper: React.FC<StepperProps>;
 

package/dist/index.js

@@ -2078,49 +2078,81 @@ 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)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto`, 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-3", 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" : "",
+          "relative isolate"
+          // Ensure cards are isolated layers
         ].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" })
+    ] })
   ] });
 }
 
@@ -4079,48 +4111,87 @@ var Stepper = ({
   steps,
   currentStep,
   orientation = "horizontal",
-  className = ""
+  className = "",
+  compact = false
 }) => {
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
+  const getStepVisibility = (index) => {
+    if (!isHorizontal || steps.length <= 3) {
+      return { mobile: true, desktop: true };
+    }
     const stepNumber = index + 1;
-    const isActive = stepNumber === currentStep;
-    const isCompleted = stepNumber < currentStep;
-    const isLast = index === steps.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_react22.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-          "div",
-          {
-            className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
-            children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-              "span",
+    const distance = Math.abs(stepNumber - currentStep);
+    const mobileVisible = distance <= 1;
+    const desktopVisible = !compact;
+    return { mobile: mobileVisible, desktop: desktopVisible };
+  };
+  const shouldShowCounter = isHorizontal && steps.length > 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `${isHorizontal ? "flex items-start w-full" : "flex flex-col"} ${className}`, children: [
+    shouldShowCounter && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("span", { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: [
+      currentStep,
+      "/",
+      steps.length
+    ] }) }),
+    steps.map((step, index) => {
+      const stepNumber = index + 1;
+      const isActive = stepNumber === currentStep;
+      const isCompleted = stepNumber < currentStep;
+      const isLast = index === steps.length - 1;
+      const visibility = getStepVisibility(index);
+      const visibleMobileSteps = steps.filter((_, i) => getStepVisibility(i).mobile);
+      const isLastVisibleMobile = index === steps.map((_, i) => i).filter((i) => getStepVisibility(i).mobile).slice(-1)[0];
+      return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_react22.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `
+              flex ${isHorizontal ? "flex-col items-center flex-shrink-0" : "flex-row items-start"}
+              ${isHorizontal ? "" : isLast ? "" : "mb-6"}
+              ${!visibility.mobile ? "hidden md:flex" : ""}
+              ${!visibility.desktop && visibility.mobile ? "md:hidden" : ""}
+            `, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-col items-center flex-shrink-0"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              "div",
               {
-                className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
-                children: stepNumber
+                className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
+                children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                  "span",
+                  {
+                    className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
+                    children: stepNumber
+                  }
+                )
+              }
+            ),
+            !isLast && !isHorizontal && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              "div",
+              {
+                className: `w-0.5 flex-1 min-h-[24px] ${isCompleted ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
               }
             )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `${isHorizontal ? "mt-3 text-center" : "ml-4 flex-1 min-h-[40px] flex flex-col justify-center"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              "p",
+              {
+                className: `text-sm font-medium whitespace-nowrap ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
+                children: step.label
+              }
+            ),
+            step.description && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-nowrap", children: step.description })
+          ] })
+        ] }),
+        !isLast && isHorizontal && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: `
+                flex items-start pt-5 mx-4 min-w-[80px] max-w-[200px] flex-1
+                ${!visibility.mobile || isLastVisibleMobile ? "hidden md:flex" : ""}
+                ${!visibility.desktop && visibility.mobile ? "md:hidden" : ""}
+              `, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+          "div",
+          {
+            className: `h-0.5 w-full ${isCompleted ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-            "p",
-            {
-              className: `text-sm font-medium ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
-              children: step.label
-            }
-          ),
-          step.description && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
-        ] })
-      ] }),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-        "div",
-        {
-          className: `${isHorizontal ? "flex-1 h-0.5 mx-4" : "w-0.5 h-full ml-5 -mt-8"} ${isCompleted || isActive && stepNumber < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
-        }
-      )
-    ] }, index);
-  }) });
+        ) })
+      ] }, index);
+    })
+  ] });
 };
 
 // src/components/Divider.tsx