@kanso-labs/kanso-ui 0.20.0 → 0.22.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n  /** A function may compute the class from the body's render state. */\n  className?: RACTableBodyProps<T>['className'];\n  /**\n   * What the table shows in place of rows when it has none. Drawn in a row\n   * of its own spanning every column.\n   */\n  emptyState?: ReactNode;\n  /** A function may compute the style from the body's render state. */\n  style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n  /** What the cell holds. */\n  children?: ReactNode;\n  /** A function may compute the class from the cell's render state. */\n  className?: RACCellProps['className'];\n  /**\n   * Draws this row's selection checkbox instead of `children`. The row's own\n   * text is what names the row; the box inside it takes the table's\n   * `selectLabel`.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the cell's render state. */\n  style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n  /** The column's name. */\n  children?: ReactNode;\n  /** A function may compute the class from the column's render state. */\n  className?: RACColumnProps['className'];\n  /**\n   * Draws a handle at the column's trailing edge that drags its width. Needs\n   * the table's own `resizable` as well — React Aria keeps the resize state\n   * on a container around the table, and without it there is nothing for a\n   * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n   * Aria's and apply only inside that container.\n   */\n  resizable?: boolean;\n  /**\n   * Draws the select-all checkbox instead of `children`, for the column the\n   * rows put their own checkboxes in.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the column's render state. */\n  style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, '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 TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n  /** A function may compute the class from the table's render state. */\n  className?: RACTableProps['className'];\n  /** Called as a column is dragged, with every column's width. */\n  onResize?: ResizableTableContainerProps['onResize'];\n  /** Called once a drag ends, with every column's width. */\n  onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n  /**\n   * Lets columns marked `resizable` be dragged, by putting the table in the\n   * container React Aria keeps the resize state on. A resizable table sizes\n   * to its columns rather than to its parent, and that container is what\n   * fills the width and scrolls instead.\n   */\n  resizable?: boolean;\n  /**\n   * What the resize handle is called, for a screen reader. React Aria\n   * composes it with the column's own name.\n   * @default 'Resize column'\n   */\n  resizeLabel?: string;\n  /**\n   * What the select-all checkbox is called, for a screen reader.\n   * @default 'Select all'\n   */\n  selectAllLabel?: string;\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /**\n   * Holds the header row in place while the rows scroll under it. Needs the\n   * table inside something that scrolls; on a table that does not, it draws\n   * the same as without it.\n   */\n  stickyHeader?: boolean;\n  /** A function may compute the style from the table's render state. */\n  style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the row's render state. */\n  className?: RACRowProps<T>['className'];\n  /** A function may compute the style from the row's render state. */\n  style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n  if (!selection) {\n    return children;\n  }\n  return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n  return {\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    }\n  }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n  if (selection) {\n    return <Checkbox aria-label={label} slot=\"selection\" />;\n  }\n  // The handle is a sibling of the name rather than part of it: React Aria\n  // renders it as its own element, positioned against the cell's trailing\n  // edge, which the name's own box does not reach.\n  return (state: ColumnRenderProps): ReactNode => <>\n      <span className=\"x6s0dn4 x78zum5 x126z3so\">\n        {children}\n        {sortArrowFor(state.sortDirection)}\n      </span>\n      {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n    </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n  return (state: ColumnRenderProps) => ({\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n    },\n    2: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    },\n    6: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    5: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    3: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    7: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xnnlda6 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    }\n  })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n  node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows. A call rather than a function\n// written at the prop, for the same reason the others are.\nfunction emptyContent(emptyState: ReactNode) {\n  // The return type is written out rather than inferred: `ReactNode` is a\n  // union that includes a promise, and a function inferred as returning one\n  // has to be `async`.\n  return (_state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{emptyState}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n  return {\n    className: \"x9f619 xh8yej3 xw2csxc\"\n  }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n  return {\n    0: {\n      className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n    },\n    1: {\n      className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n    }\n  }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n  return {\n    0: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z\"\n    },\n    4: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    2: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n    },\n    6: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n    },\n    1: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    5: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    7: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n  if (direction === undefined) {\n    return null;\n  }\n  return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n *   <Table.Header>\n *     <Table.Column selection />\n *     <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row id=\"first\">\n *       <Table.Cell selection />\n *       <Table.Cell>First item</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n  onResize,\n  onResizeEnd,\n  resizable = false,\n  resizeLabel = 'Resize column',\n  selectAllLabel = 'Select all',\n  selectLabel = 'Select',\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const table = <RACTable {...props} {...mergeStatefulStyles({\n    className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n  }, props)} />;\n  return <SelectAllLabelContext value={selectAllLabel}>\n      <SelectLabelContext value={selectLabel}>\n        <ResizeLabelContext value={resizeLabel}>\n          <ResizableContext value={resizable}>\n            <StickyHeaderContext value={stickyHeader}>\n              {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n                  {table}\n                </RACResizableTableContainer> : table}\n            </StickyHeaderContext>\n          </ResizableContext>\n        </ResizeLabelContext>\n      </SelectLabelContext>\n    </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `emptyState` is what it shows when there are none — a table with\n * no rows and nothing to say in their place is a blank area with a header\n * over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n  emptyState,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody<T> {...props} renderEmptyState={emptyState === undefined ? undefined : emptyContent(emptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n  children,\n  selection = false,\n  ...props\n}: TableCellProps) {\n  const label = useContext(SelectLabelContext);\n  return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n      {cellContent(children, selection, label)}\n    </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n  children,\n  resizable = false,\n  selection = false,\n  ...props\n}: TableColumnProps) {\n  const label = useContext(SelectAllLabelContext);\n  const resizeLabel = useContext(ResizeLabelContext);\n  const resizableTable = useContext(ResizableContext);\n  const sticky = useContext(StickyHeaderContext);\n  return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n      {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n    </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n  return <RACTableFooter<T> {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n  }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n  const sticky = useContext(StickyHeaderContext);\n  return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x1j6faob x1q0q8m5 xso031l\"\n    },\n    1: {}\n  }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n  label = 'Loading more',\n  ...props\n}: TableLoadMoreProps) {\n  return <RACTableLoadMoreItem {...props} {...mergeStyles({\n    className: \"xdd8jsf\"\n  }, props)} ref={dropAriaLevel}>\n      <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n        <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n      </span>\n    </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n  return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}

package/dist/components/time-field/index.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+import { TimeFieldProps, TimeValue } from "react-aria-components";
+//#region src/components/time-field/index.d.ts
+type TimeFieldProps$1<T extends TimeValue> = Omit<TimeFieldProps<T>, 'children' | 'className' | 'style'> & {
+  /** A function may compute the class from the field's render state. */
+  className?: TimeFieldProps<T>['className'];
+  /** Supporting text under the field. */
+  description?: string;
+  /** The message shown instead of the description, which also marks the field invalid. */
+  error?: string;
+  /**
+   * Whether the label floats into the box's top once the field holds a
+   * value, rather than sitting above it.
+   * @default true
+   */
+  floatingLabel?: boolean;
+  /** What the field is for. Always rendered; never a placeholder. */
+  label: string;
+  /** An icon at the box's leading end. */
+  leadingIcon?: ReactNode;
+  /** A function may compute the style from the field's render state. */
+  style?: TimeFieldProps<T>['style'];
+  /** An icon at the box's trailing end. */
+  trailingIcon?: ReactNode;
+  /**
+   * Which of the text fields page's two boxes to draw.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+/**
+ * A time typed rather than picked: one segment per part, each its own focus
+ * stop. The value is React Aria's — pass `value` with `onChange` to control
+ * it, or `defaultValue` — as a `Time` from this package's `./date` subpath.
+ *
+ * ```tsx
+ * import { Time } from '@kanso-labs/kanso-ui/date'
+ *
+ * <TimeField defaultValue={new Time(9, 30)} label="Label" />
+ * ```
+ *
+ * Whether it shows a twelve or twenty-four hour clock is the reader's
+ * locale, through React Aria's `I18nProvider`. `granularity` takes it down
+ * to seconds, and `minValue` and `maxValue` bound what may be typed.
+ *
+ * The segments are `DateField`'s, and the box, label and message are the
+ * field chrome in `src/field`. The call site's `className` and `style` land
+ * on the field as a whole, which is the element a layout positions.
+ */
+declare function TimeField$1<T extends TimeValue>({ description, error, floatingLabel, isDisabled, label, leadingIcon, trailingIcon, variant, ...props }: TimeFieldProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type TimeFieldProps$1 as TimeFieldProps, TimeField$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,57 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { segmentStyles } from "../../segments/styles.js";
+import { renderSegment } from "../../segments/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DateInput, TimeField } from "react-aria-components";
+//#region src/components/time-field/index.tsx
+/**
+* A time typed rather than picked: one segment per part, each its own focus
+* stop. The value is React Aria's — pass `value` with `onChange` to control
+* it, or `defaultValue` — as a `Time` from this package's `./date` subpath.
+*
+* ```tsx
+* import { Time } from '@kanso-labs/kanso-ui/date'
+*
+* <TimeField defaultValue={new Time(9, 30)} label="Label" />
+* ```
+*
+* Whether it shows a twelve or twenty-four hour clock is the reader's
+* locale, through React Aria's `I18nProvider`. `granularity` takes it down
+* to seconds, and `minValue` and `maxValue` bound what may be typed.
+*
+* The segments are `DateField`'s, and the box, label and message are the
+* field chrome in `src/field`. The call site's `className` and `style` land
+* on the field as a whole, which is the element a layout positions.
+*/
+function TimeField$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, trailingIcon, variant = "filled", ...props$1 }) {
+	const validationBehavior = useFieldValidationBehavior();
+	return /* @__PURE__ */ jsxs(TimeField, {
+		isDisabled,
+		isInvalid: invalidFrom(error),
+		validationBehavior,
+		...props$1,
+		...mergeStatefulStyles(props(fieldStyles.root), props$1),
+		children: [/* @__PURE__ */ jsx(FieldBox, {
+			floatingLabel,
+			isPopulated: true,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(DateInput, {
+				...props(segmentStyles.input),
+				children: renderSegment
+			}) })
+		}), /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error
+		})]
+	});
+}
+//#endregion
+export { TimeField$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTimeFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A time typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAS,YAA+B,EACtC,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,cACA,UAAU,UACV,GAAG,WACiB;CACpB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,WAAD;EAA6B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAxL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAI3B,aAAA;GAAmB;GAAO,SAAS;GAAa,UAAU;GAAuB;GAC7E,UAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;IAAc,GAAI,MAAa,cAAc,KAAK;IAC/C,UAAA;GACW,CAAA,EACJ,CAAA;EACJ,CAAA,GACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA,CACzC;;AAClB"}

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

@@ -0,0 +1,116 @@
+import { ReactNode } from "react";
+import { TreeItemProps, TreeLoadMoreItemProps, TreeProps, TreeSection } from "react-aria-components";
+//#region src/components/tree/index.d.ts
+type RACTreeSectionProps<T> = Parameters<typeof TreeSection<T>>[0];
+type TreeHeaderProps = {
+  /** The section's heading. */
+  children?: ReactNode;
+};
+type TreeItemProps$1<T extends object = object> = Omit<TreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {
+  /** The rows nested under this one, as further `Tree.Item` entries. */
+  children?: ReactNode;
+  /** A function may compute the class from the row's render state. */
+  className?: TreeItemProps<T>['className'];
+  /** Content before the headline: an avatar, an icon. */
+  leading?: ReactNode;
+  /** A function may compute the style from the row's render state. */
+  style?: TreeItemProps<T>['style'];
+  /** A second line under the headline, in the muted role. */
+  supporting?: ReactNode;
+  /** Content after the headline, such as a count or a control. */
+  trailing?: ReactNode;
+};
+type TreeItemText = {
+  /** The row's headline — the one thing it is mostly about. */
+  headline: string;
+  /** What typeahead matches the row on. Defaults to the headline. */
+  textValue?: string;
+} | {
+  /** The row's headline, as something other than a plain string. */
+  headline?: ReactNode;
+  /** What typeahead matches the row on, and what names it. */
+  textValue: string;
+};
+type TreeLoadMoreProps = Omit<TreeLoadMoreItemProps, '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 TreeProps$1<T extends object> = Omit<TreeProps<T>, 'className' | 'style'> & {
+  /** A function may compute the class from the tree's render state. */
+  className?: TreeProps<T>['className'];
+  /**
+   * What each row's selection checkbox is called, for a screen reader. The
+   * row's own text is what names the row; this names the box inside it.
+   * @default 'Select'
+   */
+  selectLabel?: string;
+  /** A function may compute the style from the tree's render state. */
+  style?: TreeProps<T>['style'];
+};
+type TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {
+  /**
+   * The rows 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 whose rows nest. Which rows are open is React Aria's: pass
+ * `expandedKeys` with `onExpandedChange` to control it, or
+ * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's
+ * too — set `selectionMode` to `single` or `multiple`.
+ *
+ * ```tsx
+ * <Tree aria-label="Label">
+ *   <Tree.Item headline="First item" id="first">
+ *     <Tree.Item headline="Second item" id="second" />
+ *   </Tree.Item>
+ * </Tree>
+ * ```
+ *
+ * Each row is the row every list here draws, indented by its depth, with a
+ * caret on the rows that have children. Name the tree 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 Tree$1<T extends object>({ selectLabel, ...props }: TreeProps$1<T>): import("react").JSX.Element;
+declare namespace Tree$1 {
+  var Item: typeof TreeItem$1;
+  var LoadMore: typeof TreeLoadMore;
+  var Section: typeof TreeSection$1;
+}
+/**
+ * One row, and the rows under it. Its slots are the row's: `leading`, the
+ * `headline`, `supporting` under it, and `trailing`. Give every row an `id`
+ * — that is the key selection and expansion are reported by.
+ *
+ * Rows nested as `children` are what make it a branch; a row with none is a
+ * leaf and draws no caret. `textValue` is what typeahead matches on, and is
+ * taken from a plain-string headline when it is not given.
+ */
+declare function TreeItem$1<T extends object = object>({ children, headline, leading, supporting, textValue, trailing, ...props }: TreeItemProps$1<T>): import("react").JSX.Element;
+/**
+ * The row the tree shows while it is fetching more. React Aria calls
+ * `onLoadMore` when this comes into view, and draws it only while
+ * `isLoading`.
+ */
+declare function TreeLoadMore({ label, ...props }: TreeLoadMoreProps): import("react").JSX.Element;
+/**
+ * A named group of rows, with its heading above them.
+ */
+declare function TreeSection$1<T extends object = object>({ children, header, ...props }: TreeSectionProps<T>): import("react").JSX.Element;
+//#endregion
+export { type TreeHeaderProps, type TreeItemProps$1 as TreeItemProps, type TreeLoadMoreProps, type TreeProps$1 as TreeProps, type TreeSectionProps, Tree$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tree/index.js

@@ -0,0 +1,245 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { ChevronEndGlyph } from "../../glyphs/index.js";
+import ProgressIndicator from "../progress-indicator/index.js";
+import Checkbox from "../checkbox/index.js";
+import { rowStyles } from "../../row/styles.js";
+import { RowContent } from "../../row/index.js";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Button, Tree, TreeHeader, TreeItem, TreeItemContent, TreeLoadMoreItem, TreeSection } from "react-aria-components";
+//#region src/components/tree/index.tsx
+const SelectLabelContext = createContext("Select");
+const styles = { indent: {
+	kZCmMZ: "x1187sqy",
+	$$css: true
+} };
+function chevronClassName() {
+	return { className: "x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv" }.className ?? "";
+}
+function chevronFor(state) {
+	if (!state.hasChildItems) return /* @__PURE__ */ jsx("span", { className: "xxk0z11 x2lah0s xvy4d1p" });
+	return /* @__PURE__ */ jsx(Button, {
+		className: chevronClassName,
+		slot: "chevron",
+		children: /* @__PURE__ */ jsx(ChevronEndGlyph, { ...{
+			0: { className: "xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7" },
+			1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl" }
+		}[!!state.isExpanded << 0] })
+	});
+}
+function itemContent(headline, leading, supporting, trailing, selectLabel) {
+	return (state) => /* @__PURE__ */ jsx(RowContent, {
+		isDisabled: state.isDisabled,
+		isSelected: state.isSelected,
+		leading: leadingFor(state, leading, selectLabel),
+		supporting,
+		trailing,
+		children: headline
+	});
+}
+function itemStyles(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== void 0 && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+}
+/**
+* The caret, the selection checkbox, then whatever the row was given. Its
+* return type is written out rather than inferred: `ReactNode` is a union
+* that includes a promise, and a function inferred as returning one has to
+* be `async`.
+*/
+function leadingFor(state, leading, selectLabel) {
+	const selects = state.selectionBehavior === "toggle" && state.selectionMode !== "none";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		chevronFor(state),
+		selects ? /* @__PURE__ */ jsx(Checkbox, {
+			"aria-label": selectLabel,
+			slot: "selection"
+		}) : null,
+		leading
+	] });
+}
+function textValueFor(textValue, headline) {
+	if (textValue !== void 0) return textValue;
+	return typeof headline === "string" ? headline : "";
+}
+/**
+* A list whose rows nest. Which rows are open is React Aria's: pass
+* `expandedKeys` with `onExpandedChange` to control it, or
+* `defaultExpandedKeys` to let it keep its own. Selection is React Aria's
+* too — set `selectionMode` to `single` or `multiple`.
+*
+* ```tsx
+* <Tree aria-label="Label">
+*   <Tree.Item headline="First item" id="first">
+*     <Tree.Item headline="Second item" id="second" />
+*   </Tree.Item>
+* </Tree>
+* ```
+*
+* Each row is the row every list here draws, indented by its depth, with a
+* caret on the rows that have children. Name the tree 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 Tree$1({ selectLabel = "Select", ...props }) {
+	return /* @__PURE__ */ jsx(SelectLabelContext, {
+		value: selectLabel,
+		children: /* @__PURE__ */ jsx(Tree, {
+			...props,
+			...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll" }, props)
+		})
+	});
+}
+/**
+* A named group of rows. `header` names it, and is what a screen reader
+* reads before the rows inside.
+*/
+function TreeHeader$1(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(TreeHeader, {
+			className: "x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* One row, and the rows under it. Its slots are the row's: `leading`, the
+* `headline`, `supporting` under it, and `trailing`. Give every row an `id`
+* — that is the key selection and expansion are reported by.
+*
+* Rows nested as `children` are what make it a branch; a row with none is a
+* leaf and draws no caret. `textValue` is what typeahead matches on, and is
+* taken from a plain-string headline when it is not given.
+*/
+function TreeItem$1(t0) {
+	const $ = c(18);
+	const { children, headline, leading, supporting, textValue, trailing, ...props } = t0;
+	const selectLabel = useContext(SelectLabelContext);
+	const T0 = TreeItem;
+	let t1;
+	if ($[0] !== headline || $[1] !== textValue) {
+		t1 = textValueFor(textValue, headline);
+		$[0] = headline;
+		$[1] = textValue;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = mergeStatefulStyles(itemStyles(supporting), props);
+	let t3;
+	if ($[3] !== headline || $[4] !== leading || $[5] !== selectLabel || $[6] !== supporting || $[7] !== trailing) {
+		t3 = itemContent(headline, leading, supporting, trailing, selectLabel);
+		$[3] = headline;
+		$[4] = leading;
+		$[5] = selectLabel;
+		$[6] = supporting;
+		$[7] = trailing;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TreeItemContent, { children: t3 });
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== T0 || $[12] !== children || $[13] !== props || $[14] !== t1 || $[15] !== t2 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(T0, {
+			textValue: t1,
+			...props,
+			...t2,
+			children: [t4, children]
+		});
+		$[11] = T0;
+		$[12] = children;
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+/**
+* The row the tree shows while it is fetching more. React Aria calls
+* `onLoadMore` when this comes into view, and draws it only while
+* `isLoading`.
+*/
+function TreeLoadMore({ label = "Loading more", ...props }) {
+	return /* @__PURE__ */ jsx(TreeLoadMoreItem, {
+		...props,
+		...mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8" }, props),
+		children: /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": label,
+			isIndeterminate: true,
+			size: "24px",
+			variant: "circular"
+		})
+	});
+}
+/**
+* A named group of rows, with its heading above them.
+*/
+function TreeSection$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 = TreeSection;
+		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(TreeHeader$1, { 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;
+}
+Tree$1.Item = TreeItem$1;
+Tree$1.LoadMore = TreeLoadMore;
+Tree$1.Section = TreeSection$1;
+//#endregion
+export { Tree$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["children","props","header"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } 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';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline 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 TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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 TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// 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 x1w5n3ug 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 headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): 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 the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so 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.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: TreeItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `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 Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\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 TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are 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. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}

package/dist/date.d.ts

@@ -0,0 +1 @@
+export * from "@internationalized/date";

package/dist/date.js

@@ -0,0 +1 @@
+export * from "@internationalized/date";

package/dist/drag/hooks.d.ts

@@ -0,0 +1,25 @@
+import { useDragAndDrop } from "react-aria-components";
+//#region src/drag/hooks.d.ts
+/**
+ * React Aria's drag and drop hooks, with this library's drop indicator and
+ * drag preview as the defaults. Hand what it returns to a `List`, `ListBox`,
+ * `Table` or `Tree` as `dragAndDropHooks`.
+ *
+ * ```tsx
+ * const { dragAndDropHooks } = useDragAndDrop({
+ *   getItems: (keys) => [...keys].map((key) => ({ 'text/plain': String(key) })),
+ *   onReorder: (event) => { … },
+ * })
+ *
+ * <List aria-label="Label" dragAndDropHooks={dragAndDropHooks}>…</List>
+ * ```
+ *
+ * Everything else is React Aria's and is not wrapped — `getItems`,
+ * `onReorder`, `onInsert`, `acceptedDragTypes` and the rest decide what may
+ * be dragged where, which is the page's business rather than the row's.
+ * Passing `renderDropIndicator` or `renderDragPreview` replaces the default.
+ */
+declare function useDragAndDrop$1(options: Parameters<typeof useDragAndDrop>[0]): ReturnType<typeof useDragAndDrop>;
+//#endregion
+export { useDragAndDrop$1 as useDragAndDrop };
+//# sourceMappingURL=hooks.d.ts.map