@ariakit/react-core 0.0.1 → 0.1.0

package/esm/dialog/dialog.d.ts

@@ -0,0 +1,120 @@
+import type { ComponentProps, ElementType, KeyboardEvent as ReactKeyboardEvent, RefObject, SyntheticEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { DisclosureContentOptions, DisclosureContentProps } from "../disclosure/disclosure-content.js";
+import type { FocusableOptions } from "../focusable/focusable.js";
+import type { PortalOptions } from "../portal/portal.js";
+import type { As, Props } from "../utils/types.js";
+import type { DialogStore } from "./dialog-store.js";
+/**
+ * Returns props to create a `Dialog` component.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialog({ store });
+ * <Role {...props}>Dialog</Role>
+ * ```
+ */
+export declare const useDialog: import("../utils/types.js").Hook<DialogOptions<"div">>;
+/**
+ * Renders a dialog element.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx
+ * const dialog = useDialogStore();
+ * <button onClick={dialog.toggle}>Open dialog</button>
+ * <Dialog store={dialog}>Dialog</Dialog>
+ * ```
+ */
+export declare const Dialog: import("../utils/types.js").Component<DialogOptions<"div">>;
+export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>, PortalOptions<T>, DisclosureContentOptions<T> {
+    /**
+     * Object returned by the `useDialogStore` hook.
+     */
+    store: DialogStore;
+    /**
+     * Determines whether the dialog is modal. Modal dialogs have distinct states
+     * and behaviors:
+     *   - The `portal`, `backdrop` and `preventBodyScroll` props are set to
+     *     `true`. They can still be manually set to `false`.
+     *   - A visually hidden dismiss button will be rendered if the
+     *     `DialogDismiss` component hasn't been used. This allows screen reader
+     *     users to close the dialog.
+     *   - The focus will be trapped within the dialog.
+     *   - When the dialog is open, the elements outside of the dialog will be
+     *     hidden to assistive technology users using the `aria-hidden` attribute.
+     *   - When using the `Heading` or `DialogHeading` components within the
+     *     dialog, their level will be reset so they start with `h1`.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Determines whether there will be a backdrop behind the dialog. On modal
+     * dialogs, this is `true` by default. Besides a `boolean`, this prop can also
+     * be a React component that will be rendered as the backdrop.
+     * @example
+     * ```jsx
+     * <Dialog backdrop={StyledBackdrop} />
+     * ```
+     */
+    backdrop?: boolean | ElementType<ComponentProps<"div">>;
+    /**
+     * Props that will be passed to the backdrop element if `backdrop` is `true`.
+     */
+    backdropProps?: Omit<DisclosureContentProps, "store">;
+    /**
+     * Determines whether the dialog will be hidden when the user presses the
+     * Escape key.
+     * @default true
+     */
+    hideOnEscape?: BooleanOrCallback<KeyboardEvent | ReactKeyboardEvent>;
+    /**
+     * Determines whether the dialog will be hidden when the user clicks or focus
+     * on an element outside of the dialog.
+     * @default true
+     */
+    hideOnInteractOutside?: BooleanOrCallback<Event | SyntheticEvent>;
+    /**
+     * Determines whether the body scrolling will be prevented when the dialog is
+     * shown.
+     */
+    preventBodyScroll?: boolean;
+    /**
+     * Determines whether an element inside the dialog will receive focus when the
+     * dialog is shown. By default, this is usually the first tabbable element in
+     * the dialog or the dialog itself. The `initialFocusRef` prop can be used to
+     * set a different element to receive focus.
+     * @default true
+     */
+    autoFocusOnShow?: BooleanOrCallback<HTMLElement>;
+    /**
+     * Determines whether an element outside of the dialog will be focused when
+     * the dialog is hidden if another element hasn't been focused in the action
+     * of hiding the dialog (for example, by clicking or tabbing into another
+     * tabbable element outside of the dialog). By default, this is usually the
+     * disclosure element. The `finalFocusRef` prop can be used to define a
+     * different element to be focused.
+     * @default true
+     */
+    autoFocusOnHide?: BooleanOrCallback<HTMLElement>;
+    /**
+     * Specifies the element that will receive focus when the dialog is first
+     * opened. It can be an `HTMLElement` or a `React.RefObject` with an
+     * `HTMLElement`. However, if `autoFocusOnShow` is set to `false`, this prop
+     * will have no effect. If left unset, the dialog will attempt to determine
+     * the initial focus element in the following order:
+     *   1. An element with an `autoFocus` prop.
+     *   2. The first tabbable element inside the dialog.
+     *   3. The dialog element itself.
+     */
+    initialFocus?: HTMLElement | RefObject<HTMLElement> | null;
+    /**
+     * Determines the element that will receive focus once the dialog is closed,
+     * provided that no other element has been focused while the dialog was being
+     * hidden (e.g., by clicking or tabbing into another tabbable element outside
+     * of the dialog). However, if `autoFocusOnHide` is set to `false`, this prop
+     * will have no effect. If left unset, the disclosure element will be used.
+     */
+    finalFocus?: HTMLElement | RefObject<HTMLElement> | null;
+}
+export type DialogProps<T extends As = "div"> = Props<DialogOptions<T>>;

package/esm/dialog/dialog.js

@@ -0,0 +1,32 @@
+import {
+  Dialog,
+  useDialog
+} from "../__chunks/NO5K4U2Q.js";
+import "../__chunks/4U6AOLE4.js";
+import "../__chunks/HLAXMBLL.js";
+import "../__chunks/WO2RXMKK.js";
+import "../__chunks/PU22SOKH.js";
+import "../__chunks/547F7FFZ.js";
+import "../__chunks/NV7HSBKK.js";
+import "../__chunks/2SVAPVVI.js";
+import "../__chunks/HVXLVRRR.js";
+import "../__chunks/7JNF6I52.js";
+import "../__chunks/LFCJQX2O.js";
+import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/EJZ6BVXG.js";
+import "../__chunks/6OMX4H3W.js";
+import "../__chunks/COQHFAEN.js";
+import "../__chunks/LNHZLQEK.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/3OSYJZM5.js";
+import "../__chunks/NDTB3OGK.js";
+import "../__chunks/LDDPB3PY.js";
+import "../__chunks/FFRIGW5T.js";
+import "../__chunks/SDULECC7.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Dialog,
+  useDialog
+};

