@snksergio/design-system 0.46.0 → 0.47.0

package/dist-lib/index.cjs

@@ -7,7 +7,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const sheet = require("./chunks/sheet-j-d_UX7R.cjs");
 const lucideReact = require("lucide-react");
-const toggleGroup = require("./chunks/toggle-group-FJHFIlJP.cjs");
+const toggleGroup = require("./chunks/toggle-group-sXg1B2wN.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");
@@ -5004,7 +5004,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 +5059,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 +8195,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;