@chassis-ui/react 0.1.2 → 0.2.0

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

@@ -0,0 +1,280 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import { n as IconProps } from "./Icon-CioraWLF.js";
+import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { ToastQueue } from "react-stately";
+//#region src/components/toast/Toast.d.ts
+interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Apply a CSS fade transition to the toast.
+   */
+  animation?: boolean;
+  /**
+   * Auto hide the toast. The timer starts once the show transition completes and pauses
+   * while the pointer is over the toast or focus is within it.
+   */
+  autohide?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Adds a close button — shorthand for `ToastHeader`'s/`ToastBody`'s `closeButton` prop.
+   * Placed in the header when `icon`/`title`/`time` is set; otherwise placed in the body
+   * alongside `message`, or in a header containing only the close button if `message` is
+   * also unset.
+   */
+  closeButton?: boolean;
+  /**
+   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
+   * non-English UIs. Shorthand for `ToastHeader`'s `closeLabel` prop.
+   */
+  closeLabel?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Delay hiding the toast (ms).
+   */
+  delay?: number;
+  /**
+   * Trailing content — typically a row of `Button`s — rendered via a single `ToastFooter`,
+   * after `message`/`children`. Pass a function to receive `close` directly, instead of
+   * calling `useToast()` from a child component to wire up a "Close" action.
+   */
+  footer?: ReactNode | ((close: () => void) => ReactNode);
+  /**
+   * Leading icon for the header. A string is an icon name, rendered like
+   * `<ToastIcon name={icon} />` (or by `IconProvider`'s `component`); pass
+   * any other node for a fully custom icon (typically a logo or avatar). Shorthand for
+   * `ToastHeader`'s `icon` prop; hidden from assistive technology by default, since it
+   * duplicates `title` visually.
+   */
+  icon?: string | ReactNode;
+  /**
+   * Message body, rendered via a single `ToastBody`. For multi-block content, compose
+   * `children` manually instead — `message` wraps everything in one element.
+   */
+  message?: ReactNode;
+  /**
+   * Header timestamp, rendered after `title`. Shorthand for `ToastHeader`'s `time` prop.
+   */
+  time?: ReactNode;
+  /**
+   * Header heading, rendered before `time`. Shorthand for `ToastHeader`'s children. When set
+   * alongside `message`, wires the toast's `aria-labelledby`/`aria-describedby` to them
+   * automatically.
+   */
+  title?: ReactNode;
+  /**
+   * Callback fired when the component requests to be closed.
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the component requests to be shown.
+   */
+  onShow?: () => void;
+  /**
+   * ARIA live-region role. Use `status` (the default) for confirmation, progress, and
+   * informational messages, which announce politely. Use `alert` for messages that need
+   * immediate attention — validation errors, failed operations — which interrupt speech.
+   */
+  role?: 'status' | 'alert';
+  /**
+   * Apply a full-color background with inverted text. Only meaningful alongside `color`.
+   */
+  solid?: boolean;
+  /**
+   * Apply a semi-transparent background.
+   */
+  translucent?: boolean;
+  /**
+   * Toggle the visibility of component.
+   */
+  visible?: boolean;
+}
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/toast/ToastBody.d.ts
+type ToastBodyOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Adds a close button alongside the body content, so a toast composed without a
+   * `ToastHeader` still gets a dismiss control without any manual layout markup.
+   */
+  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 ToastBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ToastBodyOwnProps<C>>;
+type ToastBodyComponent = (<C extends ElementType = 'div'>(props: ToastBodyProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ToastBody: ToastBodyComponent;
+//#endregion
+//#region src/components/toast/ToastFooter.d.ts
+type ToastFooterOwnProps<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 ToastFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ToastFooterOwnProps<C>>;
+type ToastFooterComponent = (<C extends ElementType = 'div'>(props: ToastFooterProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ToastFooter: ToastFooterComponent;
+//#endregion
+//#region src/components/toast/ToastHeader.d.ts
+type ToastHeaderOwnProps<C extends ElementType> = {
+  /**
+   * Heading, rendered before `time` as a `<strong>`.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Automatically add a close button 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;
+  /**
+   * Leading icon. A string is an icon name, rendered like `<ToastIcon name={icon} />` (or by
+   * `IconProvider`'s `component`) and hidden from
+   * assistive technology by default, since it duplicates the heading visually. Pass any other
+   * node for a fully custom icon (typically a logo or avatar) — a custom node is left as-is,
+   * since it may carry its own meaningful accessible name (e.g. an avatar's `alt` text).
+   */
+  icon?: string | ReactNode;
+  /**
+   * Trailing timestamp, rendered after the heading.
+   */
+  time?: ReactNode;
+  /**
+   * Sets the `id` on the rendered heading element, for `aria-labelledby` wiring. Set
+   * automatically by `Toast` when both `title` and `message` are used together; only needed
+   * here for manual wiring in a fully custom composition.
+   */
+  titleId?: string;
+};
+type ToastHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ToastHeaderOwnProps<C>>;
+type ToastHeaderComponent = (<C extends ElementType = 'div'>(props: ToastHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ToastHeader: ToastHeaderComponent;
+//#endregion
+//#region src/components/toast/ToastIcon.d.ts
+type ToastIconProps = IconProps & {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+};
+declare const ToastIcon: React.ForwardRefExoticComponent<ToastIconProps & React.RefAttributes<HTMLSpanElement | SVGSVGElement>>;
+//#endregion
+//#region src/components/toast/Toaster.d.ts
+interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Overrides the toast region's accessible name (defaults to `'Notifications'`, per
+   * react-aria). Set this for non-English UIs, or to distinguish multiple toasters on the
+   * same page.
+   */
+  'aria-label'?: string;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Describes the placement of your component.
+   *
+   * @type 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | string
+   */
+  placement?: 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | string;
+}
+declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/toast/toastQueue.d.ts
+interface ToastContent {
+  /**
+   * Apply a CSS fade transition to the toast.
+   */
+  animation?: boolean;
+  /**
+   * Auto hide the toast. The timer starts once the show transition completes and pauses
+   * while the pointer is over the toast or focus is within it.
+   */
+  autohide?: boolean;
+  /**
+   * Content of the toast — typically a `Toast.Header`/`Toast.Body`/`Toast.Footer`.
+   */
+  children: ReactNode;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Delay hiding the toast (ms).
+   */
+  delay?: number;
+  /**
+   * Apply a full-color background with inverted text. Only meaningful alongside `color`.
+   */
+  solid?: boolean;
+  /**
+   * Apply a semi-transparent background.
+   */
+  translucent?: boolean;
+}
+declare const toastQueue: ToastQueue<ToastContent>;
+declare function addToast(children: ReactNode, options?: Omit<ToastContent, 'children'>): string;
+declare function closeToast(key: string): void;
+//#endregion
+//#region src/components/toast/context.d.ts
+interface ToastContextProps {
+  /**
+   * Whether the toast is currently visible.
+   */
+  visible?: boolean;
+  /**
+   * Dismisses the toast. Wire this to any element's `onClick` — see `useToast`.
+   */
+  close: () => void;
+}
+//#endregion
+//#region src/hooks/useToast.d.ts
+type UseToastResult = ToastContextProps;
+declare const useToast: () => UseToastResult;
+//#endregion
+export { Toast as _, closeToast as a, ToasterProps as c, ToastHeader as d, ToastHeaderProps as f, ToastBodyProps as g, ToastBody as h, addToast as i, ToastIcon as l, ToastFooterProps as m, useToast as n, toastQueue as o, ToastFooter as p, ToastContent as r, Toaster as s, UseToastResult as t, ToastIconProps as u, ToastProps as v };

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

@@ -0,0 +1,301 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as CalendarLabels, t as DateRangePreset } from "./dateRangePresets-R1FtA1zp.js";
+import React, { HTMLAttributes, ReactNode } from "react";
+import { RangeValue } from "react-aria";
+import { DateValue as DateValue$1 } from "react-stately";
+//#region src/components/datepicker/DatePicker.d.ts
+interface DatePickerBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the date picker, used when there's no visible `<label>`.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible `<label>` element for the date picker.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Whether the calendar popover is open by default (uncontrolled).
+   *
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Prevents the date picker from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * The day that starts the week in the calendar overlay, overriding the default set by the
+   * active locale.
+   *
+   * @default 'mon'
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+  /**
+   * A description for the field, rendered below the date picker.
+   */
+  help?: ReactNode;
+  /**
+   * `id` forwarded to the field's grouping 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 date picker when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * Callback that is called for each date in the calendar. If it returns `true`, that date is
+   * shown but cannot be selected.
+   */
+  isDateUnavailable?: (date: DateValue$1) => boolean;
+  /**
+   * Overrides for the strings this component and its calendar render themselves rather than
+   * getting from the active locale — the calendar trigger, the clear adornment, and the calendar's
+   * own year-view arrows/announcements. Date segment order, month and weekday names all follow
+   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,
+   * so passing one key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>;
+  /**
+   * Whether the calendar popover is open (controlled).
+   */
+  isOpen?: boolean;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with the field group.
+   */
+  label?: ReactNode;
+  /**
+   * The maximum allowed date that a user may select.
+   */
+  maxValue?: DateValue$1 | null;
+  /**
+   * The minimum allowed date that a user may select.
+   */
+  minValue?: DateValue$1 | null;
+  /**
+   * `name` of an auto-created hidden input, kept in sync with the selection, for native form
+   * submission — one input when `selectionMode` is `'single'`, one per selected date when it's
+   * `'multiple'` (same `name` on each, which browsers serialize as multiple form values). Omit to
+   * skip creating any.
+   */
+  name?: string;
+  /**
+   * Callback fired when the calendar popover's open state changes.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
+   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
+   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
+   * Applies to both the calendar overlay and typing a date directly into the field.
+   */
+  unavailableDates?: string[];
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the date picker when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * Number of months to display side by side in the calendar overlay.
+   *
+   * @default 1
+   */
+  visibleMonths?: number;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+  /**
+   * The initial selected date (uncontrolled).
+   */
+  defaultValue?: DateValue$1 | null;
+  /**
+   * Callback fired when the selected date changes.
+   */
+  onChange?: (value: DateValue$1 | null) => void;
+  /**
+   * Whether a single date or multiple, independently toggled dates can be selected. Multiple
+   * selection replaces the editable segmented field with a read-only, comma-separated list of
+   * the selected dates — a segmented day/month/year field has no way to represent more than one
+   * date.
+   *
+   * @default 'single'
+   */
+  selectionMode?: 'single';
+  /**
+   * The selected date (controlled).
+   */
+  value?: DateValue$1 | null;
+}
+interface DatePickerMultipleProps extends DatePickerBaseProps {
+  /**
+   * The initial selected dates (uncontrolled).
+   */
+  defaultValue?: DateValue$1[] | null;
+  /**
+   * Callback fired when the set of selected dates changes.
+   */
+  onChange?: (value: DateValue$1[]) => void;
+  /**
+   * Whether a single date or multiple, independently toggled dates can be selected. Multiple
+   * selection replaces the editable segmented field with a read-only, comma-separated list of
+   * the selected dates — a segmented day/month/year field has no way to represent more than one
+   * date.
+   *
+   * @default 'single'
+   */
+  selectionMode: 'multiple';
+  /**
+   * The selected dates (controlled).
+   */
+  value?: DateValue$1[] | null;
+}
+type DatePickerProps = DatePickerSingleProps | DatePickerMultipleProps;
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/datepicker/DateRangePicker.d.ts
+interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the date range picker, used when there's no visible `<label>`.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible `<label>` element for the date range picker.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Whether the calendar popover is open by default (uncontrolled).
+   *
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * The initial selected date range (uncontrolled).
+   */
+  defaultValue?: RangeValue<DateValue$1> | null;
+  /**
+   * Prevents the date range picker from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * The day that starts the week in the calendar overlay, overriding the default set by the
+   * active locale.
+   *
+   * @default 'mon'
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+  /**
+   * A description for the field, rendered below the date range picker.
+   */
+  help?: ReactNode;
+  /**
+   * `id` forwarded to the field's grouping 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 date range picker when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * Callback that is called for each date in the calendar. If it returns `true`, that date is
+   * shown but cannot be selected.
+   */
+  isDateUnavailable?: (date: DateValue$1) => boolean;
+  /**
+   * Overrides for the strings this component and its calendar render themselves rather than
+   * getting from the active locale — the clear adornment and the calendar's own year-view
+   * arrows/announcements. Date segment order, month and weekday names all follow `I18nProvider`'s
+   * locale via react-aria and need no override. Merged over the English defaults, so passing one
+   * key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>;
+  /**
+   * Whether the calendar popover is open (controlled).
+   */
+  isOpen?: boolean;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with the field group.
+   */
+  label?: ReactNode;
+  /**
+   * The maximum allowed date that a user may select.
+   */
+  maxValue?: DateValue$1 | null;
+  /**
+   * The minimum allowed date that a user may select.
+   */
+  minValue?: DateValue$1 | null;
+  /**
+   * Base `name` for a pair of auto-created hidden inputs, kept in sync with the selection, for
+   * native form submission — rendered as `${name}Start` and `${name}End`. Omit to skip creating
+   * them.
+   */
+  name?: string;
+  /**
+   * Callback fired when the selected date range changes.
+   */
+  onChange?: (value: RangeValue<DateValue$1> | null) => void;
+  /**
+   * Callback fired when the calendar popover's open state changes.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * A list of quick-select range presets shown in the overlay next to the calendar. Selecting a
+   * preset commits its range immediately, the same as picking a start and end date from the
+   * calendar. The preset matching the current selection (if any) is marked selected. Omit to not
+   * show a preset list.
+   */
+  presets?: DateRangePreset[];
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
+   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
+   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
+   * Applies to both the calendar overlay and typing a date directly into either field.
+   */
+  unavailableDates?: string[];
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the date range picker when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The selected date range (controlled).
+   */
+  value?: RangeValue<DateValue$1> | null;
+  /**
+   * Number of months to display side by side in the calendar overlay.
+   *
+   * @default 1
+   */
+  visibleMonths?: number;
+}
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DatePickerProps as a, DatePickerMultipleProps as i, DateRangePickerProps as n, DatePickerSingleProps as o, DatePicker as r, DateRangePicker as t };

