@motor-hero/ui-kit 0.37.4 → 0.39.0

package/dist/index.js

@@ -903,7 +903,7 @@ function ConfirmDialog({
           {
             onClick: onConfirm,
             disabled: loading,
-            className: `inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${variant === "destructive" ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90"}`,
+            className: `inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${variant === "destructive" ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90"}`,
             children: loading ? "Aguarde..." : confirmLabel
           }
         )
@@ -1456,7 +1456,7 @@ function FormDialogLayout({
         {
           type: "submit",
           disabled: isSubmitting || isDisabled,
-          className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 cursor-pointer disabled:pointer-events-none disabled:opacity-50",
+          className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 cursor-pointer disabled:pointer-events-none disabled:opacity-50",
           children: isSubmitting ? "Salvando..." : submitLabel
         }
       )
@@ -2052,19 +2052,38 @@ function ResponsiveDataView({
   cards,
   isEmpty,
   isLoading,
+  isBusy = false,
   emptyIcon,
   emptyTitle = "Nenhum registro encontrado",
   emptyDescription,
+  emptyAction,
   pagination
 }) {
+  if (!isLoading && !isBusy && isEmpty) {
+    return /* @__PURE__ */ jsx25("div", { className: "rounded-md border", children: /* @__PURE__ */ jsx25(
+      EmptyState,
+      {
+        icon: emptyIcon,
+        title: emptyTitle,
+        description: emptyDescription,
+        action: emptyAction
+      }
+    ) });
+  }
+  const busyClass = isBusy && "pointer-events-none opacity-50";
   return /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx25("div", { className: "hidden overflow-x-auto rounded-md border md:block", children: table }),
-    /* @__PURE__ */ jsx25("div", { className: "md:hidden", children: cards }),
-    !isLoading && isEmpty && /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
-      emptyIcon && /* @__PURE__ */ jsx25("div", { className: "mb-4 text-muted-foreground", children: emptyIcon }),
-      /* @__PURE__ */ jsx25("h3", { className: "text-lg font-semibold tracking-tight", children: emptyTitle }),
-      emptyDescription && /* @__PURE__ */ jsx25("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: emptyDescription })
-    ] }),
+    /* @__PURE__ */ jsx25(
+      "div",
+      {
+        "aria-busy": isBusy,
+        className: cn(
+          "hidden overflow-x-auto rounded-md border transition-opacity md:block",
+          busyClass
+        ),
+        children: table
+      }
+    ),
+    /* @__PURE__ */ jsx25("div", { "aria-busy": isBusy, className: cn("transition-opacity md:hidden", busyClass), children: cards }),
     pagination
   ] });
 }
@@ -2263,24 +2282,24 @@ function StatCard({ label, value, detail, icon, isLoading }) {
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var variantClasses = {
   neutral: {
-    badge: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
-    dot: "bg-gray-400"
+    badge: "bg-[var(--status-neutral-surface,#f3f4f6)] text-[var(--status-neutral-text,#374151)]",
+    dot: "bg-[var(--status-neutral,#9ca3af)]"
   },
   info: {
-    badge: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-400",
-    dot: "bg-blue-500"
+    badge: "bg-[var(--status-info-surface,#dbeafe)] text-[var(--status-info-text,#1d4ed8)]",
+    dot: "bg-[var(--status-info,#3b82f6)]"
   },
   success: {
-    badge: "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400",
-    dot: "bg-green-500"
+    badge: "bg-[var(--status-success-surface,#dcfce7)] text-[var(--status-success-text,#15803d)]",
+    dot: "bg-[var(--status-success,#22c55e)]"
   },
   danger: {
-    badge: "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400",
-    dot: "bg-red-500"
+    badge: "bg-[var(--status-danger-surface,#fee2e2)] text-[var(--status-danger-text,#b91c1c)]",
+    dot: "bg-[var(--status-danger,#ef4444)]"
   },
   warning: {
-    badge: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400",
-    dot: "bg-amber-500"
+    badge: "bg-[var(--status-warning-surface,#fef3c7)] text-[var(--status-warning-text,#b45309)]",
+    dot: "bg-[var(--status-warning,#f59e0b)]"
   }
 };
 function StatusBadge({
@@ -2324,7 +2343,12 @@ function StatusDot({ active, label, className }) {
 // src/components/table-skeleton.tsx
 import { Fragment as Fragment7, jsx as jsx31 } from "react/jsx-runtime";
 function TableSkeleton({ rows = 5, columns = 4 }) {
-  return /* @__PURE__ */ jsx31(Fragment7, { children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx31("tr", { className: "border-b transition-colors", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx31("td", { className: "p-4 align-middle", children: /* @__PURE__ */ jsx31("div", { className: "h-5 w-full animate-pulse rounded bg-muted" }) }, j)) }, i)) });
+  return /* @__PURE__ */ jsx31(Fragment7, { children: Array.from({ length: rows }).map((_, i) => (
+    // p-2/h-4 espelha o TableCell real. Com p-4/h-5 a linha do skeleton
+    // ficava ~16px mais alta que a linha de dados, e a tabela encolhia
+    // visivelmente quando a resposta chegava.
+    /* @__PURE__ */ jsx31("tr", { className: "border-b transition-colors", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx31("td", { className: "p-2 align-middle first:pl-4 last:pr-4", children: /* @__PURE__ */ jsx31("div", { className: "h-4 w-full animate-pulse rounded bg-muted" }) }, j)) }, i)
+  )) });
 }
 
 // src/components/toaster.tsx