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

package/dist/components/index.d.ts

@@ -26,7 +26,7 @@ import ColorWheel, { ColorWheelProps } from "./color-wheel/index.js";
 import ComboBox, { ComboBoxProps, ComboBoxSelectionMode } from "./combo-box/index.js";
 import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
-import Currency, { CurrencyProps, CurrencySignDisplay, CurrencyTone } from "./currency/index.js";
+import Currency, { CurrencyDisplay, CurrencyNotation, CurrencyProps, CurrencySignDisplay, CurrencyTone } from "./currency/index.js";
 import DateField, { DateFieldProps } from "./date-field/index.js";
 import DatePicker, { DatePickerProps } from "./date-picker/index.js";
 import DateRangePicker, { DateRangePickerProps } from "./date-range-picker/index.js";
@@ -82,4 +82,4 @@ import TokenField, { TokenFieldProps, TokenSegment } from "./token-field/index.j
 import Toolbar, { ToolbarProps, ToolbarTone } from "./toolbar/index.js";
 import Tooltip, { TooltipAlign, TooltipProps, TooltipSide } from "./tooltip/index.js";
 import Tree, { TreeItem, TreeItemProps, TreeLoadMore, TreeLoadMoreProps, TreeProps, TreeSection, TreeSectionProps } from "./tree/index.js";
-export { AppBar, type AppBarProps, type AppBarScroll, type AppBarScrollOptions, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, LoadingIndicator, type LoadingIndicatorProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, type SliderSize, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TimePicker, type TimePickerMode, type TimePickerProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps, useAppBarScroll };
+export { AppBar, type AppBarProps, type AppBarScroll, type AppBarScrollOptions, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyDisplay, type CurrencyNotation, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, LoadingIndicator, type LoadingIndicatorProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, type SliderSize, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TimePicker, type TimePickerMode, type TimePickerProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps, useAppBarScroll };

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

@@ -5,6 +5,9 @@ type KeycapProps = RenderComponentProps<'kbd'>;
  * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
  * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A
  * chord is several of these, combined at the call site.
+ *
+ * In a menu item's `shortcut` it follows the item: while the item is selected
+ * or disabled, its text and its rule take the item's colour.
  */
 declare function Keycap({ render, ...props }: KeycapProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/components/keycap/index.js

@@ -1,63 +1,49 @@
 "use client";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { KeycapToneContext } from "../../keycap/context.js";
 import { c } from "react/compiler-runtime";
+import { useContext } from "react";
 //#region src/components/keycap/index.tsx
 /**
 * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
 * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A
 * chord is several of these, combined at the call site.
+*
+* In a menu item's `shortcut` it follows the item: while the item is selected
+* or disabled, its text and its rule take the item's colour.
 */
 function Keycap(t0) {
-	const $ = c(13);
-	let render;
-	let t1;
-	let t2;
+	const $ = c(6);
+	const { render, ...props } = t0;
+	const tone = useContext(KeycapToneContext);
+	const t1 = "kbd";
+	const t2 = mergeStyles({
+		0: { className: "xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft" },
+		1: { className: "xjbqb8w x1tfhd1 x1y0btm7 xmkeg23 x9f619 x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft x1r7ld26 x1heor9g" }
+	}[!!(tone === "inherit") << 0], props);
 	let t3;
-	let t4;
-	if ($[0] !== t0) {
-		const { render: t5, ...props } = t0;
-		render = t5;
-		t4 = useRender;
-		t3 = "kbd";
-		t1 = props;
-		t2 = mergeStyles({ className: "xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft" }, props);
-		$[0] = t0;
-		$[1] = render;
-		$[2] = t1;
-		$[3] = t2;
-		$[4] = t3;
-		$[5] = t4;
-	} else {
-		render = $[1];
-		t1 = $[2];
-		t2 = $[3];
-		t3 = $[4];
-		t4 = $[5];
-	}
-	let t5;
-	if ($[6] !== t1 || $[7] !== t2) {
-		t5 = {
-			...t1,
+	if ($[0] !== props || $[1] !== t2) {
+		t3 = {
+			...props,
 			...t2
 		};
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
-		t6 = {
-			defaultTagName: t3,
-			props: t5,
+		$[0] = props;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== render || $[4] !== t3) {
+		t4 = {
+			defaultTagName: t1,
+			props: t3,
 			render
 		};
-		$[9] = render;
-		$[10] = t3;
-		$[11] = t5;
-		$[12] = t6;
-	} else t6 = $[12];
-	return t4(t6);
+		$[3] = render;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	return useRender(t4);
 }
 //#endregion
 export { Keycap as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","KeycapProps","Keycap","t0","$","render","t1","t2","t3","t4","t5","props","className","t6","defaultTagName","_c"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n//\n// No Material Design page draws a keycap. Its rule is the assist chip's, 1dp\n// in the outline role around a label. Its size is the text's, as above, and\n// its corner is the extra-small step of the shape scale rather than the\n// chip's small one, since a box the height of a line has no room for 8dp.\n\ntype KeycapProps = RenderComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;;AAoCA,SAAAW,OAAAC,IAAA;CAAA,MAAAC,IAAAZ,EAAA,EAAA;CAAA,IAAAa;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAgB,MAAA,EAAAE,QAAAK,IAAA,GAAAC,UAAAR;EAAAE,SAAAK;EAIPf,KAAAA;EACWa,KAAA;EAEXG,KAAAA;EACAJ,KAAAX,YAAY,EAAAgB,WACF,qHACb,GAAGD,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAJ,SAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,IAAA;EAJJG,KAAA;GAAA,GACFC;GAAK,GACLJ;EAGL;EAACH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAC,UAAAD,EAAA,QAAAI,MAAAJ,EAAA,QAAAM,IAAA;EAPcG,KAAA;GAAAC,gBACCN;GAAKG,OACdD;GAKNL;EAEH;EAACD,EAAA,KAAAC;EAAAD,EAAA,MAAAI;EAAAJ,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OATMT,GAAUkB,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","useContext","RenderComponentProps","KeycapToneContext","useRender","mergeStyles","colors","radii","spacing","typography","KeycapProps","Keycap","t0","$","render","props","tone","t1","t2","0","className","1","t3","t4","defaultTagName","_c"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { KeycapToneContext } from '../../keycap/context';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n//\n// No Material Design page draws a keycap. Its rule is the assist chip's, 1dp\n// in the outline role around a label. Its size is the text's, as above, and\n// its corner is the extra-small step of the shape scale rather than the\n// chip's small one, since a box the height of a line has no room for 8dp.\n//\n// Inside a selected or disabled menu item's shortcut it draws in the\n// shortcut's colour instead, its rule included, through a context the item\n// provides — see `KeycapToneContext`. Its own on surface would otherwise\n// stay dark on a row that has faded, and its own colours do not belong on\n// the selected container, which brings an on-colour of its own.\n\ntype KeycapProps = RenderComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n *\n * In a menu item's `shortcut` it follows the item: while the item is selected\n * or disabled, its text and its rule take the item's colour.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  const tone = useContext(KeycapToneContext);\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        0: {\n          className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n        },\n        1: {\n          className: \"xjbqb8w x1tfhd1 x1y0btm7 xmkeg23 x9f619 x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft x1r7ld26 x1heor9g\"\n        }\n      }[!!(tone === 'inherit') << 0], props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;;;;;;;AA+CA,SAAAa,OAAAC,IAAA;CAAA,MAAAC,IAAAd,EAAA,CAAA;CAAgB,MAAA,EAAAe,QAAA,GAAAC,UAAAH;CAId,MAAAI,OAAaf,WAAWE,iBAAiB;CAEvB,MAAAc,KAAA;CAGX,MAAAC,KAAAb,YAAY;EAAAc,GACV,EAAAC,WACU,qHACb;EAACC,GACE,EAAAD,WACU,qHACb;CACF,EAAE,CAAC,EAAEJ,SAAS,cAAc,IAAID,KAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAE,SAAAF,EAAA,OAAAK,IAAA;EATjCI,KAAA;GAAA,GACFP;GAAK,GACLG;EAQL;EAACL,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAC,UAAAD,EAAA,OAAAS,IAAA;EAZcC,KAAA;GAAAC,gBACCP;GAAKF,OACdO;GAUNR;EAEH;EAACD,EAAA,KAAAC;EAAAD,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAdMT,UAAUmB,EAchB;AAAC"}

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

@@ -13,6 +13,16 @@ type ListLoadMoreProps = Omit<GridListLoadMoreItemProps, 'children'> & {
 type ListProps<T extends object = object> = {
   /** A function may compute the class from the list's render state. */
   className?: GridListProps<T>['className'];
+  /**
+   * How a press selects. `toggle` draws a checkbox on every row, and a press
+   * adds that row to the selection or takes it out. `replace` draws none, a
+   * press makes that row the selection, and the arrow keys carry the
+   * selection with the focus; where rows also take an action, a click
+   * selects and a double click acts. Left out, a `single` list replaces and
+   * any other toggles, since a single choice drawn as checkboxes unticks one
+   * box whenever another is ticked.
+   */
+  selectionBehavior?: GridListProps<T>['selectionBehavior'];
   /**
    * What each row's selection checkbox is called, for a screen reader. The
    * row's own text is what names the row; this names the box inside it.
@@ -22,7 +32,7 @@ type ListProps<T extends object = object> = {
   selectLabel?: string;
   /** A function may compute the style from the list's render state. */
   style?: GridListProps<T>['style'];
-} & Omit<GridListProps<T>, 'className' | 'style'>;
+} & Omit<GridListProps<T>, 'className' | 'selectionBehavior' | 'style'>;
 type ListRowProps<T extends object = object> = {
   /** The row's headline — the one thing it is mostly about. */
   children?: ReactNode;
@@ -63,6 +73,10 @@ type ListSectionProps<T extends object = object> = Omit<GridListSectionProps<T>,
  * `defaultSelectedKeys` to let it keep its own. A list that only responds to
  * a press takes `onAction` on the row instead.
  *
+ * A `multiple` list draws a checkbox on every row. A `single` one draws none
+ * and marks the chosen row alone, since a checkbox promises a choice that
+ * leaves the others standing; `selectionBehavior` overrides either.
+ *
  * ListItem is the static row — one row, presenting, on its own. This is the
  * collection that draws the same row and adds selection, keyboard navigation
  * between rows, sections and a load-more sentinel.
@@ -74,7 +88,7 @@ type ListSectionProps<T extends object = object> = Omit<GridListSectionProps<T>,
  * The call site's `className` and `style` land on the container, which is
  * the element a layout positions.
  */
-declare function List<T extends object>({ selectLabel, ...props }: ListProps<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function List<T extends object>({ selectionBehavior, selectLabel, ...props }: ListProps<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare namespace List {
   var Item: typeof ListRow;
   var LoadMore: typeof ListLoadMore;