package/esm/dialog/utils/disable-accessibility-tree-outside.d.ts

@@ -0,0 +1,3 @@
+type Elements = Array<Element | null>;
+export declare function disableAccessibilityTreeOutside(...elements: Elements): () => void;
+export {};

package/esm/dialog/utils/disable-accessibility-tree-outside.js

@@ -0,0 +1,7 @@
+import {
+  disableAccessibilityTreeOutside
+} from "../../__chunks/NV7HSBKK.js";
+import "../../__chunks/HVXLVRRR.js";
+export {
+  disableAccessibilityTreeOutside
+};

package/esm/dialog/utils/disable-pointer-events-outside.d.ts

@@ -0,0 +1,3 @@
+type Elements = Array<Element | null>;
+export declare function disablePointerEventsOutside(...elements: Elements): () => void;
+export {};

package/esm/dialog/utils/disable-pointer-events-outside.js

@@ -0,0 +1,7 @@
+import {
+  disablePointerEventsOutside
+} from "../../__chunks/547F7FFZ.js";
+import "../../__chunks/HVXLVRRR.js";
+export {
+  disablePointerEventsOutside
+};

package/esm/dialog/utils/prepend-hidden-dismiss.d.ts

@@ -0,0 +1 @@
+export declare function prependHiddenDismiss(container: HTMLElement, onClick: () => unknown): () => void;

package/esm/dialog/utils/prepend-hidden-dismiss.js

@@ -0,0 +1,6 @@
+import {
+  prependHiddenDismiss
+} from "../../__chunks/PU22SOKH.js";
+export {
+  prependHiddenDismiss
+};

package/esm/dialog/utils/use-champion-dialog.d.ts

@@ -0,0 +1,6 @@
+import type { DialogStore } from "../dialog-store.js";
+/**
+ * Controls which dialog is the champion that will control global behavior such
+ * as body scrolling and accessibility tree outside.
+ */
+export declare function useChampionDialog(attribute: string, store: DialogStore, enabled?: boolean): () => boolean;

package/esm/dialog/utils/use-champion-dialog.js

@@ -0,0 +1,8 @@
+import {
+  useChampionDialog
+} from "../../__chunks/ZVCQYVEV.js";
+import "../../__chunks/B7MIN7YT.js";
+import "../../__chunks/SXC6BPOF.js";
+export {
+  useChampionDialog
+};

package/esm/dialog/utils/use-focus-on-child-unmount.d.ts

@@ -0,0 +1,6 @@
+import type { DialogStore } from "../dialog-store.js";
+/**
+ * When the focused child gets removed from the DOM, we make sure to move focus
+ * to the dialog.
+ */
+export declare function useFocusOnChildUnmount(store: DialogStore): void;

package/esm/dialog/utils/use-focus-on-child-unmount.js

