@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/primitives/Avatar/Avatar.js

@@ -0,0 +1,122 @@
+"use client";
+var U = Object.defineProperty, k = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var f = (t, e, a) => e in t ? U(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, x = (t, e) => {
+  for (var a in e || (e = {}))
+    u.call(e, a) && f(t, a, e[a]);
+  if (s)
+    for (var a of s(e))
+      p.call(e, a) && f(t, a, e[a]);
+  return t;
+}, h = (t, e) => k(t, q(e));
+var g = (t, e) => {
+  var a = {};
+  for (var r in t)
+    u.call(t, r) && e.indexOf(r) < 0 && (a[r] = t[r]);
+  if (t != null && s)
+    for (var r of s(t))
+      e.indexOf(r) < 0 && p.call(t, r) && (a[r] = t[r]);
+  return a;
+};
+import { jsxs as z, jsx as w } from "react/jsx-runtime";
+import { forwardRef as S, useState as y } from "react";
+import { getRadiusClass as o } from "../../tokens/radius.js";
+import { cn as n } from "../../utils/cn.js";
+const B = S(function(D, C) {
+  var c = D, {
+    src: e,
+    alt: a,
+    fallback: r,
+    size: v = "md",
+    variant: i = "circle",
+    "aria-label": b,
+    className: j = ""
+  } = c, A = g(c, [
+    "src",
+    "alt",
+    "fallback",
+    "size",
+    "variant",
+    "aria-label",
+    "className"
+  ]);
+  const [L, N] = y(!1), [E, m] = y(!1), F = {
+    xs: "h-6 w-6 text-xs",
+    sm: "h-8 w-8 text-sm",
+    md: "h-10 w-10 text-base",
+    lg: "h-12 w-12 text-lg",
+    xl: "h-16 w-16 text-xl"
+  }, l = {
+    circle: o("full"),
+    square: o("none"),
+    rounded: o("md")
+  }, d = !e || L, I = typeof r == "string" ? r.toUpperCase().slice(0, 2) : r, R = b || a || "User avatar";
+  return /* @__PURE__ */ z(
+    "div",
+    h(x({
+      ref: C,
+      className: n(
+        "relative",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "shrink-0",
+        "font-medium",
+        "overflow-hidden",
+        F[v],
+        l[i],
+        "bg-surface-muted",
+        "text-fg-primary",
+        j
+      ),
+      role: "img",
+      "aria-label": R
+    }, A), {
+      children: [
+        !d && e && /* @__PURE__ */ w(
+          "img",
+          {
+            src: e,
+            alt: a || "",
+            className: n(
+              "w-full",
+              "h-full",
+              "object-cover",
+              l[i],
+              E ? "opacity-100" : "opacity-0",
+              "transition-opacity",
+              "duration-200"
+            ),
+            onLoad: () => m(!0),
+            onError: () => {
+              N(!0), m(!1);
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        d && /* @__PURE__ */ w(
+          "span",
+          {
+            className: n(
+              "flex",
+              "items-center",
+              "justify-center",
+              "w-full",
+              "h-full",
+              l[i]
+            ),
+            "aria-hidden": "true",
+            children: I || "?"
+          }
+        )
+      ]
+    })
+  );
+});
+B.displayName = "Avatar";
+export {
+  B as default
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/granular/ui/primitives/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../src/ui/primitives/Avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useState,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { cn } from \"../../utils\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface AvatarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  src?: string;\n  alt?: string;\n  fallback?: string | ReactNode;\n  size?: AvatarSize;\n  variant?: \"circle\" | \"square\" | \"rounded\";\n  \"aria-label\"?: string;\n}\n\n/**\n * Avatar Component\n *\n * A versatile avatar component for displaying user profile images or initials.\n * Supports fallback display when image fails to load or is not provided.\n * Fully accessible with ARIA attributes.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"/user.jpg\" alt=\"John Doe\" />\n *\n * // With fallback initials\n * <Avatar fallback=\"JD\" alt=\"John Doe\" />\n *\n * // Custom size\n * <Avatar src=\"/user.jpg\" size=\"lg\" />\n * ```\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = \"md\",\n    variant = \"circle\",\n    \"aria-label\": ariaLabel,\n    className = \"\",\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n  const [imageLoaded, setImageLoaded] = useState(false);\n\n  // Size and variant classes (not using cva to avoid type issues with dynamic classes)\n  const sizeClasses: Record<AvatarSize, string> = {\n    xs: \"h-6 w-6 text-xs\",\n    sm: \"h-8 w-8 text-sm\",\n    md: \"h-10 w-10 text-base\",\n    lg: \"h-12 w-12 text-lg\",\n    xl: \"h-16 w-16 text-xl\",\n  };\n\n  const variantClasses = {\n    circle: getRadiusClass(\"full\"),\n    square: getRadiusClass(\"none\"),\n    rounded: getRadiusClass(\"md\"),\n  };\n\n  const showFallback = !src || imageError;\n  const displayFallback =\n    typeof fallback === \"string\"\n      ? fallback.toUpperCase().slice(0, 2)\n      : fallback;\n\n  const defaultAriaLabel = ariaLabel || alt || \"User avatar\";\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative\",\n        \"inline-flex\",\n        \"items-center\",\n        \"justify-center\",\n        \"shrink-0\",\n        \"font-medium\",\n        \"overflow-hidden\",\n        sizeClasses[size],\n        variantClasses[variant],\n        \"bg-surface-muted\",\n        \"text-fg-primary\",\n        className,\n      )}\n      role=\"img\"\n      aria-label={defaultAriaLabel}\n      {...props}\n    >\n      {!showFallback && src && (\n        <img\n          src={src}\n          alt={alt || \"\"}\n          className={cn(\n            \"w-full\",\n            \"h-full\",\n            \"object-cover\",\n            variantClasses[variant],\n            !imageLoaded ? \"opacity-0\" : \"opacity-100\",\n            \"transition-opacity\",\n            \"duration-200\",\n          )}\n          onLoad={() => setImageLoaded(true)}\n          onError={() => {\n            setImageError(true);\n            setImageLoaded(false);\n          }}\n          aria-hidden=\"true\"\n        />\n      )}\n      {showFallback && (\n        <span\n          className={cn(\n            \"flex\",\n            \"items-center\",\n            \"justify-center\",\n            \"w-full\",\n            \"h-full\",\n            variantClasses[variant],\n          )}\n          aria-hidden=\"true\"\n        >\n          {displayFallback || \"?\"}\n        </span>\n      )}\n    </div>\n  );\n});\n\nAvatar.displayName = \"Avatar\";\n\nexport default Avatar;\n"],"names":["Avatar","forwardRef","_a","ref","_b","src","alt","fallback","size","variant","ariaLabel","className","props","__objRest","imageError","setImageError","useState","imageLoaded","setImageLoaded","sizeClasses","variantClasses","getRadiusClass","showFallback","displayFallback","defaultAriaLabel","jsxs","__spreadProps","__spreadValues","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,IAASC,EAAwC,SACrDC,GAUAC,GACA;AAXA,MAAAC,IAAAF,GACE;AAAA,SAAAG;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,cAAcC;AAAA,IACd,WAAAC,IAAY;AAAA,MAPdP,GAQKQ,IAAAC,EARLT,GAQK;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAG9CG,IAA0C;AAAA,IAC9C,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAC,IAAiB;AAAA,IACrB,QAAQC,EAAe,MAAM;AAAA,IAC7B,QAAQA,EAAe,MAAM;AAAA,IAC7B,SAASA,EAAe,IAAI;AAAA,EAAA,GAGxBC,IAAe,CAACjB,KAAOS,GACvBS,IACJ,OAAOhB,KAAa,WAChBA,EAAS,cAAc,MAAM,GAAG,CAAC,IACjCA,GAEAiB,IAAmBd,KAAaJ,KAAO;AAE7C,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,KAAAxB;AAAA,MACA,WAAWyB;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAT,EAAYX,CAAI;AAAA,QAChBY,EAAeX,CAAO;AAAA,QACtB;AAAA,QACA;AAAA,QACAE;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,cAAYa;AAAA,OACRZ,IAlBL;AAAA,MAoBE,UAAA;AAAA,QAAA,CAACU,KAAgBjB,KAChB,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAxB;AAAA,YACA,KAAKC,KAAO;AAAA,YACZ,WAAWsB;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAR,EAAeX,CAAO;AAAA,cACrBQ,IAA4B,gBAAd;AAAA,cACf;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,QAAQ,MAAMC,EAAe,EAAI;AAAA,YACjC,SAAS,MAAM;AACb,cAAAH,EAAc,EAAI,GAClBG,EAAe,EAAK;AAAA,YACtB;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGfI,KACC,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAR,EAAeX,CAAO;AAAA,YAAA;AAAA,YAExB,eAAY;AAAA,YAEX,UAAAc,KAAmB;AAAA,UAAA;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDvB,EAAO,cAAc;"}

package/dist/granular/ui/primitives/Avatar/AvatarGroup.js

@@ -0,0 +1,97 @@
+"use client";
+var N = Object.defineProperty, $ = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var f = (e, r, s) => r in e ? N(e, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[r] = s, u = (e, r) => {
+  for (var s in r || (r = {}))
+    g.call(r, s) && f(e, s, r[s]);
+  if (l)
+    for (var s of l(r))
+      d.call(r, s) && f(e, s, r[s]);
+  return e;
+}, v = (e, r) => $(e, j(r));
+var x = (e, r) => {
+  var s = {};
+  for (var a in e)
+    g.call(e, a) && r.indexOf(a) < 0 && (s[a] = e[a]);
+  if (e != null && l)
+    for (var a of l(e))
+      r.indexOf(a) < 0 && d.call(e, a) && (s[a] = e[a]);
+  return s;
+};
+import { jsxs as I, jsx as b } from "react/jsx-runtime";
+import { Children as k, isValidElement as B, cloneElement as G } from "react";
+import h from "./Avatar.js";
+import { cn as P } from "../../utils/cn.js";
+function J(V) {
+  var o = V, {
+    children: e,
+    max: r = 3,
+    size: s = "md",
+    variant: a = "circle",
+    spacing: y = "md",
+    className: A = ""
+  } = o, z = x(o, [
+    "children",
+    "max",
+    "size",
+    "variant",
+    "spacing",
+    "className"
+  ]);
+  const C = {
+    none: "",
+    sm: "-space-x-1",
+    md: "-space-x-2",
+    lg: "-space-x-3"
+  }, t = k.toArray(e).filter(Boolean), E = t.slice(0, r), i = t.length - r;
+  return /* @__PURE__ */ I(
+    "div",
+    v(u({
+      className: P("flex", "items-center", C[y], A),
+      role: "group",
+      "aria-label": `${t.length} avatars`
+    }, z), {
+      children: [
+        E.map((n, c) => {
+          let m = n;
+          if (B(n) && n.type === h) {
+            const p = n.props;
+            m = G(
+              n,
+              {
+                size: p.size || s,
+                variant: p.variant || a
+              }
+            );
+          }
+          return /* @__PURE__ */ b(
+            "div",
+            {
+              className: "ring-2 ring-surface-base",
+              style: { zIndex: t.length - c },
+              children: m
+            },
+            c
+          );
+        }),
+        i > 0 && /* @__PURE__ */ b(
+          h,
+          {
+            size: s,
+            variant: a,
+            fallback: `+${i}`,
+            "aria-label": `${i} more avatars`,
+            className: "ring-2 ring-surface-base",
+            style: { zIndex: 0 }
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  J as AvatarGroup
+};
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/granular/ui/primitives/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../../src/ui/primitives/Avatar/AvatarGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  isValidElement,\n  cloneElement,\n} from \"react\";\nimport { cn } from \"../../utils\";\nimport Avatar, { type AvatarProps } from \"./Avatar\";\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  max?: number; // Maximum number of avatars to show before collapsing\n  size?: AvatarProps[\"size\"];\n  variant?: AvatarProps[\"variant\"];\n  spacing?: \"none\" | \"sm\" | \"md\" | \"lg\"; // Negative margin between avatares\n}\n\n/**\n * AvatarGroup Component\n *\n * Container for displaying multiple avatars in a group.\n * Supports collapsing when there are too many avatars.\n *\n * @example\n * ```tsx\n * <AvatarGroup max={3}>\n *   <Avatar src=\"/user1.jpg\" alt=\"User 1\" />\n *   <Avatar src=\"/user2.jpg\" alt=\"User 2\" />\n *   <Avatar src=\"/user3.jpg\" alt=\"User 3\" />\n *   <Avatar src=\"/user4.jpg\" alt=\"User 4\" />\n * </AvatarGroup>\n * ```\n */\nexport function AvatarGroup({\n  children,\n  max = 3,\n  size = \"md\",\n  variant = \"circle\",\n  spacing = \"md\",\n  className = \"\",\n  ...props\n}: AvatarGroupProps) {\n  const spacingClasses = {\n    none: \"\",\n    sm: \"-space-x-1\",\n    md: \"-space-x-2\",\n    lg: \"-space-x-3\",\n  };\n\n  // Convert children to array and filter out null/undefined\n  const avatars = Children.toArray(children).filter(Boolean);\n  const visibleAvatars = avatars.slice(0, max);\n  const remainingCount = avatars.length - max;\n\n  return (\n    <div\n      className={cn(\"flex\", \"items-center\", spacingClasses[spacing], className)}\n      role=\"group\"\n      aria-label={`${avatars.length} avatars`}\n      {...props}\n    >\n      {visibleAvatars.map((avatar, index) => {\n        // Clone avatar with consistent size and variant if needed\n        let avatarElement = avatar;\n        if (isValidElement(avatar) && avatar.type === Avatar) {\n          const avatarProps = avatar.props as AvatarProps;\n          avatarElement = cloneElement(\n            avatar as React.ReactElement<AvatarProps>,\n            {\n              size: avatarProps.size || size,\n              variant: avatarProps.variant || variant,\n            },\n          );\n        }\n\n        return (\n          <div\n            key={index}\n            className=\"ring-2 ring-surface-base\"\n            // micro-z: avatar stacking computed by position in group\n            style={{ zIndex: avatars.length - index }}\n          >\n            {avatarElement}\n          </div>\n        );\n      })}\n      {remainingCount > 0 && (\n        <Avatar\n          size={size}\n          variant={variant}\n          fallback={`+${remainingCount}`}\n          aria-label={`${remainingCount} more avatars`}\n          className=\"ring-2 ring-surface-base\"\n          // micro-z: avatar group fallback base layer\n          style={{ zIndex: 0 }}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["AvatarGroup","_a","_b","children","max","size","variant","spacing","className","props","__objRest","spacingClasses","avatars","Children","visibleAvatars","remainingCount","jsxs","__spreadProps","__spreadValues","cn","avatar","index","avatarElement","isValidElement","Avatar","avatarProps","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,SAASA,EAAYC,GAQP;AARO,MAAAC,IAAAD,GAC1B;AAAA,cAAAE;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MANcN,GAOvBO,IAAAC,EAPuBR,GAOvB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMS,IAAiB;AAAA,IACrB,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAIAC,IAAUC,EAAS,QAAQV,CAAQ,EAAE,OAAO,OAAO,GACnDW,IAAiBF,EAAQ,MAAM,GAAGR,CAAG,GACrCW,IAAiBH,EAAQ,SAASR;AAExC,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAG,QAAQ,gBAAgBR,EAAeJ,CAAO,GAAGC,CAAS;AAAA,MACxE,MAAK;AAAA,MACL,cAAY,GAAGI,EAAQ,MAAM;AAAA,OACzBH,IAJL;AAAA,MAME,UAAA;AAAA,QAAAK,EAAe,IAAI,CAACM,GAAQC,MAAU;AAErC,cAAIC,IAAgBF;AACpB,cAAIG,EAAeH,CAAM,KAAKA,EAAO,SAASI,GAAQ;AACpD,kBAAMC,IAAcL,EAAO;AAC3B,YAAAE,IAAgBI;AAAA,cACdN;AAAA,cACA;AAAA,gBACE,MAAMK,EAAY,QAAQpB;AAAA,gBAC1B,SAASoB,EAAY,WAAWnB;AAAA,cAAA;AAAA,YAClC;AAAA,UAEJ;AAEA,iBACE,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAEV,OAAO,EAAE,QAAQf,EAAQ,SAASS,EAAA;AAAA,cAEjC,UAAAC;AAAA,YAAA;AAAA,YALID;AAAA,UAAA;AAAA,QAQX,CAAC;AAAA,QACAN,IAAiB,KAChB,gBAAAY;AAAA,UAACH;AAAA,UAAA;AAAA,YACC,MAAAnB;AAAA,YACA,SAAAC;AAAA,YACA,UAAU,IAAIS,CAAc;AAAA,YAC5B,cAAY,GAAGA,CAAc;AAAA,YAC7B,WAAU;AAAA,YAEV,OAAO,EAAE,QAAQ,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/granular/ui/primitives/Badge/Badge.js

@@ -0,0 +1,212 @@
+"use client";
+var z = Object.defineProperty, B = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var p = (e, a, s) => a in e ? z(e, a, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[a] = s, u = (e, a) => {
+  for (var s in a || (a = {}))
+    f.call(a, s) && p(e, s, a[s]);
+  if (d)
+    for (var s of d(a))
+      y.call(a, s) && p(e, s, a[s]);
+  return e;
+}, m = (e, a) => B(e, S(a));
+var x = (e, a) => {
+  var s = {};
+  for (var t in e)
+    f.call(e, t) && a.indexOf(t) < 0 && (s[t] = e[t]);
+  if (e != null && d)
+    for (var t of d(e))
+      a.indexOf(t) < 0 && y.call(e, t) && (s[t] = e[t]);
+  return s;
+};
+import { jsx as V } from "react/jsx-runtime";
+import { memo as C, forwardRef as N } from "react";
+import { getRadiusClass as R } from "../../tokens/radius.js";
+import { getSpacingClass as i } from "../../tokens/spacing.js";
+import { getTypographySize as c, getTypographyWeight as T } from "../../tokens/typography.js";
+import { cn as r } from "../../utils/cn.js";
+import { cva as h } from "../../utils/cva.js";
+const W = h(
+  // Base classes
+  r(
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    T("label"),
+    R("md"),
+    "border"
+  ),
+  {
+    variants: {
+      variant: {
+        success: "",
+        warning: "",
+        error: "",
+        info: "",
+        neutral: "",
+        primary: "",
+        secondary: ""
+      },
+      size: {
+        sm: r(
+          i("1.5", "px"),
+          i("0.5", "py"),
+          c("caption")
+        ),
+        md: r(
+          i("sm", "px"),
+          i("xs", "py"),
+          c("caption")
+        ),
+        lg: r(
+          i("sm", "px"),
+          i("xs", "py"),
+          c("bodySmall")
+        )
+      },
+      style: {
+        solid: "",
+        outline: ""
+      }
+    },
+    compoundVariants: [
+      // Solid style variants
+      {
+        variant: "success",
+        style: "solid",
+        class: r("bg-success-bg", "text-success-dark", "border-success")
+      },
+      {
+        variant: "warning",
+        style: "solid",
+        class: r("bg-warning-bg", "text-warning-dark", "border-warning")
+      },
+      {
+        variant: "error",
+        style: "solid",
+        class: r("bg-error-bg", "text-error-dark", "border-error")
+      },
+      {
+        variant: "info",
+        style: "solid",
+        class: r("bg-info-bg", "text-info-dark", "border-info")
+      },
+      {
+        variant: "neutral",
+        style: "solid",
+        class: r("bg-surface-muted", "text-fg-primary", "border-line-default")
+      },
+      {
+        variant: "primary",
+        style: "solid",
+        class: r(
+          "bg-surface-brand-subtle",
+          "text-fg-brand-emphasis",
+          "border-line-brand"
+        )
+      },
+      {
+        variant: "secondary",
+        style: "solid",
+        // bg-pink-300: secondary solid badge — no semantic equivalent
+        // (would shift 2 shades to bg-surface-secondary). Kept literal until
+        // secondary brand surface palette expands beyond DEFAULT.
+        class: r(
+          "bg-pink-300",
+          "text-fg-brand-secondary-emphasis",
+          "border-line-secondary"
+        )
+      },
+      // Outline style variants
+      {
+        variant: "success",
+        style: "outline",
+        class: r("bg-transparent", "border-success", "text-fg-success")
+      },
+      {
+        variant: "warning",
+        style: "outline",
+        class: r("bg-transparent", "border-warning", "text-fg-warning")
+      },
+      {
+        variant: "error",
+        style: "outline",
+        class: r("bg-transparent", "border-error", "text-fg-error")
+      },
+      {
+        variant: "info",
+        style: "outline",
+        class: r("bg-transparent", "border-info", "text-fg-info")
+      },
+      {
+        variant: "neutral",
+        style: "outline",
+        class: r("bg-transparent", "border-line-default", "text-fg-secondary")
+      },
+      {
+        variant: "primary",
+        style: "outline",
+        class: r("bg-transparent", "border-line-brand", "text-fg-brand")
+      },
+      {
+        variant: "secondary",
+        style: "outline",
+        class: r(
+          "bg-transparent",
+          "border-line-secondary",
+          "text-fg-brand-secondary"
+        )
+      }
+    ],
+    defaultVariants: {
+      variant: "neutral",
+      size: "md",
+      style: "solid"
+    }
+  }
+), q = C(
+  N(function(A, k) {
+    var b = A, {
+      variant: a = "neutral",
+      size: s = "md",
+      style: t = "solid",
+      className: v = "",
+      children: n,
+      "aria-label": g
+    } = b, w = x(b, [
+      "variant",
+      "size",
+      "style",
+      "className",
+      "children",
+      "aria-label"
+    ]);
+    const j = r(W({ variant: a, size: s, style: t }), v);
+    let l;
+    if (g)
+      l = g;
+    else if (typeof n == "string")
+      l = n;
+    else if (typeof n == "object" && n !== null && "props" in n) {
+      const o = n.props;
+      o != null && o.children && typeof o.children == "string" && (l = o.children);
+    }
+    return /* @__PURE__ */ V(
+      "span",
+      m(u({
+        ref: k,
+        role: "status",
+        "aria-label": l,
+        className: j
+      }, w), {
+        children: n
+      })
+    );
+  })
+);
+q.displayName = "Badge";
+export {
+  q as default
+};
+//# sourceMappingURL=Badge.js.map

package/dist/granular/ui/primitives/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../src/ui/primitives/Badge/Badge.tsx"],"sourcesContent":["import { memo, forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\nexport type BadgeVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"neutral\"\n  | \"primary\"\n  | \"secondary\";\nexport type BadgeSize = \"sm\" | \"md\" | \"lg\";\nexport type BadgeStyle = \"solid\" | \"outline\";\n\nexport interface BadgeProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  \"style\"\n> {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  style?: BadgeStyle;\n  children: ReactNode;\n  \"aria-label\"?: string;\n}\n\n/**\n * Badge Component\n *\n * A versatile badge component for displaying status, priority, and other labels.\n * Follows Atomic Design principles as an Atom component.\n * Uses tokens for consistent theming.\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\" size=\"lg\">Critical</Badge>\n * <Badge variant=\"info\" style=\"outline\">New</Badge>\n * ```\n */\n// Badge variants using CVA\nconst badgeVariants = cva(\n  // Base classes\n  cn(\n    \"inline-flex\",\n    \"items-center\",\n    \"justify-center\",\n    getTypographyWeight(\"label\"),\n    getRadiusClass(\"md\"),\n    \"border\",\n  ),\n  {\n    variants: {\n      variant: {\n        success: \"\",\n        warning: \"\",\n        error: \"\",\n        info: \"\",\n        neutral: \"\",\n        primary: \"\",\n        secondary: \"\",\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"1.5\", \"px\"),\n          getSpacingClass(\"0.5\", \"py\"),\n          getTypographySize(\"caption\"),\n        ),\n        md: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"caption\"),\n        ),\n        lg: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"xs\", \"py\"),\n          getTypographySize(\"bodySmall\"),\n        ),\n      },\n      style: {\n        solid: \"\",\n        outline: \"\",\n      },\n    },\n    compoundVariants: [\n      // Solid style variants\n      {\n        variant: \"success\",\n        style: \"solid\",\n        class: cn(\"bg-success-bg\", \"text-success-dark\", \"border-success\"),\n      },\n      {\n        variant: \"warning\",\n        style: \"solid\",\n        class: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n      },\n      {\n        variant: \"error\",\n        style: \"solid\",\n        class: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n      },\n      {\n        variant: \"info\",\n        style: \"solid\",\n        class: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n      },\n      {\n        variant: \"neutral\",\n        style: \"solid\",\n        class: cn(\"bg-surface-muted\", \"text-fg-primary\", \"border-line-default\"),\n      },\n      {\n        variant: \"primary\",\n        style: \"solid\",\n        class: cn(\n          \"bg-surface-brand-subtle\",\n          \"text-fg-brand-emphasis\",\n          \"border-line-brand\",\n        ),\n      },\n      {\n        variant: \"secondary\",\n        style: \"solid\",\n        // bg-pink-300: secondary solid badge — no semantic equivalent\n        // (would shift 2 shades to bg-surface-secondary). Kept literal until\n        // secondary brand surface palette expands beyond DEFAULT.\n        class: cn(\n          \"bg-pink-300\",\n          \"text-fg-brand-secondary-emphasis\",\n          \"border-line-secondary\",\n        ),\n      },\n      // Outline style variants\n      {\n        variant: \"success\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-success\", \"text-fg-success\"),\n      },\n      {\n        variant: \"warning\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-warning\", \"text-fg-warning\"),\n      },\n      {\n        variant: \"error\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-error\", \"text-fg-error\"),\n      },\n      {\n        variant: \"info\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-info\", \"text-fg-info\"),\n      },\n      {\n        variant: \"neutral\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-line-default\", \"text-fg-secondary\"),\n      },\n      {\n        variant: \"primary\",\n        style: \"outline\",\n        class: cn(\"bg-transparent\", \"border-line-brand\", \"text-fg-brand\"),\n      },\n      {\n        variant: \"secondary\",\n        style: \"outline\",\n        class: cn(\n          \"bg-transparent\",\n          \"border-line-secondary\",\n          \"text-fg-brand-secondary\",\n        ),\n      },\n    ],\n    defaultVariants: {\n      variant: \"neutral\",\n      size: \"md\",\n      style: \"solid\",\n    },\n  },\n);\n\nconst Badge = memo(\n  forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n    {\n      variant = \"neutral\",\n      size = \"md\",\n      style = \"solid\",\n      className = \"\",\n      children,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const classes = cn(badgeVariants({ variant, size, style }), className);\n\n    // Best-effort accessible name resolution: explicit aria-label wins;\n    // string children become the label; single-wrapped string children\n    // (e.g. <Badge><span>Active</span></Badge>) are unwrapped one level.\n    // Otherwise undefined and the consumer is responsible for naming\n    // the badge externally.\n    let accessibleLabel: string | undefined;\n    if (ariaLabel) {\n      accessibleLabel = ariaLabel;\n    } else if (typeof children === \"string\") {\n      accessibleLabel = children;\n    } else if (\n      typeof children === \"object\" &&\n      children !== null &&\n      \"props\" in children\n    ) {\n      const childProps = (children as { props?: { children?: unknown } }).props;\n      if (childProps?.children && typeof childProps.children === \"string\") {\n        accessibleLabel = childProps.children;\n      }\n    }\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label={accessibleLabel}\n        className={classes}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }),\n);\n\nBadge.displayName = \"Badge\";\n\nexport default Badge;\n"],"names":["badgeVariants","cva","cn","getTypographyWeight","getRadiusClass","getSpacingClass","getTypographySize","Badge","memo","forwardRef","_a","ref","_b","variant","size","style","className","children","ariaLabel","props","__objRest","classes","accessibleLabel","childProps","jsx","__spreadProps","__spreadValues"],"mappings":"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"}