@snksergio/design-system 0.46.0 → 0.48.0

package/dist-lib/index.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const panel = require("./chunks/panel-DTVjD2gJ.cjs");
-const useTheme = require("./chunks/useTheme-BB3QhUpu.cjs");
-const avatar = require("./chunks/avatar-eM5txRFZ.cjs");
+const panel = require("./chunks/panel-57Pt_bL9.cjs");
+const useTheme = require("./chunks/useTheme-Dh3POjCr.cjs");
+const avatar = require("./chunks/avatar-DAmZ7fBZ.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const sheet = require("./chunks/sheet-j-d_UX7R.cjs");
+const sheet = require("./chunks/sheet-BZlQ0gKA.cjs");
 const lucideReact = require("lucide-react");
-const toggleGroup = require("./chunks/toggle-group-FJHFIlJP.cjs");
-const input = require("./chunks/input-az2SuVXQ.cjs");
-const kpiDelta = require("./chunks/kpi-delta-DwQWNM-F.cjs");
-const pageHeader = require("./chunks/page-header-DvAJoEfb.cjs");
+const toggleGroup = require("./chunks/toggle-group-DYGba7RP.cjs");
+const input = require("./chunks/input-Ci_2-5Te.cjs");
+const kpiDelta = require("./chunks/kpi-delta-1-gsPFvU.cjs");
+const pageHeader = require("./chunks/page-header-DrKDiVFN.cjs");
 const RechartsPrimitive = require("recharts");
 const reactVirtual = require("@tanstack/react-virtual");
 require("@hello-pangea/dnd");
@@ -3742,7 +3742,10 @@ const fileUploadFieldStyles = avatar.tv({
   slots: {
     dropzone: [
       "flex w-full flex-col items-center justify-center text-center",
-      "min-h-form-xl gap-gp-xs px-pad-2xl py-pad-lg",
+      // Vertical MAIOR que o horizontal de propósito: é uma área de soltar, não uma linha de
+      // form. Estava `py-pad-lg` (10px) contra `px-pad-2xl` (16px) — apertado justamente no
+      // eixo que dá a leitura de "zona", e o conteúdo ficava colado na borda tracejada.
+      "min-h-form-xl gap-gp-xs px-pad-2xl py-pad-4xl",
       "rounded-radius-xl bg-bg-muted",
       "border border-dashed border-border-default",
       "transition-[color,box-shadow,background-color,border-color] duration-200 ease-out",
@@ -3751,6 +3754,15 @@ const fileUploadFieldStyles = avatar.tv({
       "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
     ],
     dropIcon: "text-fg-subtle",
+    /**
+     * Título e hint num bloco próprio, com gap de 2px.
+     *
+     * Antes os três (ícone, título, hint) eram irmãos sob o `gap-gp-xs` (4px) do dropzone —
+     * um gap só governando duas relações diferentes. Título↔hint são a MESMA informação em
+     * dois níveis e querem ficar juntos; o ícone é outro elemento e quer respiro. Agrupar é o
+     * que permite os dois valores.
+     */
+    dropTexts: "flex flex-col items-center gap-gp-2xs",
     dropText: "text-body-sm text-fg-muted",
     dropHint: "text-caption-md text-fg-subtle",
     fileRow: [
@@ -3891,8 +3903,10 @@ function FileUploadField({
             className: styles2.dropzone(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "line-cloud-upload", size: "lg", className: styles2.dropIcon() }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropText(), children: "Clique para anexar" }),
-              hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropHint(), children: hint })
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.dropTexts(), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropText(), children: "Clique para anexar" }),
+                hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropHint(), children: hint })
+              ] })
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.fileRow(), children: [
@@ -5004,7 +5018,9 @@ const spinnerStyles = avatar.tv({
     size: {
       sm: "size-icon-sm",
       md: "size-icon-md",
-      lg: "size-icon-lg"
+      lg: "size-icon-lg",
+      xl: "size-icon-xl",
+      "2xl": "size-icon-2xl"
     },
     color: {
       current: "text-current",
@@ -5057,6 +5073,91 @@ const Spinner = React.forwardRef(function Spinner2({ size, color, label = "Carre
   );
 });
 Spinner.displayName = "Spinner";
+const screenLoaderStyles = avatar.tv({
+  slots: {
+    root: "flex h-full min-h-0 w-full flex-1 flex-col",
+    // título + descrição colados (gp-2xs = 2px); o respiro maior (gp-md do
+    // root) fica entre o Spinner e o bloco de texto
+    text: "flex flex-col items-center gap-gp-2xs",
+    title: "text-fg-strong",
+    description: "text-body-sm text-fg-muted max-w-[360px]",
+    skeletonHeader: "flex w-full items-start justify-between gap-gp-2xl",
+    skeletonHeaderText: "flex w-full flex-col gap-gp-md",
+    skeletonKpis: "grid w-full grid-cols-2 gap-gp-xl lg:grid-cols-4",
+    skeletonKpiCard: "min-h-[96px] w-full",
+    // basis-[240px] + grow/shrink em vez de min-h: em pai SEM altura o bloco
+    // vale 240px (fallback); em pai COM altura ele cresce/encolhe pra caber —
+    // min-h fixo estourava o container quando header + KPIs + bloco > pai
+    skeletonBody: "w-full grow shrink basis-[240px]"
+  },
+  variants: {
+    variant: {
+      spinner: {
+        root: "items-center justify-center gap-gp-md text-center"
+      },
+      skeleton: {
+        root: "gap-gp-2xl"
+      }
+    },
+    size: {
+      sm: { title: "text-title-sm" },
+      md: { title: "text-title-sm" },
+      lg: { title: "text-title-md" }
+    }
+  },
+  defaultVariants: {
+    variant: "spinner",
+    size: "md"
+  }
+});
+const SPINNER_SIZE = {
+  sm: "lg",
+  md: "xl",
+  lg: "2xl"
+};
+const ScreenLoader = React.forwardRef(
+  function ScreenLoader2({
+    variant = "spinner",
+    size = "md",
+    color = "brand",
+    title: title2 = "Carregando…",
+    description: description2,
+    skeletonLayout = "page",
+    className,
+    ...rest
+  }, ref) {
+    const styles2 = screenLoaderStyles({ variant, size });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: styles2.root({ className }),
+        ...rest,
+        children: variant === "spinner" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_SIZE[size], color, "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.text(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: styles2.title(), children: title2 }),
+            description2 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.description(), children: description2 })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: title2 }),
+          skeletonLayout !== "kpis" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": "true", className: styles2.skeletonHeader(), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.skeletonHeaderText(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.Skeleton, { className: "h-[20px] w-1/3 max-w-[240px]" }),
+              /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.Skeleton, { className: "h-[12px] w-1/2 max-w-[360px]" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.Skeleton, { className: "min-h-form-md w-[120px] shrink-0" })
+          ] }),
+          skeletonLayout !== "page" && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: styles2.skeletonKpis(), children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.Skeleton, { className: styles2.skeletonKpiCard() }, i)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.Skeleton, { "aria-hidden": "true", className: styles2.skeletonBody() })
+        ] })
+      }
+    );
+  }
+);
+ScreenLoader.displayName = "ScreenLoader";
 class Adder {
   constructor() {
     this._partials = new Float64Array(32);
@@ -8108,6 +8209,7 @@ exports.MessageComposer = MessageComposer;
 exports.MessageVariablesPicker = MessageVariablesPicker;
 exports.Modal = Modal;
 exports.MonthYearPicker = MonthYearPicker;
+exports.ScreenLoader = ScreenLoader;
 exports.Spinner = Spinner;
 exports.ToastCard = ToastCard;
 exports.ToolbarFilterControl = ToolbarFilterControl;