@chassis-ui/react 0.1.2 → 0.2.0

package/dist/chunks/index-dh3TKanY.d.ts

@@ -0,0 +1,235 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { i as IconValue } from "./iconConfig-Bu6Pt9o3.js";
+import React, { ButtonHTMLAttributes, ElementType, HTMLAttributes, ReactElement } from "react";
+//#region src/components/carousel/context.d.ts
+type CarouselEnds = 'loop' | 'wrap' | 'stop';
+//#endregion
+//#region src/components/carousel/Carousel.d.ts
+type CarouselTransition = 'scroll' | 'fade';
+interface CarouselSlideDetail {
+  /**
+   * Direction of travel, mirrored in RTL.
+   */
+  direction: 'left' | 'right';
+  /**
+   * Index of the outgoing slide.
+   */
+  from: number;
+  /**
+   * Index of the incoming slide.
+   */
+  to: number;
+}
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The active slide's index, for controlled usage. Pair with `onSlide` or `onSlid` to feed the
+   * new index back — they're the only way a controlled carousel's `activeIndex` gets updated.
+   */
+  activeIndex?: number;
+  /**
+   * Let each CarouselItem size itself instead of dividing the track evenly; snap points still land on every slide.
+   */
+  auto?: boolean;
+  /**
+   * Cycle through slides automatically on mount.
+   */
+  autoplay?: boolean;
+  /**
+   * Snap the active slide to the center of the viewport instead of its start.
+   */
+  center?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * The active slide's index, for uncontrolled usage.
+   */
+  defaultActiveIndex?: number;
+  /**
+   * Behavior at the first/last slide. `loop` continues seamlessly past the ends for a single-slide layout, falling back to `wrap` for multi-item, peek, centered, or variable-width layouts, and under reduced motion. `wrap` jumps from the last slide back to the first, and vice versa. `stop` hard-stops and disables the previous/next controls at each end.
+   */
+  ends?: CarouselEnds;
+  /**
+   * Milliseconds to wait before automatically advancing to the next slide. Override per slide with CarouselItem's own `interval` prop.
+   */
+  interval?: number;
+  /**
+   * Number of whole slides visible per view, applied as the `--cx-carousel-items` custom property.
+   */
+  items?: number;
+  /**
+   * Space between slides, applied as the `--cx-carousel-items-gap` custom property.
+   */
+  itemsGap?: string;
+  /**
+   * How much of the neighboring slides to reveal, applied as the `--cx-carousel-items-peek` custom property.
+   */
+  itemsPeek?: string;
+  /**
+   * Move to the previous/next slide with the Left/Right arrow keys while focus is inside the carousel.
+   */
+  keyboard?: boolean;
+  /**
+   * Callback fired once a slide transition completes.
+   */
+  onSlid?: (detail: CarouselSlideDetail) => void;
+  /**
+   * Callback fired when a slide transition begins.
+   */
+  onSlide?: (detail: CarouselSlideDetail) => void;
+  /**
+   * Pause autoplay on `mouseenter`, resuming on `mouseleave`. Set to `false` to disable pause-on-hover.
+   */
+  pause?: 'hover' | false;
+  /**
+   * Replace the scroll transition with a crossfade.
+   */
+  transition?: CarouselTransition;
+}
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/carousel/CarouselControlNext.d.ts
+interface CarouselControlNextProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `next` icon.
+   */
+  icon?: IconValue;
+  /**
+   * The accessible label announced by assistive technology.
+   */
+  label?: string;
+}
+declare const CarouselControlNext: React.ForwardRefExoticComponent<CarouselControlNextProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/carousel/CarouselControlPrev.d.ts
+interface CarouselControlPrevProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `previous` icon.
+   */
+  icon?: IconValue;
+  /**
+   * The accessible label announced by assistive technology.
+   */
+  label?: string;
+}
+declare const CarouselControlPrev: React.ForwardRefExoticComponent<CarouselControlPrevProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/components/carousel/CarouselIndicators.d.ts
+interface CarouselIndicatorsProps extends HTMLAttributes<HTMLOListElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Accessible label for each indicator button. Receives the slide's 1-based position.
+   */
+  label?: (position: number) => string;
+}
+declare const CarouselIndicators: React.ForwardRefExoticComponent<CarouselIndicatorsProps & React.RefAttributes<HTMLOListElement>>;
+//#endregion
+//#region src/components/carousel/CarouselInner.d.ts
+type CarouselInnerOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CarouselInnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CarouselInnerOwnProps<C>>;
+type CarouselInnerComponent = (<C extends ElementType = 'div'>(props: CarouselInnerProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CarouselInner: CarouselInnerComponent;
+//#endregion
+//#region src/components/carousel/CarouselItem.d.ts
+type CarouselItemOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Milliseconds to wait before autoplay advances past this slide, overriding the carousel's own `interval`.
+   */
+  interval?: number;
+};
+type CarouselItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CarouselItemOwnProps<C>>;
+type CarouselItemComponent = (<C extends ElementType = 'div'>(props: CarouselItemProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CarouselItem: CarouselItemComponent;
+//#endregion
+//#region src/components/carousel/CarouselOverlay.d.ts
+type CarouselOverlayOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type CarouselOverlayProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CarouselOverlayOwnProps<C>>;
+type CarouselOverlayComponent = (<C extends ElementType = 'div'>(props: CarouselOverlayProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const CarouselOverlay: CarouselOverlayComponent;
+//#endregion
+//#region src/components/carousel/CarouselPlayPause.d.ts
+interface CarouselPlayPauseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The icon shown while autoplay is running: an icon name, or an element of your own icon set.
+   * Defaults to `IconProvider`'s `pause` icon.
+   */
+  pauseIcon?: IconValue;
+  /**
+   * The accessible label announced while autoplay is running.
+   */
+  pauseLabel?: string;
+  /**
+   * The accessible label announced while autoplay is stopped.
+   */
+  playLabel?: string;
+  /**
+   * The icon shown while autoplay is stopped: an icon name, or an element of your own icon set.
+   * Defaults to `IconProvider`'s `play` icon.
+   */
+  playIcon?: IconValue;
+}
+/**
+ * A discoverable toggle so a viewer can stop an autoplaying carousel, as required by WCAG 2.2
+ * Success Criterion 2.2.2 (Pause, Stop, Hide). Reflects the current state automatically — a pause
+ * icon while playing, a play icon once stopped.
+ */
+declare const CarouselPlayPause: React.ForwardRefExoticComponent<CarouselPlayPauseProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { CarouselSlideDetail as _, CarouselItem as a, CarouselInnerProps as c, CarouselControlPrev as d, CarouselControlPrevProps as f, CarouselProps as g, Carousel as h, CarouselOverlayProps as i, CarouselIndicators as l, CarouselControlNextProps as m, CarouselPlayPauseProps as n, CarouselItemProps as o, CarouselControlNext as p, CarouselOverlay as r, CarouselInner as s, CarouselPlayPause as t, CarouselIndicatorsProps as u, CarouselTransition as v, CarouselEnds as y };

package/dist/chunks/index-nklPDKlC.d.ts

@@ -0,0 +1,137 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor, r as ContextStyle, t as Breakpoint } from "./types-CS_40Txv.js";
+import { i as IconValue } from "./iconConfig-Bu6Pt9o3.js";
+import React, { ElementType, HTMLAttributes, ReactElement } from "react";
+//#region src/components/navbar/Navbar.d.ts
+type NavbarOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Defines optional container wrapping children elements.
+   */
+  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid';
+  /**
+   * Opts this navbar into the framework's dark or light theming, independent of the page's own
+   * theme.
+   */
+  'data-cx-theme'?: 'dark' | 'light';
+  /**
+   * Renders inline at and above this breakpoint, as a drawer below it. `true` renders inline at
+   * every width; omit to keep the drawer at every width.
+   */
+  expand?: boolean | Breakpoint;
+  /**
+   * Place component in non-static positions.
+   */
+  placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top' | 'sticky-bottom';
+  /**
+   * Blurs and saturates whatever sits behind the navbar — useful when it's positioned over a
+   * hero image, video, or scrollable content.
+   */
+  translucent?: boolean;
+  /**
+   * Sets the context style of the component. `basic` (the default) renders with no extra class.
+   */
+  variant?: ContextStyle;
+};
+type NavbarProps<C extends ElementType = 'nav'> = PolymorphicComponentProps<C, NavbarOwnProps<C>>;
+type NavbarComponent = (<C extends ElementType = 'nav'>(props: NavbarProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Navbar: NavbarComponent;
+//#endregion
+//#region src/components/navbar/NavbarBrand.d.ts
+type NavbarBrandOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `span`, or `a` when `href` is set.
+   */
+  component?: C;
+  /**
+   * The href attribute specifies the URL of the page the link goes to. Defaults `component` to
+   * `a`.
+   */
+  href?: string;
+};
+type NavbarBrandProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, NavbarBrandOwnProps<C>>;
+type NavbarBrandComponent = (<C extends ElementType = 'span'>(props: NavbarBrandProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NavbarBrand: NavbarBrandComponent;
+//#endregion
+//#region src/components/navbar/NavbarNav.d.ts
+type NavbarNavOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type NavbarNavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavbarNavOwnProps<C>>;
+type NavbarNavComponent = (<C extends ElementType = 'ul'>(props: NavbarNavProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NavbarNav: NavbarNavComponent;
+//#endregion
+//#region src/components/navbar/NavbarText.d.ts
+type NavbarTextOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type NavbarTextProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, NavbarTextOwnProps<C>>;
+type NavbarTextComponent = (<C extends ElementType = 'span'>(props: NavbarTextProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NavbarText: NavbarTextComponent;
+//#endregion
+//#region src/components/navbar/NavbarToggler.d.ts
+interface NavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * The toggler icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `menu` icon.
+   */
+  icon?: IconValue;
+  /**
+   * The accessible label announced by assistive technology when no children are provided.
+   */
+  label?: string;
+}
+declare const NavbarToggler: React.ForwardRefExoticComponent<NavbarTogglerProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { NavbarNav as a, NavbarBrandProps as c, NavbarTextProps as i, Navbar as l, NavbarTogglerProps as n, NavbarNavProps as o, NavbarText as r, NavbarBrand as s, NavbarToggler as t, NavbarProps as u };

package/dist/chunks/index-qgZ5VGmc.d.ts

@@ -0,0 +1,177 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import React, { DialogHTMLAttributes, ElementType, ReactElement } from "react";
+//#region src/components/modal/Modal.d.ts
+interface ModalProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onCancel' | 'onClose'> {
+  /**
+   * Show a backdrop while the modal is open. `'static'` blocks closing on backdrop click
+   * (the modal bounces instead). `false` is intentionally not equivalent to `modal={false}` —
+   * unlike `Drawer`, whose vanilla chassis-css counterpart derives modality from `backdrop`,
+   * chassis-css's vanilla `Dialog` only ever reads `backdrop` to distinguish `'static'` from
+   * everything else; `modal` alone decides `showModal()`/`show()`. This mirrors that faithfully
+   * rather than reintroducing an inconsistency with the vendored behavior.
+   */
+  backdrop?: boolean | 'static';
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Set modal to cover the entire user viewport. A breakpoint value goes fullscreen only
+   * below that breakpoint.
+   */
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Disable the open/close transition entirely.
+   */
+  instant?: boolean;
+  /**
+   * Closes the modal when the escape key is pressed.
+   */
+  keyboard?: boolean;
+  /**
+   * Open with `showModal()` (top-layer, native backdrop). Set `false` to open with `show()`
+   * instead — no backdrop, and the page behind the modal stays interactive.
+   */
+  modal?: boolean;
+  /**
+   * Callback fired when the modal requests to be closed (escape, backdrop click, or close button).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).
+   */
+  onClosePrevented?: () => void;
+  /**
+   * Callback fired after the exit transition completes and the modal is fully hidden.
+   */
+  onHidden?: () => void;
+  /**
+   * Callback fired when the modal starts to open.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired after the entry transition completes and the modal is fully visible.
+   */
+  onShown?: () => void;
+  /**
+   * Create a scrollable modal — the header and footer stay fixed while the body scrolls.
+   */
+  scrollable?: boolean;
+  /**
+   * Size the component sm, lg, or extra lg.
+   */
+  size?: 'sm' | 'lg' | 'xl';
+  /**
+   * Toggle the visibility of modal component.
+   */
+  visible?: boolean;
+}
+interface ModalContextProps {
+  /**
+   * Requests the modal be closed — fires `onClose`. Wire this to any element's `onClick`; see
+   * `useModal`.
+   */
+  close: () => void;
+  /**
+   * Id generated by `Modal` and applied automatically by `ModalTitle` to itself, so the
+   * dialog's `aria-labelledby` resolves to it without any manual wiring.
+   */
+  titleId?: string;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDialogElement>>;
+//#endregion
+//#region src/components/modal/ModalBody.d.ts
+type ModalBodyOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ModalBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ModalBodyOwnProps<C>>;
+type ModalBodyComponent = (<C extends ElementType = 'div'>(props: ModalBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalBody: ModalBodyComponent;
+//#endregion
+//#region src/components/modal/ModalFooter.d.ts
+type ModalFooterOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Stack the footer actions as full-width columns instead of a right-aligned row.
+   */
+  stacked?: boolean;
+};
+type ModalFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ModalFooterOwnProps<C>>;
+type ModalFooterComponent = (<C extends ElementType = 'div'>(props: ModalFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalFooter: ModalFooterComponent;
+//#endregion
+//#region src/components/modal/ModalHeader.d.ts
+type ModalHeaderOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Add a close button component to the header.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs.
+   */
+  closeLabel?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ModalHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ModalHeaderOwnProps<C>>;
+type ModalHeaderComponent = (<C extends ElementType = 'div'>(props: ModalHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalHeader: ModalHeaderComponent;
+//#endregion
+//#region src/components/modal/ModalTitle.d.ts
+type ModalTitleOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type ModalTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<C, ModalTitleOwnProps<C>>;
+type ModalTitleComponent = (<C extends ElementType = 'h2'>(props: ModalTitleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ModalTitle: ModalTitleComponent;
+//#endregion
+//#region src/hooks/useModal.d.ts
+type UseModalResult = ModalContextProps;
+declare const useModal: () => UseModalResult;
+//#endregion
+export { ModalHeader as a, ModalFooterProps as c, Modal as d, ModalProps as f, ModalTitleProps as i, ModalBody as l, useModal as n, ModalHeaderProps as o, ModalTitle as r, ModalFooter as s, UseModalResult as t, ModalBodyProps as u };

package/dist/chunks/index-tOodmT36.d.ts

@@ -0,0 +1,129 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as MenuItemsDef } from "./MenuItemDef-D0VDtYIQ.js";
+import { i as ComboboxGroupProps, n as ComboboxItemProps } from "./ComboboxItem-C9TpoJOI.js";
+import { HTMLAttributes, ReactNode } from "react";
+import { Key as Key$1 } from "react-stately";
+//#region src/components/autocomplete/Autocomplete.d.ts
+interface AutocompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the autocomplete, used when there's no visible `<label>`.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible `<label>` element for the autocomplete.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * `AutocompleteItem` elements, optionally wrapped in `AutocompleteGroup` — read as data by
+   * `Autocomplete` to build the option list. Not rendered directly. Ignored when `items` is set.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * The initial selected option's id(s) (uncontrolled). An array when `multiple` is set.
+   */
+  defaultValue?: Key$1 | Key$1[] | null;
+  /**
+   * Prevents the autocomplete from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below the autocomplete.
+   */
+  help?: ReactNode;
+  /**
+   * `id` forwarded to the search input inside the popover. The toggle — the field's real,
+   * always-focusable surface — has no single labelable element `<label for>` can target (it's a
+   * `role="button"` `<div>`, and the search input itself is hidden until open), so `label` is
+   * associated via `aria-labelledby` on the toggle instead. See FORMS.md's "role=group" pattern.
+   */
+  id?: string;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the autocomplete when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * Array of item/header/divider definitions for data-driven rendering. When provided, children
+   * are ignored. A `'header'` entry starts a group that all following items join until the next
+   * header or the end of the array. `'divider'` entries are a no-op here — use
+   * `AutocompleteGroup` composition instead if you need finer control over grouping. An entry's
+   * `href`/`onClick` are `Menu`-only and are not read here — use `onChange` to react to the
+   * selection instead.
+   */
+  items?: MenuItemsDef;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with the toggle.
+   */
+  label?: ReactNode;
+  /**
+   * Allows more than one option to be selected. The toggle shows the single selection's label,
+   * or an "N selected" count once more than one is picked. The menu stays open after each
+   * selection, and `Backspace` in the empty search field removes the last selected option.
+   */
+  multiple?: boolean;
+  /**
+   * `name` of auto-created hidden input(s), kept in sync with the selection, for native form
+   * submission. Single-select renders one; `multiple` renders one per selected key. Omit to skip
+   * hidden-input creation.
+   */
+  name?: string;
+  /**
+   * Text shown in the listbox when no options match the current query.
+   */
+  noResultsText?: ReactNode;
+  /**
+   * Callback fired when the selection changes. Receives an array of keys when `multiple` is set.
+   */
+  onChange?: (value: Key$1 | Key$1[] | null) => void;
+  /**
+   * Text shown on the toggle when nothing is selected.
+   */
+  placeholder?: string;
+  /**
+   * Placeholder for the search field inside the dropdown.
+   */
+  searchPlaceholder?: string;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the autocomplete when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The selected option's id(s) (controlled). An array when `multiple` is set.
+   */
+  value?: Key$1 | Key$1[] | null;
+}
+declare const Autocomplete: {
+  ({ children, className, defaultValue, disabled, help, id, invalid, invalidFeedback, items, label, multiple, name, noResultsText, onChange, placeholder, searchPlaceholder, size, valid, validFeedback, value, ...rest }: AutocompleteProps): ReactNode;
+  displayName: string;
+};
+//#endregion
+//#region src/components/autocomplete/AutocompleteGroup.d.ts
+type AutocompleteGroupProps = ComboboxGroupProps;
+declare const AutocompleteGroup: {
+  (_props: AutocompleteGroupProps): null;
+  displayName: string;
+};
+//#endregion
+//#region src/components/autocomplete/AutocompleteItem.d.ts
+type AutocompleteItemProps = ComboboxItemProps;
+declare const AutocompleteItem: {
+  (_props: AutocompleteItemProps): null;
+  displayName: string;
+};
+//#endregion
+export { Autocomplete as a, AutocompleteGroupProps as i, AutocompleteItemProps as n, AutocompleteProps as o, AutocompleteGroup as r, AutocompleteItem as t };