@mattermost/compass-ui 0.1.0-alpha.6 → 0.1.0-alpha.8

package/dist/components/card-button/CardButton.d.ts

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface CardButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
+    /** Leading icon. Pass `<Icon glyph={<SomeIcon />} size="24" />` — the slot does not resize raw SVG children. */
+    icon: ReactNode;
+    /** Primary label. */
+    title: ReactNode;
+    /** Secondary line under the title. */
+    description?: ReactNode;
+    /** Selected / checked appearance with trailing check. Default: false. */
+    selected?: boolean;
+    className?: string;
+}
+/**
+ * Card Buttons present a mutually exclusive (or single) choice as a compact
+ * card: leading icon, title, optional description, and a check when selected.
+ * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,
+ * access mode, etc.).
+ */
+export default function CardButton({ icon, title, description, selected, className, type, role, disabled, ...rest }: CardButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardButton.d.ts.map

package/dist/components/card-button/CardButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3E,gHAAgH;IAChH,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,SAAc,EACd,IAAe,EACf,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,2CAoCjB"}

package/dist/components/card-button/CardButton.js

@@ -0,0 +1,45 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import __p from "@mattermost/compass-icons/components/check-circle.js";const p=__p&&__p.default?__p.default:__p;
+import _ from "../icon/Icon.js";
+import a from "./CardButton.module.scss.js";
+function C({
+  icon: e,
+  title: i,
+  description: n,
+  selected: r = !1,
+  className: d = "",
+  type: l = "button",
+  role: o,
+  disabled: u,
+  ...m
+}) {
+  const s = o === "radio", h = [
+    a["card-button"],
+    r && a["card-button--selected"],
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: l,
+      role: o,
+      disabled: u,
+      className: h,
+      "aria-checked": s ? r : void 0,
+      "aria-pressed": s ? void 0 : r,
+      ...m,
+      children: [
+        /* @__PURE__ */ t("span", { className: a["card-button__icon"], "aria-hidden": !0, children: e }),
+        /* @__PURE__ */ c("span", { className: a["card-button__text"], children: [
+          /* @__PURE__ */ t("span", { className: a["card-button__title"], children: i }),
+          n != null && /* @__PURE__ */ t("span", { className: a["card-button__description"], children: n })
+        ] }),
+        /* @__PURE__ */ t("span", { className: a["card-button__check"], "aria-hidden": !0, children: /* @__PURE__ */ t(_, { glyph: /* @__PURE__ */ t(p, {}), size: "20" }) })
+      ]
+    }
+  );
+}
+export {
+  C as default
+};
+//# sourceMappingURL=CardButton.js.map

package/dist/components/card-button/CardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.js","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} size=\"24\" />` — the slot does not resize raw SVG children. */\n  icon: ReactNode;\n  /** Primary label. */\n  title: ReactNode;\n  /** Secondary line under the title. */\n  description?: ReactNode;\n  /** Selected / checked appearance with trailing check. Default: false. */\n  selected?: boolean;\n  className?: string;\n}\n\n/**\n * Card Buttons present a mutually exclusive (or single) choice as a compact\n * card: leading icon, title, optional description, and a check when selected.\n * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,\n * access mode, etc.).\n */\nexport default function CardButton({\n  icon,\n  title,\n  description,\n  selected = false,\n  className = '',\n  type = 'button',\n  role,\n  disabled,\n  ...rest\n}: CardButtonProps) {\n  const isRadio = role === 'radio';\n  const rootClass = [\n    styles['card-button'],\n    selected && styles['card-button--selected'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type={type}\n      role={role}\n      disabled={disabled}\n      className={rootClass}\n      aria-checked={isRadio ? selected : undefined}\n      aria-pressed={!isRadio ? selected : undefined}\n      {...rest}\n    >\n      <span className={styles['card-button__icon']} aria-hidden>\n        {icon}\n      </span>\n      <span className={styles['card-button__text']}>\n        <span className={styles['card-button__title']}>{title}</span>\n        {description != null && (\n          <span className={styles['card-button__description']}>\n            {description}\n          </span>\n        )}\n      </span>\n      <span className={styles['card-button__check']} aria-hidden>\n        <Icon glyph={<CheckCircleIcon />} size=\"20\" />\n      </span>\n    </button>\n  );\n}\n"],"names":["CardButton","icon","title","description","selected","className","type","role","disabled","rest","isRadio","rootClass","styles","jsxs","jsx","Icon","CheckCircleIcon"],"mappings":";;;;AAwBA,SAAwBA,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAUH,MAAS,SACnBI,IAAY;AAAA,IAChBC,EAAO,aAAa;AAAA,IACpBR,KAAYQ,EAAO,uBAAuB;AAAA,IAC1CP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAWG;AAAA,MACX,gBAAcD,IAAUN,IAAW;AAAA,MACnC,gBAAeM,IAAqB,SAAXN;AAAA,MACxB,GAAGK;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAK,EAAC,UAAK,WAAWF,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAX,GACH;AAAA,QACA,gBAAAY,EAAC,QAAA,EAAK,WAAWD,EAAO,mBAAmB,GACzC,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,UACrDC,KAAe,QACd,gBAAAW,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAT,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,0BACC,QAAA,EAAK,WAAWS,EAAO,oBAAoB,GAAG,eAAW,IACxD,UAAA,gBAAAE,EAACC,GAAA,EAAK,OAAO,gBAAAD,EAACE,GAAA,CAAA,CAAgB,GAAI,MAAK,MAAK,EAAA,CAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/card-button/CardButton.module.css

