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

package/dist/index.js

@@ -1,16 +1,16 @@
-import { default as r } from "./components/action-button/ActionButton.js";
+import { default as r } from "./components/tile-button/TileButton.js";
 import { default as a } from "./components/admin-console-header/AdminConsoleHeader.js";
 import { default as s } from "./components/admin-panel/AdminPanel.js";
-import { default as u } from "./components/admin-console-footer/AdminConsoleFooter.js";
+import { default as l } from "./components/admin-console-footer/AdminConsoleFooter.js";
 import { default as p } from "./components/admin-panel-footer/AdminPanelFooter.js";
 import { default as x } from "./components/admin-panel-header/AdminPanelHeader.js";
 import { default as i } from "./components/attachment-card/AttachmentCard.js";
 import { default as S } from "./components/button/Button.js";
-import { default as M } from "./components/button/Button.module.scss.js";
+import { default as c } from "./components/button/Button.module.scss.js";
 import { default as T } from "./components/card-button/CardButton.js";
 import { default as g } from "./components/card-button/CardButtonGroup.js";
 import { default as C } from "./components/channel-info-msg-header/ChannelInfoMsgHeader.js";
-import { default as h } from "./components/channel-sidebar-item/ChannelSidebarItem.js";
+import { default as A } from "./components/channel-sidebar-item/ChannelSidebarItem.js";
 import { default as E } from "./components/checkbox/Checkbox.js";
 import { default as _ } from "./components/chip/Chip.js";
 import { default as N } from "./components/chip/ChipGroup.js";
@@ -26,15 +26,15 @@ import { default as X } from "./components/error-message/ErrorMessage.js";
 import { default as $ } from "./components/field-message/FieldMessage.js";
 import { default as oe } from "./components/feature-discovery-panel/FeatureDiscoveryPanel.js";
 import { default as te } from "./components/global-banner/GlobalBanner.js";
-import { default as fe, IconSlotContext as se, SVG_SIZE_MAP as de, useIconSlotContext as ue } from "./components/icon/Icon.js";
+import { default as fe, IconSlotContext as se, SVG_SIZE_MAP as de, useIconSlotContext as le } from "./components/icon/Icon.js";
 import { ICON_BUTTON_ICON_SIZES as pe, default as me } from "./components/icon-button/IconButton.js";
 import { default as ne } from "./components/illustration/Illustration.js";
 import { default as Pe } from "./components/image-preview/ImagePreview.js";
-import { default as ce } from "./components/tag/Tag.js";
+import { default as Me } from "./components/tag/Tag.js";
 import { default as Ie } from "./components/link-preview/LinkPreview.js";
 import { default as ve } from "./components/mention-badge/MentionBadge.js";
 import { default as Be } from "./components/menu-group-heading/MenuGroupHeading.js";
-import { default as Ae } from "./components/menu-item/MenuItem.js";
+import { default as he } from "./components/menu-item/MenuItem.js";
 import { default as be } from "./components/message-actions/MessageActions.js";
 import { default as Oe } from "./components/message-header/MessageHeader.js";
 import { default as Ge } from "./components/reactions-row/ReactionsRow.js";
@@ -50,15 +50,15 @@ import { default as Qe } from "./components/pagination-dots/PaginationDots.js";
 import { default as Xe } from "./components/permalink-preview/PermalinkPreview.js";
 import { default as $e } from "./components/pinned-saved-indicators/PinnedSavedIndicators.js";
 import { default as oo, PopoverMenuDivider as ro, PopoverMenuGroup as to, PopoverMenuGroupTitle as ao, PopoverMenuScroll as fo, PopoverMenuTitle as so } from "./components/popover-menu/PopoverMenu.js";
-import { default as lo } from "./components/popover-notice/PopoverNotice.js";
+import { default as uo } from "./components/popover-notice/PopoverNotice.js";
 import { default as mo } from "./components/profile-popover/ProfilePopover.js";
 import { default as no } from "./components/progress-bar/ProgressBar.js";
 import { default as Po } from "./components/radio/Radio.js";
-import { default as co } from "./components/right-sidebar-header/RightSidebarHeader.js";
+import { default as Mo } from "./components/right-sidebar-header/RightSidebarHeader.js";
 import { default as Io } from "./components/scrollbar/Scrollbar.js";
 import { default as vo } from "./components/password-input/PasswordInput.js";
 import { default as Bo } from "./components/search-input/SearchInput.js";
-import { default as Ao } from "./components/search-tip-banner/SearchTipBanner.js";
+import { default as ho } from "./components/search-tip-banner/SearchTipBanner.js";
 import { default as bo, ShortcutTagGroup as Eo } from "./components/shortcut-tag/ShortcutTag.js";
 import { default as _o } from "./components/section-notice/SectionNotice.js";
 import { default as No } from "./components/select/Select.js";
@@ -76,15 +76,14 @@ import { default as er } from "./components/tooltip/Tooltip.js";
 import { default as rr } from "./components/tour-point/TourPoint.js";
 import { default as ar } from "./components/unread-badge/UnreadBadge.js";
 import { default as sr } from "./components/user-avatar/UserAvatar.js";
-import { default as ur } from "./components/user-avatar-group/UserAvatarGroup.js";
+import { default as lr } from "./components/user-avatar-group/UserAvatarGroup.js";
 import { useControllable as pr } from "./hooks/use-controllable.js";
 import { useExitAnimation as xr } from "./hooks/use-exit-animation.js";
 import { useOutsideClose as ir } from "./hooks/use-outside-close.js";
