import * as React$2 from "react"; import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, ReactNode } from "react"; import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, Key, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components"; import { SvgIcon } from "@capra/icons"; import { SvgLogo } from "@capra/icons/logos"; //#region src/utils/stylingOverride.d.ts interface StylingOverrideProps { /** Use `FORCE__className` instead. */ className?: never; /** Inline styles are not supported; use component props or `FORCE__className`. */ style?: never; /** * 🚨 This prop is meant to be an escape hatch. 🚨 * * If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly. * * Add a CSS class to the component. */ FORCE__className?: string; } //#endregion //#region src/components/Alert/Alert.d.ts declare const layouts: readonly ['section', 'compact', 'inline']; type Layout = (typeof layouts)[number]; declare const appearances$3: readonly ['info', 'warning', 'danger', 'success']; type Appearance$3 = (typeof appearances$3)[number]; type AlertProps = { /** * The layout of the alert. * * @default 'section' * * */ layout?: Layout; /** * The appearance of the alert. * * @default 'info' * * */ appearance?: Appearance$3; /** * The title of the alert. This is optional. */ title?: string; /** * The description of the alert. This is required. * * @required */ children: React$2.ReactNode; /** * The configuration of the action button. The object must contain a label displayed on the button and an onClick callback function. This is optional. * * When the object is not provided, the alert will not render the action button. */ action?: { label: string; onClick: (e: React$2.MouseEvent) => void; } | React$2.ReactElement; /** * Optional function to call when the user dismisses the alert. * * If this is not provided, the alert will not render the dismiss button. * * Alerts with `appearance="danger"` cannot be dismissed and will not render the dismiss button. * * **Integration note:** while the `Alert` will handle its own dismissal, this is non-persistent. * Persistent dismissal should be handled by the parent component. */ onDismiss?: true | (() => void); } & StylingOverrideProps & Omit, 'children' | 'className' | 'onClick'>; /** * Alerts are used to communicate important information to the user. */ declare function Alert({ appearance, layout, title, children, action, onDismiss, FORCE__className: classNameOverride, ...props }: AlertProps): React$2.JSX.Element | null; //#endregion //#region src/components/TextInput/TextInput.d.ts declare const appearances$2: readonly ['default', 'danger', 'warning']; type Appearance$2 = (typeof appearances$2)[number]; declare const sizes$2: readonly ['sm', 'md']; type Size$3 = (typeof sizes$2)[number]; type TextInputProps = { /** Appearance of the input. * @default 'default' */ appearance?: Appearance$2; /** Content before the input (e.g. icon). */ leadingSlot?: React$2.ReactNode; /** * Size of the input. * @default 'md' */ size?: Size$3; /** Content after the input (e.g. icon or clear button). */ trailingSlot?: React$2.ReactNode; } & StylingOverrideProps & Omit, 'className' | 'style' | 'size'>; /** * TextInput component for single-line text entry. Backwards compatible with Ant Design v5 Input. */ declare const TextInput: React$2.ForwardRefExoticComponent<{ /** Appearance of the input. * @default 'default' */ appearance?: Appearance$2; /** Content before the input (e.g. icon). */ leadingSlot?: React$2.ReactNode; /** * Size of the input. * @default 'md' */ size?: Size$3; /** Content after the input (e.g. icon or clear button). */ trailingSlot?: React$2.ReactNode; } & StylingOverrideProps & Omit, HTMLInputElement>, "ref">, "className" | "size" | "style"> & React$2.RefAttributes>; //#endregion //#region src/components/input-helpers/ChildrenOrFunction.d.ts type ChildrenOrFunction$1 = ReactNode | ((values: T & { defaultChildren: ReactNode | undefined; }) => ReactNode); //#endregion //#region src/components/input-helpers/fieldLayout.d.ts type FieldLayoutProps = { /** Helper text below the field. Replaced by error message when status is error. Use for requirements, disclaimers. */ helperText?: string; /** Label for the field. Required for accessibility; use aria-label if another element acts as label. */ label?: string; /** Label and field layout: vertical (label above) or horizontal (label on leading side). Prefer vertical; use horizontal when space is limited. */ layout?: 'vertical' | 'horizontal'; }; //#endregion //#region src/components/Autocomplete/AutocompleteField.d.ts type AutocompleteItem = { value: string; }; type ChildrenOrFunction = ChildrenOrFunction$1; type AutocompleteFieldProps = { /** Whether to show a clear button for the input. */ canClear?: boolean; /** The children to render in the dropdown. */ children?: ChildrenOrFunction; /** A function that filters the items based on the input value. */ itemFilter?: (textValue: string, inputValue: string) => boolean; /** A callback function that is called when the input value changes. */ onChange?: (value: string) => void; /** A callback function that is called when the dropdown is opened or closed. */ onOpenChange?: (isOpen: boolean) => void; /** The items to display in the dropdown. */ items?: AutocompleteItem[]; /** The value of the input. */ value?: AutocompleteItem['value']; /** Whether to automatically size the dropdown to the width of the input. Defaults to `true` */ shouldAutoSizeDropdown?: boolean; } & StylingOverrideProps & FieldLayoutProps & Omit, 'value' | 'onChange'>; /** * Renders an item in the Autocomplete suggestions list.. */ declare function AutocompleteItem(props: ListBoxItemProps): React$1.JSX.Element; /** * AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list. */ declare const AutocompleteField: ((props: { /** Whether to show a clear button for the input. */ canClear?: boolean; /** The children to render in the dropdown. */ children?: ChildrenOrFunction; /** A function that filters the items based on the input value. */ itemFilter?: (textValue: string, inputValue: string) => boolean; /** A callback function that is called when the input value changes. */ onChange?: (value: string) => void; /** A callback function that is called when the dropdown is opened or closed. */ onOpenChange?: (isOpen: boolean) => void; /** The items to display in the dropdown. */ items?: AutocompleteItem[]; /** The value of the input. */ value?: AutocompleteItem['value']; /** Whether to automatically size the dropdown to the width of the input. Defaults to `true` */ shouldAutoSizeDropdown?: boolean; } & StylingOverrideProps & FieldLayoutProps & Omit, HTMLInputElement>, "ref">, "className" | "size" | "style"> & React$1.RefAttributes, "ref">, "onChange" | "value"> & React$1.RefAttributes) => React$1.ReactElement) & { Item: typeof AutocompleteItem; }; //#endregion //#region src/components/Text/Text.d.ts declare const variants$1: readonly ["body", "heading", "metric", "code", "body-xs-normal", "body-xs-semibold", "body-sm-normal", "body-sm-semibold", "body-md-normal", "body-md-semibold", "body-lg-normal", "body-lg-semibold", "heading-xs", "heading-sm", "heading-md", "heading-lg", "heading-xl", "metric-sm", "metric-md", "metric-lg", "metric-xl", "code"]; type Variant$1 = (typeof variants$1)[number]; declare const colors: readonly ['default', 'primary', 'secondary', 'tertiary', 'accent', 'attention', 'warning', 'subtle', 'success', 'highlight']; type Color = (typeof colors)[number]; type TextProps = { /** * The text style variant. Defaults to `body`. */ variant?: Variant$1; /** * The text foreground color. Can be a theme color or inherited from the environment. Defaults to `inherit`. * @default inherit */ color?: Color | 'inherit'; /** * The underlying element rendered by the component. Defaults to `span`. */ as?: As; } & StylingOverrideProps & React$2.ComponentPropsWithoutRef; /** * Component for displaying text. The visual display can be controlled via * `variant`. The underlying HTML element can be controlled via the `as` prop, * which defaults to a `span` tag. */ declare const Text: (props: { /** * The text style variant. Defaults to `body`. */ variant?: Variant$1; /** * The text foreground color. Can be a theme color or inherited from the environment. Defaults to `inherit`. * @default inherit */ color?: Color | 'inherit'; /** * The underlying element rendered by the component. Defaults to `span`. */ as?: As | undefined; } & StylingOverrideProps & React$2.PropsWithoutRef> & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/Card/Card.d.ts /** * The base component for the card. * @param className - Class overrides. * @param props - The props for the card. * @returns A card base component. */ declare const CardRoot: ({ className, ...props }: React$2.ComponentProps<'div'>) => React$2.JSX.Element; /** * The header of the card. * @param className - Class overrides. * @param props - The props for the card header. * @returns A card header component. */ declare const CardHeader: ({ className, ...props }: React$2.ComponentProps<'div'>) => React$2.JSX.Element; /** * The title of the card. * @param props - The props for the card title. * @returns A card title component. */ declare const CardTitle: ({ children, variant, ...props }: Omit, 'className'>) => React$2.JSX.Element; /** * The description of the card. * @param props - The props for the card description. * @returns A card description component. */ declare const CardDescription: ({ children, ...props }: Omit, 'variant' | 'color' | 'className'>) => React$2.JSX.Element; /** * The actions container for the card header. * @param className - Class overrides. * @param props - The props for the card header actions container. * @returns A card header actions container component. */ declare const CardAction: ({ className, ...props }: React$2.ComponentProps<'div'>) => React$2.JSX.Element; /** * The content container for the card. * @param className - Class overrides. * @param props - The props for the card content container. * @returns A card content container component. */ declare const CardContent: ({ className, ...props }: React$2.ComponentProps<'div'>) => React$2.JSX.Element; /** * The footer container for the card. * @param props - The props for the card footer container. * @returns A card footer container component. */ declare const CardFooter: ({ className, ...props }: React$2.ComponentProps<'div'>) => React$2.JSX.Element; /** * Compound card component exposing structural slots for header, title, description, * action, content, and footer so consumers can build consistent layouts. */ declare const Card: typeof CardRoot & { Header: typeof CardHeader; Title: typeof CardTitle; Description: typeof CardDescription; Action: typeof CardAction; Content: typeof CardContent; Footer: typeof CardFooter; }; //#endregion //#region src/utils/accessibleLabel.d.ts type LabelledByProp = { 'aria-label'?: never; 'aria-labelledby': React.AriaAttributes['aria-labelledby']; }; type LabelProp = { 'aria-label': React.AriaAttributes['aria-label']; 'aria-labelledby'?: never; }; type AccessibleLabelProps = LabelledByProp | LabelProp; //#endregion //#region src/components/Badge/Badge.d.ts type AccessibleBadgeProps = AccessibleLabelProps & { 'aria-live'?: React$2.AriaAttributes['aria-live']; }; declare const badgeSizes: readonly ['sm', 'md']; type BadgeSize = (typeof badgeSizes)[number]; type BadgeProps = { /** * The variant of the badge. 'counter' displays a count, 'dot' displays only a dot. * @default 'counter' */ variant?: 'counter' | 'dot'; /** * Controls the Badge color. * @default 'danger' */ appearance?: 'danger' | 'info' | 'success' | 'warning' | 'neutral'; /** * Controls the Badge dimensions. * @default 'md' */ size?: BadgeSize; /** * The number to display in the badge. Default is 0. */ count?: number; /** * Whether to display the badge when the count is zero. Default is false. */ showZero?: boolean; /** * The number to display in the badge when the count is greater than the overflow count. Default is 99. */ overflowCount?: number; } & StylingOverrideProps & AccessibleBadgeProps & Omit, 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-live'>; /** * Badges display an indicator/counter on an associated component. */ declare function Badge({ appearance, variant, size, count, showZero, overflowCount, FORCE__className, style, ...props }: BadgeProps): React$2.JSX.Element | null; type BadgeLayoutProps = React$2.PropsWithChildren<{ offset?: readonly [x: number, y: number]; }>; /** * A convenience component allowing you to easily attach a badge to another component. */ declare function BadgeLayout({ children, offset }: BadgeLayoutProps): React$2.JSX.Element; //#endregion //#region src/components/ListItem/ListItem.d.ts type ListItemProps = { as?: As; } & Omit, 'className'> & StylingOverrideProps; declare function ListItem({ as: asComponent, children, FORCE__className: classNameOverride, ...props }: ListItemProps): React$2.JSX.Element; declare namespace ListItem { export { Content }; export { Label$1 as Label }; export { Description }; export { Suffix }; export { Spacer }; export { Leading }; export { Trailing }; } declare const Leading: ({ children, FORCE__className }: React$2.PropsWithChildren & StylingOverrideProps) => React$2.JSX.Element; declare const Trailing: ({ children, FORCE__className }: React$2.PropsWithChildren & StylingOverrideProps) => React$2.JSX.Element; declare const Content: ({ children, FORCE__className }: React$2.PropsWithChildren & StylingOverrideProps) => React$2.JSX.Element; type ListItemLabelProps = React$2.PropsWithChildren & { id?: string; }; declare const Label$1: ({ children, id }: ListItemLabelProps) => React$2.JSX.Element; declare const Suffix: ({ children }: React$2.PropsWithChildren) => React$2.JSX.Element; declare const Description: ({ children }: React$2.PropsWithChildren) => React$2.JSX.Element; declare const Spacer: () => React$2.JSX.Element; //#endregion //#region src/components/Pill/Pill.d.ts type PillAppearance = 'default' | 'info' | 'danger' | 'warning' | 'success' | 'highlight'; type PillVariant = 'bold' | 'muted' | 'outline'; type PillProps = React$2.HTMLAttributes & { /** * The label text to display in the pill. The label should use short and clear messaging, in one or two words. Labels are required. */ children: string; /** * Overrides the default icon shown based on the pill appearance and variant. * * To use this prop you will need a design review! */ icon?: React$2.ReactNode; /** * A variant to apply to the pill. Only applies when the appearance is not 'default'. * *
    *
  • * 'bold' - Can be used for isolated pills, such as when in the header of an object details page. * Use bold pills with caution, since they can easily distract from the primary content. * Be cautious with multiple bold pills on a single page, and absolutely avoid multiple bold pills in close proximity. *
    • *
  • 'muted' - Used when pills are inline with other content, such as table cells.
    • *
