@baseline-ui/core 0.58.0 → 0.60.0

package/dist/components/UNSAFE_ListBox/ListBox.types.d.ts

@@ -0,0 +1,84 @@
+import type { StylingProps } from "../../utils";
+import type { ListItem, ListOption, ListSection } from "../shared/types/List";
+import type React from "react";
+import type { AriaListBoxOptions, AriaListBoxProps } from "react-aria";
+import type { ListBoxProps as ComponentListBoxProps, ListBoxItemRenderProps } from "react-aria-components";
+export interface ListHandle {
+    /** Scrolls the listbox to the specified item. */
+    scrollIntoView: (id: string, options?: ScrollIntoViewOptions) => void;
+    /** Imperatively focuses the specified key */
+    setFocusedKey: (key: string) => void;
+}
+export interface UIState {
+    isFocusVisible: boolean;
+    isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isPressed: boolean;
+}
+export interface CollectionOptionRenderProps {
+    /**
+     * The custom render function for the listbox options.
+     *
+     * @param item ListOption
+     * @param options ListBoxItemRenderProps
+     */
+    renderOption?: (item: ListOption, options: ListBoxItemRenderProps) => React.ReactNode;
+    /** The CSS class name for the option. */
+    optionClassName?: string | ((item: ListOption, renderProps: ListBoxItemRenderProps) => string | undefined);
+    /** The style of the option. */
+    optionStyle?: React.CSSProperties | ((item: ListOption, renderProps: ListBoxItemRenderProps) => React.CSSProperties | undefined);
+}
+export interface CollectionSectionRenderProps {
+    /**
+     * The custom render function for the listbox sections.
+     *
+     * @param section ListSection
+     */
+    renderSectionHeader?: (section: ListSection) => React.ReactNode;
+    /** The CSS class name for the section. */
+    sectionClassName?: string | ((section: ListSection) => string | undefined);
+    /** The style of the section. */
+    sectionStyle?: React.CSSProperties | ((section: ListSection) => React.CSSProperties | undefined);
+    /**
+     * Whether to show each section title when provided.
+     *
+     * @default false
+     */
+    showSectionHeader?: boolean;
+    /**
+     * Wether to add initial padding to section titles if shown.
+     *
+     * @default false
+     */
+    withSectionHeaderPadding?: boolean;
+}
+export type CollectionRenderProps = CollectionOptionRenderProps & CollectionSectionRenderProps;
+export interface UNSAFE_ListBoxProps extends StylingProps, Omit<AriaListBoxProps<ListItem> & AriaListBoxOptions<ListItem>, "children" | "linkBehavior" | "isVirtualized" | "keyboardDelegate" | "items">, Pick<ComponentListBoxProps<ListItem>, "dragAndDropHooks" | "orientation" | "layout">, CollectionRenderProps {
+    /**
+     * The items to render in the listbox. Items have the following shape:
+     *
+     * ```ts
+     * export type ListOption = {
+     *   id: string;
+     *   label: string;
+     *   description?: string;
+     *   icon?: React.FC<IconProps>;
+     * };
+     *
+     * export type ListSection = {
+     *   id: string;
+     *   title?: string;
+     *   type: "section";
+     *   children: ListOption[];
+     * };
+     *
+     * type ListItem = ListOption | ListSection;
+     * ```
+     */
+    items?: ListItem[];
+    /** The label for the listbox. */
+    label?: React.ReactNode;
+    /** Handle to access the listbox methods. */
+    listBoxHandle?: React.RefObject<ListHandle>;
+}

package/dist/components/UNSAFE_ListBox/ListBoxUI.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ListOption as ListOptionType, ListSection as ListSectionType } from "../shared/types/List";
+import type { CollectionOptionRenderProps, CollectionSectionRenderProps } from "./ListBox.types";
+import type { ListBoxItemRenderProps, MenuItemRenderProps } from "react-aria-components";
+export declare const ListSection: React.ForwardRefExoticComponent<{
+    section: ListSectionType;
+    componentName?: "ListBox" | "Menu";
+} & CollectionSectionRenderProps & CollectionOptionRenderProps & React.RefAttributes<HTMLDivElement>>;
+interface ListOptionProps extends CollectionOptionRenderProps {
+    item: ListOptionType;
+    componentName?: "ListBox" | "Menu";
+}
+export declare const ListOptionContent: React.FC<(ListBoxItemRenderProps | MenuItemRenderProps) & {
+    item: ListOptionType;
+    selectionIcon?: "checkmark" | "checkbox";
+    componentName?: "ListBox" | "Menu";
+}>;
+export declare const ListOption: React.ForwardRefExoticComponent<ListOptionProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/UNSAFE_ListBox/hooks/useDragAndDrop.d.ts

