@ariakit/react-components 0.1.0

package/dist/disclosure-CQ37hPVP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-CQ37hPVP.d.ts","names":["Props","BooleanOrCallback","ElementType","MouseEvent","ButtonOptions","DisclosureStore","TagName","useDisclosure","DisclosureOptions","Hook","Disclosure","DisclosureProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","store","toggleOnClick"],"sources":["../src/disclosure/disclosure.d.ts"],"mappings":";;;;;;;cAKcM,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAY7B;AAd6D,cAcxCC,aAAAA,iCAA8CE,IAAAA,WAAeD,iBAAiB;;;AAAA;AAcnG;;;;;;;;;AAA6I;cAAxHE,UAAAA,GAAaE,KAAAA,EAAOD,eAAe,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvGN,iBAAAA,WAA4BN,WAAAA,GAAcI,OAAAA,UAAiBF,aAAAA,CAAcW,CAAAA;EAAxDA;;;;;;;EAQ9BE,KAAAA,GAAQZ,eAAAA;EARgED;;;;;;;;;;EAmBxEc,aAAAA,GAAgBjB,iBAAAA,CAAkBE,UAAAA,CAAWa,WAAAA;AAAAA;AAAAA,KAErCL,eAAAA,WAA0BT,WAAAA,GAAcI,OAAAA,IAAWN,KAAAA,CAAMe,CAAAA,EAAGP,iBAAAA,CAAkBO,CAAAA"}

package/dist/disclosure-content-BbPkZgAc.d.ts