* * @default 'bold' */ variant?: PillVariant; /** * The appearance of the pill, which determines its color and severity. * *
    *
  • 'info' - Information pills communicate general information or an important property.
    • *
  • 'danger' - Danger pills communicate problems that require action to be resolved.
    • *
  • 'warning' - Warning pills can communicate information that is time-sensitive, or trending towards a danger state.
    • *
  • 'success' - Success pills communicate successful states or completed actions.
    • *
  • 'highlight' - Highlight pills bring special attention to metadata without communicating status.
    • *
* * @default 'default' */ appearance?: PillAppearance; /** * Whether to render the pill as an inline element. This is useful when the pill is used in a heading or other inline context. * * By default, the pill will be rendered as a block element. * * @default false */ inline?: boolean; } & StylingOverrideProps; declare const Pill: ({ children, icon: overrideIcon, variant, appearance, inline, FORCE__className: classNameOverride, ...props }: PillProps) => React$2.JSX.Element; //#endregion //#region src/components/RadioGroup/RadioGroup.d.ts type RadioGroupContextValue = { /** The name of the radio group, this will act as a default name if one is not provided to the child radio components. */ name?: string; /** Whether the radios in the group are required */ required?: boolean; /** Whether the radios in the group are disabled */ disabled?: boolean; /** The current value of the radio group */ value?: string | null; /** Callback when the value of the radio group changes */ onChange?(e: React$2.ChangeEvent): void; /** * Whether the radio buttons should be displayed vertically or horizontally * @default 'horizontal' */ layout?: 'vertical' | 'horizontal'; }; type RadioGroupProps = RadioGroupContextValue & StylingOverrideProps & Omit, 'className' | 'onChange'>; /** * A control wrapper for a group of radio buttons. */ declare const RadioGroup: (props: RadioGroupContextValue & StylingOverrideProps & Omit, HTMLFieldSetElement>, "ref">, "className" | "onChange"> & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/Radio/Radio.d.ts type ChildrenLabel = { children: string; 'aria-label'?: never; 'aria-labelledby'?: never; }; /** * Require either 'aria-label', 'aria-labelledby', or 'children' for accessibility */ type LabelProps$1 = AccessibleLabelProps | ChildrenLabel; type RadioProps = { /** The value of the radio button. */ value: string | null; } & Partial & LabelProps$1 & StylingOverrideProps & Omit, 'className' | 'type'>; /** * A presentational radio button component. You will typically use this component within a RadioGroup component. */ declare const Radio: (props: RadioProps & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/RadioTile/RadioTile.d.ts type RadioTileProps = { /** * Optional description text displayed below the main label in the tile. */ description?: React$2.ReactNode; /** * The main label for the tile. */ children: React$2.ReactNode; /** * Optional icon to display in the tile. */ icon?: React$2.ReactNode; } & Omit & StylingOverrideProps; /** * A card variation of a radio button component. You will typically use this component within a RadioGroup component. */ declare const RadioTile: (props: { /** * Optional description text displayed below the main label in the tile. */ description?: React$2.ReactNode; /** * The main label for the tile. */ children: React$2.ReactNode; /** * Optional icon to display in the tile. */ icon?: React$2.ReactNode; } & Omit & StylingOverrideProps & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/Switch/Switch.d.ts type SwitchNativeProps = Omit, 'aria-label' | 'aria-labelledby' | 'className' | 'role' | 'size' | 'type'>; type SwitchProps = AccessibleLabelProps & SwitchNativeProps & { size?: 'sm' | 'md'; } & StylingOverrideProps; declare const Switch: React$2.ForwardRefExoticComponent>; //#endregion //#region src/components/Tag/Tag.d.ts declare const tagColors: readonly ['default', 'accent', 'danger', 'warning', 'info', 'success', 'highlight', 'brand', 'amber', 'blue', 'bronze', 'brown', 'criblTeal', 'crimson', 'cyan', 'gold', 'grass', 'green', 'indigo', 'iris', 'jade', 'lime', 'mint', 'orange', 'pink', 'plum', 'purple', 'red', 'ruby', 'sky', 'teal', 'tomato', 'violet', 'yellow']; type TagColor = (typeof tagColors)[number]; declare const tagSizes: readonly ['sm', 'md']; type TagSize = (typeof tagSizes)[number]; type Draggable = { draggable: true; onDragStart: React$2.DragEventHandler; onDragEnd: React$2.DragEventHandler; onHandleKeydown: React$2.KeyboardEventHandler; }; type NonDraggable = { draggable?: false; onDragStart?: never; onDragEnd?: never; onHandleKeydown?: never; }; type DraggableProps = Draggable | NonDraggable; type TagProps = DraggableProps & { /** * The color of the tag. Defaults to `default`. */ color?: TagColor; /** * The icon or logo to display in the tag. */ icon?: SvgIcon | SvgLogo; /** * The label text to display in the tag. */ children: string; /** * The size of the tag. Defaults to `md`. */ size?: TagSize; /** * The callback function for when the user clicks the delete button. */ onDelete?: () => void; } & StylingOverrideProps & Omit, 'className' | 'draggable'>; /** * A tag component for displaying a label and an optional icon. */ declare function Tag({ draggable, color, icon: Icon, children, size, onDelete, onDragStart, onDragEnd, onHandleKeydown, FORCE__className: classNameOverride, ...props }: TagProps): React$2.JSX.Element; //#endregion //#region src/components/Checkbox/Checkbox.d.ts type CheckboxProps = { /** Whether the checkbox is in an indeterminate state. */ indeterminate?: boolean; /** Controlled checked state. Use with onChange for controlled component. */ checked?: boolean; /** Default checked state for uncontrolled component. */ defaultChecked?: boolean; /** The label for the checkbox. */ children?: string | React$2.ReactNode; } & StylingOverrideProps & Omit, 'className' | 'type'>; /** * Checkbox component for capturing boolean user input. * Supports controlled and uncontrolled modes with proper accessibility. * * @example * // Uncontrolled * Accept terms * * // Controlled * Subscribe */ declare const Checkbox: React$2.ForwardRefExoticComponent<{ /** Whether the checkbox is in an indeterminate state. */ indeterminate?: boolean; /** Controlled checked state. Use with onChange for controlled component. */ checked?: boolean; /** Default checked state for uncontrolled component. */ defaultChecked?: boolean; /** The label for the checkbox. */ children?: string | React$2.ReactNode; } & StylingOverrideProps & Omit, HTMLInputElement>, "ref">, "className" | "type"> & React$2.RefAttributes>; //#endregion //#region src/components/Collapse/Collapse.d.ts /** Props forwarded to React Aria `Disclosure`; see https://reactaria.adobe.com/Disclosure */ type CollapseDisclosureProps = Pick; type CollapseProps = StylingOverrideProps & CollapseDisclosureProps & { /** Plain string title rendered in the disclosure heading. */ title: string; /** Trailing header region for actions (switches, buttons, etc.). */ headerTrailingContentSlot?: React$2.ReactNode; /** Content of the disclosure panel. */ children: React$2.ReactNode; }; /** * A collapsible disclosure section with an expandable header and panel. * * Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions * (switches, buttons), and the panel body via **`children`**. */ declare const Collapse: React$2.ForwardRefExoticComponent>; //#endregion //#region src/components/InputRow/InputRow.d.ts type InputRowProps = { children?: React$2.ReactNode; } & StylingOverrideProps & Omit, 'className'>; type InputRowAddonProps = { children?: React$2.ReactNode; /** * Vertical size to align with adjacent {@link TextInput} / field controls. * @default 'md' */ size?: Size$3; } & StylingOverrideProps & Omit, 'className'>; declare function InputRowAddon({ children, size, FORCE__className: classNameOverride, ...rest }: InputRowAddonProps): React$2.JSX.Element; declare function InputRowRoot({ children, FORCE__className: classNameOverride, role: roleProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest }: InputRowProps): React$2.JSX.Element; /** * Horizontal flex container for visually joining inputs and addons. */ declare const InputRow: typeof InputRowRoot & { Addon: typeof InputRowAddon; }; //#endregion //#region src/components/TextField/TextField.d.ts type TextFieldProps = { /** Called with the new string value when the input changes. */ onChange?: (value: string) => void; /** When true, shows a character count. */ showCount?: boolean; value?: string | number | undefined; } & FieldLayoutProps & Omit; /** * Single-line text field with optional label and helper text. */ declare const TextField: React$2.ForwardRefExoticComponent<{ /** Called with the new string value when the input changes. */ onChange?: (value: string) => void; /** When true, shows a character count. */ showCount?: boolean; value?: string | number | undefined; } & FieldLayoutProps & Omit & React$2.RefAttributes>; //#endregion //#region src/components/PasswordField/PasswordField.d.ts type PasswordFieldProps = Omit; /** * Password field with a trailing control to show or hide the value. * Composes {@link TextField}; visibility toggles the underlying input between `password` and `text`. */ declare const PasswordField: React$2.ForwardRefExoticComponent>; //#endregion //#region src/components/NumberField/NumberField.d.ts type NumberFieldProps = Omit & { /** Called with the unformatted number value when the number changes. */ onChange?: (value: number) => void; /** Locale-aware display and parsing for the displayed value (see https://react-aria.adobe.com/NumberField#format-options) */ formatOptions?: Intl.NumberFormatOptions; /** Minimum value */ min?: number; /** Maximum value */ max?: number; /** * Step increment. When omitted, defaults to `1` (same as native `input type="number"`). */ step?: number; } & FieldLayoutProps; /** * Number field built on React Aria `NumberField`, with custom increment/decrement controls (native spinners hidden). */ declare const NumberField: React$2.ForwardRefExoticComponent & { /** Called with the unformatted number value when the number changes. */ onChange?: (value: number) => void; /** Locale-aware display and parsing for the displayed value (see https://react-aria.adobe.com/NumberField#format-options) */ formatOptions?: Intl.NumberFormatOptions; /** Minimum value */ min?: number; /** Maximum value */ max?: number; /** * Step increment. When omitted, defaults to `1` (same as native `input type="number"`). */ step?: number; } & FieldLayoutProps & React$2.RefAttributes>; //#endregion //#region src/components/DatePickerField/DatePickerField.d.ts type DatePickerFieldProps = FieldLayoutProps & Pick & Pick, 'value' | 'defaultValue' | 'onChange'> & { /** Smallest date/time unit shown in the field. Only `day` and `second` are supported. */ granularity?: 'day' | 'second'; } & StylingOverrideProps & { /** When true, shows a clear control to the left of the calendar button while the field has a value. */ canClear?: boolean; /** Disables the field. */ disabled?: boolean; /** Optional id for the root; associates the label and field. */ id?: string; /** Read-only field. */ readOnly?: boolean; /** Required field. */ required?: boolean; /** Invalid value; `appearance="danger"` also forces an invalid state for display. */ isInvalid?: boolean; }; declare const DatePickerField: React$2.ForwardRefExoticComponent & Pick, "defaultValue" | "onChange" | "value"> & { /** Smallest date/time unit shown in the field. Only `day` and `second` are supported. */ granularity?: 'day' | 'second'; } & StylingOverrideProps & { /** When true, shows a clear control to the left of the calendar button while the field has a value. */ canClear?: boolean; /** Disables the field. */ disabled?: boolean; /** Optional id for the root; associates the label and field. */ id?: string; /** Read-only field. */ readOnly?: boolean; /** Required field. */ required?: boolean; /** Invalid value; `appearance="danger"` also forces an invalid state for display. */ isInvalid?: boolean; } & React$2.RefAttributes>; //#endregion //#region src/components/SelectField/SelectField.d.ts type SelectionMode = 'single' | 'multiple'; type DefaultItem = { id: Key; label: string; /** Optional icon rendered before the label. */ icon?: SvgIcon; }; /** A group of `DefaultItem`s, rendered as a labeled section. Enables defining sections via `items` instead of JSX children. */ type DefaultSection = { /** Unique key for the section. */ id: Key; /** Visible header label. Omit for an unlabeled group (then pass `aria-label`). */ label?: string; /** Accessible name when there is no visible header. */ 'aria-label'?: string; /** Options within this section. */ children: Iterable; }; type DefaultItemOrSection = DefaultItem | DefaultSection; type ItemRenderer = (item: T) => React$2.ReactElement; type ItemsChildren = React$2.ReactNode | ItemRenderer; type SelectFieldProps = FieldLayoutProps & StylingOverrideProps & { /** Visual status of the trigger. `danger` marks the field invalid for accessibility and helper text treatment. @default 'default' */ appearance?: Appearance$2; /** Trigger size variant. @default 'md' */ size?: Size$3; /** Optional content rendered before the selected value, such as an icon. Pass a single node or group multiple nodes in a fragment or array. */ leadingSlot?: React$2.ReactNode; /** Placeholder text shown in the trigger when there is no selection. Omit to render an empty trigger instead of a default placeholder. */ placeholder?: string; /** Disables the field and prevents opening the listbox. */ disabled?: boolean; /** Marks the field as required and shows the required indicator on the label. */ required?: boolean; /** HTML `id` for the field root; associates the label, trigger, and helper text. */ id?: string; /** Form field `name` used for native form submission. */ name?: string; /** Whether to focus the trigger on mount. */ autoFocus?: boolean; /** Selection behavior for the field. @default 'single' */ selectionMode?: M; /** Controlled selected key, or selected keys when `selectionMode` is `multiple`. */ value?: M extends 'multiple' ? Iterable : Key | null; /** Uncontrolled initial selected key, or keys when `selectionMode` is `multiple`. */ defaultValue?: M extends 'multiple' ? Iterable : Key | null; /** Called when the selection changes. Receives a `Set` of keys in multiple selection mode. */ onChange?: (value: M extends 'multiple' ? Set : Key | null) => void; /** Controlled open state for the options popover. */ isOpen?: boolean; /** Uncontrolled initial open state for the options popover. */ defaultOpen?: boolean; /** Called when the options popover opens or closes. */ onOpenChange?: (isOpen: boolean) => void; /** When true, renders a search input in the popover to filter options. */ canSearch?: boolean; /** Placeholder text for the in-popover search input when `canSearch` is true. */ searchPlaceholder?: string; /** Whether the popover should be at least as wide as the trigger. @default true */ shouldAutoSizeDropdown?: boolean; /** Accessible name when a visible `label` is not provided. */ 'aria-label'?: string; /** Id of an element that labels the field when a visible `label` is not used. */ 'aria-labelledby'?: string; /** Id of an element that describes the field, such as external helper or error text. */ 'aria-describedby'?: string; /** Data source for dynamic option rendering. Omit to render static `SelectField.Item` children instead. */ items?: Iterable; /** Key(s) of options that cannot be selected, focused, or otherwise interacted with. */ disabledKeys?: Iterable; /** Static `SelectField.Item` children, or a render function for each item in `items`. Defaults to rendering each item's `id` and `label` when `items` is provided and `children` is omitted. */ children?: ItemsChildren; }; type SelectFieldItemProps = { /** Unique key for the option. */ id: Key; /** Text used for typeahead and accessibility name computation. */ textValue?: string; /** Disables the option, preventing selection, focus, and interaction. */ isDisabled?: boolean; /** * Extra inset for the row. When omitted, items inside {@link SelectField.Section} with a {@link SelectField.Header} indent automatically. */ indent?: boolean; /** The object value this item represents. Set automatically when using dynamic collections via `items`. */ value?: object; /** Content rendered for the option label. */ children: React$2.ReactNode; }; type SelectFieldHeaderProps = StylingOverrideProps & { /** * Optional id for `aria-labelledby` on {@link SelectField.Section}. When omitted inside a section, an id is assigned automatically. */ id?: string; /** Header label. */ label?: React$2.ReactNode; /** Children for compound usage. */ children?: React$2.ReactNode; }; type SelectFieldSectionProps = StylingOverrideProps & Omit, 'role'> & { /** * Groups {@link SelectField.Item} rows. Use with an optional {@link SelectField.Header} to label the group. * If there is no header, pass `aria-label` (or `aria-labelledby`) so the group has an accessible name. */ children?: React$2.ReactNode; }; declare function SelectFieldItem(props: SelectFieldItemProps): React$2.JSX.Element; declare function SelectFieldHeader(props: SelectFieldHeaderProps): React$2.JSX.Element; declare function SelectFieldSection(props: SelectFieldSectionProps): React$2.JSX.Element; /** * Composed select field with Capra label/helper text layout, single and multiple selection, and an optional popover search input. */ declare const SelectField: ((props: SelectFieldProps & React$2.RefAttributes) => React$2.ReactElement | null) & { Item: typeof SelectFieldItem; Header: typeof SelectFieldHeader; Section: typeof SelectFieldSection; }; //#endregion //#region src/components/DateRangePickerField/DateRangePickerField.d.ts /** Visible placeholders for empty start/end when the field is not focus-within. */ type DateRangePickerFieldPlaceholder = readonly [string, string]; type DateRangePickerFieldProps = FieldLayoutProps & Pick & { /** Placeholders for empty start and end, shown with a swap icon between them when the group is not focus-within. */ placeholder?: DateRangePickerFieldPlaceholder; } & Pick, 'value' | 'defaultValue' | 'onChange' | 'shouldCloseOnSelect'> & { /** Smallest date/time unit shown in the fields. Only `day` and `second` are supported. */ granularity?: 'day' | 'second'; } & StylingOverrideProps & { /** When true, shows a clear control to the left of the calendar button while the field has a value. */ canClear?: boolean; /** Disables the field. */ disabled?: boolean; /** Optional id for the root; associates the label and field. */ id?: string; /** Read-only field. */ readOnly?: boolean; /** Required field. */ required?: boolean; /** Invalid value; `appearance="danger"` also forces an invalid state for display. */ isInvalid?: boolean; }; declare const DateRangePickerField: React$2.ForwardRefExoticComponent & { /** Placeholders for empty start and end, shown with a swap icon between them when the group is not focus-within. */ placeholder?: DateRangePickerFieldPlaceholder; } & Pick, "defaultValue" | "onChange" | "shouldCloseOnSelect" | "value"> & { /** Smallest date/time unit shown in the fields. Only `day` and `second` are supported. */ granularity?: 'day' | 'second'; } & StylingOverrideProps & { /** When true, shows a clear control to the left of the calendar button while the field has a value. */ canClear?: boolean; /** Disables the field. */ disabled?: boolean; /** Optional id for the root; associates the label and field. */ id?: string; /** Read-only field. */ readOnly?: boolean; /** Required field. */ required?: boolean; /** Invalid value; `appearance="danger"` also forces an invalid state for display. */ isInvalid?: boolean; } & React$2.RefAttributes>; //#endregion //#region src/components/TextArea/textAreaAutosize.d.ts type TextAreaAutoSize = boolean | { minRows?: number; maxRows?: number; }; //#endregion //#region src/components/TextArea/TextArea.d.ts type TextAreaProps = { /** * Appearance of the text area. * @default 'default' */ appearance?: Appearance$2; /** * Whether the text area can be vertically resized by the user. * @default true */ resizable?: boolean; /** * Auto-growing height (Ant Design `Input.TextArea`–style). * `true` grows with content; use `{ minRows, maxRows }` to clamp height. * When enabled, manual vertical resize is disabled (`resize: none`). */ autoSize?: TextAreaAutoSize; /** When true, shows a character count. */ showCount?: boolean; /** Called with the new string value when the input changes. */ onChange?: (value: string) => void; } & FieldLayoutProps & StylingOverrideProps & Omit, 'className' | 'style' | 'size' | 'onChange'>; /** * TextArea component for multi-line text entry. */ declare const TextArea: React$2.ForwardRefExoticComponent<{ /** * Appearance of the text area. * @default 'default' */ appearance?: Appearance$2; /** * Whether the text area can be vertically resized by the user. * @default true */ resizable?: boolean; /** * Auto-growing height (Ant Design `Input.TextArea`–style). * `true` grows with content; use `{ minRows, maxRows }` to clamp height. * When enabled, manual vertical resize is disabled (`resize: none`). */ autoSize?: TextAreaAutoSize; /** When true, shows a character count. */ showCount?: boolean; /** Called with the new string value when the input changes. */ onChange?: (value: string) => void; } & FieldLayoutProps & StylingOverrideProps & Omit, HTMLTextAreaElement>, "ref">, "className" | "onChange" | "size" | "style"> & React$2.RefAttributes>; //#endregion //#region src/components/Modal/Modal.d.ts type ModalSize = 'sm' | 'md' | 'lg'; type ModalProps = React$2.PropsWithChildren<{ /** Controlled open state */ isOpen?: boolean; /** Called when open state changes */ onIsOpenChange?: (open: boolean) => void; /** Modal title shown in the header */ title?: React$2.ReactNode; /** Label for the confirm action button */ confirmButtonText?: string; /** Label for the cancel action button. Pass `null` to hide the secondary button. */ cancelButtonText?: string | null; /** * Called when the confirm action button is pressed. * * If the handler returns a promise, the button will display a pending state until the promise is fulfilled. The modal will close automatically when the promise is fulfilled **regardless of whether the promise is resolved or rejected**. */ onConfirm?: () => void; /** Called when cancel/overlay dismiss is triggered */ onClose?: () => void; /** Optional footer content (e.g. action buttons). If provided, it replaces the default footer in which case the primary and secondary buttons will not show. Pass `null` to completely hide all footers. */ footer?: React$2.ReactNode; /** Width variant */ size?: ModalSize; /** If false, remove the close button in the header and prevent `Esc` from closing the modal. Defaults to `true`. */ isDismissible?: boolean; /** * The container to mount the modal in. Defaults to `document.body`. * * **Warning**: This is an unsafe feature and may cause accessibility, keyboard navigation, and other issues. Only use if you know what you are doing. */ getContainer?: () => HTMLElement; }> & StylingOverrideProps; /** Options for the imperative Modal.create() API */ type ModalCreateOptions = Omit; /** Return value of Modal.create() */ type ModalCreateResult = { /** Close the modal. Safe to call multiple times. */ close: () => void; /** Promise that resolves when the modal has closed (after close is called or user dismisses). */ closed: Promise; }; declare const appearances$1: readonly ['default', 'info', 'danger', 'warning', 'success']; type Appearance$1 = (typeof appearances$1)[number]; type ConfirmationModalProps = Omit & { /** Visual appearance of the confirmation modal */ appearance?: Appearance$1; /** Modal title shown in the header */ title: string; /** Confirmation content */ content?: React$2.ReactNode; }; declare function ModalInner({ children, isOpen: open, onIsOpenChange: onOpenChange, title, footer, size, isDismissible, FORCE__className, confirmButtonText, cancelButtonText, onClose, onConfirm, getContainer }: ModalProps): React$2.JSX.Element; declare function ModalFooterActions({ children }: { children: React$2.ReactNode; }): React$2.JSX.Element; declare function ModalExpandedFooterLayout({ children }: { children: React$2.ReactNode; }): React$2.JSX.Element; declare function ModalHeading({ children }: { children: React$2.ReactNode; }): React$2.JSX.Element; declare function ModalExpandedTitleLayout({ children }: { children: React$2.ReactNode; }): React$2.JSX.Element; declare const Modal: typeof ModalInner & { confirm: (options: ModalCreateOptions) => ModalCreateResult; info: (options: ModalCreateOptions) => ModalCreateResult; success: (options: ModalCreateOptions) => ModalCreateResult; warning: (options: ModalCreateOptions) => ModalCreateResult; danger: (options: ModalCreateOptions) => ModalCreateResult; FooterActions: typeof ModalFooterActions; ExpandedFooterLayout: typeof ModalExpandedFooterLayout; Heading: typeof ModalHeading; ExpandedTitleLayout: typeof ModalExpandedTitleLayout; }; //#endregion //#region src/components/Drawer/Drawer.d.ts type DrawerPlacement = 'left' | 'right'; type DrawerProps = { /** * Whether the drawer is open. * @default false */ isOpen?: boolean; /** * Called when the drawer should close: header dismiss, footer actions you wire up, scrim click (when a scrim is * shown), or Escape. */ onClose?: (event?: React$2.MouseEvent | React$2.KeyboardEvent) => void; /** Called when the drawer open state changes (after render). */ onOpenChange?: (isOpen: boolean) => void; /** * Which vertical edge the drawer attaches to (Capra does not support top/bottom drawers). * @default 'right' */ placement?: DrawerPlacement; /** * Preferred panel width. The rendered width is clamped to at least **400px** and at most **80%** of the viewport * (`max(400px, min(width, 80vw))`). */ width?: string | number; /** * Header content: pass a string for a single heading, or compose with `Drawer.Heading`, optional * `Drawer.Description`, `Drawer.ExpandedTitleLayout`, and `Breadcrumbs` (same idea as `Modal`). */ title?: React$2.ReactNode; /** Footer region, typically actions. */ footer?: React$2.ReactNode; /** * Whether to show the dismiss control in the header. * @default true */ closable?: boolean; /** * When `true` (default), the drawer is **modal**: a scrim blocks interaction with the main page, page scroll * is locked while open, and focus is contained in the sheet. When `false`, the drawer is **non-modal**: no scrim, * the main page stays scrollable and focusable alongside the sheet — use for persistent, dismissible panels * where users need to interact with both surfaces. * @default true */ modal?: boolean; /** * Portal container. `false` falls back to `document.body` (inline mounting is not supported). */ getContainer?: HTMLElement | (() => HTMLElement) | false; /** * Last-resort CSS class on the portal **root** wrapping the overlay and sheet. Prefer design tokens and built-in * props; structure is an implementation detail and may change across releases. */ FORCE__className?: string; children?: React$2.ReactNode; /** Pass-through when no visible title is provided. */ 'aria-label'?: string; }; declare function DrawerHeading({ children, id: idProp }: { children: React$2.ReactNode; id?: string; }): React$2.JSX.Element; declare function DrawerExpandedTitleLayout({ children }: { children: React$2.ReactNode; }): React$2.JSX.Element; declare function DrawerDescription({ children }: { children: React$2.ReactNode; }): React$2.JSX.Element; declare function DrawerInner({ isOpen, onClose, onOpenChange, placement, width, title, footer, closable, modal, getContainer, FORCE__className, children, 'aria-label': ariaLabel }: DrawerProps): React$2.ReactPortal | null; /** * A side sheet aligned with Capra design: supports **modal** (scrim + scroll lock + focus trap) and **non-modal** * (parallel interaction with the main page) modes, and Ant Design–compatible props where applicable. * * For breadcrumb + title headers, compose `title` with `Drawer.Heading`, optional `Drawer.Description`, * `Drawer.ExpandedTitleLayout`, and the shared `Breadcrumbs` components — same pattern as `Modal`. */ declare const Drawer: typeof DrawerInner & { Heading: typeof DrawerHeading; Description: typeof DrawerDescription; ExpandedTitleLayout: typeof DrawerExpandedTitleLayout; }; //#endregion //#region src/components/Popover/Popover.d.ts type PopoverPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'; type PopoverSurfaceProps = { /** * Controls the open state of the popover. If provided, the component is in controlled mode. */ isOpen?: boolean; /** * Callback function invoked when the open state changes. */ onOpenChange?: (isOpen: boolean) => void; /** * The position of the popover relative to the trigger element. * @default 'top' */ placement?: PopoverPlacement; /** * When `false`, the popover does not flip to the opposite side when it would overflow the viewport. * @default true */ shouldFlip?: boolean; /** * When `true`, removes default padding from the content area. Use for dense content such as menus. * @default false */ removeContentPadding?: boolean; /** * The DOM element where the popover should be rendered. * @default document.body * * **Warning**: This is an unsafe feature and may cause accessibility, keyboard navigation, and other issues. Only use if you know what you are doing. */ getContainer?: () => HTMLElement | null; /** * The additional offsets applied between the element and its anchor element. The first number is the offset along the main axis, the second number is the offset along the cross axis. * @default [8, 0] */ offsets?: [number, number]; } & StylingOverrideProps & Pick & Omit, 'className' | 'content'>; type PopoverProps = { /** * The popover content to be displayed. */ content: React$2.ReactNode; /** * The visible trigger element. This can be a single element or a component tree, but there MUST be a `Button` or `IconButton` in the tree. Only Capra buttons will trigger the popover. */ children: React$2.ReactNode; } & Omit; /** * A popover component that renders a trigger and popover content. */ declare function Popover({ content, children, isOpen, onOpenChange, ...props }: PopoverProps): React$2.JSX.Element; //#endregion //#region src/components/Ribbon/Ribbon.d.ts declare const ribbonColors: readonly ['teal', 'green', 'purple']; type RibbonColor = (typeof ribbonColors)[number]; declare const ribbonPositions: readonly ['left', 'right']; type RibbonPosition = (typeof ribbonPositions)[number]; type RibbonProps = StylingOverrideProps & Omit, 'className' | 'style'> & { /** * The label text to display. */ children: string; /** * The color of the ribbon. One of the predefined colors (teal, green, purple). * For custom colors, use FORCE__className with CSS that sets --_ribbon-background-color. * @default 'teal' */ color?: RibbonColor; /** * Icon to display before the ribbon text. */ leadingIcon?: SvgIcon; /** * The position of the ribbon tail (left or right). * @default 'right' */ position?: RibbonPosition; /** * Icon to display after the ribbon text. */ trailingIcon?: SvgIcon; }; /** * A ribbon component used to highlight new features that exist in a 'preview' state. * Ribbons communicate that users may encounter errors when using these features. */ declare const Ribbon: ({ children, FORCE__className: classNameOverride, color, leadingIcon: LeadingIcon, position, trailingIcon: TrailingIcon, ...props }: RibbonProps) => React$2.JSX.Element; //#endregion //#region src/components/Anchor/Anchor.d.ts type AnchorProps = { /** * The label text to display in the anchor. Anchor labels should be one or two words, using title case (Tab Label). Labels should be less than 12 characters, with a maximum of 32 characters. */ children: React$2.ReactNode; /** * The href attribute of the anchor. */ href?: string; /** * Whether the anchor is active. */ isActive?: boolean; /** * Whether the anchor is disabled. */ isDisabled?: boolean; /** * The underlying element rendered by the anchor. Defaults to `a`. */ as?: As; } & StylingOverrideProps & Omit, 'className'>; declare const Anchor: (props: { /** * The label text to display in the anchor. Anchor labels should be one or two words, using title case (Tab Label). Labels should be less than 12 characters, with a maximum of 32 characters. */ children: React$2.ReactNode; /** * The href attribute of the anchor. */ href?: string; /** * Whether the anchor is active. */ isActive?: boolean; /** * Whether the anchor is disabled. */ isDisabled?: boolean; /** * The underlying element rendered by the anchor. Defaults to `a`. */ as?: As | undefined; } & StylingOverrideProps & Omit>, "className"> & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/Button/Button.d.ts declare const variants: readonly ['primary', 'secondary', 'tertiary']; type Variant = (typeof variants)[number]; declare const appearances: readonly ['default', 'danger', 'neutral']; type Appearance = (typeof appearances)[number]; declare const sizes$1: readonly ['xs', 'sm', 'md', 'lg', 'xl']; type Size$2 = (typeof sizes$1)[number]; type ButtonProps = { /** The `label` for the button. */ children: string; /** Which button style to use. Defaults to `secondary`. */ variant?: Variant; /** Appearance to apply to the button. Defaults to `default`. */ appearance?: Appearance; /** Size of the button. Defaults to `md`. */ size?: Size$2; /** Whether the button is disabled. */ disabled?: boolean; /** Whether the button is in a pending state. */ pending?: boolean; /** Icon to display before the button text. */ leadingIcon?: SvgIcon; /** Icon to display after the button text. */ trailingIcon?: SvgIcon; /** Whether to display the button as a block-level (full-width) component. Defaults to `false`. */ block?: boolean; /** Click handler for the button. */ onClick?: React$2.ComponentProps<'button'>['onClick']; } & StylingOverrideProps & Omit; /** * Primary interactive element displaying text and supporting leading and trailing icons. */ declare const Button: (props: { /** The `label` for the button. */ children: string; /** Which button style to use. Defaults to `secondary`. */ variant?: Variant; /** Appearance to apply to the button. Defaults to `default`. */ appearance?: Appearance; /** Size of the button. Defaults to `md`. */ size?: Size$2; /** Whether the button is disabled. */ disabled?: boolean; /** Whether the button is in a pending state. */ pending?: boolean; /** Icon to display before the button text. */ leadingIcon?: SvgIcon; /** Icon to display after the button text. */ trailingIcon?: SvgIcon; /** Whether to display the button as a block-level (full-width) component. Defaults to `false`. */ block?: boolean; /** Click handler for the button. */ onClick?: React$2.ComponentProps<'button'>['onClick']; } & StylingOverrideProps & Omit & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/utils/routing.d.ts /** * This type allows configuring link props with router options and type-safe URLs via TS module augmentation. * By default, this is an empty type. Extend with `href` and `routerOptions` properties to configure your router. */ interface RouterConfig {} type Href = RouterConfig extends { href: infer H; } ? H : string; type RouterOptions = RouterConfig extends { routerOptions: infer O; } ? O : never; interface RoutedLinkProps { /** A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). */ href?: Href; /** Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). */ hrefLang?: string; /** The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */ target?: HTMLAttributeAnchorTarget; /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */ rel?: string; /** Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). */ download?: boolean | string; /** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */ referrerPolicy?: HTMLAttributeReferrerPolicy; /** Options for the configured client side router. */ routerOptions?: RouterOptions; } //#endregion //#region src/components/Link/ButtonLink.d.ts type ButtonLinkProps = { /** The `label` for the link. */ children: string; /** Which visual style to use. Defaults to `secondary`. */ variant?: Variant; /** Appearance to apply to the link. Defaults to `default`. */ appearance?: Appearance; /** Size of the link. Defaults to `md`. */ size?: Size$2; /** Whether the link is disabled. */ disabled?: boolean; /** Whether the link is in a pending state. */ pending?: boolean; /** Icon to display before the link text. */ leadingIcon?: SvgIcon; /** Icon to display after the link text. */ trailingIcon?: SvgIcon; /** Whether to display the link as a block-level (full-width) component. Defaults to `false`. */ block?: boolean; /** The underlying element rendered by the component. Defaults to `a`. */ as?: As; } & RoutedLinkProps & StylingOverrideProps & Omit, 'className'>; /** * Primary interactive element displaying text and supporting leading and trailing icons. */ declare const ButtonLink: (props: { /** The `label` for the link. */ children: string; /** Which visual style to use. Defaults to `secondary`. */ variant?: Variant; /** Appearance to apply to the link. Defaults to `default`. */ appearance?: Appearance; /** Size of the link. Defaults to `md`. */ size?: Size$2; /** Whether the link is disabled. */ disabled?: boolean; /** Whether the link is in a pending state. */ pending?: boolean; /** Icon to display before the link text. */ leadingIcon?: SvgIcon; /** Icon to display after the link text. */ trailingIcon?: SvgIcon; /** Whether to display the link as a block-level (full-width) component. Defaults to `false`. */ block?: boolean; /** The underlying element rendered by the component. Defaults to `a`. */ as?: As | undefined; } & RoutedLinkProps & StylingOverrideProps & Omit>, "className"> & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/Button/IconButton.d.ts type IconButtonProps = { /** Icon to display in the button. */ icon: SvgIcon; /** Accessibility label to apply to the button. */ 'aria-label': string; /** Which button style to use. Defaults to `secondary`. */ variant?: Variant; /** Appearance to apply to the button. Defaults to `default`. */ appearance?: Appearance; /** Size of the button. Defaults to `md`. */ size?: Size$2; /** Whether the button is disabled. */ disabled?: boolean; /** Whether the button is in a pending state. */ pending?: boolean; /** Click handler for the button. */ onClick?: React$2.ComponentProps<'button'>['onClick']; } & StylingOverrideProps & Omit; /** * Interactive element displaying a single icon. */ declare const IconButton: (props: { /** Icon to display in the button. */ icon: SvgIcon; /** Accessibility label to apply to the button. */ 'aria-label': string; /** Which button style to use. Defaults to `secondary`. */ variant?: Variant; /** Appearance to apply to the button. Defaults to `default`. */ appearance?: Appearance; /** Size of the button. Defaults to `md`. */ size?: Size$2; /** Whether the button is disabled. */ disabled?: boolean; /** Whether the button is in a pending state. */ pending?: boolean; /** Click handler for the button. */ onClick?: React$2.ComponentProps<'button'>['onClick']; } & StylingOverrideProps & Omit & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/Link/Link.d.ts type LinkProps = { /** * The underlying element rendered by the component. Defaults to `a`. */ as?: As; /** * Whether the Link points to an external resource. * * When `true` and `as="a"`, applies `target="_blank"` and `rel="noopener noreferrer"`. * * Defaults to `false`. */ isExternal?: boolean; } & RoutedLinkProps & StylingOverrideProps & Omit, 'className'>; /** * Links are navigational elements that take users to a new page. */ declare const Link: (props: { /** * The underlying element rendered by the component. Defaults to `a`. */ as?: As | undefined; /** * Whether the Link points to an external resource. * * When `true` and `as="a"`, applies `target="_blank"` and `rel="noopener noreferrer"`. * * Defaults to `false`. */ isExternal?: boolean; } & RoutedLinkProps & StylingOverrideProps & Omit>, "className"> & React$2.RefAttributes) => React$2.ReactElement; //#endregion //#region src/components/VerticalNavigation/VerticalNavigation.d.ts type VerticalNavigationProps = React$2.HTMLAttributes & StylingOverrideProps & { /** * Controlled collapsed state. */ collapsed?: boolean; /** * Callback fired when the collapsed state changes. */ onCollapseChange?: (collapsed: boolean) => void; /** * Default collapsed state for uncontrolled mode. * @default false */ defaultCollapsed?: boolean; }; type VerticalNavigationItemBaseProps = Omit, 'className' | 'as' | 'href' | 'isActive' | 'isDisabled' | 'rightElement' | 'label'> & StylingOverrideProps & { /** * The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop. */ as?: As; /** * Whether the item is currently active/selected. */ isActive?: boolean; /** * Link URL. If provided, the item will be rendered as an anchor tag. */ href?: string; /** * Whether the item is disabled. */ isDisabled?: boolean; /** * Element to display on the right side of the item. */ rightElement?: React$2.ReactNode; /** * Text label for the item. */ label: string; /** * DO NOT USE! Temporary workaround. This prop **will be removed** in an upcoming minor version. * @deprecated */ DANGEROUS_DO_NOT_USE__after?: React$2.ReactNode; }; type VerticalNavigationDefaultItemProps = VerticalNavigationItemBaseProps & { /** * Icon to display on the left side of the item. */ icon?: React$2.ReactNode; /** * Visual variant of the item. 'subItem' has indentation and no icon support. * @default 'default' */ variant?: 'default'; }; type VerticalNavigationSubItemProps = VerticalNavigationItemBaseProps & { /** * Visual variant of the item. 'subItem' has indentation and no icon support. * @default 'default' */ variant: 'subItem'; icon?: never; }; type VerticalNavigationItemProps = VerticalNavigationDefaultItemProps | VerticalNavigationSubItemProps; /** * A single navigation item within the VerticalNavigation. * Can be a link (if href is provided) or a button. * Supports icons, active state, and 'subItem' variant for indentation. */ declare const Item: ({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant, rightElement, DANGEROUS_DO_NOT_USE__after, ...props }: VerticalNavigationItemProps) => React$2.JSX.Element; type VerticalNavigationCollapseProps = React$2.ButtonHTMLAttributes & StylingOverrideProps; /** * A toggle button to collapse/expand the navigation. * Should be placed within VerticalNavigation to control its state. */ declare const Collapse$1: ({ FORCE__className, onClick, ...props }: VerticalNavigationCollapseProps) => React$2.JSX.Element; type VerticalNavigationItemListProps = React$2.HTMLAttributes & StylingOverrideProps; /** * Container for the primary list of navigation items. * Renders an unordered list with consistent spacing and layout. */ declare const ItemList: ({ children, FORCE__className, ...props }: VerticalNavigationItemListProps) => React$2.JSX.Element; type VerticalNavigationFooterProps = React$2.HTMLAttributes & StylingOverrideProps; /** * Secondary container for footer navigation actions such as settings or help. */ declare const Footer: ({ children, FORCE__className, ...props }: VerticalNavigationFooterProps) => React$2.JSX.Element; interface VerticalNavigationComponent { (props: VerticalNavigationProps): JSX.Element; Item: typeof Item; Collapse: typeof Collapse$1; ItemList: typeof ItemList; Footer: typeof Footer; } /** * Vertical navigation shell with controlled and uncontrolled collapse support. * Provides shared context for items, collapse toggle, and footer sections. */ declare const VerticalNavigation: VerticalNavigationComponent; //#endregion //#region src/components/EmptyState/EmptyState.d.ts /** Valid illustration slugs for the EmptyState component. */ declare const illustrationSlugs: readonly ['ArtSupplies', 'Attention', 'Celebration', 'EmptyBowl', 'EmptyFolder', 'EmptySuitcase', 'Envelope', 'Hibernating', 'MissingSock', 'PizzaBox', 'PottedPlant', 'Sandcastle']; type EmptyStateIllustrationSlug = (typeof illustrationSlugs)[number]; type EmptyStateProps = { /** The illustration to display, identified by slug. Use theme to switch between light/dark variants when available. @default "EmptyFolder" */ illustration?: EmptyStateIllustrationSlug; /** The theme for the illustration. Determines which variant to show when light/dark variants exist. @default "light" */ theme?: 'light' | 'dark'; /** The size of the empty state. `lg` is for large components or the whole pages. @default "md" */ size?: 'md' | 'lg'; /** The title to display in the empty state. */ title: string; /** The description to display in the empty state. Please do not skip this property without a good reason. */ description?: string; /** Generic use for adding a button or other action elements below the description. */ children?: React$1.ReactNode; } & StylingOverrideProps & React$1.HTMLAttributes; declare function EmptyState(props: EmptyStateProps): React$1.JSX.Element; declare namespace EmptyState { var displayName: string; } //#endregion //#region src/components/Pagination/Pagination.d.ts type PaginationProps = { /** Total number of data items. Used with `pageSize` to compute total pages. */ total: number; /** Current page number (1-based). */ current: number; /** Number of items per page. Defaults to `10`. */ pageSize?: number; /** Callback when page changes. */ onChange?: (page: number, pageSize: number) => void; /** Whether the pagination is disabled. */ disabled?: boolean; /** Accessible name for the navigation. Required for accessibility. */ 'aria-label': string; } & StylingOverrideProps & Omit, 'className' | 'aria-label' | 'onChange'>; /** * Pagination component for navigating through paged content. * Renders prev/next buttons and a page number input with total pages indicator. */ declare function Pagination({ total, current, pageSize, onChange, disabled, 'aria-label': ariaLabel, FORCE__className: classNameOverride, ...props }: PaginationProps): React$2.JSX.Element; //#endregion //#region src/components/Breadcrumbs/Breadcrumbs.d.ts declare const sizes: readonly ['sm', 'md']; type Size$1 = (typeof sizes)[number]; interface BreadcrumbsContextState { /** The size of the breadcrumbs. Defaults to `"md"`. */ size: Size$1; /** Whether to emphasize the current (i.e. last) breadcrumb. Defaults to `true`. */ shouldEmpasizeCurrent: boolean; } type BreadcrumbsProps = StylingOverrideProps & Partial & Omit, 'className'> & { /** * Accessible name for the breadcrumb navigation landmark. * Defaults to `"Breadcrumb"`. */ 'aria-label'?: string; }; /** * Renders a breadcrumb trail with built-in support for collection * behavior, keyboard support, and current-page semantics. * * Wrap items with {@link Breadcrumb}. The last item should represent the current * page (typically without an `href`). */ declare const Breadcrumbs: (props: StylingOverrideProps & Partial & Omit, "className"> & { /** * Accessible name for the breadcrumb navigation landmark. * Defaults to `"Breadcrumb"`. */ 'aria-label'?: string; } & React$2.RefAttributes) => React$2.ReactElement; type BreadcrumbProps = Omit & Omit & { children: React$2.ReactNode; separator?: React$2.ReactNode; }; /** * A single segment in a {@link Breadcrumbs} trail. Accepts link props (e.g. `href`) * plus options from React Aria `Breadcrumb` / `Link`. Renders a trailing separator * for every item except the current page. */ declare const Breadcrumb: React$2.ForwardRefExoticComponent & Omit & { children: React$2.ReactNode; separator?: React$2.ReactNode; } & React$2.RefAttributes>; //#endregion //#region src/components/Spinner/Spinner.d.ts type Size = 'sm' | 'md' | 'lg'; type SpinnerProps = { /** The size of the Spinner. @default "md" */ size?: Size; /** (optional) The title to display in the Spinner. */ title?: string; /** The content to display inside the Spinner. When provided, Spinner acts as a wrapper with overlay. */ children?: React$1.ReactNode; /** Whether the Spinner is visible. Only used when children are provided. @default true */ isPending?: boolean; } & StylingOverrideProps & React$1.HTMLAttributes; declare function Spinner(props: SpinnerProps): React$1.JSX.Element; declare namespace Spinner { var displayName: string; } //#endregion //#region src/components/Divider/Divider.d.ts type DividerType = 'horizontal' | 'vertical'; type HorizontalDividerProps = { type?: 'horizontal'; /** * Optional label for horizontal dividers. When provided, the divider shows a line–label–line layout. * For accessibility, prefer using a heading (e.g.

