@ariakit/react-components 0.1.0

package/dist/composite-hover-C7ul163w.d.ts

@@ -0,0 +1,103 @@
+import { t as CompositeStore } from "./composite-store-DyJc-XRA.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType, MouseEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/composite/composite-hover.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeHover` component. The composite item that
+ * receives these props will get focused on mouse move and lose focus to the
+ * composite base element on mouse leave. This should be combined with the
+ * `CompositeItem` component, the `useCompositeItem` hook or any component/hook
+ * that uses them underneath.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeHover({ store });
+ * <CompositeItem store={store} {...props}>Item</CompositeItem>
+ * ```
+ */
+declare const useCompositeHover: import("@ariakit/react-utils").Hook<"div", CompositeHoverOptions<"div">>;
+/**
+ * Renders an element in a composite widget that receives focus on mouse move
+ * and loses focus to the composite base element on mouse leave.
+ *
+ * This should be combined with the
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) component.
+ * The
+ * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)
+ * and
+ * [`blurOnHoverEnd`](https://ariakit.com/reference/composite-hover#bluronhoverend)
+ * props can be used to customize the behavior.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeHover render={<CompositeItem />}>
+ *       Item
+ *     </CompositeHover>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeHover: (props: CompositeHoverProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeHoverOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+  /**
+   * Determines if the composite item should be _focused_ when hovered over.
+   *
+   * Note that the actual DOM focus will stay on the composite element. This
+   * item will get the
+   * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)
+   * attribute so it can be styled as if it's focused.
+   *
+   * Live examples:
+   * - [Multi-selectable
+   *   Combobox](https://ariakit.com/examples/combobox-multiple)
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * @default true
+   */
+  focusOnHover?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Determines if the composite item should lose focus when the mouse leaves.
+   * By default, this is set to `true` if
+   * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)
+   * is `true`.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   * - [Select with Combobox and
+   *   Tabs](https://ariakit.com/examples/select-combobox-tab)
+   */
+  blurOnHoverEnd?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+}
+type CompositeHoverProps<T extends ElementType = TagName> = Props<T, CompositeHoverOptions<T>>;
+//#endregion
+export { useCompositeHover as i, CompositeHoverOptions as n, CompositeHoverProps as r, CompositeHover as t };
+//# sourceMappingURL=composite-hover-C7ul163w.d.ts.map

package/dist/composite-hover-C7ul163w.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-hover-C7ul163w.d.ts","names":["Options","Props","BooleanOrCallback","ElementType","MouseEvent","ReactMouseEvent","CompositeStore","TagName","useCompositeHover","CompositeHoverOptions","Hook","CompositeHover","CompositeHoverProps","props","ReactElement","JSXElementConstructor","_T","HTMLElement","store","focusOnHover","blurOnHoverEnd","T"],"sources":["../src/composite/composite-hover.d.ts"],"mappings":";;;;;;cAIcO,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAe7B;;;;AAjB2D,cAiBtCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;AAwBxG;;;;;;;;;AAAqJ;AACrJ;;;;;;;;;;;;;AADA,cAAqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,YAAiCN,WAAAA,GAAcI,OAAAA,UAAiBP,OAAAA;EAA1CgB;;;;;;;;EASnCE,KAAAA,GAAQZ,cAAAA;EAsByCW;;;;;;AAmBa;AAElE;;;;;;;;;;;;;;EArBIE,YAAAA,GAAejB,iBAAAA,CAAkBG,UAAAA,CAAgBY,WAAAA;EAqBoBI;;;;AAA0B;;;;;;;;;;;;;;EAF/FD,cAAAA,GAAiBlB,iBAAAA,CAAkBG,UAAAA,CAAgBY,WAAAA;AAAAA;AAAAA,KAE3CL,mBAAAA,WAA8BT,WAAAA,GAAcI,OAAAA,IAAWN,KAAAA,CAAMoB,CAAAA,EAAGZ,qBAAAA,CAAsBY,CAAAA"}

package/dist/composite-item-B4WTelVz.d.ts

@@ -0,0 +1,141 @@
+import { n as CommandOptions } from "./command-DckndCUK.js";
+import { n as CollectionItemOptions } from "./collection-item-C-g2BwVF.js";
+import { t as CompositeStore } from "./composite-store-DyJc-XRA.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, KeyboardEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/composite/composite-item.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeItem` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeItem({ store });
+ * <Role {...props}>Item 1</Role>
+ * ```
+ */
+declare const useCompositeItem: import("@ariakit/react-utils").Hook<"button", CompositeItemOptions<"button">>;
+/**
+ * Renders a focusable item as part of a composite widget. The `tabindex`
+ * attribute is automatically managed by this component based on the
+ * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)
+ * option.
+ *
+ * When this component receives DOM focus or is virtually focused (when the
+ * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)
+ * option is set to `true`), the element will automatically receive the
+ * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)
+ * attribute. This can be used to style the focused item, no matter the focus
+ * approach employed.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeItem: (props: CompositeItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeItemOptions<T extends ElementType = TagName> extends CommandOptions<T>, CollectionItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+  /**
+   * Determines if the item should be registered as part of the collection. If
+   * this is set to `false`, the item won't be accessible via arrow keys.
+   */
+  shouldRegisterItem?: CollectionItemOptions<T>["shouldRegisterItem"];
+  /**
+   * The id that will be used to group items in the same row. This is usually
+   * retrieved by the
+   * [`CompositeRow`](https://ariakit.com/reference/composite-row) component
+   * through context so in most cases you don't need to set it manually.
+   *
+   * Live examples:
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   */
+  rowId?: string;
+  /**
+   * Whether the scroll behavior should be prevented when pressing arrow keys on
+   * the first or the last items.
+   * @deprecated Use CSS
+   * [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin)
+   * instead.
+   * @default false
+   */
+  preventScrollOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Determines if pressing arrow keys while this item is in focus should move
+   * focus to a different item.
+   *
+   * **Note**: To entirely disable focus moving within a composite widget, you
+   * can use the
+   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) prop
+   * on the composite component instead. If you want to control the behavior
+   * _only when arrow keys are pressed_, where
+   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) may
+   * not be applicable, this prop must be set on all composite items because
+   * they each manage their own key presses, as well as on the composite
+   * component itself.
+   * @default true
+   * @example
+   * ```jsx
+   * <Composite moveOnKeyPress={false}>
+   *   <CompositeItem moveOnKeyPress={false} />
+   *   <CompositeItem moveOnKeyPress={false} />
+   * </Composite>
+   * ```
+   */
+  moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * When the `tabbable` prop is set to `true`, the [roving
+   * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)
+   * method is partially disabled for this element. This means that the
+   * `tabIndex` prop won't be assigned `-1` when the item is inactive. In
+   * addition to using arrow keys, users will be able to tab to this element,
+   * leading to the composite widget no longer existing as a single tab stop.
+   *
+   * As per the [ARIA spec](https://w3c.github.io/aria/#composite):
+   *
+   * > Authors **SHOULD** ensure that a composite widget exists as a single
+   * > navigation stop within the larger navigation system of the web page.
+   *
+   * Additionally, as stated in
+   * [RFC-2119](https://www.rfc-editor.org/rfc/rfc2119.txt):
+   *
+   * > **SHOULD** This word, or the adjective "RECOMMENDED", mean that there may
+   * > exist valid reasons in particular circumstances to ignore a particular
+   * > item, but the full implications must be understood and carefully weighed
+   * > before choosing a different course.
+   *
+   * Therefore, while this may be allowed, you should think carefully about the
+   * implications of using this prop.
+   *
+   * **Note**: This prop has no effect when the
+   * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)
+   * option is enabled.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  tabbable?: boolean;
+}
+type CompositeItemProps<T extends ElementType = TagName> = Props<T, CompositeItemOptions<T>>;
+//#endregion
+export { useCompositeItem as i, CompositeItemOptions as n, CompositeItemProps as r, CompositeItem as t };
+//# sourceMappingURL=composite-item-B4WTelVz.d.ts.map

package/dist/composite-item-B4WTelVz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-item-B4WTelVz.d.ts","names":["Props","BooleanOrCallback","ElementType","KeyboardEvent","CollectionItemOptions","CommandOptions","CompositeStore","TagName","useCompositeItem","CompositeItemOptions","Hook","CompositeItem","CompositeItemProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","store","shouldRegisterItem","rowId","preventScrollOnKeyDown","moveOnKeyPress","tabbable"],"sources":["../src/composite/composite-item.d.ts"],"mappings":";;;;;;;;cAMcO,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAF8B,cAatCC,gBAAAA,iCAAiDE,IAAAA,WAAeD,oBAAoB;;;;AAAA;AAyBzG;;;;;;;;;AAAmJ;AACnJ;;;;;;;;;;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BP,WAAAA,GAAcK,OAAAA,UAAiBF,cAAAA,CAAeW,CAAAA,GAAIZ,qBAAAA,CAAsBY,CAAAA;EAkC3Ff;;;;;;;;EAzBzBiB,KAAAA,GAAQZ,cAAAA;EAToCJ;;;;EAc5CiB,kBAAAA,GAAqBf,qBAAAA,CAAsBY,CAAAA;EAdyEA;;;;;;;;;;EAyBpHI,KAAAA;EAgCAE;;;;;;AAgCQ;AAEZ;EAzDID,sBAAAA,GAAyBpB,iBAAAA,CAAkBE,aAAAA,CAAcc,WAAAA;EAyD/BD;;;;;;;;;;;;;;;;;AAAmE;;;;;EAlC7FM,cAAAA,GAAiBrB,iBAAAA,CAAkBE,aAAAA,CAAcc,WAAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCjDM,QAAAA;AAAAA;AAAAA,KAEQX,kBAAAA,WAA6BV,WAAAA,GAAcK,OAAAA,IAAWP,KAAAA,CAAMgB,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}

package/dist/composite-store-DyJc-XRA.d.ts

@@ -0,0 +1,43 @@
+import { i as CollectionStoreOptions, n as CollectionStoreFunctions, o as CollectionStoreState } from "./collection-store-CbwzYsWf.js";
+import { PickRequired } from "@ariakit/utils";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/composite/composite-store";
+
+//#region src/composite/composite-store.d.ts
+declare function useCompositeStoreOptions<T extends Core.CompositeStoreOptions>(props: T): {
+  id: string | undefined;
+} & T;
+declare function useCompositeStoreProps<T extends Core.CompositeStore>(store: T, update: () => void, props: CompositeStoreProps): T;
+/**
+ * Creates a composite store to control the state of
+ * [Composite](https://ariakit.com/components/composite) components.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ *
+ * <Composite store={composite}>
+ *   <CompositeItem>Item</CompositeItem>
+ *   <CompositeItem>Item</CompositeItem>
+ *   <CompositeItem>Item</CompositeItem>
+ * </Composite>
+ * ```
+ */
+declare function useCompositeStore<T extends CompositeStoreItem = CompositeStoreItem>(props: PickRequired<CompositeStoreProps<T>, "items" | "defaultItems">): CompositeStore<T>;
+declare function useCompositeStore(props?: CompositeStoreProps): CompositeStore;
+interface CompositeStoreItem extends Core.CompositeStoreItem {}
+interface CompositeStoreState<T extends CompositeStoreItem = CompositeStoreItem> extends Core.CompositeStoreState<T>, CollectionStoreState<T> {}
+interface CompositeStoreFunctions<T extends CompositeStoreItem = CompositeStoreItem> extends Core.CompositeStoreFunctions<T>, CollectionStoreFunctions<T> {}
+interface CompositeStoreOptions<T extends CompositeStoreItem = CompositeStoreItem> extends Core.CompositeStoreOptions<T>, CollectionStoreOptions<T> {
+  /**
+   * A callback that gets called when the
+   * [`activeId`](https://ariakit.com/reference/composite-provider#activeid)
+   * state changes.
+   */
+  setActiveId?: (activeId: CompositeStoreState<T>["activeId"]) => void;
+}
+interface CompositeStoreProps<T extends CompositeStoreItem = CompositeStoreItem> extends CompositeStoreOptions<T>, Core.CompositeStoreProps<T> {}
+interface CompositeStore<T extends CompositeStoreItem = CompositeStoreItem> extends CompositeStoreFunctions<T>, Store<Core.CompositeStore<T>> {}
+//#endregion
+export { CompositeStoreProps as a, useCompositeStoreOptions as c, CompositeStoreOptions as i, useCompositeStoreProps as l, CompositeStoreFunctions as n, CompositeStoreState as o, CompositeStoreItem as r, useCompositeStore as s, CompositeStore as t };
+//# sourceMappingURL=composite-store-DyJc-XRA.d.ts.map

