@marcoschwartz/lite-ui 0.19.0 → 0.20.0

package/dist/index.d.mts

@@ -406,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

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

package/dist/index.js

@@ -2082,8 +2082,8 @@ function Table({
   responsive = true
 }) {
   const { theme } = useTheme();
-  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: [
+  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;
@@ -2124,11 +2124,13 @@ function Table({
       ] }),
       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: [
+    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" : ""
+          hoverable ? "hover:shadow-md transition-shadow" : "",
+          "relative isolate"
+          // Ensure cards are isolated layers
         ].filter(Boolean).join(" ");
         return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "div",
@@ -4109,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