@@ -0,0 +1,88 @@
+import { t as DisclosureStore } from "./disclosure-store-BsaBaRKv.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/disclosure/disclosure-content.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+declare function isHidden(mounted: boolean, hidden?: boolean | null, alwaysVisible?: boolean | null): boolean;
+/**
+ * Returns props to create a `DislosureContent` component.
+ * @see https://ariakit.com/components/disclosure
+ * @example
+ * ```jsx
+ * const store = useDisclosureStore();
+ * const props = useDisclosureContent({ store });
+ * <Disclosure store={store}>Disclosure</Disclosure>
+ * <Role {...props}>Content</Role>
+ * ```
+ */
+declare const useDisclosureContent: import("@ariakit/react-utils").Hook<"div", DisclosureContentOptions<"div">>;
+/**
+ * Renders an element that can be shown or hidden by a
+ * [`Disclosure`](https://ariakit.com/components/disclosure) component.
+ * @see https://ariakit.com/components/disclosure
+ * @example
+ * ```jsx {3}
+ * <DisclosureProvider>
+ *   <Disclosure>Disclosure</Disclosure>
+ *   <DisclosureContent>Content</DisclosureContent>
+ * </DisclosureProvider>
+ * ```
+ */
+declare const DisclosureContent: ({
+  unmountOnHide,
+  ...props
+}: DisclosureContentProps) => import("react/jsx-runtime").JSX.Element | null;
+interface DisclosureContentOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useDisclosureStore`](https://ariakit.com/reference/use-disclosure-store)
+   * hook. If not provided, the closest
+   * [`DisclosureProvider`](https://ariakit.com/reference/disclosure-provider)
+   * component's context will be used.
+   */
+  store?: DisclosureStore;
+  /**
+   * Determines whether the content element should remain visible even when the
+   * [`open`](https://ariakit.com/reference/disclosure-provider#open) state is
+   * `false`. If this prop is set to `true`, the `hidden` prop and the `display:
+   * none` style will not be applied, unless explicitly set otherwise.
+   *
+   * This prop is particularly useful when using third-party animation libraries
+   * such as Motion or React Spring, where the element needs to be
+   * visible for exit animations to work.
+   *
+   * Live examples:
+   * - [Dialog with
+   *   Motion](https://ariakit.com/examples/dialog-framer-motion)
+   * - [Menu with
+   *   Motion](https://ariakit.com/examples/menu-framer-motion)
+   * - [Tooltip with
+   *   Motion](https://ariakit.com/examples/tooltip-framer-motion)
+   * - [Dialog with details &
+   *   summary](https://ariakit.com/examples/dialog-details)
+   * @default false
+   */
+  alwaysVisible?: boolean;
+  /**
+   * When set to `true`, the content element will be unmounted and removed from
+   * the DOM when it's hidden.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * - [Standalone Popover](https://ariakit.com/examples/popover-standalone)
+   * - [Animated Select](https://ariakit.com/examples/select-animated)
+   * - [Multi-Select](https://ariakit.com/examples/select-multiple)
+   * @default false
+   */
+  unmountOnHide?: boolean;
+}
+type DisclosureContentProps<T extends ElementType = TagName> = Props<T, DisclosureContentOptions<T>>;
+//#endregion
+export { useDisclosureContent as a, isHidden as i, DisclosureContentOptions as n, DisclosureContentProps as r, DisclosureContent as t };
+//# sourceMappingURL=disclosure-content-BbPkZgAc.d.ts.map

package/dist/disclosure-content-BbPkZgAc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-content-BbPkZgAc.d.ts","names":["Options","Props","ElementType","DisclosureStore","TagName","isHidden","mounted","hidden","alwaysVisible","useDisclosureContent","DisclosureContentOptions","Hook","DisclosureContent","unmountOnHide","DisclosureContentProps","props","JSX","Element","_T","store","T"],"sources":["../src/disclosure/disclosure-content.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,iBACLC,QAAAA,CAASC,OAAAA,WAAkBC,MAAAA,mBAAyBC,aAAAA;;;;AAFvD;AAAA;;;;AACQ;AAC7B;;cAYqBC,oBAAAA,iCAAqDE,IAAAA,QAAYD,wBAAwB;;;;;;AAZJ;AAY1G;;;;AAA8G;AAa9G;cAAqBE,iBAAAA;EAAsBC,aAAAA;EAAAA,GAAkBE;AAAAA,GAASD,sBAAsB,iCAAiCE,GAAAA,CAAIC,OAAAA;AAAAA,UAChHP,wBAAAA,YAAoCR,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EADQ;;;;;;;EASxFmB,KAAAA,GAAQhB,eAAAA;EAT4H;AACxI;;;;;;;;;;;;;;;;;;AA8CiB;AAEjB;EAlBIK,aAAAA;EAkB8BY;;;;;;;;;;;;;;;EAF9BP,aAAAA;AAAAA;AAAAA,KAEQC,sBAAAA,WAAiCZ,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMmB,CAAAA,EAAGV,wBAAAA,CAAyBU,CAAAA"}

package/dist/disclosure-store-BsaBaRKv.d.ts

@@ -0,0 +1,58 @@
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/disclosure/disclosure-store";
+
+//#region src/disclosure/disclosure-store.d.ts
+declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T & {
+  disclosure: DisclosureStore | null | undefined;
+};
+/**
+ * Creates a disclosure store to control the state of
+ * [Disclosure](https://ariakit.com/components/disclosure) components.
+ * @see https://ariakit.com/components/disclosure
+ * @example
+ * ```jsx
+ * const disclosure = useDisclosureStore();
+ *
+ * <Disclosure store={disclosure}>Disclosure</Disclosure>
+ * <DisclosureContent store={disclosure}>Content</DisclosureContent>
+ * ```
+ */
+declare function useDisclosureStore(props?: DisclosureStoreProps): DisclosureStore;
+interface DisclosureStoreState extends Core.DisclosureStoreState {}
+interface DisclosureStoreFunctions extends Pick<DisclosureStoreOptions, "disclosure">, Omit<Core.DisclosureStoreFunctions, "disclosure"> {}
+interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
+  /**
+   * A callback that gets called when the
+   * [`open`](https://ariakit.com/reference/disclosure-provider#open) state
+   * changes.
+   * @example
+   * const [open, setOpen] = useState(false);
+   * const disclosure = useDisclosureStore({ open, setOpen });
+   */
+  setOpen?: (open: DisclosureStoreState["open"]) => void;
+  /**
+   * A callback that gets called when the `mounted` state changes.
+   * @example
+   * const [mounted, setMounted] = useState(false);
+   * const disclosure = useDisclosureStore({ setMounted });
+   */
+  setMounted?: (mounted: DisclosureStoreState["mounted"]) => void;
+  /**
+   * A reference to another disclosure store that controls another disclosure
+   * component to keep them in sync. Element states like `contentElement` and
+   * `disclosureElement` won't be synced. For that, use the
+   * [`store`](https://ariakit.com/reference/disclosure-provider#store) prop
+   * instead.
+   *
+   * Live examples:
+   * - [Command Menu](https://ariakit.com/examples/dialog-combobox-command-menu)
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   */
+  disclosure?: DisclosureStore | null;
+}
+interface DisclosureStoreProps extends DisclosureStoreOptions, Omit<Core.DisclosureStoreProps, "disclosure"> {}
+interface DisclosureStore extends DisclosureStoreFunctions, Omit<Store<Core.DisclosureStore>, "disclosure"> {}
+//#endregion
+export { DisclosureStoreState as a, DisclosureStoreProps as i, DisclosureStoreFunctions as n, useDisclosureStore as o, DisclosureStoreOptions as r, useDisclosureStoreProps as s, DisclosureStore as t };
+//# sourceMappingURL=disclosure-store-BsaBaRKv.d.ts.map

package/dist/disclosure-store-BsaBaRKv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-store-BsaBaRKv.d.ts","names":["Core","Store","useDisclosureStoreProps","T","DisclosureStore","DisclosureStoreProps","store","update","props","disclosure","useDisclosureStore","DisclosureStoreState","DisclosureStoreFunctions","DisclosureStoreOptions","Pick","Omit","setOpen","open","setMounted","mounted"],"sources":["../src/disclosure/disclosure-store.d.ts"],"mappings":";;;;iBAEwBE,uBAAAA,WAAkCF,IAAAA,CAAKI,eAAAA,CAAAA,CAAiBE,KAAAA,EAAOH,CAAAA,EAAGI,MAAAA,cAAoBC,KAAAA,EAAOH,oBAAAA,GAAuBF,CAAAA;EACxIM,UAAAA,EAAYL,eAAAA;AAAAA;;;;;;;;;;;;;iBAcQM,kBAAAA,CAAmBF,KAAAA,GAAQH,oBAAAA,GAAuBD,eAAe;AAAA,UACxEO,oBAAAA,SAA6BX,IAAAA,CAAKW,oBAAoB;AAAA,UAEtDC,wBAAAA,SAAiCE,IAAAA,CAAKD,sBAAAA,iBAAuCE,IAAAA,CAAKf,IAAAA,CAAKY,wBAAAA;AAAAA,UAEvFC,sBAAAA,SAA+Bb,IAAAA,CAAKa,sBAAAA;EAnBjDJ;;;AAA2B;AAc/B;;;;EAcIO,OAAAA,IAAWC,IAAAA,EAAMN,oBAAAA;EAdsBH;;;AAA8C;AACzF;;EAoBIU,UAAAA,IAAcC,OAAAA,EAASR,oBAAAA;EApBmBX;AAAyB;AAEvE;;;;;;;;;;EA+BIS,UAAAA,GAAaL,eAAAA;AAAAA;AAAAA,UAEAC,oBAAAA,SAA6BQ,sBAAAA,EAAwBE,IAAAA,CAAKf,IAAAA,CAAKK,oBAAAA;AAAAA,UAE/DD,eAAAA,SAAwBQ,wBAAAA,EAA0BG,IAAAA,CAAKd,KAAAA,CAAMD,IAAAA,CAAKI,eAAAA"}

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

@@ -0,0 +1,42 @@
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/focus-trap/focus-trap-region.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://ariakit.com/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+declare const useFocusTrapRegion: import("@ariakit/react-utils").Hook<"div", FocusTrapRegionOptions<"div">>;
+/**
+ * Renders a wrapper element that traps the focus inside it when the
+ * [`enabled`](https://ariakit.com/reference/focus-trap-region#enabled) prop is
+ * `true`.
+ * @see https://ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrapRegion>
+ *  <Button>click me</Button>
+ *  <Button>trap focus</Button>
+ *  <Button disabled>disabled Button</Button>
+ * </FocusTrapRegion>
+ * ```
+ */
+declare const FocusTrapRegion: (props: FocusTrapRegionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FocusTrapRegionOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * If true, it will trap the focus in the region.
+   * @default false
+   */
+  enabled?: boolean;
+}
+type FocusTrapRegionProps<T extends ElementType = TagName> = Props<T, FocusTrapRegionOptions<T>>;
+//#endregion
+export { FocusTrapRegion, FocusTrapRegionOptions, FocusTrapRegionProps, useFocusTrapRegion };
+//# sourceMappingURL=focus-trap-region.d.ts.map