,

) as children when the label represents a section heading. * @example Section Heading */ children?: React$2.ReactNode; }; type VerticalDividerProps = { type: 'vertical'; children?: never; }; type DividerProps = StylingOverrideProps & Omit, 'children'> & (HorizontalDividerProps | VerticalDividerProps); declare function Divider({ type, children, FORCE__className: classNameOverride, ...restProps }: DividerProps): React$2.JSX.Element; declare namespace Divider { var displayName: string; } //#endregion //#region src/components/Skeleton/Skeleton.d.ts type SkeletonTitleProps = { width?: number | string; }; type SkeletonParagraphProps = { rows?: number; width?: number | string | Array; }; type SkeletonProps = { /** * Display the skeleton when true. * @default true */ loading?: boolean; /** * Show title placeholder. * @default true */ title?: SkeletonTitleProps | boolean; /** * Show paragraph placeholder. * @default true */ paragraph?: SkeletonParagraphProps | boolean; /** * Show paragraph and title radius when true. * @default false */ round?: boolean; /** * Show animation effect. Respects prefers-reduced-motion. * @default false */ active?: boolean; /** * When set together with `loading`: if `loading` is false, only `children` * are rendered (no skeleton). If `loading` is true, the skeleton is shown instead — for preset * layouts (title and/or paragraph) children are not mounted while loading; in element mode * (`title={false}` and `paragraph={false}`) children render inside the placeholder while loading. */ children?: React$2.ReactNode; } & Omit & Omit, 'children' | 'title' | 'paragraph' | 'className'>; declare function Skeleton(props: SkeletonProps): React$2.JSX.Element | null; declare namespace Skeleton { var displayName: string; } //#endregion //#region src/components/Skeleton/SkeletonGroup.d.ts /** `dimension.component.{sm,md,lg}` via the same `--cds-dimension-component-*` vars as Button. */ declare const SKELETON_SIZE: { readonly sm: 'var(--cds-dimension-component-sm)'; readonly md: 'var(--cds-dimension-component-md)'; readonly lg: 'var(--cds-dimension-component-lg)'; }; type SkeletonSize = keyof typeof SKELETON_SIZE; /** Ordered size keys (same keys as {@link SKELETON_SIZE}). */ declare const SKELETON_SIZE_TOKENS: SkeletonSize[]; type SkeletonElementProps = { style?: React$2.CSSProperties; /** Preset dimensions from `dimension.component.*`; use `style` for custom width/height. */ size?: SkeletonSize; /** Show animation effect. @default false */ active?: boolean; } & Omit & Omit, 'children' | 'className' | 'style'>; type SkeletonGroupButtonProps = SkeletonElementProps & { block?: boolean; shape?: 'circle' | 'round' | 'square' | 'default'; }; type SkeletonGroupInputProps = SkeletonElementProps & { block?: boolean; }; type SkeletonGroupNodeProps = SkeletonElementProps & { children?: React$2.ReactNode; }; declare function SkeletonGroupButton(props: SkeletonGroupButtonProps): React$2.JSX.Element; declare namespace SkeletonGroupButton { var displayName: string; } declare function SkeletonGroupInput(props: SkeletonGroupInputProps): React$2.JSX.Element; declare namespace SkeletonGroupInput { var displayName: string; } declare function SkeletonGroupNode(props: SkeletonGroupNodeProps): React$2.JSX.Element; declare namespace SkeletonGroupNode { var displayName: string; } declare const SkeletonGroup: { readonly Button: typeof SkeletonGroupButton; readonly Input: typeof SkeletonGroupInput; readonly Node: typeof SkeletonGroupNode; }; //#endregion //#region src/components/VisuallyHidden/VisuallyHidden.d.ts type VisuallyHiddenProps = React$1.ComponentPropsWithoutRef<'span'> & { children: React$1.ReactNode; }; /** * VisuallyHidden is a component that hides its children from the visual * rendering, but still makes them available to screen readers. */ declare const VisuallyHidden: ({ children, ...props }: VisuallyHiddenProps) => React$1.JSX.Element; //#endregion //#region src/components/Toast/Toast.d.ts declare const toastTypes: readonly ['info', 'success', 'warning', 'error']; type ToastType = (typeof toastTypes)[number]; declare const toastPositions: readonly ['top-right', 'bottom-right']; type ToastPosition = (typeof toastPositions)[number]; type ToastOptions = { /** * Duration in milliseconds before the toast auto-dismisses. * The timer is paused if focus is brought into the toast by the user. * Set to 0 to disable auto-dismiss. * The actual duration can never less than 5 seconds plus 1 second per 120 words of content. * @default 6000 */ duration?: number; /** * Callback when the toast is closed (by user or auto-dismiss). */ onClose?: () => void; /** * Whether to show a close button. * @default true */ closable?: boolean; /** * Position of the toast in the viewport. * @default 'top-right' */ position?: ToastPosition; /** * Optional action button. Use for actions relating directly to the notification, * e.g. "Try again" for a failed submit, or "Undo" for a reversible action. */ action?: { label: string; onClick: (e: React$2.MouseEvent) => void; } | React$2.ReactElement; /** * Optional second action button. Appears next to the primary action with 8px spacing. */ actionSecondary?: { label: string; onClick: (e: React$2.MouseEvent) => void; } | React$2.ReactElement; }; type ToastAPI = { success: (content: React$2.ReactNode, options?: ToastOptions) => string; error: (content: React$2.ReactNode, options?: ToastOptions) => string; info: (content: React$2.ReactNode, options?: ToastOptions) => string; warning: (content: React$2.ReactNode, options?: ToastOptions) => string; /** Remove a toast by id. */ destroy: (id: string) => void; }; /** * Uncontrolled Toast component with imperative API. * Renders lightweight feedback in the upper right corner of the viewport. * * Must wrap your app with Toast.Provider to enable toasts. * * @example * ```tsx * // In your app root * * * // Trigger toasts imperatively * Toast.success('Saved successfully'); * Toast.error('Something went wrong', { action: { label: 'Try again', onClick: handleRetry } }); * ``` */ declare const Toast: ToastAPI & { Provider: React$2.FC; }; //#endregion //#region src/components/Menu/Menu.d.ts type MenuItemProps = Omit, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & RoutedLinkProps & StylingOverrideProps & { /** * The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop. */ as?: As; /** * Label text (visible row content). */ label: React$2.ReactNode; /** * Secondary line below the label (helper text), e.g. per Figma Menu | Item. */ description?: React$2.ReactNode; /** * Accessible name when it differs from the visible `label` (e.g. tab position and selection state). Passed to the menu item as `aria-label`. */ ariaLabel?: string; /** * Whether the item is disabled. */ disabled?: boolean; /** * Whether the item is active/selected. */ active?: boolean; /** * Visual variant. `danger` uses attention (destructive) colors for label and row states. * @default 'default' */ variant?: 'default' | 'danger'; /** * Icon to display before the label. */ icon?: React$2.ReactNode; /** * Extra inset for the row. When omitted, items inside {@link Menu.Section} with a {@link Menu.Header} indent automatically; items under a standalone Header (no Section) stay flush. */ indent?: boolean; /** * Keyboard shortcut hint (e.g. "⌘C"). */ shortcut?: React$2.ReactNode; /** * Whether to show chevron (for submenu/parent items). */ parent?: boolean; /** * Press handler. */ onPress?: (e: PressEvent) => void; /** * Click handler. * @deprecated Use `onPress` instead. */ onClick?: (e: React$2.MouseEvent) => void; /** * Children for compound usage. */ children?: React$2.ReactNode; }; interface MenuHeaderProps extends StylingOverrideProps { /** * Optional id for aria-labelledby on {@link Menu.Section}. When omitted inside a section, an id is assigned automatically. */ id?: string; /** * Header label. */ label?: React$2.ReactNode; /** * Children for compound usage. */ children?: React$2.ReactNode; } interface MenuDividerProps extends StylingOverrideProps { children?: never; } type MenuSectionProps = StylingOverrideProps & Omit, 'role'> & { /** * Groups {@link Menu.Item} rows. Use with an optional {@link Menu.Header} to label the group. * If there is no header, pass aria-label (or aria-labelledby) so the group has an accessible name. */ children?: React$2.ReactNode; }; type MenuListProps = StylingOverrideProps & React$2.HTMLAttributes & { /** * Menu content. Use Menu.Item, Menu.Section, Menu.Header, Menu.Divider. */ children?: React$2.ReactNode; }; interface MenuSubmenuProps extends StylingOverrideProps { /** * Label for the parent row (trailing chevron indicates a nested panel). */ label: React$2.ReactNode; /** * Nested menu rows — same composite API as {@link Menu} (`Menu.Item`, etc.). */ children: React$2.ReactNode; /** * Matches parent {@link Menu} `itemHoverAppearance` for nested item styling. * @default 'default' */ itemHoverAppearance?: 'default' | 'accent'; /** * Matches parent {@link Menu} `itemActiveAccentBar` for nested item styling. * @default true */ itemActiveAccentBar?: boolean; /** * Matches parent {@link Menu} `itemActiveLabelSemibold` for nested item styling. * @default true */ itemActiveLabelSemibold?: boolean; /** * Delay before opening the submenu on hover (ms). Passed to React Aria `SubmenuTrigger`. * @default 200 */ delay?: number; } interface MenuProps extends StylingOverrideProps { /** * Single element that toggles the menu (e.g. button). Rendered as the menu trigger; must forward refs to a focusable DOM node (wrapped with React Aria {@link Pressable} internally). */ trigger: React$2.ReactElement; /** * Menu content. Use Menu.Item, Menu.Section, Menu.Header, Menu.Divider. */ children?: React$2.ReactNode; /** * Optional props for the element wrapping the menu panel (e.g. pointer handlers when bridging trigger and menu). */ contentProps?: React$2.HTMLAttributes; /** * Controlled open state. Omit for uncontrolled usage. */ open?: boolean; /** * Called when the menu should open or close. */ onOpenChange?: (open: boolean) => void; /** * Hover/selected styling for items. `accent`: TabNav submenu treatment per Tab Nav | Vertical | Item (Figma)—hover uses primary background + accent-hover text; selected uses accent-selected background, accent text, semibold label, inline-end accent bar. `default`: neutral grey hover only. * @default 'default' */ itemHoverAppearance?: 'default' | 'accent'; /** * When `itemHoverAppearance` is `accent`, whether the active/selected row shows the inline-end accent bar (vertical TabNav indicator). Set to `false` for horizontal TabNav flyout menus where selection should not show that bar. * @default true */ itemActiveAccentBar?: boolean; /** * When `itemHoverAppearance` is `accent`, whether the active/selected row uses a semibold label. Set to `false` for TabNav horizontal submenus where the active item should match normal menu weight. * @default true */ itemActiveLabelSemibold?: boolean; /** * Inset of the menu panel (`role="menu"`). `none` uses a minimal inset so focus rings are not clipped under scroll/overflow; use for flyouts that should sit close to the popover edge (e.g. TabNav submenu). * @default 'default' */ panelPadding?: 'default' | 'none'; /** * Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`). * Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS. * Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav). * @default 2 */ popoverOffset?: number; /** * When `true`, focus is contained in the menu panel while it is open (Tab cycles within the panel; focus restores on close). * The popover stays non-modal so outside pointer dismiss still works. Use for patterns that must not move focus to sibling controls until the menu closes (e.g. horizontal TabNav flyouts). * @default false */ trapFocus?: boolean; } /** Inset of the menu panel relative to the popover shell. */ type MenuPanelPadding = NonNullable; declare const MenuHeader: { ({ id, label, FORCE__className: classNameOverride, children }: MenuHeaderProps): React$2.JSX.Element; displayName: string; }; declare const MenuSection: { ({ children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, FORCE__className: classNameOverride, ...rest }: MenuSectionProps): React$2.JSX.Element; displayName: string; }; declare const MenuItem: { ({ as: Component, label, description, ariaLabel, href, disabled, active, variant, icon, indent: indentProp, shortcut, parent, onPress, onClick, FORCE__className, children, ...rest }: MenuItemProps): React$2.JSX.Element; displayName: string; }; declare const MenuDivider: { ({ FORCE__className: classNameOverride }: MenuDividerProps): React$2.JSX.Element; displayName: string; }; /** * Menu.List — Layout only, no padding. Use inside a custom overlay when you are not using {@link Menu}. */ declare const MenuList: { ({ children, FORCE__className: classNameOverride, ...rest }: MenuListProps): React$2.JSX.Element; displayName: string; }; /** * Nested submenu for use inside {@link Menu}. Uses `AriaSubmenuTrigger` + `Popover` + `AriaMenu` so the flyout * positions to the side; the second child must not be `Menu` alone. Capra `Menu.Item` cannot be the trigger row. */ declare const MenuSubmenu: { ({ label, children, itemHoverAppearance, itemActiveAccentBar, itemActiveLabelSemibold, delay, FORCE__className: classNameOverride }: MenuSubmenuProps): React$2.JSX.Element; displayName: string; }; declare function Menu({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance, itemActiveAccentBar, itemActiveLabelSemibold, panelPadding, popoverOffset, trapFocus, FORCE__className: classNameOverride }: MenuProps): React$2.JSX.Element; declare namespace Menu { var displayName: string; export { MenuItem as Item }; export { MenuHeader as Header }; export { MenuSection as Section }; export { MenuDivider as Divider }; export { MenuList as List }; export { MenuSubmenu as Submenu }; } /** * Apply to react-aria `Menu` when composing `SubmenuTrigger` yourself; prefer {@link Menu.Submenu} for correct behavior. */ declare const submenuPanelClassName: string; //#endregion //#region src/components/TabNav/TabNav.d.ts declare const tabNavPlacements: readonly ['horizontal', 'vertical']; type TabNavPlacement = (typeof tabNavPlacements)[number]; declare const tabNavItemVariants: readonly ['default', 'dropdown']; type TabNavItemVariant = (typeof tabNavItemVariants)[number]; interface TabNavSubItemType extends RoutedLinkProps { /** Unique key for the sub-item. */ key: string; /** Visible text in the submenu row (dropdown or vertical list). */ name: React$2.ReactNode; /** Optional accessible name for the sub-item (maps to `aria-label` on the row). */ 'aria-label'?: string; /** Link URL. When provided, the sub-item navigates to this URL. */ href?: string; /** Whether the sub-item is disabled. */ disabled?: boolean; /** * Press handler. */ onPress?: () => void; /** * Click handler. Use e.preventDefault() in demos to prevent navigation. * @deprecated Use `onPress` instead. */ onClick?: (e: React$2.MouseEvent) => void; } interface TabNavItemType extends RoutedLinkProps { /** * Unique key for the tab. */ key: string; /** Visible text in the tab bar (and submenu trigger). */ name: React$2.ReactNode; /** Optional accessible name for the tab (maps to `aria-label` on the control). */ 'aria-label'?: string; /** * Whether the tab is disabled. */ disabled?: boolean; /** * Icon to display before the name. */ icon?: React$2.ReactNode; /** * Tab item variant. Dropdown shows a chevron icon. * When subItems is provided, variant is effectively 'dropdown'. */ variant?: TabNavItemVariant; /** * Whether to indent (for vertical sub-items). */ indent?: boolean; /** * Sub-items under this tab. Horizontal: flyout menu; vertical: inline indented list (Tab Nav | Vertical). * When provided, the tab shows a chevron and does not navigate on its own. */ subItems?: TabNavSubItemType[]; } type TabNavProps = StylingOverrideProps & Omit, 'className' | 'onChange'> & { /** * Key of the currently active tab (for visual styling). Typically derived from the current URL. */ activeKey?: string; /** * Callback when a tab link is pressed (before navigation). */ onTabPress?: (key: string) => void; /** * Callback when a tab link is clicked (before navigation). * @deprecated Use `onTabPress` instead. */ onTabClick?: (key: string, event: React$2.MouseEvent) => void; /** * Tab items configuration. */ items: TabNavItemType[]; /** * Orientation of the tab bar: horizontal (bottom) or vertical (left). * @default 'horizontal' */ tabPlacement?: TabNavPlacement; /** * Whether to center the tabs. * @default false */ centered?: boolean; /** * Slot for extra content in the tab bar (e.g. right side). */ tabBarExtraSlot?: React$2.ReactNode; /** * Whether tab items can wrap to multiple lines. * @default true */ wrap?: boolean; }; declare function TabNav({ activeKey, onTabPress, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element; declare namespace TabNav { var displayName: string; } //#endregion //#region src/components/TopNav/TopNav.d.ts type TopNavProps = StylingOverrideProps & Omit, 'className'> & { children?: React$2.ReactNode; }; type TopNavStartProps = StylingOverrideProps & Omit, 'className'> & { children?: React$2.ReactNode; }; type TopNavEndProps = StylingOverrideProps & Omit, 'className'> & { children?: React$2.ReactNode; }; type TopNavCenterProps = StylingOverrideProps & Omit, 'className'> & { children?: React$2.ReactNode; }; declare const Start: { ({ children, FORCE__className: classNameOverride, ...props }: TopNavStartProps): React$2.JSX.Element; displayName: string; }; declare const Center: { ({ children, FORCE__className: classNameOverride, ...props }: TopNavCenterProps): React$2.JSX.Element; displayName: string; }; declare const End: { ({ children, FORCE__className: classNameOverride, ...props }: TopNavEndProps): React$2.JSX.Element; displayName: string; }; declare const TopNavWithRef: (props: StylingOverrideProps & Omit, HTMLElement>, "ref">, "className"> & { children?: React$2.ReactNode; } & React$2.RefAttributes) => React$2.ReactElement; type TopNavComponent = typeof TopNavWithRef & { Start: typeof Start; Center: typeof Center; End: typeof End; }; /** * Horizontal top navigation shell (Figma: **Cribl Header**). Uses a **three-column grid** so * `TopNav.Center` stays at the true horizontal center of the header. Slots use fixed grid columns * (`Start` → 1, `Center` → 2, `End` → 3); omit `Center` when unused—the middle track collapses. * Use **Center** for environment banners, not **End** utilities. Slot content is provided by the app. */ declare const TopNav: TopNavComponent; //#endregion //#region src/components/Tooltip/Tooltip.d.ts declare const placements: readonly ['top', 'bottom', 'left', 'right']; type Placement = (typeof placements)[number]; type TooltipProps = { /** * The visible trigger element. This can be a single element or a component tree, but there MUST be a focusable element (`Button`, `IconButton`, `Link`, or a custom trigger via `CustomTooltipTrigger`) in the tree. Nothing else will trigger the tooltip. */ children: React$2.ReactNode; /** * The content of the tooltip. */ title: string; /** * Optional keyboard shortcut label shown next to the title (e.g. `⌘K`, `Ctrl+S`). */ shortcut?: string; /** * The position of the tooltip relative to the trigger element. * @default 'bottom' */ placement?: Placement; /** * Whether the tooltip is disabled. * @default false */ isDisabled?: boolean; /** * The container to mount the tooltip in. * @default document.body * * **Warning**: This is an unsafe feature and may cause accessibility, keyboard navigation, and other issues. Only use if you know what you are doing. */ getContainer?: () => HTMLElement | null; } & StylingOverrideProps; /** * A component to display additional information when hovering or focusing on an interactive element. */ declare function Tooltip({ children, title, shortcut, getContainer, placement, isDisabled, FORCE__className: classNameOverride, ...props }: TooltipProps): React$2.JSX.Element; type CustomTooltipTriggerChild = NonNullable['children']>; type CustomTooltipTriggerProps = { /** A single element that receives focus and pointer events for the tooltip trigger. */ children: CustomTooltipTriggerChild; }; /** * Wraps a custom or third-party trigger so {@link Tooltip} can attach hover and focus behavior. * The child should expose an appropriate role or use semantic HTML, and custom components should * `forwardRef` and spread props onto a DOM element. */ declare const CustomTooltipTrigger: React$2.ForwardRefExoticComponent>; //#endregion //#region src/components/Tree/Tree.d.ts interface TreeItemType { /** * The unique key of the tree item. */ key: Key; /** * The label of the tree item. */ label: React$2.ReactNode; /** * The children of the tree item. */ children?: TreeItemType[]; /** * Whether the tree item is disabled. */ isDisabled?: boolean; /** * The suffix of the tree item. */ suffix?: React$2.ReactNode; /** * The trailing slot of the tree item. */ trailingSlot?: React$2.ReactNode; } type TreeProps = StylingOverrideProps & { /** * Defines a string value that labels the current element. */ 'aria-label'?: string; /** * Identifies the element (or elements) that labels the current element. */ 'aria-labelledby'?: string; /** * Items to render in the tree. */ items: TreeItemType[]; /** * Handler that is called when a user performs an action on an item. */ onAction?: (key: Key) => void; /** * The initial expanded keys when in uncontrolled mode. */ defaultExpandedKeys?: Iterable; /** * The initial selected keys when in uncontrolled mode. */ defaultSelectedKeys?: Iterable; /** * The currently expanded keys when in controlled mode. */ expandedKeys?: Iterable; /** * Handler that is called when the expanded keys change. */ onExpandedChange?: (keys: Set) => void; /** * Callback that is fired when the selection changes. */ onSelectionChange?: (keys: Set) => void; /** * The currently selected keys when in controlled mode. */ selectedKeys?: Iterable; /** * The selection mode of the tree. * @default 'multiple' */ selectionMode?: 'none' | 'multiple'; }; /** * A hierarchical tree with cascading multi-select and Capra ListItem row layout. */ declare function Tree({ FORCE__className: classNameOverride, items, selectionMode, defaultSelectedKeys, selectedKeys, onSelectionChange, expandedKeys, defaultExpandedKeys, ...props }: TreeProps): React$2.JSX.Element; //#endregion //#region src/components/input-helpers/Label.d.ts type LabelProps = { /** Text to display in the label. */ children?: string; /** Whether the field the label is labeling is required (shows asterisk after label). */ required?: boolean; /** Content after the label text. */ trailingSlot?: React$2.ReactNode; } & StylingOverrideProps & Omit, 'className' | 'style'>; /** Label text and optional required indicator for form fields, aligned with Capra field layouts. */ declare const Label: React$2.ForwardRefExoticComponent<{ /** Text to display in the label. */ children?: string; /** Whether the field the label is labeling is required (shows asterisk after label). */ required?: boolean; /** Content after the label text. */ trailingSlot?: React$2.ReactNode; } & StylingOverrideProps & Omit, HTMLLabelElement>, "ref">, "className" | "style"> & React$2.RefAttributes>; //#endregion export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Label, type LabelProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, SelectField, type SelectFieldHeaderProps, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSectionProps, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, Tree, type TreeItemType, type TreeProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };