@kanso-labs/kanso-ui 0.18.0 → 0.19.0

package/dist/components/index.d.ts

@@ -15,8 +15,11 @@ import Form, { FormProps } from "./form/index.js";
 import IconButton, { IconButtonProps } from "./icon-button/index.js";
 import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
+import ListBox, { ListBoxProps } from "./list-box/index.js";
 import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
+import Separator, { SeparatorProps } from "./separator/index.js";
+import Menu, { MenuProps } from "./menu/index.js";
 import Meter, { MeterProps } from "./meter/index.js";
 import NumberField, { NumberFieldProps } from "./number-field/index.js";
 import Popover, { PopoverProps } from "./popover/index.js";
@@ -24,7 +27,6 @@ import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import ProgressIndicator, { ProgressIndicatorProps } from "./progress-indicator/index.js";
 import RadioGroup, { Radio, RadioGroupProps, RadioProps } from "./radio-group/index.js";
 import SearchField, { SearchFieldProps } from "./search-field/index.js";
-import Separator, { SeparatorProps } from "./separator/index.js";
 import Sheet, { SheetProps } from "./sheet/index.js";
 import Slider, { SliderProps } from "./slider/index.js";
 import Snackbar, { SnackbarProps } from "./snackbar/index.js";
@@ -37,4 +39,4 @@ import Text, { TextProps } from "./text/index.js";
 import TextArea, { TextAreaProps } from "./text-area/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
 import Tooltip, { TooltipProps } from "./tooltip/index.js";
-export { AppBar, type AppBarProps, Avatar, type AvatarProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Dialog, type DialogProps, Feed, type FeedProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, type SearchFieldProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Tooltip, type TooltipProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Dialog, type DialogProps, Feed, type FeedProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Menu, type MenuProps, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, type SearchFieldProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Tooltip, type TooltipProps };

