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

package/dist/components/popover-notice/PopoverNotice.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverNotice.cjs","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport Button from '@/components/button/Button';\nimport Checkbox from '@/components/checkbox/Checkbox';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './PopoverNotice.module.scss';\n\nexport type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface PopoverNoticeAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  emphasis?: 'primary' | 'tertiary';\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface PopoverNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body content. */\n  children: ReactNode;\n  /**\n   * Semantic variant — sets the icon and its color automatically.\n   * Ignored if `icon` is also provided.\n   */\n  variant?: PopoverNoticeVariant;\n  /** Optional icon shown to the left of the title. Overrides the variant icon. Pass `<Icon glyph={<SomeIcon />} />` — PopoverNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Action buttons rendered below the body. */\n  actions?: PopoverNoticeAction[];\n  /** When true, shows a \"Don't show this again\" checkbox. */\n  showCheckbox?: boolean;\n  /** Checkbox label override. Accepts translated nodes. Default: \"Don't show this confirmation again\". */\n  checkboxLabel?: ReactNode;\n  /** Callback when close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst VARIANT_ICONS: Record<PopoverNoticeVariant, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n};\n\nconst VARIANT_ICON_CLASS: Record<PopoverNoticeVariant, string> = {\n  info: styles['popover-notice__icon--info'],\n  success: styles['popover-notice__icon--success'],\n  warning: styles['popover-notice__icon--warning'],\n  danger: styles['popover-notice__icon--danger'],\n};\n\n/**\n * Popover Notice is a small overlay card that surfaces a transient message — a tip, a\n * confirmation, a warning — without taking over the screen. Think of it as a [Section\n * Notice](/components/section-notice) that floats: shorter, dismissable, and gone in five\n * seconds unless the user engages.\n */\nexport default function PopoverNotice({\n  title,\n  children,\n  variant,\n  icon,\n  actions,\n  showCheckbox = false,\n  checkboxLabel = \"Don't show this confirmation again\",\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  className = '',\n  ...rest\n}: PopoverNoticeProps) {\n  const resolvedIcon = icon ?? (variant ? VARIANT_ICONS[variant] : null);\n  const iconColorClass = !icon && variant ? VARIANT_ICON_CLASS[variant] : '';\n\n  const rootClass = [\n    styles['popover-notice'],\n    resolvedIcon == null ? styles['popover-notice--no-icon'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['popover-notice__content']}>\n        {resolvedIcon != null && (\n          <div\n            className={[styles['popover-notice__icon'], iconColorClass]\n              .filter(Boolean)\n              .join(' ')}\n            aria-hidden\n          >\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </div>\n        )}\n\n        <div className={styles['popover-notice__body']}>\n          <div className={styles['popover-notice__title-row']}>\n            <span className={styles['popover-notice__title']}>{title}</span>\n          </div>\n\n          <div className={styles['popover-notice__description']}>\n            {children}\n          </div>\n\n          {actions && actions.length > 0 && (\n            <div className={styles['popover-notice__actions']}>\n              {actions.map((action, i) => (\n                <Button\n                  key={i}\n                  emphasis={action.emphasis ?? 'primary'}\n                  size=\"small\"\n                  disabled={action.disabled}\n                  loading={action.loading}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          )}\n\n          {showCheckbox && <Checkbox size=\"medium\">{checkboxLabel}</Checkbox>}\n        </div>\n      </div>\n\n      {onClose && (\n        <IconButton\n          {...closeButtonProps}\n          className={mergeClassNames(\n            styles['popover-notice__close'],\n            closeButtonProps?.className,\n          )}\n          aria-label={closeLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["VARIANT_ICONS","Icon","jsx","InformationOutlineIcon","CheckCircleOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","VARIANT_ICON_CLASS","styles","PopoverNotice","title","children","variant","icon","actions","showCheckbox","checkboxLabel","onClose","closeLabel","closeButtonProps","className","rest","resolvedIcon","iconColorClass","rootClass","jsxs","IconSlotContext","action","i","Button","Checkbox","IconButton","mergeClassNames","CloseIcon"],"mappings":"6rBA0DMA,EAAyD,CAC7D,WAAOC,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACC,IAAuB,EAAI,EACzD,cAAUF,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACE,IAAuB,EAAI,EAC5D,cAAUH,UAAA,CAAK,KAAK,KAAK,MAAOC,MAACG,IAAuB,EAAI,EAC5D,aAASJ,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOC,EAAAA,IAACI,IAAiB,CAAA,CAAI,CACvD,EAEMC,EAA2D,CAC/D,KAAMC,EAAAA,QAAO,4BAA4B,EACzC,QAASA,EAAAA,QAAO,+BAA+B,EAC/C,QAASA,EAAAA,QAAO,+BAA+B,EAC/C,OAAQA,EAAAA,QAAO,8BAA8B,CAC/C,EAQA,SAAwBC,EAAc,CACpC,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EAAgB,qCAChB,QAAAC,EACA,WAAAC,EAAa,QACb,iBAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAuB,CACrB,MAAMC,EAAeT,IAASD,EAAUZ,EAAcY,CAAO,EAAI,MAC3DW,EAAiB,CAACV,GAAQD,EAAUL,EAAmBK,CAAO,EAAI,GAElEY,EAAY,CAChBhB,EAAAA,QAAO,gBAAgB,EACvBc,GAAgB,KAAOd,UAAO,yBAAyB,EAAI,GAC3DY,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEK,EAAAA,KAAC,MAAA,CAAK,GAAGJ,EAAM,UAAWG,EACxB,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWjB,EAAAA,QAAO,yBAAyB,EAC7C,SAAA,CAAAc,GAAgB,MACfpB,EAAAA,IAAC,MAAA,CACC,UAAW,CAACM,UAAO,sBAAsB,EAAGe,CAAc,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAW,GAEX,SAAArB,EAAAA,IAACwB,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAJ,CAAA,CACH,CAAA,CAAA,EAIJG,EAAAA,KAAC,MAAA,CAAI,UAAWjB,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAN,EAAAA,IAAC,MAAA,CAAI,UAAWM,EAAAA,QAAO,2BAA2B,EAChD,SAAAN,EAAAA,IAAC,OAAA,CAAK,UAAWM,EAAAA,QAAO,uBAAuB,EAAI,SAAAE,CAAA,CAAM,EAC3D,QAEC,MAAA,CAAI,UAAWF,EAAAA,QAAO,6BAA6B,EACjD,SAAAG,EACH,EAECG,GAAWA,EAAQ,OAAS,SAC1B,MAAA,CAAI,UAAWN,EAAAA,QAAO,yBAAyB,EAC7C,SAAAM,EAAQ,IAAI,CAACa,EAAQC,IACpB1B,EAAAA,IAAC2B,EAAAA,QAAA,CAEC,SAAUF,EAAO,UAAY,UAC7B,KAAK,QACL,SAAUA,EAAO,SACjB,QAASA,EAAO,QAChB,QAASA,EAAO,QAEf,SAAAA,EAAO,KAAA,EAPHC,CAAA,CASR,EACH,EAGDb,GAAgBb,EAAAA,IAAC4B,UAAA,CAAS,KAAK,SAAU,SAAAd,CAAA,CAAc,CAAA,CAAA,CAC1D,CAAA,EACF,EAECC,GACCf,EAAAA,IAAC6B,EAAAA,QAAA,CACE,GAAGZ,EACJ,UAAWa,EAAAA,gBACTxB,EAAAA,QAAO,uBAAuB,EAC9BW,GAAA,YAAAA,EAAkB,SAAA,EAEpB,aAAYD,EACZ,KAAK,QACL,WAAOjB,UAAA,CAAK,KAAK,KAAK,MAAOC,MAAC+B,IAAU,EAAI,EAC5C,QAAShB,CAAA,CAAA,CACX,EAEJ,CAEJ"}

package/dist/components/popover-notice/PopoverNotice.css

@@ -0,0 +1 @@
+._popover-notice_iuib4_2{position:relative;display:flex;flex-direction:column;align-items:flex-end;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-m);box-shadow:var(--elevation-4);width:386px}._popover-notice_iuib4_2 p:not([class]),._popover-notice_iuib4_2 ul:not([class]),._popover-notice_iuib4_2 ol:not([class]){margin:0}._popover-notice--no-icon_iuib4_18 ._popover-notice__content_iuib4_18{padding-left:var(--spacing-l)}._popover-notice__content_iuib4_18{display:flex;gap:var(--spacing-m);align-items:flex-start;padding:var(--spacing-m);width:100%}._popover-notice__icon_iuib4_28{display:flex;align-items:flex-start;flex-shrink:0;color:var(--center-channel-color)}._popover-notice__icon--info_iuib4_34{color:var(--color-info)}._popover-notice__icon--success_iuib4_37{color:var(--color-success)}._popover-notice__icon--warning_iuib4_40{color:var(--color-warning)}._popover-notice__icon--danger_iuib4_43{color:var(--error-text, var(--color-danger))}._popover-notice__body_iuib4_46{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1 0 0;min-width:0;overflow:hidden;padding-right:var(--spacing-xl)}._popover-notice__body_iuib4_46>:last-child{margin-bottom:0}._popover-notice__title-row_iuib4_58{display:flex;align-items:flex-start;width:100%}._popover-notice__title_iuib4_58{flex:1 0 0;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color);min-width:0}._popover-notice__description_iuib4_71{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color)}._popover-notice__description_iuib4_71>:last-child{margin-bottom:0}._popover-notice__actions_iuib4_80{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-xxs) 0}._popover-notice__close_iuib4_86{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs)}

