@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/components/button/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot =\n    loading || (supportsIcons && isValidElement(leadingIcon));\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","Button","forwardRef","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","ref","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","isValidElement","jsxs","jsx","Spinner","IconSlotContext"],"mappings":"gTA6CMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOMC,EAASC,EAAAA,WAA2C,SACxD,CACE,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAWhB,EAAcU,CAAI,EAC7BO,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQb,CAAQ,CAAC,EAAE,EAC9Dc,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQT,CAAI,CAAC,EAAE,EAClDW,EACJlB,IAAe,WAAae,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,EAAmBjB,EAAca,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,EACAlB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELoB,EAAgBlB,IAAa,OAC7BmB,EACJhB,GAAYe,GAAiBE,EAAAA,eAAelB,CAAW,EAEzD,OACEmB,EAAAA,KAAC,SAAA,CACC,IAAAZ,EACA,UAAWQ,EACX,KAAAV,EACA,SAAUD,GAAYH,EACrB,GAAGK,EAEH,SAAA,CAAAW,EACCG,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAT,EACCmB,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAMb,EACN,SAAUb,IAAe,UAAA,CAAA,EAG3ByB,EAAAA,IAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,CAAA,EACtC,SAAAR,EACH,CAAA,CAEJ,EACE,WACH,OAAA,CAAK,UAAWU,EAAAA,QAAO,cAAmB,SAAAX,EAAS,EACnDiB,GAAiB,CAACf,GAAWiB,EAAAA,eAAef,CAAY,EACvDiB,EAAAA,IAAC,OAAA,CAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAU,MAACE,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,CAAA,EACtC,SAAAL,CAAA,CACH,CAAA,CACF,EACE,IAAA,CAAA,CAAA,CAGV,CAAC,EAEDV,EAAO,YAAc"}

package/dist/components/button/Button.css

