@kanso-labs/kanso-ui 0.36.0 → 0.37.0

package/dist/components/list/index.js

@@ -5,7 +5,7 @@ import { useRipple } from "../../hooks/useRipple.js";
 import Checkbox from "../checkbox/index.js";
 import { textOf } from "../../collection/text.js";
 import { CollectionLoadMore } from "../../collection/index.js";
-import { collectionStyles, rowItemStyles } from "../../collection/styles.js";
+import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -62,12 +62,12 @@ function List(t0) {
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		const { selectLabel, ...props$1 } = t0;
+		const { selectLabel, ...props } = t0;
 		T1 = SelectLabelContext;
 		t3 = selectLabel;
 		T0 = GridList;
-		t1 = props$1;
-		t2 = mergeStatefulStyles(props(collectionStyles.container), props$1);
+		t1 = props;
+		t2 = mergeStatefulStyles(containerClasses, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
@@ -117,11 +117,11 @@ function ListLoadMore(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { label: t3, ...props$2 } = t0;
+		const { label: t3, ...props$1 } = t0;
 		label = t3;
 		T0 = GridListLoadMoreItem;
-		t1 = props$2;
-		t2 = mergeStyles(props(collectionStyles.loading), props$2);
+		t1 = props$1;
+		t2 = mergeStyles(props(collectionStyles.loading), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -239,12 +239,12 @@ function ListSection(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, header: t4, ...props$3 } = t0;
+		const { children: t3, header: t4, ...props$2 } = t0;
 		children = t3;
 		header = t4;
 		T0 = GridListSection;
-		t1 = props$3;
-		t2 = mergeStyles(props(collectionStyles.section), props$3);
+		t1 = props$2;
+		t2 = mergeStyles(props(collectionStyles.section), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","undefined","ListLoadMoreProps","Omit","label","ListProps","className","T","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","T0","T1","t1","t2","t3","props","container","t4","t5","ListLoadMore","loading","ListRow","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","ListSection","section","Item","LoadMore","Section","_c","props","RACGridList","stylex.props","RACGridListLoadMoreItem","RACGridListItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift. Undefined unless the list is given one, which\n// leaves the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n} & Omit<RACGridListProps<T>, 'className' | 'style'>;\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string | undefined, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string | undefined): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * 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,\n  ...props\n}: ListProps<T> & RefAttributes<HTMLDivElement>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label,\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListRow<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own. The call site's pointer handlers are handed to the\n  // hook to merge, for the reason ListItem gives. React Aria keeps a row's\n  // clicks for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\nList.Item = ListRow;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport { ListLoadMore, ListRow, ListSection };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","undefined","ListLoadMoreProps","Omit","label","ListProps","className","T","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","T0","T1","t1","t2","t3","props","t4","t5","ListLoadMore","loading","ListRow","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","ListSection","section","Item","LoadMore","Section","_c","RACGridList","props","RACGridListLoadMoreItem","stylex.props","RACGridListItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift. Undefined unless the list is given one, which\n// leaves the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n} & Omit<RACGridListProps<T>, 'className' | 'style'>;\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string | undefined, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string | undefined): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * 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,\n  ...props\n}: ListProps<T> & RefAttributes<HTMLDivElement>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(containerClasses, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label,\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListRow<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own. The call site's pointer handlers are handed to the\n  // hook to merge, for the reason ListItem gives. React Aria keeps a row's\n  // clicks for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\nList.Item = ListRow;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport { ListLoadMore, ListRow, ListSection };\nexport default List;"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { textOf } from "../../collection/text.js";
 import { CollectionLoadMore } from "../../collection/index.js";
-import { collectionStyles, rowItemStyles } from "../../collection/styles.js";
+import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -35,21 +35,21 @@ function itemContent(children, leading, overline, supporting, trailing, ripple)
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
 */
-function ListBox$1(props$1) {
+function ListBox$1(props) {
 	const $ = c(5);
 	let t0;
-	if ($[0] !== props$1) {
-		t0 = mergeStatefulStyles(props(collectionStyles.container), props$1);
-		$[0] = props$1;
+	if ($[0] !== props) {
+		t0 = mergeStatefulStyles(containerClasses, props);
+		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props$1 || $[3] !== t0) {
+	if ($[2] !== props || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(ListBox, {
-			...props$1,
+			...props,
 			...t0
 		});
-		$[2] = props$1;
+		$[2] = props;
 		$[3] = t0;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -184,12 +184,12 @@ function ListBoxSection$1(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, header: t4, ...props$3 } = t0;
+		const { children: t3, header: t4, ...props$1 } = t0;
 		children = t3;
 		header = t4;
 		T0 = ListBoxSection;
-		t1 = props$3;
-		t2 = mergeStyles(props(collectionStyles.section), props$3);
+		t1 = props$1;
+		t2 = mergeStyles(props(collectionStyles.section), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","ripple","state","isDisabled","isSelected","props","$","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","t2","t3","handlers","t4","t5","surface","t6","ListBoxLoadMore","loading","section","undefined","Item","LoadMore","Section","ListBox","_c","props","stylex.props","RACListBox","ListBoxItem","RACListBoxItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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 { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\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  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the 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   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = 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, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\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 its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled option, so nothing has to outrank them.\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.\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> & RefAttributes<HTMLDivElement>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), 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  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, ripple.surface)}\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,\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\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(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport { ListBoxItem, ListBoxLoadMore, ListBoxSection };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","ripple","state","isDisabled","isSelected","props","$","t0","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","t2","t3","handlers","t4","t5","surface","t6","ListBoxLoadMore","loading","section","undefined","Item","LoadMore","Section","ListBox","_c","RACListBox","ListBoxItem","RACListBoxItem","props","RACListBoxLoadMoreItem","stylex.props","ListBoxSection","RACListBoxSection"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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 { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\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  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the 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   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = 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, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\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 its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled option, so nothing has to outrank them.\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.\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> & RefAttributes<HTMLDivElement>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(containerClasses, 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  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, ripple.surface)}\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,\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\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(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport { ListBoxItem, ListBoxLoadMore, ListBoxSection };\nexport default ListBox;"],"mappings":"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"}

package/dist/components/radio-group/index.js

@@ -40,6 +40,16 @@ const hoverLayers = {
 		$$css: true
 	}
 };
+const focusLayers = {
+	selected: {
+		kWkggS: "x1sog3nf",
+		$$css: true
+	},
+	unselected: {
+		kWkggS: "xwqhyid",
+		$$css: true
+	}
+};
 const pressedLayers = {
 	selected: {
 		kWkggS: "xjeeohs",
@@ -57,7 +67,7 @@ function buttonContent(children, ripple) {
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 			...interactive ? ripple.handlers : {},
-			...props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
+			...props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7",
 				children: state.isSelected ? /* @__PURE__ */ jsx("span", { ...{

package/dist/components/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","isRequired","Radio","t0","$","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel isRequired={state.isRequired} state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","focusLayers","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","isRequired","Radio","t0","$","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  selected: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel isRequired={state.isRequired} state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}

package/dist/components/search-view/index.d.ts

@@ -0,0 +1,79 @@
+import { AutocompleteProps as AutocompleteProps$1 } from "../autocomplete/index.js";
+import { ReactNode, RefAttributes } from "react";
+import { ClassNameOrFunction, DialogTriggerProps, PopoverRenderProps, StyleOrFunction } from "react-aria-components";
+//#region src/components/search-view/index.d.ts
+type SearchViewContentProps<T extends object = object> = {
+  /**
+   * What the back button is called, for a screen reader. Left out, the
+   * library names it in the reader's locale — "Back" in English.
+   */
+  backLabel?: string;
+  /** The results: a ListBox or a Menu, which typing narrows. */
+  children?: ReactNode;
+  /** A function may compute the class from the view's render state. */
+  className?: ClassNameOrFunction<PopoverRenderProps>;
+  /**
+   * What the clear button is called, for a screen reader. Left out, React
+   * Aria names it in the reader's locale — "Clear search" in English.
+   */
+  clearLabel?: string;
+  /**
+   * Where to portal the view. Defaults to the end of `<body>`, which is
+   * right for an app that sets its StyleX theme on `:root`. An app that
+   * scopes the theme to a subtree has to point this at an element inside it,
+   * or the view renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: Element;
+  /**
+   * What is searched, for a screen reader. It names both the view and its
+   * input, and is read rather than shown; `placeholder` is what is seen.
+   */
+  label: string;
+  /** The supporting text in the empty input, which is what a person reads. */
+  placeholder?: string;
+  /** A function may compute the style from the view's render state. */
+  style?: StyleOrFunction<PopoverRenderProps>;
+} & Omit<AutocompleteProps$1<T>, 'children'>;
+type SearchViewProps = Omit<DialogTriggerProps, 'children'> & {
+  /**
+   * The Button or IconButton that opens the view, and `SearchView.Content`.
+   */
+  children?: ReactNode;
+};
+/**
+ * The view a search opens into: full screen on a compact window, docked
+ * under what opened it on a wider one. Open state is React Aria's: pass
+ * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep
+ * its own.
+ *
+ * ```tsx
+ * <SearchView>
+ *   <IconButton aria-label="Search"><SearchIcon /></IconButton>
+ *   <SearchView.Content label="Search" placeholder="Search">
+ *     <ListBox aria-label="Results">…</ListBox>
+ *   </SearchView.Content>
+ * </SearchView>
+ * ```
+ *
+ * A Button or IconButton placed directly inside opens the view;
+ * `SearchView.Content` is the view itself.
+ */
+declare function SearchView({ children, ...props }: SearchViewProps): import("react").JSX.Element;
+declare namespace SearchView {
+  var Content: typeof SearchViewContent;
+}
+/**
+ * The view: the header with its back button, input and clear button, and
+ * the results under it, inside React Aria's Autocomplete, so typing narrows
+ * them. Its value is Autocomplete's: pass `inputValue` with `onInputChange`
+ * to control what has been typed, or `defaultInputValue` to let it keep its
+ * own.
+ *
+ * The call site's `className` and `style` land on the view's surface, and
+ * its `ref` too.
+ */
+declare function SearchViewContent<T extends object = object>({ backLabel, children, className, clearLabel, container, label, placeholder, ref, style, ...props }: RefAttributes<HTMLElement> & SearchViewContentProps<T>): import("react").JSX.Element;
+//#endregion
+export { SearchViewContent, type SearchViewContentProps, type SearchViewProps, SearchView as default };
+//# sourceMappingURL=index.d.ts.map