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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/components/action-button/ActionButton.css +1 -1
  2. package/dist/components/action-button/ActionButton.module.scss.cjs +1 -1
  3. package/dist/components/action-button/ActionButton.module.scss.js +6 -6
  4. package/dist/components/button/Button.cjs +1 -1
  5. package/dist/components/button/Button.cjs.map +1 -1
  6. package/dist/components/button/Button.css +1 -1
  7. package/dist/components/button/Button.d.ts +17 -3
  8. package/dist/components/button/Button.d.ts.map +1 -1
  9. package/dist/components/button/Button.js +107 -84
  10. package/dist/components/button/Button.js.map +1 -1
  11. package/dist/components/button/Button.module.scss.cjs +1 -1
  12. package/dist/components/button/Button.module.scss.js +18 -16
  13. package/dist/components/button/Button.module.scss.js.map +1 -1
  14. package/package.json +1 -1
package/dist/components/action-button/ActionButton.css CHANGED
@@ -1 +1 @@
1
- ._action-button_ruap0_2{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xxxs);width:88px;padding:var(--spacing-m) var(--spacing-l) 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_ruap0_2:any-link,._action-button_ruap0_2:hover,._action-button_ruap0_2:focus,._action-button_ruap0_2:active,._action-button_ruap0_2:visited{color:var(--action-button-fg);text-decoration:none}._action-button_ruap0_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._action-button_ruap0_2:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--center-channel-color-rgb),.08);--action-button-fg: rgba(var(--center-channel-color-rgb), .75)}._action-button_ruap0_2:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.08);--action-button-fg: var(--link-color)}._action-button_ruap0_2:is(:disabled,._action-button--disabled_ruap0_28){opacity:.48;cursor:not-allowed}._action-button--active_ruap0_40{--action-button-fg: var(--link-color);background-color:rgba(var(--button-bg-rgb),.08)}._action-button--active_ruap0_40 ._action-button__icon_ruap0_44,._action-button--active_ruap0_40 ._action-button__label_ruap0_45{color:var(--link-color)}._action-button--active_ruap0_40:hover:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.12)}._action-button--active_ruap0_40:active:not(:disabled,._action-button--disabled_ruap0_28){background-color:rgba(var(--button-bg-rgb),.16)}._action-button--destructive_ruap0_54{--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_ruap0_54:hover:not(:disabled,._action-button--disabled_ruap0_28){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_ruap0_54:active:not(:disabled,._action-button--disabled_ruap0_28){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_ruap0_44{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_ruap0_45{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;white-space:nowrap;text-align:center;color:var(--action-button-fg)}
1
+ ._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.module.scss.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ActionButton.css');const t={"action-button":"_action-button_ruap0_2","action-button--disabled":"_action-button--disabled_ruap0_28","action-button--active":"_action-button--active_ruap0_40","action-button__icon":"_action-button__icon_ruap0_44","action-button__label":"_action-button__label_ruap0_45","action-button--destructive":"_action-button--destructive_ruap0_54"};exports.default=t;
1
+ "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;
2
2
  //# sourceMappingURL=ActionButton.module.scss.cjs.map
package/dist/components/action-button/ActionButton.module.scss.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import './ActionButton.css';const t = {
2
- "action-button": "_action-button_ruap0_2",
3
- "action-button--disabled": "_action-button--disabled_ruap0_28",
4
- "action-button--active": "_action-button--active_ruap0_40",
5
- "action-button__icon": "_action-button__icon_ruap0_44",
6
- "action-button__label": "_action-button__label_ruap0_45",
7
- "action-button--destructive": "_action-button--destructive_ruap0_54"
2
+ "action-button": "_action-button_1nxkv_2",
3
+ "action-button--disabled": "_action-button--disabled_1nxkv_30",
4
+ "action-button--active": "_action-button--active_1nxkv_42",
5
+ "action-button__icon": "_action-button__icon_1nxkv_46",
6
+ "action-button__label": "_action-button__label_1nxkv_47",
7
+ "action-button--destructive": "_action-button--destructive_1nxkv_56"
8
8
  };
9
9
  export {
10
10
  t as default
package/dist/components/button/Button.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),d=require("../icon/Icon.cjs"),j=require("../spinner/Spinner.cjs"),G=require("../../utils/slot.cjs"),N=require("../../utils/string.cjs"),t=require("./Button.module.scss.cjs"),C={"x-small":"12",small:"12",medium:"16",large:"20"};function z({appearance:m="default",className:s="",destructive:l=!1,emphasis:i="primary",size:r="medium"}){return[t.default.button,t.default[`button--emphasis-${N.toKebab(i)}`],t.default[`button--size-${N.toKebab(r)}`],m==="inverted"?t.default["button--appearance-inverted"]:"",l?t.default["button--destructive"]:"",s].filter(Boolean).join(" ")}const I=n.forwardRef(function(s,l){if(s.asChild){const{appearance:p="default",className:M="",destructive:A=!1,emphasis:D="primary",children:K,leadingIcon:v,loading:a=!1,size:x="medium",trailingIcon:g,disabled:L,asChild:J,...O}=s,$=z({appearance:p,className:M,destructive:A,emphasis:D,size:x}),u=C[x],F=a||n.isValidElement(v),T=!!(L||a),_=K,Z=F?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:a?e.jsx(j.default,{size:u,inverted:p==="inverted"}):e.jsx(d.IconSlotContext.Provider,{value:{size:u},children:v})}):null,k=!a&&n.isValidElement(g)?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:e.jsx(d.IconSlotContext.Provider,{value:{size:u},children:g})}):null;return G.renderAsChild({child:_,props:{...O,className:$,...a?{"aria-busy":!0}:null},ref:l,content:e.jsxs(e.Fragment,{children:[Z,e.jsx("span",{className:t.default.button__label,children:_.props.children}),k]}),disabled:T,disabledClassName:t.default["button--disabled"]})}const{appearance:i="default",className:r="",destructive:S=!1,emphasis:q="primary",children:y,leadingIcon:b,loading:o=!1,size:h="medium",trailingIcon:f,disabled:B,type:P="button",asChild:H,...E}=s,R=z({appearance:i,className:r,destructive:S,emphasis:q,size:h}),c=C[h],V=o||n.isValidElement(b),w=!!(B||o);return e.jsxs("button",{ref:l,className:R,type:P,disabled:w,...E,children:[V?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:o?e.jsx(j.default,{size:c,inverted:i==="inverted"}):e.jsx(d.IconSlotContext.Provider,{value:{size:c},children:b})}):null,e.jsx("span",{className:t.default.button__label,children:y}),!o&&n.isValidElement(f)?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":!0,children:e.jsx(d.IconSlotContext.Provider,{value:{size:c},children:f})}):null]})});I.displayName="Button";exports.default=I;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),Q=require("react"),r=require("../icon/Icon.cjs"),C=require("../spinner/Spinner.cjs"),U=require("../../utils/slot.cjs"),N=require("../../utils/string.cjs"),t=require("./Button.module.scss.cjs");function d(s){return s==null||typeof s=="boolean"?!1:typeof s=="string"?s.length>0:!0}const z={"x-small":"12",small:"12",medium:"16",large:"20"};function I({appearance:s="default",className:n="",compact:i=!1,destructive:o=!1,emphasis:c="primary",size:u="medium"}){return[t.default.button,t.default[`button--emphasis-${N.toKebab(c)}`],t.default[`button--size-${N.toKebab(u)}`],s==="inverted"?t.default["button--appearance-inverted"]:"",i?t.default["button--compact"]:"",o?t.default["button--destructive"]:"",n].filter(Boolean).join(" ")}const S=Q.forwardRef(function(n,i){if(n.asChild){const{appearance:v="default",className:K="",compact:L=!1,destructive:O=!1,emphasis:$="primary",children:E,leadingIcon:g,loading:a=!1,size:x="medium",trailingIcon:_,disabled:F,asChild:W,...T}=n,Z=I({appearance:v,className:K,compact:L,destructive:O,emphasis:$,size:x}),f=z[x],k=a||d(g),G=!!(F||a),j=E,H=k?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":a||void 0,children:a?e.jsx(C.default,{size:f,inverted:v==="inverted"}):e.jsx(r.IconSlotContext.Provider,{value:{size:f},children:g})}):null,J=!a&&d(_)?e.jsx("span",{className:t.default["button__icon-slot"],children:e.jsx(r.IconSlotContext.Provider,{value:{size:f},children:_})}):null;return U.renderAsChild({child:j,props:{...T,className:Z,...a?{"aria-busy":!0}:null},ref:i,content:e.jsxs(e.Fragment,{children:[H,e.jsx("span",{className:t.default.button__label,children:j.props.children}),J]}),disabled:G,disabledClassName:t.default["button--disabled"]})}const{appearance:o="default",className:c="",compact:u=!1,destructive:y=!1,emphasis:q="primary",children:B,leadingIcon:b,loading:l=!1,size:p="medium",trailingIcon:h,disabled:P,type:R="button",asChild:V,...w}=n,M=I({appearance:o,className:c,compact:u,destructive:y,emphasis:q,size:p}),m=z[p],A=l||d(b),D=!!(P||l);return e.jsxs("button",{ref:i,className:M,type:R,disabled:D,...w,children:[A?e.jsx("span",{className:t.default["button__icon-slot"],"aria-hidden":l||void 0,children:l?e.jsx(C.default,{size:m,inverted:o==="inverted"}):e.jsx(r.IconSlotContext.Provider,{value:{size:m},children:b})}):null,e.jsx("span",{className:t.default.button__label,children:B}),!l&&d(h)?e.jsx("span",{className:t.default["button__icon-slot"],children:e.jsx(r.IconSlotContext.Provider,{value:{size:m},children:h})}):null]})});S.displayName="Button";exports.default=S;
2
2
  //# sourceMappingURL=Button.cjs.map
