@kanso-labs/kanso-ui 0.43.2 → 0.43.4

package/dist/button/index.js

@@ -10,6 +10,15 @@ import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Link, ToggleButton } from "react-aria-components";
 //#region src/button/index.tsx
+function busyElement(element, isPending) {
+	return isPending ? {
+		...element,
+		aria: {
+			"aria-busy": true,
+			...element.aria
+		}
+	} : element;
+}
 /**
 * A button drawn with the classes a component hands it: React Aria's
 * `Button`, or its `Link` given `href`. See the header.
@@ -116,7 +125,7 @@ function ButtonBase(t0) {
 			t3 = disabled;
 			t4 = isPending;
 			t5 = ref;
-			t6 = buttonRenderer(element, selectedRender(render, isSelected));
+			t6 = buttonRenderer(busyElement(element, isPending), selectedRender(render, isSelected));
 		}
 		$[14] = base.element;
 		$[15] = children;

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ProgressIndicator","useToggleGroupDisabled","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonState","ReturnType","props","className","disableRipple","href","isSelected","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","Omit","GlobalEventKey","Pick","HTMLElement","ButtonForm","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","defaultSelected","isPending","onChange","Exclude","ToggleButtonBaseProps","ButtonBase","t0","$","_c","input","render","t1","undefined","messages","base","disabled","ref","ripple","t2","merged","T0","styleProps","t3","t4","t5","t6","t7","element","handlers","surface","Symbol","for","bb0","aria","t8","state_0","selectedRender","t9","loading","t10","buttonContent","t11","label","labelPending","pending","selected","ToggleButtonBase","disabledByGroup","id","isDisabled","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useToggleGroupDisabled } from '../hooks/useToggleGroupDisabled';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` inside a selecting group, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  /**\n   * A toggle's state, for a button that reports one through `aria-pressed`.\n   * Left undefined, the button reports none. Handed to every function of the\n   * render state, so the classes can draw it.\n   */\n  isSelected?: boolean;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n/**\n * The three forms a button takes, of which a call site writes exactly one:\n * a plain button, a link, or a toggle. Each names the props of the other two\n * as `never`, so a combination the rendered form would ignore — a toggle\n * given `href`, a link given `isPending` — is a compile error rather than a\n * prop that silently does nothing.\n */\ntype ButtonForm = ButtonLinkForm | ButtonPressForm | ButtonToggleForm;\ntype ButtonLinkForm = {\n  defaultSelected?: never;\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   * A link is never a toggle and never pending, and `render`, `type` and the\n   * form props apply to the other two forms only.\n   */\n  href: string;\n  isPending?: never;\n  isSelected?: never;\n  onChange?: never;\n  pendingLabel?: never;\n  /** The link's `rel`. */\n  rel?: string;\n  /** The link's `target`. */\n  target?: string;\n};\ntype ButtonPressForm = {\n  defaultSelected?: never;\n  href?: never;\n  isSelected?: never;\n  onChange?: never;\n  rel?: never;\n  target?: never;\n};\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype ButtonToggleForm = {\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   */\n  defaultSelected?: boolean;\n  href?: never;\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. A value still loading may be `undefined` for a\n   * while: the button stays the same element when it arrives.\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   */\n  onChange?: (isSelected: boolean) => void;\n  rel?: never;\n  target?: never;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  isSelected,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const base = useButtonBase(input, isPending);\n  const {\n    disabled,\n    props,\n    ref,\n    ripple\n  } = base;\n  const merged = mergeStatefulStyles(classes, props);\n\n  // A toggle is still React Aria's `Button`, which knows nothing of a\n  // selected state, so the state goes onto the element as `aria-pressed` and\n  // into every function of the render state from here. Being the same\n  // component as the plain button is what keeps a button the same element\n  // when it becomes a toggle — `isSelected` arriving once its data loads.\n  const element = isSelected === undefined ? base.element : {\n    ...base.element,\n    aria: {\n      ...base.element.aria,\n      'aria-pressed': isSelected\n    }\n  };\n  const styleProps = isSelected === undefined ? merged : {\n    className: (state: Parameters<typeof merged.className>[0]) => merged.className({\n      ...state,\n      isSelected\n    }),\n    style: (state: Parameters<typeof merged.style>[0]) => merged.style({\n      ...state,\n      isSelected\n    })\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(element, selectedRender(render, isSelected))} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\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, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} diameter=\"1em\" isIndeterminate tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n// A toggle drawn through ButtonBase hands a call site's `render` the state of\n// React Aria's plain button, which has no `isSelected`; this fills it in.\nfunction selectedRender(render: RACButtonProps['render'], isSelected: boolean | undefined): RACButtonProps['render'] {\n  if (render === undefined || isSelected === undefined) {\n    return render;\n  }\n  // Through a binding rather than as a literal at the call: React Aria types\n  // the state as its plain button's, and a call site's `render` is written\n  // against ButtonState, which is that plus `isSelected`.\n  return (props, state) => {\n    const selected = {\n      ...state,\n      isSelected\n    };\n    return render(props, selected);\n  };\n}\n\n/**\n * A toggle in a selecting group, drawn with the classes a component hands\n * it: React Aria's `ToggleButton`, which is what takes part in the group's\n * selection and reports its state through `aria-pressed`. A toggle on its\n * own is ButtonBase given `isSelected` instead — see there. React Aria's\n * toggle takes no pending state, so `isPending` reaches it only to keep the\n * ripple off.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  // A selecting ButtonGroup disables its toggles through React Aria's group\n  // state, which no prop here carries, so the ripple would stay on in a\n  // disabled group and answer a press with an animation. Handed on as the\n  // toggle's own `isDisabled`, which is what React Aria makes of it anyway.\n  const disabledByGroup = useToggleGroupDisabled(input.id);\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(disabledByGroup ? {\n    ...input,\n    isDisabled: true\n  } : input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonDOMProps, ButtonForm, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ElementProps","ProgressIndicator","useToggleGroupDisabled","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonClassesState","ReturnType","props","className","ButtonState","disableRipple","href","isSelected","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","isPending","Omit","GlobalEventKey","Pick","HTMLElement","ButtonForm","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","defaultSelected","onChange","Exclude","ToggleButtonBaseProps","busyElement","element","aria","ButtonBase","t0","$","_c","input","render","t1","undefined","messages","base","disabled","ref","ripple","t2","merged","T0","styleProps","t3","t4","t5","t6","t7","handlers","surface","Symbol","for","bb0","t8","state_0","selectedRender","t9","loading","t10","buttonContent","t11","label","labelPending","pending","selected","ToggleButtonBase","disabledByGroup","id","isDisabled","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport type { ElementProps } from '../render/aria';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useToggleGroupDisabled } from '../hooks/useToggleGroupDisabled';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` inside a selecting group, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending, with the\n// `aria-busy` that says so. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonClassesState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  /**\n   * A toggle's state, for a button that reports one through `aria-pressed`.\n   * Left undefined, the button reports none. Handed to every function of the\n   * render state, so the classes can draw it.\n   */\n  isSelected?: boolean;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The state a component's own classes are handed: the render state above,\n// and whether the button is pending, so the classes can draw it. React\n// Aria's `Button` reports that and its `Link` and `ToggleButton` do not, so\n// it is optional — a link, and a toggle in a selecting group, are never\n// pending — and it stays out of ButtonState, which a call site's own\n// `className` and `style` are written against.\ntype ButtonClassesState = ButtonState & {\n  isPending?: boolean;\n};\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n/**\n * The three forms a button takes, of which a call site writes exactly one:\n * a plain button, a link, or a toggle. Each names the props of the other two\n * as `never`, so a combination the rendered form would ignore — a toggle\n * given `href`, a link given `isPending` — is a compile error rather than a\n * prop that silently does nothing.\n */\ntype ButtonForm = ButtonLinkForm | ButtonPressForm | ButtonToggleForm;\ntype ButtonLinkForm = {\n  defaultSelected?: never;\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   * A link is never a toggle and never pending, and `render`, `type` and the\n   * form props apply to the other two forms only.\n   */\n  href: string;\n  isPending?: never;\n  isSelected?: never;\n  onChange?: never;\n  pendingLabel?: never;\n  /** The link's `rel`. */\n  rel?: string;\n  /** The link's `target`. */\n  target?: string;\n};\ntype ButtonPressForm = {\n  defaultSelected?: never;\n  href?: never;\n  isSelected?: never;\n  onChange?: never;\n  rel?: never;\n  target?: never;\n};\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype ButtonToggleForm = {\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   */\n  defaultSelected?: boolean;\n  href?: never;\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. A value still loading may be `undefined` for a\n   * while: the button stays the same element when it arrives.\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   */\n  onChange?: (isSelected: boolean) => void;\n  rel?: never;\n  target?: never;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// A pending button says it is busy on the element itself. React Aria marks\n// it disabled and nests the ring's progress bar inside it, but a button's\n// children are presentational, and assistive technology that flattens them\n// never announces the bar. Only the button takes it, since a link is never\n// pending, and a call site's own `aria-busy` still wins.\nfunction busyElement(element: ElementProps, isPending: boolean) {\n  return isPending ? {\n    ...element,\n    aria: {\n      'aria-busy': true,\n      ...element.aria\n    }\n  } : element;\n}\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  isSelected,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const base = useButtonBase(input, isPending);\n  const {\n    disabled,\n    props,\n    ref,\n    ripple\n  } = base;\n  const merged = mergeStatefulStyles(classes, props);\n\n  // A toggle is still React Aria's `Button`, which knows nothing of a\n  // selected state, so the state goes onto the element as `aria-pressed` and\n  // into every function of the render state from here. Being the same\n  // component as the plain button is what keeps a button the same element\n  // when it becomes a toggle — `isSelected` arriving once its data loads.\n  const element = isSelected === undefined ? base.element : {\n    ...base.element,\n    aria: {\n      ...base.element.aria,\n      'aria-pressed': isSelected\n    }\n  };\n  const styleProps = isSelected === undefined ? merged : {\n    className: (state: Parameters<typeof merged.className>[0]) => merged.className({\n      ...state,\n      isSelected\n    }),\n    style: (state: Parameters<typeof merged.style>[0]) => merged.style({\n      ...state,\n      isSelected\n    })\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(busyElement(element, isPending), selectedRender(render, isSelected))} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\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, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} diameter=\"1em\" isIndeterminate tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n// A toggle drawn through ButtonBase hands a call site's `render` the state of\n// React Aria's plain button, which has no `isSelected`; this fills it in.\nfunction selectedRender(render: RACButtonProps['render'], isSelected: boolean | undefined): RACButtonProps['render'] {\n  if (render === undefined || isSelected === undefined) {\n    return render;\n  }\n  // Through a binding rather than as a literal at the call: React Aria types\n  // the state as its plain button's, and a call site's `render` is written\n  // against ButtonState, which is that plus `isSelected`.\n  return (props, state) => {\n    const selected = {\n      ...state,\n      isSelected\n    };\n    return render(props, selected);\n  };\n}\n\n/**\n * A toggle in a selecting group, drawn with the classes a component hands\n * it: React Aria's `ToggleButton`, which is what takes part in the group's\n * selection and reports its state through `aria-pressed`. A toggle on its\n * own is ButtonBase given `isSelected` instead — see there. React Aria's\n * toggle takes no pending state, so `isPending` reaches it only to keep the\n * ripple off.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  // A selecting ButtonGroup disables its toggles through React Aria's group\n  // state, which no prop here carries, so the ripple would stay on in a\n  // disabled group and answer a press with an animation. Handed on as the\n  // toggle's own `isDisabled`, which is what React Aria makes of it anyway.\n  const disabledByGroup = useToggleGroupDisabled(input.id);\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(disabledByGroup ? {\n    ...input,\n    isDisabled: true\n  } : input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonClassesState, ButtonDOMProps, ButtonForm, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":"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"}

package/dist/components/button/index.js

@@ -131,6 +131,10 @@ const styles = {
 		kMwMTN: "x1girmi0 x1k5gbb1",
 		$$css: true
 	},
+	pending: {
+		kkrTdU: "x19v85br",
+		$$css: true
+	},
 	text: {
 		kWkggS: "xjbqb8w",
 		kMzoRj: "xc342km",
@@ -604,7 +608,7 @@ function Button$1(t0) {
 	return t8;
 }
 function buttonClasses(shape, size, variant, group) {
-	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" ? squareShapes[size] : roundShapes[size], variant === "outlined" && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" ? squareShapes[size] : roundShapes[size], variant === "outlined" && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 }
 function groupStyles(group, size, variant, state) {
 	if (group === null) return null;
@@ -615,7 +619,7 @@ function toggleClasses(shape, size, variant, group) {
 	return (state) => {
 		const isSelected = state.isSelected === true;
 		const container = toggleContainers[variant][isSelected ? "selected" : "unselected"];
-		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" ? squareShapes[size] : roundShapes[size], isSelected && (shape === "square" ? roundShapes[size] : squareShapes[size]), variant === "outlined" && outlinedSizes[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, variant, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" ? squareShapes[size] : roundShapes[size], isSelected && (shape === "square" ? roundShapes[size] : squareShapes[size]), variant === "outlined" && outlinedSizes[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, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 	};
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonLinkForm","ButtonPressForm","ButtonState","ButtonToggleForm","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","ks0D6T","kHjlTd","kVAEAm","k9WMMc","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","OUTLINE_WIDTHS","const","outlinedSizes","iconSizes","PADDINGS","shifted","padding","value","val","undefined","roundShapes","kaIpWk","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","ButtonProps","variant","Exclude","ButtonVariant","children","className","disableRipple","pendingLabel","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","Button","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","t1","ownSize","target","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","selection","t4","content","t5","buttonClasses","toggleClasses","isToggle","T0","t6","t7","onPress","toggle","t8","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","border","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, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\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 at half the container's height, which is the pill\n// for a label on one line, and `square` at the size's square corner: 12dp up\n// to the page's S, 16dp at M and 28dp above. A press tightens either to the\n// size's pressed corner, 8dp, 12dp or 16dp, and a toggle trades its shape for\n// the other once selected — a round one for the square corner, a square one\n// for the round. The corner eases over the motion tokens' short duration, as\n// the container, label and rule colours and the shadow do between states, and\n// all of them move at once for a reader who asks for reduced motion.\n//\n// The round corner is a length rather than the pill token's 9999px, because\n// the browser draws a corner no larger than half the box and eases the value\n// as written. From 9999px a press spent all but the last frame or two of its\n// 150ms above the 20dp a medium button can show, so the corner held round and\n// then jumped. From half the height every frame of the ease is one the eye\n// can see. A label that wraps makes a button taller than that, and its ends a\n// little less than round, as a connected ButtonGroup's already are.\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    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    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x2b8uid\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x4ukx00 x12w9bfk\",\n    k1ekBW: \"xidvh3d\",\n    kAMwcw: \"xmg88ys\",\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: \"xun2zgk\",\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  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: \"xun2zgk\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x18fpw6u\",\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 OUTLINE_WIDTHS = {\n  lg: '1px',\n  md: '1px',\n  xl: '2px',\n  xs: '1px',\n  xxl: '3px'\n} as const;\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the border takes,\n// so an outlined and a filled button with one label are one width, and a\n// group mixing them lines up. The height needs nothing, since it is a floor\n// the border already counts towards.\nconst outlinedSizes = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"xfeiziq\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x1uvede8\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"xrhf21y\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x9t8nta\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    kg3NbH: \"x1wz3vkj\",\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, and an outlined button's border comes\n// off them here as it does in `outlinedSizes`.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.md,\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 round corner each size rests at, and a square toggle once selected:\n// half the container's height — see the header for why not the pill's\n// 9999px. `min()` leaves the pill token in charge below that, so a scheme\n// that sets `--kui-radius-pill` small still draws round buttons at its corner.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\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 = ButtonDOMProps & (ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {\n  /**\n   * A toggle takes any variant but `text`, which the page gives no\n   * selected colours.\n   */\n  variant?: Exclude<ButtonVariant, 'text'>;\n})) & {\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   * 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   * 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  /**\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  /**\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};\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. The three forms are exclusive, so a toggle\n * given `href` does not compile, and nor does a `text` toggle, which the page\n * gives no selected colours — a `text` button in a selecting `ButtonGroup`\n * is the one that toggles, for the group's sake. A toggle may be pending,\n * for a state saved somewhere slow: the ring replaces its label and a press\n * changes nothing until it clears.\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  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\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  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection — a text button too, which draws its\n  // selection by nothing but the group's shape. Whether a button sits in one\n  // does not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} isPending={isPending}>\n        {content}\n      </ToggleButtonBase>;\n  }\n\n  // The three props that make this a toggle on its own, read as IconButton\n  // reads them, and on the same component as the plain button so a toggle\n  // whose `isSelected` is still loading stays one element when it arrives.\n  // The types keep them off a `text` button; the check here keeps a call\n  // site that slipped past them a plain button, as it always was.\n  const isToggle = variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined);\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleClasses(shape, size, variant, group) : buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} 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] : roundShapes[size], variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, 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, variant: ButtonVariant, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : '0px';\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} - ${border} + ${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] : roundShapes[size], isSelected && (shape === 'square' ? roundShapes[size] : squareShapes[size]), variant === 'outlined' && outlinedSizes[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, variant, 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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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonClassesState","ButtonDOMProps","ButtonLinkForm","ButtonPressForm","ButtonState","ButtonToggleForm","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","ks0D6T","kHjlTd","kVAEAm","k9WMMc","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","OUTLINE_WIDTHS","const","outlinedSizes","iconSizes","PADDINGS","shifted","padding","value","val","undefined","roundShapes","kaIpWk","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","ButtonProps","variant","Exclude","ButtonVariant","children","className","disableRipple","pendingLabel","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","Button","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","t1","ownSize","target","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","selection","t4","content","t5","buttonClasses","toggleClasses","isToggle","T0","t6","t7","onPress","toggle","t8","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","border","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 { ButtonClassesState, ButtonDOMProps, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\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 at half the container's height, which is the pill\n// for a label on one line, and `square` at the size's square corner: 12dp up\n// to the page's S, 16dp at M and 28dp above. A press tightens either to the\n// size's pressed corner, 8dp, 12dp or 16dp, and a toggle trades its shape for\n// the other once selected — a round one for the square corner, a square one\n// for the round. The corner eases over the motion tokens' short duration, as\n// the container, label and rule colours and the shadow do between states, and\n// all of them move at once for a reader who asks for reduced motion.\n//\n// The round corner is a length rather than the pill token's 9999px, because\n// the browser draws a corner no larger than half the box and eases the value\n// as written. From 9999px a press spent all but the last frame or two of its\n// 150ms above the 20dp a medium button can show, so the corner held round and\n// then jumped. From half the height every frame of the ease is one the eye\n// can see. A label that wraps makes a button taller than that, and its ends a\n// little less than round, as a connected ButtonGroup's already are.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring and `aria-busy`, a parent's disabled state\n// — is `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    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    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x2b8uid\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x4ukx00 x12w9bfk\",\n    k1ekBW: \"xidvh3d\",\n    kAMwcw: \"xmg88ys\",\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: \"xun2zgk\",\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  pending: {\n    kkrTdU: \"x19v85br\",\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: \"xun2zgk\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x18fpw6u\",\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 OUTLINE_WIDTHS = {\n  lg: '1px',\n  md: '1px',\n  xl: '2px',\n  xs: '1px',\n  xxl: '3px'\n} as const;\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the border takes,\n// so an outlined and a filled button with one label are one width, and a\n// group mixing them lines up. The height needs nothing, since it is a floor\n// the border already counts towards.\nconst outlinedSizes = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"xfeiziq\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x1uvede8\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"xrhf21y\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x9t8nta\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    kg3NbH: \"x1wz3vkj\",\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, and an outlined button's border comes\n// off them here as it does in `outlinedSizes`.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.md,\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 round corner each size rests at, and a square toggle once selected:\n// half the container's height — see the header for why not the pill's\n// 9999px. `min()` leaves the pill token in charge below that, so a scheme\n// that sets `--kui-radius-pill` small still draws round buttons at its corner.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\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 = ButtonDOMProps & (ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {\n  /**\n   * A toggle takes any variant but `text`, which the page gives no\n   * selected colours.\n   */\n  variant?: Exclude<ButtonVariant, 'text'>;\n})) & {\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   * 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   * 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  /**\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  /**\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};\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. The three forms are exclusive, so a toggle\n * given `href` does not compile, and nor does a `text` toggle, which the page\n * gives no selected colours — a `text` button in a selecting `ButtonGroup`\n * is the one that toggles, for the group's sake. A toggle may be pending,\n * for a state saved somewhere slow: the ring replaces its label and a press\n * changes nothing until it clears.\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  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\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  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection — a text button too, which draws its\n  // selection by nothing but the group's shape. Whether a button sits in one\n  // does not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} isPending={isPending}>\n        {content}\n      </ToggleButtonBase>;\n  }\n\n  // The three props that make this a toggle on its own, read as IconButton\n  // reads them, and on the same component as the plain button so a toggle\n  // whose `isSelected` is still loading stays one element when it arrives.\n  // The types keep them off a `text` button; the check here keeps a call\n  // site that slipped past them a plain button, as it always was.\n  const isToggle = variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined);\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleClasses(shape, size, variant, group) : buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} 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: ButtonClassesState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, 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, variant: ButtonVariant, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : '0px';\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} - ${border} + ${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: ButtonClassesState) => {\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] : roundShapes[size], isSelected && (shape === 'square' ? roundShapes[size] : squareShapes[size]), variant === 'outlined' && outlinedSizes[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, variant, state), state.isPending === true && styles.pending, 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/icon-button/index.js

@@ -90,6 +90,10 @@ const styles = {
 		kMwMTN: "x1girmi0 x1k5gbb1",
 		$$css: true
 	},
+	pending: {
+		kkrTdU: "x19v85br",
+		$$css: true
+	},
 	standard: {
 		kWkggS: "xjbqb8w",
 		kMzoRj: "xc342km",
@@ -481,12 +485,12 @@ function IconButton(t0) {
 	return t6;
 }
 function iconButtonClasses(size, variant, group) {
-	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], roundShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));
+	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], roundShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));
 }
 function toggleStyleProps(size, variant, group) {
 	return (state) => {
 		const container = toggleContainers[variant][state.isSelected === true ? "selected" : "unselected"];
-		return props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], roundShapes[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));
+		return props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], roundShapes[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));
 	};
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","DOMRenderFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonForm","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","sizing","stateLayerOpacity","FORCED_COLORS","TARGET_SIZE","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","hovered","focused","pressed","outlineWidths","EDGES","controlLg","controlSm","controlXl","controlXs","controlXxl","_temp","shifted","width","value","val","undefined","roundShapes","kaIpWk","selectedShapes","toggleStyles","selected","unselected","toggleContainers","const","disabledStyles","IconButtonProps","children","className","IconButtonState","disableRipple","pendingLabel","render","size","IconButtonSize","style","variant","IconButtonVariant","Omit","groupStyles","group","state","shift","IconButton","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","ownSize","target","t1","props","inSelectingGroup","press","onPressStart","onPressEnd","t2","selection","t3","toggleStyleProps","isToggle","T0","iconButtonClasses","t4","t5","onPress","toggle","t6","ring","isHovered","isFocusVisible","isPressed","isDisabled","container","_c","stylex.props"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DOMRenderFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonForm, 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 { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The transitioned properties take two\n// curves — the container, icon and rule colours the standard one, the corner\n// and a group's change of width the emphasized one — so the timing functions\n// are a matching comma list rather than one value. All of them move at once\n// for a reader who asks for reduced motion.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// The circle is half the button's edge as a length, not the pill token's\n// 9999px. The browser draws a corner no larger than half the box but eases\n// the value as written, so from 9999px a press spent all but the last frame\n// or two of its 150ms above the 20dp a medium button can show: the corner\n// held round and then jumped. Nor is it 50%, which a standard ButtonGroup\n// would stretch into an ellipse as it narrows the buttons beside a pressed\n// one, where a length still draws their ends round.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\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 Button.\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)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1pvxwa0 x12w9bfk\",\n    k1ekBW: \"x1ss3tkz\",\n    kAMwcw: \"xcviomn\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\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  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\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  standard: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\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    kZKoxP: \"x1xaimp3\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The hover, focus and pressed layers, one style per container, applied from\n// React Aria's render state rather than from `:hover`, `:focus-visible` and\n// `:active`, for Button's reasons — see its header: a hover layer stayed on\n// after a tap, and no pressed layer or corner showed for a press made from\n// the keyboard. 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. A chosen toggle's layer keeps its forced-colours `Highlight`,\n// since a later style replaces the property whole.\nconst hovered = {\n  filled: {\n    kWkggS: \"xo1ct44\",\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  standard: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x659ado x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\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  standard: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1sog3nf x1jzqe4\",\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  filled: {\n    kWkggS: \"x7b25lv\",\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  standard: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1dvjsmr x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's 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// Each size's edge again, for the one place it is read at runtime: a standard\n// ButtonGroup widening a pressed button by adding to it. The size styles\n// above write the same values.\nconst EDGES = {\n  lg: sizing.controlLg,\n  md: sizing.controlSm,\n  xl: sizing.controlXl,\n  xs: sizing.controlXs,\n  xxl: sizing.controlXxl\n};\n\n// The width a standard group sets while it widens or narrows the button.\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst shifted = {\n  width: (value: string) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The circle each size rests at: half its edge, written as a length rather\n// than as the pill token's 9999px or as 50% — see the header. `min()` leaves\n// the pill token in charge below that, so a scheme that sets\n// `--kui-radius-pill` small still draws its icon buttons at that corner.\n// Applied after the size's style, and again for a disabled button, which\n// keeps its circle whether or not a press is still held.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, which is the page's round-to-square\n// morph, and the corner a chosen toggle rests at. A style per size rather than\n// a value inside each size style, since StyleX replaces the property whole:\n// it comes after the size's circle while pressed, and after a disabled\n// button's circle too for a chosen toggle, which keeps its corner disabled.\nconst selectedShapes = {\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// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\n\n// The same containers by name, for the layers above.\nconst toggleContainers = {\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  standard: {\n    selected: 'standardToggleSelected',\n    unselected: 'standard'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   *\n   * `undefined` is for a button inside a React Aria component that names it\n   * itself — a search field's clear button, a number field's steppers. React\n   * Aria takes a prop over its context, so a name written here would replace\n   * the one it gives in the reader's locale, and undefined leaves that stand.\n   */\n  'aria-label': string | undefined;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\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  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & ButtonForm & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed: the one every button shares, whose `isSelected` only the toggle\n// form fills in — see `ButtonState` in src/button.\ntype IconButtonState = ButtonState;\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What a group lays over the button: its own styles for the button's state,\n// last so a connected group's corners hold whatever the button's own shape\n// would be, and the standard group's widening or narrowing as extra width.\nfunction groupStyles(group: ButtonGroupItem | null, size: IconButtonSize, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.width(`calc(${EDGES[size]} + ${group.shift}px)`)];\n}\n\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only 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. The three forms are exclusive, so a toggle\n * given `href` does not compile. A toggle may be pending, for a state saved\n * somewhere slow: the ring replaces its icon and a press changes nothing\n * until it clears.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  defaultSelected,\n  href,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  size: ownSize,\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup around the button hands it a size, its shape at the\n  // group's inner edges and the press interaction, as it does Button's; 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  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection. Whether a button sits in one does\n  // not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={toggleStyleProps(size, variant, group)} isPending={isPending} />;\n  }\n\n  // The three props that make this a toggle on its own. Read together rather\n  // than behind a `toggle` word of its own, the way `href` already turns the\n  // button into a link: a button given none of them has no state to report,\n  // and one given any of them has nothing else it could mean. Either way it\n  // is the same component underneath, so a toggle whose `isSelected` is\n  // still loading stays the same element when the value arrives, and keeps\n  // focus.\n  const isToggle = defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined;\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleStyleProps(size, variant, group) : iconButtonClasses(size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target} />;\n}\n\n// The plain button's classes, from React Aria's render state — see the hover\n// and pressed layers above for why that and not the pseudo-classes. Built by\n// a call rather than 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 iconButtonClasses(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], roundShapes[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: IconButtonState) => {\n    const container = toggleContainers[variant][state.isSelected === true ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], roundShapes[size],\n    // A chosen outlined toggle has a container rather than a rule, so the\n    // width goes on only while it is unchosen.\n    variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));\n  };\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","DOMRenderFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonClassesState","ButtonDOMProps","ButtonForm","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","sizing","stateLayerOpacity","FORCED_COLORS","TARGET_SIZE","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","hovered","focused","pressed","outlineWidths","EDGES","controlLg","controlSm","controlXl","controlXs","controlXxl","_temp","shifted","width","value","val","undefined","roundShapes","kaIpWk","selectedShapes","toggleStyles","selected","unselected","toggleContainers","const","disabledStyles","IconButtonProps","children","className","IconButtonState","disableRipple","pendingLabel","render","size","IconButtonSize","style","variant","IconButtonVariant","Omit","groupStyles","group","state","shift","IconButton","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","ownSize","target","t1","props","inSelectingGroup","press","onPressStart","onPressEnd","t2","selection","t3","toggleStyleProps","isToggle","T0","iconButtonClasses","t4","t5","onPress","toggle","t6","ring","isHovered","isFocusVisible","isPressed","isDisabled","container","_c","stylex.props"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DOMRenderFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonClassesState, ButtonDOMProps, ButtonForm, 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 { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The transitioned properties take two\n// curves — the container, icon and rule colours the standard one, the corner\n// and a group's change of width the emphasized one — so the timing functions\n// are a matching comma list rather than one value. All of them move at once\n// for a reader who asks for reduced motion.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// The circle is half the button's edge as a length, not the pill token's\n// 9999px. The browser draws a corner no larger than half the box but eases\n// the value as written, so from 9999px a press spent all but the last frame\n// or two of its 150ms above the 20dp a medium button can show: the corner\n// held round and then jumped. Nor is it 50%, which a standard ButtonGroup\n// would stretch into an ellipse as it narrows the buttons beside a pressed\n// one, where a length still draws their ends round.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\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 Button.\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)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1pvxwa0 x12w9bfk\",\n    k1ekBW: \"x1ss3tkz\",\n    kAMwcw: \"xcviomn\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\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  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\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  pending: {\n    kkrTdU: \"x19v85br\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\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    kZKoxP: \"x1xaimp3\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The hover, focus and pressed layers, one style per container, applied from\n// React Aria's render state rather than from `:hover`, `:focus-visible` and\n// `:active`, for Button's reasons — see its header: a hover layer stayed on\n// after a tap, and no pressed layer or corner showed for a press made from\n// the keyboard. 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. A chosen toggle's layer keeps its forced-colours `Highlight`,\n// since a later style replaces the property whole.\nconst hovered = {\n  filled: {\n    kWkggS: \"xo1ct44\",\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  standard: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x659ado x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\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  standard: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1sog3nf x1jzqe4\",\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  filled: {\n    kWkggS: \"x7b25lv\",\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  standard: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1dvjsmr x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's 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// Each size's edge again, for the one place it is read at runtime: a standard\n// ButtonGroup widening a pressed button by adding to it. The size styles\n// above write the same values.\nconst EDGES = {\n  lg: sizing.controlLg,\n  md: sizing.controlSm,\n  xl: sizing.controlXl,\n  xs: sizing.controlXs,\n  xxl: sizing.controlXxl\n};\n\n// The width a standard group sets while it widens or narrows the button.\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst shifted = {\n  width: (value: string) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The circle each size rests at: half its edge, written as a length rather\n// than as the pill token's 9999px or as 50% — see the header. `min()` leaves\n// the pill token in charge below that, so a scheme that sets\n// `--kui-radius-pill` small still draws its icon buttons at that corner.\n// Applied after the size's style, and again for a disabled button, which\n// keeps its circle whether or not a press is still held.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, which is the page's round-to-square\n// morph, and the corner a chosen toggle rests at. A style per size rather than\n// a value inside each size style, since StyleX replaces the property whole:\n// it comes after the size's circle while pressed, and after a disabled\n// button's circle too for a chosen toggle, which keeps its corner disabled.\nconst selectedShapes = {\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// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\n\n// The same containers by name, for the layers above.\nconst toggleContainers = {\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  standard: {\n    selected: 'standardToggleSelected',\n    unselected: 'standard'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   *\n   * `undefined` is for a button inside a React Aria component that names it\n   * itself — a search field's clear button, a number field's steppers. React\n   * Aria takes a prop over its context, so a name written here would replace\n   * the one it gives in the reader's locale, and undefined leaves that stand.\n   */\n  'aria-label': string | undefined;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\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  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & ButtonForm & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed: the one every button shares, whose `isSelected` only the toggle\n// form fills in — see `ButtonState` in src/button.\ntype IconButtonState = ButtonState;\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What a group lays over the button: its own styles for the button's state,\n// last so a connected group's corners hold whatever the button's own shape\n// would be, and the standard group's widening or narrowing as extra width.\nfunction groupStyles(group: ButtonGroupItem | null, size: IconButtonSize, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.width(`calc(${EDGES[size]} + ${group.shift}px)`)];\n}\n\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only 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. The three forms are exclusive, so a toggle\n * given `href` does not compile. A toggle may be pending, for a state saved\n * somewhere slow: the ring replaces its icon and a press changes nothing\n * until it clears.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  defaultSelected,\n  href,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  size: ownSize,\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup around the button hands it a size, its shape at the\n  // group's inner edges and the press interaction, as it does Button's; 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  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection. Whether a button sits in one does\n  // not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={toggleStyleProps(size, variant, group)} isPending={isPending} />;\n  }\n\n  // The three props that make this a toggle on its own. Read together rather\n  // than behind a `toggle` word of its own, the way `href` already turns the\n  // button into a link: a button given none of them has no state to report,\n  // and one given any of them has nothing else it could mean. Either way it\n  // is the same component underneath, so a toggle whose `isSelected` is\n  // still loading stays the same element when the value arrives, and keeps\n  // focus.\n  const isToggle = defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined;\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleStyleProps(size, variant, group) : iconButtonClasses(size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target} />;\n}\n\n// The plain button's classes, from React Aria's render state — see the hover\n// and pressed layers above for why that and not the pseudo-classes. Built by\n// a call rather than 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 iconButtonClasses(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], roundShapes[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => {\n    const container = toggleContainers[variant][state.isSelected === true ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], roundShapes[size],\n    // A chosen outlined toggle has a container rather than a rule, so the\n    // width goes on only while it is unchosen.\n    variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && roundShapes[size], state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));\n  };\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

package/dist/styles.css

@@ -1509,6 +1509,10 @@
     cursor: pointer;
   }
 
+  .x19v85br {
+    cursor: progress;
+  }
+
   .x1ed109x {
     cursor: text;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.43.2",
+  "version": "0.43.4",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -85,7 +85,7 @@
     "@commitlint/cli": "21.2.3",
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.28",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.30",
     "@microsoft/api-extractor": "7.59.4",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.2",
@@ -119,8 +119,8 @@
     "oxlint-tsgolint": "7.0.2004",
     "playwright": "1.64.1",
     "publint": "0.3.25",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
     "rimraf": "6.1.3",
     "storybook": "10.6.2",
     "style-dictionary": "5.6.1",