@motor-hero/ui-kit 0.37.4 → 0.39.0

package/dist/components/responsive-data-view.d.ts

@@ -4,11 +4,19 @@ interface ResponsiveDataViewProps {
     cards: ReactNode;
     isEmpty: boolean;
     isLoading: boolean;
+    /**
+     * Dados desatualizados na tela enquanto um refetch está em voo (ex.:
+     * `isPlaceholderData` do TanStack Query). Esmaece e bloqueia a interação
+     * com table/cards; a paginação continua clicável.
+     */
+    isBusy?: boolean;
     emptyIcon?: ReactNode;
     emptyTitle?: string;
     emptyDescription?: string;
+    /** CTA do estado vazio — normalmente o mesmo botão "Adicionar X" da página. */
+    emptyAction?: ReactNode;
     pagination?: ReactNode;
 }
-export declare function ResponsiveDataView({ table, cards, isEmpty, isLoading, emptyIcon, emptyTitle, emptyDescription, pagination, }: ResponsiveDataViewProps): import("react").JSX.Element;
+export declare function ResponsiveDataView({ table, cards, isEmpty, isLoading, isBusy, emptyIcon, emptyTitle, emptyDescription, emptyAction, pagination, }: ResponsiveDataViewProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=responsive-data-view.d.ts.map

package/dist/components/responsive-data-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-data-view.d.ts","sourceRoot":"","sources":["../../src/components/responsive-data-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,UAAU,uBAAuB;IAC/B,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAyC,EAAE,gBAAgB,EAAE,UAAU,GACrH,EAAE,uBAAuB,+BAezB"}
+{"version":3,"file":"responsive-data-view.d.ts","sourceRoot":"","sources":["../../src/components/responsive-data-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,UAAU,uBAAuB;IAC/B,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAS,EACT,MAAc,EACd,SAAS,EACT,UAAyC,EACzC,gBAAgB,EAChB,WAAW,EACX,UAAU,GACX,EAAE,uBAAuB,+BAmCzB"}

package/dist/components/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,CAAA;AAEb,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AA4BD,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,GAAU,EACV,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAelB"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,CAAA;AAEb,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAyCD,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,GAAU,EACV,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAelB"}

package/dist/components/table-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../src/components/table-skeleton.tsx"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAQ,EAAE,OAAW,EAAE,EAAE,kBAAkB,+BAc1E"}
+{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../src/components/table-skeleton.tsx"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAQ,EAAE,OAAW,EAAE,EAAE,kBAAkB,+BAiB1E"}

package/dist/index.cjs

@@ -980,7 +980,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
           }
         )
@@ -1533,7 +1533,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
         }
       )
@@ -2129,19 +2129,38 @@ function ResponsiveDataView({
   cards,
   isEmpty,
   isLoading,
+  isBusy = false,
   emptyIcon,
   emptyTitle = "Nenhum registro encontrado",
   emptyDescription,
+  emptyAction,
   pagination
 }) {
+  if (!isLoading && !isBusy && isEmpty) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      EmptyState,
+      {
+        icon: emptyIcon,
+        title: emptyTitle,
+        description: emptyDescription,
+        action: emptyAction
+      }
+    ) });
+  }
+  const busyClass = isBusy && "pointer-events-none opacity-50";
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden overflow-x-auto rounded-md border md:block", children: table }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "md:hidden", children: cards }),
-    !isLoading && isEmpty && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
-      emptyIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mb-4 text-muted-foreground", children: emptyIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: emptyTitle }),
-      emptyDescription && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: emptyDescription })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        "aria-busy": isBusy,
+        className: cn(
+          "hidden overflow-x-auto rounded-md border transition-opacity md:block",
+          busyClass
+        ),
+        children: table
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "aria-busy": isBusy, className: cn("transition-opacity md:hidden", busyClass), children: cards }),
     pagination
   ] });
 }
@@ -2340,24 +2359,24 @@ function StatCard({ label, value, detail, icon, isLoading }) {
 var import_jsx_runtime29 = require("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({
@@ -2401,7 +2420,12 @@ function StatusDot({ active, label, className }) {
 // src/components/table-skeleton.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function TableSkeleton({ rows = 5, columns = 4 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { className: "border-b transition-colors", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { className: "p-4 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-5 w-full animate-pulse rounded bg-muted" }) }, j)) }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { 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__ */ (0, import_jsx_runtime31.jsx)("tr", { className: "border-b transition-colors", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { className: "p-2 align-middle first:pl-4 last:pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-4 w-full animate-pulse rounded bg-muted" }) }, j)) }, i)
+  )) });
 }
 
 // src/components/toaster.tsx