@nofinite/nui 1.1.2 → 2.0.0

package/dist/components/avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["/**\r\n * Avatar.tsx\r\n * Enterprise-grade Avatar component.\r\n */\r\nimport React, { useState } from 'react';\r\nimport './Avatar.css';\r\n\r\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\r\ntype AvatarShape = 'circle' | 'rounded' | 'square';\r\ntype Status = 'online' | 'offline' | 'busy' | undefined;\r\n\r\ninterface AvatarProps {\r\n  src?: string;\r\n  alt?: string;\r\n  name?: string; // For initials fallback\r\n  size?: AvatarSize;\r\n  shape?: AvatarShape;\r\n  status?: Status;\r\n  loading?: boolean; // skeleton\r\n  className?: string;\r\n  fallbackIcon?: React.ReactNode;\r\n}\r\n\r\nfunction getInitials(name?: string): string {\r\n  if (!name) return '';\r\n  const parts = name.trim().split(' ');\r\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();\r\n  return (parts[0][0] + parts[1][0]).toUpperCase();\r\n}\r\n\r\nexport function Avatar({\r\n  src,\r\n  alt,\r\n  name,\r\n  size = 'md',\r\n  shape = 'circle',\r\n  status,\r\n  loading = false,\r\n  className = '',\r\n  fallbackIcon,\r\n}: AvatarProps) {\r\n  const [errored, setErrored] = useState(false);\r\n  const initials = getInitials(name);\r\n\r\n  const classes = [\r\n    'ui-avatar',\r\n    `ui-avatar--${size}`,\r\n    `ui-avatar--${shape}`,\r\n    loading && 'ui-avatar-loading',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const showImage = src && !errored && !loading;\r\n\r\n  return (\r\n    <div className={classes} aria-label={alt || name}>\r\n      {showImage ? (\r\n        <img\r\n          src={src}\r\n          alt={alt || name || 'avatar'}\r\n          onError={() => setErrored(true)}\r\n        />\r\n      ) : initials ? (\r\n        <span>{initials}</span>\r\n      ) : fallbackIcon ? (\r\n        <span>{fallbackIcon}</span>\r\n      ) : (\r\n        <span>?</span>\r\n      )}\r\n\r\n      {status && (\r\n        <span\r\n          className={[\r\n            'ui-avatar-status',\r\n            status && `ui-avatar-status--${status}`,\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          aria-label={status}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["getInitials","name","parts","Avatar","src","alt","size","shape","status","loading","className","fallbackIcon","errored","setErrored","useState","initials","classes","showImage","jsx"],"mappings":"oKAuBA,SAASA,EAAYC,EAAuB,CAC1C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAQD,EAAK,KAAA,EAAO,MAAM,GAAG,EACnC,OAAIC,EAAM,SAAW,EAAUA,EAAM,CAAC,EAAE,OAAO,CAAC,EAAE,YAAA,GAC1CA,EAAM,CAAC,EAAE,CAAC,EAAIA,EAAM,CAAC,EAAE,CAAC,GAAG,YAAA,CACrC,CAEO,SAASC,EAAO,CACrB,IAAAC,EACA,IAAAC,EACA,KAAAJ,EACA,KAAAK,EAAO,KACP,MAAAC,EAAQ,SACR,OAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,aAAAC,CACF,EAAgB,CACd,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAWf,EAAYC,CAAI,EAE3Be,EAAU,CACd,YACA,cAAcV,CAAI,GAClB,cAAcC,CAAK,GACnBE,GAAW,oBACXC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EAAYb,GAAO,CAACQ,GAAW,CAACH,EAEtC,cACG,MAAA,CAAI,UAAWO,EAAS,aAAYX,GAAOJ,EACzC,SAAA,CAAAgB,EACCC,EAAAA,IAAC,MAAA,CACC,IAAAd,EACA,IAAKC,GAAOJ,GAAQ,SACpB,QAAS,IAAMY,EAAW,EAAI,CAAA,CAAA,EAE9BE,EACFG,EAAAA,IAAC,OAAA,CAAM,SAAAH,CAAA,CAAS,EACdJ,EACFO,EAAAA,IAAC,OAAA,CAAM,SAAAP,CAAA,CAAa,EAEpBO,EAAAA,IAAC,QAAK,SAAA,IAAC,EAGRV,GACCU,EAAAA,IAAC,OAAA,CACC,UAAW,CACT,mBACAV,GAAU,qBAAqBA,CAAM,EAAA,EAEpC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,aAAYA,CAAA,CAAA,CACd,EAEJ,CAEJ"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from 'react';\nimport { cn } from '../../utils';\nimport './Avatar.css';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'rounded' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  name?: string;\n  size?: AvatarSize;\n  shape?: AvatarShape;\n  status?: AvatarStatus;\n  fallbackIcon?: React.ReactNode; \n  loading?: boolean;              \n  className?: string;\n}\n\n/**\n * Utility to extract initials from a name string.\n * Handles single words and multi-word names appropriately.\n */\nfunction getInitials(name?: string): string {\n  if (!name) return '';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 0) return '';\n  if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Avatar Component\n * * A visual representation of a user or entity.\n * Implements a strict fallback sequence: Image -> Initials -> Fallback Icon -> Default Icon.\n */\nexport function Avatar({\n  src,\n  alt,\n  name,\n  size = 'md',\n  shape = 'circle',\n  status,\n  fallbackIcon,  \n  loading,       \n  className,\n  ...props       \n}: AvatarProps) {\n  // * Native error handling: We track if the image fails to load via the native onError event\n  // to seamlessly trigger the fallback UI without needing complex fetch checks.\n  const [hasError, setHasError] = useState(false);\n  const initials = getInitials(name);\n  \n  // If loading is true, we force the fallback/skeleton state by hiding the image\n  const showImage = src && !hasError && !loading;\n\n  return (\n    <div\n      className={cn(\n        \"nui-avatar\", \n        loading && \"nui-avatar--loading\", \n        className\n      )}\n      data-size={size}\n      data-shape={shape}\n      role=\"img\"\n      aria-label={alt || name || \"Avatar\"}\n      {...props} \n    >\n      {showImage ? (\n        <img\n          src={src}\n          alt={alt || name}\n          className=\"nui-avatar__image\"\n          onError={() => setHasError(true)}\n        />\n      ) : (\n        <div className=\"nui-avatar__fallback\" aria-hidden=\"true\">\n          {/* Fallback Waterfall Logic */}\n          {!loading && (initials || fallbackIcon || (\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n            </svg>\n          ))}\n        </div>\n      )}\n\n      {status && (\n        <span \n          className=\"nui-avatar__status\" \n          data-status={status} \n          role=\"status\"\n          aria-label={status}\n        />\n      )}\n    </div>\n  );\n}"],"names":["getInitials","name","parts","Avatar","src","alt","size","shape","status","fallbackIcon","loading","className","props","hasError","setHasError","useState","initials","showImage","jsxs","cn","jsx"],"mappings":"6MA0BA,SAASA,EAAYC,EAAuB,CAC1C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EACrC,OAAIC,EAAM,SAAW,EAAU,GAC3BA,EAAM,SAAW,EAAUA,EAAM,CAAC,EAAE,UAAU,EAAG,CAAC,EAAE,YAAA,GAChDA,EAAM,CAAC,EAAE,CAAC,EAAIA,EAAMA,EAAM,OAAS,CAAC,EAAE,CAAC,GAAG,YAAA,CACpD,CAOO,SAASC,EAAO,CACrB,IAAAC,EACA,IAAAC,EACA,KAAAJ,EACA,KAAAK,EAAO,KACP,MAAAC,EAAQ,SACR,OAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAgB,CAGd,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxCC,EAAWhB,EAAYC,CAAI,EAG3BgB,EAAYb,GAAO,CAACS,GAAY,CAACH,EAEvC,OACEQ,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GACT,aACAT,GAAW,sBACXC,CAAA,EAEF,YAAWL,EACX,aAAYC,EACZ,KAAK,MACL,aAAYF,GAAOJ,GAAQ,SAC1B,GAAGW,EAEH,SAAA,CAAAK,EACCG,EAAAA,IAAC,MAAA,CACC,IAAAhB,EACA,IAAKC,GAAOJ,EACZ,UAAU,oBACV,QAAS,IAAMa,EAAY,EAAI,CAAA,CAAA,EAGjCM,EAAAA,IAAC,MAAA,CAAI,UAAU,uBAAuB,cAAY,OAE/C,SAAA,CAACV,IAAYM,GAAYP,GACxBS,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QACrI,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,EAAE,2CAAA,CAA4C,QACnD,SAAA,CAAO,GAAG,KAAK,GAAG,IAAI,EAAE,GAAA,CAAI,CAAA,CAAA,CAC/B,EAAA,CAEJ,EAGDZ,GACCY,EAAAA,IAAC,OAAA,CACC,UAAU,qBACV,cAAaZ,EACb,KAAK,SACL,aAAYA,CAAA,CAAA,CACd,CAAA,CAAA,CAIR"}

