@kanso-labs/kanso-ui 0.26.2 → 0.26.4

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","props","header"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps } 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 { ChevronEndGlyph } from '../../glyphs';\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, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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  /** Where the menu lines up along that side. @default 'start' */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /** A function may compute the class from the menu's render state. */\n  className?: RACMenuProps<T>['className'];\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  /** Which side of the trigger the menu opens on. @default 'bottom' */\n  side?: MenuSide;\n  /** How far the menu sits from the trigger, in pixels. @default 8 */\n  sideOffset?: number;\n  /** A function may compute the style from the menu's render state. */\n  style?: RACMenuProps<T>['style'];\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.\n   */\n  children: 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) {\n  return (state: MenuItemRenderProps) => <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}\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 it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, 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 */\nfunction MenuContent<T extends object = object>({\n  align = 'start',\n  alignOffset,\n  className,\n  container,\n  search,\n  side = 'bottom',\n  sideOffset = 8,\n  style,\n  ...props\n}: MenuContentProps<T>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\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      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt\"\n    }, {\n      className,\n      style\n    })} />\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  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T>) {\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing)}\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 x1wxaq2x\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"20px\" variant=\"circular\" />\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 the item is worth as text, for the typeahead React Aria drives from\n// an item's words rather than its element. It reads it off the children when\n// they are a string and finds nothing when they are not — and an item here\n// is always an element, since the row wraps its label. So a plain-string\n// label becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\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","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","spacing","typography","ProgressIndicator","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","T","container","Element","search","side","MenuSide","sideOffset","style","Omit","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","delay","itemContent","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","t2","t3","undefined","t4","t5","Symbol","for","surfaceStyles","t6","t7","t8","t9","T0","textValue","textOf","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 { MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps } 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 { ChevronEndGlyph } from '../../glyphs';\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, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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  /** Where the menu lines up along that side. @default 'start' */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /** A function may compute the class from the menu's render state. */\n  className?: RACMenuProps<T>['className'];\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  /** Which side of the trigger the menu opens on. @default 'bottom' */\n  side?: MenuSide;\n  /** How far the menu sits from the trigger, in pixels. @default 8 */\n  sideOffset?: number;\n  /** A function may compute the style from the menu's render state. */\n  style?: RACMenuProps<T>['style'];\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.\n   */\n  children: 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) {\n  return (state: MenuItemRenderProps) => <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}\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 it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, 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 */\nfunction MenuContent<T extends object = object>({\n  align = 'start',\n  alignOffset,\n  className,\n  container,\n  search,\n  side = 'bottom',\n  sideOffset = 8,\n  style,\n  ...props\n}: MenuContentProps<T>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\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      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt\"\n    }, {\n      className,\n      style\n    })} />\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  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T>) {\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing)}\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 x1wxaq2x\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"20px\" variant=\"circular\" />\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 the item is worth as text, for the typeahead React Aria drives from\n// an item's words rather than its element. It reads it off the children when\n// they are a string and finds nothing when they are not — and an item here\n// is always an element, since the row wraps its label. So a plain-string\n// label becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\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

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { indicatorStyles } from "../../indicator/styles.js";
 import { IndicatorLabels, IndicatorLine } from "../../indicator/index.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "react-aria-components";
 //#region src/components/meter/index.tsx
@@ -15,14 +16,73 @@ import { Meter } from "react-aria-components";
 * The call site's `className` and `style` land on the meter as a whole,
 * which is the element a layout positions.
 */
-function Meter$1({ label, maxValue = 100, minValue = 0, showValue = true, tone = "primary", ...props$1 }) {
-	return /* @__PURE__ */ jsx(Meter, {
-		maxValue,
-		minValue,
-		...props$1,
-		...mergeStatefulStyles(props(indicatorStyles.root), props$1),
-		children: meterContent(label, showValue, tone)
-	});
+function Meter$1(t0) {
+	const $ = c(20);
+	let T0;
+	let label;
+	let showValue;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let tone;
+	if ($[0] !== t0) {
+		const { label: t5, maxValue: t6, minValue: t7, showValue: t8, tone: t9, ...props$1 } = t0;
+		label = t5;
+		const maxValue = t6 === void 0 ? 100 : t6;
+		const minValue = t7 === void 0 ? 0 : t7;
+		showValue = t8 === void 0 ? true : t8;
+		tone = t9 === void 0 ? "primary" : t9;
+		T0 = Meter;
+		t1 = maxValue;
+		t2 = minValue;
+		t3 = props$1;
+		t4 = mergeStatefulStyles(props(indicatorStyles.root), props$1);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = label;
+		$[3] = showValue;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = tone;
+	} else {
+		T0 = $[1];
+		label = $[2];
+		showValue = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		tone = $[8];
+	}
+	let t5;
+	if ($[9] !== label || $[10] !== showValue || $[11] !== tone) {
+		t5 = meterContent(label, showValue, tone);
+		$[9] = label;
+		$[10] = showValue;
+		$[11] = tone;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== T0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			maxValue: t1,
+			minValue: t2,
+			...t3,
+			...t4,
+			children: t5
+		});
+		$[13] = T0;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
 }
 function meterContent(label, showValue, tone) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IndicatorLabels, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 alone so a column of meters still shares\n   * one 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":";;;;;;;;;;;;;;;;;AA+EA,SAAS,QAAM,EACb,OACA,WAAW,KACX,WAAW,GACX,YAAY,MACZ,OAAO,WACP,GAAG,WACU;CACb,OAAO,oBAAC,OAAD;EAAoB;EAAoB;EAAU,GAAI;EAAO,GAAI,oBAAoB,MAAa,gBAAgB,IAAI,GAAG,OAAK;EAChI,UAAA,aAAa,OAAO,WAAW,IAAI;CAC5B,CAAA;AACd;AAMA,SAAS,aAAa,OAAkB,WAAoB,MAAiB;CAC3E,QAAQ,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwB;EAAO,OAAO,YAAY,MAAM,YAAY,KAAA;CAAU,CAAA,GAC9E,oBAAC,eAAD;EAAe,YAAY,MAAM;EAAkB;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"],"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 alone so a column of meters still shares\n   * one 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":";;;;;;;;;;;;;;;;;;AA+EA,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

