@kanso-labs/kanso-ui 0.35.0 → 0.37.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","refCallback","focus","mergeStatefulStyles","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","t1","isDisabled","t2","isPending","t3","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t4","ref","render","t5","t6","props","undefined","t7","ripple","t8","state","ring","styleProps","element","aria","t9","forwarded","handlers","surface","T0","t10","t11","t12","buttonContent","t13","Button","_c","props","stylex.props","RACLink","RACButton"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { refCallback } from '../../render/ref';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1gvacq5\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1arwny6\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  isPending = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  ref,\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  //\n  // Off while pending for the same reason, and for a second one. React Aria\n  // nulls out the handlers it derived itself while pending — the click among\n  // them — but not the separate copy of the global pointer events that\n  // carries ours, so a press still reached the ripple and started it while\n  // the click that would have ended it never arrived. The ripple stayed at\n  // its pressed opacity until some later press completed a cycle of its own.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // The element is a link or a button, so the ref is typed as either, and is\n  // handed to each as the callback both accept — see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} ref={forwarded} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} isPending={isPending} ref={forwarded} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","kjj79g","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","round","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","iconSizes","PADDINGS","shifted","padding","value","val","undefined","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","const","ButtonProps","children","className","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","shape","ButtonShape","size","ButtonSize","style","target","variant","ButtonVariant","ToggleVariant","Button","t0","$","isPending","t1","ownSize","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","content","t4","buttonClasses","toggleClasses","t5","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","shift","container","Button","_c","props","stylex.props"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// The hover, focus and pressed layers come from React Aria's render state,\n// `isHovered`, `isFocusVisible` and `isPressed`, rather than from `:hover`,\n// `:focus-visible` and `:active`. On a touch screen Chromium leaves `:hover`\n// on the last element tapped, so the layer and its lifted shadow stayed on a\n// button after the tap had ended, where React Aria ignores the emulated mouse\n// events that follow a touch. And React Aria prevents the default of the\n// keydown that presses a button with Space or Enter, so `:active` never\n// matched a keyboard press, which `isPressed` reports like any other.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they win\n// over any state layer applied before them.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton`, which\n// announces the state through `aria-pressed`, as IconButton's toggle does.\n// The page gives four of the five styles a second pair of colour roles for\n// it: a filled toggle rests on surface container with an on-surface-variant\n// label and takes primary once selected, a tonal one moves from the\n// secondary container pair to secondary, an elevated one keeps its low\n// surface until it takes primary, and an outlined one swaps its rule for the\n// inverse surface pair. Under forced colours a selected toggle of any style\n// is filled `Highlight`, as IconButton's is. The page gives text no pair, so\n// a text button given those props stays a plain one.\n//\n// **The corner is a shape the button morphs between**, from the page's size\n// token sets. `round` rests as the pill and `square` at the size's square\n// corner: 12dp up to the page's S, 16dp at M and 28dp above. A press tightens\n// either to the size's pressed corner, 8dp, 12dp or 16dp, and a toggle\n// trades its shape for the other once selected — a round one for the square\n// corner, a square one for the pill. The corner eases over the motion\n// tokens' short duration, and moves at once for a reader who asks for\n// reduced motion.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring, a parent's disabled state — is\n// `src/button`'s, shared with IconButton.\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1qno0dh x12w9bfk\",\n    k1ekBW: \"x1hdt7lq\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  lg: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kAzted: \"xdovgog\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1gvacq5\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  round: {\n    kaIpWk: \"x1dkaolv\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kAzted: \"x112cvos\",\n    k8WAf4: \"xny1cbh\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1arwny6\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kAzted: \"xldltni\",\n    k8WAf4: \"x1lrxzt4\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// The icon each size draws, from the page's size token sets: 20dp for the\n// two small sizes, then 24, 32 and 40. The gap before it is the size's own,\n// which `base`, `xl` and `xxl` already set as the page gives them.\nconst iconSizes = {\n  lg: {\n    kGuDYH: \"x1pvqxga\",\n    $$css: true\n  },\n  md: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xl: {\n    kGuDYH: \"x1s3cmhv\",\n    $$css: true\n  },\n  xs: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xxl: {\n    kGuDYH: \"x1tgwohi\",\n    $$css: true\n  }\n};\n\n// Each size's inline padding again, for the one place it is read at runtime:\n// a standard ButtonGroup widening a pressed button by adding to it. The size\n// styles above write the same values.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.lg,\n  xxl: '64px'\n};\n\n// The padding a standard group sets while it widens or narrows the button.\nconst shifted = {\n  padding: (value: string) => [{\n    kg3NbH: value != null ? \"x30g6up\" : value,\n    $$css: true\n  }, {\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The square corner each size rests at, and a round toggle once selected.\nconst squareShapes = {\n  lg: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, whatever its shape. Applied after the\n// resting and selected shapes, so a press is felt whichever the button rests\n// at.\nconst pressedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// The interaction state layers, one style per variant for each state, applied\n// from React Aria's render state — see the header for why that and not the\n// pseudo-classes. In the order they are applied, so where two hold the later\n// wins, as the page draws one layer at a time: focus over hover, and a press\n// over both. Hover lifts filled and tonal off the page and raises elevated a\n// level, and a press brings each back to where it rests.\n//\n// A toggle's containers carry a layer of their own, each the label colour\n// over that container, applied after the variant's so the variant still\n// decides the shadow. A selected toggle's keeps its forced-colours\n// `Highlight`, since a later style replaces the property whole.\nconst hovered = {\n  elevated: {\n    kWkggS: \"xltxkvm\",\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xo1ct44\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xtxe0ya\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1hxzsxp x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  elevated: {\n    kWkggS: \"xcn1wy9\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xhodiby\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1ppcb1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"xn4e5mw x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x16tkg7c x1jzqe4\",\n    $$css: true\n  }\n};\nconst pressed = {\n  elevated: {\n    kWkggS: \"x1d33wxb\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x7b25lv\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1qdfkg1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x167cdfs x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\n\n// Which container a toggle draws, selected and not, by its name in the\n// tables above. Three of the eight are the plain button's own: an unselected\n// tonal, elevated or outlined toggle is the tonal, elevated or outlined\n// button.\nconst toggleContainers = {\n  elevated: {\n    selected: 'elevatedToggleSelected',\n    unselected: 'elevated'\n  },\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle —\n   * except a `text` button, which the page gives no selected colours, so it\n   * stays a plain button.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * An icon before the label, at the page's icon size for the button's size:\n   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw\n   * it `1em` square in `currentColor`, as every icon here is, and it follows.\n   * Hidden with the label while the button is pending.\n   */\n  icon?: ReactNode;\n  /**\n   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle, `text` excepted.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle,\n   * `text` excepted.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows. Left out, it is\n   * the word for it in the I18nProvider's locale — \"Loading\" in English.\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The corner the button rests at: `round` is the pill, `square` the\n   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.\n   * Either tightens while pressed, and a toggle trades one for the other\n   * once selected.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonShape = 'round' | 'square';\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// The four styles the page gives a toggle's colour pairs; see the header.\ntype ToggleVariant = keyof typeof toggleContainers;\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square. Given `href` it is a link with the same appearance. Every\n * `aria-*` prop is forwarded to the element; React Aria alone would keep only\n * the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props, and a `text` button never toggles.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n */\nfunction Button({\n  children,\n  defaultSelected,\n  href,\n  icon,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  shape = 'round',\n  size: ownSize,\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup or a SplitButton around the button hands it a size, its\n  // shape at the group's inner edges and the press interaction; see\n  // src/button/context.ts. A size named here still wins.\n  const group = useContext(ButtonGroupItemContext);\n  const size = ownSize ?? group?.size ?? 'md';\n  // A group that selects is React Aria's ToggleButtonGroup, whose buttons\n  // have to be toggles to take part in its selection.\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n\n  // The icon goes in with the label, inside what ButtonBase hides while the\n  // button is pending, so the ring takes the place of both.\n  const content = icon === undefined ? children : <>\n        <span {...stylex.props(styles.icon, iconSizes[size])}>{icon}</span>\n        {children}\n      </>;\n\n  // The three props that make this a toggle, read as IconButton reads them,\n  // for every style the page gives a toggle's colours to — or a selecting\n  // group around it. A text button in such a group is a toggle too, for the\n  // group's sake, and draws its selection by nothing but the group's shape.\n  if (inSelectingGroup || variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined)) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} defaultSelected={defaultSelected} isPending={isPending} isSelected={isSelected} onChange={onChange}>\n        {content}\n      </ToggleButtonBase>;\n  }\n  return <ButtonBase {...props} {...press} classes={buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} pendingLabel={pendingLabel} rel={rel} target={target}>\n      {content}\n    </ButtonBase>;\n}\n\n// The button's own classes, from React Aria's render state — see the header\n// for why that and not the pseudo-classes. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction buttonClasses(shape: ButtonShape, size: ButtonSize, variant: ButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' && squareShapes[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n}\n\n// What a group lays over the button: its own styles for the button's state,\n// and the standard group's widening or narrowing as extra inline padding,\n// half of the shift on either side.\nfunction groupStyles(group: ButtonGroupItem | null, size: ButtonSize, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} + ${group.shift / 2}px)`)];\n}\n\n// A toggle's classes: the plain button's, with the container and its layers\n// swapped for the toggle's pair, and the selected shape between the resting\n// and the pressed one. The variant's own style and layers still go first, for\n// the shadow and the rule they carry. Built by a call for the reason\n// `buttonClasses` is.\nfunction toggleClasses(shape: ButtonShape, size: ButtonSize, variant: ToggleVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonState) => {\n    const isSelected = state.isSelected === true;\n    const container = toggleContainers[variant][isSelected ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === 'square' && squareShapes[size], isSelected && (shape === 'square' ? styles.round : squareShapes[size]), variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n  };\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+import { ButtonShape, ButtonSize } from "../button/index.js";
+import { CSSProperties, ReactNode, RefAttributes } from "react";
+import { ToggleButtonGroupProps } from "react-aria-components";
+//#region src/components/button-group/index.d.ts
+type ButtonGroupProps = Omit<ToggleButtonGroupProps, 'children' | 'className' | 'selectionMode' | 'style'> & RefAttributes<HTMLDivElement> & {
+  /** The buttons: Buttons and IconButtons, each with an `id` in a group that selects. */
+  children?: ReactNode;
+  /** The class for the group's own element. */
+  className?: string;
+  /**
+   * Makes the group select, as React Aria's `ToggleButtonGroup`: `single`
+   * for one at a time, `multiple` for any number. Left out, the group's
+   * buttons are plain buttons.
+   */
+  selectionMode?: ToggleButtonGroupProps['selectionMode'];
+  /**
+   * The shape a connected group gives its two ends: `round`, the pill, or
+   * `square`, the size's corner, which its inner corners take as well.
+   * @default 'round'
+   */
+  shape?: ButtonShape;
+  /**
+   * The size every button in the group takes, unless it names its own, and
+   * the size the group spaces and shapes them for.
+   * @default 'md'
+   */
+  size?: ButtonSize;
+  /** The style for the group's own element. */
+  style?: CSSProperties;
+  /**
+   * `standard` sets the buttons apart and widens a pressed one; `connected`
+   * sets them 2dp apart with square inner corners.
+   * @default 'standard'
+   */
+  variant?: ButtonGroupVariant;
+};
+type ButtonGroupVariant = 'connected' | 'standard';
+/**
+ * A row of Buttons and IconButtons drawn as the button groups page's
+ * standard or connected group. Given `selectionMode`, its buttons are
+ * toggles whose selection the group keeps, by their `id`s.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Label" selectionMode="single" variant="connected">
+ *   <Button id="first">First item</Button>
+ *   <Button id="second">Second item</Button>
+ *   <Button id="third">Third item</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare function ButtonGroup({ children, className, ref, selectionMode, shape, size, style, variant, ...props }: ButtonGroupProps): import("react").JSX.Element;
+//#endregion
+export { type ButtonGroupProps, type ButtonGroupVariant, ButtonGroup as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,272 @@
+"use client";
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { radii, sizing } from "../../tokens/design.tokens.stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { ButtonGroupItemContext } from "../../button/context.js";
+import { c } from "react/compiler-runtime";
+import { Children, isValidElement, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ButtonContext, Group, ToggleButtonGroup } from "react-aria-components";
+//#region src/components/button-group/index.tsx
+const EXPANDED_RATIO = .15;
+const DISABLED = { isDisabled: true };
+const styles = {
+	group: {
+		kGNEyG: "x6s0dn4",
+		kB7OPa: "x9f619",
+		k1xSpc: "x3nfvp2",
+		kwnvtZ: "xozqiw3",
+		$$css: true
+	},
+	minimum: {
+		k7Eaqz: "x900493",
+		$$css: true
+	}
+};
+const gaps = {
+	connected: {
+		kOIVth: "x14qo01y",
+		$$css: true
+	},
+	lg: {
+		kOIVth: "x126z3so",
+		$$css: true
+	},
+	md: {
+		kOIVth: "x1gka490",
+		$$css: true
+	},
+	xl: {
+		kOIVth: "x126z3so",
+		$$css: true
+	},
+	xs: {
+		kOIVth: "xaobbuh",
+		$$css: true
+	},
+	xxl: {
+		kOIVth: "x126z3so",
+		$$css: true
+	}
+};
+const corners = { shape: (start, end) => [{
+	kT0f0o: end != null ? "x1wsjk4f" : end,
+	kVL7Gh: start != null ? "x1oq9ryg" : start,
+	kfmiAY: end != null ? "xbsomw4" : end,
+	krdFHd: start != null ? "x6pmj1i" : start,
+	$$css: true
+}, {
+	"--x-borderEndEndRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-borderEndStartRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start),
+	"--x-borderStartEndRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-borderStartStartRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
+}] };
+const INNER = {
+	lg: radii.sm,
+	md: radii.sm,
+	xl: radii.lg,
+	xs: radii.xs,
+	xxl: "20px"
+};
+const ROUND = {
+	lg: `calc(${sizing.controlLg} / 2)`,
+	md: `calc(${sizing.controlSm} / 2)`,
+	xl: `calc(${sizing.controlXl} / 2)`,
+	xs: `calc(${sizing.controlXs} / 2)`,
+	xxl: `calc(${sizing.controlXxl} / 2)`
+};
+const INNER_PRESSED = {
+	lg: radii.xs,
+	md: radii.xs,
+	xl: radii.sm,
+	xs: "2px",
+	xxl: "10px"
+};
+/**
+* A row of Buttons and IconButtons drawn as the button groups page's
+* standard or connected group. Given `selectionMode`, its buttons are
+* toggles whose selection the group keeps, by their `id`s.
+*
+* ```tsx
+* <ButtonGroup aria-label="Label" selectionMode="single" variant="connected">
+*   <Button id="first">First item</Button>
+*   <Button id="second">Second item</Button>
+*   <Button id="third">Third item</Button>
+* </ButtonGroup>
+* ```
+*/
+function ButtonGroup(t0) {
+	const $ = c(40);
+	let children;
+	let className;
+	let props$1;
+	let ref;
+	let selectionMode;
+	let size;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, className, ref, selectionMode, shape: t1, size, style, variant: t2, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props$1;
+		$[4] = ref;
+		$[5] = selectionMode;
+		$[6] = size;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		props$1 = $[3];
+		ref = $[4];
+		selectionMode = $[5];
+		size = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+	}
+	const shape = t1 === void 0 ? "round" : t1;
+	const variant = t2 === void 0 ? "standard" : t2;
+	const [press, setPress] = useState(null);
+	let groupProps;
+	let t3;
+	if ($[10] !== children || $[11] !== className || $[12] !== press || $[13] !== shape || $[14] !== size || $[15] !== style || $[16] !== variant) {
+		const items = Children.toArray(children).filter(isValidElement);
+		const sized = size ?? "md";
+		let t4;
+		if ($[19] !== className || $[20] !== sized || $[21] !== style || $[22] !== variant) {
+			t4 = mergeStyles(props(styles.group, variant === "connected" ? gaps.connected : gaps[sized]), {
+				className,
+				style
+			});
+			$[19] = className;
+			$[20] = sized;
+			$[21] = style;
+			$[22] = variant;
+			$[23] = t4;
+		} else t4 = $[23];
+		groupProps = t4;
+		let t5;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = () => {
+				setPress(null);
+			};
+			$[24] = t5;
+		} else t5 = $[24];
+		const endPress = t5;
+		t3 = items.map((child, index) => /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+			value: itemFor({
+				count: items.length,
+				endPress,
+				index,
+				press,
+				setPress,
+				shape,
+				size,
+				variant
+			}),
+			children: child
+		}, child.key ?? index));
+		$[10] = children;
+		$[11] = className;
+		$[12] = press;
+		$[13] = shape;
+		$[14] = size;
+		$[15] = style;
+		$[16] = variant;
+		$[17] = groupProps;
+		$[18] = t3;
+	} else {
+		groupProps = $[17];
+		t3 = $[18];
+	}
+	const content = t3;
+	if (selectionMode !== void 0) {
+		let t4;
+		if ($[25] !== content || $[26] !== groupProps || $[27] !== props$1 || $[28] !== ref || $[29] !== selectionMode) {
+			t4 = /* @__PURE__ */ jsx(ToggleButtonGroup, {
+				ref,
+				selectionMode,
+				...props$1,
+				...groupProps,
+				children: content
+			});
+			$[25] = content;
+			$[26] = groupProps;
+			$[27] = props$1;
+			$[28] = ref;
+			$[29] = selectionMode;
+			$[30] = t4;
+		} else t4 = $[30];
+		return t4;
+	}
+	const t4 = props$1["aria-label"];
+	const t5 = props$1["aria-labelledby"];
+	let t6;
+	if ($[31] !== content || $[32] !== props$1.isDisabled) {
+		t6 = props$1.isDisabled === true ? /* @__PURE__ */ jsx(ButtonContext, {
+			value: DISABLED,
+			children: content
+		}) : content;
+		$[31] = content;
+		$[32] = props$1.isDisabled;
+		$[33] = t6;
+	} else t6 = $[33];
+	let t7;
+	if ($[34] !== groupProps || $[35] !== ref || $[36] !== t4 || $[37] !== t5 || $[38] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Group, {
+			"aria-label": t4,
+			"aria-labelledby": t5,
+			ref,
+			...groupProps,
+			children: t6
+		});
+		$[34] = groupProps;
+		$[35] = ref;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t7;
+	} else t7 = $[39];
+	return t7;
+}
+function connectedStyles(index, count, size, shape, state) {
+	const outer = shape === "square" ? INNER[size] : ROUND[size];
+	const inner = state.isPressed ? INNER_PRESSED[size] : state.isSelected === true ? ROUND[size] : INNER[size];
+	const start = index === 0 ? outer : inner;
+	const end = index === count - 1 ? outer : inner;
+	return [corners.shape(start, end), (size === "xs" || size === "md") && styles.minimum];
+}
+function itemFor({ count, endPress, index, press, setPress, shape, size, variant }) {
+	const sized = size ?? "md";
+	if (variant === "connected") return {
+		shift: 0,
+		size,
+		styles: (state) => connectedStyles(index, count, sized, shape, state)
+	};
+	return {
+		onPressEnd: endPress,
+		onPressStart: (width) => {
+			setPress({
+				delta: width * EXPANDED_RATIO,
+				index
+			});
+		},
+		shift: shiftFor(index, count, press),
+		size
+	};
+}
+function shiftFor(index, count, press) {
+	if (press === null) return 0;
+	if (index === press.index) return press.delta;
+	if (Math.abs(index - press.index) !== 1) return 0;
+	return -(press.index === 0 || press.index === count - 1 ? press.delta : press.delta / 2);
+}
+//#endregion
+export { ButtonGroup as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","CSSProperties","ReactNode","RefAttributes","ToggleButtonGroupProps","RACToggleButtonGroupProps","stylex","Children","isValidElement","useCallback","useState","ButtonContext","Group","RACGroup","ToggleButtonGroup","RACToggleButtonGroup","ButtonState","ButtonGroupItem","GroupSize","ButtonShape","ButtonSize","ButtonGroupItemContext","mergeStyles","radii","sizing","spacing","EXPANDED_RATIO","DISABLED","isDisabled","styles","group","kGNEyG","kB7OPa","k1xSpc","kwnvtZ","$$css","minimum","k7Eaqz","gaps","connected","kOIVth","lg","md","xl","xs","xxl","corners","shape","start","end","kT0f0o","kVL7Gh","kfmiAY","krdFHd","val","undefined","INNER","sm","ROUND","controlLg","controlSm","controlXl","controlXs","controlXxl","INNER_PRESSED","ButtonGroupProps","Omit","HTMLDivElement","children","className","selectionMode","size","style","variant","ButtonGroupVariant","Press","delta","index","ButtonGroup","t0","$","props","ref","t1","t2","press","setPress","groupProps","t3","items","toArray","filter","sized","t4","t5","Symbol","for","endPress","map","child","key","itemFor","count","length","content","t6","t7","connectedStyles","state","outer","inner","isPressed","isSelected","shift","onPressEnd","onPressStart","width","shiftFor","Math","abs","atEnd","_c","props","stylex.props","RACToggleButtonGroup","RACGroup"],"sources":["../../../src/components/button-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode, RefAttributes } from 'react';\nimport type { ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, isValidElement, useCallback, useState } from 'react';\nimport { ButtonContext, Group as RACGroup, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { ButtonState } from '../../button';\nimport type { ButtonGroupItem, GroupSize } from '../../button/context';\nimport type { ButtonShape, ButtonSize } from '../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, sizing, spacing } from '../../tokens/design.tokens.stylex';\n\n// The button groups page's two groups, around Buttons and IconButtons placed\n// inside: the standard group, buttons set apart by the page's 18dp, 12dp, 8dp,\n// 8dp and 8dp across the sizes, and the connected group, buttons 2dp apart\n// whose inner corners square off — 4dp, 8dp, 8dp, 16dp and 20dp — while the\n// group's two ends keep the buttons' own round. A square connected group\n// takes the same corner at its ends. The group draws nothing itself; it\n// hands each button its size, its corners and its part in the press\n// interaction through src/button/context.ts.\n//\n// **A press is felt across a standard group.** The pressed button widens by\n// 15% of its width — the share Material Design's own group widens it by —\n// and its neighbours narrow to make the room, so the group's width holds:\n// both neighbours by half the gain each, or the one neighbour of a button at\n// the group's end by all of it. Button takes the change as inline padding\n// and IconButton as width, and both ease it over the motion tokens' short\n// duration.\n//\n// **A connected group answers a press and a selection in the corner\n// instead.** Its buttons stay where they are; a pressed one's inner corners\n// tighten, and a selected one's round off entirely. The page gives the\n// pressed corner for its small group alone, 4dp against the 8dp it rests at;\n// the other sizes press to half their resting corner the same way. The page\n// also gives XS and S buttons in a connected group a 48dp minimum width,\n// which is their touch target.\n//\n// Given `selectionMode` the group is React Aria's `ToggleButtonGroup`, which\n// makes every button in it a toggle and reports the selection by the\n// buttons' `id`s: a radio group for `single`, a toolbar for `multiple`.\n// Without it the group is React Aria's plain `Group`.\n\n// The press interaction's share, from Material Design's own button group.\nconst EXPANDED_RATIO = 0.15;\nconst DISABLED = {\n  isDisabled: true\n};\nconst styles = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kwnvtZ: \"xozqiw3\",\n    $$css: true\n  },\n  minimum: {\n    k7Eaqz: \"x900493\",\n    $$css: true\n  }\n};\n\n// The space between buttons, by variant and size. The standard group's 18dp\n// at XS falls between two steps of the spacing scale and is written out.\nconst gaps = {\n  connected: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  lg: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xaobbuh\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  }\n};\n\n// A connected button's corners on each side, set from the button's place in\n// the group and its state.\nconst corners = {\n  shape: (start: string, end: string) => [{\n    kT0f0o: end != null ? \"x1wsjk4f\" : end,\n    kVL7Gh: start != null ? \"x1oq9ryg\" : start,\n    kfmiAY: end != null ? \"xbsomw4\" : end,\n    krdFHd: start != null ? \"x6pmj1i\" : start,\n    $$css: true\n  }, {\n    \"--x-borderEndEndRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-borderEndStartRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-borderStartEndRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-borderStartStartRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\n\n// The inner corner each size rests at, and the corner it presses to. The 20dp\n// at XL falls between two steps of the radius scale, and the two halves that\n// are not steps of it are written out too.\nconst INNER = {\n  lg: radii.sm,\n  md: radii.sm,\n  xl: radii.lg,\n  xs: radii.xs,\n  xxl: '20px'\n};\n\n// The round end at each size: half the button's height. Not the pill's\n// 9999px: CSS scales every corner of a box down together when two on one\n// side add up to more than the side is long, so a 9999px end beside an 8px\n// inner corner shrank the inner one to nothing. Half the height fits as\n// written. A label that wraps makes a button taller than this, and its ends\n// a little less than round.\nconst ROUND = {\n  lg: `calc(${sizing.controlLg} / 2)`,\n  md: `calc(${sizing.controlSm} / 2)`,\n  xl: `calc(${sizing.controlXl} / 2)`,\n  xs: `calc(${sizing.controlXs} / 2)`,\n  xxl: `calc(${sizing.controlXxl} / 2)`\n};\nconst INNER_PRESSED = {\n  lg: radii.xs,\n  md: radii.xs,\n  xl: radii.sm,\n  xs: '2px',\n  xxl: '10px'\n};\ntype ButtonGroupProps = Omit<RACToggleButtonGroupProps, 'children' | 'className' | 'selectionMode' | 'style'> & RefAttributes<HTMLDivElement> & {\n  /** The buttons: Buttons and IconButtons, each with an `id` in a group that selects. */\n  children?: ReactNode;\n  /** The class for the group's own element. */\n  className?: string;\n  /**\n   * Makes the group select, as React Aria's `ToggleButtonGroup`: `single`\n   * for one at a time, `multiple` for any number. Left out, the group's\n   * buttons are plain buttons.\n   */\n  selectionMode?: RACToggleButtonGroupProps['selectionMode'];\n  /**\n   * The shape a connected group gives its two ends: `round`, the pill, or\n   * `square`, the size's corner, which its inner corners take as well.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * The size every button in the group takes, unless it names its own, and\n   * the size the group spaces and shapes them for.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** The style for the group's own element. */\n  style?: CSSProperties;\n  /**\n   * `standard` sets the buttons apart and widens a pressed one; `connected`\n   * sets them 2dp apart with square inner corners.\n   * @default 'standard'\n   */\n  variant?: ButtonGroupVariant;\n};\ntype ButtonGroupVariant = 'connected' | 'standard';\ntype Press = {\n  delta: number;\n  index: number;\n};\n\n/**\n * A row of Buttons and IconButtons drawn as the button groups page's\n * standard or connected group. Given `selectionMode`, its buttons are\n * toggles whose selection the group keeps, by their `id`s.\n *\n * ```tsx\n * <ButtonGroup aria-label=\"Label\" selectionMode=\"single\" variant=\"connected\">\n *   <Button id=\"first\">First item</Button>\n *   <Button id=\"second\">Second item</Button>\n *   <Button id=\"third\">Third item</Button>\n * </ButtonGroup>\n * ```\n */\nfunction ButtonGroup({\n  children,\n  className,\n  ref,\n  selectionMode,\n  shape = 'round',\n  size,\n  style,\n  variant = 'standard',\n  ...props\n}: ButtonGroupProps) {\n  const [press, setPress] = useState<null | Press>(null);\n  const items = Children.toArray(children).filter(isValidElement);\n  const sized = size ?? 'md';\n  const groupProps = mergeStyles(stylex.props(styles.group, variant === 'connected' ? gaps.connected : gaps[sized]), {\n    className,\n    style\n  });\n  const endPress = useCallback(() => {\n    setPress(null);\n  }, []);\n  const content = items.map((child, index) => <ButtonGroupItemContext key={child.key ?? index} value={itemFor({\n    count: items.length,\n    endPress,\n    index,\n    press,\n    setPress,\n    shape,\n    size,\n    variant\n  })}>\n      {child}\n    </ButtonGroupItemContext>);\n  if (selectionMode !== undefined) {\n    return <RACToggleButtonGroup ref={ref} selectionMode={selectionMode} {...props} {...groupProps}>\n        {content}\n      </RACToggleButtonGroup>;\n  }\n\n  // A plain group disables its buttons through React Aria's own context,\n  // which Button and IconButton read; a selecting one does it itself.\n  return <RACGroup aria-label={props['aria-label']} aria-labelledby={props['aria-labelledby']} ref={ref} {...groupProps}>\n      {props.isDisabled === true ? <ButtonContext value={DISABLED}>{content}</ButtonContext> : content}\n    </RACGroup>;\n}\n\n// A connected button's corners: the group's ends keep the outer shape, and\n// every edge it shares with a neighbour takes the inner corner, tighter while\n// pressed and round once selected — a press wins over a selection.\nfunction connectedStyles(index: number, count: number, size: GroupSize, shape: ButtonShape, state: ButtonState) {\n  const outer = shape === 'square' ? INNER[size] : ROUND[size];\n  const inner = state.isPressed ? INNER_PRESSED[size] : state.isSelected === true ? ROUND[size] : INNER[size];\n  const start = index === 0 ? outer : inner;\n  const end = index === count - 1 ? outer : inner;\n  return [corners.shape(start, end), (size === 'xs' || size === 'md') && styles.minimum];\n}\n\n// One button's part in the group: its size, its corners in a connected\n// group, and its share of a press in a standard one.\nfunction itemFor({\n  count,\n  endPress,\n  index,\n  press,\n  setPress,\n  shape,\n  size,\n  variant\n}: {\n  count: number;\n  endPress: () => void;\n  index: number;\n  press: null | Press;\n  setPress: (press: Press) => void;\n  shape: ButtonShape;\n  size: GroupSize | undefined;\n  variant: ButtonGroupVariant;\n}): ButtonGroupItem {\n  const sized = size ?? 'md';\n  if (variant === 'connected') {\n    return {\n      shift: 0,\n      size,\n      styles: (state: ButtonState) => connectedStyles(index, count, sized, shape, state)\n    };\n  }\n  return {\n    onPressEnd: endPress,\n    onPressStart: (width: number) => {\n      setPress({\n        delta: width * EXPANDED_RATIO,\n        index\n      });\n    },\n    shift: shiftFor(index, count, press),\n    size\n  };\n}\n\n// How far a standard group moves one button's width while a press is held:\n// the pressed button gains the whole share, and its neighbours give it up —\n// half each, or all of it from the one neighbour of a button at an end.\nfunction shiftFor(index: number, count: number, press: null | Press) {\n  if (press === null) {\n    return 0;\n  }\n  if (index === press.index) {\n    return press.delta;\n  }\n  if (Math.abs(index - press.index) !== 1) {\n    return 0;\n  }\n  const atEnd = press.index === 0 || press.index === count - 1;\n  return -(atEnd ? press.delta : press.delta / 2);\n}\nexport type { ButtonGroupProps, ButtonGroupVariant };\nexport default ButtonGroup;"],"mappings":"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"}

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

@@ -4,6 +4,14 @@ import { CalendarProps, DateValue } from "react-aria-components";
 type CalendarProps$1<T extends DateValue = DateValue> = Omit<CalendarProps<T>, 'children' | 'className' | 'style'> & {
   /** A function may compute the class from the calendar's render state. */
   className?: CalendarProps<T>['className'];
+  /**
+   * Whether the header draws the month and the year as menu buttons, each
+   * opening a list of them in the grid's place, as the docked date picker's
+   * header does, rather than one heading between the chevrons. For a date
+   * far from the one shown, such as a date of birth.
+   * @default false
+   */
+  showMonthYearMenus?: boolean;
   /** A function may compute the style from the calendar's render state. */
   style?: CalendarProps<T>['style'];
 };
@@ -27,7 +35,7 @@ type CalendarProps$1<T extends DateValue = DateValue> = Omit<CalendarProps<T>, '
  * The call site's `className` and `style` land on the container, which is the
  * element a layout positions.
  */
-declare function Calendar$1<T extends DateValue>(props: CalendarProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function Calendar$1<T extends DateValue>({ showMonthYearMenus, ...props }: CalendarProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type CalendarProps$1 as CalendarProps, Calendar$1 as default };
 //# sourceMappingURL=index.d.ts.map