@kanso-labs/kanso-ui 0.35.0 → 0.37.0

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","ListLoadMoreProps","Omit","label","ListProps","T","className","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","t4","props","undefined","container","t5","ListItem","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section","_c","props","RACGridList","stylex.props","RACGridListItem","RACGridListLoadMoreItem","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.\nconst SelectLabelContext = createContext('Select');\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 = 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};\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, 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): 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> & RefAttributes<HTMLDivElement>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), 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  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 * 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(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\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(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 = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\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.d.ts

@@ -25,7 +25,8 @@ type ListBoxLoadMoreProps = Omit<ListBoxLoadMoreItemProps, 'children'> & {
   /**
    * What the row says while it is loading. Read by a screen reader; the ring
    * itself carries no text.
-   * @default 'Loading more'
+   * Left out, it is the word for it in the I18nProvider's locale — "Loading
+   * more" in English.
    */
   label?: string;
 };
@@ -86,5 +87,5 @@ declare function ListBoxLoadMore({ label, ...props }: ListBoxLoadMoreProps): imp
  */
 declare function ListBoxSection$1<T extends object = object>({ children, header, ...props }: ListBoxSectionProps$1<T>): import("react").JSX.Element;
 //#endregion
-export { type ListBoxItemProps$1 as ListBoxItemProps, type ListBoxLoadMoreProps, type ListBoxProps$1 as ListBoxProps, type ListBoxSectionProps$1 as ListBoxSectionProps, ListBox$1 as default };
+export { ListBoxItem$1 as ListBoxItem, type ListBoxItemProps$1 as ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps$1 as ListBoxProps, ListBoxSection$1 as ListBoxSection, type ListBoxSectionProps$1 as ListBoxSectionProps, ListBox$1 as default };
 //# sourceMappingURL=index.d.ts.map

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];
@@ -132,11 +132,11 @@ function ListBoxLoadMore(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { label: t3, ...props$3 } = t0;
-		label = t3 === void 0 ? "Loading more" : t3;
+		const { label: t3, ...props$2 } = t0;
+		label = t3;
 		T0 = ListBoxLoadMoreItem;
-		t1 = props$3;
-		t2 = mergeStyles(props(collectionStyles.loading), props$3);
+		t1 = props$2;
+		t2 = mergeStyles(props(collectionStyles.loading), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -184,12 +184,12 @@ function ListBoxSection$1(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, header: t4, ...props$2 } = t0;
+		const { children: t3, header: t4, ...props$1 } = t0;
 		children = t3;
 		header = t4;
 		T0 = ListBoxSection;
-		t1 = props$2;
-		t2 = mergeStyles(props(collectionStyles.section), props$2);
+		t1 = props$1;
+		t2 = mergeStyles(props(collectionStyles.section), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
@@ -232,6 +232,6 @@ ListBox$1.Item = ListBoxItem$1;
 ListBox$1.LoadMore = ListBoxLoadMore;
 ListBox$1.Section = ListBoxSection$1;
 //#endregion
-export { ListBox$1 as default };
+export { ListBoxItem$1 as ListBoxItem, ListBoxLoadMore, ListBoxSection$1 as ListBoxSection, ListBox$1 as default };
 
 //# sourceMappingURL=index.js.map

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","undefined","loading","section","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   * @default 'Loading more'\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 = 'Loading more',\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 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/list-item/index.js

@@ -83,7 +83,7 @@ function ListItem(t0) {
 	});
 	const t6 = "button";
 	const t7 = ripple.handlers;
-	const t8 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props$1);
+	const t8 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, rowStyles.interactiveLayers, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props$1);
 	let t9;
 	if ($[16] !== content || $[17] !== forwarded || $[18] !== isDisabled || $[19] !== props$1 || $[20] !== ripple.handlers || $[21] !== ripple.surface || $[22] !== t8) {
 		t9 = /* @__PURE__ */ jsxs("button", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","stylex","useRipple","refCallback","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ref","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","forwarded","t5","content","handlers","base","list","disabled","t6","t7","t8","t9","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { refCallback } from '../../render/ref';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  ref,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n\n  // A presenting row is a <div> and an interactive one a <button>, so the\n  // ref is typed as either and handed to each as the callback both accept —\n  // see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} ref={forwarded} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} ref={forwarded} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","stylex","useRipple","refCallback","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ref","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","forwarded","t5","content","handlers","base","list","disabled","t6","t7","t8","interactiveLayers","t9","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { refCallback } from '../../render/ref';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  ref,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n\n  // A presenting row is a <div> and an interactive one a <button>, so the\n  // ref is typed as either and handed to each as the callback both accept —\n  // see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} ref={forwarded} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} ref={forwarded} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, rowStyles.interactiveLayers, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":"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"}

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

@@ -73,7 +73,8 @@ type MenuLoadMoreProps = Omit<MenuLoadMoreItemProps, 'children'> & {
   /**
    * What the row says while it is loading. Read by a screen reader; the ring
    * itself carries no text.
-   * @default 'Loading more'
+   * Left out, it is the word for it in the I18nProvider's locale — "Loading
+   * more" in English.
    */
   label?: string;
 };
@@ -179,5 +180,5 @@ declare function MenuSeparator(props: MenuSeparatorProps): import("react").JSX.E
  */
 declare function MenuSubmenu(props: MenuSubmenuProps): import("react").JSX.Element;
 //#endregion
-export { type MenuAlign, type MenuContentProps, type MenuItemProps$1 as MenuItemProps, type MenuLoadMoreProps, type MenuProps$1 as MenuProps, type MenuSectionProps$1 as MenuSectionProps, type MenuSeparatorProps, type MenuSide, type MenuSubmenuProps, Menu$1 as default };
+export { type MenuAlign, MenuContent, type MenuContentProps, MenuItem$1 as MenuItem, type MenuItemProps$1 as MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps$1 as MenuProps, MenuSection$1 as MenuSection, type MenuSectionProps$1 as MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Menu$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/menu/index.js

@@ -266,7 +266,7 @@ function MenuLoadMore(t0) {
 	let t2;
 	if ($[0] !== t0) {
 		const { label: t3, ...props } = t0;
-		label = t3 === void 0 ? "Loading more" : t3;
+		label = t3;
 		T0 = MenuLoadMoreItem;
 		t1 = props;
 		t2 = mergeStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj" }, props);
@@ -405,6 +405,6 @@ Menu$1.Section = MenuSection$1;
 Menu$1.Separator = MenuSeparator;
 Menu$1.Submenu = MenuSubmenu;
 //#endregion
-export { Menu$1 as default };
+export { MenuContent, MenuItem$1 as MenuItem, MenuLoadMore, MenuSection$1 as MenuSection, MenuSeparator, MenuSubmenu, Menu$1 as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","undefined","t2","surfaceStyles","t3","t4","t5","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item'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, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the end of `<body>`, which is right\n   * for an app that sets its StyleX theme on `:root`. An app that scopes the\n   * theme to a subtree has to point this at an element inside it, or the menu\n   * renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, '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};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items 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};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item 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// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\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// item'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 item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  ref,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // The surface, where the call site's class and style land, rather than\n  // the menu inside it, which takes the rest of the props.\n  ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<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 <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label = 'Loading more',\n  ...props\n}: MenuLoadMoreProps) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore label={label} size=\"20px\" />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","undefined","t2","surfaceStyles","t3","t4","t5","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item'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, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the end of `<body>`, which is right\n   * for an app that sets its StyleX theme on `:root`. An app that scopes the\n   * theme to a subtree has to point this at an element inside it, or the menu\n   * renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, '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};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items 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};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item 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// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\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// item'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 item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  ref,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // The surface, where the call site's class and style land, rather than\n  // the menu inside it, which takes the rest of the props.\n  ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<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 <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label,\n  ...props\n}: MenuLoadMoreProps) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore label={label} size=\"20px\" />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}

package/dist/components/navigation-bar/index.d.ts

@@ -0,0 +1,50 @@
+import { RenderComponentProps } from "../../render/useRender.js";
+import { NavigationItemProps } from "../../navigation/index.js";
+import { RefAttributes } from "react";
+//#region src/components/navigation-bar/index.d.ts
+type NavigationBarProps = RenderComponentProps<'nav'> & {
+  /**
+   * The route of the current destination, matched against each
+   * destination's `href`. The match carries `aria-current="page"` and the
+   * active indicator.
+   */
+  selectedRoute?: string;
+};
+/**
+ * The bar of three to five top-level destinations a compact window keeps at
+ * its bottom edge. Each destination is a link, so it routes through React
+ * Aria's `RouterProvider` when the app has one.
+ *
+ * ```tsx
+ * <NavigationBar aria-label="Label" selectedRoute="/first">
+ *   <NavigationBar.Item href="/first" icon={<FirstIcon />}>
+ *     First item
+ *   </NavigationBar.Item>
+ *   <NavigationBar.Item href="/second" icon={<SecondIcon />}>
+ *     Second item
+ *   </NavigationBar.Item>
+ *   <NavigationBar.Item href="/third" icon={<ThirdIcon />}>
+ *     Third item
+ *   </NavigationBar.Item>
+ * </NavigationBar>
+ * ```
+ *
+ * The call site's `className` and `style` land on the `<nav>`.
+ */
+declare function NavigationBar({ render, selectedRoute, ...props }: NavigationBarProps): import("react").JSX.Element;
+declare namespace NavigationBar {
+  var Item: typeof NavigationBarItem;
+}
+/**
+ * One destination of a navigation bar — an icon, a label and, when it is the
+ * current one, the active indicator. See `NavigationBar`.
+ *
+ * Defined here rather than re-exported from `src/navigation`: a re-export
+ * let the build hand the package entry that module directly, past this
+ * module's client directive, and a server component importing it got the
+ * component itself rather than a reference to a client one.
+ */
+declare function NavigationBarItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+//#endregion
+export { NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationBar as default };
+//# sourceMappingURL=index.d.ts.map