@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: React.ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon (e.g. <Icon glyph={<SomeIcon />} size=\"16\" />). Icon size should match button size. */\n  leadingIcon?: ReactNode;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '16',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nexport default function Button({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  children,\n  leadingIcon,\n  size = 'medium',\n  trailingIcon,\n  disabled,\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      {leadingIcon != null ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {typeof leadingIcon === 'boolean' ? (\n            <Icon size={iconSize} />\n          ) : (\n            leadingIcon\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {trailingIcon != null ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {typeof trailingIcon === 'boolean' ? (\n            <Icon size={iconSize} />\n          ) : (\n            trailingIcon\n          )}\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","jsx","Icon"],"mappings":"yPAmCMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOA,SAAwBC,EAAO,CAC7B,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,SACP,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAWb,EAAcQ,CAAI,EAC7BM,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQX,CAAQ,CAAC,EAAE,EAC9DY,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EAClDU,EACJhB,IAAe,WAAaa,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,EAAmBf,EAAcW,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,EACAhB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,cACG,SAAA,CAAO,UAAWiB,EAAW,KAAAT,EAAY,SAAAD,EAAqB,GAAGE,EAC/D,SAAA,CAAAL,GAAe,KACdc,EAAAA,IAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAA,OAAOR,GAAgB,UACtBc,EAAAA,IAACC,UAAA,CAAK,KAAMT,EAAU,EAEtBN,EAEJ,EACE,WACH,OAAA,CAAK,UAAWQ,EAAAA,QAAO,cAAmB,SAAAT,EAAS,EACnDG,GAAgB,KACfY,EAAAA,IAAC,QAAK,UAAWN,UAAO,mBAAmB,EAAG,cAAW,GACtD,SAAA,OAAON,GAAiB,UACvBY,EAAAA,IAACC,EAAAA,QAAA,CAAK,KAAMT,CAAA,CAAU,EAEtBJ,EAEJ,EACE,IAAA,EACN,CAEJ"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.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 type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'dim'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\n/** True when the slot should render (icons, badges, or other JSX). */\nfunction hasSlotContent(node: ReactNode): boolean {\n  if (node == null || typeof node === 'boolean') {\n    return false;\n  }\n  if (typeof node === 'string') {\n    return node.length > 0;\n  }\n  return true;\n}\n\ninterface ButtonOwnProps {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * When true, uses denser padding. On `small`, height drops from 32px to 28px\n   * (`6px 10px`, 6px gap). On `x-small`, height stays 24px with a 4px gap;\n   * only horizontal padding tightens. For dense toolbars. Default: false.\n   */\n  compact?: boolean;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /**\n   * Leading slot — typically `<Icon glyph={<YourIcon />} />`, or any other\n   * React node (badge, custom markup). Button provides Icon size via context\n   * when an Icon is used; no `size` prop needed on the Icon.\n   */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /**\n   * Trailing slot — typically `<Icon glyph={<YourIcon />} />`, or any other\n   * React node (badge, custom markup). Button provides Icon size via context\n   * when an Icon is used; no `size` prop needed on the Icon.\n   */\n  trailingIcon?: ReactNode;\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 ButtonProps\n  extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges Button 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  /** Button label. */\n  children: ReactNode;\n}\n\nexport interface ButtonAsChildProps\n  extends\n    ButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges Button 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` — it is not forwarded.\n   */\n  asChild: true;\n  /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */\n  children: ReactElement;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\ntype ButtonComponent = {\n  (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  appearance = 'default',\n  className = '',\n  compact = false,\n  destructive = false,\n  emphasis = 'primary',\n  size = 'medium',\n}: {\n  appearance?: ButtonAppearance;\n  className?: string;\n  compact?: boolean;\n  destructive?: boolean;\n  emphasis?: ButtonEmphasis;\n  size?: ButtonSize;\n}): string {\n  return [\n    styles.button,\n    styles[`button--emphasis-${toKebab(emphasis)}`],\n    styles[`button--size-${toKebab(size)}`],\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '',\n    compact ? styles['button--compact'] : '',\n    destructive ? styles['button--destructive'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n *\n * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA\n * with Button styling and anatomy (no nested `<button>`).\n */\nconst Button = forwardRef(function Button(\n  props: ButtonProps | ButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      appearance = 'default',\n      className = '',\n      compact = false,\n      destructive = false,\n      emphasis = 'primary',\n      children,\n      leadingIcon,\n      loading = false,\n      size = 'medium',\n      trailingIcon,\n      disabled,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      appearance,\n      className,\n      compact,\n      destructive,\n      emphasis,\n      size,\n    });\n    const iconSize = SIZE_ICON_MAP[size];\n    const showLeadingSlot = loading || hasSlotContent(leadingIcon);\n    const isDisabled = Boolean(disabled || loading);\n    const child = children as ReactElement<{ children?: ReactNode }>;\n\n    const leading = showLeadingSlot ? (\n      <span\n        className={styles['button__icon-slot']}\n        aria-hidden={loading || undefined}\n      >\n        {loading ? (\n          <Spinner\n            size={iconSize as SpinnerSize}\n            inverted={appearance === 'inverted'}\n          />\n        ) : (\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        )}\n      </span>\n    ) : null;\n\n    const trailing =\n      !loading && hasSlotContent(trailingIcon) ? (\n        <span className={styles['button__icon-slot']}>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null;\n\n    return renderAsChild({\n      child,\n      props: {\n        ...rest,\n        className: rootClass,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: (\n        <>\n          {leading}\n          <span className={styles['button__label']}>\n            {child.props.children}\n          </span>\n          {trailing}\n        </>\n      ),\n      disabled: isDisabled,\n      disabledClassName: styles['button--disabled'],\n    });\n  }\n\n  const {\n    appearance = 'default',\n    className = '',\n    compact = false,\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    appearance,\n    className,\n    compact,\n    destructive,\n    emphasis,\n    size,\n  });\n  const iconSize = SIZE_ICON_MAP[size];\n  const showLeadingSlot = loading || hasSlotContent(leadingIcon);\n  const isDisabled = Boolean(disabled || loading);\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span\n          className={styles['button__icon-slot']}\n          aria-hidden={loading || undefined}\n        >\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {!loading && hasSlotContent(trailingIcon) ? (\n        <span className={styles['button__icon-slot']}>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["hasSlotContent","node","SIZE_ICON_MAP","buildRootClass","appearance","className","compact","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"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"}

package/dist/components/button/Button.css

@@ -0,0 +1 @@
+._button_1pij1_13{--button-fg: inherit;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--button-fg);outline:none}._button_1pij1_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1pij1_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._button_1pij1_13:focus-visible{animation:none}}@keyframes _focus-ring-in_1pij1_1{0%{outline-color:transparent;outline-offset:0}}._button_1pij1_13:any-link,._button_1pij1_13:hover,._button_1pij1_13:focus,._button_1pij1_13:active,._button_1pij1_13:visited{color:var(--button-fg);text-decoration:none}._button_1pij1_13:hover,._button_1pij1_13:active{transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._button_1pij1_13:is(:disabled,._button--disabled_1pij1_52){cursor:not-allowed}._button__label_1pij1_55{line-height:1;color:var(--button-fg)}._button__icon-slot_1pij1_59{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--button-fg)}._button--size-x-small_1pij1_66{padding:var(--spacing-xxxs) var(--spacing-xs);gap:var(--spacing-xxxs)}._button--size-x-small_1pij1_66 ._button__label_1pij1_55{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-x-small_1pij1_66._button--compact_1pij1_74{padding-inline:var(--spacing-xxs)}._button--size-small_1pij1_77{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_1pij1_77 ._button__label_1pij1_55{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_1pij1_77._button--compact_1pij1_74{padding:var(--spacing-xxs) var(--spacing-s);gap:var(--spacing-xxs)}._button--size-medium_1pij1_88{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_1pij1_88 ._button__label_1pij1_55{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-medium_1pij1_88._button--compact_1pij1_74{padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xxs)}._button--size-large_1pij1_99{padding:var(--spacing-m) var(--spacing-xxl);gap:var(--spacing-m)}._button--size-large_1pij1_99 ._button__label_1pij1_55{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--size-large_1pij1_99._button--compact_1pij1_74{padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s)}._button--emphasis-primary_1pij1_111{--button-fg: var(--button-color);background-color:var(--button-bg)}._button--emphasis-primary_1pij1_111:hover:not(:disabled,._button--disabled_1pij1_52){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_1pij1_111:active:not(:disabled,._button--disabled_1pij1_52){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_1pij1_111:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-secondary_1pij1_125{--focus-ring-color: var(--link-color);--button-fg: var(--link-color);background-color:transparent;box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_1pij1_125:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_1pij1_125:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_1pij1_125:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_1pij1_141{--button-fg: var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-tertiary_1pij1_141:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_1pij1_141:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_1pij1_141:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-quaternary_1pij1_155{--button-fg: var(--link-color);background-color:transparent}._button--emphasis-quaternary_1pij1_155:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_1pij1_155:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_1pij1_155:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--emphasis-dim_1pij1_168{--button-fg: rgba(var(--center-channel-color-rgb), .72);background-color:transparent}._button--emphasis-dim_1pij1_168:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .88);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-dim_1pij1_168:active:not(:disabled,._button--disabled_1pij1_52){--button-fg: var(--button-bg);background-color:rgba(var(--button-bg-rgb),.08)}._button--emphasis-dim_1pij1_168:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--emphasis-link_1pij1_183{--focus-ring-color: var(--link-color);--button-fg: var(--link-color);padding:0;background-color:transparent;align-self:flex-start;height:fit-content}._button--emphasis-link_1pij1_183._button--compact_1pij1_74{padding:0}._button--emphasis-link_1pij1_183:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52) ._button__label_1pij1_55{text-decoration:underline}._button--emphasis-link_1pij1_183:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_1pij1_200{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_1pij1_200._button--emphasis-primary_1pij1_111{--button-fg: var(--button-color);background-color:var(--error-text, var(--color-danger))}._button--destructive_1pij1_200._button--emphasis-primary_1pij1_111:hover:not(:disabled,._button--disabled_1pij1_52){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_1pij1_200._button--emphasis-primary_1pij1_111:active:not(:disabled,._button--disabled_1pij1_52){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_1pij1_200._button--emphasis-primary_1pij1_111:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_1pij1_200._button--emphasis-secondary_1pij1_125{--button-fg: var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_1pij1_200._button--emphasis-secondary_1pij1_125:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1pij1_200._button--emphasis-secondary_1pij1_125:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1pij1_200._button--emphasis-secondary_1pij1_125:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1pij1_200._button--emphasis-tertiary_1pij1_141{--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1pij1_200._button--emphasis-tertiary_1pij1_141:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_1pij1_200._button--emphasis-tertiary_1pij1_141:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1pij1_200._button--emphasis-tertiary_1pij1_141:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_1pij1_200._button--emphasis-quaternary_1pij1_155{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_1pij1_200._button--emphasis-quaternary_1pij1_155:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1pij1_200._button--emphasis-quaternary_1pij1_155:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1pij1_200._button--emphasis-quaternary_1pij1_155:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_1pij1_200._button--emphasis-dim_1pij1_168{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_1pij1_200._button--emphasis-dim_1pij1_168:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52){--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1pij1_200._button--emphasis-dim_1pij1_168:active:not(:disabled,._button--disabled_1pij1_52){--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_1pij1_200._button--emphasis-dim_1pij1_168:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_1pij1_200._button--emphasis-link_1pij1_183{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_1pij1_200._button--emphasis-link_1pij1_183:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--appearance-inverted_1pij1_277._button--emphasis-primary_1pij1_111{--button-fg: var(--sidebar-bg);background-color:var(--sidebar-text)}._button--appearance-inverted_1pij1_277._button--emphasis-primary_1pij1_111:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_1pij1_277._button--emphasis-primary_1pij1_111:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_1pij1_277._button--emphasis-primary_1pij1_111:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_1pij1_277._button--emphasis-secondary_1pij1_125{--button-fg: var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_1pij1_277._button--emphasis-secondary_1pij1_125:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1pij1_277._button--emphasis-secondary_1pij1_125:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_1pij1_277._button--emphasis-secondary_1pij1_125:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--center-channel-color-rgb), .32);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_1pij1_277._button--emphasis-tertiary_1pij1_141{--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_1pij1_277._button--emphasis-tertiary_1pij1_141:hover:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1pij1_277._button--emphasis-tertiary_1pij1_141:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_1pij1_277._button--emphasis-tertiary_1pij1_141:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_1pij1_277._button--emphasis-quaternary_1pij1_155{--button-fg: var(--sidebar-text)}._button--appearance-inverted_1pij1_277._button--emphasis-quaternary_1pij1_155:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1pij1_277._button--emphasis-quaternary_1pij1_155:active:not(:disabled,._button--disabled_1pij1_52){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_1pij1_277._button--emphasis-quaternary_1pij1_155:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--sidebar-text-rgb), .32)}._button--appearance-inverted_1pij1_277._button--emphasis-dim_1pij1_168{--button-fg: rgba(var(--sidebar-text-rgb), .72)}._button--appearance-inverted_1pij1_277._button--emphasis-dim_1pij1_168:is(:hover,:focus-visible):not(:disabled,._button--disabled_1pij1_52){--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_1pij1_277._button--emphasis-dim_1pij1_168:active:not(:disabled,._button--disabled_1pij1_52){--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1pij1_277._button--emphasis-dim_1pij1_168:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--sidebar-text-rgb), .32)}._button--appearance-inverted_1pij1_277._button--emphasis-link_1pij1_183{--button-fg: var(--sidebar-text)}._button--appearance-inverted_1pij1_277._button--emphasis-link_1pij1_183:is(:disabled,._button--disabled_1pij1_52){--button-fg: rgba(var(--sidebar-text-rgb), .32)}

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

@@ -1,29 +1,77 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'dim' | 'link';
 export type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';
 export type ButtonAppearance = 'default' | 'inverted';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonOwnProps {
     /** default | inverted (for use on dark backgrounds). Maps to Figma "Style". */
     appearance?: ButtonAppearance;
     /** Optional CSS class name. */
     className?: string;
-    /** Button label. */
-    children: React.ReactNode;
+    /**
+     * When true, uses denser padding. On `small`, height drops from 32px to 28px
+     * (`6px 10px`, 6px gap). On `x-small`, height stays 24px with a 4px gap;
+     * only horizontal padding tightens. For dense toolbars. Default: false.
+     */
+    compact?: boolean;
     /** When true, uses destructive (danger) styling. */
     destructive?: boolean;
     /** Visual emphasis. Default: primary. */
     emphasis?: ButtonEmphasis;
-    /** Leading icon (e.g. <Icon glyph={<SomeIcon />} size="16" />). Icon size should match button size. */
+    /**
+     * Leading slot — typically `<Icon glyph={<YourIcon />} />`, or any other
+     * React node (badge, custom markup). Button provides Icon size via context
+     * when an Icon is used; no `size` prop needed on the Icon.
+     */
     leadingIcon?: ReactNode;
+    /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */
+    loading?: boolean;
     /** Size variant. Default: medium. */
     size?: ButtonSize;
-    /** Trailing icon. */
+    /**
+     * Trailing slot — typically `<Icon glyph={<YourIcon />} />`, or any other
+     * React node (badge, custom markup). Button provides Icon size via context
+     * when an Icon is used; no `size` prop needed on the Icon.
+     */
     trailingIcon?: ReactNode;
+    /**
+     * 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 ButtonProps extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * When true, merges Button props onto the single child element instead of
+     * rendering a `<button>`. Use with `<a>` or a router `Link`. Default: false.
+     */
+    asChild?: false;
+    /** Button label. */
+    children: ReactNode;
+}
+export interface ButtonAsChildProps extends ButtonOwnProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {
+    /**
+     * Merges Button 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` — it is not forwarded.
+     */
+    asChild: true;
+    /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */
+    children: ReactElement;
 }