package/dist/components/popover-notice/PopoverNotice.d.ts

@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
+export type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface PopoverNoticeAction {
+    /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
+    onClick?: () => void;
+    emphasis?: 'primary' | 'tertiary';
+    disabled?: boolean;
+    /** Shows a spinner in the button and disables it. */
+    loading?: boolean;
+}
+export interface PopoverNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    title: ReactNode;
+    /** Body content. */
+    children: ReactNode;
+    /**
+     * Semantic variant — sets the icon and its color automatically.
+     * Ignored if `icon` is also provided.
+     */
+    variant?: PopoverNoticeVariant;
+    /** Optional icon shown to the left of the title. Overrides the variant icon. Pass `<Icon glyph={<SomeIcon />} />` — PopoverNotice provides the correct size via context. */
+    icon?: ReactNode;
+    /** Action buttons rendered below the body. */
+    actions?: PopoverNoticeAction[];
+    /** When true, shows a "Don't show this again" checkbox. */
+    showCheckbox?: boolean;
+    /** Checkbox label override. Accepts translated nodes. Default: "Don't show this confirmation again". */
+    checkboxLabel?: ReactNode;
+    /** Callback when close button is clicked. */
+    onClose?: () => void;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Extra attributes for the close button (e.g. `data-testid`). */
+    closeButtonProps?: BuiltInButtonProps;
+    /** Optional CSS class name. */
+    className?: string;
+}
+/**
+ * Popover Notice is a small overlay card that surfaces a transient message — a tip, a
+ * confirmation, a warning — without taking over the screen. Think of it as a [Section
+ * Notice](/components/section-notice) that floats: shorter, dismissable, and gone in five
+ * seconds unless the user engages.
+ */
+export default function PopoverNotice({ title, children, variant, icon, actions, showCheckbox, checkboxLabel, onClose, closeLabel, closeButtonProps, className, ...rest }: PopoverNoticeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PopoverNotice.d.ts.map

package/dist/components/popover-notice/PopoverNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverNotice.d.ts","sourceRoot":"","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,2EAA2E;IAC3E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,4KAA4K;IAC5K,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wGAAwG;IACxG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,aAAoD,EACpD,OAAO,EACP,UAAoB,EACpB,gBAAgB,EAChB,SAAc,EACd,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAyEpB"}

package/dist/components/popover-notice/PopoverNotice.js

@@ -0,0 +1,90 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import __u from "@mattermost/compass-icons/components/close.js";const u=__u&&__u.default?__u.default:__u;
+import __z from "@mattermost/compass-icons/components/information-outline.js";const z=__z&&__z.default?__z.default:__z;
+import __y from "@mattermost/compass-icons/components/check-circle-outline.js";const y=__y&&__y.default?__y.default:__y;
+import __A from "@mattermost/compass-icons/components/alert-circle-outline.js";const A=__A&&__A.default?__A.default:__A;
+import __b from "@mattermost/compass-icons/components/alert-outline.js";const b=__b&&__b.default?__b.default:__b;
+import O from "../button/Button.js";
+import k from "../checkbox/Checkbox.js";
+import w from "../icon-button/IconButton.js";
+import n, { IconSlotContext as x } from "../icon/Icon.js";
+import { mergeClassNames as j } from "../../utils/props.js";
+import e from "./PopoverNotice.module.scss.js";
+const S = {
+  info: /* @__PURE__ */ o(n, { size: "20", glyph: /* @__PURE__ */ o(z, {}) }),
+  success: /* @__PURE__ */ o(n, { size: "20", glyph: /* @__PURE__ */ o(y, {}) }),
+  warning: /* @__PURE__ */ o(n, { size: "20", glyph: /* @__PURE__ */ o(A, {}) }),
+  danger: /* @__PURE__ */ o(n, { size: "20", glyph: /* @__PURE__ */ o(b, {}) })
+}, R = {
+  info: e["popover-notice__icon--info"],
+  success: e["popover-notice__icon--success"],
+  warning: e["popover-notice__icon--warning"],
+  danger: e["popover-notice__icon--danger"]
+};
+function Q({
+  title: m,
+  children: d,
+  variant: r,
+  icon: t,
+  actions: c,
+  showCheckbox: _ = !1,
+  checkboxLabel: h = "Don't show this confirmation again",
+  onClose: a,
+  closeLabel: f = "Close",
+  closeButtonProps: l,
+  className: v = "",
+  ...g
+}) {
+  const s = t ?? (r ? S[r] : null), C = !t && r ? R[r] : "", N = [
+    e["popover-notice"],
+    s == null ? e["popover-notice--no-icon"] : "",
+    v
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p("div", { ...g, className: N, children: [
+    /* @__PURE__ */ p("div", { className: e["popover-notice__content"], children: [
+      s != null && /* @__PURE__ */ o(
+        "div",
+        {
+          className: [e["popover-notice__icon"], C].filter(Boolean).join(" "),
+          "aria-hidden": !0,
+          children: /* @__PURE__ */ o(x.Provider, { value: { size: "20" }, children: s })
+        }
+      ),
+      /* @__PURE__ */ p("div", { className: e["popover-notice__body"], children: [
+        /* @__PURE__ */ o("div", { className: e["popover-notice__title-row"], children: /* @__PURE__ */ o("span", { className: e["popover-notice__title"], children: m }) }),
+        /* @__PURE__ */ o("div", { className: e["popover-notice__description"], children: d }),
+        c && c.length > 0 && /* @__PURE__ */ o("div", { className: e["popover-notice__actions"], children: c.map((i, I) => /* @__PURE__ */ o(
+          O,
+          {
+            emphasis: i.emphasis ?? "primary",
+            size: "small",
+            disabled: i.disabled,
+            loading: i.loading,
+            onClick: i.onClick,
+            children: i.label
+          },
+          I
+        )) }),
+        _ && /* @__PURE__ */ o(k, { size: "medium", children: h })
+      ] })
+    ] }),
+    a && /* @__PURE__ */ o(
+      w,
+      {
+        ...l,
+        className: j(
+          e["popover-notice__close"],
+          l == null ? void 0 : l.className
+        ),
+        "aria-label": f,
+        size: "small",
+        icon: /* @__PURE__ */ o(n, { size: "16", glyph: /* @__PURE__ */ o(u, {}) }),
+        onClick: a
+      }
+    )
+  ] });
+}
+export {
+  Q as default
+};
+//# sourceMappingURL=PopoverNotice.js.map

package/dist/components/popover-notice/PopoverNotice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverNotice.js","sources":["../../../src/components/popover-notice/PopoverNotice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport InformationOutlineIcon from '@mattermost/compass-icons/components/information-outline';\nimport CheckCircleOutlineIcon from '@mattermost/compass-icons/components/check-circle-outline';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport Button from '@/components/button/Button';\nimport Checkbox from '@/components/checkbox/Checkbox';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './PopoverNotice.module.scss';\n\nexport type PopoverNoticeVariant = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface PopoverNoticeAction {\n  /** Button label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  onClick?: () => void;\n  emphasis?: 'primary' | 'tertiary';\n  disabled?: boolean;\n  /** Shows a spinner in the button and disables it. */\n  loading?: boolean;\n}\n\nexport interface PopoverNoticeProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children'\n> {\n  /** Popover title. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Body content. */\n  children: ReactNode;\n  /**\n   * Semantic variant — sets the icon and its color automatically.\n   * Ignored if `icon` is also provided.\n   */\n  variant?: PopoverNoticeVariant;\n  /** Optional icon shown to the left of the title. Overrides the variant icon. Pass `<Icon glyph={<SomeIcon />} />` — PopoverNotice provides the correct size via context. */\n  icon?: ReactNode;\n  /** Action buttons rendered below the body. */\n  actions?: PopoverNoticeAction[];\n  /** When true, shows a \"Don't show this again\" checkbox. */\n  showCheckbox?: boolean;\n  /** Checkbox label override. Accepts translated nodes. Default: \"Don't show this confirmation again\". */\n  checkboxLabel?: ReactNode;\n  /** Callback when close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nconst VARIANT_ICONS: Record<PopoverNoticeVariant, ReactNode> = {\n  info: <Icon size=\"20\" glyph={<InformationOutlineIcon />} />,\n  success: <Icon size=\"20\" glyph={<CheckCircleOutlineIcon />} />,\n  warning: <Icon size=\"20\" glyph={<AlertCircleOutlineIcon />} />,\n  danger: <Icon size=\"20\" glyph={<AlertOutlineIcon />} />,\n};\n\nconst VARIANT_ICON_CLASS: Record<PopoverNoticeVariant, string> = {\n  info: styles['popover-notice__icon--info'],\n  success: styles['popover-notice__icon--success'],\n  warning: styles['popover-notice__icon--warning'],\n  danger: styles['popover-notice__icon--danger'],\n};\n\n/**\n * Popover Notice is a small overlay card that surfaces a transient message — a tip, a\n * confirmation, a warning — without taking over the screen. Think of it as a [Section\n * Notice](/components/section-notice) that floats: shorter, dismissable, and gone in five\n * seconds unless the user engages.\n */\nexport default function PopoverNotice({\n  title,\n  children,\n  variant,\n  icon,\n  actions,\n  showCheckbox = false,\n  checkboxLabel = \"Don't show this confirmation again\",\n  onClose,\n  closeLabel = 'Close',\n  closeButtonProps,\n  className = '',\n  ...rest\n}: PopoverNoticeProps) {\n  const resolvedIcon = icon ?? (variant ? VARIANT_ICONS[variant] : null);\n  const iconColorClass = !icon && variant ? VARIANT_ICON_CLASS[variant] : '';\n\n  const rootClass = [\n    styles['popover-notice'],\n    resolvedIcon == null ? styles['popover-notice--no-icon'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['popover-notice__content']}>\n        {resolvedIcon != null && (\n          <div\n            className={[styles['popover-notice__icon'], iconColorClass]\n              .filter(Boolean)\n              .join(' ')}\n            aria-hidden\n          >\n            <IconSlotContext.Provider value={{ size: '20' }}>\n              {resolvedIcon}\n            </IconSlotContext.Provider>\n          </div>\n        )}\n\n        <div className={styles['popover-notice__body']}>\n          <div className={styles['popover-notice__title-row']}>\n            <span className={styles['popover-notice__title']}>{title}</span>\n          </div>\n\n          <div className={styles['popover-notice__description']}>\n            {children}\n          </div>\n\n          {actions && actions.length > 0 && (\n            <div className={styles['popover-notice__actions']}>\n              {actions.map((action, i) => (\n                <Button\n                  key={i}\n                  emphasis={action.emphasis ?? 'primary'}\n                  size=\"small\"\n                  disabled={action.disabled}\n                  loading={action.loading}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              ))}\n            </div>\n          )}\n\n          {showCheckbox && <Checkbox size=\"medium\">{checkboxLabel}</Checkbox>}\n        </div>\n      </div>\n\n      {onClose && (\n        <IconButton\n          {...closeButtonProps}\n          className={mergeClassNames(\n            styles['popover-notice__close'],\n            closeButtonProps?.className,\n          )}\n          aria-label={closeLabel}\n          size=\"small\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["VARIANT_ICONS","Icon","jsx","InformationOutlineIcon","CheckCircleOutlineIcon","AlertCircleOutlineIcon","AlertOutlineIcon","VARIANT_ICON_CLASS","styles","PopoverNotice","title","children","variant","icon","actions","showCheckbox","checkboxLabel","onClose","closeLabel","closeButtonProps","className","rest","resolvedIcon","iconColorClass","rootClass","jsxs","IconSlotContext","action","i","Button","Checkbox","IconButton","mergeClassNames","CloseIcon"],"mappings":"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"}

package/dist/components/popover-notice/PopoverNotice.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverNotice.css');const o={"popover-notice":"_popover-notice_iuib4_2","popover-notice--no-icon":"_popover-notice--no-icon_iuib4_18","popover-notice__content":"_popover-notice__content_iuib4_18","popover-notice__icon":"_popover-notice__icon_iuib4_28","popover-notice__icon--info":"_popover-notice__icon--info_iuib4_34","popover-notice__icon--success":"_popover-notice__icon--success_iuib4_37","popover-notice__icon--warning":"_popover-notice__icon--warning_iuib4_40","popover-notice__icon--danger":"_popover-notice__icon--danger_iuib4_43","popover-notice__body":"_popover-notice__body_iuib4_46","popover-notice__title-row":"_popover-notice__title-row_iuib4_58","popover-notice__title":"_popover-notice__title_iuib4_58","popover-notice__description":"_popover-notice__description_iuib4_71","popover-notice__actions":"_popover-notice__actions_iuib4_80","popover-notice__close":"_popover-notice__close_iuib4_86"};exports.default=o;
+//# sourceMappingURL=PopoverNotice.module.scss.cjs.map

package/dist/components/popover-notice/PopoverNotice.module.scss.cjs.map

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

package/dist/components/popover-notice/PopoverNotice.module.scss.js

@@ -0,0 +1,20 @@
+import './PopoverNotice.css';const o = {
+  "popover-notice": "_popover-notice_iuib4_2",
+  "popover-notice--no-icon": "_popover-notice--no-icon_iuib4_18",
+  "popover-notice__content": "_popover-notice__content_iuib4_18",
+  "popover-notice__icon": "_popover-notice__icon_iuib4_28",
+  "popover-notice__icon--info": "_popover-notice__icon--info_iuib4_34",
+  "popover-notice__icon--success": "_popover-notice__icon--success_iuib4_37",
+  "popover-notice__icon--warning": "_popover-notice__icon--warning_iuib4_40",
+  "popover-notice__icon--danger": "_popover-notice__icon--danger_iuib4_43",
+  "popover-notice__body": "_popover-notice__body_iuib4_46",
+  "popover-notice__title-row": "_popover-notice__title-row_iuib4_58",
+  "popover-notice__title": "_popover-notice__title_iuib4_58",
+  "popover-notice__description": "_popover-notice__description_iuib4_71",
+  "popover-notice__actions": "_popover-notice__actions_iuib4_80",
+  "popover-notice__close": "_popover-notice__close_iuib4_86"
+};
+export {
+  o as default
+};
+//# sourceMappingURL=PopoverNotice.module.scss.js.map

package/dist/components/popover-notice/PopoverNotice.module.scss.js.map

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

package/dist/components/popover-notice/index.cjs

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

package/dist/components/popover-notice/index.cjs.map

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

package/dist/components/popover-notice/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/popover-notice/index.js

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

package/dist/components/popover-notice/index.js.map

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

package/dist/components/profile-popover/ProfilePopover.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__ee=require("@mattermost/compass-icons/components/close.js"),ee=__ee?.default??__ee,__le=require("@mattermost/compass-icons/components/email-outline.js"),le=__le?.default??__le,__se=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),se=__se?.default??__se,__oe=require("@mattermost/compass-icons/components/github-circle.js"),oe=__oe?.default??__oe,__k=require("@mattermost/compass-icons/components/mattermost.js"),k=__k?.default??__k,__ae=require("@mattermost/compass-icons/components/account-plus-outline.js"),ae=__ae?.default??__ae,__C=require("@mattermost/compass-icons/components/phone.js"),C=__C?.default??__C,__re=require("@mattermost/compass-icons/components/at.js"),re=__re?.default??__re,__I=require("@mattermost/compass-icons/components/send-outline.js"),I=__I?.default??__I,__ie=require("@mattermost/compass-icons/components/pencil-outline.js"),ie=__ie?.default??__ie,te=require("../button/Button.cjs"),p=require("../icon-button/IconButton.cjs"),ne=require("../user-avatar/UserAvatar.cjs"),ce=require("../tag/Tag.cjs"),s=require("../icon/Icon.cjs"),l=require("./ProfilePopover.module.scss.cjs"),pe=a=>e.jsxs(e.Fragment,{children:["Local time (",a,")"]}),de=a=>e.jsxs(e.Fragment,{children:["Status",a?e.jsxs(e.Fragment,{children:[" (",a,")"]}):""]});function d({icon:a,children:u,href:i}){const f=i?l.default["profile-popover__meta-link"]:l.default["profile-popover__meta-text"];return e.jsxs("div",{className:l.default["profile-popover__meta-item"],children:[e.jsx("span",{className:l.default["profile-popover__meta-icon"],"aria-hidden":!0,children:a}),i?e.jsx("a",{className:f,href:i,children:u}):e.jsx("span",{className:f,children:u})]})}function ue({user:a="others",avatarSrc:u,avatarAlt:i,name:f,username:B,title:_,email:j,phones:t,lastOnline:h,jobRole:v,localTime:r,customStatus:n,sharedOrg:x,staff:N=!1,coreCommitter:y=!1,githubHandle:m,onClose:g,onPrimaryAction:P,onMention:M,onAddToChannel:F,onCall:b,onSend:A,callButton:L,phoneIcon:S,state:$="open",onAnimationEnd:O,className:w="",closeLabel:D="Close",staffLabel:E="Staff",coreCommitterLabel:G="Core Committer",formatLocalTimeLabel:R=pe,formatStatusLabel:T=de,messageLabel:U="Message",editProfileLabel:Y="Edit profile",sendMessageLabel:J="Send message",mentionLabel:K="Mention user",addToChannelLabel:Q="Add to channel",callLabel:V="Call"}){const c=a==="you",W=[l.default["profile-popover"],$==="closing"?l.default["profile-popover--closing"]:"",w].filter(Boolean).join(" "),X=!!(t&&t.length>0),z=!!j||X||!!x||N||y||!!m,Z=z||!!r||!!n;return e.jsxs("div",{className:W,onAnimationEnd:O,children:[v&&e.jsx("div",{className:l.default["profile-popover__role-tag"],children:e.jsx(ce.default,{label:v,casing:"all-caps",size:"x-small"})}),g&&e.jsx(p.default,{className:l.default["profile-popover__close"],"aria-label":D,size:"small",padding:"compact",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(ee,{})}),onClick:g}),e.jsxs("section",{className:l.default["profile-popover__primary"],children:[e.jsx(ne.default,{src:u,alt:i,size:"120",status:!0}),h&&e.jsx("p",{className:l.default["profile-popover__last-online"],children:h}),e.jsxs("div",{className:l.default["profile-popover__names"],children:[e.jsx("p",{className:l.default["profile-popover__name"],children:f}),e.jsx("p",{className:l.default["profile-popover__handle"],children:B}),_&&e.jsx("p",{className:l.default["profile-popover__title"],children:_})]})]}),Z&&e.jsxs("section",{className:l.default["profile-popover__secondary"],children:[z&&e.jsxs("div",{className:l.default["profile-popover__titles"],children:[j&&e.jsx(d,{icon:e.jsx(s.default,{size:"16",glyph:e.jsx(le,{})}),href:`mailto:${j}`,children:j}),t==null?void 0:t.map((o,H)=>{const q=[o.label,o.sipTrunk].filter(Boolean).join(" • ");return e.jsxs("div",{className:[l.default["profile-popover__meta-item"],l.default["profile-popover__meta-item--stacked"]].join(" "),children:[e.jsx("span",{className:l.default["profile-popover__meta-icon"],"aria-hidden":!0,children:e.jsx(s.default,{size:"16",glyph:o.icon??S??e.jsx(C,{})})}),e.jsxs("div",{className:l.default["profile-popover__phone-body"],children:[q&&e.jsx("span",{className:l.default["profile-popover__phone-sub"],children:q}),o.onClick?e.jsx("button",{type:"button",className:l.default["profile-popover__meta-link"],onClick:o.onClick,children:o.number}):e.jsx("a",{className:l.default["profile-popover__meta-link"],href:o.href??`tel:${o.number}`,children:o.number})]})]},`${o.number}-${H}`)}),x&&e.jsx(d,{icon:e.jsx(s.default,{size:"16",glyph:e.jsx(se,{})}),children:x}),N&&e.jsx(d,{icon:e.jsx(s.default,{size:"16",glyph:e.jsx(k,{})}),children:E}),y&&e.jsx(d,{icon:e.jsx(s.default,{size:"16",glyph:e.jsx(k,{})}),children:G}),m&&e.jsx(d,{icon:e.jsx(s.default,{size:"16",glyph:e.jsx(oe,{})}),children:m})]}),r&&e.jsxs("div",{className:l.default["profile-popover__local-time"],children:[e.jsx("p",{className:l.default["profile-popover__section-label"],children:R(r.timezone)}),e.jsxs("div",{className:l.default["profile-popover__time"],children:[e.jsx("span",{children:r.time}),r.hourDifference&&e.jsxs("span",{children:["(",r.hourDifference,")"]})]})]}),n&&e.jsxs("div",{className:l.default["profile-popover__custom-status"],children:[e.jsx("p",{className:l.default["profile-popover__section-label"],children:T(n.expiresLabel)}),e.jsxs("div",{className:l.default["profile-popover__status-row"],children:[e.jsx("span",{className:l.default["profile-popover__status-emoji"],"aria-hidden":!0,children:n.emoji}),e.jsx("span",{children:n.text})]})]})]}),e.jsxs("footer",{className:[l.default["profile-popover__footer"],c?l.default["profile-popover__footer--you"]:l.default["profile-popover__footer--others"]].join(" "),children:[e.jsx("div",{className:[l.default["profile-popover__primary-action"],c?l.default["profile-popover__primary-action--you"]:l.default["profile-popover__primary-action--others"]].join(" "),children:e.jsx(te.default,{className:l.default["profile-popover__primary-button"],size:"small",emphasis:"primary",leadingIcon:c?e.jsx(s.default,{size:"12",glyph:e.jsx(ie,{})}):e.jsx(s.default,{size:"12",glyph:e.jsx(I,{})}),onClick:P,children:c?Y:U})}),e.jsx("div",{className:l.default["profile-popover__secondary-actions"],children:c?e.jsx(p.default,{"aria-label":J,size:"small",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(I,{})}),onClick:A}):e.jsxs(e.Fragment,{children:[e.jsx(p.default,{"aria-label":K,size:"small",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(re,{})}),onClick:M}),e.jsx(p.default,{"aria-label":Q,size:"small",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(ae,{})}),onClick:F}),L??(b?e.jsx(p.default,{"aria-label":V,size:"small",icon:e.jsx(s.default,{size:"16",glyph:e.jsx(C,{})}),onClick:b}):null)]})})]})]})}exports.default=ue;
+//# sourceMappingURL=ProfilePopover.cjs.map