@@ -0,0 +1,6 @@
+import {
+  useFocusOnChildUnmount
+} from "../../__chunks/WO2RXMKK.js";
+export {
+  useFocusOnChildUnmount
+};

package/esm/dialog/utils/use-hide-on-interact-outside.d.ts

@@ -0,0 +1,6 @@
+import type { DialogOptions } from "../dialog.js";
+type Options = Pick<DialogOptions, "store" | "modal" | "hideOnInteractOutside"> & {
+    nestedDialogs: HTMLElement[];
+};
+export declare function useHideOnInteractOutside({ store, modal, hideOnInteractOutside, nestedDialogs, }: Options): void;
+export {};

package/esm/dialog/utils/use-hide-on-interact-outside.js

@@ -0,0 +1,9 @@
+import {
+  useHideOnInteractOutside
+} from "../../__chunks/HLAXMBLL.js";
+import "../../__chunks/7JNF6I52.js";
+import "../../__chunks/B7MIN7YT.js";
+import "../../__chunks/SXC6BPOF.js";
+export {
+  useHideOnInteractOutside
+};

package/esm/dialog/utils/use-nested-dialogs.d.ts

@@ -0,0 +1,10 @@
+import type { WrapElement } from "../../utils/types.js";
+import type { DialogStore } from "../dialog-store.js";
+/**
+ * Handles nested dialogs.
+ */
+export declare function useNestedDialogs(store: DialogStore, modal?: boolean): {
+    nestedDialogs: HTMLElement[];
+    openModals: HTMLElement[];
+    wrapElement: WrapElement;
+};

package/esm/dialog/utils/use-nested-dialogs.js

@@ -0,0 +1,8 @@
+import {
+  useNestedDialogs
+} from "../../__chunks/EJZ6BVXG.js";
+import "../../__chunks/B7MIN7YT.js";
+import "../../__chunks/SXC6BPOF.js";
+export {
+  useNestedDialogs
+};

package/esm/dialog/utils/use-prevent-body-scroll.d.ts

@@ -0,0 +1,2 @@
+import type { DialogStore } from "../dialog-store.js";
+export declare function usePreventBodyScroll(store: DialogStore, enabled?: boolean): void;

package/esm/dialog/utils/use-prevent-body-scroll.js

@@ -0,0 +1,9 @@
+import {
+  usePreventBodyScroll
+} from "../../__chunks/LFCJQX2O.js";
+import "../../__chunks/ZVCQYVEV.js";
+import "../../__chunks/B7MIN7YT.js";
+import "../../__chunks/SXC6BPOF.js";
+export {
+  usePreventBodyScroll
+};

package/esm/dialog/utils/use-previous-mouse-down-ref.d.ts

@@ -0,0 +1 @@
+export declare function usePreviousMouseDownRef(enabled?: boolean): import("react").MutableRefObject<EventTarget | null | undefined>;

package/esm/dialog/utils/use-previous-mouse-down-ref.js

@@ -0,0 +1,6 @@
+import {
+  usePreviousMouseDownRef
+} from "../../__chunks/7JNF6I52.js";
+export {
+  usePreviousMouseDownRef
+};

package/esm/dialog/utils/walk-tree-outside.d.ts

@@ -0,0 +1,4 @@
+type Elements = Array<Element | null>;
+export declare function isValidElement(element: Element, ignoredElements: Elements): boolean;
+export declare function walkTreeOutside(elements: Elements, callback: (element: Element) => void): void;
+export {};

package/esm/dialog/utils/walk-tree-outside.js

@@ -0,0 +1,8 @@
+import {
+  isValidElement,
+  walkTreeOutside
+} from "../../__chunks/HVXLVRRR.js";
+export {
+  isValidElement,
+  walkTreeOutside
+};

package/esm/disclosure/disclosure-content.d.ts

@@ -0,0 +1,32 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { DisclosureStore } from "./disclosure-store.js";
+/**
+ * Returns props to create a `DislosureContent` component.
+ * @see https://ariakit.org/components/disclosure
+ * @example
+ * ```jsx
+ * const store = useDisclosureStore();
+ * const props = useDisclosureContent({ store });
+ * <Disclosure store={store}>Disclosure</Disclosure>
+ * <Role {...props}>Content</Role>
+ * ```
+ */
+export declare const useDisclosureContent: import("../utils/types.js").Hook<DisclosureContentOptions<"div">>;
+/**
+ * Renders an element that can be shown or hidden.
+ * @see https://ariakit.org/components/disclosure
+ * @example
+ * ```jsx
+ * const disclosure = useDisclosureStore();
+ * <Disclosure store={disclosure}>Disclosure</Disclosure>
+ * <DisclosureContent store={disclosure}>Content</DisclosureContent>
+ * ```
+ */
+export declare const DisclosureContent: import("../utils/types.js").Component<DisclosureContentOptions<"div">>;
+export interface DisclosureContentOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Object returned by the `useDisclosureStore` hook.
+     */
+    store: DisclosureStore;
+}
+export type DisclosureContentProps<T extends As = "div"> = Props<DisclosureContentOptions<T>>;