package/dist/composite-store-DyJc-XRA.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-store-DyJc-XRA.d.ts","names":["Core","Store","PickRequired","CollectionStoreFunctions","CollectionStoreOptions","CollectionStoreState","useCompositeStoreOptions","T","CompositeStoreOptions","props","id","useCompositeStoreProps","CompositeStore","CompositeStoreProps","store","update","useCompositeStore","CompositeStoreItem","CompositeStoreState","CompositeStoreFunctions","setActiveId","activeId"],"sources":["../src/composite/composite-store.d.ts"],"mappings":";;;;;;iBAIwBM,wBAAAA,WAAmCN,IAAAA,CAAKQ,qBAAAA,CAAAA,CAAuBC,KAAAA,EAAOF,CAAAA;EAC1FG,EAAAA;AAAAA,IACAH,CAAAA;AAAAA,iBACoBI,sBAAAA,WAAiCX,IAAAA,CAAKY,cAAAA,CAAAA,CAAgBE,KAAAA,EAAOP,CAAAA,EAAGQ,MAAAA,cAAoBN,KAAAA,EAAOI,mBAAAA,GAAsBN,CAAAA;;;;;;;;;;;;;;;AADpI;iBAiBmBS,iBAAAA,WAA4BC,kBAAAA,GAAqBA,kBAAAA,CAAAA,CAAoBR,KAAAA,EAAOP,YAAAA,CAAaW,mBAAAA,CAAoBN,CAAAA,+BAAgCK,cAAAA,CAAeL,CAAAA;AAAAA,iBAC5JS,iBAAAA,CAAkBP,KAAAA,GAAQI,mBAAAA,GAAsBD,cAAc;AAAA,UACrEK,kBAAAA,SAA2BjB,IAAAA,CAAKiB,kBAAkB;AAAA,UAElDC,mBAAAA,WAA8BD,kBAAAA,GAAqBA,kBAAAA,UAA4BjB,IAAAA,CAAKkB,mBAAAA,CAAoBX,CAAAA,GAAIF,oBAAAA,CAAqBE,CAAAA;AAAAA,UAEjIY,uBAAAA,WAAkCF,kBAAAA,GAAqBA,kBAAAA,UAA4BjB,IAAAA,CAAKmB,uBAAAA,CAAwBZ,CAAAA,GAAIJ,wBAAAA,CAAyBI,CAAAA;AAAAA,UAE7IC,qBAAAA,WAAgCS,kBAAAA,GAAqBA,kBAAAA,UAA4BjB,IAAAA,CAAKQ,qBAAAA,CAAsBD,CAAAA,GAAIH,sBAAAA,CAAuBG,CAAAA;EAxBzGA;;;;;EA8B3Ca,WAAAA,IAAeC,QAAAA,EAAUH,mBAAAA,CAAoBX,CAAAA;AAAAA;AAAAA,UAEhCM,mBAAAA,WAA8BI,kBAAAA,GAAqBA,kBAAAA,UAA4BT,qBAAAA,CAAsBD,CAAAA,GAAIP,IAAAA,CAAKa,mBAAAA,CAAoBN,CAAAA;AAAAA,UAElIK,cAAAA,WAAyBK,kBAAAA,GAAqBA,kBAAAA,UAA4BE,uBAAAA,CAAwBZ,CAAAA,GAAIN,KAAAA,CAAMD,IAAAA,CAAKY,cAAAA,CAAeL,CAAAA"}