package/dist/components/profile-popover/ProfilePopover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePopover.cjs","sources":["../../../src/components/profile-popover/ProfilePopover.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport EmailOutlineIcon from '@mattermost/compass-icons/components/email-outline';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport GithubCircleIcon from '@mattermost/compass-icons/components/github-circle';\nimport MattermostIcon from '@mattermost/compass-icons/components/mattermost';\nimport AccountPlusOutlineIcon from '@mattermost/compass-icons/components/account-plus-outline';\nimport PhoneIcon from '@mattermost/compass-icons/components/phone';\nimport AtIcon from '@mattermost/compass-icons/components/at';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport PencilOutlineIcon from '@mattermost/compass-icons/components/pencil-outline';\nimport Button from '@/components/button/Button';\nimport IconButton from '@/components/icon-button/IconButton';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport Tag from '@/components/tag/Tag';\nimport Icon from '@/components/icon/Icon';\nimport styles from './ProfilePopover.module.scss';\n\nexport type ProfilePopoverUser = 'others' | 'you';\n\nexport interface ProfilePopoverCustomStatus {\n  emoji: string;\n  text: ReactNode;\n  /** Label suffix like \"Until Tomorrow\". */\n  expiresLabel?: ReactNode;\n}\n\nexport interface ProfilePopoverLocalTime {\n  /** Local time, e.g. \"10:42 PM\". */\n  time: ReactNode;\n  /** Timezone abbreviation, e.g. \"EST\". */\n  timezone: ReactNode;\n  /** Hour difference relative to viewer, e.g. \"3 hrs behind\". */\n  hourDifference?: ReactNode;\n}\n\nexport interface ProfilePopoverPhone {\n  number: string;\n  /** Category label, e.g. \"NIPR\", \"NIPR Conf Bridge\", \"SIPR Extension\". */\n  label?: string;\n  /** Trunk / gateway identifier, e.g. \"DSN\", \"DISN Gateway\". */\n  sipTrunk?: string;\n  /** Per-row phone glyph; overrides the popover-level `phoneIcon` when set. */\n  icon?: ReactNode;\n  href?: string;\n  /** When provided, the number click runs this handler instead of navigating. */\n  onClick?: () => void;\n}\n\nexport interface ProfilePopoverProps {\n  /** Whose profile is shown. Default: 'others'. */\n  user?: ProfilePopoverUser;\n  /** Avatar image URL. */\n  avatarSrc: string;\n  /** Avatar alt text. */\n  avatarAlt: string;\n  /** Full name. */\n  name: ReactNode;\n  /** @handle. */\n  username: ReactNode;\n  /** Job title. */\n  title?: ReactNode;\n  /** Email address. */\n  email?: string;\n  /** Phone rows shown under the email. */\n  phones?: ProfilePopoverPhone[];\n  /** Caption above the name, e.g. \"Last online 6 hrs ago\". */\n  lastOnline?: ReactNode;\n  /** Role tag shown at the very top, e.g. \"System Admin\". (Named `jobRole` to avoid clashing with the ARIA `role` attribute in JSX.) */\n  jobRole?: ReactNode;\n  /** Local time block. */\n  localTime?: ProfilePopoverLocalTime;\n  /** Custom status. */\n  customStatus?: ProfilePopoverCustomStatus;\n  /** Shared member org name. */\n  sharedOrg?: ReactNode;\n  /** Shows a Staff row. */\n  staff?: boolean;\n  /** Shows a Core Committer row. */\n  coreCommitter?: boolean;\n  /** GitHub handle — shows the GitHub profile row. */\n  githubHandle?: string;\n  onClose?: () => void;\n  onPrimaryAction?: () => void;\n  /** Inserts an @mention for this user in the active channel message input. */\n  onMention?: () => void;\n  /** Opens the Add to Channel flow for this user. */\n  onAddToChannel?: () => void;\n  /** Used when `callButton` is not provided; starts a simple outbound call action. */\n  onCall?: () => void;\n  onSend?: () => void;\n  /** Replaces the default Call icon button in the footer when provided. */\n  callButton?: ReactNode;\n  /** Replaces the default phone glyph shown next to the phone number. */\n  phoneIcon?: ReactNode;\n  /** Animation state. Set to 'closing' to play the exit animation — listen via onAnimationEnd to unmount. */\n  state?: 'open' | 'closing';\n  /** Fires when an animation on the popover root ends (entrance or exit). */\n  onAnimationEnd?: (e: React.AnimationEvent<HTMLDivElement>) => void;\n  className?: string;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Staff row text. Default: \"Staff\". */\n  staffLabel?: ReactNode;\n  /** Core Committer row text. Default: \"Core Committer\". */\n  coreCommitterLabel?: ReactNode;\n  /** Local time heading. Default: `Local time ({timezone})`. */\n  formatLocalTimeLabel?: (timezone: ReactNode) => ReactNode;\n  /** Custom status heading. Default: \"Status\", plus ` ({expiresLabel})` when set. */\n  formatStatusLabel?: (expiresLabel: ReactNode | undefined) => ReactNode;\n  /** Primary button text for `user=\"others\"`. Default: \"Message\". */\n  messageLabel?: ReactNode;\n  /** Primary button text for `user=\"you\"`. Default: \"Edit profile\". */\n  editProfileLabel?: ReactNode;\n  /** Default: \"Send message\". */\n  sendMessageLabel?: string;\n  /** Default: \"Mention user\". */\n  mentionLabel?: string;\n  /** Default: \"Add to channel\". */\n  addToChannelLabel?: string;\n  /** Default: \"Call\". */\n  callLabel?: string;\n}\n\nconst defaultFormatLocalTimeLabel = (timezone: ReactNode) => (\n  <>Local time ({timezone})</>\n);\n\nconst defaultFormatStatusLabel = (expiresLabel: ReactNode | undefined) => (\n  <>\n    Status\n    {expiresLabel ? <> ({expiresLabel})</> : ''}\n  </>\n);\n\ninterface MetaRowProps {\n  icon: ReactNode;\n  children: ReactNode;\n  href?: string;\n}\n\nfunction MetaRow({ icon, children, href }: MetaRowProps) {\n  const textClass = href\n    ? styles['profile-popover__meta-link']\n    : styles['profile-popover__meta-text'];\n\n  return (\n    <div className={styles['profile-popover__meta-item']}>\n      <span className={styles['profile-popover__meta-icon']} aria-hidden>\n        {icon}\n      </span>\n      {href ? (\n        <a className={textClass} href={href}>\n          {children}\n        </a>\n      ) : (\n        <span className={textClass}>{children}</span>\n      )}\n    </div>\n  );\n}\n\nexport default function ProfilePopover({\n  user = 'others',\n  avatarSrc,\n  avatarAlt,\n  name,\n  username,\n  title,\n  email,\n  phones,\n  lastOnline,\n  jobRole,\n  localTime,\n  customStatus,\n  sharedOrg,\n  staff = false,\n  coreCommitter = false,\n  githubHandle,\n  onClose,\n  onPrimaryAction,\n  onMention,\n  onAddToChannel,\n  onCall,\n  onSend,\n  callButton,\n  phoneIcon,\n  state = 'open',\n  onAnimationEnd,\n  className = '',\n  closeLabel = 'Close',\n  staffLabel = 'Staff',\n  coreCommitterLabel = 'Core Committer',\n  formatLocalTimeLabel = defaultFormatLocalTimeLabel,\n  formatStatusLabel = defaultFormatStatusLabel,\n  messageLabel = 'Message',\n  editProfileLabel = 'Edit profile',\n  sendMessageLabel = 'Send message',\n  mentionLabel = 'Mention user',\n  addToChannelLabel = 'Add to channel',\n  callLabel = 'Call',\n}: ProfilePopoverProps) {\n  const isYou = user === 'you';\n\n  const rootClass = [\n    styles['profile-popover'],\n    state === 'closing' ? styles['profile-popover--closing'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const hasPhones = Boolean(phones && phones.length > 0);\n  const hasTitlesBlock =\n    Boolean(email) ||\n    hasPhones ||\n    Boolean(sharedOrg) ||\n    staff ||\n    coreCommitter ||\n    Boolean(githubHandle);\n  const hasSecondary =\n    hasTitlesBlock || Boolean(localTime) || Boolean(customStatus);\n\n  return (\n    <div className={rootClass} onAnimationEnd={onAnimationEnd}>\n      {jobRole && (\n        <div className={styles['profile-popover__role-tag']}>\n          <Tag label={jobRole} casing=\"all-caps\" size=\"x-small\" />\n        </div>\n      )}\n\n      {onClose && (\n        <IconButton\n          className={styles['profile-popover__close']}\n          aria-label={closeLabel}\n          size=\"small\"\n          padding=\"compact\"\n          icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          onClick={onClose}\n        />\n      )}\n\n      <section className={styles['profile-popover__primary']}>\n        <UserAvatar src={avatarSrc} alt={avatarAlt} size=\"120\" status />\n        {lastOnline && (\n          <p className={styles['profile-popover__last-online']}>{lastOnline}</p>\n        )}\n        <div className={styles['profile-popover__names']}>\n          <p className={styles['profile-popover__name']}>{name}</p>\n          <p className={styles['profile-popover__handle']}>{username}</p>\n          {title && <p className={styles['profile-popover__title']}>{title}</p>}\n        </div>\n      </section>\n\n      {hasSecondary && (\n        <section className={styles['profile-popover__secondary']}>\n          {hasTitlesBlock && (\n            <div className={styles['profile-popover__titles']}>\n              {email && (\n                <MetaRow\n                  icon={<Icon size=\"16\" glyph={<EmailOutlineIcon />} />}\n                  href={`mailto:${email}`}\n                >\n                  {email}\n                </MetaRow>\n              )}\n              {phones?.map((p, i) => {\n                const subParts = [p.label, p.sipTrunk].filter(Boolean);\n                const subText = subParts.join(' • ');\n                return (\n                  <div\n                    key={`${p.number}-${i}`}\n                    className={[\n                      styles['profile-popover__meta-item'],\n                      styles['profile-popover__meta-item--stacked'],\n                    ].join(' ')}\n                  >\n                    <span\n                      className={styles['profile-popover__meta-icon']}\n                      aria-hidden\n                    >\n                      <Icon\n                        size=\"16\"\n                        glyph={p.icon ?? phoneIcon ?? <PhoneIcon />}\n                      />\n                    </span>\n                    <div className={styles['profile-popover__phone-body']}>\n                      {subText && (\n                        <span className={styles['profile-popover__phone-sub']}>\n                          {subText}\n                        </span>\n                      )}\n                      {p.onClick ? (\n                        <button\n                          type=\"button\"\n                          className={styles['profile-popover__meta-link']}\n                          onClick={p.onClick}\n                        >\n                          {p.number}\n                        </button>\n                      ) : (\n                        <a\n                          className={styles['profile-popover__meta-link']}\n                          href={p.href ?? `tel:${p.number}`}\n                        >\n                          {p.number}\n                        </a>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n              {sharedOrg && (\n                <MetaRow\n                  icon={\n                    <Icon size=\"16\" glyph={<CircleMultipleOutlineIcon />} />\n                  }\n                >\n                  {sharedOrg}\n                </MetaRow>\n              )}\n              {staff && (\n                <MetaRow icon={<Icon size=\"16\" glyph={<MattermostIcon />} />}>\n                  {staffLabel}\n                </MetaRow>\n              )}\n              {coreCommitter && (\n                <MetaRow icon={<Icon size=\"16\" glyph={<MattermostIcon />} />}>\n                  {coreCommitterLabel}\n                </MetaRow>\n              )}\n              {githubHandle && (\n                <MetaRow icon={<Icon size=\"16\" glyph={<GithubCircleIcon />} />}>\n                  {githubHandle}\n                </MetaRow>\n              )}\n            </div>\n          )}\n\n          {localTime && (\n            <div className={styles['profile-popover__local-time']}>\n              <p className={styles['profile-popover__section-label']}>\n                {formatLocalTimeLabel(localTime.timezone)}\n              </p>\n              <div className={styles['profile-popover__time']}>\n                <span>{localTime.time}</span>\n                {localTime.hourDifference && (\n                  <span>({localTime.hourDifference})</span>\n                )}\n              </div>\n            </div>\n          )}\n\n          {customStatus && (\n            <div className={styles['profile-popover__custom-status']}>\n              <p className={styles['profile-popover__section-label']}>\n                {formatStatusLabel(customStatus.expiresLabel)}\n              </p>\n              <div className={styles['profile-popover__status-row']}>\n                <span\n                  className={styles['profile-popover__status-emoji']}\n                  aria-hidden\n                >\n                  {customStatus.emoji}\n                </span>\n                <span>{customStatus.text}</span>\n              </div>\n            </div>\n          )}\n        </section>\n      )}\n\n      <footer\n        className={[\n          styles['profile-popover__footer'],\n          isYou\n            ? styles['profile-popover__footer--you']\n            : styles['profile-popover__footer--others'],\n        ].join(' ')}\n      >\n        <div\n          className={[\n            styles['profile-popover__primary-action'],\n            isYou\n              ? styles['profile-popover__primary-action--you']\n              : styles['profile-popover__primary-action--others'],\n          ].join(' ')}\n        >\n          <Button\n            className={styles['profile-popover__primary-button']}\n            size=\"small\"\n            emphasis=\"primary\"\n            leadingIcon={\n              isYou ? (\n                <Icon size=\"12\" glyph={<PencilOutlineIcon />} />\n              ) : (\n                <Icon size=\"12\" glyph={<SendOutlineIcon />} />\n              )\n            }\n            onClick={onPrimaryAction}\n          >\n            {isYou ? editProfileLabel : messageLabel}\n          </Button>\n        </div>\n        <div className={styles['profile-popover__secondary-actions']}>\n          {isYou ? (\n            <IconButton\n              aria-label={sendMessageLabel}\n              size=\"small\"\n              icon={<Icon size=\"16\" glyph={<SendOutlineIcon />} />}\n              onClick={onSend}\n            />\n          ) : (\n            <>\n              <IconButton\n                aria-label={mentionLabel}\n                size=\"small\"\n                icon={<Icon size=\"16\" glyph={<AtIcon />} />}\n                onClick={onMention}\n              />\n              <IconButton\n                aria-label={addToChannelLabel}\n                size=\"small\"\n                icon={<Icon size=\"16\" glyph={<AccountPlusOutlineIcon />} />}\n                onClick={onAddToChannel}\n              />\n              {callButton ??\n                (onCall ? (\n                  <IconButton\n                    aria-label={callLabel}\n                    size=\"small\"\n                    icon={<Icon size=\"16\" glyph={<PhoneIcon />} />}\n                    onClick={onCall}\n                  />\n                ) : null)}\n            </>\n          )}\n        </div>\n      </footer>\n    </div>\n  );\n}\n"],"names":["defaultFormatLocalTimeLabel","timezone","jsxs","Fragment","defaultFormatStatusLabel","expiresLabel","MetaRow","icon","children","href","textClass","styles","jsx","ProfilePopover","user","avatarSrc","avatarAlt","name","username","title","email","phones","lastOnline","jobRole","localTime","customStatus","sharedOrg","staff","coreCommitter","githubHandle","onClose","onPrimaryAction","onMention","onAddToChannel","onCall","onSend","callButton","phoneIcon","state","onAnimationEnd","className","closeLabel","staffLabel","coreCommitterLabel","formatLocalTimeLabel","formatStatusLabel","messageLabel","editProfileLabel","sendMessageLabel","mentionLabel","addToChannelLabel","callLabel","isYou","rootClass","hasPhones","hasTitlesBlock","hasSecondary","Tag","IconButton","Icon","CloseIcon","UserAvatar","EmailOutlineIcon","p","i","subText","PhoneIcon","CircleMultipleOutlineIcon","MattermostIcon","GithubCircleIcon","Button","PencilOutlineIcon","SendOutlineIcon","AtIcon","AccountPlusOutlineIcon"],"mappings":"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"}

