@mattermost/compass-ui 0.1.0-alpha.20 → 0.1.0-alpha.22

package/dist/components/action-button/ActionButton.css

@@ -1 +0,0 @@
-._action-button_1nxkv_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:108px;min-width:64px;max-width:100%;padding:var(--spacing-m) 0 var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:rgba(var(--center-channel-color-rgb),.04);--action-button-fg: rgba(var(--center-channel-color-rgb), .64);color:var(--action-button-fg);cursor:pointer;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-transition),color 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}._action-button_1nxkv_2:any-link,._action-button_1nxkv_2:hover,._action-button_1nxkv_2:focus,._action-button_1nxkv_2:active,._action-button_1nxkv_2:visited{color:var(--action-button-fg);text-decoration:none}._action-button_1nxkv_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_1nxkv_2:hover:not(:disabled,._action-button--disabled_1nxkv_30){background-color:rgba(var(--center-channel-color-rgb),.08);--action-button-fg: rgba(var(--center-channel-color-rgb), .75)}._action-button_1nxkv_2:active:not(:disabled,._action-button--disabled_1nxkv_30){background-color:rgba(var(--button-bg-rgb),.08);--action-button-fg: var(--link-color)}._action-button_1nxkv_2:is(:disabled,._action-button--disabled_1nxkv_30){opacity:.48;cursor:not-allowed}._action-button--active_1nxkv_42{--action-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_1nxkv_42 ._action-button__icon_1nxkv_46,._action-button--active_1nxkv_42 ._action-button__label_1nxkv_47{color:var(--link-color)}._action-button--active_1nxkv_42:hover:not(:disabled,._action-button--disabled_1nxkv_30){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_1nxkv_42:active:not(:disabled,._action-button--disabled_1nxkv_30){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_1nxkv_56{--focus-ring-color: var(--error-text, var(--color-danger));--action-button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.04)}._action-button--destructive_1nxkv_56:hover:not(:disabled,._action-button--disabled_1nxkv_30){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);--action-button-fg: var(--error-text, var(--color-danger))}._action-button--destructive_1nxkv_56:active:not(:disabled,._action-button--disabled_1nxkv_30){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16);--action-button-fg: var(--error-text, var(--color-danger))}._action-button__icon_1nxkv_46{display:flex;align-items:center;justify-content:center;width:var(--icon-size-20);height:var(--icon-size-20);flex-shrink:0;color:var(--action-button-fg)}._action-button__label_1nxkv_47{font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;box-sizing:border-box;max-width:100%;padding-inline:var(--action-button-padding-inline, clamp(var(--spacing-xs), 33.33% - 13.33px, var(--spacing-l)));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance;white-space:normal;text-align:center;color:var(--action-button-fg)}

package/dist/components/action-button/ActionButton.d.ts

