@marcoschwartz/lite-ui 0.19.0 → 0.20.0

package/dist/index.mjs

@@ -1920,7 +1920,7 @@ var Tabs = ({
 };
 
 // src/components/Table.tsx
-import { Fragment as Fragment14, jsx as jsx90, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs18 } from "react/jsx-runtime";
 function Table({
   columns,
   data,
@@ -1931,8 +1931,8 @@ function Table({
   responsive = true
 }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs18(Fragment14, { children: [
-    /* @__PURE__ */ jsxs18("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto ${className}`, children: [
+  return /* @__PURE__ */ jsxs18("div", { className, children: [
+    /* @__PURE__ */ jsxs18("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto`, children: [
       /* @__PURE__ */ jsxs18("table", { className: "w-full text-left", children: [
         /* @__PURE__ */ jsx90("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx90("tr", { children: columns.map((column, colIndex) => {
           const isLast = colIndex === columns.length - 1;
@@ -1973,11 +1973,13 @@ function Table({
       ] }),
       data.length === 0 && /* @__PURE__ */ jsx90("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
     ] }),
-    responsive && /* @__PURE__ */ jsxs18("div", { className: `md:hidden space-y-4 ${className}`, children: [
+    responsive && /* @__PURE__ */ jsxs18("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" : ""
+          hoverable ? "hover:shadow-md transition-shadow" : "",
+          "relative isolate"
+          // Ensure cards are isolated layers
         ].filter(Boolean).join(" ");
         return /* @__PURE__ */ jsx90(
           "div",
@@ -3958,48 +3960,87 @@ var Stepper = ({
   steps,
   currentStep,
   orientation = "horizontal",
-  className = ""
+  className = "",
+  compact = false
 }) => {
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ jsx103("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__ */ jsxs30(React22.Fragment, { children: [
-      /* @__PURE__ */ jsxs30("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
-        /* @__PURE__ */ jsx103("div", { className: "flex items-center", children: /* @__PURE__ */ jsx103(
-          "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__ */ jsx103(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx103(
-              "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__ */ jsxs30("div", { className: `${isHorizontal ? "flex items-start w-full" : "flex flex-col"} ${className}`, children: [
+    shouldShowCounter && /* @__PURE__ */ jsx103("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ jsxs30("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__ */ jsxs30(React22.Fragment, { children: [
+        /* @__PURE__ */ jsxs30("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__ */ jsxs30("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-col items-center flex-shrink-0"}`, children: [
+            /* @__PURE__ */ jsx103(
+              "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__ */ jsx103(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx103(
+                  "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__ */ jsx103(
+              "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__ */ jsxs30("div", { className: `${isHorizontal ? "mt-3 text-center" : "ml-4 flex-1 min-h-[40px] flex flex-col justify-center"}`, children: [
+            /* @__PURE__ */ jsx103(
+              "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__ */ jsx103("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-nowrap", children: step.description })
+          ] })
+        ] }),
+        !isLast && isHorizontal && /* @__PURE__ */ jsx103("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__ */ jsx103(
+          "div",
+          {
+            className: `h-0.5 w-full ${isCompleted ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
           }
-        ) }),
-        /* @__PURE__ */ jsxs30("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
-          /* @__PURE__ */ jsx103(
-            "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__ */ jsx103("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
-        ] })
-      ] }),
-      !isLast && /* @__PURE__ */ jsx103(
-        "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