package/dist/components/profile-popover/ProfilePopover.css

@@ -0,0 +1 @@
+@keyframes _profile-popover-enter_1k0p0_1{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes _profile-popover-exit_1k0p0_1{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}._profile-popover_1k0p0_22{position:relative;display:flex;flex-direction:column;width:272px;padding-top:var(--spacing-m);background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-6);animation:_profile-popover-enter_1k0p0_1 var(--duration-quick) var(--ease-entrance)}._profile-popover--closing_1k0p0_34{animation:_profile-popover-exit_1k0p0_1 var(--duration-quick) var(--ease-exit) forwards}._profile-popover__role-tag_1k0p0_37{display:flex;padding:0 var(--spacing-m)}._profile-popover__close_1k0p0_41{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs)}._profile-popover__primary_1k0p0_46{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-m) var(--spacing-l) var(--spacing-xxl);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.08)}._profile-popover__last-online_1k0p0_54{margin:0;font-size:var(--font-size-50);line-height:var(--line-height-50);color:rgba(var(--center-channel-color-rgb),.64);text-align:center}._profile-popover__names_1k0p0_61{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:100%;text-align:center;color:var(--center-channel-color)}._profile-popover__name_1k0p0_61{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-400);line-height:var(--line-height-400);font-weight:var(--font-weight-semibold)}._profile-popover__handle_1k0p0_77,._profile-popover__title_1k0p0_77{margin:0;font-size:var(--font-size-100);line-height:var(--line-height-100)}._profile-popover__secondary_1k0p0_82{display:flex;flex-direction:column;gap:var(--spacing-m);padding:var(--spacing-l);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.08)}._profile-popover__titles_1k0p0_89{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._profile-popover__meta-item_1k0p0_94{display:flex;align-items:center;gap:var(--spacing-m);overflow:hidden}._profile-popover__meta-item--stacked_1k0p0_100{align-items:flex-start}._profile-popover__meta-icon_1k0p0_103{display:inline-flex;flex-shrink:0;color:var(--center-channel-color)}._profile-popover__phone-body_1k0p0_108{display:flex;flex-direction:column;gap:var(--spacing-xxxxs);flex:1 0 0;min-width:0}._profile-popover__phone-body_1k0p0_108 ._profile-popover__meta-link_1k0p0_115{flex:none;width:100%}._profile-popover__phone-sub_1k0p0_119{font-size:var(--font-size-75);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.75)}._profile-popover__meta-text_1k0p0_124,._profile-popover__meta-link_1k0p0_115{flex:1 0 0;min-width:0;font-size:var(--font-size-100);line-height:var(--line-height-100);color:var(--center-channel-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._profile-popover__meta-link_1k0p0_115{color:var(--link-color);text-decoration:none}._profile-popover__meta-link_1k0p0_115:hover{text-decoration:underline}._profile-popover_1k0p0_22 button._profile-popover__meta-link_1k0p0_115{padding:0;background:none;border:0;font:inherit;text-align:left;cursor:pointer}._profile-popover__section-label_1k0p0_149{margin:0;font-size:var(--font-size-50);line-height:var(--line-height-50);font-weight:var(--font-weight-semibold);color:var(--center-channel-color)}._profile-popover__local-time_1k0p0_156,._profile-popover__custom-status_1k0p0_156{display:flex;flex-direction:column;gap:var(--spacing-xxxs);color:var(--center-channel-color)}._profile-popover__time_1k0p0_162{display:flex;gap:var(--spacing-xxxs);font-size:var(--font-size-100);line-height:var(--line-height-100)}._profile-popover__status-row_1k0p0_168{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-100);line-height:var(--line-height-100)}._profile-popover__status-emoji_1k0p0_175{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size-16);height:var(--icon-size-16);font-size:var(--font-size-200);line-height:1}._profile-popover__footer_1k0p0_184{display:flex;padding:var(--spacing-l)}._profile-popover__footer--others_1k0p0_188{align-items:center;justify-content:space-between}._profile-popover__footer--you_1k0p0_192{align-items:flex-start;gap:var(--spacing-xs)}._profile-popover__primary-action_1k0p0_196{display:flex}._profile-popover__primary-action--others_1k0p0_199{width:132px;flex-shrink:0}._profile-popover__primary-action--you_1k0p0_203{flex:1 0 0;min-width:0}._profile-popover__primary-button_1k0p0_207{width:100%}._profile-popover__secondary-actions_1k0p0_210{display:flex;align-items:center;gap:var(--spacing-xxxxs)}