package/dist/components/list-box/index.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from "react";
+import { ListBoxItemProps, ListBoxLoadMoreItemProps, ListBoxProps, ListBoxSectionProps } from "react-aria-components";
+//#region src/components/list-box/index.d.ts
+type ListBoxItemProps$1<T extends object = object> = {
+  /** The option's headline — the one thing it is mostly about. */
+  children?: ReactNode;
+  /** A function may compute the class from the option's render state. */
+  className?: ListBoxItemProps<T>['className'];
+  /** Content before the headline: an avatar, an icon, a checkbox. */
+  leading?: ReactNode;
+  /** A function may compute the style from the option's render state. */
+  style?: ListBoxItemProps<T>['style'];
+  /** A second line under the headline, in the muted role. */
+  supporting?: ReactNode;
+  /** Content after the headline, such as an amount or a control. */
+  trailing?: ReactNode;
+} & Omit<ListBoxItemProps<T>, 'children' | 'className' | 'style'>;
+type ListBoxLoadMoreProps = Omit<ListBoxLoadMoreItemProps, 'children'> & {
+  /**
+   * What the row says while it is loading. Read by a screen reader; the ring
+   * itself carries no text.
+   * @default 'Loading more'
+   */
+  label?: string;
+};
+type ListBoxProps$1<T extends object> = Omit<ListBoxProps<T>, 'className' | 'style'> & {
+  /** A function may compute the class from the list's render state. */
+  className?: ListBoxProps<T>['className'];
+  /** A function may compute the style from the list's render state. */
+  style?: ListBoxProps<T>['style'];
+};
+type ListBoxSectionProps$1<T extends object = object> = Omit<ListBoxSectionProps<T>, 'children'> & {
+  /**
+   * The options in the section. A section built from data puts React Aria's
+   * `Collection` in here rather than a render function, since the header is
+   * an element beside them.
+   */
+  children?: ReactNode;
+  /**
+   * The section's heading, rendered through React Aria's header so the
+   * section is named by it. A section without one is a group with no name.
+   */
+  header?: ReactNode;
+};
+/**
+ * A list of options one or more of which can be selected. Selection is React
+ * Aria's: set `selectionMode` to `single` or `multiple`, and pass
+ * `selectedKeys` with `onSelectionChange` to control it or
+ * `defaultSelectedKeys` to let it keep its own. A list that only responds to
+ * a press takes `onAction` on the option instead.
+ *
+ * Composed from parts, since an option's slots take arbitrary content:
+ * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list
+ * with `aria-label` or `aria-labelledby` — nothing here labels it for you.
+ *
+ * The call site's `className` and `style` land on the container, which is
+ * the element a layout positions.
+ */
+declare function ListBox$1<T extends object>(props: ListBoxProps$1<T>): import("react").JSX.Element;
+declare namespace ListBox$1 {
+  var Item: typeof ListBoxItem$1;
+  var LoadMore: typeof ListBoxLoadMore;
+  var Section: typeof ListBoxSection$1;
+}
+/**
+ * One option. Its slots are the row's: `leading`, the headline as children,
+ * `supporting` under it, and `trailing`. Give every option an `id` — that is
+ * the key selection is reported by.
+ */
+declare function ListBoxItem$1<T extends object = object>({ children, leading, supporting, trailing, ...props }: ListBoxItemProps$1<T>): import("react").JSX.Element;
+/**
+ * The row the list shows while it is fetching more. React Aria calls
+ * `onLoadMore` when this comes into view, and draws it only while
+ * `isLoading` — so a list that pages as it scrolls needs nothing else.
+ */
+declare function ListBoxLoadMore({ label, ...props }: ListBoxLoadMoreProps): import("react").JSX.Element;
+/**
+ * A named group of options. `header` names it, and is what a screen reader
+ * reads before the options inside.
+ */
+declare function ListBoxSection$1<T extends object = object>({ children, header, ...props }: ListBoxSectionProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type ListBoxItemProps$1 as ListBoxItemProps, type ListBoxLoadMoreProps, type ListBoxProps$1 as ListBoxProps, type ListBoxSectionProps$1 as ListBoxSectionProps, ListBox$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,200 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import ProgressIndicator from "../progress-indicator/index.js";
+import { rowStyles } from "../../row/styles.js";
+import { RowContent } from "../../row/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Header, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection } from "react-aria-components";
+//#region src/components/list-box/index.tsx
+function itemContent(children, leading, supporting, trailing) {
+	return (state) => /* @__PURE__ */ jsx(RowContent, {
+		isDisabled: state.isDisabled,
+		isSelected: state.isSelected,
+		leading,
+		supporting,
+		trailing,
+		children
+	});
+}
+function itemStyles(state) {
+	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+}
+/**
+* A list of options one or more of which can be selected. Selection is React
+* Aria's: set `selectionMode` to `single` or `multiple`, and pass
+* `selectedKeys` with `onSelectionChange` to control it or
+* `defaultSelectedKeys` to let it keep its own. A list that only responds to
+* a press takes `onAction` on the option instead.
+*
+* Composed from parts, since an option's slots take arbitrary content:
+* `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list
+* with `aria-label` or `aria-labelledby` — nothing here labels it for you.
+*
+* The call site's `className` and `style` land on the container, which is
+* the element a layout positions.
+*/
+function ListBox$1(props) {
+	const $ = c(5);
+	let t0;
+	if ($[0] !== props) {
+		t0 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll" }, props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ListBox, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+/**
+* One option. Its slots are the row's: `leading`, the headline as children,
+* `supporting` under it, and `trailing`. Give every option an `id` — that is
+* the key selection is reported by.
+*/
+function ListBoxItem$1(t0) {
+	const $ = c(18);
+	let T0;
+	let children;
+	let leading;
+	let supporting;
+	let t1;
+	let t2;
+	let trailing;
+	if ($[0] !== t0) {
+		const { children: t3, leading: t4, supporting: t5, trailing: t6, ...props } = t0;
+		children = t3;
+		leading = t4;
+		supporting = t5;
+		trailing = t6;
+		T0 = ListBoxItem;
+		t1 = props;
+		t2 = mergeStatefulStyles(itemStyles, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = children;
+		$[3] = leading;
+		$[4] = supporting;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = trailing;
+	} else {
+		T0 = $[1];
+		children = $[2];
+		leading = $[3];
+		supporting = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		trailing = $[7];
+	}
+	let t3;
+	if ($[8] !== children || $[9] !== leading || $[10] !== supporting || $[11] !== trailing) {
+		t3 = itemContent(children, leading, supporting, trailing);
+		$[8] = children;
+		$[9] = leading;
+		$[10] = supporting;
+		$[11] = trailing;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== T0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[13] = T0;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	return t4;
+}
+/**
+* The row the list shows while it is fetching more. React Aria calls
+* `onLoadMore` when this comes into view, and draws it only while
+* `isLoading` — so a list that pages as it scrolls needs nothing else.
+*/
+function ListBoxLoadMore({ label = "Loading more", ...props }) {
+	return /* @__PURE__ */ jsx(ListBoxLoadMoreItem, {
+		...props,
+		...mergeStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8" }, props),
+		children: /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": label,
+			isIndeterminate: true,
+			size: "24px",
+			variant: "circular"
+		})
+	});
+}
+/**
+* A named group of options. `header` names it, and is what a screen reader
+* reads before the options inside.
+*/
+function ListBoxSection$1(t0) {
+	const $ = c(14);
+	let T0;
+	let children;
+	let header;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { children: t3, header: t4, ...props } = t0;
+		children = t3;
+		header = t4;
+		T0 = ListBoxSection;
+		t1 = props;
+		t2 = mergeStyles({ className: "x9f619 x78zum5 xdt5ytf" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = children;
+		$[3] = header;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		T0 = $[1];
+		children = $[2];
+		header = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== header) {
+		t3 = header === void 0 ? null : /* @__PURE__ */ jsx(Header, {
+			className: "x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz",
+			children: header
+		});
+		$[6] = header;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== T0 || $[9] !== children || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(T0, {
+			...t1,
+			...t2,
+			children: [t3, children]
+		});
+		$[8] = T0;
+		$[9] = children;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+ListBox$1.Item = ListBoxItem$1;
+ListBox$1.LoadMore = ListBoxLoadMore;
+ListBox$1.Section = ListBoxSection$1;
+//#endregion
+export { ListBox$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["props","header","children"],"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 { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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  /** 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> = 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, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\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 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: ListBoxItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\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({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, 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  supporting,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, supporting, trailing)}\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({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\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({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{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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"}

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

@@ -0,0 +1,151 @@
+import { OverlayAlign, OverlaySide } from "../../styles/overlay.js";
+import Separator$1 from "../separator/index.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { MenuItemProps, MenuLoadMoreItemProps, MenuProps, MenuSectionProps, MenuTriggerProps } from "react-aria-components";
+//#region src/components/menu/index.d.ts
+type MenuAlign = OverlayAlign;
+type MenuContentProps<T extends object = object> = Omit<MenuProps<T>, 'className' | 'style'> & {
+  /** Where the menu lines up along that side. @default 'start' */
+  align?: MenuAlign;
+  /** Moves the menu along that side, in pixels. */
+  alignOffset?: number;
+  /** A function may compute the class from the menu's render state. */
+  className?: MenuProps<T>['className'];
+  /**
+   * Where to portal the menu. Defaults to the end of `<body>`, which is right
+   * for an app that sets its StyleX theme on `:root`. An app that scopes the
+   * theme to a subtree has to point this at an element inside it, or the menu
+   * renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: Element;
+  /** Which side of the trigger the menu opens on. @default 'bottom' */
+  side?: MenuSide;
+  /** How far the menu sits from the trigger, in pixels. @default 8 */
+  sideOffset?: number;
+  /** A function may compute the style from the menu's render state. */
+  style?: MenuProps<T>['style'];
+};
+type MenuItemProps$1<T extends object = object> = {
+  /** The item's label — what it does. */
+  children?: ReactNode;
+  /** A function may compute the class from the item's render state. */
+  className?: MenuItemProps<T>['className'];
+  /** Content before the label, usually an icon. */
+  leading?: ReactNode;
+  /**
+   * The keystroke that runs the item, drawn as a keycap at the end. Goes
+   * through React Aria's keyboard slot, so a screen reader announces it
+   * apart from the label rather than reading the two as one name.
+   */
+  shortcut?: ReactNode;
+  /** A function may compute the style from the item's render state. */
+  style?: MenuItemProps<T>['style'];
+  /** Content after the label, before the shortcut. */
+  trailing?: ReactNode;
+} & Omit<MenuItemProps<T>, 'children' | 'className' | 'style'>;
+type MenuLoadMoreProps = Omit<MenuLoadMoreItemProps, 'children'> & {
+  /**
+   * What the row says while it is loading. Read by a screen reader; the ring
+   * itself carries no text.
+   * @default 'Loading more'
+   */
+  label?: string;
+};
+type MenuProps$1 = Omit<MenuTriggerProps, 'children'> & {
+  /** The trigger, then the `Menu.Content` it opens. */
+  children?: ReactNode;
+};
+type MenuSectionProps$1<T extends object = object> = Omit<MenuSectionProps<T>, 'children'> & {
+  /**
+   * The items in the section. A section built from data puts React Aria's
+   * `Collection` in here rather than a render function, since the header is
+   * an element beside them.
+   */
+  children?: ReactNode;
+  /**
+   * The section's heading, rendered through React Aria's header so the
+   * section is named by it. A section without one is a group with no name.
+   */
+  header?: ReactNode;
+};
+type MenuSeparatorProps = Omit<ComponentProps<typeof Separator$1>, 'orientation'>;
+type MenuSide = OverlaySide;
+type MenuSubmenuProps = {
+  /**
+   * The item that opens the submenu, then the `Menu.Content` it opens.
+   * Exactly those two, in that order.
+   */
+  children: ReactElement[];
+  /**
+   * How long the pointer rests on the item before the submenu opens, in
+   * milliseconds.
+   * @default 200
+   */
+  delay?: number;
+};
+/**
+ * A list of actions opened from a control. Open state is React Aria's: pass
+ * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep
+ * its own.
+ *
+ * A `Button` or `IconButton` placed directly inside opens it; everything the
+ * menu shows goes in `Menu.Content`, since the trigger lives in the page
+ * while the menu is portalled out to the end of the body.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Button>Open</Button>
+ *   <Menu.Content aria-label="Label">
+ *     <Menu.Item id="first">First item</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ */
+declare function Menu$1({ children, ...props }: MenuProps$1): import("react").JSX.Element;
+declare namespace Menu$1 {
+  var Content: typeof MenuContent;
+  var Item: typeof MenuItem$1;
+  var LoadMore: typeof MenuLoadMore;
+  var Section: typeof MenuSection$1;
+  var Separator: typeof MenuSeparator;
+  var Submenu: typeof MenuSubmenu;
+}
+/**
+ * The menu itself, and the surface it is drawn on. React Aria names it after
+ * the control that opened it, so `aria-label` here is ignored — name the
+ * trigger instead.
+ *
+ * The call site's `className` and `style` land on the surface, which is the
+ * element a layout positions.
+ */
+declare function MenuContent<T extends object = object>({ align, alignOffset, className, container, side, sideOffset, style, ...props }: MenuContentProps<T>): import("react").JSX.Element;
+/**
+ * One action. Its slots are the row's: `leading` before the label, the label
+ * as children, and `trailing` after it, with `shortcut` at the end. An item
+ * that opens a submenu draws the chevron itself.
+ */
+declare function MenuItem$1<T extends object = object>({ children, leading, shortcut, trailing, ...props }: MenuItemProps$1<T>): import("react").JSX.Element;
+/**
+ * The row shown while more items are being fetched. React Aria calls
+ * `onLoadMore` when it comes into view, and draws it only while `isLoading`.
+ */
+declare function MenuLoadMore({ label, ...props }: MenuLoadMoreProps): import("react").JSX.Element;
+/**
+ * A named group of items. `header` names it, and is what a screen reader
+ * reads before the items inside.
+ */
+declare function MenuSection$1<T extends object = object>({ children, header, ...props }: MenuSectionProps$1<T>): import("react").JSX.Element;
+/**
+ * A rule between groups of items. It takes its role from the menu around it,
+ * so it needs no slot from the call site.
+ */
+declare function MenuSeparator(props: MenuSeparatorProps): import("react").JSX.Element;
+/**
+ * An item that opens a menu of its own. Takes exactly two children: the
+ * `Menu.Item` that opens it, then the `Menu.Content` it opens.
+ */
+declare function MenuSubmenu(props: MenuSubmenuProps): import("react").JSX.Element;
+//#endregion
+export { type MenuAlign, type MenuContentProps, type MenuItemProps$1 as MenuItemProps, type MenuLoadMoreProps, type MenuProps$1 as MenuProps, type MenuSectionProps$1 as MenuSectionProps, type MenuSeparatorProps, type MenuSide, type MenuSubmenuProps, Menu$1 as default };
+//# sourceMappingURL=index.d.ts.map