package/dist/components/avatar/Avatar.js

@@ -1,51 +1,65 @@
-import { jsxs as v, jsx as t } from "react/jsx-runtime";
-import { useState as d } from "react";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useState as f } from "react";
 /* empty css           */
-function h(r) {
-  if (!r) return "";
-  const a = r.trim().split(" ");
-  return a.length === 1 ? a[0].charAt(0).toUpperCase() : (a[0][0] + a[1][0]).toUpperCase();
+import { cn as g } from "../../utils/cn/cn.js";
+function _(a) {
+  if (!a) return "";
+  const r = a.trim().split(/\s+/);
+  return r.length === 0 ? "" : r.length === 1 ? r[0].substring(0, 2).toUpperCase() : (r[0][0] + r[r.length - 1][0]).toUpperCase();
 }
-function w({
-  src: r,
-  alt: a,
-  name: i,
-  size: l = "md",
-  shape: c = "circle",
-  status: e,
-  loading: s = !1,
-  className: p = "",
-  fallbackIcon: o
+function j({
+  src: a,
+  alt: r,
+  name: e,
+  size: o = "md",
+  shape: l = "circle",
+  status: i,
+  fallbackIcon: c,
+  loading: s,
+  className: u,
+  ...d
 }) {
-  const [u, f] = d(!1), n = h(i), m = [
-    "ui-avatar",
-    `ui-avatar--${l}`,
-    `ui-avatar--${c}`,
-    s && "ui-avatar-loading",
-    p
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ v("div", { className: m, "aria-label": a || i, children: [
-    r && !u && !s ? /* @__PURE__ */ t(
-      "img",
-      {
-        src: r,
-        alt: a || i || "avatar",
-        onError: () => f(!0)
-      }
-    ) : n ? /* @__PURE__ */ t("span", { children: n }) : o ? /* @__PURE__ */ t("span", { children: o }) : /* @__PURE__ */ t("span", { children: "?" }),
-    e && /* @__PURE__ */ t(
-      "span",
-      {
-        className: [
-          "ui-avatar-status",
-          e && `ui-avatar-status--${e}`
-        ].filter(Boolean).join(" "),
-        "aria-label": e
-      }
-    )
-  ] });
+  const [h, p] = f(!1), m = _(e), v = a && !h && !s;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: g(
+        "nui-avatar",
+        s && "nui-avatar--loading",
+        u
+      ),
+      "data-size": o,
+      "data-shape": l,
+      role: "img",
+      "aria-label": r || e || "Avatar",
+      ...d,
+      children: [
+        v ? /* @__PURE__ */ t(
+          "img",
+          {
+            src: a,
+            alt: r || e,
+            className: "nui-avatar__image",
+            onError: () => p(!0)
+          }
+        ) : /* @__PURE__ */ t("div", { className: "nui-avatar__fallback", "aria-hidden": "true", children: !s && (m || c || /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ t("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+          /* @__PURE__ */ t("circle", { cx: "12", cy: "7", r: "4" })
+        ] })) }),
+        i && /* @__PURE__ */ t(
+          "span",
+          {
+            className: "nui-avatar__status",
+            "data-status": i,
+            role: "status",
+            "aria-label": i
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  w as Avatar
+  j as Avatar
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["/**\r\n * Avatar.tsx\r\n * Enterprise-grade Avatar component.\r\n */\r\nimport React, { useState } from 'react';\r\nimport './Avatar.css';\r\n\r\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\r\ntype AvatarShape = 'circle' | 'rounded' | 'square';\r\ntype Status = 'online' | 'offline' | 'busy' | undefined;\r\n\r\ninterface AvatarProps {\r\n  src?: string;\r\n  alt?: string;\r\n  name?: string; // For initials fallback\r\n  size?: AvatarSize;\r\n  shape?: AvatarShape;\r\n  status?: Status;\r\n  loading?: boolean; // skeleton\r\n  className?: string;\r\n  fallbackIcon?: React.ReactNode;\r\n}\r\n\r\nfunction getInitials(name?: string): string {\r\n  if (!name) return '';\r\n  const parts = name.trim().split(' ');\r\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();\r\n  return (parts[0][0] + parts[1][0]).toUpperCase();\r\n}\r\n\r\nexport function Avatar({\r\n  src,\r\n  alt,\r\n  name,\r\n  size = 'md',\r\n  shape = 'circle',\r\n  status,\r\n  loading = false,\r\n  className = '',\r\n  fallbackIcon,\r\n}: AvatarProps) {\r\n  const [errored, setErrored] = useState(false);\r\n  const initials = getInitials(name);\r\n\r\n  const classes = [\r\n    'ui-avatar',\r\n    `ui-avatar--${size}`,\r\n    `ui-avatar--${shape}`,\r\n    loading && 'ui-avatar-loading',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const showImage = src && !errored && !loading;\r\n\r\n  return (\r\n    <div className={classes} aria-label={alt || name}>\r\n      {showImage ? (\r\n        <img\r\n          src={src}\r\n          alt={alt || name || 'avatar'}\r\n          onError={() => setErrored(true)}\r\n        />\r\n      ) : initials ? (\r\n        <span>{initials}</span>\r\n      ) : fallbackIcon ? (\r\n        <span>{fallbackIcon}</span>\r\n      ) : (\r\n        <span>?</span>\r\n      )}\r\n\r\n      {status && (\r\n        <span\r\n          className={[\r\n            'ui-avatar-status',\r\n            status && `ui-avatar-status--${status}`,\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          aria-label={status}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["getInitials","name","parts","Avatar","src","alt","size","shape","status","loading","className","fallbackIcon","errored","setErrored","useState","initials","classes","jsx"],"mappings":";;;AAuBA,SAASA,EAAYC,GAAuB;AAC1C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,GAAG;AACnC,SAAIC,EAAM,WAAW,IAAUA,EAAM,CAAC,EAAE,OAAO,CAAC,EAAE,YAAA,KAC1CA,EAAM,CAAC,EAAE,CAAC,IAAIA,EAAM,CAAC,EAAE,CAAC,GAAG,YAAA;AACrC;AAEO,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,MAAAK,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,cAAAC;AACF,GAAgB;AACd,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAWf,EAAYC,CAAI,GAE3Be,IAAU;AAAA,IACd;AAAA,IACA,cAAcV,CAAI;AAAA,IAClB,cAAcC,CAAK;AAAA,IACnBE,KAAW;AAAA,IACXC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAIX,2BACG,OAAA,EAAI,WAAWM,GAAS,cAAYX,KAAOJ,GACzC,UAAA;AAAA,IAJaG,KAAO,CAACQ,KAAW,CAACH,IAKhC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAb;AAAA,QACA,KAAKC,KAAOJ,KAAQ;AAAA,QACpB,SAAS,MAAMY,EAAW,EAAI;AAAA,MAAA;AAAA,IAAA,IAE9BE,IACF,gBAAAE,EAAC,QAAA,EAAM,UAAAF,EAAA,CAAS,IACdJ,IACF,gBAAAM,EAAC,QAAA,EAAM,UAAAN,EAAA,CAAa,IAEpB,gBAAAM,EAAC,UAAK,UAAA,KAAC;AAAA,IAGRT,KACC,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACAT,KAAU,qBAAqBA,CAAM;AAAA,QAAA,EAEpC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,cAAYA;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,GAEJ;AAEJ;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from 'react';\nimport { cn } from '../../utils';\nimport './Avatar.css';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'rounded' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  name?: string;\n  size?: AvatarSize;\n  shape?: AvatarShape;\n  status?: AvatarStatus;\n  fallbackIcon?: React.ReactNode; \n  loading?: boolean;              \n  className?: string;\n}\n\n/**\n * Utility to extract initials from a name string.\n * Handles single words and multi-word names appropriately.\n */\nfunction getInitials(name?: string): string {\n  if (!name) return '';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 0) return '';\n  if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Avatar Component\n * * A visual representation of a user or entity.\n * Implements a strict fallback sequence: Image -> Initials -> Fallback Icon -> Default Icon.\n */\nexport function Avatar({\n  src,\n  alt,\n  name,\n  size = 'md',\n  shape = 'circle',\n  status,\n  fallbackIcon,  \n  loading,       \n  className,\n  ...props       \n}: AvatarProps) {\n  // * Native error handling: We track if the image fails to load via the native onError event\n  // to seamlessly trigger the fallback UI without needing complex fetch checks.\n  const [hasError, setHasError] = useState(false);\n  const initials = getInitials(name);\n  \n  // If loading is true, we force the fallback/skeleton state by hiding the image\n  const showImage = src && !hasError && !loading;\n\n  return (\n    <div\n      className={cn(\n        \"nui-avatar\", \n        loading && \"nui-avatar--loading\", \n        className\n      )}\n      data-size={size}\n      data-shape={shape}\n      role=\"img\"\n      aria-label={alt || name || \"Avatar\"}\n      {...props} \n    >\n      {showImage ? (\n        <img\n          src={src}\n          alt={alt || name}\n          className=\"nui-avatar__image\"\n          onError={() => setHasError(true)}\n        />\n      ) : (\n        <div className=\"nui-avatar__fallback\" aria-hidden=\"true\">\n          {/* Fallback Waterfall Logic */}\n          {!loading && (initials || fallbackIcon || (\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n            </svg>\n          ))}\n        </div>\n      )}\n\n      {status && (\n        <span \n          className=\"nui-avatar__status\" \n          data-status={status} \n          role=\"status\"\n          aria-label={status}\n        />\n      )}\n    </div>\n  );\n}"],"names":["getInitials","name","parts","Avatar","src","alt","size","shape","status","fallbackIcon","loading","className","props","hasError","setHasError","useState","initials","showImage","jsxs","cn","jsx"],"mappings":";;;;AA0BA,SAASA,EAAYC,GAAuB;AAC1C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,KAAK;AACrC,SAAIC,EAAM,WAAW,IAAU,KAC3BA,EAAM,WAAW,IAAUA,EAAM,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAA,KAChDA,EAAM,CAAC,EAAE,CAAC,IAAIA,EAAMA,EAAM,SAAS,CAAC,EAAE,CAAC,GAAG,YAAA;AACpD;AAOO,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,MAAAK,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AAGd,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAWhB,EAAYC,CAAI,GAG3BgB,IAAYb,KAAO,CAACS,KAAY,CAACH;AAEvC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAT,KAAW;AAAA,QACXC;AAAA,MAAA;AAAA,MAEF,aAAWL;AAAA,MACX,cAAYC;AAAA,MACZ,MAAK;AAAA,MACL,cAAYF,KAAOJ,KAAQ;AAAA,MAC1B,GAAGW;AAAA,MAEH,UAAA;AAAA,QAAAK,IACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAhB;AAAA,YACA,KAAKC,KAAOJ;AAAA,YACZ,WAAU;AAAA,YACV,SAAS,MAAMa,EAAY,EAAI;AAAA,UAAA;AAAA,QAAA,IAGjC,gBAAAM,EAAC,OAAA,EAAI,WAAU,wBAAuB,eAAY,QAE/C,UAAA,CAACV,MAAYM,KAAYP,KACxB,gBAAAS,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACrI,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,4CAAA,CAA4C;AAAA,4BACnD,UAAA,EAAO,IAAG,MAAK,IAAG,KAAI,GAAE,IAAA,CAAI;AAAA,QAAA,EAAA,CAC/B,GAAA,CAEJ;AAAA,QAGDZ,KACC,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAaZ;AAAA,YACb,MAAK;AAAA,YACL,cAAYA;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/avatar/AvatarGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react");;/* empty css             */function v({children:s,max:e=3,size:n="md",className:o=""}){const a=i.Children.toArray(s),u=a.slice(0,e),t=a.length-e;return r.jsxs("div",{className:["ui-avatar-group",o].join(" "),children:[u.map((c,l)=>r.jsx(i.Fragment,{children:c},l)),t>0&&r.jsxs("div",{className:["ui-avatar",`ui-avatar--${n}`,"ui-avatar-group-overflow"].join(" "),children:["+",t]})]})}exports.AvatarGroup=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react");;/* empty css             */const u=require("../../utils/cn/cn.cjs");function d({children:l,max:s=3,size:a="md",className:o,...m}){const n=t.Children.toArray(l),v=n.slice(0,s),i=n.length-s;return r.jsxs("div",{className:u.cn("nui-avatar-group",o),"data-size":a,...m,children:[v.map(e=>{if(t.isValidElement(e)){const c=e;return t.cloneElement(c,{size:a,className:u.cn("nui-avatar-group__item",c.props.className)})}return e}),i>0&&r.jsx("div",{className:"nui-avatar nui-avatar--excess","data-size":a,children:r.jsxs("span",{className:"nui-avatar__fallback",children:["+",i]})})]})}exports.AvatarGroup=d;
 //# sourceMappingURL=AvatarGroup.cjs.map

package/dist/components/avatar/AvatarGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.cjs","sources":["../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["/**\r\n * AvatarGroup.tsx\r\n * Displays overlapping avatars, with overflow like +3\r\n */\r\nimport React from 'react';\r\nimport './Avatar.css';\r\n\r\ninterface AvatarGroupProps {\r\n  children: React.ReactNode[];\r\n  max?: number;\r\n  size?: 'sm' | 'md' | 'lg' | 'xl';\r\n  className?: string;\r\n}\r\n\r\nexport function AvatarGroup({\r\n  children,\r\n  max = 3,\r\n  size = 'md',\r\n  className = '',\r\n}: AvatarGroupProps) {\r\n  const items = React.Children.toArray(children);\r\n  const visible = items.slice(0, max);\r\n  const extra = items.length - max;\r\n\r\n  return (\r\n    <div className={['ui-avatar-group', className].join(' ')}>\r\n      {visible.map((child, i) => (\r\n        <React.Fragment key={i}>{child}</React.Fragment>\r\n      ))}\r\n\r\n      {extra > 0 && (\r\n        <div\r\n          className={[\r\n            'ui-avatar',\r\n            `ui-avatar--${size}`,\r\n            'ui-avatar-group-overflow',\r\n          ].join(' ')}\r\n        >\r\n          +{extra}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["AvatarGroup","children","max","size","className","items","React","visible","extra","jsxs","child","i","jsx"],"mappings":"oKAcO,SAASA,EAAY,CAC1B,SAAAC,EACA,IAAAC,EAAM,EACN,KAAAC,EAAO,KACP,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EAAQC,EAAM,SAAS,QAAQL,CAAQ,EACvCM,EAAUF,EAAM,MAAM,EAAGH,CAAG,EAC5BM,EAAQH,EAAM,OAASH,EAE7B,OACEO,OAAC,OAAI,UAAW,CAAC,kBAAmBL,CAAS,EAAE,KAAK,GAAG,EACpD,SAAA,CAAAG,EAAQ,IAAI,CAACG,EAAOC,IACnBC,EAAAA,IAACN,EAAM,SAAN,CAAwB,SAAAI,CAAA,EAAJC,CAAU,CAChC,EAEAH,EAAQ,GACPC,EAAAA,KAAC,MAAA,CACC,UAAW,CACT,YACA,cAAcN,CAAI,GAClB,0BAAA,EACA,KAAK,GAAG,EACX,SAAA,CAAA,IACGK,CAAA,CAAA,CAAA,CACJ,EAEJ,CAEJ"}
+{"version":3,"file":"AvatarGroup.cjs","sources":["../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils'; \nimport { AvatarSize, AvatarProps } from './Avatar'; \nimport './Avatar.css';\n\ninterface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Maximum number of avatars to display before truncating */\n  max?: number;\n  /** Size passed down to all nested Avatar components */\n  size?: AvatarSize;\n  className?: string;\n}\n\n/**\n * AvatarGroup Component\n * * Visually groups multiple Avatar components together, handling truncation and overlapping.\n */\nexport function AvatarGroup({\n  children,\n  max = 3,\n  size = 'md',\n  className,\n  ...props\n}: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const visibleItems = items.slice(0, max);\n  const extraCount = items.length - max;\n\n  return (\n    <div \n      className={cn(\"nui-avatar-group\", className)} \n      data-size={size}\n      {...props}\n    >\n      {visibleItems.map((child) => {\n        // * Library Architecture: We strictly check and cast children to ensure we are only\n        // injecting props into valid Avatar elements, preventing runtime crashes if users\n        // accidentally pass text or invalid DOM nodes as children.\n        if (React.isValidElement(child)) {\n          const avatarChild = child as React.ReactElement<AvatarProps>;\n          \n          return React.cloneElement(avatarChild, { \n            size,\n            className: cn(\"nui-avatar-group__item\", avatarChild.props.className) \n          });\n        }\n        return child;\n      })}\n\n      {/* Overflow Indicator */}\n      {extraCount > 0 && (\n        <div className=\"nui-avatar nui-avatar--excess\" data-size={size}>\n          <span className=\"nui-avatar__fallback\">+{extraCount}</span>\n        </div>\n      )}\n    </div>\n  );\n}"],"names":["AvatarGroup","children","max","size","className","props","items","React","visibleItems","extraCount","jsxs","cn","child","avatarChild","jsx"],"mappings":"6MAkBO,SAASA,EAAY,CAC1B,SAAAC,EACA,IAAAC,EAAM,EACN,KAAAC,EAAO,KACP,UAAAC,EACA,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAQC,EAAM,SAAS,QAAQN,CAAQ,EACvCO,EAAeF,EAAM,MAAM,EAAGJ,CAAG,EACjCO,EAAaH,EAAM,OAASJ,EAElC,OACEQ,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GAAG,mBAAoBP,CAAS,EAC3C,YAAWD,EACV,GAAGE,EAEH,SAAA,CAAAG,EAAa,IAAKI,GAAU,CAI3B,GAAIL,EAAM,eAAeK,CAAK,EAAG,CAC/B,MAAMC,EAAcD,EAEpB,OAAOL,EAAM,aAAaM,EAAa,CACrC,KAAAV,EACA,UAAWQ,EAAAA,GAAG,yBAA0BE,EAAY,MAAM,SAAS,CAAA,CACpE,CACH,CACA,OAAOD,CACT,CAAC,EAGAH,EAAa,GACZK,EAAAA,IAAC,MAAA,CAAI,UAAU,gCAAgC,YAAWX,EACxD,SAAAO,EAAAA,KAAC,OAAA,CAAK,UAAU,uBAAuB,SAAA,CAAA,IAAED,CAAA,CAAA,CAAW,CAAA,CACtD,CAAA,CAAA,CAAA,CAIR"}

package/dist/components/avatar/AvatarGroup.js

@@ -1,32 +1,41 @@
-import { jsxs as t, jsx as u } from "react/jsx-runtime";
-import o from "react";
+import { jsxs as o, jsx as v } from "react/jsx-runtime";
+import t from "react";
 /* empty css           */
-function h({
-  children: e,
-  max: r = 3,
-  size: n = "md",
-  className: s = ""
+import { cn as m } from "../../utils/cn/cn.js";
+function x({
+  children: c,
+  max: e = 3,
+  size: a = "md",
+  className: l,
+  ...u
 }) {
-  const a = o.Children.toArray(e), c = a.slice(0, r), i = a.length - r;
-  return /* @__PURE__ */ t("div", { className: ["ui-avatar-group", s].join(" "), children: [
-    c.map((l, m) => /* @__PURE__ */ u(o.Fragment, { children: l }, m)),
-    i > 0 && /* @__PURE__ */ t(
-      "div",
-      {
-        className: [
-          "ui-avatar",
-          `ui-avatar--${n}`,
-          "ui-avatar-group-overflow"
-        ].join(" "),
-        children: [
+  const s = t.Children.toArray(c), p = s.slice(0, e), n = s.length - e;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: m("nui-avatar-group", l),
+      "data-size": a,
+      ...u,
+      children: [
+        p.map((r) => {
+          if (t.isValidElement(r)) {
+            const i = r;
+            return t.cloneElement(i, {
+              size: a,
+              className: m("nui-avatar-group__item", i.props.className)
+            });
+          }
+          return r;
+        }),
+        n > 0 && /* @__PURE__ */ v("div", { className: "nui-avatar nui-avatar--excess", "data-size": a, children: /* @__PURE__ */ o("span", { className: "nui-avatar__fallback", children: [
           "+",
-          i
-        ]
-      }
-    )
-  ] });
+          n
+        ] }) })
+      ]
+    }
+  );
 }
 export {
-  h as AvatarGroup
+  x as AvatarGroup
 };
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/components/avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["/**\r\n * AvatarGroup.tsx\r\n * Displays overlapping avatars, with overflow like +3\r\n */\r\nimport React from 'react';\r\nimport './Avatar.css';\r\n\r\ninterface AvatarGroupProps {\r\n  children: React.ReactNode[];\r\n  max?: number;\r\n  size?: 'sm' | 'md' | 'lg' | 'xl';\r\n  className?: string;\r\n}\r\n\r\nexport function AvatarGroup({\r\n  children,\r\n  max = 3,\r\n  size = 'md',\r\n  className = '',\r\n}: AvatarGroupProps) {\r\n  const items = React.Children.toArray(children);\r\n  const visible = items.slice(0, max);\r\n  const extra = items.length - max;\r\n\r\n  return (\r\n    <div className={['ui-avatar-group', className].join(' ')}>\r\n      {visible.map((child, i) => (\r\n        <React.Fragment key={i}>{child}</React.Fragment>\r\n      ))}\r\n\r\n      {extra > 0 && (\r\n        <div\r\n          className={[\r\n            'ui-avatar',\r\n            `ui-avatar--${size}`,\r\n            'ui-avatar-group-overflow',\r\n          ].join(' ')}\r\n        >\r\n          +{extra}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["AvatarGroup","children","max","size","className","items","React","visible","extra","jsxs","child","i","jsx"],"mappings":";;;AAcO,SAASA,EAAY;AAAA,EAC1B,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AACd,GAAqB;AACnB,QAAMC,IAAQC,EAAM,SAAS,QAAQL,CAAQ,GACvCM,IAAUF,EAAM,MAAM,GAAGH,CAAG,GAC5BM,IAAQH,EAAM,SAASH;AAE7B,SACE,gBAAAO,EAAC,SAAI,WAAW,CAAC,mBAAmBL,CAAS,EAAE,KAAK,GAAG,GACpD,UAAA;AAAA,IAAAG,EAAQ,IAAI,CAACG,GAAOC,MACnB,gBAAAC,EAACN,EAAM,UAAN,EAAwB,UAAAI,EAAA,GAAJC,CAAU,CAChC;AAAA,IAEAH,IAAQ,KACP,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,cAAcN,CAAI;AAAA,UAClB;AAAA,QAAA,EACA,KAAK,GAAG;AAAA,QACX,UAAA;AAAA,UAAA;AAAA,UACGK;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GAEJ;AAEJ;"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/avatar/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils'; \nimport { AvatarSize, AvatarProps } from './Avatar'; \nimport './Avatar.css';\n\ninterface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Maximum number of avatars to display before truncating */\n  max?: number;\n  /** Size passed down to all nested Avatar components */\n  size?: AvatarSize;\n  className?: string;\n}\n\n/**\n * AvatarGroup Component\n * * Visually groups multiple Avatar components together, handling truncation and overlapping.\n */\nexport function AvatarGroup({\n  children,\n  max = 3,\n  size = 'md',\n  className,\n  ...props\n}: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const visibleItems = items.slice(0, max);\n  const extraCount = items.length - max;\n\n  return (\n    <div \n      className={cn(\"nui-avatar-group\", className)} \n      data-size={size}\n      {...props}\n    >\n      {visibleItems.map((child) => {\n        // * Library Architecture: We strictly check and cast children to ensure we are only\n        // injecting props into valid Avatar elements, preventing runtime crashes if users\n        // accidentally pass text or invalid DOM nodes as children.\n        if (React.isValidElement(child)) {\n          const avatarChild = child as React.ReactElement<AvatarProps>;\n          \n          return React.cloneElement(avatarChild, { \n            size,\n            className: cn(\"nui-avatar-group__item\", avatarChild.props.className) \n          });\n        }\n        return child;\n      })}\n\n      {/* Overflow Indicator */}\n      {extraCount > 0 && (\n        <div className=\"nui-avatar nui-avatar--excess\" data-size={size}>\n          <span className=\"nui-avatar__fallback\">+{extraCount}</span>\n        </div>\n      )}\n    </div>\n  );\n}"],"names":["AvatarGroup","children","max","size","className","props","items","React","visibleItems","extraCount","jsxs","cn","child","avatarChild","jsx"],"mappings":";;;;AAkBO,SAASA,EAAY;AAAA,EAC1B,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAQC,EAAM,SAAS,QAAQN,CAAQ,GACvCO,IAAeF,EAAM,MAAM,GAAGJ,CAAG,GACjCO,IAAaH,EAAM,SAASJ;AAElC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,oBAAoBP,CAAS;AAAA,MAC3C,aAAWD;AAAA,MACV,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAG,EAAa,IAAI,CAACI,MAAU;AAI3B,cAAIL,EAAM,eAAeK,CAAK,GAAG;AAC/B,kBAAMC,IAAcD;AAEpB,mBAAOL,EAAM,aAAaM,GAAa;AAAA,cACrC,MAAAV;AAAA,cACA,WAAWQ,EAAG,0BAA0BE,EAAY,MAAM,SAAS;AAAA,YAAA,CACpE;AAAA,UACH;AACA,iBAAOD;AAAA,QACT,CAAC;AAAA,QAGAH,IAAa,KACZ,gBAAAK,EAAC,OAAA,EAAI,WAAU,iCAAgC,aAAWX,GACxD,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,wBAAuB,UAAA;AAAA,UAAA;AAAA,UAAED;AAAA,QAAA,EAAA,CAAW,EAAA,CACtD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/badge/Badge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");;/* empty css            */function f(r){return typeof r=="number"||typeof r=="string"&&r.trim()!==""&&!Number.isNaN(Number(r))}function h({children:r,count:a,max:s,variant:p="default",size:g="md",pill:N=!1,dot:o=!1,href:u,onClick:d,ariaLabel:j,className:y="",title:n,iconLeft:c,iconRight:m}){let l=r;f(a)&&(f(s)&&typeof s=="number"&&typeof a=="number"&&a>s?l=`${s}+`:l=a);let e=j;!e&&f(a)&&(e=typeof a=="number"?`${a} notifications`:void 0);const t=["ui-badge",`ui-badge--${p}`,`ui-badge--${g}`,N&&"ui-badge--pill",o&&"ui-badge--dot",(u||d)&&"ui-badge--interactive",y].filter(Boolean).join(" ");if(o)return i.jsx("span",{className:t,"aria-label":e,"aria-hidden":e?void 0:!0,title:n});const b=i.jsxs("span",{className:"ui-badge-content","aria-hidden":e?!0:void 0,children:[c&&i.jsx("span",{className:"ui-badge__icon",children:c}),l,m&&i.jsx("span",{className:"ui-badge__icon",children:m})]});return u?i.jsx("a",{href:u,className:t,"aria-label":e,title:n,children:b}):d?i.jsx("button",{type:"button",onClick:d,className:t,"aria-label":e,title:n,children:b}):i.jsx("span",{className:t,"aria-label":e,title:n,children:b})}exports.Badge=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css            */const x=require("../../utils/cn/cn.cjs");function N({children:g,count:n,max:d=99,variant:j="default",size:m="md",pill:f=!1,dot:a=!1,href:s,onClick:i,className:o,iconLeft:c,iconRight:b,...l}){let t=g;n!==void 0&&(a?t=null:t=n>d?`${d}+`:n);const r=x.cn("nui-badge",`nui-badge--${j}`,`nui-badge--${m}`,f&&"nui-badge--pill",a&&"nui-badge--dot",(s||i)&&"nui-badge--interactive",o),u=e.jsxs(e.Fragment,{children:[c&&e.jsx("span",{className:"nui-badge__icon",children:c}),!a&&t,b&&e.jsx("span",{className:"nui-badge__icon",children:b})]});return s?e.jsx("a",{href:s,className:r,...l,children:u}):i?e.jsx("button",{type:"button",onClick:i,className:r,...l,children:u}):e.jsx("span",{className:r,...l,children:u})}exports.Badge=N;
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge.tsx\r\n * ---------\r\n * Simple accessible badge component.\r\n *\r\n * Renders:\r\n * - <span> (default non-interactive)\r\n * - <a href=\"...\"> when `href` provided\r\n * - <button> when `onClick` provided\r\n *\r\n * Accessibility:\r\n * - If numeric content is provided, the component will add an accessible label\r\n *   (e.g. \"5 new notifications\") if `ariaLabel` prop is omitted — this helps\r\n *   screen reader users understand the meaning of the number.\r\n *\r\n * Usage:\r\n *  <Badge>Beta</Badge>\r\n *  <Badge variant=\"primary\" size=\"sm\">New</Badge>\r\n *  <Badge onClick={() => {}} pill>5</Badge>\r\n */\r\n\r\nimport React from 'react';\r\nimport './Badge.css';\r\n\r\ntype Variant = 'default' | 'primary' | 'success' | 'warning' | 'danger';\r\ntype Size = 'sm' | 'md' | 'lg';\r\n\r\ninterface BadgeProps {\r\n  children?: React.ReactNode;\r\n\r\n  // count overflow\r\n  count?: number;\r\n  max?: number;\r\n\r\n  variant?: Variant;\r\n  size?: Size;\r\n  pill?: boolean;\r\n  dot?: boolean;\r\n\r\n  href?: string;\r\n  onClick?: () => void;\r\n\r\n  ariaLabel?: string;\r\n  className?: string;\r\n  title?: string;\r\n\r\n  iconLeft?: React.ReactNode;\r\n  iconRight?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Helper: detect if something is number-like\r\n * (string numeric or number)\r\n */\r\nfunction isNumberLike(val: unknown): val is number | string {\r\n  if (typeof val === 'number') return true;\r\n  if (\r\n    typeof val === 'string' &&\r\n    val.trim() !== '' &&\r\n    !Number.isNaN(Number(val))\r\n  ) {\r\n    return true;\r\n  }\r\n  return false;\r\n}\r\n\r\nexport function Badge({\r\n  children,\r\n  count,\r\n  max,\r\n  variant = 'default',\r\n  size = 'md',\r\n  pill = false,\r\n  dot = false,\r\n  href,\r\n  onClick,\r\n  ariaLabel,\r\n  className = '',\r\n  title,\r\n  iconLeft,\r\n  iconRight,\r\n}: BadgeProps) {\r\n  /**\r\n   * Compute display logic (overflow 99+)\r\n   * SAFE: no \"!\" used\r\n   */\r\n  let displayValue: React.ReactNode = children;\r\n\r\n  if (isNumberLike(count)) {\r\n    if (\r\n      isNumberLike(max) &&\r\n      typeof max === 'number' &&\r\n      typeof count === 'number' &&\r\n      count > max\r\n    ) {\r\n      displayValue = `${max}+`;\r\n    } else {\r\n      displayValue = count;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Compute aria-label\r\n   */\r\n  let computedAria: string | undefined = ariaLabel;\r\n\r\n  if (!computedAria && isNumberLike(count)) {\r\n    computedAria =\r\n      typeof count === 'number' ? `${count} notifications` : undefined;\r\n  }\r\n\r\n  const classes = [\r\n    'ui-badge',\r\n    `ui-badge--${variant}`,\r\n    `ui-badge--${size}`,\r\n    pill && 'ui-badge--pill',\r\n    dot && 'ui-badge--dot',\r\n    (href || onClick) && 'ui-badge--interactive',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  /**\r\n   * Dot badge (no content)\r\n   */\r\n  if (dot) {\r\n    return (\r\n      <span\r\n        className={classes}\r\n        aria-label={computedAria}\r\n        aria-hidden={computedAria ? undefined : true}\r\n        title={title}\r\n      />\r\n    );\r\n  }\r\n\r\n  const content = (\r\n    <span\r\n      className=\"ui-badge-content\"\r\n      aria-hidden={computedAria ? true : undefined}\r\n    >\r\n      {iconLeft && <span className=\"ui-badge__icon\">{iconLeft}</span>}\r\n      {displayValue}\r\n      {iconRight && <span className=\"ui-badge__icon\">{iconRight}</span>}\r\n    </span>\r\n  );\r\n\r\n  /**\r\n   * Anchor support\r\n   */\r\n  if (href) {\r\n    return (\r\n      <a\r\n        href={href}\r\n        className={classes}\r\n        aria-label={computedAria}\r\n        title={title}\r\n      >\r\n        {content}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Button support\r\n   */\r\n  if (onClick) {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        onClick={onClick}\r\n        className={classes}\r\n        aria-label={computedAria}\r\n        title={title}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Default <span>\r\n   */\r\n  return (\r\n    <span className={classes} aria-label={computedAria} title={title}>\r\n      {content}\r\n    </span>\r\n  );\r\n}\r\n"],"names":["isNumberLike","val","Badge","children","count","max","variant","size","pill","dot","href","onClick","ariaLabel","className","title","iconLeft","iconRight","displayValue","computedAria","classes","jsx","content","jsxs"],"mappings":"gJAsDA,SAASA,EAAaC,EAAsC,CAE1D,OADI,OAAOA,GAAQ,UAEjB,OAAOA,GAAQ,UACfA,EAAI,KAAA,IAAW,IACf,CAAC,OAAO,MAAM,OAAOA,CAAG,CAAC,CAK7B,CAEO,SAASC,EAAM,CACpB,SAAAC,EACA,MAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,KAAAC,EAAO,GACP,IAAAC,EAAM,GACN,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAe,CAKb,IAAIC,EAAgCd,EAEhCH,EAAaI,CAAK,IAElBJ,EAAaK,CAAG,GAChB,OAAOA,GAAQ,UACf,OAAOD,GAAU,UACjBA,EAAQC,EAERY,EAAe,GAAGZ,CAAG,IAErBY,EAAeb,GAOnB,IAAIc,EAAmCN,EAEnC,CAACM,GAAgBlB,EAAaI,CAAK,IACrCc,EACE,OAAOd,GAAU,SAAW,GAAGA,CAAK,iBAAmB,QAG3D,MAAMe,EAAU,CACd,WACA,aAAab,CAAO,GACpB,aAAaC,CAAI,GACjBC,GAAQ,iBACRC,GAAO,iBACNC,GAAQC,IAAY,wBACrBE,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAKX,GAAIJ,EACF,OACEW,EAAAA,IAAC,OAAA,CACC,UAAWD,EACX,aAAYD,EACZ,cAAaA,EAAe,OAAY,GACxC,MAAAJ,CAAA,CAAA,EAKN,MAAMO,EACJC,EAAAA,KAAC,OAAA,CACC,UAAU,mBACV,cAAaJ,EAAe,GAAO,OAElC,SAAA,CAAAH,GAAYK,EAAAA,IAAC,OAAA,CAAK,UAAU,iBAAkB,SAAAL,EAAS,EACvDE,EACAD,GAAaI,EAAAA,IAAC,OAAA,CAAK,UAAU,iBAAkB,SAAAJ,CAAA,CAAU,CAAA,CAAA,CAAA,EAO9D,OAAIN,EAEAU,EAAAA,IAAC,IAAA,CACC,KAAAV,EACA,UAAWS,EACX,aAAYD,EACZ,MAAAJ,EAEC,SAAAO,CAAA,CAAA,EAQHV,EAEAS,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAAAT,EACA,UAAWQ,EACX,aAAYD,EACZ,MAAAJ,EAEC,SAAAO,CAAA,CAAA,QASJ,OAAA,CAAK,UAAWF,EAAS,aAAYD,EAAc,MAAAJ,EACjD,SAAAO,EACH,CAEJ"}
+{"version":3,"file":"Badge.cjs","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Badge.css';\n\nexport type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode;\n  /** Displays a numerical count inside the badge */\n  count?: number;\n  /** The maximum number to display before showing a '+' (e.g., 99+) */\n  max?: number;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  /** Rounds the edges to create a pill shape */\n  pill?: boolean;\n  /** Renders a small, empty circular indicator instead of text */\n  dot?: boolean;\n  \n  /** If provided, renders the badge as an <a> tag */\n  href?: string;\n  /** If provided, renders the badge as a <button> tag */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  \n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n}\n\n/**\n * Badge Component\n * * A small status descriptor for UI elements.\n * Architecture Note: Dynamically renders as a <span>, <a>, or <button> based on\n * the presence of `href` or `onClick` props to ensure strict semantic HTML.\n */\nexport function Badge({\n  children,\n  count,\n  max = 99,\n  variant = 'default',\n  size = 'md',\n  pill = false,\n  dot = false,\n  href,\n  onClick,\n  className,\n  iconLeft,\n  iconRight,\n  ...props\n}: BadgeProps) {\n  \n  // 1. Calculate Display Content\n  let content = children;\n  \n  if (count !== undefined) {\n    if (dot) {\n      content = null; \n    } else {\n      content = count > max ? `${max}+` : count;\n    }\n  }\n\n  // 2. Compute Classes\n  const classes = cn(\n    'nui-badge',\n    `nui-badge--${variant}`,\n    `nui-badge--${size}`,\n    pill && 'nui-badge--pill',\n    dot && 'nui-badge--dot',\n    (href || onClick) && 'nui-badge--interactive',\n    className\n  );\n\n  // 3. Render Inner Content\n  const inner = (\n    <>\n      {iconLeft && <span className=\"nui-badge__icon\">{iconLeft}</span>}\n      {!dot && content}\n      {iconRight && <span className=\"nui-badge__icon\">{iconRight}</span>}\n    </>\n  );\n\n  // 4. Render as Link (Semantic Anchor)\n  if (href) {\n    return (\n      <a \n        href={href} \n        className={classes} \n        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {inner}\n      </a>\n    );\n  }\n\n  // 5. Render as Button (Semantic Interactive Element)\n  if (onClick) {\n    return (\n      <button \n        type=\"button\" \n        onClick={onClick as React.MouseEventHandler<HTMLButtonElement>} \n        className={classes} \n        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      >\n        {inner}\n      </button>\n    );\n  }\n\n  // 6. Default Span (Static Indicator)\n  return (\n    <span className={classes} {...props}>\n      {inner}\n    </span>\n  );\n}"],"names":["Badge","children","count","max","variant","size","pill","dot","href","onClick","className","iconLeft","iconRight","props","content","classes","cn","inner","jsxs","Fragment","jsx"],"mappings":"yLAmCO,SAASA,EAAM,CACpB,SAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,GACN,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,KAAAC,EAAO,GACP,IAAAC,EAAM,GACN,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAe,CAGb,IAAIC,EAAUb,EAEVC,IAAU,SACRK,EACFO,EAAU,KAEVA,EAAUZ,EAAQC,EAAM,GAAGA,CAAG,IAAMD,GAKxC,MAAMa,EAAUC,EAAAA,GACd,YACA,cAAcZ,CAAO,GACrB,cAAcC,CAAI,GAClBC,GAAQ,kBACRC,GAAO,kBACNC,GAAQC,IAAY,yBACrBC,CAAA,EAIIO,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAR,GAAYS,EAAAA,IAAC,OAAA,CAAK,UAAU,kBAAmB,SAAAT,EAAS,EACxD,CAACJ,GAAOO,EACRF,GAAaQ,EAAAA,IAAC,OAAA,CAAK,UAAU,kBAAmB,SAAAR,CAAA,CAAU,CAAA,EAC7D,EAIF,OAAIJ,EAEAY,EAAAA,IAAC,IAAA,CACC,KAAAZ,EACA,UAAWO,EACV,GAAIF,EAEJ,SAAAI,CAAA,CAAA,EAMHR,EAEAW,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAAAX,EACA,UAAWM,EACV,GAAIF,EAEJ,SAAAI,CAAA,CAAA,QAOJ,OAAA,CAAK,UAAWF,EAAU,GAAGF,EAC3B,SAAAI,EACH,CAEJ"}

package/dist/components/badge/Badge.js

@@ -1,81 +1,56 @@
-import { jsx as r, jsxs as _ } from "react/jsx-runtime";
+import { jsx as e, jsxs as N, Fragment as _ } from "react/jsx-runtime";
 /* empty css          */
-function f(i) {
-  return typeof i == "number" || typeof i == "string" && i.trim() !== "" && !Number.isNaN(Number(i));
-}
-function B({
-  children: i,
-  count: a,
-  max: s,
-  variant: c = "default",
-  size: N = "md",
-  pill: g = !1,
-  dot: o = !1,
-  href: u,
-  onClick: d,
-  ariaLabel: y,
-  className: h = "",
-  title: n,
-  iconLeft: m,
-  iconRight: p
+import { cn as h } from "../../utils/cn/cn.js";
+function x({
+  children: b,
+  count: n,
+  max: c = 99,
+  variant: g = "default",
+  size: f = "md",
+  pill: o = !1,
+  dot: a = !1,
+  href: i,
+  onClick: s,
+  className: p,
+  iconLeft: u,
+  iconRight: m,
+  ...l
 }) {
-  let l = i;
-  f(a) && (f(s) && typeof s == "number" && typeof a == "number" && a > s ? l = `${s}+` : l = a);
-  let e = y;
-  !e && f(a) && (e = typeof a == "number" ? `${a} notifications` : void 0);
-  const t = [
-    "ui-badge",
-    `ui-badge--${c}`,
-    `ui-badge--${N}`,
-    g && "ui-badge--pill",
-    o && "ui-badge--dot",
-    (u || d) && "ui-badge--interactive",
-    h
-  ].filter(Boolean).join(" ");
-  if (o)
-    return /* @__PURE__ */ r(
-      "span",
-      {
-        className: t,
-        "aria-label": e,
-        "aria-hidden": e ? void 0 : !0,
-        title: n
-      }
-    );
-  const b = /* @__PURE__ */ _(
-    "span",
-    {
-      className: "ui-badge-content",
-      "aria-hidden": e ? !0 : void 0,
-      children: [
-        m && /* @__PURE__ */ r("span", { className: "ui-badge__icon", children: m }),
-        l,
-        p && /* @__PURE__ */ r("span", { className: "ui-badge__icon", children: p })
-      ]
-    }
-  );
-  return u ? /* @__PURE__ */ r(
+  let d = b;
+  n !== void 0 && (a ? d = null : d = n > c ? `${c}+` : n);
+  const r = h(
+    "nui-badge",
+    `nui-badge--${g}`,
+    `nui-badge--${f}`,
+    o && "nui-badge--pill",
+    a && "nui-badge--dot",
+    (i || s) && "nui-badge--interactive",
+    p
+  ), t = /* @__PURE__ */ N(_, { children: [
+    u && /* @__PURE__ */ e("span", { className: "nui-badge__icon", children: u }),
+    !a && d,
+    m && /* @__PURE__ */ e("span", { className: "nui-badge__icon", children: m })
+  ] });
+  return i ? /* @__PURE__ */ e(
     "a",
     {
-      href: u,
-      className: t,
-      "aria-label": e,
-      title: n,
-      children: b
+      href: i,
+      className: r,
+      ...l,
+      children: t
     }
-  ) : d ? /* @__PURE__ */ r(
+  ) : s ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: d,
-      className: t,
-      "aria-label": e,
-      title: n,
-      children: b
+      onClick: s,
+      className: r,
+      ...l,
+      children: t
     }
-  ) : /* @__PURE__ */ r("span", { className: t, "aria-label": e, title: n, children: b });
+  ) : /* @__PURE__ */ e("span", { className: r, ...l, children: t });
 }
 export {
-  B as Badge
+  x as Badge
 };
 //# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge.tsx\r\n * ---------\r\n * Simple accessible badge component.\r\n *\r\n * Renders:\r\n * - <span> (default non-interactive)\r\n * - <a href=\"...\"> when `href` provided\r\n * - <button> when `onClick` provided\r\n *\r\n * Accessibility:\r\n * - If numeric content is provided, the component will add an accessible label\r\n *   (e.g. \"5 new notifications\") if `ariaLabel` prop is omitted — this helps\r\n *   screen reader users understand the meaning of the number.\r\n *\r\n * Usage:\r\n *  <Badge>Beta</Badge>\r\n *  <Badge variant=\"primary\" size=\"sm\">New</Badge>\r\n *  <Badge onClick={() => {}} pill>5</Badge>\r\n */\r\n\r\nimport React from 'react';\r\nimport './Badge.css';\r\n\r\ntype Variant = 'default' | 'primary' | 'success' | 'warning' | 'danger';\r\ntype Size = 'sm' | 'md' | 'lg';\r\n\r\ninterface BadgeProps {\r\n  children?: React.ReactNode;\r\n\r\n  // count overflow\r\n  count?: number;\r\n  max?: number;\r\n\r\n  variant?: Variant;\r\n  size?: Size;\r\n  pill?: boolean;\r\n  dot?: boolean;\r\n\r\n  href?: string;\r\n  onClick?: () => void;\r\n\r\n  ariaLabel?: string;\r\n  className?: string;\r\n  title?: string;\r\n\r\n  iconLeft?: React.ReactNode;\r\n  iconRight?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Helper: detect if something is number-like\r\n * (string numeric or number)\r\n */\r\nfunction isNumberLike(val: unknown): val is number | string {\r\n  if (typeof val === 'number') return true;\r\n  if (\r\n    typeof val === 'string' &&\r\n    val.trim() !== '' &&\r\n    !Number.isNaN(Number(val))\r\n  ) {\r\n    return true;\r\n  }\r\n  return false;\r\n}\r\n\r\nexport function Badge({\r\n  children,\r\n  count,\r\n  max,\r\n  variant = 'default',\r\n  size = 'md',\r\n  pill = false,\r\n  dot = false,\r\n  href,\r\n  onClick,\r\n  ariaLabel,\r\n  className = '',\r\n  title,\r\n  iconLeft,\r\n  iconRight,\r\n}: BadgeProps) {\r\n  /**\r\n   * Compute display logic (overflow 99+)\r\n   * SAFE: no \"!\" used\r\n   */\r\n  let displayValue: React.ReactNode = children;\r\n\r\n  if (isNumberLike(count)) {\r\n    if (\r\n      isNumberLike(max) &&\r\n      typeof max === 'number' &&\r\n      typeof count === 'number' &&\r\n      count > max\r\n    ) {\r\n      displayValue = `${max}+`;\r\n    } else {\r\n      displayValue = count;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Compute aria-label\r\n   */\r\n  let computedAria: string | undefined = ariaLabel;\r\n\r\n  if (!computedAria && isNumberLike(count)) {\r\n    computedAria =\r\n      typeof count === 'number' ? `${count} notifications` : undefined;\r\n  }\r\n\r\n  const classes = [\r\n    'ui-badge',\r\n    `ui-badge--${variant}`,\r\n    `ui-badge--${size}`,\r\n    pill && 'ui-badge--pill',\r\n    dot && 'ui-badge--dot',\r\n    (href || onClick) && 'ui-badge--interactive',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  /**\r\n   * Dot badge (no content)\r\n   */\r\n  if (dot) {\r\n    return (\r\n      <span\r\n        className={classes}\r\n        aria-label={computedAria}\r\n        aria-hidden={computedAria ? undefined : true}\r\n        title={title}\r\n      />\r\n    );\r\n  }\r\n\r\n  const content = (\r\n    <span\r\n      className=\"ui-badge-content\"\r\n      aria-hidden={computedAria ? true : undefined}\r\n    >\r\n      {iconLeft && <span className=\"ui-badge__icon\">{iconLeft}</span>}\r\n      {displayValue}\r\n      {iconRight && <span className=\"ui-badge__icon\">{iconRight}</span>}\r\n    </span>\r\n  );\r\n\r\n  /**\r\n   * Anchor support\r\n   */\r\n  if (href) {\r\n    return (\r\n      <a\r\n        href={href}\r\n        className={classes}\r\n        aria-label={computedAria}\r\n        title={title}\r\n      >\r\n        {content}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Button support\r\n   */\r\n  if (onClick) {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        onClick={onClick}\r\n        className={classes}\r\n        aria-label={computedAria}\r\n        title={title}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Default <span>\r\n   */\r\n  return (\r\n    <span className={classes} aria-label={computedAria} title={title}>\r\n      {content}\r\n    </span>\r\n  );\r\n}\r\n"],"names":["isNumberLike","val","Badge","children","count","max","variant","size","pill","dot","href","onClick","ariaLabel","className","title","iconLeft","iconRight","displayValue","computedAria","classes","jsx","content","jsxs"],"mappings":";;AAsDA,SAASA,EAAaC,GAAsC;AAE1D,SADI,OAAOA,KAAQ,YAEjB,OAAOA,KAAQ,YACfA,EAAI,KAAA,MAAW,MACf,CAAC,OAAO,MAAM,OAAOA,CAAG,CAAC;AAK7B;AAEO,SAASC,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,KAAAC,IAAM;AAAA,EACN,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAe;AAKb,MAAIC,IAAgCd;AAEpC,EAAIH,EAAaI,CAAK,MAElBJ,EAAaK,CAAG,KAChB,OAAOA,KAAQ,YACf,OAAOD,KAAU,YACjBA,IAAQC,IAERY,IAAe,GAAGZ,CAAG,MAErBY,IAAeb;AAOnB,MAAIc,IAAmCN;AAEvC,EAAI,CAACM,KAAgBlB,EAAaI,CAAK,MACrCc,IACE,OAAOd,KAAU,WAAW,GAAGA,CAAK,mBAAmB;AAG3D,QAAMe,IAAU;AAAA,IACd;AAAA,IACA,aAAab,CAAO;AAAA,IACpB,aAAaC,CAAI;AAAA,IACjBC,KAAQ;AAAA,IACRC,KAAO;AAAA,KACNC,KAAQC,MAAY;AAAA,IACrBE;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAKX,MAAIJ;AACF,WACE,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,QACX,cAAYD;AAAA,QACZ,eAAaA,IAAe,SAAY;AAAA,QACxC,OAAAJ;AAAA,MAAA;AAAA,IAAA;AAKN,QAAMO,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAaJ,IAAe,KAAO;AAAA,MAElC,UAAA;AAAA,QAAAH,KAAY,gBAAAK,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAL,GAAS;AAAA,QACvDE;AAAA,QACAD,KAAa,gBAAAI,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAJ,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAO9D,SAAIN,IAEA,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAV;AAAA,MACA,WAAWS;AAAA,MACX,cAAYD;AAAA,MACZ,OAAAJ;AAAA,MAEC,UAAAO;AAAA,IAAA;AAAA,EAAA,IAQHV,IAEA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAAT;AAAA,MACA,WAAWQ;AAAA,MACX,cAAYD;AAAA,MACZ,OAAAJ;AAAA,MAEC,UAAAO;AAAA,IAAA;AAAA,EAAA,sBASJ,QAAA,EAAK,WAAWF,GAAS,cAAYD,GAAc,OAAAJ,GACjD,UAAAO,GACH;AAEJ;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Badge.css';\n\nexport type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode;\n  /** Displays a numerical count inside the badge */\n  count?: number;\n  /** The maximum number to display before showing a '+' (e.g., 99+) */\n  max?: number;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  /** Rounds the edges to create a pill shape */\n  pill?: boolean;\n  /** Renders a small, empty circular indicator instead of text */\n  dot?: boolean;\n  \n  /** If provided, renders the badge as an <a> tag */\n  href?: string;\n  /** If provided, renders the badge as a <button> tag */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  \n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n}\n\n/**\n * Badge Component\n * * A small status descriptor for UI elements.\n * Architecture Note: Dynamically renders as a <span>, <a>, or <button> based on\n * the presence of `href` or `onClick` props to ensure strict semantic HTML.\n */\nexport function Badge({\n  children,\n  count,\n  max = 99,\n  variant = 'default',\n  size = 'md',\n  pill = false,\n  dot = false,\n  href,\n  onClick,\n  className,\n  iconLeft,\n  iconRight,\n  ...props\n}: BadgeProps) {\n  \n  // 1. Calculate Display Content\n  let content = children;\n  \n  if (count !== undefined) {\n    if (dot) {\n      content = null; \n    } else {\n      content = count > max ? `${max}+` : count;\n    }\n  }\n\n  // 2. Compute Classes\n  const classes = cn(\n    'nui-badge',\n    `nui-badge--${variant}`,\n    `nui-badge--${size}`,\n    pill && 'nui-badge--pill',\n    dot && 'nui-badge--dot',\n    (href || onClick) && 'nui-badge--interactive',\n    className\n  );\n\n  // 3. Render Inner Content\n  const inner = (\n    <>\n      {iconLeft && <span className=\"nui-badge__icon\">{iconLeft}</span>}\n      {!dot && content}\n      {iconRight && <span className=\"nui-badge__icon\">{iconRight}</span>}\n    </>\n  );\n\n  // 4. Render as Link (Semantic Anchor)\n  if (href) {\n    return (\n      <a \n        href={href} \n        className={classes} \n        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {inner}\n      </a>\n    );\n  }\n\n  // 5. Render as Button (Semantic Interactive Element)\n  if (onClick) {\n    return (\n      <button \n        type=\"button\" \n        onClick={onClick as React.MouseEventHandler<HTMLButtonElement>} \n        className={classes} \n        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      >\n        {inner}\n      </button>\n    );\n  }\n\n  // 6. Default Span (Static Indicator)\n  return (\n    <span className={classes} {...props}>\n      {inner}\n    </span>\n  );\n}"],"names":["Badge","children","count","max","variant","size","pill","dot","href","onClick","className","iconLeft","iconRight","props","content","classes","cn","inner","jsxs","Fragment","jsx"],"mappings":";;;AAmCO,SAASA,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,KAAAC,IAAM;AAAA,EACN,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AAGb,MAAIC,IAAUb;AAEd,EAAIC,MAAU,WACRK,IACFO,IAAU,OAEVA,IAAUZ,IAAQC,IAAM,GAAGA,CAAG,MAAMD;AAKxC,QAAMa,IAAUC;AAAA,IACd;AAAA,IACA,cAAcZ,CAAO;AAAA,IACrB,cAAcC,CAAI;AAAA,IAClBC,KAAQ;AAAA,IACRC,KAAO;AAAA,KACNC,KAAQC,MAAY;AAAA,IACrBC;AAAA,EAAA,GAIIO,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR,KAAY,gBAAAS,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAT,GAAS;AAAA,IACxD,CAACJ,KAAOO;AAAA,IACRF,KAAa,gBAAAQ,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAR,EAAA,CAAU;AAAA,EAAA,GAC7D;AAIF,SAAIJ,IAEA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAZ;AAAA,MACA,WAAWO;AAAA,MACV,GAAIF;AAAA,MAEJ,UAAAI;AAAA,IAAA;AAAA,EAAA,IAMHR,IAEA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAAX;AAAA,MACA,WAAWM;AAAA,MACV,GAAIF;AAAA,MAEJ,UAAAI;AAAA,IAAA;AAAA,EAAA,sBAOJ,QAAA,EAAK,WAAWF,GAAU,GAAGF,GAC3B,UAAAI,GACH;AAEJ;"}

package/dist/components/badge/BadgeGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("./Badge.cjs");function o({items:r,max:i=3,className:t=""}){const s=r.slice(0,i),n=r.length-i;return e.jsxs("div",{className:["ui-badge-group",t].join(" "),children:[s.map((a,u)=>e.jsx("span",{children:a},u)),n>0&&e.jsx(l.Badge,{pill:!0,variant:"default",children:`+${n}`})]})}exports.BadgeGroup=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),l=require("./Badge.cjs");;/* empty css            */const g=require("../../utils/cn/cn.cjs");function m({children:n,max:r=3,className:t,...a}){const s=d.Children.toArray(n),c=s.slice(0,r),i=s.length-r;return e.jsxs("div",{className:g.cn("nui-badge-group",t),...a,children:[c.map((u,o)=>e.jsx("span",{className:"nui-badge-group__item",children:u},o)),i>0&&e.jsxs(l.Badge,{variant:"default",size:"sm",className:"nui-badge--more",children:["+",i]})]})}exports.BadgeGroup=m;
 //# sourceMappingURL=BadgeGroup.cjs.map

package/dist/components/badge/BadgeGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeGroup.cjs","sources":["../../../src/components/badge/BadgeGroup.tsx"],"sourcesContent":["/**\r\n * BadgeGroup.tsx\r\n * Stacks badges horizontally with overflow (e.g. +3).\r\n */\r\n\r\nimport React from 'react';\r\nimport { Badge } from './Badge';\r\n\r\ninterface BadgeGroupProps {\r\n  items: React.ReactNode[];\r\n  max?: number; // visible badges\r\n  className?: string;\r\n}\r\n\r\nexport function BadgeGroup({\r\n  items,\r\n  max = 3,\r\n  className = '',\r\n}: BadgeGroupProps) {\r\n  const visible = items.slice(0, max);\r\n  const extra = items.length - max;\r\n\r\n  return (\r\n    <div className={['ui-badge-group', className].join(' ')}>\r\n      {visible.map((item, i) => (\r\n        <span key={i}>{item}</span>\r\n      ))}\r\n\r\n      {extra > 0 && <Badge pill variant=\"default\">{`+${extra}`}</Badge>}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["BadgeGroup","items","max","className","visible","extra","jsxs","item","i","jsx","Badge"],"mappings":"8IAcO,SAASA,EAAW,CACzB,MAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EAAY,EACd,EAAoB,CAClB,MAAMC,EAAUH,EAAM,MAAM,EAAGC,CAAG,EAC5BG,EAAQJ,EAAM,OAASC,EAE7B,OACEI,OAAC,OAAI,UAAW,CAAC,iBAAkBH,CAAS,EAAE,KAAK,GAAG,EACnD,SAAA,CAAAC,EAAQ,IAAI,CAACG,EAAMC,UACjB,OAAA,CAAc,SAAAD,CAAA,EAAJC,CAAS,CACrB,EAEAH,EAAQ,GAAKI,EAAAA,IAACC,EAAAA,MAAA,CAAM,KAAI,GAAC,QAAQ,UAAW,SAAA,IAAIL,CAAK,EAAA,CAAG,CAAA,EAC3D,CAEJ"}
+{"version":3,"file":"BadgeGroup.cjs","sources":["../../../src/components/badge/BadgeGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport { Badge } from './Badge';\nimport './Badge.css';\n\ninterface BadgeGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  // Marked as optional to allow empty dynamic arrays without TS errors\n  children?: React.ReactNode; \n  max?: number;\n}\n\n/**\n * BadgeGroup Component\n * * Visually groups multiple Badges together, handling overflow truncation.\n */\nexport function BadgeGroup({\n  children,\n  max = 3,\n  className,\n  ...props\n}: BadgeGroupProps) {\n  const items = React.Children.toArray(children);\n  const visible = items.slice(0, max);\n  const extra = items.length - max;\n\n  return (\n    <div className={cn(\"nui-badge-group\", className)} {...props}>\n      {visible.map((item, i) => (\n        // Wrapper span ensures spacing/layout integrity regardless of badge element type\n        <span key={i} className=\"nui-badge-group__item\">{item}</span>\n      ))}\n\n      {extra > 0 && (\n        <Badge variant=\"default\" size=\"sm\" className=\"nui-badge--more\">\n          +{extra}\n        </Badge>\n      )}\n    </div>\n  );\n}"],"names":["BadgeGroup","children","max","className","props","items","React","visible","extra","jsxs","cn","item","i","jsx","Badge"],"mappings":"qOAeO,SAASA,EAAW,CACzB,SAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EACA,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAQC,EAAM,SAAS,QAAQL,CAAQ,EACvCM,EAAUF,EAAM,MAAM,EAAGH,CAAG,EAC5BM,EAAQH,EAAM,OAASH,EAE7B,OACEO,EAAAA,KAAC,OAAI,UAAWC,EAAAA,GAAG,kBAAmBP,CAAS,EAAI,GAAGC,EACnD,SAAA,CAAAG,EAAQ,IAAI,CAACI,EAAMC,IAElBC,EAAAA,IAAC,OAAA,CAAa,UAAU,wBAAyB,YAAtCD,CAA2C,CACvD,EAEAJ,EAAQ,GACPC,OAACK,EAAAA,MAAA,CAAM,QAAQ,UAAU,KAAK,KAAK,UAAU,kBAAkB,SAAA,CAAA,IAC3DN,CAAA,CAAA,CACJ,CAAA,EAEJ,CAEJ"}

package/dist/components/badge/BadgeGroup.js

@@ -1,17 +1,27 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { Badge as c } from "./Badge.js";
-function u({
-  items: r,
+import { jsxs as o, jsx as d } from "react/jsx-runtime";
+import l from "react";
+import { Badge as p } from "./Badge.js";
+/* empty css          */
+import { cn as u } from "../../utils/cn/cn.js";
+function x({
+  children: t,
   max: e = 3,
-  className: o = ""
+  className: a,
+  ...s
 }) {
-  const t = r.slice(0, e), i = r.length - e;
-  return /* @__PURE__ */ s("div", { className: ["ui-badge-group", o].join(" "), children: [
-    t.map((a, l) => /* @__PURE__ */ n("span", { children: a }, l)),
-    i > 0 && /* @__PURE__ */ n(c, { pill: !0, variant: "default", children: `+${i}` })
+  const r = l.Children.toArray(t), n = r.slice(0, e), i = r.length - e;
+  return /* @__PURE__ */ o("div", { className: u("nui-badge-group", a), ...s, children: [
+    n.map((m, c) => (
+      // Wrapper span ensures spacing/layout integrity regardless of badge element type
+      /* @__PURE__ */ d("span", { className: "nui-badge-group__item", children: m }, c)
+    )),
+    i > 0 && /* @__PURE__ */ o(p, { variant: "default", size: "sm", className: "nui-badge--more", children: [
+      "+",
+      i
+    ] })
   ] });
 }
 export {
-  u as BadgeGroup
+  x as BadgeGroup
 };
 //# sourceMappingURL=BadgeGroup.js.map