@baseline-ui/core 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,1656 @@
+import React$1, { Key } from 'react';
+import { IconProps, SVGRProps } from '@baseline-ui/icons';
+import * as react_aria from 'react-aria';
+import { AriaButtonProps, AriaSliderProps, AriaSwitchProps, AriaSearchFieldProps, AriaPopoverProps, AriaMenuProps, AriaMenuTriggerProps, AriaLinkOptions, SeparatorProps as SeparatorProps$1, AriaProgressBarProps, AriaTextFieldProps, AriaTooltipProps, AriaPositionProps, OverlayProps, AriaToggleButtonProps, AriaCheckboxProps, AriaNumberFieldProps, I18nProviderProps as I18nProviderProps$1, LocalizedStrings, useNumberFormatter, useDateFormatter, AriaTagGroupProps, AriaListBoxOptions, AriaListBoxProps, OptionAria, AriaSelectOptions, AriaDialogProps, DropOptions, ClipboardProps, AriaRadioGroupProps, AriaModalOverlayProps, Locale } from 'react-aria';
+export { I18nProviderProps, useCollator, useDateFormatter, useNumberFormatter } from 'react-aria';
+import { SliderStateOptions, ToggleProps, MenuTriggerProps, TooltipTriggerProps, NumberFieldStateOptions, ListProps, Orientation, SelectStateOptions, Item as Item$2, OverlayTriggerProps } from 'react-stately';
+import { Theme } from '@baseline-ui/tokens';
+import { Node as Node$1, AriaLabelingProps } from '@react-types/shared';
+import { AriaTabListProps } from '@react-types/tabs';
+import { ColorFieldProps } from '@react-stately/color';
+import { OnRender, OnRenderStart, OnDragStart, OnDrag, OnDragEnd, OnResizeStart, OnResize, OnResizeEnd, OnRotateStart, OnRotate, OnRotateEnd, OnSnap, RotationPosition } from 'react-moveable';
+
+declare function assignInlineTheme(theme: Theme): {
+    [cssVarName: string]: string;
+};
+
+interface BlockProps {
+  "data-blockid"?: string;
+}
+
+interface StylingProps extends BlockProps {
+  /** The className applied to the root element of the component. */
+  className?: string;
+
+  /** The style applied to the root element of the component. */
+  style?: React$1.CSSProperties;
+}
+
+interface ActionButtonSharedProps extends Omit<AriaButtonProps<"button" | "div">, "onKeyUp" | "rel" | "href" | "target">, StylingProps {
+    /**
+     * Handler that is called when the element receives or loses focus.
+     *
+     * @param isHovered
+     */
+    onHoverChange?: (isHovered: boolean) => void;
+}
+interface ActionButtonProps extends ActionButtonSharedProps {
+    /**
+     * The button's variant.
+     *
+     * @default primary
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "ghost";
+    /** The button's label. */
+    label: string;
+    /** The button's icon before the label. */
+    iconStart?: React$1.FC<IconProps>;
+    /** The button's icon after the label. */
+    iconEnd?: React$1.FC<IconProps>;
+    /**
+     * The button's size.
+     *
+     * @default sm
+     */
+    size?: "sm" | "md";
+}
+
+declare const ActionButton: React$1.ForwardRefExoticComponent<ActionButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface DomNodeRendererProps {
+    /** The class name applied to the wrapper `div` component. */
+    className?: string;
+    /**
+     * The DOM node to render inside the component. If this is not provided, the
+     * component will render nothing. If this is provided, the component will
+     * render the DOM node inside a `div` component with `display` set to
+     * `contents`.
+     */
+    node: Node;
+}
+
+declare const DomNodeRenderer: React$1.ForwardRefExoticComponent<DomNodeRendererProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SliderProps extends AriaSliderProps<number>, Omit<SliderStateOptions<number>, "numberFormatter"> {
+    /**
+     * Whether the slider is read only.
+     *
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /** The format options passed to `Intl.NumberFormat`. */
+    numberFormatOptions?: Intl.NumberFormatOptions & {
+        numberingSystem?: string;
+    };
+    /** The class name applied to the root element. */
+    className?: string;
+    /** The label for the slider. */
+    label?: string;
+    /**
+     * Whether to include a number input for the slider.
+     *
+     * @default false
+     */
+    includeNumberInput?: boolean;
+}
+
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SwitchProps extends Omit<AriaSwitchProps, "children">, Omit<ToggleProps, "children">, StylingProps {
+    /** The label to display next to the switch. */
+    label?: string;
+    /** The position of the label. */
+    labelPosition?: "top" | "left";
+    /** The status label to display next to the switch. */
+    statusLabel?: {
+        on: string;
+        off: string;
+    };
+}
+
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+interface SearchInputProps extends Omit<AriaSearchFieldProps, "validationState" | "label" | "aria-autocomplete" | "autoComplete" | "isRequired" | "aria-haspopup" | "isReadOnly" | "aria-activedescendant" | "type">, StylingProps {
+    /**
+     * The size of the search input.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The variant of the search input.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "ghost";
+    /** Defines a string value that labels the current element. */
+    "aria-label": string;
+}
+
+declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ThemeProviderProps extends StylingProps {
+    /**
+     * The theme to use. If not provided, the theme will be inherited from the
+     * parent ThemeProvider. If there is no parent ThemeProvider, the default
+     * theme will be used.
+     */
+    theme: Theme;
+    /** The children to render. */
+    children: React$1.ReactNode;
+    /**
+     * A function that will be called when the theme changes from any of the child
+     * components.
+     */
+    setTheme?: (theme: Theme) => void;
+}
+
+declare const ThemeProvider: React$1.ForwardRefExoticComponent<ThemeProviderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A hook that returns the user preferences for color scheme, contrast, reduced
+ * motion, transparency and reduced data. The values are updated when the user
+ * changes their preferences.
+ *
+ * @example
+ *   const {
+ *     colorScheme,
+ *     contrast,
+ *     reducedMotion,
+ *     transparency,
+ *     reducedData,
+ *   } = useUserPreferences();
+ *
+ * @returns The user preferences.
+ */
+declare function useUserPreferences(): {
+    colorScheme: "dark" | "light";
+    contrast: "normal" | "high";
+    reducedMotion: boolean;
+    transparency: boolean;
+    reducedData: boolean;
+};
+
+interface PopoverContentProps extends Omit<AriaPopoverProps, "popoverRef" | "triggerRef">, StylingProps {
+    /**
+     * The reference element for the popover position. By default, the popover is
+     * positioned relative to the trigger element.
+     */
+    triggerRef?: React$1.RefObject<HTMLElement>;
+    /** The class name for the underlay element. */
+    underlayClassName?: string;
+    /** The contents of the popover. */
+    children: React$1.ReactNode;
+}
+
+type Item$1 = {
+    label: string;
+    id: string;
+    shortcut?: string;
+};
+type Section = {
+    type: "section";
+    group: string;
+    items: Item$1[];
+    title: string;
+    isTitleVisible?: boolean;
+};
+type ItemsUnion = Item$1 | Section;
+type MenuPopoverProps = Pick<PopoverContentProps, "isNonModal" | "placement" | "shouldUpdatePosition" | "shouldFlip" | "boundaryElement" | "crossOffset" | "offset">;
+interface MenuProps extends MenuTriggerProps, MenuPopoverProps, Omit<AriaMenuProps<ItemsUnion>, "children">, AriaMenuTriggerProps {
+    /** The button label for the menu. */
+    label: string;
+    /** The `className` property assigned to the root element of the component. */
+    className?: string;
+    /** The `className` property assigned to the content element of the component. */
+    contentClassName?: string;
+    /** The `className` property assigned to the item element of the component. */
+    itemClassName?: string;
+    /**
+     * A list of items to render in the menu. Items have the following shape:
+     *
+     * ```ts
+     * export type Item = {
+     *   label: string;
+     *   id: string;
+     *   shortcut?: string;
+     * };
+     *
+     * export type Section = {
+     *   type: "section";
+     *   group: string;
+     *   items: Item[];
+     *   title: string;
+     *   isTitleVisible?: boolean;
+     * };
+     *
+     * export type ItemsUnion = Item | Section;
+     * ```
+     */
+    items: ItemsUnion[];
+}
+
+declare const Menu: React$1.ForwardRefExoticComponent<MenuProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface LinkProps extends AriaLinkOptions, StylingProps {
+    /** The link's style variant. */
+    variant?: "default" | "inline";
+    /** The children to render. */
+    children: React$1.ReactNode;
+    /** The size of the link. */
+    size?: "sm" | "md" | "lg";
+}
+
+declare const Link: React$1.ForwardRefExoticComponent<LinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+
+interface SharedFileUploadProps extends StylingProps {
+    /** Whether the component is inlined. */
+    variant?: "default" | "inline";
+    /** Whether the component is disabled. */
+    isDisabled?: boolean;
+    /** The label to display. */
+    label: string;
+    /** The description to display. */
+    description?: string;
+    /**
+     * The pattern to match the file name against. This is a regular expression,
+     * and will be matched against the entire file name.
+     */
+    accept?: string;
+    /** The name of the input. */
+    name?: string;
+    /** The callback function that is fired when the value changes. */
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The callback function that is fired when the value changes and the value is
+     * valid.
+     */
+    onValueChange?: (files: File[]) => void;
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended
+     * description for the object.
+     */
+    "aria-describedby"?: string;
+}
+interface FileUploadProps extends SharedFileUploadProps {
+    /** The Icon to display. */
+    icon?: React$1.FC<IconProps>;
+    /** Whether to allow multiple files to be uploaded. */
+    multiple?: boolean;
+}
+
+declare const FileUpload: React$1.ForwardRefExoticComponent<FileUploadProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+interface SeparatorProps extends Omit<SeparatorProps$1, "elementType">, StylingProps {
+    /**
+     * The variant of the separator.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+}
+
+declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ProgressBarProps extends Omit<AriaProgressBarProps, "isIndeterminate"> {
+    /** The `className` property assigned to the root element of the component. */
+    className?: string;
+    /**
+     * The variant of the progress bar.
+     *
+     * @default active
+     */
+    variant?: "active" | "success" | "error";
+    /** The description of the progress bar. */
+    description?: string;
+    /**
+     * Whether the progress bar value should be displayed.
+     *
+     * @default false
+     */
+    showValue?: boolean;
+    /** The error message of the progress bar. */
+    errorMessage?: string;
+}
+
+declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface InputMessage {
+    /** The description to display below the input. */
+    description?: string;
+    /** The error message to display when the input is in an error state. */
+    errorMessage?: string;
+    /** The warning message to display when the input is in a warning state. */
+    warningMessage?: string;
+}
+interface TextInputProps extends Omit<AriaTextFieldProps, "validationState" | "isInvalid" | "description" | "errorMessage">, StylingProps, InputMessage {
+    /** The state of the input. */
+    validationState?: "valid" | "error" | "warning";
+    /**
+     * The variant of the text input.
+     *
+     * @default primary
+     */
+    variant?: "primary" | "ghost";
+    /**
+     * The position of the label relative to the input.
+     *
+     * @default top
+     */
+    labelPosition?: "top" | "start";
+    /** Whether the input is read only. */
+    readOnly?: boolean;
+    /** The style object to apply to the input element */
+    inputStyle?: React$1.CSSProperties;
+    /** The class name to apply to the input element */
+    inputClassName?: string;
+}
+
+declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface ReactionProps extends Omit<AriaSwitchProps & ToggleProps, "validationState" | "isRequired" | "children" | "isInvalid">, StylingProps {
+    /** The size of the reaction. */
+    size?: "small" | "medium";
+    /** The number of reactions. */
+    count: number;
+    /** The icon to render. */
+    icon?: React$1.FC<IconProps>;
+}
+
+declare const Reaction: React$1.ForwardRefExoticComponent<ReactionProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+interface TooltipProps extends TooltipTriggerProps, AriaTooltipProps, Omit<AriaPositionProps, "overlayRef" | "targetRef" | "maxHeight" | "isOpen" | "arrowSize"> {
+    /** The content of the tooltip. */
+    text?: string;
+    /** The tooltip trigger element. */
+    children: React$1.ReactNode;
+    /**
+     * The delay time for the tooltip to show up.
+     *
+     * @default 1000
+     */
+    delay?: number;
+    /**
+     * The delay time for the tooltip to hide.
+     *
+     * @default 500
+     */
+    closeDelay?: number;
+}
+
+declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface PortalProps extends OverlayProps {
+    /** The `className` property assigned to the root element of the component. */
+    className?: string;
+}
+
+declare const Portal: React$1.ForwardRefExoticComponent<PortalProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ProgressSpinnerProps extends Omit<AriaProgressBarProps, "value" | "isIndeterminate" | "formatOptions" | "maxValue" | "minValue" | "valueLabel">, StylingProps {
+    /**
+     * The size of the progress circle.
+     *
+     * @default md
+     */
+    size?: "sm" | "md";
+    /**
+     * The progress circle's variant.
+     *
+     * @default active
+     */
+    variant?: "active" | "inactive" | "success" | "error";
+}
+
+declare const ProgressSpinner: React$1.ForwardRefExoticComponent<ProgressSpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ActionIconButtonProps extends ActionButtonSharedProps {
+    /** The icon to display */
+    icon: React$1.FC<IconProps>;
+    /**
+     * The size of the icon button.
+     *
+     * @default "md"
+     */
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    /**
+     * The variant of the icon button.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "tertiary";
+}
+
+declare const ActionIconButton: React$1.ForwardRefExoticComponent<ActionIconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface ToggleButtonProps extends StylingProps, Omit<AriaToggleButtonProps, "type" | "elementType"> {
+    /** The text content of the button. */
+    label: string;
+    /** The icon to display before the label. */
+    iconStart?: React$1.FC<SVGRProps>;
+    /**
+     * In case the button is being used as a trigger for a popover, this prop will
+     * determine the direction of caret in which the popover will be displayed.
+     *
+     * @default "bottom"
+     */
+    popupPlacement?: "top" | "bottom" | "left" | "right";
+    /**
+     * The size of the button.
+     *
+     * @default "md"
+     */
+    size?: "md" | "lg";
+}
+
+declare const ToggleButton: React$1.ForwardRefExoticComponent<ToggleButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CheckboxProps extends AriaCheckboxProps, Omit<ToggleProps, "children">, StylingProps {
+    /** The checkbox's label. */
+    label?: string;
+    /**
+     * The position of the label
+     *
+     * @default end
+     */
+    labelPosition?: "start" | "end";
+}
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+type Excluded = "isDisabled" | "isReadOnly" | "isRequired" | "locale" | "validationState" | "label" | "formatOptions" | "isInvalid";
+interface PaginationProps extends Omit<AriaNumberFieldProps, Excluded>, Omit<NumberFieldStateOptions, Excluded>, StylingProps {
+    /** The largest value allowed for the input. */
+    maxValue: number;
+    /** The label for the pagination component. */
+    "aria-label": string;
+    /**
+     * The variant of the pagination component.
+     *
+     * @default floating
+     */
+    variant?: "floating" | "pinned";
+    /**
+     * The size of the pagination component.
+     *
+     * @default md
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+}
+
+declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface I18nProviderProps extends I18nProviderProps$1 {
+    /** The messages to use for internationalization. */
+    messages?: LocalizedStrings;
+}
+
+declare const I18nProvider: React$1.FC<I18nProviderProps>;
+
+type NumberFormatProps = Parameters<typeof useNumberFormatter>[0] & {
+    /** The number to format. */
+    value: number;
+};
+
+declare const NumberFormat: React$1.FC<NumberFormatProps>;
+
+type DateFormatProps = Parameters<typeof useDateFormatter>[0] & {
+    /** The date to format. */
+    date: Date;
+};
+
+declare const DateFormat: React$1.FC<DateFormatProps>;
+
+type Item = {
+    id: string;
+    label: string;
+    variant?: "neutral" | "red" | "green" | "blue" | "high-contrast";
+    icon?: React$1.FC<SVGRProps>;
+};
+interface TagGroupProps extends StylingProps, Omit<AriaTagGroupProps<Item>, "children" | "errorMessage" | "description">, Omit<ListProps<Item>, "children" | "collection" | "filter"> {
+    /**
+     * The items to display in the tag group.
+     *
+     * Type Item = { id: string; label: string; variant?: "neutral" | "red" |
+     * "green" | "blue" | "high-contrast"; icon?: React.FC<SVGRProps>; }
+     */
+    items: Item[];
+    /**
+     * The variant of the tag group.
+     *
+     * @default "neutral"
+     */
+    variant?: Item["variant"];
+    /** The label for the tag group. */
+    "aria-label": string;
+}
+
+declare const TagGroup: React$1.ForwardRefExoticComponent<TagGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface AccordionProps extends StylingProps {
+    /**
+     * This prop controls the expansion mode of the accordion. If set to `single`,
+     * only one item can be expanded at a time. If set to `multiple`, multiple
+     * items can be expanded at the same time.
+     *
+     * @default single
+     */
+    expansionMode?: "single" | "multiple";
+    /** This callback is called when the expanded state of the accordion changes. */
+    onChange?: (value: Set<Key>) => void;
+    /** The children of the accordion. Each child should be an `AccordionItem`. */
+    children: React$1.ReactNode;
+    /** The keys of the items that should be expanded by default. */
+    defaultExpandedKeys?: Set<Key>;
+    /**
+     * The keys of the items that should be expanded. If this prop is provided,
+     * the accordion will be a controlled component. This means that the expanded
+     * state of the accordion will not change unless you update this prop.
+     */
+    expandedKeys?: Set<Key>;
+    /**
+     * The keys of the items that should be disabled. Disabled items cannot be
+     * expanded or collapsed.
+     */
+    disabledKeys?: Set<Key>;
+}
+interface AccordionItemProps extends StylingProps {
+    /** The title of the accordion item. */
+    title: string;
+    /**
+     * The buttons that should be rendered in the accordion item. These buttons
+     * will be rendered in the top right corner of the accordion item. They will
+     * be rendered in the order they are provided. The buttons will be rendered as
+     * `ActionIconButton`s, so you can pass any props that you would pass to an
+     * `ActionIconButton`.
+     *
+     * @example
+     *   ```jsx
+     *   <AccordionItem
+     *    title="Accordion Item"
+     *    actions={[{
+     *      icon: EditIcon,
+     *      label: "Edit",
+     *      onPress: () => alert("Edit"),
+     *    }]}>Content</AccordionItem>
+     *    ```;
+     */
+    actions?: Omit<ActionIconButtonProps, "size" | "variant" | "excludeFromTabOrder">[];
+    /**
+     * The action buttons should only be shown when the user hovers over or
+     * focuses the accordion item.
+     *
+     * @default false
+     */
+    showActionsOnTriggerOnly?: boolean;
+    /** The content of the accordion item. */
+    children: React$1.ReactNode;
+    /** The key of the accordion item. */
+    value: Key;
+    /**
+     * The description of the accordion item. This will be rendered at the end of
+     * the accordion header.
+     */
+    subLabel?: string;
+}
+
+declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLHeadingElement>>;
+
+type ListOption = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React$1.FC<IconProps>;
+    /**
+     * The type of item.
+     *
+     * @default item
+     */
+    type?: "option";
+};
+type ListSection = {
+    id: string;
+    title?: string;
+    type: "section";
+    children: ListOption[];
+};
+type ListItem = ListOption | ListSection;
+interface ListBoxProps extends StylingProps, AriaListBoxOptions<ListItem>, Omit<AriaListBoxProps<ListItem>, "children"> {
+    /**
+     * The items to render in the listbox. Items have the following shape:
+     *
+     * ```ts
+     * export type ListOption = {
+     *   id: string;
+     *   label: string;
+     *   helperText?: string;
+     *   icon?: React.FC<IconProps>;
+     * };
+     *
+     * export type ListSection = {
+     *   name?: string;
+     *   type: "section";
+     *   children: ListOption[];
+     * };
+     *
+     * type ListItem = ListOption | ListSection;
+     * ```
+     */
+    items: ListItem[];
+    /**
+     * The custom render function for the listbox options.
+     *
+     * @param item Node<ListItem>
+     * @param options [OptionAria]()
+     * @param ref React.RefObject<HTMLLIElement>
+     */
+    renderOption?: (item: Node$1<ListItem>, options: OptionAria, ref: React$1.RefObject<HTMLLIElement>) => React$1.ReactNode;
+    /** Whether to show the selected checkmark icon. */
+    showSelectedIcon?: boolean;
+    /** The label for the listbox. */
+    label?: string;
+    /**
+     * Whether the items are arranged in a stack or grid.
+     *
+     * @default stack
+     */
+    layout?: "grid" | "stack";
+    /**
+     * The primary orientation of the items. Usually this is the direction that
+     * the collection scrolls.
+     *
+     * @default vertical
+     */
+    orientation?: Orientation;
+}
+
+interface SelectProps extends Omit<AriaSelectOptions<ListItem>, "validationState" | "items">, Omit<SelectStateOptions<ListItem>, "children" | "items" | "validationState" | "isRequired" | "isInvalid">, Pick<ListBoxProps, "items" | "showSelectedIcon">, Omit<PopoverContentProps, "className" | "style" | "triggerRef" | "children">, StylingProps {
+    /**
+     * The position of the label.
+     *
+     * @default "top"
+     */
+    labelPosition?: "top" | "start";
+    /** The description of the select component. */
+    description?: string;
+    /** The error message of the select component. */
+    errorMessage?: string;
+    /** The warning message of the select component. */
+    warningMessage?: string;
+    /** The label of the select component. */
+    label?: string;
+    /** The variant of the select component. */
+    variant?: "primary" | "ghost";
+    /** The state of the select component. */
+    validationState?: "valid" | "error" | "warning";
+    /** Whether the select component is read only. */
+    isReadOnly?: boolean;
+}
+
+declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const ListBox: React$1.ForwardRefExoticComponent<ListBoxProps & React$1.RefAttributes<HTMLUListElement>>;
+
+interface AvatarProps extends StylingProps {
+    /**
+     * The size of the component.
+     *
+     * @default "md"
+     */
+    size?: "md" | "sm";
+    /**
+     * The icon to display. This icon has to be imported from the
+     * `@baseline-ui/icons` package.
+     */
+    icon?: React$1.FC<SVGRProps>;
+    /** The name of the user. */
+    name: string;
+    /** The URL of the image to display. */
+    imgSrc?: string;
+    /**
+     * The image loading strategy to use. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes:~:text=a%20fallback%20destination.-,loading,-Indicates%20how%20the)
+     */
+    imgLoading?: "lazy" | "eager";
+    /** Whether to show the initials of the user if no image is provided. */
+    showInitials?: boolean;
+    /** Whether the component is disabled. */
+    isDisabled?: boolean;
+    /** Whether the user has a notification. */
+    hasNotifications?: boolean;
+}
+
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+type ItemProps = React$1.ComponentProps<typeof Item$2> & StylingProps & {
+    key?: Key;
+    icon?: React$1.FC<SVGRProps>;
+    value?: string;
+    title?: string;
+};
+type TabsProps = Omit<StylingProps & AriaTabListProps<ItemProps>, "orientation" | "children" | "items" | "selectedKey" | "defaultSelectedKey" | "disabledKeys"> & {
+    /**
+     * The `TabItem` components to render inside the `Tabs` component.
+     *
+     * ```jsx
+     * <Tabs>
+     *   <TabItem key="tab1" title="Tab 1">
+     *     <div>Tab 1 content</div>
+     *   </TabItem>
+     *   <TabItem key="tab2" title="Tab 2">
+     *     <div>Tab 2 content</div>
+     *   </TabItem>
+     * </Tabs>;
+     * ```
+     */
+    children: React$1.ReactNode;
+    /**
+     * The key of the tab that needs to be removed.
+     *
+     * @param key
+     */
+    onRemove?: (key: Key) => void;
+    /** The value of the tab that needs to be selected. */
+    selectedValue?: string;
+    /** The default value of the tab that needs to be selected. */
+    defaultSelectedValue?: string;
+    /** The values of the tabs that need to be disabled. */
+    disabledValues?: Set<Key>;
+    /** A list of action buttons to render beside the tab items. */
+    actions?: Omit<ActionIconButtonProps, "variant" | "size">[];
+    /** The variant of the tabs */
+    variant?: "primary" | "ghost";
+    /** The className to apply to the tab header container. */
+    tabHeaderClassName?: string;
+    /** The style to apply to the tab header container. */
+    tabHeaderStyle?: React$1.CSSProperties;
+};
+type TabItemProps = StylingProps & {
+    /** The title of the tab. This will be displayed in the tab button. */
+    title: string;
+    /** The icon to display in front of the title. */
+    icon?: React$1.FC<SVGRProps>;
+    /** The value of the tab. This will be used to identify the tab. */
+    value: string;
+};
+
+declare const Tabs: React$1.ForwardRefExoticComponent<Omit<StylingProps & react_aria.AriaTabListProps<ItemProps>, "children" | "orientation" | "items" | "disabledKeys" | "selectedKey" | "defaultSelectedKey"> & {
+    children: React$1.ReactNode;
+    onRemove?: ((key: React$1.Key) => void) | undefined;
+    selectedValue?: string | undefined;
+    defaultSelectedValue?: string | undefined;
+    disabledValues?: Set<React$1.Key> | undefined;
+    actions?: Omit<ActionIconButtonProps, "size" | "variant">[] | undefined;
+    variant?: "primary" | "ghost" | undefined;
+    tabHeaderClassName?: string | undefined;
+    tabHeaderStyle?: React$1.CSSProperties | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const TabItem: React$1.FC<TabItemProps>;
+
+interface InlineAlertProps extends StylingProps {
+    /**
+     * The variant of the alert.
+     *
+     * @default "info"
+     */
+    variant?: "info" | "warning" | "error" | "success";
+    /** The title of the alert. */
+    title: string;
+    /** The description of the alert. */
+    description: string;
+    /**
+     * The label of the action button. When provided, the action button will be
+     * rendered.
+     */
+    actionLabel?: string;
+    /** The callback fired when the action button is clicked. */
+    onAction?: () => void;
+    /**
+     * The callback fired when the close button is clicked. When provided, the
+     * close button will be rendered.
+     */
+    onClose?: () => void;
+    /**
+     * The arrangement of the variable.
+     *
+     * @default "single"
+     * @typedef {"single" | "multi" | "compact"} Arrangement
+     */
+    arrangement?: "single" | "multi" | "compact";
+    /**
+     * The size of the alert.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md";
+}
+
+declare const InlineAlert: React$1.ForwardRefExoticComponent<InlineAlertProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface NumberInputProps extends StylingProps, Omit<AriaNumberFieldProps, "validationState" | "isRequired"> {
+    /**
+     * The position of the label relative to the input.
+     *
+     * @default top
+     */
+    labelPosition?: "top" | "start";
+    /**
+     * The variant of the number input.
+     *
+     * @default primary
+     */
+    variant?: "primary" | "ghost";
+    /**
+     * Whether to show the stepper buttons.
+     *
+     * @default true
+     */
+    showStepper?: boolean;
+    /** The description to display below the input. */
+    description?: string;
+    /** The error message to display when the input is in an error state. */
+    errorMessage?: string;
+}
+
+declare const NumberInput: React$1.ForwardRefExoticComponent<NumberInputProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface DialogProps extends AriaDialogProps, StylingProps {
+    /** The children to render. */
+    children: React$1.ReactNode;
+    /**
+     * The size of the dialog. This defines the max width of the dialog.
+     *
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The variant of the dialog.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "ghost";
+}
+interface DialogTitleProps extends StylingProps {
+    /** The children to render. */
+    children: React$1.ReactNode;
+}
+
+declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const DialogTitle: React$1.ForwardRefExoticComponent<DialogTitleProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ColorPreset {
+    label: string;
+    color: string;
+}
+interface ColorInputProps extends OverlayTriggerProps, StylingProps, Pick<ColorFieldProps, "onChange" | "defaultValue" | "value" | "label" | "isDisabled">, Pick<AriaLabelingProps, "aria-label"> {
+    /**
+     * The list of color presets to show in the color picker. The signature of the
+     * color presets is:
+     *
+     * ```ts
+     * export interface ColorPreset {
+     *   label: string;
+     *   color: string;
+     * }
+     * ```
+     *
+     * The color can be a hex or hexa value.
+     */
+    presets: ColorPreset[];
+    /**
+     * Whether to show the color label.
+     *
+     * @default true
+     */
+    showColorLabel?: boolean;
+    /**
+     * Whether to allow alpha values in the color picker.
+     *
+     * @default false
+     */
+    allowAlpha?: boolean;
+    /**
+     * Whether to allow the removal of the color.
+     *
+     * @default false
+     */
+    allowRemoval?: boolean;
+    /** The label position of the color input. */
+    labelPosition?: "top" | "start";
+}
+
+declare const ColorInput: React$1.ForwardRefExoticComponent<ColorInputProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const ColorSwatch: React$1.FC<ColorSwatchProps>;
+interface ColorSwatchProps {
+    color?: string;
+    isFocusVisible?: boolean;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    isPresentational?: boolean;
+}
+
+interface FreehandCanvasProps extends StylingProps, AriaLabelingProps {
+    /** The className applicable to the SVG canvas. */
+    canvasClassName?: string;
+    /** The style applicable to the SVG canvas. */
+    canvasStyle?: React$1.CSSProperties;
+    /** The className applicable to the footer. */
+    footerClassName?: string;
+    /** The style applicable to the footer. */
+    footerStyle?: React$1.CSSProperties;
+    /**
+     * How much to soften the stroke's edges.
+     *
+     * @default 0
+     */
+    smoothing?: number;
+    /**
+     * How much to streamline the stroke.
+     *
+     * @default 0
+     */
+    streamline?: number;
+    /** An easing function to apply to each point's pressure. */
+    easing?: (pressure: number) => number;
+    /**
+     * Whether to simulate pressure based on velocity.
+     *
+     * @default false
+     */
+    simulatePressure?: boolean;
+    /** Cap, taper and easing for the start of the line. */
+    start?: {
+        cap?: boolean;
+        taper?: number | boolean;
+        easing?: (distance: number) => number;
+    };
+    /** Cap, taper and easing for the end of the line. */
+    end?: {
+        cap?: boolean;
+        taper?: number | boolean;
+        easing?: (distance: number) => number;
+    };
+    /**
+     * The width of the stroke.
+     *
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * The color of the stroke.
+     *
+     * @default #3A87FD
+     */
+    strokeColor?: string;
+    /**
+     * Whether to keep the points within the canvas.
+     *
+     * @default true
+     */
+    isBound?: boolean;
+    /**
+     * Callback for when the points change. This is called on every point change.
+     *
+     * @param points
+     */
+    onChange?: (points: number[][][]) => void;
+    /**
+     * Callback for when the points change has ended. This is called once after
+     * the pointerup event. It is recommended to use this callback for performance
+     * reasons.
+     *
+     * @param points
+     */
+    onChangeEnd?: (points: number[][][]) => void;
+    /** The default points to render. */
+    defaultValue?: number[][][];
+    /** The label for the canvas. */
+    label?: string;
+    /**
+     * Whether to enable history for undo/redo.
+     *
+     * @default false
+     */
+    enableHistory?: boolean;
+    /**
+     * Whether the canvas is inline.
+     *
+     * @default true
+     */
+    isInline?: boolean;
+    /** Whether the canvas is disabled. */
+    isDisabled?: boolean;
+    /** The placeholder for the canvas. */
+    placeholder?: string;
+    /** The label for the clear button. */
+    clearLabel?: string;
+    /** The label for the undo button. */
+    undoLabel?: string;
+    /** The label for the redo button. */
+    redoLabel?: string;
+    /** Description for the canvas. */
+    description?: string;
+}
+
+declare const FreehandCanvas: React$1.ForwardRefExoticComponent<FreehandCanvasProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type TextProps<T extends keyof React$1.JSX.IntrinsicElements = "span"> = StylingProps & React$1.ComponentProps<T> & {
+    /**
+     * The type of text to render.
+     *
+     * @default "title"
+     */
+    type?: "subtitle" | "title" | "body" | "value" | "helper";
+    /**
+     * The size of the text.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** The text to render. Can be a string or a number. */
+    children: React$1.ReactNode;
+    /**
+     * The HTML element to render.
+     *
+     * @default "span"
+     */
+    elementType?: React$1.ElementType;
+};
+
+declare const Text: React$1.ForwardRefExoticComponent<Pick<TextProps, "color" | "size" | "content" | "translate" | "hidden" | "style" | "placeholder" | "children" | "elementType" | "className" | "data-blockid" | "slot" | "title" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React$1.RefAttributes<HTMLDivElement>>;
+
+type TransformProps = {
+    /** The `className` property assigned to the root element of the component. */
+    className?: string;
+    /** The `style` property assigned to the root element of the component. */
+    style?: React$1.CSSProperties;
+    /** The children to render. */
+    children: (options: {
+        style: React$1.CSSProperties;
+    }) => React$1.ReactNode;
+    /** Whether the transform is draggable. */
+    isDraggable?: boolean;
+    /** Whether the transform is resizable. */
+    isResizable?: boolean;
+    /** Whether the transform is rotatable. */
+    isRotatable?: boolean;
+    /** Whether the transform is snappable. */
+    isSnappable?: boolean;
+    /** A callback that will be called when the transform changes. */
+    onTransform?: (transform: OnRender) => void;
+    /** A callback that will be called when the transform starts. */
+    onTransformStart?: (transform: OnRenderStart) => void;
+    /** A callback that will be called when the transform ends. */
+    onTransformEnd?: (transform: OnRender) => void;
+    /** A callback that will be called when the target drag starts. */
+    onDragStart?: (e: OnDragStart) => void;
+    /** A callback that will be called when the target is dragged. */
+    onDrag?: (e: OnDrag) => void;
+    /** A callback that will be called when the target drag ends. */
+    onDragEnd?: (e: OnDragEnd) => void;
+    /** A callback that will be called when the target resize starts. */
+    onResizeStart?: (e: OnResizeStart) => void;
+    /** A callback that will be called when the target is resized. */
+    onResize?: (e: OnResize) => void;
+    /** A callback that will be called when the target resize ends. */
+    onResizeEnd?: (e: OnResizeEnd) => void;
+    /** A callback that will be called when the target rotation starts. */
+    onRotateStart?: (e: OnRotateStart) => void;
+    /** A callback that will be called when the target is rotated. */
+    onRotate?: (e: OnRotate) => void;
+    /** A callback that will be called when the target rotation ends. */
+    onRotateEnd?: (e: OnRotateEnd) => void;
+    /** A callback that will be called when the target is snapped. */
+    onSnap?: (e: OnSnap) => void;
+    /** A callback that will be called when the child is double clicked. */
+    onDoubleClick?: (e: React$1.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /** A list of selectors relative to which the guidelines will be rendered. */
+    elementGuidelines?: string[];
+    /**
+     * Set directions to show the control box.
+     *
+     * @default false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise
+     */
+    renderDirections?: boolean | ("n" | "nw" | "ne" | "s" | "se" | "sw" | "e" | "w")[];
+    /**
+     * Whether the anchor should be hidden when dragging.
+     *
+     * @default true
+     */
+    hideAnchorOnDrag?: boolean;
+    /** The `title` property assigned to the root element of the component. */
+    title: string;
+    /** The position of the rotation anchor. */
+    rotationPosition?: RotationPosition;
+    /**
+     * Degree angles to snap to rotation
+     *
+     * @default [ ]
+     */
+    snapRotationDegrees?: number[];
+    /**
+     * Snap works if `abs(current rotation - snapRotationDegrees) <
+     * snapRotationThreshold`.
+     *
+     * @default 5
+     */
+    snapRotationThreshold?: number;
+    /** Whether the transform should be updated automatically. */
+    autoUpdate?: boolean;
+    /** The element ref, selector or element to which the transform will be bound. */
+    bound?: React$1.RefObject<HTMLElement> | string | HTMLElement;
+    /** The element ref, selector or element that is it's scrollable ancestor. */
+    scrollableAncestor?: React$1.RefObject<HTMLElement> | string | HTMLElement;
+    /**
+     * Whether to prevent bubbling of events like mousedown, touchstart, etc.
+     *
+     * @default false
+     */
+    stopPropagation?: boolean;
+    /**
+     * Whether to call preventDefault on touchstart or mousedown
+     *
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * The default transformOrigin of the target can be set in advance.
+     *
+     * @default ""
+     */
+    transformOrigin?: Array<string | number> | string | "";
+};
+
+declare const Transform: React$1.ForwardRefExoticComponent<TransformProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ImageDropZoneProps extends Omit<SharedFileUploadProps, "label" | "variant">, Omit<DropOptions, "ref" | "getDropOperation" | "hasDropButton" | "getDropOperationForPoint">, Omit<ClipboardProps, "getItems" | "onCut" | "onCopy">, AriaLabelingProps {
+    /**
+     * The initial image to display. This will be used as the `src` attribute of
+     * the `<img>` element. You will be able to choose a new image.
+     */
+    defaultImageSrc?: string;
+    /**
+     * The image to display. This will be used as the `src` attribute of the
+     * `<img>` element and will not be able to be changed from within the
+     * component. Basically, this makes the component controlled.
+     */
+    imageSrc?: string;
+    /**
+     * The alt text to display for the image. This will be used as the `alt`
+     * attribute of the `<img>`. element. If no `imageAlt` is provided, the
+     * `label` will be used.
+     */
+    imageAlt?: string;
+    /** The label to display for the picker button. */
+    pickerButtonLabel?: string;
+    /** The label to display for the remove button. */
+    removeButtonLabel?: string;
+    /**
+     * Whether to show the checkered background behind the image. This is useful
+     * when the image has transparency.
+     *
+     * @default true
+     */
+    includeCheckeredBackground?: boolean;
+    /** Whether the component is inlined. */
+    isInline?: boolean;
+}
+
+declare const ImageDropZone: React$1.ForwardRefExoticComponent<ImageDropZoneProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+interface PreviewProps extends StylingProps, AriaLabelingProps {
+    /**
+     * Whether the preview should be displayed inline or not. This is just a
+     * visual change, the component will still behave the same.
+     *
+     * @default true
+     */
+    isInline?: boolean;
+    /**
+     * The image to display in the preview. This can be a URL or a base64 encoded
+     * string.
+     */
+    imageSrc?: string;
+    /** The alt text for the image. */
+    imageAlt?: string;
+    /** The SVG to display in the preview. This can be a React element or a string. */
+    svgSrc?: string | React$1.ReactElement;
+    /** Whether the preview should be disabled or not. */
+    isDisabled?: boolean;
+    /**
+     * An array of action button props to display in the preview. These props are
+     * passed to the [`ActionButton`](/?path=/docs/core-actionbutton--docs)
+     * component.
+     */
+    actionButtons?: ActionButtonProps[];
+    /** The text to display in the preview. */
+    textValue?: string;
+    /** The style of the text. */
+    textStyle?: React$1.CSSProperties;
+}
+
+declare const Preview: React$1.ForwardRefExoticComponent<PreviewProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface RadioGroupProps extends StylingProps, Omit<AriaRadioGroupProps, "description" | "errorMessage" | "isRequired"> {
+    /**
+     * The position of the label relative to the input.
+     *
+     * @default top
+     */
+    labelPosition?: "top" | "start";
+    /**
+     * The list of items to render in the radio group. Items have the following
+     * shape:
+     *
+     * ```ts
+     * export type ListOption = {
+     *   id: string;
+     *   label: string;
+     *   description?: string;
+     *   icon?: React.FC<IconProps>;
+     * };
+     * ```
+     */
+    items: ListOption[];
+    /**
+     * Render item option
+     *
+     * @typedef {Object} RenderItemOptions
+     * @property {boolean} isFocusVisible - Whether the focus ring is visible.
+     * @property {boolean} isFocused - Whether the option is focused.
+     * @property {boolean} isSelected - Whether the option is selected.
+     * @property {boolean} isHovered - Whether the option is hovered.
+     * @property {boolean} isDisabled - Whether the option is disabled.
+     */
+    /**
+     * The custom render function for the radio group options.
+     *
+     * @param {ListOption} item The item to render.
+     * @param {RenderItemOptions} options The options for rendering the item.
+     */
+    renderOption?: (item: ListOption, options: {
+        isFocusVisible: boolean;
+        isFocused: boolean;
+        isSelected: boolean;
+        isHovered: boolean;
+        isDisabled: boolean;
+        optionLabelPosition: "start" | "end";
+    }) => React$1.ReactNode;
+    /** The class name for the group container. */
+    groupContainerClassName?: string;
+    /** The style for the group container. */
+    groupContainerStyle?: React$1.CSSProperties;
+    /** The ids of the items that are disabled. */
+    disabledValues?: string[];
+    /**
+     * The position of the label of individual radio buttons.
+     *
+     * @default end
+     */
+    optionLabelPosition?: "start" | "end";
+    /** The className applicable to the label. */
+    labelClassName?: string;
+    /** The style applicable to the label. */
+    labelStyle?: React$1.CSSProperties;
+}
+
+declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ModalProps extends OverlayTriggerProps {
+}
+interface ModalContentProps extends AriaModalOverlayProps, StylingProps {
+    children: React$1.ReactNode | ((props: {
+        close: () => void;
+    }) => React$1.ReactNode);
+}
+
+declare const Modal: React$1.FC<ModalProps>;
+
+declare const ModalContent: React$1.FC<ModalContentProps>;
+
+declare const ModalTrigger: React$1.FC;
+
+declare const ModalClose: React$1.FC;
+
+interface MessageFormatProps {
+    /**
+     * By default `<MessageFormat>` will render the formatted string into a
+     * `<React.Fragment>`. If you need to customize rendering, you can either wrap
+     * it with another React element (recommended), specify a different tagName
+     * (e.g., 'div')
+     */
+    elementType?: React$1.ElementType | "div" | "span";
+    /** The id of the message to format. */
+    id: string;
+    /** The default message to use if the message id is not found. */
+    defaultMessage?: string;
+    /** The values to use for formatting the message. */
+    values?: Record<string, string | number | boolean | null | undefined>;
+}
+
+declare const MessageFormat: React$1.FC<MessageFormatProps>;
+
+interface GroupProps extends StylingProps, AriaLabelingProps {
+    /**
+     * The `role` property specifies the accessibility `role` for the group. By
+     * default, it is set to 'group'. If the contents of the group are important
+     * enough to be included in the page table of contents, use 'region'. If the
+     * group is visual only and does not represent a semantic grouping of
+     * controls, use 'presentation'.
+     *
+     * @default group
+     */
+    role?: "group" | "region" | "presentation";
+    /** Whether the group is disabled. */
+    isDisabled?: boolean;
+    /** The children to render. */
+    children: React.ReactNode;
+}
+
+declare const Group: React$1.ForwardRefExoticComponent<GroupProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A hook that creates an IntersectionObserver and observes a target element.
+ *
+ * @example
+ *   ```tsx
+ *   import { useIntersectionObserver } from "@baseline-ui/core";
+ *
+ *   const MyComponent = () => {
+ *    const ref = useRef(null);
+ *
+ *    const onIntersect = (entry) => {
+ *      console.log(entry);
+ *    };
+ *
+ *    useIntersectionObserver({ ref, onIntersect });
+ *
+ *    return <div ref={ref}>Hello world</div>;
+ *   };
+ *   ```;
+ *
+ * @param {IntersectionObserverOptions} options - The options for the
+ *   IntersectionObserver.
+ * @param {React.RefObject<HTMLElement>} options.ref - The ref of the target
+ *   element to observe.
+ * @param {(entry: IntersectionObserverEntry) => void} options.onIntersect - The
+ *   function to call when the target element intersects the root element.
+ * @param {boolean} options.isDisabled - Whether the IntersectionObserver should
+ *   be disabled.
+ * @param {number | number[]} options.threshold - The threshold(s) at which to
+ *   trigger the onIntersect function.
+ * @param {string} options.rootMargin - The margin around the root element.
+ * @param {React.RefObject<HTMLElement>} options.root - The ref of the root
+ *   element to observe.
+ */
+declare function useIntersectionObserver({ ref, onIntersect, isDisabled, threshold, rootMargin, root, }: IntersectionObserverOptions): void;
+interface IntersectionObserverOptions {
+    ref: React$1.RefObject<HTMLElement>;
+    onIntersect: (entry: IntersectionObserverEntry) => void;
+    root?: React$1.RefObject<HTMLElement>;
+    rootMargin?: string;
+    threshold?: number;
+    isDisabled?: boolean;
+}
+
+/**
+ * A hook that observes the size changes of a DOM element using the
+ * ResizeObserver API.
+ *
+ * @example
+ *   ```tsx
+ *   const ref = useRef<HTMLDivElement>(null);
+ *
+ *   const { size } = useResizeObserver({
+ *    ref,
+ *    onResize: (entry) => {
+ *    // do something
+ *    },
+ *    isDisabled: false,
+ *   });
+ *   ```;
+ *
+ * @param {Object} options - The options object.
+ * @param {React.RefObject<HTMLElement>} options.ref - The ref object that
+ *   points to the observed element.
+ * @param {Function} options.onResize - The callback function that is called
+ *   when the element is resized.
+ * @param {boolean} options.isDisabled - A flag that indicates whether the
+ *   observer is disabled.
+ * @returns {Object} An object that contains the size of the observed element.
+ */
+declare function useResizeObserver({ ref, onResize, isDisabled, }: ResizeObserverOptions): {
+    size: {
+        width: number;
+        height: number;
+    } | undefined;
+};
+interface ResizeObserverOptions {
+    ref: React$1.RefObject<HTMLElement>;
+    onResize?: (entry: ResizeObserverEntry) => void;
+    isDisabled?: boolean;
+}
+
+/**
+ * A custom hook that loads an image and returns its loading state and props.
+ *
+ * @example
+ *   ```tsx
+ *   const { isLoaded, hasError, isLoading, imgProps } = useImage({
+ *    src: "https://via.placeholder.com/150",
+ *    alt: "Placeholder image",
+ *   });
+ *   ```;
+ *
+ * @param {Object} options - The options object.
+ * @param {string} options.src - The image source URL.
+ * @param {string} options.alt - The image alt text.
+ * @returns {Object} An object containing the image loading state and props.
+ * @returns {boolean} IsLoaded - Whether the image has loaded.
+ * @returns {boolean} HasError - Whether there was an error loading the image.
+ * @returns {boolean} IsLoading - Whether the image is currently loading.
+ * @returns {Object} ImgProps - The image props to be passed to the `img`
+ *   element.
+ * @returns {string} ImgProps.src - The image source URL, or `undefined` if the
+ *   image hasn't loaded yet.
+ * @returns {string} ImgProps.alt - The image alt text.
+ */
+declare function useImage({ src, alt }: {
+    src?: string;
+    alt: string;
+}): {
+    isLoaded: boolean;
+    hasError: boolean;
+    isLoading: boolean;
+    imgProps: {
+        src?: string;
+        alt: string;
+    };
+};
+
+/**
+ * A hook that provides undo and redo functionality for a given state.
+ *
+ * @example
+ *   ```tsx
+ *   const { state, push, undo, redo, pastStates, futureStates, canUndo, canRedo } = useUndoRedo({
+ *     onAction: (state, action) => {
+ *     // do something
+ *     },
+ *   });
+ *
+ *   // push a new state
+ *   push({ foo: "bar" });
+ *
+ *   // undo the last state
+ *   undo();
+ *
+ *   // redo the last state
+ *   redo();
+ *   ```;
+ *
+ * @template T The type of the state object.
+ * @param initialState The initial state object.
+ * @param options Additional options for the hook.
+ * @param options.isDisabled Whether the undo/redo functionality should be
+ *   disabled.
+ * @param options.onAction A callback function that is called whenever an undo
+ *   or redo action is performed.
+ * @returns An object containing the current state, undo and redo functions, and
+ *   other related properties.
+ */
+declare const useUndoRedo: <T>(initialState: T | undefined, { isDisabled, onAction, }: {
+    isDisabled?: boolean | undefined;
+    onAction?: ((state: T, action: "UNDO" | "REDO") => void) | undefined;
+}) => {
+    state: T;
+    push: (newState: T) => void;
+    undo: () => void;
+    redo: () => void;
+    pastStates: T[];
+    futureStates: T[];
+    canUndo: boolean;
+    canRedo: boolean;
+};
+
+/**
+ * This hook returns true if the component is being rendered for the first time.
+ * This is useful for avoiding side effects on the first render inside of
+ * useEffect.
+ *
+ * @example
+ *   ```tsx
+ *   const isFirstRender = useIsFirstRender();
+ *
+ *   useEffect(() => {
+ *      if (isFirstRender) return;
+ *      // do something
+ *      return () => {
+ *        // do something on unmount
+ *      };
+ *   }, [isFirstRender]);
+ *   ```;
+ *
+ * @returns Whether or not the component is being rendered for the first time
+ */
+declare function useIsFirstRender(): boolean;
+
+/**
+ * A hook that provides internationalization functionality. It returns a
+ * function to format messages and the current locale. The hook can be used with
+ * or without a messages object. If no messages object is provided, the hook
+ * will use the messages provided by the `I18nProvider`. If a messages object is
+ * provided, the hook will use those messages instead of the ones provided by
+ * the `I18nProvider`.
+ *
+ * @example
+ *   ```tsx
+ *   import { useI18n } from "@baseline-ui/core";
+ *
+ *   const messages = {
+ *    en: { hello: "Hello" },
+ *    fr: { hello: "Bonjour" },
+ *   };
+ *
+ *   const MyComponent = () => {
+ *    const { formatMessage, locale } = useI18n(messages);
+ *
+ *   return (
+ *    <div>
+ *      <p>{formatMessage("hello")}</p>
+ *      <p>{locale}</p>
+ *    </div>
+ *    )};
+ *   ```;
+ *
+ * @template T - A type that represents the shape of the translation messages.
+ * @param {Object<string, T>} [messages] - An optional object containing
+ *   translation messages for different languages.
+ * @returns {I18nResult<T>} An object containing a function to format messages
+ *   and the current locale.
+ */
+declare function useI18n<T extends Record<string, string>>(messages?: {
+    [lang: string]: T;
+}): I18nResult<T>;
+interface I18nResult<T extends LocalizedStrings[keyof LocalizedStrings]> {
+    formatMessage: (id: keyof T | MessageDescriptor<T>, values?: {
+        [p: string]: any;
+    }) => string;
+    locale: Locale;
+}
+interface MessageDescriptor<T extends LocalizedStrings[keyof LocalizedStrings]> {
+    id: keyof T;
+    defaultMessage?: string;
+}
+/**
+ * Defines a set of messages for use with the `useI18n` hook.
+ *
+ * @param messages An object containing message descriptors.
+ * @returns An object containing the message descriptors with their keys as
+ *   property names.
+ */
+declare function defineMessages<T extends LocalizedStrings[keyof LocalizedStrings]>(messages: {
+    [id: string]: MessageDescriptor<T>;
+}): {
+    [k: string]: keyof T;
+};
+
+/**
+ * A hook that uses a MutationObserver to watch for changes to the DOM.
+ *
+ * @example
+ *   ```tsx
+ *   const targetRef = React.useRef<HTMLDivElement>(null);
+ *
+ *   useMutationObserver(targetRef.current, { attributes: true }, (mutations) => {
+ *    console.log(mutations);
+ *    // do something with the mutations
+ *    // ...
+ *   });
+ *   ```;
+ *
+ * @param target The element to observe for changes.
+ * @param options The options to pass to the MutationObserver.
+ * @param callback The callback to call when a mutation occurs.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+ */
+declare function useMutationObserver(target: Element | null, options: MutationObserverInit, callback: MutationCallback): MutationObserver | null;
+
+/**
+ * Returns the current window size. This is a custom hook that uses the
+ * `window.addEventListener` API to listen for window resize events. It returns
+ * the current window size as an object with `width` and `height` properties.
+ *
+ * @returns The current window size.
+ */
+declare function useWindowSize(): {
+    width: number;
+    height: number;
+};
+
+type SetValue<T> = (value: T | ((val: T) => T)) => void;
+/**
+ * A hook to persist a value to localStorage.
+ *
+ * @example
+ *   ```tsx
+ *   function MyComponent() {
+ *    const [value, setValue] = useLocalStorage("my-value", "default-value");
+ *    return (
+ *    <input value={value} onChange={e => setValue(e.target.value)} />
+ *    );
+ *   }
+ *   ```;
+ *
+ * @param key The localStorage key to use
+ * @param initialValue The initial value to use if the key is not found in
+ *   localStorage
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T): [T, SetValue<T>];
+
+export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionButton, ActionButtonProps, ActionIconButton, ActionIconButtonProps, Avatar, AvatarProps, BlockProps, Checkbox, CheckboxProps, ColorInput, ColorInputProps, ColorPreset, ColorSwatch, DateFormat, DateFormatProps, Dialog, DialogProps, DialogTitle, DialogTitleProps, DomNodeRenderer, DomNodeRendererProps, FileUpload, FileUploadProps, FreehandCanvas, FreehandCanvasProps, Group, GroupProps, I18nProvider, I18nResult, ImageDropZone, ImageDropZoneProps, InlineAlert, InlineAlertProps, Link, LinkProps, ListBox, ListBoxProps, ListOption, Menu, MenuProps, MessageDescriptor, MessageFormat, MessageFormatProps, Modal, ModalClose, ModalContent, ModalContentProps, ModalProps, ModalTrigger, NumberFormat, NumberFormatProps, NumberInput, NumberInputProps, Pagination, PaginationProps, Portal, PortalProps, Preview, PreviewProps, ProgressBar, ProgressBarProps, ProgressSpinner, ProgressSpinnerProps, RadioGroup, RadioGroupProps, Reaction, ReactionProps, SearchInput, SearchInputProps, Select, SelectProps, Separator, SeparatorProps, Slider, SliderProps, StylingProps, Switch, SwitchProps, TabItem, TabItemProps, Tabs, TabsProps, TagGroup, TagGroupProps, Text, TextInput, TextInputProps, TextProps, ThemeProvider, ThemeProviderProps, ToggleButton, ToggleButtonProps, Tooltip, TooltipProps, Transform, TransformProps, assignInlineTheme, defineMessages, useI18n, useImage, useIntersectionObserver, useIsFirstRender, useLocalStorage, useMutationObserver, useResizeObserver, useUndoRedo, useUserPreferences, useWindowSize };