>;
/**
* A functional component that merges `StyleProps` with custom props.
* Useful for components that don't need `forwardRef` (e.g. providers, containers).
*
* @template P - Custom component props.
*/
type StyledFC = React.FC;
/**
* Theme token scales returned by `createTheme()` and `useTheme()`.
* Represents the theme object structure with nested token values
* (e.g. `{ colors: { red: { 600: '#dd1128' } }, space: { '4x': '1rem' } }`).
*
* This is intentionally separate from `StyleProps` which describes
* styled-system props on components (e.g. `;
}
import * as React$1 from 'react';
import React__default from 'react';
export { Box } from '@tonic-ui/react-base';
import * as react_jsx_runtime from 'react/jsx-runtime';
export { SVGIcon } from '@tonic-ui/react-icons';
import * as _popperjs_core from '@popperjs/core';
type AccordionProps = {
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {}) => React__default.ReactNode);
};
/**
* @typedef {Object} AccordionProps
* @property {React.ReactNode | ((context: {}) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
*/
/**
* @type {ForwardRefComponent<'div', AccordionProps>}
*/
declare const Accordion: ForwardRefComponent<"div", AccordionProps>;
type AccordionBodyProps = {
/**
* - The content of the accordion body.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} AccordionBodyProps
* @property {React.ReactNode} [children] - The content of the accordion body.
*/
/**
* @type {ForwardRefComponent<'div', AccordionBodyProps>}
*/
declare const AccordionBody: ForwardRefComponent<"div", AccordionBodyProps>;
type AccordionContentProps = {
/**
* - The content of the accordion.
*/
children?: React__default.ReactNode;
/**
* - Props forwarded to the internal transition slot.
*/
slotProps?: {
transition?: object;
} | undefined;
/**
* - Slot components. `slots.transition` replaces the default `Collapse`.
*/
slots?: {
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} AccordionContentProps
* @property {React.ReactNode} [children] - The content of the accordion.
* @property {{ transition?: object }} [slotProps] - Props forwarded to the internal transition slot.
* @property {{ transition?: React.ElementType }} [slots] - Slot components. `slots.transition` replaces the default `Collapse`.
* @property {React.ElementType} [TransitionComponent=Collapse] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', AccordionContentProps>}
*/
declare const AccordionContent: ForwardRefComponent<"div", AccordionContentProps>;
type AccordionHeaderProps = {
/**
* - The content of the accordion header.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} AccordionHeaderProps
* @property {React.ReactNode} [children] - The content of the accordion header.
*/
/**
* @type {ForwardRefComponent<'button', AccordionHeaderProps>}
*/
declare const AccordionHeader: ForwardRefComponent<"button", AccordionHeaderProps>;
type AccordionItemProps = {
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {
accordionToggleId: string;
accordionContentId: string;
disabled?: boolean;
isExpanded?: boolean;
onToggle: () => void;
variant?: string;
}) => React__default.ReactNode);
/**
* - Whether the accordion item is disabled.
*/
disabled?: boolean | undefined;
/**
* - Whether the accordion item is expanded.
*/
isExpanded?: boolean | undefined;
/**
* - Whether the accordion item is expanded by default.
*/
defaultIsExpanded?: boolean | undefined;
/**
* - A callback that is called when the accordion item is toggled.
*/
onToggle?: ((event: {
isExpanded: boolean;
}) => void) | undefined;
};
/**
* @typedef {Object} AccordionItemProps
* @property {React.ReactNode | ((context: { accordionToggleId: string; accordionContentId: string; disabled?: boolean; isExpanded?: boolean; onToggle: () => void; variant?: string }) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
* @property {boolean} [disabled] - Whether the accordion item is disabled.
* @property {boolean} [isExpanded] - Whether the accordion item is expanded.
* @property {boolean} [defaultIsExpanded] - Whether the accordion item is expanded by default.
* @property {(event: { isExpanded: boolean }) => void} [onToggle] - A callback that is called when the accordion item is toggled.
*/
/**
* @type {ForwardRefComponent<'div', AccordionItemProps>}
*/
declare const AccordionItem: ForwardRefComponent<"div", AccordionItemProps>;
type AccordionToggleProps = {
/**
* - A function child can be used instead of a React element. This function is called with the context object containing `getAccordionToggleProps`.
*/
children?: React__default.ReactNode | ((context: {
getAccordionToggleProps: () => React__default.HTMLAttributes & {
ref: React__default.RefCallback;
};
}) => React__default.ReactNode);
};
/**
* @typedef {Object} AccordionToggleProps
* @property {React.ReactNode | ((context: { getAccordionToggleProps: () => React.HTMLAttributes & { ref: React.RefCallback } }) => React.ReactNode)} [children] - A function child can be used instead of a React element. This function is called with the context object containing `getAccordionToggleProps`.
*/
/**
* @type {ForwardRefComponent<'button', AccordionToggleProps>}
*/
declare const AccordionToggle: ForwardRefComponent<"button", AccordionToggleProps>;
type AccordionToggleIconProps = {
/**
* - A function child can be used instead of a React element. This function is called with the current transition state ('entering', 'entered', 'exiting', 'exited'), ref, style, and context specific props for a component.
*/
children?: React__default.ReactNode | ((state: string, props: React__default.HTMLAttributes & {
ref: React__default.RefCallback;
style: React__default.CSSProperties;
}) => React__default.ReactNode);
/**
* - By default the child component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to true.
*/
appear?: boolean | undefined;
/**
* - Whether the accordion toggle icon is disabled.
*/
disabled?: boolean | undefined;
/**
* - The timing function that describes how intermediate values are calculated during a transition. You may specify a single timing function for all transitions, or individually with an object.
*/
easing?: string | {
enter?: string;
exit?: string;
} | undefined;
/**
* - If `true`, the component will transition in.
*/
in?: boolean | undefined;
/**
* - If `true`, it will "lazy mount" the component on the first `in={true}`.
*/
mountOnEnter?: boolean | undefined;
/**
* - The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
*/
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
} | undefined;
/**
* - If `true`, it will unmount the child component when `in={false}` and the animation has finished.
*/
unmountOnExit?: boolean | undefined;
};
/**
* @typedef {Object} AccordionToggleIconProps
* @property {React.ReactNode | ((state: string, props: React.HTMLAttributes & { ref: React.RefCallback; style: React.CSSProperties }) => React.ReactNode)} [children] - A function child can be used instead of a React element. This function is called with the current transition state ('entering', 'entered', 'exiting', 'exited'), ref, style, and context specific props for a component.
* @property {boolean} [appear=false] - By default the child component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to true.
* @property {boolean} [disabled] - Whether the accordion toggle icon is disabled.
* @property {string | { enter?: string, exit?: string }} [easing] - The timing function that describes how intermediate values are calculated during a transition. You may specify a single timing function for all transitions, or individually with an object.
* @property {boolean} [in] - If `true`, the component will transition in.
* @property {boolean} [mountOnEnter] - If `true`, it will "lazy mount" the component on the first `in={true}`.
* @property {number | { appear?: number, enter?: number, exit?: number }} [timeout] - The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
* @property {boolean} [unmountOnExit] - If `true`, it will unmount the child component when `in={false}` and the animation has finished.
*/
/**
* @type {ForwardRefComponent<'div', AccordionToggleIconProps>}
*/
declare const AccordionToggleIcon: ForwardRefComponent<"div", AccordionToggleIconProps>;
type AccordionContextValue = Object;
/**
* @typedef {Object} AccordionContextValue
*/
/**
* A hook to access the accordion context.
* @returns {AccordionContextValue | undefined} The accordion context, or `undefined` if not within an `Accordion`.
*/
declare function useAccordion(): AccordionContextValue | undefined;
type AccordionItemContextValue = {
/**
* - The id of the accordion toggle.
*/
accordionToggleId: string;
/**
* - The id of the accordion content.
*/
accordionContentId: string;
/**
* - Whether the accordion item is disabled.
*/
disabled?: boolean | undefined;
/**
* - Whether the accordion item is expanded.
*/
isExpanded?: boolean | undefined;
/**
* - A callback that is called when the accordion item is toggled.
*/
onToggle: () => void;
/**
* - The variant of the accordion.
*/
variant?: string | undefined;
};
/**
* @typedef {Object} AccordionItemContextValue
* @property {string} accordionToggleId - The id of the accordion toggle.
* @property {string} accordionContentId - The id of the accordion content.
* @property {boolean} [disabled] - Whether the accordion item is disabled.
* @property {boolean} [isExpanded] - Whether the accordion item is expanded.
* @property {() => void} onToggle - A callback that is called when the accordion item is toggled.
* @property {string} [variant] - The variant of the accordion.
*/
/**
* A hook to access the accordion item context.
* @returns {AccordionItemContextValue | undefined} The accordion item context, or `undefined` if not within an `AccordionItem`.
*/
declare function useAccordionItem(): AccordionItemContextValue | undefined;
type AlertProps = {
/**
* -
*/
children?: React__default.ReactNode;
/**
* - A close button will appear on the right side.
*/
isClosable?: boolean | undefined;
/**
* - A callback called when the close button is clicked.
*/
onClose?: (() => void) | undefined;
/**
* - The variant to use.
*/
variant?: "solid" | "outline" | undefined;
/**
* - The severity level to use.
*/
severity?: "success" | "info" | "warning" | "error" | undefined;
/**
* - Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the `severity` prop.
*/
icon?: string | React__default.ReactNode | false;
};
/**
* @typedef {Object} AlertProps
* @property {React.ReactNode} [children] -
* @property {boolean} [isClosable] - A close button will appear on the right side.
* @property {() => void} [onClose] - A callback called when the close button is clicked.
* @property {'solid' | 'outline'} [variant='solid'] - The variant to use.
* @property {'success' | 'info' | 'warning' | 'error'} [severity='success'] - The severity level to use.
* @property {string | React.ReactNode | false} [icon] - Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the `severity` prop.
*/
/**
* @type {ForwardRefComponent<'div', AlertProps>}
*/
declare const Alert: ForwardRefComponent<"div", AlertProps>;
type AlertCloseButtonProps = {
/**
* - The content of the close button.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} AlertCloseButtonProps
* @property {React.ReactNode} [children] - The content of the close button.
*/
/**
* @type {ForwardRefComponent<'button', AlertCloseButtonProps>}
*/
declare const AlertCloseButton: ForwardRefComponent<"button", AlertCloseButtonProps>;
type AlertIconProps = {
/**
* - The content of the alert icon.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} AlertIconProps
* @property {React.ReactNode} [children] - The content of the alert icon.
*/
/**
* @type {ForwardRefComponent<'div', AlertIconProps>}
*/
declare const AlertIcon: ForwardRefComponent<"div", AlertIconProps>;
type AlertMessageProps = {
/**
* - The content of the alert message.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} AlertMessageProps
* @property {React.ReactNode} [children] - The content of the alert message.
*/
/**
* @type {ForwardRefComponent<'div', AlertMessageProps>}
*/
declare const AlertMessage: ForwardRefComponent<"div", AlertMessageProps>;
type AutocompleteRenderInputParams = {
/**
* - Hook-managed props for the underlying ` & {
ref?: React__default.Ref;
[key: string]: unknown;
};
/**
* - Whether the consumer enabled the clear-button capability.
*/
isClearable: boolean;
/**
* - Whether to render the loading indicator.
*/
isLoading: boolean;
/**
* - Reset the input and selection (fires `onChange(null)`). Wired into the clear-button slot of `AutocompleteInput` (or invoke directly from a custom input).
*/
onClearInput: (event?: React__default.SyntheticEvent) => void;
/**
* - Anchor ref for popper positioning. Spread onto the input wrapper.
*/
ref: React__default.Ref;
};
type AutocompleteProps = {
/**
* - If `true`, the first option is automatically highlighted whenever the filtered list changes or the popup (re)opens. Pressing `Enter` then commits the top match without arrowing first.
*/
autoHighlight?: boolean | undefined;
/**
* - Controls what happens to the input value when the popup closes (blur, click-outside, or Escape) and the typed text differs from the last committed label. `'restore'` reverts to the last committed label; `'clear'` resets to `''` and fires `onChange(null)` so consumers can clear their selection state; `'keep'` leaves it as-is.
*/
closeBehavior?: "restore" | "clear" | "keep" | undefined;
/**
* - Initial selected item in uncontrolled mode. Pair with `onChange` to read selection updates without managing `value` externally. The input is seeded with `getItemLabel(defaultValue)`. Ignored when `value` is controlled.
*/
defaultValue?: any;
/**
* - Override the default case-insensitive label filter. `getItemLabel` is provided so the filter can stringify items without re-implementing the label resolver. The returned array can also include synthetic items (e.g. `Add "X"`); see the Creatable example for the recipe.
*/
filterItems?: ((items: any[], state: {
inputValue: string;
getItemLabel: (item: any) => string;
}) => any[]) | undefined;
/**
* - Map an item to its input-text label. Default: `''` for `null`/`undefined`, the string itself for strings, `item.label ?? item.value ?? ''` for plain objects, otherwise `String(item)`.
*/
getItemLabel?: ((item: any) => string) | undefined;
/**
* - Controlled input text. Pair with `onInputChange` to manage the value externally; if you need an initial value, seed your own state.
*/
inputValue?: string | undefined;
/**
* - If `true`, enables the clear-button capability. The actual button visibility depends on the input having a value and not being disabled. Custom `renderInput` implementations can wire their own clear UI via `params.onClearInput`.
*/
isClearable?: boolean | undefined;
/**
* - When `true`, signals a loading state. Forwarded to `renderInput` (typically swaps the chevron for a spinner) and to `renderContent` so consumers can customize the popup body while loading.
*/
isLoading?: boolean | undefined;
/**
* - The list of items available for selection.
*/
items: any[];
/**
* - If `true`, sizes the dropdown list to match the input's `offsetWidth`.
*/
matchWidth?: boolean | undefined;
/**
* - Fires when the selection changes. Receives the committed item on click/Enter, or `null` when the input is cleared (clear button click or `closeBehavior="clear"` applying on dismiss/Escape).
*/
onChange?: ((item: any | null) => void) | undefined;
/**
* - Fires when the dropdown transitions from open to closed (Escape, item selection, or blur/click-outside).
*/
onClose?: (() => void) | undefined;
/**
* - Fires when the highlighted option changes via keyboard navigation or hover. The natural integration point for virtualization (call `listRef.scrollToItem(index)` when `reason === 'keyboard'`).
*/
onHighlightChange?: ((state: {
item: any;
index: number;
reason: "keyboard" | "mouse";
}) => void) | undefined;
/**
* - Fires whenever the input value changes — typing, selection commit, clear button, and `closeBehavior`-triggered resets.
*/
onInputChange?: ((nextValue: string) => void) | undefined;
/**
* - Fires when the dropdown transitions from closed to open (on every open, including re-opens). Use this to trigger or refresh an API fetch.
*/
onOpen?: (() => void) | undefined;
/**
* - Popper placement.
*/
placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
/**
* - Render the popover in a portal.
*/
portalled?: boolean | undefined;
/**
* - Customize the list content. Default renders the filtered items. Return `null` to hide the popup entirely (no empty Paper background) when there is nothing to show. For custom layouts (e.g. virtualization), use the `AutocompleteItem` component delivered in the args bag and wire each instance with `getItemProps`.
*/
renderContent?: ((args: {
items: any[];
renderItem: (item: any) => React__default.ReactNode;
renderItems: (items: any[]) => React__default.ReactNode;
getItemProps: (params: {
index: number;
item: any;
}) => object;
inputValue: string;
isLoading: boolean;
AutocompleteItem: React__default.ComponentType;
}) => React__default.ReactNode) | undefined;
/**
* - Render the input. Defaults to `(params) => `.
*/
slots?: {
content?: React__default.ElementType;
root?: React__default.ElementType;
} | undefined;
/**
* - Slot props resolved via `useSlot`. `slotProps.root` is applied to the root container (merged over the component's own props; `__sx` composes); `slotProps.content` is spread on the internal `` (including its own `slots`/`slotProps` API for popper/transition). Other keys are dropped.
*/
slotProps?: {
content?: {
width?: string | number;
[key: string]: any;
};
root?: object;
} | undefined;
/**
* - Controlled selected item (or `null` for no selection). Pair with `onChange` to manage the value externally. When set, the input automatically syncs to `getItemLabel(value)` on every value change. Pass a referentially stable item (memoize if needed) to avoid spurious sync updates.
*/
value?: any;
};
/**
* @typedef {Object} AutocompleteRenderInputParams
* @property {React.InputHTMLAttributes & { ref?: React.Ref; [key: string]: unknown }} inputProps - Hook-managed props for the underlying `} ref - Anchor ref for popper positioning. Spread onto the input wrapper.
*/
/**
* @typedef {Object} AutocompleteProps
* @property {boolean} [autoHighlight=false] - If `true`, the first option is automatically highlighted whenever the filtered list changes or the popup (re)opens. Pressing `Enter` then commits the top match without arrowing first.
* @property {'restore' | 'clear' | 'keep'} [closeBehavior='restore'] - Controls what happens to the input value when the popup closes (blur, click-outside, or Escape) and the typed text differs from the last committed label. `'restore'` reverts to the last committed label; `'clear'` resets to `''` and fires `onChange(null)` so consumers can clear their selection state; `'keep'` leaves it as-is.
* @property {any} [defaultValue=null] - Initial selected item in uncontrolled mode. Pair with `onChange` to read selection updates without managing `value` externally. The input is seeded with `getItemLabel(defaultValue)`. Ignored when `value` is controlled.
* @property {(items: any[], state: { inputValue: string; getItemLabel: (item: any) => string }) => any[]} [filterItems] - Override the default case-insensitive label filter. `getItemLabel` is provided so the filter can stringify items without re-implementing the label resolver. The returned array can also include synthetic items (e.g. `Add "X"`); see the Creatable example for the recipe.
* @property {(item: any) => string} [getItemLabel] - Map an item to its input-text label. Default: `''` for `null`/`undefined`, the string itself for strings, `item.label ?? item.value ?? ''` for plain objects, otherwise `String(item)`.
* @property {string} [inputValue] - Controlled input text. Pair with `onInputChange` to manage the value externally; if you need an initial value, seed your own state.
* @property {boolean} [isClearable=false] - If `true`, enables the clear-button capability. The actual button visibility depends on the input having a value and not being disabled. Custom `renderInput` implementations can wire their own clear UI via `params.onClearInput`.
* @property {boolean} [isLoading=false] - When `true`, signals a loading state. Forwarded to `renderInput` (typically swaps the chevron for a spinner) and to `renderContent` so consumers can customize the popup body while loading.
* @property {any[]} items - The list of items available for selection.
* @property {boolean} [matchWidth=false] - If `true`, sizes the dropdown list to match the input's `offsetWidth`.
* @property {(item: any | null) => void} [onChange] - Fires when the selection changes. Receives the committed item on click/Enter, or `null` when the input is cleared (clear button click or `closeBehavior="clear"` applying on dismiss/Escape).
* @property {() => void} [onClose] - Fires when the dropdown transitions from open to closed (Escape, item selection, or blur/click-outside).
* @property {(state: { item: any; index: number; reason: 'keyboard' | 'mouse' }) => void} [onHighlightChange] - Fires when the highlighted option changes via keyboard navigation or hover. The natural integration point for virtualization (call `listRef.scrollToItem(index)` when `reason === 'keyboard'`).
* @property {(nextValue: string) => void} [onInputChange] - Fires whenever the input value changes — typing, selection commit, clear button, and `closeBehavior`-triggered resets.
* @property {() => void} [onOpen] - Fires when the dropdown transitions from closed to open (on every open, including re-opens). Use this to trigger or refresh an API fetch.
* @property {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'} [placement='bottom-start'] - Popper placement.
* @property {boolean} [portalled=false] - Render the popover in a portal.
* @property {(args: { items: any[]; renderItem: (item: any) => React.ReactNode; renderItems: (items: any[]) => React.ReactNode; getItemProps: (params: { index: number; item: any }) => object; inputValue: string; isLoading: boolean; AutocompleteItem: React.ComponentType }) => React.ReactNode} [renderContent] - Customize the list content. Default renders the filtered items. Return `null` to hide the popup entirely (no empty Paper background) when there is nothing to show. For custom layouts (e.g. virtualization), use the `AutocompleteItem` component delivered in the args bag and wire each instance with `getItemProps`.
* @property {(params: AutocompleteRenderInputParams) => React.ReactNode} [renderInput] - Render the input. Defaults to `(params) => `.
* @property {{ content?: { width?: string | number; [key: string]: any }, root?: object }} [slotProps] - Slot props resolved via `useSlot`. `slotProps.root` is applied to the root container (merged over the component's own props; `__sx` composes); `slotProps.content` is spread on the internal `` (including its own `slots`/`slotProps` API for popper/transition). Other keys are dropped.
* @property {any} [value] - Controlled selected item (or `null` for no selection). Pair with `onChange` to manage the value externally. When set, the input automatically syncs to `getItemLabel(value)` on every value change. Pass a referentially stable item (memoize if needed) to avoid spurious sync updates.
*/
/**
* @type {ForwardRefComponent<'div', AutocompleteProps>}
*/
declare const Autocomplete: ForwardRefComponent<"div", AutocompleteProps>;
type AutocompleteInputProps = {
/**
* - Focuses the underlying ` & {
[key: string]: unknown;
}) | undefined;
/**
* - If `true`, enables the clear-button capability. The actual button visibility depends on the input having a value and not being disabled.
*/
isClearable?: boolean | undefined;
/**
* - If `true`, the clear button is replaced by a loading spinner.
*/
isLoading?: boolean | undefined;
/**
* - `name` attribute forwarded to the underlying ` & { [key: string]: unknown }} [inputProps] - Props applied to the underlying ` | undefined;
};
/**
* @typedef {Object} ButtonLinkProps
* @property {React.ReactNode} [children] - The content to be rendered within the button link.
* @property {boolean} [disabled] - If `true`, the button link will be disabled. This sets `aria-disabled=true` and you can style this state by using the `_disabled` prop.
* @property {React.MouseEventHandler} [onClick] - A callback called when the button link is clicked.
*/
/**
* @type {ForwardRefComponent<'a', ButtonLinkProps>}
*/
declare const ButtonLink: ForwardRefComponent<"a", ButtonLinkProps>;
type ButtonGroupContextValue = {
/**
* - Whether all buttons are disabled.
*/
disabled?: boolean | undefined;
/**
* - The orientation of the button group.
*/
orientation: "horizontal" | "vertical";
/**
* - The size of the button group.
*/
size: "sm" | "md" | "lg";
/**
* - The variant of the button group.
*/
variant: "emphasis" | "primary" | "default" | "secondary" | "ghost";
};
/**
* @typedef {Object} ButtonGroupContextValue
* @property {boolean} [disabled] - Whether all buttons are disabled.
* @property {'horizontal' | 'vertical'} orientation - The orientation of the button group.
* @property {'sm' | 'md' | 'lg'} size - The size of the button group.
* @property {'emphasis' | 'primary' | 'default' | 'secondary' | 'ghost'} variant - The variant of the button group.
*/
/**
* A hook to access the button group context.
* @returns {ButtonGroupContextValue | undefined} The button group context, or `undefined` if not within a `ButtonGroup`.
*/
declare function useButtonGroup(): ButtonGroupContextValue | undefined;
type ButtonBoxProps = {
/**
* - The content of the button box.
*/
children?: React__default.ReactNode;
/**
* - If true, the control is disabled. This sets `aria-disabled=true` and you can style this state by passing the `_disabled` prop.
*/
disabled?: boolean | undefined;
/**
* - Callback fired when the control is activated by a mouse click, the Enter key, or the Space key.
*/
onClick?: React__default.MouseEventHandler | undefined;
};
/**
* `ButtonBox` looks and behaves like a button but renders a non-button element
* (``). Use it in contexts where a native `
` is not
* permitted, such as a button nested inside another button.
*/
/**
* @typedef {Object} ButtonBoxProps
* @property {React.ReactNode} [children] - The content of the button box.
* @property {boolean} [disabled] - If true, the control is disabled. This sets `aria-disabled=true` and you can style this state by passing the `_disabled` prop.
* @property {React.MouseEventHandler} [onClick] - Callback fired when the control is activated by a mouse click, the Enter key, or the Space key.
*/
/**
* @type {ForwardRefComponent<'div', ButtonBoxProps>}
*/
declare const ButtonBox: ForwardRefComponent<"div", ButtonBoxProps>;
type CheckboxProps = {
/**
* - The checkbox will be selected. Use the `onChange` prop to update the state for a controlled component.
*/
checked?: boolean | undefined;
/**
* - The content within the checkbox component.
*/
children?: React__default.ReactNode;
/**
* - The checkbox will be selected initially.
*/
defaultChecked?: boolean | undefined;
/**
* - Disables the checkbox and prevents user interaction.
*/
disabled?: boolean | undefined;
/**
* - The `id` attribute of the input field.
*/
id?: string | undefined;
/**
* - The checkbox will be displayed in an indeterminate state. This only affects the icon shown inside the checkbox.
*/
indeterminate?: boolean | undefined;
/**
* - Additional props to be applied to the input element.
*/
inputProps?: React__default.InputHTMLAttributes | undefined;
/**
* - A `ref` to access the input element.
*/
inputRef?: React__default.RefObject | undefined;
/**
* - The name of the input field in the checkbox. The name is useful for form submissions.
*/
name?: string | undefined;
/**
* - A callback function invoked when the checkbox loses focus.
*/
onBlur?: React__default.FocusEventHandler | undefined;
/**
* - A callback function invoked when the state of the checkbox changes.
*/
onChange?: React__default.ChangeEventHandler | undefined;
/**
* - A callback function invoked when the checkbox is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - A callback function invoked when the checkbox receives focus.
*/
onFocus?: React__default.FocusEventHandler | undefined;
/**
* - The size of the checkbox.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The value of the checkbox.
*/
value?: T | undefined;
/**
* - The color of the checkbox when it is selected. The color should be one of the color keys in the theme (for example, 'green', 'red')
*/
variantColor?: string | undefined;
};
/**
* @template [T=string]
* @typedef {Object} CheckboxProps
* @property {boolean} [checked] - The checkbox will be selected. Use the `onChange` prop to update the state for a controlled component.
* @property {React.ReactNode} [children] - The content within the checkbox component.
* @property {boolean} [defaultChecked] - The checkbox will be selected initially.
* @property {boolean} [disabled] - Disables the checkbox and prevents user interaction.
* @property {string} [id] - The `id` attribute of the input field.
* @property {boolean} [indeterminate] - The checkbox will be displayed in an indeterminate state. This only affects the icon shown inside the checkbox.
* @property {React.InputHTMLAttributes} [inputProps] - Additional props to be applied to the input element.
* @property {React.RefObject} [inputRef] - A `ref` to access the input element.
* @property {string} [name] - The name of the input field in the checkbox. The name is useful for form submissions.
* @property {React.FocusEventHandler} [onBlur] - A callback function invoked when the checkbox loses focus.
* @property {React.ChangeEventHandler} [onChange] - A callback function invoked when the state of the checkbox changes.
* @property {React.MouseEventHandler} [onClick] - A callback function invoked when the checkbox is clicked.
* @property {React.FocusEventHandler} [onFocus] - A callback function invoked when the checkbox receives focus.
* @property {'sm' | 'md' | 'lg'} [size='md'] - The size of the checkbox.
* @property {T} [value] - The value of the checkbox.
* @property {string} [variantColor='blue'] - The color of the checkbox when it is selected. The color should be one of the color keys in the theme (for example, 'green', 'red')
*/
/**
* @type {{ (props: StyleProps & CheckboxProps & React.RefAttributes): React.ReactElement | null; displayName?: string }}
*/
declare const Checkbox: {
(props: StyleProps & CheckboxProps & React__default.RefAttributes): React__default.ReactElement | null;
displayName?: string;
};
type CheckboxGroupProps = {
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {
disabled?: boolean;
name: string;
onChange: (event: {
checked: boolean;
value: T;
}) => void;
size?: "sm" | "md" | "lg";
value: T[];
variantColor?: string;
}) => React__default.ReactNode);
/**
* - The default value of the checkbox group.
*/
defaultValue?: T[] | undefined;
/**
* - All checkboxes will be disabled.
*/
disabled?: boolean | undefined;
/**
* - The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.
*/
name?: string | undefined;
/**
* - A callback fired when any descendant `Checkbox` is checked or unchecked.
*/
onChange?: ((value: T[]) => void) | undefined;
/**
* - The size (width and height) of the checkbox.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The current selected values of the checkbox group.
*/
value?: T[] | undefined;
/**
* - The color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g. 'green', 'red')
*/
variantColor?: string | undefined;
};
/**
* @template [T=string]
* @typedef {Object} CheckboxGroupProps
* @property {React.ReactNode | ((context: { disabled?: boolean; name: string; onChange: (event: { checked: boolean; value: T }) => void; size?: 'sm' | 'md' | 'lg'; value: T[]; variantColor?: string }) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
* @property {T[]} [defaultValue] - The default value of the checkbox group.
* @property {boolean} [disabled] - All checkboxes will be disabled.
* @property {string} [name] - The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.
* @property {(value: T[]) => void} [onChange] - A callback fired when any descendant `Checkbox` is checked or unchecked.
* @property {'sm' | 'md' | 'lg'} [size='md'] - The size (width and height) of the checkbox.
* @property {T[]} [value] - The current selected values of the checkbox group.
* @property {string} [variantColor] - The color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g. 'green', 'red')
*/
/**
* @type {{ (props: StyleProps & CheckboxGroupProps): React.ReactElement | null; displayName?: string }}
*/
declare const CheckboxGroup: {
(props: StyleProps & CheckboxGroupProps): React__default.ReactElement | null;
displayName?: string;
};
type CheckboxGroupContextValue = {
/**
* - Whether all checkboxes are disabled.
*/
disabled?: boolean | undefined;
/**
* - The name attribute for the checkbox group.
*/
name: string;
/**
* - A callback fired when any descendant `Checkbox` is checked or unchecked.
*/
onChange: (event: {
checked: boolean;
value: string;
}) => void;
/**
* - The size of the checkboxes.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The current selected values.
*/
value: string[];
/**
* - The color of the checkbox when it's checked.
*/
variantColor?: string | undefined;
};
/**
* @typedef {Object} CheckboxGroupContextValue
* @property {boolean} [disabled] - Whether all checkboxes are disabled.
* @property {string} name - The name attribute for the checkbox group.
* @property {(event: { checked: boolean; value: string }) => void} onChange - A callback fired when any descendant `Checkbox` is checked or unchecked.
* @property {'sm' | 'md' | 'lg'} [size] - The size of the checkboxes.
* @property {string[]} value - The current selected values.
* @property {string} [variantColor] - The color of the checkbox when it's checked.
*/
/**
* A hook to access the checkbox group context.
* @returns {CheckboxGroupContextValue | undefined} The checkbox group context, or `undefined` if not within a `CheckboxGroup`.
*/
declare function useCheckboxGroup(): CheckboxGroupContextValue | undefined;
type CodeProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} CodeProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'code', CodeProps>}
*/
declare const Code: ForwardRefComponent<"code", CodeProps>;
type ColorModeProviderProps = {
/**
* - The content of the provider.
*/
children?: React__default.ReactNode;
/**
* - The default color mode.
*/
defaultValue?: "dark" | "light" | undefined;
/**
* - The controlled color mode.
*/
value?: "dark" | "light" | undefined;
/**
* - Callback fired when the color mode changes.
*/
onChange?: ((mode: "dark" | "light") => void) | undefined;
/**
* - Whether to use the system color mode.
*/
useSystemColorMode?: boolean | undefined;
};
/**
* @typedef {Object} ColorModeProviderProps
* @property {React.ReactNode} [children] - The content of the provider.
* @property {'dark' | 'light'} [defaultValue] - The default color mode.
* @property {'dark' | 'light'} [value] - The controlled color mode.
* @property {(mode: 'dark' | 'light') => void} [onChange] - Callback fired when the color mode changes.
* @property {boolean} [useSystemColorMode] - Whether to use the system color mode.
*/
/**
* @type {React.FC}
*/
declare const ColorModeProvider: React__default.FC;
type DarkModeProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} DarkModeProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'div', DarkModeProps>}
*/
declare const DarkMode: ForwardRefComponent<"div", DarkModeProps>;
type InvertedModeProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} InvertedModeProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'div', InvertedModeProps>}
*/
declare const InvertedMode: ForwardRefComponent<"div", InvertedModeProps>;
type LightModeProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} LightModeProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'div', LightModeProps>}
*/
declare const LightMode: ForwardRefComponent<"div", LightModeProps>;
/**
* @returns {['dark' | 'light', (value: 'dark' | 'light' | ((prevMode: 'dark' | 'light') => 'dark' | 'light')) => void]} A tuple of [colorMode, setColorMode].
*/
declare function useColorMode(): ["dark" | "light", (value: "dark" | "light" | ((prevMode: "dark" | "light") => "dark" | "light")) => void];
declare function ColorStyleProvider(inProps: any): react_jsx_runtime.JSX.Element;
declare namespace ColorStyleProvider {
let displayName: string;
}
declare namespace colorStyle {
namespace dark {
namespace background {
let primary: string;
let secondary: string;
let tertiary: string;
let inverted: string;
let inverse: string;
let highlighted: string;
let selected: string;
}
namespace color {
export let emphasis: string;
let primary_1: string;
export { primary_1 as primary };
let secondary_1: string;
export { secondary_1 as secondary };
let tertiary_1: string;
export { tertiary_1 as tertiary };
export let disabled: string;
export let success: string;
export let info: string;
export let warning: string;
export let error: string;
}
let divider: string;
namespace text {
let selection: string;
let highlight: string;
}
namespace shadow {
let thin: string;
let medium: string;
let thick: string;
}
}
namespace light {
export namespace background_1 {
let primary_2: string;
export { primary_2 as primary };
let secondary_2: string;
export { secondary_2 as secondary };
let tertiary_2: string;
export { tertiary_2 as tertiary };
let inverted_1: string;
export { inverted_1 as inverted };
let inverse_1: string;
export { inverse_1 as inverse };
let highlighted_1: string;
export { highlighted_1 as highlighted };
let selected_1: string;
export { selected_1 as selected };
}
export { background_1 as background };
export namespace color_1 {
let emphasis_1: string;
export { emphasis_1 as emphasis };
let primary_3: string;
export { primary_3 as primary };
let secondary_3: string;
export { secondary_3 as secondary };
let tertiary_3: string;
export { tertiary_3 as tertiary };
let disabled_1: string;
export { disabled_1 as disabled };
let success_1: string;
export { success_1 as success };
let info_1: string;
export { info_1 as info };
let warning_1: string;
export { warning_1 as warning };
let error_1: string;
export { error_1 as error };
}
export { color_1 as color };
let divider_1: string;
export { divider_1 as divider };
export namespace text_1 {
let selection_1: string;
export { selection_1 as selection };
let highlight_1: string;
export { highlight_1 as highlight };
}
export { text_1 as text };
export namespace shadow_1 {
let thin_1: string;
export { thin_1 as thin };
let medium_1: string;
export { medium_1 as medium };
let thick_1: string;
export { thick_1 as thick };
}
export { shadow_1 as shadow };
}
}
/**
* @param {{ colorMode?: string }} [options] - Options for the hook.
* @returns {[{ [key: string]: string }, (value: { [key: string]: string } | ((prevStyle: { [colorMode: string]: { [key: string]: string } }) => { [key: string]: string })) => void]} A tuple of [colorStyle, setColorStyle].
*/
declare function useColorStyle(options?: {
colorMode?: string;
}): [{
[key: string]: string;
}, (value: {
[key: string]: string;
} | ((prevStyle: {
[colorMode: string]: {
[key: string]: string;
};
}) => {
[key: string]: string;
})) => void];
declare function CSSBaseline(): react_jsx_runtime.JSX.Element;
declare namespace CSSBaseline {
let displayName: string;
}
declare function CSSVariables(): react_jsx_runtime.JSX.Element;
declare namespace CSSVariables {
let displayName: string;
}
type DateCalendarProps = {
/**
* - The default selected date.
*/
defaultValue?: Date | undefined;
/**
* - The first day of the week. 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday.
*/
firstDayOfWeek?: number | undefined;
/**
* - A callback called to return the formatted date string in the given format.
*/
formatDate?: ((date: Date, formatStr: string, options: {
locale?: Locale;
}) => void) | undefined;
/**
* - The minimum date that can be selected.
*/
minDate?: Date | undefined;
/**
* - The maximum date that can be selected.
*/
maxDate?: Date | undefined;
/**
* - A callback called when the value (the selected date) changes.
*/
onChange?: ((date: Date) => void) | undefined;
/**
* - An error-first callback called when the date validation returns an error (or the date is valid after error).
*/
onError?: ((error: string, date: Date) => void) | undefined;
/**
* - Disable specific date. Return `true` if the date will be disabled.
*/
shouldDisableDate?: ((date: Date) => boolean) | undefined;
/**
* - The selected date.
*/
value?: Date | undefined;
};
/**
* @typedef {Object} DateCalendarProps
* @property {Date} [defaultValue] - The default selected date.
* @property {number} [firstDayOfWeek=0] - The first day of the week. 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday.
* @property {(date: Date, formatStr: string, options: { locale?: Locale }) => void} [formatDate] - A callback called to return the formatted date string in the given format.
* @property {Date} [minDate] - The minimum date that can be selected.
* @property {Date} [maxDate] - The maximum date that can be selected.
* @property {(date: Date) => void} [onChange] - A callback called when the value (the selected date) changes.
* @property {(error: string, date: Date) => void} [onError] - An error-first callback called when the date validation returns an error (or the date is valid after error).
* @property {(date: Date) => boolean} [shouldDisableDate] - Disable specific date. Return `true` if the date will be disabled.
* @property {Date} [value] - The selected date.
*/
/**
* @type {ForwardRefComponent<'div', DateCalendarProps>}
*/
declare const DateCalendar: ForwardRefComponent<"div", DateCalendarProps>;
type DatePickerProps = {
/**
* - Determines if the date picker should close automatically after a date is selected.
*/
closeOnSelect?: boolean | undefined;
/**
* - The default selected date. If the `defaultValue` is a string, it will be parsed to a `Date` object in accordance with the `inputFormat`.
*/
defaultValue?: string | Date | undefined;
/**
* - Whether the date picker is open by default.
*/
defaultIsOpen?: boolean | undefined;
/**
* - The first day of the week. 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday.
*/
firstDayOfWeek?: number | undefined;
/**
* - A callback called to return the formatted date string in the given format.
*/
formatDate?: ((date: Date, formatStr: string, options: {
locale?: Locale;
}) => void) | undefined;
/**
* - The default date format is ISO 8601 (`yyyy-MM-dd`). You can change the input format in accordance with the locale. The input value will be parsed to a `Date` object with `dd` as day, `MM` as month, and `yyyy` as year.
*/
inputFormat?: string | undefined;
/**
* - If `true`, the date picker will be open.
*/
isOpen?: boolean | undefined;
/**
* - The skidding and distance of the date picker.
*/
offset?: [number, number] | undefined;
/**
* - If `true`, renders the date picker in a portal.
*/
portalled?: boolean | undefined;
/**
* - The minimum date that can be selected.
*/
minDate?: Date | undefined;
/**
* - The maximum date that can be selected.
*/
maxDate?: Date | undefined;
/**
* - A callback called when the value (the selected date) changes.
*/
onChange?: ((date: Date) => void) | undefined;
/**
* - Callback when the date picker is closed.
*/
onClose?: (() => void) | undefined;
/**
* - An error-first callback called when the date validation returns an error (or the date is valid after error).
*/
onError?: ((error: string, date: Date) => void) | undefined;
/**
* - Callback when the date picker is opened.
*/
onOpen?: (() => void) | undefined;
/**
* - The placement of the date picker. One of: 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'.
*/
placement?: string | undefined;
/**
* - The `renderInput` prop allows you to customize the rendered input. The `props` argument of this render prop contains props of InputControl that you need to forward.
*/
renderInput?: ((props: {
error: string | undefined;
inputProps: React__default.HTMLAttributes & {
ref: React__default.RefCallback;
value: string;
};
}) => React__default.ReactNode) | undefined;
/**
* - Disable specific date. Return `true` if the date will be disabled.
*/
shouldDisableDate?: ((date: Date) => boolean) | undefined;
/**
* - The selected date. If the `value` is a string, it will be parsed to a `Date` object in accordance with the `inputFormat`.
*/
value?: string | Date | undefined;
};
/**
* @typedef {Object} DatePickerProps
* @property {boolean} [closeOnSelect=false] - Determines if the date picker should close automatically after a date is selected.
* @property {Date|string} [defaultValue] - The default selected date. If the `defaultValue` is a string, it will be parsed to a `Date` object in accordance with the `inputFormat`.
* @property {boolean} [defaultIsOpen=false] - Whether the date picker is open by default.
* @property {number} [firstDayOfWeek=0] - The first day of the week. 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday.
* @property {(date: Date, formatStr: string, options: { locale?: Locale }) => void} [formatDate] - A callback called to return the formatted date string in the given format.
* @property {string} [inputFormat='yyyy-MM-dd'] - The default date format is ISO 8601 (`yyyy-MM-dd`). You can change the input format in accordance with the locale. The input value will be parsed to a `Date` object with `dd` as day, `MM` as month, and `yyyy` as year.
* @property {boolean} [isOpen] - If `true`, the date picker will be open.
* @property {[number, number]} [offset=[0, 0]] - The skidding and distance of the date picker.
* @property {boolean} [portalled=false] - If `true`, renders the date picker in a portal.
* @property {Date} [minDate] - The minimum date that can be selected.
* @property {Date} [maxDate] - The maximum date that can be selected.
* @property {(date: Date) => void} [onChange] - A callback called when the value (the selected date) changes.
* @property {() => void} [onClose] - Callback when the date picker is closed.
* @property {(error: string, date: Date) => void} [onError] - An error-first callback called when the date validation returns an error (or the date is valid after error).
* @property {() => void} [onOpen] - Callback when the date picker is opened.
* @property {string} [placement='bottom-start'] - The placement of the date picker. One of: 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'.
* @property {(props: { error: string | undefined, inputProps: React.HTMLAttributes & { ref: React.RefCallback, value: string } }) => React.ReactNode} [renderInput] - The `renderInput` prop allows you to customize the rendered input. The `props` argument of this render prop contains props of InputControl that you need to forward.
* @property {(date: Date) => boolean} [shouldDisableDate] - Disable specific date. Return `true` if the date will be disabled.
* @property {Date|string} [value] - The selected date. If the `value` is a string, it will be parsed to a `Date` object in accordance with the `inputFormat`.
*/
/**
* @type {ForwardRefComponent<'div', DatePickerProps>}
*/
declare const DatePicker: ForwardRefComponent<"div", DatePickerProps>;
declare function DefaultPropsProvider({ value, children, }: {
value: any;
children: any;
}): react_jsx_runtime.JSX.Element;
declare function useDefaultProps({ props, name }: {
props: any;
name: any;
}): any;
type DividerProps = {
/**
* - The variant of the divider style to use.
*/
variant?: "solid" | "dashed" | "dotted" | undefined;
/**
* - The orientation of the divider.
*/
orientation?: "horizontal" | "vertical" | undefined;
};
/**
* @typedef {Object} DividerProps
* @property {'solid' | 'dashed' | 'dotted'} [variant='solid'] - The variant of the divider style to use.
* @property {'horizontal' | 'vertical'} [orientation='horizontal'] - The orientation of the divider.
*/
/**
* @type {ForwardRefComponent<'hr', DividerProps>}
*/
declare const Divider: ForwardRefComponent<"hr", DividerProps>;
type DrawerProps = {
/**
* - The drawer will automatically set focus on the first focusable element inside the drawer when it is opened. ⚠️ This only works if `initialFocusRef` is not defined and `ensureFocus` is set to `true`.
*/
autoFocus?: boolean | undefined;
/**
* - A backdrop will be created for `DrawerOverlay` to function correctly. Otherwise, it will not expand to the entire screen.
*/
backdrop?: boolean | undefined;
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {
autoFocus: boolean;
backdrop: boolean;
closeOnEsc: boolean;
closeOnInteractOutside: boolean;
ensureFocus: boolean;
finalFocusRef?: React__default.RefObject;
initialFocusRef?: React__default.RefObject;
isClosable: boolean;
isOpen: boolean;
onClose?: () => void;
onInteractOutside?: (event: Event) => void;
placement: "left" | "right" | "top" | "bottom";
size: "auto" | "sm" | "md" | "lg" | "full";
}) => React__default.ReactNode);
/**
* - Closes the drawer when the `Escape` key is pressed.
*/
closeOnEsc?: boolean | undefined;
/**
* - Closes the drawer when interacting outside the drawer content.
*/
closeOnInteractOutside?: boolean | undefined;
/**
* - Ensures that the user's focus remains within the drawer when it is open, preventing them from interacting with elements outside the drawer.
*/
ensureFocus?: boolean | undefined;
/**
* - The `ref` of the element that should receive focus when the drawer closes. ⚠️ This only works if `ensureFocus` is set to `true`.
*/
finalFocusRef?: React__default.RefObject | undefined;
/**
* - The `ref` of the element that should receive focus when the drawer opens. ⚠️ This only works if `ensureFocus` is set to `true`.
*/
initialFocusRef?: React__default.RefObject | undefined;
/**
* - A close button will appear on the right side.
*/
isClosable?: boolean | undefined;
/**
* - The drawer is shown.
*/
isOpen?: boolean | undefined;
/**
* - Callback fired when the drawer closes.
*/
onClose?: (() => void) | undefined;
/**
* - Callback fired when interacting outside the drawer content. Call `event.preventDefault()` to prevent the drawer from closing.
*/
onInteractOutside?: ((event: Event) => void) | undefined;
/**
* - The focus will be restored to the element that was focused on when the drawer was initially opened. ⚠️ This only works if `ensureFocus` is set to `true`.
*/
returnFocusOnClose?: boolean | undefined;
/**
* - Change the placement of the drawer.
*/
placement?: "left" | "right" | "top" | "bottom" | undefined;
/**
* - Change the size of the drawer.
*/
size?: "sm" | "md" | "lg" | "auto" | "full" | undefined;
/**
* - Props to be passed to the Portal component.
*/
portalProps?: {
containerRef?: React__default.RefObject;
appendToParentPortal?: boolean;
} | undefined;
};
/**
* @typedef {Object} DrawerProps
* @property {boolean} [autoFocus=false] - The drawer will automatically set focus on the first focusable element inside the drawer when it is opened. ⚠️ This only works if `initialFocusRef` is not defined and `ensureFocus` is set to `true`.
* @property {boolean} [backdrop=false] - A backdrop will be created for `DrawerOverlay` to function correctly. Otherwise, it will not expand to the entire screen.
* @property {React.ReactNode | ((context: { autoFocus: boolean; backdrop: boolean; closeOnEsc: boolean; closeOnInteractOutside: boolean; ensureFocus: boolean; finalFocusRef?: React.RefObject; initialFocusRef?: React.RefObject; isClosable: boolean; isOpen: boolean; onClose?: () => void; onInteractOutside?: (event: Event) => void; placement: 'left' | 'right' | 'top' | 'bottom'; size: 'auto' | 'sm' | 'md' | 'lg' | 'full' }) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
* @property {boolean} [closeOnEsc=false] - Closes the drawer when the `Escape` key is pressed.
* @property {boolean} [closeOnInteractOutside=false] - Closes the drawer when interacting outside the drawer content.
* @property {boolean} [ensureFocus=false] - Ensures that the user's focus remains within the drawer when it is open, preventing them from interacting with elements outside the drawer.
* @property {React.RefObject} [finalFocusRef] - The `ref` of the element that should receive focus when the drawer closes. ⚠️ This only works if `ensureFocus` is set to `true`.
* @property {React.RefObject} [initialFocusRef] - The `ref` of the element that should receive focus when the drawer opens. ⚠️ This only works if `ensureFocus` is set to `true`.
* @property {boolean} [isClosable=false] - A close button will appear on the right side.
* @property {boolean} [isOpen=false] - The drawer is shown.
* @property {() => void} [onClose] - Callback fired when the drawer closes.
* @property {(event: Event) => void} [onInteractOutside] - Callback fired when interacting outside the drawer content. Call `event.preventDefault()` to prevent the drawer from closing.
* @property {boolean} [returnFocusOnClose=true] - The focus will be restored to the element that was focused on when the drawer was initially opened. ⚠️ This only works if `ensureFocus` is set to `true`.
* @property {'left' | 'right' | 'top' | 'bottom'} [placement='right'] - Change the placement of the drawer.
* @property {'auto' | 'sm' | 'md' | 'lg' | 'full'} [size='auto'] - Change the size of the drawer.
* @property {{ containerRef?: React.RefObject; appendToParentPortal?: boolean }} [portalProps] - Props to be passed to the Portal component.
*/
/**
* @type {ForwardRefComponent<'div', DrawerProps>}
*/
declare const Drawer: ForwardRefComponent<"div", DrawerProps>;
type DrawerBodyProps = {
/**
* - The content of the drawer body.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} DrawerBodyProps
* @property {React.ReactNode} [children] - The content of the drawer body.
*/
/**
* @type {ForwardRefComponent<'div', DrawerBodyProps>}
*/
declare const DrawerBody: ForwardRefComponent<"div", DrawerBodyProps>;
type DrawerCloseButtonProps = {
/**
* - The content of the close button.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} DrawerCloseButtonProps
* @property {React.ReactNode} [children] - The content of the close button.
*/
/**
* @type {ForwardRefComponent<'button', DrawerCloseButtonProps>}
*/
declare const DrawerCloseButton: ForwardRefComponent<"button", DrawerCloseButtonProps>;
type DrawerContainerProps = {
/**
* - The content of the drawer container.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} DrawerContainerProps
* @property {React.ReactNode} [children] - The content of the drawer container.
*/
/**
* @type {ForwardRefComponent<'div', DrawerContainerProps>}
*/
declare const DrawerContainer: ForwardRefComponent<"div", DrawerContainerProps>;
type DrawerContentProps = {
/**
* - The content of the drawer.
*/
children?: React__default.ReactNode;
/**
* - Props forwarded to the internal slots.
*/
slotProps?: {
closeButton?: object;
transition?: object;
} | undefined;
/**
* - Slot components. `slots.closeButton` replaces the default `DrawerCloseButton`. `slots.transition` replaces the default `Slide`.
*/
slots?: {
closeButton?: React__default.ElementType;
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} DrawerContentProps
* @property {React.ReactNode} [children] - The content of the drawer.
* @property {{ closeButton?: object; transition?: object }} [slotProps] - Props forwarded to the internal slots.
* @property {{ closeButton?: React.ElementType; transition?: React.ElementType }} [slots] - Slot components. `slots.closeButton` replaces the default `DrawerCloseButton`. `slots.transition` replaces the default `Slide`.
* @property {React.ElementType} [TransitionComponent=Slide] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', DrawerContentProps>}
*/
declare const DrawerContent: ForwardRefComponent<"div", DrawerContentProps>;
type DrawerFooterProps = {
/**
* - The content of the drawer footer.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} DrawerFooterProps
* @property {React.ReactNode} [children] - The content of the drawer footer.
*/
/**
* @type {ForwardRefComponent<'div', DrawerFooterProps>}
*/
declare const DrawerFooter: ForwardRefComponent<"div", DrawerFooterProps>;
type DrawerHeaderProps = {
/**
* - The content of the drawer header.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} DrawerHeaderProps
* @property {React.ReactNode} [children] - The content of the drawer header.
*/
/**
* @type {ForwardRefComponent<'div', DrawerHeaderProps>}
*/
declare const DrawerHeader: ForwardRefComponent<"div", DrawerHeaderProps>;
type DrawerOverlayProps = {
/**
* - Props forwarded to the internal transition slot.
*/
slotProps?: {
transition?: object;
} | undefined;
/**
* - Slot components. `slots.transition` replaces the default `Fade`.
*/
slots?: {
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} DrawerOverlayProps
* @property {{ transition?: object }} [slotProps] - Props forwarded to the internal transition slot.
* @property {{ transition?: React.ElementType }} [slots] - Slot components. `slots.transition` replaces the default `Fade`.
* @property {React.ElementType} [TransitionComponent=Fade] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', DrawerOverlayProps>}
*/
declare const DrawerOverlay: ForwardRefComponent<"div", DrawerOverlayProps>;
type DrawerContextValue = {
/**
* - Whether the drawer automatically sets focus on the first focusable element.
*/
autoFocus: boolean;
/**
* - Whether a backdrop is rendered.
*/
backdrop: boolean;
/**
* - Whether the drawer closes on Escape key.
*/
closeOnEsc: boolean;
/**
* - Whether the drawer closes on outside interaction.
*/
closeOnInteractOutside: boolean;
/**
* - Whether focus is trapped within the drawer.
*/
ensureFocus: boolean;
/**
* - The ref of the element to focus on close.
*/
finalFocusRef?: React$1.RefObject | undefined;
/**
* - The ref of the element to focus on open.
*/
initialFocusRef?: React$1.RefObject | undefined;
/**
* - Whether the close button is shown.
*/
isClosable: boolean;
/**
* - Whether the drawer is open.
*/
isOpen: boolean;
/**
* - Callback fired when the drawer closes.
*/
onClose?: (() => void) | undefined;
/**
* - Callback fired when interacting outside the drawer.
*/
onInteractOutside?: ((event: Event) => void) | undefined;
/**
* - The placement of the drawer.
*/
placement: "left" | "right" | "top" | "bottom";
/**
* - The size of the drawer.
*/
size: "auto" | "sm" | "md" | "lg" | "full";
/**
* - Internal use only.
*/
containerRef: React.RefObject;
/**
* - Internal use only.
*/
contentRef: React.RefObject;
/**
* - Internal use only.
*/
scrollBehavior: "inside";
};
/**
* @typedef {Object} DrawerContextValue
* @property {boolean} autoFocus - Whether the drawer automatically sets focus on the first focusable element.
* @property {boolean} backdrop - Whether a backdrop is rendered.
* @property {boolean} closeOnEsc - Whether the drawer closes on Escape key.
* @property {boolean} closeOnInteractOutside - Whether the drawer closes on outside interaction.
* @property {boolean} ensureFocus - Whether focus is trapped within the drawer.
* @property {React.RefObject} [finalFocusRef] - The ref of the element to focus on close.
* @property {React.RefObject} [initialFocusRef] - The ref of the element to focus on open.
* @property {boolean} isClosable - Whether the close button is shown.
* @property {boolean} isOpen - Whether the drawer is open.
* @property {() => void} [onClose] - Callback fired when the drawer closes.
* @property {(event: Event) => void} [onInteractOutside] - Callback fired when interacting outside the drawer.
* @property {'left' | 'right' | 'top' | 'bottom'} placement - The placement of the drawer.
* @property {'auto' | 'sm' | 'md' | 'lg' | 'full'} size - The size of the drawer.
* @property {React.RefObject} containerRef - Internal use only.
* @property {React.RefObject} contentRef - Internal use only.
* @property {'inside'} scrollBehavior - Internal use only.
*/
/**
* A hook to access the drawer context.
* @returns {DrawerContextValue | undefined} The drawer context, or `undefined` if not within a `Drawer`.
*/
declare function useDrawer(): DrawerContextValue | undefined;
/**
* A dropdown item is an object that can include these fields:
* - `label` — The content to display for the item.
* - `type` — One of `'group' | 'divider' | 'submenu' | 'custom'`; omit for a regular menu item.
* - `children` — Child items for `group` and `submenu` types.
* - `props` — Props forwarded to the underlying components.
* - Additional fields, such as `id` or `value`, are preserved and included in the item passed to `onChange`.
*/
type DropdownProps = {
/**
* - The initial selected item for uncontrolled mode.
*/
defaultValue?: any;
/**
* - The items to render in the dropdown.
*/
items?: any[] | undefined;
/**
* - If `true`, sizes the content to match the toggle's width.
*/
matchWidth?: boolean | undefined;
/**
* - Called with the selected item whenever the selection changes.
*/
onChange?: ((item: any) => void) | undefined;
/**
* - If `true`, renders the dropdown in a portal.
*/
portalled?: boolean | undefined;
/**
* - Customizes the content rendered inside the dropdown, such as headers, search inputs, or footers.
*/
renderContent?: ((args: {
items: any[];
renderItem: (item: any) => React__default.ReactNode;
renderItems: (items: any[]) => React__default.ReactNode;
}) => React__default.ReactNode) | undefined;
/**
* - Customizes each item's content. The default returns `item.label` for plain objects and otherwise returns `item`. Custom implementations must accept `null` because the default toggle calls them before selection.
*/
renderItem?: ((item: any) => React__default.ReactNode) | undefined;
/**
* - Renders the toggle. Defaults to an unstyled `DropdownToggle`.
*/
renderToggle?: ((args: {
renderItem: (item: any) => React__default.ReactNode;
value: any;
}) => React__default.ReactNode) | undefined;
/**
* - Props for the root and content slots.
*/
slotProps?: {
root?: object;
content?: object;
} | undefined;
/**
* - Slot components. `slots.root` replaces the internal `Menu` engine.
*/
slots?: {
root?: React__default.ElementType;
} | undefined;
/**
* - The selected item for controlled mode. Pair with `onChange`.
*/
value?: any;
};
/**
* A dropdown item is an object that can include these fields:
* - `label` — The content to display for the item.
* - `type` — One of `'group' | 'divider' | 'submenu' | 'custom'`; omit for a regular menu item.
* - `children` — Child items for `group` and `submenu` types.
* - `props` — Props forwarded to the underlying components.
* - Additional fields, such as `id` or `value`, are preserved and included in the item passed to `onChange`.
*
* @typedef {Object} DropdownProps
* @property {any} [defaultValue] - The initial selected item for uncontrolled mode.
* @property {any[]} [items] - The items to render in the dropdown.
* @property {boolean} [matchWidth=false] - If `true`, sizes the content to match the toggle's width.
* @property {(item: any) => void} [onChange] - Called with the selected item whenever the selection changes.
* @property {boolean} [portalled=false] - If `true`, renders the dropdown in a portal.
* @property {(args: { items: any[], renderItem: (item: any) => React.ReactNode, renderItems: (items: any[]) => React.ReactNode }) => React.ReactNode} [renderContent] - Customizes the content rendered inside the dropdown, such as headers, search inputs, or footers.
* @property {(item: any) => React.ReactNode} [renderItem] - Customizes each item's content. The default returns `item.label` for plain objects and otherwise returns `item`. Custom implementations must accept `null` because the default toggle calls them before selection.
* @property {(args: { renderItem: (item: any) => React.ReactNode, value: any }) => React.ReactNode} [renderToggle] - Renders the toggle. Defaults to an unstyled `DropdownToggle`.
* @property {{ root?: object, content?: object }} [slotProps] - Props for the root and content slots.
* @property {{ root?: React.ElementType }} [slots] - Slot components. `slots.root` replaces the internal `Menu` engine.
* @property {any} [value] - The selected item for controlled mode. Pair with `onChange`.
*/
/**
* @type {ForwardRefComponent<'div', DropdownProps>}
*/
declare const Dropdown: ForwardRefComponent<"div", DropdownProps>;
type DropdownButtonProps = {
/**
* - The content of the dropdown button.
*/
children?: React__default.ReactNode;
/**
* - Whether the dropdown button is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the dropdown button is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Callback when the user presses a key.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
/**
* - The variant of the dropdown button.
*/
variant?: "default" | "emphasis" | "primary" | "secondary" | "ghost" | undefined;
};
/**
* @typedef {Object} DropdownButtonProps
* @property {React.ReactNode} [children] - The content of the dropdown button.
* @property {boolean} [disabled] - Whether the dropdown button is disabled.
* @property {React.MouseEventHandler} [onClick] - Callback when the dropdown button is clicked.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when the user presses a key.
* @property {'emphasis' | 'primary' | 'default' | 'secondary' | 'ghost'} [variant='secondary'] - The variant of the dropdown button.
*/
/**
* @type {ForwardRefComponent<'button', DropdownButtonProps>}
*/
declare const DropdownButton: ForwardRefComponent<"button", DropdownButtonProps>;
type DropdownChipProps = {
/**
* - The content of the dropdown chip.
*/
children?: React__default.ReactNode;
/**
* - Whether the dropdown chip is disabled. Sets the disabled state on the pill and prevents menu activation.
*/
disabled?: boolean | undefined;
/**
* - Shows a close button on the right side of the chip.
*/
isClosable?: boolean | undefined;
/**
* - Called when the close button is clicked.
*/
onClose?: (() => void) | undefined;
};
/**
* @typedef {Object} DropdownChipProps
* @property {React.ReactNode} [children] - The content of the dropdown chip.
* @property {boolean} [disabled] - Whether the dropdown chip is disabled. Sets the disabled state on the pill and prevents menu activation.
* @property {boolean} [isClosable] - Shows a close button on the right side of the chip.
* @property {() => void} [onClose] - Called when the close button is clicked.
*/
/**
* A chip-style dropdown toggle: a `Tag` pill that is itself the toggle.
*
* The whole pill is focusable and clickable, and it carries the `Tag` focus
* ring. The close button (`isClosable`) is an overlay rendered next to the pill,
* so it is a second focus stop instead of an interactive control nested inside
* the toggle.
*
* `sx` and style props style the pill. `disabled` is forwarded to the toggle;
* every other prop goes to the pill.
*
* @type {ForwardRefComponent<'div', DropdownChipProps>}
*/
declare const DropdownChip: ForwardRefComponent<"div", DropdownChipProps>;
type DropdownToggleProps = {
/**
* - The content of the dropdown toggle.
*/
children?: React__default.ReactNode;
/**
* - Whether the dropdown toggle is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the dropdown toggle is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Callback when the user presses a key.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
};
/**
* @typedef {Object} DropdownToggleProps
* @property {React.ReactNode} [children] - The content of the dropdown toggle.
* @property {boolean} [disabled] - Whether the dropdown toggle is disabled.
* @property {React.MouseEventHandler} [onClick] - Callback when the dropdown toggle is clicked.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when the user presses a key.
*/
/**
* @type {ForwardRefComponent<'button', DropdownToggleProps>}
*/
declare const DropdownToggle: ForwardRefComponent<"button", DropdownToggleProps>;
declare function EnvironmentProvider(props: any): react_jsx_runtime.JSX.Element;
declare namespace EnvironmentProvider {
let displayName: string;
}
declare function useEnvironment(): any;
type FlexProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} FlexProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'div', FlexProps>}
*/
declare const Flex: ForwardRefComponent<"div", FlexProps>;
type FormControlProps = {
/**
* -
*/
children?: React__default.ReactNode;
/**
* - If `true`, all form elements will be disabled.
*/
disabled?: boolean | undefined;
/**
* - If `true`, indicates error state for all form elements.
*/
error?: boolean | undefined;
/**
* - The layout orientation of the form control.
*/
orientation?: "horizontal" | "vertical" | undefined;
/**
* - If `true`, all form elements will be read-only.
*/
readOnly?: boolean | undefined;
};
/**
* @typedef {Object} FormControlProps
* @property {React.ReactNode} [children] -
* @property {boolean} [disabled=false] - If `true`, all form elements will be disabled.
* @property {boolean} [error=false] - If `true`, indicates error state for all form elements.
* @property {'vertical' | 'horizontal'} [orientation='vertical'] - The layout orientation of the form control.
* @property {boolean} [readOnly=false] - If `true`, all form elements will be read-only.
*/
/**
* @type {ForwardRefComponent<'div', FormControlProps>}
*/
declare const FormControl: ForwardRefComponent<"div", FormControlProps>;
type FormLabelProps = {
/**
* -
*/
children?: React__default.ReactNode;
/**
* - If `true`, shows a red asterisk indicator next to the label.
*/
required?: boolean | undefined;
};
/**
* @typedef {Object} FormLabelProps
* @property {React.ReactNode} [children] -
* @property {boolean} [required=false] - If `true`, shows a red asterisk indicator next to the label.
*/
/**
* @type {ForwardRefComponent<'label', FormLabelProps>}
*/
declare const FormLabel: ForwardRefComponent<"label", FormLabelProps>;
type FormInputProps = {
/**
* - The input is disabled and the user cannot interact with it.
*/
disabled?: boolean | undefined;
/**
* - The input displays a red border to indicate an error.
*/
error?: boolean | undefined;
/**
* - The value of the input cannot be edited.
*/
readOnly?: boolean | undefined;
/**
* - The visual size of the `input` element.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The variant of the input style to use.
*/
variant?: "outline" | "filled" | "unstyled" | "flush" | undefined;
};
/**
* @typedef {Object} FormInputProps
* @property {boolean} [disabled] - The input is disabled and the user cannot interact with it.
* @property {boolean} [error] - The input displays a red border to indicate an error.
* @property {boolean} [readOnly] - The value of the input cannot be edited.
* @property {'sm' | 'md' | 'lg'} [size='md'] - The visual size of the `input` element.
* @property {'outline' | 'filled' | 'flush' | 'unstyled'} [variant='outline'] - The variant of the input style to use.
*/
/**
* @type {ForwardRefComponent<'input', FormInputProps>}
*/
declare const FormInput: ForwardRefComponent<"input", FormInputProps>;
type FormTextareaProps = {
/**
* - Specifies the number of visible lines in a textarea.
*/
rows?: number | undefined;
/**
* - Specifies the visible width of a textarea.
*/
cols?: number | undefined;
/**
* - Specifies the maximum number of characters allowed in the textarea.
*/
maxLength?: number | undefined;
/**
* - Specifies the minimum number of characters required for the textarea to be considered valid.
*/
minLength?: number | undefined;
/**
* - The resize behavior of the textarea.
*/
resize?: "horizontal" | "vertical" | "none" | "both" | undefined;
/**
* - The variant of the textarea style to use.
*/
variant?: "outline" | "filled" | "unstyled" | undefined;
/**
* - The textarea is disabled and the user cannot interact with it.
*/
disabled?: boolean | undefined;
/**
* - The textarea displays a red border to indicate an error.
*/
error?: boolean | undefined;
/**
* - The value of the textarea cannot be edited.
*/
readOnly?: boolean | undefined;
};
/**
* @typedef {Object} FormTextareaProps
* @property {number} [rows] - Specifies the number of visible lines in a textarea.
* @property {number} [cols] - Specifies the visible width of a textarea.
* @property {number} [maxLength] - Specifies the maximum number of characters allowed in the textarea.
* @property {number} [minLength] - Specifies the minimum number of characters required for the textarea to be considered valid.
* @property {'none' | 'both' | 'horizontal' | 'vertical'} [resize] - The resize behavior of the textarea.
* @property {'outline' | 'filled' | 'unstyled'} [variant='outline'] - The variant of the textarea style to use.
* @property {boolean} [disabled] - The textarea is disabled and the user cannot interact with it.
* @property {boolean} [error] - The textarea displays a red border to indicate an error.
* @property {boolean} [readOnly] - The value of the textarea cannot be edited.
*/
/**
* @type {ForwardRefComponent<'textarea', FormTextareaProps>}
*/
declare const FormTextarea: ForwardRefComponent<"textarea", FormTextareaProps>;
type FormErrorMessageProps = {
/**
* - The error message(s) to display. Can be a single message or an array of messages.
*/
errors?: React__default.ReactNode | React__default.ReactNode[];
};
/**
* @typedef {Object} FormErrorMessageProps
* @property {React.ReactNode | React.ReactNode[]} [errors=[]] - The error message(s) to display. Can be a single message or an array of messages.
*/
/**
* @type {ForwardRefComponent<'div', FormErrorMessageProps>}
*/
declare const FormErrorMessage: ForwardRefComponent<"div", FormErrorMessageProps>;
type FormHelperTextProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} FormHelperTextProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'div', FormHelperTextProps>}
*/
declare const FormHelperText: ForwardRefComponent<"div", FormHelperTextProps>;
type FormCharacterCountProps = {
/**
* - The current character count.
*/
count?: number | undefined;
/**
* - The maximum allowed character count.
*/
maxCount?: number | undefined;
};
/**
* @typedef {Object} FormCharacterCountProps
* @property {number} [count=0] - The current character count.
* @property {number} [maxCount=0] - The maximum allowed character count.
*/
/**
* @type {ForwardRefComponent<'div', FormCharacterCountProps>}
*/
declare const FormCharacterCount: ForwardRefComponent<"div", FormCharacterCountProps>;
type FormControlContextValue = {
/**
* - Whether the form control is disabled.
*/
disabled: boolean;
/**
* - Whether the form control is in error state.
*/
error: boolean;
/**
* - Whether the form control is read-only.
*/
readOnly: boolean;
/**
* - The id for the character count element.
*/
formCharacterCountId: string;
/**
* - The id for the error message element.
*/
formErrorMessageId: string;
/**
* - The id for the helper text element.
*/
formHelperTextId: string;
/**
* - The id for the field element.
*/
fieldId: string;
/**
* - The orientation of the form control.
*/
orientation: "vertical" | "horizontal";
};
/**
* @typedef {Object} FormControlContextValue
* @property {boolean} disabled - Whether the form control is disabled.
* @property {boolean} error - Whether the form control is in error state.
* @property {boolean} readOnly - Whether the form control is read-only.
* @property {string} formCharacterCountId - The id for the character count element.
* @property {string} formErrorMessageId - The id for the error message element.
* @property {string} formHelperTextId - The id for the helper text element.
* @property {string} fieldId - The id for the field element.
* @property {'vertical' | 'horizontal'} orientation - The orientation of the form control.
*/
/**
* A hook to access the form control context.
* @returns {FormControlContextValue | undefined} The form control context, or `undefined` if not within a `FormControl`.
*/
declare function useFormControl(): FormControlContextValue | undefined;
type GridProps = {
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} GridProps
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'div', GridProps>}
*/
declare const Grid: ForwardRefComponent<"div", GridProps>;
type HighlightProps = {
/**
* - Whether matching should be case-sensitive.
*/
caseSensitive?: boolean | undefined;
/**
* - The content to search and highlight. It can be a plain string or React elements containing text.
*/
children?: React__default.ReactNode;
/**
* - The search word(s) to highlight within the content.
*/
query: string | string[];
/**
* - Custom components used for rendering. Use `slots.mark` to replace the default `Mark` component.
*/
slots?: {
mark?: React__default.ElementType;
} | undefined;
/**
* - Props forwarded to slot components. Use `slotProps.mark` to pass additional props to the `Mark` component.
*/
slotProps?: {
mark?: {
variant?: "highlight" | "emphasis" | "none";
};
} | undefined;
/**
* - A function that transforms each search word before matching. Useful for implementing custom matching behavior such as accent-insensitive search, text normalization, or other preprocessing.
*/
transform?: ((searchWord: string) => string) | undefined;
/**
* - The visual style applied to highlighted text. Passed to the `Mark` component. Supported variants: 'highlight', 'emphasis', 'none'.
*/
variant?: "emphasis" | "none" | "highlight" | undefined;
};
/**
* @typedef {Object} HighlightProps
* @property {boolean} [caseSensitive=false] - Whether matching should be case-sensitive.
* @property {React.ReactNode} [children] - The content to search and highlight. It can be a plain string or React elements containing text.
* @property {string | string[]} query - The search word(s) to highlight within the content.
* @property {{ mark?: React.ElementType }} [slots={}] - Custom components used for rendering. Use `slots.mark` to replace the default `Mark` component.
* @property {{ mark?: { variant?: 'highlight' | 'emphasis' | 'none' } }} [slotProps={}] - Props forwarded to slot components. Use `slotProps.mark` to pass additional props to the `Mark` component.
* @property {(searchWord: string) => string} [transform] - A function that transforms each search word before matching. Useful for implementing custom matching behavior such as accent-insensitive search, text normalization, or other preprocessing.
* @property {'highlight' | 'emphasis' | 'none'} [variant='highlight'] - The visual style applied to highlighted text. Passed to the `Mark` component. Supported variants: 'highlight', 'emphasis', 'none'.
*/
/**
* @type {ForwardRefComponent<'div', HighlightProps>}
*/
declare const Highlight: ForwardRefComponent<"div", HighlightProps>;
type IconProps = {
/**
* - The name of the icon.
*/
icon?: string | undefined;
/**
* - If `true` or 'cw', it will rotate in the clockwise direction. If 'ccw', it will rotate in the counterclockwise direction. Otherwise, no rotation occurs.
*/
spin?: boolean | "cw" | "ccw" | undefined;
/**
* -
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} IconProps
* @property {string} [icon] - The name of the icon.
* @property {boolean | 'cw' | 'ccw'} [spin=false] - If `true` or 'cw', it will rotate in the clockwise direction. If 'ccw', it will rotate in the counterclockwise direction. Otherwise, no rotation occurs.
* @property {React.ReactNode} [children] -
*/
/**
* @type {ForwardRefComponent<'svg', IconProps, SVGSVGElement>}
*/
declare const Icon: ForwardRefComponent<"svg", IconProps, SVGSVGElement>;
type ImageProps = {
/**
* - Specifies an alternate text for the image, if the image for some reason cannot be displayed.
*/
alt?: string | undefined;
/**
* - Specifies the path to the image.
*/
src?: string | undefined;
};
/**
* @typedef {Object} ImageProps
* @property {string} [alt] - Specifies an alternate text for the image, if the image for some reason cannot be displayed.
* @property {string} [src] - Specifies the path to the image.
*/
/**
* @type {ForwardRefComponent<'img', ImageProps>}
*/
declare const Image: ForwardRefComponent<"img", ImageProps>;
type InputProps = {
/**
* - The input is disabled and the user cannot interact with it.
*/
disabled?: boolean | undefined;
/**
* - The input displays a red border to indicate an error.
*/
error?: boolean | undefined;
/**
* - The value of the input cannot be edited.
*/
readOnly?: boolean | undefined;
/**
* - The visual size of the `input` element.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The variant of the input style to use.
*/
variant?: "outline" | "filled" | "unstyled" | "flush" | undefined;
};
/**
* @typedef {Object} InputProps
* @property {boolean} [disabled] - The input is disabled and the user cannot interact with it.
* @property {boolean} [error] - The input displays a red border to indicate an error.
* @property {boolean} [readOnly] - The value of the input cannot be edited.
* @property {'sm' | 'md' | 'lg'} [size='md'] - The visual size of the `input` element.
* @property {'outline' | 'filled' | 'flush' | 'unstyled'} [variant='outline'] - The variant of the input style to use.
*/
/**
* @type {ForwardRefComponent<'input', InputProps>}
*/
declare const Input: ForwardRefComponent<"input", InputProps>;
type InputAdornmentProps = {
/**
* - The content of the input adornment.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} InputAdornmentProps
* @property {React.ReactNode} [children] - The content of the input adornment.
*/
/**
* @type {ForwardRefComponent<'div', InputAdornmentProps>}
*/
declare const InputAdornment: ForwardRefComponent<"div", InputAdornmentProps>;
type InputBaseProps = {
/**
* - The user cannot interact with the control.
*/
disabled?: boolean | undefined;
/**
* - Prevents the value of the input from being edited.
*/
readOnly?: boolean | undefined;
/**
* - The input will indicate an error.
*/
error?: boolean | undefined;
};
/**
* `InputBase` does not have appearance settings including default color, padding, outline, and border
*/
/**
* @typedef {Object} InputBaseProps
* @property {boolean} [disabled] - The user cannot interact with the control.
* @property {boolean} [readOnly] - Prevents the value of the input from being edited.
* @property {boolean} [error] - The input will indicate an error.
*/
/**
* @type {ForwardRefComponent<'input', InputBaseProps>}
*/
declare const InputBase: ForwardRefComponent<"input", InputBaseProps>;
type InputControlRenderProps = {
/**
* - Returns the props to spread onto the input element.
*/
getInputProps: () => React__default.HTMLAttributes & {
ref: React__default.Ref;
};
};
type InputControlProps = {
/**
* - Specifies whether the input can have its value automatically completed by the browser.
*/
autoComplete?: string | undefined;
/**
* - The input is automatically focused during the first mount.
*/
autoFocus?: boolean | undefined;
/**
* - The checked state of the input (for checkbox and radio inputs).
*/
checked?: boolean | undefined;
/**
* - The content of the input control. A function child can be used instead of a React element. It is called with the context object.
*/
children?: React__default.ReactNode | ((context: InputControlRenderProps) => React__default.ReactNode);
/**
* - The user cannot interact with the control.
*/
disabled?: boolean | undefined;
/**
* - The element displayed after the input field within the control.
*/
endAdornment?: React__default.ReactNode;
/**
* - Indicates an error state of the input.
*/
error?: string | boolean | undefined;
/**
* - **Deprecated.** Use `slots.input` instead. The component used for the input element.
*/
inputComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.input` instead. Props applied to the input element.
*/
inputProps?: React__default.InputHTMLAttributes | undefined;
/**
* - The ref to the input element.
*/
inputRef?: React__default.Ref | undefined;
/**
* - The id of the `` element that provides predefined options for the input.
*/
list?: string | undefined;
/**
* - The maximum value for the input.
*/
max?: string | number | undefined;
/**
* - The maximum number of characters allowed in the input.
*/
maxlength?: number | undefined;
/**
* - The minimum value for the input.
*/
min?: string | number | undefined;
/**
* - The minimum number of characters required in the input.
*/
minlength?: number | undefined;
/**
* - The user is allowed to enter more than one value.
*/
multiple?: boolean | undefined;
/**
* - The name of the input.
*/
name?: string | undefined;
/**
* - Callback fired when the input loses focus.
*/
onBlur?: React__default.FocusEventHandler | undefined;
/**
* - Callback fired when the value of the input is changed.
*/
onChange?: React__default.ChangeEventHandler | undefined;
/**
* - Callback fired when the input gains focus.
*/
onFocus?: React__default.FocusEventHandler | undefined;
/**
* - The regular expression that the input's value is checked against.
*/
pattern?: string | undefined;
/**
* - The short hint displayed in the input before the user enters a value.
*/
placeholder?: string | undefined;
/**
* - Prevents the value of the input from being edited.
*/
readOnly?: boolean | undefined;
/**
* - The input must be filled out before submitting the form.
*/
required?: boolean | undefined;
/**
* - The size of the input control.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - Props forwarded to the internal slots.
*/
slotProps?: {
input?: object;
root?: object;
} | undefined;
/**
* - Slot components. `slots.input` replaces the default `InputBase`. `slots.root` replaces the default `Box`.
*/
slots?: {
input?: React__default.ElementType;
root?: React__default.ElementType;
} | undefined;
/**
* - Specifies whether the input is subject to spell checking.
*/
spellcheck?: boolean | undefined;
/**
* - The element displayed before the input field within the control.
*/
startAdornment?: React__default.ReactNode;
/**
* - The interval between legal numbers in the input.
*/
step?: string | number | undefined;
/**
* - The type of the input element (e.g. 'text', 'email', 'password').
*/
type?: string | undefined;
/**
* - The value of the input.
*/
value?: string | number | readonly string[] | undefined;
/**
* - The variant of the input control.
*/
variant?: "outline" | "filled" | "unstyled" | "flush" | undefined;
};
/**
* @typedef {Object} InputControlRenderProps
* @property {() => React.HTMLAttributes & { ref: React.Ref }} getInputProps - Returns the props to spread onto the input element.
*/
/**
* @typedef {Object} InputControlProps
* @property {string} [autoComplete] - Specifies whether the input can have its value automatically completed by the browser.
* @property {boolean} [autoFocus] - The input is automatically focused during the first mount.
* @property {boolean} [checked] - The checked state of the input (for checkbox and radio inputs).
* @property {React.ReactNode | ((context: InputControlRenderProps) => React.ReactNode)} [children] - The content of the input control. A function child can be used instead of a React element. It is called with the context object.
* @property {boolean} [disabled] - The user cannot interact with the control.
* @property {React.ReactNode} [endAdornment] - The element displayed after the input field within the control.
* @property {boolean | string} [error] - Indicates an error state of the input.
* @property {React.ElementType} [inputComponent=InputBase] - **Deprecated.** Use `slots.input` instead. The component used for the input element.
* @property {React.InputHTMLAttributes} [inputProps] - **Deprecated.** Use `slotProps.input` instead. Props applied to the input element.
* @property {React.Ref} [inputRef] - The ref to the input element.
* @property {string} [list] - The id of the `` element that provides predefined options for the input.
* @property {string | number} [max] - The maximum value for the input.
* @property {number} [maxlength] - The maximum number of characters allowed in the input.
* @property {string | number} [min] - The minimum value for the input.
* @property {number} [minlength] - The minimum number of characters required in the input.
* @property {boolean} [multiple] - The user is allowed to enter more than one value.
* @property {string} [name] - The name of the input.
* @property {React.FocusEventHandler} [onBlur] - Callback fired when the input loses focus.
* @property {React.ChangeEventHandler} [onChange] - Callback fired when the value of the input is changed.
* @property {React.FocusEventHandler} [onFocus] - Callback fired when the input gains focus.
* @property {string} [pattern] - The regular expression that the input's value is checked against.
* @property {string} [placeholder] - The short hint displayed in the input before the user enters a value.
* @property {boolean} [readOnly] - Prevents the value of the input from being edited.
* @property {boolean} [required] - The input must be filled out before submitting the form.
* @property {'sm' | 'md' | 'lg'} [size='md'] - The size of the input control.
* @property {{ input?: object, root?: object }} [slotProps] - Props forwarded to the internal slots.
* @property {{ input?: React.ElementType, root?: React.ElementType }} [slots] - Slot components. `slots.input` replaces the default `InputBase`. `slots.root` replaces the default `Box`.
* @property {boolean} [spellcheck] - Specifies whether the input is subject to spell checking.
* @property {React.ReactNode} [startAdornment] - The element displayed before the input field within the control.
* @property {string | number} [step] - The interval between legal numbers in the input.
* @property {string} [type] - The type of the input element (e.g. 'text', 'email', 'password').
* @property {string | number | ReadonlyArray} [value] - The value of the input.
* @property {'outline' | 'filled' | 'flush' | 'unstyled'} [variant='outline'] - The variant of the input control.
*/
/**
* @type {ForwardRefComponent<'div', InputControlProps>}
*/
declare const InputControl: ForwardRefComponent<"div", InputControlProps>;
type InputGroupProps = {
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {
size: "sm" | "md" | "lg";
variant: "outline" | "filled" | "flush" | "unstyled";
}) => React__default.ReactNode);
/**
* - The relative size to the input group itself.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The variant of the input style to use.
*/
variant?: "outline" | "filled" | "unstyled" | "flush" | undefined;
};
/**
* @typedef {Object} InputGroupProps
* @property {React.ReactNode | ((context: { size: 'sm' | 'md' | 'lg'; variant: 'outline' | 'filled' | 'flush' | 'unstyled' }) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
* @property {'sm' | 'md' | 'lg'} [size='md'] - The relative size to the input group itself.
* @property {'outline' | 'filled' | 'flush' | 'unstyled'} [variant='outline'] - The variant of the input style to use.
*/
/**
* @type {ForwardRefComponent<'div', InputGroupProps>}
*/
declare const InputGroup: ForwardRefComponent<"div", InputGroupProps>;
type InputGroupAddonProps = {
/**
* - The content of the input group addon.
*/
children?: React__default.ReactNode;
/**
* - The size of the input group addon.
*/
size?: "sm" | "md" | "lg" | undefined;
/**
* - The variant of the input group addon style.
*/
variant?: "outline" | "filled" | "unstyled" | "flush" | undefined;
};
/**
* @typedef {Object} InputGroupAddonProps
* @property {React.ReactNode} [children] - The content of the input group addon.
* @property {('sm'|'md'|'lg')} [size='md'] - The size of the input group addon.
* @property {('outline'|'filled'|'flush'|'unstyled')} [variant='outline'] - The variant of the input group addon style.
*/
/**
* @type {ForwardRefComponent<'div', InputGroupAddonProps>}
*/
declare const InputGroupAddon: ForwardRefComponent<"div", InputGroupAddonProps>;
type InputGroupAppendProps = {
/**
* - The content to append to the input group.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} InputGroupAppendProps
* @property {React.ReactNode} [children] - The content to append to the input group.
*/
/**
* @type {ForwardRefComponent<'div', InputGroupAppendProps>}
*/
declare const InputGroupAppend: ForwardRefComponent<"div", InputGroupAppendProps>;
type InputGroupPrependProps = {
/**
* - The content to prepend to the input group.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} InputGroupPrependProps
* @property {React.ReactNode} [children] - The content to prepend to the input group.
*/
/**
* @type {ForwardRefComponent<'div', InputGroupPrependProps>}
*/
declare const InputGroupPrepend: ForwardRefComponent<"div", InputGroupPrependProps>;
type InputGroupContextValue = {
/**
* - The size of the input group.
*/
size: "sm" | "md" | "lg";
/**
* - The variant of the input group.
*/
variant: "outline" | "filled" | "flush" | "unstyled";
};
/**
* @typedef {Object} InputGroupContextValue
* @property {'sm' | 'md' | 'lg'} size - The size of the input group.
* @property {'outline' | 'filled' | 'flush' | 'unstyled'} variant - The variant of the input group.
*/
/**
* A hook to access the input group context.
* @returns {InputGroupContextValue | undefined} The input group context, or `undefined` if not within an `InputGroup`.
*/
declare function useInputGroup(): InputGroupContextValue | undefined;
type LinkProps = {
/**
* -
*/
children?: React__default.ReactNode;
/**
* - The link will be disabled. This sets `aria-disabled=true` and you can style this state by using the `_disabled` prop.
*/
disabled?: boolean | undefined;
/**
* - A callback called when the link is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Defines the visual style of the link: 'default' for standalone links or navigation items, 'inline' for inline links within text or paragraphs, 'subtle' for links with reduced visual emphasis but still interactive.
*/
variant?: "default" | "inline" | "subtle" | undefined;
};
/**
* @typedef {Object} LinkProps
* @property {React.ReactNode} [children] -
* @property {boolean} [disabled] - The link will be disabled. This sets `aria-disabled=true` and you can style this state by using the `_disabled` prop.
* @property {React.MouseEventHandler} [onClick] - A callback called when the link is clicked.
* @property {'default' | 'inline' | 'subtle'} [variant='default'] - Defines the visual style of the link: 'default' for standalone links or navigation items, 'inline' for inline links within text or paragraphs, 'subtle' for links with reduced visual emphasis but still interactive.
*/
/**
* @type {ForwardRefComponent<'a', LinkProps>}
*/
declare const Link: ForwardRefComponent<"a", LinkProps>;
type LinkButtonProps = {
/**
* -
*/
children?: React__default.ReactNode;
/**
* - If `true`, the link is displayed as disabled.
*/
disabled?: boolean | undefined;
/**
* - A callback called when the link button is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Defines the visual style of the link: 'default' for standalone links or navigation items, 'inline' for inline links within text or paragraphs, 'subtle' for links with reduced visual emphasis but still interactive.
*/
variant?: "default" | "inline" | "subtle" | undefined;
};
/**
* @typedef {Object} LinkButtonProps
* @property {React.ReactNode} [children] -
* @property {boolean} [disabled] - If `true`, the link is displayed as disabled.
* @property {React.MouseEventHandler} [onClick] - A callback called when the link button is clicked.
* @property {'default' | 'inline' | 'subtle'} [variant='default'] - Defines the visual style of the link: 'default' for standalone links or navigation items, 'inline' for inline links within text or paragraphs, 'subtle' for links with reduced visual emphasis but still interactive.
*/
/**
* @type {ForwardRefComponent<'button', LinkButtonProps>}
*/
declare const LinkButton: ForwardRefComponent<"button", LinkButtonProps>;
/**
* `List` renders a `ul` by default. Pass `as="ol"` for an ordered list.
*
* @type {ForwardRefComponent<'ul'>}
*/
declare const List: ForwardRefComponent<"ul">;
/**
* @type {ForwardRefComponent<'li'>}
*/
declare const ListItem: ForwardRefComponent<"li">;
type MarkProps = {
/**
* -
*/
children?: React__default.ReactNode;
/**
* - The variant to use. One of: 'highlight', 'emphasis', 'none'.
*/
variant?: "emphasis" | "none" | "highlight" | undefined;
};
/**
* @typedef {Object} MarkProps
* @property {React.ReactNode} [children] -
* @property {'highlight' | 'emphasis' | 'none'} [variant='none'] - The variant to use. One of: 'highlight', 'emphasis', 'none'.
*/
/**
* @type {ForwardRefComponent<'mark', MarkProps>}
*/
declare const Mark: ForwardRefComponent<"mark", MarkProps>;
type MenuProps = {
/**
* - The element to which the menu is attached.
*/
anchorEl?: HTMLElement | null | undefined;
/**
* - Whether to automatically select the first menu item when the menu is opened.
*/
autoSelect?: boolean | undefined;
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {
isOpen: boolean;
onClose: () => void;
onOpen: () => void;
onToggle: () => void;
placement: string;
}) => React__default.ReactNode);
/**
* - Whether to close the menu when the user clicks outside of the menu.
*/
closeOnBlur?: boolean | undefined;
/**
* - Whether to close the menu when the user selects a menu item.
*/
closeOnSelect?: boolean | undefined;
/**
* - The index of the menu item to be selected by default.
*/
defaultActiveIndex?: number | undefined;
/**
* - Whether the menu is open by default.
*/
defaultIsOpen?: boolean | undefined;
/**
* - Whether the menu is open.
*/
isOpen?: boolean | undefined;
/**
* - If `true`, sizes the menu to match the toggle's width on every update.
*/
matchWidth?: boolean | undefined;
/**
* - The skidding and distance of the menu.
*/
offset?: [number, number] | undefined;
/**
* - Callback when the menu is closed.
*/
onClose?: (() => void) | undefined;
/**
* - Callback when the menu is opened.
*/
onOpen?: (() => void) | undefined;
/**
* - If `true`, renders the menu in a portal.
*/
portalled?: boolean | undefined;
/**
* - The placement of the menu.
*/
placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
/**
* - The menu will return the focus to the trigger element when closing. Otherwise, it will leave focus unchanged.
*/
returnFocusOnClose?: boolean | undefined;
};
/**
* @typedef {Object} MenuProps
* @property {HTMLElement | null} [anchorEl] - The element to which the menu is attached.
* @property {boolean} [autoSelect=true] - Whether to automatically select the first menu item when the menu is opened.
* @property {React.ReactNode | ((context: { isOpen: boolean; onClose: () => void; onOpen: () => void; onToggle: () => void; placement: string }) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
* @property {boolean} [closeOnBlur=true] - Whether to close the menu when the user clicks outside of the menu.
* @property {boolean} [closeOnSelect=true] - Whether to close the menu when the user selects a menu item.
* @property {number} [defaultActiveIndex=-1] - The index of the menu item to be selected by default.
* @property {boolean} [defaultIsOpen=false] - Whether the menu is open by default.
* @property {boolean} [isOpen] - Whether the menu is open.
* @property {boolean} [matchWidth=false] - If `true`, sizes the menu to match the toggle's width on every update.
* @property {[number, number]} [offset=[0, 0]] - The skidding and distance of the menu.
* @property {() => void} [onClose] - Callback when the menu is closed.
* @property {() => void} [onOpen] - Callback when the menu is opened.
* @property {boolean} [portalled=false] - If `true`, renders the menu in a portal.
* @property {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'} [placement='bottom-start'] - The placement of the menu.
* @property {boolean} [returnFocusOnClose=true] - The menu will return the focus to the trigger element when closing. Otherwise, it will leave focus unchanged.
*/
/**
* @type {ForwardRefComponent<'div', MenuProps>}
*/
declare const Menu: ForwardRefComponent<"div", MenuProps>;
type MenuButtonProps = {
/**
* - The content of the menu button.
*/
children?: React__default.ReactNode;
/**
* - Whether the menu button is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the menu button is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Callback when the user presses a key.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
};
/**
* @typedef {Object} MenuButtonProps
* @property {React.ReactNode} [children] - The content of the menu button.
* @property {boolean} [disabled] - Whether the menu button is disabled.
* @property {React.MouseEventHandler} [onClick] - Callback when the menu button is clicked.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when the user presses a key.
*/
/**
* @type {ForwardRefComponent<'button', MenuButtonProps>}
*/
declare const MenuButton: ForwardRefComponent<"button", MenuButtonProps>;
type MenuContentProps = {
/**
* - The content of the menu.
*/
children?: React__default.ReactNode;
/**
* - **Deprecated.** Use `slots.popper` instead. The component used for the popover.
*/
PopperComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.popper` instead. Props applied to the Popper component.
*/
PopperProps?: object | undefined;
/**
* - Props forwarded to internal slots. `slotProps.popper` / `slotProps.transition` are applied to the Popper / transition elements.
*/
slotProps?: {
popper?: object;
transition?: object;
} | undefined;
/**
* - Slot components. `slots.popper` replaces the default `Popper`; `slots.transition` replaces the default `Collapse`.
*/
slots?: {
popper?: React__default.ElementType;
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} MenuContentProps
* @property {React.ReactNode} [children] - The content of the menu.
* @property {React.ElementType} [PopperComponent=Popper] - **Deprecated.** Use `slots.popper` instead. The component used for the popover.
* @property {object} [PopperProps] - **Deprecated.** Use `slotProps.popper` instead. Props applied to the Popper component.
* @property {{ popper?: object; transition?: object }} [slotProps] - Props forwarded to internal slots. `slotProps.popper` / `slotProps.transition` are applied to the Popper / transition elements.
* @property {{ popper?: React.ElementType; transition?: React.ElementType }} [slots] - Slot components. `slots.popper` replaces the default `Popper`; `slots.transition` replaces the default `Collapse`.
* @property {React.ElementType} [TransitionComponent=Collapse] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', MenuContentProps>}
*/
declare const MenuContent: ForwardRefComponent<"div", MenuContentProps>;
type MenuDividerProps = {
/**
* - The content of the menu divider.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} MenuDividerProps
* @property {React.ReactNode} [children] - The content of the menu divider.
*/
/**
* @type {ForwardRefComponent<'hr', MenuDividerProps>}
*/
declare const MenuDivider: ForwardRefComponent<"hr", MenuDividerProps>;
type MenuGroupProps = {
/**
* - The menu items to be grouped.
*/
children?: React__default.ReactNode;
/**
* - The title of the menu group.
*/
title?: string | undefined;
};
/**
* @typedef {Object} MenuGroupProps
* @property {React.ReactNode} [children] - The menu items to be grouped.
* @property {string} [title] - The title of the menu group.
*/
/**
* @type {ForwardRefComponent<'div', MenuGroupProps>}
*/
declare const MenuGroup: ForwardRefComponent<"div", MenuGroupProps>;
type MenuItemProps = {
/**
* - Whether the menu item is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the menu item is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Callback when the user presses a key.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
};
/**
* @typedef {Object} MenuItemProps
* @property {boolean} [disabled] - Whether the menu item is disabled.
* @property {React.MouseEventHandler} [onClick] - Callback when the menu item is clicked.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when the user presses a key.
*/
/**
* @type {ForwardRefComponent<'button', MenuItemProps>}
*/
declare const MenuItem: ForwardRefComponent<"button", MenuItemProps>;
type MenuListProps = {
/**
* - The component used for the popover.
*/
PopperComponent?: React__default.ElementType | undefined;
/**
* - Props applied to the Popper component.
*/
PopperProps?: object | undefined;
/**
* - The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - Props applied to the Transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
/**
* - Whether to perform the enter transition when it first mounts.
*/
appear?: boolean | undefined;
/**
* - The menu items to be displayed.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} MenuListProps
* @property {React.ElementType} [PopperComponent=Popper] - The component used for the popover.
* @property {object} [PopperProps] - Props applied to the Popper component.
* @property {React.ElementType} [TransitionComponent=Collapse] - The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - Props applied to the Transition element.
* @property {boolean} [TransitionProps.appear=true] - Whether to perform the enter transition when it first mounts.
* @property {React.ReactNode} [children] - The menu items to be displayed.
*/
/**
* @type {ForwardRefComponent<'div', MenuListProps>}
*/
declare const MenuList: ForwardRefComponent<"div", MenuListProps>;
type MenuToggleUserProps = {
/**
* - Whether the toggle element is disabled. Merged (OR) with the `disabled` prop to set `disabled`/`aria-disabled`; menu activation is gated by the internal handlers when the `disabled` prop is set.
*/
disabled?: boolean | undefined;
/**
* - Called before the internal click handler; the chain stops if the event is default-prevented.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Called before the internal keydown handler; the chain stops if the event is default-prevented.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
/**
* - Any other keys are spread first, so menu wiring (`id`, `ref`, `role`, `tabIndex`, `aria-*`) and component props take precedence.
*/
otherKeys?: object | undefined;
};
type MenuToggleContext = {
/**
* - Props to spread onto a custom toggle element. `disabled` merges (OR) with the `disabled` prop for `disabled`/`aria-disabled`; `onClick` and `onKeyDown` chain with the internal handlers; other keys are spread first and never override the menu wiring.
*/
getMenuToggleProps: (userProps?: MenuToggleUserProps & Record) => React__default.HTMLAttributes & {
ref: React__default.RefCallback;
};
/**
* - Alias of `getMenuToggleProps`.
*/
getToggleProps: (userProps?: MenuToggleUserProps & Record) => React__default.HTMLAttributes & {
ref: React__default.RefCallback;
};
};
type MenuToggleProps = {
/**
* - The content of the menu toggle or a function that receives `{ getMenuToggleProps, getToggleProps }`.
*/
children?: React__default.ReactNode | ((context: MenuToggleContext) => React__default.ReactNode);
/**
* - Whether the menu toggle is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the menu toggle is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Callback when the user presses a key.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
};
/**
* @typedef {Object} MenuToggleUserProps
* @property {boolean} [disabled] - Whether the toggle element is disabled. Merged (OR) with the `disabled` prop to set `disabled`/`aria-disabled`; menu activation is gated by the internal handlers when the `disabled` prop is set.
* @property {React.MouseEventHandler} [onClick] - Called before the internal click handler; the chain stops if the event is default-prevented.
* @property {React.KeyboardEventHandler} [onKeyDown] - Called before the internal keydown handler; the chain stops if the event is default-prevented.
* @property {object} [otherKeys] - Any other keys are spread first, so menu wiring (`id`, `ref`, `role`, `tabIndex`, `aria-*`) and component props take precedence.
*/
/**
* @typedef {Object} MenuToggleContext
* @property {(userProps?: MenuToggleUserProps & Record) => React.HTMLAttributes & { ref: React.RefCallback }} getMenuToggleProps - Props to spread onto a custom toggle element. `disabled` merges (OR) with the `disabled` prop for `disabled`/`aria-disabled`; `onClick` and `onKeyDown` chain with the internal handlers; other keys are spread first and never override the menu wiring.
* @property {(userProps?: MenuToggleUserProps & Record) => React.HTMLAttributes & { ref: React.RefCallback }} getToggleProps - Alias of `getMenuToggleProps`.
*/
/**
* @typedef {Object} MenuToggleProps
* @property {React.ReactNode | ((context: MenuToggleContext) => React.ReactNode)} [children] - The content of the menu toggle or a function that receives `{ getMenuToggleProps, getToggleProps }`.
* @property {boolean} [disabled] - Whether the menu toggle is disabled.
* @property {React.MouseEventHandler} [onClick] - Callback when the menu toggle is clicked.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when the user presses a key.
*/
/**
* @type {ForwardRefComponent<'button', MenuToggleProps>}
*/
declare const MenuToggle: ForwardRefComponent<"button", MenuToggleProps>;
type MenuToggleIconProps = {
/**
* - By default the child component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to true.
*/
appear?: boolean | undefined;
/**
* - A function child can be used instead of a React element. This function is called with the current transition state ('entering', 'entered', 'exiting', 'exited'), ref, style, and context specific props for a component.
*/
children?: React__default.ReactNode | ((state: string, props: React__default.HTMLAttributes & {
ref: React__default.RefCallback;
style: React__default.CSSProperties;
}) => React__default.ReactNode);
/**
* - Whether the menu toggle icon is disabled.
*/
disabled?: boolean | undefined;
/**
* - The timing function that describes how intermediate values are calculated during a transition. You may specify a single timing function for all transitions, or individually with an object.
*/
easing?: string | {
enter?: string;
exit?: string;
} | undefined;
/**
* - If `true`, the component will transition in.
*/
in?: boolean | undefined;
/**
* - If `true`, it will "lazy mount" the component on the first `in={true}`. After the first enter transition the component will stay mounted, even on the 'exited' state, unless you also specify `unmountOnExit`. By default the child component is mounted immediately along with the parent transition component.
*/
mountOnEnter?: boolean | undefined;
/**
* - The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
*/
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
} | undefined;
/**
* - If `true`, it will unmount the child component when `in={false}` and the animation has finished. By default the child component stays mounted after it reaches the 'exited' state.
*/
unmountOnExit?: boolean | undefined;
};
/**
* @typedef {Object} MenuToggleIconProps
* @property {boolean} [appear=false] - By default the child component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to true.
* @property {React.ReactNode | ((state: string, props: React.HTMLAttributes & { ref: React.RefCallback; style: React.CSSProperties }) => React.ReactNode)} [children] - A function child can be used instead of a React element. This function is called with the current transition state ('entering', 'entered', 'exiting', 'exited'), ref, style, and context specific props for a component.
* @property {boolean} [disabled] - Whether the menu toggle icon is disabled.
* @property {string | { enter?: string, exit?: string }} [easing] - The timing function that describes how intermediate values are calculated during a transition. You may specify a single timing function for all transitions, or individually with an object.
* @property {boolean} [in] - If `true`, the component will transition in.
* @property {boolean} [mountOnEnter] - If `true`, it will "lazy mount" the component on the first `in={true}`. After the first enter transition the component will stay mounted, even on the 'exited' state, unless you also specify `unmountOnExit`. By default the child component is mounted immediately along with the parent transition component.
* @property {number | { appear?: number, enter?: number, exit?: number }} [timeout] - The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
* @property {boolean} [unmountOnExit] - If `true`, it will unmount the child component when `in={false}` and the animation has finished. By default the child component stays mounted after it reaches the 'exited' state.
*/
/**
* @type {ForwardRefComponent<'div', MenuToggleIconProps>}
*/
declare const MenuToggleIcon: ForwardRefComponent<"div", MenuToggleIconProps>;
type SubmenuProps = {
/**
* - The content of the submenu.
*/
children?: React__default.ReactNode;
/**
* - Whether the submenu is open by default.
*/
defaultIsOpen?: boolean | undefined;
/**
* - Whether the submenu is open.
*/
isOpen?: boolean | undefined;
/**
* - The skidding and distance of the menu.
*/
offset?: [number, number] | undefined;
/**
* - Callback when the submenu is closed.
*/
onClose?: (() => void) | undefined;
/**
* - Callback when the submenu is opened.
*/
onOpen?: (() => void) | undefined;
/**
* - If `true`, renders the submenu in a portal.
*/
portalled?: boolean | undefined;
/**
* - The placement of the submenu. One of: 'right-start', 'right-end', 'left-start', 'left-end'
*/
placement?: string | undefined;
};
/**
* @typedef {Object} SubmenuProps
* @property {React.ReactNode} [children] - The content of the submenu.
* @property {boolean} [defaultIsOpen=false] - Whether the submenu is open by default.
* @property {boolean} [isOpen] - Whether the submenu is open.
* @property {[number, number]} [offset=[0, 0]] - The skidding and distance of the menu.
* @property {() => void} [onClose] - Callback when the submenu is closed.
* @property {() => void} [onOpen] - Callback when the submenu is opened.
* @property {boolean} [portalled=false] - If `true`, renders the submenu in a portal.
* @property {string} [placement='right-start'] - The placement of the submenu. One of: 'right-start', 'right-end', 'left-start', 'left-end'
*/
/**
* @type {ForwardRefComponent<'div', SubmenuProps>}
*/
declare const Submenu: ForwardRefComponent<"div", SubmenuProps>;
type SubmenuContentProps = {
/**
* - The content of the submenu.
*/
children?: React__default.ReactNode;
/**
* - **Deprecated.** Use `slots.popper` instead. The component used for the popover.
*/
PopperComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.popper` instead. Props applied to the Popper component.
*/
PopperProps?: object | undefined;
/**
* - Props forwarded to internal slots. `slotProps.popper` / `slotProps.transition` are applied to the Popper / transition elements.
*/
slotProps?: {
popper?: object;
transition?: object;
} | undefined;
/**
* - Slot components. `slots.popper` replaces the default `Popper`; `slots.transition` replaces the default `Collapse`.
*/
slots?: {
popper?: React__default.ElementType;
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} SubmenuContentProps
* @property {React.ReactNode} [children] - The content of the submenu.
* @property {React.ElementType} [PopperComponent=Popper] - **Deprecated.** Use `slots.popper` instead. The component used for the popover.
* @property {object} [PopperProps] - **Deprecated.** Use `slotProps.popper` instead. Props applied to the Popper component.
* @property {{ popper?: object; transition?: object }} [slotProps] - Props forwarded to internal slots. `slotProps.popper` / `slotProps.transition` are applied to the Popper / transition elements.
* @property {{ popper?: React.ElementType; transition?: React.ElementType }} [slots] - Slot components. `slots.popper` replaces the default `Popper`; `slots.transition` replaces the default `Collapse`.
* @property {React.ElementType} [TransitionComponent=Collapse] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', SubmenuContentProps>}
*/
declare const SubmenuContent: ForwardRefComponent<"div", SubmenuContentProps>;
type SubmenuListProps = {
/**
* - The submenu items to be displayed.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} SubmenuListProps
* @property {React.ReactNode} [children] - The submenu items to be displayed.
*/
/**
* @type {ForwardRefComponent<'div', SubmenuListProps>}
*/
declare const SubmenuList: ForwardRefComponent<"div", SubmenuListProps>;
type SubmenuToggleProps = {
/**
* - Content or render function.
*/
children?: React__default.ReactNode | ((context: {
getSubmenuToggleProps: () => React__default.HTMLAttributes & {
ref: React__default.RefCallback;
};
}) => React__default.ReactNode);
/**
* - If `true`, the submenu toggle is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the submenu toggle receives focus.
*/
onFocus?: React__default.FocusEventHandler | undefined;
/**
* - Callback when a key is pressed.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
/**
* - Callback when mouse enters the submenu toggle.
*/
onMouseEnter?: React__default.MouseEventHandler | undefined;
/**
* - Callback when mouse leaves the submenu toggle.
*/
onMouseLeave?: React__default.MouseEventHandler | undefined;
};
/**
* @typedef {Object} SubmenuToggleProps
* @property {React.ReactNode | ((context: { getSubmenuToggleProps: () => React.HTMLAttributes & { ref: React.RefCallback } }) => React.ReactNode)} [children] - Content or render function.
* @property {boolean} [disabled] - If `true`, the submenu toggle is disabled.
* @property {React.FocusEventHandler} [onFocus] - Callback when the submenu toggle receives focus.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when a key is pressed.
* @property {React.MouseEventHandler} [onMouseEnter] - Callback when mouse enters the submenu toggle.
* @property {React.MouseEventHandler} [onMouseLeave] - Callback when mouse leaves the submenu toggle.
*/
/**
* @type {ForwardRefComponent<'div', SubmenuToggleProps>}
* @deprecated SubmenuToggle is deprecated and will be removed in a future version.
* Use SubmenuTrigger instead, which combines MenuItem functionality with submenu trigger behavior.
*
* Migration example:
* Before:
*
* Submenu
*
*
* After:
* Submenu
*/
declare const SubmenuToggle: ForwardRefComponent<"div", SubmenuToggleProps>;
type SubmenuTriggerProps = {
/**
* - The content of the submenu trigger.
*/
children?: React__default.ReactNode;
/**
* - Whether the submenu trigger is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when the submenu trigger is clicked.
*/
onClick?: React__default.MouseEventHandler | undefined;
/**
* - Callback when a key is pressed.
*/
onKeyDown?: React__default.KeyboardEventHandler | undefined;
};
/**
* @typedef {Object} SubmenuTriggerProps
* @property {React.ReactNode} [children] - The content of the submenu trigger.
* @property {boolean} [disabled] - Whether the submenu trigger is disabled.
* @property {React.MouseEventHandler} [onClick] - Callback when the submenu trigger is clicked.
* @property {React.KeyboardEventHandler} [onKeyDown] - Callback when a key is pressed.
*/
/**
* @type {ForwardRefComponent<'button', SubmenuTriggerProps>}
*/
declare const SubmenuTrigger: ForwardRefComponent<"button", SubmenuTriggerProps>;
type MenuContextValue = {
/**
* - Whether to auto-select the first item on open.
*/
autoSelect: boolean;
/**
* - Whether the menu closes on blur.
*/
closeOnBlur: boolean;
/**
* - Whether the menu closes on item selection.
*/
closeOnSelect: boolean;
/**
* - The direction of the menu ('up' or 'down').
*/
direction?: string | undefined;
/**
* - Focus on the first menu item.
*/
focusOnFirstItem: () => void;
/**
* - Focus on the last menu item.
*/
focusOnLastItem: () => void;
/**
* - Focus on the next menu item.
*/
focusOnNextItem: () => void;
/**
* - Focus on the previous menu item.
*/
focusOnPreviousItem: () => void;
/**
* - Whether the menu is open.
*/
isOpen: boolean;
/**
* - The skidding and distance of the menu.
*/
offset?: [number, number] | undefined;
/**
* - Callback to close the menu.
*/
onClose: () => void;
/**
* - Callback to open the menu.
*/
onOpen: () => void;
/**
* - Callback to toggle the menu.
*/
onToggle: () => void;
/**
* - The placement of the menu.
*/
placement: string;
/**
* - The id of the menu.
*/
menuId: string;
/**
* - Ref to the menu content element.
*/
menuContentRef: React.MutableRefObject;
/**
* - The id of the menu toggle.
*/
menuToggleId: string;
/**
* - Ref to the menu toggle element.
*/
menuToggleRef: React.MutableRefObject;
/**
* - Refs to submenu content elements.
*/
submenuContentRefs: React.MutableRefObject>;
};
/**
* @typedef {Object} MenuContextValue
* @property {boolean} autoSelect - Whether to auto-select the first item on open.
* @property {boolean} closeOnBlur - Whether the menu closes on blur.
* @property {boolean} closeOnSelect - Whether the menu closes on item selection.
* @property {string} [direction] - The direction of the menu ('up' or 'down').
* @property {() => void} focusOnFirstItem - Focus on the first menu item.
* @property {() => void} focusOnLastItem - Focus on the last menu item.
* @property {() => void} focusOnNextItem - Focus on the next menu item.
* @property {() => void} focusOnPreviousItem - Focus on the previous menu item.
* @property {boolean} isOpen - Whether the menu is open.
* @property {[number, number]} [offset] - The skidding and distance of the menu.
* @property {() => void} onClose - Callback to close the menu.
* @property {() => void} onOpen - Callback to open the menu.
* @property {() => void} onToggle - Callback to toggle the menu.
* @property {string} placement - The placement of the menu.
* @property {string} menuId - The id of the menu.
* @property {React.MutableRefObject} menuContentRef - Ref to the menu content element.
* @property {string} menuToggleId - The id of the menu toggle.
* @property {React.MutableRefObject} menuToggleRef - Ref to the menu toggle element.
* @property {React.MutableRefObject>} submenuContentRefs - Refs to submenu content elements.
*/
/**
* A hook to access the menu context.
* @returns {MenuContextValue | undefined} The menu context, or `undefined` if not within a `Menu`.
*/
declare function useMenu(): MenuContextValue | undefined;
type SubmenuContextValue = {
/**
* - Focus on the first submenu item.
*/
focusOnFirstItem: () => void;
/**
* - Focus on the last submenu item.
*/
focusOnLastItem: () => void;
/**
* - Focus on the next submenu item.
*/
focusOnNextItem: () => void;
/**
* - Focus on the previous submenu item.
*/
focusOnPreviousItem: () => void;
/**
* - Focus on the submenu trigger.
*/
focusOnSubmenuTrigger: () => void;
/**
* - Whether hovering submenu content.
*/
isHoveringSubmenuContentRef: React.MutableRefObject;
/**
* - Whether hovering submenu trigger.
*/
isHoveringSubmenuTriggerRef: React.MutableRefObject;
/**
* - Whether the submenu is open.
*/
isOpen: boolean;
/**
* - The skidding and distance of the submenu.
*/
offset?: [number, number] | undefined;
/**
* - Callback to close the submenu.
*/
onClose: () => void;
/**
* - Callback to open the submenu.
*/
onOpen: () => void;
/**
* - The placement of the submenu.
*/
placement: string;
/**
* - The id of the submenu.
*/
submenuId: string;
/**
* - Ref to the submenu content element.
*/
submenuContentRef: React.MutableRefObject;
/**
* - The id of the submenu trigger.
*/
submenuTriggerId: string;
/**
* - Ref to the submenu trigger element.
*/
submenuTriggerRef: React.MutableRefObject;
};
/**
* @typedef {Object} SubmenuContextValue
* @property {() => void} focusOnFirstItem - Focus on the first submenu item.
* @property {() => void} focusOnLastItem - Focus on the last submenu item.
* @property {() => void} focusOnNextItem - Focus on the next submenu item.
* @property {() => void} focusOnPreviousItem - Focus on the previous submenu item.
* @property {() => void} focusOnSubmenuTrigger - Focus on the submenu trigger.
* @property {React.MutableRefObject} isHoveringSubmenuContentRef - Whether hovering submenu content.
* @property {React.MutableRefObject} isHoveringSubmenuTriggerRef - Whether hovering submenu trigger.
* @property {boolean} isOpen - Whether the submenu is open.
* @property {[number, number]} [offset] - The skidding and distance of the submenu.
* @property {() => void} onClose - Callback to close the submenu.
* @property {() => void} onOpen - Callback to open the submenu.
* @property {string} placement - The placement of the submenu.
* @property {string} submenuId - The id of the submenu.
* @property {React.MutableRefObject} submenuContentRef - Ref to the submenu content element.
* @property {string} submenuTriggerId - The id of the submenu trigger.
* @property {React.MutableRefObject} submenuTriggerRef - Ref to the submenu trigger element.
*/
/**
* A hook to access the submenu context.
* @returns {SubmenuContextValue | undefined} The submenu context, or `undefined` if not within a `Submenu`.
*/
declare function useSubmenu(): SubmenuContextValue | undefined;
type ModalProps = {
/**
* - The modal will automatically set focus on the first focusable element inside the modal when it is opened. ⚠️ This only works if `initialFocusRef` is not defined and `ensureFocus` is set to `true`.
*/
autoFocus?: boolean | undefined;
/**
* - A function child can be used intead of a React element. This function is called with the context object.
*/
children?: React__default.ReactNode | ((context: {
autoFocus: boolean;
closeOnEsc: boolean;
closeOnInteractOutside: boolean;
ensureFocus: boolean;
finalFocusRef?: React__default.RefObject;
initialFocusRef?: React__default.RefObject;
isClosable: boolean;
isOpen: boolean;
onClose?: () => void;
onInteractOutside?: (event: Event) => void;
scrollBehavior: "inside" | "outside";
size: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
}) => React__default.ReactNode);
/**
* - Closes the modal when the `Escape` key is pressed.
*/
closeOnEsc?: boolean | undefined;
/**
* - Closes the modal when interacting outside the modal content.
*/
closeOnInteractOutside?: boolean | undefined;
/**
* - Ensures that the user's focus remains within the modal when it is open, preventing them from interacting with elements outside the modal.
*/
ensureFocus?: boolean | undefined;
/**
* - The `ref` of the element that should receive focus when the modal closes. ⚠️ This only works if `ensureFocus` is set to `true`.
*/
finalFocusRef?: React__default.RefObject | undefined;
/**
* - The `ref` of the element that should receive focus when the modal opens. ⚠️ This only works if `ensureFocus` is set to `true`.
*/
initialFocusRef?: React__default.RefObject | undefined;
/**
* - A close button will appear on the right side.
*/
isClosable?: boolean | undefined;
/**
* - The modal is shown.
*/
isOpen?: boolean | undefined;
/**
* - Callback fired when the modal closes.
*/
onClose?: (() => void) | undefined;
/**
* - Callback fired when interacting outside the modal content. Call `event.preventDefault()` to prevent the modal from closing.
*/
onInteractOutside?: ((event: Event) => void) | undefined;
/**
* - The focus will be restored to the element that was focused on when the modal was initially opened. ⚠️ This only works if `ensureFocus` is set to `true`.
*/
returnFocusOnClose?: boolean | undefined;
/**
* - Change the size of the modal.
*/
size?: "sm" | "md" | "lg" | "auto" | "full" | "xs" | "xl" | undefined;
/**
* - Control the scroll behavior of the modal if the content overflows.
*/
scrollBehavior?: "inside" | "outside" | undefined;
/**
* - Props to be passed to the Portal component.
*/
portalProps?: {
containerRef?: React__default.RefObject;
appendToParentPortal?: boolean;
} | undefined;
};
/**
* @typedef {Object} ModalProps
* @property {boolean} [autoFocus=false] - The modal will automatically set focus on the first focusable element inside the modal when it is opened. ⚠️ This only works if `initialFocusRef` is not defined and `ensureFocus` is set to `true`.
* @property {React.ReactNode | ((context: { autoFocus: boolean; closeOnEsc: boolean; closeOnInteractOutside: boolean; ensureFocus: boolean; finalFocusRef?: React.RefObject; initialFocusRef?: React.RefObject; isClosable: boolean; isOpen: boolean; onClose?: () => void; onInteractOutside?: (event: Event) => void; scrollBehavior: 'inside' | 'outside'; size: 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' }) => React.ReactNode)} [children] - A function child can be used intead of a React element. This function is called with the context object.
* @property {boolean} [closeOnEsc=false] - Closes the modal when the `Escape` key is pressed.
* @property {boolean} [closeOnInteractOutside=false] - Closes the modal when interacting outside the modal content.
* @property {boolean} [ensureFocus=false] - Ensures that the user's focus remains within the modal when it is open, preventing them from interacting with elements outside the modal.
* @property {React.RefObject} [finalFocusRef] - The `ref` of the element that should receive focus when the modal closes. ⚠️ This only works if `ensureFocus` is set to `true`.
* @property {React.RefObject} [initialFocusRef] - The `ref` of the element that should receive focus when the modal opens. ⚠️ This only works if `ensureFocus` is set to `true`.
* @property {boolean} [isClosable=false] - A close button will appear on the right side.
* @property {boolean} [isOpen=false] - The modal is shown.
* @property {() => void} [onClose] - Callback fired when the modal closes.
* @property {(event: Event) => void} [onInteractOutside] - Callback fired when interacting outside the modal content. Call `event.preventDefault()` to prevent the modal from closing.
* @property {boolean} [returnFocusOnClose=true] - The focus will be restored to the element that was focused on when the modal was initially opened. ⚠️ This only works if `ensureFocus` is set to `true`.
* @property {'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'} [size='auto'] - Change the size of the modal.
* @property {'inside' | 'outside'} [scrollBehavior='inside'] - Control the scroll behavior of the modal if the content overflows.
* @property {{ containerRef?: React.RefObject; appendToParentPortal?: boolean }} [portalProps] - Props to be passed to the Portal component.
*/
/**
* @type {ForwardRefComponent<'div', ModalProps>}
*/
declare const Modal: ForwardRefComponent<"div", ModalProps>;
type ModalBodyProps = {
/**
* - The content of the modal body.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} ModalBodyProps
* @property {React.ReactNode} [children] - The content of the modal body.
*/
/**
* @type {ForwardRefComponent<'div', ModalBodyProps>}
*/
declare const ModalBody: ForwardRefComponent<"div", ModalBodyProps>;
type ModalCloseButtonProps = {
/**
* - The content of the close button.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} ModalCloseButtonProps
* @property {React.ReactNode} [children] - The content of the close button.
*/
/**
* @type {ForwardRefComponent<'button', ModalCloseButtonProps>}
*/
declare const ModalCloseButton: ForwardRefComponent<"button", ModalCloseButtonProps>;
type ModalContainerProps = {
/**
* - The content of the modal container.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} ModalContainerProps
* @property {React.ReactNode} [children] - The content of the modal container.
*/
/**
* @type {ForwardRefComponent<'div', ModalContainerProps>}
*/
declare const ModalContainer: ForwardRefComponent<"div", ModalContainerProps>;
type ModalContentProps = {
/**
* - The content of the modal.
*/
children?: React__default.ReactNode;
/**
* - Props forwarded to internal slots. `slotProps.closeButton` / `slotProps.transition` are applied to the close button / transition elements.
*/
slotProps?: {
closeButton?: object;
transition?: object;
} | undefined;
/**
* - Slot components. `slots.closeButton` replaces the default `ModalCloseButton`; `slots.transition` replaces the default `Fade`.
*/
slots?: {
closeButton?: React__default.ElementType;
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} ModalContentProps
* @property {React.ReactNode} [children] - The content of the modal.
* @property {{ closeButton?: object; transition?: object }} [slotProps] - Props forwarded to internal slots. `slotProps.closeButton` / `slotProps.transition` are applied to the close button / transition elements.
* @property {{ closeButton?: React.ElementType; transition?: React.ElementType }} [slots] - Slot components. `slots.closeButton` replaces the default `ModalCloseButton`; `slots.transition` replaces the default `Fade`.
* @property {React.ElementType} [TransitionComponent=Fade] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', ModalContentProps>}
*/
declare const ModalContent: ForwardRefComponent<"div", ModalContentProps>;
type ModalFooterProps = {
/**
* - The content of the modal footer.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} ModalFooterProps
* @property {React.ReactNode} [children] - The content of the modal footer.
*/
/**
* @type {ForwardRefComponent<'div', ModalFooterProps>}
*/
declare const ModalFooter: ForwardRefComponent<"div", ModalFooterProps>;
type ModalHeaderProps = {
/**
* - The content of the modal header.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} ModalHeaderProps
* @property {React.ReactNode} [children] - The content of the modal header.
*/
/**
* @type {ForwardRefComponent<'div', ModalHeaderProps>}
*/
declare const ModalHeader: ForwardRefComponent<"div", ModalHeaderProps>;
type ModalOverlayProps = {
/**
* - Props forwarded to the internal transition slot.
*/
slotProps?: {
transition?: object;
} | undefined;
/**
* - Slot components. `slots.transition` replaces the default `Fade`.
*/
slots?: {
transition?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
TransitionProps?: {
appear?: boolean;
timeout?: number | {
appear?: number;
enter?: number;
exit?: number;
};
} | undefined;
};
/**
* @typedef {Object} ModalOverlayProps
* @property {{ transition?: object }} [slotProps] - Props forwarded to the internal transition slot.
* @property {{ transition?: React.ElementType }} [slots] - Slot components. `slots.transition` replaces the default `Fade`.
* @property {React.ElementType} [TransitionComponent=Fade] - **Deprecated.** Use `slots.transition` instead. The component used for the transition.
* @property {{ appear?: boolean; timeout?: number | { appear?: number; enter?: number; exit?: number } }} [TransitionProps] - **Deprecated.** Use `slotProps.transition` instead. Props applied to the transition element.
*/
/**
* @type {ForwardRefComponent<'div', ModalOverlayProps>}
*/
declare const ModalOverlay: ForwardRefComponent<"div", ModalOverlayProps>;
type ModalContextValue = {
/**
* - Whether the modal automatically sets focus on the first focusable element.
*/
autoFocus: boolean;
/**
* - Whether the modal closes on Escape key.
*/
closeOnEsc: boolean;
/**
* - Whether the modal closes on outside interaction.
*/
closeOnInteractOutside: boolean;
/**
* - Whether focus is trapped within the modal.
*/
ensureFocus: boolean;
/**
* - The ref of the element to focus on close.
*/
finalFocusRef?: React$1.RefObject | undefined;
/**
* - The ref of the element to focus on open.
*/
initialFocusRef?: React$1.RefObject | undefined;
/**
* - Whether the close button is shown.
*/
isClosable: boolean;
/**
* - Whether the modal is open.
*/
isOpen: boolean;
/**
* - Callback fired when the modal closes.
*/
onClose?: (() => void) | undefined;
/**
* - Callback fired when interacting outside the modal.
*/
onInteractOutside?: ((event: Event) => void) | undefined;
/**
* - The scroll behavior of the modal.
*/
scrollBehavior: "inside" | "outside";
/**
* - The size of the modal.
*/
size: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
/**
* - Internal use only.
*/
containerRef: React.RefObject;
/**
* - Internal use only.
*/
contentRef: React.RefObject;
/**
* - Internal use only.
*/
placement: "center";
};
/**
* @typedef {Object} ModalContextValue
* @property {boolean} autoFocus - Whether the modal automatically sets focus on the first focusable element.
* @property {boolean} closeOnEsc - Whether the modal closes on Escape key.
* @property {boolean} closeOnInteractOutside - Whether the modal closes on outside interaction.
* @property {boolean} ensureFocus - Whether focus is trapped within the modal.
* @property {React.RefObject} [finalFocusRef] - The ref of the element to focus on close.
* @property {React.RefObject} [initialFocusRef] - The ref of the element to focus on open.
* @property {boolean} isClosable - Whether the close button is shown.
* @property {boolean} isOpen - Whether the modal is open.
* @property {() => void} [onClose] - Callback fired when the modal closes.
* @property {(event: Event) => void} [onInteractOutside] - Callback fired when interacting outside the modal.
* @property {'inside' | 'outside'} scrollBehavior - The scroll behavior of the modal.
* @property {'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'} size - The size of the modal.
* @property {React.RefObject} containerRef - Internal use only.
* @property {React.RefObject} contentRef - Internal use only.
* @property {'center'} placement - Internal use only.
*/
/**
* A hook to access the modal context.
* @returns {ModalContextValue | undefined} The modal context, or `undefined` if not within a `Modal`.
*/
declare function useModal(): ModalContextValue | undefined;
type PaginationProps = {
/**
* - Number of always visible pages at the beginning and end.
*/
boundaryCount?: number | undefined;
/**
* - Total number of pages.
*/
count?: number | undefined;
/**
* - The page selected by default when the component is uncontrolled.
*/
defaultPage?: number | undefined;
/**
* - If `true`, the component is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback fired when the page is changed. Signature: `function(page: number) => void`
*/
onChange?: ((page: number) => void) | undefined;
/**
* - The current page.
*/
page?: number | undefined;
/**
* - Render the item. Signature: `function(props) => ReactNode`
*/
renderItem?: ((props: {
type: "page" | "first" | "last" | "previous" | "next" | "start-ellipsis" | "end-ellipsis";
page: number;
isSelected: boolean;
onClick: React__default.MouseEventHandler;
}) => React__default.ReactNode) | undefined;
/**
* - Number of always visible pages before and after the current page.
*/
siblingCount?: number | undefined;
/**
* - Whether to render the first-page, last-page, previous-page, and next-page buttons.
*/
slot?: {
first?: boolean;
last?: boolean;
previous?: boolean;
next?: boolean;
} | undefined;
};
/**
* @typedef {Object} PaginationProps
* @property {number} [boundaryCount=1] - Number of always visible pages at the beginning and end.
* @property {number} [count=1] - Total number of pages.
* @property {number} [defaultPage=1] - The page selected by default when the component is uncontrolled.
* @property {boolean} [disabled=false] - If `true`, the component is disabled.
* @property {(page: number) => void} [onChange] - Callback fired when the page is changed. Signature: `function(page: number) => void`
* @property {number} [page] - The current page.
* @property {(props: { type: 'page' | 'first' | 'last' | 'previous' | 'next' | 'start-ellipsis' | 'end-ellipsis'; page: number; isSelected: boolean; onClick: React.MouseEventHandler }) => React.ReactNode} [renderItem] - Render the item. Signature: `function(props) => ReactNode`
* @property {number} [siblingCount=1] - Number of always visible pages before and after the current page.
* @property {{ first?: boolean, last?: boolean, previous?: boolean, next?: boolean }} [slot] - Whether to render the first-page, last-page, previous-page, and next-page buttons.
*/
/**
* @type {ForwardRefComponent<'div', PaginationProps>}
*/
declare const Pagination: ForwardRefComponent<"div", PaginationProps>;
type PaginationItemProps = {
/**
* - If `true`, the component is disabled.
*/
disabled?: boolean | undefined;
/**
* - The current page number.
*/
page?: number | undefined;
/**
* - If `true`, the pagination item is selected.
*/
selected?: boolean | undefined;
/**
* - Custom content for different pagination item types.
*/
slot?: {
'start-ellipsis'?: React__default.ReactNode;
'end-ellipsis'?: React__default.ReactNode;
first?: React__default.ReactNode;
previous?: React__default.ReactNode;
next?: React__default.ReactNode;
last?: React__default.ReactNode;
} | undefined;
/**
* - The type of the pagination item.
*/
type?: "page" | "first" | "last" | "previous" | "next" | "start-ellipsis" | "end-ellipsis" | undefined;
/**
* - The variant to use.
*/
variant?: string | undefined;
};
/**
* @typedef {Object} PaginationItemProps
* @property {boolean} [disabled=false] - If `true`, the component is disabled.
* @property {number} [page] - The current page number.
* @property {boolean} [selected=false] - If `true`, the pagination item is selected.
* @property {{ 'start-ellipsis'?: React.ReactNode, 'end-ellipsis'?: React.ReactNode, first?: React.ReactNode, previous?: React.ReactNode, next?: React.ReactNode, last?: React.ReactNode }} [slot] - Custom content for different pagination item types.
* @property {'page' | 'first' | 'last' | 'previous' | 'next' | 'start-ellipsis' | 'end-ellipsis'} [type='page'] - The type of the pagination item.
* @property {string} [variant='ghost'] - The variant to use.
*/
/**
* @type {ForwardRefComponent<'button', PaginationItemProps>}
*/
declare const PaginationItem$1: ForwardRefComponent<"button", PaginationItemProps>;
type PaginationItem = {
/**
* - The type of the pagination item.
*/
type: "page" | "first" | "last" | "previous" | "next" | "start-ellipsis" | "end-ellipsis";
/**
* - The page number for this item, or `null` for non-applicable items.
*/
page: number | null;
/**
* - Whether the item is disabled.
*/
disabled: boolean;
/**
* - Whether the item is selected.
*/
selected: boolean;
/**
* - Click handler for the item.
*/
onClick: (event: React.MouseEvent) => void;
};
type UsePaginationProps = {
/**
* - Number of always visible pages at the beginning and end.
*/
boundaryCount?: number | undefined;
/**
* - The total number of pages.
*/
count?: number | undefined;
/**
* - The page selected by default in uncontrolled mode.
*/
defaultPage?: number | undefined;
/**
* - Whether the pagination is disabled.
*/
disabled?: boolean | undefined;
/**
* - Callback when page changes.
*/
onChange?: ((page: number) => void) | undefined;
/**
* - The current page in controlled mode.
*/
page?: number | undefined;
/**
* - Number of always visible pages before and after the current page.
*/
siblingCount?: number | undefined;
/**
* - Which navigation slots to show.
*/
slot?: {
first?: boolean;
previous?: boolean;
next?: boolean;
last?: boolean;
} | undefined;
};
type UsePaginationReturn = {
/**
* - The list of pagination items.
*/
items: PaginationItem[];
};
/**
* @typedef {Object} PaginationItem
* @property {'page' | 'first' | 'last' | 'previous' | 'next' | 'start-ellipsis' | 'end-ellipsis'} type - The type of the pagination item.
* @property {number | null} page - The page number for this item, or `null` for non-applicable items.
* @property {boolean} disabled - Whether the item is disabled.
* @property {boolean} selected - Whether the item is selected.
* @property {(event: React.MouseEvent) => void} onClick - Click handler for the item.
*/
/**
* @typedef {Object} UsePaginationProps
* @property {number} [boundaryCount=1] - Number of always visible pages at the beginning and end.
* @property {number} [count=1] - The total number of pages.
* @property {number} [defaultPage=1] - The page selected by default in uncontrolled mode.
* @property {boolean} [disabled=false] - Whether the pagination is disabled.
* @property {(page: number) => void} [onChange] - Callback when page changes.
* @property {number} [page] - The current page in controlled mode.
* @property {number} [siblingCount=1] - Number of always visible pages before and after the current page.
* @property {{ first?: boolean; previous?: boolean; next?: boolean; last?: boolean }} [slot] - Which navigation slots to show.
*/
/**
* @typedef {Object} UsePaginationReturn
* @property {PaginationItem[]} items - The list of pagination items.
*/
/**
* A hook that provides pagination logic.
* @param {UsePaginationProps} [props] - The pagination options.
* @returns {UsePaginationReturn} The pagination state with items array.
*/
declare function usePagination(props?: UsePaginationProps): UsePaginationReturn;
type PopoverProps = {
/**
* - Adds an arrow to the popover.
*/
arrow?: boolean | undefined;
/**
* -
*/
children?: React__default.ReactNode | ((context: {
isOpen: boolean;
onClose: (callback?: () => void) => void;
onOpen: (callback?: () => void) => void;
onToggle: () => void;
placement: string;
}) => React__default.ReactNode);
/**
* - The popover will close when the user clicks outside of the popover.
*/
closeOnBlur?: boolean | undefined;
/**
* - The popover will close when you press the `Esc` key.
*/
closeOnEsc?: boolean | undefined;
/**
* - Whether the popover will be open by default.
*/
defaultIsOpen?: boolean | undefined;
/**
* - The popover will not display.
*/
disabled?: boolean | undefined;
/**
* - The number of milliseconds to wait before showing the popover if `trigger` is hover.
*/
enterDelay?: number | undefined;
/**
* - The popover will follow the cursor.
*/
followCursor?: boolean | undefined;
/**
* - The `ref` of the element that will be focused when the popover opens.
*/
initialFocusRef?: React__default.RefObject | undefined;
/**
* - The popover will be open.
*/
isOpen?: boolean | undefined;
/**
* - The number of milliseconds to wait before hiding the popover if `trigger` is hover.
*/
leaveDelay?: number | undefined;
/**
* - The popover will be positioned next to the cursor.
*/
nextToCursor?: boolean | undefined;
/**
* - The skidding and distance of the popover.
*/
offset?: [number, number] | undefined;
/**
* - Callback when the popover is closed.
*/
onClose?: (() => void) | undefined;
/**
* - Callback when the popover is opened.
*/
onOpen?: (() => void) | undefined;
/**
* - The placement of the popover.
*/
placement?: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
/**
* - If `true`, renders the popover in a portal.
*/
portalled?: boolean | undefined;
/**
* - The popover will return the focus to the trigger element when closing. Otherwise, it will leave focus unchanged.
*/
returnFocusOnClose?: boolean | undefined;
/**
* - The type of trigger.
*/
trigger?: "click" | "hover" | undefined;
};
/**
* @typedef {Object} PopoverProps
* @property {boolean} [arrow=true] - Adds an arrow to the popover.
* @property {React.ReactNode | ((context: { isOpen: boolean; onClose: (callback?: () => void) => void; onOpen: (callback?: () => void) => void; onToggle: () => void; placement: string }) => React.ReactNode)} [children] -
* @property {boolean} [closeOnBlur=true] - The popover will close when the user clicks outside of the popover.
* @property {boolean} [closeOnEsc=true] - The popover will close when you press the `Esc` key.
* @property {boolean} [defaultIsOpen=false] - Whether the popover will be open by default.
* @property {boolean} [disabled] - The popover will not display.
* @property {number} [enterDelay=100] - The number of milliseconds to wait before showing the popover if `trigger` is hover.
* @property {boolean} [followCursor] - The popover will follow the cursor.
* @property {React.RefObject} [initialFocusRef] - The `ref` of the element that will be focused when the popover opens.
* @property {boolean} [isOpen] - The popover will be open.
* @property {number} [leaveDelay=0] - The number of milliseconds to wait before hiding the popover if `trigger` is hover.
* @property {boolean} [nextToCursor] - The popover will be positioned next to the cursor.
* @property {[number, number]} [offset=[0, 12]] - The skidding and distance of the popover.
* @property {() => void} [onClose] - Callback when the popover is closed.
* @property {() => void} [onOpen] - Callback when the popover is opened.
* @property {'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'} [placement='bottom'] - The placement of the popover.
* @property {boolean} [portalled=false] - If `true`, renders the popover in a portal.
* @property {boolean} [returnFocusOnClose=true] - The popover will return the focus to the trigger element when closing. Otherwise, it will leave focus unchanged.
* @property {'click' | 'hover'} [trigger='click'] - The type of trigger.
*/
/**
* @type {StyledFC}
*/
declare const Popover: StyledFC;
type PopoverArrowProps = {
/**
* - The height of the popover arrow.
*/
arrowHeight?: number | undefined;
/**
* - The width of the popover arrow.
*/
arrowWidth?: number | undefined;
};
/**
* @typedef {Object} PopoverArrowProps
* @property {number} [arrowHeight=8] - The height of the popover arrow.
* @property {number} [arrowWidth=12] - The width of the popover arrow.
*/
/**
* @type {ForwardRefComponent<'div', PopoverArrowProps>}
*/
declare const PopoverArrow: ForwardRefComponent<"div", PopoverArrowProps>;
type PopoverBodyProps = {
/**
* - The content of the popover body.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} PopoverBodyProps
* @property {React.ReactNode} [children] - The content of the popover body.
*/
/**
* @type {ForwardRefComponent<'div', PopoverBodyProps>}
*/
declare const PopoverBody: ForwardRefComponent<"div", PopoverBodyProps>;
type PopoverContentProps = {
/**
* - The content of the popover.
*/
children?: React__default.ReactNode;
/**
* - **Deprecated.** Use `slots.arrow`. The component used for the arrow.
*/
PopoverArrowComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.arrow`. Props applied to the arrow component.
*/
PopoverArrowProps?: object | undefined;
/**
* - **Deprecated.** Use `slots.popper`. The component used for the popover.
*/
PopperComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.popper`. Props applied to the Popper component.
*/
PopperProps?: object | undefined;
/**
* - Props forwarded to internal slots. `slotProps.popper` / `slotProps.transition` / `slotProps.arrow` are applied to the Popper / transition / arrow elements.
*/
slotProps?: {
popper?: object;
transition?: object;
arrow?: object;
} | undefined;
/**
* - Slot components. `slots.popper` replaces the default `Popper`; `slots.transition` replaces the default `Grow`; `slots.arrow` replaces the default `PopoverArrow`.
*/
slots?: {
popper?: React__default.ElementType;
transition?: React__default.ElementType;
arrow?: React__default.ElementType;
} | undefined;
/**
* - **Deprecated.** Use `slots.transition`. The component used for the transition.
*/
TransitionComponent?: React__default.ElementType | undefined;
/**
* - **Deprecated.** Use `slotProps.transition`. Props applied to the Transition element.
*/
TransitionProps?: {
/**
* - Whether to perform the enter transition when it first mounts.
*/
appear?: boolean | undefined;
} | undefined;
};
/**
* @typedef {Object} PopoverContentProps
* @property {React.ReactNode} [children] - The content of the popover.
* @property {React.ElementType} [PopoverArrowComponent] - **Deprecated.** Use `slots.arrow`. The component used for the arrow.
* @property {object} [PopoverArrowProps] - **Deprecated.** Use `slotProps.arrow`. Props applied to the arrow component.
* @property {React.ElementType} [PopperComponent] - **Deprecated.** Use `slots.popper`. The component used for the popover.
* @property {object} [PopperProps] - **Deprecated.** Use `slotProps.popper`. Props applied to the Popper component.
* @property {{ popper?: object; transition?: object; arrow?: object }} [slotProps] - Props forwarded to internal slots. `slotProps.popper` / `slotProps.transition` / `slotProps.arrow` are applied to the Popper / transition / arrow elements.
* @property {{ popper?: React.ElementType; transition?: React.ElementType; arrow?: React.ElementType }} [slots] - Slot components. `slots.popper` replaces the default `Popper`; `slots.transition` replaces the default `Grow`; `slots.arrow` replaces the default `PopoverArrow`.
* @property {React.ElementType} [TransitionComponent] - **Deprecated.** Use `slots.transition`. The component used for the transition.
* @property {object} [TransitionProps] - **Deprecated.** Use `slotProps.transition`. Props applied to the Transition element.
* @property {boolean} [TransitionProps.appear=true] - Whether to perform the enter transition when it first mounts.
*/
/**
* @type {ForwardRefComponent<'div', PopoverContentProps>}
*/
declare const PopoverContent: ForwardRefComponent<"div", PopoverContentProps>;
type PopoverFooterProps = {
/**
* - The content of the popover footer.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} PopoverFooterProps
* @property {React.ReactNode} [children] - The content of the popover footer.
*/
/**
* @type {ForwardRefComponent<'footer', PopoverFooterProps>}
*/
declare const PopoverFooter: ForwardRefComponent<"footer", PopoverFooterProps>;
type PopoverHeaderProps = {
/**
* - The content of the popover header.
*/
children?: React__default.ReactNode;
};
/**
* @typedef {Object} PopoverHeaderProps
* @property {React.ReactNode} [children] - The content of the popover header.
*/
/**
* @type {ForwardRefComponent<'header', PopoverHeaderProps>}
*/
declare const PopoverHeader: ForwardRefComponent<"header", PopoverHeaderProps>;
type PopoverTriggerProps = {
/**
* - The content of the popover trigger or a function that returns content.
*/
children?: React__default.ReactNode | ((context: {
getPopoverTriggerProps: (ownProps?: React__default.HTMLAttributes, ownRef?: React__default.Ref | null) => React__default.HTMLAttributes;
}) => React__default.ReactNode);
/**
* - Whether to wrap children in a Box component.
*/
shouldWrapChildren?: boolean | undefined;
};
/**
* @typedef {Object} PopoverTriggerProps
* @property {React.ReactNode | ((context: { getPopoverTriggerProps: (ownProps?: React.HTMLAttributes, ownRef?: React.Ref | null) => React.HTMLAttributes }) => React.ReactNode)} [children] - The content of the popover trigger or a function that returns content.
* @property {boolean} [shouldWrapChildren=false] - Whether to wrap children in a Box component.
*/
/**
* @type {ForwardRefComponent<'div', PopoverTriggerProps>}
*/
declare const PopoverTrigger: ForwardRefComponent<"div", PopoverTriggerProps>;
type PopoverContextValue = {
/**
* - Whether the popover closes on blur.
*/
closeOnBlur: boolean;
/**
* - Whether the popover closes on Escape key.
*/
closeOnEsc: boolean;
/**
* - Whether the popover is disabled.
*/
disabled?: boolean | undefined;
/**
* - Whether the popover follows the cursor.
*/
followCursor?: boolean | undefined;
/**
* - Whether an arrow is shown.
*/
arrow: boolean;
/**
* - The ref of the element to focus on open.
*/
initialFocusRef?: React$1.RefObject | undefined;
/**
* - Whether hovering content.
*/
isHoveringContentRef: React.MutableRefObject;
/**
* - Whether hovering trigger.
*/
isHoveringTriggerRef: React.MutableRefObject;
/**
* - Whether the popover is open.
*/
isOpen: boolean;
/**
* - The mouse page X position.
*/
mousePageX: number;
/**
* - The mouse page Y position.
*/
mousePageY: number;
/**
* - Whether the popover is positioned next to cursor.
*/
nextToCursor?: boolean | undefined;
/**
* - The skidding and distance of the popover.
*/
offset?: [number, number] | undefined;
/**
* - Callback to close the popover.
*/
onClose: (callback?: () => void) => void;
/**
* - Callback to open the popover.
*/
onOpen: (callback?: () => void) => void;
/**
* - Callback to toggle the popover.
*/
onToggle: () => void;
/**
* - The placement of the popover.
*/
placement: string;
/**
* - The id of the popover.
*/
popoverId: string;
/**
* - Ref to the popover content element.
*/
popoverContentRef: React.MutableRefObject;
/**
* - The id of the popover trigger.
*/
popoverTriggerId: string;
/**
* - Ref to the popover trigger element.
*/
popoverTriggerRef: React.MutableRefObject;
/**
* - Setter for mouse page X.
*/
setMousePageX: React.Dispatch>;
/**
* - Setter for mouse page Y.
*/
setMousePageY: React.Dispatch>;
/**
* - The trigger type.
*/
trigger: "click" | "hover";
};
/**
* @typedef {Object} PopoverContextValue
* @property {boolean} closeOnBlur - Whether the popover closes on blur.
* @property {boolean} closeOnEsc - Whether the popover closes on Escape key.
* @property {boolean} [disabled] - Whether the popover is disabled.
* @property {boolean} [followCursor] - Whether the popover follows the cursor.
* @property {boolean} arrow - Whether an arrow is shown.
* @property {React.RefObject} [initialFocusRef] - The ref of the element to focus on open.
* @property {React.MutableRefObject} isHoveringContentRef - Whether hovering content.
* @property {React.MutableRefObject} isHoveringTriggerRef - Whether hovering trigger.
* @property {boolean} isOpen - Whether the popover is open.
* @property {number} mousePageX - The mouse page X position.
* @property {number} mousePageY - The mouse page Y position.
* @property {boolean} [nextToCursor] - Whether the popover is positioned next to cursor.
* @property {[number, number]} [offset] - The skidding and distance of the popover.
* @property {(callback?: () => void) => void} onClose - Callback to close the popover.
* @property {(callback?: () => void) => void} onOpen - Callback to open the popover.
* @property {() => void} onToggle - Callback to toggle the popover.
* @property {string} placement - The placement of the popover.
* @property {string} popoverId - The id of the popover.
* @property {React.MutableRefObject} popoverContentRef - Ref to the popover content element.
* @property {string} popoverTriggerId - The id of the popover trigger.
* @property {React.MutableRefObject} popoverTriggerRef - Ref to the popover trigger element.
* @property {React.Dispatch>} setMousePageX - Setter for mouse page X.
* @property {React.Dispatch>} setMousePageY - Setter for mouse page Y.
* @property {'click' | 'hover'} trigger - The trigger type.
*/
/**
* A hook to access the popover context.
* @returns {PopoverContextValue | undefined} The popover context, or `undefined` if not within a `Popover`.
*/
declare function usePopover(): PopoverContextValue | undefined;
type PortalProps = {
/**
* - The portal will check if it is within a parent portal and append itself to the parent's portal node.
*/
appendToParentPortal?: boolean | undefined;
/**
* -
*/
children?: React__default.ReactNode;
/**
* - A `ref` to the container where the portal will be rendered.
*/
containerRef?: React__default.RefObject | undefined;
};
/**
* @typedef {Object} PortalProps
* @property {boolean} [appendToParentPortal=false] - The portal will check if it is within a parent portal and append itself to the parent's portal node.
* @property {React.ReactNode} [children] -
* @property {React.RefObject} [containerRef] - A `ref` to the container where the portal will be rendered.
*/
/**
* @type {React.FC}
*/
declare const Portal: React__default.FC;
type PopperChildProps = {
/**
* - The preferred placement, as passed through the `placement` prop.
*/
placement: string;
/**
* - The placement computed by Popper.js. It differs from `placement` when a modifier such as `flip` or `preventOverflow` changes it.
*/
computedPlacement: string;
/**
* - Transition props when `willUseTransition` is true.
*/
transition?: {
in: boolean;
onEnter: () => void;
onExited: () => void;
} | undefined;
};
type PopperInstance = {
/**
* - Destroy the popper instance.
*/
destroy: () => void;
/**
* - Force update the popper position.
*/
forceUpdate: () => void;
/**
* - Update the popper position in a microtask.
*/
update: () => Promise;
};
type PopperProps = {
/**
* - Deprecated: Use `referenceRef` instead. The element or a function returning an element to which the popper is attached.
*/
anchorEl?: HTMLElement | (() => HTMLElement) | null | undefined;
/**
* - The content of the popper. Can be a ReactNode or a render function that receives `{ placement, computedPlacement }`.
*/
children?: React__default.ReactNode | ((context: PopperChildProps) => React__default.ReactNode);
/**
* - Whether the popper is open.
*/
isOpen?: boolean | undefined;
/**
* - If `true`, sizes the popper to match the reference element's width on every update. Useful for autocomplete, date-picker, and select patterns.
*/
matchWidth?: boolean | undefined;
/**
* - Popper.js modifiers to customize positioning behavior.
*/
modifiers?: _popperjs_core.Modifier[] | undefined;
/**
* - The preferred placement of the popper. It is passed to Popper.js as the preferred placement; the placement computed by Popper.js is reported to the render function as `computedPlacement`.
*/
placement?: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
/**
* - Reference to receive the popper instance.
*/
popperRef?: React__default.MutableRefObject | undefined;
/**
* - If `true`, renders the popper in a portal. Takes precedence over `usePortal` when provided.
*/
portalled?: boolean | undefined;
/**
* - Props to pass to the Portal component when `portalled` is true.
*/
portalProps?: PortalProps | undefined;
/**
* - Reference to the element the popper is positioned relative to.
*/
referenceRef?: React__default.RefObject | undefined;
/**
* - Whether to unmount the popper when not open.
*/
unmountOnExit?: boolean | undefined;
/**
* - Whether to render in a portal. Use `portalled` instead.
*/
usePortal?: boolean | undefined;
/**
* - Whether the popper uses transitions.
*/
willUseTransition?: boolean | undefined;
};
/**
* @typedef {Object} PopperChildProps
* @property {string} placement - The preferred placement, as passed through the `placement` prop.
* @property {string} computedPlacement - The placement computed by Popper.js. It differs from `placement` when a modifier such as `flip` or `preventOverflow` changes it.
* @property {{ in: boolean; onEnter: () => void; onExited: () => void }} [transition] - Transition props when `willUseTransition` is true.
*/
/**
* @typedef {Object} PopperInstance
* @property {() => void} destroy - Destroy the popper instance.
* @property {() => void} forceUpdate - Force update the popper position.
* @property {() => Promise} update - Update the popper position in a microtask.
*/
/**
* @typedef {Object} PopperProps
* @property {HTMLElement | (() => HTMLElement) | null} [anchorEl] - Deprecated: Use `referenceRef` instead. The element or a function returning an element to which the popper is attached.
* @property {React.ReactNode | ((context: PopperChildProps) => React.ReactNode)} [children] - The content of the popper. Can be a ReactNode or a render function that receives `{ placement, computedPlacement }`.
* @property {boolean} [isOpen] - Whether the popper is open.
* @property {boolean} [matchWidth=false] - If `true`, sizes the popper to match the reference element's width on every update. Useful for autocomplete, date-picker, and select patterns.
* @property {Array>} [modifiers] - Popper.js modifiers to customize positioning behavior.
* @property {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'} [placement='bottom-start'] - The preferred placement of the popper. It is passed to Popper.js as the preferred placement; the placement computed by Popper.js is reported to the render function as `computedPlacement`.
* @property {React.MutableRefObject} [popperRef] - Reference to receive the popper instance.
* @property {boolean} [portalled] - If `true`, renders the popper in a portal. Takes precedence over `usePortal` when provided.
* @property {import('../portal/Portal').PortalProps} [portalProps] - Props to pass to the Portal component when `portalled` is true.
* @property {React.RefObject} [referenceRef] - Reference to the element the popper is positioned relative to.
* @property {boolean} [unmountOnExit=false] - Whether to unmount the popper when not open.
* @property {boolean} [usePortal=false] - Whether to render in a portal. Use `portalled` instead.
* @property {boolean} [willUseTransition=false] - Whether the popper uses transitions.
*/
/**
* @type {ForwardRefComponent<'div', PopperProps>}
*/
declare const Popper: ForwardRefComponent<"div", PopperProps>;
type PortalManagerProps = {
/**
* - The content to be rendered within the portal manager.
*/
children?: React__default.ReactNode;
/**
* - A `ref` to the component where the portals will be rendered.
*/
containerRef?: React__default.RefObject | undefined;
};
/**
* @typedef {Object} PortalManagerProps
* @property {React.ReactNode} [children] - The content to be rendered within the portal manager.
* @property {React.RefObject} [containerRef] - A `ref` to the component where the portals will be rendered.
*/
/**
* @type {StyledFC}
*/
declare const PortalManager: StyledFC;
type PortalManagerContextValue = {
/**
* - Add a portal and return its id.
*/
add: (render: (remove: () => void) => React.ReactNode, options?: {
id?: string;
appendToParentPortal?: boolean;
containerRef?: React.RefObject;
}) => string;
/**
* - Remove a portal by its id.
*/
remove: (id: string) => void;
};
/**
* @typedef {Object} PortalManagerContextValue
* @property {(render: (remove: () => void) => React.ReactNode, options?: { id?: string; appendToParentPortal?: boolean; containerRef?: React.RefObject }) => string} add - Add a portal and return its id.
* @property {(id: string) => void} remove - Remove a portal by its id.
*/
/**
* A hook to access the portal manager context.
* @returns {PortalManagerContextValue & ((render: (remove: () => void) => React.ReactNode, options?: { id?: string; appendToParentPortal?: boolean; containerRef?: React.RefObject }) => string)} The portal manager object. Can also be called as a function to add a portal.
*/
declare function usePortalManager(): PortalManagerContextValue & ((render: (remove: () => void) => React.ReactNode, options?: {
id?: string;
appendToParentPortal?: boolean;
containerRef?: React.RefObject;
}) => string);
type CircularProgressProps = {
/**
* - The color of the circular progress. It supports both default and custom theme colors.
*/
color?: string | undefined;
/**
* - The minimum value of the progress indicator.
*/
min?: number | undefined;
/**
* - The maximum value of the progress indicator.
*/
max?: number | undefined;
/**
* - The diameter of the circular progress, in pixels.
*/
size?: number | undefined;
/**
* - The thickness of the circular progress, in pixels.
*/
thickness?: number | undefined;
/**
* - The value of the progress indicator for the determinate variant. Value between `min` and `max`.
*/
value?: number | undefined;
/**
* - The variant to use.
*/
variant?: "indeterminate" | "determinate" | undefined;
};
/**
* @typedef {Object} CircularProgressProps
* @property {string} [color='blue:60'] - The color of the circular progress. It supports both default and custom theme colors.
* @property {number} [min=0] - The minimum value of the progress indicator.
* @property {number} [max=100] - The maximum value of the progress indicator.
* @property {number} [size=48] - The diameter of the circular progress, in pixels.
* @property {number} [thickness=4] - The thickness of the circular progress, in pixels.
* @property {number} [value=0] - The value of the progress indicator for the determinate variant. Value between `min` and `max`.
* @property {'indeterminate' | 'determinate'} [variant='indeterminate'] - The variant to use.
*/
/**
* @type {ForwardRefComponent<'div', CircularProgressProps>}
*/
declare const CircularProgress: ForwardRefComponent<"div", CircularProgressProps>;
type LinearProgressProps = {
/**
* - The color of the progress bar. It supports both default and custom theme colors.
*/
color?: string | string[] | undefined;
/**
* - The height of the progress bar, in pixels.
*/
height?: string | number | undefined;
/**
* - The minimum value of the progress indicator.
*/
min?: number | undefined;
/**
* - The maximum value of the progress indicator.
*/
max?: number | undefined;
/**
* - The value of the progress indicator for the determinate variant. Value between `min` and `max`.
*/
value?: number | undefined;
/**
* - The variant to use.
*/
variant?: "indeterminate" | "determinate" | undefined;
/**
* - The width of the progress bar, in pixels.
*/
width?: string | number | undefined;
};
/**
* @typedef {Object} LinearProgressProps
* @property {string | string[]} [color='blue:60'] - The color of the progress bar. It supports both default and custom theme colors.
* @property {number | string} [height=4] - The height of the progress bar, in pixels.
* @property {number} [min=0] - The minimum value of the progress indicator.
* @property {number} [max=100] - The maximum value of the progress indicator.
* @property {number} [value=0] - The value of the progress indicator for the determinate variant. Value between `min` and `max`.
* @property {'indeterminate' | 'determinate'} [variant='indeterminate'] - The variant to use.
* @property {number | string} [width] - The width of the progress bar, in pixels.
*/
/**
* @type {ForwardRefComponent<'div', LinearProgressProps>}
*/
declare const LinearProgress: ForwardRefComponent<"div", LinearProgressProps>;
type ColorModeConfig = {
/**
* - Controlled color mode value.
*/
value?: "dark" | "light" | undefined;
/**
* - Default color mode value for uncontrolled usage.
*/
defaultValue?: "dark" | "light" | undefined;
};
type ColorStyleConfig = {
/**
* - Controlled color style value.
*/
value?: ThemeScales | undefined;
/**
* - Default color style value for uncontrolled usage.
*/
defaultValue?: ThemeScales | undefined;
};
type EnvironmentConfig = {
/**
* - The root node (or a function returning one) used to resolve the environment's document and window.
*/
value?: Node | (() => Node) | undefined;
};
type TonicProviderProps = {
/**
* - The content to render within the provider.
*/
children?: React__default.ReactNode;
/**
* - Color mode configuration object.
*/
colorMode?: ColorModeConfig | undefined;
/**
* - Color style configuration object.
*/
colorStyle?: ColorStyleConfig | undefined;
/**
* - Environment configuration object.
*/
environment?: EnvironmentConfig | undefined;
/**
* - Custom theme object created with `createTheme()`.
*/
theme?: ThemeScales | undefined;
/**
* - If `true`, applies CSS reset and base styles globally.
*/
useCSSBaseline?: boolean | undefined;
/**
* - If `true`, enables CSS variable replacement for theme tokens.
*/
useCSSVariables?: boolean | undefined;
};
/**
* @typedef {Object} ColorModeConfig
* @property {'light' | 'dark'} [value] - Controlled color mode value.
* @property {'light' | 'dark'} [defaultValue='light'] - Default color mode value for uncontrolled usage.
*/
/**
* @typedef {Object} ColorStyleConfig
* @property {ThemeScales} [value] - Controlled color style value.
* @property {ThemeScales} [defaultValue] - Default color style value for uncontrolled usage.
*/
/**
* @typedef {Object} EnvironmentConfig
* @property {Node | (() => Node)} [value] - The root node (or a function returning one) used to resolve the environment's document and window.
*/
/**
* @typedef {Object} TonicProviderProps
* @property {React.ReactNode} [children] - The content to render within the provider.
* @property {ColorModeConfig} [colorMode] - Color mode configuration object.
* @property {ColorStyleConfig} [colorStyle] - Color style configuration object.
* @property {EnvironmentConfig} [environment] - Environment configuration object.
* @property {ThemeScales} [theme] - Custom theme object created with `createTheme()`.
* @property {boolean} [useCSSBaseline=false] - If `true`, applies CSS reset and base styles globally.
* @property {boolean} [useCSSVariables=false] - If `true`, enables CSS variable replacement for theme tokens.
*/
/**
* @type {React.FC}
*/
declare const TonicProvider: React__default.FC;
type RadioProps = {
/**
* - The radio button will be selected. Use the `onChange` prop to update the state for a controlled component.
*/
checked?: boolean | undefined;
/**
* - The content within the radio button component.
*/
children?: React__default.ReactNode;
/**
* - The radio button will be selected initially.
*/
defaultChecked?: boolean | undefined;
/**
* - Disables the radio button and prevents user interaction.
*/
disabled?: boolean | undefined;
/**
* - The `id` attribute of the input field.
*/
id?: string | undefined;
/**
* - Additional props to be applied to the input element.
*/
inputProps?: React__default.InputHTMLAttributes | undefined;
/**
* - A `ref` to access the input element.
*/
inputRef?: React__default.RefObject | undefined;
/**
* - The name of the input field in a series of radio buttons. The name is useful for form submissions.
*/
name?: string | undefined;
/**
* - A callback function invoked when the radio button loses focus.
*/
onBlur?: React__default.FocusEventHandler | undefined;
/**
* - A callback function invoked when the state of the radio button changes.
*/
onChange?: React__default.ChangeEventHandler