@kanso-labs/kanso-ui 0.31.0 → 0.32.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","styles","base","k6CgDc","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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. 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 two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\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.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\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: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\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// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\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. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\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};\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  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\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  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * 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  /** The link's `target`, when `href` is set. */\n  target?: string;\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} & 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. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\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. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} 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} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\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 memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\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) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[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.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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. 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 two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\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.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\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    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\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: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\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    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\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    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\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// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\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. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\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};\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  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\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  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * 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  /** The link's `target`, when `href` is set. */\n  target?: string;\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} & 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. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\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. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} 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} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\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 memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\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) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[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.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

package/dist/components/list-item/index.d.ts

@@ -9,6 +9,16 @@ type ListItemProps = {
    * @default false
    */
   interactive?: boolean;
+  /**
+   * Draws the row disabled, in the treatment every row in the library shares:
+   * its text fades to on-surface at the disabled content opacity, overline
+   * and supporting line included. An interactive row's button is disabled
+   * outright: it takes no focus, no hover tint, no press and no ripple. A row
+   * that only presents has nothing to disable, and is marked `aria-disabled`
+   * instead so the state it draws is announced as well.
+   * @default false
+   */
+  isDisabled?: boolean;
   /** Content before the headline: an avatar, an icon, a checkbox. */
   leading?: ReactNode;
   /**
@@ -34,7 +44,7 @@ type ListItemProps = {
  * here is the element around them — a `<div>` that presents, or a `<button>`
  * that ripples — and the props that fill the slots.
  */
-declare function ListItem({ children, interactive, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ children, interactive, isDisabled, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
 //#endregion
 export { type ListItemProps, ListItem as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/list-item/index.js

@@ -19,12 +19,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * that ripples — and the props that fill the slots.
 */
 function ListItem(t0) {
-	const $ = c(19);
-	const { children, interactive: t1, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props$1 } = t0;
+	const $ = c(21);
+	const { children, interactive: t1, isDisabled: t2, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props$1 } = t0;
 	const interactive = t1 === void 0 ? false : t1;
-	let t2;
+	const isDisabled = t2 === void 0 ? false : t2;
+	let t3;
 	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
-		t2 = {
+		t3 = {
 			onClick,
 			onContextMenu,
 			onPointerCancel,
@@ -38,15 +39,16 @@ function ListItem(t0) {
 		$[3] = onPointerDown;
 		$[4] = onPointerLeave;
 		$[5] = onPointerUp;
-		$[6] = t2;
-	} else t2 = $[6];
-	const ripple = useRipple(interactive, t2);
+		$[6] = t3;
+	} else t3 = $[6];
+	const ripple = useRipple(interactive && !isDisabled, t3);
 	const extraLines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
 	const twoLine = extraLines === 1;
 	const threeLine = extraLines === 2;
-	let t3;
-	if ($[7] !== children || $[8] !== leading || $[9] !== overline || $[10] !== supporting || $[11] !== trailing) {
-		t3 = /* @__PURE__ */ jsx(RowContent, {
+	let t4;
+	if ($[7] !== children || $[8] !== isDisabled || $[9] !== leading || $[10] !== overline || $[11] !== supporting || $[12] !== trailing) {
+		t4 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled,
 			leading,
 			overline,
 			supporting,
@@ -54,39 +56,43 @@ function ListItem(t0) {
 			children
 		});
 		$[7] = children;
-		$[8] = leading;
-		$[9] = overline;
-		$[10] = supporting;
-		$[11] = trailing;
-		$[12] = t3;
-	} else t3 = $[12];
-	const content = t3;
+		$[8] = isDisabled;
+		$[9] = leading;
+		$[10] = overline;
+		$[11] = supporting;
+		$[12] = trailing;
+		$[13] = t4;
+	} else t4 = $[13];
+	const content = t4;
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
+		"aria-disabled": isDisabled || void 0,
 		...props$1,
 		...ripple.handlers,
-		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props$1),
 		children: content
 	});
-	const t4 = "button";
-	const t5 = ripple.handlers;
-	const t6 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1);
-	let t7;
-	if ($[13] !== content || $[14] !== props$1 || $[15] !== ripple.handlers || $[16] !== ripple.surface || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("button", {
-			type: t4,
-			...t5,
-			...props$1,
+	const t5 = "button";
+	const t6 = ripple.handlers;
+	const t7 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props$1);
+	let t8;
+	if ($[14] !== content || $[15] !== isDisabled || $[16] !== props$1 || $[17] !== ripple.handlers || $[18] !== ripple.surface || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("button", {
+			disabled: isDisabled,
+			type: t5,
 			...t6,
+			...props$1,
+			...t7,
 			children: [content, ripple.surface]
 		});
-		$[13] = content;
-		$[14] = props$1;
-		$[15] = ripple.handlers;
-		$[16] = ripple.surface;
-		$[17] = t6;
-		$[18] = t7;
-	} else t7 = $[18];
-	return t7;
+		$[14] = content;
+		$[15] = isDisabled;
+		$[16] = props$1;
+		$[17] = ripple.handlers;
+		$[18] = ripple.surface;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 //#endregion
 export { ListItem as default };

package/dist/components/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t2","ripple","extraLines","twoLine","threeLine","t3","content","handlers","base","list","t4","t5","t6","t7","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  const ripple = useRipple<HTMLElement>(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,SAAAe,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAV,UAAAC,aAAAU,IAAAT,SAAAU,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAd,UAAAC,YAAAC,UAAA,GAAAa,YAAAV;CAEhB,MAAAP,cAAAU,OAAAQ,KAAAA,IAAA,QAAAR;CAAmB,IAAAS;CAAA,IAAAX,EAAA,OAAAG,WAAAH,EAAA,OAAAI,iBAAAJ,EAAA,OAAAK,mBAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAO,kBAAAP,EAAA,OAAAQ,aAAA;EAwBgCG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOnD;EAACR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAPD,MAAAY,SAAe1B,UAAuBM,aAAamB,EAOlD;CAWD,MAAAE,cAAoBnB,aAAagB,KAAAA,IAAb,IAAA,MAAmCf,eAAee,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAhB,EAAA,OAAAT,YAAAS,EAAA,OAAAP,WAAAO,EAAA,OAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBoB,KAAA,oBAAC,YAAD;GAAqBvB;GAAmBC;GAAsBC;GAAsBC;GAC/FL;EADsB,CAAA;EAEZS,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAFf,MAAAiB,UAAgBD;CAGhB,IAAI,CAACxB,aAAW,OACP,oBAAA,OAAA;EAEC,GAFQiB;EAAK,GAAMG,OAAMM;EAAS,GAAM7B,YAAYJ,MAAaG,UAAS+B,MAAO/B,UAASgC,MAAON,WAAW1B,UAAS0B,SAAUC,aAAa3B,UAAS2B,SAAU,GAAGN,OAAK;EAC1KQ,UAAAA;CACG,CAAA;CAEU,MAAAI,KAAA;CAAa,MAAAC,KAAAV,OAAMM;CAA0B,MAAAK,KAAAlC,YAAYJ,MAAaG,UAAS+B,MAAO/B,UAASgC,MAAOhC,UAASI,aAAcsB,WAAW1B,UAAS0B,SAAUC,aAAa3B,UAAS2B,SAAU,GAAGN,OAAK;CAAC,IAAAe;CAAA,IAAAxB,EAAA,QAAAiB,WAAAjB,EAAA,QAAAS,WAAAT,EAAA,QAAAY,OAAAM,YAAAlB,EAAA,QAAAY,OAAAa,WAAAzB,EAAA,QAAAuB,IAAA;EAAjNC,KAAA,qBAAA,UAAA;GAAa,MAAAH;GAAQ,GAAKC;GAAe,GAAMb;GAAK,GAAMc;GAA1D,UAAA,CACFN,SACAL,OAAMa,OACA;;EAAAzB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAS;EAAAT,EAAA,MAAAY,OAAAM;EAAAlB,EAAA,MAAAY,OAAAa;EAAAzB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,OAHJwB;AAGI"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","content","handlers","base","list","disabled","t5","t6","t7","t8","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmDA,SAAAgB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAX,UAAAC,aAAAW,IAAAV,YAAAW,IAAAV,SAAAW,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAf,UAAAC,YAAAC,UAAA,GAAAc,YAAAX;CAEhB,MAAAR,cAAAW,OAAAS,KAAAA,IAAA,QAAAT;CACA,MAAAV,aAAAW,OAAAQ,KAAAA,IAAA,QAAAR;CAAkB,IAAAS;CAAA,IAAAZ,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EA6BgDG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOlE;EAACT,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAPD,MAAAa,SAAe5B,UAAuBM,eAAA,CAAgBC,YAAYoB,EAOjE;CAWD,MAAAE,cAAoBpB,aAAaiB,KAAAA,IAAb,IAAA,MAAmChB,eAAegB,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAjB,EAAA,OAAAV,YAAAU,EAAA,OAAAR,cAAAQ,EAAA,OAAAP,WAAAO,EAAA,QAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBqB,KAAA,oBAAC,YAAD;GAAwBzB;GAAqBC;GAAmBC;GAAsBC;GAAsBC;GACvHN;EADsB,CAAA;EAEZU,EAAA,KAAAV;EAAAU,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAFf,MAAAkB,UAAgBD;CAQhB,IAAI,CAAC1B,aAAW,OACP,oBAAA,OAAA;EAAoB,iBAAAC,cAAAmB,KAAAA;EAAuB,GAAMD;EAAK,GAAMG,OAAMM;EAAS,GAAM/B,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAON,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;EACpPQ,UAAAA;CACG,CAAA;CAEgC,MAAAK,KAAA;CAAa,MAAAC,KAAAX,OAAMM;CAA0B,MAAAM,KAAArC,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAOlC,UAASI,aAAcwB,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;CAAC,IAAAgB;CAAA,IAAA1B,EAAA,QAAAkB,WAAAlB,EAAA,QAAAR,cAAAQ,EAAA,QAAAU,WAAAV,EAAA,QAAAa,OAAAM,YAAAnB,EAAA,QAAAa,OAAAc,WAAA3B,EAAA,QAAAyB,IAAA;EAAzQC,KAAA,qBAAA,UAAA;GAAkBlC,UAAAA;GAAiB,MAAA+B;GAAQ,GAAKC;GAAe,GAAMd;GAAK,GAAMe;GAAhF,UAAA,CACFP,SACAL,OAAMc,OACA;;EAAA3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAR;EAAAQ,EAAA,MAAAU;EAAAV,EAAA,MAAAa,OAAAM;EAAAnB,EAAA,MAAAa,OAAAc;EAAA3B,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OAHJ0B;AAGI"}

package/dist/components/number-field/index.js

@@ -116,9 +116,9 @@ function NumberField$1(t0) {
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t13 = {
 			0: { className: "x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
-			2: { className: "x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv" },
+			2: { className: "x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv" },
 			1: { className: "x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
-			3: { className: "x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf" }
+			3: { className: "x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf" }
 		};
 		$[5] = t13;
 	} else t13 = $[5];

package/dist/components/number-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. 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.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. 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.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

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

@@ -39,10 +39,13 @@ type SnackbarOptions = {
    */
   timeout?: number;
 };
-type SnackbarProps = Omit<ToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {
+type SnackbarProps = {
   /**
-   * What a screen reader calls the region holding the snackbar.
-   * @default 'Notifications'
+   * What a screen reader calls the region holding the snackbar. Left out,
+   * React Aria names the region itself: a count of the messages it holds, in
+   * the reader's own locale — "1 notification." in English, and one of some
+   * thirty languages otherwise. Pass a name only to replace that, and pass a
+   * translated one, since whatever is passed is read as written.
    */
   'aria-label'?: string;
   /** A function may compute the class from the region's render state. */
@@ -58,7 +61,7 @@ type SnackbarProps = Omit<ToastRegionProps<SnackbarMessage>, 'children' | 'class
   queue: SnackbarQueue;
   /** A function may compute the style from the region's render state. */
   style?: ToastRegionProps<SnackbarMessage>['style'];
-};
+} & Omit<ToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;
 /**
  * The queue a snackbar is shown from. Make one where the app can reach it —
  * a module of its own is the usual place — mount `Snackbar` once with it,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","closeLabel","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each 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 actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","className","closeLabel","queue","SnackbarQueue","style","Omit","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container, and\n// `src/components/portal-container.test.tsx` is what keeps that true.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xbg5kjn\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"xoqf9c6\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = {\n  /**\n   * What a screen reader calls the region holding the snackbar. Left out,\n   * React Aria names the region itself: a count of the messages it holds, in\n   * the reader's own locale — \"1 notification.\" in English, and one of some\n   * thirty languages otherwise. Pass a name only to replace that, and pass a\n   * translated one, since whatever is passed is read as written.\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n} & Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'>;\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each 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 actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1dry9sr xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -18,6 +18,10 @@ const _temp = {
 };
 const styles = {
 	control: {
+		kgeoSG: "x1cpjm7i",
+		kGOzcv: "x1fb0czk",
+		kpsdNU: "xm4btww",
+		kEoFBp: "x1hmns74",
 		kGNEyG: "x6s0dn4",
 		kZKoxP: "x1vqgdyp",
 		kB7OPa: "x9f619",
@@ -26,6 +30,7 @@ const styles = {
 		kmuXW: "x2lah0s",
 		kzqmXN: "xvni27",
 		kjj79g: "xl56j7k",
+		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
 	handle: {