@@ -1,54 +0,0 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-interface ActionButtonOwnProps {
-    /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */
-    icon: ReactNode;
-    /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
-    label: ReactNode;
-    destructive?: boolean;
-    className?: string;
-    /**
-     * When true, disables the control. On a native `<button>`, sets the `disabled`
-     * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and
-     * blocks click / middle-click navigation (the link stays focusable).
-     */
-    disabled?: boolean;
-}
-export interface ActionButtonProps extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * When true, merges ActionButton props onto the single child element instead of
-     * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
-     */
-    asChild?: false;
-    /**
-     * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native
-     * `<button>`; not available with `asChild`.
-     */
-    active?: boolean;
-}
-export interface ActionButtonAsChildProps extends ActionButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {
-    /**
-     * Merges ActionButton props onto the single child element instead of rendering a
-     * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the
-     * child. Do not pass `type` or `active` — they are not available on links.
-     * Pass an empty child; ActionButton supplies the icon and label anatomy.
-     */
-    asChild: true;
-    /** Single empty element to render as the ActionButton (e.g. `<a href="…" />`). */
-    children: ReactElement;
-}
-type ActionButtonComponent = {
-    (props: ActionButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
-    (props: ActionButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
-    displayName?: string;
-};
-/**
- * Action Buttons surface a small set of high-frequency actions in a fixed context — a
- * profile popover, a channel info panel, a card. They sit close to the content they act on
- * and read as a row of equal-weight choices.
- *
- * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational
- * action with Action Button styling (no nested `<button>`).
- */
-declare const ActionButton: ActionButtonComponent;
-export default ActionButton;
-//# sourceMappingURL=ActionButton.d.ts.map

package/dist/components/action-button/ActionButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAKf,UAAU,oBAAoB;IAC5B,sGAAsG;IACtG,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAAE,oBAAoB,CAAC,iBAAiB,CAAC;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,wBACf,SACE,oBAAoB,EACpB,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,kFAAkF;IAClF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,KAAK,qBAAqB,GAAG;IAC3B,CACE,KAAK,EAAE,wBAAwB,GAAG,aAAa,CAAC,WAAW,CAAC,GAC3D,YAAY,GAAG,IAAI,CAAC;IACvB,CACE,KAAK,EAAE,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,GAC1D,YAAY,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,EAyFZ,qBAAqB,CAAC;AAI5B,eAAe,YAAY,CAAC"}

package/dist/components/action-button/ActionButton.js

@@ -1,74 +0,0 @@
-import { jsxs as i, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { forwardRef as A } from "react";
-import { IconSlotContext as s } from "../icon/Icon.js";
-import { renderAsChild as P } from "../../utils/slot.js";
-import t from "./ActionButton.module.scss.js";
-const w = A(function(a, o) {
-  if (a.asChild) {
-    const {
-      icon: f,
-      label: v,
-      destructive: p = !1,
-      className: C,
-      disabled: N,
-      children: _,
-      asChild: F,
-      ...B
-    } = a, j = [
-      t["action-button"],
-      p ? t["action-button--destructive"] : "",
-      C ?? ""
-    ].filter(Boolean).join(" "), x = /* @__PURE__ */ i(y, { children: [
-      /* @__PURE__ */ e("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(s.Provider, { value: { size: "20" }, children: f }) }),
-      /* @__PURE__ */ e("span", { className: t["action-button__label"], children: v })
-    ] });
-    return P({
-      child: _,
-      props: {
-        ...B,
-        className: j
-      },
-      ref: o,
-      content: x,
-      disabled: !!N,
-      disabledClassName: t["action-button--disabled"],
-      warnOnChildContent: !0
-    });
-  }
-  const {
-    icon: l,
-    label: c,
-    active: n,
-    destructive: r = !1,
-    className: d,
-    disabled: u,
-    type: m = "button",
-    asChild: g,
-    ...b
-  } = a, h = [
-    t["action-button"],
-    n ? t["action-button--active"] : "",
-    r ? t["action-button--destructive"] : "",
-    d ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i(
-    "button",
-    {
-      ref: o,
-      className: h,
-      type: m,
-      disabled: u,
-      "aria-pressed": n === void 0 ? void 0 : n,
-      ...b,
-      children: [
-        /* @__PURE__ */ e("span", { className: t["action-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(s.Provider, { value: { size: "20" }, children: l }) }),
-        /* @__PURE__ */ e("span", { className: t["action-button__label"], children: c })
-      ]
-    }
-  );
-});
-w.displayName = "ActionButton";
-export {
-  w as default
-};
-//# sourceMappingURL=ActionButton.js.map

package/dist/components/action-button/ActionButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionButton.js","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { renderAsChild } from '@/utils/slot';\nimport styles from './ActionButton.module.scss';\n\ninterface ActionButtonOwnProps {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  destructive?: boolean;\n  className?: string;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface ActionButtonProps\n  extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges ActionButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n   * `<button>`; not available with `asChild`.\n   */\n  active?: boolean;\n}\n\nexport interface ActionButtonAsChildProps\n  extends\n    ActionButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges ActionButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `active` — they are not available on links.\n   * Pass an empty child; ActionButton supplies the icon and label anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the ActionButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n}\n\ntype ActionButtonComponent = {\n  (\n    props: ActionButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: ActionButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Action Button styling (no nested `<button>`).\n */\nconst ActionButton = forwardRef(function ActionButton(\n  props: ActionButtonProps | ActionButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      icon,\n      label,\n      destructive = false,\n      className,\n      disabled,\n      children,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = [\n      styles['action-button'],\n      destructive ? styles['action-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const anatomy = (\n      <>\n        <span className={styles['action-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['action-button__label']}>{label}</span>\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n      },\n      ref,\n      content: anatomy,\n      disabled: Boolean(disabled),\n      disabledClassName: styles['action-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    icon,\n    label,\n    active,\n    destructive = false,\n    className,\n    disabled,\n    type = 'button',\n    asChild,\n    ...htmlProps\n  } = props;\n  void asChild;\n\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}) as ActionButtonComponent;\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","active","type","htmlProps"],"mappings":";;;;;AA2EA,MAAMA,IAAeC,EAAW,SAC9BC,GACAC,GACA;AACA,MAAID,EAAM,SAAS;AACjB,UAAM;AAAA,MACJ,MAAAE;AAAAA,MACA,OAAAC;AAAAA,MACA,aAAAC,IAAc;AAAA,MACd,WAAAC;AAAAA,MACA,UAAAC;AAAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAAA,MACA,GAAGC;AAAA,IAAA,IACDT,GAGEU,IAAY;AAAA,MAChBC,EAAO,eAAe;AAAA,MACtBP,IAAcO,EAAO,4BAA4B,IAAI;AAAA,MACrDN,KAAa;AAAA,IAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,GAELO,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,WAAWJ,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,QACtC,UAAAd,GACH,GACF;AAAA,wBACC,QAAA,EAAK,WAAWS,EAAO,sBAAsB,GAAI,UAAAR,EAAAA,CAAM;AAAA,IAAA,GAC1D;AAGF,WAAOc,EAAc;AAAA,MACnB,OAAOV;AAAA,MACP,OAAO;AAAA,QACL,GAAGE;AAAA,QACH,WAAWC;AAAAA,MAAA;AAAA,MAEb,KAAAT;AAAA,MACA,SAASW;AAAA,MACT,UAAU,EAAQN;AAAAA,MAClB,mBAAmBK,EAAO,yBAAyB;AAAA,MACnD,oBAAoB;AAAA,IAAA,CACrB;AAAA,EACH;AAEA,QAAM;AAAA,IACJ,MAAAT;AAAA,IACA,OAAAC;AAAA,IACA,QAAAe;AAAA,IACA,aAAAd,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAa,IAAO;AAAA,IACP,SAAAX;AAAA,IACA,GAAGY;AAAA,EAAA,IACDpB,GAGEU,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBO,IAASP,EAAO,uBAAuB,IAAI;AAAA,IAC3CP,IAAcO,EAAO,4BAA4B,IAAI;AAAA,IACrDN,KAAa;AAAA,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWS;AAAA,MACX,MAAAS;AAAA,MACA,UAAAb;AAAA,MACA,gBAAcY,MAAW,SAAY,SAAYA;AAAA,MAChD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAL,EAAC,UAAK,WAAWJ,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAI,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,0BACC,QAAA,EAAK,WAAWL,EAAO,sBAAsB,GAAI,UAAAR,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9D,CAAC;AAEDL,EAAa,cAAc;"}

package/dist/components/action-button/ActionButton.module.scss.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_1nxkv_2","action-button--disabled":"_action-button--disabled_1nxkv_30","action-button--active":"_action-button--active_1nxkv_42","action-button__icon":"_action-button__icon_1nxkv_46","action-button__label":"_action-button__label_1nxkv_47","action-button--destructive":"_action-button--destructive_1nxkv_56"};exports.default=t;
-//# sourceMappingURL=ActionButton.module.scss.cjs.map

package/dist/components/action-button/ActionButton.module.scss.cjs.map

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

package/dist/components/action-button/ActionButton.module.scss.js

@@ -1,12 +0,0 @@
-import './ActionButton.css';const t = {
-  "action-button": "_action-button_1nxkv_2",
-  "action-button--disabled": "_action-button--disabled_1nxkv_30",
-  "action-button--active": "_action-button--active_1nxkv_42",
-  "action-button__icon": "_action-button__icon_1nxkv_46",
-  "action-button__label": "_action-button__label_1nxkv_47",
-  "action-button--destructive": "_action-button--destructive_1nxkv_56"
-};
-export {
-  t as default
-};
-//# sourceMappingURL=ActionButton.module.scss.js.map

package/dist/components/action-button/ActionButton.module.scss.js.map

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

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

@@ -1,3 +0,0 @@
-export { default as ActionButton } from './ActionButton';
-export type { ActionButtonProps, ActionButtonAsChildProps, } from './ActionButton';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,gBAAgB,CAAC"}

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

@@ -1,5 +0,0 @@
-import { default as a } from "./ActionButton.js";
-export {
-  a as ActionButton
-};
-//# sourceMappingURL=index.js.map