@fabio.caffarello/react-design-system 3.11.0 → 3.12.0

package/dist/granular/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/granular/ui/components/HeroSection/HeroSection.js

@@ -0,0 +1,176 @@
+"use client";
+var T = Object.defineProperty, D = Object.defineProperties;
+var V = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
+var u = (t, a, e) => a in t ? T(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e, y = (t, a) => {
+  for (var e in a || (a = {}))
+    g.call(a, e) && u(t, e, a[e]);
+  if (i)
+    for (var e of i(a))
+      v.call(a, e) && u(t, e, a[e]);
+  return t;
+}, b = (t, a) => D(t, V(a));
+var w = (t, a) => {
+  var e = {};
+  for (var l in t)
+    g.call(t, l) && a.indexOf(l) < 0 && (e[l] = t[l]);
+  if (t != null && i)
+    for (var l of i(t))
+      a.indexOf(l) < 0 && v.call(t, l) && (e[l] = t[l]);
+  return e;
+};
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import c from "../../primitives/Text/Text.js";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import { cn as n } from "../../utils/cn.js";
+import { cva as U } from "../../utils/cva.js";
+const k = U(
+  n(
+    "w-full flex flex-col",
+    o("2xl", "py"),
+    // 40px vertical breathing room
+    o("lg", "px"),
+    // 24px horizontal
+    o("xl", "gap-y")
+    // 32px between major blocks
+  ),
+  {
+    variants: {
+      variant: {
+        plain: "",
+        gradient: "hero-gradient",
+        "gradient-glow": n("hero-gradient", "hero-glow")
+      },
+      align: {
+        start: "text-left",
+        center: "text-center"
+      }
+    },
+    defaultVariants: {
+      variant: "plain",
+      align: "start"
+    }
+  }
+), C = {
+  start: "items-start",
+  center: "items-center"
+}, I = {
+  start: "justify-start",
+  center: "justify-center"
+}, J = F(
+  function(O, A) {
+    var h = O, {
+      kicker: a,
+      title: e,
+      description: l,
+      actions: m,
+      kpis: p,
+      meta: f,
+      variant: S = "plain",
+      align: d = "start",
+      className: E,
+      "aria-label": s,
+      "aria-labelledby": x
+    } = h, j = w(h, [
+      "kicker",
+      "title",
+      "description",
+      "actions",
+      "kpis",
+      "meta",
+      "variant",
+      "align",
+      "className",
+      "aria-label",
+      "aria-labelledby"
+    ]);
+    const H = s != null || x != null, R = s != null ? s : typeof e == "string" ? e : void 0;
+    return typeof process != "undefined" && process.env.NODE_ENV !== "production" && !H && typeof e != "string" && console.warn(
+      "[HeroSection] A non-string `title` was provided without `aria-label` or `aria-labelledby`. The hero <section> landmark will have no accessible name. Pass `aria-label`, or set `aria-labelledby` to your title's id."
+    ), /* @__PURE__ */ N(
+      "section",
+      b(y({
+        ref: A,
+        className: n(k({ variant: S, align: d }), E),
+        "aria-label": R,
+        "aria-labelledby": x
+      }, j), {
+        children: [
+          /* @__PURE__ */ N(
+            "div",
+            {
+              className: n(
+                "flex flex-col",
+                o("md", "gap-y"),
+                C[d]
+              ),
+              children: [
+                a ? /* @__PURE__ */ r(
+                  c,
+                  {
+                    as: "span",
+                    variant: "caption",
+                    colorRole: "primary",
+                    colorShade: "DEFAULT",
+                    className: "text-sm font-semibold tracking-wide uppercase",
+                    children: a
+                  }
+                ) : null,
+                /* @__PURE__ */ r(
+                  c,
+                  {
+                    as: "h1",
+                    variant: "heading",
+                    className: "text-3xl font-bold tracking-tight sm:text-4xl",
+                    children: e
+                  }
+                ),
+                l ? /* @__PURE__ */ r(
+                  c,
+                  {
+                    as: "p",
+                    variant: "body",
+                    colorRole: "neutral",
+                    colorShade: "DEFAULT",
+                    className: "max-w-2xl text-base leading-relaxed sm:text-lg",
+                    children: l
+                  }
+                ) : null
+              ]
+            }
+          ),
+          m ? /* @__PURE__ */ r(
+            "div",
+            {
+              className: n(
+                "flex flex-wrap",
+                o("sm", "gap"),
+                I[d]
+              ),
+              children: m
+            }
+          ) : null,
+          p ? /* @__PURE__ */ r("div", { className: "w-full", children: p }) : null,
+          f ? /* @__PURE__ */ r(
+            c,
+            {
+              as: "p",
+              variant: "caption",
+              colorRole: "neutral",
+              colorShade: "light",
+              className: "text-sm",
+              children: f
+            }
+          ) : null
+        ]
+      })
+    );
+  }
+);
+J.displayName = "HeroSection";
+export {
+  J as default
+};
+//# sourceMappingURL=HeroSection.js.map

package/dist/granular/ui/components/HeroSection/HeroSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.js","sources":["../../../../../src/ui/components/HeroSection/HeroSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\n// Concrete-source-file import (NOT the `../../primitives` barrel): the barrel\n// re-exports client primitives like Input (useMemo), which would taint the\n// static server-safe analysis of this module and bar it from `./server`.\n// See issue #178 in `.claude/rules/server-entry.md` for the worked example.\nimport Text from \"../../primitives/Text/Text\";\nimport { cn, cva } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\n// Ambient declaration so the dev-only warn typechecks without pulling\n// @types/node into the app tsconfig; the `typeof process` guard keeps the\n// branch safe in browser/edge runtimes where `process` doesn't exist. At\n// runtime the consumer's bundler replaces `process.env.NODE_ENV` with a\n// literal. Mirrors the precedent in Card.tsx / Button.tsx.\ndeclare const process: { env: { NODE_ENV?: string } };\n\n/**\n * Visual treatment of the hero surface.\n *\n * - `plain` — no decorative background; the hero is text + padding on\n *   whatever surface it sits on.\n * - `gradient` — a soft brand→secondary wash (theme-aware, see\n *   `utilities/gradients.css`).\n * - `gradient-glow` — the same wash plus a brand-colored outer glow for\n *   top-of-funnel emphasis (landing / home).\n */\nexport type HeroSectionVariant = \"plain\" | \"gradient\" | \"gradient-glow\";\n\n/** Block alignment of the hero content. */\nexport type HeroSectionAlign = \"start\" | \"center\";\n\nexport interface HeroSectionProps\n  // `title` is omitted from the inherited DOM attributes because the native\n  // `title` attribute is typed `string`, which is incompatible with our\n  // `ReactNode` title slot. Everything else (id, aria-*, data-*, className)\n  // still flows through to the root <section>.\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Eyebrow / kicker above the title (rendered uppercase, brand-colored). */\n  kicker?: ReactNode;\n  /**\n   * The hero title. Rendered as the section's `<h1>`. **Required.**\n   *\n   * When `title` is a plain string it also becomes the accessible name of\n   * the hero `<section>` landmark (the FilterChips `label` pattern). When it\n   * is a non-string `ReactNode`, supply `aria-label` or `aria-labelledby`\n   * yourself — otherwise the landmark renders without an accessible name and\n   * the component emits a dev-only warning.\n   */\n  title: ReactNode;\n  /** Supporting copy below the title (constrained to a readable measure). */\n  description?: ReactNode;\n  /** Call-to-action slot — typically one or more `<Button>`s. */\n  actions?: ReactNode;\n  /** Metrics slot — typically a `<StatGroup>` of `<Stat>`s. Spans full width. */\n  kpis?: ReactNode;\n  /** A line of metadata below everything else (low emphasis). */\n  meta?: ReactNode;\n  /**\n   * Visual treatment of the hero surface.\n   * @default 'plain'\n   */\n  variant?: HeroSectionVariant;\n  /**\n   * Block alignment of the content.\n   * @default 'start'\n   */\n  align?: HeroSectionAlign;\n  /** Additional CSS classes merged onto the root `<section>`. */\n  className?: string;\n}\n\n/**\n * HeroSection variants (CVA).\n *\n * The decorative `variant` axis only swaps background / shadow; the `align`\n * axis only swaps text-alignment. Per-block flex alignment (centering the\n * text column, the actions row) is handled by the lookup records below,\n * because those classes land on child elements, not the root.\n */\nconst heroSectionVariants = cva(\n  cn(\n    \"w-full flex flex-col\",\n    getSpacingClass(\"2xl\", \"py\"), // 40px vertical breathing room\n    getSpacingClass(\"lg\", \"px\"), // 24px horizontal\n    getSpacingClass(\"xl\", \"gap-y\"), // 32px between major blocks\n  ),\n  {\n    variants: {\n      variant: {\n        plain: \"\",\n        gradient: \"hero-gradient\",\n        \"gradient-glow\": cn(\"hero-gradient\", \"hero-glow\"),\n      },\n      align: {\n        start: \"text-left\",\n        center: \"text-center\",\n      },\n    },\n    defaultVariants: {\n      variant: \"plain\",\n      align: \"start\",\n    },\n  },\n);\n\n/** Cross-axis alignment for the inner text column (kicker/title/description). */\nconst blockItems: Record<HeroSectionAlign, string> = {\n  start: \"items-start\",\n  center: \"items-center\",\n};\n\n/** Main-axis alignment for the actions row. */\nconst actionsJustify: Record<HeroSectionAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n};\n\n/**\n * `HeroSection` — top-of-page hero: kicker + title + description + actions +\n * kpis + meta, in three visual treatments (`plain` / `gradient` /\n * `gradient-glow`) and two alignments (`start` / `center`).\n *\n * Distinct from `PageHeader` (contextual navigation: breadcrumb + title +\n * actions). The hero is a page/landing **introduction** with a visual\n * identity and slots for KPIs and metadata.\n *\n * ### Slots\n *\n * Every slot except `title` is optional and collapses cleanly when absent —\n * no empty wrapper leaks into the DOM. `kpis` is an opaque slot: pass a\n * `<StatGroup>` (or any node); the consumer chooses the metric layout.\n *\n * ### Landmark & accessible name\n *\n * Renders as a `<section>`. A `<section>` is only exposed as a navigable\n * region when it has an accessible name, so the component derives one:\n * - a string `title` becomes the `aria-label` automatically;\n * - an explicit `aria-label` / `aria-labelledby` from the consumer always\n *   wins (and `aria-labelledby` suppresses the derived label to avoid a\n *   redundant name);\n * - a non-string `title` with no consumer-supplied name triggers a dev-only\n *   `console.warn` (dead-code-eliminated in production builds).\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in the\n * `./server` entry. Interactive children supplied via `actions` (e.g.\n * `<Button onClick>`) cross the RSC boundary as client references normally.\n *\n * @example\n * ```tsx\n * <HeroSection\n *   variant=\"gradient-glow\"\n *   align=\"center\"\n *   kicker=\"Transparência\"\n *   title=\"Acompanhe o Congresso em tempo real\"\n *   description=\"Proposições, votações e parlamentares — tudo em um só lugar.\"\n *   actions={<Button variant=\"primary\">Começar</Button>}\n *   kpis={\n *     <StatGroup layout=\"strip\">\n *       <Stat value=\"9,4 mil\" label=\"Parlamentares\" align=\"center\" />\n *       <Stat value=\"3,2 mil\" label=\"Proposições\" align=\"center\" />\n *     </StatGroup>\n *   }\n *   meta=\"Atualizado diariamente\"\n * />\n * ```\n */\nconst HeroSection = forwardRef<HTMLElement, HeroSectionProps>(\n  function HeroSection(\n    {\n      kicker,\n      title,\n      description,\n      actions,\n      kpis,\n      meta,\n      variant = \"plain\",\n      align = \"start\",\n      className,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const hasExplicitName = ariaLabel != null || ariaLabelledBy != null;\n    const resolvedAriaLabel =\n      ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n\n    if (\n      typeof process !== \"undefined\" &&\n      process.env.NODE_ENV !== \"production\" &&\n      !hasExplicitName &&\n      typeof title !== \"string\"\n    ) {\n      console.warn(\n        \"[HeroSection] A non-string `title` was provided without `aria-label` \" +\n          \"or `aria-labelledby`. The hero <section> landmark will have no \" +\n          \"accessible name. Pass `aria-label`, or set `aria-labelledby` to \" +\n          \"your title's id.\",\n      );\n    }\n\n    return (\n      <section\n        ref={ref}\n        className={cn(heroSectionVariants({ variant, align }), className)}\n        aria-label={resolvedAriaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n      >\n        {/* Text column — tighter internal rhythm than the major-block gap. */}\n        <div\n          className={cn(\n            \"flex flex-col\",\n            getSpacingClass(\"md\", \"gap-y\"),\n            blockItems[align],\n          )}\n        >\n          {kicker ? (\n            <Text\n              as=\"span\"\n              variant=\"caption\"\n              colorRole=\"primary\"\n              colorShade=\"DEFAULT\"\n              className=\"text-sm font-semibold tracking-wide uppercase\"\n            >\n              {kicker}\n            </Text>\n          ) : null}\n\n          <Text\n            as=\"h1\"\n            variant=\"heading\"\n            className=\"text-3xl font-bold tracking-tight sm:text-4xl\"\n          >\n            {title}\n          </Text>\n\n          {description ? (\n            <Text\n              as=\"p\"\n              variant=\"body\"\n              colorRole=\"neutral\"\n              colorShade=\"DEFAULT\"\n              className=\"max-w-2xl text-base leading-relaxed sm:text-lg\"\n            >\n              {description}\n            </Text>\n          ) : null}\n        </div>\n\n        {actions ? (\n          <div\n            className={cn(\n              \"flex flex-wrap\",\n              getSpacingClass(\"sm\", \"gap\"),\n              actionsJustify[align],\n            )}\n          >\n            {actions}\n          </div>\n        ) : null}\n\n        {kpis ? <div className=\"w-full\">{kpis}</div> : null}\n\n        {meta ? (\n          <Text\n            as=\"p\"\n            variant=\"caption\"\n            colorRole=\"neutral\"\n            colorShade=\"light\"\n            className=\"text-sm\"\n          >\n            {meta}\n          </Text>\n        ) : null}\n      </section>\n    );\n  },\n);\n\nHeroSection.displayName = \"HeroSection\";\n\nexport default HeroSection;\n"],"names":["heroSectionVariants","cva","cn","getSpacingClass","blockItems","actionsJustify","HeroSection","forwardRef","_a","ref","_b","kicker","title","description","actions","kpis","meta","variant","align","className","ariaLabel","ariaLabelledBy","rest","__objRest","hasExplicitName","resolvedAriaLabel","jsxs","__spreadProps","__spreadValues","jsx","Text"],"mappings":"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"}