package/esm/disclosure/disclosure-content.js

@@ -0,0 +1,11 @@
+import {
+  DisclosureContent,
+  useDisclosureContent
+} from "../__chunks/FFRIGW5T.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  DisclosureContent,
+  useDisclosureContent
+};

package/esm/disclosure/disclosure-store.d.ts

@@ -0,0 +1,29 @@
+import * as Core from "@ariakit/core/disclosure/disclosure-store";
+import type { Store } from "../utils/store.js";
+export declare function useDisclosureStoreOptions(_props: DisclosureStoreProps): Partial<DisclosureStoreOptions>;
+export declare function useDisclosureStoreProps<T extends DisclosureStore>(store: T, props: DisclosureStoreProps): T;
+/**
+ * Creates a disclosure store.
+ * @see https://ariakit.org/components/disclosure
+ * @example
+ * ```jsx
+ * const disclosure = useDisclosureState();
+ * <Disclosure state={disclosure}>Disclosure</Disclosure>
+ * <DisclosureContent state={disclosure}>Content</DisclosureContent>
+ * ```
+ */
+export declare function useDisclosureStore(props?: DisclosureStoreProps): DisclosureStore;
+export type DisclosureStoreState = Core.DisclosureStoreState;
+export type DisclosureStoreFunctions = Core.DisclosureStoreFunctions;
+export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
+    /**
+     * A callback that gets called when the `open` state changes.
+     * @param open The new open value.
+     * @example
+     * const [open, setOpen] = useState(false);
+     * const disclosure = useDisclosureStore({ open, setOpen });
+     */
+    setOpen?: (open: DisclosureStoreState["open"]) => void;
+}
+export type DisclosureStoreProps = DisclosureStoreOptions & Core.DisclosureStoreProps;
+export type DisclosureStore = DisclosureStoreFunctions & Store<Core.DisclosureStore>;

package/esm/disclosure/disclosure-store.js

@@ -0,0 +1,13 @@
+import {
+  useDisclosureStore,
+  useDisclosureStoreOptions,
+  useDisclosureStoreProps
+} from "../__chunks/OXIHLN45.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  useDisclosureStore,
+  useDisclosureStoreOptions,
+  useDisclosureStoreProps
+};

package/esm/disclosure/disclosure.d.ts

@@ -0,0 +1,42 @@
+import type { MouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { ButtonOptions } from "../button/button.js";
+import type { As, Props } from "../utils/types.js";
+import type { DisclosureStore } from "./disclosure-store.js";
+/**
+ * Returns props to create a `Disclosure` component.
+ * @see https://ariakit.org/components/disclosure
+ * @example
+ * ```jsx
+ * const store = useDisclosureStore();
+ * const props = useDisclosure({ store });
+ * <Role {...props}>Disclosure</Role>
+ * <DisclosureContent store={store}>Content</DisclosureContent>
+ * ```
+ */
+export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureOptions<"button">>;
+/**
+ * Renders an element that controls the visibility of a disclosure content
+ * element.
+ * @see https://ariakit.org/components/disclosure
+ * @example
+ * ```jsx
+ * const disclosure = useDisclosureStore();
+ * <Disclosure store={disclosure}>Disclosure</Disclosure>
+ * <DisclosureContent store={disclosure}>Content</DisclosureContent>
+ * ```
+ */
+export declare const Disclosure: import("../utils/types.js").Component<DisclosureOptions<"button">>;
+export interface DisclosureOptions<T extends As = "button"> extends ButtonOptions<T> {
+    /**
+     * Object returned by the `useDisclosureStore` hook.
+     */
+    store: DisclosureStore;
+    /**
+     * Determines whether `store.toggle()` will be called on click. This is useful
+     * if you want to handle the toggle logic yourself.
+     * @default true
+     */
+    toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+}
+export type DisclosureProps<T extends As = "button"> = Props<DisclosureOptions<T>>;

package/esm/disclosure/disclosure.js

@@ -0,0 +1,14 @@
+import {
+  Disclosure,
+  useDisclosure
+} from "../__chunks/57UTLR6J.js";
+import "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Disclosure,
+  useDisclosure
+};

