@kanso-labs/kanso-ui 0.44.1 → 0.45.1

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

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

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

@@ -34,6 +34,10 @@ type LinkUnderline = 'always' | 'hover' | 'none';
  * disabled, it is a span announced as a link instead, since a disabled
  * anchor is no link at all.
  *
+ * ```tsx
+ * <Link href="#first">Label</Link>
+ * ```
+ *
  * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard
  * alike, a `RouterProvider` above it turns a navigation into a client-side
  * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.

package/dist/components/link/index.js

@@ -71,6 +71,10 @@ const hovered = {
 * disabled, it is a span announced as a link instead, since a disabled
 * anchor is no link at all.
 *
+* ```tsx
+* <Link href="#first">Label</Link>
+* ```
+*
 * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard
 * alike, a `RouterProvider` above it turns a navigation into a client-side
 * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","AriaAttributes","DOMAttributes","ReactNode","RefAttributes","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kHjlTd","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","hovered","tone","underline","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","LinkTone","LinkUnderline","t0","$","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isHovered","isDisabled","Link","_c","props","RACLink","stylex.props"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["'use client';\n\nimport type { AriaAttributes, DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// No Material Design page draws an inline link. The nearest component is the\n// text button, whose label is the same primary role on no container, and this\n// takes that, with the disabled treatment every page gives content: on\n// surface at the disabled-content opacity. What belongs to a control standing\n// on its own is left out — the button's height, padding, type and state\n// layer. A link takes its size and face from the sentence it sits in, and\n// says it can be followed with its underline instead, which is this\n// component's own: a 1px rule in 70% of the primary role, or in the outline\n// role under `inherit`, turning fully primary on hover.\n//\n// 70% is the least that keeps the rule at 3:1 against the surface in every\n// scheme the library is shown in — Nordic, the closest, comes to 3.15:1. The\n// rule is what separates a link from its sentence, since the primary role\n// sits as close as 1.3:1 to body text in the dark theme, and at the 45% it\n// was drawn in before it measured 2:1 on the light surface.\n//\n// Hover is React Aria's render state rather than `:hover`, as Button's and\n// Tabs' are. A tap leaves a touch screen's emulated pointer over what was\n// tapped, so `:hover` kept a tapped link lit until the next tap, and React\n// Aria ignores that pointer; it also never reports a disabled link hovered.\n\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kHjlTd: \"xj0a0fe\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    k1TLXF: \"x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1q3xnwu\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// Under a pointer, from the render state — see the comment at the top. Either\n// tone turns its text and its rule fully primary, and a rule held back until\n// hover is drawn.\nconst hovered = {\n  tone: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"xv4vikv\",\n    $$css: true\n  },\n  underline: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps & RefAttributes<HTMLAnchorElement>) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isHovered && hovered.tone, state.isHovered && underline === 'hover' && hovered.underline, state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;;AAiCA,MAAMsB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;AAKA,MAAMY,UAAU;CACdC,MAAM;EACJX,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAc,WAAW;EACTL,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAAtB,OAAAgD,IAAA;CAAA,MAAAC,IAAA5D,EAAA,EAAA;CAAA,IAAA6D;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAM,WAAAC,SAAAC,QAAArB,MAAAsB,IAAArB,WAAAsB,IAAA,GAAAC,YAAAX;EAIZ,MAAAb,OAAAsB,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAArB,YAAAsB,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR5D,iBAAiByD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAjD;EAAgBkD,KAAAhD,aAAa0D,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAd,EAAA,OAAAd,QAAAc,EAAA,OAAAb,WAAA;GAA0B2B,MAAAC,UAA4BjE,MAAaW,OAAMC,MAAOP,MAAK6D,MAAOvC,MAAMS,OAAON,WAAWO,YAAY4B,MAAKE,aAAchC,QAAOC,MAAO6B,MAAKE,aAAc9B,cAAc,WAAWF,QAAOE,WAAY4B,MAAKG,cAAezD,OAAMa,QAAS;GAAC0B,EAAA,KAAAd;GAAAc,EAAA,KAAAb;GAAAa,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAA9PI,KAAAhD,oBAAoB0D,IAA4OJ,OAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAC,MAAAD,EAAA,OAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,IAAA;EAArUI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsQ,CAAA;EAAIJ,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAAzUQ;AAAyU"}
+{"version":3,"file":"index.js","names":["c","_c","AriaAttributes","DOMAttributes","ReactNode","RefAttributes","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kHjlTd","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","hovered","tone","underline","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","LinkTone","LinkUnderline","t0","$","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isHovered","isDisabled","Link","_c","props","RACLink","stylex.props"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["'use client';\n\nimport type { AriaAttributes, DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// No Material Design page draws an inline link. The nearest component is the\n// text button, whose label is the same primary role on no container, and this\n// takes that, with the disabled treatment every page gives content: on\n// surface at the disabled-content opacity. What belongs to a control standing\n// on its own is left out — the button's height, padding, type and state\n// layer. A link takes its size and face from the sentence it sits in, and\n// says it can be followed with its underline instead, which is this\n// component's own: a 1px rule in 70% of the primary role, or in the outline\n// role under `inherit`, turning fully primary on hover.\n//\n// 70% is the least that keeps the rule at 3:1 against the surface in every\n// scheme the library is shown in — Nordic, the closest, comes to 3.15:1. The\n// rule is what separates a link from its sentence, since the primary role\n// sits as close as 1.3:1 to body text in the dark theme, and at the 45% it\n// was drawn in before it measured 2:1 on the light surface.\n//\n// Hover is React Aria's render state rather than `:hover`, as Button's and\n// Tabs' are. A tap leaves a touch screen's emulated pointer over what was\n// tapped, so `:hover` kept a tapped link lit until the next tap, and React\n// Aria ignores that pointer; it also never reports a disabled link hovered.\n\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kHjlTd: \"xj0a0fe\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    k1TLXF: \"x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1q3xnwu\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// Under a pointer, from the render state — see the comment at the top. Either\n// tone turns its text and its rule fully primary, and a rule held back until\n// hover is drawn.\nconst hovered = {\n  tone: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"xv4vikv\",\n    $$css: true\n  },\n  underline: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * ```tsx\n * <Link href=\"#first\">Label</Link>\n * ```\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps & RefAttributes<HTMLAnchorElement>) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isHovered && hovered.tone, state.isHovered && underline === 'hover' && hovered.underline, state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;;AAiCA,MAAMsB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;AAKA,MAAMY,UAAU;CACdC,MAAM;EACJX,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAc,WAAW;EACTL,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;AAqDA,SAAAtB,OAAAgD,IAAA;CAAA,MAAAC,IAAA5D,EAAA,EAAA;CAAA,IAAA6D;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAM,WAAAC,SAAAC,QAAArB,MAAAsB,IAAArB,WAAAsB,IAAA,GAAAC,YAAAX;EAIZ,MAAAb,OAAAsB,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAArB,YAAAsB,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR5D,iBAAiByD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAjD;EAAgBkD,KAAAhD,aAAa0D,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAd,EAAA,OAAAd,QAAAc,EAAA,OAAAb,WAAA;GAA0B2B,MAAAC,UAA4BjE,MAAaW,OAAMC,MAAOP,MAAK6D,MAAOvC,MAAMS,OAAON,WAAWO,YAAY4B,MAAKE,aAAchC,QAAOC,MAAO6B,MAAKE,aAAc9B,cAAc,WAAWF,QAAOE,WAAY4B,MAAKG,cAAezD,OAAMa,QAAS;GAAC0B,EAAA,KAAAd;GAAAc,EAAA,KAAAb;GAAAa,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAA9PI,KAAAhD,oBAAoB0D,IAA4OJ,OAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAC,MAAAD,EAAA,OAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,IAAA;EAArUI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsQ,CAAA;EAAIJ,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAAzUQ;AAAyU"}

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

@@ -85,8 +85,42 @@ type ListSectionProps<T extends object = object> = Omit<GridListSectionProps<T>,
  * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with
  * `aria-label` or `aria-labelledby` — nothing here labels it for you.
  *
+ * ```tsx
+ * const [selected, setSelected] = useState<Selection>(new Set(['first']))
+ *
+ * <List
+ *   aria-label="Label"
+ *   onSelectionChange={setSelected}
+ *   selectedKeys={selected}
+ *   selectionMode="multiple"
+ * >
+ *   <List.Item
+ *     id="first"
+ *     leading={<Avatar name="Ada Lovelace" size="sm" />}
+ *     supporting="Supporting line"
+ *     trailing={<Currency value={1250} />}
+ *   >
+ *     First item
+ *   </List.Item>
+ *   <List.Item id="second" textValue="Second item">
+ *     <Text variant="bodyLarge">Second item</Text>
+ *   </List.Item>
+ * </List>
+ * ```
+ *
+ * A row's `id` is what `selectedKeys` holds. A row whose children are not a
+ * plain string takes a `textValue`, which is what typing a row's first
+ * letters matches against.
+ *
  * The call site's `className` and `style` land on the container, which is
  * the element a layout positions.
+ *
+ * Inside a `Virtualizer` the list is its own scroll container, so its height
+ * and `overflow-y: auto` go on the list, through `className` or `style`, and
+ * not on an element around it. React Aria sizes a page of Page Up and Page
+ * Down from the list's own box, so a list left to grow to its full height
+ * inside a scrolling wrapper is one page long, and the keys jump from one
+ * end of it to the other.
  */
 declare function List<T extends object>({ selectionBehavior, selectLabel, ...props }: ListProps<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare namespace List {

package/dist/components/list/index.js

@@ -19,8 +19,9 @@ function itemContent(children, leading, overline, supporting, trailing, selectLa
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
-		leading: leadingFor(state, leading, selectLabel),
+		leading,
 		overline,
+		selection: selectionFor(state, selectLabel),
 		supporting,
 		trailing,
 		children
@@ -31,18 +32,6 @@ function landsOnControl(event) {
 	return event.currentTarget.contains(control) && control !== event.currentTarget;
 }
 /**
-* The selection checkbox, then whatever the row was given. Its return type is
-* written out rather than inferred: `ReactNode` is a union that includes a
-* promise, and a function inferred as returning one has to be `async`.
-*/
-function leadingFor(state, leading, selectLabel) {
-	if (state.selectionBehavior !== "toggle" || state.selectionMode === "none") return leading;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Checkbox, {
-		"aria-label": selectLabel,
-		slot: "selection"
-	}), leading] });
-}
-/**
 * A list of rows one or more of which can be selected. Selection is React
 * Aria's: set `selectionMode` to `single` or `multiple`, and pass
 * `selectedKeys` with `onSelectionChange` to control it or
@@ -61,8 +50,42 @@ function leadingFor(state, leading, selectLabel) {
 * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with
 * `aria-label` or `aria-labelledby` — nothing here labels it for you.
 *
+* ```tsx
+* const [selected, setSelected] = useState<Selection>(new Set(['first']))
+*
+* <List
+*   aria-label="Label"
+*   onSelectionChange={setSelected}
+*   selectedKeys={selected}
+*   selectionMode="multiple"
+* >
+*   <List.Item
+*     id="first"
+*     leading={<Avatar name="Ada Lovelace" size="sm" />}
+*     supporting="Supporting line"
+*     trailing={<Currency value={1250} />}
+*   >
+*     First item
+*   </List.Item>
+*   <List.Item id="second" textValue="Second item">
+*     <Text variant="bodyLarge">Second item</Text>
+*   </List.Item>
+* </List>
+* ```
+*
+* A row's `id` is what `selectedKeys` holds. A row whose children are not a
+* plain string takes a `textValue`, which is what typing a row's first
+* letters matches against.
+*
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
+*
+* Inside a `Virtualizer` the list is its own scroll container, so its height
+* and `overflow-y: auto` go on the list, through `className` or `style`, and
+* not on an element around it. React Aria sizes a page of Page Up and Page
+* Down from the list's own box, so a list left to grow to its full height
+* inside a scrolling wrapper is one page long, and the keys jump from one
+* end of it to the other.
 */
 function List(t0) {
 	const $ = c(23);
@@ -332,6 +355,17 @@ function ListSection(t0) {
 	} else t4 = $[13];
 	return t4;
 }
+/**
+* The selection checkbox, while the list toggles. The row draws it ahead of
+* whatever `leading` holds.
+*/
+function selectionFor(state, selectLabel) {
+	if (state.selectionBehavior !== "toggle" || state.selectionMode === "none") return null;
+	return /* @__PURE__ */ jsx(Checkbox, {
+		"aria-label": selectLabel,
+		slot: "selection"
+	});
+}
 function startsRipple(ripple, own) {
 	return (event) => {
 		if (!landsOnControl(event)) ripple?.(event);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","PointerEvent","PointerEventHandler","ReactNode","RefAttributes","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","undefined","RowsActContext","NESTED_CONTROL","ListLoadMoreProps","Omit","label","ListProps","className","T","selectionBehavior","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","landsOnControl","event","HTMLDivElement","control","target","Element","closest","currentTarget","contains","selectionMode","List","t0","$","T0","T1","T2","props","t1","t2","t3","t4","t5","t6","rowsAct","onAction","dragAndDropHooks","useDraggableCollectionState","t7","t8","ListLoadMore","loading","ListRow","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","acts","href","handlers","startsRipple","surface","ListSection","section","own","Item","LoadMore","Section","_c","RACGridList","props","RACGridListLoadMoreItem","stylex.props","RACGridListItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["'use client';\n\nimport type { PointerEvent, PointerEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift. Undefined unless the list is given one, which\n// leaves the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\n\n// Whether the list makes every row act on a press: it selects, it has an\n// `onAction` of its own, or its rows drag. A row given an `onAction` or an\n// `href` acts whatever this says. A context for the reason SelectLabelContext\n// is one: it is the list's to decide, and a row reads it rather than taking\n// it again as a prop.\nconst RowsActContext = createContext(false);\n\n// What a press inside a row leaves to the element it lands on: a control of\n// the row's own content, which answers the press itself. A label is in the\n// list because a native checkbox or radio is pressed through the label\n// around it. React Aria's own controls, this library's Switch and Checkbox\n// among them, stop the pointerdown of a press they take, so the row never\n// hears one.\nconst NESTED_CONTROL = 'a[href], button, input, label, select, textarea, [role=\"button\"], [role=\"checkbox\"], [role=\"link\"], [role=\"switch\"]';\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * How a press selects. `toggle` draws a checkbox on every row, and a press\n   * adds that row to the selection or takes it out. `replace` draws none, a\n   * press makes that row the selection, and the arrow keys carry the\n   * selection with the focus; where rows also take an action, a click\n   * selects and a double click acts. Left out, a `single` list replaces and\n   * any other toggles, since a single choice drawn as checkboxes unticks one\n   * box whenever another is ticked.\n   */\n  selectionBehavior?: RACGridListProps<T>['selectionBehavior'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n} & Omit<RACGridListProps<T>, 'className' | 'selectionBehavior' | 'style'>;\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\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 function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\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} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// 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.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string | undefined, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// Whether a press on the row began on a control inside it rather than on the\n// row itself. `contains` answers false for no control at all, and true for\n// the row itself, which the second half rules out.\nfunction landsOnControl(event: PointerEvent<HTMLDivElement>) {\n  const control = event.target instanceof Element ? event.target.closest(NESTED_CONTROL) : null;\n  return event.currentTarget.contains(control) && control !== event.currentTarget;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string | undefined): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * A `multiple` list draws a checkbox on every row. A `single` one draws none\n * and marks the chosen row alone, since a checkbox promises a choice that\n * leaves the others standing; `selectionBehavior` overrides either.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectionBehavior,\n  selectLabel,\n  ...props\n}: ListProps<T> & RefAttributes<HTMLDivElement>) {\n  // React Aria's own reading of a draggable collection: hooks that can build\n  // the drag state.\n  const rowsAct = (props.selectionMode ?? 'none') !== 'none' || props.onAction !== undefined || props.dragAndDropHooks?.useDraggableCollectionState !== undefined;\n  return <SelectLabelContext value={selectLabel}>\n      <RowsActContext value={rowsAct}>\n        <RACGridList {...props} {...mergeStatefulStyles(containerClasses, props)}\n      // React Aria's own default is `toggle` in every mode. Read with `??`\n      // rather than placed before the spread, so a wrapper forwarding an\n      // unset prop still gets the default.\n      selectionBehavior={selectionBehavior ?? (props.selectionMode === 'single' ? 'replace' : 'toggle')} />\n      </RowsActContext>\n    </SelectLabelContext>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label,\n  ...props\n}: ListLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListRow<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T> & RefAttributes<HTMLDivElement>) {\n  const selectLabel = useContext(SelectLabelContext);\n  const acts = useContext(RowsActContext) || props.onAction !== undefined || props.href !== undefined;\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own, and only on a row a press acts on, as ListItem draws\n  // it only on an interactive one: a row that does nothing on a press should\n  // not look as though it did. The call site's pointer handlers are handed to\n  // the hook to merge, for the reason ListItem gives, apart from the press\n  // itself, which `startsRipple` hands on. React Aria keeps a row's clicks\n  // for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(acts, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} onPointerDown={startsRipple(ripple.handlers.onPointerDown, onPointerDown)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// The row's press: the ripple's, unless it lands on a control inside the\n// row, which answers it itself — a trailing button pressed spread the row's\n// ripple across the whole row. The call site's own handler runs either way,\n// after the ripple's, as the hook orders the two. Built by a call rather than\n// written at the prop, for the reason `itemContent` gives.\nfunction startsRipple(ripple: PointerEventHandler<HTMLDivElement> | undefined, own: PointerEventHandler<HTMLDivElement> | undefined) {\n  return (event: PointerEvent<HTMLDivElement>) => {\n    if (!landsOnControl(event)) {\n      ripple?.(event);\n    }\n    own?.(event);\n  };\n}\nList.Item = ListRow;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport { ListLoadMore, ListRow, ListSection };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","PointerEvent","PointerEventHandler","ReactNode","RefAttributes","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","undefined","RowsActContext","NESTED_CONTROL","ListLoadMoreProps","Omit","label","ListProps","className","T","selectionBehavior","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","selectionFor","landsOnControl","event","HTMLDivElement","control","target","Element","closest","currentTarget","contains","List","t0","$","T0","T1","T2","props","t1","t2","t3","t4","t5","t6","rowsAct","selectionMode","onAction","dragAndDropHooks","useDraggableCollectionState","t7","t8","ListLoadMore","loading","ListRow","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","acts","href","handlers","startsRipple","surface","ListSection","section","own","Item","LoadMore","Section","_c","RACGridList","props","RACGridListLoadMoreItem","stylex.props","RACGridListItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["'use client';\n\nimport type { PointerEvent, PointerEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift. Undefined unless the list is given one, which\n// leaves the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\n\n// Whether the list makes every row act on a press: it selects, it has an\n// `onAction` of its own, or its rows drag. A row given an `onAction` or an\n// `href` acts whatever this says. A context for the reason SelectLabelContext\n// is one: it is the list's to decide, and a row reads it rather than taking\n// it again as a prop.\nconst RowsActContext = createContext(false);\n\n// What a press inside a row leaves to the element it lands on: a control of\n// the row's own content, which answers the press itself. A label is in the\n// list because a native checkbox or radio is pressed through the label\n// around it. React Aria's own controls, this library's Switch and Checkbox\n// among them, stop the pointerdown of a press they take, so the row never\n// hears one.\nconst NESTED_CONTROL = 'a[href], button, input, label, select, textarea, [role=\"button\"], [role=\"checkbox\"], [role=\"link\"], [role=\"switch\"]';\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * How a press selects. `toggle` draws a checkbox on every row, and a press\n   * adds that row to the selection or takes it out. `replace` draws none, a\n   * press makes that row the selection, and the arrow keys carry the\n   * selection with the focus; where rows also take an action, a click\n   * selects and a double click acts. Left out, a `single` list replaces and\n   * any other toggles, since a single choice drawn as checkboxes unticks one\n   * box whenever another is ticked.\n   */\n  selectionBehavior?: RACGridListProps<T>['selectionBehavior'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n} & Omit<RACGridListProps<T>, 'className' | 'selectionBehavior' | 'style'>;\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\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 function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\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} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// 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.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string | undefined, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} selection={selectionFor(state, selectLabel)} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// Whether a press on the row began on a control inside it rather than on the\n// row itself. `contains` answers false for no control at all, and true for\n// the row itself, which the second half rules out.\nfunction landsOnControl(event: PointerEvent<HTMLDivElement>) {\n  const control = event.target instanceof Element ? event.target.closest(NESTED_CONTROL) : null;\n  return event.currentTarget.contains(control) && control !== event.currentTarget;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * A `multiple` list draws a checkbox on every row. A `single` one draws none\n * and marks the chosen row alone, since a checkbox promises a choice that\n * leaves the others standing; `selectionBehavior` overrides either.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * ```tsx\n * const [selected, setSelected] = useState<Selection>(new Set(['first']))\n *\n * <List\n *   aria-label=\"Label\"\n *   onSelectionChange={setSelected}\n *   selectedKeys={selected}\n *   selectionMode=\"multiple\"\n * >\n *   <List.Item\n *     id=\"first\"\n *     leading={<Avatar name=\"Ada Lovelace\" size=\"sm\" />}\n *     supporting=\"Supporting line\"\n *     trailing={<Currency value={1250} />}\n *   >\n *     First item\n *   </List.Item>\n *   <List.Item id=\"second\" textValue=\"Second item\">\n *     <Text variant=\"bodyLarge\">Second item</Text>\n *   </List.Item>\n * </List>\n * ```\n *\n * A row's `id` is what `selectedKeys` holds. A row whose children are not a\n * plain string takes a `textValue`, which is what typing a row's first\n * letters matches against.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n *\n * Inside a `Virtualizer` the list is its own scroll container, so its height\n * and `overflow-y: auto` go on the list, through `className` or `style`, and\n * not on an element around it. React Aria sizes a page of Page Up and Page\n * Down from the list's own box, so a list left to grow to its full height\n * inside a scrolling wrapper is one page long, and the keys jump from one\n * end of it to the other.\n */\nfunction List<T extends object>({\n  selectionBehavior,\n  selectLabel,\n  ...props\n}: ListProps<T> & RefAttributes<HTMLDivElement>) {\n  // React Aria's own reading of a draggable collection: hooks that can build\n  // the drag state.\n  const rowsAct = (props.selectionMode ?? 'none') !== 'none' || props.onAction !== undefined || props.dragAndDropHooks?.useDraggableCollectionState !== undefined;\n  return <SelectLabelContext value={selectLabel}>\n      <RowsActContext value={rowsAct}>\n        <RACGridList {...props} {...mergeStatefulStyles(containerClasses, props)}\n      // React Aria's own default is `toggle` in every mode. Read with `??`\n      // rather than placed before the spread, so a wrapper forwarding an\n      // unset prop still gets the default.\n      selectionBehavior={selectionBehavior ?? (props.selectionMode === 'single' ? 'replace' : 'toggle')} />\n      </RowsActContext>\n    </SelectLabelContext>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label,\n  ...props\n}: ListLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListRow<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T> & RefAttributes<HTMLDivElement>) {\n  const selectLabel = useContext(SelectLabelContext);\n  const acts = useContext(RowsActContext) || props.onAction !== undefined || props.href !== undefined;\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own, and only on a row a press acts on, as ListItem draws\n  // it only on an interactive one: a row that does nothing on a press should\n  // not look as though it did. The call site's pointer handlers are handed to\n  // the hook to merge, for the reason ListItem gives, apart from the press\n  // itself, which `startsRipple` hands on. React Aria keeps a row's clicks\n  // for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(acts, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} onPointerDown={startsRipple(ripple.handlers.onPointerDown, onPointerDown)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, while the list toggles. The row draws it ahead of\n * whatever `leading` holds.\n */\nfunction selectionFor(state: GridListItemRenderProps, selectLabel: string | undefined) {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return null;\n  }\n  return <Checkbox aria-label={selectLabel} slot=\"selection\" />;\n}\n\n// The row's press: the ripple's, unless it lands on a control inside the\n// row, which answers it itself — a trailing button pressed spread the row's\n// ripple across the whole row. The call site's own handler runs either way,\n// after the ripple's, as the hook orders the two. Built by a call rather than\n// written at the prop, for the reason `itemContent` gives.\nfunction startsRipple(ripple: PointerEventHandler<HTMLDivElement> | undefined, own: PointerEventHandler<HTMLDivElement> | undefined) {\n  return (event: PointerEvent<HTMLDivElement>) => {\n    if (!landsOnControl(event)) {\n      ripple?.(event);\n    }\n    own?.(event);\n  };\n}\nList.Item = ListRow;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport { ListLoadMore, ListRow, ListSection };\nexport default List;"],"mappings":"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"}

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

@@ -55,7 +55,40 @@ type ListDetailProps = {
  * While only one pane fits, the pane that is not showing is hidden
  * outright, so focus inside it is dropped when `showing` changes. The call
  * site that changed it is what puts focus in the pane it revealed — see the
- * prop.
+ * prop. `flushSync` commits the swap before focus moves, since a pane that is
+ * still hidden cannot take it:
+ *
+ * ```tsx
+ * const [showing, setShowing] = useState<'detail' | 'list'>('list')
+ * const heading = useRef<HTMLHeadingElement>(null)
+ * const opener = useRef<HTMLElement>(null)
+ *
+ * function open(event: MouseEvent<HTMLElement>) {
+ *   opener.current = event.currentTarget
+ *   flushSync(() => setShowing('detail'))
+ *   heading.current?.focus()
+ * }
+ *
+ * function back() {
+ *   flushSync(() => setShowing('list'))
+ *   opener.current?.focus()
+ * }
+ *
+ * <ListDetail
+ *   detail={
+ *     <>
+ *       <Button onPress={back} variant="text">Back</Button>
+ *       <h2 ref={heading} tabIndex={-1}>Headline</h2>
+ *     </>
+ *   }
+ *   list={
+ *     <ListItem interactive onClick={open}>
+ *       First item
+ *     </ListItem>
+ *   }
+ *   showing={showing}
+ * />
+ * ```
  */
 declare function ListDetail({ detail, list, render, showing, ...props }: ListDetailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion