@kanso-labs/kanso-ui 0.20.0 → 0.22.0

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

@@ -70,6 +70,25 @@ const styles = {
 		kzqmXN: "x100vrsf",
 		$$css: true
 	},
+	outlined: {
+		kWkggS: "x1dg9itu x1728qcm xjbqb8w",
+		kVAM5u: "x133yhug",
+		ksu8eU: "x1y0btm7",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	},
+	outlinedDisabled: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "xrh88j3",
+		kMwMTN: "x1xj74d8",
+		$$css: true
+	},
+	outlinedToggleSelected: {
+		kWkggS: "x1q27o6y x1v1ylhe x1c5gpgi",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "x1girmi0",
+		$$css: true
+	},
 	pending: {
 		kGNEyG: "x6s0dn4",
 		k1xSpc: "x78zum5",
@@ -130,6 +149,28 @@ const styles = {
 		$$css: true
 	}
 };
+const outlineWidths = {
+	lg: {
+		kMzoRj: "xmkeg23",
+		$$css: true
+	},
+	md: {
+		kMzoRj: "xmkeg23",
+		$$css: true
+	},
+	xl: {
+		kMzoRj: "xdh2fpr",
+		$$css: true
+	},
+	xs: {
+		kMzoRj: "xmkeg23",
+		$$css: true
+	},
+	xxl: {
+		kMzoRj: "x9r2w2z",
+		$$css: true
+	}
+};
 const selectedShapes = {
 	lg: {
 		kaIpWk: "x62ce2h",
@@ -157,6 +198,10 @@ const toggleStyles = {
 		selected: styles.filled,
 		unselected: styles.filledToggle
 	},
+	outlined: {
+		selected: styles.outlinedToggleSelected,
+		unselected: styles.outlined
+	},
 	standard: {
 		selected: styles.standardToggleSelected,
 		unselected: styles.standard
@@ -168,6 +213,7 @@ const toggleStyles = {
 };
 const disabledStyles = {
 	filled: styles.filledDisabled,
+	outlined: styles.outlinedDisabled,
 	standard: styles.standardDisabled,
 	tonal: styles.tonalDisabled
 };
@@ -236,7 +282,7 @@ function IconButton({ children, defaultSelected, disableRipple = false, href, is
 		...mergeStatefulStyles(toggleStyleProps(size, variant), props$1),
 		children: toggleContent(children, ripple)
 	});
-	const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
+	const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
 	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
 		href,
 		isDisabled: disabled,
@@ -261,7 +307,7 @@ function toggleContent(children, ripple) {
 	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });
 }
 function toggleStyleProps(size, variant) {
-	return (state) => props(styles.base, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);
+	return (state) => props(styles.base, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);
 }
 //#endregion
 export { IconButton as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, standard on surface variant over nothing. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **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. So a chosen filled toggle looks like a plain filled button, and\n// an unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x3y1ksm\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"xtt5grq x3y1ksm\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x1r81nxe x3y1ksm\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"xjp8j0k\",\n    kaIpWk: \"x11f6t2b x3y1ksm\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x13oubkp\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1r81nxe x3y1ksm\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\n    kaIpWk: \"x11f6t2b x3y1ksm\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"x1f2tiqu\",\n    $$css: true\n  }\n};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\n    unselected: styles.filledToggle\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `filled` and `tonal`\n   * carry a container of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, as in Button.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x3y1ksm\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"xtt5grq x3y1ksm\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x1r81nxe x3y1ksm\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"xjp8j0k\",\n    kaIpWk: \"x11f6t2b x3y1ksm\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x13oubkp\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1r81nxe x3y1ksm\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\n    kaIpWk: \"x11f6t2b x3y1ksm\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"x1f2tiqu\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, as in Button.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -3,19 +3,28 @@ import Autocomplete, { AutocompleteProps } from "./autocomplete/index.js";
 import Avatar, { AvatarProps } from "./avatar/index.js";
 import Breadcrumbs, { BreadcrumbsProps } from "./breadcrumbs/index.js";
 import Button, { ButtonProps } from "./button/index.js";
+import Calendar, { CalendarProps } from "./calendar/index.js";
 import Card, { CardProps } from "./card/index.js";
 import Checkbox, { CheckboxProps } from "./checkbox/index.js";
 import CheckboxGroup, { CheckboxGroupProps } from "./checkbox-group/index.js";
 import Chip, { ChipProps } from "./chip/index.js";
 import ChipGroup, { ChipGroupProps } from "./chip-group/index.js";
 import Code, { CodeProps } from "./code/index.js";
+import ColorArea, { ColorAreaProps } from "./color-area/index.js";
+import ColorSlider, { ColorSliderProps } from "./color-slider/index.js";
+import ColorSwatch, { ColorSwatchProps } from "./color-swatch/index.js";
+import ColorSwatchPicker, { ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
 import ComboBox, { ComboBoxProps } from "./combo-box/index.js";
 import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
 import Currency, { CurrencyProps } 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";
 import Dialog, { DialogProps } from "./dialog/index.js";
 import Disclosure, { DisclosureProps } from "./disclosure/index.js";
 import DisclosureGroup, { DisclosureGroupProps } from "./disclosure-group/index.js";
+import DropZone, { DropZoneProps, FileTrigger, FileTriggerProps } from "./drop-zone/index.js";
 import Feed, { FeedProps } from "./feed/index.js";
 import Form, { FormProps } from "./form/index.js";
 import IconButton, { IconButtonProps } from "./icon-button/index.js";
@@ -28,11 +37,13 @@ import ListItem, { ListItemProps } from "./list-item/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
 import Menu, { MenuProps } from "./menu/index.js";
 import Meter, { MeterProps } from "./meter/index.js";
+import NavigationTree, { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps } from "./navigation-tree/index.js";
 import NumberField, { NumberFieldProps } from "./number-field/index.js";
 import Popover, { PopoverProps } from "./popover/index.js";
 import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import ProgressIndicator, { ProgressIndicatorProps } from "./progress-indicator/index.js";
 import RadioGroup, { Radio, RadioGroupProps, RadioProps } from "./radio-group/index.js";
+import RangeCalendar, { RangeCalendarProps } from "./range-calendar/index.js";
 import SearchField, { SearchFieldProps } from "./search-field/index.js";
 import SegmentedButton, { SegmentedButtonProps, SegmentedButtonSegmentProps } from "./segmented-button/index.js";
 import Select, { SelectProps } from "./select/index.js";
@@ -42,12 +53,15 @@ import Snackbar, { SnackbarProps } from "./snackbar/index.js";
 import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Switch, { SwitchProps } from "./switch/index.js";
+import Table, { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
 import Tabs, { TabsProps } from "./tabs/index.js";
 import Tag, { TagProps } from "./tag/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextArea, { TextAreaProps } from "./text-area/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
+import TimeField, { TimeFieldProps } from "./time-field/index.js";
 import TokenField, { TokenFieldProps } from "./token-field/index.js";
 import Toolbar, { ToolbarProps } from "./toolbar/index.js";
 import Tooltip, { TooltipProps } from "./tooltip/index.js";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, Feed, type FeedProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps };
+import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./tree/index.js";
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };

package/dist/components/list/index.js

@@ -20,8 +20,8 @@ function itemContent(children, leading, supporting, trailing, selectLabel) {
 		children
 	});
 }