@@ -0,0 +1 @@
+._button_doayp_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_doayp_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_doayp_2:disabled{cursor:not-allowed}._button__label_doayp_24{line-height:1}._button__icon-slot_doayp_27{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_doayp_33{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_doayp_33 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_doayp_40{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_doayp_40 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_doayp_47{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_doayp_47 ._button__label_doayp_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_doayp_54{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_doayp_54 ._button__label_doayp_24{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_doayp_61{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_doayp_75{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_doayp_105{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-link_doayp_118{--focus-ring-color: var(--link-color);padding:0;background-color:transparent;color:var(--link-color)}._button--emphasis-link_doayp_118:hover:not(:disabled) ._button__label_doayp_24{text-decoration:underline}._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-link_doayp_118{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118:disabled{color:rgba(var(--sidebar-text-rgb),.32)}

package/dist/components/button/Button.d.ts

@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'link';
+export type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';
+export type ButtonAppearance = 'default' | 'inverted';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** default | inverted (for use on dark backgrounds). Maps to Figma "Style". */
+    appearance?: ButtonAppearance;
+    /** Optional CSS class name. */
+    className?: string;
+    /** Button label. */
+    children: ReactNode;
+    /** When true, uses destructive (danger) styling. */
+    destructive?: boolean;
+    /** Visual emphasis. Default: primary. */
+    emphasis?: ButtonEmphasis;
+    /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
+    leadingIcon?: ReactNode;
+    /** When true, shows a Spinner in the leading slot and disables the button. */
+    loading?: boolean;
+    /** Size variant. Default: medium. */
+    size?: ButtonSize;
+    /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
+    trailingIcon?: ReactNode;
+}
+/**
+ * Buttons let people take actions or make decisions with a single tap or click — saving a
+ * form, sending a message, confirming a dialog. Compass ships several button variants, each
+ * with the same anatomy and rhythm so they feel like members of the same family.
+ */
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4IAA4I;IAC5I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6IAA6I;IAC7I,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,QAAA,MAAM,MAAM,2GAuEV,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/dist/components/button/Button.js

@@ -0,0 +1,60 @@
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { forwardRef as P, isValidElement as c } from "react";
+import { IconSlotContext as m } from "../icon/Icon.js";
+import w from "../spinner/Spinner.js";
+import { toKebab as d } from "../../utils/string.js";
+import t from "./Button.module.scss.js";
+const E = {
+  "x-small": "12",
+  small: "12",
+  medium: "16",
+  large: "20"
+}, I = P(function({
+  appearance: n = "default",
+  className: p = "",
+  destructive: b = !1,
+  emphasis: r = "primary",
+  children: f,
+  leadingIcon: a,
+  loading: s = !1,
+  size: i = "medium",
+  trailingIcon: l,
+  disabled: v,
+  type: h = "button",
+  ..._
+}, C) {
+  const o = E[i], N = t[`button--emphasis-${d(r)}`], x = t[`button--size-${d(i)}`], z = n === "inverted" ? t["button--appearance-inverted"] : "", S = b ? t["button--destructive"] : "", B = [
+    t.button,
+    N,
+    x,
+    z,
+    S,
+    p
+  ].filter(Boolean).join(" "), u = r !== "link", j = s || u && c(a);
+  return /* @__PURE__ */ y(
+    "button",
+    {
+      ref: C,
+      className: B,
+      type: h,
+      disabled: v || s,
+      ..._,
+      children: [
+        j ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(
+          w,
+          {
+            size: o,
+            inverted: n === "inverted"
+          }
+        ) : /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: a }) }) : null,
+        /* @__PURE__ */ e("span", { className: t.button__label, children: f }),
+        u && !s && c(l) ? /* @__PURE__ */ e("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(m.Provider, { value: { size: o }, children: l }) }) : null
+      ]
+    }
+  );
+});
+I.displayName = "Button";
+export {
+  I as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button. */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    appearance = 'default',\n    className = '',\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const supportsIcons = emphasis !== 'link';\n  const showLeadingSlot =\n    loading || (supportsIcons && isValidElement(leadingIcon));\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled || loading}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {supportsIcons && !loading && isValidElement(trailingIcon) ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["SIZE_ICON_MAP","Button","forwardRef","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","ref","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","isValidElement","jsxs","jsx","Spinner","IconSlotContext"],"mappings":";;;;;;AA6CA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAOMC,IAASC,EAA2C,SACxD;AAAA,EACE,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWhB,EAAcU,CAAI,GAC7BO,IAAgBC,EAAO,oBAAoBC,EAAQb,CAAQ,CAAC,EAAE,GAC9Dc,IAAYF,EAAO,gBAAgBC,EAAQT,CAAI,CAAC,EAAE,GAClDW,IACJlB,MAAe,aAAae,EAAO,6BAA6B,IAAI,IAChEI,IAAmBjB,IAAca,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAlB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELoB,IAAgBlB,MAAa,QAC7BmB,IACJhB,KAAYe,KAAiBE,EAAelB,CAAW;AAEzD,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWQ;AAAA,MACX,MAAAV;AAAA,MACA,UAAUD,KAAYH;AAAA,MACrB,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAW,IACC,gBAAAG,EAAC,UAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAT,IACC,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAMb;AAAA,YACN,UAAUb,MAAe;AAAA,UAAA;AAAA,QAAA,IAG3B,gBAAAyB,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAR,GACH,EAAA,CAEJ,IACE;AAAA,0BACH,QAAA,EAAK,WAAWU,EAAO,eAAmB,UAAAX,GAAS;AAAA,QACnDiB,KAAiB,CAACf,KAAWiB,EAAef,CAAY,IACvD,gBAAAiB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAU,EAACE,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAA,GACtC,UAAAL,EAAA,CACH,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAEDV,EAAO,cAAc;"}

package/dist/components/button/Button.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_doayp_2",o="_button__label_doayp_24",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_doayp_27","button--size-x-small":"_button--size-x-small_doayp_33","button--size-small":"_button--size-small_doayp_40","button--size-medium":"_button--size-medium_doayp_47","button--size-large":"_button--size-large_doayp_54","button--emphasis-primary":"_button--emphasis-primary_doayp_61","button--emphasis-secondary":"_button--emphasis-secondary_doayp_75","button--emphasis-tertiary":"_button--emphasis-tertiary_doayp_91","button--emphasis-quaternary":"_button--emphasis-quaternary_doayp_105","button--emphasis-link":"_button--emphasis-link_doayp_118","button--destructive":"_button--destructive_doayp_130","button--appearance-inverted":"_button--appearance-inverted_doayp_193"};exports.button=t;exports.button__label=o;exports.default=e;
+//# sourceMappingURL=Button.module.scss.cjs.map

package/dist/components/button/Button.module.scss.cjs.map

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

package/dist/components/button/Button.module.scss.js

@@ -0,0 +1,22 @@
+import './Button.css';const t = "_button_doayp_2", o = "_button__label_doayp_24", _ = {
+  button: t,
+  button__label: o,
+  "button__icon-slot": "_button__icon-slot_doayp_27",
+  "button--size-x-small": "_button--size-x-small_doayp_33",
+  "button--size-small": "_button--size-small_doayp_40",
+  "button--size-medium": "_button--size-medium_doayp_47",
+  "button--size-large": "_button--size-large_doayp_54",
+  "button--emphasis-primary": "_button--emphasis-primary_doayp_61",
+  "button--emphasis-secondary": "_button--emphasis-secondary_doayp_75",
+  "button--emphasis-tertiary": "_button--emphasis-tertiary_doayp_91",
+  "button--emphasis-quaternary": "_button--emphasis-quaternary_doayp_105",
+  "button--emphasis-link": "_button--emphasis-link_doayp_118",
+  "button--destructive": "_button--destructive_doayp_130",
+  "button--appearance-inverted": "_button--appearance-inverted_doayp_193"
+};
+export {
+  t as button,
+  o as button__label,
+  _ as default
+};
+//# sourceMappingURL=Button.module.scss.js.map

package/dist/components/button/Button.module.scss.js.map

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

package/dist/components/button/index.cjs

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

package/dist/components/button/index.cjs.map

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

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

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export type { ButtonProps, ButtonEmphasis, ButtonSize, ButtonAppearance, } from './Button';
+export { default as btnStyles } from './Button.module.scss';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACV,WAAW,EACX,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,7 @@
+import { default as o } from "./Button.js";
+import { default as f } from "./Button.module.scss.js";
+export {
+  o as Button,
+  f as btnStyles
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("react"),__b=require("@mattermost/compass-icons/components/check-circle.js"),b=__b?.default??__b,o=require("../icon/Icon.cjs"),t=require("./CardButton.module.scss.cjs"),d=x.forwardRef(function({icon:c,title:u,description:n,selected:a=!1,className:i="",type:l="button",role:r,disabled:f,...h},_){const s=r==="radio",j=[t.default["card-button"],a&&t.default["card-button--selected"],i].filter(Boolean).join(" ");return e.jsxs("button",{ref:_,type:l,role:r,disabled:f,className:j,"aria-checked":s?a:void 0,"aria-pressed":s?void 0:a,...h,children:[e.jsx("span",{className:t.default["card-button__icon"],"aria-hidden":!0,children:e.jsx(o.IconSlotContext.Provider,{value:{size:"24"},children:c})}),e.jsxs("span",{className:t.default["card-button__text"],children:[e.jsx("span",{className:t.default["card-button__title"],children:u}),n!=null&&e.jsx("span",{className:t.default["card-button__description"],children:n})]}),e.jsx("span",{className:t.default["card-button__check"],"aria-hidden":!0,children:e.jsx(o.default,{glyph:e.jsx(b,{}),size:"20"})})]})});d.displayName="CardButton";exports.default=d;
+//# sourceMappingURL=CardButton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.cjs","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'title'\n> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */\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 */\nconst CardButton = forwardRef<HTMLButtonElement, CardButtonProps>(\n  function CardButton(\n    {\n      icon,\n      title,\n      description,\n      selected = false,\n      className = '',\n      type = 'button',\n      role,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\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        ref={ref}\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          <IconSlotContext.Provider value={{ size: '24' }}>\n            {icon}\n          </IconSlotContext.Provider>\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);\n\nCardButton.displayName = 'CardButton';\n\nexport default CardButton;\n"],"names":["CardButton","forwardRef","icon","title","description","selected","className","type","role","disabled","rest","ref","isRadio","rootClass","styles","jsxs","jsx","IconSlotContext","Icon","CheckCircleIcon"],"mappings":"2SA2BMA,EAAaC,EAAAA,WACjB,SACE,CACE,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,KAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAUJ,IAAS,QACnBK,EAAY,CAChBC,EAAAA,QAAO,aAAa,EACpBT,GAAYS,EAAAA,QAAO,uBAAuB,EAC1CR,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACES,EAAAA,KAAC,SAAA,CACC,IAAAJ,EACA,KAAAJ,EACA,KAAAC,EACA,SAAAC,EACA,UAAWI,EACX,eAAcD,EAAUP,EAAW,OACnC,eAAeO,EAAqB,OAAXP,EACxB,GAAGK,EAEJ,SAAA,CAAAM,MAAC,QAAK,UAAWF,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAE,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EACAF,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,mBAAmB,EACzC,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oBAAoB,EAAI,SAAAX,EAAM,EACrDC,GAAe,MACdY,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,0BAA0B,EAC/C,SAAAV,CAAA,CACH,CAAA,EAEJ,QACC,OAAA,CAAK,UAAWU,EAAAA,QAAO,oBAAoB,EAAG,cAAW,GACxD,SAAAE,EAAAA,IAACE,UAAA,CAAK,MAAOF,MAACG,EAAA,CAAA,CAAgB,EAAI,KAAK,KAAK,CAAA,CAC9C,CAAA,CAAA,CAAA,CAGN,CACF,EAEAnB,EAAW,YAAc"}

package/dist/components/card-button/CardButton.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.d.ts

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface CardButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
+    /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */
+    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.).
+ */
+declare const CardButton: import('react').ForwardRefExoticComponent<CardButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default CardButton;
+//# 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,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9E,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,CACrB;IACC,kHAAkH;IAClH,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,QAAA,MAAM,UAAU,+GAsDf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,50 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import ___ from "@mattermost/compass-icons/components/check-circle.js";const _=___&&___.default?___.default:___;
+import b, { IconSlotContext as C } from "../icon/Icon.js";
+import a from "./CardButton.module.scss.js";
+const N = f(
+  function({
+    icon: c,
+    title: i,
+    description: o,
+    selected: r = !1,
+    className: d = "",
+    type: l = "button",
+    role: n,
+    disabled: u,
+    ...m
+  }, p) {
+    const e = n === "radio", h = [
+      a["card-button"],
+      r && a["card-button--selected"],
+      d
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: p,
+        type: l,
+        role: n,
+        disabled: u,
+        className: h,
+        "aria-checked": e ? r : void 0,
+        "aria-pressed": e ? void 0 : r,
+        ...m,
+        children: [
+          /* @__PURE__ */ t("span", { className: a["card-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ t(C.Provider, { value: { size: "24" }, children: c }) }),
+          /* @__PURE__ */ s("span", { className: a["card-button__text"], children: [
+            /* @__PURE__ */ t("span", { className: a["card-button__title"], children: i }),
+            o != null && /* @__PURE__ */ t("span", { className: a["card-button__description"], children: o })
+          ] }),
+          /* @__PURE__ */ t("span", { className: a["card-button__check"], "aria-hidden": !0, children: /* @__PURE__ */ t(b, { glyph: /* @__PURE__ */ t(_, {}), size: "20" }) })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "CardButton";
+export {
+  N 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 { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'title'\n> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */\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 */\nconst CardButton = forwardRef<HTMLButtonElement, CardButtonProps>(\n  function CardButton(\n    {\n      icon,\n      title,\n      description,\n      selected = false,\n      className = '',\n      type = 'button',\n      role,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\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        ref={ref}\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          <IconSlotContext.Provider value={{ size: '24' }}>\n            {icon}\n          </IconSlotContext.Provider>\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);\n\nCardButton.displayName = 'CardButton';\n\nexport default CardButton;\n"],"names":["CardButton","forwardRef","icon","title","description","selected","className","type","role","disabled","rest","ref","isRadio","rootClass","styles","jsxs","jsx","IconSlotContext","Icon","CheckCircleIcon"],"mappings":";;;;;AA2BA,MAAMA,IAAaC;AAAA,EACjB,SACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAUJ,MAAS,SACnBK,IAAY;AAAA,MAChBC,EAAO,aAAa;AAAA,MACpBT,KAAYS,EAAO,uBAAuB;AAAA,MAC1CR;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,MAAAJ;AAAA,QACA,MAAAC;AAAA,QACA,UAAAC;AAAA,QACA,WAAWI;AAAA,QACX,gBAAcD,IAAUP,IAAW;AAAA,QACnC,gBAAeO,IAAqB,SAAXP;AAAA,QACxB,GAAGK;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAAC,UAAK,WAAWF,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAE,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,UACA,gBAAAF,EAAC,QAAA,EAAK,WAAWD,EAAO,mBAAmB,GACzC,UAAA;AAAA,YAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,oBAAoB,GAAI,UAAAX,GAAM;AAAA,YACrDC,KAAe,QACd,gBAAAY,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAV,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BACC,QAAA,EAAK,WAAWU,EAAO,oBAAoB,GAAG,eAAW,IACxD,UAAA,gBAAAE,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,GAAA,CAAA,CAAgB,GAAI,MAAK,MAAK,EAAA,CAC9C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAnB,EAAW,cAAc;"}

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.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.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.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.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.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButtonGroup.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.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.cjs.map

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

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/channel-info-msg-header/ChannelInfoMsgHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),e=require("./ChannelInfoMsgHeader.module.scss.cjs");function u({channelName:l,onChannelClick:i,tabs:o,teamName:s,className:t=""}){const r=l!=null&&l!==""?[{label:l,onClick:i}]:o??[{label:"Spec Reviews",active:!0}],c=[e.default["channel-info-msg-header"],t].filter(Boolean).join(" ");return a.jsx("div",{className:c,children:a.jsxs("div",{className:e.default["channel-info-msg-header__container"],children:[r.map((n,d)=>a.jsx("div",{className:[e.default["channel-info-msg-header__tab-area"],n.active?e.default["channel-info-msg-header__tab-area--active"]:""].filter(Boolean).join(" "),children:a.jsx("button",{type:"button",className:[e.default["channel-info-msg-header__tab"],n.active?e.default["channel-info-msg-header__tab--active"]:""].filter(Boolean).join(" "),onClick:n.onClick,children:n.label})},`${n.label}-${d}`)),s!=null&&s!==""&&a.jsx("div",{className:e.default["channel-info-msg-header__team"],children:a.jsx("span",{className:e.default["channel-info-msg-header__team-name"],children:s})})]})})}exports.default=u;
+//# sourceMappingURL=ChannelInfoMsgHeader.cjs.map

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelInfoMsgHeader.cjs","sources":["../../../src/components/channel-info-msg-header/ChannelInfoMsgHeader.tsx"],"sourcesContent":["import styles from './ChannelInfoMsgHeader.module.scss';\n\nexport interface ChannelInfoMsgHeaderTab {\n  /** Label text for this tab. */\n  label: string;\n  /** Whether this tab is currently active/selected. */\n  active?: boolean;\n  /** Click handler. */\n  onClick?: () => void;\n}\n\nexport interface ChannelInfoMsgHeaderProps {\n  /**\n   * Channel (or section) label — primary API for Mentions / Saved message\n   * indicators. Prefer this over `tabs` for a single channel chip.\n   */\n  channelName?: string;\n  /** Called when the channel label is pressed (`channelName` mode). */\n  onChannelClick?: () => void;\n  /**\n   * Multi-section tabs for channel info panels. Used when `channelName` is\n   * omitted.\n   */\n  tabs?: ChannelInfoMsgHeaderTab[];\n  /**\n   * Team name after the channel divider. Omit when the workspace has only one\n   * team or the team is already clear from context.\n   */\n  teamName?: string;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Channel Info Message Header names a channel (or section) and, when useful, the team it\n * belongs to. Use it above posts in Mentions and Saved lists, or as section tabs at the top\n * of a channel info panel.\n */\nexport default function ChannelInfoMsgHeader({\n  channelName,\n  onChannelClick,\n  tabs,\n  teamName,\n  className = '',\n}: ChannelInfoMsgHeaderProps) {\n  const resolvedTabs: ChannelInfoMsgHeaderTab[] =\n    channelName != null && channelName !== ''\n      ? [{ label: channelName, onClick: onChannelClick }]\n      : (tabs ?? [{ label: 'Spec Reviews', active: true }]);\n\n  const rootClass = [styles['channel-info-msg-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['channel-info-msg-header__container']}>\n        {resolvedTabs.map((tab, index) => (\n          <div\n            key={`${tab.label}-${index}`}\n            className={[\n              styles['channel-info-msg-header__tab-area'],\n              tab.active\n                ? styles['channel-info-msg-header__tab-area--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <button\n              type=\"button\"\n              className={[\n                styles['channel-info-msg-header__tab'],\n                tab.active\n                  ? styles['channel-info-msg-header__tab--active']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={tab.onClick}\n            >\n              {tab.label}\n            </button>\n          </div>\n        ))}\n        {teamName != null && teamName !== '' && (\n          <div className={styles['channel-info-msg-header__team']}>\n            <span className={styles['channel-info-msg-header__team-name']}>\n              {teamName}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ChannelInfoMsgHeader","channelName","onChannelClick","tabs","teamName","className","resolvedTabs","rootClass","styles","jsx","tab","index"],"mappings":"qMAsCA,SAAwBA,EAAqB,CAC3C,YAAAC,EACA,eAAAC,EACA,KAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAA8B,CAC5B,MAAMC,EACJL,GAAe,MAAQA,IAAgB,GACnC,CAAC,CAAE,MAAOA,EAAa,QAASC,EAAgB,EAC/CC,GAAQ,CAAC,CAAE,MAAO,eAAgB,OAAQ,GAAM,EAEjDI,EAAY,CAACC,UAAO,yBAAyB,EAAGH,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEI,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,oCAAoC,EACxD,SAAA,CAAAF,EAAa,IAAI,CAACI,EAAKC,IACtBF,EAAAA,IAAC,MAAA,CAEC,UAAW,CACTD,EAAAA,QAAO,mCAAmC,EAC1CE,EAAI,OACAF,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAAC,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,8BAA8B,EACrCE,EAAI,OACAF,UAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASE,EAAI,QAEZ,SAAAA,EAAI,KAAA,CAAA,CACP,EAvBK,GAAGA,EAAI,KAAK,IAAIC,CAAK,EAAA,CAyB7B,EACAP,GAAY,MAAQA,IAAa,IAChCK,EAAAA,IAAC,OAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACpD,eAAC,OAAA,CAAK,UAAWA,EAAAA,QAAO,oCAAoC,EACzD,WACH,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.css

@@ -0,0 +1 @@
+._channel-info-msg-header_1vrlp_2{display:flex;align-items:center;padding:0 var(--spacing-xs)}._channel-info-msg-header__container_1vrlp_7{display:flex;align-items:center;flex-shrink:0}._channel-info-msg-header__tab-area_1vrlp_12{display:flex;align-items:flex-start;padding:0}._channel-info-msg-header__tab-area_1vrlp_12:not(:last-child){border-right:1px solid rgba(var(--center-channel-color-rgb),.16)}._channel-info-msg-header__tab-area--active_1vrlp_20 ._channel-info-msg-header__tab_1vrlp_12{color:var(--center-channel-color);font-weight:var(--font-weight-semibold)}._channel-info-msg-header__tab_1vrlp_12{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xxs);height:24px;padding:var(--spacing-xxxs) var(--spacing-s);border-radius:var(--radius-s);border:none;background:transparent;cursor:pointer;font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.75);white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._channel-info-msg-header__tab_1vrlp_12:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._channel-info-msg-header__tab--active_1vrlp_46{color:var(--center-channel-color)}._channel-info-msg-header__team_1vrlp_49{display:flex;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-s)}._channel-info-msg-header__team-name_1vrlp_54{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),.75);white-space:nowrap}