@@ -0,0 +1,3 @@
+import { useDragAndDrop as useDragAndDropAria } from "react-aria-components";
+import type { ListOption } from "../../shared/types/List";
+export declare const useDragAndDrop: typeof useDragAndDropAria<ListOption>;

package/dist/components/UNSAFE_ListBox/index.d.ts

@@ -0,0 +1,3 @@
+export { UNSAFE_ListBox } from "./ListBox";
+export type { UNSAFE_ListBoxProps } from "./ListBox.types";
+export { useDragAndDrop } from "./hooks/useDragAndDrop";

package/dist/components/Virtualizer/LocaleAwareGridLayout.d.ts

@@ -0,0 +1,17 @@
+import { GridLayout } from "react-aria-components";
+import type { GridLayoutOptions } from "@react-stately/layout";
+/**
+ * A thin GridLayout subclass that injects the locale direction into layout
+ * options via the Virtualizer's `useLayoutOptions` hook.
+ *
+ * All RTL-aware drop-target logic lives in the patched GridLayout itself — this
+ * subclass only bridges React context (useLocale) into the layout engine.
+ *
+ * TODO: Remove this subclass and the subtree GridLayout patch once the upstream
+ * PR is merged: https://github.com/adobe/react-spectrum/pull/9848
+ */
+export declare class LocaleAwareGridLayout extends GridLayout<unknown, GridLayoutOptions> {
+    useLayoutOptions(): {
+        direction: "ltr" | "rtl";
+    };
+}

package/dist/components/Virtualizer/Virtualizer.types.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+import type { VirtualizerProps as AriaVirtualizerProps } from "react-aria-components";
+export type VirtualizerProps<T> = {
+    toVirtualize: "listbox" | "image-gallery";
+    children: React.ReactNode;
+} | AriaVirtualizerProps<T>;

package/dist/components/Virtualizer/index.d.ts

@@ -0,0 +1,36 @@
+import { ListLayout, Size, TableLayout } from "react-aria-components";
+import { LocaleAwareGridLayout } from "./LocaleAwareGridLayout";
+export { ListLayout, GridLayout, WaterfallLayout, TableLayout, Size, Virtualizer, Autocomplete, type VirtualizerProps, type AutocompleteProps, } from "react-aria-components";
+export { LocaleAwareGridLayout } from "./LocaleAwareGridLayout";
+export declare const VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS: {
+    LIST_BOX: {
+        layout: typeof ListLayout;
+        layoutOptions: {
+            rowHeight: number;
+        };
+    };
+    TREE_VIEW: {
+        layout: typeof ListLayout;
+        layoutOptions: {
+            rowHeight: number;
+        };
+    };
+    IMAGE_GALLERY: {
+        layout: typeof LocaleAwareGridLayout;
+        layoutOptions: {
+            minItemSize: Size;
+            maxItemSize: Size;
+            dropIndicatorThickness: number;
+            maxHorizontalSpace: number;
+            minSpace: Size;
+            preserveAspectRatio: boolean;
+        };
+    };
+    TABLE: {
+        layout: typeof TableLayout;
+        layoutOptions: {
+            rowHeight: number;
+            headingHeight: number;
+        };
+    };
+};

package/dist/components/index.d.ts

