@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/components/tabs/Tabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),f=require("react"),l=require("./Tabs.module.scss.cjs");function g({tabs:r,activeKey:d,onChange:b,className:y="",controls:_}){const k=[l.default.tabs,y].filter(Boolean).join(" "),m=f.useRef([]),[p,c]=f.useState(d);f.useEffect(()=>{c(d)},[d]);const x=r.map(e=>e.key),t=r.filter(e=>!e.disabled).map(e=>e.key),j=t.includes(p)?p:t.includes(d)?d:t[0],i=e=>{var s;c(e);const o=x.indexOf(e);(s=m.current[o])==null||s.focus()},h=(e,o)=>{const s=t.length;if(s===0)return;const a=t.indexOf(o);e.key==="ArrowRight"?(e.preventDefault(),i(t[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),i(t[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),i(t[0])):e.key==="End"?(e.preventDefault(),i(t[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(o))};return n.jsxs("div",{className:k,children:[n.jsx("div",{className:l.default["tabs__tab-list"],role:"tablist",children:r.map((e,o)=>{const s=e.key===d,a=e.disabled===!0,D=[l.default.tabs__tab,s?l.default["tabs__tab--active"]:"",a?l.default["tabs__tab--disabled"]:""].filter(Boolean).join(" ");return n.jsxs("button",{ref:u=>{m.current[o]=u},id:e.id,role:"tab",type:"button",tabIndex:j===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title,className:D,onMouseDown:a?u=>u.preventDefault():void 0,onClick:()=>{a||(c(e.key),b(e.key))},onKeyDown:u=>h(u,e.key),children:[n.jsx("span",{className:l.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[l.default["tabs__count-badge"],s?l.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:l.default["tabs__unread-badge"],children:n.jsx("span",{className:l.default["tabs__unread-label"],children:"Unread"})})]},e.key)})}),_!=null&&n.jsx("div",{className:l.default.tabs__controls,children:_})]})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),q=require("../../utils/string.cjs"),t=require("./Tabs.module.scss.cjs");function E({tabs:c,activeKey:o,onChange:b,className:g="",controls:_,unreadLabel:D="Unread",appearance:p="default",...h}){const N=[t.default.tabs,p!=="default"?t.default[`tabs--appearance-${q.toKebab(p)}`]:"",g].filter(Boolean).join(" "),m=i.useRef([]),[y,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const B=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),w=l.includes(y)?y:l.includes(o)?o:l[0],r=e=>{var s;f(e);const u=B.indexOf(e);(s=m.current[u])==null||s.focus()},P=(e,u)=>{const s=l.length;if(s===0)return;const a=l.indexOf(u);e.key==="ArrowRight"?(e.preventDefault(),r(l[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),r(l[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),r(l[0])):e.key==="End"?(e.preventDefault(),r(l[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(u))};return n.jsxs("div",{...h,className:N,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,u)=>{var k,x,j;const s=e.key===o,a=e.disabled===!0,R=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(k=e.buttonProps)==null?void 0:k.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:d=>{m.current[u]=d},id:e.id??((x=e.buttonProps)==null?void 0:x.id),role:"tab",type:"button",tabIndex:w===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((j=e.buttonProps)==null?void 0:j.title),className:R,onMouseDown:a?d=>d.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:d=>P(d,e.key)},n.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[t.default["tabs__count-badge"],s?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:t.default["tabs__unread-badge"],children:n.jsx("span",{className:t.default["tabs__unread-label"],children:D})}))})}),_!=null&&n.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=E;
 //# sourceMappingURL=Tabs.cjs.map

package/dist/components/tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {'Unread'}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}

package/dist/components/tabs/Tabs.css

@@ -1 +1 @@
-._tabs_1xaix_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_1xaix_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_1xaix_7{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;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)}._tabs__tab_1xaix_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_1xaix_7:hover:not(._tabs__tab--active_1xaix_31):not(._tabs__tab--disabled_1xaix_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_1xaix_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_1xaix_31 ._tabs__tab-label_1xaix_37{color:var(--link-color)}._tabs__tab--active_1xaix_31 ._tabs__count-badge_1xaix_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_1xaix_31{cursor:not-allowed}._tabs__tab--disabled_1xaix_31 ._tabs__tab-label_1xaix_37,._tabs__tab--disabled_1xaix_31 ._tabs__count-badge_1xaix_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_1xaix_37{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_1xaix_40{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_1xaix_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_1xaix_79{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-full);background-color:var(--mention-bg)}._tabs__unread-label_1xaix_88{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._tabs__controls_1xaix_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}
+._tabs_69hbz_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_69hbz_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_69hbz_7{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;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)}._tabs__tab_69hbz_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_69hbz_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_69hbz_31 ._tabs__tab-label_69hbz_37{color:var(--link-color)}._tabs__tab--active_69hbz_31 ._tabs__count-badge_69hbz_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_69hbz_31{cursor:not-allowed}._tabs__tab--disabled_69hbz_31 ._tabs__tab-label_69hbz_37,._tabs__tab--disabled_69hbz_31 ._tabs__count-badge_69hbz_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_69hbz_37{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_69hbz_40{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_69hbz_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_69hbz_79{flex-shrink:0;width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--button-bg)}._tabs__unread-label_69hbz_86{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._tabs__controls_69hbz_97{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}._tabs--appearance-underlined_69hbz_103{align-items:stretch;box-shadow:inset 0 -1px rgba(var(--center-channel-color-rgb),.12)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab-list_69hbz_7{gap:var(--spacing-xs)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7{border-radius:0;padding:var(--spacing-s) var(--spacing-xs)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:transparent;transition:background-color var(--duration-quick) var(--ease-transition)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31){background-color:transparent}._tabs--appearance-underlined_69hbz_103 ._tabs__tab_69hbz_7:hover:not(._tabs__tab--active_69hbz_31):not(._tabs__tab--disabled_69hbz_31) ._tabs__tab-label_69hbz_37{color:var(--center-channel-color)}._tabs--appearance-underlined_69hbz_103 ._tabs__tab--active_69hbz_31{background-color:transparent}._tabs--appearance-underlined_69hbz_103 ._tabs__tab--active_69hbz_31:after{background-color:var(--link-color)}

package/dist/components/tabs/Tabs.d.ts

@@ -1,4 +1,6 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
+export type TabsAppearance = 'default' | 'underlined';
 export interface TabItem {
     /** Unique key for this tab. */
     key: string;
@@ -16,8 +18,13 @@ export interface TabItem {
     disabled?: boolean;
     /** Native tooltip text, e.g. to explain why the tab is disabled. */
     title?: string;
+    /**
+     * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab
+     * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.
+     */
+    buttonProps?: BuiltInButtonProps;
 }
-export interface TabsProps {
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Array of tab items to display. */
     tabs: TabItem[];
     /** Key of the currently active tab. */
@@ -28,11 +35,15 @@ export interface TabsProps {
     className?: string;
     /** Optional trailing controls rendered to the right of the tabs. */
     controls?: ReactNode;
+    /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */
+    appearance?: TabsAppearance;
+    /** Visually hidden text announced with a tab's unread dot. Default: "Unread". */
+    unreadLabel?: ReactNode;
 }
 /**
  * Tabs let people switch between sibling views inside the same surface — Mentions in the
  * right sidebar, sections of a settings panel, or filters on a list. The content area
  * changes; the surrounding chrome doesn't.
  */
-export default function Tabs({ tabs, activeKey, onChange, className, controls, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function Tabs({ tabs, activeKey, onChange, className, controls, unreadLabel, appearance, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,GACT,EAAE,SAAS,2CA0HX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,YAAY,CAAC;AAEtD,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iHAAiH;IACjH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,EACR,WAAsB,EACtB,UAAsB,EACtB,GAAG,IAAI,EACR,EAAE,SAAS,2CAoIX"}

package/dist/components/tabs/Tabs.js

@@ -1,79 +1,88 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { useRef as g, useState as B, useEffect as j } from "react";
-import a from "./Tabs.module.scss.js";
-function R({
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import { useRef as A, useState as R, useEffect as C, createElement as F } from "react";
+import { toKebab as I } from "../../utils/string.js";
+import t from "./Tabs.module.scss.js";
+function M({
   tabs: c,
-  activeKey: t,
+  activeKey: n,
   onChange: f,
-  className: y = "",
-  controls: b
+  className: h = "",
+  controls: b,
+  unreadLabel: N = "Unread",
+  appearance: p = "default",
+  ...x
 }) {
-  const k = [a.tabs, y].filter(Boolean).join(" "), _ = g([]), [m, u] = B(t);
-  j(() => {
-    u(t);
-  }, [t]);
-  const h = c.map((e) => e.key), l = c.filter((e) => !e.disabled).map((e) => e.key), D = l.includes(m) ? m : l.includes(t) ? t : l[0], d = (e) => {
+  const g = [
+    t.tabs,
+    p !== "default" ? t[`tabs--appearance-${I(p)}`] : "",
+    h
+  ].filter(Boolean).join(" "), m = A([]), [_, u] = R(n);
+  C(() => {
+    u(n);
+  }, [n]);
+  const B = c.map((e) => e.key), o = c.filter((e) => !e.disabled).map((e) => e.key), j = o.includes(_) ? _ : o.includes(n) ? n : o[0], d = (e) => {
     var s;
     u(e);
-    const o = h.indexOf(e);
-    (s = _.current[o]) == null || s.focus();
-  }, x = (e, o) => {
-    const s = l.length;
+    const a = B.indexOf(e);
+    (s = m.current[a]) == null || s.focus();
+  }, w = (e, a) => {
+    const s = o.length;
     if (s === 0) return;
-    const n = l.indexOf(o);
-    e.key === "ArrowRight" ? (e.preventDefault(), d(l[(n + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
-      l[n < 0 ? s - 1 : (n - 1 + s) % s]
-    )) : e.key === "Home" ? (e.preventDefault(), d(l[0])) : e.key === "End" ? (e.preventDefault(), d(l[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n >= 0 && f(o));
+    const l = o.indexOf(a);
+    e.key === "ArrowRight" ? (e.preventDefault(), d(o[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
+      o[l < 0 ? s - 1 : (l - 1 + s) % s]
+    )) : e.key === "Home" ? (e.preventDefault(), d(o[0])) : e.key === "End" ? (e.preventDefault(), d(o[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
   };
-  return /* @__PURE__ */ p("div", { className: k, children: [
-    /* @__PURE__ */ r("div", { className: a["tabs__tab-list"], role: "tablist", children: c.map((e, o) => {
-      const s = e.key === t, n = e.disabled === !0, N = [
-        a.tabs__tab,
-        s ? a["tabs__tab--active"] : "",
-        n ? a["tabs__tab--disabled"] : ""
+  return /* @__PURE__ */ P("div", { ...x, className: g, children: [
+    /* @__PURE__ */ r("div", { className: t["tabs__tab-list"], role: "tablist", children: c.map((e, a) => {
+      var y, k, D;
+      const s = e.key === n, l = e.disabled === !0, E = [
+        t.tabs__tab,
+        s ? t["tabs__tab--active"] : "",
+        l ? t["tabs__tab--disabled"] : "",
+        (y = e.buttonProps) == null ? void 0 : y.className
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ p(
+      return /* @__PURE__ */ F(
         "button",
         {
+          ...e.buttonProps,
+          key: e.key,
           ref: (i) => {
-            _.current[o] = i;
+            m.current[a] = i;
           },
-          id: e.id,
+          id: e.id ?? ((k = e.buttonProps) == null ? void 0 : k.id),
           role: "tab",
           type: "button",
-          tabIndex: D === e.key ? 0 : -1,
+          tabIndex: j === e.key ? 0 : -1,
           "aria-selected": s,
           "aria-controls": e.panelId,
-          "aria-disabled": n || void 0,
-          title: e.title,
-          className: N,
-          onMouseDown: n ? (i) => i.preventDefault() : void 0,
+          "aria-disabled": l || void 0,
+          title: e.title ?? ((D = e.buttonProps) == null ? void 0 : D.title),
+          className: E,
+          onMouseDown: l ? (i) => i.preventDefault() : void 0,
           onClick: () => {
-            n || (u(e.key), f(e.key));
+            l || (u(e.key), f(e.key));
           },
-          onKeyDown: (i) => x(i, e.key),
-          children: [
-            /* @__PURE__ */ r("span", { className: a["tabs__tab-label"], children: e.label }),
-            e.countBadge != null && /* @__PURE__ */ r(
-              "span",
-              {
-                className: [
-                  a["tabs__count-badge"],
-                  s ? a["tabs__count-badge--active"] : ""
-                ].filter(Boolean).join(" "),
-                children: e.countBadge
-              }
-            ),
-            e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: a["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: a["tabs__unread-label"], children: "Unread" }) })
-          ]
+          onKeyDown: (i) => w(i, e.key)
         },
-        e.key
+        /* @__PURE__ */ r("span", { className: t["tabs__tab-label"], children: e.label }),
+        e.countBadge != null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: [
+              t["tabs__count-badge"],
+              s ? t["tabs__count-badge--active"] : ""
+            ].filter(Boolean).join(" "),
+            children: e.countBadge
+          }
+        ),
+        e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: t["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: t["tabs__unread-label"], children: N }) })
       );
     }) }),
-    b != null && /* @__PURE__ */ r("div", { className: a.tabs__controls, children: b })
+    b != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: b })
   ] });
 }
 export {
-  R as default
+  M as default
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {'Unread'}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":";;;AA8CA,SAAwBA,EAAK;AAAA,EAC3B,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,GAAc;AACZ,QAAMC,IAAY,CAACC,EAAO,MAAMH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC7DI,IAAUC,EAAwC,EAAE,GACpD,CAACC,GAAYC,CAAa,IAAIC,EAASV,CAAS;AAEtD,EAAAW,EAAU,MAAM;AACd,IAAAF,EAAcT,CAAS;AAAA,EACzB,GAAG,CAACA,CAAS,CAAC;AAEd,QAAMY,IAAOb,EAAK,IAAI,CAACc,MAAQA,EAAI,GAAG,GAChCC,IAAcf,EAAK,OAAO,CAACc,MAAQ,CAACA,EAAI,QAAQ,EAAE,IAAI,CAACA,MAAQA,EAAI,GAAG,GACtEE,IAAWD,EAAY,SAASN,CAAU,IAC5CA,IACAM,EAAY,SAASd,CAAS,IAC5BA,IACAc,EAAY,CAAC,GAEbE,IAAY,CAACC,MAAgB;;AACjC,IAAAR,EAAcQ,CAAG;AACjB,UAAMC,IAAQN,EAAK,QAAQK,CAAG;AAC9B,KAAAE,IAAAb,EAAQ,QAAQY,CAAK,MAArB,QAAAC,EAAwB;AAAA,EAC1B,GAEMC,IAAgB,CACpBC,GACAJ,MACG;AACH,UAAMK,IAAQR,EAAY;AAC1B,QAAIQ,MAAU,EAAG;AACjB,UAAMJ,IAAQJ,EAAY,QAAQG,CAAG;AAErC,IAAII,EAAM,QAAQ,gBAChBA,EAAM,eAAA,GACNL,EAAUF,GAAaI,IAAQ,KAAKI,CAAK,CAAC,KACjCD,EAAM,QAAQ,eACvBA,EAAM,eAAA,GACNL;AAAA,MACEF,EAAYI,IAAQ,IAAII,IAAQ,KAAKJ,IAAQ,IAAII,KAASA,CAAK;AAAA,IAAA,KAExDD,EAAM,QAAQ,UACvBA,EAAM,eAAA,GACNL,EAAUF,EAAY,CAAC,CAAC,KACfO,EAAM,QAAQ,SACvBA,EAAM,eAAA,GACNL,EAAUF,EAAYQ,IAAQ,CAAC,CAAC,MACvBD,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChDA,EAAM,eAAA,GACFH,KAAS,KAAGjB,EAASgB,CAAG;AAAA,EAEhC;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWnB,GACd,UAAA;AAAA,IAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAWnB,EAAO,gBAAgB,GAAG,MAAK,WAC5C,UAAAN,EAAK,IAAI,CAACc,GAAKK,MAAU;AACxB,YAAMO,IAAWZ,EAAI,QAAQb,GACvB0B,IAAab,EAAI,aAAa,IAC9Bc,IAAW;AAAA,QACftB,EAAO;AAAA,QACPoB,IAAWpB,EAAO,mBAAmB,IAAI;AAAA,QACzCqB,IAAarB,EAAO,qBAAqB,IAAI;AAAA,MAAA,EAE5C,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,aACE,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,KAAK,CAACK,MAAS;AACb,YAAAtB,EAAQ,QAAQY,CAAK,IAAIU;AAAA,UAC3B;AAAA,UACA,IAAIf,EAAI;AAAA,UACR,MAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAUE,MAAaF,EAAI,MAAM,IAAI;AAAA,UACrC,iBAAeY;AAAA,UACf,iBAAeZ,EAAI;AAAA,UACnB,iBAAea,KAAc;AAAA,UAC7B,OAAOb,EAAI;AAAA,UACX,WAAWc;AAAA,UACX,aACED,IAAa,CAACL,MAAUA,EAAM,mBAAmB;AAAA,UAEnD,SAAS,MAAM;AACb,YAAIK,MACJjB,EAAcI,EAAI,GAAG,GACrBZ,EAASY,EAAI,GAAG;AAAA,UAClB;AAAA,UACA,WAAW,CAACQ,MAAUD,EAAcC,GAAOR,EAAI,GAAG;AAAA,UAElD,UAAA;AAAA,YAAA,gBAAAW,EAAC,UAAK,WAAWnB,EAAO,iBAAiB,GAAI,YAAI,OAAM;AAAA,YAEtDQ,EAAI,cAAc,QACjB,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACTnB,EAAO,mBAAmB;AAAA,kBAC1BoB,IAAWpB,EAAO,2BAA2B,IAAI;AAAA,gBAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,gBAEV,UAAAQ,EAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAIRA,EAAI,eAAe,CAACY,KACnB,gBAAAD,EAAC,UAAK,WAAWnB,EAAO,oBAAoB,GAC1C,4BAAC,QAAA,EAAK,WAAWA,EAAO,oBAAoB,GACzC,oBACH,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,QA3CGQ,EAAI;AAAA,MAAA;AAAA,IA+Cf,CAAC,EAAA,CACH;AAAA,IAECV,KAAY,QACX,gBAAAqB,EAAC,OAAA,EAAI,WAAWnB,EAAO,gBAAoB,UAAAF,EAAA,CAAS;AAAA,EAAA,GAExD;AAEJ;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"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"}

package/dist/components/tabs/Tabs.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_1xaix_2",a="_tabs__tab_1xaix_7",t="_tabs__controls_1xaix_99",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_1xaix_7",tabs__tab:a,"tabs__tab--active":"_tabs__tab--active_1xaix_31","tabs__tab--disabled":"_tabs__tab--disabled_1xaix_31","tabs__tab-label":"_tabs__tab-label_1xaix_37","tabs__count-badge":"_tabs__count-badge_1xaix_40","tabs__count-badge--active":"_tabs__count-badge--active_1xaix_75","tabs__unread-badge":"_tabs__unread-badge_1xaix_79","tabs__unread-label":"_tabs__unread-label_1xaix_88",tabs__controls:t};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_69hbz_2",a="_tabs__tab_69hbz_7",t="_tabs__controls_69hbz_97",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_69hbz_7",tabs__tab:a,"tabs__tab--active":"_tabs__tab--active_69hbz_31","tabs__tab--disabled":"_tabs__tab--disabled_69hbz_31","tabs__tab-label":"_tabs__tab-label_69hbz_37","tabs__count-badge":"_tabs__count-badge_69hbz_40","tabs__count-badge--active":"_tabs__count-badge--active_69hbz_75","tabs__unread-badge":"_tabs__unread-badge_69hbz_79","tabs__unread-label":"_tabs__unread-label_69hbz_86",tabs__controls:t,"tabs--appearance-underlined":"_tabs--appearance-underlined_69hbz_103"};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
 //# sourceMappingURL=Tabs.module.scss.cjs.map

package/dist/components/tabs/Tabs.module.scss.js

@@ -1,20 +1,21 @@
-import './Tabs.css';const _ = "_tabs_1xaix_2", a = "_tabs__tab_1xaix_7", t = "_tabs__controls_1xaix_99", b = {
+import './Tabs.css';const _ = "_tabs_69hbz_2", a = "_tabs__tab_69hbz_7", b = "_tabs__controls_69hbz_97", t = {
   tabs: _,
-  "tabs__tab-list": "_tabs__tab-list_1xaix_7",
+  "tabs__tab-list": "_tabs__tab-list_69hbz_7",
   tabs__tab: a,
-  "tabs__tab--active": "_tabs__tab--active_1xaix_31",
-  "tabs__tab--disabled": "_tabs__tab--disabled_1xaix_31",
-  "tabs__tab-label": "_tabs__tab-label_1xaix_37",
-  "tabs__count-badge": "_tabs__count-badge_1xaix_40",
-  "tabs__count-badge--active": "_tabs__count-badge--active_1xaix_75",
-  "tabs__unread-badge": "_tabs__unread-badge_1xaix_79",
-  "tabs__unread-label": "_tabs__unread-label_1xaix_88",
-  tabs__controls: t
+  "tabs__tab--active": "_tabs__tab--active_69hbz_31",
+  "tabs__tab--disabled": "_tabs__tab--disabled_69hbz_31",
+  "tabs__tab-label": "_tabs__tab-label_69hbz_37",
+  "tabs__count-badge": "_tabs__count-badge_69hbz_40",
+  "tabs__count-badge--active": "_tabs__count-badge--active_69hbz_75",
+  "tabs__unread-badge": "_tabs__unread-badge_69hbz_79",
+  "tabs__unread-label": "_tabs__unread-label_69hbz_86",
+  tabs__controls: b,
+  "tabs--appearance-underlined": "_tabs--appearance-underlined_69hbz_103"
 };
 export {
-  b as default,
+  t as default,
   _ as tabs,
-  t as tabs__controls,
+  b as tabs__controls,
   a as tabs__tab
 };
 //# sourceMappingURL=Tabs.module.scss.js.map

package/dist/components/tabs/Tabs.module.scss.js.map

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

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

@@ -1,3 +1,3 @@
 export { default as Tabs } from './Tabs';
-export type { TabsProps, TabItem } from './Tabs';
+export type { TabsProps, TabItem, TabsAppearance } from './Tabs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/tag/Tag.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),c=require("../icon/Icon.cjs"),e=require("./Tag.module.scss.cjs"),r={"x-small":"10",small:"12"},o={default:e.default["tag--type-default"],info:e.default["tag--type-info"],"info-dim":e.default["tag--type-info-dim"],danger:e.default["tag--type-danger"],success:e.default["tag--type-success"],warning:e.default["tag--type-warning"]};function f({label:s,type:n="default",size:t="x-small",casing:u="title-case",leadingIcon:l,className:d=""}){const i=[e.default.tag,o[n],t==="small"?e.default["tag--size-small"]:e.default["tag--size-x-small"],u==="all-caps"?e.default["tag--casing-all-caps"]:"",d].filter(Boolean).join(" ");return a.jsxs("span",{className:i,children:[l&&a.jsx("span",{className:e.default.tag__icon,"aria-hidden":!0,children:a.jsx(c.IconSlotContext.Provider,{value:{size:r[t]},children:l})}),a.jsx("span",{className:e.default.tag__label,children:s})]})}exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("../icon/Icon.cjs"),e=require("./Tag.module.scss.cjs"),o={"x-small":"10",small:"12"},f={default:e.default["tag--type-default"],info:e.default["tag--type-info"],"info-dim":e.default["tag--type-info-dim"],danger:e.default["tag--type-danger"],success:e.default["tag--type-success"],warning:e.default["tag--type-warning"]};function g({label:s,type:n="default",size:t="x-small",casing:u="title-case",leadingIcon:l,className:d="",...i}){const c=[e.default.tag,f[n],t==="small"?e.default["tag--size-small"]:e.default["tag--size-x-small"],u==="all-caps"?e.default["tag--casing-all-caps"]:"",d].filter(Boolean).join(" ");return a.jsxs("span",{...i,className:c,children:[l&&a.jsx("span",{className:e.default.tag__icon,"aria-hidden":!0,children:a.jsx(r.IconSlotContext.Provider,{value:{size:o[t]},children:l})}),a.jsx("span",{className:e.default.tag__label,children:s})]})}exports.default=g;
 //# sourceMappingURL=Tag.cjs.map

package/dist/components/tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":"kNA+BMA,EAA2C,CAC/C,UAAW,KACX,MAAO,IACT,EAEMC,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QAAUJ,EAAAA,QAAO,iBAAiB,EAAIA,EAAAA,QAAO,mBAAmB,EACzEK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAU,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMb,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n  ...rest\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span {...rest} className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","rest","classes","jsxs","jsx","IconSlotContext"],"mappings":"kNA+BMA,EAA2C,CAC/C,UAAW,KACX,MAAO,IACT,EAEMC,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAa,CACX,MAAMC,EAAU,CACdT,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QAAUJ,EAAAA,QAAO,iBAAiB,EAAIA,EAAAA,QAAO,mBAAmB,EACzEK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,OAAA,CAAM,GAAGF,EAAM,UAAWC,EACxB,SAAA,CAAAH,GACCK,EAAAA,IAAC,QAAK,UAAWX,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAW,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}

package/dist/components/tag/Tag.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export type TagType = 'default' | 'info' | 'info-dim' | 'danger' | 'success' | 'warning';
 export type TagSize = 'small' | 'x-small';
 export type TagCasing = 'title-case' | 'all-caps';
-export type TagProps = {
+export type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {
     /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     label: ReactNode;
     /** Semantic colour type. Default: Default. */
@@ -21,5 +21,5 @@ export type TagProps = {
  * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way
  * to surface a small piece of metadata without spending a sentence on it.
  */
-export default function Tag({ label, type, size, casing, leadingIcon, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export default function Tag({ label, type, size, casing, leadingIcon, className, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAuBV"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,GAAG;IACrE,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,QAAQ,2CAuBV"}

package/dist/components/tag/Tag.js

@@ -1,10 +1,10 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import { IconSlotContext as g } from "../icon/Icon.js";
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { IconSlotContext as m } from "../icon/Icon.js";
 import a from "./Tag.module.scss.js";
-const m = {
+const p = {
   "x-small": "10",
   small: "12"
-}, p = {
+}, d = {
   default: a["tag--type-default"],
   info: a["tag--type-info"],
   "info-dim": a["tag--type-info-dim"],
@@ -12,27 +12,28 @@ const m = {
   success: a["tag--type-success"],
   warning: a["tag--type-warning"]
 };
-function x({
+function y({
   label: l,
   type: n = "default",
   size: t = "x-small",
   casing: i = "title-case",
   leadingIcon: e,
-  className: o = ""
+  className: o = "",
+  ...r
 }) {
-  const r = [
+  const c = [
     a.tag,
-    p[n],
+    d[n],
     t === "small" ? a["tag--size-small"] : a["tag--size-x-small"],
     i === "all-caps" ? a["tag--casing-all-caps"] : "",
     o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ c("span", { className: r, children: [
-    e && /* @__PURE__ */ s("span", { className: a.tag__icon, "aria-hidden": !0, children: /* @__PURE__ */ s(g.Provider, { value: { size: m[t] }, children: e }) }),
+  return /* @__PURE__ */ g("span", { ...r, className: c, children: [
+    e && /* @__PURE__ */ s("span", { className: a.tag__icon, "aria-hidden": !0, children: /* @__PURE__ */ s(m.Provider, { value: { size: p[t] }, children: e }) }),
     /* @__PURE__ */ s("span", { className: a.tag__label, children: l })
   ] });
 }
 export {
-  x as default
+  y as default
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx","IconSlotContext"],"mappings":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UAAUJ,EAAO,iBAAiB,IAAIA,EAAO,mBAAmB;AAAA,IACzEK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAU,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMb,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n  ...rest\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span {...rest} className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","rest","classes","jsxs","jsx","IconSlotContext"],"mappings":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAa;AACX,QAAMC,IAAU;AAAA,IACdT,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UAAUJ,EAAO,iBAAiB,IAAIA,EAAO,mBAAmB;AAAA,IACzEK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,QAAA,EAAM,GAAGF,GAAM,WAAWC,GACxB,UAAA;AAAA,IAAAH,KACC,gBAAAK,EAAC,UAAK,WAAWX,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAW,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}

package/dist/components/thread-footer/ThreadFooter.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:s=3,avatars:d=[],badge:t="none",mentionCount:l=1,following:r=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:n=!1,className:h="",..._}){const m=[a.default["thread-footer"],r?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),i=t==="mention"?`${l} mention${l===1?"":"s"}`:t==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(t==="unread"||t==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[t==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),t==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})})]}),d.length>0&&e.jsx(v.default,{avatars:d,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${s} repl${s===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[s," ",s===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],r?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":r,"aria-label":r?"Unfollow thread":"Follow thread",children:r?"Following":"Follow"}),r&&o&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:o})]})]})]})})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),z=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/reply-outline.js"),B=__B?.default??__B,g=require("../mention-badge/MentionBadge.cjs"),M=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs"),f=t=>`${t} ${t===1?"reply":"replies"}`,$=t=>`${t} mention${t===1?"":"s"}`;function w({replyCount:t=3,avatars:l=[],badge:r="none",mentionCount:o=1,following:s=!1,lastReplyTime:d,onReply:c,onFollowToggle:h,hovered:n=!1,className:_="",formatReplyCount:m=f,formatReplyLabel:j=f,formatMentionLabel:x=$,unreadLabel:p="Unread replies",followLabel:v="Follow",followingLabel:N="Following",followAriaLabel:b="Follow thread",unfollowAriaLabel:q="Unfollow thread",...y}){const F=[a.default["thread-footer"],s?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",_].filter(Boolean).join(" "),i=r==="mention"?x(o):r==="unread"?p:void 0;return e.jsx("div",{className:F,...y,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(r==="unread"||r==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[r==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),r==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(g.default,{count:o,location:"channel",size:"medium"})})]}),l.length>0&&e.jsx(M.default,{avatars:l,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:c,"aria-label":j(t),leadingIcon:e.jsx(z.default,{size:"12",glyph:e.jsx(B,{})}),children:e.jsx("span",{className:a.default["thread-footer__btn-label"],children:m(t)})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],s?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:h,"aria-pressed":s,"aria-label":s?q:b,children:s?N:v}),s&&d&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:d})]})]})]})})}exports.default=w;
 //# sourceMappingURL=ThreadFooter.cjs.map