package/dist/components/profile-popover/ProfilePopover.d.ts

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+export type ProfilePopoverUser = 'others' | 'you';
+export interface ProfilePopoverCustomStatus {
+    emoji: string;
+    text: ReactNode;
+    /** Label suffix like "Until Tomorrow". */
+    expiresLabel?: ReactNode;
+}
+export interface ProfilePopoverLocalTime {
+    /** Local time, e.g. "10:42 PM". */
+    time: ReactNode;
+    /** Timezone abbreviation, e.g. "EST". */
+    timezone: ReactNode;
+    /** Hour difference relative to viewer, e.g. "3 hrs behind". */
+    hourDifference?: ReactNode;
+}
+export interface ProfilePopoverPhone {
+    number: string;
+    /** Category label, e.g. "NIPR", "NIPR Conf Bridge", "SIPR Extension". */
+    label?: string;
+    /** Trunk / gateway identifier, e.g. "DSN", "DISN Gateway". */
+    sipTrunk?: string;
+    /** Per-row phone glyph; overrides the popover-level `phoneIcon` when set. */
+    icon?: ReactNode;
+    href?: string;
+    /** When provided, the number click runs this handler instead of navigating. */
+    onClick?: () => void;
+}
+export interface ProfilePopoverProps {
+    /** Whose profile is shown. Default: 'others'. */
+    user?: ProfilePopoverUser;
+    /** Avatar image URL. */
+    avatarSrc: string;
+    /** Avatar alt text. */
+    avatarAlt: string;
+    /** Full name. */
+    name: ReactNode;
+    /** @handle. */
+    username: ReactNode;
+    /** Job title. */
+    title?: ReactNode;
+    /** Email address. */
+    email?: string;
+    /** Phone rows shown under the email. */
+    phones?: ProfilePopoverPhone[];
+    /** Caption above the name, e.g. "Last online 6 hrs ago". */
+    lastOnline?: ReactNode;
+    /** Role tag shown at the very top, e.g. "System Admin". (Named `jobRole` to avoid clashing with the ARIA `role` attribute in JSX.) */
+    jobRole?: ReactNode;
+    /** Local time block. */
+    localTime?: ProfilePopoverLocalTime;
+    /** Custom status. */
+    customStatus?: ProfilePopoverCustomStatus;
+    /** Shared member org name. */
+    sharedOrg?: ReactNode;
+    /** Shows a Staff row. */
+    staff?: boolean;
+    /** Shows a Core Committer row. */
+    coreCommitter?: boolean;
+    /** GitHub handle — shows the GitHub profile row. */
+    githubHandle?: string;
+    onClose?: () => void;
+    onPrimaryAction?: () => void;
+    /** Inserts an @mention for this user in the active channel message input. */
+    onMention?: () => void;
+    /** Opens the Add to Channel flow for this user. */
+    onAddToChannel?: () => void;
+    /** Used when `callButton` is not provided; starts a simple outbound call action. */
+    onCall?: () => void;
+    onSend?: () => void;
+    /** Replaces the default Call icon button in the footer when provided. */
+    callButton?: ReactNode;
+    /** Replaces the default phone glyph shown next to the phone number. */
+    phoneIcon?: ReactNode;
+    /** Animation state. Set to 'closing' to play the exit animation — listen via onAnimationEnd to unmount. */
+    state?: 'open' | 'closing';
+    /** Fires when an animation on the popover root ends (entrance or exit). */
+    onAnimationEnd?: (e: React.AnimationEvent<HTMLDivElement>) => void;
+    className?: string;
+    /** Accessible name for the close button. Default: "Close". */
+    closeLabel?: string;
+    /** Staff row text. Default: "Staff". */
+    staffLabel?: ReactNode;
+    /** Core Committer row text. Default: "Core Committer". */
+    coreCommitterLabel?: ReactNode;
+    /** Local time heading. Default: `Local time ({timezone})`. */
+    formatLocalTimeLabel?: (timezone: ReactNode) => ReactNode;
+    /** Custom status heading. Default: "Status", plus ` ({expiresLabel})` when set. */
+    formatStatusLabel?: (expiresLabel: ReactNode | undefined) => ReactNode;
+    /** Primary button text for `user="others"`. Default: "Message". */
+    messageLabel?: ReactNode;
+    /** Primary button text for `user="you"`. Default: "Edit profile". */
+    editProfileLabel?: ReactNode;
+    /** Default: "Send message". */
+    sendMessageLabel?: string;
+    /** Default: "Mention user". */
+    mentionLabel?: string;
+    /** Default: "Add to channel". */
+    addToChannelLabel?: string;
+    /** Default: "Call". */
+    callLabel?: string;
+}
+export default function ProfilePopover({ user, avatarSrc, avatarAlt, name, username, title, email, phones, lastOnline, jobRole, localTime, customStatus, sharedOrg, staff, coreCommitter, githubHandle, onClose, onPrimaryAction, onMention, onAddToChannel, onCall, onSend, callButton, phoneIcon, state, onAnimationEnd, className, closeLabel, staffLabel, coreCommitterLabel, formatLocalTimeLabel, formatStatusLabel, messageLabel, editProfileLabel, sendMessageLabel, mentionLabel, addToChannelLabel, callLabel, }: ProfilePopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfilePopover.d.ts.map

package/dist/components/profile-popover/ProfilePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePopover.d.ts","sourceRoot":"","sources":["../../../src/components/profile-popover/ProfilePopover.tsx"],"names":[],"mappings":"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"}