@@ -0,0 +1 @@
+._card-button_1l92t_2{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._card-button_1l92t_2:hover:not(:disabled):not(._card-button--selected_1l92t_22){border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-button_1l92t_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._card-button_1l92t_2:disabled{cursor:not-allowed;opacity:.48}._card-button--selected_1l92t_22{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--selected_1l92t_22 ._card-button__icon_1l92t_37{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--selected_1l92t_22 ._card-button__check_1l92t_41{visibility:visible}._card-button__icon_1l92t_37{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-full);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-button__text_1l92t_54{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-button__title_1l92t_62{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color)}._card-button__description_1l92t_69{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._card-button__check_1l92t_41{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}

package/dist/components/card-button/CardButton.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButton.module.css');const t={"card-button":"_card-button_1l92t_2","card-button--selected":"_card-button--selected_1l92t_22","card-button__icon":"_card-button__icon_1l92t_37","card-button__check":"_card-button__check_1l92t_41","card-button__text":"_card-button__text_1l92t_54","card-button__title":"_card-button__title_1l92t_62","card-button__description":"_card-button__description_1l92t_69"};exports.default=t;
+//# sourceMappingURL=CardButton.module.scss.cjs.map

package/dist/components/card-button/CardButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/card-button/CardButton.module.scss.js

@@ -0,0 +1,13 @@
+import './CardButton.module.css';const t = {
+  "card-button": "_card-button_1l92t_2",
+  "card-button--selected": "_card-button--selected_1l92t_22",
+  "card-button__icon": "_card-button__icon_1l92t_37",
+  "card-button__check": "_card-button__check_1l92t_41",
+  "card-button__text": "_card-button__text_1l92t_54",
+  "card-button__title": "_card-button__title_1l92t_62",
+  "card-button__description": "_card-button__description_1l92t_69"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButton.module.scss.js.map

package/dist/components/card-button/CardButton.module.scss.js.map

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

package/dist/components/card-button/CardButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react/jsx-runtime"),k=require("react"),E=require("./CardButtonGroup.module.scss.cjs");function h(n){return[...n.querySelectorAll('[role="radio"]')]}function m(n){return h(n).filter(o=>!o.disabled)}function b(n,o){const a=h(n);if(a.length===0)return;const u=m(n),l=u.find(r=>r.getAttribute("aria-checked")==="true")??a.find(r=>r.getAttribute("aria-checked")==="true"),f=o&&a.includes(o)&&!o.disabled?o:l??u[0]??a[0];a.forEach(r=>{r.tabIndex=r===f?0:-1})}function S({children:n,className:o="",role:a="radiogroup",onKeyDown:u,onFocus:l,...f}){const r=k.useRef(null);k.useLayoutEffect(()=>{const e=r.current;e!=null&&b(e)},[n]);const p=e=>{l==null||l(e);const c=e.currentTarget;if(h(c).length===0)return;const t=e.target;if(!(t instanceof HTMLElement))return;const i=t.closest('[role="radio"]');i==null||!c.contains(i)||b(c,i)},A=e=>{if(u==null||u(e),e.defaultPrevented)return;const c=r.current;if(c==null)return;const t=m(c);if(t.length===0)return;const i=document.activeElement;if(!(i instanceof HTMLElement)||!c.contains(i))return;const v=i.closest('[role="radio"]'),g=t.findIndex(s=>s===v);if(g<0)return;const d=s=>{e.preventDefault(),b(c,s),s.focus({focusVisible:!0}),s.getAttribute("aria-checked")!=="true"&&s.click()};switch(e.key){case"ArrowRight":case"ArrowDown":d(t[(g+1)%t.length]);break;case"ArrowLeft":case"ArrowUp":d(t[(g-1+t.length)%t.length]);break;case"Home":d(t[0]);break;case"End":d(t[t.length-1]);break}};return R.jsx("div",{role:a,className:[E.default["card-button-group"],o].filter(Boolean).join(" "),...f,ref:r,onKeyDown:A,onFocus:p,children:n})}exports.default=S;
+//# sourceMappingURL=CardButtonGroup.cjs.map

package/dist/components/card-button/CardButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.cjs","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Lays out Card Buttons in a horizontal row (Figma Card Button Group).
+ * Defaults to `role="radiogroup"` — set child cards to `role="radio"`.
+ * When children use `role="radio"`, applies the ARIA radio keyboard model
+ * (roving tabindex + arrow selection with wrapping).
+ */
+export default function CardButtonGroup({ children, className, role, onKeyDown, onFocus, ...rest }: CardButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardButtonGroup.d.ts.map

package/dist/components/card-button/CardButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,QAAQ,EACR,SAAc,EACd,IAAmB,EACnB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,oBAAoB,2CA8EtB"}

package/dist/components/card-button/CardButtonGroup.js

@@ -0,0 +1,85 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as v, useLayoutEffect as R } from "react";
+import w from "./CardButtonGroup.module.scss.js";
+function h(n) {
+  return [...n.querySelectorAll('[role="radio"]')];
+}
+function m(n) {
+  return h(n).filter((o) => !o.disabled);
+}
+function b(n, o) {
+  const a = h(n);
+  if (a.length === 0) return;
+  const s = m(n), l = s.find((r) => r.getAttribute("aria-checked") === "true") ?? a.find((r) => r.getAttribute("aria-checked") === "true"), f = o && a.includes(o) && !o.disabled ? o : l ?? s[0] ?? a[0];
+  a.forEach((r) => {
+    r.tabIndex = r === f ? 0 : -1;
+  });
+}
+function y({
+  children: n,
+  className: o = "",
+  role: a = "radiogroup",
+  onKeyDown: s,
+  onFocus: l,
+  ...f
+}) {
+  const r = v(null);
+  R(() => {
+    const e = r.current;
+    e != null && b(e);
+  }, [n]);
+  const k = (e) => {
+    l == null || l(e);
+    const c = e.currentTarget;
+    if (h(c).length === 0) return;
+    const t = e.target;
+    if (!(t instanceof HTMLElement)) return;
+    const i = t.closest('[role="radio"]');
+    i == null || !c.contains(i) || b(c, i);
+  }, p = (e) => {
+    if (s == null || s(e), e.defaultPrevented) return;
+    const c = r.current;
+    if (c == null) return;
+    const t = m(c);
+    if (t.length === 0) return;
+    const i = document.activeElement;
+    if (!(i instanceof HTMLElement) || !c.contains(i)) return;
+    const A = i.closest('[role="radio"]'), g = t.findIndex((u) => u === A);
+    if (g < 0) return;
+    const d = (u) => {
+      e.preventDefault(), b(c, u), u.focus({ focusVisible: !0 }), u.getAttribute("aria-checked") !== "true" && u.click();
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        d(t[(g + 1) % t.length]);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        d(t[(g - 1 + t.length) % t.length]);
+        break;
+      case "Home":
+        d(t[0]);
+        break;
+      case "End":
+        d(t[t.length - 1]);
+        break;
+    }
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      role: a,
+      className: [w["card-button-group"], o].filter(Boolean).join(" "),
+      ...f,
+      ref: r,
+      onKeyDown: p,
+      onFocus: k,
+      children: n
+    }
+  );
+}
+export {
+  y as default
+};
+//# sourceMappingURL=CardButtonGroup.js.map

package/dist/components/card-button/CardButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.js","sources":["../../../src/components/card-button/CardButtonGroup.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './CardButtonGroup.module.scss';\n\nexport interface CardButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nfunction radiosIn(group: ParentNode): HTMLButtonElement[] {\n  return [...group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')];\n}\n\nfunction enabledRadiosIn(group: ParentNode): HTMLButtonElement[] {\n  return radiosIn(group).filter((radio) => !radio.disabled);\n}\n\nfunction syncRadioTabStops(group: HTMLElement, preferred?: HTMLButtonElement) {\n  const radios = radiosIn(group);\n  if (radios.length === 0) return;\n\n  const enabled = enabledRadiosIn(group);\n  const checked =\n    enabled.find((radio) => radio.getAttribute('aria-checked') === 'true') ??\n    radios.find((radio) => radio.getAttribute('aria-checked') === 'true');\n  const tabStop =\n    preferred && radios.includes(preferred) && !preferred.disabled\n      ? preferred\n      : (checked ?? enabled[0] ?? radios[0]);\n\n  radios.forEach((radio) => {\n    radio.tabIndex = radio === tabStop ? 0 : -1;\n  });\n}\n\n/**\n * Lays out Card Buttons in a horizontal row (Figma Card Button Group).\n * Defaults to `role=\"radiogroup\"` — set child cards to `role=\"radio\"`.\n * When children use `role=\"radio\"`, applies the ARIA radio keyboard model\n * (roving tabindex + arrow selection with wrapping).\n */\nexport default function CardButtonGroup({\n  children,\n  className = '',\n  role = 'radiogroup',\n  onKeyDown,\n  onFocus,\n  ...rest\n}: CardButtonGroupProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const group = ref.current;\n    if (group == null) return;\n    syncRadioTabStops(group);\n  }, [children]);\n\n  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {\n    onFocus?.(e);\n    const group = e.currentTarget;\n    if (radiosIn(group).length === 0) return;\n    const target = e.target;\n    if (!(target instanceof HTMLElement)) return;\n    const radio = target.closest<HTMLButtonElement>('[role=\"radio\"]');\n    if (radio == null || !group.contains(radio)) return;\n    syncRadioTabStops(group, radio);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    const group = ref.current;\n    if (group == null) return;\n    const radios = enabledRadiosIn(group);\n    if (radios.length === 0) return;\n\n    const active = document.activeElement;\n    if (!(active instanceof HTMLElement) || !group.contains(active)) return;\n    const radio = active.closest<HTMLButtonElement>('[role=\"radio\"]');\n    const index = radios.findIndex((r) => r === radio);\n    if (index < 0) return;\n\n    const selectRadio = (next: HTMLButtonElement) => {\n      e.preventDefault();\n      syncRadioTabStops(group, next);\n      next.focus({ focusVisible: true } as FocusOptions);\n      if (next.getAttribute('aria-checked') !== 'true') {\n        next.click();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        selectRadio(radios[(index + 1) % radios.length]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        selectRadio(radios[(index - 1 + radios.length) % radios.length]);\n        break;\n      case 'Home':\n        selectRadio(radios[0]);\n        break;\n      case 'End':\n        selectRadio(radios[radios.length - 1]);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div\n      role={role}\n      className={[styles['card-button-group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n      ref={ref}\n      onKeyDown={handleKeyDown}\n      onFocus={handleFocus}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["radiosIn","group","enabledRadiosIn","radio","syncRadioTabStops","preferred","radios","enabled","checked","tabStop","CardButtonGroup","children","className","role","onKeyDown","onFocus","rest","ref","useRef","useLayoutEffect","handleFocus","target","handleKeyDown","active","index","r","selectRadio","next","jsx","styles"],"mappings":"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"}

package/dist/components/card-button/CardButtonGroup.module.css

@@ -0,0 +1 @@
+._card-button-group_1cufe_2{display:flex;flex-direction:row;align-items:stretch;gap:var(--spacing-xs);width:100%}._card-button-group_1cufe_2>*{flex:1 1 0;min-width:0}

package/dist/components/card-button/CardButtonGroup.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButtonGroup.module.css');const e={"card-button-group":"_card-button-group_1cufe_2"};exports.default=e;
+//# sourceMappingURL=CardButtonGroup.module.scss.cjs.map

package/dist/components/card-button/CardButtonGroup.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButtonGroup.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/card-button/CardButtonGroup.module.scss.js

@@ -0,0 +1,7 @@
+import './CardButtonGroup.module.css';const t = {
+  "card-button-group": "_card-button-group_1cufe_2"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButtonGroup.module.scss.js.map

package/dist/components/card-button/CardButtonGroup.module.scss.js.map

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

package/dist/components/card-button/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./CardButton.cjs"),r=require("./CardButtonGroup.cjs");exports.CardButton=t.default;exports.CardButtonGroup=r.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/card-button/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CardButton } from './CardButton';
+export type { CardButtonProps } from './CardButton';
+export { default as CardButtonGroup } from './CardButtonGroup';
+export type { CardButtonGroupProps } from './CardButtonGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/card-button/index.js

@@ -0,0 +1,7 @@
+import { default as r } from "./CardButton.js";
+import { default as u } from "./CardButtonGroup.js";
+export {
+  r as CardButton,
+  u as CardButtonGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/components/card-button/index.js.map

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

package/dist/components/chip/Chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),j=require("react"),__q=require("@mattermost/compass-icons/components/close-circle.js"),q=__q?.default??__q,M=require("../icon/Icon.cjs"),A=require("../user-avatar/UserAvatar.cjs"),I=require("../../utils/string.cjs"),g=require("./ChipGroup.cjs"),u=require("./Chip.module.scss.cjs"),D={small:"10",medium:"12","medium-compact":"12",large:"16"},k={small:"12",medium:"16","medium-compact":"16",large:"20"};function y(n){return typeof n=="string"||typeof n=="number"?String(n).trim():Array.isArray(n)?n.map(y).filter(Boolean).join(" "):""}function w(n){var d;const s=(m,b)=>{let e=m;for(;e;){if(e instanceof HTMLElement&&e.dataset.chip!=null||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)return e;e=b==="next"?e.nextElementSibling:e.previousElementSibling}return null},l=n.parentElement,o=l==null?void 0:l.nextElementSibling,r=o instanceof HTMLInputElement||o instanceof HTMLTextAreaElement?o:null;return s(n.nextElementSibling,"next")??s(n.previousElementSibling,"previous")??r??(l==null?void 0:l.querySelector("input, textarea"))??((d=l==null?void 0:l.parentElement)==null?void 0:d.querySelector("input, textarea"))??null}function L({children:n,size:s="medium",leadingIcon:l,leadingAvatar:o,onRemove:r,error:d=!1,colored:m=!1,className:b="",...e}){const x=j.useContext(g.ChipGroupContext),h=D[s],T=k[s],f=y(n),S=e["aria-label"]??(r!=null&&f!==""?`${f}. Press Delete to remove.`:f!==""?f:void 0),p=r!=null,_=t=>{const c=t.currentTarget.closest("[data-chip]"),i=c instanceof HTMLElement?w(c):null,v=t.currentTarget;r==null||r(t),window.setTimeout(()=>{v.isConnected||i==null||i.isConnected&&(i.dataset.chip!=null?g.activateChip(i):i.focus({focusVisible:!0}))},0)},C=[u.default.chip,u.default[`chip--size-${I.toKebab(s)}`],d&&u.default["chip--error"],m&&u.default["chip--colored"],b].filter(Boolean).join(" "),E=t=>{var c,i;(c=e.onKeyDown)==null||c.call(e,t),!(x||!p||t.defaultPrevented)&&(t.key==="Delete"||t.key==="Backspace"||t.key==="Enter"||t.key===" ")&&(t.preventDefault(),(i=t.currentTarget.querySelector("[data-chip-remove]"))==null||i.click())};return a.jsxs("div",{className:C,...e,role:p?"button":e.role,tabIndex:p?x?-1:0:e.tabIndex,"aria-label":p?S:e["aria-label"],"data-chip":"",onKeyDown:E,children:[o!=null?a.jsx("span",{className:u.default["chip__avatar-slot"],children:a.jsx(A.default,{src:o.src,alt:o.alt,size:T})}):l!=null?a.jsx("span",{className:u.default["chip__icon-slot"],"aria-hidden":!0,children:a.jsx(M.default,{glyph:l,size:h})}):null,a.jsx("span",{className:u.default.chip__label,children:n}),r!=null?a.jsx("button",{type:"button",className:u.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:t=>{t.preventDefault()},onClick:_,children:a.jsx(q,{size:Number(h),"aria-hidden":!0})}):null]})}exports.default=L;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),q=require("react"),__M=require("@mattermost/compass-icons/components/close-circle.js"),M=__M?.default??__M,A=require("../icon/Icon.cjs"),I=require("../user-avatar/UserAvatar.cjs"),D=require("../../utils/string.cjs"),y=require("./ChipGroup.cjs"),a=require("./Chip.module.scss.cjs"),k={small:"10",medium:"12",large:"16"},w={small:"12",medium:"16",large:"20"};function T(t){return typeof t=="string"||typeof t=="number"?String(t).trim():Array.isArray(t)?t.map(T).filter(Boolean).join(" "):""}function L(t){var r;const s=(b,h)=>{let n=b;for(;n;){if(n instanceof HTMLElement&&n.dataset.chip!=null||n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)return n;n=h==="next"?n.nextElementSibling:n.previousElementSibling}return null},l=t.parentElement,c=l==null?void 0:l.nextElementSibling,f=c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement?c:null;return s(t.nextElementSibling,"next")??s(t.previousElementSibling,"previous")??f??(l==null?void 0:l.querySelector("input, textarea"))??((r=l==null?void 0:l.parentElement)==null?void 0:r.querySelector("input, textarea"))??null}function N({children:t,size:s="medium",compact:l=!1,leadingIcon:c,leadingAvatar:f,onRemove:r,error:b=!1,colored:h=!1,className:n="",...i}){const x=q.useContext(y.ChipGroupContext),g=k[s],S=w[s],p=T(t),_=i["aria-label"]??(r!=null&&p!==""?`${p}. Press Delete to remove.`:p!==""?p:void 0),m=r!=null,C=e=>{const d=e.currentTarget.closest("[data-chip]"),u=d instanceof HTMLElement?L(d):null,j=e.currentTarget;r==null||r(e),window.setTimeout(()=>{j.isConnected||u==null||u.isConnected&&(u.dataset.chip!=null?y.activateChip(u):u.focus({focusVisible:!0}))},0)},E=[a.default.chip,a.default[`chip--size-${D.toKebab(s)}`],l&&a.default["chip--compact"],b&&a.default["chip--error"],h&&a.default["chip--colored"],n].filter(Boolean).join(" "),v=e=>{var d,u;(d=i.onKeyDown)==null||d.call(i,e),!(x||!m||e.defaultPrevented)&&(e.key==="Delete"||e.key==="Backspace"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),(u=e.currentTarget.querySelector("[data-chip-remove]"))==null||u.click())};return o.jsxs("div",{className:E,...i,role:m?"button":i.role,tabIndex:m?x?-1:0:i.tabIndex,"aria-label":m?_:i["aria-label"],"data-chip":"",onKeyDown:v,children:[f!=null?o.jsx("span",{className:a.default["chip__avatar-slot"],children:o.jsx(I.default,{src:f.src,alt:f.alt,size:S})}):c!=null?o.jsx("span",{className:a.default["chip__icon-slot"],"aria-hidden":!0,children:o.jsx(A.default,{glyph:c,size:g})}):null,o.jsx("span",{className:a.default.chip__label,children:t}),r!=null?o.jsx("button",{type:"button",className:a.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:e=>{e.preventDefault()},onClick:C,children:o.jsx(M,{size:Number(g),"aria-hidden":!0})}):null]})}exports.default=N;
 //# sourceMappingURL=Chip.cjs.map

package/dist/components/chip/Chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  'medium-compact': '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  'medium-compact': '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","e","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'large';\n\nexport interface ChipProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Chip label. */\n  children: ReactNode;\n  /** Visual size. Default: Medium. */\n  size?: ChipSize;\n  /** Reduces vertical and horizontal padding. */\n  compact?: boolean;\n  /** Leading icon from @mattermost/compass-icons. */\n  leadingIcon?: ReactNode;\n  /** Leading avatar. Overrides leading-icon when both are provided. */\n  leadingAvatar?: { src: string; alt: string };\n  /** When provided, shows the remove (×) control and calls this on click. */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Shows an error border. */\n  error?: boolean;\n  /** Adds a colored background overlay. */\n  colored?: boolean;\n  className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n  small: '10',\n  medium: '12',\n  large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children).trim();\n  }\n  if (Array.isArray(children)) {\n    return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n  }\n  return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n  const scan = (\n    start: Element | null,\n    direction: 'next' | 'previous',\n  ): HTMLElement | null => {\n    let el: Element | null = start;\n    while (el) {\n      if (el instanceof HTMLElement && el.dataset.chip != null) {\n        return el;\n      }\n      if (\n        el instanceof HTMLInputElement ||\n        el instanceof HTMLTextAreaElement\n      ) {\n        return el;\n      }\n      el =\n        direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n    }\n    return null;\n  };\n\n  const parent = chipEl.parentElement;\n  const afterGroup = parent?.nextElementSibling;\n  const groupSiblingInput =\n    afterGroup instanceof HTMLInputElement ||\n    afterGroup instanceof HTMLTextAreaElement\n      ? afterGroup\n      : null;\n\n  return (\n    scan(chipEl.nextElementSibling, 'next') ??\n    scan(chipEl.previousElementSibling, 'previous') ??\n    groupSiblingInput ??\n    parent?.querySelector('input, textarea') ??\n    parent?.parentElement?.querySelector('input, textarea') ??\n    null\n  );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n  children,\n  size = 'medium',\n  compact = false,\n  leadingIcon,\n  leadingAvatar,\n  onRemove,\n  error = false,\n  colored = false,\n  className = '',\n  ...rest\n}: ChipProps) {\n  const grouped = useContext(ChipGroupContext);\n  const iconSize = ICON_SIZE_MAP[size];\n  const avatarSize = AVATAR_SIZE_MAP[size];\n  const labelText = labelTextFromChildren(children);\n  const groupedAriaLabel =\n    rest['aria-label'] ??\n    (onRemove != null && labelText !== ''\n      ? `${labelText}. Press Delete to remove.`\n      : labelText !== ''\n        ? labelText\n        : undefined);\n  const removable = onRemove != null;\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    const chipEl = e.currentTarget.closest('[data-chip]');\n    const nextFocus =\n      chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n    const removeButton = e.currentTarget;\n    onRemove?.(e);\n    window.setTimeout(() => {\n      if (removeButton.isConnected || nextFocus == null) return;\n      if (!nextFocus.isConnected) return;\n      if (nextFocus.dataset.chip != null) {\n        activateChip(nextFocus);\n      } else {\n        nextFocus.focus({ focusVisible: true } as FocusOptions);\n      }\n    }, 0);\n  };\n\n  const rootClass = [\n    styles.chip,\n    styles[`chip--size-${toKebab(size)}`],\n    compact && styles['chip--compact'],\n    error && styles['chip--error'],\n    colored && styles['chip--colored'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    rest.onKeyDown?.(e);\n    if (grouped || !removable || e.defaultPrevented) return;\n    if (\n      e.key === 'Delete' ||\n      e.key === 'Backspace' ||\n      e.key === 'Enter' ||\n      e.key === ' '\n    ) {\n      e.preventDefault();\n      e.currentTarget\n        .querySelector<HTMLButtonElement>('[data-chip-remove]')\n        ?.click();\n    }\n  };\n\n  return (\n    <div\n      className={rootClass}\n      {...rest}\n      role={removable ? 'button' : rest.role}\n      tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n      aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n      data-chip=\"\"\n      onKeyDown={handleKeyDown}\n    >\n      {leadingAvatar != null ? (\n        <span className={styles['chip__avatar-slot']}>\n          <UserAvatar\n            src={leadingAvatar.src}\n            alt={leadingAvatar.alt}\n            size={avatarSize}\n          />\n        </span>\n      ) : leadingIcon != null ? (\n        <span className={styles['chip__icon-slot']} aria-hidden>\n          <Icon glyph={leadingIcon} size={iconSize} />\n        </span>\n      ) : null}\n      <span className={styles['chip__label']}>{children}</span>\n      {onRemove != null ? (\n        <button\n          type=\"button\"\n          className={styles['chip__remove']}\n          data-chip-remove=\"\"\n          tabIndex={-1}\n          aria-hidden\n          onMouseDown={(e) => {\n            e.preventDefault();\n          }}\n          onClick={handleRemove}\n        >\n          <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}

package/dist/components/chip/Chip.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
-export type ChipSize = 'small' | 'medium' | 'medium-compact' | 'large';
+export type ChipSize = 'small' | 'medium' | 'large';
 export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Chip label. */
     children: ReactNode;
     /** Visual size. Default: Medium. */
     size?: ChipSize;
+    /** Reduces vertical and horizontal padding. */
+    compact?: boolean;
     /** Leading icon from @mattermost/compass-icons. */
     leadingIcon?: ReactNode;
     /** Leading avatar. Overrides leading-icon when both are provided. */
@@ -25,5 +27,5 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
  * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip
  * stands on its own and is removable or selectable, depending on context.
  */
-export default function Chip({ children, size, leadingIcon, leadingAvatar, onRemove, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export default function Chip({ children, size, compact, leadingIcon, leadingAvatar, onRemove, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7G,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAkGX"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7G,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,OAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAmGX"}

package/dist/components/chip/Chip.js

@@ -1,97 +1,97 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
-import { useContext as A } from "react";
-import __I from "@mattermost/compass-icons/components/close-circle.js";const I=__I&&__I.default?__I.default:__I;
-import M from "../icon/Icon.js";
-import D from "../user-avatar/UserAvatar.js";
-import { toKebab as k } from "../../utils/string.js";
-import { ChipGroupContext as w, activateChip as L } from "./ChipGroup.js";
-import i from "./Chip.module.scss.js";
-const N = {
+import { jsxs as A, jsx as c } from "react/jsx-runtime";
+import { useContext as I } from "react";
+import __M from "@mattermost/compass-icons/components/close-circle.js";const M=__M&&__M.default?__M.default:__M;
+import D from "../icon/Icon.js";
+import k from "../user-avatar/UserAvatar.js";
+import { toKebab as w } from "../../utils/string.js";
+import { ChipGroupContext as L, activateChip as N } from "./ChipGroup.js";
+import o from "./Chip.module.scss.js";
+const H = {
   small: "10",
   medium: "12",
-  "medium-compact": "12",
   large: "16"
-}, H = {
+}, j = {
   small: "12",
   medium: "16",
-  "medium-compact": "16",
   large: "20"
 };
-function y(n) {
-  return typeof n == "string" || typeof n == "number" ? String(n).trim() : Array.isArray(n) ? n.map(y).filter(Boolean).join(" ") : "";
+function T(t) {
+  return typeof t == "string" || typeof t == "number" ? String(t).trim() : Array.isArray(t) ? t.map(T).filter(Boolean).join(" ") : "";
 }
-function j(n) {
-  var m;
-  const u = (d, b) => {
-    let e = d;
-    for (; e; ) {
-      if (e instanceof HTMLElement && e.dataset.chip != null || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement)
-        return e;
-      e = b === "next" ? e.nextElementSibling : e.previousElementSibling;
+function z(t) {
+  var r;
+  const s = (b, h) => {
+    let n = b;
+    for (; n; ) {
+      if (n instanceof HTMLElement && n.dataset.chip != null || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement)
+        return n;
+      n = h === "next" ? n.nextElementSibling : n.previousElementSibling;
     }
     return null;
-  }, l = n.parentElement, a = l == null ? void 0 : l.nextElementSibling, r = a instanceof HTMLInputElement || a instanceof HTMLTextAreaElement ? a : null;
-  return u(n.nextElementSibling, "next") ?? u(n.previousElementSibling, "previous") ?? r ?? (l == null ? void 0 : l.querySelector("input, textarea")) ?? ((m = l == null ? void 0 : l.parentElement) == null ? void 0 : m.querySelector("input, textarea")) ?? null;
+  }, l = t.parentElement, u = l == null ? void 0 : l.nextElementSibling, m = u instanceof HTMLInputElement || u instanceof HTMLTextAreaElement ? u : null;
+  return s(t.nextElementSibling, "next") ?? s(t.previousElementSibling, "previous") ?? m ?? (l == null ? void 0 : l.querySelector("input, textarea")) ?? ((r = l == null ? void 0 : l.parentElement) == null ? void 0 : r.querySelector("input, textarea")) ?? null;
 }
-function Z({
-  children: n,
-  size: u = "medium",
-  leadingIcon: l,
-  leadingAvatar: a,
+function $({
+  children: t,
+  size: s = "medium",
+  compact: l = !1,
+  leadingIcon: u,
+  leadingAvatar: m,
   onRemove: r,
-  error: m = !1,
-  colored: d = !1,
-  className: b = "",
-  ...e
+  error: b = !1,
+  colored: h = !1,
+  className: n = "",
+  ...i
 }) {
-  const h = A(w), x = N[u], T = H[u], p = y(n), g = e["aria-label"] ?? (r != null && p !== "" ? `${p}. Press Delete to remove.` : p !== "" ? p : void 0), f = r != null, E = (t) => {
-    const s = t.currentTarget.closest("[data-chip]"), o = s instanceof HTMLElement ? j(s) : null, _ = t.currentTarget;
-    r == null || r(t), window.setTimeout(() => {
-      _.isConnected || o == null || o.isConnected && (o.dataset.chip != null ? L(o) : o.focus({ focusVisible: !0 }));
+  const x = I(L), y = H[s], g = j[s], f = T(t), E = i["aria-label"] ?? (r != null && f !== "" ? `${f}. Press Delete to remove.` : f !== "" ? f : void 0), d = r != null, S = (e) => {
+    const p = e.currentTarget.closest("[data-chip]"), a = p instanceof HTMLElement ? z(p) : null, v = e.currentTarget;
+    r == null || r(e), window.setTimeout(() => {
+      v.isConnected || a == null || a.isConnected && (a.dataset.chip != null ? N(a) : a.focus({ focusVisible: !0 }));
     }, 0);
-  }, S = [
-    i.chip,
-    i[`chip--size-${k(u)}`],
-    m && i["chip--error"],
-    d && i["chip--colored"],
-    b
-  ].filter(Boolean).join(" "), C = (t) => {
-    var s, o;
-    (s = e.onKeyDown) == null || s.call(e, t), !(h || !f || t.defaultPrevented) && (t.key === "Delete" || t.key === "Backspace" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), (o = t.currentTarget.querySelector("[data-chip-remove]")) == null || o.click());
+  }, C = [
+    o.chip,
+    o[`chip--size-${w(s)}`],
+    l && o["chip--compact"],
+    b && o["chip--error"],
+    h && o["chip--colored"],
+    n
+  ].filter(Boolean).join(" "), _ = (e) => {
+    var p, a;
+    (p = i.onKeyDown) == null || p.call(i, e), !(x || !d || e.defaultPrevented) && (e.key === "Delete" || e.key === "Backspace" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), (a = e.currentTarget.querySelector("[data-chip-remove]")) == null || a.click());
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: S,
-      ...e,
-      role: f ? "button" : e.role,
-      tabIndex: f ? h ? -1 : 0 : e.tabIndex,
-      "aria-label": f ? g : e["aria-label"],
+      className: C,
+      ...i,
+      role: d ? "button" : i.role,
+      tabIndex: d ? x ? -1 : 0 : i.tabIndex,
+      "aria-label": d ? E : i["aria-label"],
       "data-chip": "",
-      onKeyDown: C,
+      onKeyDown: _,
       children: [
-        a != null ? /* @__PURE__ */ c("span", { className: i["chip__avatar-slot"], children: /* @__PURE__ */ c(
-          D,
+        m != null ? /* @__PURE__ */ c("span", { className: o["chip__avatar-slot"], children: /* @__PURE__ */ c(
+          k,
           {
-            src: a.src,
-            alt: a.alt,
-            size: T
+            src: m.src,
+            alt: m.alt,
+            size: g
           }
-        ) }) : l != null ? /* @__PURE__ */ c("span", { className: i["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(M, { glyph: l, size: x }) }) : null,
-        /* @__PURE__ */ c("span", { className: i.chip__label, children: n }),
+        ) }) : u != null ? /* @__PURE__ */ c("span", { className: o["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(D, { glyph: u, size: y }) }) : null,
+        /* @__PURE__ */ c("span", { className: o.chip__label, children: t }),
         r != null ? /* @__PURE__ */ c(
           "button",
           {
             type: "button",
-            className: i.chip__remove,
+            className: o.chip__remove,
             "data-chip-remove": "",
             tabIndex: -1,
             "aria-hidden": !0,
-            onMouseDown: (t) => {
-              t.preventDefault();
+            onMouseDown: (e) => {
+              e.preventDefault();
             },
-            onClick: E,
-            children: /* @__PURE__ */ c(I, { size: Number(x), "aria-hidden": !0 })
+            onClick: S,
+            children: /* @__PURE__ */ c(M, { size: Number(y), "aria-hidden": !0 })
           }
         ) : null
       ]
@@ -99,6 +99,6 @@ function Z({
   );
 }
 export {
-  Z as default
+  $ as default
 };
 //# sourceMappingURL=Chip.js.map