@nofinite/nui 1.1.2 → 2.0.2

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

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeGroup.js","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":";;AAcO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC,IAAY;AACd,GAAoB;AAClB,QAAMC,IAAUH,EAAM,MAAM,GAAGC,CAAG,GAC5BG,IAAQJ,EAAM,SAASC;AAE7B,SACE,gBAAAI,EAAC,SAAI,WAAW,CAAC,kBAAkBH,CAAS,EAAE,KAAK,GAAG,GACnD,UAAA;AAAA,IAAAC,EAAQ,IAAI,CAACG,GAAMC,wBACjB,QAAA,EAAc,UAAAD,EAAA,GAAJC,CAAS,CACrB;AAAA,IAEAH,IAAQ,KAAK,gBAAAI,EAACC,GAAA,EAAM,MAAI,IAAC,SAAQ,WAAW,UAAA,IAAIL,CAAK,GAAA,CAAG;AAAA,EAAA,GAC3D;AAEJ;"}
+{"version":3,"file":"BadgeGroup.js","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":";;;;;AAeO,SAASA,EAAW;AAAA,EACzB,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAQC,EAAM,SAAS,QAAQL,CAAQ,GACvCM,IAAUF,EAAM,MAAM,GAAGH,CAAG,GAC5BM,IAAQH,EAAM,SAASH;AAE7B,SACE,gBAAAO,EAAC,SAAI,WAAWC,EAAG,mBAAmBP,CAAS,GAAI,GAAGC,GACnD,UAAA;AAAA,IAAAG,EAAQ,IAAI,CAACI,GAAMC;AAAA;AAAA,MAElB,gBAAAC,EAAC,QAAA,EAAa,WAAU,yBAAyB,eAAtCD,CAA2C;AAAA,KACvD;AAAA,IAEAJ,IAAQ,KACP,gBAAAC,EAACK,GAAA,EAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,mBAAkB,UAAA;AAAA,MAAA;AAAA,MAC3DN;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/breadcrumbs/Breadcrumbs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");;/* empty css                  */function m({items:e,maxItems:t=6,separator:b="›",className:d=""}){if(!e.length)return null;let c=[...e];if(e.length>t){const s=e.slice(0,2),a=e.slice(-2);c=[...s,"...",...a]}return r.jsx("nav",{className:`ui-breadcrumbs ${d}`,"aria-label":"Breadcrumb",children:r.jsx("ol",{className:"ui-breadcrumbs-list",children:c.map((s,a)=>{const l=a===c.length-1;if(s==="...")return r.jsx("li",{className:"ui-breadcrumb-ellipsis",children:"…"},`ellipsis-${a}`);const{label:i,href:n,onClick:u}=s;return r.jsxs("li",{className:"ui-breadcrumb-item",children:[n||u?r.jsx("a",{href:n,onClick:u,className:"ui-breadcrumb-link","aria-current":l?"page":void 0,children:i}):r.jsx("span",{className:`ui-breadcrumb-link ${l?"active":""}`,"aria-current":l?"page":void 0,children:i}),!l&&r.jsx("span",{className:"ui-breadcrumb-separator",children:b})]},`crumb-${a}`)})})})}exports.Breadcrumbs=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                  */const b=require("../../utils/cn/cn.cjs");function j({items:r,maxItems:m=5,separator:c="›",className:o,..._}){if(!r.length)return null;let i=r;if(r.length>m){const s=r.slice(0,1),n=r.slice(-2);i=[...s,"ellipsis",...n]}return e.jsx("nav",{"aria-label":"Breadcrumb",className:b.cn("nui-breadcrumbs",o),..._,children:e.jsx("ol",{className:"nui-breadcrumbs__list",children:i.map((s,n)=>{const a=n===i.length-1,l=`crumb-${n}`;if(s==="ellipsis")return e.jsxs("li",{className:"nui-breadcrumbs__item",children:[e.jsx("span",{className:"nui-breadcrumbs__ellipsis","aria-hidden":"true",children:"…"}),e.jsx("span",{className:"nui-breadcrumbs__separator","aria-hidden":"true",children:c})]},l);const{label:u,href:t,onClick:d}=s,h=!!(t||d)&&!a;return e.jsxs("li",{className:"nui-breadcrumbs__item",children:[h?e.jsx("a",{href:t,onClick:d,className:"nui-breadcrumbs__link",children:u}):e.jsx("span",{className:b.cn("nui-breadcrumbs__link",a&&"nui-breadcrumbs__link--current"),"aria-current":a?"page":void 0,children:u}),!a&&e.jsx("span",{className:"nui-breadcrumbs__separator","aria-hidden":"true",children:c})]},l)})})})}exports.Breadcrumbs=j;
 //# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/components/breadcrumbs/Breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/**\r\n * Breadcrumbs.tsx — FINAL VERSION\r\n * --------------------------------\r\n * 100% matching your UI component architecture.\r\n *\r\n * Features:\r\n * - WAI-ARIA navigation\r\n * - Auto-collapse when too many items (optional)\r\n * - Custom separator support\r\n * - Keyboard accessible\r\n * - Ellipsis is non-interactive\r\n */\r\n\r\nimport React from 'react';\r\nimport './Breadcrumbs.css';\r\n\r\nexport interface Crumb {\r\n  label: React.ReactNode;\r\n  href?: string;\r\n  onClick?: () => void;\r\n}\r\n\r\nexport interface BreadcrumbsProps {\r\n  items: Crumb[];\r\n  maxItems?: number; // collapse long breadcrumbs\r\n  separator?: React.ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport function Breadcrumbs({\r\n  items,\r\n  maxItems = 6, // default collapse threshold\r\n  separator = '›',\r\n  className = '',\r\n}: BreadcrumbsProps) {\r\n  if (!items.length) return null;\r\n\r\n  let finalItems: (Crumb | '...')[] = [...items];\r\n\r\n  /* -------------------------------------------------------\r\n   * Collapse logic\r\n   * ------------------------------------------------------*/\r\n  if (items.length > maxItems) {\r\n    const start = items.slice(0, 2);\r\n    const end = items.slice(-2);\r\n    finalItems = [...start, '...', ...end];\r\n  }\r\n\r\n  return (\r\n    <nav className={`ui-breadcrumbs ${className}`} aria-label=\"Breadcrumb\">\r\n      <ol className=\"ui-breadcrumbs-list\">\r\n        {finalItems.map((item, index) => {\r\n          const isLast = index === finalItems.length - 1;\r\n\r\n          // ellipsis\r\n          if (item === '...') {\r\n            return (\r\n              <li key={`ellipsis-${index}`} className=\"ui-breadcrumb-ellipsis\">\r\n                …\r\n              </li>\r\n            );\r\n          }\r\n\r\n          const { label, href, onClick } = item;\r\n\r\n          return (\r\n            <li key={`crumb-${index}`} className=\"ui-breadcrumb-item\">\r\n              {href || onClick ? (\r\n                <a\r\n                  href={href}\r\n                  onClick={onClick}\r\n                  className=\"ui-breadcrumb-link\"\r\n                  aria-current={isLast ? 'page' : undefined}\r\n                >\r\n                  {label}\r\n                </a>\r\n              ) : (\r\n                <span\r\n                  className={`ui-breadcrumb-link ${isLast ? 'active' : ''}`}\r\n                  aria-current={isLast ? 'page' : undefined}\r\n                >\r\n                  {label}\r\n                </span>\r\n              )}\r\n\r\n              {!isLast && (\r\n                <span className=\"ui-breadcrumb-separator\">{separator}</span>\r\n              )}\r\n            </li>\r\n          );\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  );\r\n}\r\n"],"names":["Breadcrumbs","items","maxItems","separator","className","finalItems","start","end","jsx","item","index","isLast","label","href","onClick","jsxs"],"mappings":"sJA6BO,SAASA,EAAY,CAC1B,MAAAC,EACA,SAAAC,EAAW,EACX,UAAAC,EAAY,IACZ,UAAAC,EAAY,EACd,EAAqB,CACnB,GAAI,CAACH,EAAM,OAAQ,OAAO,KAE1B,IAAII,EAAgC,CAAC,GAAGJ,CAAK,EAK7C,GAAIA,EAAM,OAASC,EAAU,CAC3B,MAAMI,EAAQL,EAAM,MAAM,EAAG,CAAC,EACxBM,EAAMN,EAAM,MAAM,EAAE,EAC1BI,EAAa,CAAC,GAAGC,EAAO,MAAO,GAAGC,CAAG,CACvC,CAEA,aACG,MAAA,CAAI,UAAW,kBAAkBH,CAAS,GAAI,aAAW,aACxD,SAAAI,EAAAA,IAAC,KAAA,CAAG,UAAU,sBACX,SAAAH,EAAW,IAAI,CAACI,EAAMC,IAAU,CAC/B,MAAMC,EAASD,IAAUL,EAAW,OAAS,EAG7C,GAAII,IAAS,MACX,aACG,KAAA,CAA6B,UAAU,yBAAyB,SAAA,KAAxD,YAAYC,CAAK,EAE1B,EAIJ,KAAM,CAAE,MAAAE,EAAO,KAAAC,EAAM,QAAAC,CAAA,EAAYL,EAEjC,OACEM,EAAAA,KAAC,KAAA,CAA0B,UAAU,qBAClC,SAAA,CAAAF,GAAQC,EACPN,EAAAA,IAAC,IAAA,CACC,KAAAK,EACA,QAAAC,EACA,UAAU,qBACV,eAAcH,EAAS,OAAS,OAE/B,SAAAC,CAAA,CAAA,EAGHJ,EAAAA,IAAC,OAAA,CACC,UAAW,sBAAsBG,EAAS,SAAW,EAAE,GACvD,eAAcA,EAAS,OAAS,OAE/B,SAAAC,CAAA,CAAA,EAIJ,CAACD,GACAH,EAAAA,IAAC,OAAA,CAAK,UAAU,0BAA2B,SAAAL,CAAA,CAAU,CAAA,CAAA,EApBhD,SAASO,CAAK,EAsBvB,CAEJ,CAAC,EACH,EACF,CAEJ"}
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Breadcrumbs.css';\n\nexport interface BreadcrumbItem {\n  label: React.ReactNode;\n  /** If provided, renders the item as an <a> tag */\n  href?: string;\n  /** Triggered when the breadcrumb is clicked */\n  onClick?: (e: React.MouseEvent) => void;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  /** The maximum number of items to display before truncating the middle path. Default: 5 */\n  maxItems?: number;\n  /** The visual separator between items. Default: '›' */\n  separator?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Breadcrumbs Component\n * * A navigation aid that helps users understand their current location within a website.\n * Implements strict WAI-ARIA navigation patterns.\n */\nexport function Breadcrumbs({\n  items,\n  maxItems = 5,\n  separator = '›',\n  className,\n  ...props\n}: BreadcrumbsProps) {\n  if (!items.length) return null;\n\n  // * Truncation Engine\n  // If the path length exceeds maxItems, we truncate the middle.\n  // We strictly preserve the root (index 0) and the immediate parent + current page (last 2).\n  let renderItems: (BreadcrumbItem | 'ellipsis')[] = items;\n\n  if (items.length > maxItems) {\n    const start = items.slice(0, 1); \n    const end = items.slice(-2);     \n    renderItems = [...start, 'ellipsis', ...end];\n  }\n\n  return (\n    <nav \n      aria-label=\"Breadcrumb\"\n      className={cn(\"nui-breadcrumbs\", className)} \n      {...props}\n    >\n      <ol className=\"nui-breadcrumbs__list\">\n        {renderItems.map((item, index) => {\n          const isLast = index === renderItems.length - 1;\n          const key = `crumb-${index}`;\n\n          // --- 1. Render Ellipsis ---\n          if (item === 'ellipsis') {\n            return (\n              <li key={key} className=\"nui-breadcrumbs__item\">\n                <span className=\"nui-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n                  …\n                </span>\n                <span className=\"nui-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {separator}\n                </span>\n              </li>\n            );\n          }\n\n          // --- 2. Render Item ---\n          const { label, href, onClick } = item;\n          // An item is only interactive if it has a destination/action AND is not the current page\n          const isInteractive = Boolean(href || onClick) && !isLast;\n          \n          return (\n            <li key={key} className=\"nui-breadcrumbs__item\">\n              {isInteractive ? (\n                // Interactive Link\n                <a\n                  href={href}\n                  onClick={onClick}\n                  className=\"nui-breadcrumbs__link\"\n                >\n                  {label}\n                </a>\n              ) : (\n                // Static Text (Current Page or non-linked breadcrumb)\n                <span \n                  className={cn(\n                    \"nui-breadcrumbs__link\", \n                    isLast && \"nui-breadcrumbs__link--current\"\n                  )}\n                  aria-current={isLast ? 'page' : undefined}\n                >\n                  {label}\n                </span>\n              )}\n\n              {/* Separator (except for last item) */}\n              {!isLast && (\n                <span className=\"nui-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {separator}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}"],"names":["Breadcrumbs","items","maxItems","separator","className","props","renderItems","start","end","jsx","cn","item","index","isLast","key","jsxs","label","href","onClick","isInteractive"],"mappings":"+LA0BO,SAASA,EAAY,CAC1B,MAAAC,EACA,SAAAC,EAAW,EACX,UAAAC,EAAY,IACZ,UAAAC,EACA,GAAGC,CACL,EAAqB,CACnB,GAAI,CAACJ,EAAM,OAAQ,OAAO,KAK1B,IAAIK,EAA+CL,EAEnD,GAAIA,EAAM,OAASC,EAAU,CAC3B,MAAMK,EAAQN,EAAM,MAAM,EAAG,CAAC,EACxBO,EAAMP,EAAM,MAAM,EAAE,EAC1BK,EAAc,CAAC,GAAGC,EAAO,WAAY,GAAGC,CAAG,CAC7C,CAEA,OACEC,EAAAA,IAAC,MAAA,CACC,aAAW,aACX,UAAWC,EAAAA,GAAG,kBAAmBN,CAAS,EACzC,GAAGC,EAEJ,SAAAI,EAAAA,IAAC,MAAG,UAAU,wBACX,WAAY,IAAI,CAACE,EAAMC,IAAU,CAChC,MAAMC,EAASD,IAAUN,EAAY,OAAS,EACxCQ,EAAM,SAASF,CAAK,GAG1B,GAAID,IAAS,WACX,OACEI,EAAAA,KAAC,KAAA,CAAa,UAAU,wBACtB,SAAA,CAAAN,MAAC,OAAA,CAAK,UAAU,4BAA4B,cAAY,OAAO,SAAA,IAE/D,QACC,OAAA,CAAK,UAAU,6BAA6B,cAAY,OACtD,SAAAN,CAAA,CACH,CAAA,CAAA,EANOW,CAOT,EAKJ,KAAM,CAAE,MAAAE,EAAO,KAAAC,EAAM,QAAAC,CAAA,EAAYP,EAE3BQ,EAAgB,GAAQF,GAAQC,IAAY,CAACL,EAEnD,OACEE,EAAAA,KAAC,KAAA,CAAa,UAAU,wBACrB,SAAA,CAAAI,EAECV,EAAAA,IAAC,IAAA,CACC,KAAAQ,EACA,QAAAC,EACA,UAAU,wBAET,SAAAF,CAAA,CAAA,EAIHP,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,GACT,wBACAG,GAAU,gCAAA,EAEZ,eAAcA,EAAS,OAAS,OAE/B,SAAAG,CAAA,CAAA,EAKJ,CAACH,GACAJ,MAAC,OAAA,CAAK,UAAU,6BAA6B,cAAY,OACtD,SAAAN,CAAA,CACH,CAAA,CAAA,EA3BKW,CA6BT,CAEJ,CAAC,CAAA,CACH,CAAA,CAAA,CAGN"}