-import { POPOVER_TRANSITION_MS as Sr, usePopoverTransition as cr } from "./hooks/use-popover-transition.js";
+import { POPOVER_TRANSITION_MS as Sr, usePopoverTransition as Mr } from "./hooks/use-popover-transition.js";
 import { toKebab as Ir } from "./utils/string.js";
 export {
-  r as ActionButton,
-  u as AdminConsoleFooter,
+  l as AdminConsoleFooter,
   a as AdminConsoleHeader,
   s as AdminPanel,
   p as AdminPanelFooter,
@@ -94,7 +93,7 @@ export {
   T as CardButton,
   g as CardButtonGroup,
   C as ChannelInfoMsgHeader,
-  h as ChannelSidebarItem,
+  A as ChannelSidebarItem,
   E as Checkbox,
   _ as Chip,
   N as ChipGroup,
@@ -120,7 +119,7 @@ export {
   Ie as LinkPreview,
   ve as MentionBadge,
   Be as MenuGroupHeading,
-  Ae as MenuItem,
+  he as MenuItem,
   be as MessageActions,
   Oe as MessageHeader,
   He as MessageSeparator,
@@ -140,17 +139,17 @@ export {
   ao as PopoverMenuGroupTitle,
   fo as PopoverMenuScroll,
   so as PopoverMenuTitle,
-  lo as PopoverNotice,
+  uo as PopoverNotice,
   mo as ProfilePopover,
   no as ProgressBar,
   Po as Radio,
   we as ReactionButton,
   Ge as ReactionsRow,
-  co as RightSidebarHeader,
+  Mo as RightSidebarHeader,
   de as SVG_SIZE_MAP,
   Io as Scrollbar,
   Bo as SearchInput,
-  Ao as SearchTipBanner,
+  ho as SearchTipBanner,
   _o as SectionNotice,
   No as Select,
   bo as ShortcutTag,
@@ -159,25 +158,26 @@ export {
   Do as StatusBadge,
   Uo as Switch,
   ko as Tabs,
-  ce as Tag,
+  Me as Tag,
   Zo as TeamAvatar,
   Lo as TextArea,
   Ko as TextInput,
   zo as ThreadFooter,
   Wo as ThreadListItem,
+  r as TileButton,
   Yo as Toast,
   er as Tooltip,
   rr as TourPoint,
   ar as UnreadBadge,
   sr as UserAvatar,
-  ur as UserAvatarGroup,
-  M as btnStyles,
+  lr as UserAvatarGroup,
+  c as btnStyles,
   ye as modalOverlayStyles,
   Ir as toKebab,
   pr as useControllable,
   xr as useExitAnimation,
-  ue as useIconSlotContext,
+  le as useIconSlotContext,
   ir as useOutsideClose,
-  cr as usePopoverTransition
+  Mr as usePopoverTransition
 };
 //# sourceMappingURL=index.js.map

package/dist/utils/slot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slot.cjs","sources":["../../src/utils/slot.ts"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport { mergeClassNames } from '@/utils/props';\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/** Assigns a value to a callback or object ref. */\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    (ref as { current: T | null }).current = value;\n  }\n}\n\n/** Composes multiple refs into a single callback ref. */\nexport function composeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\n/**\n * Reads the ref from a React element across React 18 (`element.ref`) and\n * React 19 (`element.props.ref`).\n */\nexport function getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19: ref is a regular prop. React 18: ref is on the element.\n  const propsRef = (element.props as { ref?: Ref<unknown> } | null | undefined)\n    ?.ref;\n  if (propsRef !== undefined) {\n    return propsRef;\n  }\n  return (element as ReactElement & { ref?: Ref<unknown> }).ref;\n}\n\ntype AnyProps = Record<string, unknown>;\n\nfunction isHandlerKey(key: string): boolean {\n  return (\n    key.length > 2 && key.startsWith('on') && key[2] === key[2]?.toUpperCase()\n  );\n}\n\n/**\n * Merges Slot (asChild host) props with the child's props.\n * Child props win by default; event handlers are composed (child first;\n * host skipped when the child called `preventDefault()`); `className` and\n * `style` are merged.\n */\nexport function mergeSlotProps(\n  slotProps: AnyProps,\n  childProps: AnyProps,\n): AnyProps {\n  const override: AnyProps = { ...childProps };\n\n  for (const propName of Object.keys(slotProps)) {\n    const slotValue = slotProps[propName];\n    const childValue = childProps[propName];\n\n    if (isHandlerKey(propName)) {\n      if (typeof slotValue === 'function' && typeof childValue === 'function') {\n        override[propName] = (...args: unknown[]) => {\n          const event = args[0] as { defaultPrevented?: boolean } | undefined;\n          childValue(...args);\n          if (!event?.defaultPrevented) {\n            slotValue(...args);\n          }\n        };\n      } else if (typeof slotValue === 'function') {\n        override[propName] = slotValue;\n      }\n    } else if (propName === 'style') {\n      override.style = {\n        ...(typeof slotValue === 'object' && slotValue != null\n          ? (slotValue as CSSProperties)\n          : null),\n        ...(typeof childValue === 'object' && childValue != null\n          ? (childValue as CSSProperties)\n          : null),\n      };\n    } else if (propName === 'className') {\n      override.className = mergeClassNames(\n        typeof slotValue === 'string' ? slotValue : undefined,\n        typeof childValue === 'string' ? childValue : undefined,\n      );\n    } else if (!(propName in childProps)) {\n      override[propName] = slotValue;\n    }\n  }\n\n  return override;\n}\n\nfunction hasRenderableChildren(children: ReactNode): boolean {\n  if (children == null || children === false || children === true) {\n    return false;\n  }\n  if (typeof children === 'string') {\n    return children.length > 0;\n  }\n  if (Array.isArray(children)) {\n    return children.some(hasRenderableChildren);\n  }\n  return true;\n}\n\nfunction blockNavigation(event: {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n}) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport interface RenderAsChildOptions {\n  /** Single React element to clone (e.g. `<a>` or `<Link>`). */\n  child: ReactNode;\n  /** Props owned by the host component (className, handlers, aria-*, …). */\n  props: AnyProps;\n  /** Forwarded ref from the host. */\n  ref?: Ref<unknown>;\n  /** Anatomy nodes that replace the child's children. */\n  content: ReactNode;\n  /** When true, apply disabled-link semantics. */\n  disabled?: boolean;\n  /** BEM disabled class (e.g. `button--disabled`). */\n  disabledClassName?: string;\n  /**\n   * When true, warn in development if the child already has children (they\n   * will be replaced). Use for hosts that own their full anatomy\n   * (IconButton, ActionButton). Leave false when the host wraps the child's\n   * text (Button label).\n   */\n  warnOnChildContent?: boolean;\n}\n\n/**\n * Clones a single child element with merged host props, composed refs, and\n * replacement content. Never forwards `type`. When `disabled`, sets\n * `aria-disabled`, the disabled class, and blocks click / auxclick navigation.\n */\nexport function renderAsChild({\n  child,\n  props,\n  ref,\n  content,\n  disabled = false,\n  disabledClassName,\n  warnOnChildContent = false,\n}: RenderAsChildOptions): ReactElement | null {\n  const warn = process.env.NODE_ENV !== 'production';\n\n  let onlyChild: ReactNode = null;\n  try {\n    onlyChild = Children.only(child);\n  } catch {\n    onlyChild = null;\n  }\n\n  if (!isValidElement(onlyChild)) {\n    if (warn) {\n      console.warn(\n        'asChild expects a single React element child (e.g. <a> or <Link>).',\n      );\n    }\n    return null;\n  }\n\n  const childProps = onlyChild.props as AnyProps & { children?: ReactNode };\n\n  if (\n    warn &&\n    warnOnChildContent &&\n    hasRenderableChildren(childProps.children)\n  ) {\n    console.warn(\n      'asChild replaces the child element\\'s children with component anatomy. Pass an empty element (e.g. <a href=\"…\" />).',\n    );\n  }\n\n  // Strip `type` — on <a> it means MIME type, not button type.\n  const slotProps: AnyProps = { ...props };\n  delete slotProps.type;\n\n  if (disabled) {\n    slotProps['aria-disabled'] = true;\n    if (disabledClassName) {\n      slotProps.className = mergeClassNames(\n        typeof slotProps.className === 'string'\n          ? slotProps.className\n          : undefined,\n        disabledClassName,\n      );\n    }\n  }\n\n  const merged = mergeSlotProps(slotProps, childProps);\n\n  if (disabled) {\n    merged.onClick = blockNavigation;\n    merged.onAuxClick = blockNavigation;\n  }\n\n  const childRef = getElementRef(onlyChild);\n\n  return cloneElement(onlyChild, {\n    ...merged,\n    ref: composeRefs(ref, childRef),\n    children: content,\n  } as AnyProps);\n}\n"],"names":["setRef","ref","value","composeRefs","refs","node","getElementRef","element","propsRef","_a","isHandlerKey","key","mergeSlotProps","slotProps","childProps","override","propName","slotValue","childValue","args","event","mergeClassNames","hasRenderableChildren","children","blockNavigation","renderAsChild","child","props","content","disabled","disabledClassName","warnOnChildContent","warn","onlyChild","Children","isValidElement","merged","childRef","cloneElement"],"mappings":"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"}
+{"version":3,"file":"slot.cjs","sources":["../../src/utils/slot.ts"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport { mergeClassNames } from '@/utils/props';\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/** Assigns a value to a callback or object ref. */\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    (ref as { current: T | null }).current = value;\n  }\n}\n\n/** Composes multiple refs into a single callback ref. */\nexport function composeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\n/**\n * Reads the ref from a React element across React 18 (`element.ref`) and\n * React 19 (`element.props.ref`).\n */\nexport function getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19: ref is a regular prop. React 18: ref is on the element.\n  const propsRef = (element.props as { ref?: Ref<unknown> } | null | undefined)\n    ?.ref;\n  if (propsRef !== undefined) {\n    return propsRef;\n  }\n  return (element as ReactElement & { ref?: Ref<unknown> }).ref;\n}\n\ntype AnyProps = Record<string, unknown>;\n\nfunction isHandlerKey(key: string): boolean {\n  return (\n    key.length > 2 && key.startsWith('on') && key[2] === key[2]?.toUpperCase()\n  );\n}\n\n/**\n * Merges Slot (asChild host) props with the child's props.\n * Child props win by default; event handlers are composed (child first;\n * host skipped when the child called `preventDefault()`); `className` and\n * `style` are merged.\n */\nexport function mergeSlotProps(\n  slotProps: AnyProps,\n  childProps: AnyProps,\n): AnyProps {\n  const override: AnyProps = { ...childProps };\n\n  for (const propName of Object.keys(slotProps)) {\n    const slotValue = slotProps[propName];\n    const childValue = childProps[propName];\n\n    if (isHandlerKey(propName)) {\n      if (typeof slotValue === 'function' && typeof childValue === 'function') {\n        override[propName] = (...args: unknown[]) => {\n          const event = args[0] as { defaultPrevented?: boolean } | undefined;\n          childValue(...args);\n          if (!event?.defaultPrevented) {\n            slotValue(...args);\n          }\n        };\n      } else if (typeof slotValue === 'function') {\n        override[propName] = slotValue;\n      }\n    } else if (propName === 'style') {\n      override.style = {\n        ...(typeof slotValue === 'object' && slotValue != null\n          ? (slotValue as CSSProperties)\n          : null),\n        ...(typeof childValue === 'object' && childValue != null\n          ? (childValue as CSSProperties)\n          : null),\n      };\n    } else if (propName === 'className') {\n      override.className = mergeClassNames(\n        typeof slotValue === 'string' ? slotValue : undefined,\n        typeof childValue === 'string' ? childValue : undefined,\n      );\n    } else if (!(propName in childProps)) {\n      override[propName] = slotValue;\n    }\n  }\n\n  return override;\n}\n\nfunction hasRenderableChildren(children: ReactNode): boolean {\n  if (children == null || children === false || children === true) {\n    return false;\n  }\n  if (typeof children === 'string') {\n    return children.length > 0;\n  }\n  if (Array.isArray(children)) {\n    return children.some(hasRenderableChildren);\n  }\n  return true;\n}\n\nfunction blockNavigation(event: {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n}) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport interface RenderAsChildOptions {\n  /** Single React element to clone (e.g. `<a>` or `<Link>`). */\n  child: ReactNode;\n  /** Props owned by the host component (className, handlers, aria-*, …). */\n  props: AnyProps;\n  /** Forwarded ref from the host. */\n  ref?: Ref<unknown>;\n  /** Anatomy nodes that replace the child's children. */\n  content: ReactNode;\n  /** When true, apply disabled-link semantics. */\n  disabled?: boolean;\n  /** BEM disabled class (e.g. `button--disabled`). */\n  disabledClassName?: string;\n  /**\n   * When true, warn in development if the child already has children (they\n   * will be replaced). Use for hosts that own their full anatomy\n   * (IconButton, TileButton). Leave false when the host wraps the child's\n   * text (Button label).\n   */\n  warnOnChildContent?: boolean;\n}\n\n/**\n * Clones a single child element with merged host props, composed refs, and\n * replacement content. Never forwards `type`. When `disabled`, sets\n * `aria-disabled`, the disabled class, and blocks click / auxclick navigation.\n */\nexport function renderAsChild({\n  child,\n  props,\n  ref,\n  content,\n  disabled = false,\n  disabledClassName,\n  warnOnChildContent = false,\n}: RenderAsChildOptions): ReactElement | null {\n  const warn = process.env.NODE_ENV !== 'production';\n\n  let onlyChild: ReactNode = null;\n  try {\n    onlyChild = Children.only(child);\n  } catch {\n    onlyChild = null;\n  }\n\n  if (!isValidElement(onlyChild)) {\n    if (warn) {\n      console.warn(\n        'asChild expects a single React element child (e.g. <a> or <Link>).',\n      );\n    }\n    return null;\n  }\n\n  const childProps = onlyChild.props as AnyProps & { children?: ReactNode };\n\n  if (\n    warn &&\n    warnOnChildContent &&\n    hasRenderableChildren(childProps.children)\n  ) {\n    console.warn(\n      'asChild replaces the child element\\'s children with component anatomy. Pass an empty element (e.g. <a href=\"…\" />).',\n    );\n  }\n\n  // Strip `type` — on <a> it means MIME type, not button type.\n  const slotProps: AnyProps = { ...props };\n  delete slotProps.type;\n\n  if (disabled) {\n    slotProps['aria-disabled'] = true;\n    if (disabledClassName) {\n      slotProps.className = mergeClassNames(\n        typeof slotProps.className === 'string'\n          ? slotProps.className\n          : undefined,\n        disabledClassName,\n      );\n    }\n  }\n\n  const merged = mergeSlotProps(slotProps, childProps);\n\n  if (disabled) {\n    merged.onClick = blockNavigation;\n    merged.onAuxClick = blockNavigation;\n  }\n\n  const childRef = getElementRef(onlyChild);\n\n  return cloneElement(onlyChild, {\n    ...merged,\n    ref: composeRefs(ref, childRef),\n    children: content,\n  } as AnyProps);\n}\n"],"names":["setRef","ref","value","composeRefs","refs","node","getElementRef","element","propsRef","_a","isHandlerKey","key","mergeSlotProps","slotProps","childProps","override","propName","slotValue","childValue","args","event","mergeClassNames","hasRenderableChildren","children","blockNavigation","renderAsChild","child","props","content","disabled","disabledClassName","warnOnChildContent","warn","onlyChild","Children","isValidElement","merged","childRef","cloneElement"],"mappings":"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"}

package/dist/utils/slot.d.ts

@@ -31,7 +31,7 @@ export interface RenderAsChildOptions {
     /**
      * When true, warn in development if the child already has children (they
      * will be replaced). Use for hosts that own their full anatomy
-     * (IconButton, ActionButton). Leave false when the host wraps the child's
+     * (IconButton, TileButton). Leave false when the host wraps the child's
      * text (Button label).
      */
     warnOnChildContent?: boolean;

package/dist/utils/slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot.js","sources":["../../src/utils/slot.ts"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport { mergeClassNames } from '@/utils/props';\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/** Assigns a value to a callback or object ref. */\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    (ref as { current: T | null }).current = value;\n  }\n}\n\n/** Composes multiple refs into a single callback ref. */\nexport function composeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\n/**\n * Reads the ref from a React element across React 18 (`element.ref`) and\n * React 19 (`element.props.ref`).\n */\nexport function getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19: ref is a regular prop. React 18: ref is on the element.\n  const propsRef = (element.props as { ref?: Ref<unknown> } | null | undefined)\n    ?.ref;\n  if (propsRef !== undefined) {\n    return propsRef;\n  }\n  return (element as ReactElement & { ref?: Ref<unknown> }).ref;\n}\n\ntype AnyProps = Record<string, unknown>;\n\nfunction isHandlerKey(key: string): boolean {\n  return (\n    key.length > 2 && key.startsWith('on') && key[2] === key[2]?.toUpperCase()\n  );\n}\n\n/**\n * Merges Slot (asChild host) props with the child's props.\n * Child props win by default; event handlers are composed (child first;\n * host skipped when the child called `preventDefault()`); `className` and\n * `style` are merged.\n */\nexport function mergeSlotProps(\n  slotProps: AnyProps,\n  childProps: AnyProps,\n): AnyProps {\n  const override: AnyProps = { ...childProps };\n\n  for (const propName of Object.keys(slotProps)) {\n    const slotValue = slotProps[propName];\n    const childValue = childProps[propName];\n\n    if (isHandlerKey(propName)) {\n      if (typeof slotValue === 'function' && typeof childValue === 'function') {\n        override[propName] = (...args: unknown[]) => {\n          const event = args[0] as { defaultPrevented?: boolean } | undefined;\n          childValue(...args);\n          if (!event?.defaultPrevented) {\n            slotValue(...args);\n          }\n        };\n      } else if (typeof slotValue === 'function') {\n        override[propName] = slotValue;\n      }\n    } else if (propName === 'style') {\n      override.style = {\n        ...(typeof slotValue === 'object' && slotValue != null\n          ? (slotValue as CSSProperties)\n          : null),\n        ...(typeof childValue === 'object' && childValue != null\n          ? (childValue as CSSProperties)\n          : null),\n      };\n    } else if (propName === 'className') {\n      override.className = mergeClassNames(\n        typeof slotValue === 'string' ? slotValue : undefined,\n        typeof childValue === 'string' ? childValue : undefined,\n      );\n    } else if (!(propName in childProps)) {\n      override[propName] = slotValue;\n    }\n  }\n\n  return override;\n}\n\nfunction hasRenderableChildren(children: ReactNode): boolean {\n  if (children == null || children === false || children === true) {\n    return false;\n  }\n  if (typeof children === 'string') {\n    return children.length > 0;\n  }\n  if (Array.isArray(children)) {\n    return children.some(hasRenderableChildren);\n  }\n  return true;\n}\n\nfunction blockNavigation(event: {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n}) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport interface RenderAsChildOptions {\n  /** Single React element to clone (e.g. `<a>` or `<Link>`). */\n  child: ReactNode;\n  /** Props owned by the host component (className, handlers, aria-*, …). */\n  props: AnyProps;\n  /** Forwarded ref from the host. */\n  ref?: Ref<unknown>;\n  /** Anatomy nodes that replace the child's children. */\n  content: ReactNode;\n  /** When true, apply disabled-link semantics. */\n  disabled?: boolean;\n  /** BEM disabled class (e.g. `button--disabled`). */\n  disabledClassName?: string;\n  /**\n   * When true, warn in development if the child already has children (they\n   * will be replaced). Use for hosts that own their full anatomy\n   * (IconButton, ActionButton). Leave false when the host wraps the child's\n   * text (Button label).\n   */\n  warnOnChildContent?: boolean;\n}\n\n/**\n * Clones a single child element with merged host props, composed refs, and\n * replacement content. Never forwards `type`. When `disabled`, sets\n * `aria-disabled`, the disabled class, and blocks click / auxclick navigation.\n */\nexport function renderAsChild({\n  child,\n  props,\n  ref,\n  content,\n  disabled = false,\n  disabledClassName,\n  warnOnChildContent = false,\n}: RenderAsChildOptions): ReactElement | null {\n  const warn = process.env.NODE_ENV !== 'production';\n\n  let onlyChild: ReactNode = null;\n  try {\n    onlyChild = Children.only(child);\n  } catch {\n    onlyChild = null;\n  }\n\n  if (!isValidElement(onlyChild)) {\n    if (warn) {\n      console.warn(\n        'asChild expects a single React element child (e.g. <a> or <Link>).',\n      );\n    }\n    return null;\n  }\n\n  const childProps = onlyChild.props as AnyProps & { children?: ReactNode };\n\n  if (\n    warn &&\n    warnOnChildContent &&\n    hasRenderableChildren(childProps.children)\n  ) {\n    console.warn(\n      'asChild replaces the child element\\'s children with component anatomy. Pass an empty element (e.g. <a href=\"…\" />).',\n    );\n  }\n\n  // Strip `type` — on <a> it means MIME type, not button type.\n  const slotProps: AnyProps = { ...props };\n  delete slotProps.type;\n\n  if (disabled) {\n    slotProps['aria-disabled'] = true;\n    if (disabledClassName) {\n      slotProps.className = mergeClassNames(\n        typeof slotProps.className === 'string'\n          ? slotProps.className\n          : undefined,\n        disabledClassName,\n      );\n    }\n  }\n\n  const merged = mergeSlotProps(slotProps, childProps);\n\n  if (disabled) {\n    merged.onClick = blockNavigation;\n    merged.onAuxClick = blockNavigation;\n  }\n\n  const childRef = getElementRef(onlyChild);\n\n  return cloneElement(onlyChild, {\n    ...merged,\n    ref: composeRefs(ref, childRef),\n    children: content,\n  } as AnyProps);\n}\n"],"names":["setRef","ref","value","composeRefs","refs","node","getElementRef","element","propsRef","_a","isHandlerKey","key","mergeSlotProps","slotProps","childProps","override","propName","slotValue","childValue","args","event","mergeClassNames","hasRenderableChildren","children","blockNavigation","renderAsChild","child","props","content","disabled","disabledClassName","warnOnChildContent","warn","onlyChild","Children","isValidElement","merged","childRef","cloneElement"],"mappings":"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"}
+{"version":3,"file":"slot.js","sources":["../../src/utils/slot.ts"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport { mergeClassNames } from '@/utils/props';\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/** Assigns a value to a callback or object ref. */\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    (ref as { current: T | null }).current = value;\n  }\n}\n\n/** Composes multiple refs into a single callback ref. */\nexport function composeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\n/**\n * Reads the ref from a React element across React 18 (`element.ref`) and\n * React 19 (`element.props.ref`).\n */\nexport function getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19: ref is a regular prop. React 18: ref is on the element.\n  const propsRef = (element.props as { ref?: Ref<unknown> } | null | undefined)\n    ?.ref;\n  if (propsRef !== undefined) {\n    return propsRef;\n  }\n  return (element as ReactElement & { ref?: Ref<unknown> }).ref;\n}\n\ntype AnyProps = Record<string, unknown>;\n\nfunction isHandlerKey(key: string): boolean {\n  return (\n    key.length > 2 && key.startsWith('on') && key[2] === key[2]?.toUpperCase()\n  );\n}\n\n/**\n * Merges Slot (asChild host) props with the child's props.\n * Child props win by default; event handlers are composed (child first;\n * host skipped when the child called `preventDefault()`); `className` and\n * `style` are merged.\n */\nexport function mergeSlotProps(\n  slotProps: AnyProps,\n  childProps: AnyProps,\n): AnyProps {\n  const override: AnyProps = { ...childProps };\n\n  for (const propName of Object.keys(slotProps)) {\n    const slotValue = slotProps[propName];\n    const childValue = childProps[propName];\n\n    if (isHandlerKey(propName)) {\n      if (typeof slotValue === 'function' && typeof childValue === 'function') {\n        override[propName] = (...args: unknown[]) => {\n          const event = args[0] as { defaultPrevented?: boolean } | undefined;\n          childValue(...args);\n          if (!event?.defaultPrevented) {\n            slotValue(...args);\n          }\n        };\n      } else if (typeof slotValue === 'function') {\n        override[propName] = slotValue;\n      }\n    } else if (propName === 'style') {\n      override.style = {\n        ...(typeof slotValue === 'object' && slotValue != null\n          ? (slotValue as CSSProperties)\n          : null),\n        ...(typeof childValue === 'object' && childValue != null\n          ? (childValue as CSSProperties)\n          : null),\n      };\n    } else if (propName === 'className') {\n      override.className = mergeClassNames(\n        typeof slotValue === 'string' ? slotValue : undefined,\n        typeof childValue === 'string' ? childValue : undefined,\n      );\n    } else if (!(propName in childProps)) {\n      override[propName] = slotValue;\n    }\n  }\n\n  return override;\n}\n\nfunction hasRenderableChildren(children: ReactNode): boolean {\n  if (children == null || children === false || children === true) {\n    return false;\n  }\n  if (typeof children === 'string') {\n    return children.length > 0;\n  }\n  if (Array.isArray(children)) {\n    return children.some(hasRenderableChildren);\n  }\n  return true;\n}\n\nfunction blockNavigation(event: {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n}) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport interface RenderAsChildOptions {\n  /** Single React element to clone (e.g. `<a>` or `<Link>`). */\n  child: ReactNode;\n  /** Props owned by the host component (className, handlers, aria-*, …). */\n  props: AnyProps;\n  /** Forwarded ref from the host. */\n  ref?: Ref<unknown>;\n  /** Anatomy nodes that replace the child's children. */\n  content: ReactNode;\n  /** When true, apply disabled-link semantics. */\n  disabled?: boolean;\n  /** BEM disabled class (e.g. `button--disabled`). */\n  disabledClassName?: string;\n  /**\n   * When true, warn in development if the child already has children (they\n   * will be replaced). Use for hosts that own their full anatomy\n   * (IconButton, TileButton). Leave false when the host wraps the child's\n   * text (Button label).\n   */\n  warnOnChildContent?: boolean;\n}\n\n/**\n * Clones a single child element with merged host props, composed refs, and\n * replacement content. Never forwards `type`. When `disabled`, sets\n * `aria-disabled`, the disabled class, and blocks click / auxclick navigation.\n */\nexport function renderAsChild({\n  child,\n  props,\n  ref,\n  content,\n  disabled = false,\n  disabledClassName,\n  warnOnChildContent = false,\n}: RenderAsChildOptions): ReactElement | null {\n  const warn = process.env.NODE_ENV !== 'production';\n\n  let onlyChild: ReactNode = null;\n  try {\n    onlyChild = Children.only(child);\n  } catch {\n    onlyChild = null;\n  }\n\n  if (!isValidElement(onlyChild)) {\n    if (warn) {\n      console.warn(\n        'asChild expects a single React element child (e.g. <a> or <Link>).',\n      );\n    }\n    return null;\n  }\n\n  const childProps = onlyChild.props as AnyProps & { children?: ReactNode };\n\n  if (\n    warn &&\n    warnOnChildContent &&\n    hasRenderableChildren(childProps.children)\n  ) {\n    console.warn(\n      'asChild replaces the child element\\'s children with component anatomy. Pass an empty element (e.g. <a href=\"…\" />).',\n    );\n  }\n\n  // Strip `type` — on <a> it means MIME type, not button type.\n  const slotProps: AnyProps = { ...props };\n  delete slotProps.type;\n\n  if (disabled) {\n    slotProps['aria-disabled'] = true;\n    if (disabledClassName) {\n      slotProps.className = mergeClassNames(\n        typeof slotProps.className === 'string'\n          ? slotProps.className\n          : undefined,\n        disabledClassName,\n      );\n    }\n  }\n\n  const merged = mergeSlotProps(slotProps, childProps);\n\n  if (disabled) {\n    merged.onClick = blockNavigation;\n    merged.onAuxClick = blockNavigation;\n  }\n\n  const childRef = getElementRef(onlyChild);\n\n  return cloneElement(onlyChild, {\n    ...merged,\n    ref: composeRefs(ref, childRef),\n    children: content,\n  } as AnyProps);\n}\n"],"names":["setRef","ref","value","composeRefs","refs","node","getElementRef","element","propsRef","_a","isHandlerKey","key","mergeSlotProps","slotProps","childProps","override","propName","slotValue","childValue","args","event","mergeClassNames","hasRenderableChildren","children","blockNavigation","renderAsChild","child","props","content","disabled","disabledClassName","warnOnChildContent","warn","onlyChild","Children","isValidElement","merged","childRef","cloneElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.21",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",
@@ -107,9 +107,6 @@
       "utils/string": [
         "./dist/utils/string.d.ts"
       ],
-      "components/action-button": [
-        "./dist/components/action-button/index.d.ts"
-      ],
       "components/admin-console-footer": [
         "./dist/components/admin-console-footer/index.d.ts"
       ],
@@ -314,6 +311,9 @@
       "components/thread-list-item": [
         "./dist/components/thread-list-item/index.d.ts"
       ],
+      "components/tile-button": [
+        "./dist/components/tile-button/index.d.ts"
+      ],
       "components/toast": [
         "./dist/components/toast/index.d.ts"
       ],

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),s=require("../icon/Icon.cjs"),A=require("../../utils/slot.cjs"),t=require("./ActionButton.module.scss.cjs"),i=q.forwardRef(function(a,o){if(a.asChild){const{icon:m,label:v,destructive:j=!1,className:C,disabled:x,children:N,asChild:S,..._}=a,p=[t.default["action-button"],j?t.default["action-button--destructive"]:"",C??""].filter(Boolean).join(" "),B=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:m})}),e.jsx("span",{className:t.default["action-button__label"],children:v})]});return A.renderAsChild({child:N,props:{..._,className:p},ref:o,content:B,disabled:!!x,disabledClassName:t.default["action-button--disabled"],warnOnChildContent:!0})}const{icon:l,label:c,active:n,destructive:d=!1,className:r,disabled:u,type:b="button",asChild:P,...f}=a,h=[t.default["action-button"],n?t.default["action-button--active"]:"",d?t.default["action-button--destructive"]:"",r??""].filter(Boolean).join(" ");return e.jsxs("button",{ref:o,className:h,type:b,disabled:u,"aria-pressed":n===void 0?void 0:n,...f,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:l})}),e.jsx("span",{className:t.default["action-button__label"],children:c})]})});i.displayName="ActionButton";exports.default=i;
-//# sourceMappingURL=ActionButton.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ActionButton.cjs","sources":["../../../src/components/action-button/ActionButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { renderAsChild } from '@/utils/slot';\nimport styles from './ActionButton.module.scss';\n\ninterface ActionButtonOwnProps {\n  /** Pass `<Icon glyph={<SomeIcon />} />` — ActionButton provides the correct size (20) via context. */\n  icon: ReactNode;\n  /** Visible label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  destructive?: boolean;\n  className?: string;\n  /**\n   * When true, disables the control. On a native `<button>`, sets the `disabled`\n   * attribute. With `asChild`, sets `aria-disabled`, applies disabled styles, and\n   * blocks click / middle-click navigation (the link stays focusable).\n   */\n  disabled?: boolean;\n}\n\nexport interface ActionButtonProps\n  extends ActionButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges ActionButton props onto the single child element instead of\n   * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.\n   */\n  asChild?: false;\n  /**\n   * When set, this is a toggle; maps to `aria-pressed`. Only applies to the native\n   * `<button>`; not available with `asChild`.\n   */\n  active?: boolean;\n}\n\nexport interface ActionButtonAsChildProps\n  extends\n    ActionButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges ActionButton props onto the single child element instead of rendering a\n   * `<button>`. The child's own props (`href`, `to`, `target`, …) stay on the\n   * child. Do not pass `type` or `active` — they are not available on links.\n   * Pass an empty child; ActionButton supplies the icon and label anatomy.\n   */\n  asChild: true;\n  /** Single empty element to render as the ActionButton (e.g. `<a href=\"…\" />`). */\n  children: ReactElement;\n}\n\ntype ActionButtonComponent = {\n  (\n    props: ActionButtonAsChildProps & RefAttributes<HTMLElement>,\n  ): ReactElement | null;\n  (\n    props: ActionButtonProps & RefAttributes<HTMLButtonElement>,\n  ): ReactElement | null;\n  displayName?: string;\n};\n\n/**\n * Action Buttons surface a small set of high-frequency actions in a fixed context — a\n * profile popover, a channel info panel, a card. They sit close to the content they act on\n * and read as a row of equal-weight choices.\n *\n * Pass `asChild` with a single empty `<a>` or router `Link` child to render a navigational\n * action with Action Button styling (no nested `<button>`).\n */\nconst ActionButton = forwardRef(function ActionButton(\n  props: ActionButtonProps | ActionButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      icon,\n      label,\n      destructive = false,\n      className,\n      disabled,\n      children,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = [\n      styles['action-button'],\n      destructive ? styles['action-button--destructive'] : '',\n      className ?? '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const anatomy = (\n      <>\n        <span className={styles['action-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '20' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['action-button__label']}>{label}</span>\n      </>\n    );\n\n    return renderAsChild({\n      child: children,\n      props: {\n        ...rest,\n        className: rootClass,\n      },\n      ref,\n      content: anatomy,\n      disabled: Boolean(disabled),\n      disabledClassName: styles['action-button--disabled'],\n      warnOnChildContent: true,\n    });\n  }\n\n  const {\n    icon,\n    label,\n    active,\n    destructive = false,\n    className,\n    disabled,\n    type = 'button',\n    asChild,\n    ...htmlProps\n  } = props;\n  void asChild;\n\n  const rootClass = [\n    styles['action-button'],\n    active ? styles['action-button--active'] : '',\n    destructive ? styles['action-button--destructive'] : '',\n    className ?? '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      aria-pressed={active === undefined ? undefined : active}\n      {...htmlProps}\n    >\n      <span className={styles['action-button__icon']} aria-hidden>\n        <IconSlotContext.Provider value={{ size: '20' }}>\n          {icon}\n        </IconSlotContext.Provider>\n      </span>\n      <span className={styles['action-button__label']}>{label}</span>\n    </button>\n  );\n}) as ActionButtonComponent;\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","props","ref","icon","label","destructive","className","disabled","children","asChild","rest","rootClass","styles","anatomy","jsxs","Fragment","jsx","IconSlotContext","renderAsChild","active","type","htmlProps"],"mappings":"gRA2EMA,EAAeC,EAAAA,WAAW,SAC9BC,EACAC,EACA,CACA,GAAID,EAAM,QAAS,CACjB,KAAM,CACJ,KAAAE,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACDT,EAGEU,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBP,EAAcO,EAAAA,QAAO,4BAA4B,EAAI,GACrDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAAC,QAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,MACtC,SAAAd,EACH,EACF,QACC,OAAA,CAAK,UAAWS,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAAA,CAAM,CAAA,EAC1D,EAGF,OAAOc,gBAAc,CACnB,MAAOV,EACP,MAAO,CACL,GAAGE,EACH,UAAWC,CAAA,EAEb,IAAAT,EACA,QAASW,EACT,SAAU,EAAQN,EAClB,kBAAmBK,EAAAA,QAAO,yBAAyB,EACnD,mBAAoB,EAAA,CACrB,CACH,CAEA,KAAM,CACJ,KAAAT,EACA,MAAAC,EACA,OAAAe,EACA,YAAAd,EAAc,GACd,UAAAC,EACA,SAAAC,EACA,KAAAa,EAAO,SACP,QAAAX,EACA,GAAGY,CAAA,EACDpB,EAGEU,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBO,EAASP,EAAAA,QAAO,uBAAuB,EAAI,GAC3CP,EAAcO,EAAAA,QAAO,4BAA4B,EAAI,GACrDN,GAAa,EAAA,EAEZ,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEQ,EAAAA,KAAC,SAAA,CACC,IAAAZ,EACA,UAAWS,EACX,KAAAS,EACA,SAAAb,EACA,eAAcY,IAAW,OAAY,OAAYA,EAChD,GAAGE,EAEJ,SAAA,CAAAL,MAAC,QAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAI,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,QACC,OAAA,CAAK,UAAWL,EAAAA,QAAO,sBAAsB,EAAI,SAAAR,CAAA,CAAM,CAAA,CAAA,CAAA,CAG9D,CAAC,EAEDL,EAAa,YAAc"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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