@@ -3,8 +3,8 @@ import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, NavigationTree, NavigationTreeHeader, NavigationTreeItem, NavigationTreeItemContent, NavigationTreeSection } from "react-aria-components";
 //#region src/components/navigation-tree/index.tsx
 const styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","props","header"],"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 { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\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// **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  currentAncestor: {\n    k63SB2: \"x1bf3uqz\",\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> = 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 {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1heor9g x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.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: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"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) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n      {label}\n    </RowContent>;\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 it wins over both the\n// interactive and the current branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, rowStyles.interactive, styles.indent, state.isCurrentAncestor && styles.currentAncestor, state.isCurrent && rowStyles.selectedDrawer, 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({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, 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  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T>) {\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing)}\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({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, 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","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","currentAncestor","k63SB2","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","chevronFor","state","hasChildItems","isExpanded","itemContent","isDisabled","isCurrent","leadingFor","itemStyles","props","base","drawer","interactive","isCurrentAncestor","selectedDrawer","disabled","$","_c","t0","t1","T0","t2","t3","t4","t5","t6","t7","t8","textValueFor","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 { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\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// **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  currentAncestor: {\n    k63SB2: \"x1bf3uqz\",\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> = 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 {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1heor9g x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.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: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"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) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n      {label}\n    </RowContent>;\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 it wins over both the\n// interactive and the current branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, rowStyles.interactive, styles.indent, state.isCurrentAncestor && styles.currentAncestor, state.isCurrent && rowStyles.selectedDrawer, 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({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, 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  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T>) {\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing)}\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({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, 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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"}

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

@@ -4,8 +4,8 @@ import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
 import IconButton from "../icon-button/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, NumberField } from "react-aria-components";
 //#region src/components/number-field/index.tsx
 const styles = {
@@ -69,59 +69,147 @@ const styles = {
 * which is the element a layout positions. The box, label, input and message
 * are the field chrome in `src/field`, shared with every other field.
 */
-function NumberField$1({ decrementLabel = "Decrease", description, error, floatingLabel = true, incrementLabel = "Increase", isDisabled = false, label, numeric = true, steppers = "vertical", variant = "filled", ...props$1 }) {
+function NumberField$1(t0) {
+	const $ = c(35);
+	const { decrementLabel: t1, description, error, floatingLabel: t2, incrementLabel: t3, isDisabled: t4, label, numeric: t5, steppers: t6, variant: t7, ...props$1 } = t0;
+	const decrementLabel = t1 === void 0 ? "Decrease" : t1;
+	const floatingLabel = t2 === void 0 ? true : t2;
+	const incrementLabel = t3 === void 0 ? "Increase" : t3;
+	const isDisabled = t4 === void 0 ? false : t4;
+	const numeric = t5 === void 0 ? true : t5;
+	const steppers = t6 === void 0 ? "vertical" : t6;
+	const variant = t7 === void 0 ? "filled" : t7;
 	const inline = steppers === "horizontal";
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsxs(NumberField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+	const T0 = NumberField;
+	let t8;
+	if ($[0] !== error) {
+		t8 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t8;
+	} else t8 = $[1];
+	const t9 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t10;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = {
+			0: { className: "x1cy8zhl x9f619 x78zum5 x126z3so" },
+			1: { className: "x9f619 x78zum5 x126z3so x6s0dn4" }
+		};
+		$[2] = t10;
+	} else t10 = $[2];
+	const t11 = t10[!!inline << 0];
+	let t12;
+	if ($[3] !== numeric) {
+		t12 = /* @__PURE__ */ jsx(FieldInput, { numeric });
+		$[3] = numeric;
+		$[4] = t12;
+	} else t12 = $[4];
+	let t13;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = {
+			0: { className: "x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
+			2: { className: "x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv" },
+			1: { className: "x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
+			3: { className: "x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf" }
+		};
+		$[5] = t13;
+	} else t13 = $[5];
+	const t14 = t13[!!inline << 1 | !!(!inline && variant === "outlined") << 0];
+	let t15;
+	if ($[6] !== decrementLabel || $[7] !== incrementLabel || $[8] !== inline || $[9] !== variant) {
+		t15 = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+			"aria-label": decrementLabel,
+			size: "xs",
+			slot: "decrement",
+			children: /* @__PURE__ */ jsx(MinusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
+		}), /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": incrementLabel,
+			size: "xs",
+			slot: "increment",
+			children: /* @__PURE__ */ jsx(PlusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StackedStepper, {
+			label: incrementLabel,
+			outlined: variant === "outlined",
+			slot: "increment",
+			children: /* @__PURE__ */ jsx(PlusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
+		}), /* @__PURE__ */ jsx(StackedStepper, {
+			label: decrementLabel,
+			outlined: variant === "outlined",
+			slot: "decrement",
+			children: /* @__PURE__ */ jsx(MinusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
+		})] });
+		$[6] = decrementLabel;
+		$[7] = incrementLabel;
+		$[8] = inline;
+		$[9] = variant;
+		$[10] = t15;
+	} else t15 = $[10];
+	let t16;
+	if ($[11] !== t14 || $[12] !== t15) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			...t14,
+			children: t15
+		});
+		$[11] = t14;
+		$[12] = t15;
+		$[13] = t16;
+	} else t16 = $[13];
+	let t17;
+	if ($[14] !== t11 || $[15] !== t12 || $[16] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			...t11,
+			children: [t12, t16]
+		});
+		$[14] = t11;
+		$[15] = t12;
+		$[16] = t16;
+		$[17] = t17;
+	} else t17 = $[17];
+	let t18;
+	if ($[18] !== floatingLabel || $[19] !== label || $[20] !== t17 || $[21] !== variant) {
+		t18 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			label,
 			variant,
-			children: /* @__PURE__ */ jsxs("div", {
-				...{
-					0: { className: "x1cy8zhl x9f619 x78zum5 x126z3so" },
-					1: { className: "x9f619 x78zum5 x126z3so x6s0dn4" }
-				}[!!inline << 0],
-				children: [/* @__PURE__ */ jsx(FieldInput, { numeric }), /* @__PURE__ */ jsx("div", {
-					...{
-						0: { className: "x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
-						2: { className: "x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv" },
-						1: { className: "x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
-						3: { className: "x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf" }
-					}[!!inline << 1 | !!(!inline && variant === "outlined") << 0],
-					children: inline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-						"aria-label": decrementLabel,
-						size: "xs",
-						slot: "decrement",
-						children: /* @__PURE__ */ jsx(MinusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
-					}), /* @__PURE__ */ jsx(IconButton, {
-						"aria-label": incrementLabel,
-						size: "xs",
-						slot: "increment",
-						children: /* @__PURE__ */ jsx(PlusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
-					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StackedStepper, {
-						label: incrementLabel,
-						outlined: variant === "outlined",
-						slot: "increment",
-						children: /* @__PURE__ */ jsx(PlusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
-					}), /* @__PURE__ */ jsx(StackedStepper, {
-						label: decrementLabel,
-						outlined: variant === "outlined",
-						slot: "decrement",
-						children: /* @__PURE__ */ jsx(MinusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
-					})] })
-				})]
-			})
-		}), /* @__PURE__ */ jsx(FieldMessage, {
+			children: t17
+		});
+		$[18] = floatingLabel;
+		$[19] = label;
+		$[20] = t17;
+		$[21] = variant;
+		$[22] = t18;
+	} else t18 = $[22];
+	let t19;
+	if ($[23] !== description || $[24] !== error) {
+		t19 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
-		})]
-	});
+		});
+		$[23] = description;
+		$[24] = error;
+		$[25] = t19;
+	} else t19 = $[25];
+	let t20;
+	if ($[26] !== T0 || $[27] !== isDisabled || $[28] !== props$1 || $[29] !== t18 || $[30] !== t19 || $[31] !== t8 || $[32] !== t9 || $[33] !== validationBehavior) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t8,
+			validationBehavior,
+			...props$1,
+			...t9,
+			children: [t18, t19]
+		});
+		$[26] = T0;
+		$[27] = isDisabled;
+		$[28] = props$1;
+		$[29] = t18;
+		$[30] = t19;
+		$[31] = t8;
+		$[32] = t9;
+		$[33] = validationBehavior;
+		$[34] = t20;
+	} else t20 = $[34];
+	return t20;
 }
 function StackedStepper(t0) {
 	const $ = c(8);