@@ -0,0 +1,81 @@
+export { Autocomplete, type AutocompleteProps } from "react-aria-components";
+export * from "./ListBox";
+export * from "./ActionButton";
+export * from "./DomNodeRenderer";
+export * from "./Slider";
+export * from "./Switch";
+export * from "./SearchInput";
+export * from "./ThemeProvider";
+export * from "./PortalContainerProvider";
+export * from "./Menu";
+export * from "./Link";
+export * from "./FileUpload";
+export * from "./Separator";
+export * from "./ProgressBar";
+export * from "./TextInput";
+export * from "./Reaction";
+export * from "./Tooltip";
+export * from "./Portal";
+export * from "./ProgressSpinner";
+export * from "./ActionIconButton";
+export * from "./ToggleButton";
+export * from "./Calendar";
+export * from "./Checkbox";
+export * from "./Pagination";
+export * from "./I18nProvider";
+export * from "./NumberFormat";
+export * from "./DateFormat";
+export * from "./Tag";
+export * from "./TagGroup";
+export * from "./Accordion";
+export * from "./Select";
+export * from "./Avatar";
+export * from "./Tabs";
+export * from "./InlineAlert";
+export * from "./NumberInput";
+export * from "./Dialog";
+export * from "./ColorInput";
+export * from "./FreehandCanvas";
+export * from "./Text";
+export * from "./ImageDropZone";
+export * from "./Preview";
+export * from "./RadioGroup";
+export * from "./Modal";
+export * from "./MessageFormat";
+export * from "./Group";
+export * from "./Box";
+export * from "./Popover";
+export * from "./Toolbar";
+export * from "./ToggleIconButton";
+export * from "./Editor";
+export * from "./ScrollControlButton";
+export * from "./AlertDialog";
+export * from "./Markdown";
+export * from "./Drawer";
+export * from "./AudioPlayer";
+export * from "./ImageGallery";
+export * from "./ButtonSelect";
+export * from "./ComboBox";
+export * from "./ColorSwatch";
+export * from "./GridList";
+export * from "./ActionGroup";
+export * from "./ColorSwatchPicker";
+export * from "./TimeField";
+export * from "./TreeView";
+export * from "./Panel";
+export * from "./Toast";
+export * from "./FrameProvider";
+export * from "./DateField";
+export * from "./DeviceProvider";
+export * from "./Icon";
+export * from "./TaggedPagination";
+export * from "./PointPicker";
+export * from "./UNSAFE_ListBox";
+export * from "./Virtualizer";
+export * from "./Code";
+export * from "./Disclosure";
+export * from "./StatusCard";
+export * from "./Actionable";
+export * from "./Kbd";
+export * from "./Table";
+export * from "./Skeleton";

package/dist/components/shared/buttons.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { UIStateOptions } from "../ActionButton/ActionButton.types";
+import type { ActionIconButtonProps } from "../ActionIconButton";
+import type { TooltipProps } from "../Tooltip";
+import type { AriaButtonProps, AriaToggleButtonProps } from "react-aria";
+import type { ToggleState } from "react-stately";
+export declare function useButtonTooltipProps({ tooltip, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: Pick<ActionIconButtonProps, "tooltip" | "aria-label" | "aria-labelledby">, buttonRef: React.RefObject<HTMLButtonElement>): {
+    tooltipProps: TooltipProps | undefined;
+};
+export declare const useCustomButton: (props: AriaButtonProps<"button" | "div"> & Pick<ActionIconButtonProps, "tooltip">) => {
+    buttonProps: React.ComponentProps<"button" | "div">;
+    isPressed: boolean;
+    ref: React.RefObject<HTMLButtonElement>;
+    tooltipProps?: TooltipProps;
+    isFocusVisible: boolean;
+    isFocused: boolean;
+    isHovered: boolean;
+    uiStateOptions: UIStateOptions;
+};
+export declare const useCustomToggleButton: (props: AriaToggleButtonProps<"button" | "div">, state: ToggleState) => {
+    buttonProps: React.ComponentProps<"button" | "div">;
+    isPressed: boolean;
+    ref: React.RefObject<HTMLButtonElement>;
+    isFocusVisible: boolean;
+    isFocused: boolean;
+    isHovered: boolean;
+    uiStateOptions: UIStateOptions<{
+        isSelected?: boolean;
+    }>;
+};

package/dist/components/shared/collection.d.ts

@@ -0,0 +1,3 @@
+import type { ListItem } from "./types/List";
+export declare function getCollectionChildren<T extends ListItem>(item: T): import("react/jsx-runtime").JSX.Element;
+export declare function useCollectionChildren<T extends ListItem>(): (item: T) => import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/components/DragPreviewContent.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { DragItem } from "@react-types/shared";
+interface DragPreviewContentProps {
+    items: DragItem[];
+    containerClassName: string;
+    previewClassName: string;
+    itemDataAttribute: string;
+    showCount?: boolean;
+    renderFallback?: (item: DragItem) => React.ReactNode;
+}
+export declare const DragPreviewContent: React.FC<DragPreviewContentProps>;
+export {};

package/dist/components/shared/components/IconWithTooltip.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ActionIconButtonProps } from "../../ActionIconButton";
+import type { IconProps } from "../../Icon";
+export declare const IconWithTooltip: React.FC<{
+    icon: React.FC<IconProps>;
+    label: string;
+    isFocusable?: boolean;
+} & Pick<ActionIconButtonProps, "tooltip"> & IconProps>;

