@smwb/ui-react 2.6.3 → 2.8.0

package/dist/headless/components/dataDisplay/accordion/accordion.js

@@ -1,61 +1,83 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import { forwardRef as z, useState as H } from "react";
-import b from "clsx";
-import R from "../../base/animateHeight/animateHeight.js";
-import { Icon as S } from "../../base/icon/icon.js";
-import { useId as q } from "../../../hooks/useId.js";
-const L = z(function({
-  className: u,
-  title: w,
-  isOpenByDefault: I = !1,
-  open: n,
-  disabled: a,
-  icon: e,
-  id: x,
-  children: t,
-  startAdornment: s,
-  noIcon: N,
-  onToggleClick: c,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as J, useState as y } from "react";
+import O from "clsx";
+import K from "../../base/animateHeight/animateHeight.js";
+import { Icon as L } from "../../base/icon/icon.js";
+import { useId as M } from "../../../hooks/useId.js";
+const A = J(function({
+  className: $,
+  title: j,
+  subtitle: l,
+  variant: B = "filled",
+  isOpenByDefault: H = !1,
+  open: m,
+  disabled: s,
+  icon: a,
+  id: z,
+  children: c,
+  startAdornment: n,
+  endAdornment: p,
+  noIcon: P,
+  lazy: R,
+  unmountOnExit: _,
+  onToggleClick: r,
   onChange: i
-}, h) {
-  const d = n !== void 0, [v, O] = H(I), o = d ? !!n : v, m = q(x), p = `${m}-content`, f = `${m}-header`, y = b("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), j = ($) => {
-    if (a)
+}, S) {
+  const f = m !== void 0, [q, D] = y(H), o = f ? !!m : q, b = M(z), w = `${b}-content`, u = `${b}-header`, h = !!(R || _), [N, I] = y(o);
+  o && !N && I(!0);
+  const E = (t) => {
+    t === 0 && _ && !o && I(!1);
+  }, v = h ? c !== void 0 : !!c, F = O("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), G = (t) => {
+    if (s)
       return;
-    const l = !o;
-    d || O(l), i == null || i(l), c == null || c($);
+    const x = !o;
+    f || D(x), i == null || i(x), r == null || r(t);
   };
-  return /* @__PURE__ */ _("div", { ref: h, className: b("smwb-accordion", { "smwb-disabled": a }, u), "data-testid": "accordion", children: [
-    /* @__PURE__ */ _(
-      "button",
-      {
-        id: f,
-        className: "smwb-accordion__header",
-        onClick: j,
-        type: "button",
-        disabled: a,
-        "aria-expanded": o,
-        "aria-controls": t ? p : void 0,
-        children: [
-          s == null ? void 0 : s(o),
-          /* @__PURE__ */ r("span", { className: "smwb-accordion__title", children: w }),
-          !N && (e != null ? e : /* @__PURE__ */ r(S, { className: y, name: "expand_more", size: 24 }))
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ r("div", { id: p, role: "region", "aria-labelledby": f, children: /* @__PURE__ */ r(
-      R,
-      {
-        height: o ? "auto" : 0,
-        animateOpacity: !0,
-        duration: 300,
-        className: "smwb-accordion__content",
-        children: t
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: S,
+      className: O("smwb-accordion", `smwb-accordion_${B}`, { "smwb-disabled": s }, $),
+      "data-testid": "accordion",
+      children: [
+        /* @__PURE__ */ d(
+          "button",
+          {
+            id: u,
+            className: "smwb-accordion__header",
+            onClick: G,
+            type: "button",
+            disabled: s,
+            "aria-expanded": o,
+            "aria-controls": v ? w : void 0,
+            children: [
+              n == null ? void 0 : n(o),
+              /* @__PURE__ */ d("span", { className: "smwb-accordion__heading", children: [
+                /* @__PURE__ */ e("span", { className: "smwb-accordion__title", children: j }),
+                l ? /* @__PURE__ */ e("span", { className: "smwb-accordion__subtitle", children: l }) : null
+              ] }),
+              p ? /* @__PURE__ */ e("span", { className: "smwb-accordion__end", children: p(o) }) : null,
+              !P && (a != null ? a : /* @__PURE__ */ e(L, { className: F, name: "expand_more", size: 24 }))
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ e("div", { id: w, role: "region", "aria-labelledby": u, children: /* @__PURE__ */ e(
+          K,
+          {
+            height: o ? "auto" : 0,
+            animateOpacity: !0,
+            duration: 300,
+            className: "smwb-accordion__content",
+            onHeightAnimationEnd: E,
+            children: !h || N ? c : null
+          }
+        ) })
+      ]
+    }
+  );
 });
 export {
-  L as Accordion,
-  L as default
+  A as Accordion,
+  A as default
 };
 //# sourceMappingURL=accordion.js.map

package/dist/headless/components/dataDisplay/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport AnimateHeight from \"../../base/animateHeight/animateHeight\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\n\nexport interface AccordionProps {\n  className?: string;\n  title?: string;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: ReactNode;\n  id?: string;\n  children?: React.ReactNode;\n  startAdornment?: (isOpen: boolean) => React.ReactNode;\n  noIcon?: boolean;\n  onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    className,\n    title,\n    isOpenByDefault = false,\n    open,\n    disabled,\n    icon,\n    id: idProp,\n    children,\n    startAdornment,\n    noIcon,\n    onToggleClick,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState<boolean>(isOpenByDefault);\n  const isOpen = isControlled ? !!open : internalOpen;\n  const baseId = useId(idProp);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  const arrowIconClasses = cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen });\n\n  const toggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (disabled) {\n      return;\n    }\n    const next = !isOpen;\n    if (!isControlled) {\n      setInternalOpen(next);\n    }\n    onChange?.(next);\n    onToggleClick?.(e);\n  };\n\n  return (\n    <div ref={ref} className={cn(\"smwb-accordion\", { \"smwb-disabled\": disabled }, className)} data-testid=\"accordion\">\n      <button\n        id={headerId}\n        className=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={disabled}\n        aria-expanded={isOpen}\n        aria-controls={children ? contentId : undefined}\n      >\n        {startAdornment?.(isOpen)}\n        <span className=\"smwb-accordion__title\">{title}</span>\n        {!noIcon && (icon ?? <Icon className={arrowIconClasses} name=\"expand_more\" size={24} />)}\n      </button>\n\n      {children && (\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen ? \"auto\" : 0}\n            animateOpacity={true}\n            duration={300}\n            className=\"smwb-accordion__content\"\n          >\n            {children}\n          </AnimateHeight>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Accordion;\n"],"names":["Accordion","forwardRef","className","title","isOpenByDefault","open","disabled","icon","idProp","children","startAdornment","noIcon","onToggleClick","onChange","ref","isControlled","internalOpen","setInternalOpen","useState","isOpen","baseId","useId","contentId","headerId","arrowIconClasses","cn","toggle","e","next","jsxs","jsx","Icon","AnimateHeight"],"mappings":";;;;;;AAyBO,MAAMA,IAAYC,EAA2C,SAClE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAeV,MAAS,QACxB,CAACW,GAAcC,CAAe,IAAIC,EAAkBd,CAAe,GACnEe,IAASJ,IAAe,CAAC,CAACV,IAAOW,GACjCI,IAASC,EAAMb,CAAM,GACrBc,IAAY,GAAGF,CAAM,YACrBG,IAAW,GAAGH,CAAM,WAEpBI,IAAmBC,EAAG,8BAA8B,EAAE,qCAAqCN,GAAQ,GAEnGO,IAAS,CAACC,MAAuD;AACrE,QAAIrB;AACF;AAEF,UAAMsB,IAAO,CAACT;AACd,IAAKJ,KACHE,EAAgBW,CAAI,GAEtBf,KAAA,QAAAA,EAAWe,IACXhB,KAAA,QAAAA,EAAgBe;AAAA,EAClB;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAAf,GAAU,WAAWW,EAAG,kBAAkB,EAAE,iBAAiBnB,EAAA,GAAYJ,CAAS,GAAG,eAAY,aACpG,UAAA;AAAA,IAAA,gBAAA2B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIN;AAAA,QACJ,WAAU;AAAA,QACV,SAASG;AAAA,QACT,MAAK;AAAA,QACL,UAAApB;AAAA,QACA,iBAAea;AAAA,QACf,iBAAeV,IAAWa,IAAY;AAAA,QAErC,UAAA;AAAA,UAAAZ,KAAA,gBAAAA,EAAiBS;AAAA,UAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA3B,GAAM;AAAA,UAC9C,CAACQ,MAAWJ,KAAA,OAAAA,IAAQ,gBAAAuB,EAACC,GAAA,EAAK,WAAWP,GAAkB,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtFf,uBACE,OAAA,EAAI,IAAIa,GAAW,MAAK,UAAS,mBAAiBC,GACjD,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQb,IAAS,SAAS;AAAA,QAC1B,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAAV;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"accordion.js","sources":["../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport AnimateHeight, { type Height } from \"../../base/animateHeight/animateHeight\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\n\n/**\n * `filled` — the header is an app-bar strip on a raised panel (the original look).\n * `outlined` — a bordered card with a flat header: for feeds of records.\n * `plain` — no frame, a divider under each panel: for FAQ-style lists.\n * The flat variants stretch to the container and wrap long titles.\n */\nexport type AccordionVariant = \"filled\" | \"outlined\" | \"plain\";\n\nexport interface AccordionProps {\n  className?: string;\n  /** Header text or markup (a date, an author, a badge…). */\n  title?: ReactNode;\n  /** Secondary line under the title. */\n  subtitle?: ReactNode;\n  variant?: AccordionVariant;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: ReactNode;\n  id?: string;\n  children?: React.ReactNode;\n  startAdornment?: (isOpen: boolean) => React.ReactNode;\n  /** Rendered after the title, before the expand icon. */\n  endAdornment?: (isOpen: boolean) => React.ReactNode;\n  noIcon?: boolean;\n  /** Create the content on first open instead of up front. */\n  lazy?: boolean;\n  /** Remove the content once the panel has collapsed (created again on open). */\n  unmountOnExit?: boolean;\n  onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    className,\n    title,\n    subtitle,\n    variant = \"filled\",\n    isOpenByDefault = false,\n    open,\n    disabled,\n    icon,\n    id: idProp,\n    children,\n    startAdornment,\n    endAdornment,\n    noIcon,\n    lazy,\n    unmountOnExit,\n    onToggleClick,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState<boolean>(isOpenByDefault);\n  const isOpen = isControlled ? !!open : internalOpen;\n  const baseId = useId(idProp);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  // Deferred content (lazy / unmountOnExit) exists only once the panel has been\n  // opened; unmountOnExit drops it again when the collapse animation ends.\n  const deferred = Boolean(lazy || unmountOnExit);\n  const [present, setPresent] = useState<boolean>(isOpen);\n  if (isOpen && !present) {\n    setPresent(true);\n  }\n  const onCollapsed = (height: Height) => {\n    if (height === 0 && unmountOnExit && !isOpen) {\n      setPresent(false);\n    }\n  };\n  // A deferred panel keeps its region (it has nothing to test yet); otherwise\n  // the region is there when there is content.\n  const hasContent = deferred ? children !== undefined : Boolean(children);\n\n  const arrowIconClasses = cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen });\n\n  const toggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (disabled) {\n      return;\n    }\n    const next = !isOpen;\n    if (!isControlled) {\n      setInternalOpen(next);\n    }\n    onChange?.(next);\n    onToggleClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"smwb-accordion\", `smwb-accordion_${variant}`, { \"smwb-disabled\": disabled }, className)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        className=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={disabled}\n        aria-expanded={isOpen}\n        aria-controls={hasContent ? contentId : undefined}\n      >\n        {startAdornment?.(isOpen)}\n        <span className=\"smwb-accordion__heading\">\n          <span className=\"smwb-accordion__title\">{title}</span>\n          {subtitle ? <span className=\"smwb-accordion__subtitle\">{subtitle}</span> : null}\n        </span>\n        {endAdornment ? <span className=\"smwb-accordion__end\">{endAdornment(isOpen)}</span> : null}\n        {!noIcon && (icon ?? <Icon className={arrowIconClasses} name=\"expand_more\" size={24} />)}\n      </button>\n\n      {hasContent && (\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen ? \"auto\" : 0}\n            animateOpacity={true}\n            duration={300}\n            className=\"smwb-accordion__content\"\n            onHeightAnimationEnd={onCollapsed}\n          >\n            {!deferred || present ? children : null}\n          </AnimateHeight>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Accordion;\n"],"names":["Accordion","forwardRef","className","title","subtitle","variant","isOpenByDefault","open","disabled","icon","idProp","children","startAdornment","endAdornment","noIcon","lazy","unmountOnExit","onToggleClick","onChange","ref","isControlled","internalOpen","setInternalOpen","useState","isOpen","baseId","useId","contentId","headerId","deferred","present","setPresent","onCollapsed","height","hasContent","arrowIconClasses","cn","toggle","e","next","jsxs","jsx","Icon","AnimateHeight"],"mappings":";;;;;;AA2CO,MAAMA,IAAYC,EAA2C,SAClE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAeb,MAAS,QACxB,CAACc,GAAcC,CAAe,IAAIC,EAAkBjB,CAAe,GACnEkB,IAASJ,IAAe,CAAC,CAACb,IAAOc,GACjCI,IAASC,EAAMhB,CAAM,GACrBiB,IAAY,GAAGF,CAAM,YACrBG,IAAW,GAAGH,CAAM,WAIpBI,IAAW,GAAQd,KAAQC,IAC3B,CAACc,GAASC,CAAU,IAAIR,EAAkBC,CAAM;AACtD,EAAIA,KAAU,CAACM,KACbC,EAAW,EAAI;AAEjB,QAAMC,IAAc,CAACC,MAAmB;AACtC,IAAIA,MAAW,KAAKjB,KAAiB,CAACQ,KACpCO,EAAW,EAAK;AAAA,EAEpB,GAGMG,IAAaL,IAAWlB,MAAa,SAAY,EAAQA,GAEzDwB,IAAmBC,EAAG,8BAA8B,EAAE,qCAAqCZ,GAAQ,GAEnGa,IAAS,CAACC,MAAuD;AACrE,QAAI9B;AACF;AAEF,UAAM+B,IAAO,CAACf;AACd,IAAKJ,KACHE,EAAgBiB,CAAI,GAEtBrB,KAAA,QAAAA,EAAWqB,IACXtB,KAAA,QAAAA,EAAgBqB;AAAA,EAClB;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACA,WAAWiB,EAAG,kBAAkB,kBAAkB/B,CAAO,IAAI,EAAE,iBAAiBG,EAAA,GAAYN,CAAS;AAAA,MACrG,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAsC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIZ;AAAA,YACJ,WAAU;AAAA,YACV,SAASS;AAAA,YACT,MAAK;AAAA,YACL,UAAA7B;AAAA,YACA,iBAAegB;AAAA,YACf,iBAAeU,IAAaP,IAAY;AAAA,YAEvC,UAAA;AAAA,cAAAf,KAAA,gBAAAA,EAAiBY;AAAA,cAClB,gBAAAgB,EAAC,QAAA,EAAK,WAAU,2BACd,UAAA;AAAA,gBAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAtC,GAAM;AAAA,gBAC9CC,IAAW,gBAAAqC,EAAC,QAAA,EAAK,WAAU,4BAA4B,aAAS,IAAU;AAAA,cAAA,GAC7E;AAAA,cACC5B,sBAAgB,QAAA,EAAK,WAAU,uBAAuB,UAAAA,EAAaW,CAAM,GAAE,IAAU;AAAA,cACrF,CAACV,MAAWL,KAAA,OAAAA,IAAQ,gBAAAgC,EAACC,GAAA,EAAK,WAAWP,GAAkB,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtFD,uBACE,OAAA,EAAI,IAAIP,GAAW,MAAK,UAAS,mBAAiBC,GACjD,UAAA,gBAAAa;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQnB,IAAS,SAAS;AAAA,YAC1B,gBAAgB;AAAA,YAChB,UAAU;AAAA,YACV,WAAU;AAAA,YACV,sBAAsBQ;AAAA,YAErB,UAAA,CAACH,KAAYC,IAAUnB,IAAW;AAAA,UAAA;AAAA,QAAA,EACrC,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/headless/components/dataDisplay/avatar/avatar.js

@@ -1,48 +1,75 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as _, useState as E, Children as S, isValidElement as $ } from "react";
-import f from "clsx";
-const w = (o) => typeof o == "string", j = _(function({ className: u, src: r, alt: e, size: t = "medium", variant: d = "circular", color: n, style: i, imgProps: a, children: m, ...v }, s) {
-  const [l, N] = E(!1), b = !!r && !l, x = f(
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
+import { forwardRef as x, useState as E, Children as S, isValidElement as j } from "react";
+import w from "clsx";
+const N = (o) => typeof o == "string", k = x(function({
+  className: u,
+  src: l,
+  alt: e,
+  size: t = "medium",
+  variant: v = "circular",
+  color: s,
+  style: i,
+  imgProps: a,
+  children: m,
+  "data-testid": f = "avatar",
+  ...n
+}, b) {
+  const [h, c] = E(!1), r = !!l && !h, y = w(
     "smwb-avatar",
-    `smwb-avatar_${d}`,
-    w(t) ? `smwb-avatar_${t}` : null,
+    `smwb-avatar_${v}`,
+    N(t) ? `smwb-avatar_${t}` : null,
     u
-  ), y = {
+  ), A = {
     ...i,
-    ...w(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
-    ...n && !b ? { backgroundColor: n } : {}
+    ...N(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
+    ...s && !r ? { backgroundColor: s } : {}
   };
-  return /* @__PURE__ */ c("div", { ref: s, ...v, "data-testid": "avatar", className: x, style: y, children: b ? /* @__PURE__ */ c(
+  return /* @__PURE__ */ d("div", { ref: b, ...n, "data-testid": f, className: y, style: A, children: r ? /* @__PURE__ */ d(
     "img",
     {
       ...a,
-      className: f("smwb-avatar__img", a == null ? void 0 : a.className),
-      src: r,
-      alt: e,
-      onError: (A) => {
-        var h;
-        N(!0), (h = a == null ? void 0 : a.onError) == null || h.call(a, A);
+      className: w("smwb-avatar__img", a == null ? void 0 : a.className),
+      src: l,
+      alt: e != null ? e : a == null ? void 0 : a.alt,
+      onError: (C) => {
+        var _;
+        c(!0), (_ = a == null ? void 0 : a.onError) == null || _.call(a, C);
       }
     }
-  ) : /* @__PURE__ */ c("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
-}), I = _(function({ className: u, max: r = 5, total: e, onSurplusClick: t, children: d, ...n }, i) {
-  const a = S.toArray(d).filter($), m = e != null ? e : a.length, v = Math.max(r, 1), s = a.slice(0, v), l = m - s.length;
-  return /* @__PURE__ */ C("div", { ref: i, ...n, "data-testid": "avatar-group", className: f("smwb-avatar-group", u), children: [
-    l > 0 ? /* @__PURE__ */ c(
-      j,
-      {
-        className: "smwb-avatar-group__surplus",
-        onClick: t,
-        style: t ? { cursor: "pointer" } : void 0,
-        children: `+${l}`
-      }
-    ) : null,
-    s
-  ] });
+  ) : /* @__PURE__ */ d("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
+}), M = x(function({
+  className: u,
+  max: l = 5,
+  total: e,
+  onSurplusClick: t,
+  surplusAriaLabel: v = (n) => `${n} more`,
+  size: s,
+  children: i,
+  "data-testid": a = "avatar-group",
+  ...m
+}, f) {
+  const n = S.toArray(i).filter(j), b = e != null ? e : n.length, h = Math.max(l, 1), c = n.slice(0, h), r = b - c.length;
+  return (
+    // In order, the first avatar first; the "+N" chip ends the row.
+    /* @__PURE__ */ $("div", { ref: f, ...m, "data-testid": a, className: w("smwb-avatar-group", u), children: [
+      c,
+      r > 0 ? /* @__PURE__ */ d(
+        k,
+        {
+          className: "smwb-avatar-group__surplus",
+          size: s,
+          alt: v(r),
+          onClick: t,
+          style: t ? { cursor: "pointer" } : void 0,
+          children: `+${r}`
+        }
+      ) : null
+    ] })
+  );
 });
 export {
-  j as Avatar,
-  I as AvatarGroup,
-  j as default
+  k as Avatar,
+  M as AvatarGroup,
+  k as default
 };
 //# sourceMappingURL=avatar.js.map

package/dist/headless/components/dataDisplay/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  { className, src, alt, size = \"medium\", variant = \"circular\", color, style, imgProps, children, ...props },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid=\"avatar\" className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          alt={alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  { className, max = 5, total, onSurplusClick, children, ...props },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    <div ref={ref} {...props} data-testid=\"avatar-group\" className={cn(\"smwb-avatar-group\", className)}>\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n      {visible}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;AA6BA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E,EAAE,WAAAC,GAAW,KAAAC,GAAK,KAAAC,GAAK,MAAAL,IAAO,UAAU,SAAAM,IAAU,YAAY,OAAAC,GAAO,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GACnGC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQZ,KAAQ,CAACS,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeZ,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIgB,IAA6B;AAAA,IACjC,GAAGX;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACS,IAAY,EAAE,iBAAiBT,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAa,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAY,UAAS,WAAWM,GAAiB,OAAOE,GAC/E,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGX;AAAA,MACJ,WAAWS,EAAG,oBAAoBT,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACgB,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAb,KAAA,gBAAAA,EAAU,YAAV,QAAAa,EAAA,KAAAb,GAAoBY;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYf,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAYYa,IAAcrB,EAAgE,SACzF,EAAE,WAAAC,GAAW,KAAAqB,IAAM,GAAG,OAAAC,GAAO,gBAAAC,GAAgB,UAAAhB,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMe,IAAQC,EAAS,QAAQlB,CAAQ,EAAE,OAAOmB,CAAc,GACxDC,IAAaL,KAAA,OAAAA,IAASE,EAAM,QAC5BI,IAAa,KAAK,IAAIP,GAAK,CAAC,GAC5BQ,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAAtB,GAAW,GAAGD,GAAO,eAAY,gBAAe,WAAWO,EAAG,qBAAqBf,CAAS,GAC9F,UAAA;AAAA,IAAA8B,IAAU,IACT,gBAAAb;AAAA,MAACnB;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAASyB;AAAA,QACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,QAE/C,cAAIO,CAAO;AAAA,MAAA;AAAA,IAAA,IAEZ;AAAA,IACHD;AAAA,EAAA,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"avatar.js","sources":["../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  {\n    className,\n    src,\n    alt,\n    size = \"medium\",\n    variant = \"circular\",\n    color,\n    style,\n    imgProps,\n    children,\n    \"data-testid\": dataTestId = \"avatar\",\n    ...props\n  },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid={dataTestId} className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          // Avatar's own alt wins; without it, the one in imgProps stays.\n          alt={alt ?? imgProps?.alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  /** Test id of the root `<div>`; `avatar-group` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  {\n    className,\n    max = 5,\n    total,\n    onSurplusClick,\n    surplusAriaLabel = (count: number) => `${count} more`,\n    size,\n    children,\n    \"data-testid\": dataTestId = \"avatar-group\",\n    ...props\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    // In order, the first avatar first; the \"+N\" chip ends the row.\n    <div ref={ref} {...props} data-testid={dataTestId} className={cn(\"smwb-avatar-group\", className)}>\n      {visible}\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          size={size}\n          alt={surplusAriaLabel(surplus)}\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","dataTestId","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","surplusAriaLabel","count","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;AA+BA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E;AAAA,EACE,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,SAAAM,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQb,KAAQ,CAACU,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeb,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIiB,IAA6B;AAAA,IACjC,GAAGZ;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACU,IAAY,EAAE,iBAAiBV,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAc,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWO,GAAiB,OAAOE,GACnF,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,WAAWU,EAAG,oBAAoBV,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MAEA,KAAKC,KAAA,OAAAA,IAAOI,KAAA,gBAAAA,EAAU;AAAA,MACtB,SAAS,CAACa,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAd,KAAA,gBAAAA,EAAU,YAAV,QAAAc,EAAA,KAAAd,GAAoBa;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYhB,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAkBYc,IAActB,EAAgE,SACzF;AAAA,EACE,WAAAC;AAAA,EACA,KAAAsB,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACC,MAAkB,GAAGA,CAAK;AAAA,EAC9C,MAAA7B;AAAA,EACA,UAAAU;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMiB,IAAQC,EAAS,QAAQrB,CAAQ,EAAE,OAAOsB,CAAc,GACxDC,IAAaP,KAAA,OAAAA,IAASI,EAAM,QAC5BI,IAAa,KAAK,IAAIT,GAAK,CAAC,GAC5BU,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC;AAAA;AAAA,IAEE,gBAAAE,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWQ,EAAG,qBAAqBhB,CAAS,GAC5F,UAAA;AAAA,MAAAgC;AAAA,MACAC,IAAU,IACT,gBAAAf;AAAA,QAACpB;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAAD;AAAA,UACA,KAAK4B,EAAiBQ,CAAO;AAAA,UAC7B,SAAST;AAAA,UACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,UAE/C,cAAIS,CAAO;AAAA,QAAA;AAAA,MAAA,IAEZ;AAAA,IAAA,EAAA,CACN;AAAA;AAEJ,CAAC;"}

package/dist/headless/components/dataDisplay/badge/badge.js

@@ -1,34 +1,43 @@
-import { jsxs as $, jsx as t } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import n from "clsx";
-const N = g(function({
-  className: o,
-  color: i = "primary",
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import h from "clsx";
+const N = b(function({
+  className: i,
+  color: c = "primary",
   badgeContent: s,
-  variant: e = "outside",
-  vertical: a = "top",
-  horizontal: l = "right",
-  max: r,
-  showZero: b = !1,
-  badgeAriaLabel: p,
-  children: c,
-  ...f
-}, _) {
-  const w = s === 0 || s === "0", d = (s == null || w && !b) === !0;
-  let m = s;
-  typeof s == "number" && r !== void 0 && s > r && (m = `${r}+`);
-  const u = n(
+  variant: m = "outside",
+  vertical: d = "top",
+  horizontal: f = "right",
+  max: o,
+  showZero: _ = !1,
+  badgeAriaLabel: r,
+  children: a,
+  ...l
+}, w) {
+  const u = s === 0 || s === "0", p = (s == null || u && !_) === !0;
+  let e = s;
+  typeof s == "number" && o !== void 0 && s > o && (e = `${o}+`);
+  const $ = h(
     "smwb-badge",
-    `smwb-badge_${i}`,
-    `smwb-badge_${e}`,
-    `smwb-badge_${e}_${a}`,
-    `smwb-badge_${e}_${a}_${l}`,
-    o,
-    { "smwb-badge_no-content": d }
+    `smwb-badge_${c}`,
+    `smwb-badge_${m}`,
+    `smwb-badge_${m}_${d}`,
+    `smwb-badge_${m}_${d}_${f}`,
+    i,
+    { "smwb-badge_no-content": p }
   );
-  return /* @__PURE__ */ $("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
-    c,
-    /* @__PURE__ */ t("span", { ref: _, className: u, "aria-label": p, ...f, children: d ? null : m })
+  return /* @__PURE__ */ n("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
+    a,
+    /* @__PURE__ */ t(
+      "span",
+      {
+        ...l,
+        ref: w,
+        className: $,
+        "aria-label": r != null ? r : l["aria-label"],
+        children: p ? null : e
+      }
+    )
   ] });
 });
 export {

package/dist/headless/components/dataDisplay/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span ref={ref} className={badgeClassname} aria-label={badgeAriaLabel} {...rest}>\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;AAkBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS,EAAC,QAAA,EAAK,KAAAP,GAAU,WAAWI,GAAgB,cAAYP,GAAiB,GAAGE,GACxE,UAAAG,IAAS,OAAOC,EAAA,CACnB;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"badge.js","sources":["../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span\n        {...rest}\n        ref={ref}\n        className={badgeClassname}\n        // `badgeAriaLabel` wins over the caller's aria-label; without it, the caller's stays.\n        aria-label={badgeAriaLabel ?? rest[\"aria-label\"]}\n      >\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;AAkBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWI;AAAA,QAEX,cAAYP,KAAA,OAAAA,IAAkBE,EAAK,YAAY;AAAA,QAE9C,cAAS,OAAOI;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ,CAAC;"}

package/dist/headless/components/dataDisplay/card/card.js

@@ -1,35 +1,62 @@
-import { jsxs as _, jsx as i } from "react/jsx-runtime";
-import l from "react";
-import p from "clsx";
-const N = l.forwardRef(function({ className: m, variant: v = "elevated", children: f, disabled: t, title: s, footer: c, onClick: a, onKeyDown: e, ...o }, b) {
-  const r = !!a && !t, n = (d) => {
-    e == null || e(d), r && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), a == null || a(d));
+import { jsxs as o, jsx as v } from "react/jsx-runtime";
+import N, { useRef as R } from "react";
+import j from "clsx";
+import { isOwnClick as I } from "../../../utils/ownClick.js";
+import { splitControlProps as g } from "../../../utils/controlProps.js";
+const z = N.forwardRef(function({
+  className: b,
+  variant: l = "elevated",
+  children: u,
+  disabled: a,
+  title: c,
+  footer: m,
+  onClick: r,
+  onKeyDown: e,
+  "data-testid": p = "card",
+  ..._
+}, h) {
+  var n;
+  const d = !!r && !a, [s, f] = g(_, !!r), i = R(null), w = (t) => {
+    e == null || e(t), !(!d || t.target !== i.current) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r(t));
+  }, x = (t) => {
+    I(t, i.current) && (r == null || r(t));
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ o(
     "div",
     {
-      ref: b,
-      "data-testid": "card",
-      className: p("smwb-card", `smwb-card_${v}`, m, {
-        card_disabled: t,
-        "smwb-card_interactive": r
+      ref: h,
+      "data-testid": p,
+      className: j("smwb-card", `smwb-card_${l}`, b, {
+        card_disabled: a,
+        "smwb-card_interactive": d
       }),
-      role: r ? "button" : void 0,
-      tabIndex: r ? 0 : void 0,
-      "aria-disabled": t || void 0,
-      onClick: r ? a : void 0,
-      onKeyDown: n,
-      ...o,
+      ...f,
+      "aria-disabled": r ? void 0 : a || f["aria-disabled"],
+      onClick: d ? x : void 0,
+      onKeyDown: w,
       children: [
-        s && /* @__PURE__ */ i("div", { className: "smwb-card__title", children: s }),
-        f,
-        c && /* @__PURE__ */ i("div", { className: "smwb-card__footer", children: c })
+        /* @__PURE__ */ o(
+          "div",
+          {
+            ...s,
+            ref: i,
+            className: "smwb-card__content",
+            role: r ? "button" : void 0,
+            tabIndex: (n = s.tabIndex) != null ? n : d ? 0 : void 0,
+            "aria-disabled": r ? a || s["aria-disabled"] : void 0,
+            children: [
+              c && /* @__PURE__ */ v("div", { className: "smwb-card__title", children: c }),
+              u
+            ]
+          }
+        ),
+        m && /* @__PURE__ */ v("div", { className: "smwb-card__footer", children: m })
       ]
     }
   );
 });
 export {
-  N as Card,
-  N as default
+  z as Card,
+  z as default
 };
 //# sourceMappingURL=card.js.map

package/dist/headless/components/dataDisplay/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: ReactNode;\n  /** Makes the card interactive (role=button, keyboard, focus ring). */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  { className, variant = \"elevated\", children, disabled, title, footer, onClick, onKeyDown, ...rest },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (interactive && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"card\"\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={interactive ? onClick : undefined}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {title && <div className=\"smwb-card__title\">{title}</div>}\n      {children}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","rest","ref","interactive","handleKeyDown","e","jsxs","cn","jsx"],"mappings":";;;AAcO,MAAMA,IAAOC,EAAM,WAAyD,SACjF,EAAE,WAAAC,GAAW,SAAAC,IAAU,YAAY,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,GAC7FC,GACA;AACA,QAAMC,IAAc,CAAC,CAACJ,KAAW,CAACH,GAE5BQ,IAAgB,CAACC,MAA2C;AAChE,IAAAL,KAAA,QAAAA,EAAYK,IACRF,MAAgBE,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjDA,EAAE,eAAA,GACFN,KAAA,QAAAA,EAAUM;AAAA,EAEd;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWK,EAAG,aAAa,aAAab,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBO;AAAA,MAAA,CAC1B;AAAA,MACD,MAAMA,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,iBAAeP,KAAY;AAAA,MAC3B,SAASO,IAAcJ,IAAU;AAAA,MACjC,WAAWK;AAAA,MACV,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAJ,KAAS,gBAAAW,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QAClDF;AAAA,QACAG,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAV,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: ReactNode;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  {\n    className,\n    variant = \"elevated\",\n    children,\n    disabled,\n    title,\n    footer,\n    onClick,\n    onKeyDown,\n    \"data-testid\": dataTestId = \"card\",\n    ...rest\n  },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, !!onClick);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (!interactive || e.target !== contentRef.current) return;\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a portal rendered inside (React delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isOwnClick(e, contentRef.current)) onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      {...box}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without.\n      aria-disabled={onClick ? undefined : disabled || box[\"aria-disabled\"]}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={contentRef}\n        className=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none,\n        // the caller's stay. Its tabIndex is a default: the caller's wins, e.g.\n        // for roving focus.\n        role={onClick ? \"button\" : undefined}\n        tabIndex={control.tabIndex ?? (interactive ? 0 : undefined)}\n        aria-disabled={onClick ? disabled || control[\"aria-disabled\"] : undefined}\n      >\n        {title && <div className=\"smwb-card__title\">{title}</div>}\n        {children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","dataTestId","rest","ref","interactive","control","box","splitControlProps","contentRef","useRef","handleKeyDown","e","handleClick","isOwnClick","jsxs","cn","_a","jsx"],"mappings":";;;;;AA4CO,MAAMA,IAAOC,EAAM,WAAyD,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAc,CAAC,CAACL,KAAW,CAACH,GAK5B,CAACS,GAASC,CAAG,IAAIC,EAAkBL,GAAM,CAAC,CAACH,CAAO,GAClDS,IAAaC,EAA8B,IAAI,GAK/CC,IAAgB,CAACC,MAA2C;AAEhE,IADAX,KAAA,QAAAA,EAAYW,IACR,GAACP,KAAeO,EAAE,WAAWH,EAAW,aACxCG,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFZ,KAAA,QAAAA,EAAUY;AAAA,EAEd,GAMMC,IAAc,CAACD,MAAwC;AAC3D,IAAIE,EAAWF,GAAGH,EAAW,OAAO,qBAAaG;AAAA,EACnD;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACA,eAAaF;AAAA,MACb,WAAWc,EAAG,aAAa,aAAarB,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBQ;AAAA,MAAA,CAC1B;AAAA,MACA,GAAGE;AAAA,MAGJ,iBAAeP,IAAU,SAAYH,KAAYU,EAAI,eAAe;AAAA,MACpE,SAASF,IAAcQ,IAAc;AAAA,MACrC,WAAWF;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGT;AAAA,YACJ,KAAKG;AAAA,YACL,WAAU;AAAA,YAKV,MAAMT,IAAU,WAAW;AAAA,YAC3B,WAAUiB,IAAAX,EAAQ,aAAR,OAAAW,IAAqBZ,IAAc,IAAI;AAAA,YACjD,iBAAeL,IAAUH,KAAYS,EAAQ,eAAe,IAAI;AAAA,YAE/D,UAAA;AAAA,cAAAR,KAAS,gBAAAoB,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAApB,GAAM;AAAA,cAClDF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KAAU,gBAAAmB,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAnB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}