package/dist/composite-typeahead-DDhpyKqm.d.ts

@@ -0,0 +1,63 @@
+import { t as CompositeStore } from "./composite-store-DyJc-XRA.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-typeahead.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeTypeahead` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeTypeahead({ store });
+ * <Composite store={store} {...props}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ * </Composite>
+ * ```
+ */
+declare const useCompositeTypeahead: import("@ariakit/react-utils").Hook<"div", CompositeTypeaheadOptions<"div">>;
+/**
+ * Renders a component that adds typeahead functionality to composite
+ * components.
+ *
+ * When the
+ * [`typeahead`](https://ariakit.com/reference/composite-typeahead#typeahead)
+ * prop is enabled, which it is by default, hitting printable character keys
+ * will move focus to the next composite item that begins with the input
+ * characters.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * <CompositeProvider>
+ *   <Composite render={<CompositeTypeahead />}>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeTypeahead: (props: CompositeTypeaheadProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeTypeaheadOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+  /**
+   * When enabled, pressing printable character keys will move focus to the next
+   * composite item that starts with the entered characters.
+   * @default true
+   */
+  typeahead?: boolean;
+}
+type CompositeTypeaheadProps<T extends ElementType = TagName> = Props<T, CompositeTypeaheadOptions<T>>;
+//#endregion
+export { useCompositeTypeahead as i, CompositeTypeaheadOptions as n, CompositeTypeaheadProps as r, CompositeTypeahead as t };
+//# sourceMappingURL=composite-typeahead-DDhpyKqm.d.ts.map

package/dist/composite-typeahead-DDhpyKqm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-typeahead-DDhpyKqm.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeTypeahead","CompositeTypeaheadOptions","Hook","CompositeTypeahead","CompositeTypeaheadProps","props","ReactElement","JSXElementConstructor","_T","store","typeahead","T"],"sources":["../src/composite/composite-typeahead.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAc7B;;;AAhB2D,cAgBtCC,qBAAAA,iCAAsDE,IAAAA,QAAYD,yBAAyB;AAAA;AAqBhH;;;;;;;;;AAA6J;AAC7J;;;;;;;;;AAtBgH,cAqB3FE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,YAAqCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAAjBI;;;;;;AAevD;AAEb;EARIU,KAAAA,GAAQX,cAAAA;EAQuBa;;;;;EAF/BD,SAAAA;AAAAA;AAAAA,KAEQN,uBAAAA,WAAkCP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMe,CAAAA,EAAGV,yBAAAA,CAA0BU,CAAAA"}

package/dist/dialog/dialog-backdrop.d.ts

@@ -0,0 +1,16 @@
+import { t as DialogStore } from "../dialog-store-Cjt12T_Y.js";
+import { r as DialogProps } from "../dialog-C__C-zX2.js";
+
+//#region src/dialog/dialog-backdrop.d.ts
+interface DialogBackdropProps extends Pick<DialogProps, "backdrop" | "alwaysVisible" | "hidden"> {
+  store: DialogStore;
+}
+declare function DialogBackdrop({
+  store,
+  backdrop,
+  alwaysVisible,
+  hidden
+}: DialogBackdropProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { DialogBackdrop };
+//# sourceMappingURL=dialog-backdrop.d.ts.map

package/dist/dialog/dialog-backdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-backdrop.d.ts","names":["DialogStore","DialogProps","DialogBackdropProps","Pick","store","DialogBackdrop","backdrop","alwaysVisible","hidden","JSX","Element"],"sources":["../../src/dialog/dialog-backdrop.d.ts"],"mappings":";;;;UAEUE,mBAAAA,SAA4BC,IAAAA,CAAKF,WAAAA;EACvCG,KAAAA,EAAOJ,WAAAA;AAAAA;AAAAA,iBAEaK,cAAAA,CAAAA;EAAiBD,KAAAA;EAAOE,QAAAA;EAAUC,aAAAA;EAAeC;AAAAA,GAAWN,mBAAAA,+BAAkDO,GAAAA,CAAIC,OAAAA"}

package/dist/dialog/dialog-backdrop.js

@@ -0,0 +1,58 @@
+"use client";
+import { Role } from "../role/role.js";
+import { useDisclosureContent } from "../disclosure/disclosure-content.js";
+import { useDisclosureStore } from "../disclosure/disclosure-store.js";
+import { markAncestor } from "./utils/mark-tree-outside.js";
+import { useSafeLayoutEffect } from "@ariakit/react-utils";
+import { isValidElement, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/dialog/dialog-backdrop.tsx
+function DialogBackdrop({ store, backdrop, alwaysVisible, hidden }) {
+	const ref = useRef(null);
+	const disclosure = useDisclosureStore({ disclosure: store });
+	const contentElement = useStoreState(store, "contentElement");
+	useEffect(() => {
+		const backdrop = ref.current;
+		const dialog = contentElement;
+		if (!backdrop) return;
+		if (!dialog) return;
+		backdrop.style.zIndex = getComputedStyle(dialog).zIndex;
+	}, [contentElement]);
+	useSafeLayoutEffect(() => {
+		const id = contentElement?.id;
+		if (!id) return;
+		const backdrop = ref.current;
+		if (!backdrop) return;
+		return markAncestor(backdrop, id);
+	}, [contentElement]);
+	const props = useDisclosureContent({
+		ref,
+		store: disclosure,
+		role: "presentation",
+		"data-backdrop": contentElement?.id || "",
+		alwaysVisible,
+		hidden: hidden != null ? hidden : void 0,
+		style: {
+			position: "fixed",
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		}
+	});
+	if (!backdrop) return null;
+	if (isValidElement(backdrop)) return /* @__PURE__ */ jsx(Role, {
+		...props,
+		render: backdrop
+	});
+	const Component = typeof backdrop !== "boolean" ? backdrop : "div";
+	return /* @__PURE__ */ jsx(Role, {
+		...props,
+		render: /* @__PURE__ */ jsx(Component, {})
+	});
+}
+//#endregion
+export { DialogBackdrop };
+
+//# sourceMappingURL=dialog-backdrop.js.map

package/dist/dialog/dialog-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-backdrop.js","names":[],"sources":["../../src/dialog/dialog-backdrop.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { useSafeLayoutEffect } from \"@ariakit/react-utils\";\nimport { isValidElement, useEffect, useRef } from \"react\";\nimport { useDisclosureContent } from \"../disclosure/disclosure-content.tsx\";\nimport { useDisclosureStore } from \"../disclosure/disclosure-store.ts\";\nimport { Role } from \"../role/role.tsx\";\nimport type { DialogStore } from \"./dialog-store.ts\";\nimport type { DialogProps } from \"./dialog.tsx\";\nimport { markAncestor } from \"./utils/mark-tree-outside.ts\";\n\ninterface DialogBackdropProps extends Pick<\n  DialogProps,\n  \"backdrop\" | \"alwaysVisible\" | \"hidden\"\n> {\n  store: DialogStore;\n}\n\nexport function DialogBackdrop({\n  store,\n  backdrop,\n  alwaysVisible,\n  hidden,\n}: DialogBackdropProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const disclosure = useDisclosureStore({ disclosure: store });\n  const contentElement = useStoreState(store, \"contentElement\");\n\n  useEffect(() => {\n    const backdrop = ref.current;\n    const dialog = contentElement;\n    if (!backdrop) return;\n    if (!dialog) return;\n    backdrop.style.zIndex = getComputedStyle(dialog).zIndex;\n  }, [contentElement]);\n\n  // Mark the backdrop element as an ancestor of the dialog, otherwise clicking\n  // on it won't close the dialog when the dialog uses portal, in which case\n  // elements are only marked outside the portal element.\n  useSafeLayoutEffect(() => {\n    const id = contentElement?.id;\n    if (!id) return;\n    const backdrop = ref.current;\n    if (!backdrop) return;\n    return markAncestor(backdrop, id);\n  }, [contentElement]);\n\n  const props = useDisclosureContent({\n    ref,\n    store: disclosure,\n    role: \"presentation\",\n    \"data-backdrop\": contentElement?.id || \"\",\n    alwaysVisible,\n    hidden: hidden != null ? hidden : undefined,\n    style: {\n      position: \"fixed\",\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    },\n  });\n\n  if (!backdrop) return null;\n\n  if (isValidElement(backdrop)) {\n    return <Role {...props} render={backdrop} />;\n  }\n\n  const Component = typeof backdrop !== \"boolean\" ? backdrop : \"div\";\n  return <Role {...props} render={<Component />} />;\n}\n"],"mappings":";;;;;;;;;;SAuBQ,eAAiC,EAAA,OAAA,UAAA,eAAA,UAAA;CACvC,MAAM,MAAA,OAAa,IAAA;CACnB,MAAM,aAAA,mBAA+B,EAAA,YAAO,MAAA,CAAA;CAE5C,MAAA,iBAAgB,cAAA,OAAA,gBAAA;iBACR;EACN,MAAM,WAAS,IAAA;EACf,MAAK,SAAU;EACf,IAAI,CAAC,UAAQ;EACb,IAAA,CAAA,QAAS;EACX,SAAI,MAAA,SAAe,iBAAA,MAAA,EAAA;CAKnB,GAAA,CAAA,cAAA,CAAA;2BACa;EACX,MAAK,KAAI,gBAAA;EACT,IAAA,CAAA,IAAM;EACN,MAAK,WAAU,IAAA;EACf,IAAA,CAAA,UAAO;EACT,OAAI,aAAe,UAAA,EAAA;CAEnB,GAAA,CAAA,cAAc,CAAA;OACZ,QAAA,qBAAA;EACA;EACA,OAAM;EACN,MAAA;EACA,iBAAA,gBAAA,MAAA;EACA;EACA,QAAO,UAAA,OAAA,SAAA,KAAA;SACL;GACA,UAAK;GACL,KAAA;GACA,OAAA;GACA,QAAM;GACR,MAAA;EACD;CAED,CAAA;CAEA,IAAI,CAAA,UAAA,OAAe;KACA,eAAA,QAAA,GAAA,OAAA,oBAAA,MAAA;EAAO,GAAA;EAAmB,QAAA;CAG7C,CAAA;CACA,MAAA,YAAO,OAAA,aAAA,YAAA,WAAA;QAAU,oBAAA,MAAA;EAAO,GAAA;EAAwB,QAAA,oBAAA,WAAA,CAAA,CAAA;CAClD,CAAA"}

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

@@ -0,0 +1,27 @@
+import { t as DialogStore } from "../dialog-store-Cjt12T_Y.js";
+import { SetState } from "@ariakit/utils";
+
+//#region src/dialog/dialog-context.d.ts
+/**
+ * Returns the dialog store from the nearest dialog container.
+ * @example
+ * function Dialog() {
+ *   const store = useDialogContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Dialog must be wrapped in DialogProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useDialogContext: () => DialogStore | undefined;
+declare const useDialogScopedContext: (onlyScoped?: boolean) => DialogStore | undefined;
+declare const useDialogProviderContext: () => DialogStore | undefined;
+declare const DialogContextProvider: (props: import("react").ProviderProps<DialogStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogScopedContextProvider: (props: import("react").ProviderProps<DialogStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogHeadingContext: import("react").Context<SetState<string | undefined> | undefined>;
+declare const DialogDescriptionContext: import("react").Context<SetState<string | undefined> | undefined>;
+//#endregion
+export { DialogContextProvider, DialogDescriptionContext, DialogHeadingContext, DialogScopedContextProvider, useDialogContext, useDialogProviderContext, useDialogScopedContext };
+//# sourceMappingURL=dialog-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-context.d.ts","names":["SetState","DialogStore","useDialogContext","useDialogScopedContext","onlyScoped","useDialogProviderContext","DialogContextProvider","ProviderProps","props","JSX","Element","DialogScopedContextProvider","DialogHeadingContext","Context","DialogDescriptionContext"],"sources":["../../src/dialog/dialog-context.d.ts"],"mappings":";;;;;;AAeA;;;;AAAwD;AACxD;;;;AAAkF;AAClF;cAFqBE,gBAAAA,QAAwBD,WAAW;AAAA,cACnCE,sBAAAA,GAAyBC,UAAAA,eAAyBH,WAAW;AAAA,cAC7DI,wBAAAA,QAAgCJ,WAAW;AAAA,cAC3CK,qBAAAA,GAAwBE,KAAAA,kBAAuBD,aAAAA,CAAcN,WAAW,8CAA8CQ,GAAAA,CAAIC,OAAAA;AAAAA,cAC1HC,2BAAAA,GAA8BH,KAAAA,kBAAuBD,aAAAA,CAAcN,WAAW,8CAA8CQ,GAAAA,CAAIC,OAAAA;AAAAA,cAChIE,oBAAAA,kBAAsCC,OAAAA,CAAQb,QAAQ;AAAA,cACtDc,wBAAAA,kBAA0CD,OAAAA,CAAQb,QAAQ"}

package/dist/dialog/dialog-context.js

@@ -0,0 +1,30 @@
+"use client";
+import { DisclosureContextProvider, DisclosureScopedContextProvider } from "../disclosure/disclosure-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+import { createContext } from "react";
+//#region src/dialog/dialog-context.tsx
+const ctx = createStoreContext([DisclosureContextProvider], [DisclosureScopedContextProvider]);
+/**
+* Returns the dialog store from the nearest dialog container.
+* @example
+* function Dialog() {
+*   const store = useDialogContext();
+*
+*   if (!store) {
+*     throw new Error("Dialog must be wrapped in DialogProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useDialogContext = ctx.useContext;
+const useDialogScopedContext = ctx.useScopedContext;
+const useDialogProviderContext = ctx.useProviderContext;
+const DialogContextProvider = ctx.ContextProvider;
+const DialogScopedContextProvider = ctx.ScopedContextProvider;
+const DialogHeadingContext = createContext(void 0);
+const DialogDescriptionContext = createContext(void 0);
+//#endregion
+export { DialogContextProvider, DialogDescriptionContext, DialogHeadingContext, DialogScopedContextProvider, useDialogContext, useDialogProviderContext, useDialogScopedContext };
+
+//# sourceMappingURL=dialog-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-context.js","names":[],"sources":["../../src/dialog/dialog-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport type { SetState } from \"@ariakit/utils\";\nimport { createContext } from \"react\";\nimport {\n  DisclosureContextProvider,\n  DisclosureScopedContextProvider,\n} from \"../disclosure/disclosure-context.tsx\";\nimport type { DialogStore } from \"./dialog-store.ts\";\n\nconst ctx = createStoreContext<DialogStore>(\n  [DisclosureContextProvider],\n  [DisclosureScopedContextProvider],\n);\n\n/**\n * Returns the dialog store from the nearest dialog container.\n * @example\n * function Dialog() {\n *   const store = useDialogContext();\n *\n *   if (!store) {\n *     throw new Error(\"Dialog must be wrapped in DialogProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useDialogContext = ctx.useContext;\n\nexport const useDialogScopedContext = ctx.useScopedContext;\n\nexport const useDialogProviderContext = ctx.useProviderContext;\n\nexport const DialogContextProvider = ctx.ContextProvider;\n\nexport const DialogScopedContextProvider = ctx.ScopedContextProvider;\n\nexport const DialogHeadingContext = createContext<\n  SetState<string | undefined> | undefined\n>(undefined);\nexport const DialogDescriptionContext = createContext<\n  SetState<string | undefined> | undefined\n>(undefined);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,MAAa,mBAAA,IAAA;AAEb,MAAa,yBAAA,IAA2B;AAExC,MAAa,2BAAwB,IAAI;AAEzC,MAAa,wBAAA,IAAA;AAEb,MAAa,8BAAuB,IAAA;AAGpC,MAAa,uBAAA,cAA2B,KAEtC,CAAA"}

package/dist/dialog/dialog-description.d.ts

@@ -0,0 +1,2 @@
+import { i as useDialogDescription, n as DialogDescriptionOptions, r as DialogDescriptionProps, t as DialogDescription } from "../dialog-description-BCZJ1Kyd.js";
+export { DialogDescription, DialogDescriptionOptions, DialogDescriptionProps, useDialogDescription };

package/dist/dialog/dialog-description.js

@@ -0,0 +1,53 @@
+"use client";
+import { DialogDescriptionContext } from "./dialog-context.js";
+import { createElement, createHook, forwardRef, useId, useSafeLayoutEffect } from "@ariakit/react-utils";
+import { removeUndefinedValues } from "@ariakit/utils";
+import { useContext } from "react";
+//#region src/dialog/dialog-description.tsx
+const TagName = "p";
+/**
+* Returns props to create a `DialogDescription` component. This hook must be
+* used in a component that's wrapped with `Dialog` so the `aria-describedby`
+* prop is properly set on the dialog element.
+* @see https://ariakit.com/components/dialog
+* @example
+* ```jsx
+* // This component must be wrapped with Dialog
+* const props = useDialogDescription();
+* <Role {...props}>Description</Role>
+* ```
+*/
+const useDialogDescription = createHook(function useDialogDescription({ store, ...props }) {
+	const setDescriptionId = useContext(DialogDescriptionContext);
+	const id = useId(props.id);
+	useSafeLayoutEffect(() => {
+		setDescriptionId?.(id);
+		return () => setDescriptionId?.(void 0);
+	}, [setDescriptionId, id]);
+	props = {
+		...props,
+		id
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a description in a dialog. This component must be wrapped with
+* [`Dialog`](https://ariakit.com/reference/dialog) so the `aria-describedby`
+* prop is properly set on the dialog element.
+* @see https://ariakit.com/components/dialog
+* @example
+* ```jsx {4}
+* const [open, setOpen] = useState(false);
+*
+* <Dialog open={open} onClose={() => setOpen(false)}>
+*   <DialogDescription>Description</DialogDescription>
+* </Dialog>
+* ```
+*/
+const DialogDescription = forwardRef(function DialogDescription(props) {
+	return createElement(TagName, useDialogDescription(props));
+});
+//#endregion
+export { DialogDescription, useDialogDescription };
+
+//# sourceMappingURL=dialog-description.js.map

package/dist/dialog/dialog-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description.js","names":[],"sources":["../../src/dialog/dialog-description.tsx"],"sourcesContent":["import {\n  useId,\n  useSafeLayoutEffect,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useContext } from \"react\";\nimport { DialogDescriptionContext } from \"./dialog-context.tsx\";\nimport type { DialogStore } from \"./dialog-store.ts\";\n\nconst TagName = \"p\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `DialogDescription` component. This hook must be\n * used in a component that's wrapped with `Dialog` so the `aria-describedby`\n * prop is properly set on the dialog element.\n * @see https://ariakit.com/components/dialog\n * @example\n * ```jsx\n * // This component must be wrapped with Dialog\n * const props = useDialogDescription();\n * <Role {...props}>Description</Role>\n * ```\n */\nexport const useDialogDescription = createHook<\n  TagName,\n  DialogDescriptionOptions\n>(function useDialogDescription({ store, ...props }) {\n  const setDescriptionId = useContext(DialogDescriptionContext);\n  const id = useId(props.id);\n\n  useSafeLayoutEffect(() => {\n    setDescriptionId?.(id);\n    return () => setDescriptionId?.(undefined);\n  }, [setDescriptionId, id]);\n\n  props = {\n    ...props,\n    id,\n  };\n\n  return removeUndefinedValues(props);\n});\n\n/**\n * Renders a description in a dialog. This component must be wrapped with\n * [`Dialog`](https://ariakit.com/reference/dialog) so the `aria-describedby`\n * prop is properly set on the dialog element.\n * @see https://ariakit.com/components/dialog\n * @example\n * ```jsx {4}\n * const [open, setOpen] = useState(false);\n *\n * <Dialog open={open} onClose={() => setOpen(false)}>\n *   <DialogDescription>Description</DialogDescription>\n * </Dialog>\n * ```\n */\nexport const DialogDescription = forwardRef(function DialogDescription(\n  props: DialogDescriptionProps,\n) {\n  const htmlProps = useDialogDescription(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface DialogDescriptionOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If\n   * not provided, the closest [`Dialog`](https://ariakit.com/reference/dialog)\n   * component's context will be used.\n   */\n  store?: DialogStore;\n}\n\nexport type DialogDescriptionProps<T extends ElementType = TagName> = Props<\n  T,\n  DialogDescriptionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MAiCE,uBAAyB,WAAW,SAAA,qBAAwB,EAAA,OAAA,GAAA,SAAA;CAC5D,MAAM,mBAAmB,WAAA,wBAAA;CAEzB,MAAA,KAAA,MAAA,MAAA,EAAA;2BACuB;EACrB,mBAAa,EAAA;EACf,aAAI,mBAAqB,KAAA,CAAA;CAEzB,GAAA,CAAA,kBAAQ,EAAA,CAAA;SACH;EACH,GAAA;EACF;CAEA;CACD,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;MAoBC,oBAAqB,WADH,SAAA,kBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,qBAAA,KAAA,CAAA"}

package/dist/dialog/dialog-disclosure.d.ts

@@ -0,0 +1,2 @@
+import { i as useDialogDisclosure, n as DialogDisclosureOptions, r as DialogDisclosureProps, t as DialogDisclosure } from "../dialog-disclosure-DLD10zlb.js";
+export { DialogDisclosure, DialogDisclosureOptions, DialogDisclosureProps, useDialogDisclosure };