@kanso-labs/kanso-ui 0.40.4 → 0.40.6

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","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> & RefAttributes<HTMLDivElement>) {\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 & RefAttributes<HTMLDivElement>) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\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> & RefAttributes<HTMLElement>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport { ListBoxItem, ListBoxLoadMore, ListBoxSection };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionEmpty","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","renderEmptyState","header","emptyState","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 { CollectionEmpty, 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> = {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /**\n   * What the list shows when nothing is in it — after a search that matched\n   * nothing, usually. Left out, it is a muted row saying \"No results\" in the\n   * I18nProvider's locale, which an `Autocomplete` around the list also\n   * announces. One of the call site's own replaces the announcement as well\n   * as the row, so what it says to a screen reader is the call site's too.\n   */\n  renderEmptyState?: RACListBoxProps<T>['renderEmptyState'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n} & Omit<RACListBoxProps<T>, 'className' | 'renderEmptyState' | 'style'>;\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// The default empty state, at module scope so every list hands React Aria\n// the same function.\nfunction emptyState() {\n  return <CollectionEmpty variant=\"list\" />;\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 *\n * A list with nothing in it shows a muted \"No results\" row in place of its\n * options, which is what a search that matches nothing leaves; pass\n * `renderEmptyState` to draw something else.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACListBox renderEmptyState={emptyState} {...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> & RefAttributes<HTMLDivElement>) {\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 & RefAttributes<HTMLDivElement>) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\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> & RefAttributes<HTMLElement>) {\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":";;;;;;;;;;;;AAgHA,SAAS8C,aAAa;CACpB,OAAO,oBAAC,iBAAD,EAAiB,SAAQ,OAAM,CAAA;AACxC;AAYA,SAASC,YAAYd,UAAqBG,SAAoBC,UAAqBE,YAAuBC,UAAqBQ,QAAmB;CAChJ,QAAQC,UAAkC,qBAAA,UAAA,EAAA,UAAA,CACtC,oBAAC,YAAD;EAAY,YAAYA,MAAMC;EAAY,YAAYD,MAAME;EAAqBf;EAAmBC;EAAsBE;EAAsBC;EAC7IP;CACS,CAAA,GACXgB,MAAMC,aAAa,OAAOF,MAC7B,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;AAiCA,SAAAjC,UAAAqC,OAAA;CAAA,MAAAC,IAAApD,EAAA,CAAA;CAAA,IAAAqD;CAAA,IAAAD,EAAA,OAAAD,OAAA;EACkEE,KAAAvB,oBAAoBL,kBAAkB0B,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAD,SAAAC,EAAA,OAAAC,IAAA;EAArGC,KAAA,oBAACwB,SAAD;GAA8BjC,kBAAAA;GAAU,GAAMM;GAAK,GAAME;EAA4C,CAAA;EAAID,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAAzGE;AAAyG;;;;;;AAQlH,SAAAtC,cAAAqC,IAAA;CAAA,MAAAD,IAAApD,EAAA,EAAA;CAAgD,MAAA,EAAAgC,UAAAG,SAAAoB,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAvB,UAAAE,YAAAsB,WAAArB,UAAA,GAAAY,UAAAE;CAaM,IAAAC;CAAA,IAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAI,mBAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,kBAAAN,EAAA,OAAAO,aAAA;EAELL,KAAA;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAM/C;EAACP,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAND,MAAAL,SAAenB,UAA0B,MAAM0B,IAM5C,IAAI;CACC,MAAAO,KAAA5C;CAAc,IAAA6C;CAAA,IAAAV,EAAA,OAAApB,YAAAoB,EAAA,OAAAQ,WAAA;EAAYE,KAAAF,aAAajC,OAAOK,QAAQ;EAACoB,EAAA,KAAApB;EAAAoB,EAAA,KAAAQ;EAAAR,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAM,MAAAW,KAAAhB,OAAMiB;CAA0B,MAAAC,KAAAnC,oBAAoBJ,cAAcY,YAAYF,QAAQ,GAAGe,KAAK;CAAC,IAAAe;CAAA,IAAAd,EAAA,OAAApB,YAAAoB,EAAA,QAAAjB,WAAAiB,EAAA,QAAAhB,YAAAgB,EAAA,QAAAL,OAAAoB,WAAAf,EAAA,QAAAd,cAAAc,EAAA,QAAAb,UAAA;EAC/J2B,KAAApB,YAAYd,UAAUG,SAASC,UAAUE,YAAYC,UAAUQ,OAAMoB,OAAQ;EAACf,EAAA,KAAApB;EAAAoB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAhB;EAAAgB,EAAA,MAAAL,OAAAoB;EAAAf,EAAA,MAAAd;EAAAc,EAAA,MAAAb;EAAAa,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAS,MAAAT,EAAA,QAAAD,SAAAC,EAAA,QAAAL,OAAAiB,YAAAZ,EAAA,QAAAU,MAAAV,EAAA,QAAAa,MAAAb,EAAA,QAAAc,IAAA;EAD5EE,KAAA,oBAAC,IAAD;GAA2B,WAAAN;GAA6B,GAAMC;GAAe,GAAMZ;GAAK,GAAMc;GAChGC,UAAAA;EADiB,CAAA;EAEHd,EAAA,MAAAS;EAAAT,EAAA,MAAAD;EAAAC,EAAA,MAAAL,OAAAiB;EAAAZ,EAAA,MAAAU;EAAAV,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OAFZgB;AAEY;;;;;;AAQrB,SAAAC,gBAAAhB,IAAA;CAAA,MAAAD,IAAApD,EAAA,EAAA;CAAA,IAAA6D;CAAA,IAAAnB;CAAA,IAAAY;CAAA,IAAAQ;CAAA,IAAAV,EAAA,OAAAC,IAAA;EAAyB,MAAA,EAAAX,OAAAqB,IAAA,GAAAZ,YAAAE;EAAAX,QAAAqB;EAIfF,KAAA1C;EAA2BgC,KAAAA;EAAWW,KAAA/B,YAAYnB,MAAaY,iBAAgB8C,OAAQ,GAAGnB,OAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAS;EAAAT,EAAA,KAAAV;EAAAU,EAAA,KAAAE;EAAAF,EAAA,KAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAAV,QAAAU,EAAA;EAAAE,KAAAF,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAV,OAAA;EACpGqB,KAAA,oBAAC,oBAAD;GAA6B,UAAA;GAAcrB;EAAK,CAAA;EAAIU,EAAA,KAAAV;EAAAU,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,MAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAU,MAAAV,EAAA,QAAAW,IAAA;EADjDE,KAAA,oBAAC,IAAD;GAAuB,GAAKd;GAAK,GAAMW;GAC1CC,UAAAA;EAD0B,CAAA;EAEHX,EAAA,KAAAS;EAAAT,EAAA,KAAAE;EAAAF,EAAA,KAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OAFpBa;AAEoB;;;;;AAO7B,SAAA7C,iBAAAiC,IAAA;CAAA,MAAAD,IAAApD,EAAA,EAAA;CAAA,IAAA6D;CAAA,IAAA7B;CAAA,IAAAY;CAAA,IAAAU;CAAA,IAAAQ;CAAA,IAAAV,EAAA,OAAAC,IAAA;EAAmD,MAAA,EAAArB,UAAA+B,IAAAnB,QAAAqB,IAAA,GAAAd,YAAAE;EAAArB,WAAA+B;EAAAnB,SAAAqB;EAKzCJ,KAAAxC;EAAsB8B,KAAAA;EAAWW,KAAA/B,YAAYnB,MAAaY,iBAAgB+C,OAAQ,GAAGpB,OAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAS;EAAAT,EAAA,KAAApB;EAAAoB,EAAA,KAAAR;EAAAQ,EAAA,KAAAE;EAAAF,EAAA,KAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAApB,WAAAoB,EAAA;EAAAR,SAAAQ,EAAA;EAAAE,KAAAF,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAR,QAAA;EAC9FmB,KAAAnB,WAAW4B,KAAAA,IAAX,OAA8B,oBAAC,QAAD;GAAO,GAAK5D,MAAaY,iBAAgBoB,MAAO;GAAIA,UAAAA;EAA7C,CAAA;EAA6DQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,MAAAT,EAAA,OAAApB,YAAAoB,EAAA,QAAAE,MAAAF,EAAA,QAAAU,MAAAV,EAAA,QAAAW,IAAA;EADhGE,KAAA,qBAAC,IAAD;GAAkB,GAAKd;GAAK,GAAMW;GAAlC,UAAA,CACFC,IACA/B,QAFoB;;EAGHoB,EAAA,KAAAS;EAAAT,EAAA,KAAApB;EAAAoB,EAAA,MAAAE;EAAAF,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OAHfa;AAGe;AAExBnD,UAAQ2D,OAAOzD;AACfF,UAAQ4D,WAAWL;AACnBvD,UAAQ6D,UAAUvD"}

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

@@ -3,8 +3,8 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { hasContent } from "../../render/content.js";
 import { refCallback } from "../../render/ref.js";
 import { mergeStyles } from "../../styles/merge.js";
-import { useRipple } from "../../hooks/useRipple.js";
 import { rowStyles } from "../../row/styles.js";
+import { useRipple } from "../../hooks/useRipple.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -26,6 +26,14 @@ type MenuContentProps<T extends object = object> = {
    * renders outside and keeps the page's tokens.
    */
   container?: Element;
+  /**
+   * What the menu shows when nothing is in it — after a search that matched
+   * nothing, usually. Left out, it is a muted row saying "No results" in the
+   * I18nProvider's locale, which the surface also announces, so the menu
+   * keeps a row's height rather than shrinking to its search bar. One of the
+   * call site's own replaces the announcement as well as the row.
+   */
+  renderEmptyState?: MenuProps<T>['renderEmptyState'];
   /**
    * Content drawn on the surface above the items — a search bar that filters
    * them, usually. It goes here rather than among the children because a
@@ -53,7 +61,7 @@ type MenuContentProps<T extends object = object> = {
   sideOffset?: number;
   /** Lands on the surface, as `className` does. */
   style?: StyleOrFunction<PopoverRenderProps>;
-} & Omit<MenuProps<T>, 'className' | 'style'>;
+} & Omit<MenuProps<T>, 'className' | 'renderEmptyState' | 'style'>;
 type MenuItemProps$1<T extends object = object> = {
   /** The item's label — what it does. */
   children?: ReactNode;
@@ -154,6 +162,11 @@ declare namespace Menu$1 {
  * below the trigger for a menu, at the item's inline end for a submenu — and
  * a prop set here replaces it, so a default written here opened every
  * submenu below its item, over the rest of the menu it came from.
+ *
+ * A menu with nothing in it shows a muted "No results" row in place of its
+ * items, and says so through a status on the surface, which is what a search
+ * that matches nothing leaves; pass `renderEmptyState` to draw something
+ * else.
  */
 declare function MenuContent<T extends object = object>({ align, alignOffset, className, container, ref, search, side, sideOffset, style, ...props }: MenuContentProps<T> & RefAttributes<HTMLElement>): import("react").JSX.Element;
 /**

package/dist/components/menu/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { rowStyles } from "../../row/styles.js";
+import { CollectionEmpty, CollectionLoadMore, CollectionStatus } from "../../collection/index.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { textOf } from "../../collection/text.js";
 import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
-import { CollectionLoadMore } from "../../collection/index.js";
-import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
 import Separator$1 from "../separator/index.js";
 import { c } from "react/compiler-runtime";
@@ -23,6 +23,9 @@ const styles = { content: {
 	k8WAf4: "x1cmllll",
 	$$css: true
 } };
+function emptyState() {
+	return /* @__PURE__ */ jsx(CollectionEmpty, { variant: "menu" });
+}
 function itemContent(children, leading, shortcut, trailing, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
@@ -95,9 +98,14 @@ function Menu$1(t0) {
 * below the trigger for a menu, at the item's inline end for a submenu — and
 * a prop set here replaces it, so a default written here opened every
 * submenu below its item, over the rest of the menu it came from.
+*
+* A menu with nothing in it shows a muted "No results" row in place of its
+* items, and says so through a status on the surface, which is what a search
+* that matches nothing leaves; pass `renderEmptyState` to draw something
+* else.
 */
 function MenuContent(t0) {
-	const $ = c(30);
+	const $ = c(32);
 	let align;
 	let alignOffset;
 	let className;
@@ -159,6 +167,7 @@ function MenuContent(t0) {
 	let t4;
 	if ($[19] !== props) {
 		t4 = /* @__PURE__ */ jsx(Menu, {
+			renderEmptyState: emptyState,
 			...props,
 			className: "x9f619 x78zum5 xdt5ytf x1t137rt"
 		});
@@ -166,27 +175,33 @@ function MenuContent(t0) {
 		$[20] = t4;
 	} else t4 = $[20];
 	let t5;
-	if ($[21] !== alignOffset || $[22] !== container || $[23] !== ref || $[24] !== sideOffset || $[25] !== t1 || $[26] !== t2 || $[27] !== t3 || $[28] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Popover, {
+	if ($[21] !== t3 || $[22] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(CollectionStatus, { children: [t3, t4] });
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	let t6;
+	if ($[24] !== alignOffset || $[25] !== container || $[26] !== ref || $[27] !== sideOffset || $[28] !== t1 || $[29] !== t2 || $[30] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Popover, {
 			crossOffset: alignOffset,
 			offset: sideOffset,
 			placement: t1,
 			ref,
 			UNSTABLE_portalContainer: container,
 			...t2,
-			children: [t3, t4]
+			children: t5
 		});
-		$[21] = alignOffset;
-		$[22] = container;
-		$[23] = ref;
-		$[24] = sideOffset;
-		$[25] = t1;
-		$[26] = t2;
-		$[27] = t3;
-		$[28] = t4;
-		$[29] = t5;
-	} else t5 = $[29];
-	return t5;
+		$[24] = alignOffset;
+		$[25] = container;
+		$[26] = ref;
+		$[27] = sideOffset;
+		$[28] = t1;
+		$[29] = t2;
+		$[30] = t5;
+		$[31] = t6;
+	} else t6 = $[31];
+	return t6;
 }
 const SEARCH_CONTROL = "input, textarea, [contenteditable=\"true\"]";
 /**

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","useContext","useEffect","useRef","AutocompleteStateContext","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","SEARCH_CONTROL","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","t6","MenuLoadMore","MenuSeparator","MenuSubmenu","SearchSlot","autocomplete","latest","current","Symbol","for","querySelector","focus","setInputValue","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 { useContext, useEffect, useRef } from 'react';\nimport { AutocompleteStateContext, 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 container of the `ThemeScope`\n   * around it, which keeps the menu on that scope's tokens, or to the end of\n   * `<body>` where there is none. A subtree themed through the `themeScope`\n   * class has no container of its own, so point this inside it, or the menu\n   * renders outside and keeps the page's tokens.\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. The bar takes focus as the\n   * menu opens, however it was opened, so typing filters straight away,\n   * and its query is cleared as the menu closes, so a reopened menu shows\n   * every item.\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. A label longer than the surface's 280dp still wraps, and\n// breaks inside a word that is wider than that, rather than running out of\n// the surface and under the shortcut — the shared row's rule, which nothing\n// here truncates.\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 : <SearchSlot>{search}</SearchSlot>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n// What a press on the search slot focuses: its field's own control.\nconst SEARCH_CONTROL = 'input, textarea, [contenteditable=\"true\"]';\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> & RefAttributes<HTMLDivElement>) {\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 & RefAttributes<HTMLDivElement>) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore diameter=\"20px\" label={label} />\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> & RefAttributes<HTMLElement>) {\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/**\n * The search bar above a menu's items, mounted only while the menu is open.\n *\n * Its field takes focus as it mounts. React Aria's popover otherwise took\n * focus itself whenever a pointer opened the menu, so typing went nowhere\n * and only a keyboard's Enter happened to land in the field. Mounted before\n * the items, so the popover finds focus already inside it and leaves it.\n *\n * The query is cleared as it unmounts. The `Autocomplete` that filters the\n * items wraps this whole part and outlives the popover, so its query did\n * too: a menu filtered, used and reopened came back filtered.\n */\nfunction SearchSlot({\n  children\n}: {\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const autocomplete = useContext(AutocompleteStateContext);\n  // The latest state, for the cleanup below to clear: the state object is a\n  // new one on every render, and the effect that mounts the bar runs once.\n  const latest = useRef(autocomplete);\n  useEffect(() => {\n    latest.current = autocomplete;\n  });\n  useEffect(() => {\n    ref.current?.querySelector<HTMLElement>(SEARCH_CONTROL)?.focus();\n    return () => {\n      latest.current?.setInputValue('');\n    };\n  }, []);\n  return <div ref={ref} className=\"x9f619 xqf7pud xn60lsn\">\n      {children}\n    </div>;\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 {...{\n      0: {\n        className: \"x1w5n3ug\"\n      },\n      1: {\n        className: \"x1heor9g\"\n      }\n    }[!!state.isDisabled << 0]}>\n          {shortcut}\n        </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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"}
+{"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","useContext","useEffect","useRef","AutocompleteStateContext","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionEmpty","CollectionLoadMore","CollectionStatus","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","renderEmptyState","T","search","side","MenuSide","sideOffset","style","Omit","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","emptyState","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","t6","SEARCH_CONTROL","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","SearchSlot","autocomplete","latest","current","Symbol","for","querySelector","focus","setInputValue","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 { useContext, useEffect, useRef } from 'react';\nimport { AutocompleteStateContext, 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 { CollectionEmpty, CollectionLoadMore, CollectionStatus } 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 container of the `ThemeScope`\n   * around it, which keeps the menu on that scope's tokens, or to the end of\n   * `<body>` where there is none. A subtree themed through the `themeScope`\n   * class has no container of its own, so point this inside it, or the menu\n   * renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * What the menu shows when nothing is in it — after a search that matched\n   * nothing, usually. Left out, it is a muted row saying \"No results\" in the\n   * I18nProvider's locale, which the surface also announces, so the menu\n   * keeps a row's height rather than shrinking to its search bar. One of the\n   * call site's own replaces the announcement as well as the row.\n   */\n  renderEmptyState?: RACMenuProps<T>['renderEmptyState'];\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. The bar takes focus as the\n   * menu opens, however it was opened, so typing filters straight away,\n   * and its query is cleared as the menu closes, so a reopened menu shows\n   * every item.\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' | 'renderEmptyState' | '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// The default empty state, at module scope so every menu hands React Aria\n// the same function.\nfunction emptyState() {\n  return <CollectionEmpty variant=\"menu\" />;\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. A label longer than the surface's 280dp still wraps, and\n// breaks inside a word that is wider than that, rather than running out of\n// the surface and under the shortcut — the shared row's rule, which nothing\n// here truncates.\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 *\n * A menu with nothing in it shows a muted \"No results\" row in place of its\n * items, and says so through a status on the surface, which is what a search\n * that matches nothing leaves; pass `renderEmptyState` to draw something\n * else.\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      <CollectionStatus>\n        {search === undefined ? null : <SearchSlot>{search}</SearchSlot>}\n        <RACMenu<T> renderEmptyState={emptyState} {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n      </CollectionStatus>\n    </RACPopover>;\n}\n\n// What a press on the search slot focuses: its field's own control.\nconst SEARCH_CONTROL = 'input, textarea, [contenteditable=\"true\"]';\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> & RefAttributes<HTMLDivElement>) {\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 & RefAttributes<HTMLDivElement>) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore diameter=\"20px\" label={label} />\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> & RefAttributes<HTMLElement>) {\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/**\n * The search bar above a menu's items, mounted only while the menu is open.\n *\n * Its field takes focus as it mounts. React Aria's popover otherwise took\n * focus itself whenever a pointer opened the menu, so typing went nowhere\n * and only a keyboard's Enter happened to land in the field. Mounted before\n * the items, so the popover finds focus already inside it and leaves it.\n *\n * The query is cleared as it unmounts. The `Autocomplete` that filters the\n * items wraps this whole part and outlives the popover, so its query did\n * too: a menu filtered, used and reopened came back filtered.\n */\nfunction SearchSlot({\n  children\n}: {\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const autocomplete = useContext(AutocompleteStateContext);\n  // The latest state, for the cleanup below to clear: the state object is a\n  // new one on every render, and the effect that mounts the bar runs once.\n  const latest = useRef(autocomplete);\n  useEffect(() => {\n    latest.current = autocomplete;\n  });\n  useEffect(() => {\n    ref.current?.querySelector<HTMLElement>(SEARCH_CONTROL)?.focus();\n    return () => {\n      latest.current?.setInputValue('');\n    };\n  }, []);\n  return <div ref={ref} className=\"x9f619 xqf7pud xn60lsn\">\n      {children}\n    </div>;\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 {...{\n      0: {\n        className: \"x1w5n3ug\"\n      },\n      1: {\n        className: \"x1heor9g\"\n      }\n    }[!!state.isDisabled << 0]}>\n          {shortcut}\n        </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-tree/index.js

@@ -1,11 +1,11 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { rowStyles } from "../../row/styles.js";
+import { collectionStyles } from "../../collection/styles.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { rowStyles } from "../../row/styles.js";
-import { collectionStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/radio-group/index.d.ts

@@ -29,6 +29,10 @@ type RadioProps = Omit<RadioFieldProps, 'children'> & {
   /**
    * The label, beside the button. A button that a row labels some other way
    * leaves it out and passes `aria-label` instead.
+   *
+   * A link or a button in it acts on its own, as in a native label, and
+   * leaves the selection as it was. A press anywhere else in the label
+   * selects this option.
    */
   children?: ReactNode;
   /** A hint under the label, read with the button. */

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

@@ -3,11 +3,11 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { groupStyles } from "../../field/styles.js";
+import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { controlStyles } from "../../control/styles.js";
 import { ControlDescription, ControlLabel } from "../../control/index.js";
-import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { RadioButton, RadioField, RadioGroup } from "react-aria-components";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlDescription","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","focusLayers","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","isRequired","Radio","t0","$","T0","t1","field","t2","t3","t4","t5","orientation","undefined","validationBehavior","root","t6","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlDescription, ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  selected: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel isRequired={state.isRequired} state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <ControlDescription>{description}</ControlDescription>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":";;;;;;;;;;;;;;AA2CA,MAAMgC,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVF,QAAQ;EACRC,OAAO;CACT;CACAE,cAAc;EACZH,QAAQ;EACRC,OAAO;CACT;CACAG,cAAc;EACZJ,QAAQ;EACRC,OAAO;CACT;AACF;AAIA,MAAMI,cAAc;CAClBC,UAAU;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,YAAY;EACVD,QAAQ;EACRN,OAAO;CACT;AACF;AAGA,MAAMQ,cAAc;CAClBH,UAAU;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,YAAY;EACVD,QAAQ;EACRN,OAAO;CACT;AACF;AACA,MAAMS,gBAAgB;CACpBJ,UAAU;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,YAAY;EACVD,QAAQ;EACRN,OAAO;CACT;AACF;AA0CA,SAASmB,cAAcT,UAAqBU,QAAgB;CAC1D,QAAQC,UAAkC;EACxC,MAAMC,cAAc,CAACD,MAAME,cAAc,CAACF,MAAMG;EAChD,MAAMC,OAAOJ,MAAMK,aAAa,aAAa;EAC7C,MAAMC,SAASN,MAAMO,aAAaP,MAAMQ,aAAaR,MAAMS;EAC3D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,qBAAC,QAAD;GAAM,GAAIR,cAAcF,OAAOW,WAAW,CAAC;GAAG,GAAIzD,MAAaO,cAAcoD,MAAMpC,OAAOC,SAASuB,MAAMK,cAAc7B,OAAOM,cAAc,CAACkB,MAAMK,cAAcJ,eAAeK,UAAU9B,OAAOI,YAAYoB,MAAME,cAAc1B,OAAOK,cAAcmB,MAAMG,cAAc3C,cAAcqD,iBAAiBb,MAAME,cAAc1C,cAAcsD,iBAAiBb,eAAeD,MAAMO,aAAaxB,YAAYqB,OAAOH,eAAeD,MAAMS,kBAAkBtB,YAAYiB,OAAOH,eAAeD,MAAMQ,aAAapB,cAAcgB,OAAOJ,MAAMS,kBAAkBzC,MAAM+C,WAAW;GAA3iB,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IACbf,UAAAA,MAAMK,aAAa,oBAAC,QAAD,EAAM,GAAI;KAC9B,GAAG,EACDW,WAAW,6CACb;KACA,GAAG,EACDA,WAAW,8CACb;IACF,EAAE,CAAC,CAAChB,MAAME,cAAc,GAAG,CAAA,IAAM;GAC3B,CAAA,GACLD,cAAcF,OAAOkB,UAAU,IAC5B;EACN,CAAA,GAAA,oBAAC,cAAD;GAAqBjB;GAAQX;EAAuB,CAAA,CACtD,EAAA,CAAA;CACJ;AACF;AAIA,SAAS6B,aAAa1B,OAAeH,UAAqBC,aAAiCC,OAA2B4B,YAAqB;CACzI,QAAQnB,UAAiC,qBAAA,UAAA,EAAA,UAAA;EACrC,oBAAC,YAAD;GAAY,YAAYA,MAAMoB;GAAmBpB;GAAO,SAAQ;GAC7DR,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDwB,WAAW,kBACb;IACA,GAAG,EACDA,WAAW,oCACb;GACF,EAAE,CAAC,CAACG,cAAc;GACb9B;EACE,CAAA;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ;;;;;;;;;;AAWA,SAAA8B,MAAAC,IAAA;CAAA,MAAAC,IAAA9E,EAAA,EAAA;CAAe,MAAA,EAAA4C,UAAAC,aAAA,GAAAqB,YAAAW;CAKb,MAAAvB,SAAehC,UAA2B;CAClC,MAAAyD,KAAAnE;CAA0B,MAAAoE,KAAAxD,oBAAoBhB,MAAaO,cAAakE,KAAM,GAAGf,OAAK;CAAC,IAAAgB;CAAA,IAAAJ,EAAA,OAAAlC,YAAAkC,EAAA,OAAAxB,QAAA;EAExF4B,KAAA7B,cAAcT,UAAUU,MAAM;EAACwB,EAAA,KAAAlC;EAAAkC,EAAA,KAAAxB;EAAAwB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAI,IAAA;EADlCC,KAAA,oBAAC,aAAD;GAAuB,WAAA;GACpBD,UAAAA;EADS,CAAA;EAEEJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAjC,aAAA;EACduC,KAAA,oBAAC,oBAAD,EAAA,UAAqBvC,YAAF,CAAA;EAAmCiC,EAAA,KAAAjC;EAAAiC,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAC,MAAAD,EAAA,OAAAZ,WAAAY,EAAA,OAAAE,MAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAJnDC,KAAA,qBAAC,IAAD;GAAW,GAAKnB;GAAK,GAAMc;GAA3B,UAAA,CACHG,IAGAC,EAJc;;EAKHN,EAAA,KAAAC;EAAAD,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OALRO;AAKQ;;;;;;;;;;;;AAcjB,SAAA5E,aAAAoE,IAAA;CAAA,MAAAC,IAAA9E,EAAA,EAAA;CAAoB,MAAA,EAAA4C,UAAAC,aAAAC,OAAAC,OAAAuC,aAAAN,IAAA,GAAAd,YAAAW;CAKlB,MAAAS,cAAAN,OAAAO,KAAAA,IAAA,aAAAP;CAGA,MAAAQ,qBAA2BrE,2BAA2B;CAC9C,MAAA4D,KAAArE;CAAa,IAAAwE;CAAA,IAAAJ,EAAA,OAAAhC,OAAA;EAAYoC,KAAAhE,YAAY4B,KAAK;EAACgC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAmF,MAAAK,KAAA3D,oBAAoBhB,MAAaa,YAAgBoE,IAAK,GAAGvB,OAAK;CAC7I,MAAAkB,KAAAE,gBAAgB;CAAY,IAAAD;CAAA,IAAAP,EAAA,OAAAlC,YAAAkC,EAAA,OAAAjC,eAAAiC,EAAA,OAAAhC,SAAAgC,EAAA,OAAA/B,SAAA+B,EAAA,OAAAM,IAAA;EAA9EC,KAAAZ,aAAa1B,OAAOH,UAAUC,aAAaC,OAAOsC,EAA4B;EAACN,EAAA,KAAAlC;EAAAkC,EAAA,KAAAjC;EAAAiC,EAAA,KAAAhC;EAAAgC,EAAA,KAAA/B;EAAA+B,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAC,MAAAD,EAAA,OAAAQ,eAAAR,EAAA,QAAAZ,WAAAY,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,MAAAP,EAAA,QAAAU,oBAAA;EAD7EE,KAAA,oBAAC,IAAD;GAA0B,WAAAR;GAAiCI;GAAiCE;GAAkB,GAAMtB;GAAK,GAAMiB;GACjIE,UAAAA;EADgB,CAAA;EAEHP,EAAA,KAAAC;EAAAD,EAAA,KAAAQ;EAAAR,EAAA,MAAAZ;EAAAY,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAU;EAAAV,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAFXY;AAEW"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlDescription","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","focusLayers","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","isRequired","Radio","t0","$","T0","t1","field","t2","t3","t4","t5","orientation","undefined","validationBehavior","root","t6","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlDescription, ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  selected: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   *\n   * A link or a button in it acts on its own, as in a native label, and\n   * leaves the selection as it was. A press anywhere else in the label\n   * selects this option.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel isRequired={state.isRequired} state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <ControlDescription>{description}</ControlDescription>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}

package/dist/components/range-calendar/index.d.ts

@@ -1,18 +1,24 @@
 import { RefAttributes } from "react";
 import { DateValue, RangeCalendarProps } from "react-aria-components";
 //#region src/components/range-calendar/index.d.ts
-type RangeCalendarProps$1<T extends DateValue = DateValue> = Omit<RangeCalendarProps<T>, 'children' | 'className' | 'style'> & {
+type RangeCalendarProps$1<T extends DateValue = DateValue> = {
   /** A function may compute the class from the calendar's render state. */
   className?: RangeCalendarProps<T>['className'];
   /**
    * Whether the header draws the month and the year as menu buttons, each
-   * opening a list of them in the grid's place, as `Calendar`'s does.
+   * opening a list of them in the grid's place, as `Calendar`'s does. The
+   * year list runs a century either side of the year shown, or to
+   * `minValue` and `maxValue` where they are closer.
+   *
+   * For one visible month. With `visibleDuration` of more than one, the
+   * header is the plain one, whose heading names every month shown — the
+   * menus name only the first, which would leave the others unlabelled.
    * @default false
    */
   showMonthYearMenus?: boolean;
   /** A function may compute the style from the calendar's render state. */
   style?: RangeCalendarProps<T>['style'];
-};
+} & Omit<RangeCalendarProps<T>, 'children' | 'className' | 'style'>;
 /**
  * A calendar for picking a range of dates. The value is React Aria's: pass
  * `value` with `onChange` to control it, or `defaultValue` to let it keep its