package/dist/focus-trap/focus-trap-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-region.d.ts","names":["Options","Props","ElementType","TagName","useFocusTrapRegion","FocusTrapRegionOptions","Hook","FocusTrapRegion","FocusTrapRegionProps","props","ReactElement","JSXElementConstructor","_T","enabled","T"],"sources":["../../src/focus-trap/focus-trap-region.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFY;;;;AACpB;AAAA;;;;AADoB,cAYpBC,kBAAAA,iCAAmDE,IAAAA,QAAYD,sBAAsB;AAA1G;;;;AAA0G;AAe1G;;;;;;;;;AAfA,cAeqBE,eAAAA,GAAkBE,KAAAA,EAAOD,oBAAoB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjHN,sBAAAA,YAAkCH,WAAAA,GAAcC,OAAAA,UAAiBH,OAAAA;EAA3C;;;;EAKnCa,OAAAA;AAAAA;AAAAA,KAEQL,oBAAAA,WAA+BN,WAAAA,GAAcC,OAAAA,IAAWF,KAAAA,CAAMa,CAAAA,EAAGT,sBAAAA,CAAuBS,CAAAA"}

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

@@ -0,0 +1,69 @@
+"use client";
+import { FocusTrap } from "./focus-trap.js";
+import { createElement, createHook, forwardRef, useMergeRefs, useWrapElement } from "@ariakit/react-utils";
+import { getAllTabbableIn, removeUndefinedValues } from "@ariakit/utils";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/focus-trap/focus-trap-region.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FocusTrapRegion` component.
+* @see https://ariakit.com/components/focus-trap-region
+* @example
+* ```jsx
+* const props = useFocusTrapRegion();
+* <Role {...props} />
+* ```
+*/
+const useFocusTrapRegion = createHook(function useFocusTrapRegion({ enabled = false, ...props }) {
+	const ref = useRef(null);
+	props = useWrapElement(props, (element) => {
+		const renderFocusTrap = () => {
+			if (!enabled) return null;
+			return /* @__PURE__ */ jsx(FocusTrap, { onFocus: (event) => {
+				const container = ref.current;
+				if (!container) return;
+				const tabbables = getAllTabbableIn(container, true);
+				const first = tabbables[0];
+				const last = tabbables[tabbables.length - 1];
+				if (!tabbables.length) {
+					container.focus();
+					return;
+				}
+				if (event.relatedTarget === first) last?.focus();
+				else first?.focus();
+			} });
+		};
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			renderFocusTrap(),
+			element,
+			renderFocusTrap()
+		] });
+	}, [enabled]);
+	props = {
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a wrapper element that traps the focus inside it when the
+* [`enabled`](https://ariakit.com/reference/focus-trap-region#enabled) prop is
+* `true`.
+* @see https://ariakit.com/components/focus-trap
+* @example
+* ```jsx
+* <FocusTrapRegion>
+*  <Button>click me</Button>
+*  <Button>trap focus</Button>
+*  <Button disabled>disabled Button</Button>
+* </FocusTrapRegion>
+* ```
+*/
+const FocusTrapRegion = forwardRef(function FocusTrapRegion(props) {
+	return createElement(TagName, useFocusTrapRegion(props));
+});
+//#endregion
+export { FocusTrapRegion, useFocusTrapRegion };
+
+//# sourceMappingURL=focus-trap-region.js.map

package/dist/focus-trap/focus-trap-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-region.js","names":[],"sources":["../../src/focus-trap/focus-trap-region.tsx"],"sourcesContent":["import {\n  useMergeRefs,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { getAllTabbableIn, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useRef } from \"react\";\nimport { FocusTrap } from \"./focus-trap.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FocusTrapRegion` component.\n * @see https://ariakit.com/components/focus-trap-region\n * @example\n * ```jsx\n * const props = useFocusTrapRegion();\n * <Role {...props} />\n * ```\n */\nexport const useFocusTrapRegion = createHook<TagName, FocusTrapRegionOptions>(\n  function useFocusTrapRegion({ enabled = false, ...props }) {\n    const ref = useRef<HTMLType>(null);\n\n    props = useWrapElement(\n      props,\n      (element) => {\n        const renderFocusTrap = () => {\n          if (!enabled) return null;\n          return (\n            <FocusTrap\n              onFocus={(event) => {\n                const container = ref.current;\n                if (!container) return;\n                const tabbables = getAllTabbableIn(container, true);\n                const first = tabbables[0];\n                const last = tabbables[tabbables.length - 1];\n                // Fallbacks to the container element\n                if (!tabbables.length) {\n                  container.focus();\n                  return;\n                }\n                if (event.relatedTarget === first) {\n                  last?.focus();\n                } else {\n                  first?.focus();\n                }\n              }}\n            />\n          );\n        };\n        return (\n          <>\n            {renderFocusTrap()}\n            {element}\n            {renderFocusTrap()}\n          </>\n        );\n      },\n      [enabled],\n    );\n\n    props = {\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a wrapper element that traps the focus inside it when the\n * [`enabled`](https://ariakit.com/reference/focus-trap-region#enabled) prop is\n * `true`.\n * @see https://ariakit.com/components/focus-trap\n * @example\n * ```jsx\n * <FocusTrapRegion>\n *  <Button>click me</Button>\n *  <Button>trap focus</Button>\n *  <Button disabled>disabled Button</Button>\n * </FocusTrapRegion>\n * ```\n */\nexport const FocusTrapRegion = forwardRef(function FocusTrapRegion(\n  props: FocusTrapRegionProps,\n) {\n  const htmlProps = useFocusTrapRegion(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FocusTrapRegionOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * If true, it will trap the focus in the region.\n   * @default false\n   */\n  enabled?: boolean;\n}\n\nexport type FocusTrapRegionProps<T extends ElementType = TagName> = Props<\n  T,\n  FocusTrapRegionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MA4BI,qBAAiC,WAAA,SAAA,mBAAA,EAAA,UAAA,OAAA,GAAA,SAAA;CAEjC,MAAA,MAAQ,OAAA,IACN;SAEQ,eAAA,QAAwB,YAAA;QACvB,wBAAgB;GACrB,IAAA,CAAA,SACE,OAAA;UAE0B,oBAAA,WAAA,EAAA,UAAA,UAAA;IACtB,MAAK,YAAW,IAAA;IAChB,IAAA,CAAA,WAAM;IACN,MAAM,YAAQ,iBAAU,WAAA,IAAA;IACxB,MAAM,QAAO,UAAU;IAEvB,MAAK,OAAA,UAAkB,UAAA,SAAA;QACrB,CAAA,UAAU,QAAM;KAChB,UAAA,MAAA;KACF;IACA;cAGE,kBAAa,OAAA,MAAA,MAAA;SAGlB,OAAA,MAAA;GAEL,EAAA,CAAA;EACA;SAEqB,qBAAA,YAAA,EAAA,UAAA;GAChB,gBAAA;GACA;GACD,gBAAA;EAEN,EACA,CAAC;CAGH,GAAA,CAAA,OAAQ,CAAA;SACH;EACH,GAAA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;MAoBE,kBAAqB,WADH,SAAA,gBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,mBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,31 @@
+import { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/focus-trap/focus-trap.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FocusTrap` component.
+ * @see https://ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * const props = useFocusTrap();
+ * <Role {...props} />
+ * ```
+ */
+declare const useFocusTrap: import("@ariakit/react-utils").Hook<"span", FocusTrapOptions<"span">>;
+/**
+ * Renders a focus trap element.
+ * @see https://ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrap onFocus={focusSomethingElse} />
+ * ```
+ */
+declare const FocusTrap: (props: FocusTrapProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+type FocusTrapOptions<T extends ElementType = TagName> = VisuallyHiddenOptions<T>;
+type FocusTrapProps<T extends ElementType = TagName> = Props<T, FocusTrapOptions<T>>;
+//#endregion
+export { FocusTrap, FocusTrapOptions, FocusTrapProps, useFocusTrap };
+//# sourceMappingURL=focus-trap.d.ts.map

package/dist/focus-trap/focus-trap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.d.ts","names":["Props","ElementType","VisuallyHiddenOptions","TagName","useFocusTrap","FocusTrapOptions","Hook","FocusTrap","FocusTrapProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/focus-trap/focus-trap.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFuD;;;;AAC/D;AAAA;;;;AAD+D,cAY/DC,YAAAA,iCAA6CE,IAAAA,SAAaD,gBAAgB;AAA/F;;;;AAA+F;AAS/F;;;AATA,cASqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,KAC1GN,gBAAAA,WAA2BJ,WAAAA,GAAcE,OAAAA,IAAWD,qBAAAA,CAAsBU,CAAAA;AAAAA,KAC1EJ,cAAAA,WAAyBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/focus-trap/focus-trap.js

@@ -0,0 +1,45 @@
+"use client";
+import { useVisuallyHidden } from "../visually-hidden/visually-hidden.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/focus-trap/focus-trap.tsx
+const TagName = "span";
+/**
+* Returns props to create a `FocusTrap` component.
+* @see https://ariakit.com/components/focus-trap
+* @example
+* ```jsx
+* const props = useFocusTrap();
+* <Role {...props} />
+* ```
+*/
+const useFocusTrap = createHook(function useFocusTrap(props) {
+	props = {
+		"data-focus-trap": "",
+		tabIndex: 0,
+		"aria-hidden": true,
+		...props,
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			...props.style
+		}
+	};
+	props = useVisuallyHidden(props);
+	return props;
+});
+/**
+* Renders a focus trap element.
+* @see https://ariakit.com/components/focus-trap
+* @example
+* ```jsx
+* <FocusTrap onFocus={focusSomethingElse} />
+* ```
+*/
+const FocusTrap = forwardRef(function FocusTrap(props) {
+	return createElement(TagName, useFocusTrap(props));
+});
+//#endregion
+export { FocusTrap, useFocusTrap };
+
+//# sourceMappingURL=focus-trap.js.map

package/dist/focus-trap/focus-trap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.js","names":[],"sources":["../../src/focus-trap/focus-trap.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { VisuallyHiddenOptions } from \"../visually-hidden/visually-hidden.tsx\";\nimport { useVisuallyHidden } from \"../visually-hidden/visually-hidden.tsx\";\n\nconst TagName = \"span\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FocusTrap` component.\n * @see https://ariakit.com/components/focus-trap\n * @example\n * ```jsx\n * const props = useFocusTrap();\n * <Role {...props} />\n * ```\n */\nexport const useFocusTrap = createHook<TagName, FocusTrapOptions>(\n  function useFocusTrap(props) {\n    props = {\n      \"data-focus-trap\": \"\",\n      tabIndex: 0,\n      \"aria-hidden\": true,\n      ...props,\n      style: {\n        // Prevents unintended scroll jumps.\n        position: \"fixed\",\n        top: 0,\n        left: 0,\n        ...props.style,\n      },\n    };\n\n    props = useVisuallyHidden(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders a focus trap element.\n * @see https://ariakit.com/components/focus-trap\n * @example\n * ```jsx\n * <FocusTrap onFocus={focusSomethingElse} />\n * ```\n */\nexport const FocusTrap = forwardRef(function FocusTrap(props: FocusTrapProps) {\n  const htmlProps = useFocusTrap(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport type FocusTrapOptions<T extends ElementType = TagName> =\n  VisuallyHiddenOptions<T>;\n\nexport type FocusTrapProps<T extends ElementType = TagName> = Props<\n  T,\n  FocusTrapOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;MAoBI,eAAQ,WAAA,SAAA,aAAA,OAAA;SACN;EACA,mBAAU;EACV,UAAA;EACA,eAAG;EACH,GAAA;SAEE;GACA,UAAK;GACL,KAAA;GACA,MAAG;GACL,GAAA,MAAA;EACF;CAEA;CAEA,QAAO,kBAAA,KAAA;CAEX,OAAA;;;;;;;;;;MAYE,YAAO,WAAc,SADH,UAAa,OACQ;CACxC,OAAA,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/focusable/focusable-container.d.ts

@@ -0,0 +1,43 @@
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/focusable/focusable-container.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FocusableContainer` component.
+ * @see https://ariakit.com/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusableContainer();
+ * <Role {...props} />
+ * ```
+ */
+declare const useFocusableContainer: import("@ariakit/react-utils").Hook<"div", FocusableContainerOptions<"div">>;
+/**
+ * Renders a div that wraps
+ * [`Focusable`](https://ariakit.com/reference/focusable) components and
+ * controls whether they can be auto-focused.
+ * @see https://ariakit.com/components/focusable
+ * @example
+ * ```jsx
+ * <FocusableContainer autoFocusOnShow={false}>
+ *   <Focusable autoFocus />
+ * </FocusableContainer>
+ * ```
+ */
+declare const FocusableContainer: (props: FocusableContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FocusableContainerOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Determines whether [`Focusable`](https://ariakit.com/reference/focusable)
+   * elements inside the container should be automatically focused when the
+   * container is shown and they have the
+   * [`autoFocus`](https://ariakit.com/reference/focusable#autofocus) prop.
+   * @default true
+   */
+  autoFocusOnShow?: boolean;
+}
+type FocusableContainerProps<T extends ElementType = TagName> = Props<T, FocusableContainerOptions<T>>;
+//#endregion
+export { FocusableContainer, FocusableContainerOptions, FocusableContainerProps, useFocusableContainer };
+//# sourceMappingURL=focusable-container.d.ts.map

package/dist/focusable/focusable-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-container.d.ts","names":["Options","Props","ElementType","TagName","useFocusableContainer","FocusableContainerOptions","Hook","FocusableContainer","FocusableContainerProps","props","ReactElement","JSXElementConstructor","_T","autoFocusOnShow","T"],"sources":["../../src/focusable/focusable-container.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFY;;;;AACpB;AAAA;;;;AADoB,cAYpBC,qBAAAA,iCAAsDE,IAAAA,QAAYD,yBAAyB;AAAhH;;;;AAAgH;AAahH;;;;;;;AAbA,cAaqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,YAAqCH,WAAAA,GAAcC,OAAAA,UAAiBH,OAAAA;EADwE;AAC7J;;;;;;EAQIa,eAAAA;AAAAA;AAAAA,KAEQL,uBAAAA,WAAkCN,WAAAA,GAAcC,OAAAA,IAAWF,KAAAA,CAAMa,CAAAA,EAAGT,yBAAAA,CAA0BS,CAAAA"}

package/dist/focusable/focusable-container.js

@@ -0,0 +1,41 @@
+"use client";
+import { FocusableContext } from "./focusable-context.js";
+import { createElement, createHook, forwardRef, useWrapElement } from "@ariakit/react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/focusable/focusable-container.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FocusableContainer` component.
+* @see https://ariakit.com/components/focusable
+* @example
+* ```jsx
+* const props = useFocusableContainer();
+* <Role {...props} />
+* ```
+*/
+const useFocusableContainer = createHook(function useFocusableContainer({ autoFocusOnShow = true, ...props }) {
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(FocusableContext.Provider, {
+		value: autoFocusOnShow,
+		children: element
+	}), [autoFocusOnShow]);
+	return props;
+});
+/**
+* Renders a div that wraps
+* [`Focusable`](https://ariakit.com/reference/focusable) components and
+* controls whether they can be auto-focused.
+* @see https://ariakit.com/components/focusable
+* @example
+* ```jsx
+* <FocusableContainer autoFocusOnShow={false}>
+*   <Focusable autoFocus />
+* </FocusableContainer>
+* ```
+*/
+const FocusableContainer = forwardRef(function FocusableContainer(props) {
+	return createElement(TagName, useFocusableContainer(props));
+});
+//#endregion
+export { FocusableContainer, useFocusableContainer };
+
+//# sourceMappingURL=focusable-container.js.map

package/dist/focusable/focusable-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-container.js","names":[],"sources":["../../src/focusable/focusable-container.tsx"],"sourcesContent":["import {\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport { FocusableContext } from \"./focusable-context.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FocusableContainer` component.\n * @see https://ariakit.com/components/focusable\n * @example\n * ```jsx\n * const props = useFocusableContainer();\n * <Role {...props} />\n * ```\n */\nexport const useFocusableContainer = createHook<\n  TagName,\n  FocusableContainerOptions\n>(function useFocusableContainer({ autoFocusOnShow = true, ...props }) {\n  props = useWrapElement(\n    props,\n    (element) => (\n      <FocusableContext.Provider value={autoFocusOnShow}>\n        {element}\n      </FocusableContext.Provider>\n    ),\n    [autoFocusOnShow],\n  );\n\n  return props;\n});\n\n/**\n * Renders a div that wraps\n * [`Focusable`](https://ariakit.com/reference/focusable) components and\n * controls whether they can be auto-focused.\n * @see https://ariakit.com/components/focusable\n * @example\n * ```jsx\n * <FocusableContainer autoFocusOnShow={false}>\n *   <Focusable autoFocus />\n * </FocusableContainer>\n * ```\n */\nexport const FocusableContainer = forwardRef(function FocusableContainer(\n  props: FocusableContainerProps,\n) {\n  const htmlProps = useFocusableContainer(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FocusableContainerOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Determines whether [`Focusable`](https://ariakit.com/reference/focusable)\n   * elements inside the container should be automatically focused when the\n   * container is shown and they have the\n   * [`autoFocus`](https://ariakit.com/reference/focusable#autofocus) prop.\n   * @default true\n   */\n  autoFocusOnShow?: boolean;\n}\n\nexport type FocusableContainerProps<T extends ElementType = TagName> = Props<\n  T,\n  FocusableContainerOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;MA0BE,wBACE,WACC,SACC,sBAAC,EAAA,kBAAD,MAAA,GAAA,SAAA;SAAkC,eAAA,QAAA,YAAA,oBAAA,iBAAA,UAAA;;EAEP,UAE5B;CAGH,CAAA,GAAA,CAAA,eAAO,CAAA;CACR,OAAA;;;;;;;;;;;;;;MAkBC,qBAAqB,WADH,SAAA,mBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,sBAAA,KAAA,CAAA"}

package/dist/focusable/focusable-context.d.ts

@@ -0,0 +1,5 @@
+//#region src/focusable/focusable-context.d.ts
+declare const FocusableContext: import("react").Context<boolean>;
+//#endregion
+export { FocusableContext };
+//# sourceMappingURL=focusable-context.d.ts.map

package/dist/focusable/focusable-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-context.d.ts","names":["FocusableContext","Context"],"sources":["../../src/focusable/focusable-context.d.ts"],"mappings":";cAAqBA,gBAAAA,kBAAkCC,OAAO"}

package/dist/focusable/focusable-context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+//#region src/focusable/focusable-context.tsx
+const FocusableContext = createContext(true);
+//#endregion
+export { FocusableContext };
+
+//# sourceMappingURL=focusable-context.js.map

package/dist/focusable/focusable-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-context.js","names":[],"sources":["../../src/focusable/focusable-context.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const FocusableContext = createContext(true);\n"],"mappings":""}

package/dist/focusable/focusable.d.ts

@@ -0,0 +1,2 @@
+import { i as useFocusable, n as FocusableOptions, r as FocusableProps, t as Focusable } from "../focusable-B00tOxtB.js";
+export { Focusable, FocusableOptions, FocusableProps, useFocusable };