@maxio-com/react-ui-components 9.24.0 → 9.25.0

package/dist/skills/maxio-react/SKILL.md

@@ -70,4 +70,5 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
 - [Patterns / Auth Layout](references/patterns-auth-layout.md)
 - [Patterns / Side Nav](references/patterns-side-nav.md)
 - [Patterns / Top Bar](references/patterns-top-bar.md)
+- [Migration Guides / v9](references/migration-guides-v9.md)
 - [Deprecated / TextInput](references/deprecated-textinput.md)

package/dist/skills/maxio-react/references/components-forms-textfield.md

@@ -60,6 +60,7 @@ messaging with the field so users understand the expected value.
 
 - **[TextArea](components-forms-textarea.md)**: use for longer, multi-line free-form content.
 - **[TextInput](deprecated-textinput.md)**: deprecated predecessor. Use TextField for new React usage.
+- **[Migrating from TextInput to TextField](migration-guides-v9.md)**: prop mapping and checklist for replacing legacy TextInput usage.
 - **[Select](components-forms-select.md)**: use when users choose from a shorter closed list.
 - **[ComboBox](components-forms-combobox.md)**: use when users choose from a list and typing should filter options.
 - **[IconButton](components-buttons-iconbutton.md)**: use for compact actions inside trailing or leading content.

package/dist/skills/maxio-react/references/components-listbox.md

@@ -99,6 +99,19 @@ selection when all options are selected, and updates controlled and uncontrolled
 state through the same `onSelectionChange` API. When `disallowEmptySelection` is
 set, the toggle is disabled after all options are selected.
 
+## Async Loading
+
+Set `onLoadMore` on `ListBox` to load another page when the user scrolls near the
+bottom, and set `isLoading` while options are loading. ListBox manages the loading
+item internally and displays a small spinner for both initial loading and
+pagination. Use `scrollOffset` to adjust how early the next page loads.
+
+Pass options through `items` with a child render function, or use static children.
+Give the listbox a bounded height with scrolling, as shown in the **Async Loading**
+story. Omit `onLoadMore` when no pages remain, or use a pagination callback that
+stops requesting pages at the end (as `useAsyncList` does). `renderEmptyState`
+provides the message when loading finishes without results.
+
 ## Imports
 
 ```tsx
@@ -217,3 +230,43 @@ const EmptyState = () => (
   </ListBox>
 );
 ```
+
+### Async Loading
+
+Load options in pages as users scroll. This example simulates a delayed API
+with 60 options, loading 20 at a time without an external network request.
+
+```tsx
+const AsyncLoading = () => {
+  const list = useAsyncList<{ id: number; name: string }>({
+    async load({ cursor }) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const start = Number(cursor ?? 0);
+      const end = start + 20;
+
+      return {
+        items: Array.from({ length: 20 }, (_, index) => ({
+          id: start + index + 1,
+          name: `Option ${start + index + 1}`,
+        })),
+        cursor: end < 60 ? String(end) : undefined,
+      };
+    },
+  });
+
+  return (
+    <ListBox
+      aria-label="Async options"
+      selectionMode="single"
+      items={list.items}
+      isLoading={list.isLoading}
+      onLoadMore={list.loadMore}
+      style={{ height: 240, width: 280, overflow: 'auto' }}
+      renderEmptyState={() => 'No results found.'}
+    >
+      {(item) => <ListBox.Item id={item.id}>{item.name}</ListBox.Item>}
+    </ListBox>
+  );
+};
+```

package/dist/skills/maxio-react/references/deprecated-textinput.md

@@ -6,6 +6,9 @@
 
 ### Overview
 
+TextInput is deprecated. For migration details, see
+[Migrating from TextInput to TextField](migration-guides-v9.md).
+
 TextInput lets users enter or edit a short, single-line text value in a
 form.
 
@@ -61,13 +64,16 @@ form.
 ### Related
 
 - **[TextField](components-forms-textfield.md)**: preferred replacement for TextInput in new React usage.