-function itemStyles(state) {
-	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+function itemStyles(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== void 0 && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
 }
 /**
 * The selection checkbox, then whatever the row was given. Its return type is
@@ -82,7 +82,7 @@ function ListItem(t0) {
 		$[1] = textValue;
 		$[2] = t1;
 	} else t1 = $[2];
-	const t2 = mergeStatefulStyles(itemStyles, props);
+	const t2 = mergeStatefulStyles(itemStyles(supporting), props);
 	let t3;
 	if ($[3] !== children || $[4] !== leading || $[5] !== selectLabel || $[6] !== supporting || $[7] !== trailing) {
 		t3 = itemContent(children, leading, supporting, trailing, selectLabel);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\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.\nconst SelectLabelContext = createContext('Select');\ntype ListItemProps<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  /** 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 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   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\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   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\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, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\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 it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: GridListItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\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): 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 * 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  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\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 ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\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 = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACGridListLoadMoreItem>;\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>) {\n  return <RACGridListSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <RACGridListHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListItemProps, ListLoadMoreProps, ListProps, ListSectionProps };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\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.\nconst SelectLabelContext = createContext('Select');\ntype ListItemProps<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  /** 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 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   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\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   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\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, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\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 it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\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.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: GridListItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\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): 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 * 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  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\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 ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\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 = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACGridListLoadMoreItem>;\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>) {\n  return <RACGridListSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <RACGridListHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListItemProps, ListLoadMoreProps, ListProps, ListSectionProps };\nexport default List;"],"mappings":"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"}

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

@@ -17,8 +17,8 @@ function itemContent(children, leading, supporting, trailing) {
 		children
 	});
 }
-function itemStyles(state) {
-	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+function itemStyles(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== void 0 && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
 }
 /**
 * A list of options one or more of which can be selected. Selection is React
@@ -83,7 +83,7 @@ function ListBoxItem$1(t0) {
 			$[11] = t1;
 		} else t1 = $[11];
 		t2 = props;
-		t3 = mergeStatefulStyles(itemStyles, props);
+		t3 = mergeStatefulStyles(itemStyles(supporting), props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<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<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options 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 option draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: ListBoxItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of options 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 option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `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 ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\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` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<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<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options 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 option draws, from React Aria's render state. Built by a call\n// 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\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: ListBoxItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of options 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 option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `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 ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\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` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}

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

@@ -11,6 +11,12 @@ type ListItemProps = {
   interactive?: boolean;
   /** Content before the headline: an avatar, an icon, a checkbox. */
   leading?: ReactNode;
+  /**
+   * A line above the headline, in the page's label-small and the same muted
+   * role the supporting line takes — a category, a date, a status. Given
+   * alongside `supporting` it makes the row the page's three-line item.
+   */
+  overline?: ReactNode;
   /** A second line under the headline, in the muted role. */
   supporting?: ReactNode;
   /** Content after the headline, such as an amount or a control. */
@@ -18,13 +24,17 @@ type ListItemProps = {
 } & HTMLAttributes<HTMLElement>;
 /**
  * A static row: the row every list draws, on its own, as the lists spec page
- * gives it — a 56px floor, a body-large headline and a body-medium
- * supporting line. The layout and the states are the row module's in
- * `src/row`, shared with every collection item; what is here is the element
- * around them — a `<div>` that presents, or a `<button>` that ripples — and
- * the props that fill the slots.
+ * gives it — a 56px one-line container, a body-large headline and a
+ * body-medium supporting line. A second line takes it to the page's 72px
+ * two-line container; an `overline` puts that second line above the headline
+ * instead of below it, and an overline with a supporting line makes the
+ * page's three-line item, an 88px container with the leading and trailing
+ * slots held at the top rather than centred. The layout and the states are
+ * the row module's in `src/row`, shared with every collection item; what is
+ * here is the element around them — a `<div>` that presents, or a `<button>`
+ * that ripples — and the props that fill the slots.
  */
-declare function ListItem({ children, interactive, leading, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ children, interactive, leading, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
 //#endregion
 export { type ListItemProps, ListItem as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -7,30 +7,38 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-item/index.tsx
 /**
 * A static row: the row every list draws, on its own, as the lists spec page
-* gives it — a 56px floor, a body-large headline and a body-medium
-* supporting line. The layout and the states are the row module's in
-* `src/row`, shared with every collection item; what is here is the element
-* around them — a `<div>` that presents, or a `<button>` that ripples — and
-* the props that fill the slots.
+* gives it — a 56px one-line container, a body-large headline and a
+* body-medium supporting line. A second line takes it to the page's 72px
+* two-line container; an `overline` puts that second line above the headline
+* instead of below it, and an overline with a supporting line makes the
+* page's three-line item, an 88px container with the leading and trailing
+* slots held at the top rather than centred. The layout and the states are
+* the row module's in `src/row`, shared with every collection item; what is
+* here is the element around them — a `<div>` that presents, or a `<button>`
+* that ripples — and the props that fill the slots.
 */
-function ListItem({ children, interactive = false, leading, supporting, trailing, ...props$1 }) {
+function ListItem({ children, interactive = false, leading, overline, supporting, trailing, ...props$1 }) {
 	const ripple = useRipple(interactive);
+	const extraLines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
+	const twoLine = extraLines === 1;
+	const threeLine = extraLines === 2;
 	const content = /* @__PURE__ */ jsx(RowContent, {
 		leading,
+		overline,
 		supporting,
 		trailing,
 		children
 	});
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
 		...props$1,
-		...mergeStyles(props(rowStyles.base, rowStyles.list), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
 		children: content
 	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		...ripple.handlers,
 		...props$1,
-		...mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
 		children: [content, ripple.surface]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px floor, a body-large headline and a body-medium\n * supporting line. The layout and the states are the row module's in\n * `src/row`, shared with every collection item; what is here is the element\n * around them — a `<div>` that presents, or a `<button>` that ripples — and\n * the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const content = <RowContent leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;AA+BA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAqB;EAAsB;EAC3E;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,IAAI,GAAG,OAAK;EACrF,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,UAAU,WAAW,GAAG,OAAK;EAAhJ,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;AAyCA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,UACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CAWvD,MAAM,cAAc,aAAa,KAAA,IAAY,IAAI,MAAM,eAAe,KAAA,IAAY,IAAI;CACtF,MAAM,UAAU,eAAe;CAC/B,MAAM,YAAY,eAAe;CACjC,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAmB;EAAsB;EAAsB;EAC/F;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,WAAW,UAAU,SAAS,aAAa,UAAU,SAAS,GAAG,OAAK;EACrJ,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,UAAU,aAAa,WAAW,UAAU,SAAS,aAAa,UAAU,SAAS,GAAG,OAAK;EAAhN,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}