@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","ripple","state","isDisabled","isSelected","props","$","_c","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","t2","t3","handlers","t4","t5","surface","t6","ListBoxLoadMore","undefined","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled option, so nothing has to outrank them.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, ripple.surface)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","ripple","state","isDisabled","isSelected","props","$","_c","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","t2","t3","handlers","t4","t5","surface","t6","ListBoxLoadMore","undefined","loading","section","Item","LoadMore","Section","ListBox","_c","props","stylex.props","RACListBox","ListBoxItem","RACListBoxItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled option, so nothing has to outrank them.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, ripple.surface)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":";;;;;;;;;;;AA6GA,SAASwC,YAAYZ,UAAqBG,SAAoBC,UAAqBE,YAAuBC,UAAqBM,QAAmB;CAChJ,QAAQC,UAAkC,qBAAA,UAAA,EAAA,UAAA,CACtC,oBAAC,YAAD;EAAY,YAAYA,MAAMC;EAAY,YAAYD,MAAME;EAAqBb;EAAmBC;EAAsBE;EAAsBC;EAC7IP;CACS,CAAA,GACXc,MAAMC,aAAa,OAAOF,MAC7B,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;AA6BA,SAAA7B,UAAAiC,SAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EACoCG,KAAAtB,oBAAoBhB,MAAaW,iBAAgB4B,SAAU,GAAGJ,OAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAD,WAAAC,EAAA,OAAAE,IAAA;EAA/FE,KAAA,oBAAC0B,SAAD;GAAW,GAAK/B;GAAK,GAAMG;EAAoE,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAAnGI;AAAmG;;;;;;AAQ5G,SAAApC,cAAAkC,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAgD,MAAA,EAAAnB,UAAAG,SAAAoB,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAvB,UAAAE,YAAAsB,WAAArB,UAAA,GAAAU,UAAAG;CAa1B,IAAAE;CAAA,IAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAE2BL,KAAA;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAM/C;EAACT,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAND,MAAAL,SAAejB,UAA0B,MAAM0B,IAM5C,IAAI;CACC,MAAAO,KAAA1C;CAAc,IAAA2C;CAAA,IAAAZ,EAAA,OAAAlB,YAAAkB,EAAA,OAAAU,WAAA;EAAYE,KAAAF,aAAajC,OAAOK,QAAQ;EAACkB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAU;EAAAV,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAM,MAAAa,KAAAlB,OAAMmB;CAA0B,MAAAC,KAAAnC,oBAAoBJ,cAAcY,YAAYF,QAAQ,GAAGa,KAAK;CAAC,IAAAiB;CAAA,IAAAhB,EAAA,OAAAlB,YAAAkB,EAAA,QAAAf,WAAAe,EAAA,QAAAd,YAAAc,EAAA,QAAAL,OAAAsB,WAAAjB,EAAA,QAAAZ,cAAAY,EAAA,QAAAX,UAAA;EAC/J2B,KAAAtB,YAAYZ,UAAUG,SAASC,UAAUE,YAAYC,UAAUM,OAAMsB,OAAQ;EAACjB,EAAA,KAAAlB;EAAAkB,EAAA,MAAAf;EAAAe,EAAA,MAAAd;EAAAc,EAAA,MAAAL,OAAAsB;EAAAjB,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAW,MAAAX,EAAA,QAAAD,SAAAC,EAAA,QAAAL,OAAAmB,YAAAd,EAAA,QAAAY,MAAAZ,EAAA,QAAAe,MAAAf,EAAA,QAAAgB,IAAA;EAD5EE,KAAA,oBAAC,IAAD;GAA2B,WAAAN;GAA6B,GAAMC;GAAe,GAAMd;GAAK,GAAMgB;GAChGC,UAAAA;EADiB,CAAA;EAEHhB,EAAA,MAAAW;EAAAX,EAAA,MAAAD;EAAAC,EAAA,MAAAL,OAAAmB;EAAAd,EAAA,MAAAY;EAAAZ,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OAFZkB;AAEY;;;;;;AAQrB,SAAAC,gBAAAjB,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAU;CAAA,IAAAnB;CAAA,IAAAY;CAAA,IAAAQ;CAAA,IAAAZ,EAAA,OAAAE,IAAA;EAAyB,MAAA,EAAAV,OAAAqB,IAAA,GAAAd,YAAAG;EACvBV,QAAAqB,OAAAO,KAAAA,IAAA,iBAAAP;EAGQF,KAAAxC;EAA2B4B,KAAAA;EAAWa,KAAA/B,YAAYjB,MAAaW,iBAAgB8C,OAAQ,GAAGtB,OAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAW;EAAAX,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;EAAAJ,EAAA,KAAAY;CAAA,OAAA;EAAAD,KAAAX,EAAA;EAAAR,QAAAQ,EAAA;EAAAI,KAAAJ,EAAA;EAAAY,KAAAZ,EAAA;CAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAR,OAAA;EACpGqB,KAAA,oBAAC,oBAAD;GAA2BrB;GAAY,MAAA;EAAM,CAAA;EAAGQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAW,MAAAX,EAAA,OAAAI,MAAAJ,EAAA,OAAAY,MAAAZ,EAAA,QAAAa,IAAA;EAD7CE,KAAA,oBAAC,IAAD;GAAuB,GAAKhB;GAAK,GAAMa;GAC1CC,UAAAA;EAD0B,CAAA;EAEHb,EAAA,KAAAW;EAAAX,EAAA,KAAAI;EAAAJ,EAAA,KAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFpBe;AAEoB;;;;;AAO7B,SAAA3C,iBAAA8B,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAU;CAAA,IAAA7B;CAAA,IAAAW;CAAA,IAAAW;CAAA,IAAAQ;CAAA,IAAAZ,EAAA,OAAAE,IAAA;EAAmD,MAAA,EAAApB,UAAA+B,IAAApB,QAAAsB,IAAA,GAAAhB,YAAAG;EAAApB,WAAA+B;EAAApB,SAAAsB;EAKzCJ,KAAAtC;EAAsB0B,KAAAA;EAAWa,KAAA/B,YAAYjB,MAAaW,iBAAgB+C,OAAQ,GAAGvB,OAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAW;EAAAX,EAAA,KAAAlB;EAAAkB,EAAA,KAAAP;EAAAO,EAAA,KAAAI;EAAAJ,EAAA,KAAAY;CAAA,OAAA;EAAAD,KAAAX,EAAA;EAAAlB,WAAAkB,EAAA;EAAAP,SAAAO,EAAA;EAAAI,KAAAJ,EAAA;EAAAY,KAAAZ,EAAA;CAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAP,QAAA;EAC9FoB,KAAApB,WAAW2B,KAAAA,IAAX,OAA8B,oBAAC,QAAD;GAAO,GAAKxD,MAAaW,iBAAgBkB,MAAO;GAAIA,UAAAA;EAA7C,CAAA;EAA6DO,EAAA,KAAAP;EAAAO,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAW,MAAAX,EAAA,OAAAlB,YAAAkB,EAAA,QAAAI,MAAAJ,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,IAAA;EADhGE,KAAA,qBAAC,IAAD;GAAkB,GAAKhB;GAAK,GAAMa;GAAlC,UAAA,CACFC,IACA/B,QAFoB;;EAGHkB,EAAA,KAAAW;EAAAX,EAAA,KAAAlB;EAAAkB,EAAA,MAAAI;EAAAJ,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAHfe;AAGe;AAExBjD,UAAQyD,OAAOvD;AACfF,UAAQ0D,WAAWL;AACnBrD,UAAQ2D,UAAUrD"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   *\n   * **Moving focus into the revealed pane comes with flipping this.** The\n   * pane being left is hidden outright, so a keyboard or screen reader inside\n   * it lands on the body and the next Tab starts from the top of the page.\n   * The same reason this prop is controlled is why the move is not made here:\n   * only the call site knows whether a key, a pointer or the history put it\n   * in that state, and what inside the pane to send focus to. Both panes hold\n   * nodes it supplied, so it has something to aim at — a heading given\n   * `tabIndex={-1}`, or a ref it already holds.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n *\n * Below the expanded breakpoint the pane that is not showing is hidden\n * outright, so focus inside it is dropped when `showing` changes. The call\n * site that changed it is what puts focus in the pane it revealed — see the\n * prop.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName","_c"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   *\n   * **Moving focus into the revealed pane comes with flipping this.** The\n   * pane being left is hidden outright, so a keyboard or screen reader inside\n   * it lands on the body and the next Tab starts from the top of the page.\n   * The same reason this prop is controlled is why the move is not made here:\n   * only the call site knows whether a key, a pointer or the history put it\n   * in that state, and what inside the pane to send focus to. Both panes hold\n   * nodes it supplied, so it has something to aim at — a heading given\n   * `tabIndex={-1}`, or a ref it already holds.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n *\n * Below the expanded breakpoint the pane that is not showing is hidden\n * outright, so focus inside it is dropped when `showing` changes. The call\n * site that changed it is what puts focus in the pane it revealed — see the\n * prop.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","content","handlers","base","list","disabled","t5","t6","t7","t8","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmDA,SAAAgB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAX,UAAAC,aAAAW,IAAAV,YAAAW,IAAAV,SAAAW,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAf,UAAAC,YAAAC,UAAA,GAAAc,YAAAX;CAEhB,MAAAR,cAAAW,OAAAS,KAAAA,IAAA,QAAAT;CACA,MAAAV,aAAAW,OAAAQ,KAAAA,IAAA,QAAAR;CAAkB,IAAAS;CAAA,IAAAZ,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EA6BgDG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOlE;EAACT,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAPD,MAAAa,SAAe5B,UAAuBM,eAAA,CAAgBC,YAAYoB,EAOjE;CAWD,MAAAE,cAAoBpB,aAAaiB,KAAAA,IAAb,IAAA,MAAmChB,eAAegB,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAjB,EAAA,OAAAV,YAAAU,EAAA,OAAAR,cAAAQ,EAAA,OAAAP,WAAAO,EAAA,QAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBqB,KAAA,oBAAC,YAAD;GAAwBzB;GAAqBC;GAAmBC;GAAsBC;GAAsBC;GACvHN;EADsB,CAAA;EAEZU,EAAA,KAAAV;EAAAU,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAFf,MAAAkB,UAAgBD;CAQhB,IAAI,CAAC1B,aAAW,OACP,oBAAA,OAAA;EAAoB,iBAAAC,cAAAmB,KAAAA;EAAuB,GAAMD;EAAK,GAAMG,OAAMM;EAAS,GAAM/B,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAON,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;EACpPQ,UAAAA;CACG,CAAA;CAEgC,MAAAK,KAAA;CAAa,MAAAC,KAAAX,OAAMM;CAA0B,MAAAM,KAAArC,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAOlC,UAASI,aAAcwB,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;CAAC,IAAAgB;CAAA,IAAA1B,EAAA,QAAAkB,WAAAlB,EAAA,QAAAR,cAAAQ,EAAA,QAAAU,WAAAV,EAAA,QAAAa,OAAAM,YAAAnB,EAAA,QAAAa,OAAAc,WAAA3B,EAAA,QAAAyB,IAAA;EAAzQC,KAAA,qBAAA,UAAA;GAAkBlC,UAAAA;GAAiB,MAAA+B;GAAQ,GAAKC;GAAe,GAAMd;GAAK,GAAMe;GAAhF,UAAA,CACFP,SACAL,OAAMc,OACA;;EAAA3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAR;EAAAQ,EAAA,MAAAU;EAAAV,EAAA,MAAAa,OAAAM;EAAAnB,EAAA,MAAAa,OAAAc;EAAA3B,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OAHJ0B;AAGI"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","content","handlers","base","list","disabled","t5","t6","t7","t8","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmDA,SAAAgB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAX,UAAAC,aAAAW,IAAAV,YAAAW,IAAAV,SAAAW,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAf,UAAAC,YAAAC,UAAA,GAAAc,YAAAX;CAEhB,MAAAR,cAAAW,OAAAS,KAAAA,IAAA,QAAAT;CACA,MAAAV,aAAAW,OAAAQ,KAAAA,IAAA,QAAAR;CAAkB,IAAAS;CAAA,IAAAZ,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EA6BgDG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOlE;EAACT,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAPD,MAAAa,SAAe5B,UAAuBM,eAAA,CAAgBC,YAAYoB,EAOjE;CAWD,MAAAE,cAAoBpB,aAAaiB,KAAAA,IAAb,IAAA,MAAmChB,eAAegB,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAjB,EAAA,OAAAV,YAAAU,EAAA,OAAAR,cAAAQ,EAAA,OAAAP,WAAAO,EAAA,QAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBqB,KAAA,oBAAC,YAAD;GAAwBzB;GAAqBC;GAAmBC;GAAsBC;GAAsBC;GACvHN;EADsB,CAAA;EAEZU,EAAA,KAAAV;EAAAU,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAFf,MAAAkB,UAAgBD;CAQhB,IAAI,CAAC1B,aAAW,OACP,oBAAA,OAAA;EAAoB,iBAAAC,cAAAmB,KAAAA;EAAuB,GAAMD;EAAK,GAAMG,OAAMM;EAAS,GAAM/B,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAON,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;EACpPQ,UAAAA;CACG,CAAA;CAEgC,MAAAK,KAAA;CAAa,MAAAC,KAAAX,OAAMM;CAA0B,MAAAM,KAAArC,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAOlC,UAASI,aAAcwB,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;CAAC,IAAAgB;CAAA,IAAA1B,EAAA,QAAAkB,WAAAlB,EAAA,QAAAR,cAAAQ,EAAA,QAAAU,WAAAV,EAAA,QAAAa,OAAAM,YAAAnB,EAAA,QAAAa,OAAAc,WAAA3B,EAAA,QAAAyB,IAAA;EAAzQC,KAAA,qBAAA,UAAA;GAAkBlC,UAAAA;GAAiB,MAAA+B;GAAQ,GAAKC;GAAe,GAAMd;GAAK,GAAMe;GAAhF,UAAA,CACFP,SACAL,OAAMc,OACA;;EAAA3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAR;EAAAQ,EAAA,MAAAU;EAAAV,EAAA,MAAAa,OAAAM;EAAAnB,EAAA,MAAAa,OAAAc;EAAA3B,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OAHJ0B;AAGI"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","MeterRenderProps","MeterProps","RACMeterProps","stylex","Meter","RACMeter","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","Omit","className","label","showValue","style","tone","MeterTone","Extract","t0","$","_c","T0","t1","t2","t3","t4","t5","maxValue","t6","minValue","t7","t8","t9","props","undefined","root","meterContent","state","valueText","percentage"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { MeterRenderProps, MeterProps as RACMeterProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Meter as RACMeter } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task: the same three parts at the same 4dp, the same\n// label row above them, and the same motion when the number changes. All of\n// that is `src/indicator`, shared with ProgressIndicator, so what is here is\n// the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. React Aria's `Meter` reports `meter` rather than\n// `progressbar`, and a screen reader says the two differently: one is how\n// full something is, the other how far along something is. That difference\n// is the whole reason both exist, and it is why a meter has no\n// indeterminate state to offer — a measurement whose value is unknown is\n// not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for\n// a task: progress does not become good or bad on its way to done. A\n// measurement does — a disk at 96% and a signal at 96% mean opposite\n// things — so `negative` and `positive` recolour the active indicator and\n// the stop indicator while leaving the track alone. A column of meters then\n// reads as one scale with bars of different colours, rather than as several\n// gauges that happen to sit together. Which tone a value deserves is the\n// call site's to decide: nothing here reads the number and picks one, since\n// where the line falls between good and bad is the measurement's own\n// business.\n//\n// The value is shown by default, where a progress indicator hides it. A\n// meter is the number — a bar with no figure beside it says only \"some\" —\n// and `formatOptions` is what makes that figure read as a percentage, bytes\n// or a plain count, in the page's locale.\n\ntype MeterProps = Omit<RACMeterProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the meter's render state. */\n  className?: RACMeterProps['className'];\n  /**\n   * What is being measured, shown above the line. A screen reader reads it\n   * as the meter's name; a meter whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the meter's render state. */\n  style?: RACMeterProps['style'];\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track\n   * in its secondary container so a column of meters still shares one\n   * track.\n   * @default 'primary'\n   */\n  tone?: MeterTone;\n};\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;\n\n/**\n * How full something is, on a scale it names: disk used, storage left,\n * a rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads. For how far along a task is,\n * reach for ProgressIndicator instead — a meter has no indeterminate state,\n * because a measurement always has a value.\n *\n * The call site's `className` and `style` land on the meter as a whole,\n * which is the element a layout positions.\n */\nfunction Meter({\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  tone = 'primary',\n  ...props\n}: MeterProps) {\n  return <RACMeter maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root), props)}>\n      {meterContent(label, showValue, tone)}\n    </RACMeter>;\n}\n\n// What the meter 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.\nfunction meterContent(label: ReactNode, showValue: boolean, tone: MeterTone) {\n  return (state: MeterRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue ? state.valueText : undefined} />\n      <IndicatorLine percentage={state.percentage} tone={tone} />\n    </>;\n}\nexport type { MeterProps, MeterTone };\nexport default Meter;"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,SAAAK,QAAAe,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAC;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,OAAAc,IAAAC,UAAAC,IAAAC,UAAAC,IAAAjB,WAAAkB,IAAAhB,MAAAiB,IAAA,GAAAC,YAAAf;EAAAN,QAAAc;EAEb,MAAAC,WAAAC,OAAAM,KAAAA,IAAA,MAAAN;EACA,MAAAC,WAAAC,OAAAI,KAAAA,IAAA,IAAAJ;EACAjB,YAAAkB,OAAAG,KAAAA,IAAA,OAAAH;EACAhB,OAAAiB,OAAAE,KAAAA,IAAA,YAAAF;EAGQX,KAAAjB;EAAmBuB,KAAAA;EAAoBE,KAAAA;EAAcI,KAAAA;EAAWR,KAAAhB,oBAAoBP,MAAaM,gBAAe2B,IAAK,GAAGF,OAAK;EAACd,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAJ;CAAA,OAAA;EAAAM,KAAAF,EAAA;EAAAP,QAAAO,EAAA;EAAAN,YAAAM,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAJ,OAAAI,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,SAAAO,EAAA,QAAAN,aAAAM,EAAA,QAAAJ,MAAA;EACjIW,KAAAU,aAAaxB,OAAOC,WAAWE,IAAI;EAACI,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EADlCE,KAAA,oBAAC,IAAD;GAAoBD,UAAAA;GAAoBE,UAAAA;GAAQ,GAAMI;GAAK,GAAMR;GACnEC,UAAAA;EADW,CAAA;EAEHP,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFNS;AAEM;AAOf,SAASQ,aAAaxB,OAAkBC,WAAoBE,MAAiB;CAC3E,QAAQsB,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwBzB;EAAO,OAAOC,YAAYwB,MAAMC,YAAYJ,KAAAA;CAAU,CAAA,GAC9E,oBAAC,eAAD;EAAe,YAAYG,MAAME;EAAkBxB;CAAK,CAAA,CAC1D,EAAA,CAAA;AACJ"}
+{"version":3,"file":"index.js","names":["ReactNode","MeterRenderProps","MeterProps","RACMeterProps","stylex","Meter","RACMeter","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","Omit","className","label","showValue","style","tone","MeterTone","Extract","t0","$","_c","T0","t1","t2","t3","t4","t5","maxValue","t6","minValue","t7","t8","t9","props","undefined","root","meterContent","state","valueText","percentage","Meter","_c","props","RACMeter","stylex.props"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { MeterRenderProps, MeterProps as RACMeterProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Meter as RACMeter } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task: the same three parts at the same 4dp, the same\n// label row above them, and the same motion when the number changes. All of\n// that is `src/indicator`, shared with ProgressIndicator, so what is here is\n// the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. React Aria's `Meter` reports `meter` rather than\n// `progressbar`, and a screen reader says the two differently: one is how\n// full something is, the other how far along something is. That difference\n// is the whole reason both exist, and it is why a meter has no\n// indeterminate state to offer — a measurement whose value is unknown is\n// not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for\n// a task: progress does not become good or bad on its way to done. A\n// measurement does — a disk at 96% and a signal at 96% mean opposite\n// things — so `negative` and `positive` recolour the active indicator and\n// the stop indicator while leaving the track alone. A column of meters then\n// reads as one scale with bars of different colours, rather than as several\n// gauges that happen to sit together. Which tone a value deserves is the\n// call site's to decide: nothing here reads the number and picks one, since\n// where the line falls between good and bad is the measurement's own\n// business.\n//\n// The value is shown by default, where a progress indicator hides it. A\n// meter is the number — a bar with no figure beside it says only \"some\" —\n// and `formatOptions` is what makes that figure read as a percentage, bytes\n// or a plain count, in the page's locale.\n\ntype MeterProps = Omit<RACMeterProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the meter's render state. */\n  className?: RACMeterProps['className'];\n  /**\n   * What is being measured, shown above the line. A screen reader reads it\n   * as the meter's name; a meter whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the meter's render state. */\n  style?: RACMeterProps['style'];\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track\n   * in its secondary container so a column of meters still shares one\n   * track.\n   * @default 'primary'\n   */\n  tone?: MeterTone;\n};\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;\n\n/**\n * How full something is, on a scale it names: disk used, storage left,\n * a rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads. For how far along a task is,\n * reach for ProgressIndicator instead — a meter has no indeterminate state,\n * because a measurement always has a value.\n *\n * The call site's `className` and `style` land on the meter as a whole,\n * which is the element a layout positions.\n */\nfunction Meter({\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  tone = 'primary',\n  ...props\n}: MeterProps) {\n  return <RACMeter maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root), props)}>\n      {meterContent(label, showValue, tone)}\n    </RACMeter>;\n}\n\n// What the meter 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.\nfunction meterContent(label: ReactNode, showValue: boolean, tone: MeterTone) {\n  return (state: MeterRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue ? state.valueText : undefined} />\n      <IndicatorLine percentage={state.percentage} tone={tone} />\n    </>;\n}\nexport type { MeterProps, MeterTone };\nexport default Meter;"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,SAAAK,QAAAe,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAC;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,OAAAc,IAAAC,UAAAC,IAAAC,UAAAC,IAAAjB,WAAAkB,IAAAhB,MAAAiB,IAAA,GAAAC,YAAAf;EAAAN,QAAAc;EAEb,MAAAC,WAAAC,OAAAM,KAAAA,IAAA,MAAAN;EACA,MAAAC,WAAAC,OAAAI,KAAAA,IAAA,IAAAJ;EACAjB,YAAAkB,OAAAG,KAAAA,IAAA,OAAAH;EACAhB,OAAAiB,OAAAE,KAAAA,IAAA,YAAAF;EAGQX,KAAAjB;EAAmBuB,KAAAA;EAAoBE,KAAAA;EAAcI,KAAAA;EAAWR,KAAAhB,oBAAoBP,MAAaM,gBAAe2B,IAAK,GAAGF,OAAK;EAACd,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAJ;CAAA,OAAA;EAAAM,KAAAF,EAAA;EAAAP,QAAAO,EAAA;EAAAN,YAAAM,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAJ,OAAAI,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,SAAAO,EAAA,QAAAN,aAAAM,EAAA,QAAAJ,MAAA;EACjIW,KAAAU,aAAaxB,OAAOC,WAAWE,IAAI;EAACI,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EADlCE,KAAA,oBAAC,IAAD;GAAoBD,UAAAA;GAAoBE,UAAAA;GAAQ,GAAMI;GAAK,GAAMR;GACnEC,UAAAA;EADW,CAAA;EAEHP,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFNS;AAEM;AAOf,SAASQ,aAAaxB,OAAkBC,WAAoBE,MAAiB;CAC3E,QAAQsB,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwBzB;EAAO,OAAOC,YAAYwB,MAAMC,YAAYJ,KAAAA;CAAU,CAAA,GAC9E,oBAAC,eAAD;EAAe,YAAYG,MAAME;EAAkBxB;CAAK,CAAA,CAC1D,EAAA,CAAA;AACJ"}

package/dist/components/navigation-tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","useRipple","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isCurrentAncestor","isCurrent","leadingFor","itemStyles","base","drawer","selectedDrawer","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","$","_c","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { NavigationTreeItemRenderProps, NavigationTreeItemProps as RACNavigationTreeItemProps, NavigationTreeProps as RACNavigationTreeProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NavigationTree as RACNavigationTree, NavigationTreeHeader as RACNavigationTreeHeader, NavigationTreeItem as RACNavigationTreeItem, NavigationTreeItemContent as RACNavigationTreeItemContent, NavigationTreeSection as RACNavigationTreeSection } from 'react-aria-components';\nimport { collectionStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The navigation drawer page's contents: a nested set of links with the\n// current one marked. Each row is the row every list here draws — `src/row`,\n// shared with ListItem, ListBox, List, Tree and Disclosure — under that\n// module's `drawer` variant, which is the page's own 56dp row with a\n// label-large label and a secondary-container pill on the current one.\n//\n// This is Tree's shape over React Aria's navigation primitive, and the\n// difference is what the two are for. A tree selects: rows are chosen and\n// the choice is reported. A navigation tree navigates: each row is a link,\n// and which one is current is decided by matching the route rather than by\n// anything the reader selected. So this takes `selectedRoute` where Tree\n// takes `selectedKeys`, and has no selection at all — React Aria omits every\n// selection prop from it.\n//\n// Three things are this component's own.\n//\n// **A level indents by one caret's width**, exactly as Tree does and for the\n// same reason: React Aria writes the depth on each row as a custom property,\n// and 24dp is the size the drawer page gives its icon, so a level of nesting\n// is as wide as the glyph beside it.\n//\n// **An ancestor of the current row is marked too, and softly.** React Aria\n// reports it, and a drawer whose current row is collapsed out of sight would\n// otherwise show nothing at all. It takes the label's weight rather than the\n// pill, so the trail reads as a trail rather than as a second current row.\n//\n// That weight goes on the label itself, through the row module's\n// `isEmphasized`, and it has to: the row's own `font-weight` never reaches\n// the text, since `RowContent` draws the label in a span stating the\n// label-large role in full, weight included. The pair also has to differ by\n// more than a step — the label's own weight is already the medium one, so a\n// trail set in medium is a trail nobody can see.\n//\n// **The pill's shape is the library's own.** The page gives the active\n// indicator's colour, height and width but keeps its shape behind a token\n// set that does not open to a script — the same gap recorded on the buttons\n// and lists pages. It is drawn as a full pill, which is what the page's own\n// images show and what 56dp of height comes to.\n\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype NavigationTreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype NavigationTreeItemProps<T extends object = object> = NavigationTreeItemText & Omit<RACNavigationTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & {\n  /** The rows nested under this one, as further `NavigationTree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACNavigationTreeItemProps<T>['className'];\n  /** Content before the label: an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACNavigationTreeItemProps<T>['style'];\n  /** A second line under the label, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the label, such as a count. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a row here wraps\n// its label in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string label is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype NavigationTreeItemText = {\n  /** The row's label — where it goes. */\n  label: string;\n  /** What typeahead matches the row on. Defaults to the label. */\n  textValue?: string;\n} | {\n  /** The row's label, as something other than a plain string. */\n  label?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype NavigationTreeProps<T extends object = object> = Omit<RACNavigationTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACNavigationTreeProps<T>['className'];\n  /** A function may compute the style from the tree's render state. */\n  style?: RACNavigationTreeProps<T>['style'];\n};\ntype NavigationTreeSectionProps<T extends object = object> = Omit<Parameters<typeof RACNavigationTreeSection<T>>[0], 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its label lines up with the\n// label of a sibling that opens.\nfunction chevronFor(state: NavigationTreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then whatever the row was given — one order, always, which is what keeps a\n// column of rows reading down.\nfunction itemContent(label: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isEmphasized={state.isCurrentAncestor} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n        {label}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-current]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the current container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n// No overline, and so no three-line row: the navigation drawer page gives\n// one item height and one line of text. `List.Item` and `ListBox.Item` take\n// the prop because the lists page is what they draw; this row follows the\n// drawer's own metrics.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, then whatever the row was given. Its return type is written out\n * rather than inferred: `ReactNode` is a union that includes a promise, and\n * a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: NavigationTreeItemRenderProps, leading: ReactNode): ReactNode {\n  return <>\n      {chevronFor(state)}\n      {leading}\n    </>;\n}\n\n/**\n * A nested set of links, with the current one marked. Which row is current\n * is React Aria's: give the tree a `selectedRoute` and each row an `href`,\n * and the row whose `href` matches is the current one — its ancestors are\n * marked too, so a collapsed trail still shows where you are.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"#second\">\n *   <NavigationTree.Item href=\"#first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"#second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, and that is React Aria's design rather than an\n * omission: a navigation tree navigates, so what is current comes from the\n * route rather than from anything the reader picked. `Tree` is the one that\n * selects.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction NavigationTree<T extends object>(props: NavigationTreeProps<T>) {\n  return <RACNavigationTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction NavigationTreeHeader({\n  children\n}: NavigationTreeHeaderProps) {\n  return <RACNavigationTreeHeader className=\"x9f619 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xw3mh6e x1clyivc x140yoea\">\n      {children}\n    </RACNavigationTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Give it an `href` — that is what\n * `selectedRoute` is matched against — and an `id`, which is the key\n * expansion is reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret.\n */\nfunction NavigationTreeItem<T extends object = object>({\n  children,\n  label,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing, ripple.surface)}\n      </RACNavigationTreeItemContent>\n      {children}\n    </RACNavigationTreeItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction NavigationTreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: NavigationTreeSectionProps<T>) {\n  return <RACNavigationTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <NavigationTreeHeader>{header}</NavigationTreeHeader>}\n      {children}\n    </RACNavigationTreeSection>;\n}\n\n// What React Aria matches typeahead on, and what names the row.\n// `NavigationTreeItemText` makes one of the two a string, so the last branch\n// is unreachable through the public type — it is there because destructuring\n// the two apart is what loses the narrowing, not because a row can arrive\n// without either.\nfunction textValueFor(textValue: string | undefined, label: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof label === 'string' ? label : '';\n}\nNavigationTree.Item = NavigationTreeItem;\nNavigationTree.Section = NavigationTreeSection;\nexport type { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport default NavigationTree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","useRipple","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isCurrentAncestor","isCurrent","leadingFor","itemStyles","base","drawer","selectedDrawer","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","$","_c","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section","stylex.props","RACButton","NavigationTree","_c","props","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { NavigationTreeItemRenderProps, NavigationTreeItemProps as RACNavigationTreeItemProps, NavigationTreeProps as RACNavigationTreeProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NavigationTree as RACNavigationTree, NavigationTreeHeader as RACNavigationTreeHeader, NavigationTreeItem as RACNavigationTreeItem, NavigationTreeItemContent as RACNavigationTreeItemContent, NavigationTreeSection as RACNavigationTreeSection } from 'react-aria-components';\nimport { collectionStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The navigation drawer page's contents: a nested set of links with the\n// current one marked. Each row is the row every list here draws — `src/row`,\n// shared with ListItem, ListBox, List, Tree and Disclosure — under that\n// module's `drawer` variant, which is the page's own 56dp row with a\n// label-large label and a secondary-container pill on the current one.\n//\n// This is Tree's shape over React Aria's navigation primitive, and the\n// difference is what the two are for. A tree selects: rows are chosen and\n// the choice is reported. A navigation tree navigates: each row is a link,\n// and which one is current is decided by matching the route rather than by\n// anything the reader selected. So this takes `selectedRoute` where Tree\n// takes `selectedKeys`, and has no selection at all — React Aria omits every\n// selection prop from it.\n//\n// Three things are this component's own.\n//\n// **A level indents by one caret's width**, exactly as Tree does and for the\n// same reason: React Aria writes the depth on each row as a custom property,\n// and 24dp is the size the drawer page gives its icon, so a level of nesting\n// is as wide as the glyph beside it.\n//\n// **An ancestor of the current row is marked too, and softly.** React Aria\n// reports it, and a drawer whose current row is collapsed out of sight would\n// otherwise show nothing at all. It takes the label's weight rather than the\n// pill, so the trail reads as a trail rather than as a second current row.\n//\n// That weight goes on the label itself, through the row module's\n// `isEmphasized`, and it has to: the row's own `font-weight` never reaches\n// the text, since `RowContent` draws the label in a span stating the\n// label-large role in full, weight included. The pair also has to differ by\n// more than a step — the label's own weight is already the medium one, so a\n// trail set in medium is a trail nobody can see.\n//\n// **The pill's shape is the library's own.** The page gives the active\n// indicator's colour, height and width but keeps its shape behind a token\n// set that does not open to a script — the same gap recorded on the buttons\n// and lists pages. It is drawn as a full pill, which is what the page's own\n// images show and what 56dp of height comes to.\n\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype NavigationTreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype NavigationTreeItemProps<T extends object = object> = NavigationTreeItemText & Omit<RACNavigationTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & {\n  /** The rows nested under this one, as further `NavigationTree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACNavigationTreeItemProps<T>['className'];\n  /** Content before the label: an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACNavigationTreeItemProps<T>['style'];\n  /** A second line under the label, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the label, such as a count. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a row here wraps\n// its label in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string label is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype NavigationTreeItemText = {\n  /** The row's label — where it goes. */\n  label: string;\n  /** What typeahead matches the row on. Defaults to the label. */\n  textValue?: string;\n} | {\n  /** The row's label, as something other than a plain string. */\n  label?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype NavigationTreeProps<T extends object = object> = Omit<RACNavigationTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACNavigationTreeProps<T>['className'];\n  /** A function may compute the style from the tree's render state. */\n  style?: RACNavigationTreeProps<T>['style'];\n};\ntype NavigationTreeSectionProps<T extends object = object> = Omit<Parameters<typeof RACNavigationTreeSection<T>>[0], 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return stylex.props(styles.chevron, focus.ring).className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its label lines up with the\n// label of a sibling that opens.\nfunction chevronFor(state: NavigationTreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then whatever the row was given — one order, always, which is what keeps a\n// column of rows reading down.\nfunction itemContent(label: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isEmphasized={state.isCurrentAncestor} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n        {label}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-current]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the current container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n// No overline, and so no three-line row: the navigation drawer page gives\n// one item height and one line of text. `List.Item` and `ListBox.Item` take\n// the prop because the lists page is what they draw; this row follows the\n// drawer's own metrics.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, then whatever the row was given. Its return type is written out\n * rather than inferred: `ReactNode` is a union that includes a promise, and\n * a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: NavigationTreeItemRenderProps, leading: ReactNode): ReactNode {\n  return <>\n      {chevronFor(state)}\n      {leading}\n    </>;\n}\n\n/**\n * A nested set of links, with the current one marked. Which row is current\n * is React Aria's: give the tree a `selectedRoute` and each row an `href`,\n * and the row whose `href` matches is the current one — its ancestors are\n * marked too, so a collapsed trail still shows where you are.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"#second\">\n *   <NavigationTree.Item href=\"#first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"#second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, and that is React Aria's design rather than an\n * omission: a navigation tree navigates, so what is current comes from the\n * route rather than from anything the reader picked. `Tree` is the one that\n * selects.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction NavigationTree<T extends object>(props: NavigationTreeProps<T>) {\n  return <RACNavigationTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction NavigationTreeHeader({\n  children\n}: NavigationTreeHeaderProps) {\n  return <RACNavigationTreeHeader className=\"x9f619 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xw3mh6e x1clyivc x140yoea\">\n      {children}\n    </RACNavigationTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Give it an `href` — that is what\n * `selectedRoute` is matched against — and an `id`, which is the key\n * expansion is reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret.\n */\nfunction NavigationTreeItem<T extends object = object>({\n  children,\n  label,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing, ripple.surface)}\n      </RACNavigationTreeItemContent>\n      {children}\n    </RACNavigationTreeItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction NavigationTreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: NavigationTreeSectionProps<T>) {\n  return <RACNavigationTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <NavigationTreeHeader>{header}</NavigationTreeHeader>}\n      {children}\n    </RACNavigationTreeSection>;\n}\n\n// What React Aria matches typeahead on, and what names the row.\n// `NavigationTreeItemText` makes one of the two a string, so the last branch\n// is unreachable through the public type — it is there because destructuring\n// the two apart is what loses the narrowing, not because a row can arrive\n// without either.\nfunction textValueFor(textValue: string | undefined, label: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof label === 'string' ? label : '';\n}\nNavigationTree.Item = NavigationTreeItem;\nNavigationTree.Section = NavigationTreeSection;\nexport type { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport default NavigationTree;"],"mappings":";;;;;;;;;;;;AAqDA,MAAMgC,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;AACF;AA0DA,SAASkB,mBAAmB;CAC1B,OAAOzD,MAAa0B,OAAOC,SAAST,MAAMyC,IAAI,CAAC,CAACZ,aAAa;AAC/D;AASA,SAASa,WAAWC,OAAiD;CACnE,IAAI,CAACA,MAAMC,eACT,OAAO,oBAAC,QAAD,EAAM,WAAU,0BAAyB,CAAA;CAElD,OAAO,oBAAC4C,QAAD;EAAW,WAAWjD;EAAkB,MAAK;EAChD,UAAA,oBAAC,iBAAD,EAAiB,GAAI;GACrB,GAAG,EACDV,WAAW,sEACb;GACA,GAAG,EACDA,WAAW,sEACb;EACF,EAAE,CAAC,CAACc,MAAME,cAAc,GAAG,CAAA;CAChB,CAAA;AACf;AAKA,SAASC,YAAYZ,OAAkBJ,SAAoBE,YAAuBC,UAAqBc,QAAmB;CACxH,QAAQJ,UAAoD,qBAAA,UAAA,EAAA,UAAA,CACxD,oBAAC,YAAD;EAAY,YAAYA,MAAMK;EAAY,cAAcL,MAAMM;EAAmB,YAAYN,MAAMO;EAAW,SAASC,WAAWR,OAAOb,OAAO;EAAeE;EAAsBC;EAAU,SAAQ;EACpMC,UAAAA;CACS,CAAA,GACXS,MAAMK,aAAa,OAAOD,MAC7B,EAAA,CAAA;AACJ;AAYA,SAASK,WAAWT,OAAsC;CACxD,OAAO7D,MAAaiB,UAAUsD,MAAMtD,UAAUuD,QAAQ9C,OAAOc,QAAQqB,MAAMO,aAAanD,UAAUwD,gBAAgBZ,MAAMa,aAAazD,UAAU0D,SAASd,MAAMe,kBAAkB3D,UAAU4D,cAAchB,MAAMiB,aAAa7D,UAAU8D,SAASlB,MAAMK,cAAcjD,UAAU+D,QAAQ;AACtR;;;;;;AAOA,SAASX,WAAWR,OAAsCb,SAA+B;CACvF,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFY,WAAWC,KAAK,GAChBb,OACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAA7C,iBAAAuD,SAAA;CAAA,MAAAuB,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAvB,SAAA;EAC8CyB,KAAAhE,oBAAoBnB,MAAaa,iBAAgBuE,SAAU,GAAG1B,OAAK;EAACuB,EAAA,KAAAvB;EAAAuB,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAvB,WAAAuB,EAAA,OAAAE,IAAA;EAAzGE,KAAA,oBAACyB,gBAAD;GAAkB,GAAQpD;GAAK,GAAMyB;EAAoE,CAAA;EAAIF,EAAA,KAAAvB;EAAAuB,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAA7GI;AAA6G;;;;;AAOtH,SAAAhF,uBAAA8E,IAAA;CAAA,MAAAF,IAAAC,EAAA,CAAA;CAA8B,MAAA,EAAAvC,aAAAwC;CAEF,IAAAE;CAAA,IAAAJ,EAAA,OAAAtC,UAAA;EACnB0C,KAAA,oBAAC2B,sBAAD;GAAmC,WAAA;GACrCrE;EAD0B,CAAA;EAEHsC,EAAA,KAAAtC;EAAAsC,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFrBI;AAEqB;;;;;;;;;AAW9B,SAAA9E,qBAAA4E,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAuD,MAAA,EAAAvC,UAAAS,OAAAJ,SAAAsC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAxC,YAAAG,WAAAF,UAAA,GAAAO,UAAAyB;CAa1B,IAAAE;CAAA,IAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAEoBL,KAAA;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAM/C;EAACT,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAND,MAAAhB,SAAelD,UAA0B,MAAMsE,IAM5C,IAAI;CACC,MAAAM,KAAAnF;CAAqB,IAAAoF;CAAA,IAAAX,EAAA,OAAA7B,SAAA6B,EAAA,OAAA5B,WAAA;EAAeuC,KAAAC,aAAaxC,WAAWD,KAAK;EAAC6B,EAAA,KAAA7B;EAAA6B,EAAA,KAAA5B;EAAA4B,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAM,MAAAa,KAAA7B,OAAM8B;CAA0B,MAAAC,KAAA7E,oBAAoBmD,YAAYZ,KAAK;CAAC,IAAAuC;CAAA,IAAAhB,EAAA,OAAA7B,SAAA6B,EAAA,QAAAjC,WAAAiC,EAAA,QAAAhB,OAAAiC,WAAAjB,EAAA,QAAA/B,cAAA+B,EAAA,QAAA9B,UAAA;EAE/I8C,KAAAjC,YAAYZ,OAAOJ,SAASE,YAAYC,UAAUc,OAAMiC,OAAQ;EAACjB,EAAA,KAAA7B;EAAA6B,EAAA,MAAAjC;EAAAiC,EAAA,MAAAhB,OAAAiC;EAAAjB,EAAA,MAAA/B;EAAA+B,EAAA,MAAA9B;EAAA8B,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAgB,IAAA;EADpEE,KAAA,oBAACgB,2BAAD,EAAA,UACGlB,GAD0B,CAAA;EAEEhB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAU,MAAAV,EAAA,QAAAtC,YAAAsC,EAAA,QAAAvB,SAAAuB,EAAA,QAAAhB,OAAA8B,YAAAd,EAAA,QAAAW,MAAAX,EAAA,QAAAe,MAAAf,EAAA,QAAAkB,IAAA;EAH5BC,KAAA,qBAAC,IAAD;GAAqC,WAAAR;GAA8B,GAAME;GAAe,GAAMpC;GAAK,GAAMsC;GAAzG,UAAA,CACHG,IAGCxD,QAJwB;;EAKHsC,EAAA,MAAAU;EAAAV,EAAA,MAAAtC;EAAAsC,EAAA,MAAAvB;EAAAuB,EAAA,MAAAhB,OAAA8B;EAAAd,EAAA,MAAAW;EAAAX,EAAA,MAAAe;EAAAf,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OALnBmB;AAKmB;;;;AAM5B,SAAAzF,wBAAAwE,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAS;CAAA,IAAAhD;CAAA,IAAAa;CAAA,IAAA6B;CAAA,IAAAO;CAAA,IAAAX,EAAA,OAAAE,IAAA;EAA0D,MAAA,EAAAxC,UAAAmD,IAAAtC,QAAAwC,IAAA,GAAAtC,YAAAyB;EAAAxC,WAAAmD;EAAAtC,SAAAwC;EAKhDL,KAAA/E;EAAgC8C,KAAAA;EAAWkC,KAAAxE,YAAYpB,MAAaa,iBAAgBwF,OAAQ,GAAG3C,OAAK;EAACuB,EAAA,KAAAE;EAAAF,EAAA,KAAAU;EAAAV,EAAA,KAAAtC;EAAAsC,EAAA,KAAAzB;EAAAyB,EAAA,KAAAI;EAAAJ,EAAA,KAAAW;CAAA,OAAA;EAAAD,KAAAV,EAAA;EAAAtC,WAAAsC,EAAA;EAAAzB,SAAAyB,EAAA;EAAAI,KAAAJ,EAAA;EAAAW,KAAAX,EAAA;CAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAzB,QAAA;EACxGsC,KAAAtC,WAAW8C,KAAAA,IAAX,OAA8B,oBAACS,wBAAD,EAAA,UAAuBvD,OAAF,CAAA;EAAgCyB,EAAA,KAAAzB;EAAAyB,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAU,MAAAV,EAAA,OAAAtC,YAAAsC,EAAA,QAAAI,MAAAJ,EAAA,QAAAW,MAAAX,EAAA,QAAAa,IAAA;EADjFE,KAAA,qBAAC,IAAD;GAAyB,GAAQtC;GAAK,GAAMkC;GAA5C,UAAA,CACFE,IACAnD,QAF2B;;EAGHsC,EAAA,KAAAU;EAAAV,EAAA,KAAAtC;EAAAsC,EAAA,MAAAI;EAAAJ,EAAA,MAAAW;EAAAX,EAAA,MAAAa;EAAAb,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAHtBe;AAGsB;AAQ/B,SAASH,aAAaxC,WAA+BD,OAAkB;CACrE,IAAIC,cAAciD,KAAAA,GAChB,OAAOjD;CAET,OAAO,OAAOD,UAAU,WAAWA,QAAQ;AAC7C;AACAjD,iBAAeoG,OAAOhG;AACtBJ,iBAAeqG,UAAU7F"}

package/dist/components/number-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` 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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":";;;;;;;;;;;AAyDiB,GAAasB,QAAQK,KAAQH,WAAWI,sBAAyBJ,WAAWK;AACnE,GAAaP,QAAQS,KAAQP,WAAWK;AAClE,MAAMG,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,uBAAuB;EACrBC,QAAQ;EACRF,OAAO;CACT;CACAG,iBAAiB;EACfhB,QAAQ;EACRC,QAAQ;EACRY,OAAO;CACT;CACAI,gBAAgB;EACdV,QAAQ;EACRM,OAAO;CACT;CACAK,gBAAgB;EACdvB,QAAQ;EACRkB,OAAO;CACT;CACAM,iBAAiB;EACfvB,QAAQ;EACRiB,OAAO;CACT;CACAO,gBAAgB;EACdzB,QAAQ;EACRkB,OAAO;CACT;CACAQ,YAAY;EACVC,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;AA0EA,SAAA/C,cAAAmE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAZ,gBAAAa,IAAAZ,aAAAC,OAAAC,eAAAW,IAAAV,gBAAAW,IAAAC,YAAAC,IAAAZ,OAAAC,SAAAY,IAAAX,UAAAY,IAAAX,SAAAY,IAAA,GAAAC,YAAAX;CACnB,MAAAV,iBAAAa,OAAAS,KAAAA,IAAA,aAAAT;CAGA,MAAAV,gBAAAW,OAAAQ,KAAAA,IAAA,OAAAR;CACA,MAAAV,iBAAAW,OAAAO,KAAAA,IAAA,aAAAP;CACA,MAAAC,aAAAC,OAAAK,KAAAA,IAAA,QAAAL;CAEA,MAAAX,UAAAY,OAAAI,KAAAA,IAAA,OAAAJ;CACA,MAAAX,WAAAY,OAAAG,KAAAA,IAAA,aAAAH;CACA,MAAAX,UAAAY,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,SAAehB,aAAa;CAC5B,MAAAiB,qBAA2BzE,2BAA2B;CAC9C,MAAA0E,KAAAjF;CAAc,IAAAkF;CAAA,IAAAf,EAAA,OAAAT,OAAA;EAAoCwB,KAAA5E,YAAYoD,KAAK;EAACS,EAAA,KAAAT;EAAAS,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAyD,MAAAgB,KAAAzE,oBAAoBd,MAAaS,YAAW+E,IAAK,GAAGP,OAAK;CAAC,IAAAQ;CAAA,IAAAlB,EAAA,OAAAmB,OAAAC,IAAA,2BAAA,GAAA;EAEhLF,MAAA;GAAAG,GACN,EAAAC,WACU,mCACb;GAACC,GACE,EAAAD,WACU,kCACb;EACF;EAACtB,EAAA,KAAAkB;CAAA,OAAAA,MAAAlB,EAAA;CAPU,MAAAwB,MAAAN,IAOT,CAAC,CAACN,UAAU;CAAE,IAAAa;CAAA,IAAAzB,EAAA,OAAAL,SAAA;EACZ8B,MAAA,oBAAC,YAAD,EAAqB9B,QAAO,CAAA;EAAIK,EAAA,KAAAL;EAAAK,EAAA,KAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,OAAAmB,OAAAC,IAAA,2BAAA,GAAA;EACvBM,MAAA;GAAAL,GACN,EAAAC,WACU,2CACb;GAACK,GACE,EAAAL,WACU,qDACb;GAACC,GACE,EAAAD,WACU,2CACb;GAACM,GACE,EAAAN,WACU,sDACb;EACF;EAACtB,EAAA,KAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAbU,MAAA6B,MAAAH,IAaT,CAAC,CAACd,UAAU,IAAI,CAAC,EAAE,CAACA,UAAUf,YAAY,eAAe;CAAE,IAAAiC;CAAA,IAAA9B,EAAA,OAAAX,kBAAAW,EAAA,OAAAP,kBAAAO,EAAA,OAAAY,UAAAZ,EAAA,OAAAH,SAAA;EACxDiC,MAAAlB,SAAA,qBAAA,UAAA,EAAA,UAAA,CACG,oBAAC,YAAD;GAAwBvB,cAAAA;GAAqB,MAAA;GAAU,MAAA;GACrD,UAAA,oBAAC,YAAD,EAAsB,WAAA,4BAA2B,CAAA;EADxC,CAAA,GAGX,oBAAC,YAAD;GAAwBI,cAAAA;GAAqB,MAAA;GAAU,MAAA;GACrD,UAAA,oBAAC,WAAD,EAAqB,WAAA,4BAA2B,CAAA;EADvC,CAAA,CAEE,EAAA,CAAA,IANhB,qBAAA,UAAA,EAAA,UAAA,CAQG,oBAAC,gBAAD;GAAuBA,OAAAA;GAA0B,UAAAI,YAAY;GAAiB,MAAA;GAC5E,UAAA,oBAAC,WAAD,EAAqB,WAAA,4BAA2B,CAAA;EADnC,CAAA,GAGf,oBAAC,gBAAD;GAAuBR,OAAAA;GAA0B,UAAAQ,YAAY;GAAiB,MAAA;GAC5E,UAAA,oBAAC,YAAD,EAAsB,WAAA,4BAA2B,CAAA;EADpC,CAAA,CAEE,EAAA,CAAA;EAChBG,EAAA,KAAAX;EAAAW,EAAA,KAAAP;EAAAO,EAAA,KAAAY;EAAAZ,EAAA,KAAAH;EAAAG,EAAA,MAAA8B;CAAA,OAAAA,MAAA9B,EAAA;CAAA,IAAA+B;CAAA,IAAA/B,EAAA,QAAA6B,OAAA7B,EAAA,QAAA8B,KAAA;EA5BPC,MAAA,oBAAA,OAAA;GA6BM,GA7BGF;GAcNC,UAAAA;EAeG,CAAA;EAAA9B,EAAA,MAAA6B;EAAA7B,EAAA,MAAA8B;EAAA9B,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAwB,OAAAxB,EAAA,QAAAyB,OAAAzB,EAAA,QAAA+B,KAAA;EAtCRC,MAAA,qBAAA,OAAA;GAuCM,GAvCGR;GAAT,UAAA,CAQEC,KACAM,GA8BI;;EAAA/B,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA+B;EAAA/B,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAR,iBAAAQ,EAAA,QAAAN,SAAAM,EAAA,QAAAgC,OAAAhC,EAAA,QAAAH,SAAA;EAxCRoC,MAAA,oBAAC,UAAD;GAAyBzC;GAAsBE;GAAgBG;GAC7DmC,UAAAA;EADO,CAAA;EAyCEhC,EAAA,MAAAR;EAAAQ,EAAA,MAAAN;EAAAM,EAAA,MAAAgC;EAAAhC,EAAA,MAAAH;EAAAG,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAAV,eAAAU,EAAA,QAAAT,OAAA;EACX2C,MAAA,oBAAC,cAAD;GAA2B5C;GAAoBC;EAAK,CAAA;EAAIS,EAAA,MAAAV;EAAAU,EAAA,MAAAT;EAAAS,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;CAAA,IAAAnC,EAAA,QAAAc,MAAAd,EAAA,QAAAK,cAAAL,EAAA,QAAAU,WAAAV,EAAA,QAAAiC,OAAAjC,EAAA,QAAAkC,OAAAlC,EAAA,QAAAe,MAAAf,EAAA,QAAAgB,MAAAhB,EAAA,QAAAa,oBAAA;EA3CrDsB,MAAA,qBAAC,IAAD;GAA4B9B;GAAuB,WAAAU;GAAwCF;GAAkB,GAAMH;GAAK,GAAMM;GAA9H,UAAA,CACHiB,KA0CAC,GA3CkB;;EA4CHlC,EAAA,MAAAc;EAAAd,EAAA,MAAAK;EAAAL,EAAA,MAAAU;EAAAV,EAAA,MAAAiC;EAAAjC,EAAA,MAAAkC;EAAAlC,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;EAAAhB,EAAA,MAAAa;EAAAb,EAAA,MAAAmC;CAAA,OAAAA,MAAAnC,EAAA;CAAA,OA5CZmC;AA4CY;AAErB,SAAAC,eAAArC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAwB,MAAA,EAAAoC,UAAA3C,OAAA4C,UAAAC,SAAAxC;CAUvB,IAAAG;CAAA,IAAAF,EAAA,OAAAsC,YAAAtC,EAAA,OAAAuC,MAAA;EACsDrC,KAAA3D,oBAAoBiG,cAAcD,SAAS,aAAaD,QAAQ,GAAG,CAAC,CAAC;EAACtC,EAAA,KAAAsC;EAAAtC,EAAA,KAAAuC;EAAAvC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAqC,YAAArC,EAAA,OAAAN,SAAAM,EAAA,OAAAuC,QAAAvC,EAAA,OAAAE,IAAA;EAApHC,KAAA,oBAAC,QAAD;GAAuBT,cAAAA;GAAa6C;GAAI,GAAMrC;GAChDmC;EADY,CAAA;EAEHrC,EAAA,KAAAqC;EAAArC,EAAA,KAAAN;EAAAM,EAAA,KAAAuC;EAAAvC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFPG;AAEO;AAOhB,SAASqC,cAAcC,KAAcH,UAAmB;CACtD,QAAQI,UAA6BjH,MAAa4B,OAAOC,SAASgF,YAAYjF,OAAO4B,iBAAiBwD,OAAOpF,OAAO8B,YAAY,CAACsD,OAAOH,YAAYjF,OAAOuB,uBAAuB8D,MAAMC,aAAa,CAACD,MAAMrC,cAAchD,OAAO2B,gBAAgB0D,MAAME,aAAa,CAACF,MAAMrC,cAAchD,OAAO6B,gBAAgBwD,MAAMG,kBAAkBxF,OAAO0B,gBAAgB2D,MAAMrC,cAAchD,OAAOyB,eAAe;AAC3Y"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` 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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":";;;;;;;;;;;AAyDiB,GAAasB,QAAQK,KAAQH,WAAWI,sBAAyBJ,WAAWK;AACnE,GAAaP,QAAQS,KAAQP,WAAWK;AAClE,MAAMG,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,uBAAuB;EACrBC,QAAQ;EACRF,OAAO;CACT;CACAG,iBAAiB;EACfhB,QAAQ;EACRC,QAAQ;EACRY,OAAO;CACT;CACAI,gBAAgB;EACdV,QAAQ;EACRM,OAAO;CACT;CACAK,gBAAgB;EACdvB,QAAQ;EACRkB,OAAO;CACT;CACAM,iBAAiB;EACfvB,QAAQ;EACRiB,OAAO;CACT;CACAO,gBAAgB;EACdzB,QAAQ;EACRkB,OAAO;CACT;CACAQ,YAAY;EACVC,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;AA0EA,SAAA/C,cAAAmE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAZ,gBAAAa,IAAAZ,aAAAC,OAAAC,eAAAW,IAAAV,gBAAAW,IAAAC,YAAAC,IAAAZ,OAAAC,SAAAY,IAAAX,UAAAY,IAAAX,SAAAY,IAAA,GAAAC,YAAAX;CACnB,MAAAV,iBAAAa,OAAAS,KAAAA,IAAA,aAAAT;CAGA,MAAAV,gBAAAW,OAAAQ,KAAAA,IAAA,OAAAR;CACA,MAAAV,iBAAAW,OAAAO,KAAAA,IAAA,aAAAP;CACA,MAAAC,aAAAC,OAAAK,KAAAA,IAAA,QAAAL;CAEA,MAAAX,UAAAY,OAAAI,KAAAA,IAAA,OAAAJ;CACA,MAAAX,WAAAY,OAAAG,KAAAA,IAAA,aAAAH;CACA,MAAAX,UAAAY,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,SAAehB,aAAa;CAC5B,MAAAiB,qBAA2BzE,2BAA2B;CAC9C,MAAA0E,KAAAjF;CAAc,IAAAkF;CAAA,IAAAf,EAAA,OAAAT,OAAA;EAAoCwB,KAAA5E,YAAYoD,KAAK;EAACS,EAAA,KAAAT;EAAAS,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAyD,MAAAgB,KAAAzE,oBAAoBd,MAAaS,YAAW+E,IAAK,GAAGP,OAAK;CAAC,IAAAQ;CAAA,IAAAlB,EAAA,OAAAmB,OAAAC,IAAA,2BAAA,GAAA;EAEhLF,MAAA;GAAAG,GACN,EAAAC,WACU,mCACb;GAACC,GACE,EAAAD,WACU,kCACb;EACF;EAACtB,EAAA,KAAAkB;CAAA,OAAAA,MAAAlB,EAAA;CAPU,MAAAwB,MAAAN,IAOT,CAAC,CAACN,UAAU;CAAE,IAAAa;CAAA,IAAAzB,EAAA,OAAAL,SAAA;EACZ8B,MAAA,oBAAC,YAAD,EAAqB9B,QAAO,CAAA;EAAIK,EAAA,KAAAL;EAAAK,EAAA,KAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,OAAAmB,OAAAC,IAAA,2BAAA,GAAA;EACvBM,MAAA;GAAAL,GACN,EAAAC,WACU,2CACb;GAACK,GACE,EAAAL,WACU,qDACb;GAACC,GACE,EAAAD,WACU,2CACb;GAACM,GACE,EAAAN,WACU,sDACb;EACF;EAACtB,EAAA,KAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAbU,MAAA6B,MAAAH,IAaT,CAAC,CAACd,UAAU,IAAI,CAAC,EAAE,CAACA,UAAUf,YAAY,eAAe;CAAE,IAAAiC;CAAA,IAAA9B,EAAA,OAAAX,kBAAAW,EAAA,OAAAP,kBAAAO,EAAA,OAAAY,UAAAZ,EAAA,OAAAH,SAAA;EACxDiC,MAAAlB,SAAA,qBAAA,UAAA,EAAA,UAAA,CACG,oBAAC,YAAD;GAAwBvB,cAAAA;GAAqB,MAAA;GAAU,MAAA;GACrD,UAAA,oBAAC,YAAD,EAAsB,WAAA,4BAA2B,CAAA;EADxC,CAAA,GAGX,oBAAC,YAAD;GAAwBI,cAAAA;GAAqB,MAAA;GAAU,MAAA;GACrD,UAAA,oBAAC,WAAD,EAAqB,WAAA,4BAA2B,CAAA;EADvC,CAAA,CAEE,EAAA,CAAA,IANhB,qBAAA,UAAA,EAAA,UAAA,CAQG,oBAAC,gBAAD;GAAuBA,OAAAA;GAA0B,UAAAI,YAAY;GAAiB,MAAA;GAC5E,UAAA,oBAAC,WAAD,EAAqB,WAAA,4BAA2B,CAAA;EADnC,CAAA,GAGf,oBAAC,gBAAD;GAAuBR,OAAAA;GAA0B,UAAAQ,YAAY;GAAiB,MAAA;GAC5E,UAAA,oBAAC,YAAD,EAAsB,WAAA,4BAA2B,CAAA;EADpC,CAAA,CAEE,EAAA,CAAA;EAChBG,EAAA,KAAAX;EAAAW,EAAA,KAAAP;EAAAO,EAAA,KAAAY;EAAAZ,EAAA,KAAAH;EAAAG,EAAA,MAAA8B;CAAA,OAAAA,MAAA9B,EAAA;CAAA,IAAA+B;CAAA,IAAA/B,EAAA,QAAA6B,OAAA7B,EAAA,QAAA8B,KAAA;EA5BPC,MAAA,oBAAA,OAAA;GA6BM,GA7BGF;GAcNC,UAAAA;EAeG,CAAA;EAAA9B,EAAA,MAAA6B;EAAA7B,EAAA,MAAA8B;EAAA9B,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAwB,OAAAxB,EAAA,QAAAyB,OAAAzB,EAAA,QAAA+B,KAAA;EAtCRC,MAAA,qBAAA,OAAA;GAuCM,GAvCGR;GAAT,UAAA,CAQEC,KACAM,GA8BI;;EAAA/B,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA+B;EAAA/B,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAR,iBAAAQ,EAAA,QAAAN,SAAAM,EAAA,QAAAgC,OAAAhC,EAAA,QAAAH,SAAA;EAxCRoC,MAAA,oBAAC,UAAD;GAAyBzC;GAAsBE;GAAgBG;GAC7DmC,UAAAA;EADO,CAAA;EAyCEhC,EAAA,MAAAR;EAAAQ,EAAA,MAAAN;EAAAM,EAAA,MAAAgC;EAAAhC,EAAA,MAAAH;EAAAG,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAAV,eAAAU,EAAA,QAAAT,OAAA;EACX2C,MAAA,oBAAC,cAAD;GAA2B5C;GAAoBC;EAAK,CAAA;EAAIS,EAAA,MAAAV;EAAAU,EAAA,MAAAT;EAAAS,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;CAAA,IAAAnC,EAAA,QAAAc,MAAAd,EAAA,QAAAK,cAAAL,EAAA,QAAAU,WAAAV,EAAA,QAAAiC,OAAAjC,EAAA,QAAAkC,OAAAlC,EAAA,QAAAe,MAAAf,EAAA,QAAAgB,MAAAhB,EAAA,QAAAa,oBAAA;EA3CrDsB,MAAA,qBAAC,IAAD;GAA4B9B;GAAuB,WAAAU;GAAwCF;GAAkB,GAAMH;GAAK,GAAMM;GAA9H,UAAA,CACHiB,KA0CAC,GA3CkB;;EA4CHlC,EAAA,MAAAc;EAAAd,EAAA,MAAAK;EAAAL,EAAA,MAAAU;EAAAV,EAAA,MAAAiC;EAAAjC,EAAA,MAAAkC;EAAAlC,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;EAAAhB,EAAA,MAAAa;EAAAb,EAAA,MAAAmC;CAAA,OAAAA,MAAAnC,EAAA;CAAA,OA5CZmC;AA4CY;AAErB,SAAAC,eAAArC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAwB,MAAA,EAAAoC,UAAA3C,OAAA4C,UAAAC,SAAAxC;CAUvB,IAAAG;CAAA,IAAAF,EAAA,OAAAsC,YAAAtC,EAAA,OAAAuC,MAAA;EACsDrC,KAAA3D,oBAAoBiG,cAAcD,SAAS,aAAaD,QAAQ,GAAG,CAAC,CAAC;EAACtC,EAAA,KAAAsC;EAAAtC,EAAA,KAAAuC;EAAAvC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAqC,YAAArC,EAAA,OAAAN,SAAAM,EAAA,OAAAuC,QAAAvC,EAAA,OAAAE,IAAA;EAApHC,KAAA,oBAACgD,QAAD;GAAuBzD,cAAAA;GAAa6C;GAAI,GAAMrC;GAChDmC;EADY,CAAA;EAEHrC,EAAA,KAAAqC;EAAArC,EAAA,KAAAN;EAAAM,EAAA,KAAAuC;EAAAvC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFPG;AAEO;AAOhB,SAASqC,cAAcC,KAAcH,UAAmB;CACtD,QAAQI,UAA6BjH,MAAa4B,OAAOC,SAASgF,YAAYjF,OAAO4B,iBAAiBwD,OAAOpF,OAAO8B,YAAY,CAACsD,OAAOH,YAAYjF,OAAOuB,uBAAuB8D,MAAMC,aAAa,CAACD,MAAMrC,cAAchD,OAAO2B,gBAAgB0D,MAAME,aAAa,CAACF,MAAMrC,cAAchD,OAAO6B,gBAAgBwD,MAAMG,kBAAkBxF,OAAO0B,gBAAgB2D,MAAMrC,cAAchD,OAAOyB,eAAe;AAC3Y"}