import * as react from 'react'; import { CSSProperties, ReactNode, HTMLAttributes, ComponentPropsWithoutRef, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react'; import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, Key, ComboBoxProps, ListBoxItemRenderProps, ListBoxItemProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components'; import { DateValue } from '@internationalized/date'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { NavigateOptions } from 'react-router-dom'; import { AsyncListData } from 'react-stately/useAsyncList'; export { useAsyncList } from 'react-stately/useAsyncList'; import { ColumnSize, ColumnStaticSize, SortDescriptor as SortDescriptor$1 } from 'react-stately'; /** @public */ type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** @public */ type Responsive = T | Partial>; /** @public */ type Space = '0.5' | '1' | '1.5' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | string; /** @public */ type Display = 'none' | 'flex' | 'block' | 'inline'; /** @public */ type FlexDirection = 'row' | 'column'; /** @public */ type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; /** @public */ type JustifyContent = 'stretch' | 'start' | 'center' | 'end' | 'around' | 'between'; /** @public */ type AlignItems = 'stretch' | 'start' | 'center' | 'end'; /** @public */ type BorderRadius = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** * Border variants available for UI utility props. * * @public */ type Border = 'none' | 'base' | 'error' | 'warning' | 'selected'; /** @public */ type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto'; /** @public */ interface MarginProps { m?: Responsive; mb?: Responsive; ml?: Responsive; mr?: Responsive; mt?: Responsive; mx?: Responsive; my?: Responsive; } /** @public */ interface PaddingProps { p?: Responsive; pb?: Responsive; pl?: Responsive; pr?: Responsive; pt?: Responsive; px?: Responsive; py?: Responsive; } /** @public */ interface SpaceProps extends MarginProps, PaddingProps { } /** * Flex item properties. * * @public */ interface FlexItemProps { /** Controls the flex-grow property. Values of `true` or `false` are converted to `1` or `0` respectively. */ grow?: Responsive; /** Controls the flex-shrink property. Values of `true` or `false` are converted to `1` or `0` respectively. */ shrink?: Responsive; /** Controls the flex-basis property. */ basis?: Responsive; } /** @public */ type TextVariants = 'title-large' | 'title-medium' | 'title-small' | 'title-x-small' | 'body-large' | 'body-medium' | 'body-small' | 'body-x-small'; /** @public */ type TextColors = 'primary' | 'secondary'; /** @public */ type TextColorStatus = 'danger' | 'warning' | 'success' | 'info'; /** @public */ type TextWeights = 'regular' | 'bold'; /** * Shared utility props supported by layout-oriented UI components. * * @public */ interface UtilityProps extends SpaceProps { /** Aligns children on the cross axis in flex and grid layouts. */ alignItems?: Responsive; /** Applies a semantic border variant. */ border?: Responsive; /** Applies a semantic border radius token. */ borderRadius?: Responsive; /** Sets the ending grid column line. */ colEnd?: Responsive; /** Sets the number of grid columns to span. */ colSpan?: Responsive; /** Sets the starting grid column line. */ colStart?: Responsive; /** Sets the number of columns for grid containers. */ columns?: Responsive; /** Controls the CSS display value. */ display?: Responsive; /** Controls the direction of flex items. */ flexDirection?: Responsive; /** Controls how flex items wrap. */ flexWrap?: Responsive; /** Sets spacing between children in flex and grid layouts. */ gap?: Responsive; /** Aligns children on the main axis in flex and grid layouts. */ justifyContent?: Responsive; /** Sets the number of grid rows to span. */ rowSpan?: Responsive; } /** * Resolved background level stored in context and applied as `data-bg` on DOM elements. * Background type for the neutral bg system. * * Supports neutral levels ('neutral-1' through 'neutral-3') and * intent backgrounds ('danger', 'warning', 'success'). * * The 'neutral-4' level is not exposed as a prop value -- it is reserved * for leaf component CSS (e.g. Button on a 'neutral-3' surface). * * This is the resolved/internal representation used by the bg context system. * For the prop type accepted by container components, use `ProviderBg` instead. * * @public */ type ContainerBg = 'neutral-1' | 'neutral-2' | 'neutral-3' | 'danger' | 'warning' | 'success'; /** * Background values accepted by provider components (Box, Flex, Grid, Card, etc.). * * - `'neutral'` — automatically increments the neutral level from the parent context, * capping at the maximum level. This is always incremental; explicit levels cannot * be set directly. * - `'danger'` | `'warning'` | `'success'` — intent backgrounds used as-is. * * @public */ type ProviderBg = 'neutral' | 'danger' | 'warning' | 'success'; /** @public */ type BoxOwnProps = { as?: keyof JSX.IntrinsicElements; bg?: Responsive; children: ReactNode; className?: string; style?: CSSProperties; }; /** @public */ type BoxUtilityProps = { display?: Responsive<'none' | 'flex' | 'block' | 'inline'>; position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>; width?: Responsive; minWidth?: Responsive; maxWidth?: Responsive; height?: Responsive; minHeight?: Responsive; maxHeight?: Responsive; }; /** @public */ interface BoxProps extends SpaceProps, FlexItemProps, BoxOwnProps, BoxUtilityProps, Omit, 'children'> { } /** * A general-purpose layout primitive that can render as any HTML element and supports spacing, sizing, and background props. * * @public */ declare const Box: react.ForwardRefExoticComponent>; /** * Component definition for Box * @public */ declare const BoxDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Box"; }; readonly bg: "provider"; readonly propDefs: { readonly as: { readonly default: "div"; }; readonly bg: { readonly dataAttribute: true; }; readonly children: {}; readonly className: {}; readonly style: {}; }; readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "position", "display", "grow", "shrink", "basis", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"]; }; /** @public */ type GridOwnProps = { children: ReactNode; className?: string; style?: CSSProperties; bg?: Responsive; }; /** @public */ interface GridProps extends SpaceProps, FlexItemProps, GridOwnProps, Omit, 'children'> { columns?: Responsive; gap?: Responsive; } /** @public */ type GridItemOwnProps = { children: ReactNode; className?: string; style?: CSSProperties; bg?: Responsive; }; /** @public */ interface GridItemProps extends GridItemOwnProps, Omit, 'children'> { colSpan?: Responsive; colEnd?: Responsive; colStart?: Responsive; rowSpan?: Responsive; } /** @public */ declare const Grid: { Root: react.ForwardRefExoticComponent>; Item: react.ForwardRefExoticComponent>; }; /** * Component definition for Grid * @public */ declare const GridDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Grid"; }; readonly bg: "provider"; readonly propDefs: { readonly bg: { readonly dataAttribute: true; }; readonly children: {}; readonly className: {}; readonly style: {}; }; readonly utilityProps: readonly ["columns", "gap", "m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "grow", "shrink", "basis"]; }; /** * Component definition for GridItem * @public */ declare const GridItemDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-GridItem"; }; readonly bg: "provider"; readonly propDefs: { readonly bg: { readonly dataAttribute: true; }; readonly children: {}; readonly className: {}; readonly style: {}; }; readonly utilityProps: readonly ["colSpan", "colEnd", "colStart", "rowSpan"]; }; /** @public */ type FlexOwnProps = { children: ReactNode; className?: string; style?: CSSProperties; bg?: Responsive; }; /** @public */ interface FlexProps extends SpaceProps, FlexItemProps, FlexOwnProps, Omit, 'children'> { gap?: Responsive; align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>; justify?: Responsive<'start' | 'center' | 'end' | 'between'>; direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>; } /** * A flexbox layout container with props for controlling gap, alignment, justification, and direction. * * @public */ declare const Flex: react.ForwardRefExoticComponent>; /** * Component definition for Flex * @public */ declare const FlexDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Flex"; }; readonly bg: "provider"; readonly propDefs: { readonly bg: { readonly dataAttribute: true; }; readonly children: {}; readonly className: {}; readonly style: {}; }; readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "gap", "align", "justify", "direction", "grow", "shrink", "basis"]; }; /** @public */ type ContainerOwnProps = { children?: React.ReactNode; className?: string; style?: React.CSSProperties; }; /** @public */ interface ContainerProps extends ContainerOwnProps, Omit, keyof ContainerOwnProps> { my?: SpaceProps['my']; mb?: SpaceProps['mb']; mt?: SpaceProps['mt']; py?: SpaceProps['py']; pb?: SpaceProps['pb']; pt?: SpaceProps['pt']; } /** * A centered layout wrapper that constrains content to a maximum width and provides consistent page-level padding. * * @public */ declare const Container: react.ForwardRefExoticComponent>; /** * Component definition for Container * @public */ declare const ContainerDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Container"; }; readonly propDefs: { readonly children: {}; readonly className: {}; readonly style: {}; }; readonly utilityProps: readonly ["my", "mt", "mb", "py", "pt", "pb", "display"]; }; /** @public */ type FullPageOwnProps = { className?: string; }; /** * Props for the FullPage component. * * @public */ interface FullPageProps extends Omit, 'className'>, FullPageOwnProps { } /** * A component that fills the remaining viewport height below the Header. * * The FullPage component consumes the `--bui-header-height` CSS custom property * set by the Header component to calculate its height as * `calc(100dvh - var(--bui-header-height, 0px))`. Content inside the FullPage * scrolls independently while the Header stays visible. * * @public */ declare const FullPage: react.ForwardRefExoticComponent>; /** * Component definition for FullPage * @public */ declare const FullPageDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-FullPage"; }; readonly propDefs: { readonly className: {}; }; }; /** * Own props for the Accordion component. * @public */ type AccordionOwnProps = { bg?: ProviderBg; children: ReactNode; className?: string; }; /** * Props for the Accordion component. * @public */ interface AccordionProps extends Omit, AccordionOwnProps { } /** * Own props for the AccordionTrigger component. * @public */ type AccordionTriggerOwnProps = { className?: string; title?: string; subtitle?: string; children?: ReactNode; }; /** * Props for the AccordionTrigger component. * @public */ interface AccordionTriggerProps extends Omit, AccordionTriggerOwnProps { } /** * Own props for the AccordionPanel component. * @public */ type AccordionPanelOwnProps = { className?: string; }; /** * Props for the AccordionPanel component. * @public */ interface AccordionPanelProps extends Omit, AccordionPanelOwnProps { } /** * Own props for the AccordionGroup component. * @public */ type AccordionGroupOwnProps = { className?: string; /** * Whether multiple accordions can be expanded at the same time. * @defaultValue false */ allowsMultiple?: boolean; }; /** * Props for the AccordionGroup component. * @public */ interface AccordionGroupProps extends Omit, AccordionGroupOwnProps { } /** * A collapsible section that reveals or hides its content when the trigger is activated. * * @public */ declare const Accordion: react.ForwardRefExoticComponent>; /** * The clickable heading that toggles the visibility of an accordion panel. * * @public */ declare const AccordionTrigger: react.ForwardRefExoticComponent>; /** * The content area of an accordion that is revealed when the trigger is activated. * * @public */ declare const AccordionPanel: react.ForwardRefExoticComponent>; /** * A container that groups multiple Accordion items, optionally allowing several panels to be expanded at once. * * @public */ declare const AccordionGroup: react.ForwardRefExoticComponent>; /** * Component definition for Accordion * @public */ declare const AccordionDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Accordion"; }; readonly bg: "provider"; readonly propDefs: { readonly bg: { readonly dataAttribute: true; readonly default: "neutral"; }; readonly children: {}; readonly className: {}; }; }; /** * Component definition for AccordionTrigger * @public */ declare const AccordionTriggerDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-AccordionTrigger"; readonly button: "bui-AccordionTriggerButton"; readonly title: "bui-AccordionTriggerTitle"; readonly subtitle: "bui-AccordionTriggerSubtitle"; readonly icon: "bui-AccordionTriggerIcon"; }; readonly propDefs: { readonly className: {}; readonly title: {}; readonly subtitle: {}; readonly children: {}; }; }; /** * Component definition for AccordionPanel * @public */ declare const AccordionPanelDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-AccordionPanel"; }; readonly propDefs: { readonly className: {}; }; }; /** * Component definition for AccordionGroup * @public */ declare const AccordionGroupDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-AccordionGroup"; }; readonly propDefs: { readonly className: {}; readonly allowsMultiple: { readonly default: false; }; }; }; /** @public */ type AlertOwnProps = { status?: Responsive<'info' | 'success' | 'warning' | 'danger'>; icon?: boolean | ReactElement; isPending?: boolean; /** @deprecated Use `isPending` instead. */ loading?: boolean; customActions?: ReactNode; title?: ReactNode; description?: ReactNode; className?: string; style?: CSSProperties; }; /** * Properties for {@link Alert} * * @public */ interface AlertProps extends MarginProps, AlertOwnProps, Omit, keyof AlertOwnProps | keyof MarginProps> { } /** * A component for displaying alert messages with different status levels. * * @remarks * The Alert component supports multiple status variants (info, success, warning, danger) * and can display icons, pending states, and custom actions. It automatically handles * icon selection based on status when the icon prop is set to true. * * @example * Basic usage with title only: * ```tsx * * ``` * * @example * With title and description: * ```tsx * * ``` * * @example * With custom actions and pending state: * ```tsx * * * * * } * /> * ``` * * @public */ declare const Alert: react.ForwardRefExoticComponent>; /** * Component definition for Alert * @public */ declare const AlertDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Alert"; readonly contentWrapper: "bui-AlertContentWrapper"; readonly content: "bui-AlertContent"; readonly title: "bui-AlertTitle"; readonly description: "bui-AlertDescription"; readonly icon: "bui-AlertIcon"; readonly spinner: "bui-AlertSpinner"; readonly actions: "bui-AlertActions"; }; readonly propDefs: { readonly status: { readonly dataAttribute: true; readonly default: "info"; }; readonly isPending: { readonly dataAttribute: true; }; readonly loading: { readonly dataAttribute: true; }; readonly icon: {}; readonly customActions: {}; readonly title: {}; readonly description: {}; readonly className: {}; readonly style: {}; }; readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my"]; }; /** @public */ type AvatarOwnProps = { /** * URL of the image to display */ src: string; /** * Name of the person - used for generating initials and accessibility labels */ name: string; /** * Size of the avatar * @defaultValue 'medium' */ size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'; /** * Determines how the avatar is presented to assistive technologies. * - 'informative': Avatar is announced as "\{name\}" to screen readers * - 'decoration': Avatar is hidden from screen readers (use when name appears in adjacent text) * @defaultValue 'informative' */ purpose?: 'decoration' | 'informative'; className?: string; }; /** @public */ interface AvatarProps extends Omit, 'children' | 'className'>, AvatarOwnProps { } /** * Displays a user's profile image with an automatic fallback to their initials when the image fails to load. * * @public */ declare const Avatar: react.ForwardRefExoticComponent>; /** * Component definition for Avatar * @public */ declare const AvatarDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-AvatarRoot"; readonly image: "bui-AvatarImage"; readonly fallback: "bui-AvatarFallback"; }; readonly propDefs: { readonly size: { readonly dataAttribute: true; readonly default: "medium"; }; readonly purpose: { readonly default: "informative"; }; readonly src: {}; readonly name: {}; readonly className: {}; }; }; /** * Own props for the Badge component. * * @public */ type BadgeOwnProps = { /** * The icon to display before the badge text. */ icon?: React.ReactNode; /** * The size of the badge. */ size?: 'small' | 'medium'; children?: React.ReactNode; className?: string; }; /** * Props for the Badge component. * * @public */ interface BadgeProps extends BadgeOwnProps, Omit, keyof BadgeOwnProps> { } /** * A non-interactive badge for labeling or categorizing content. * * @public */ declare const Badge: react.ForwardRefExoticComponent>; /** * Component definition for Badge * @public */ declare const BadgeDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Badge"; readonly icon: "bui-BadgeIcon"; }; readonly bg: "consumer"; readonly propDefs: { readonly icon: {}; readonly size: { readonly dataAttribute: true; readonly default: "small"; }; readonly children: {}; readonly className: {}; }; }; /** @public */ type ButtonOwnProps = { size?: Responsive<'small' | 'medium'>; variant?: Responsive<'primary' | 'secondary' | 'tertiary'>; destructive?: boolean; iconStart?: ReactElement; iconEnd?: ReactElement; isPending?: boolean; /** @deprecated Use `isPending` instead. */ loading?: boolean; children?: ReactNode; className?: string; }; /** * Properties for {@link Button} * * @public */ interface ButtonProps extends Omit, ButtonOwnProps { } /** * A button component built on React Aria Components that provides accessible * interactive elements for triggering actions. * * @remarks * The Button component supports multiple variants (primary, secondary, tertiary, danger), * sizes (small, medium), and states including loading and disabled. It automatically * handles keyboard navigation, focus management, and ARIA attributes for accessibility. * * @example * Basic usage: * ```tsx * * ``` * * @example * With icons and loading state: * ```tsx * * ``` * * @public */ declare const Button: react.ForwardRefExoticComponent>; /** * Component definition for Button * @public */ declare const ButtonDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Button"; readonly content: "bui-ButtonContent"; readonly spinner: "bui-ButtonSpinner"; }; readonly bg: "consumer"; readonly propDefs: { readonly size: { readonly dataAttribute: true; readonly default: "small"; }; readonly variant: { readonly dataAttribute: true; readonly default: "primary"; }; readonly destructive: { readonly dataAttribute: true; }; readonly isPending: { readonly dataAttribute: true; }; readonly loading: { readonly dataAttribute: true; }; readonly iconStart: {}; readonly iconEnd: {}; readonly children: {}; readonly className: {}; }; }; /** @public */ type CardBaseProps = { children?: ReactNode; className?: string; style?: CSSProperties; }; /** @public */ type CardButtonVariant = { /** Handler called when the card is pressed. Makes the card interactive as a button. */ onPress: NonNullable; href?: never; /** Accessible label announced by screen readers for the interactive card. */ label: string; target?: never; rel?: never; download?: never; }; /** @public */ type CardLinkVariant = { /** URL to navigate to. Makes the card interactive as a link. */ href: string; onPress?: never; /** Accessible label announced by screen readers for the interactive card. */ label: string; /** Specifies where to open the linked URL (e.g. `_blank` for a new tab). */ target?: string; /** Relationship between the current document and the linked URL (e.g. `noopener`). */ rel?: string; /** Prompts the user to save the linked URL. Pass `true` for default filename or a string for a custom filename. */ download?: boolean | string; }; /** @public */ type CardStaticVariant = { onPress?: never; href?: never; label?: never; target?: never; rel?: never; download?: never; }; /** * Props for the Card component. * * @public */ type CardProps = CardBaseProps & FlexItemProps & Omit, 'onClick'> & (CardButtonVariant | CardLinkVariant | CardStaticVariant); /** * Flat own-props shape used by the component definition system. * Derived from the Card variant types so it automatically stays in sync with CardProps. * @public */ type CardOwnProps = Pick; /** @public */ type CardHeaderOwnProps = { children?: ReactNode; className?: string; }; /** * Props for the CardHeader component. * * @public */ interface CardHeaderProps extends CardHeaderOwnProps, React.HTMLAttributes { } /** @public */ type CardBodyOwnProps = { children?: ReactNode; className?: string; }; /** * Props for the CardBody component. * * @public */ interface CardBodyProps extends CardBodyOwnProps, React.HTMLAttributes { } /** @public */ type CardFooterOwnProps = { children?: ReactNode; className?: string; }; /** * Props for the CardFooter component. * * @public */ interface CardFooterProps extends CardFooterOwnProps, React.HTMLAttributes { } /** * Card component. * * @public */ declare const Card: react.ForwardRefExoticComponent>; /** * CardHeader component. * * @public */ declare const CardHeader: react.ForwardRefExoticComponent>; /** * CardBody component. * * @public */ declare const CardBody: react.ForwardRefExoticComponent>; /** * CardFooter component. * * @public */ declare const CardFooter: react.ForwardRefExoticComponent>; /** * Component definition for Card * @public */ declare const CardDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Card"; readonly trigger: "bui-CardTrigger"; }; readonly propDefs: { readonly children: {}; readonly className: {}; readonly onPress: {}; readonly href: {}; readonly label: {}; readonly target: {}; readonly rel: {}; readonly download: {}; readonly style: {}; }; readonly utilityProps: readonly ["grow", "shrink", "basis"]; }; /** * Component definition for CardHeader * @public */ declare const CardHeaderDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-CardHeader"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** * Component definition for CardBody * @public */ declare const CardBodyDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-CardBody"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** * Component definition for CardFooter * @public */ declare const CardFooterDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-CardFooter"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** @public */ type FieldLabelOwnProps = { /** * The label of the text field */ label?: string | null; /** * The secondary label of the text field */ secondaryLabel?: string | null; /** * The description of the text field */ description?: string | null; /** * The HTML for attribute of the text field */ htmlFor?: string; /** * The id of the text field */ id?: string; /** * The id to apply to the description element for aria-describedby */ descriptionId?: string; /** * The slot name to set on the description's React Aria `` element. */ descriptionSlot?: string; className?: string; }; /** @public */ interface FieldLabelProps extends FieldLabelOwnProps, Omit, keyof FieldLabelOwnProps> { } /** @public */ type DatePickerOwnProps = { /** * The size of the date picker * @defaultValue 'small' */ size?: 'small' | 'medium' | Partial>; className?: string; label?: FieldLabelProps['label']; description?: FieldLabelProps['description']; secondaryLabel?: FieldLabelProps['secondaryLabel']; }; /** @public */ interface DatePickerProps extends Omit, 'className' | 'children'>, DatePickerOwnProps { } /** * A date picker that combines a date field and a calendar popover, allowing * users to enter or select a date with full keyboard and screen reader * accessibility. * * @public */ declare const DatePicker: react.ForwardRefExoticComponent>; /** * Component definition for DatePicker * @public */ declare const DatePickerDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DatePicker"; }; readonly propDefs: { readonly size: { readonly dataAttribute: true; readonly default: "small"; }; readonly className: {}; readonly label: {}; readonly description: {}; readonly secondaryLabel: {}; }; }; /** * Component definition for DatePickerGroup * @public */ declare const DatePickerGroupDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DatePickerGroup"; readonly dateInput: "bui-DatePickerDateInput"; readonly segment: "bui-DatePickerSegment"; readonly button: "bui-DatePickerButton"; }; readonly bg: "consumer"; readonly propDefs: {}; }; /** * Component definition for DatePickerCalendar * @public */ declare const DatePickerCalendarDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DatePickerCalendar"; readonly header: "bui-DatePickerCalendarHeader"; readonly heading: "bui-DatePickerCalendarHeading"; readonly navButton: "bui-DatePickerCalendarNavButton"; readonly grid: "bui-DatePickerCalendarGrid"; readonly gridHeader: "bui-DatePickerCalendarGridHeader"; readonly headerCell: "bui-DatePickerCalendarHeaderCell"; readonly gridBody: "bui-DatePickerCalendarGridBody"; readonly cell: "bui-DatePickerCalendarCell"; }; readonly propDefs: {}; }; /** @public */ type DateRangePickerOwnProps = { /** * The size of the date range picker * @defaultValue 'small' */ size?: 'small' | 'medium' | Partial>; className?: string; label?: FieldLabelProps['label']; description?: FieldLabelProps['description']; secondaryLabel?: FieldLabelProps['secondaryLabel']; }; /** @public */ interface DateRangePickerProps extends Omit, 'className' | 'children'>, DateRangePickerOwnProps { } /** * A date range picker that combines two date fields and a calendar popover, * allowing users to enter or select a date range with full keyboard and * screen reader accessibility. * * @public */ declare const DateRangePicker: react.ForwardRefExoticComponent>; /** * Component definition for DateRangePicker * @public */ declare const DateRangePickerDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DateRangePicker"; }; readonly propDefs: { readonly size: { readonly dataAttribute: true; readonly default: "small"; }; readonly className: {}; readonly label: {}; readonly description: {}; readonly secondaryLabel: {}; }; }; /** * Props for the DialogTrigger component. * @public */ interface DialogTriggerProps extends DialogTriggerProps$1 { } /** @public */ type DialogOwnProps = { children?: ReactNode; className?: string; width?: number | string; height?: number | string; style?: React.CSSProperties; }; /** * Props for the Dialog component. * @public */ interface DialogProps extends DialogOwnProps, Omit { } /** @public */ type DialogHeaderOwnProps = { children?: ReactNode; className?: string; }; /** * Props for the DialogHeader component. * @public */ interface DialogHeaderProps extends DialogHeaderOwnProps, Omit { } /** @public */ type DialogBodyOwnProps = { children?: ReactNode; className?: string; }; /** * Props for the DialogBody component. * @public */ interface DialogBodyProps extends DialogBodyOwnProps, Omit, keyof DialogBodyOwnProps> { } /** @public */ type DialogFooterOwnProps = { children?: ReactNode; className?: string; }; /** * Props for the DialogFooter component. * @public */ interface DialogFooterProps extends DialogFooterOwnProps, Omit, keyof DialogFooterOwnProps> { } /** * A wrapper that connects a trigger element to a Dialog, controlling its open and close state. * * @public */ declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element; /** * A modal overlay that presents content requiring user interaction or acknowledgment, dismissible by clicking outside or pressing Escape. * * @public */ declare const Dialog: react.ForwardRefExoticComponent>; /** * The header section of a Dialog, containing the title and a close button. * * @public */ declare const DialogHeader: react.ForwardRefExoticComponent>; /** * The main scrollable content area of a Dialog. * * @public */ declare const DialogBody: react.ForwardRefExoticComponent>; /** * The footer section of a Dialog, typically used to place action buttons. * * @public */ declare const DialogFooter: react.ForwardRefExoticComponent>; /** * Component definition for Dialog * @public */ declare const DialogDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DialogOverlay"; readonly container: "bui-Dialog"; readonly inner: "bui-DialogInner"; readonly content: "bui-DialogContent"; }; readonly propDefs: { readonly children: {}; readonly className: {}; readonly width: {}; readonly height: {}; readonly style: {}; }; }; /** * Component definition for DialogHeader * @public */ declare const DialogHeaderDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DialogHeader"; readonly title: "bui-DialogHeaderTitle"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** * Component definition for DialogBody * @public */ declare const DialogBodyDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DialogBody"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** * Component definition for DialogFooter * @public */ declare const DialogFooterDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-DialogFooter"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** * Renders a label for a form field with optional secondary label and description text. * * @public */ declare const FieldLabel: react.ForwardRefExoticComponent>; /** * Component definition for FieldLabel * @public */ declare const FieldLabelDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-FieldLabelWrapper"; readonly label: "bui-FieldLabel"; readonly secondaryLabel: "bui-FieldSecondaryLabel"; readonly description: "bui-FieldDescription"; }; readonly propDefs: { readonly label: {}; readonly secondaryLabel: {}; readonly description: {}; readonly htmlFor: {}; readonly id: {}; readonly descriptionId: {}; readonly descriptionSlot: {}; readonly className: {}; }; }; /** * Strategies for matching the current route to determine which tab should be active. * * @public */ type TabMatchStrategy = 'exact' | 'prefix'; /** * Own props for the Tabs component. * * @public */ type TabsOwnProps = { className?: string; children?: TabsProps$1['children']; }; /** * Props for the Tabs component. * * @public */ interface TabsProps extends TabsOwnProps, Omit { } /** * Own props for the TabList component. * * @public */ type TabListOwnProps = { className?: string; children?: TabListProps$1['children']; }; /** * Props for the TabList component. * * @public */ interface TabListProps extends TabListOwnProps, Omit, 'items' | keyof TabListOwnProps> { } /** * Own props for the Tab component. * * @public */ type TabOwnProps = { className?: string; /** * Strategy for matching the current route to determine if this tab should be active. * - 'exact': Tab href must exactly match the current pathname (default) * - 'prefix': Tab is active if current pathname starts with tab href */ matchStrategy?: TabMatchStrategy; href?: TabProps$1['href']; id?: TabProps$1['id']; noTrack?: boolean; }; /** * Props for the Tab component. * * @public */ interface TabProps extends TabOwnProps, Omit { } /** * Own props for the TabPanel component. * * @public */ type TabPanelOwnProps = { className?: string; }; /** * Props for the TabPanel component. * * @public */ interface TabPanelProps extends TabPanelOwnProps, Omit { } /** * A component that renders a list of tabs. * * @public */ declare const Tabs: (props: TabsProps) => react_jsx_runtime.JSX.Element | null; /** * A component that renders a list of tabs. * * @public */ declare const TabList: (props: TabListProps) => react_jsx_runtime.JSX.Element; /** * A component that renders a tab. * * @public */ declare const Tab: (props: TabProps) => react_jsx_runtime.JSX.Element; /** * A component that renders the content of a tab. * * @public */ declare const TabPanel: (props: TabPanelProps) => react_jsx_runtime.JSX.Element; /** * Component definition for Tabs * @public */ declare const TabsDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Tabs"; }; readonly propDefs: { readonly className: {}; readonly children: {}; }; }; /** * Own props for the {@link PluginHeader} component. * * @public */ interface PluginHeaderOwnProps { icon?: React.ReactNode; title?: string; titleLink?: string; customActions?: React.ReactNode; tabs?: HeaderTab[]; onTabSelectionChange?: TabsProps$1['onSelectionChange']; className?: string; } /** * Props for the {@link PluginHeader} component. * * @public */ interface PluginHeaderProps extends PluginHeaderOwnProps { } /** * Represents a tab item in the header navigation. * * @public */ interface HeaderTab { id: string; label: string; href: string; /** * Strategy for matching the current route to determine if this tab should be active. * - 'exact': Tab href must exactly match the current pathname (default) * - 'prefix': Tab is active if current pathname starts with tab href */ matchStrategy?: TabMatchStrategy; } declare module 'react-aria-components' { interface RouterConfig { routerOptions: NavigateOptions; } } /** * Renders a plugin header with icon, title, custom actions, and optional tabs. * Always participates in the background context system so descendants (e.g. buttons) * get the correct `data-on-bg` styling inside the toolbar and tabs. * * @public */ declare const PluginHeader: (props: PluginHeaderProps) => react_jsx_runtime.JSX.Element; /** * Component definition for PluginHeader * @public */ declare const PluginHeaderDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-PluginHeader"; readonly toolbar: "bui-PluginHeaderToolbar"; readonly toolbarContent: "bui-PluginHeaderToolbarContent"; readonly toolbarControls: "bui-PluginHeaderToolbarControls"; readonly toolbarIcon: "bui-PluginHeaderToolbarIcon"; readonly toolbarName: "bui-PluginHeaderToolbarName"; readonly tabs: "bui-PluginHeaderTabsWrapper"; }; readonly propDefs: { readonly icon: {}; readonly title: {}; readonly titleLink: {}; readonly customActions: {}; readonly tabs: {}; readonly onTabSelectionChange: {}; readonly className: {}; }; }; /** * Represents a single navigation tab in the header. * * @public */ interface HeaderNavTab { id: string; label: string; href: string; } /** * Represents a group of navigation tabs rendered as a dropdown menu. * * @public */ interface HeaderNavTabGroup { id: string; label: string; items: HeaderNavTab[]; } /** * A navigation tab item — either a flat link or a dropdown group. * * @public */ type HeaderNavTabItem = HeaderNavTab | HeaderNavTabGroup; /** * Represents a tag item in the header. * * @public */ interface HeaderTag { label: string; href?: string; } /** * Represents a metadata key-value pair in the header. * * @public */ interface HeaderMetadataItem { label: string; value: React.ReactNode; } /** * Represents a user in the HeaderMetadataUsers component. * * @public */ interface HeaderMetadataUser { name: string; src?: string; href?: string; } /** * Represents a status item in the HeaderMetadataStatus component. * * @public */ interface HeaderMetadataStatusProps { label: string; color: 'danger' | 'warning' | 'success' | 'info'; href?: string; } /** * Own props for the Header component. * * @public */ interface HeaderOwnProps { title?: string; customActions?: React.ReactNode; tabs?: HeaderNavTabItem[]; activeTabId?: string | null; /** * @deprecated The breadcrumbs prop will be removed in a future release. */ breadcrumbs?: HeaderBreadcrumb[]; /** * Markdown string rendered below the title. Only inline links are supported. * Bold, italic, and block-level markdown are not rendered. */ description?: string; tags?: HeaderTag[]; metadata?: HeaderMetadataItem[]; className?: string; /** * Makes the title-and-actions row stick to the top of its nearest scroll * container while the rest of the header content scrolls away. */ sticky?: boolean; } /** * Props for the Header component. * * @public */ interface HeaderProps extends HeaderOwnProps { } /** * Represents a breadcrumb item in the header. * * @public */ interface HeaderBreadcrumb { label: string; href: string; } /** * @public * @deprecated Use {@link HeaderOwnProps} instead. */ type HeaderPageOwnProps = HeaderOwnProps; /** * @public * @deprecated Use {@link HeaderProps} instead. */ type HeaderPageProps = HeaderProps; /** * @public * @deprecated Use {@link HeaderBreadcrumb} instead. */ type HeaderPageBreadcrumb = HeaderBreadcrumb; /** * A secondary header with title, breadcrumbs, tabs, and actions. * * @public */ declare const Header: (props: HeaderProps) => react_jsx_runtime.JSX.Element; /** * @public * @deprecated Use {@link Header} instead. */ declare const HeaderPage: (props: HeaderProps) => react_jsx_runtime.JSX.Element; /** * Component definition for Header * @public */ declare const HeaderDefinition: { readonly styles: { readonly [key: string]: string; }; readonly bg: "consumer"; readonly classNames: { readonly headerTop: "bui-HeaderTop"; readonly stickySentinel: "bui-HeaderStickySentinel"; readonly content: "bui-HeaderContent"; readonly headerBottom: "bui-HeaderBottom"; readonly breadcrumbs: "bui-HeaderBreadcrumbs"; readonly breadcrumbsSmall: "bui-HeaderBreadcrumbsSmall"; readonly breadcrumbLink: "bui-HeaderBreadcrumbLink"; readonly breadcrumbLinkSmall: "bui-HeaderBreadcrumbLinkSmall"; readonly breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator"; readonly titleStack: "bui-HeaderTitleStack"; readonly title: "bui-HeaderTitle"; readonly titleSmall: "bui-HeaderTitleSmall"; readonly tabsWrapper: "bui-HeaderTabsWrapper"; readonly controls: "bui-HeaderControls"; readonly tags: "bui-HeaderTags"; readonly tag: "bui-HeaderTag"; readonly description: "bui-HeaderDescription"; readonly metaRow: "bui-HeaderMetaRow"; readonly metaItem: "bui-HeaderMetaItem"; }; readonly propDefs: { readonly title: {}; readonly customActions: {}; readonly tabs: {}; readonly activeTabId: {}; readonly breadcrumbs: {}; readonly description: {}; readonly tags: {}; readonly metadata: {}; readonly className: {}; readonly sticky: {}; }; }; /** * @public * @deprecated Use {@link HeaderDefinition} instead. */ declare const HeaderPageDefinition: { readonly styles: { readonly [key: string]: string; }; readonly bg: "consumer"; readonly classNames: { readonly headerTop: "bui-HeaderTop"; readonly stickySentinel: "bui-HeaderStickySentinel"; readonly content: "bui-HeaderContent"; readonly headerBottom: "bui-HeaderBottom"; readonly breadcrumbs: "bui-HeaderBreadcrumbs"; readonly breadcrumbsSmall: "bui-HeaderBreadcrumbsSmall"; readonly breadcrumbLink: "bui-HeaderBreadcrumbLink"; readonly breadcrumbLinkSmall: "bui-HeaderBreadcrumbLinkSmall"; readonly breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator"; readonly titleStack: "bui-HeaderTitleStack"; readonly title: "bui-HeaderTitle"; readonly titleSmall: "bui-HeaderTitleSmall"; readonly tabsWrapper: "bui-HeaderTabsWrapper"; readonly controls: "bui-HeaderControls"; readonly tags: "bui-HeaderTags"; readonly tag: "bui-HeaderTag"; readonly description: "bui-HeaderDescription"; readonly metaRow: "bui-HeaderMetaRow"; readonly metaItem: "bui-HeaderMetaItem"; }; readonly propDefs: { readonly title: {}; readonly customActions: {}; readonly tabs: {}; readonly activeTabId: {}; readonly breadcrumbs: {}; readonly description: {}; readonly tags: {}; readonly metadata: {}; readonly className: {}; readonly sticky: {}; }; }; /** @public */ declare const HeaderNavDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-HeaderNav"; readonly list: "bui-HeaderNavList"; readonly active: "bui-HeaderNavActive"; readonly hovered: "bui-HeaderNavHovered"; }; readonly propDefs: { readonly tabs: {}; readonly activeTabId: {}; readonly children: {}; readonly className: {}; }; }; /** @public */ declare const HeaderNavItemDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-HeaderNavItem"; }; readonly analytics: true; readonly propDefs: { readonly noTrack: {}; readonly id: {}; readonly label: {}; readonly href: {}; readonly active: {}; readonly registerRef: {}; readonly onHighlight: {}; readonly className: {}; }; }; /** @public */ declare const HeaderNavGroupDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-HeaderNavGroup"; }; readonly propDefs: { readonly className: {}; }; }; /** * Displays a list of users as avatars inside a Header metadata value. * A single user shows the avatar with their name beside it. * Multiple users show avatars in a row with the name revealed on hover via tooltip. * When a user has an `href`, the avatar and name become links. * * @public */ declare const HeaderMetadataUsers: ({ users, }: { users: HeaderMetadataUser[]; }) => react_jsx_runtime.JSX.Element | null; /** * Displays a single status indicator as a coloured dot with a label inside a * Header metadata value. Optionally renders the label as a link when href is provided. * * @public */ declare const HeaderMetadataStatus: ({ label, color, href, }: HeaderMetadataStatusProps) => react_jsx_runtime.JSX.Element; /** @public */ type ButtonIconOwnProps = { size?: Responsive<'small' | 'medium'>; variant?: Responsive<'primary' | 'secondary' | 'tertiary'>; icon?: ReactElement; isPending?: boolean; /** @deprecated Use `isPending` instead. */ loading?: boolean; className?: string; }; /** * Properties for {@link ButtonIcon} * * @public */ interface ButtonIconProps extends Omit, ButtonIconOwnProps { } /** * An icon-only button that supports a loading state and requires an accessible label. * * @public */ declare const ButtonIcon: react.ForwardRefExoticComponent>; /** * Component definition for ButtonIcon * @public */ declare const ButtonIconDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-ButtonIcon"; readonly content: "bui-ButtonIconContent"; readonly spinner: "bui-ButtonIconSpinner"; }; readonly bg: "consumer"; readonly propDefs: { readonly size: { readonly dataAttribute: true; readonly default: "small"; }; readonly variant: { readonly dataAttribute: true; readonly default: "primary"; }; readonly isPending: { readonly dataAttribute: true; }; readonly loading: { readonly dataAttribute: true; }; readonly icon: {}; readonly className: {}; }; }; /** @public */ type ButtonLinkOwnProps = { noTrack?: boolean; size?: Responsive<'small' | 'medium'>; variant?: Responsive<'primary' | 'secondary' | 'tertiary'>; iconStart?: ReactElement; iconEnd?: ReactElement; children?: ReactNode; className?: string; }; /** * Properties for {@link ButtonLink} * * @public */ interface ButtonLinkProps extends Omit, ButtonLinkOwnProps { } /** * A button-styled anchor element for navigation, supporting optional start and end icon slots and analytics event tracking. * * @public */ declare const ButtonLink: react.ForwardRefExoticComponent>; /** * Component definition for ButtonLink * @public */ declare const ButtonLinkDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-ButtonLink"; readonly content: "bui-ButtonLinkContent"; }; readonly bg: "consumer"; readonly analytics: true; readonly propDefs: { readonly noTrack: {}; readonly size: { readonly dataAttribute: true; readonly default: "small"; }; readonly variant: { readonly dataAttribute: true; readonly default: "primary"; }; readonly iconStart: {}; readonly iconEnd: {}; readonly children: {}; readonly className: {}; }; }; /** @public */ type CheckboxOwnProps = { children?: React.ReactNode; className?: string; }; /** @public */ interface CheckboxProps extends Omit, CheckboxOwnProps { } /** * A form checkbox input with support for indeterminate state and accessible labeling. * * @public */ declare const Checkbox: react.ForwardRefExoticComponent>; /** * Component definition for Checkbox * @public */ declare const CheckboxDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-Checkbox"; readonly indicator: "bui-CheckboxIndicator"; }; readonly propDefs: { readonly children: {}; readonly className: {}; }; }; /** * Own props for the CheckboxGroup component. * @public */ type CheckboxGroupOwnProps = { className?: string; children?: ReactNode; label?: FieldLabelProps['label']; secondaryLabel?: FieldLabelProps['secondaryLabel']; description?: FieldLabelProps['description']; isRequired?: CheckboxGroupProps$1['isRequired']; orientation?: 'horizontal' | 'vertical'; }; /** * Props for the CheckboxGroup component. * @public */ interface CheckboxGroupProps extends Omit, CheckboxGroupOwnProps { } /** * A group of checkboxes for selecting multiple options from a list. * @public */ declare const CheckboxGroup: react.ForwardRefExoticComponent>; /** * Component definition for CheckboxGroup * @public */ declare const CheckboxGroupDefinition: { readonly styles: { readonly [key: string]: string; }; readonly classNames: { readonly root: "bui-CheckboxGroup"; readonly content: "bui-CheckboxGroupContent"; }; readonly propDefs: { readonly className: {}; readonly children: {}; readonly label: {}; readonly secondaryLabel: {}; readonly description: {}; readonly isRequired: {}; readonly orientation: {}; }; }; /** @public */ type LoadingState = AsyncListData['loadingState']; /** @public */ type AsyncListSource = Pick, 'items' | 'filterText' | 'setFilterText' | 'loadingState' | 'loadMore'>; /** @public */ type LoadingConfig = { state: LoadingState; onLoadMore?: () => void; }; /** @public */ type IdentifiedOption = { id: string; value?: never; label: string; description?: string; leadingIcon?: ReactNode; disabled?: boolean; }; /** @public */ type LegacyOption = { /** @deprecated Use id instead. */ value: string; id?: never; label: string; description?: never; leadingIcon?: never; disabled?: boolean; }; /** @public */ type Option = IdentifiedOption | LegacyOption; /** @public */ type OptionSection = { title: string; options: Option[]; }; /** @public */ type NormalizedOption = Omit; /** @public */ type ComboboxServerItem = { id: Key; textValue: string; }; /** @public */ type ComboboxSearch = true | { mode?: 'client'; inputValue?: never; defaultInputValue?: string; onInputChange?: (value: string) => void; filter?: (item: T, query: string) => boolean; } | { mode?: 'client'; inputValue: string; defaultInputValue?: never; onInputChange: (value: string) => void; filter?: (item: T, query: string) => boolean; } | { mode: 'server'; inputValue: string; defaultInputValue?: never; onInputChange: (value: string) => void; filter?: never; }; /** @public */ type ComboboxAsyncSearch = true | { mode?: 'client'; inputValue?: never; defaultInputValue?: string; onInputChange?: (value: string) => void; filter?: (item: T, query: string) => boolean; } | { mode?: 'client'; inputValue: string; defaultInputValue?: never; onInputChange: (value: string) => void; filter?: (item: T, query: string) => boolean; } | { mode: 'server'; inputValue?: never; defaultInputValue?: never; onInputChange?: never; filter?: never; }; /** @public */ type ComboboxStaticSearch = true | { mode?: 'client'; inputValue?: never; defaultInputValue?: string; onInputChange?: (value: string) => void; filter?: never; } | { mode?: 'client'; inputValue: string; defaultInputValue?: never; onInputChange: (value: string) => void; filter?: never; }; /** @public */ type ComboboxBaseOwnProps = { /** * An icon to render before the input */ icon?: ReactNode; /** * The size of the combobox field * @defaultValue 'small' */ size?: 'small' | 'medium' | Partial>; /** * Placeholder text for the input. */ placeholder?: string; label?: FieldLabelProps['label']; secondaryLabel?: FieldLabelProps['secondaryLabel']; description?: FieldLabelProps['description']; isRequired?: boolean; className?: string; }; /** @public */ type ComboboxOwnProps = ComboboxBaseOwnProps & { options?: ReadonlyArray