package/dist/components/shared/components/ListCollectionBuilder.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CollectionRenderProps } from "../../UNSAFE_ListBox/ListBox.types";
+import type { ListItem } from "../types/List";
+import type { BaseCollection } from "@react-aria/collections";
+export declare const ListCollectionBuilder: React.FC<{
+    items?: ListItem[];
+    children: (collection: BaseCollection<ListItem>) => React.ReactNode;
+    listBoxProps?: CollectionRenderProps;
+}>;

package/dist/components/shared/components/OverlayEventLeakPreventionLayer.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+export declare const OverlayEventLeakPreventionLayer: React.FC<{
+    children: React.ReactNode;
+    isOpen: boolean;
+    popoverContentRef: React.RefObject<HTMLDivElement>;
+    portalContainer?: HTMLElement;
+    style?: React.CSSProperties;
+}>;

package/dist/components/shared/components/SharedInput/SharedInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SharedInputProps } from "./SharedInput.types";
+export declare const SharedInput: React.ForwardRefExoticComponent<SharedInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/shared/components/SharedInput/SharedInput.types.d.ts

@@ -0,0 +1,34 @@
+import type { StylingProps } from "../../../../utils";
+import type React from "react";
+import type { AriaTextFieldProps } from "react-aria";
+export interface SharedInputProps extends StylingProps, Pick<AriaTextFieldProps, "isReadOnly" | "isDisabled"> {
+    /** 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";
+    /** The props to apply to the label element. */
+    labelProps?: React.HTMLAttributes<HTMLLabelElement>;
+    /** The props to apply to the input element. */
+    fieldProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** The message to display below the input. */
+    message?: React.ReactNode;
+    /** The content to display inside the input wrapper. */
+    children?: React.ReactNode;
+    /** Whether the input is focused. */
+    isFocused?: boolean;
+    /** The label to display above the input. */
+    label?: React.ReactNode;
+    wrapperRef?: React.Ref<HTMLDivElement>;
+    wrapperClassName?: string;
+    isInvalid?: boolean;
+}

package/dist/components/shared/components/SharedInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./SharedInput";

package/dist/components/shared/tooltips.d.ts

@@ -0,0 +1,11 @@
+import type { TooltipProps } from "../Tooltip";
+interface UseSharedTooltipPropsParams extends Partial<TooltipProps> {
+    /** The label to display in the tooltip. */
+    label?: string;
+    /** Whether to show a tooltip. Accepts a boolean or partial tooltip props. */
+    tooltip?: boolean | Partial<Omit<TooltipProps, "children">>;
+}
+export declare const useSharedTooltipProps: ({ label, tooltip, ...rest }: UseSharedTooltipPropsParams) => {
+    tooltipProps: TooltipProps | undefined;
+};
+export {};

package/dist/components/shared/types/IconComponent.d.ts

@@ -0,0 +1,21 @@
+import type { ActionIconButtonProps } from "../../ActionIconButton";
+import type { IconProps } from "../../Icon";
+import type React from "react";
+export interface IconComponentProps {
+    /** The icon to show at the start of the color input. */
+    icon?: React.FC<IconProps>;
+    /** The aria label for the color input button. */
+    "aria-label": string;
+    /**
+     * Whether to show the tooltip on the main element.
+     *
+     * @default true
+     */
+    tooltip?: ActionIconButtonProps["tooltip"];
+    /**
+     * Whether to show the tooltip on the icon.
+     *
+     * @default true
+     */
+    iconTooltip?: ActionIconButtonProps["tooltip"];
+}

package/dist/components/shared/types/List.d.ts

@@ -0,0 +1,17 @@
+import type { IconProps } from "../../Icon";
+import type React from "react";
+export interface ListOption<T = Record<string, any>> {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.FC<IconProps>;
+    data?: T;
+}
+export interface ListSection<T = Record<string, any>> {
+    id: string;
+    title?: string;
+    children: ListOption<T>[];
+}
+export type ListItem = ListOption | ListSection;
+export declare function isListOption(item?: ListItem | null): item is ListOption;
+export declare function isListSection(item?: ListItem): item is ListSection;

