@chassis-ui/react 0.1.3 → 0.2.0

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

@@ -0,0 +1,363 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import React, { ReactElement, ReactNode, Ref } from "react";
+import { ColumnSize, ColumnStaticSize } from "react-stately";
+import { Key as Key$2, Selection as Selection$1, SortDescriptor as SortDescriptor$1, TableBodyRenderProps } from "react-aria-components";
+//#region src/components/datagrid/DataGridBody.d.ts
+interface DataGridBodyOwnProps {
+  /**
+   * A string of all className you want applied to the body row group.
+   */
+  className?: string;
+  /**
+   * Values that should invalidate the row cache when using the `items`/render-function form of
+   * `children` — e.g. a value from outside `items` that the render function reads. Without this,
+   * changing that outside value won't re-render already-cached rows, since dynamic rows are only
+   * rebuilt when `items` or `dependencies` change by reference, not on every parent re-render.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+  /**
+   * Content shown in place of rows when `items` is empty.
+   */
+  renderEmptyState?: (props: TableBodyRenderProps) => React.ReactNode;
+}
+/**
+ * The `items` + render-function form. `isLoading`/`loadingContent`/`onLoadMore` live here rather
+ * than alongside the static form because the loader row is generated by appending to `items` and
+ * rendering through that same function — there's no growing dataset to load more of, and nothing
+ * to render the loader with, in a hand-written list of `DataGridRow` elements.
+ */
+interface DataGridBodyDynamicProps<T> {
+  /**
+   * A render function called once per item in `items`, returning that row's `DataGridRow`.
+   */
+  children: (item: T) => ReactElement;
+  /**
+   * Whether more items are currently being fetched. Shows `loadingContent` in the loader row while
+   * true, and — until this goes back to `false` — suppresses further `onLoadMore` calls, so one
+   * scroll-into-view doesn't fire the callback again before the in-flight fetch resolves.
+   */
+  isLoading?: boolean;
+  /**
+   * A list of row data objects, rendered via the function form of `children`.
+   */
+  items: Iterable<T>;
+  /**
+   * Content rendered inside the loader row while `isLoading` is true, e.g. a spinner. Only takes
+   * effect alongside `onLoadMore`.
+   */
+  loadingContent?: ReactNode;
+  /**
+   * Called when the grid scrolls near its last row, so more data can be fetched and appended to
+   * `items`. Pair with `isLoading` so a fetch already in flight isn't triggered again before it
+   * resolves.
+   */
+  onLoadMore?: () => void;
+}
+/** The static form: `DataGridRow` elements written out directly. */
+interface DataGridBodyStaticProps {
+  /**
+   * `DataGridRow` elements.
+   */
+  children: ReactElement | ReactElement[];
+  isLoading?: never;
+  items?: never;
+  loadingContent?: never;
+  onLoadMore?: never;
+}
+/**
+ * Split into a static and a dynamic form so the two can't be mixed: the loader row is appended to
+ * `items` and rendered through `children`, so `onLoadMore` alongside a static list of elements used
+ * to type-check and then throw at render ("children is not a function") the moment the loader row
+ * came up.
+ */
+type DataGridBodyProps<T> = DataGridBodyOwnProps & (DataGridBodyDynamicProps<T> | DataGridBodyStaticProps);
+/**
+ * Body row group for `DataGrid`, containing `DataGridRow`s. Unlike `Table`'s sub-parts, this
+ * renders directly — it's a thin wrapper over react-aria-components' own `TableBody`.
+ *
+ * Always carries the `datagrid-body` class — see `DataGridHeader`'s equivalent note.
+ */
+declare const DataGridBody: <T extends object>({ children, className, dependencies, isLoading, items, loadingContent, onLoadMore, renderEmptyState }: DataGridBodyProps<T>) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridHeader.d.ts
+interface DataGridHeaderProps<T> {
+  /**
+   * `DataGridColumn` elements, or a render function paired with `columns` for dynamic column
+   * generation.
+   */
+  children: ReactNode | ((column: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the header row group.
+   */
+  className?: string;
+  /**
+   * A list of column data objects, rendered via the function form of `children`.
+   */
+  columns?: Iterable<T>;
+  /**
+   * Values that should invalidate the column cache when using the `columns`/render-function form
+   * of `children` — see `DataGridBody`'s `dependencies` for why this matters.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+}
+/**
+ * Header row group for `DataGrid`, containing `DataGridColumn`s. Unlike `Table`'s sub-parts,
+ * this renders directly — it's a thin wrapper over react-aria-components' own `TableHeader`.
+ *
+ * Always carries the `datagrid-header` class (not just the caller's `className`) — `DataGrid.scss`
+ * uses it to tell header cells from body cells, since react-aria-components renders both as plain
+ * `[role="rowgroup"]` divs with no structural difference to select on otherwise.
+ */
+declare const DataGridHeader: <T extends object>({ children, className, columns, dependencies }: DataGridHeaderProps<T>) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGrid.d.ts
+interface DataGridOwnProps<T extends object> {
+  /**
+   * An accessible label for the grid, used when there's no visible heading.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible heading element for the grid.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Set the vertical alignment of cell content. Mirrors `Table`'s prop of the same name for API
+   * parity — same as `Table`, this awaits chassis-css adding the matching `.align-*` styles.
+   */
+  align?: 'bottom' | 'middle' | 'top';
+  /**
+   * Add borders on all sides of the grid and cells.
+   */
+  bordered?: boolean;
+  /**
+   * Remove borders on all sides of the grid and cells.
+   */
+  borderless?: boolean;
+  /**
+   * A `DataGridHeader` and a `DataGridBody`, each built from `DataGridColumn`/`DataGridRow`/
+   * `DataGridCell`.
+   */
+  children: [ReactElement<DataGridHeaderProps<T>>, ReactElement<DataGridBodyProps<T>>];
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component.
+   */
+  color?: ContextColor;
+  /**
+   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.
+   */
+  disabledKeys?: Iterable<Key$2>;
+  /**
+   * Content shown below the grid, e.g. a totals row or a "load more" control. Rendered as plain
+   * markup outside the grid's own scrollable/virtualized region — not part of the
+   * keyboard-navigable grid, and never scrolls out of view along with the body rows. Mirrors
+   * `Table`'s `footer` prop for API parity.
+   */
+  footer?: ReactNode;
+  /**
+   * Enable a hover state on grid rows.
+   */
+  hover?: boolean;
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange?: (keys: Selection$1) => void;
+  /**
+   * Handler that is called when a column is sorted.
+   */
+  onSortChange?: (descriptor: SortDescriptor$1) => void;
+  /**
+   * The currently selected row keys (controlled).
+   */
+  selectedKeys?: Selection$1;
+  /**
+   * The type of selection that is allowed.
+   */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /**
+   * Make the grid more compact by cutting all cell padding.
+   */
+  sm?: boolean;
+  /**
+   * The current sort column and direction.
+   */
+  sortDescriptor?: SortDescriptor$1;
+}
+type DataGridRowHeightProps = {
+  /**
+   * Row height in pixels, or `"auto"` to measure each row from its own rendered content
+   * instead of a single fixed height shared by every row (pair it with a required
+   * `estimatedRowHeight`, and see the docs site's "Variable row height" section for the
+   * tradeoffs). A fixed number renders every row, including the header, at that exact
+   * height; content taller than it visually overflows rather than growing the row.
+   */
+  rowHeight: number;
+  estimatedRowHeight?: never;
+} | {
+  rowHeight: 'auto';
+  /**
+   * Seeds the virtualizer's scroll-position math for rows that haven't been measured yet.
+   * Required when `rowHeight="auto"` — pick a value close to the typical row's real height
+   * to minimize scroll-jump on first measurement. A row's real height can still turn out far
+   * from this estimate once it renders, which can cause a visible scroll-jump for rows the
+   * viewport hasn't reached yet.
+   */
+  estimatedRowHeight: number;
+};
+type DataGridProps<T extends object> = DataGridOwnProps<T> & DataGridRowHeightProps;
+declare const DataGrid: <T extends object>(props: DataGridProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+//#endregion
+//#region src/components/datagrid/DataGridCell.d.ts
+interface DataGridCellProps {
+  /**
+   * The contents of the cell.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the cell.
+   */
+  className?: string;
+  /**
+   * Indicates how many columns the cell spans.
+   */
+  colSpan?: number;
+  /**
+   * The unique id of the cell.
+   */
+  id?: Key$2;
+  /**
+   * A string representation of the cell's contents, used for typeahead.
+   */
+  textValue?: string;
+}
+/**
+ * A cell within a `DataGrid` row. Unlike `Table`'s sub-parts, this renders directly — it's a
+ * thin wrapper over react-aria-components' own `Cell`.
+ */
+declare const DataGridCell: ({ children, className, colSpan, id, textValue }: DataGridCellProps) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridColumn.d.ts
+interface DataGridColumnProps {
+  /**
+   * Whether the column allows sorting. Adds a sort indicator and makes the header
+   * clickable/keyboard-activatable.
+   */
+  allowsSorting?: boolean;
+  /**
+   * Rendered contents of the column header.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the column header.
+   */
+  className?: string;
+  /**
+   * The initial width of the column, e.g. for a narrow selection/icon column — a plain number or
+   * `'<n>%'` for a fixed size, or `'<n>fr'` to share remaining space with other fractional
+   * columns in proportion (columns default to `'1fr'`, so they split space evenly unless given
+   * one of these). Unlike `Table`, which sizes a narrow column via `width: 1%` relying on native
+   * `<table>` auto-layout, `DataGrid`'s virtualized layout computes every column's width itself —
+   * a CSS `width` rule on the cell has no effect, so this prop is the only way to size a column.
+   */
+  defaultWidth?: ColumnSize | null;
+  /**
+   * The unique id of the column, referenced by `sortDescriptor.column`.
+   */
+  id?: Key$2;
+  /**
+   * Whether this column is a row header, announced by assistive technology during row
+   * navigation.
+   */
+  isRowHeader?: boolean;
+  /**
+   * The maximum width of the column, as a fixed pixel number or `'<n>%'`.
+   */
+  maxWidth?: ColumnStaticSize | null;
+  /**
+   * The minimum width of the column, as a fixed pixel number or `'<n>%'`.
+   */
+  minWidth?: ColumnStaticSize | null;
+  /**
+   * Pin the column so it stays visible while the grid scrolls horizontally: `'start'` pins it to
+   * the leading edge, `'end'` to the trailing edge. Stacks correctly with other pinned columns on
+   * the same side, in declaration order.
+   */
+  pin?: 'start' | 'end';
+  /**
+   * A string representation of the column header, used for accessibility announcements. Defaults
+   * to `children` when it's a plain string — set this explicitly when the header contains
+   * anything else (an icon, a `Tooltip`, etc.).
+   */
+  textValue?: string;
+}
+/**
+ * A column within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin
+ * wrapper over react-aria-components' own `Column`.
+ *
+ * When `allowsSorting` is set, renders a sort indicator after `children` — mirrors `Table`'s own
+ * `TableColumnHeader`, but reads the active direction from react-aria-components' own
+ * `ColumnRenderProps` (via the `children` render-prop form) instead of reaching into table state
+ * directly, since this wrapper has no state of its own to read.
+ */
+declare const DataGridColumn: ({ allowsSorting, children, className, defaultWidth, id, isRowHeader, maxWidth, minWidth, pin, textValue }: DataGridColumnProps) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridRow.d.ts
+interface DataGridRowProps<T> {
+  /**
+   * `DataGridCell` elements, or a render function called once per column with that column's
+   * data — required when the row's parent `DataGridBody` uses the `items`/render-function form.
+   */
+  children: ReactNode | ((column: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the row.
+   */
+  className?: string;
+  /**
+   * A list of column data objects, rendered via the function form of `children`.
+   */
+  columns?: Iterable<T>;
+  /**
+   * The unique id of the row, referenced by `selectedKeys`/`disabledKeys`.
+   */
+  id?: Key$2;
+  /**
+   * A string representation of the row's contents, used for typeahead.
+   */
+  textValue?: string;
+}
+/**
+ * A row within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin
+ * wrapper over react-aria-components' own `Row`.
+ */
+declare const DataGridRow: <T extends object>({ children, className, columns, id, textValue }: DataGridRowProps<T>) => React.JSX.Element;
+//#endregion
+//#region src/components/datagrid/DataGridSelectionCell.d.ts
+interface DataGridSelectionCellProps {
+  /**
+   * A string of all className you want applied to the checkbox, replacing the default
+   * `check-input`.
+   */
+  className?: string;
+}
+/**
+ * Selection checkbox for one `DataGrid` row — place inside a `DataGridCell`.
+ *
+ * react-aria-components' own `Checkbox` always visually hides its native `<input>` behind a custom
+ * indicator the caller must supply. This renders a plain native `<input className="check-input">`
+ * instead, wired to the same state, so it picks up chassis-css's existing checkbox styling for
+ * free with no new CSS of its own.
+ */
+declare const DataGridSelectionCell: ({ className }: DataGridSelectionCellProps) => React.JSX.Element;
+/**
+ * "Select all" checkbox for `DataGrid`'s header row — place inside a `DataGridColumn`. See
+ * `DataGridSelectionCell` for why this bypasses react-aria-components' own `Checkbox`.
+ */
+declare const DataGridSelectAllCell: ({ className }: DataGridSelectionCellProps) => React.JSX.Element;
+//#endregion
+export { DataGridRowProps as a, DataGridCell as c, DataGridProps as d, DataGridHeader as f, DataGridBodyProps as h, DataGridRow as i, DataGridCellProps as l, DataGridBody as m, DataGridSelectionCell as n, DataGridColumn as o, DataGridHeaderProps as p, DataGridSelectionCellProps as r, DataGridColumnProps as s, DataGridSelectAllCell as t, DataGrid as u };

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

@@ -0,0 +1,110 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/select/Select.d.ts
+interface SelectOptionDef {
+  /**
+   * Marks the option as disabled — it can't be clicked or reached via the keyboard.
+   */
+  disabled?: boolean;
+  /**
+   * Label text rendered inside the option. Falls back to the browser's default (the `value`,
+   * stringified) when omitted.
+   */
+  label?: string;
+  /**
+   * Marks the option as selected by default (uncontrolled) — resolved into the select's own
+   * `defaultValue`, and ignored when the select's `value`/`defaultValue` is set directly. Set on
+   * more than one option only when `multiple` is also set on `Select` — otherwise, matching
+   * native `<select>` behavior, only the last option with `selected` set wins.
+   */
+  selected?: boolean;
+  /**
+   * The option's value attribute.
+   */
+  value?: string | number;
+}
+interface SelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+  /**
+   * Content rendered at the select's trailing edge, e.g. a `InputAdorn` icon, text, or button.
+   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a
+   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.
+   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the
+   * native element itself no longer fills the wrapper's full width.
+   */
+  adornEnd?: ReactNode;
+  /**
+   * Content rendered at the select's leading edge, e.g. a `InputAdorn` icon, text, or button.
+   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a
+   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.
+   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the
+   * native element itself no longer fills the wrapper's full width.
+   */
+  adornStart?: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * A description for the field, rendered below the select.
+   */
+  help?: ReactNode;
+  /**
+   * Specifies the number of visible options in a drop-down list.
+   */
+  htmlSize?: number;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the select when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with this select.
+   */
+  label?: ReactNode;
+  /**
+   * Allows more than one option to be selected at once. Pass `value` as a string array (or set
+   * `selected` on more than one `options` entry) to control the selection.
+   */
+  multiple?: boolean;
+  /**
+   * Method called immediately after the `value` prop changes.
+   */
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
+  /**
+   * Options list of the select component. Available keys: `label`, `value`, `disabled`,
+   * `selected`.
+   * Examples:
+   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
+   * - `options={['js', 'html']}`
+   */
+  options?: SelectOptionDef[] | string[];
+  /**
+   * Renders a disabled placeholder option as the first item (e.g. `"Select a country…"`).
+   * The option has an empty value so it is not selectable once another option is chosen.
+   */
+  placeholder?: 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 select when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The `value` attribute of component.
+   *
+   * @controllable onChange
+   * */
+  value?: string | string[] | number;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//#endregion
+export { SelectOptionDef as n, SelectProps as r, Select as t };

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

@@ -0,0 +1,98 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as MenuItemsDef } from "./MenuItemDef-D0VDtYIQ.js";
+import "./ComboboxItem-C9TpoJOI.js";
+import React, { HTMLAttributes, ReactNode } from "react";
+import { Key as Key$1 } from "react-stately";
+//#region src/components/combobox/Combobox.d.ts
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the combobox, used when there's no visible `<label>`.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible `<label>` element for the combobox.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * `ComboboxItem` elements, optionally wrapped in `ComboboxGroup` — read as data by
+   * `Combobox` 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 (uncontrolled).
+   */
+  defaultValue?: Key$1 | null;
+  /**
+   * Prevents the combobox from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below the combobox.
+   */
+  help?: ReactNode;
+  /**
+   * `id` forwarded to the input element — useful for pairing with a `<label for>`.
+   */
+  id?: string;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the combobox 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 (dividers aren't
+   * meaningful for a listbox/option collection) — use `ComboboxGroup` 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 input.
+   */
+  label?: ReactNode;
+  /**
+   * `name` of an auto-created hidden input, kept in sync with the selection, for native form
+   * submission. Omit to skip creating one.
+   */
+  name?: string;
+  /**
+   * Text shown in the listbox when no options match the current query.
+   */
+  noResultsText?: ReactNode;
+  /**
+   * Callback fired when the selected option changes.
+   */
+  onChange?: (value: Key$1 | null) => void;
+  /**
+   * Placeholder shown in the input when nothing is selected.
+   */
+  placeholder?: 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 combobox when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The selected option's id (controlled).
+   */
+  value?: Key$1 | null;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ComboboxProps as n, Combobox as t };

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

@@ -0,0 +1,50 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/input-group/InputGroup.d.ts
+type InputGroupOwnProps<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;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+};
+type InputGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, InputGroupOwnProps<C>>;
+type InputGroupComponent = (<C extends ElementType = 'div'>(props: InputGroupProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const InputGroup: InputGroupComponent;
+//#endregion
+//#region src/components/input-group/InputGroupAddon.d.ts
+type InputGroupAddonOwnProps<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;
+  /**
+   * The id of the form control this addon labels, when rendered as `component="label"`.
+   */
+  htmlFor?: string;
+};
+type InputGroupAddonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, InputGroupAddonOwnProps<C>>;
+type InputGroupAddonComponent = (<C extends ElementType = 'span'>(props: InputGroupAddonProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const InputGroupAddon: InputGroupAddonComponent;
+//#endregion
+export { InputGroupProps as i, InputGroupAddonProps as n, InputGroup as r, InputGroupAddon as t };