@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/button/CompoundButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.mjs","names":["_Fragment","paddingClasses","iconBoxClasses","BaseButton","Button","CompoundButton","rest","props","label","materialiseSlotContent","children","secondary","secondaryText","hasSecondary","slotRendersContent","iconElement","renderSlot","icon","cn","size","content","appearance","className","iconPosition","Fragment"],"sources":["../../../src/components/button/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\n\n/**\n * The CompoundButton's own props (the XOwnProps rule of `PolymorphicProps`: component-specific\n * props only). Every other prop comes from the rendered element (`as`).\n */\nexport interface CompoundButtonOwnProps {\n  /**\n   * Secondary descriptive text displayed below the main label (part of the accessible name).\n   * Content that renders nothing (`''`, `[]`, `<></>`) renders no second line.\n   */\n  secondaryText?: React.ReactNode;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Disables the button. As with {@link Button}: a native `disabled` attribute for form controls\n   * (the default `button`); every other `as` gets `aria-disabled=\"true\"` and `tabIndex={-1}`, its\n   * activation is prevented and an `<a>` drops its `href`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order (for a Tooltip\n   * that explains why, or a toolbar). Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute; clicks, Enter, Space\n   * and implicit form submission are prevented, and your `onClick` is not called. Wins over\n   * `disabled` when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon shown beside the two lines of text, in a 40px box (32px at `small`, 24px at\n   * `extra-small`) whose SVG fills it. Decorative (`aria-hidden`). A CompoundButton with only an\n   * icon (no label, no `secondaryText`) is an icon-only button: it looks and is checked like an\n   * icon-only `Button` and needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the text column (the inline start) or after it (the inline\n   * end). Follows the writing direction through DOM order. Has no effect without an icon or on\n   * an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n}\n\n/**\n * Props of {@link CompoundButton} rendered as `C` (default `'button'`). `CompoundButtonProps`\n * without a type argument is the 0.4 name: the props of a CompoundButton rendered as a\n * `<button>`, including `ref`.\n */\nexport type CompoundButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  CompoundButtonOwnProps\n>;\n\n/**\n * Vertical padding per size. The height is content-sized (`h-auto` replaces Button's fixed\n * height); horizontal padding and font size come from Button.\n */\nconst paddingClasses: Record<Size, string> = {\n  'extra-small': 'py-0.5',\n  small: 'py-1',\n  medium: 'py-2',\n  large: 'py-3',\n  'extra-large': 'py-4',\n};\n\n/** The icon box per size (its SVG fills it): 24px at extra-small, 32px at small, else 40px. */\nconst iconBoxClasses: Record<Size, string> = {\n  'extra-small': 'size-6',\n  small: 'size-8',\n  medium: 'size-10',\n  large: 'size-10',\n  'extra-large': 'size-10',\n};\n\n/** The props the implementation reads, for any `as`. */\ntype CompoundButtonImplProps = CompoundButtonOwnProps & {\n  as?: React.ElementType;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/** `Button` widened to any element props, so `as` and the rest props pass through untyped. */\nconst BaseButton = Button as React.ElementType;\n\n/**\n * A button with a main label and a secondary line of text below it, and an optional icon beside\n * them. Built on {@link Button}: same appearances, sizes, token colors, `type=\"button\"` default,\n * `disabled`/`disabledFocusable` and polymorphic `as` behaviour (`as=\"a\"` renders a link; a\n * non-interactive `as` gets `role=\"button\"`, a tab stop and Enter/Space activation; `disabled`\n * becomes `aria-disabled` on non-form-control elements).\n *\n * - The text lines sit in a column wrapper (`span[data-wave-compound-content]`); the icon renders\n *   before or after it (`iconPosition`).\n * - With only an icon (no label and no `secondaryText`) it is an icon-only `Button`: square, with\n *   the icon-only sizing and name check.\n *\n * @example\n * <CompoundButton secondaryText=\"Opens your email client\">Send mail</CompoundButton>\n * <CompoundButton icon={<CalendarIcon />} secondaryText=\"Next Monday at 9:00\">\n *   Schedule\n * </CompoundButton>\n * <CompoundButton as=\"a\" href=\"/signup\" appearance=\"primary\" secondaryText=\"Free for 30 days\">\n *   Create account\n * </CompoundButton>\n */\nexport const CompoundButton: PolymorphicComponent<'button', CompoundButtonOwnProps> = (props) => {\n  const {\n    secondaryText,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    className,\n    children,\n    ...rest\n  } = props as CompoundButtonImplProps;\n  // Content that renders nothing (`''`, `[]`, `<></>`) counts as absent; a generator is read once\n  // by the check and its items render.\n  const label = materialiseSlotContent(children);\n  const secondary = materialiseSlotContent(secondaryText);\n  const hasSecondary = slotRendersContent(secondary);\n\n  // Without any text it is an icon-only (or empty) Button: Button's own sizing and name check.\n  if (!slotRendersContent(label) && !hasSecondary) {\n    return (\n      <BaseButton\n        {...rest}\n        appearance={appearance}\n        size={size}\n        icon={icon}\n        iconPosition={iconPosition}\n        className={className}\n      />\n    );\n  }\n\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    cn('inline-flex shrink-0 items-center justify-center [&>svg]:size-full', iconBoxClasses[size]),\n    { 'aria-hidden': true },\n  );\n  const content = (\n    <span data-wave-compound-content=\"\" className=\"flex min-w-0 flex-col items-start\">\n      <span className=\"font-bold\">{label}</span>\n      {hasSecondary && (\n        <span\n          className={cn(\n            'text-caption-1 font-normal',\n            appearance === 'primary' ? 'text-primary-foreground' : 'text-muted-foreground',\n          )}\n        >\n          {secondary}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <BaseButton\n      {...rest}\n      appearance={appearance}\n      size={size}\n      className={cn(\n        'h-auto items-center justify-start gap-3 text-start',\n        paddingClasses[size],\n        className,\n      )}\n    >\n      {iconPosition === 'after' ? (\n        <>\n          {content}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {content}\n        </>\n      )}\n    </BaseButton>\n  );\n};\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":";;;;;;;AAuEA,IAAMC,IAAuC;CAC3C,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAGMC,IAAuC;CAC3C,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAUMC,IAAaC,GAuBNC,KAA0E,MAAU;CAC/F,IAAM,EACJ,kBACA,gBAAa,WACb,UAAO,UACP,SACA,kBAAe,UACf,cACA,aACA,GAAGC,MACDC,GAGEC,IAAQC,EAAuBC,CAAQ,GACvCC,IAAYF,EAAuBG,CAAa,GAChDC,IAAeC,EAAmBH,CAAS;CAGjD,IAAI,CAACG,EAAmBN,CAAK,KAAK,CAACK,GACjC,OACE,kBAACV,GAAD;EACE,GAAIG;EACQ;EACN;EACA;EACQ;EACH;CACZ,CAAA;CAIL,IAAMS,IAAcC,EAClBF,EAAmBG,CAAI,IAAIA,IAAO,KAAA,GAClC,QACAC,EAAG,sEAAsEhB,EAAeiB,EAAK,GAC7F,EAAE,eAAe,GAAK,CACxB,GACMC,IACJ,kBAAC,QAAD;EAAM,8BAA2B;EAAG,WAAU;EAA9C,UAAA,CACE,kBAAC,QAAD;GAAM,WAAU;GAAa,UAAAZ;EAAY,CAAA,GACxCK,KACC,kBAAC,QAAD;GACE,WAAWK,EACT,8BACAG,MAAe,YAAY,4BAA4B,uBACzD;GAEC,UAAAV;EACG,CAAA,CAEJ;;CAGR,OACE,kBAACR,GAAD;EACE,GAAIG;EACQ;EACN;EACN,WAAWY,EACT,sDACAjB,EAAekB,IACfG,CACF;EAEC,UAAAC,MAAiB,UAChB,kBAAAvB,GAAA,EAAA,UAAA,CACGoB,GACAL,CACD,EAAA,CAAA,IAEF,kBAAAf,GAAA,EAAA,UAAA,CACGe,GACAK,CACD,EAAA,CAAA;CAEM,CAAA;AAEhB;AAEA,EAAe,cAAc"}
+{"version":3,"file":"CompoundButton.mjs","names":["_Fragment","paddingClasses","iconBoxClasses","BaseButton","Button","CompoundButton","rest","props","label","materialiseSlotContent","children","secondary","secondaryText","hasSecondary","slotRendersContent","withPartClass","icon","compoundButtonClassNames","cn","className","iconElement","renderSlot","buttonClassNames","size","content","appearance","iconPosition","Fragment"],"sources":["../../../src/components/button/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { buttonClassNames, compoundButtonClassNames } from '../../lib/classNames';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { withPartClass } from './Button.slots';\n\n/**\n * The CompoundButton's own props (the XOwnProps rule of `PolymorphicProps`: component-specific\n * props only). Every other prop comes from the rendered element (`as`).\n */\nexport interface CompoundButtonOwnProps {\n  /**\n   * Secondary descriptive text displayed below the main label (part of the accessible name).\n   * Content that renders nothing (`''`, `[]`, `<></>`) renders no second line.\n   */\n  secondaryText?: React.ReactNode;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Disables the button. As with {@link Button}: a native `disabled` attribute for form controls\n   * (the default `button`); every other `as` gets `aria-disabled=\"true\"` and `tabIndex={-1}`, its\n   * activation is prevented and an `<a>` drops its `href`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order (for a Tooltip\n   * that explains why, or a toolbar). Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute; clicks, Enter, Space\n   * and implicit form submission are prevented, and your `onClick` is not called. Wins over\n   * `disabled` when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon shown beside the two lines of text, in a 40px box (32px at `small`, 24px at\n   * `extra-small`) whose SVG fills it. Decorative (`aria-hidden`). A CompoundButton with only an\n   * icon (no label, no `secondaryText`) is an icon-only button: it looks and is checked like an\n   * icon-only `Button` and needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the text column (the inline start) or after it (the inline\n   * end). Follows the writing direction through DOM order. Has no effect without an icon or on\n   * an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n}\n\n/**\n * Props of {@link CompoundButton} rendered as `C` (default `'button'`). `CompoundButtonProps`\n * without a type argument is the 0.4 name: the props of a CompoundButton rendered as a\n * `<button>`, including `ref`.\n */\nexport type CompoundButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  CompoundButtonOwnProps\n>;\n\n/**\n * Vertical padding per size. The height is content-sized (`h-auto` replaces Button's fixed\n * height); horizontal padding and font size come from Button.\n */\nconst paddingClasses: Record<Size, string> = {\n  'extra-small': 'py-0.5',\n  small: 'py-1',\n  medium: 'py-2',\n  large: 'py-3',\n  'extra-large': 'py-4',\n};\n\n/** The icon box per size (its SVG fills it): 24px at extra-small, 32px at small, else 40px. */\nconst iconBoxClasses: Record<Size, string> = {\n  'extra-small': 'size-6',\n  small: 'size-8',\n  medium: 'size-10',\n  large: 'size-10',\n  'extra-large': 'size-10',\n};\n\n/** The props the implementation reads, for any `as`. */\ntype CompoundButtonImplProps = CompoundButtonOwnProps & {\n  as?: React.ElementType;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/** `Button` widened to any element props, so `as` and the rest props pass through untyped. */\nconst BaseButton = Button as React.ElementType;\n\n/**\n * A button with a main label and a secondary line of text below it, and an optional icon beside\n * them. Built on {@link Button}: same appearances, sizes, token colors, `type=\"button\"` default,\n * `disabled`/`disabledFocusable` and polymorphic `as` behaviour (`as=\"a\"` renders a link; a\n * non-interactive `as` gets `role=\"button\"`, a tab stop and Enter/Space activation; `disabled`\n * becomes `aria-disabled` on non-form-control elements).\n *\n * - The text lines sit in a column wrapper (`span[data-wave-compound-content]`); the icon renders\n *   before or after it (`iconPosition`).\n * - With only an icon (no label and no `secondaryText`) it is an icon-only `Button`: square, with\n *   the icon-only sizing and name check.\n *\n * @example\n * <CompoundButton secondaryText=\"Opens your email client\">Send mail</CompoundButton>\n * <CompoundButton icon={<CalendarIcon />} secondaryText=\"Next Monday at 9:00\">\n *   Schedule\n * </CompoundButton>\n * <CompoundButton as=\"a\" href=\"/signup\" appearance=\"primary\" secondaryText=\"Free for 30 days\">\n *   Create account\n * </CompoundButton>\n */\nexport const CompoundButton: PolymorphicComponent<'button', CompoundButtonOwnProps> = (props) => {\n  const {\n    secondaryText,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    className,\n    children,\n    ...rest\n  } = props as CompoundButtonImplProps;\n  // Content that renders nothing (`''`, `[]`, `<></>`) counts as absent; a generator is read once\n  // by the check and its items render.\n  const label = materialiseSlotContent(children);\n  const secondary = materialiseSlotContent(secondaryText);\n  const hasSecondary = slotRendersContent(secondary);\n\n  // Without any text it is an icon-only (or empty) Button: Button's own sizing and name check.\n  if (!slotRendersContent(label) && !hasSecondary) {\n    return (\n      <BaseButton\n        {...rest}\n        appearance={appearance}\n        size={size}\n        icon={withPartClass(icon, compoundButtonClassNames.icon)}\n        iconPosition={iconPosition}\n        className={cn(compoundButtonClassNames.root, className)}\n      />\n    );\n  }\n\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    cn(\n      buttonClassNames.icon,\n      compoundButtonClassNames.icon,\n      'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n      iconBoxClasses[size],\n    ),\n    { 'aria-hidden': true },\n  );\n  const content = (\n    <span\n      data-wave-compound-content=\"\"\n      className={cn(compoundButtonClassNames.contentContainer, 'flex min-w-0 flex-col items-start')}\n    >\n      <span className={cn(compoundButtonClassNames.primaryText, 'font-bold')}>{label}</span>\n      {hasSecondary && (\n        <span\n          className={cn(\n            compoundButtonClassNames.secondaryText,\n            'text-caption-1 font-normal',\n            appearance === 'primary' ? 'text-primary-foreground' : 'text-muted-foreground',\n          )}\n        >\n          {secondary}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <BaseButton\n      {...rest}\n      appearance={appearance}\n      size={size}\n      className={cn(\n        compoundButtonClassNames.root,\n        'h-auto items-center justify-start gap-3 text-start',\n        paddingClasses[size],\n        className,\n      )}\n    >\n      {iconPosition === 'after' ? (\n        <>\n          {content}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {content}\n        </>\n      )}\n    </BaseButton>\n  );\n};\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":";;;;;;;;;AAyEA,IAAMC,IAAuC;CAC3C,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAGMC,IAAuC;CAC3C,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAUMC,IAAaC,GAuBNC,KAA0E,MAAU;CAC/F,IAAM,EACJ,kBACA,gBAAa,WACb,UAAO,UACP,SACA,kBAAe,UACf,cACA,aACA,GAAGC,MACDC,GAGEC,IAAQC,EAAuBC,CAAQ,GACvCC,IAAYF,EAAuBG,CAAa,GAChDC,IAAeC,EAAmBH,CAAS;CAGjD,IAAI,CAACG,EAAmBN,CAAK,KAAK,CAACK,GACjC,OACE,kBAACV,GAAD;EACE,GAAIG;EACQ;EACN;EACN,MAAMS,EAAcC,GAAMC,EAAyB,IAAI;EACzC;EACd,WAAWC,EAAGD,EAAyB,MAAME,CAAS;CACvD,CAAA;CAIL,IAAMC,IAAcC,EAClBP,EAAmBE,CAAI,IAAIA,IAAO,KAAA,GAClC,QACAE,EACEI,EAAiB,MACjBL,EAAyB,MACzB,sEACAf,EAAeqB,EACjB,GACA,EAAE,eAAe,GAAK,CACxB,GACMC,IACJ,kBAAC,QAAD;EACE,8BAA2B;EAC3B,WAAWN,EAAGD,EAAyB,kBAAkB,mCAAmC;EAF9F,UAAA,CAIE,kBAAC,QAAD;GAAM,WAAWC,EAAGD,EAAyB,aAAa,WAAW;GAAI,UAAAT;EAAY,CAAA,GACpFK,KACC,kBAAC,QAAD;GACE,WAAWK,EACTD,EAAyB,eACzB,8BACAQ,MAAe,YAAY,4BAA4B,uBACzD;GAEC,UAAAd;EACG,CAAA,CAEJ;;CAGR,OACE,kBAACR,GAAD;EACE,GAAIG;EACQ;EACN;EACN,WAAWY,EACTD,EAAyB,MACzB,sDACAhB,EAAesB,IACfJ,CACF;EAEC,UAAAO,MAAiB,UAChB,kBAAA1B,GAAA,EAAA,UAAA,CACGwB,GACAJ,CACD,EAAA,CAAA,IAEF,kBAAApB,GAAA,EAAA,UAAA,CACGoB,GACAI,CACD,EAAA,CAAA;CAEM,CAAA;AAEhB;AAEA,EAAe,cAAc"}

package/dist/components/button/Link.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("./Button.semantics.cjs"),i=require("../../lib/styles.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s={inline:`text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2`,standalone:`font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`,subtle:`text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`},c=e=>{let{as:a,appearance:c,variant:l,disabled:u=!1,disabledFocusable:d=!1,className:f,onClick:p,onKeyDown:m,onKeyUp:h,onBlur:g,ref:_,...v}=e,y=n.resolveDeprecatedProp(`Link`,c,l,`variant`,`appearance`)??`inline`,b=a??`a`,{defaults:x,enforced:S,handlers:C}=r.useButtonSemantics({tag:typeof b==`string`?b:null,href:v.href,disabled:u,disabledFocusable:d,onClick:p,onKeyDown:m,onKeyUp:h,onBlur:g}),w={...v};for(let[e,t]of Object.entries(x))w[e]??=t;return(0,o.jsx)(b,{...w,...C,ref:_,className:t.cn(`cursor-pointer transition-colors motion-reduce:transition-none`,i.focusRing,s[y],(u||d)&&`cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100`,f),...S})};c.displayName=`Link`,exports.Link=c;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("./Button.semantics.cjs"),a=require("../../lib/styles.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c={inline:`text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2`,standalone:`font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`,subtle:`text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`},l=e=>{let{as:o,appearance:l,variant:u,disabled:d=!1,disabledFocusable:f=!1,className:p,onClick:m,onKeyDown:h,onKeyUp:g,onBlur:_,ref:v,...y}=e,b=n.resolveDeprecatedProp(`Link`,l,u,`variant`,`appearance`)??`inline`,x=o??`a`,{defaults:S,enforced:C,handlers:w}=i.useButtonSemantics({tag:typeof x==`string`?x:null,href:y.href,disabled:d,disabledFocusable:f,onClick:m,onKeyDown:h,onKeyUp:g,onBlur:_}),T={...y};for(let[e,t]of Object.entries(S))T[e]??=t;return(0,s.jsx)(x,{...T,...w,ref:v,className:t.cn(r.linkClassNames.root,`cursor-pointer transition-colors motion-reduce:transition-none`,a.focusRing,c[b],(d||f)&&`cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100`,p),...C})};l.displayName=`Link`,exports.Link=l;
 //# sourceMappingURL=Link.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","names":["resolveDeprecatedProp","useButtonSemantics","cn","focusRing","require_runtime","require_cn","require_dev","require_Button_semantics","require_styles","react","react_jsx_runtime","appearanceClasses","Link","appearanceProp","rest","props","appearance","variant","Component","as","elementProps","key","value","defaults","handlers","disabled","disabledFocusable","className","enforced"],"sources":["../../../src/components/button/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { focusRing } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useButtonSemantics } from './Button.semantics';\n\n/**\n * Color treatment of a {@link Link}.\n *\n * - `inline` (default): for links in running text. Always underlined (the underline thickens on\n *   hover and focus), because the link color alone does not stand out enough from body text.\n * - `standalone`: semibold, underlined on hover/focus only. Use it only where the position or\n *   container already marks the text as a link (a list of links, a card footer, navigation).\n * - `subtle`: foreground color, underlined on hover/focus only. It cannot be told apart from body\n *   text, so never use it inside a paragraph; only where the context makes the link obvious.\n */\nexport type LinkAppearance = 'inline' | 'standalone' | 'subtle';\n\n/** @deprecated Use {@link LinkAppearance}. */\nexport type LinkVariant = LinkAppearance;\n\n/**\n * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `'a'`).\n */\nexport interface LinkOwnProps {\n  /** Color treatment (see {@link LinkAppearance} for where each one may be used).\n   * @default 'inline'\n   */\n  appearance?: LinkAppearance;\n  /** @deprecated Use `appearance` (same values). */\n  variant?: LinkVariant;\n  /**\n   * Makes the link unavailable. An `<a>` drops its `href` (no navigation by middle-click, the\n   * context menu or drag), keeps `role=\"link\"` (`role=\"button\"` when it had no `href`), and gets\n   * `aria-disabled=\"true\"`, `data-disabled` and `tabIndex={-1}` (none can be overridden); a custom\n   * `as` (router link) gets the same attributes. Clicks, Enter and Space are prevented: your\n   * `onClick` is not called and the click does not reach ancestor click handlers. `as=\"button\"`\n   * uses the native `disabled` attribute.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link unavailable but keeps it focusable and in the tab order: for a toolbar item or\n   * a disabled link that needs a Tooltip. Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable`; an `<a>` drops its `href`, keeps `role=\"link\"` (`role=\"button\"`\n   * when it had no `href`) and gets `tabIndex={0}`, and `as=\"button\"` gets these attributes\n   * instead of the native `disabled`.\n   * Clicks, Enter and Space are prevented; your `onClick` is not called and the click does not\n   * reach ancestor click handlers. Wins over `disabled` when both are set. In a `Toolbar` it stays\n   * in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n}\n\n/**\n * Props of {@link Link} rendered as `C` (default `'a'`). `LinkProps` without a type argument is\n * the 0.4 name: the props of a Link rendered as an `<a>`, including `ref`.\n */\nexport type LinkProps<C extends React.ElementType = 'a'> = PolymorphicProps<C, LinkOwnProps>;\n\n/** The props the implementation reads, for any `as`. */\ntype LinkImplProps = LinkOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** The destination: without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\nconst appearanceClasses: Record<LinkAppearance, string> = {\n  inline:\n    'text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2',\n  standalone:\n    'font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n  subtle:\n    'text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n};\n\n/**\n * A hyperlink with Fluent link styling. Renders an `<a>` by default; `as` renders a router link\n * (`<Link as={RouterLink} to=\"/\">`) or a `<button>` styled as a link (`type=\"button\"` by default).\n *\n * - Without `href`, the `<a>` runs an action instead of navigating (\"Show more\"): it keeps its\n *   element and gets `role=\"button\"`, a tab stop and Enter/Space activation (the consumer's\n *   `role` and `tabIndex` win). A non-interactive `as` (`span`, `div`) is treated the same way;\n *   any `href` string, `''` included, keeps the link semantics.\n *\n * @example\n * <p>Read the <Link href=\"/docs\">documentation</Link> first.</p>\n * <Link appearance=\"standalone\" href=\"/pricing\">See pricing</Link>\n * <Link onClick={showMore}>Show more</Link>\n */\nexport const Link: PolymorphicComponent<'a', LinkOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    variant,\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ref,\n    ...rest\n  } = props as LinkImplProps;\n\n  const appearance =\n    resolveDeprecatedProp('Link', appearanceProp, variant, 'variant', 'appearance') ?? 'inline';\n\n  const Component: React.ElementType = as ?? 'a';\n  const tag = typeof Component === 'string' ? Component : null;\n  // The activation semantics of Button: an `<a>` without `href` or a `span` is a button, and a\n  // disabled link blocks its click (ancestors included), Enter and Space.\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE).\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        'cursor-pointer transition-colors motion-reduce:transition-none',\n        focusRing,\n        appearanceClasses[appearance],\n        // Full opacity while a focusable disabled link shows its focus ring, which `opacity`\n        // would dim below 3:1 (as for buttons).\n        (disabled || disabledFocusable) &&\n          'cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100',\n        className,\n      )}\n      {...enforced}\n    />\n  );\n};\n\nLink.displayName = 'Link';\n"],"mappings":"mRA2EA,IAAMW,EAAoD,CACxD,OACE,sGACF,WACE,iHACF,OACE,qGACJ,EAgBaC,EAAiD,GAAU,CACtE,GAAM,CACJ,KACA,WAAYC,EACZ,UACA,WAAW,GACX,oBAAoB,GACpB,YACA,UACA,YACA,UACA,SACA,MACA,GAAGC,GACDC,EAEEC,EACJhB,EAAAA,sBAAsB,OAAQa,EAAgBI,EAAS,UAAW,YAAY,GAAK,SAE/EC,EAA+BC,GAAM,IAIrC,CAAE,WAAU,WAAU,YAAalB,EAAAA,mBAAmB,CAC1D,IAJU,OAAOiB,GAAc,SAAWA,EAAY,KAKtD,KAAMJ,EAAK,KACX,WACA,oBACA,UACA,YACA,UACA,QACF,CAAC,EAGKM,EAAwC,CAAE,GAAGN,CAAK,EACxD,IAAK,GAAM,CAACO,EAAKC,KAAU,OAAO,QAAQC,CAAQ,EAAG,EAAaF,KAASC,EAE3E,OACE,EAAAZ,EAAA,IAAA,CAACQ,EAAD,CACE,GAAIE,EACJ,GAAII,EACC,MACL,UAAWtB,EAAAA,GACT,iEACAC,EAAAA,UACAQ,EAAkBK,IAGjBS,GAAYC,IACX,wEACFC,CACF,EACA,GAAIC,CACL,CAAA,CAEL,EAEA,EAAK,YAAc"}
+{"version":3,"file":"Link.cjs","names":["resolveDeprecatedProp","useButtonSemantics","cn","linkClassNames","focusRing","require_runtime","require_cn","require_dev","require_classNames","require_Button_semantics","require_styles","react","react_jsx_runtime","appearanceClasses","Link","appearanceProp","rest","props","appearance","variant","Component","as","elementProps","key","value","defaults","handlers","disabled","disabledFocusable","className","enforced"],"sources":["../../../src/components/button/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { linkClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { focusRing } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useButtonSemantics } from './Button.semantics';\n\n/**\n * Color treatment of a {@link Link}.\n *\n * - `inline` (default): for links in running text. Always underlined (the underline thickens on\n *   hover and focus), because the link color alone does not stand out enough from body text.\n * - `standalone`: semibold, underlined on hover/focus only. Use it only where the position or\n *   container already marks the text as a link (a list of links, a card footer, navigation).\n * - `subtle`: foreground color, underlined on hover/focus only. It cannot be told apart from body\n *   text, so never use it inside a paragraph; only where the context makes the link obvious.\n */\nexport type LinkAppearance = 'inline' | 'standalone' | 'subtle';\n\n/** @deprecated Use {@link LinkAppearance}. */\nexport type LinkVariant = LinkAppearance;\n\n/**\n * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `'a'`).\n */\nexport interface LinkOwnProps {\n  /** Color treatment (see {@link LinkAppearance} for where each one may be used).\n   * @default 'inline'\n   */\n  appearance?: LinkAppearance;\n  /** @deprecated Use `appearance` (same values). */\n  variant?: LinkVariant;\n  /**\n   * Makes the link unavailable. An `<a>` drops its `href` (no navigation by middle-click, the\n   * context menu or drag), keeps `role=\"link\"` (`role=\"button\"` when it had no `href`), and gets\n   * `aria-disabled=\"true\"`, `data-disabled` and `tabIndex={-1}` (none can be overridden); a custom\n   * `as` (router link) gets the same attributes. Clicks, Enter and Space are prevented: your\n   * `onClick` is not called and the click does not reach ancestor click handlers. `as=\"button\"`\n   * uses the native `disabled` attribute.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link unavailable but keeps it focusable and in the tab order: for a toolbar item or\n   * a disabled link that needs a Tooltip. Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable`; an `<a>` drops its `href`, keeps `role=\"link\"` (`role=\"button\"`\n   * when it had no `href`) and gets `tabIndex={0}`, and `as=\"button\"` gets these attributes\n   * instead of the native `disabled`.\n   * Clicks, Enter and Space are prevented; your `onClick` is not called and the click does not\n   * reach ancestor click handlers. Wins over `disabled` when both are set. In a `Toolbar` it stays\n   * in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n}\n\n/**\n * Props of {@link Link} rendered as `C` (default `'a'`). `LinkProps` without a type argument is\n * the 0.4 name: the props of a Link rendered as an `<a>`, including `ref`.\n */\nexport type LinkProps<C extends React.ElementType = 'a'> = PolymorphicProps<C, LinkOwnProps>;\n\n/** The props the implementation reads, for any `as`. */\ntype LinkImplProps = LinkOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** The destination: without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\nconst appearanceClasses: Record<LinkAppearance, string> = {\n  inline:\n    'text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2',\n  standalone:\n    'font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n  subtle:\n    'text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n};\n\n/**\n * A hyperlink with Fluent link styling. Renders an `<a>` by default; `as` renders a router link\n * (`<Link as={RouterLink} to=\"/\">`) or a `<button>` styled as a link (`type=\"button\"` by default).\n *\n * - Without `href`, the `<a>` runs an action instead of navigating (\"Show more\"): it keeps its\n *   element and gets `role=\"button\"`, a tab stop and Enter/Space activation (the consumer's\n *   `role` and `tabIndex` win). A non-interactive `as` (`span`, `div`) is treated the same way;\n *   any `href` string, `''` included, keeps the link semantics.\n *\n * @example\n * <p>Read the <Link href=\"/docs\">documentation</Link> first.</p>\n * <Link appearance=\"standalone\" href=\"/pricing\">See pricing</Link>\n * <Link onClick={showMore}>Show more</Link>\n */\nexport const Link: PolymorphicComponent<'a', LinkOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    variant,\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ref,\n    ...rest\n  } = props as LinkImplProps;\n\n  const appearance =\n    resolveDeprecatedProp('Link', appearanceProp, variant, 'variant', 'appearance') ?? 'inline';\n\n  const Component: React.ElementType = as ?? 'a';\n  const tag = typeof Component === 'string' ? Component : null;\n  // The activation semantics of Button: an `<a>` without `href` or a `span` is a button, and a\n  // disabled link blocks its click (ancestors included), Enter and Space.\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE).\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        linkClassNames.root,\n        'cursor-pointer transition-colors motion-reduce:transition-none',\n        focusRing,\n        appearanceClasses[appearance],\n        // Full opacity while a focusable disabled link shows its focus ring, which `opacity`\n        // would dim below 3:1 (as for buttons).\n        (disabled || disabledFocusable) &&\n          'cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100',\n        className,\n      )}\n      {...enforced}\n    />\n  );\n};\n\nLink.displayName = 'Link';\n"],"mappings":"yTA4EA,IAAMa,EAAoD,CACxD,OACE,sGACF,WACE,iHACF,OACE,qGACJ,EAgBaC,EAAiD,GAAU,CACtE,GAAM,CACJ,KACA,WAAYC,EACZ,UACA,WAAW,GACX,oBAAoB,GACpB,YACA,UACA,YACA,UACA,SACA,MACA,GAAGC,GACDC,EAEEC,EACJlB,EAAAA,sBAAsB,OAAQe,EAAgBI,EAAS,UAAW,YAAY,GAAK,SAE/EC,EAA+BC,GAAM,IAIrC,CAAE,WAAU,WAAU,YAAapB,EAAAA,mBAAmB,CAC1D,IAJU,OAAOmB,GAAc,SAAWA,EAAY,KAKtD,KAAMJ,EAAK,KACX,WACA,oBACA,UACA,YACA,UACA,QACF,CAAC,EAGKM,EAAwC,CAAE,GAAGN,CAAK,EACxD,IAAK,GAAM,CAACO,EAAKC,KAAU,OAAO,QAAQC,CAAQ,EAAG,EAAaF,KAASC,EAE3E,OACE,EAAAZ,EAAA,IAAA,CAACQ,EAAD,CACE,GAAIE,EACJ,GAAII,EACC,MACL,UAAWxB,EAAAA,GACTC,EAAAA,eAAe,KACf,iEACAC,EAAAA,UACAS,EAAkBK,IAGjBS,GAAYC,IACX,wEACFC,CACF,EACA,GAAIC,CACL,CAAA,CAEL,EAEA,EAAK,YAAc"}

package/dist/components/button/Link.mjs

@@ -1,37 +1,38 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { resolveDeprecatedProp as t } from "../../lib/dev.mjs";
-import { useButtonSemantics as n } from "./Button.semantics.mjs";
-import { focusRing as r } from "../../lib/styles.mjs";
+import { linkClassNames as n } from "../../lib/classNames.mjs";
+import { useButtonSemantics as r } from "./Button.semantics.mjs";
+import { focusRing as i } from "../../lib/styles.mjs";
 import "react";
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/button/Link.tsx
-var a = {
+var o = {
 	inline: "text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2",
 	standalone: "font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline",
 	subtle: "text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline"
-}, o = (o) => {
-	let { as: s, appearance: c, variant: l, disabled: u = !1, disabledFocusable: d = !1, className: f, onClick: p, onKeyDown: m, onKeyUp: h, onBlur: g, ref: _, ...v } = o, y = t("Link", c, l, "variant", "appearance") ?? "inline", b = s ?? "a", { defaults: x, enforced: S, handlers: C } = n({
-		tag: typeof b == "string" ? b : null,
-		href: v.href,
-		disabled: u,
-		disabledFocusable: d,
-		onClick: p,
-		onKeyDown: m,
-		onKeyUp: h,
-		onBlur: g
-	}), w = { ...v };
-	for (let [e, t] of Object.entries(x)) w[e] ??= t;
-	return /* @__PURE__ */ i(b, {
+}, s = (s) => {
+	let { as: c, appearance: l, variant: u, disabled: d = !1, disabledFocusable: f = !1, className: p, onClick: m, onKeyDown: h, onKeyUp: g, onBlur: _, ref: v, ...y } = s, b = t("Link", l, u, "variant", "appearance") ?? "inline", x = c ?? "a", { defaults: S, enforced: C, handlers: w } = r({
+		tag: typeof x == "string" ? x : null,
+		href: y.href,
+		disabled: d,
+		disabledFocusable: f,
+		onClick: m,
+		onKeyDown: h,
+		onKeyUp: g,
+		onBlur: _
+	}), T = { ...y };
+	for (let [e, t] of Object.entries(S)) T[e] ??= t;
+	return /* @__PURE__ */ a(x, {
+		...T,
 		...w,
-		...C,
-		ref: _,
-		className: e("cursor-pointer transition-colors motion-reduce:transition-none", r, a[y], (u || d) && "cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100", f),
-		...S
+		ref: v,
+		className: e(n.root, "cursor-pointer transition-colors motion-reduce:transition-none", i, o[b], (d || f) && "cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100", p),
+		...C
 	});
 };
-o.displayName = "Link";
+s.displayName = "Link";
 //#endregion
-export { o as Link };
+export { s as Link };
 
 //# sourceMappingURL=Link.mjs.map

package/dist/components/button/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":["appearanceClasses","Link","appearanceProp","rest","props","appearance","resolveDeprecatedProp","variant","Component","as","useButtonSemantics","elementProps","key","value","defaults","handlers","cn","focusRing","disabled","disabledFocusable","className","enforced"],"sources":["../../../src/components/button/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { focusRing } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useButtonSemantics } from './Button.semantics';\n\n/**\n * Color treatment of a {@link Link}.\n *\n * - `inline` (default): for links in running text. Always underlined (the underline thickens on\n *   hover and focus), because the link color alone does not stand out enough from body text.\n * - `standalone`: semibold, underlined on hover/focus only. Use it only where the position or\n *   container already marks the text as a link (a list of links, a card footer, navigation).\n * - `subtle`: foreground color, underlined on hover/focus only. It cannot be told apart from body\n *   text, so never use it inside a paragraph; only where the context makes the link obvious.\n */\nexport type LinkAppearance = 'inline' | 'standalone' | 'subtle';\n\n/** @deprecated Use {@link LinkAppearance}. */\nexport type LinkVariant = LinkAppearance;\n\n/**\n * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `'a'`).\n */\nexport interface LinkOwnProps {\n  /** Color treatment (see {@link LinkAppearance} for where each one may be used).\n   * @default 'inline'\n   */\n  appearance?: LinkAppearance;\n  /** @deprecated Use `appearance` (same values). */\n  variant?: LinkVariant;\n  /**\n   * Makes the link unavailable. An `<a>` drops its `href` (no navigation by middle-click, the\n   * context menu or drag), keeps `role=\"link\"` (`role=\"button\"` when it had no `href`), and gets\n   * `aria-disabled=\"true\"`, `data-disabled` and `tabIndex={-1}` (none can be overridden); a custom\n   * `as` (router link) gets the same attributes. Clicks, Enter and Space are prevented: your\n   * `onClick` is not called and the click does not reach ancestor click handlers. `as=\"button\"`\n   * uses the native `disabled` attribute.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link unavailable but keeps it focusable and in the tab order: for a toolbar item or\n   * a disabled link that needs a Tooltip. Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable`; an `<a>` drops its `href`, keeps `role=\"link\"` (`role=\"button\"`\n   * when it had no `href`) and gets `tabIndex={0}`, and `as=\"button\"` gets these attributes\n   * instead of the native `disabled`.\n   * Clicks, Enter and Space are prevented; your `onClick` is not called and the click does not\n   * reach ancestor click handlers. Wins over `disabled` when both are set. In a `Toolbar` it stays\n   * in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n}\n\n/**\n * Props of {@link Link} rendered as `C` (default `'a'`). `LinkProps` without a type argument is\n * the 0.4 name: the props of a Link rendered as an `<a>`, including `ref`.\n */\nexport type LinkProps<C extends React.ElementType = 'a'> = PolymorphicProps<C, LinkOwnProps>;\n\n/** The props the implementation reads, for any `as`. */\ntype LinkImplProps = LinkOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** The destination: without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\nconst appearanceClasses: Record<LinkAppearance, string> = {\n  inline:\n    'text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2',\n  standalone:\n    'font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n  subtle:\n    'text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n};\n\n/**\n * A hyperlink with Fluent link styling. Renders an `<a>` by default; `as` renders a router link\n * (`<Link as={RouterLink} to=\"/\">`) or a `<button>` styled as a link (`type=\"button\"` by default).\n *\n * - Without `href`, the `<a>` runs an action instead of navigating (\"Show more\"): it keeps its\n *   element and gets `role=\"button\"`, a tab stop and Enter/Space activation (the consumer's\n *   `role` and `tabIndex` win). A non-interactive `as` (`span`, `div`) is treated the same way;\n *   any `href` string, `''` included, keeps the link semantics.\n *\n * @example\n * <p>Read the <Link href=\"/docs\">documentation</Link> first.</p>\n * <Link appearance=\"standalone\" href=\"/pricing\">See pricing</Link>\n * <Link onClick={showMore}>Show more</Link>\n */\nexport const Link: PolymorphicComponent<'a', LinkOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    variant,\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ref,\n    ...rest\n  } = props as LinkImplProps;\n\n  const appearance =\n    resolveDeprecatedProp('Link', appearanceProp, variant, 'variant', 'appearance') ?? 'inline';\n\n  const Component: React.ElementType = as ?? 'a';\n  const tag = typeof Component === 'string' ? Component : null;\n  // The activation semantics of Button: an `<a>` without `href` or a `span` is a button, and a\n  // disabled link blocks its click (ancestors included), Enter and Space.\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE).\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        'cursor-pointer transition-colors motion-reduce:transition-none',\n        focusRing,\n        appearanceClasses[appearance],\n        // Full opacity while a focusable disabled link shows its focus ring, which `opacity`\n        // would dim below 3:1 (as for buttons).\n        (disabled || disabledFocusable) &&\n          'cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100',\n        className,\n      )}\n      {...enforced}\n    />\n  );\n};\n\nLink.displayName = 'Link';\n"],"mappings":";;;;;;;;AA2EA,IAAMA,IAAoD;CACxD,QACE;CACF,YACE;CACF,QACE;AACJ,GAgBaC,KAAiD,MAAU;CACtE,IAAM,EACJ,OACA,YAAYC,GACZ,YACA,cAAW,IACX,uBAAoB,IACpB,cACA,YACA,cACA,YACA,WACA,QACA,GAAGC,MACDC,GAEEC,IACJC,EAAsB,QAAQJ,GAAgBK,GAAS,WAAW,YAAY,KAAK,UAE/EC,IAA+BC,KAAM,KAIrC,EAAE,aAAU,aAAU,gBAAaC,EAAmB;EAC1D,KAJU,OAAOF,KAAc,WAAWA,IAAY;EAKtD,MAAML,EAAK;EACX;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAGKQ,IAAwC,EAAE,GAAGR,EAAK;CACxD,KAAK,IAAM,CAACS,GAAKC,MAAU,OAAO,QAAQC,CAAQ,GAAG,EAAaF,OAASC;CAE3E,OACE,kBAACL,GAAD;EACE,GAAIG;EACJ,GAAII;EACC;EACL,WAAWC,EACT,kEACAC,GACAjB,EAAkBK,KAGjBa,KAAYC,MACX,yEACFC,CACF;EACA,GAAIC;CACL,CAAA;AAEL;AAEA,EAAK,cAAc"}
+{"version":3,"file":"Link.mjs","names":["appearanceClasses","Link","appearanceProp","rest","props","appearance","resolveDeprecatedProp","variant","Component","as","useButtonSemantics","elementProps","key","value","defaults","handlers","cn","linkClassNames","focusRing","disabled","disabledFocusable","className","enforced"],"sources":["../../../src/components/button/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { linkClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { focusRing } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useButtonSemantics } from './Button.semantics';\n\n/**\n * Color treatment of a {@link Link}.\n *\n * - `inline` (default): for links in running text. Always underlined (the underline thickens on\n *   hover and focus), because the link color alone does not stand out enough from body text.\n * - `standalone`: semibold, underlined on hover/focus only. Use it only where the position or\n *   container already marks the text as a link (a list of links, a card footer, navigation).\n * - `subtle`: foreground color, underlined on hover/focus only. It cannot be told apart from body\n *   text, so never use it inside a paragraph; only where the context makes the link obvious.\n */\nexport type LinkAppearance = 'inline' | 'standalone' | 'subtle';\n\n/** @deprecated Use {@link LinkAppearance}. */\nexport type LinkVariant = LinkAppearance;\n\n/**\n * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `'a'`).\n */\nexport interface LinkOwnProps {\n  /** Color treatment (see {@link LinkAppearance} for where each one may be used).\n   * @default 'inline'\n   */\n  appearance?: LinkAppearance;\n  /** @deprecated Use `appearance` (same values). */\n  variant?: LinkVariant;\n  /**\n   * Makes the link unavailable. An `<a>` drops its `href` (no navigation by middle-click, the\n   * context menu or drag), keeps `role=\"link\"` (`role=\"button\"` when it had no `href`), and gets\n   * `aria-disabled=\"true\"`, `data-disabled` and `tabIndex={-1}` (none can be overridden); a custom\n   * `as` (router link) gets the same attributes. Clicks, Enter and Space are prevented: your\n   * `onClick` is not called and the click does not reach ancestor click handlers. `as=\"button\"`\n   * uses the native `disabled` attribute.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link unavailable but keeps it focusable and in the tab order: for a toolbar item or\n   * a disabled link that needs a Tooltip. Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable`; an `<a>` drops its `href`, keeps `role=\"link\"` (`role=\"button\"`\n   * when it had no `href`) and gets `tabIndex={0}`, and `as=\"button\"` gets these attributes\n   * instead of the native `disabled`.\n   * Clicks, Enter and Space are prevented; your `onClick` is not called and the click does not\n   * reach ancestor click handlers. Wins over `disabled` when both are set. In a `Toolbar` it stays\n   * in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n}\n\n/**\n * Props of {@link Link} rendered as `C` (default `'a'`). `LinkProps` without a type argument is\n * the 0.4 name: the props of a Link rendered as an `<a>`, including `ref`.\n */\nexport type LinkProps<C extends React.ElementType = 'a'> = PolymorphicProps<C, LinkOwnProps>;\n\n/** The props the implementation reads, for any `as`. */\ntype LinkImplProps = LinkOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** The destination: without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\nconst appearanceClasses: Record<LinkAppearance, string> = {\n  inline:\n    'text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2',\n  standalone:\n    'font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n  subtle:\n    'text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n};\n\n/**\n * A hyperlink with Fluent link styling. Renders an `<a>` by default; `as` renders a router link\n * (`<Link as={RouterLink} to=\"/\">`) or a `<button>` styled as a link (`type=\"button\"` by default).\n *\n * - Without `href`, the `<a>` runs an action instead of navigating (\"Show more\"): it keeps its\n *   element and gets `role=\"button\"`, a tab stop and Enter/Space activation (the consumer's\n *   `role` and `tabIndex` win). A non-interactive `as` (`span`, `div`) is treated the same way;\n *   any `href` string, `''` included, keeps the link semantics.\n *\n * @example\n * <p>Read the <Link href=\"/docs\">documentation</Link> first.</p>\n * <Link appearance=\"standalone\" href=\"/pricing\">See pricing</Link>\n * <Link onClick={showMore}>Show more</Link>\n */\nexport const Link: PolymorphicComponent<'a', LinkOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    variant,\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ref,\n    ...rest\n  } = props as LinkImplProps;\n\n  const appearance =\n    resolveDeprecatedProp('Link', appearanceProp, variant, 'variant', 'appearance') ?? 'inline';\n\n  const Component: React.ElementType = as ?? 'a';\n  const tag = typeof Component === 'string' ? Component : null;\n  // The activation semantics of Button: an `<a>` without `href` or a `span` is a button, and a\n  // disabled link blocks its click (ancestors included), Enter and Space.\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE).\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        linkClassNames.root,\n        'cursor-pointer transition-colors motion-reduce:transition-none',\n        focusRing,\n        appearanceClasses[appearance],\n        // Full opacity while a focusable disabled link shows its focus ring, which `opacity`\n        // would dim below 3:1 (as for buttons).\n        (disabled || disabledFocusable) &&\n          'cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100',\n        className,\n      )}\n      {...enforced}\n    />\n  );\n};\n\nLink.displayName = 'Link';\n"],"mappings":";;;;;;;;;AA4EA,IAAMA,IAAoD;CACxD,QACE;CACF,YACE;CACF,QACE;AACJ,GAgBaC,KAAiD,MAAU;CACtE,IAAM,EACJ,OACA,YAAYC,GACZ,YACA,cAAW,IACX,uBAAoB,IACpB,cACA,YACA,cACA,YACA,WACA,QACA,GAAGC,MACDC,GAEEC,IACJC,EAAsB,QAAQJ,GAAgBK,GAAS,WAAW,YAAY,KAAK,UAE/EC,IAA+BC,KAAM,KAIrC,EAAE,aAAU,aAAU,gBAAaC,EAAmB;EAC1D,KAJU,OAAOF,KAAc,WAAWA,IAAY;EAKtD,MAAML,EAAK;EACX;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAGKQ,IAAwC,EAAE,GAAGR,EAAK;CACxD,KAAK,IAAM,CAACS,GAAKC,MAAU,OAAO,QAAQC,CAAQ,GAAG,EAAaF,OAASC;CAE3E,OACE,kBAACL,GAAD;EACE,GAAIG;EACJ,GAAII;EACC;EACL,WAAWC,EACTC,EAAe,MACf,kEACAC,GACAlB,EAAkBK,KAGjBc,KAAYC,MACX,yEACFC,CACF;EACA,GAAIC;CACL,CAAA;AAEL;AAEA,EAAK,cAAc"}

package/dist/components/button/MenuButton.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("./Button.cjs"),a=require("../../lib/icons.cjs"),o=require("./Button.slots.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l={"extra-small":`min-w-0 px-1.5`,small:`min-w-0 px-1.5`,medium:`min-w-0 px-2`,large:`min-w-0 px-2`,"extra-large":`min-w-0 px-3`},u=({appearance:e=`outline`,size:u=`medium`,icon:d,menuIcon:f,expanded:p,className:m,children:h,"aria-haspopup":g,"aria-expanded":_,...v})=>{let{glyph:y,button:b}=o.unwrapButtonGlyph(f);s.useEffect(()=>{b&&n.warnOnce(`MenuButton:menuIcon-button`,`MenuButton: \`menuIcon\` received ${b}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`)},[b]);let x=f==null||b!==null&&!r.slotRendersContent(y)?(0,c.jsx)(a.ChevronDownIcon,{className:`shrink-0`}):r.slotRendersContent(y)?r.renderSlot(y,`span`,`inline-flex shrink-0 items-center`,{"aria-hidden":!0}):null,S=r.materialiseSlotContent(h),C=x!==null&&!r.slotRendersContent(S),w=v[`aria-label`],T=v[`aria-labelledby`],E=v.title;return s.useEffect(()=>{C&&!w&&!T&&!E&&n.warnOnce(`MenuButton:icon-only-name`,"MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).")},[C,w,T,E]),(0,c.jsxs)(i.Button,{...v,"aria-haspopup":g??`menu`,"aria-expanded":_??p,appearance:e,size:u,icon:d,className:t.cn(`gap-1.5`,C&&l[u],m),children:[S,x]})};u.displayName=`MenuButton`,exports.MenuButton=u;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/classNames.cjs"),a=require("./Button.cjs"),o=require("./Button.slots.cjs"),s=require("../../lib/icons.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u={"extra-small":`min-w-0 px-1.5`,small:`min-w-0 px-1.5`,medium:`min-w-0 px-2`,large:`min-w-0 px-2`,"extra-large":`min-w-0 px-3`},d=({appearance:e=`outline`,size:d=`medium`,icon:f,menuIcon:p,expanded:m,className:h,children:g,"aria-haspopup":_,"aria-expanded":v,...y})=>{let{glyph:b,button:x}=o.unwrapButtonGlyph(p);c.useEffect(()=>{x&&n.warnOnce(`MenuButton:menuIcon-button`,`MenuButton: \`menuIcon\` received ${x}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`)},[x]);let S=p==null||x!==null&&!r.slotRendersContent(b)?(0,l.jsx)(s.ChevronDownIcon,{className:t.cn(i.menuButtonClassNames.menuIcon,`shrink-0`)}):r.slotRendersContent(b)?r.renderSlot(b,`span`,t.cn(i.menuButtonClassNames.menuIcon,`inline-flex shrink-0 items-center`),{"aria-hidden":!0}):null,C=r.materialiseSlotContent(g),w=S!==null&&!r.slotRendersContent(C),T=y[`aria-label`],E=y[`aria-labelledby`],D=y.title;return c.useEffect(()=>{w&&!T&&!E&&!D&&n.warnOnce(`MenuButton:icon-only-name`,"MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).")},[w,T,E,D]),(0,l.jsxs)(a.Button,{...y,"aria-haspopup":_??`menu`,"aria-expanded":v??m,appearance:e,size:d,icon:o.withPartClass(f,i.menuButtonClassNames.icon),className:t.cn(i.menuButtonClassNames.root,`gap-1.5`,w&&u[d],h),children:[C,S]})};d.displayName=`MenuButton`,exports.MenuButton=d;
 //# sourceMappingURL=MenuButton.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.cjs","names":["unwrapButtonGlyph","slotRendersContent","ChevronDownIcon","renderSlot","materialiseSlotContent","Button","cn","require_runtime","require_cn","require_dev","require_slot","require_Button","require_icons","require_Button_slots","react","react_jsx_runtime","unlabelledSizeClasses","MenuButton","ariaHasPopup","ariaExpanded","props","menuIconButton","menuIcon","indicator","glyph","label","children","unlabelled","ariaLabel","ariaLabelledBy","title","expanded","size","className"],"sources":["../../../src/components/button/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph } from './Button.slots';\n\n/** Properties for the MenuButton component. */\nexport interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label. Decorative: it renders with `aria-hidden=\"true\"` (a slot\n   * object can override it). A menu button without a label (only the icon and/or the indicator)\n   * needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom menu indicator rendered after the label, in place of the default chevron. Decorative\n   * (`aria-hidden=\"true\"` unless a slot object overrides it). `false` hides the indicator, as does\n   * any value that renders nothing (`true`, `''`, an empty array or Fragment, e.g. from\n   * `menuIcon={cond && <X />}`); `null`/`undefined` keep the default chevron. A `<button>` or\n   * `Button` element, or a slot object whose `as` is one, is not nested inside the menu button:\n   * its children become the indicator (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /**\n   * Whether the associated menu is open (`aria-expanded`). Leave it unset when the button is\n   * wrapped in `Menu.Trigger`, which supplies `aria-expanded` itself.\n   */\n  expanded?: boolean;\n  /**\n   * Marks the menu button unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * are prevented and do not call `onClick`; other keys still reach `onKeyDown`, and\n   * `Menu.Trigger` does not open its menu from an `aria-disabled` trigger. Wins over `disabled`\n   * when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Minimum width and horizontal padding per size of a menu button without a label (an icon, the\n * menu indicator or both): no minimum width and the padding of SplitButton's menu half. Button\n * counts the indicator as content, so it would give such a button the labelled 96px minimum width.\n */\nconst unlabelledSizeClasses: Record<Size, string> = {\n  'extra-small': 'min-w-0 px-1.5',\n  small: 'min-w-0 px-1.5',\n  medium: 'min-w-0 px-2',\n  large: 'min-w-0 px-2',\n  'extra-large': 'min-w-0 px-3',\n};\n\n/**\n * A button that opens a menu: {@link Button} with `aria-haspopup=\"menu\"`, `aria-expanded` and a\n * trailing chevron. Same appearances, sizes, `type=\"button\"` default and decorative icon slot as\n * Button. Without a label (only an icon and/or the chevron) it has no minimum width, and it warns\n * in development when it also has no `aria-label`, `aria-labelledby` or `title`.\n *\n * Use it as the child of `Menu.Trigger`, which supplies `id`, `aria-expanded`, `aria-controls`,\n * the open/keyboard handlers and the ref. A defined `aria-haspopup`/`aria-expanded` prop wins over\n * the built-in `\"menu\"` and `expanded` defaults, so the trigger's live state always wins; an\n * `undefined` or `null` one (a wrapper forwarding its own unset props) keeps the defaults.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger><MenuButton>Actions</MenuButton></Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const MenuButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  icon,\n  menuIcon,\n  expanded,\n  className,\n  children,\n  'aria-haspopup': ariaHasPopup,\n  'aria-expanded': ariaExpanded,\n  ...props\n}: MenuButtonProps) => {\n  // The indicator sits inside the button: a button passed as `menuIcon` is unwrapped (its children\n  // are the indicator), never nested (C-SLOTS).\n  const { glyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'MenuButton:menuIcon-button',\n        `MenuButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `menuIcon` follows the `icon` slot rule: unset keeps the chevron, a value that renders nothing\n  // (`false`, `true`, `''`, an empty array, Set or Fragment) hides the indicator without leaving an\n  // empty `aria-hidden` span behind. An unwrapped button whose children render nothing keeps the\n  // chevron, as for a picker's `expandIcon`.\n  const indicator =\n    menuIcon == null || (menuIconButton !== null && !slotRendersContent(glyph)) ? (\n      <ChevronDownIcon className=\"shrink-0\" />\n    ) : slotRendersContent(glyph) ? (\n      renderSlot(glyph, 'span', 'inline-flex shrink-0 items-center', { 'aria-hidden': true })\n    ) : null;\n\n  // While the indicator renders, Button counts it as content: it sizes the button as labelled and\n  // skips its icon-only name check. A menu button whose only content is decorative (an icon, the\n  // indicator or both) is therefore sized and checked here. Without an indicator\n  // (`menuIcon={false}`, `''`, …) Button handles both by itself: checking here too would log the\n  // same problem twice.\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const unlabelled = indicator !== null && !slotRendersContent(label);\n  const ariaLabel = props['aria-label'];\n  const ariaLabelledBy = props['aria-labelledby'];\n  const title = props.title;\n  React.useEffect(() => {\n    if (unlabelled && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'MenuButton:icon-only-name',\n        'MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).',\n      );\n    }\n  }, [unlabelled, ariaLabel, ariaLabelledBy, title]);\n\n  // `aria-haspopup`/`aria-expanded` defaults apply wherever the consumer's value is `undefined` or\n  // `null` (as Button does for `type`, `role` and `tabIndex`), so a forwarded unset prop keeps them.\n  return (\n    <Button\n      {...props}\n      aria-haspopup={ariaHasPopup ?? 'menu'}\n      aria-expanded={ariaExpanded ?? expanded}\n      appearance={appearance}\n      size={size}\n      icon={icon}\n      className={cn('gap-1.5', unlabelled && unlabelledSizeClasses[size], className)}\n    >\n      {label}\n      {indicator}\n    </Button>\n  );\n};\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"wUA2DA,IAAMgB,EAA8C,CAClD,cAAe,iBACf,MAAO,iBACP,OAAQ,eACR,MAAO,eACP,cAAe,cACjB,EAmBaC,GAAc,CACzB,aAAa,UACb,OAAO,SACP,OACA,WACA,WACA,YACA,WACA,gBAAiBC,EACjB,gBAAiBC,EACjB,GAAGC,KACkB,CAGrB,GAAM,CAAE,QAAO,OAAQC,GAAmBrB,EAAAA,kBAAkBsB,CAAQ,EACpER,EAAM,cAAgB,CAChBO,GACFZ,EAAA,SACE,6BACA,qCAAqCY,EAAe,8JACtD,CAEJ,EAAG,CAACA,CAAc,CAAC,EAMnB,IAAME,EACJD,GAAY,MAASD,IAAmB,MAAQ,CAACpB,EAAAA,mBAAmBuB,CAAK,GACvE,EAAAT,EAAA,IAAA,CAACb,EAAAA,gBAAD,CAAiB,UAAU,UAAY,CAAA,EACrCD,EAAAA,mBAAmBuB,CAAK,EAC1BrB,EAAAA,WAAWqB,EAAO,OAAQ,oCAAqC,CAAE,cAAe,EAAK,CAAC,EACpF,KAQAC,EAAQrB,EAAAA,uBAAuBsB,CAAQ,EACvCC,EAAaJ,IAAc,MAAQ,CAACtB,EAAAA,mBAAmBwB,CAAK,EAC5DG,EAAYR,EAAM,cAClBS,EAAiBT,EAAM,mBACvBU,EAAQV,EAAM,MAYpB,OAXAN,EAAM,cAAgB,CAChBa,GAAc,CAACC,GAAa,CAACC,GAAkB,CAACC,GAClDrB,EAAA,SACE,4BACA,qMACF,CAEJ,EAAG,CAACkB,EAAYC,EAAWC,EAAgBC,CAAK,CAAC,GAK/C,EAAAf,EAAA,KAAA,CAACV,EAAAA,OAAD,CACE,GAAIe,EACJ,gBAAeF,GAAgB,OAC/B,gBAAeC,GAAgBY,EACnB,aACN,OACA,OACN,UAAWzB,EAAAA,GAAG,UAAWqB,GAAcX,EAAsBgB,GAAOC,CAAS,EAP/E,SAAA,CASGR,EACAF,CACK,GAEZ,EAEA,EAAW,YAAc"}
+{"version":3,"file":"MenuButton.cjs","names":["unwrapButtonGlyph","slotRendersContent","ChevronDownIcon","cn","menuButtonClassNames","renderSlot","materialiseSlotContent","Button","withPartClass","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_Button","require_Button_slots","require_icons","react","react_jsx_runtime","unlabelledSizeClasses","MenuButton","ariaHasPopup","ariaExpanded","props","menuIconButton","menuIcon","indicator","glyph","label","children","unlabelled","ariaLabel","ariaLabelledBy","title","expanded","icon","size","className"],"sources":["../../../src/components/button/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { menuButtonClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph, withPartClass } from './Button.slots';\n\n/** Properties for the MenuButton component. */\nexport interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label. Decorative: it renders with `aria-hidden=\"true\"` (a slot\n   * object can override it). A menu button without a label (only the icon and/or the indicator)\n   * needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom menu indicator rendered after the label, in place of the default chevron. Decorative\n   * (`aria-hidden=\"true\"` unless a slot object overrides it). `false` hides the indicator, as does\n   * any value that renders nothing (`true`, `''`, an empty array or Fragment, e.g. from\n   * `menuIcon={cond && <X />}`); `null`/`undefined` keep the default chevron. A `<button>` or\n   * `Button` element, or a slot object whose `as` is one, is not nested inside the menu button:\n   * its children become the indicator (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /**\n   * Whether the associated menu is open (`aria-expanded`). Leave it unset when the button is\n   * wrapped in `Menu.Trigger`, which supplies `aria-expanded` itself.\n   */\n  expanded?: boolean;\n  /**\n   * Marks the menu button unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * are prevented and do not call `onClick`; other keys still reach `onKeyDown`, and\n   * `Menu.Trigger` does not open its menu from an `aria-disabled` trigger. Wins over `disabled`\n   * when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Minimum width and horizontal padding per size of a menu button without a label (an icon, the\n * menu indicator or both): no minimum width and the padding of SplitButton's menu half. Button\n * counts the indicator as content, so it would give such a button the labelled 96px minimum width.\n */\nconst unlabelledSizeClasses: Record<Size, string> = {\n  'extra-small': 'min-w-0 px-1.5',\n  small: 'min-w-0 px-1.5',\n  medium: 'min-w-0 px-2',\n  large: 'min-w-0 px-2',\n  'extra-large': 'min-w-0 px-3',\n};\n\n/**\n * A button that opens a menu: {@link Button} with `aria-haspopup=\"menu\"`, `aria-expanded` and a\n * trailing chevron. Same appearances, sizes, `type=\"button\"` default and decorative icon slot as\n * Button. Without a label (only an icon and/or the chevron) it has no minimum width, and it warns\n * in development when it also has no `aria-label`, `aria-labelledby` or `title`.\n *\n * Use it as the child of `Menu.Trigger`, which supplies `id`, `aria-expanded`, `aria-controls`,\n * the open/keyboard handlers and the ref. A defined `aria-haspopup`/`aria-expanded` prop wins over\n * the built-in `\"menu\"` and `expanded` defaults, so the trigger's live state always wins; an\n * `undefined` or `null` one (a wrapper forwarding its own unset props) keeps the defaults.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger><MenuButton>Actions</MenuButton></Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const MenuButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  icon,\n  menuIcon,\n  expanded,\n  className,\n  children,\n  'aria-haspopup': ariaHasPopup,\n  'aria-expanded': ariaExpanded,\n  ...props\n}: MenuButtonProps) => {\n  // The indicator sits inside the button: a button passed as `menuIcon` is unwrapped (its children\n  // are the indicator), never nested (C-SLOTS).\n  const { glyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'MenuButton:menuIcon-button',\n        `MenuButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `menuIcon` follows the `icon` slot rule: unset keeps the chevron, a value that renders nothing\n  // (`false`, `true`, `''`, an empty array, Set or Fragment) hides the indicator without leaving an\n  // empty `aria-hidden` span behind. An unwrapped button whose children render nothing keeps the\n  // chevron, as for a picker's `expandIcon`.\n  const indicator =\n    menuIcon == null || (menuIconButton !== null && !slotRendersContent(glyph)) ? (\n      <ChevronDownIcon className={cn(menuButtonClassNames.menuIcon, 'shrink-0')} />\n    ) : slotRendersContent(glyph) ? (\n      renderSlot(\n        glyph,\n        'span',\n        cn(menuButtonClassNames.menuIcon, 'inline-flex shrink-0 items-center'),\n        {\n          'aria-hidden': true,\n        },\n      )\n    ) : null;\n\n  // While the indicator renders, Button counts it as content: it sizes the button as labelled and\n  // skips its icon-only name check. A menu button whose only content is decorative (an icon, the\n  // indicator or both) is therefore sized and checked here. Without an indicator\n  // (`menuIcon={false}`, `''`, …) Button handles both by itself: checking here too would log the\n  // same problem twice.\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const unlabelled = indicator !== null && !slotRendersContent(label);\n  const ariaLabel = props['aria-label'];\n  const ariaLabelledBy = props['aria-labelledby'];\n  const title = props.title;\n  React.useEffect(() => {\n    if (unlabelled && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'MenuButton:icon-only-name',\n        'MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).',\n      );\n    }\n  }, [unlabelled, ariaLabel, ariaLabelledBy, title]);\n\n  // `aria-haspopup`/`aria-expanded` defaults apply wherever the consumer's value is `undefined` or\n  // `null` (as Button does for `type`, `role` and `tabIndex`), so a forwarded unset prop keeps them.\n  return (\n    <Button\n      {...props}\n      aria-haspopup={ariaHasPopup ?? 'menu'}\n      aria-expanded={ariaExpanded ?? expanded}\n      appearance={appearance}\n      size={size}\n      icon={withPartClass(icon, menuButtonClassNames.icon)}\n      className={cn(\n        menuButtonClassNames.root,\n        'gap-1.5',\n        unlabelled && unlabelledSizeClasses[size],\n        className,\n      )}\n    >\n      {label}\n      {indicator}\n    </Button>\n  );\n};\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":"8WA4DA,IAAMmB,EAA8C,CAClD,cAAe,iBACf,MAAO,iBACP,OAAQ,eACR,MAAO,eACP,cAAe,cACjB,EAmBaC,GAAc,CACzB,aAAa,UACb,OAAO,SACP,OACA,WACA,WACA,YACA,WACA,gBAAiBC,EACjB,gBAAiBC,EACjB,GAAGC,KACkB,CAGrB,GAAM,CAAE,QAAO,OAAQC,GAAmBxB,EAAAA,kBAAkByB,CAAQ,EACpER,EAAM,cAAgB,CAChBO,GACFb,EAAA,SACE,6BACA,qCAAqCa,EAAe,8JACtD,CAEJ,EAAG,CAACA,CAAc,CAAC,EAMnB,IAAME,EACJD,GAAY,MAASD,IAAmB,MAAQ,CAACvB,EAAAA,mBAAmB0B,CAAK,GACvE,EAAAT,EAAA,IAAA,CAAChB,EAAAA,gBAAD,CAAiB,UAAWC,EAAAA,GAAGC,EAAAA,qBAAqB,SAAU,UAAU,CAAI,CAAA,EAC1EH,EAAAA,mBAAmB0B,CAAK,EAC1BtB,EAAAA,WACEsB,EACA,OACAxB,EAAAA,GAAGC,EAAAA,qBAAqB,SAAU,mCAAmC,EACrE,CACE,cAAe,EACjB,CACF,EACE,KAQAwB,EAAQtB,EAAAA,uBAAuBuB,CAAQ,EACvCC,EAAaJ,IAAc,MAAQ,CAACzB,EAAAA,mBAAmB2B,CAAK,EAC5DG,EAAYR,EAAM,cAClBS,EAAiBT,EAAM,mBACvBU,EAAQV,EAAM,MAYpB,OAXAN,EAAM,cAAgB,CAChBa,GAAc,CAACC,GAAa,CAACC,GAAkB,CAACC,GAClDtB,EAAA,SACE,4BACA,qMACF,CAEJ,EAAG,CAACmB,EAAYC,EAAWC,EAAgBC,CAAK,CAAC,GAK/C,EAAAf,EAAA,KAAA,CAACX,EAAAA,OAAD,CACE,GAAIgB,EACJ,gBAAeF,GAAgB,OAC/B,gBAAeC,GAAgBY,EACnB,aACN,OACN,KAAM1B,EAAAA,cAAc2B,EAAM/B,EAAAA,qBAAqB,IAAI,EACnD,UAAWD,EAAAA,GACTC,EAAAA,qBAAqB,KACrB,UACA0B,GAAcX,EAAsBiB,GACpCC,CACF,EAZF,SAAA,CAcGT,EACAF,CACK,GAEZ,EAEA,EAAW,YAAc"}

package/dist/components/button/MenuButton.mjs

@@ -2,44 +2,45 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
 import { materialiseSlotContent as n, renderSlot as r, slotRendersContent as i } from "../../lib/slot.mjs";
-import { Button as a } from "./Button.mjs";
-import { ChevronDownIcon as o } from "../../lib/icons.mjs";
-import { unwrapButtonGlyph as s } from "./Button.slots.mjs";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { menuButtonClassNames as a } from "../../lib/classNames.mjs";
+import { Button as o } from "./Button.mjs";
+import { unwrapButtonGlyph as s, withPartClass as c } from "./Button.slots.mjs";
+import { ChevronDownIcon as l } from "../../lib/icons.mjs";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/button/MenuButton.tsx
-var d = {
+var p = {
 	"extra-small": "min-w-0 px-1.5",
 	small: "min-w-0 px-1.5",
 	medium: "min-w-0 px-2",
 	large: "min-w-0 px-2",
 	"extra-large": "min-w-0 px-3"
-}, f = ({ appearance: f = "outline", size: p = "medium", icon: m, menuIcon: h, expanded: g, className: _, children: v, "aria-haspopup": y, "aria-expanded": b, ...x }) => {
-	let { glyph: S, button: C } = s(h);
-	c.useEffect(() => {
-		C && t("MenuButton:menuIcon-button", `MenuButton: \`menuIcon\` received ${C}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`);
-	}, [C]);
-	let w = h == null || C !== null && !i(S) ? /* @__PURE__ */ l(o, { className: "shrink-0" }) : i(S) ? r(S, "span", "inline-flex shrink-0 items-center", { "aria-hidden": !0 }) : null, T = n(v), E = w !== null && !i(T), D = x["aria-label"], O = x["aria-labelledby"], k = x.title;
-	return c.useEffect(() => {
-		E && !D && !O && !k && t("MenuButton:icon-only-name", "MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).");
+}, m = ({ appearance: m = "outline", size: h = "medium", icon: g, menuIcon: _, expanded: v, className: y, children: b, "aria-haspopup": x, "aria-expanded": S, ...C }) => {
+	let { glyph: w, button: T } = s(_);
+	u.useEffect(() => {
+		T && t("MenuButton:menuIcon-button", `MenuButton: \`menuIcon\` received ${T}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`);
+	}, [T]);
+	let E = _ == null || T !== null && !i(w) ? /* @__PURE__ */ d(l, { className: e(a.menuIcon, "shrink-0") }) : i(w) ? r(w, "span", e(a.menuIcon, "inline-flex shrink-0 items-center"), { "aria-hidden": !0 }) : null, D = n(b), O = E !== null && !i(D), k = C["aria-label"], A = C["aria-labelledby"], j = C.title;
+	return u.useEffect(() => {
+		O && !k && !A && !j && t("MenuButton:icon-only-name", "MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).");
 	}, [
-		E,
-		D,
 		O,
-		k
-	]), /* @__PURE__ */ u(a, {
-		...x,
-		"aria-haspopup": y ?? "menu",
-		"aria-expanded": b ?? g,
-		appearance: f,
-		size: p,
-		icon: m,
-		className: e("gap-1.5", E && d[p], _),
-		children: [T, w]
+		k,
+		A,
+		j
+	]), /* @__PURE__ */ f(o, {
+		...C,
+		"aria-haspopup": x ?? "menu",
+		"aria-expanded": S ?? v,
+		appearance: m,
+		size: h,
+		icon: c(g, a.icon),
+		className: e(a.root, "gap-1.5", O && p[h], y),
+		children: [D, E]
 	});
 };
-f.displayName = "MenuButton";
+m.displayName = "MenuButton";
 //#endregion
-export { f as MenuButton };
+export { m as MenuButton };
 
 //# sourceMappingURL=MenuButton.mjs.map

package/dist/components/button/MenuButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.mjs","names":["React","unlabelledSizeClasses","MenuButton","ariaHasPopup","ariaExpanded","props","menuIconButton","unwrapButtonGlyph","menuIcon","warnOnce","indicator","slotRendersContent","glyph","ChevronDownIcon","renderSlot","label","materialiseSlotContent","children","unlabelled","ariaLabel","ariaLabelledBy","title","Button","expanded","cn","size","className"],"sources":["../../../src/components/button/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph } from './Button.slots';\n\n/** Properties for the MenuButton component. */\nexport interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label. Decorative: it renders with `aria-hidden=\"true\"` (a slot\n   * object can override it). A menu button without a label (only the icon and/or the indicator)\n   * needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom menu indicator rendered after the label, in place of the default chevron. Decorative\n   * (`aria-hidden=\"true\"` unless a slot object overrides it). `false` hides the indicator, as does\n   * any value that renders nothing (`true`, `''`, an empty array or Fragment, e.g. from\n   * `menuIcon={cond && <X />}`); `null`/`undefined` keep the default chevron. A `<button>` or\n   * `Button` element, or a slot object whose `as` is one, is not nested inside the menu button:\n   * its children become the indicator (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /**\n   * Whether the associated menu is open (`aria-expanded`). Leave it unset when the button is\n   * wrapped in `Menu.Trigger`, which supplies `aria-expanded` itself.\n   */\n  expanded?: boolean;\n  /**\n   * Marks the menu button unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * are prevented and do not call `onClick`; other keys still reach `onKeyDown`, and\n   * `Menu.Trigger` does not open its menu from an `aria-disabled` trigger. Wins over `disabled`\n   * when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Minimum width and horizontal padding per size of a menu button without a label (an icon, the\n * menu indicator or both): no minimum width and the padding of SplitButton's menu half. Button\n * counts the indicator as content, so it would give such a button the labelled 96px minimum width.\n */\nconst unlabelledSizeClasses: Record<Size, string> = {\n  'extra-small': 'min-w-0 px-1.5',\n  small: 'min-w-0 px-1.5',\n  medium: 'min-w-0 px-2',\n  large: 'min-w-0 px-2',\n  'extra-large': 'min-w-0 px-3',\n};\n\n/**\n * A button that opens a menu: {@link Button} with `aria-haspopup=\"menu\"`, `aria-expanded` and a\n * trailing chevron. Same appearances, sizes, `type=\"button\"` default and decorative icon slot as\n * Button. Without a label (only an icon and/or the chevron) it has no minimum width, and it warns\n * in development when it also has no `aria-label`, `aria-labelledby` or `title`.\n *\n * Use it as the child of `Menu.Trigger`, which supplies `id`, `aria-expanded`, `aria-controls`,\n * the open/keyboard handlers and the ref. A defined `aria-haspopup`/`aria-expanded` prop wins over\n * the built-in `\"menu\"` and `expanded` defaults, so the trigger's live state always wins; an\n * `undefined` or `null` one (a wrapper forwarding its own unset props) keeps the defaults.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger><MenuButton>Actions</MenuButton></Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const MenuButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  icon,\n  menuIcon,\n  expanded,\n  className,\n  children,\n  'aria-haspopup': ariaHasPopup,\n  'aria-expanded': ariaExpanded,\n  ...props\n}: MenuButtonProps) => {\n  // The indicator sits inside the button: a button passed as `menuIcon` is unwrapped (its children\n  // are the indicator), never nested (C-SLOTS).\n  const { glyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'MenuButton:menuIcon-button',\n        `MenuButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `menuIcon` follows the `icon` slot rule: unset keeps the chevron, a value that renders nothing\n  // (`false`, `true`, `''`, an empty array, Set or Fragment) hides the indicator without leaving an\n  // empty `aria-hidden` span behind. An unwrapped button whose children render nothing keeps the\n  // chevron, as for a picker's `expandIcon`.\n  const indicator =\n    menuIcon == null || (menuIconButton !== null && !slotRendersContent(glyph)) ? (\n      <ChevronDownIcon className=\"shrink-0\" />\n    ) : slotRendersContent(glyph) ? (\n      renderSlot(glyph, 'span', 'inline-flex shrink-0 items-center', { 'aria-hidden': true })\n    ) : null;\n\n  // While the indicator renders, Button counts it as content: it sizes the button as labelled and\n  // skips its icon-only name check. A menu button whose only content is decorative (an icon, the\n  // indicator or both) is therefore sized and checked here. Without an indicator\n  // (`menuIcon={false}`, `''`, …) Button handles both by itself: checking here too would log the\n  // same problem twice.\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const unlabelled = indicator !== null && !slotRendersContent(label);\n  const ariaLabel = props['aria-label'];\n  const ariaLabelledBy = props['aria-labelledby'];\n  const title = props.title;\n  React.useEffect(() => {\n    if (unlabelled && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'MenuButton:icon-only-name',\n        'MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).',\n      );\n    }\n  }, [unlabelled, ariaLabel, ariaLabelledBy, title]);\n\n  // `aria-haspopup`/`aria-expanded` defaults apply wherever the consumer's value is `undefined` or\n  // `null` (as Button does for `type`, `role` and `tabIndex`), so a forwarded unset prop keeps them.\n  return (\n    <Button\n      {...props}\n      aria-haspopup={ariaHasPopup ?? 'menu'}\n      aria-expanded={ariaExpanded ?? expanded}\n      appearance={appearance}\n      size={size}\n      icon={icon}\n      className={cn('gap-1.5', unlabelled && unlabelledSizeClasses[size], className)}\n    >\n      {label}\n      {indicator}\n    </Button>\n  );\n};\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":";;;;;;;;;;AA2DA,IAAMC,IAA8C;CAClD,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAmBaC,KAAc,EACzB,gBAAa,WACb,UAAO,UACP,SACA,aACA,aACA,cACA,aACA,iBAAiBC,GACjB,iBAAiBC,GACjB,GAAGC,QACkB;CAGrB,IAAM,EAAE,UAAO,QAAQC,MAAmBC,EAAkBC,CAAQ;CACpE,EAAM,gBAAgB;EACpB,AAAIF,KACFG,EACE,8BACA,qCAAqCH,EAAe,8JACtD;CAEJ,GAAG,CAACA,CAAc,CAAC;CAMnB,IAAMI,IACJF,KAAY,QAASF,MAAmB,QAAQ,CAACK,EAAmBC,CAAK,IACvE,kBAACC,GAAD,EAAiB,WAAU,WAAY,CAAA,IACrCF,EAAmBC,CAAK,IAC1BE,EAAWF,GAAO,QAAQ,qCAAqC,EAAE,eAAe,GAAK,CAAC,IACpF,MAQAG,IAAQC,EAAuBC,CAAQ,GACvCC,IAAaR,MAAc,QAAQ,CAACC,EAAmBI,CAAK,GAC5DI,IAAYd,EAAM,eAClBe,IAAiBf,EAAM,oBACvBgB,IAAQhB,EAAM;CAYpB,OAXAL,EAAM,gBAAgB;EACpB,AAAIkB,KAAc,CAACC,KAAa,CAACC,KAAkB,CAACC,KAClDZ,EACE,6BACA,qMACF;CAEJ,GAAG;EAACS;EAAYC;EAAWC;EAAgBC;CAAK,CAAC,GAK/C,kBAACC,GAAD;EACE,GAAIjB;EACJ,iBAAeF,KAAgB;EAC/B,iBAAeC,KAAgBmB;EACnB;EACN;EACA;EACN,WAAWC,EAAG,WAAWN,KAAcjB,EAAsBwB,IAAOC,CAAS;EAP/E,UAAA,CASGX,GACAL,CACK;;AAEZ;AAEA,EAAW,cAAc"}
+{"version":3,"file":"MenuButton.mjs","names":["React","unlabelledSizeClasses","MenuButton","ariaHasPopup","ariaExpanded","props","menuIconButton","unwrapButtonGlyph","menuIcon","warnOnce","indicator","slotRendersContent","glyph","ChevronDownIcon","cn","menuButtonClassNames","renderSlot","label","materialiseSlotContent","children","unlabelled","ariaLabel","ariaLabelledBy","title","Button","expanded","withPartClass","icon","size","className"],"sources":["../../../src/components/button/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { menuButtonClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph, withPartClass } from './Button.slots';\n\n/** Properties for the MenuButton component. */\nexport interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label. Decorative: it renders with `aria-hidden=\"true\"` (a slot\n   * object can override it). A menu button without a label (only the icon and/or the indicator)\n   * needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom menu indicator rendered after the label, in place of the default chevron. Decorative\n   * (`aria-hidden=\"true\"` unless a slot object overrides it). `false` hides the indicator, as does\n   * any value that renders nothing (`true`, `''`, an empty array or Fragment, e.g. from\n   * `menuIcon={cond && <X />}`); `null`/`undefined` keep the default chevron. A `<button>` or\n   * `Button` element, or a slot object whose `as` is one, is not nested inside the menu button:\n   * its children become the indicator (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /**\n   * Whether the associated menu is open (`aria-expanded`). Leave it unset when the button is\n   * wrapped in `Menu.Trigger`, which supplies `aria-expanded` itself.\n   */\n  expanded?: boolean;\n  /**\n   * Marks the menu button unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * are prevented and do not call `onClick`; other keys still reach `onKeyDown`, and\n   * `Menu.Trigger` does not open its menu from an `aria-disabled` trigger. Wins over `disabled`\n   * when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Minimum width and horizontal padding per size of a menu button without a label (an icon, the\n * menu indicator or both): no minimum width and the padding of SplitButton's menu half. Button\n * counts the indicator as content, so it would give such a button the labelled 96px minimum width.\n */\nconst unlabelledSizeClasses: Record<Size, string> = {\n  'extra-small': 'min-w-0 px-1.5',\n  small: 'min-w-0 px-1.5',\n  medium: 'min-w-0 px-2',\n  large: 'min-w-0 px-2',\n  'extra-large': 'min-w-0 px-3',\n};\n\n/**\n * A button that opens a menu: {@link Button} with `aria-haspopup=\"menu\"`, `aria-expanded` and a\n * trailing chevron. Same appearances, sizes, `type=\"button\"` default and decorative icon slot as\n * Button. Without a label (only an icon and/or the chevron) it has no minimum width, and it warns\n * in development when it also has no `aria-label`, `aria-labelledby` or `title`.\n *\n * Use it as the child of `Menu.Trigger`, which supplies `id`, `aria-expanded`, `aria-controls`,\n * the open/keyboard handlers and the ref. A defined `aria-haspopup`/`aria-expanded` prop wins over\n * the built-in `\"menu\"` and `expanded` defaults, so the trigger's live state always wins; an\n * `undefined` or `null` one (a wrapper forwarding its own unset props) keeps the defaults.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger><MenuButton>Actions</MenuButton></Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const MenuButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  icon,\n  menuIcon,\n  expanded,\n  className,\n  children,\n  'aria-haspopup': ariaHasPopup,\n  'aria-expanded': ariaExpanded,\n  ...props\n}: MenuButtonProps) => {\n  // The indicator sits inside the button: a button passed as `menuIcon` is unwrapped (its children\n  // are the indicator), never nested (C-SLOTS).\n  const { glyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'MenuButton:menuIcon-button',\n        `MenuButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the menu indicator and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `menuIcon` follows the `icon` slot rule: unset keeps the chevron, a value that renders nothing\n  // (`false`, `true`, `''`, an empty array, Set or Fragment) hides the indicator without leaving an\n  // empty `aria-hidden` span behind. An unwrapped button whose children render nothing keeps the\n  // chevron, as for a picker's `expandIcon`.\n  const indicator =\n    menuIcon == null || (menuIconButton !== null && !slotRendersContent(glyph)) ? (\n      <ChevronDownIcon className={cn(menuButtonClassNames.menuIcon, 'shrink-0')} />\n    ) : slotRendersContent(glyph) ? (\n      renderSlot(\n        glyph,\n        'span',\n        cn(menuButtonClassNames.menuIcon, 'inline-flex shrink-0 items-center'),\n        {\n          'aria-hidden': true,\n        },\n      )\n    ) : null;\n\n  // While the indicator renders, Button counts it as content: it sizes the button as labelled and\n  // skips its icon-only name check. A menu button whose only content is decorative (an icon, the\n  // indicator or both) is therefore sized and checked here. Without an indicator\n  // (`menuIcon={false}`, `''`, …) Button handles both by itself: checking here too would log the\n  // same problem twice.\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const unlabelled = indicator !== null && !slotRendersContent(label);\n  const ariaLabel = props['aria-label'];\n  const ariaLabelledBy = props['aria-labelledby'];\n  const title = props.title;\n  React.useEffect(() => {\n    if (unlabelled && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'MenuButton:icon-only-name',\n        'MenuButton: an icon-only menu button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon and the menu indicator are decorative and hidden from assistive technology).',\n      );\n    }\n  }, [unlabelled, ariaLabel, ariaLabelledBy, title]);\n\n  // `aria-haspopup`/`aria-expanded` defaults apply wherever the consumer's value is `undefined` or\n  // `null` (as Button does for `type`, `role` and `tabIndex`), so a forwarded unset prop keeps them.\n  return (\n    <Button\n      {...props}\n      aria-haspopup={ariaHasPopup ?? 'menu'}\n      aria-expanded={ariaExpanded ?? expanded}\n      appearance={appearance}\n      size={size}\n      icon={withPartClass(icon, menuButtonClassNames.icon)}\n      className={cn(\n        menuButtonClassNames.root,\n        'gap-1.5',\n        unlabelled && unlabelledSizeClasses[size],\n        className,\n      )}\n    >\n      {label}\n      {indicator}\n    </Button>\n  );\n};\n\nMenuButton.displayName = 'MenuButton';\n"],"mappings":";;;;;;;;;;;AA4DA,IAAMC,IAA8C;CAClD,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAmBaC,KAAc,EACzB,gBAAa,WACb,UAAO,UACP,SACA,aACA,aACA,cACA,aACA,iBAAiBC,GACjB,iBAAiBC,GACjB,GAAGC,QACkB;CAGrB,IAAM,EAAE,UAAO,QAAQC,MAAmBC,EAAkBC,CAAQ;CACpE,EAAM,gBAAgB;EACpB,AAAIF,KACFG,EACE,8BACA,qCAAqCH,EAAe,8JACtD;CAEJ,GAAG,CAACA,CAAc,CAAC;CAMnB,IAAMI,IACJF,KAAY,QAASF,MAAmB,QAAQ,CAACK,EAAmBC,CAAK,IACvE,kBAACC,GAAD,EAAiB,WAAWC,EAAGC,EAAqB,UAAU,UAAU,EAAI,CAAA,IAC1EJ,EAAmBC,CAAK,IAC1BI,EACEJ,GACA,QACAE,EAAGC,EAAqB,UAAU,mCAAmC,GACrE,EACE,eAAe,GACjB,CACF,IACE,MAQAE,IAAQC,EAAuBC,CAAQ,GACvCC,IAAaV,MAAc,QAAQ,CAACC,EAAmBM,CAAK,GAC5DI,IAAYhB,EAAM,eAClBiB,IAAiBjB,EAAM,oBACvBkB,IAAQlB,EAAM;CAYpB,OAXAL,EAAM,gBAAgB;EACpB,AAAIoB,KAAc,CAACC,KAAa,CAACC,KAAkB,CAACC,KAClDd,EACE,6BACA,qMACF;CAEJ,GAAG;EAACW;EAAYC;EAAWC;EAAgBC;CAAK,CAAC,GAK/C,kBAACC,GAAD;EACE,GAAInB;EACJ,iBAAeF,KAAgB;EAC/B,iBAAeC,KAAgBqB;EACnB;EACN;EACN,MAAMC,EAAcC,GAAMZ,EAAqB,IAAI;EACnD,WAAWD,EACTC,EAAqB,MACrB,WACAK,KAAcnB,EAAsB2B,IACpCC,CACF;EAZF,UAAA,CAcGZ,GACAP,CACK;;AAEZ;AAEA,EAAW,cAAc"}

package/dist/components/button/SplitButton.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("./Button.cjs"),a=require("../../lib/icons.cjs"),o=require("../../lib/mergeProps.cjs"),s=require("./Button.slots.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u={"extra-small":`w-auto min-w-6 min-h-6 px-1.5`,small:`w-auto min-w-6 min-h-6 px-1.5`,medium:`w-auto min-w-6 min-h-6 px-2`,large:`w-auto min-w-6 min-h-6 px-2`,"extra-large":`w-auto min-w-6 min-h-6 px-3`},d={primary:`border-s-primary-foreground/30`,outline:`border-s-stroke`,subtle:`border-s-stroke`,transparent:`border-s-stroke`},f=`relative min-h-6 focus-visible:z-10`,p=({appearance:e=`outline`,size:p=`medium`,disabled:m=!1,disabledFocusable:h=!1,icon:g,iconPosition:_,menuIcon:v,className:y,children:b,onClick:x,onMenuClick:S,menuButtonLabel:C=`More options`,menuButtonProps:w,primaryActionButtonProps:T,"aria-describedby":E,role:D,ref:O,...k})=>{let A=o.mergeProps({"aria-describedby":E,onClick:x},T),j=o.mergeProps({"aria-label":C,"aria-haspopup":`menu`,onClick:S},w),M=h||!!A.disabledFocusable,N=h||!!j.disabledFocusable,{glyph:P,button:F}=s.unwrapButtonGlyph(v),I=r.slotRendersContent(P),L=F===null&&v!=null&&!I;return c.useEffect(()=>{L&&n.warnOnce(`SplitButton:menuIcon-empty`,"SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.")},[L]),c.useEffect(()=>{F&&n.warnOnce(`SplitButton:menuIcon-button`,`SplitButton: \`menuIcon\` received ${F}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`)},[F]),(0,l.jsxs)(`div`,{ref:O,...k,role:D??`group`,className:t.cn(`inline-flex items-stretch`,y),children:[(0,l.jsx)(i.Button,{...A,appearance:e,size:p,disabled:!M&&(m||!!A.disabled),disabledFocusable:M,icon:g,iconPosition:_,className:t.cn(f,`rounded-e-none border-e-0`,A.className),children:b}),(0,l.jsx)(i.Button,{...j,appearance:e,size:p,disabled:!N&&(m||!!j.disabled),disabledFocusable:N,icon:I?P:(0,l.jsx)(a.ChevronDownIcon,{}),className:t.cn(f,u[p],`rounded-s-none`,d[e],j.className)})]})};p.displayName=`SplitButton`,exports.SplitButton=p;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/classNames.cjs"),a=require("./Button.cjs"),o=require("./Button.slots.cjs"),s=require("../../lib/icons.cjs"),c=require("../../lib/mergeProps.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d={"extra-small":`w-auto min-w-6 min-h-6 px-1.5`,small:`w-auto min-w-6 min-h-6 px-1.5`,medium:`w-auto min-w-6 min-h-6 px-2`,large:`w-auto min-w-6 min-h-6 px-2`,"extra-large":`w-auto min-w-6 min-h-6 px-3`},f={primary:`border-s-primary-foreground/30`,outline:`border-s-stroke`,subtle:`border-s-stroke`,transparent:`border-s-stroke`},p=`relative min-h-6 focus-visible:z-10`,m=({appearance:e=`outline`,size:m=`medium`,disabled:h=!1,disabledFocusable:g=!1,icon:_,iconPosition:v,menuIcon:y,className:b,children:x,onClick:S,onMenuClick:C,menuButtonLabel:w=`More options`,menuButtonProps:T,primaryActionButtonProps:E,"aria-describedby":D,role:O,ref:k,...A})=>{let j=c.mergeProps({"aria-describedby":D,onClick:S},E),M=c.mergeProps({"aria-label":w,"aria-haspopup":`menu`,onClick:C},T),N=g||!!j.disabledFocusable,P=g||!!M.disabledFocusable,{glyph:F,button:I}=o.unwrapButtonGlyph(y),L=r.slotRendersContent(F),R=I===null&&y!=null&&!L;return l.useEffect(()=>{R&&n.warnOnce(`SplitButton:menuIcon-empty`,"SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.")},[R]),l.useEffect(()=>{I&&n.warnOnce(`SplitButton:menuIcon-button`,`SplitButton: \`menuIcon\` received ${I}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`)},[I]),(0,u.jsxs)(`div`,{ref:k,...A,role:O??`group`,className:t.cn(i.splitButtonClassNames.root,`inline-flex items-stretch`,b),children:[(0,u.jsx)(a.Button,{...j,appearance:e,size:m,disabled:!N&&(h||!!j.disabled),disabledFocusable:N,icon:o.withPartClass(_,i.splitButtonClassNames.icon),iconPosition:v,className:t.cn(i.splitButtonClassNames.primaryActionButton,p,`rounded-e-none border-e-0`,j.className),children:x}),(0,u.jsx)(a.Button,{...M,appearance:e,size:m,disabled:!P&&(h||!!M.disabled),disabledFocusable:P,icon:o.withPartClass(L?F:(0,u.jsx)(s.ChevronDownIcon,{}),i.splitButtonClassNames.menuIcon),className:t.cn(i.splitButtonClassNames.menuButton,p,d[m],`rounded-s-none`,f[e],M.className)})]})};m.displayName=`SplitButton`,exports.SplitButton=m;
 //# sourceMappingURL=SplitButton.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.cjs","names":["mergeProps","unwrapButtonGlyph","slotRendersContent","cn","Button","ChevronDownIcon","require_runtime","require_cn","require_dev","require_slot","require_Button","require_icons","require_mergeProps","require_Button_slots","react","react_jsx_runtime","menuButtonSizeClasses","separatorClasses","halfClasses","SplitButton","ariaDescribedBy","props","primary","primaryActionButtonProps","menu","menuButtonLabel","onMenuClick","menuButtonProps","primaryFocusable","disabledFocusable","menuFocusable","menuGlyph","menuIconButton","menuIcon","menuIconRenders","menuIconEmpty","role","className","disabled","size","appearance"],"sources":["../../../src/components/button/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph } from './Button.slots';\n\n/**\n * Props for one half of a SplitButton (`menuButtonProps`, `primaryActionButtonProps`): native\n * `<button>` attributes, `data-*` attributes and `ref`. They are merged onto the built-in props\n * of that half: handlers are composed (yours run first), `className` is merged, id lists are\n * joined and any other value you pass wins.\n */\nexport interface SplitButtonMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Makes only this half unavailable but focusable (see `SplitButton.disabledFocusable`, which\n   * affects both halves). For each half, focusable-disabled wins over natively disabled.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the `<button>` element of this half. */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** Props for the primary action half of a SplitButton (same shape as the menu half). */\nexport type SplitButtonPrimaryActionButtonProps = SplitButtonMenuButtonProps;\n\n/** Properties for the SplitButton component. */\nexport interface SplitButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * Disables both buttons. A half's own `disabled` (`primaryActionButtonProps`,\n   * `menuButtonProps`) disables only that half.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Makes both halves unavailable but focusable (see `Button.disabledFocusable`): each half\n   * renders `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable`, stays in the tab\n   * order, and neither `onClick` nor the menu opens. A half's own `disabledFocusable` (in\n   * `primaryActionButtonProps`/`menuButtonProps`) affects only that half. For each half,\n   * focusable-disabled wins over natively disabled: the half is focusable-disabled when the root's\n   * or its own `disabledFocusable` is set; otherwise it is natively disabled when the root's or its\n   * own `disabled` is set.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon of the primary action, decorative (`aria-hidden`). For an icon-only primary action pass\n   * `primaryActionButtonProps={{ 'aria-label': '…' }}`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the primary action's icon renders: before its label (the inline start) or after it.\n   * Has no effect on an icon-only primary action. The menu half is not affected.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Replaces the chevron of the menu half (decorative, `aria-hidden`). The menu half always shows\n   * an indicator: `null` and `undefined` keep the default chevron, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `MenuButton.menuIcon`, a value that renders nothing does not hide the indicator. A `<button>`\n   * or `Button` element, or a slot object whose `as` is one, is not nested inside the menu half:\n   * its children become the glyph (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Click handler for the primary action button. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Click handler for the menu (chevron) button. */\n  onMenuClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Accessible name of the menu button (it shows only a chevron). Localize it.\n   * @default 'More options'\n   */\n  menuButtonLabel?: string;\n  /**\n   * Props for the menu button: `aria-expanded`, `aria-controls`, `id`, handlers (`onKeyDown` for\n   * ArrowDown/ArrowUp), `ref` for focus restoration, … Pass the render-prop props of\n   * `Menu.Trigger` here to open a Menu from the chevron.\n   */\n  menuButtonProps?: SplitButtonMenuButtonProps;\n  /** Props for the primary action button (`ref`, `title`, handlers, …). */\n  primaryActionButtonProps?: SplitButtonPrimaryActionButtonProps;\n  /** Ref to the wrapping `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Menu button size per SplitButton size: at least 24×24 CSS px at every size (WCAG 2.5.8 target\n * size; the chevron shares an edge with the primary button, so the spacing exception does not\n * apply). Overrides the square icon-only sizing of `Button` (`w-*`, `px-0`).\n */\nconst menuButtonSizeClasses: Record<Size, string> = {\n  'extra-small': 'w-auto min-w-6 min-h-6 px-1.5',\n  small: 'w-auto min-w-6 min-h-6 px-1.5',\n  medium: 'w-auto min-w-6 min-h-6 px-2',\n  large: 'w-auto min-w-6 min-h-6 px-2',\n  'extra-large': 'w-auto min-w-6 min-h-6 px-3',\n};\n\n/** The separator is the menu button's start border (logical, so it mirrors in RTL). */\nconst separatorClasses: Record<Appearance, string> = {\n  primary: 'border-s-primary-foreground/30',\n  outline: 'border-s-stroke',\n  subtle: 'border-s-stroke',\n  transparent: 'border-s-stroke',\n};\n\n/**\n * Keeps each half's focus ring above its neighbour. `min-h-6` keeps both halves as tall as the\n * 24px menu button target at the extra-small size.\n */\nconst halfClasses = 'relative min-h-6 focus-visible:z-10';\n\n/**\n * A primary action button joined to a menu button (chevron), e.g. Save + \"Save as…\" options.\n * Both halves are {@link Button}s with the shared appearances and sizes, inside a\n * `role=\"group\"` wrapper.\n *\n * - `ref`, `className`, `style`, `aria-label` and other props go to the group; `aria-describedby`\n *   is routed to the primary button (so a Tooltip around the SplitButton describes the action).\n * - `primaryActionButtonProps` / `menuButtonProps` reach the two buttons; the menu button is\n *   named by `menuButtonLabel` (default `'More options'`).\n * - The menu button is at least 24×24 px at every size, so an extra-small SplitButton is 24px tall.\n * - `icon`/`iconPosition` belong to the primary action; `menuIcon` replaces the chevron, which the\n *   menu half always shows (a `menuIcon` that renders nothing keeps it).\n * - `disabledFocusable` keeps both halves focusable while unavailable; `Menu.Trigger` does not open\n *   its menu from an `aria-disabled` menu half.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger>\n *     {(triggerProps) => (\n *       <SplitButton menuButtonProps={triggerProps} onClick={save}>Save</SplitButton>\n *     )}\n *   </Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const SplitButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  icon,\n  iconPosition,\n  menuIcon,\n  className,\n  children,\n  onClick,\n  onMenuClick,\n  menuButtonLabel = 'More options',\n  menuButtonProps,\n  primaryActionButtonProps,\n  'aria-describedby': ariaDescribedBy,\n  role,\n  ref,\n  ...props\n}: SplitButtonProps) => {\n  const primary = mergeProps(\n    { 'aria-describedby': ariaDescribedBy, onClick } as SplitButtonMenuButtonProps,\n    primaryActionButtonProps,\n  );\n  const menu = mergeProps(\n    {\n      'aria-label': menuButtonLabel,\n      'aria-haspopup': 'menu',\n      onClick: onMenuClick,\n    } as SplitButtonMenuButtonProps,\n    menuButtonProps,\n  );\n\n  // Per half: focusable-disabled (the root's or its own) wins over natively disabled.\n  const primaryFocusable = disabledFocusable || Boolean(primary.disabledFocusable);\n  const menuFocusable = disabledFocusable || Boolean(menu.disabledFocusable);\n\n  // The glyph sits inside the menu half's button: a button passed as `menuIcon` is unwrapped (its\n  // children are the glyph), never nested (C-SLOTS).\n  const { glyph: menuGlyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  // The menu half always shows an indicator: a `menuIcon` that renders nothing keeps the chevron.\n  const menuIconRenders = slotRendersContent(menuGlyph);\n  // An unwrapped button reports its own warning only.\n  const menuIconEmpty = menuIconButton === null && menuIcon != null && !menuIconRenders;\n  React.useEffect(() => {\n    if (menuIconEmpty) {\n      warnOnce(\n        'SplitButton:menuIcon-empty',\n        'SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.',\n      );\n    }\n  }, [menuIconEmpty]);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'SplitButton:menuIcon-button',\n        `SplitButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `role=\"group\"` applies wherever the consumer's role is `undefined` or `null` (as in Button).\n  return (\n    <div\n      ref={ref}\n      {...props}\n      role={role ?? 'group'}\n      className={cn('inline-flex items-stretch', className)}\n    >\n      <Button\n        {...primary}\n        appearance={appearance}\n        size={size}\n        disabled={!primaryFocusable && (disabled || Boolean(primary.disabled))}\n        disabledFocusable={primaryFocusable}\n        icon={icon}\n        iconPosition={iconPosition}\n        className={cn(halfClasses, 'rounded-e-none border-e-0', primary.className)}\n      >\n        {children}\n      </Button>\n      <Button\n        {...menu}\n        appearance={appearance}\n        size={size}\n        disabled={!menuFocusable && (disabled || Boolean(menu.disabled))}\n        disabledFocusable={menuFocusable}\n        icon={menuIconRenders ? menuGlyph : <ChevronDownIcon />}\n        className={cn(\n          halfClasses,\n          menuButtonSizeClasses[size],\n          'rounded-s-none',\n          separatorClasses[appearance],\n          menu.className,\n        )}\n      />\n    </div>\n  );\n};\n\nSplitButton.displayName = 'SplitButton';\n"],"mappings":"8WA0GA,IAAMgB,EAA8C,CAClD,cAAe,gCACf,MAAO,gCACP,OAAQ,8BACR,MAAO,8BACP,cAAe,6BACjB,EAGMC,EAA+C,CACnD,QAAS,iCACT,QAAS,kBACT,OAAQ,kBACR,YAAa,iBACf,EAMMC,EAAc,sCA2BPC,GAAe,CAC1B,aAAa,UACb,OAAO,SACP,WAAW,GACX,oBAAoB,GACpB,OACA,eACA,WACA,YACA,WACA,UACA,cACA,kBAAkB,eAClB,kBACA,2BACA,mBAAoBC,EACpB,OACA,MACA,GAAGC,KACmB,CACtB,IAAMC,EAAUtB,EAAAA,WACd,CAAE,mBAAoBoB,EAAiB,SAAQ,EAC/CG,CACF,EACMC,EAAOxB,EAAAA,WACX,CACE,aAAcyB,EACd,gBAAiB,OACjB,QAASC,CACX,EACAC,CACF,EAGMC,EAAmBC,GAAqB,EAAQP,EAAQ,kBACxDQ,EAAgBD,GAAqB,EAAQL,EAAK,kBAIlD,CAAE,MAAOO,EAAW,OAAQC,GAAmB/B,EAAAA,kBAAkBgC,CAAQ,EAEzEC,EAAkBhC,EAAAA,mBAAmB6B,CAAS,EAE9CI,EAAgBH,IAAmB,MAAQC,GAAY,MAAQ,CAACC,EAmBtE,OAlBApB,EAAM,cAAgB,CAChBqB,GACF3B,EAAA,SACE,6BACA,mMACF,CAEJ,EAAG,CAAC2B,CAAa,CAAC,EAClBrB,EAAM,cAAgB,CAChBkB,GACFxB,EAAA,SACE,8BACA,sCAAsCwB,EAAe,wKACvD,CAEJ,EAAG,CAACA,CAAc,CAAC,GAIjB,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,GAAIM,EACJ,KAAMe,GAAQ,QACd,UAAWjC,EAAAA,GAAG,4BAA6BkC,CAAS,EAJtD,SAAA,EAME,EAAAtB,EAAA,IAAA,CAACX,EAAAA,OAAD,CACE,GAAIkB,EACQ,aACN,OACN,SAAU,CAACM,IAAqBU,GAAY,EAAQhB,EAAQ,UAC5D,kBAAmBM,EACb,OACQ,eACd,UAAWzB,EAAAA,GAAGe,EAAa,4BAA6BI,EAAQ,SAAS,EAExE,UACK,CAAA,GACR,EAAAP,EAAA,IAAA,CAACX,EAAAA,OAAD,CACE,GAAIoB,EACQ,aACN,OACN,SAAU,CAACM,IAAkBQ,GAAY,EAAQd,EAAK,UACtD,kBAAmBM,EACnB,KAAMI,EAAkBH,GAAY,EAAAhB,EAAA,IAAA,CAACV,EAAAA,gBAAD,CAAkB,CAAA,EACtD,UAAWF,EAAAA,GACTe,EACAF,EAAsBuB,GACtB,iBACAtB,EAAiBuB,GACjBhB,EAAK,SACP,CACD,CAAA,CACE,GAET,EAEA,EAAY,YAAc"}
+{"version":3,"file":"SplitButton.cjs","names":["mergeProps","unwrapButtonGlyph","slotRendersContent","cn","splitButtonClassNames","Button","withPartClass","ChevronDownIcon","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_Button","require_Button_slots","require_icons","require_mergeProps","react","react_jsx_runtime","menuButtonSizeClasses","separatorClasses","halfClasses","SplitButton","ariaDescribedBy","props","primary","primaryActionButtonProps","menu","menuButtonLabel","onMenuClick","menuButtonProps","primaryFocusable","disabledFocusable","menuFocusable","menuGlyph","menuIconButton","menuIcon","menuIconRenders","menuIconEmpty","role","className","disabled","icon","size","appearance"],"sources":["../../../src/components/button/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { splitButtonClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph, withPartClass } from './Button.slots';\n\n/**\n * Props for one half of a SplitButton (`menuButtonProps`, `primaryActionButtonProps`): native\n * `<button>` attributes, `data-*` attributes and `ref`. They are merged onto the built-in props\n * of that half: handlers are composed (yours run first), `className` is merged, id lists are\n * joined and any other value you pass wins.\n */\nexport interface SplitButtonMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Makes only this half unavailable but focusable (see `SplitButton.disabledFocusable`, which\n   * affects both halves). For each half, focusable-disabled wins over natively disabled.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the `<button>` element of this half. */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** Props for the primary action half of a SplitButton (same shape as the menu half). */\nexport type SplitButtonPrimaryActionButtonProps = SplitButtonMenuButtonProps;\n\n/** Properties for the SplitButton component. */\nexport interface SplitButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * Disables both buttons. A half's own `disabled` (`primaryActionButtonProps`,\n   * `menuButtonProps`) disables only that half.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Makes both halves unavailable but focusable (see `Button.disabledFocusable`): each half\n   * renders `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable`, stays in the tab\n   * order, and neither `onClick` nor the menu opens. A half's own `disabledFocusable` (in\n   * `primaryActionButtonProps`/`menuButtonProps`) affects only that half. For each half,\n   * focusable-disabled wins over natively disabled: the half is focusable-disabled when the root's\n   * or its own `disabledFocusable` is set; otherwise it is natively disabled when the root's or its\n   * own `disabled` is set.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon of the primary action, decorative (`aria-hidden`). For an icon-only primary action pass\n   * `primaryActionButtonProps={{ 'aria-label': '…' }}`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the primary action's icon renders: before its label (the inline start) or after it.\n   * Has no effect on an icon-only primary action. The menu half is not affected.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Replaces the chevron of the menu half (decorative, `aria-hidden`). The menu half always shows\n   * an indicator: `null` and `undefined` keep the default chevron, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `MenuButton.menuIcon`, a value that renders nothing does not hide the indicator. A `<button>`\n   * or `Button` element, or a slot object whose `as` is one, is not nested inside the menu half:\n   * its children become the glyph (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Click handler for the primary action button. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Click handler for the menu (chevron) button. */\n  onMenuClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Accessible name of the menu button (it shows only a chevron). Localize it.\n   * @default 'More options'\n   */\n  menuButtonLabel?: string;\n  /**\n   * Props for the menu button: `aria-expanded`, `aria-controls`, `id`, handlers (`onKeyDown` for\n   * ArrowDown/ArrowUp), `ref` for focus restoration, … Pass the render-prop props of\n   * `Menu.Trigger` here to open a Menu from the chevron.\n   */\n  menuButtonProps?: SplitButtonMenuButtonProps;\n  /** Props for the primary action button (`ref`, `title`, handlers, …). */\n  primaryActionButtonProps?: SplitButtonPrimaryActionButtonProps;\n  /** Ref to the wrapping `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Menu button size per SplitButton size: at least 24×24 CSS px at every size (WCAG 2.5.8 target\n * size; the chevron shares an edge with the primary button, so the spacing exception does not\n * apply). Overrides the square icon-only sizing of `Button` (`w-*`, `px-0`).\n */\nconst menuButtonSizeClasses: Record<Size, string> = {\n  'extra-small': 'w-auto min-w-6 min-h-6 px-1.5',\n  small: 'w-auto min-w-6 min-h-6 px-1.5',\n  medium: 'w-auto min-w-6 min-h-6 px-2',\n  large: 'w-auto min-w-6 min-h-6 px-2',\n  'extra-large': 'w-auto min-w-6 min-h-6 px-3',\n};\n\n/** The separator is the menu button's start border (logical, so it mirrors in RTL). */\nconst separatorClasses: Record<Appearance, string> = {\n  primary: 'border-s-primary-foreground/30',\n  outline: 'border-s-stroke',\n  subtle: 'border-s-stroke',\n  transparent: 'border-s-stroke',\n};\n\n/**\n * Keeps each half's focus ring above its neighbour. `min-h-6` keeps both halves as tall as the\n * 24px menu button target at the extra-small size.\n */\nconst halfClasses = 'relative min-h-6 focus-visible:z-10';\n\n/**\n * A primary action button joined to a menu button (chevron), e.g. Save + \"Save as…\" options.\n * Both halves are {@link Button}s with the shared appearances and sizes, inside a\n * `role=\"group\"` wrapper.\n *\n * - `ref`, `className`, `style`, `aria-label` and other props go to the group; `aria-describedby`\n *   is routed to the primary button (so a Tooltip around the SplitButton describes the action).\n * - `primaryActionButtonProps` / `menuButtonProps` reach the two buttons; the menu button is\n *   named by `menuButtonLabel` (default `'More options'`).\n * - The menu button is at least 24×24 px at every size, so an extra-small SplitButton is 24px tall.\n * - `icon`/`iconPosition` belong to the primary action; `menuIcon` replaces the chevron, which the\n *   menu half always shows (a `menuIcon` that renders nothing keeps it).\n * - `disabledFocusable` keeps both halves focusable while unavailable; `Menu.Trigger` does not open\n *   its menu from an `aria-disabled` menu half.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger>\n *     {(triggerProps) => (\n *       <SplitButton menuButtonProps={triggerProps} onClick={save}>Save</SplitButton>\n *     )}\n *   </Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const SplitButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  icon,\n  iconPosition,\n  menuIcon,\n  className,\n  children,\n  onClick,\n  onMenuClick,\n  menuButtonLabel = 'More options',\n  menuButtonProps,\n  primaryActionButtonProps,\n  'aria-describedby': ariaDescribedBy,\n  role,\n  ref,\n  ...props\n}: SplitButtonProps) => {\n  const primary = mergeProps(\n    { 'aria-describedby': ariaDescribedBy, onClick } as SplitButtonMenuButtonProps,\n    primaryActionButtonProps,\n  );\n  const menu = mergeProps(\n    {\n      'aria-label': menuButtonLabel,\n      'aria-haspopup': 'menu',\n      onClick: onMenuClick,\n    } as SplitButtonMenuButtonProps,\n    menuButtonProps,\n  );\n\n  // Per half: focusable-disabled (the root's or its own) wins over natively disabled.\n  const primaryFocusable = disabledFocusable || Boolean(primary.disabledFocusable);\n  const menuFocusable = disabledFocusable || Boolean(menu.disabledFocusable);\n\n  // The glyph sits inside the menu half's button: a button passed as `menuIcon` is unwrapped (its\n  // children are the glyph), never nested (C-SLOTS).\n  const { glyph: menuGlyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  // The menu half always shows an indicator: a `menuIcon` that renders nothing keeps the chevron.\n  const menuIconRenders = slotRendersContent(menuGlyph);\n  // An unwrapped button reports its own warning only.\n  const menuIconEmpty = menuIconButton === null && menuIcon != null && !menuIconRenders;\n  React.useEffect(() => {\n    if (menuIconEmpty) {\n      warnOnce(\n        'SplitButton:menuIcon-empty',\n        'SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.',\n      );\n    }\n  }, [menuIconEmpty]);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'SplitButton:menuIcon-button',\n        `SplitButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `role=\"group\"` applies wherever the consumer's role is `undefined` or `null` (as in Button).\n  return (\n    <div\n      ref={ref}\n      {...props}\n      role={role ?? 'group'}\n      className={cn(splitButtonClassNames.root, 'inline-flex items-stretch', className)}\n    >\n      <Button\n        {...primary}\n        appearance={appearance}\n        size={size}\n        disabled={!primaryFocusable && (disabled || Boolean(primary.disabled))}\n        disabledFocusable={primaryFocusable}\n        icon={withPartClass(icon, splitButtonClassNames.icon)}\n        iconPosition={iconPosition}\n        className={cn(\n          splitButtonClassNames.primaryActionButton,\n          halfClasses,\n          'rounded-e-none border-e-0',\n          primary.className,\n        )}\n      >\n        {children}\n      </Button>\n      <Button\n        {...menu}\n        appearance={appearance}\n        size={size}\n        disabled={!menuFocusable && (disabled || Boolean(menu.disabled))}\n        disabledFocusable={menuFocusable}\n        icon={withPartClass(\n          menuIconRenders ? menuGlyph : <ChevronDownIcon />,\n          splitButtonClassNames.menuIcon,\n        )}\n        className={cn(\n          splitButtonClassNames.menuButton,\n          halfClasses,\n          menuButtonSizeClasses[size],\n          'rounded-s-none',\n          separatorClasses[appearance],\n          menu.className,\n        )}\n      />\n    </div>\n  );\n};\n\nSplitButton.displayName = 'SplitButton';\n"],"mappings":"oZA2GA,IAAMmB,EAA8C,CAClD,cAAe,gCACf,MAAO,gCACP,OAAQ,8BACR,MAAO,8BACP,cAAe,6BACjB,EAGMC,EAA+C,CACnD,QAAS,iCACT,QAAS,kBACT,OAAQ,kBACR,YAAa,iBACf,EAMMC,EAAc,sCA2BPC,GAAe,CAC1B,aAAa,UACb,OAAO,SACP,WAAW,GACX,oBAAoB,GACpB,OACA,eACA,WACA,YACA,WACA,UACA,cACA,kBAAkB,eAClB,kBACA,2BACA,mBAAoBC,EACpB,OACA,MACA,GAAGC,KACmB,CACtB,IAAMC,EAAUzB,EAAAA,WACd,CAAE,mBAAoBuB,EAAiB,SAAQ,EAC/CG,CACF,EACMC,EAAO3B,EAAAA,WACX,CACE,aAAc4B,EACd,gBAAiB,OACjB,QAASC,CACX,EACAC,CACF,EAGMC,EAAmBC,GAAqB,EAAQP,EAAQ,kBACxDQ,EAAgBD,GAAqB,EAAQL,EAAK,kBAIlD,CAAE,MAAOO,EAAW,OAAQC,GAAmBlC,EAAAA,kBAAkBmC,CAAQ,EAEzEC,EAAkBnC,EAAAA,mBAAmBgC,CAAS,EAE9CI,EAAgBH,IAAmB,MAAQC,GAAY,MAAQ,CAACC,EAmBtE,OAlBApB,EAAM,cAAgB,CAChBqB,GACF5B,EAAA,SACE,6BACA,mMACF,CAEJ,EAAG,CAAC4B,CAAa,CAAC,EAClBrB,EAAM,cAAgB,CAChBkB,GACFzB,EAAA,SACE,8BACA,sCAAsCyB,EAAe,wKACvD,CAEJ,EAAG,CAACA,CAAc,CAAC,GAIjB,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,GAAIM,EACJ,KAAMe,GAAQ,QACd,UAAWpC,EAAAA,GAAGC,EAAAA,sBAAsB,KAAM,4BAA6BoC,CAAS,EAJlF,SAAA,EAME,EAAAtB,EAAA,IAAA,CAACb,EAAAA,OAAD,CACE,GAAIoB,EACQ,aACN,OACN,SAAU,CAACM,IAAqBU,GAAY,EAAQhB,EAAQ,UAC5D,kBAAmBM,EACnB,KAAMzB,EAAAA,cAAcoC,EAAMtC,EAAAA,sBAAsB,IAAI,EACtC,eACd,UAAWD,EAAAA,GACTC,EAAAA,sBAAsB,oBACtBiB,EACA,4BACAI,EAAQ,SACV,EAEC,UACK,CAAA,GACR,EAAAP,EAAA,IAAA,CAACb,EAAAA,OAAD,CACE,GAAIsB,EACQ,aACN,OACN,SAAU,CAACM,IAAkBQ,GAAY,EAAQd,EAAK,UACtD,kBAAmBM,EACnB,KAAM3B,EAAAA,cACJ+B,EAAkBH,GAAY,EAAAhB,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAkB,CAAA,EAChDH,EAAAA,sBAAsB,QACxB,EACA,UAAWD,EAAAA,GACTC,EAAAA,sBAAsB,WACtBiB,EACAF,EAAsBwB,GACtB,iBACAvB,EAAiBwB,GACjBjB,EAAK,SACP,CACD,CAAA,CACE,GAET,EAEA,EAAY,YAAc"}