@ariakit/react-components 0.1.0

package/dist/composite/composite-group-label.js

@@ -0,0 +1,46 @@
+"use client";
+import { useGroupLabel } from "../group/group-label.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/composite/composite-group-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `CompositeGroupLabel` component. This hook must be
+* used in a component that's wrapped with `CompositeGroup` so the
+* `aria-labelledby` prop is properly set on the composite group element.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* // This component must be wrapped with CompositeGroup
+* const props = useCompositeGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useCompositeGroupLabel = createHook(function useCompositeGroupLabel({ store, ...props }) {
+	props = useGroupLabel(props);
+	return props;
+});
+/**
+* Renders a label in a composite group. This component must be wrapped with
+* [`CompositeGroup`](https://ariakit.com/reference/composite-group) so the
+* `aria-labelledby` prop is properly set on the group element.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx {4}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeGroup>
+*       <CompositeGroupLabel>Label</CompositeGroupLabel>
+*       <CompositeItem>Item 1</CompositeItem>
+*       <CompositeItem>Item 2</CompositeItem>
+*     </CompositeGroup>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeGroupLabel = forwardRef(function CompositeGroupLabel(props) {
+	return createElement(TagName, useCompositeGroupLabel(props));
+});
+//#endregion
+export { CompositeGroupLabel, useCompositeGroupLabel };
+
+//# sourceMappingURL=composite-group-label.js.map

package/dist/composite/composite-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-group-label.js","names":[],"sources":["../../src/composite/composite-group-label.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { GroupLabelOptions } from \"../group/group-label.tsx\";\nimport { useGroupLabel } from \"../group/group-label.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `CompositeGroupLabel` component. This hook must be\n * used in a component that's wrapped with `CompositeGroup` so the\n * `aria-labelledby` prop is properly set on the composite group element.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * // This component must be wrapped with CompositeGroup\n * const props = useCompositeGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useCompositeGroupLabel = createHook<\n  TagName,\n  CompositeGroupLabelOptions\n>(function useCompositeGroupLabel({ store, ...props }) {\n  props = useGroupLabel(props);\n  return props;\n});\n\n/**\n * Renders a label in a composite group. This component must be wrapped with\n * [`CompositeGroup`](https://ariakit.com/reference/composite-group) so the\n * `aria-labelledby` prop is properly set on the group element.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {4}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeGroup>\n *       <CompositeGroupLabel>Label</CompositeGroupLabel>\n *       <CompositeItem>Item 1</CompositeItem>\n *       <CompositeItem>Item 2</CompositeItem>\n *     </CompositeGroup>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeGroupLabel = forwardRef(function CompositeGroupLabel(\n  props: CompositeGroupLabelProps,\n) {\n  const htmlProps = useCompositeGroupLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeGroupLabelOptions<\n  T extends ElementType = TagName,\n> extends GroupLabelOptions<T> {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeGroupLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeGroupLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MA0BE,yBAA2B,WAAA,SAAA,uBAAA,EAAA,OAAA,GAAA,SAAA;CAC3B,QAAO,cAAA,KAAA;CACR,OAAA;;;;;;;;;;;;;;;;;;;;MAwBC,sBAAqB,WADH,SAAA,oBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,uBAAA,KAAA,CAAA"}

package/dist/composite/composite-group.d.ts

@@ -0,0 +1,60 @@
+import { t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+import { n as GroupOptions } from "../group-CamegDJA.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeGroup` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeGroup({ store });
+ * <Composite store={store}>
+ *   <Role {...props}>
+ *     <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Role>
+ * </Composite>
+ * ```
+ */
+declare const useCompositeGroup: import("@ariakit/react-utils").Hook<"div", CompositeGroupOptions<"div">>;
+/**
+ * Renders a group element for composite items. The
+ * [`CompositeGroupLabel`](https://ariakit.com/reference/composite-group-label)
+ * component can be used inside this component so the `aria-labelledby` prop is
+ * properly set on the group element.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {3-7}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeGroup>
+ *       <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *       <CompositeItem>Item 1</CompositeItem>
+ *       <CompositeItem>Item 2</CompositeItem>
+ *     </CompositeGroup>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeGroup: (props: CompositeGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeGroupOptions<T extends ElementType = TagName> extends GroupOptions<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;
+}
+type CompositeGroupProps<T extends ElementType = TagName> = Props<T, CompositeGroupOptions<T>>;
+//#endregion
+export { CompositeGroup, CompositeGroupOptions, CompositeGroupProps, useCompositeGroup };
+//# sourceMappingURL=composite-group.d.ts.map

package/dist/composite/composite-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-group.d.ts","names":["Props","ElementType","GroupOptions","CompositeStore","TagName","useCompositeGroup","CompositeGroupOptions","Hook","CompositeGroup","CompositeGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAiB7B;;;;AAAwG;AAoBxG;AAvC2D,cAmBtCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;;;;;;;AAoB6C;AACrJ;;;;;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,YAAAA,CAAaW,CAAAA;EAAbX;;;;;AAStD;AAE1B;;EAFIY,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/composite/composite-group.js

@@ -0,0 +1,51 @@
+"use client";
+import { useGroup } from "../group/group.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/composite/composite-group.tsx
+const TagName = "div";
+/**
+* Returns props to create a `CompositeGroup` component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeGroup({ store });
+* <Composite store={store}>
+*   <Role {...props}>
+*     <CompositeGroupLabel>Label</CompositeGroupLabel>
+*     <CompositeItem>Item 1</CompositeItem>
+*     <CompositeItem>Item 2</CompositeItem>
+*   </Role>
+* </Composite>
+* ```
+*/
+const useCompositeGroup = createHook(function useCompositeGroup({ store, ...props }) {
+	props = useGroup(props);
+	return props;
+});
+/**
+* Renders a group element for composite items. The
+* [`CompositeGroupLabel`](https://ariakit.com/reference/composite-group-label)
+* component can be used inside this component so the `aria-labelledby` prop is
+* properly set on the group element.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx {3-7}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeGroup>
+*       <CompositeGroupLabel>Label</CompositeGroupLabel>
+*       <CompositeItem>Item 1</CompositeItem>
+*       <CompositeItem>Item 2</CompositeItem>
+*     </CompositeGroup>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeGroup = forwardRef(function CompositeGroup(props) {
+	return createElement(TagName, useCompositeGroup(props));
+});
+//#endregion
+export { CompositeGroup, useCompositeGroup };
+
+//# sourceMappingURL=composite-group.js.map

package/dist/composite/composite-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-group.js","names":[],"sources":["../../src/composite/composite-group.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { GroupOptions } from \"../group/group.tsx\";\nimport { useGroup } from \"../group/group.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `CompositeGroup` component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeGroup({ store });\n * <Composite store={store}>\n *   <Role {...props}>\n *     <CompositeGroupLabel>Label</CompositeGroupLabel>\n *     <CompositeItem>Item 1</CompositeItem>\n *     <CompositeItem>Item 2</CompositeItem>\n *   </Role>\n * </Composite>\n * ```\n */\nexport const useCompositeGroup = createHook<TagName, CompositeGroupOptions>(\n  function useCompositeGroup({ store, ...props }) {\n    props = useGroup(props);\n    return props;\n  },\n);\n\n/**\n * Renders a group element for composite items. The\n * [`CompositeGroupLabel`](https://ariakit.com/reference/composite-group-label)\n * component can be used inside this component so the `aria-labelledby` prop is\n * properly set on the group element.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-7}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeGroup>\n *       <CompositeGroupLabel>Label</CompositeGroupLabel>\n *       <CompositeItem>Item 1</CompositeItem>\n *       <CompositeItem>Item 2</CompositeItem>\n *     </CompositeGroup>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeGroup = forwardRef(function CompositeGroup(\n  props: CompositeGroupProps,\n) {\n  const htmlProps = useCompositeGroup(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeGroupOptions<\n  T extends ElementType = TagName,\n> extends GroupOptions<T> {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeGroupProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeGroupOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;MA4BI,oBAAsB,WAAA,SAAA,kBAAA,EAAA,OAAA,GAAA,SAAA;CACtB,QAAO,SAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;MAyBE,iBAAqB,WADH,SAAA,eACqB,OAAA;CACxC,OAAA,cAAA,SAAA,kBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,2 @@
+import { i as useCompositeHover, n as CompositeHoverOptions, r as CompositeHoverProps, t as CompositeHover } from "../composite-hover-C7ul163w.js";
+export { CompositeHover, CompositeHoverOptions, CompositeHoverProps, useCompositeHover };

package/dist/composite/composite-hover.js

@@ -0,0 +1,114 @@
+"use client";
+import { useCompositeContext } from "./composite-context.js";
+import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent, useIsMouseMoving, useMergeRefs } from "@ariakit/react-utils";
+import { contains, hasFocus, hasFocusWithin, hasOwnProperty, invariant, removeUndefinedValues } from "@ariakit/utils";
+import { useCallback } from "react";
+//#region src/composite/composite-hover.tsx
+const TagName = "div";
+function getMouseDestination(event) {
+	const relatedTarget = event.relatedTarget;
+	if (relatedTarget?.nodeType === Node.ELEMENT_NODE) return relatedTarget;
+	return null;
+}
+function hoveringInside(event) {
+	const nextElement = getMouseDestination(event);
+	if (!nextElement) return false;
+	return contains(event.currentTarget, nextElement);
+}
+const symbol = Symbol("composite-hover");
+function movingToAnotherItem(event) {
+	let dest = getMouseDestination(event);
+	if (!dest) return false;
+	do {
+		if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;
+		dest = dest.parentElement;
+	} while (dest);
+	return false;
+}
+/**
+* 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>
+* ```
+*/
+const useCompositeHover = createHook(function useCompositeHover({ store, focusOnHover = true, blurOnHoverEnd = !!focusOnHover, ...props }) {
+	const context = useCompositeContext();
+	store = store || context;
+	invariant(store, "CompositeHover must be wrapped in a Composite component.");
+	const isMouseMoving = useIsMouseMoving();
+	const onMouseMoveProp = props.onMouseMove;
+	const focusOnHoverProp = useBooleanEvent(focusOnHover);
+	const onMouseMove = useEvent((event) => {
+		onMouseMoveProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!isMouseMoving()) return;
+		if (!focusOnHoverProp(event)) return;
+		if (!hasFocusWithin(event.currentTarget)) {
+			const baseElement = store?.getState().baseElement;
+			if (baseElement && !hasFocus(baseElement)) baseElement.focus();
+		}
+		store?.setActiveId(event.currentTarget.id);
+	});
+	const onMouseLeaveProp = props.onMouseLeave;
+	const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
+	const onMouseLeave = useEvent((event) => {
+		onMouseLeaveProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!isMouseMoving()) return;
+		if (hoveringInside(event)) return;
+		if (movingToAnotherItem(event)) return;
+		if (!focusOnHoverProp(event)) return;
+		if (!blurOnHoverEndProp(event)) return;
+		store?.setActiveId(null);
+		store?.getState().baseElement?.focus();
+	});
+	const ref = useCallback((element) => {
+		if (!element) return;
+		element[symbol] = true;
+	}, []);
+	props = {
+		...props,
+		ref: useMergeRefs(ref, props.ref),
+		onMouseMove,
+		onMouseLeave
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* 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>
+* ```
+*/
+const CompositeHover = memo(forwardRef(function CompositeHover(props) {
+	return createElement(TagName, useCompositeHover(props));
+}));
+//#endregion
+export { CompositeHover, useCompositeHover };
+
+//# sourceMappingURL=composite-hover.js.map

package/dist/composite/composite-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-hover.js","names":[],"sources":["../../src/composite/composite-hover.tsx"],"sourcesContent":["import {\n  useBooleanEvent,\n  useEvent,\n  useIsMouseMoving,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  contains,\n  hasFocus,\n  hasFocusWithin,\n  hasOwnProperty,\n  invariant,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent as ReactMouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getMouseDestination(event: ReactMouseEvent<HTMLElement>) {\n  const relatedTarget = event.relatedTarget as Node | null;\n  if (relatedTarget?.nodeType === Node.ELEMENT_NODE) {\n    return relatedTarget as Element;\n  }\n  return null;\n}\n\nfunction hoveringInside(event: ReactMouseEvent<HTMLElement>) {\n  const nextElement = getMouseDestination(event);\n  if (!nextElement) return false;\n  return contains(event.currentTarget, nextElement);\n}\n\nconst symbol = Symbol(\"composite-hover\");\ntype ElementWithSymbol = HTMLElement & { [symbol]?: boolean };\n\nfunction movingToAnotherItem(event: ReactMouseEvent<HTMLElement>) {\n  let dest = getMouseDestination(event);\n  if (!dest) return false;\n  do {\n    if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;\n    dest = dest.parentElement;\n  } while (dest);\n  return false;\n}\n\n/**\n * Returns props to create a `CompositeHover` component. The composite item that\n * receives these props will get focused on mouse move and lose focus to the\n * composite base element on mouse leave. This should be combined with the\n * `CompositeItem` component, the `useCompositeItem` hook or any component/hook\n * that uses them underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeHover({ store });\n * <CompositeItem store={store} {...props}>Item</CompositeItem>\n * ```\n */\nexport const useCompositeHover = createHook<TagName, CompositeHoverOptions>(\n  function useCompositeHover({\n    store,\n    focusOnHover = true,\n    blurOnHoverEnd = !!focusOnHover,\n    ...props\n  }) {\n    const context = useCompositeContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"CompositeHover must be wrapped in a Composite component.\",\n    );\n\n    const isMouseMoving = useIsMouseMoving();\n\n    const onMouseMoveProp = props.onMouseMove;\n    const focusOnHoverProp = useBooleanEvent(focusOnHover);\n\n    const onMouseMove = useEvent((event: ReactMouseEvent<HTMLType>) => {\n      onMouseMoveProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isMouseMoving()) return;\n      if (!focusOnHoverProp(event)) return;\n      // If we're hovering over an item that doesn't have DOM focus, we move\n      // focus to the composite element. We're doing this here before setting\n      // the active id because the composite element will automatically set the\n      // active id to null when it receives focus.\n      if (!hasFocusWithin(event.currentTarget)) {\n        const baseElement = store?.getState().baseElement;\n        if (baseElement && !hasFocus(baseElement)) {\n          baseElement.focus();\n        }\n      }\n      store?.setActiveId(event.currentTarget.id);\n    });\n\n    const onMouseLeaveProp = props.onMouseLeave;\n    const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);\n\n    const onMouseLeave = useEvent((event: ReactMouseEvent<HTMLType>) => {\n      onMouseLeaveProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isMouseMoving()) return;\n      if (hoveringInside(event)) return;\n      if (movingToAnotherItem(event)) return;\n      if (!focusOnHoverProp(event)) return;\n      if (!blurOnHoverEndProp(event)) return;\n      store?.setActiveId(null);\n      // Move focus to the composite element.\n      store?.getState().baseElement?.focus();\n    });\n\n    const ref = useCallback((element: ElementWithSymbol | null) => {\n      if (!element) return;\n      element[symbol] = true;\n    }, []);\n\n    props = {\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n      onMouseMove,\n      onMouseLeave,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an element in a composite widget that receives focus on mouse move\n * and loses focus to the composite base element on mouse leave.\n *\n * This should be combined with the\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) component.\n * The\n * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)\n * and\n * [`blurOnHoverEnd`](https://ariakit.com/reference/composite-hover#bluronhoverend)\n * props can be used to customize the behavior.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeHover render={<CompositeItem />}>\n *       Item\n *     </CompositeHover>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeHover = memo(\n  forwardRef(function CompositeHover(props: CompositeHoverProps) {\n    const htmlProps = useCompositeHover(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeHoverOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * Determines if the composite item should be _focused_ when hovered over.\n   *\n   * Note that the actual DOM focus will stay on the composite element. This\n   * item will get the\n   * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)\n   * attribute so it can be styled as if it's focused.\n   *\n   * Live examples:\n   * - [Multi-selectable\n   *   Combobox](https://ariakit.com/examples/combobox-multiple)\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * @default true\n   */\n  focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;\n  /**\n   * Determines if the composite item should lose focus when the mouse leaves.\n   * By default, this is set to `true` if\n   * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)\n   * is `true`.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   */\n  blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;\n}\n\nexport type CompositeHoverProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeHoverOptions<T>\n>;\n"],"mappings":";;;;;;AA6BA,MAAA,UAAS;SACD,oBAAsB,OAAA;CAC5B,MAAI,gBAAe,MAAA;CAGnB,IAAA,eAAO,aAAA,KAAA,cAAA,OAAA;CACT,OAAA;AAEA;SACQ,eAAc,OAAA;CACpB,MAAK,cAAa,oBAAO,KAAA;CACzB,IAAA,CAAA,aAAgB,OAAM;CACxB,OAAA,SAAA,MAAA,eAAA,WAAA;AAEA;AAGA,MAAA,SAAS,OAAA,iBAAyD;SAC5D,oBAAO,OAAoB;CAC/B,IAAI,OAAO,oBAAO,KAAA;CAClB,IAAG,CAAA,MAAA,OAAA;IACD;EACA,IAAA,eAAY,MAAA,MAAA,KAAA,KAAA,SAAA,OAAA;EACd,OAAA,KAAS;CACT,SAAO;CACT,OAAA;;;;;;;;;;;;;;;;MAuBI,oBAAgB,WAAoB,SAAA,kBAAA,EAAA,OAAA,eAAA,MAAA,iBAAA,CAAA,CAAA,cAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,0DAAiC;CAEvC,MAAM,gBAAA,iBAAwB;CAC9B,MAAM,kBAAA,MAAmB;CAEzB,MAAM,mBAAc,gBAA+C,YAAA;OACjE,cAAkB,UAAK,UAAA;EACvB,kBAAU,KAAA;EACV,IAAI,MAAC,kBAAiB;EACtB,IAAI,CAAC,cAAA,GAAiB;EAKtB,IAAI,CAAC,iBAAe,KAAM,GAAA;MACxB,CAAA,eAAM,MAAc,aAAkB,GAAA;GACtC,MAAI,cAAgB,OAAA,SAAS,EAAA;GAG/B,IAAA,eAAA,CAAA,SAAA,WAAA,GAAA,YAAA,MAAA;EACA;EACD,OAAA,YAAA,MAAA,cAAA,EAAA;CAED,CAAA;CACA,MAAM,mBAAA,MAAqB;CAE3B,MAAM,qBAAe,gBAA+C,cAAA;OAClE,eAAmB,UAAK,UAAA;EACxB,mBAAU,KAAA;EACV,IAAI,MAAC,kBAAiB;EACtB,IAAI,CAAA,cAAe,GAAA;EACnB,IAAI,eAAA,KAAoB,GAAA;EACxB,IAAI,oBAAkB,KAAK,GAAG;EAC9B,IAAI,CAAC,iBAAA,KAAmB,GAAK;EAC7B,IAAA,CAAA,mBAAuB,KAAA,GAAA;EAEvB,OAAO,YAAW,IAAA;EACnB,OAAA,SAAA,EAAA,aAAA,MAAA;CAED,CAAA;OACO,MAAA,aAAS,YAAA;EACd,IAAA,CAAA,SAAQ;EACV,QAAK,UAAA;CAEL,GAAA,CAAA,CAAA;SACK;EACH,GAAA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;MA4BI,iBAAqB,KAAA,WADH,SAAA,eACqB,OAAA;CACxC,OACH,cAAA,SAAA,kBAAA,KAAA,CAAA"}

package/dist/composite/composite-input.d.ts

@@ -0,0 +1,55 @@
+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-input.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeInput` component. This should be used in
+ * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
+ * or any other component/hook that uses `CompositeItem` underneath.
+ * @see https://ariakit.com/components/composite
+ * @deprecated Use `useCompositeItem` instead.
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeInput({ store });
+ * <Composite store={store}>
+ *   <CompositeItem {...props} />
+ * </Composite>
+ * ```
+ */
+declare const useCompositeInput: import("@ariakit/react-utils").Hook<"input", CompositeInputOptions<"input">>;
+/**
+ * Renders an input as a composite item. This should be used in conjunction with
+ * the [`CompositeItem`](https://ariakit.com/reference/composite-item) component
+ * or a component that uses
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.
+ * @see https://ariakit.com/components/composite
+ * @deprecated Use `<CompositeItem render={<input />}>` instead.
+ * @example
+ * ```jsx {3}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeInput />} />
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeInput: (props: CompositeInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeInputOptions<_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;
+}
+type CompositeInputProps<T extends ElementType = TagName> = Props<T, CompositeInputOptions<T>>;
+//#endregion
+export { CompositeInput, CompositeInputOptions, CompositeInputProps, useCompositeInput };
+//# sourceMappingURL=composite-input.d.ts.map

package/dist/composite/composite-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-input.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeInput","CompositeInputOptions","Hook","CompositeInput","CompositeInputProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-input.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAgB7B;;;;AAA0G;AAlB/C,cAkBtCC,iBAAAA,iCAAkDE,IAAAA,UAAcD,qBAAqB;;;;;;;;;AAiB2C;AACrJ;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,YAAiCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA1Ca;;;;;;;AASb;EAAtBC,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,qBAAAA,CAAsBS,CAAAA"}

package/dist/composite/composite-input.js

@@ -0,0 +1,91 @@
+"use client";
+import { selectTextField } from "./utils.js";
+import { createElement, createHook, forwardRef, memo, useEvent } from "@ariakit/react-utils";
+import { getDocument, getTextboxSelection, isTextField, removeUndefinedValues } from "@ariakit/utils";
+import { useEffect } from "react";
+//#region src/composite/composite-input.tsx
+const TagName = "input";
+function getValueLength(element) {
+	if (isTextField(element)) return element.value.length;
+	else if (element.isContentEditable) {
+		const range = getDocument(element).createRange();
+		range.selectNodeContents(element);
+		return range.toString().length;
+	}
+	return 0;
+}
+/**
+* Returns props to create a `CompositeInput` component. This should be used in
+* conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
+* or any other component/hook that uses `CompositeItem` underneath.
+* @see https://ariakit.com/components/composite
+* @deprecated Use `useCompositeItem` instead.
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeInput({ store });
+* <Composite store={store}>
+*   <CompositeItem {...props} />
+* </Composite>
+* ```
+*/
+const useCompositeInput = createHook(function useCompositeInput({ store, ...props }) {
+	const onKeyDownCaptureProp = props.onKeyDownCapture;
+	useEffect(() => {
+		console.warn("CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead.");
+	}, []);
+	const onKeyDownCapture = useEvent((event) => {
+		onKeyDownCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		const element = event.currentTarget;
+		if (!element.isContentEditable && !isTextField(element)) return;
+		const selection = getTextboxSelection(element);
+		const { orientation } = store?.getState() || {};
+		const isHorizontal = orientation !== "vertical";
+		const isVertical = orientation !== "horizontal";
+		const isLeft = isHorizontal && event.key === "ArrowLeft";
+		const isRight = isHorizontal && event.key === "ArrowRight";
+		const isUp = isVertical && event.key === "ArrowUp";
+		const isDown = isVertical && event.key === "ArrowDown";
+		if (isRight || isDown) {
+			if (selection.end !== getValueLength(element)) event.stopPropagation();
+		} else if (isLeft || isUp) {
+			if (selection.start !== 0) event.stopPropagation();
+		}
+	});
+	const onFocusProp = props.onFocus;
+	const onFocus = useEvent((event) => {
+		onFocusProp?.(event);
+		if (event.defaultPrevented) return;
+		selectTextField(event.currentTarget);
+	});
+	props = {
+		...props,
+		onKeyDownCapture,
+		onFocus
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders an input as a composite item. This should be used in conjunction with
+* the [`CompositeItem`](https://ariakit.com/reference/composite-item) component
+* or a component that uses
+* [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.
+* @see https://ariakit.com/components/composite
+* @deprecated Use `<CompositeItem render={<input />}>` instead.
+* @example
+* ```jsx {3}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeItem render={<CompositeInput />} />
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeInput = memo(forwardRef(function CompositeInput(props) {
+	return createElement(TagName, useCompositeInput(props));
+}));
+//#endregion
+export { CompositeInput, useCompositeInput };
+
+//# sourceMappingURL=composite-input.js.map

package/dist/composite/composite-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-input.js","names":[],"sources":["../../src/composite/composite-input.tsx"],"sourcesContent":["import {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  getDocument,\n  getTextboxSelection,\n  isTextField,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect } from \"react\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport { selectTextField } from \"./utils.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getValueLength(element: HTMLElement) {\n  if (isTextField(element)) {\n    return element.value.length;\n  } else if (element.isContentEditable) {\n    const range = getDocument(element).createRange();\n    range.selectNodeContents(element);\n    return range.toString().length;\n  }\n  return 0;\n}\n\n/**\n * Returns props to create a `CompositeInput` component. This should be used in\n * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,\n * or any other component/hook that uses `CompositeItem` underneath.\n * @see https://ariakit.com/components/composite\n * @deprecated Use `useCompositeItem` instead.\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeInput({ store });\n * <Composite store={store}>\n *   <CompositeItem {...props} />\n * </Composite>\n * ```\n */\nexport const useCompositeInput = createHook<TagName, CompositeInputOptions>(\n  function useCompositeInput({ store, ...props }) {\n    const onKeyDownCaptureProp = props.onKeyDownCapture;\n\n    if (process.env.NODE_ENV !== \"production\") {\n      useEffect(() => {\n        console.warn(\n          \"CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead.\",\n        );\n      }, []);\n    }\n\n    const onKeyDownCapture = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      const element = event.currentTarget;\n      if (!element.isContentEditable && !isTextField(element)) return;\n      const selection = getTextboxSelection(element);\n\n      const { orientation } = store?.getState() || {};\n      const isHorizontal = orientation !== \"vertical\";\n      const isVertical = orientation !== \"horizontal\";\n\n      const isLeft = isHorizontal && event.key === \"ArrowLeft\";\n      const isRight = isHorizontal && event.key === \"ArrowRight\";\n      const isUp = isVertical && event.key === \"ArrowUp\";\n      const isDown = isVertical && event.key === \"ArrowDown\";\n\n      if (isRight || isDown) {\n        if (selection.end !== getValueLength(element)) {\n          event.stopPropagation();\n        }\n      } else if (isLeft || isUp) {\n        if (selection.start !== 0) {\n          event.stopPropagation();\n        }\n      }\n    });\n\n    const onFocusProp = props.onFocus;\n\n    const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n      selectTextField(event.currentTarget);\n    });\n\n    props = {\n      ...props,\n      onKeyDownCapture,\n      onFocus,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an input as a composite item. This should be used in conjunction with\n * the [`CompositeItem`](https://ariakit.com/reference/composite-item) component\n * or a component that uses\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.\n * @see https://ariakit.com/components/composite\n * @deprecated Use `<CompositeItem render={<input />}>` instead.\n * @example\n * ```jsx {3}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem render={<CompositeInput />} />\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeInput = memo(\n  forwardRef(function CompositeInput(props: CompositeInputProps) {\n    const htmlProps = useCompositeInput(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeInputOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeInputProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeInputOptions<T>\n>;\n"],"mappings":";;;;;;AAuBA,MAAA,UAAS;SACH,eAAmB,SACrB;iBACS,OAAQ,GAAA,OAAA,QAAmB,MAAA;MACpC,IAAM,QAAQ,mBAAqB;EACnC,MAAM,QAAA,YAAmB,OAAO,EAAA,YAAA;EAChC,MAAA,mBAAwB,OAAA;EAC1B,OAAA,MAAA,SAAA,EAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;;MAmBI,oBAAM,WAA6B,SAAA,kBAAA,EAAA,OAAA,GAAA,SAAA;CAGjC,MAAA,uBAAgB,MAAA;iBAEZ;EAEJ,QAAK,KAAA,iFAAA;CAGP,GAAA,CAAA,CAAA;OACE,mBAAuB,UAAK,UAAA;EAC5B,uBAAU,KAAkB;EAC5B,IAAA,MAAM,kBAAgB;EACtB,MAAK,UAAQ,MAAA;EACb,IAAA,CAAA,QAAM,qBAAY,CAAA,YAA2B,OAAA,GAAA;EAE7C,MAAM,YAAE,oBAAuB,OAAc;EAC7C,MAAM,EAAA,gBAAe,OAAA,SAAgB,KAAA,CAAA;EACrC,MAAM,eAAa,gBAAgB;EAEnC,MAAM,aAAS,gBAAgB;EAC/B,MAAM,SAAA,gBAAU,MAAgB,QAAM;EACtC,MAAM,UAAO,gBAAc,MAAM,QAAQ;EACzC,MAAM,OAAA,cAAS,MAAc,QAAM;EAEnC,MAAI,SAAW,cACb,MAAA,QAAA;iBAAc,QAEd;OAAA,UACS,QAAU,eACnB,OAAA,GAAA,MAAA,gBAAA;EAAA,OAAI,IAAA,UAAU,MAEd;OAAA,UAAA,UAAA,GAAA,MAAA,gBAAA;EAAA;CAIJ,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAA,kBAAsB;EACvB,gBAAA,MAAA,aAAA;CAED,CAAA;SACK;EACH,GAAA;EACA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;MAqBI,iBAAqB,KAAA,WADH,SAAA,eACqB,OAAA;CACxC,OACH,cAAA,SAAA,kBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,39 @@
+import { n as CollectionItemOptions } from "../collection-item-offscreen-DyXa-sqj.js";
+import { n as CompositeItemOptions$1 } from "../composite-item-B4WTelVz.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-item-offscreen.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+declare function useCompositeItemOffscreen<T extends ElementType, P extends CompositeItemProps<T>>({
+  store,
+  offscreenMode,
+  disabled,
+  value,
+  ...props
+}: P): {
+  id: string | undefined;
+  active: boolean;
+  ref: import("react").RefCallback<HTMLDivElement>;
+  "data-offscreen": true | undefined;
+} | {
+  children: import("react").ComponentPropsWithRef<T>[string] | undefined;
+  role: string | undefined;
+  "aria-disabled": true | undefined;
+  "data-offscreen-id": string | undefined;
+  id: string | undefined;
+  active: boolean;
+  ref: import("react").RefCallback<HTMLDivElement>;
+  "data-offscreen": true | undefined;
+};
+declare const CompositeItem: ({
+  offscreenMode,
+  offscreenRoot,
+  ...props
+}: CompositeItemProps) => import("react/jsx-runtime").JSX.Element;
+interface CompositeItemOptions<T extends ElementType = TagName> extends CompositeItemOptions$1<T>, Omit<CollectionItemOptions<T>, "store"> {}
+type CompositeItemProps<T extends ElementType = TagName> = Props<T, CompositeItemOptions<T>>;
+//#endregion
+export { CompositeItem, CompositeItemOptions, CompositeItemProps, useCompositeItemOffscreen };
+//# sourceMappingURL=composite-item-offscreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-item-offscreen.d.ts","names":["Props","ElementType","CollectionItemOptions","Base","TagName","useCompositeItemOffscreen","T","P","CompositeItemProps","store","offscreenMode","disabled","value","HTMLDivElement","props","id","active","ref","RefCallback","children","ComponentPropsWithRef","role","CompositeItem","offscreenRoot","JSX","Element","CompositeItemOptions","Omit"],"sources":["../../src/composite/composite-item-offscreen.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,iBACLC,yBAAAA,WAAoCJ,WAAAA,YAAuBO,kBAAAA,CAAmBF,CAAAA,EAAAA,CAAAA;EAAMG,KAAAA;EAAOC,aAAAA;EAAeC,QAAAA;EAAUC,KAAAA;EAAAA,GAAUE;AAAAA,GAASP,CAAAA;EAC3JQ,EAAAA;EACAC,MAAAA;EACAC,GAAAA,kBAAqBC,WAAAA,CAAYL,cAAAA;EACjC,gBAAA;AAAA;EAEAM,QAAAA,kBAA0BC,qBAAAA,CAAsBd,CAAAA;EAChDe,IAAAA;EACA,eAAA;EACA,mBAAA;EACAN,EAAAA;EACAC,MAAAA;EACAC,GAAAA,kBAAqBC,WAAAA,CAAYL,cAAAA;EACjC,gBAAA;AAAA;AAAA,cAEiBS,aAAAA;EAAkBZ,aAAAA;EAAea,aAAAA;EAAAA,GAAkBT;AAAAA,GAASN,kBAAAA,iCAAmDgB,GAAAA,CAAIC,OAAAA;AAAAA,UACvHC,oBAAAA,WAA+BzB,WAAAA,GAAcG,OAAAA,UAAiBD,sBAAAA,CAA0BG,CAAAA,GAAIqB,IAAAA,CAAKzB,qBAAAA,CAAsBI,CAAAA;AAAAA,KAE5HE,kBAAAA,WAA6BP,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMM,CAAAA,EAAGoB,oBAAAA,CAAqBpB,CAAAA"}

package/dist/composite/composite-item-offscreen.js

@@ -0,0 +1,72 @@
+"use client";
+import { Role } from "../role/role.js";
+import { useCollectionItemOffscreen } from "../collection/collection-item-offscreen.js";
+import { useCompositeContext } from "./composite-context.js";
+import { CompositeItem as CompositeItem$1 } from "./composite-item.js";
+import { forwardRef, useId, useMergeRefs } from "@ariakit/react-utils";
+import { getPopupItemRole } from "@ariakit/utils";
+import { jsx } from "react/jsx-runtime";
+import { useStoreStateObject } from "@ariakit/react-store";
+//#region src/composite/composite-item-offscreen.tsx
+const TagName = "button";
+function useCompositeItemOffscreen({ store, offscreenMode = "active", disabled, value, ...props }) {
+	const context = useCompositeContext();
+	store = store || context;
+	const id = useId(props.id);
+	const { storeId, active, listElement, offscreenRoot } = useStoreStateObject(store, {
+		storeId: "id",
+		active(state) {
+			if (!state) return;
+			if (!("selectedValue" in state) && "value" in state) {
+				if (state.value === value) return true;
+			}
+			return !!id && state.activeId === id;
+		},
+		listElement(state) {
+			if (!state) return;
+			if (!("listElement" in state)) return;
+			return state.listElement;
+		},
+		offscreenRoot(state) {
+			if (props.offscreenRoot) return props.offscreenRoot;
+			if (!state) return;
+			if (!("contentElement" in state)) return;
+			return state.contentElement || null;
+		}
+	});
+	const offscreenProps = useCollectionItemOffscreen({
+		id,
+		store,
+		offscreenMode: active ? "active" : offscreenMode,
+		...props,
+		offscreenRoot
+	});
+	if (!offscreenProps.active) return {
+		...offscreenProps,
+		children: value,
+		role: getPopupItemRole(listElement),
+		"aria-disabled": disabled || void 0,
+		"data-offscreen-id": storeId
+	};
+	return offscreenProps;
+}
+const CompositeItem = forwardRef(function CompositeItem({ offscreenMode, offscreenRoot, ...props }) {
+	const { active, ref, ...rest } = useCompositeItemOffscreen({
+		offscreenMode,
+		offscreenRoot,
+		...props
+	});
+	const allProps = {
+		...rest,
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	if (active) return /* @__PURE__ */ jsx(CompositeItem$1, { ...allProps });
+	const { store, rowId, preventScrollOnKeyDown, moveOnKeyPress, tabbable, getItem, ...htmlProps } = allProps;
+	const Component = Role[TagName];
+	return /* @__PURE__ */ jsx(Component, { ...htmlProps });
+});
+//#endregion
+export { CompositeItem, useCompositeItemOffscreen };
+
+//# sourceMappingURL=composite-item-offscreen.js.map

package/dist/composite/composite-item-offscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-item-offscreen.js","names":["Base.CompositeItem"],"sources":["../../src/composite/composite-item-offscreen.tsx"],"sourcesContent":["import { useStoreStateObject } from \"@ariakit/react-store\";\nimport { useId, useMergeRefs, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getPopupItemRole } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item-offscreen.tsx\";\nimport { useCollectionItemOffscreen } from \"../collection/collection-item-offscreen.tsx\";\nimport type { ComboboxStoreState } from \"../combobox/combobox-store.ts\";\nimport { Role } from \"../role/role.tsx\";\nimport type { SelectStoreState } from \"../select/select-store.ts\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport * as Base from \"./composite-item.tsx\";\nimport type { CompositeStoreState } from \"./composite-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nexport function useCompositeItemOffscreen<\n  T extends ElementType,\n  // oxlint-disable-next-line no-unnecessary-type-parameters\n  P extends CompositeItemProps<T>,\n>({ store, offscreenMode = \"active\", disabled, value, ...props }: P) {\n  const context = useCompositeContext();\n  store = store || context;\n\n  const id = useId(props.id);\n\n  const { storeId, active, listElement, offscreenRoot } = useStoreStateObject(\n    store,\n    {\n      storeId: \"id\",\n      active(\n        state?: CompositeStoreState | ComboboxStoreState | SelectStoreState,\n      ) {\n        if (!state) return;\n        if (!(\"selectedValue\" in state) && \"value\" in state) {\n          if (state.value === value) return true;\n        }\n        return !!id && state.activeId === id;\n      },\n      listElement(state?: CompositeStoreState | SelectStoreState) {\n        if (!state) return;\n        if (!(\"listElement\" in state)) return;\n        return state.listElement;\n      },\n      offscreenRoot(state?: CompositeStoreState | ComboboxStoreState) {\n        if (props.offscreenRoot) return props.offscreenRoot;\n        if (!state) return;\n        if (!(\"contentElement\" in state)) return;\n        return state.contentElement || null;\n      },\n    },\n  );\n\n  const offscreenProps = useCollectionItemOffscreen({\n    id,\n    store,\n    offscreenMode: active ? \"active\" : offscreenMode,\n    ...props,\n    offscreenRoot,\n  });\n\n  if (!offscreenProps.active) {\n    return {\n      ...offscreenProps,\n      children: value,\n      role: getPopupItemRole(listElement),\n      \"aria-disabled\": disabled || undefined,\n      \"data-offscreen-id\": storeId,\n    };\n  }\n\n  return offscreenProps;\n}\n\nexport const CompositeItem = forwardRef(function CompositeItem({\n  offscreenMode,\n  offscreenRoot,\n  ...props\n}: CompositeItemProps) {\n  const { active, ref, ...rest } = useCompositeItemOffscreen({\n    offscreenMode,\n    offscreenRoot,\n    ...props,\n  });\n  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };\n  if (active) {\n    return <Base.CompositeItem {...allProps} />;\n  }\n  // Remove CompositeItem props\n  const {\n    store,\n    rowId,\n    preventScrollOnKeyDown,\n    moveOnKeyPress,\n    tabbable,\n    getItem,\n    ...htmlProps\n  } = allProps;\n  const Component = Role[TagName];\n  return <Component {...htmlProps} />;\n});\n\nexport interface CompositeItemOptions<T extends ElementType = TagName>\n  extends\n    Base.CompositeItemOptions<T>,\n    Omit<CollectionItemOptions<T>, \"store\"> {}\n\nexport type CompositeItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAiBA,MAAA,UAAgB;SAKR,0BAAU,EAAoB,OAAA,gBAAA,UAAA,UAAA,OAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAM,SAAW;CAEjB,MAAM,KAAE,MAAS,MAAA,EAAQ;OAGrB,EAAA,SAAS,QAAA,aAAA,kBAAA,oBAAA,OAAA;EACT,SACE;SAEK,OAAO;GACZ,IAAI,CAAA,OAAE;SACA,mBAAgB,UAAc,WAAA,OAAI;QAAA,MAAA,UAAA,OAAA,OAAA;GAAA;GAG1C,OAAA,CAAA,CAAA,MAAA,MAAA,aAAA;EACA;cACO,OAAO;GACZ,IAAI,CAAA,OAAE;GACN,IAAA,EAAA,iBAAa,QAAA;GACf,OAAA,MAAA;EACA;gBACY,OAAA;GACV,IAAI,MAAC,eAAO,OAAA,MAAA;GACZ,IAAI,CAAA,OAAE;GACN,IAAA,EAAA,oBAAa,QAAkB;GACjC,OAAA,MAAA,kBAAA;EAEJ;CAEA,CAAA;OACE,iBAAA,2BAAA;EACA;EACA;EACA,eAAG,SAAA,WAAA;EACH,GAAA;EACD;CAED,CAAA;KAEO,CAAA,eAAA,QAAA,OAAA;EACH,GAAA;EACA,UAAM;EACN,MAAA,iBAAiB,WAAY;EAC7B,iBAAA,YAAqB,KAAA;EACvB,qBAAA;CAGF;CACF,OAAA;AAEA;MAKE,gBAAqB,WAAG,SAAS,cAAA,EAAA,eAA0B,eAAA,GAAA,SAAA;OACzD,EAAA,QAAA,KAAA,GAAA,SAAA,0BAAA;EACA;EACA;EACD,GAAA;CACD,CAAA;OAAsB,WAAA;EAAM,GAAG;EAAO,GAAA;EAAkC,KAAA,aAAA,KAAA,MAAA,GAAA;CACxE;CAIA,IAAA,QACE,OAEA,oBAAA,iBACA,EAAA,GAAA,SACA,CAAA;CAIF,MAAM,EAAA,OAAA,OAAY,wBAAK,gBAAA,UAAA,SAAA,GAAA,cAAA;CACvB,MAAA,YAAO,KAAA;CACR,OAAA,oBAAA,WAAA,EAAA,GAAA,UAAA,CAAA"}

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

@@ -0,0 +1,2 @@
+import { i as useCompositeItem, n as CompositeItemOptions, r as CompositeItemProps, t as CompositeItem } from "../composite-item-B4WTelVz.js";
+export { CompositeItem, CompositeItemOptions, CompositeItemProps, useCompositeItem };