+- **[Migrating from TextInput to TextField](migration-guides-v9.md)**: prop mapping and checklist for replacing legacy TextInput usage.
 - **[Select](components-forms-select.md)**: use when users choose from a shorter closed list.
 - **[ComboBox](components-forms-combobox.md)**: use when users choose from a list and typing should filter options.
 - **[IconButton](components-buttons-iconbutton.md)**: use for compact actions inside trailing or leading content.
 
 ## React
 
-TextInput is deprecated. Use TextField for new React usage.
+TextInput is deprecated. Use TextField for new React usage. For migration
+details, see
+[Migrating from TextInput to TextField](migration-guides-v9.md).
 
 ```tsx
 import { TextInput } from '@maxio-com/react-ui-components';

package/dist/skills/maxio-react/references/migration-guides-v9.md

@@ -0,0 +1,299 @@
+# What Changed in v9
+
+`@maxio-com/react-ui-components` is currently on the `9.x` line. This page
+tracks every component deprecated during v9 as its own section, so anyone
+catching up from an older release can see everything worth migrating in one
+place before the next major version removes deprecated APIs entirely.
+
+This page grows as more components are deprecated during v9 — each one gets
+its own section below, with a prop mapping, behavior notes, and a checklist.
+
+## TextInput to TextField
+
+_Deprecated in v9.10.0._
+
+`TextInput` is deprecated. Use `TextField` for new React forms and migrate
+existing usage when you are already touching the surrounding form.
+
+`TextField` keeps the same visual treatment and single-line input behavior,
+but it exposes the React Aria Components field API directly. Most migrations
+are a small prop rename from the legacy `TextInput` API to the supported
+`TextField` API.
+
+### Before and After
+
+<div className="migration-before-after">
+
+<div>
+
+#### Before
+
+```tsx
+import { TextInput } from '@maxio-com/react-ui-components';
+
+<TextInput
+  label="Customer name"
+  placeholder="Acme Co."
+  helperText="Use the legal business name."
+  value={customerName}
+  invalid={!customerName}
+  errorMessage="Enter a customer name."
+  disabled={isSaving}
+  onChange={setCustomerName}
+/>;
+```
+
+</div>
+
+<div>
+
+#### After
+
+```tsx
+import { TextField } from '@maxio-com/react-ui-components';
+
+<TextField
+  label="Customer name"
+  placeholder="Acme Co."
+  description="Use the legal business name."
+  value={customerName}
+  isInvalid={!customerName}
+  errorMessage="Enter a customer name."
+  isDisabled={isSaving}
+  onChange={setCustomerName}
+/>;
+```
+
+</div>
+
+</div>
+
+### Prop Mapping
+
+<div className="migration-prop-legend">
+  <div className="migration-prop-legend__item">
+    <span className="migration-prop-legend__swatch migration-prop-legend__swatch--changed" />
+    Renamed or changed behavior
+  </div>
+  <div className="migration-prop-legend__item">
+    <span className="migration-prop-legend__swatch migration-prop-legend__swatch--removed" />
+    No direct replacement
+  </div>
+  <div className="migration-prop-legend__item">
+    <span className="migration-prop-legend__swatch migration-prop-legend__swatch--unchanged" />
+    Carries over unchanged
+  </div>
+</div>
+
+<table className="migration-prop-table">
+  <thead>
+    <tr>
+      <th>TextInput prop</th>
+      <th>TextField prop</th>
+      <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>label</code></td>
+      <td><code>label</code></td>
+      <td>Same visible label prop. Prefer a visible label whenever possible.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>helperText</code></td>
+      <td><code>description</code></td>
+      <td>Rename helper copy to <code>description</code>; it is hidden when an error shows.</td>
+    </tr>
+    <tr>
+      <td><code>errorMessage</code></td>
+      <td><code>errorMessage</code></td>
+      <td>Same error copy prop. Pair it with invalid state.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>invalid</code></td>
+      <td><code>isInvalid</code></td>
+      <td>Rename to the React Aria Components state prop.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>disabled</code></td>
+      <td><code>isDisabled</code></td>
+      <td>Rename to the React Aria Components state prop.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>readOnly</code></td>
+      <td><code>isReadOnly</code></td>
+      <td>Rename to the React Aria Components state prop.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>required</code></td>
+      <td><code>isRequired</code></td>
+      <td>Not equivalent: <code>TextInput</code>'s native <code>required</code> attribute was silently ignored (see Behavior Notes). <code>isRequired</code> is the first working required state.</td>
+    </tr>
+    <tr>
+      <td><code>placeholder</code></td>
+      <td><code>placeholder</code></td>
+      <td>Same example-value prop. Do not use it as the only label.</td>
+    </tr>
+    <tr>
+      <td><code>value</code></td>
+      <td><code>value</code></td>
+      <td>Same controlled value pattern.</td>
+    </tr>
+    <tr>
+      <td><code>defaultValue</code></td>
+      <td><code>defaultValue</code></td>
+      <td>Same uncontrolled value pattern.</td>
+    </tr>
+    <tr>
+      <td><code>onChange</code></td>
+      <td><code>onChange</code></td>
+      <td>Both components call <code>onChange</code> with the next string value.</td>
+    </tr>
+    <tr>
+      <td><code>size</code></td>
+      <td><code>size</code></td>
+      <td>Same supported sizes: <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.</td>
+    </tr>
+    <tr>
+      <td><code>fullWidth</code></td>
+      <td><code>fullWidth</code></td>
+      <td>Same layout prop.</td>
+    </tr>
+    <tr>
+      <td><code>leadingElement</code></td>
+      <td><code>leadingElement</code></td>
+      <td>Same slot for compact visual context or a small action.</td>
+    </tr>
+    <tr>
+      <td><code>trailingElement</code></td>
+      <td><code>trailingElement</code></td>
+      <td>Same slot for compact visual context or a small action.</td>
+    </tr>
+    <tr className="migration-prop-row--removed">
+      <td><code>showErrorMessage</code></td>
+      <td>No direct prop</td>
+      <td>Remove unless the surrounding UX intentionally suppresses error text.</td>
+    </tr>
+    <tr className="migration-prop-row--changed">
+      <td><code>type</code></td>
+      <td><code>type</code></td>
+      <td><code>TextField</code> supports text-like types: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Behavior Notes
+
+- `TextField` uses React Aria Components field state props such as `isInvalid`,
+  `isDisabled`, `isReadOnly`, and `isRequired`.
+- `TextInput` never wired a required state into its underlying `useTextField`
+  call, so passing a native `required` attribute had no effect: no
+  `aria-required`, and no native HTML5 required behavior. If any existing
+  usage relied on `required`, treat adding `isRequired` on `TextField` as
+  turning on required validation for the first time, not as a like-for-like
+  rename — double-check the surrounding form still behaves as expected.
+- `TextInput` logs a deprecation warning when it mounts.
+- `TextField` should use `description` for helper text and `errorMessage` for
+  validation feedback.
+- Keep leading and trailing interactive elements independently accessible with
+  their own accessible names.
+
+### Migration Checklist
+
+Check items off as you go. Progress is saved in your browser, so you can leave
+and come back to this guide while migrating a larger form.
+
+<Checklist
+  storageKey="migration-checklist-textinput-to-textfield"
+  items={[
+    {
+      id: 'replace-imports',
+      title: (
+        <>
+          Replace <code>TextInput</code> imports with <code>TextField</code>
+        </>
+      ),
+      description: 'TextField is the supported replacement going forward.',
+    },
+    {
+      id: 'rename-helper-text',
+      title: (
+        <>
+          Rename <code>helperText</code> to <code>description</code>
+        </>
+      ),
+      description:
+        'The prop is still hidden automatically whenever an error message shows, same as before.',
+    },
+    {
+      id: 'rename-state-props',
+      title: 'Rename legacy state props to their React Aria equivalents',
+      description: (
+        <>
+          <code>invalid</code> to <code>isInvalid</code>, <code>disabled</code>{' '}
+          to <code>isDisabled</code>, and <code>readOnly</code> to{' '}
+          <code>isReadOnly</code>.
+        </>
+      ),
+    },
+    {
+      id: 'add-is-required',
+      title: (
+        <>
+          Add <code>isRequired</code> if the field should be required
+        </>
+      ),
+      description: (
+        <>
+          It wasn't previously enforced: a native <code>required</code> on{' '}
+          <code>TextInput</code> had no effect.
+        </>
+      ),
+    },
+    {
+      id: 'controlled-state',
+      title: 'Keep the same controlled/uncontrolled state pattern',
+      description: (
+        <>
+          <code>value</code> plus <code>onChange</code> for controlled fields,{' '}
+          <code>defaultValue</code> for simple uncontrolled ones.
+        </>
+      ),
+    },
+    {
+      id: 'review-validation',
+      title: 'Review when validation errors appear',
+      description:
+        'Confirm errors still show after submit, blur, or whatever validation moment the surrounding form expects.',
+    },
+    {
+      id: 'remove-show-error-message',
+      title: (
+        <>
+          Remove <code>showErrorMessage</code> usage
+        </>
+      ),
+      description:
+        'TextField has no equivalent prop — handle any intentional suppression in the surrounding form instead.',
+    },
+    {
+      id: 'confirm-label',
+      title: 'Confirm the field still has an accessible name',
+      description:
+        'Keep a visible label wherever possible, per the component’s accessibility guidance.',
+    },
+  ]}
+/>
+
+## Looking Ahead
+
+When the next major version removes these deprecated components, its own
+upgrade guide will supersede this page — this content will move there, along
+with any other breaking changes that release introduces.
+
+## Related
+
+- **[TextField](components-forms-textfield.md)**: supported
+  React replacement for single-line text fields.
+- **[TextInput](deprecated-textinput.md)**: deprecated
+  component documentation for legacy maintenance.

package/dist/temporary-typings/src/components/ListBox/ListBox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListBoxHeaderProps, ListBoxItemProps, ListBoxProps, ListBoxSectionProps } from './types';
 declare const ListBoxRoot: {
-    ({ className, render, showSelectAll, ...props }: ListBoxProps): React.JSX.Element;
+    <T extends object>({ className, children, items, render, renderEmptyState, isLoading, onLoadMore, scrollOffset, showSelectAll, ...props }: ListBoxProps<T>): React.JSX.Element;
     displayName: string;
 };
 declare const ListBoxItem: {

package/dist/temporary-typings/src/components/ListBox/ListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,QAAA,MAAM,WAAW;qDAKd,YAAY;;CAsDd,CAAC;AAKF,QAAA,MAAM,WAAW;8BAA6B,gBAAgB;;CAyB7D,CAAC;AAKF,QAAA,MAAM,cAAc;8BAA6B,mBAAmB;;CAKnE,CAAC;AAKF,QAAA,MAAM,aAAa;8BAA6B,kBAAkB;;CAEjE,CAAC;AAIF,MAAM,MAAM,gBAAgB,GAAG,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,cAAc,CAAC;IAC/B,MAAM,EAAE,OAAO,aAAa,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,OAAO,EAIP,gBAAgB,CAAC;AAEvB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,QAAA,MAAM,WAAW;KAAI,CAAC,SAAS,MAAM,0HAWlC,YAAY,CAAC,CAAC,CAAC;;CA0EjB,CAAC;AAKF,QAAA,MAAM,WAAW;8BAA6B,gBAAgB;;CAyB7D,CAAC;AAKF,QAAA,MAAM,cAAc;8BAA6B,mBAAmB;;CAKnE,CAAC;AAKF,QAAA,MAAM,aAAa;8BAA6B,kBAAkB;;CAEjE,CAAC;AAIF,MAAM,MAAM,gBAAgB,GAAG,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,cAAc,CAAC;IAC/B,MAAM,EAAE,OAAO,aAAa,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,OAAO,EAIP,gBAAgB,CAAC;AAEvB,eAAe,OAAO,CAAC"}

package/dist/temporary-typings/src/components/ListBox/types.d.ts

@@ -1,6 +1,9 @@
-import type { HeaderProps as AriaHeaderProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps } from 'react-aria-components';
+import type { HeaderProps as AriaHeaderProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxLoadMoreItemProps as AriaListBoxLoadMoreItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps } from 'react-aria-components';
 export type ListBoxProps<T extends object = object> = AriaListBoxProps<T> & {
     showSelectAll?: boolean;
+    isLoading?: boolean;
+    onLoadMore?: AriaListBoxLoadMoreItemProps['onLoadMore'];
+    scrollOffset?: AriaListBoxLoadMoreItemProps['scrollOffset'];
 };
 export type ListBoxItemProps = AriaListBoxItemProps;
 export type ListBoxSectionProps<T extends object = object> = AriaListBoxSectionProps<T>;

package/dist/temporary-typings/src/components/ListBox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,gBAAgB,IAAI,oBAAoB,EACxC,YAAY,IAAI,gBAAgB,EAChC,mBAAmB,IAAI,uBAAuB,EAC/C,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAM1E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACvD,uBAAuB,CAAC,CAAC,CAAC,CAAC;AAC7B,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListBox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,gBAAgB,IAAI,oBAAoB,EACxC,wBAAwB,IAAI,4BAA4B,EACxD,YAAY,IAAI,gBAAgB,EAChC,mBAAmB,IAAI,uBAAuB,EAC/C,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAM1E,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,UAAU,CAAC,EAAE,4BAA4B,CAAC,YAAY,CAAC,CAAC;IAExD,YAAY,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;CAC7D,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACvD,uBAAuB,CAAC,CAAC,CAAC,CAAC;AAC7B,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC"}

package/dist/temporary-typings/src/guides/migrations/Checklist.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ChecklistItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+}
+export interface ChecklistProps {
+    storageKey: string;
+    items: ChecklistItem[];
+}
+declare const Checklist: ({ storageKey, items }: ChecklistProps) => React.JSX.Element;
+export default Checklist;
+//# sourceMappingURL=Checklist.d.ts.map

package/dist/temporary-typings/src/guides/migrations/Checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../../../src/guides/migrations/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAI7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAYD,QAAA,MAAM,SAAS,GAAI,uBAAuB,cAAc,sBAgEvD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "9.24.0",
+  "version": "9.25.0",
   "description": "React UI components",
   "type": "module",
   "license": "MIT",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e70f1aeeb6e52345ca86e70f1e8dc74918f3f0ae"
+  "gitHead": "ad1647de4f704ba3bee3e22932056ebb46dd6b76"
 }

package/typings/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
 import { RowData, Row, Table, ExpandedState, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
-import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
+import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxLoadMoreItemProps, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
 export { DialogTrigger, Pressable } from 'react-aria-components';
 import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
 import { MotionProps } from 'framer-motion';
@@ -693,13 +693,16 @@ declare const CheckboxGroup: ({ helperText, className, errorMessage, children, d
 
 type ListBoxProps<T extends object = object> = ListBoxProps$1<T> & {
     showSelectAll?: boolean;
+    isLoading?: boolean;
+    onLoadMore?: ListBoxLoadMoreItemProps['onLoadMore'];
+    scrollOffset?: ListBoxLoadMoreItemProps['scrollOffset'];
 };
 type ListBoxItemProps = ListBoxItemProps$1;
 type ListBoxSectionProps<T extends object = object> = ListBoxSectionProps$1<T>;
 type ListBoxHeaderProps = HeaderProps;
 
 declare const ListBoxRoot: {
-    ({ className, render, showSelectAll, ...props }: ListBoxProps): React$1.JSX.Element;
+    <T extends object>({ className, children, items, render, renderEmptyState, isLoading, onLoadMore, scrollOffset, showSelectAll, ...props }: ListBoxProps<T>): React$1.JSX.Element;
     displayName: string;
 };
 declare const ListBoxItem: {