package/dist/chunks/index-C61tPIJ-.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/button-group/ButtonGroup.d.ts
+type ButtonGroupOwnProps<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;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
+   */
+  vertical?: boolean;
+};
+type ButtonGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ButtonGroupOwnProps<C>>;
+type ButtonGroupComponent = (<C extends ElementType = 'div'>(props: ButtonGroupProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ButtonGroup: ButtonGroupComponent;
+//#endregion
+//#region src/components/button-group/ButtonToolbar.d.ts
+type ButtonToolbarOwnProps<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 ButtonToolbarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ButtonToolbarOwnProps<C>>;
+type ButtonToolbarComponent = (<C extends ElementType = 'div'>(props: ButtonToolbarProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ButtonToolbar: ButtonToolbarComponent;
+//#endregion
+export { ButtonGroupProps as i, ButtonToolbarProps as n, ButtonGroup as r, ButtonToolbar as t };

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

@@ -0,0 +1,52 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/file-input/FileInput.d.ts
+interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below the input.
+   */
+  help?: ReactNode;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the input when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with this input.
+   */
+  label?: ReactNode;
+  /**
+   * Allows selecting more than one file.
+   */
+  multiple?: boolean;
+  /**
+   * Method called when the selected file(s) change.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * 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 input when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+}
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { FileInputProps as n, FileInput as t };