package/dist/components/button/Button.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n forwardRef,\n isValidElement,\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 | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\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 /** When true, uses destructive (danger) styling. */\n destructive?: boolean;\n /** Visual emphasis. Default: primary. */\n emphasis?: ButtonEmphasis;\n /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\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 /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\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 destructive = false,\n emphasis = 'primary',\n size = 'medium',\n}: {\n appearance?: ButtonAppearance;\n className?: string;\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 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 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 destructive,\n emphasis,\n size,\n });\n const iconSize = SIZE_ICON_MAP[size];\n const showLeadingSlot = loading || isValidElement(leadingIcon);\n const isDisabled = Boolean(disabled || loading);\n const child = children as ReactElement<{ children?: ReactNode }>;\n\n const leading = showLeadingSlot ? (\n <span className={styles['button__icon-slot']} aria-hidden>\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 && isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\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 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 destructive,\n emphasis,\n size,\n });\n const iconSize = SIZE_ICON_MAP[size];\n const showLeadingSlot = loading || isValidElement(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 className={styles['button__icon-slot']} aria-hidden>\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 && isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\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":["SIZE_ICON_MAP","buildRootClass","appearance","className","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isValidElement","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"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"}
1
+ {"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 CHANGED
@@ -1 +1 @@
1
- ._button_aa8j5_2{--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);transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow 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}._button_aa8j5_2:any-link,._button_aa8j5_2:hover,._button_aa8j5_2:focus,._button_aa8j5_2:active,._button_aa8j5_2:visited{color:var(--button-fg);text-decoration:none}._button_aa8j5_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_aa8j5_2:is(:disabled,._button--disabled_aa8j5_28){cursor:not-allowed}._button__label_aa8j5_31{line-height:1;color:var(--button-fg)}._button__icon-slot_aa8j5_35{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--button-fg)}._button--size-x-small_aa8j5_42{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_aa8j5_42 ._button__label_aa8j5_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_aa8j5_49{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_aa8j5_49 ._button__label_aa8j5_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_aa8j5_56{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_aa8j5_56 ._button__label_aa8j5_31{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_aa8j5_63{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_aa8j5_63 ._button__label_aa8j5_31{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_aa8j5_70{--button-fg: var(--button-color);background-color:var(--button-bg)}._button--emphasis-primary_aa8j5_70:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_aa8j5_70:active:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_aa8j5_70:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-secondary_aa8j5_84{--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_aa8j5_84:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_aa8j5_84:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_aa8j5_84:is(:disabled,._button--disabled_aa8j5_28){--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_aa8j5_100{--button-fg: var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-tertiary_aa8j5_100:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_aa8j5_100:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_aa8j5_100:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-quaternary_aa8j5_114{--button-fg: var(--link-color);background-color:transparent}._button--emphasis-quaternary_aa8j5_114:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_aa8j5_114:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_aa8j5_114:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--emphasis-link_aa8j5_127{--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_aa8j5_127:hover:not(:disabled,._button--disabled_aa8j5_28) ._button__label_aa8j5_31{text-decoration:underline}._button--emphasis-link_aa8j5_127:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_aa8j5_141{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70{--button-fg: var(--button-color);background-color:var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70:active:not(:disabled,._button--disabled_aa8j5_28){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_aa8j5_141._button--emphasis-primary_aa8j5_70:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84{--button-fg: var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_aa8j5_141._button--emphasis-secondary_aa8j5_84:is(:disabled,._button--disabled_aa8j5_28){--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_aa8j5_141._button--emphasis-tertiary_aa8j5_100{--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_aa8j5_141._button--emphasis-tertiary_aa8j5_100:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_aa8j5_141._button--emphasis-quaternary_aa8j5_114:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_aa8j5_141._button--emphasis-link_aa8j5_127{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_aa8j5_141._button--emphasis-link_aa8j5_127:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70{--button-fg: var(--sidebar-bg);background-color:var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_aa8j5_204._button--emphasis-primary_aa8j5_70:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84{--button-fg: var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_aa8j5_204._button--emphasis-secondary_aa8j5_84:is(:disabled,._button--disabled_aa8j5_28){--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_aa8j5_204._button--emphasis-tertiary_aa8j5_100{--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_aa8j5_204._button--emphasis-tertiary_aa8j5_100:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114{--button-fg: var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114:hover:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114:active:not(:disabled,._button--disabled_aa8j5_28){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_aa8j5_204._button--emphasis-quaternary_aa8j5_114:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}._button--appearance-inverted_aa8j5_204._button--emphasis-link_aa8j5_127{--button-fg: var(--sidebar-text)}._button--appearance-inverted_aa8j5_204._button--emphasis-link_aa8j5_127:is(:disabled,._button--disabled_aa8j5_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}
1
+ ._button_we8pe_2{--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);transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow 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}._button_we8pe_2:any-link,._button_we8pe_2:hover,._button_we8pe_2:focus,._button_we8pe_2:active,._button_we8pe_2:visited{color:var(--button-fg);text-decoration:none}._button_we8pe_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_we8pe_2:is(:disabled,._button--disabled_we8pe_28){cursor:not-allowed}._button__label_we8pe_31{line-height:1;color:var(--button-fg)}._button__icon-slot_we8pe_35{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--button-fg)}._button--size-x-small_we8pe_42{padding:var(--spacing-xxxs) var(--spacing-xs);gap:var(--spacing-xxxs)}._button--size-x-small_we8pe_42 ._button__label_we8pe_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-x-small_we8pe_42._button--compact_we8pe_50{padding-inline:var(--spacing-xxs)}._button--size-small_we8pe_53{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_we8pe_53 ._button__label_we8pe_31{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_we8pe_53._button--compact_we8pe_50{padding:var(--spacing-xxs) var(--spacing-s);gap:var(--spacing-xxs)}._button--size-medium_we8pe_64{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_we8pe_64 ._button__label_we8pe_31{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-medium_we8pe_64._button--compact_we8pe_50{padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xxs)}._button--size-large_we8pe_75{padding:var(--spacing-m) var(--spacing-xxl);gap:var(--spacing-m)}._button--size-large_we8pe_75 ._button__label_we8pe_31{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--size-large_we8pe_75._button--compact_we8pe_50{padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s)}._button--emphasis-primary_we8pe_87{--button-fg: var(--button-color);background-color:var(--button-bg)}._button--emphasis-primary_we8pe_87:hover:not(:disabled,._button--disabled_we8pe_28){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_we8pe_87:active:not(:disabled,._button--disabled_we8pe_28){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_we8pe_87:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-secondary_we8pe_101{--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_we8pe_101:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_we8pe_101:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_we8pe_101:is(:disabled,._button--disabled_we8pe_28){--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_we8pe_117{--button-fg: var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-tertiary_we8pe_117:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_we8pe_117:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_we8pe_117:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-quaternary_we8pe_131{--button-fg: var(--link-color);background-color:transparent}._button--emphasis-quaternary_we8pe_131:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_we8pe_131:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_we8pe_131:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--emphasis-dim_we8pe_144{--button-fg: rgba(var(--center-channel-color-rgb), .72);background-color:transparent}._button--emphasis-dim_we8pe_144:hover:not(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .88);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--emphasis-dim_we8pe_144:active:not(:disabled,._button--disabled_we8pe_28){--button-fg: var(--button-bg);background-color:rgba(var(--button-bg-rgb),.08)}._button--emphasis-dim_we8pe_144:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--emphasis-link_we8pe_159{--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_we8pe_159._button--compact_we8pe_50{padding:0}._button--emphasis-link_we8pe_159:hover:not(:disabled,._button--disabled_we8pe_28) ._button__label_we8pe_31{text-decoration:underline}._button--emphasis-link_we8pe_159:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_we8pe_176{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_we8pe_176._button--emphasis-primary_we8pe_87{--button-fg: var(--button-color);background-color:var(--error-text, var(--color-danger))}._button--destructive_we8pe_176._button--emphasis-primary_we8pe_87:hover:not(:disabled,._button--disabled_we8pe_28){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_we8pe_176._button--emphasis-primary_we8pe_87:active:not(:disabled,._button--disabled_we8pe_28){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_we8pe_176._button--emphasis-primary_we8pe_87:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_we8pe_176._button--emphasis-secondary_we8pe_101{--button-fg: var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_we8pe_176._button--emphasis-secondary_we8pe_101:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_we8pe_176._button--emphasis-secondary_we8pe_101:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_we8pe_176._button--emphasis-secondary_we8pe_101:is(:disabled,._button--disabled_we8pe_28){--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_we8pe_176._button--emphasis-tertiary_we8pe_117{--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_we8pe_176._button--emphasis-tertiary_we8pe_117:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_we8pe_176._button--emphasis-tertiary_we8pe_117:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_we8pe_176._button--emphasis-tertiary_we8pe_117:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32);background-color:rgba(var(--center-channel-color-rgb),.08)}._button--destructive_we8pe_176._button--emphasis-quaternary_we8pe_131{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_we8pe_176._button--emphasis-quaternary_we8pe_131:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_we8pe_176._button--emphasis-quaternary_we8pe_131:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_we8pe_176._button--emphasis-quaternary_we8pe_131:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_we8pe_176._button--emphasis-dim_we8pe_144{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_we8pe_176._button--emphasis-dim_we8pe_144:hover:not(:disabled,._button--disabled_we8pe_28){--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_we8pe_176._button--emphasis-dim_we8pe_144:active:not(:disabled,._button--disabled_we8pe_28){--button-fg: var(--error-text, var(--color-danger));background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_we8pe_176._button--emphasis-dim_we8pe_144:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--destructive_we8pe_176._button--emphasis-link_we8pe_159{--button-fg: var(--error-text, var(--color-danger))}._button--destructive_we8pe_176._button--emphasis-link_we8pe_159:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--center-channel-color-rgb), .32)}._button--appearance-inverted_we8pe_253._button--emphasis-primary_we8pe_87{--button-fg: var(--sidebar-bg);background-color:var(--sidebar-text)}._button--appearance-inverted_we8pe_253._button--emphasis-primary_we8pe_87:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_we8pe_253._button--emphasis-primary_we8pe_87:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_we8pe_253._button--emphasis-primary_we8pe_87:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_we8pe_253._button--emphasis-secondary_we8pe_101{--button-fg: var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_we8pe_253._button--emphasis-secondary_we8pe_101:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_we8pe_253._button--emphasis-secondary_we8pe_101:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_we8pe_253._button--emphasis-secondary_we8pe_101:is(:disabled,._button--disabled_we8pe_28){--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_we8pe_253._button--emphasis-tertiary_we8pe_117{--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_we8pe_253._button--emphasis-tertiary_we8pe_117:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_we8pe_253._button--emphasis-tertiary_we8pe_117:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_we8pe_253._button--emphasis-tertiary_we8pe_117:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--sidebar-text-rgb), .32);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_we8pe_253._button--emphasis-quaternary_we8pe_131{--button-fg: var(--sidebar-text)}._button--appearance-inverted_we8pe_253._button--emphasis-quaternary_we8pe_131:hover:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_we8pe_253._button--emphasis-quaternary_we8pe_131:active:not(:disabled,._button--disabled_we8pe_28){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_we8pe_253._button--emphasis-quaternary_we8pe_131:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}._button--appearance-inverted_we8pe_253._button--emphasis-dim_we8pe_144{--button-fg: rgba(var(--sidebar-text-rgb), .72)}._button--appearance-inverted_we8pe_253._button--emphasis-dim_we8pe_144:hover:not(:disabled,._button--disabled_we8pe_28){--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.08)}._button--appearance-inverted_we8pe_253._button--emphasis-dim_we8pe_144:active:not(:disabled,._button--disabled_we8pe_28){--button-fg: var(--sidebar-text);background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_we8pe_253._button--emphasis-dim_we8pe_144:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}._button--appearance-inverted_we8pe_253._button--emphasis-link_we8pe_159{--button-fg: var(--sidebar-text)}._button--appearance-inverted_we8pe_253._button--emphasis-link_we8pe_159:is(:disabled,._button--disabled_we8pe_28){--button-fg: rgba(var(--sidebar-text-rgb), .32)}
package/dist/components/button/Button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
2
- export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'link';
2
+ export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'dim' | 'link';
3
3
  export type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';
4
4
  export type ButtonAppearance = 'default' | 'inverted';
5
5
  interface ButtonOwnProps {
@@ -7,17 +7,31 @@ interface ButtonOwnProps {
7
7
  appearance?: ButtonAppearance;
8
8
  /** Optional CSS class name. */
9
9
  className?: string;
10
+ /**
11
+ * When true, uses denser padding. On `small`, height drops from 32px to 28px
12
+ * (`6px 10px`, 6px gap). On `x-small`, height stays 24px with a 4px gap;
13
+ * only horizontal padding tightens. For dense toolbars. Default: false.
14
+ */
15
+ compact?: boolean;
10
16
  /** When true, uses destructive (danger) styling. */
11
17
  destructive?: boolean;
12
18
  /** Visual emphasis. Default: primary. */
13
19
  emphasis?: ButtonEmphasis;
14
- /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
20
+ /**
21
+ * Leading slot — typically `<Icon glyph={<YourIcon />} />`, or any other
22
+ * React node (badge, custom markup). Button provides Icon size via context
23
+ * when an Icon is used; no `size` prop needed on the Icon.
24
+ */
15
25
  leadingIcon?: ReactNode;
16
26
  /** When true, shows a Spinner in the leading slot and disables the button (or blocks navigation when `asChild`). */
17
27
  loading?: boolean;
18
28
  /** Size variant. Default: medium. */
19
29
  size?: ButtonSize;
20
- /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */
30
+ /**
31
+ * Trailing slot — typically `<Icon glyph={<YourIcon />} />`, or any other
32
+ * React node (badge, custom markup). Button provides Icon size via context
33
+ * when an Icon is used; no `size` prop needed on the Icon.
34
+ */
21
35
  trailingIcon?: ReactNode;
22
36
  /**
23
37
  * When true, disables the control. On a native `<button>`, sets the `disabled`
package/dist/components/button/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,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,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,UAAU,cAAc;IACtB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4IAA4I;IAC5I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oHAAoH;IACpH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6IAA6I;IAC7I,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;AA2BF;;;;;;;GAOG;AACH,QAAA,MAAM,MAAM,EA2IN,eAAe,CAAC;AAItB,eAAe,MAAM,CAAC"}
1
+ {"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 CHANGED
@@ -1,122 +1,145 @@
1
- import { jsx as e, jsxs as z, Fragment as G } from "react/jsx-runtime";
2
- import { forwardRef as H, isValidElement as o } from "react";
1
+ import { jsx as a, jsxs as C, Fragment as Q } from "react/jsx-runtime";
2
+ import { forwardRef as T } from "react";
3
3
  import { IconSlotContext as r } from "../icon/Icon.js";
4
- import C from "../spinner/Spinner.js";
5
- import { renderAsChild as J } from "../../utils/slot.js";
4
+ import y from "../spinner/Spinner.js";
5
+ import { renderAsChild as U } from "../../utils/slot.js";
6
6
  import { toKebab as I } from "../../utils/string.js";
7
- import a from "./Button.module.scss.js";
8
- const y = {
7
+ import e from "./Button.module.scss.js";
8
+ function c(t) {
9
+ return t == null || typeof t == "boolean" ? !1 : typeof t == "string" ? t.length > 0 : !0;
10
+ }
11
+ const S = {
9
12
  "x-small": "12",
10
13
  small: "12",
11
14
  medium: "16",
12
15
  large: "20"
13
16
  };
14
- function S({
15
- appearance: m = "default",
16
- className: i = "",
17
- destructive: n = !1,
18
- emphasis: t = "primary",
19
- size: d = "medium"
17
+ function B({
18
+ appearance: t = "default",
19
+ className: n = "",
20
+ compact: l = !1,
21
+ destructive: o = !1,
22
+ emphasis: d = "primary",
23
+ size: u = "medium"
20
24
  }) {
21
25
  return [
22
- a.button,
23
- a[`button--emphasis-${I(t)}`],
24
- a[`button--size-${I(d)}`],
25
- m === "inverted" ? a["button--appearance-inverted"] : "",
26
- n ? a["button--destructive"] : "",
27
- i
26
+ e.button,
27
+ e[`button--emphasis-${I(d)}`],
28
+ e[`button--size-${I(u)}`],
29
+ t === "inverted" ? e["button--appearance-inverted"] : "",
30
+ l ? e["button--compact"] : "",
31
+ o ? e["button--destructive"] : "",
32
+ n
28
33
  ].filter(Boolean).join(" ");
29
34
  }
30
- const Q = H(function(i, n) {
31
- if (i.asChild) {
35
+ const V = T(function(n, l) {
36
+ if (n.asChild) {
32
37
  const {
33
- appearance: f = "default",
34
- className: L = "",
35
- destructive: R = !1,
36
- emphasis: $ = "primary",
37
- children: F,
38
- leadingIcon: v,
38
+ appearance: v = "default",
39
+ className: $ = "",
40
+ compact: E = !1,
41
+ destructive: F = !1,
42
+ emphasis: K = "primary",
43
+ children: M,
44
+ leadingIcon: g,
39
45
  loading: s = !1,
40
- size: g = "medium",
41
- trailingIcon: N,
42
- disabled: K,
43
- asChild: W,
44
- ...M
45
- } = i, O = S({
46
- appearance: f,
47
- className: L,
48
- destructive: R,
49
- emphasis: $,
50
- size: g
51
- }), u = y[g], V = s || o(v), Z = !!(K || s), _ = F, k = V ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: s ? /* @__PURE__ */ e(
52
- C,
46
+ size: N = "medium",
47
+ trailingIcon: _,
48
+ disabled: O,
49
+ asChild: Y,
50
+ ...Z
51
+ } = n, k = B({
52
+ appearance: v,
53
+ className: $,
54
+ compact: E,
55
+ destructive: F,
56
+ emphasis: K,
57
+ size: N
58
+ }), p = S[N], q = s || c(g), G = !!(O || s), z = M, H = q ? /* @__PURE__ */ a(
59
+ "span",
53
60
  {
54
- size: u,
55
- inverted: f === "inverted"
61
+ className: e["button__icon-slot"],
62
+ "aria-hidden": s || void 0,
63
+ children: s ? /* @__PURE__ */ a(
64
+ y,
65
+ {
66
+ size: p,
67
+ inverted: v === "inverted"
68
+ }
69
+ ) : /* @__PURE__ */ a(r.Provider, { value: { size: p }, children: g })
56
70
  }
57
- ) : /* @__PURE__ */ e(r.Provider, { value: { size: u }, children: v }) }) : null, q = !s && o(N) ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(r.Provider, { value: { size: u }, children: N }) }) : null;
58
- return J({
59
- child: _,
71
+ ) : null, J = !s && c(_) ? /* @__PURE__ */ a("span", { className: e["button__icon-slot"], children: /* @__PURE__ */ a(r.Provider, { value: { size: p }, children: _ }) }) : null;
72
+ return U({
73
+ child: z,
60
74
  props: {
61
- ...M,
62
- className: O,
75
+ ...Z,
76
+ className: k,
63
77
  ...s ? { "aria-busy": !0 } : null
64
78
  },
65
- ref: n,
66
- content: /* @__PURE__ */ z(G, { children: [
67
- k,
68
- /* @__PURE__ */ e("span", { className: a.button__label, children: _.props.children }),
69
- q
79
+ ref: l,
80
+ content: /* @__PURE__ */ C(Q, { children: [
81
+ H,
82
+ /* @__PURE__ */ a("span", { className: e.button__label, children: z.props.children }),
83
+ J
70
84
  ] }),
71
- disabled: Z,
72
- disabledClassName: a["button--disabled"]
85
+ disabled: G,
86
+ disabledClassName: e["button--disabled"]
73
87
  });
74
88
  }
75
89
  const {
76
- appearance: t = "default",
90
+ appearance: o = "default",
77
91
  className: d = "",
78
- destructive: B = !1,
79
- emphasis: x = "primary",
80
- children: P,
81
- leadingIcon: p,
82
- loading: l = !1,
92
+ compact: u = !1,
93
+ destructive: x = !1,
94
+ emphasis: P = "primary",
95
+ children: j,
96
+ leadingIcon: b,
97
+ loading: i = !1,
83
98
  size: h = "medium",
84
- trailingIcon: b,
85
- disabled: j,
86
- type: w = "button",
87
- asChild: T,
88
- ...D
89
- } = i, A = S({
90
- appearance: t,
99
+ trailingIcon: f,
100
+ disabled: w,
101
+ type: D = "button",
102
+ asChild: W,
103
+ ...A
104
+ } = n, L = B({
105
+ appearance: o,
91
106
  className: d,
92
- destructive: B,
93
- emphasis: x,
107
+ compact: u,
108
+ destructive: x,
109
+ emphasis: P,
94
110
  size: h
95
- }), c = y[h], E = l || o(p);
96
- return /* @__PURE__ */ z(
111
+ }), m = S[h], R = i || c(b);
112
+ return /* @__PURE__ */ C(
97
113
  "button",
98
114
  {
99
- ref: n,
100
- className: A,
101
- type: w,
102
- disabled: !!(j || l),
103
- ...D,
115
+ ref: l,
116
+ className: L,
117
+ type: D,
118
+ disabled: !!(w || i),
119
+ ...A,
104
120
  children: [
105
- E ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: l ? /* @__PURE__ */ e(
106
- C,
121
+ R ? /* @__PURE__ */ a(
122
+ "span",
107
123
  {
108
- size: c,
109
- inverted: t === "inverted"
124
+ className: e["button__icon-slot"],
125
+ "aria-hidden": i || void 0,
126
+ children: i ? /* @__PURE__ */ a(
127
+ y,
128
+ {
129
+ size: m,
130
+ inverted: o === "inverted"
131
+ }
132
+ ) : /* @__PURE__ */ a(r.Provider, { value: { size: m }, children: b })
110
133
  }
111
- ) : /* @__PURE__ */ e(r.Provider, { value: { size: c }, children: p }) }) : null,
112
- /* @__PURE__ */ e("span", { className: a.button__label, children: P }),
113
- !l && o(b) ? /* @__PURE__ */ e("span", { className: a["button__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ e(r.Provider, { value: { size: c }, children: b }) }) : null
134
+ ) : null,
135
+ /* @__PURE__ */ a("span", { className: e.button__label, children: j }),
136
+ !i && c(f) ? /* @__PURE__ */ a("span", { className: e["button__icon-slot"], children: /* @__PURE__ */ a(r.Provider, { value: { size: m }, children: f }) }) : null
114
137
  ]
115
138
  }
116
139
  );
117
140
  });
118
- Q.displayName = "Button";
141
+ V.displayName = "Button";
119
142
  export {
120
- Q as default
143
+ V as default
121
144
  };
122
145
  //# sourceMappingURL=Button.js.map
package/dist/components/button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import {\n forwardRef,\n isValidElement,\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 | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\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 /** When true, uses destructive (danger) styling. */\n destructive?: boolean;\n /** Visual emphasis. Default: primary. */\n emphasis?: ButtonEmphasis;\n /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\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 /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button provides the correct size via context; no `size` prop needed on the Icon. */\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 destructive = false,\n emphasis = 'primary',\n size = 'medium',\n}: {\n appearance?: ButtonAppearance;\n className?: string;\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 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 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 destructive,\n emphasis,\n size,\n });\n const iconSize = SIZE_ICON_MAP[size];\n const showLeadingSlot = loading || isValidElement(leadingIcon);\n const isDisabled = Boolean(disabled || loading);\n const child = children as ReactElement<{ children?: ReactNode }>;\n\n const leading = showLeadingSlot ? (\n <span className={styles['button__icon-slot']} aria-hidden>\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 && isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\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 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 destructive,\n emphasis,\n size,\n });\n const iconSize = SIZE_ICON_MAP[size];\n const showLeadingSlot = loading || isValidElement(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 className={styles['button__icon-slot']} aria-hidden>\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 && isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\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":["SIZE_ICON_MAP","buildRootClass","appearance","className","destructive","emphasis","size","styles","toKebab","Button","forwardRef","props","ref","children","leadingIcon","loading","trailingIcon","disabled","asChild","rest","rootClass","iconSize","showLeadingSlot","isValidElement","isDisabled","child","leading","jsx","Spinner","IconSlotContext","trailing","renderAsChild","jsxs","Fragment","type"],"mappings":"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"}
1
+ {"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 CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_aa8j5_2",a="_button__label_aa8j5_31",e={button:t,"button--disabled":"_button--disabled_aa8j5_28",button__label:a,"button__icon-slot":"_button__icon-slot_aa8j5_35","button--size-x-small":"_button--size-x-small_aa8j5_42","button--size-small":"_button--size-small_aa8j5_49","button--size-medium":"_button--size-medium_aa8j5_56","button--size-large":"_button--size-large_aa8j5_63","button--emphasis-primary":"_button--emphasis-primary_aa8j5_70","button--emphasis-secondary":"_button--emphasis-secondary_aa8j5_84","button--emphasis-tertiary":"_button--emphasis-tertiary_aa8j5_100","button--emphasis-quaternary":"_button--emphasis-quaternary_aa8j5_114","button--emphasis-link":"_button--emphasis-link_aa8j5_127","button--destructive":"_button--destructive_aa8j5_141","button--appearance-inverted":"_button--appearance-inverted_aa8j5_204"};exports.button=t;exports.button__label=a;exports.default=e;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.css');const t="_button_we8pe_2",e="_button__label_we8pe_31",_={button:t,"button--disabled":"_button--disabled_we8pe_28",button__label:e,"button__icon-slot":"_button__icon-slot_we8pe_35","button--size-x-small":"_button--size-x-small_we8pe_42","button--compact":"_button--compact_we8pe_50","button--size-small":"_button--size-small_we8pe_53","button--size-medium":"_button--size-medium_we8pe_64","button--size-large":"_button--size-large_we8pe_75","button--emphasis-primary":"_button--emphasis-primary_we8pe_87","button--emphasis-secondary":"_button--emphasis-secondary_we8pe_101","button--emphasis-tertiary":"_button--emphasis-tertiary_we8pe_117","button--emphasis-quaternary":"_button--emphasis-quaternary_we8pe_131","button--emphasis-dim":"_button--emphasis-dim_we8pe_144","button--emphasis-link":"_button--emphasis-link_we8pe_159","button--destructive":"_button--destructive_we8pe_176","button--appearance-inverted":"_button--appearance-inverted_we8pe_253"};exports.button=t;exports.button__label=e;exports.default=_;
2
2
  //# sourceMappingURL=Button.module.scss.cjs.map
package/dist/components/button/Button.module.scss.js CHANGED
@@ -1,23 +1,25 @@
1
- import './Button.css';const t = "_button_aa8j5_2", a = "_button__label_aa8j5_31", _ = {
1
+ import './Button.css';const t = "_button_we8pe_2", e = "_button__label_we8pe_31", _ = {
2
2
  button: t,
3
- "button--disabled": "_button--disabled_aa8j5_28",
4
- button__label: a,
5
- "button__icon-slot": "_button__icon-slot_aa8j5_35",
6
- "button--size-x-small": "_button--size-x-small_aa8j5_42",
7
- "button--size-small": "_button--size-small_aa8j5_49",
8
- "button--size-medium": "_button--size-medium_aa8j5_56",
9
- "button--size-large": "_button--size-large_aa8j5_63",
10
- "button--emphasis-primary": "_button--emphasis-primary_aa8j5_70",
11
- "button--emphasis-secondary": "_button--emphasis-secondary_aa8j5_84",
12
- "button--emphasis-tertiary": "_button--emphasis-tertiary_aa8j5_100",
13
- "button--emphasis-quaternary": "_button--emphasis-quaternary_aa8j5_114",
14
- "button--emphasis-link": "_button--emphasis-link_aa8j5_127",
15
- "button--destructive": "_button--destructive_aa8j5_141",
16
- "button--appearance-inverted": "_button--appearance-inverted_aa8j5_204"
3
+ "button--disabled": "_button--disabled_we8pe_28",
4
+ button__label: e,
5
+ "button__icon-slot": "_button__icon-slot_we8pe_35",
6
+ "button--size-x-small": "_button--size-x-small_we8pe_42",
7
+ "button--compact": "_button--compact_we8pe_50",
8
+ "button--size-small": "_button--size-small_we8pe_53",
9
+ "button--size-medium": "_button--size-medium_we8pe_64",
10
+ "button--size-large": "_button--size-large_we8pe_75",
11
+ "button--emphasis-primary": "_button--emphasis-primary_we8pe_87",
12
+ "button--emphasis-secondary": "_button--emphasis-secondary_we8pe_101",
13
+ "button--emphasis-tertiary": "_button--emphasis-tertiary_we8pe_117",
14
+ "button--emphasis-quaternary": "_button--emphasis-quaternary_we8pe_131",
15
+ "button--emphasis-dim": "_button--emphasis-dim_we8pe_144",
16
+ "button--emphasis-link": "_button--emphasis-link_we8pe_159",
17
+ "button--destructive": "_button--destructive_we8pe_176",
18
+ "button--appearance-inverted": "_button--appearance-inverted_we8pe_253"
17
19
  };
18
20
  export {
19
21
  t as button,
20
- a as button__label,
22
+ e as button__label,
21
23
  _ as default
22
24
  };
23
25
  //# sourceMappingURL=Button.module.scss.js.map
package/dist/components/button/Button.module.scss.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Button.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mattermost/compass-ui",
3
- "version": "0.1.0-alpha.19",
3
+ "version": "0.1.0-alpha.20",
4
4
  "description": "Compass design system UI components for Mattermost products",
5
5
  "repository": {
6
6
  "type": "git",