+type ButtonComponent = {
+    (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;
+    (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+    displayName?: string;
+};
 /**
  * Buttons let people take actions or make decisions with a single tap or click — saving a
  * form, sending a message, confirming a dialog. Compass ships several button variants, each
  * with the same anatomy and rhythm so they feel like members of the same family.
+ *
+ * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA
+ * with Button styling and anatomy (no nested `<button>`).
  */
-export default function Button({ appearance, className, destructive, emphasis, children, leadingIcon, size, trailingIcon, disabled, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const Button: ButtonComponent;
+export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7D,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,uGAAuG;IACvG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,UAAsB,EACtB,SAAc,EACd,WAAmB,EACnB,QAAoB,EACpB,QAAQ,EACR,WAAW,EACX,IAAe,EACf,YAAY,EACZ,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,WAAW,2CA0Cb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAatD,UAAU,cAAc;IACtB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oHAAoH;IACpH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SAAQ,cAAc,EAAE,oBAAoB,CAAC,iBAAiB,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SACE,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD;;;;OAIG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,sGAAsG;IACtG,QAAQ,EAAE,YAAY,CAAC;CACxB;AASD,KAAK,eAAe,GAAG;IACrB,CAAC,KAAK,EAAE,kBAAkB,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IAC9E,CAAC,KAAK,EAAE,WAAW,GAAG,aAAa,CAAC,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA8BF;;;;;;;GAOG;AACH,QAAA,MAAM,MAAM,EAqJN,eAAe,CAAC;AAItB,eAAe,MAAM,CAAC"}

package/dist/components/button/Button.js

@@ -1,41 +1,145 @@
-import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import l from "../icon/Icon.js";
-import { toKebab as r } from "../../utils/string.js";
-import t from "./Button.module.scss.js";
-const y = {
+import { jsx as a, jsxs as C, Fragment as Q } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { IconSlotContext as r } from "../icon/Icon.js";
+import y from "../spinner/Spinner.js";
+import { renderAsChild as U } from "../../utils/slot.js";
+import { toKebab as I } from "../../utils/string.js";
+import e from "./Button.module.scss.js";
+function c(t) {
+  return t == null || typeof t == "boolean" ? !1 : typeof t == "string" ? t.length > 0 : !0;
+}
+const S = {
   "x-small": "12",
-  small: "16",
+  small: "12",
   medium: "16",
   large: "20"
 };
-function $({
-  appearance: u = "default",
-  className: i = "",
-  destructive: m = !1,
-  emphasis: c = "primary",
-  children: p,
-  leadingIcon: e,
-  size: a = "medium",
-  trailingIcon: o,
-  disabled: b,
-  type: d = "button",
-  ...f
+function B({
+  appearance: t = "default",
+  className: n = "",
+  compact: l = !1,
+  destructive: o = !1,
+  emphasis: d = "primary",
+  size: u = "medium"
 }) {
-  const n = y[a], _ = t[`button--emphasis-${r(c)}`], h = t[`button--size-${r(a)}`], C = u === "inverted" ? t["button--appearance-inverted"] : "", N = m ? t["button--destructive"] : "", v = [
-    t.button,
-    _,
-    h,
-    C,
-    N,
-    i
+  return [
+    e.button,
+    e[`button--emphasis-${I(d)}`],
+    e[`button--size-${I(u)}`],
+    t === "inverted" ? e["button--appearance-inverted"] : "",
+    l ? e["button--compact"] : "",
+    o ? e["button--destructive"] : "",
+    n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ x("button", { className: v, type: d, disabled: b, ...f, children: [
-    e != null ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: typeof e == "boolean" ? /* @__PURE__ */ s(l, { size: n }) : e }) : null,
-    /* @__PURE__ */ s("span", { className: t.button__label, children: p }),
-    o != null ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: typeof o == "boolean" ? /* @__PURE__ */ s(l, { size: n }) : o }) : null
-  ] });
 }
+const V = T(function(n, l) {
+  if (n.asChild) {
+    const {
+      appearance: v = "default",
+      className: $ = "",
+      compact: E = !1,
+      destructive: F = !1,
+      emphasis: K = "primary",
+      children: M,
+      leadingIcon: g,
+      loading: s = !1,
+      size: N = "medium",
+      trailingIcon: _,
+      disabled: O,
+      asChild: Y,
+      ...Z
+    } = n, k = B({
+      appearance: v,
+      className: $,
+      compact: E,
+      destructive: F,
+      emphasis: K,
+      size: N
+    }), p = S[N], q = s || c(g), G = !!(O || s), z = M, H = q ? /* @__PURE__ */ a(
+      "span",
+      {
+        className: e["button__icon-slot"],
+        "aria-hidden": s || void 0,
+        children: s ? /* @__PURE__ */ a(
+          y,
+          {
+            size: p,
+            inverted: v === "inverted"
+          }
+        ) : /* @__PURE__ */ a(r.Provider, { value: { size: p }, children: g })
+      }
+    ) : null, J = !s && c(_) ? /* @__PURE__ */ a("span", { className: e["button__icon-slot"], children: /* @__PURE__ */ a(r.Provider, { value: { size: p }, children: _ }) }) : null;
+    return U({
+      child: z,
+      props: {
+        ...Z,
+        className: k,
+        ...s ? { "aria-busy": !0 } : null
+      },
+      ref: l,
+      content: /* @__PURE__ */ C(Q, { children: [
+        H,
+        /* @__PURE__ */ a("span", { className: e.button__label, children: z.props.children }),
+        J
+      ] }),
+      disabled: G,
+      disabledClassName: e["button--disabled"]
+    });
+  }
+  const {
+    appearance: o = "default",
+    className: d = "",
+    compact: u = !1,
+    destructive: x = !1,
+    emphasis: P = "primary",
+    children: j,
+    leadingIcon: b,
+    loading: i = !1,
+    size: h = "medium",
+    trailingIcon: f,
+    disabled: w,
+    type: D = "button",
+    asChild: W,
+    ...A
+  } = n, L = B({
+    appearance: o,
+    className: d,
+    compact: u,
+    destructive: x,
+    emphasis: P,
+    size: h
+  }), m = S[h], R = i || c(b);
+  return /* @__PURE__ */ C(
+    "button",
+    {
+      ref: l,
+      className: L,
+      type: D,
+      disabled: !!(w || i),
+      ...A,
+      children: [
+        R ? /* @__PURE__ */ a(
+          "span",
+          {
+            className: e["button__icon-slot"],
+            "aria-hidden": i || void 0,
+            children: i ? /* @__PURE__ */ a(
+              y,
+              {
+                size: m,
+                inverted: o === "inverted"
+              }
+            ) : /* @__PURE__ */ a(r.Provider, { value: { size: m }, children: b })
+          }
+        ) : null,
+        /* @__PURE__ */ a("span", { className: e.button__label, children: j }),
+        !i && c(f) ? /* @__PURE__ */ a("span", { className: e["button__icon-slot"], children: /* @__PURE__ */ a(r.Provider, { value: { size: m }, children: f }) }) : null
+      ]
+    }
+  );
+});
+V.displayName = "Button";
 export {
-  $ as default
+  V as default
 };
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Button label. */\n  children: React.ReactNode;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /** Leading icon (e.g. <Icon glyph={<SomeIcon />} size=\"16\" />). Icon size should match button size. */\n  leadingIcon?: ReactNode;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /** Trailing icon. */\n  trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '16',\n  medium: '16',\n  large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nexport default function Button({\n  appearance = 'default',\n  className = '',\n  destructive = false,\n  emphasis = 'primary',\n  children,\n  leadingIcon,\n  size = 'medium',\n  trailingIcon,\n  disabled,\n  type = 'button',\n  ...rest\n}: ButtonProps) {\n  const iconSize = SIZE_ICON_MAP[size];\n  const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n  const sizeClass = styles[`button--size-${toKebab(size)}`];\n  const appearanceClass =\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n  const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n  const rootClass = [\n    styles.button,\n    emphasisClass,\n    sizeClass,\n    appearanceClass,\n    destructiveClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button className={rootClass} type={type} disabled={disabled} {...rest}>\n      {leadingIcon != null ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {typeof leadingIcon === 'boolean' ? (\n            <Icon size={iconSize} />\n          ) : (\n            leadingIcon\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {trailingIcon != null ? (\n        <span className={styles['button__icon-slot']} aria-hidden>\n          {typeof trailingIcon === 'boolean' ? (\n            <Icon size={iconSize} />\n          ) : (\n            trailingIcon\n          )}\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","jsx","Icon"],"mappings":";;;;AAmCA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAOA,SAAwBC,EAAO;AAAA,EAC7B,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAWb,EAAcQ,CAAI,GAC7BM,IAAgBC,EAAO,oBAAoBC,EAAQX,CAAQ,CAAC,EAAE,GAC9DY,IAAYF,EAAO,gBAAgBC,EAAQR,CAAI,CAAC,EAAE,GAClDU,IACJhB,MAAe,aAAaa,EAAO,6BAA6B,IAAI,IAChEI,IAAmBf,IAAcW,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAhB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,UAAA,EAAO,WAAWiB,GAAW,MAAAT,GAAY,UAAAD,GAAqB,GAAGE,GAC/D,UAAA;AAAA,IAAAL,KAAe,OACd,gBAAAc,EAAC,QAAA,EAAK,WAAWN,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAA,OAAOR,KAAgB,YACtB,gBAAAc,EAACC,GAAA,EAAK,MAAMT,GAAU,IAEtBN,GAEJ,IACE;AAAA,sBACH,QAAA,EAAK,WAAWQ,EAAO,eAAmB,UAAAT,GAAS;AAAA,IACnDG,KAAgB,OACf,gBAAAY,EAAC,UAAK,WAAWN,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAA,OAAON,KAAiB,YACvB,gBAAAY,EAACC,GAAA,EAAK,MAAMT,EAAA,CAAU,IAEtBJ,GAEJ,IACE;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.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 type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { renderAsChild } from '@/utils/slot';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary'\n  | 'dim'\n  | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\n/** True when the slot should render (icons, badges, or other JSX). */\nfunction hasSlotContent(node: ReactNode): boolean {\n  if (node == null || typeof node === 'boolean') {\n    return false;\n  }\n  if (typeof node === 'string') {\n    return node.length > 0;\n  }\n  return true;\n}\n\ninterface ButtonOwnProps {\n  /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n  appearance?: ButtonAppearance;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * When true, uses denser padding. On `small`, height drops from 32px to 28px\n   * (`6px 10px`, 6px gap). On `x-small`, height stays 24px with a 4px gap;\n   * only horizontal padding tightens. For dense toolbars. Default: false.\n   */\n  compact?: boolean;\n  /** When true, uses destructive (danger) styling. */\n  destructive?: boolean;\n  /** Visual emphasis. Default: primary. */\n  emphasis?: ButtonEmphasis;\n  /**\n   * Leading slot — typically `<Icon glyph={<YourIcon />} />`, or any other\n   * React node (badge, custom markup). Button provides Icon size via context\n   * when an Icon is used; no `size` prop needed on the Icon.\n   */\n  leadingIcon?: ReactNode;\n  /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */\n  loading?: boolean;\n  /** Size variant. Default: medium. */\n  size?: ButtonSize;\n  /**\n   * Trailing slot — typically `<Icon glyph={<YourIcon />} />`, or any other\n   * React node (badge, custom markup). Button provides Icon size via context\n   * when an Icon is used; no `size` prop needed on the Icon.\n   */\n  trailingIcon?: ReactNode;\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 ButtonProps\n  extends ButtonOwnProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * When true, merges Button 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  /** Button label. */\n  children: ReactNode;\n}\n\nexport interface ButtonAsChildProps\n  extends\n    ButtonOwnProps,\n    Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'> {\n  /**\n   * Merges Button 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` — it is not forwarded.\n   */\n  asChild: true;\n  /** Single element to render as the Button (e.g. `<a>` or `<Link>`). Its children become the label. */\n  children: ReactElement;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n  'x-small': '12',\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\ntype ButtonComponent = {\n  (props: ButtonAsChildProps & RefAttributes<HTMLElement>): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n  displayName?: string;\n};\n\nfunction buildRootClass({\n  appearance = 'default',\n  className = '',\n  compact = false,\n  destructive = false,\n  emphasis = 'primary',\n  size = 'medium',\n}: {\n  appearance?: ButtonAppearance;\n  className?: string;\n  compact?: boolean;\n  destructive?: boolean;\n  emphasis?: ButtonEmphasis;\n  size?: ButtonSize;\n}): string {\n  return [\n    styles.button,\n    styles[`button--emphasis-${toKebab(emphasis)}`],\n    styles[`button--size-${toKebab(size)}`],\n    appearance === 'inverted' ? styles['button--appearance-inverted'] : '',\n    compact ? styles['button--compact'] : '',\n    destructive ? styles['button--destructive'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n *\n * Pass `asChild` with a single `<a>` or router `Link` child to render a navigational CTA\n * with Button styling and anatomy (no nested `<button>`).\n */\nconst Button = forwardRef(function Button(\n  props: ButtonProps | ButtonAsChildProps,\n  ref: Ref<HTMLButtonElement | HTMLElement>,\n) {\n  if (props.asChild) {\n    const {\n      appearance = 'default',\n      className = '',\n      compact = false,\n      destructive = false,\n      emphasis = 'primary',\n      children,\n      leadingIcon,\n      loading = false,\n      size = 'medium',\n      trailingIcon,\n      disabled,\n      asChild,\n      ...rest\n    } = props;\n    void asChild;\n\n    const rootClass = buildRootClass({\n      appearance,\n      className,\n      compact,\n      destructive,\n      emphasis,\n      size,\n    });\n    const iconSize = SIZE_ICON_MAP[size];\n    const showLeadingSlot = loading || hasSlotContent(leadingIcon);\n    const isDisabled = Boolean(disabled || loading);\n    const child = children as ReactElement<{ children?: ReactNode }>;\n\n    const leading = showLeadingSlot ? (\n      <span\n        className={styles['button__icon-slot']}\n        aria-hidden={loading || undefined}\n      >\n        {loading ? (\n          <Spinner\n            size={iconSize as SpinnerSize}\n            inverted={appearance === 'inverted'}\n          />\n        ) : (\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        )}\n      </span>\n    ) : null;\n\n    const trailing =\n      !loading && hasSlotContent(trailingIcon) ? (\n        <span className={styles['button__icon-slot']}>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null;\n\n    return renderAsChild({\n      child,\n      props: {\n        ...rest,\n        className: rootClass,\n        ...(loading ? { 'aria-busy': true } : null),\n      },\n      ref,\n      content: (\n        <>\n          {leading}\n          <span className={styles['button__label']}>\n            {child.props.children}\n          </span>\n          {trailing}\n        </>\n      ),\n      disabled: isDisabled,\n      disabledClassName: styles['button--disabled'],\n    });\n  }\n\n  const {\n    appearance = 'default',\n    className = '',\n    compact = false,\n    destructive = false,\n    emphasis = 'primary',\n    children,\n    leadingIcon,\n    loading = false,\n    size = 'medium',\n    trailingIcon,\n    disabled,\n    type = 'button',\n    asChild,\n    ...rest\n  } = props;\n  void asChild;\n\n  const rootClass = buildRootClass({\n    appearance,\n    className,\n    compact,\n    destructive,\n    emphasis,\n    size,\n  });\n  const iconSize = SIZE_ICON_MAP[size];\n  const showLeadingSlot = loading || hasSlotContent(leadingIcon);\n  const isDisabled = Boolean(disabled || loading);\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={rootClass}\n      type={type}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {showLeadingSlot ? (\n        <span\n          className={styles['button__icon-slot']}\n          aria-hidden={loading || undefined}\n        >\n          {loading ? (\n            <Spinner\n              size={iconSize as SpinnerSize}\n              inverted={appearance === 'inverted'}\n            />\n          ) : (\n            <IconSlotContext.Provider value={{ size: iconSize }}>\n              {leadingIcon}\n            </IconSlotContext.Provider>\n          )}\n        </span>\n      ) : null}\n      <span className={styles['button__label']}>{children}</span>\n      {!loading && hasSlotContent(trailingIcon) ? (\n        <span className={styles['button__icon-slot']}>\n          <IconSlotContext.Provider value={{ size: iconSize }}>\n            {trailingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      ) : null}\n    </button>\n  );\n}) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["hasSlotContent","node","SIZE_ICON_MAP","buildRootClass","appearance","className","compact","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.css');const t="_button_1e05o_2",e="_button__label_1e05o_20",o={button:t,button__label:e,"button__icon-slot":"_button__icon-slot_1e05o_23","button--size-x-small":"_button--size-x-small_1e05o_29","button--size-small":"_button--size-small_1e05o_36","button--size-medium":"_button--size-medium_1e05o_43","button--size-large":"_button--size-large_1e05o_50","button--emphasis-primary":"_button--emphasis-primary_1e05o_57","button--emphasis-secondary":"_button--emphasis-secondary_1e05o_74","button--emphasis-tertiary":"_button--emphasis-tertiary_1e05o_92","button--emphasis-quaternary":"_button--emphasis-quaternary_1e05o_109","button--destructive":"_button--destructive_1e05o_125","button--appearance-inverted":"_button--appearance-inverted_1e05o_191"};exports.button=t;exports.button__label=e;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_1pij1_13",_="_button__label_1pij1_55",i={button:t,"focus-ring-in":"_focus-ring-in_1pij1_1","button--disabled":"_button--disabled_1pij1_52",button__label:_,"button__icon-slot":"_button__icon-slot_1pij1_59","button--size-x-small":"_button--size-x-small_1pij1_66","button--compact":"_button--compact_1pij1_74","button--size-small":"_button--size-small_1pij1_77","button--size-medium":"_button--size-medium_1pij1_88","button--size-large":"_button--size-large_1pij1_99","button--emphasis-primary":"_button--emphasis-primary_1pij1_111","button--emphasis-secondary":"_button--emphasis-secondary_1pij1_125","button--emphasis-tertiary":"_button--emphasis-tertiary_1pij1_141","button--emphasis-quaternary":"_button--emphasis-quaternary_1pij1_155","button--emphasis-dim":"_button--emphasis-dim_1pij1_168","button--emphasis-link":"_button--emphasis-link_1pij1_183","button--destructive":"_button--destructive_1pij1_200","button--appearance-inverted":"_button--appearance-inverted_1pij1_277"};exports.button=t;exports.button__label=_;exports.default=i;
 //# sourceMappingURL=Button.module.scss.cjs.map

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

@@ -1,21 +1,26 @@
-import './Button.module.css';const t = "_button_1e05o_2", e = "_button__label_1e05o_20", o = {
+import './Button.css';const t = "_button_1pij1_13", _ = "_button__label_1pij1_55", i = {
   button: t,
-  button__label: e,
-  "button__icon-slot": "_button__icon-slot_1e05o_23",
-  "button--size-x-small": "_button--size-x-small_1e05o_29",
-  "button--size-small": "_button--size-small_1e05o_36",
-  "button--size-medium": "_button--size-medium_1e05o_43",
-  "button--size-large": "_button--size-large_1e05o_50",
-  "button--emphasis-primary": "_button--emphasis-primary_1e05o_57",
-  "button--emphasis-secondary": "_button--emphasis-secondary_1e05o_74",
-  "button--emphasis-tertiary": "_button--emphasis-tertiary_1e05o_92",
-  "button--emphasis-quaternary": "_button--emphasis-quaternary_1e05o_109",
-  "button--destructive": "_button--destructive_1e05o_125",
-  "button--appearance-inverted": "_button--appearance-inverted_1e05o_191"
+  "focus-ring-in": "_focus-ring-in_1pij1_1",
+  "button--disabled": "_button--disabled_1pij1_52",
+  button__label: _,
+  "button__icon-slot": "_button__icon-slot_1pij1_59",
+  "button--size-x-small": "_button--size-x-small_1pij1_66",
+  "button--compact": "_button--compact_1pij1_74",
+  "button--size-small": "_button--size-small_1pij1_77",
+  "button--size-medium": "_button--size-medium_1pij1_88",
+  "button--size-large": "_button--size-large_1pij1_99",
+  "button--emphasis-primary": "_button--emphasis-primary_1pij1_111",
+  "button--emphasis-secondary": "_button--emphasis-secondary_1pij1_125",
+  "button--emphasis-tertiary": "_button--emphasis-tertiary_1pij1_141",
+  "button--emphasis-quaternary": "_button--emphasis-quaternary_1pij1_155",
+  "button--emphasis-dim": "_button--emphasis-dim_1pij1_168",
+  "button--emphasis-link": "_button--emphasis-link_1pij1_183",
+  "button--destructive": "_button--destructive_1pij1_200",
+  "button--appearance-inverted": "_button--appearance-inverted_1pij1_277"
 };
 export {
   t as button,
-  e as button__label,
-  o as default
+  _ as button__label,
+  i as default
 };
 //# sourceMappingURL=Button.module.scss.js.map

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.cjs","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'title'\n> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */\n  icon: ReactNode;\n  /** Primary label. */\n  title: ReactNode;\n  /** Secondary line under the title. */\n  description?: ReactNode;\n  /** Selected / checked appearance with trailing check. Default: false. */\n  selected?: boolean;\n  className?: string;\n}\n\n/**\n * Card Buttons present a mutually exclusive (or single) choice as a compact\n * card: leading icon, title, optional description, and a check when selected.\n * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,\n * access mode, etc.).\n */\nconst CardButton = forwardRef<HTMLButtonElement, CardButtonProps>(\n  function CardButton(\n    {\n      icon,\n      title,\n      description,\n      selected = false,\n      className = '',\n      type = 'button',\n      role,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const isRadio = role === 'radio';\n    const rootClass = [\n      styles['card-button'],\n      selected && styles['card-button--selected'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        role={role}\n        disabled={disabled}\n        className={rootClass}\n        aria-checked={isRadio ? selected : undefined}\n        aria-pressed={!isRadio ? selected : undefined}\n        {...rest}\n      >\n        <span className={styles['card-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '24' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['card-button__text']}>\n          <span className={styles['card-button__title']}>{title}</span>\n          {description != null && (\n            <span className={styles['card-button__description']}>\n              {description}\n            </span>\n          )}\n        </span>\n        <span className={styles['card-button__check']} aria-hidden>\n          <Icon glyph={<CheckCircleIcon />} size=\"20\" />\n        </span>\n      </button>\n    );\n  },\n);\n\nCardButton.displayName = 'CardButton';\n\nexport default CardButton;\n"],"names":["CardButton","forwardRef","icon","title","description","selected","className","type","role","disabled","rest","ref","isRadio","rootClass","styles","jsxs","jsx","IconSlotContext","Icon","CheckCircleIcon"],"mappings":"2SA2BMA,EAAaC,EAAAA,WACjB,SACE,CACE,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,KAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAUJ,IAAS,QACnBK,EAAY,CAChBC,EAAAA,QAAO,aAAa,EACpBT,GAAYS,EAAAA,QAAO,uBAAuB,EAC1CR,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACES,EAAAA,KAAC,SAAA,CACC,IAAAJ,EACA,KAAAJ,EACA,KAAAC,EACA,SAAAC,EACA,UAAWI,EACX,eAAcD,EAAUP,EAAW,OACnC,eAAeO,EAAqB,OAAXP,EACxB,GAAGK,EAEJ,SAAA,CAAAM,MAAC,QAAK,UAAWF,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACvD,SAAAE,EAAAA,IAACC,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,WACH,EACF,EACAF,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,mBAAmB,EACzC,SAAA,CAAAE,MAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oBAAoB,EAAI,SAAAX,EAAM,EACrDC,GAAe,MACdY,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,0BAA0B,EAC/C,SAAAV,CAAA,CACH,CAAA,EAEJ,QACC,OAAA,CAAK,UAAWU,EAAAA,QAAO,oBAAoB,EAAG,cAAW,GACxD,SAAAE,EAAAA,IAACE,UAAA,CAAK,MAAOF,MAACG,EAAA,CAAA,CAAgB,EAAI,KAAK,KAAK,CAAA,CAC9C,CAAA,CAAA,CAAA,CAGN,CACF,EAEAnB,EAAW,YAAc"}

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

@@ -0,0 +1 @@
+._card-button_1b8x9_13{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-m);margin:0;padding:var(--spacing-m) var(--spacing-xl) var(--spacing-m) var(--spacing-m);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);background-color:var(--center-channel-bg);box-shadow:var(--elevation-1);cursor:pointer;text-align:left;color:var(--center-channel-color);outline:none}._card-button_1b8x9_13:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1b8x9_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._card-button_1b8x9_13:focus-visible{animation:none}}._card-button_1b8x9_13:not(._-host-shadow-a_1b8x9_41):not(._-host-shadow-b_1b8x9_41){box-shadow:var(--elevation-1);border-radius:var(--radius-s)}@keyframes _focus-ring-in_1b8x9_1{0%{outline-color:transparent;outline-offset:0}}._card-button_1b8x9_13:hover:not(:disabled):not(._card-button--selected_1b8x9_51){transition:border-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition);border-color:rgba(var(--center-channel-color-rgb),.24);box-shadow:var(--elevation-2)}._card-button_1b8x9_13:disabled{cursor:not-allowed;opacity:.48}._card-button--selected_1b8x9_51{border-color:rgba(var(--button-bg-rgb),.32)}._card-button--selected_1b8x9_51 ._card-button__icon_1b8x9_63{background-color:rgba(var(--button-bg-rgb),.08);color:var(--button-bg)}._card-button--selected_1b8x9_51 ._card-button__check_1b8x9_67{visibility:visible}._card-button__icon_1b8x9_63{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-xs);border-radius:var(--radius-pill);background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.56)}._card-button__text_1b8x9_80{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0}._card-button__title_1b8x9_88{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--center-channel-color)}._card-button__description_1b8x9_95{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.72)}._card-button__check_1b8x9_67{flex-shrink:0;display:inline-flex;align-items:center;color:var(--button-bg);visibility:hidden}

package/dist/components/card-button/CardButton.d.ts

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface CardButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
+    /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */
+    icon: ReactNode;
+    /** Primary label. */
+    title: ReactNode;
+    /** Secondary line under the title. */
+    description?: ReactNode;
+    /** Selected / checked appearance with trailing check. Default: false. */
+    selected?: boolean;
+    className?: string;
+}
+/**
+ * Card Buttons present a mutually exclusive (or single) choice as a compact
+ * card: leading icon, title, optional description, and a check when selected.
+ * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,
+ * access mode, etc.).
+ */
+declare const CardButton: import('react').ForwardRefExoticComponent<CardButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default CardButton;
+//# sourceMappingURL=CardButton.d.ts.map

package/dist/components/card-button/CardButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../src/components/card-button/CardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9E,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,CACrB;IACC,kHAAkH;IAClH,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,QAAA,MAAM,UAAU,+GAsDf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,50 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import ___ from "@mattermost/compass-icons/components/check-circle.js";const _=___&&___.default?___.default:___;
+import b, { IconSlotContext as C } from "../icon/Icon.js";
+import a from "./CardButton.module.scss.js";
+const N = f(
+  function({
+    icon: c,
+    title: i,
+    description: o,
+    selected: r = !1,
+    className: d = "",
+    type: l = "button",
+    role: n,
+    disabled: u,
+    ...m
+  }, p) {
+    const e = n === "radio", h = [
+      a["card-button"],
+      r && a["card-button--selected"],
+      d
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: p,
+        type: l,
+        role: n,
+        disabled: u,
+        className: h,
+        "aria-checked": e ? r : void 0,
+        "aria-pressed": e ? void 0 : r,
+        ...m,
+        children: [
+          /* @__PURE__ */ t("span", { className: a["card-button__icon"], "aria-hidden": !0, children: /* @__PURE__ */ t(C.Provider, { value: { size: "24" }, children: c }) }),
+          /* @__PURE__ */ s("span", { className: a["card-button__text"], children: [
+            /* @__PURE__ */ t("span", { className: a["card-button__title"], children: i }),
+            o != null && /* @__PURE__ */ t("span", { className: a["card-button__description"], children: o })
+          ] }),
+          /* @__PURE__ */ t("span", { className: a["card-button__check"], "aria-hidden": !0, children: /* @__PURE__ */ t(b, { glyph: /* @__PURE__ */ t(_, {}), size: "20" }) })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "CardButton";
+export {
+  N as default
+};
+//# sourceMappingURL=CardButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.js","sources":["../../../src/components/card-button/CardButton.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport CheckCircleIcon from '@mattermost/compass-icons/components/check-circle';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './CardButton.module.scss';\n\nexport interface CardButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'title'\n> {\n  /** Leading icon. Pass `<Icon glyph={<SomeIcon />} />` — CardButton provides the correct size (24) via context. */\n  icon: ReactNode;\n  /** Primary label. */\n  title: ReactNode;\n  /** Secondary line under the title. */\n  description?: ReactNode;\n  /** Selected / checked appearance with trailing check. Default: false. */\n  selected?: boolean;\n  className?: string;\n}\n\n/**\n * Card Buttons present a mutually exclusive (or single) choice as a compact\n * card: leading icon, title, optional description, and a check when selected.\n * Pair with `CardButtonGroup` for side-by-side radiogroups (visibility,\n * access mode, etc.).\n */\nconst CardButton = forwardRef<HTMLButtonElement, CardButtonProps>(\n  function CardButton(\n    {\n      icon,\n      title,\n      description,\n      selected = false,\n      className = '',\n      type = 'button',\n      role,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const isRadio = role === 'radio';\n    const rootClass = [\n      styles['card-button'],\n      selected && styles['card-button--selected'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        role={role}\n        disabled={disabled}\n        className={rootClass}\n        aria-checked={isRadio ? selected : undefined}\n        aria-pressed={!isRadio ? selected : undefined}\n        {...rest}\n      >\n        <span className={styles['card-button__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: '24' }}>\n            {icon}\n          </IconSlotContext.Provider>\n        </span>\n        <span className={styles['card-button__text']}>\n          <span className={styles['card-button__title']}>{title}</span>\n          {description != null && (\n            <span className={styles['card-button__description']}>\n              {description}\n            </span>\n          )}\n        </span>\n        <span className={styles['card-button__check']} aria-hidden>\n          <Icon glyph={<CheckCircleIcon />} size=\"20\" />\n        </span>\n      </button>\n    );\n  },\n);\n\nCardButton.displayName = 'CardButton';\n\nexport default CardButton;\n"],"names":["CardButton","forwardRef","icon","title","description","selected","className","type","role","disabled","rest","ref","isRadio","rootClass","styles","jsxs","jsx","IconSlotContext","Icon","CheckCircleIcon"],"mappings":";;;;;AA2BA,MAAMA,IAAaC;AAAA,EACjB,SACE;AAAA,IACE,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAUJ,MAAS,SACnBK,IAAY;AAAA,MAChBC,EAAO,aAAa;AAAA,MACpBT,KAAYS,EAAO,uBAAuB;AAAA,MAC1CR;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,MAAAJ;AAAA,QACA,MAAAC;AAAA,QACA,UAAAC;AAAA,QACA,WAAWI;AAAA,QACX,gBAAcD,IAAUP,IAAW;AAAA,QACnC,gBAAeO,IAAqB,SAAXP;AAAA,QACxB,GAAGK;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAAC,UAAK,WAAWF,EAAO,mBAAmB,GAAG,eAAW,IACvD,UAAA,gBAAAE,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,aACH,GACF;AAAA,UACA,gBAAAF,EAAC,QAAA,EAAK,WAAWD,EAAO,mBAAmB,GACzC,UAAA;AAAA,YAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,oBAAoB,GAAI,UAAAX,GAAM;AAAA,YACrDC,KAAe,QACd,gBAAAY,EAAC,QAAA,EAAK,WAAWF,EAAO,0BAA0B,GAC/C,UAAAV,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BACC,QAAA,EAAK,WAAWU,EAAO,oBAAoB,GAAG,eAAW,IACxD,UAAA,gBAAAE,EAACE,GAAA,EAAK,OAAO,gBAAAF,EAACG,GAAA,CAAA,CAAgB,GAAI,MAAK,MAAK,EAAA,CAC9C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAnB,EAAW,cAAc;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./CardButton.css');const t={"card-button":"_card-button_1b8x9_13","card-button--selected":"_card-button--selected_1b8x9_51","card-button__icon":"_card-button__icon_1b8x9_63","card-button__check":"_card-button__check_1b8x9_67","card-button__text":"_card-button__text_1b8x9_80","card-button__title":"_card-button__title_1b8x9_88","card-button__description":"_card-button__description_1b8x9_95"};exports.default=t;
+//# sourceMappingURL=CardButton.module.scss.cjs.map

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

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

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

@@ -0,0 +1,13 @@
+import './CardButton.css';const t = {
+  "card-button": "_card-button_1b8x9_13",
+  "card-button--selected": "_card-button--selected_1b8x9_51",
+  "card-button__icon": "_card-button__icon_1b8x9_63",
+  "card-button__check": "_card-button__check_1b8x9_67",
+  "card-button__text": "_card-button__text_1b8x9_80",
+  "card-button__title": "_card-button__title_1b8x9_88",
+  "card-button__description": "_card-button__description_1b8x9_95"
+};
+export {
+  t as default
+};
+//# sourceMappingURL=CardButton.module.scss.js.map