package/dist/hooks/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./useIntersectionObserver";
+export * from "./useResizeObserver";
+export * from "./useImage";
+export * from "./useUndoRedo";
+export * from "./useIsFirstRender";
+export * from "./useI18n";
+export * from "./useMutationObserver";
+export * from "./useLocalStorage";
+export * from "./useTextSelection";
+export * from "./useDevice";
+export * from "./usePortalContainer";
+export * from "./useLiveInteractionModality";
+export * from "./usePreventFocus";

package/dist/hooks/useDevice.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Returns the current device type based on the window width.
+ *
+ * ```jsx
+ * const device = useDevice();
+ *
+ * if (device === "mobile") {
+ *   return <MobileComponent />;
+ * } else if (device === "tablet") {
+ *   return <TabletComponent />;
+ * } else {
+ *   return <DesktopComponent />;
+ * }
+ * ```
+ *
+ * @param element - The element to use to get the owner window. Defaults to
+ *   `document.body`.
+ */
+export declare function useDevice(element?: Element | null): "mobile" | "tablet" | "desktop";
+export type Device = ReturnType<typeof useDevice>;

package/dist/hooks/useI18n.d.ts

@@ -0,0 +1,59 @@
+import type { Locale, LocalizedStrings } from "react-aria";
+/**
+ * A hook that provides internationalization functionality. It returns a
+ * function to format messages and the current locale.
+ *
+ * When both a local `messages` object and provider messages (from
+ * `I18nProvider`) are present, they are merged per locale: provider messages
+ * win on key conflicts, while unmatched local keys are preserved. When only one
+ * source is present the behavior is unchanged (backwards compatible).
+ *
+ * @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 messages - An optional object containing translation messages for
+ *   different locales. When provider messages (from `I18nProvider`) are also
+ *   present, local and provider messages are merged per locale — provider
+ *   values take precedence on key conflicts. If omitted, the hook reads
+ *   entirely from the provider.
+ * @returns {I18nResult<T>} An object containing a function to format messages
+ *   and the current locale.
+ */
+export declare function useI18n<T extends Record<string, string>>(messages?: Record<string, T>): I18nResult<T>;
+export type MessageFormatter<T> = (id: keyof T | MessageDescriptor, values?: Record<string, any>) => string;
+export interface I18nResult<T extends LocalizedStrings[keyof LocalizedStrings]> {
+    formatMessage: MessageFormatter<T>;
+    locale: Locale;
+}
+export interface MessageDescriptor {
+    id: string;
+    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.
+ */
+export declare const defineMessages: <T extends Record<string, {
+    id: string;
+}>>(messages: T) => T;

package/dist/hooks/useImage.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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",
+ *   });
+ *   ```;
+ */
+export declare function useImage({ src, alt }: {
+    src?: string;
+    alt: string;
+}): {
+    isLoaded: boolean;
+    hasError: boolean;
+    isLoading: boolean;
+    imgProps: {
+        src?: string;
+        alt: string;
+    };
+};

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+/**
+ * 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.
+ */
+export declare function useIntersectionObserver({ ref, onIntersect, isDisabled, threshold, rootMargin, root, }: IntersectionObserverOptions): void;
+export interface IntersectionObserverOptions {
+    ref: React.RefObject<HTMLElement>;
+    onIntersect: (entry: IntersectionObserverEntry) => void;
+    root?: React.RefObject<HTMLElement>;
+    rootMargin?: string;
+    threshold?: number;
+    isDisabled?: boolean;
+}

package/dist/hooks/useIsFirstRender.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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
+ */
+export declare function useIsFirstRender(): boolean;

package/dist/hooks/useIsTouchDevice.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns true if the device is a touch device. This is determined by the
+ * `(pointer: coarse)` media query.
+ *
+ * @returns {boolean}
+ */
+export declare function useIsTouchDevice(): boolean;

package/dist/hooks/useLiveInteractionModality.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This hook is used to get the live interaction modality of the user. It is
+ * useful for components that need to know the interaction modality of the user
+ * in real time. This is different from the `useInteractionModality` hook, which
+ * changes modality when a significant event occurs, such as clicking or
+ * pressing a key. It does not change when the user is moving the mouse.
+ *
+ * @param ownerDocument - The owner document to listen to.
+ * @returns The live interaction modality of the user.
+ */
+export declare function useLiveInteractionModality({ ownerDocument, }: {
+    ownerDocument?: Document;
+}): "pointer" | "keyboard";