package/esm/focus-trap/focus-trap-region.d.ts

@@ -0,0 +1,32 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://ariakit.org/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusTrapRegionOptions<"div">>;
+/**
+ * Renders a focus trap region element.
+ * @see https://ariakit.org/components/focus-trap-region
+ * @example
+ * ```jsx
+ * <FocusTrapRegion>
+ *  <Button>click me</Button>
+ *  <Button>trap focus</Button>
+ *  <Button disabled>disabled Button</Button>
+ * </FocusTrapRegion>
+ * ```
+ */
+export declare const FocusTrapRegion: import("../utils/types.js").Component<FocusTrapRegionOptions<"div">>;
+export interface FocusTrapRegionOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * If true, it will trap the focus in the region.
+     * @default false
+     */
+    enabled?: boolean;
+}
+export type FocusTrapRegionProps<T extends As = "div"> = Props<FocusTrapRegionOptions<T>>;

package/esm/focus-trap/focus-trap-region.js

@@ -0,0 +1,13 @@
+import {
+  FocusTrapRegion,
+  useFocusTrapRegion
+} from "../__chunks/2SVAPVVI.js";
+import "../__chunks/NDTB3OGK.js";
+import "../__chunks/SDULECC7.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  FocusTrapRegion,
+  useFocusTrapRegion
+};

package/esm/focus-trap/focus-trap.d.ts

@@ -0,0 +1,23 @@
+import type { As, Props } from "../utils/types.js";
+import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.js";
+/**
+ * Returns props to create a `FocusTrap` component.
+ * @see https://ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * const props = useFocusTrap();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOptions<"span">>;
+/**
+ * Renders a focus trap element.
+ * @see https://ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrap onFocus={focusSomethingElse} />
+ * ```
+ */
+export declare const FocusTrap: import("../utils/types.js").Component<FocusTrapOptions<"span">>;
+export type FocusTrapOptions<T extends As = "span"> = VisuallyHiddenOptions<T>;
+export type FocusTrapProps<T extends As = "span"> = Props<FocusTrapOptions<T>>;

package/esm/focus-trap/focus-trap.js

@@ -0,0 +1,10 @@
+import {
+  FocusTrap,
+  useFocusTrap
+} from "../__chunks/NDTB3OGK.js";
+import "../__chunks/SDULECC7.js";
+import "../__chunks/JE5NWDDX.js";
+export {
+  FocusTrap,
+  useFocusTrap
+};

package/esm/focusable/focusable.d.ts

@@ -0,0 +1,65 @@
+import type { SyntheticEvent } from "react";
+import type { BivariantCallback } from "@ariakit/core/utils/types";
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Focusable` component.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusable();
+ * <Role {...props}>Focusable</Role>
+ * ```
+ */
+export declare const useFocusable: import("../utils/types.js").Hook<FocusableOptions<"div">>;
+/**
+ * Renders an element that can be focused.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * <Focusable>Focusable</Focusable>
+ * ```
+ */
+export declare const Focusable: import("../utils/types.js").Component<FocusableOptions<"div">>;
+export interface FocusableOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Determines whether the focusable element is disabled. If the focusable
+     * element doesn't support the native `disabled` attribute, the
+     * `aria-disabled` attribute will be used instead.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Automatically focus the element when it is mounted. It works similarly to
+     * the native `autoFocus` prop, but solves an issue where the element is given
+     * focus before React effects can run.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the element should be focusable.
+     * @default true
+     */
+    focusable?: boolean;
+    /**
+     * Determines whether the element should be focusable even when it is
+     * disabled.
+     *
+     * This is important when discoverability is a concern. For example:
+     *
+     * > A toolbar in an editor contains a set of special smart paste functions
+     * that are disabled when the clipboard is empty or when the function is not
+     * applicable to the current content of the clipboard. It could be helpful to
+     * keep the disabled buttons focusable if the ability to discover their
+     * functionality is primarily via their presence on the toolbar.
+     *
+     * Learn more on [Focusability of disabled
+     * controls](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_disabled_controls).
+     */
+    accessibleWhenDisabled?: boolean;
+    /**
+     * Custom event handler that is called when the element is focused via the
+     * keyboard or when a key is pressed while the element is focused.
+     */
+    onFocusVisible?: BivariantCallback<(event: SyntheticEvent) => void>;
+}
+export type FocusableProps<T extends As = "div"> = Props<FocusableOptions<T>>;

package/esm/focusable/focusable.js

@@ -0,0 +1,11 @@
+import {
+  Focusable,
+  useFocusable
+} from "../__chunks/5TGAWEHD.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Focusable,
+  useFocusable
+};