@ariakit/react-components 0.1.0

package/dist/command/command.js

@@ -0,0 +1,130 @@
+"use client";
+import { useFocusable } from "../focusable/focusable.js";
+import { createElement, createHook, forwardRef, useEvent, useMergeRefs, useMetadataProps } from "@ariakit/react-utils";
+import { disabledFromProps, fireClickEvent, isButton, isFirefox, isSelfTarget, isTextField, queueBeforeEvent } from "@ariakit/utils";
+import { useEffect, useRef, useState } from "react";
+//#region src/command/command.tsx
+const TagName = "button";
+function isNativeClick(event) {
+	if (!event.isTrusted) return false;
+	// istanbul ignore next: can't test trusted events yet
+	const element = event.currentTarget;
+	if (event.key === "Enter") return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A";
+	if (event.key === " ") return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT";
+	return false;
+}
+const symbol = Symbol("command");
+/**
+* Returns props to create a `Command` component. If the element is not a native
+* clickable element (like a button), this hook will return additional props to
+* make sure it's accessible.
+* @see https://ariakit.com/components/command
+* @example
+* ```jsx
+* const props = useCommand({ render: <div /> });
+* <Role {...props}>Accessible button</Role>
+* ```
+*/
+const useCommand = createHook(function useCommand({ clickOnEnter = true, clickOnSpace = true, ...props }) {
+	const ref = useRef(null);
+	const [isNativeButton, setIsNativeButton] = useState(false);
+	useEffect(() => {
+		if (!ref.current) return;
+		setIsNativeButton(isButton(ref.current));
+	}, []);
+	const [active, setActive] = useState(false);
+	const activeRef = useRef(false);
+	const disabled = disabledFromProps(props);
+	const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);
+	const onKeyDownProp = props.onKeyDown;
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		const element = event.currentTarget;
+		if (event.defaultPrevented) return;
+		if (isDuplicate) return;
+		if (disabled) return;
+		if (!isSelfTarget(event)) return;
+		if (isTextField(element)) return;
+		if (element.isContentEditable) return;
+		const isEnter = clickOnEnter && event.key === "Enter";
+		const isSpace = clickOnSpace && event.key === " ";
+		const shouldPreventEnter = event.key === "Enter" && !clickOnEnter;
+		const shouldPreventSpace = event.key === " " && !clickOnSpace;
+		if (shouldPreventEnter || shouldPreventSpace) {
+			event.preventDefault();
+			return;
+		}
+		if (isEnter || isSpace) {
+			const nativeClick = isNativeClick(event);
+			if (isEnter) {
+				if (!nativeClick) {
+					event.preventDefault();
+					const { view, ...eventInit } = event;
+					const click = () => fireClickEvent(element, eventInit);
+					if (isFirefox()) queueBeforeEvent(element, "keyup", click);
+					else queueMicrotask(click);
+				}
+			} else if (isSpace) {
+				activeRef.current = true;
+				if (!nativeClick) {
+					event.preventDefault();
+					setActive(true);
+				}
+			}
+		}
+	});
+	const onKeyUpProp = props.onKeyUp;
+	const onKeyUp = useEvent((event) => {
+		onKeyUpProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isDuplicate) return;
+		if (disabled) return;
+		if (event.metaKey) return;
+		const isSpace = clickOnSpace && event.key === " ";
+		if (activeRef.current && isSpace) {
+			activeRef.current = false;
+			if (!isNativeClick(event)) {
+				event.preventDefault();
+				setActive(false);
+				const element = event.currentTarget;
+				const { view, ...eventInit } = event;
+				queueMicrotask(() => fireClickEvent(element, eventInit));
+			}
+		}
+	});
+	props = {
+		"data-active": active || void 0,
+		type: isNativeButton ? "button" : void 0,
+		...metadataProps,
+		...props,
+		ref: useMergeRefs(ref, props.ref),
+		onKeyDown,
+		onKeyUp
+	};
+	props = useFocusable(props);
+	return props;
+});
+/**
+* Renders a clickable element, which is a `button` by default, and inherits
+* features from the [`Focusable`](https://ariakit.com/reference/focusable)
+* component.
+*
+* If the base element isn't a native clickable one, this component will provide
+* extra attributes and event handlers to ensure accessibility. It can be
+* activated with the keyboard using the
+* [`clickOnEnter`](https://ariakit.com/reference/command#clickonenter) and
+* [`clickOnSpace`](https://ariakit.com/reference/command#clickonspace)
+* props. Both are set to `true` by default.
+* @see https://ariakit.com/components/command
+* @example
+* ```jsx
+* <Command>Button</Command>
+* ```
+*/
+const Command = forwardRef(function Command(props) {
+	return createElement(TagName, useCommand(props));
+});
+//#endregion
+export { Command, useCommand };
+
+//# sourceMappingURL=command.js.map

package/dist/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":[],"sources":["../../src/command/command.tsx"],"sourcesContent":["import {\n  useEvent,\n  useMergeRefs,\n  useMetadataProps,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  isButton,\n  isTextField,\n  fireClickEvent,\n  isSelfTarget,\n  queueBeforeEvent,\n  disabledFromProps,\n  isFirefox,\n} from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isNativeClick(event: KeyboardEvent) {\n  if (!event.isTrusted) return false;\n  // istanbul ignore next: can't test trusted events yet\n  const element = event.currentTarget;\n  if (event.key === \"Enter\") {\n    return (\n      isButton(element) ||\n      element.tagName === \"SUMMARY\" ||\n      element.tagName === \"A\"\n    );\n  }\n  if (event.key === \" \") {\n    return (\n      isButton(element) ||\n      element.tagName === \"SUMMARY\" ||\n      element.tagName === \"INPUT\" ||\n      element.tagName === \"SELECT\"\n    );\n  }\n  return false;\n}\n\nconst symbol = Symbol(\"command\");\n\n/**\n * Returns props to create a `Command` component. If the element is not a native\n * clickable element (like a button), this hook will return additional props to\n * make sure it's accessible.\n * @see https://ariakit.com/components/command\n * @example\n * ```jsx\n * const props = useCommand({ render: <div /> });\n * <Role {...props}>Accessible button</Role>\n * ```\n */\nexport const useCommand = createHook<TagName, CommandOptions>(\n  function useCommand({ clickOnEnter = true, clickOnSpace = true, ...props }) {\n    const ref = useRef<HTMLType>(null);\n    const [isNativeButton, setIsNativeButton] = useState(false);\n\n    useEffect(() => {\n      if (!ref.current) return;\n      setIsNativeButton(isButton(ref.current));\n    }, []);\n\n    const [active, setActive] = useState(false);\n    const activeRef = useRef(false);\n    const disabled = disabledFromProps(props);\n    const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);\n\n    const onKeyDownProp = props.onKeyDown;\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      const element = event.currentTarget;\n\n      if (event.defaultPrevented) return;\n      if (isDuplicate) return;\n      if (disabled) return;\n      if (!isSelfTarget(event)) return;\n      if (isTextField(element)) return;\n      if (element.isContentEditable) return;\n\n      const isEnter = clickOnEnter && event.key === \"Enter\";\n      const isSpace = clickOnSpace && event.key === \" \";\n      const shouldPreventEnter = event.key === \"Enter\" && !clickOnEnter;\n      const shouldPreventSpace = event.key === \" \" && !clickOnSpace;\n\n      if (shouldPreventEnter || shouldPreventSpace) {\n        event.preventDefault();\n        return;\n      }\n\n      if (isEnter || isSpace) {\n        const nativeClick = isNativeClick(event);\n        if (isEnter) {\n          if (!nativeClick) {\n            event.preventDefault();\n            const { view, ...eventInit } = event;\n            // Fire a click event instead of calling element.click() directly so\n            // we can pass along the modifier state.\n            const click = () => fireClickEvent(element, eventInit);\n            // If this element is a link with target=\"_blank\", Firefox will\n            // block the \"popup\" if the click event is dispatched synchronously\n            // or in a microtask. Queueing the event asynchronously fixes that.\n            if (isFirefox()) {\n              queueBeforeEvent(element, \"keyup\", click);\n            } else {\n              queueMicrotask(click);\n            }\n          }\n        } else if (isSpace) {\n          activeRef.current = true;\n          if (!nativeClick) {\n            event.preventDefault();\n            setActive(true);\n          }\n        }\n      }\n    });\n\n    const onKeyUpProp = props.onKeyUp;\n\n    const onKeyUp = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyUpProp?.(event);\n\n      if (event.defaultPrevented) return;\n      if (isDuplicate) return;\n      if (disabled) return;\n      if (event.metaKey) return;\n\n      const isSpace = clickOnSpace && event.key === \" \";\n\n      if (activeRef.current && isSpace) {\n        activeRef.current = false;\n        if (!isNativeClick(event)) {\n          event.preventDefault();\n          setActive(false);\n          const element = event.currentTarget;\n          const { view, ...eventInit } = event;\n          queueMicrotask(() => fireClickEvent(element, eventInit));\n        }\n      }\n    });\n\n    props = {\n      \"data-active\": active || undefined,\n      type: isNativeButton ? \"button\" : undefined,\n      ...metadataProps,\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n      onKeyDown,\n      onKeyUp,\n    };\n\n    props = useFocusable<TagName>(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders a clickable element, which is a `button` by default, and inherits\n * features from the [`Focusable`](https://ariakit.com/reference/focusable)\n * component.\n *\n * If the base element isn't a native clickable one, this component will provide\n * extra attributes and event handlers to ensure accessibility. It can be\n * activated with the keyboard using the\n * [`clickOnEnter`](https://ariakit.com/reference/command#clickonenter) and\n * [`clickOnSpace`](https://ariakit.com/reference/command#clickonspace)\n * props. Both are set to `true` by default.\n * @see https://ariakit.com/components/command\n * @example\n * ```jsx\n * <Command>Button</Command>\n * ```\n */\nexport const Command = forwardRef(function Command(props: CommandProps) {\n  const htmlProps = useCommand(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CommandOptions<\n  T extends ElementType = TagName,\n> extends FocusableOptions<T> {\n  /**\n   * If set to `true`, pressing the enter key while this element is focused will\n   * trigger a click on the element, regardless of whether it's a native button\n   * or not. If this prop is set to `false`, pressing enter will not initiate a\n   * click.\n   * @default true\n   */\n  clickOnEnter?: boolean;\n  /**\n   * If set to `true`, pressing and releasing the space key while this element\n   * is focused will trigger a click on the element, regardless of whether it's\n   * a native button or not. If this prop is set to `false`, space will not\n   * initiate a click.\n   * @default true\n   */\n  clickOnSpace?: boolean;\n}\n\nexport type CommandProps<T extends ElementType = TagName> = Props<\n  T,\n  CommandOptions<T>\n>;\n"],"mappings":";;;;;;AA2BA,MAAA,UAAS;SACF,cAAiB,OAAO;;;CAG7B,MAAI,UAAM,MAAQ;CAOlB,IAAI,MAAM,QAAQ,SAChB,OACE,SAAS,OAAO,KAChB,QAAQ,YAAY,aACpB,QAAQ,YAAY;CAIxB,IAAA,MAAO,QAAA,KAAA,OAAA,SAAA,OAAA,KAAA,QAAA,YAAA,aAAA,QAAA,YAAA,WAAA,QAAA,YAAA;CACT,OAAA;AAEA;;;;;;;;;;;;;MAeI,aAAY,WAAqB,SAAA,WAAA,EAAA,eAAA,MAAA,eAAA,MAAA,GAAA,SAAA;CACjC,MAAM,MAAC,OAAA,IAAgB;CAEvB,MAAA,CAAA,gBAAgB,qBAAA,SAAA,KAAA;iBACL;EACT,IAAA,CAAA,IAAA,SAAkB;EACpB,kBAAK,SAAA,IAAA,OAAA,CAAA;CAEL,GAAA,CAAA,CAAA;CACA,MAAM,CAAA,QAAA,aAAmB,SAAK,KAAA;CAC9B,MAAM,YAAW,OAAA,KAAA;CACjB,MAAM,WAAC,kBAAa,KAAiB;CAErC,MAAM,CAAA,aAAA,iBAAsB,iBAAA,OAAA,QAAA,IAAA;CAE5B,MAAM,gBAAY,MAAU;OAC1B,YAAgB,UAAK,UAAA;EACrB,gBAAgB,KAAA;EAEhB,MAAI,UAAM,MAAA;EACV,IAAI,MAAA,kBAAa;EACjB,IAAI,aAAU;EACd,IAAI,UAAC;EACL,IAAI,CAAA,aAAY,KAAO,GAAG;EAC1B,IAAI,YAAQ,OAAA,GAAA;EAEZ,IAAA,QAAM,mBAAU;EAChB,MAAM,UAAU,gBAAgB,MAAM,QAAQ;EAC9C,MAAM,UAAA,gBAAqB,MAAM,QAAQ;EACzC,MAAM,qBAAqB,MAAM,QAAQ,WAAQ,CAAA;EAEjD,MAAI,qBAAsB,MAAA,QAAA,OAAoB,CAAA;MAC5C,sBAAqB,oBAAA;GACrB,MAAA,eAAA;GACF;EAEA;MACE,WAAM,SAAc;GACpB,MAAI,cACF,cAAA,KAAA;;QACE,CAAA,aAAM;KACN,MAAM,eAAW;KAGjB,MAAM,EAAA,MAAA,GAAA,cAAc;KAIpB,MAAI,cACF,eAAiB,SAAS,SAAS;mBAEnC,GAAA,iBAAoB,SAAA,SAAA,KAAA;UAExB,eAAA,KAAA;;UAEA,IAAU,SAAA;IACV,UAAK,UAAa;QAChB,CAAA,aAAM;KACN,MAAA,eAAc;KAChB,UAAA,IAAA;IACF;GACF;EACD;CAED,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EAEnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAa;EACjB,IAAI,aAAU;EACd,IAAI,UAAM;EAEV,IAAA,MAAM,SAAU;EAEhB,MAAI,UAAU,gBAAW,MAAS,QAAA;MAChC,UAAU,WAAU,SAAA;GACpB,UAAK,UAAc;OACjB,CAAA,cAAM,KAAe,GAAA;IACrB,MAAA,eAAe;IACf,UAAM,KAAA;IACN,MAAM,UAAQ,MAAG;IACjB,MAAA,EAAA,MAAA,GAAA,cAAqB;IACvB,qBAAA,eAAA,SAAA,SAAA,CAAA;GACF;EACD;CAED,CAAA;SACE;EACA,eAAM,UAAiB,KAAA;EACvB,MAAG,iBAAA,WAAA,KAAA;EACH,GAAG;EACH,GAAA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACA;EACF;CAEA;CAEA,QAAO,aAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;MAqBE,UAAO,WAAc,SADH,QAAW,OACU;CACxC,OAAA,cAAA,SAAA,WAAA,KAAA,CAAA"}

package/dist/command-DckndCUK.d.ts

@@ -0,0 +1,59 @@
+import { n as FocusableOptions } from "./focusable-B00tOxtB.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/command/command.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Command` component. If the element is not a native
+ * clickable element (like a button), this hook will return additional props to
+ * make sure it's accessible.
+ * @see https://ariakit.com/components/command
+ * @example
+ * ```jsx
+ * const props = useCommand({ render: <div /> });
+ * <Role {...props}>Accessible button</Role>
+ * ```
+ */
+declare const useCommand: import("@ariakit/react-utils").Hook<"button", CommandOptions<"button">>;
+/**
+ * Renders a clickable element, which is a `button` by default, and inherits
+ * features from the [`Focusable`](https://ariakit.com/reference/focusable)
+ * component.
+ *
+ * If the base element isn't a native clickable one, this component will provide
+ * extra attributes and event handlers to ensure accessibility. It can be
+ * activated with the keyboard using the
+ * [`clickOnEnter`](https://ariakit.com/reference/command#clickonenter) and
+ * [`clickOnSpace`](https://ariakit.com/reference/command#clickonspace)
+ * props. Both are set to `true` by default.
+ * @see https://ariakit.com/components/command
+ * @example
+ * ```jsx
+ * <Command>Button</Command>
+ * ```
+ */
+declare const Command: (props: CommandProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CommandOptions<T extends ElementType = TagName> extends FocusableOptions<T> {
+  /**
+   * If set to `true`, pressing the enter key while this element is focused will
+   * trigger a click on the element, regardless of whether it's a native button
+   * or not. If this prop is set to `false`, pressing enter will not initiate a
+   * click.
+   * @default true
+   */
+  clickOnEnter?: boolean;
+  /**
+   * If set to `true`, pressing and releasing the space key while this element
+   * is focused will trigger a click on the element, regardless of whether it's
+   * a native button or not. If this prop is set to `false`, space will not
+   * initiate a click.
+   * @default true
+   */
+  clickOnSpace?: boolean;
+}
+type CommandProps<T extends ElementType = TagName> = Props<T, CommandOptions<T>>;
+//#endregion
+export { useCommand as i, CommandOptions as n, CommandProps as r, Command as t };
+//# sourceMappingURL=command-DckndCUK.d.ts.map

package/dist/command-DckndCUK.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-DckndCUK.d.ts","names":["Props","ElementType","FocusableOptions","TagName","useCommand","CommandOptions","Hook","Command","CommandProps","props","ReactElement","JSXElementConstructor","T","clickOnEnter","clickOnSpace"],"sources":["../src/command/command.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFsC;;;;AAC9C;AAAA;;;;AACQ;AAY7B;AAdmE,cAc9CC,UAAAA,iCAA2CE,IAAAA,WAAeD,cAAc;;;AAAA;AAkB7F;;;;;;;;;AAAuI;AACvI;;;;cADqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjGN,cAAAA,WAAyBJ,WAAAA,GAAcE,OAAAA,UAAiBD,gBAAAA,CAAiBU,CAAAA;EAAjBV;;;;;;;EAQrEW,YAAAA;EAAAA;;;AAQY;AAEhB;;;EAFIC,YAAAA;AAAAA;AAAAA,KAEQN,YAAAA,WAAuBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

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

@@ -0,0 +1,59 @@
+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-container.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeContainer` component. This component
+ * renders interactive widgets inside composite items. 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
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeContainer({ store });
+ * <Composite store={store}>
+ *   <CompositeItem {...props}>
+ *     <input type="text" />
+ *   </CompositeItem>
+ * </Composite>
+ * ```
+ */
+declare const useCompositeContainer: import("@ariakit/react-utils").Hook<"div", CompositeContainerOptions<"div">>;
+/**
+ * Renders a container for interactive widgets inside composite items. 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
+ * @example
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeContainer />}>
+ *       <input type="text" />
+ *     </CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeContainer: (props: CompositeContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeContainerOptions<_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 CompositeContainerProps<T extends ElementType = TagName> = Props<T, CompositeContainerOptions<T>>;
+//#endregion
+export { CompositeContainer, CompositeContainerOptions, CompositeContainerProps, useCompositeContainer };
+//# sourceMappingURL=composite-container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-container.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeContainer","CompositeContainerOptions","Hook","CompositeContainer","CompositeContainerProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-container.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAkB7B;;;;AAAgH;AAmBhH;;AAvC2D,cAoBtCC,qBAAAA,iCAAsDE,IAAAA,QAAYD,yBAAyB;;;;;;;AAmB6C;AAC7J;;;;;;;;;;;cADqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,YAAqCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EASjFc;;;AAAsB;AAE1B;;;;EAFIA,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,uBAAAA,WAAkCP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,yBAAAA,CAA0BS,CAAAA"}

package/dist/composite/composite-container.js

@@ -0,0 +1,164 @@
+"use client";
+import { useCompositeContext } from "./composite-context.js";
+import { selectTextField } from "./utils.js";
+import { createElement, createHook, forwardRef, useEvent, useMergeRefs } from "@ariakit/react-utils";
+import { disableFocusIn, getFirstTabbableIn, isButton, isFocusEventOutside, isSelfTarget, isTextField, removeUndefinedValues, restoreFocusIn } from "@ariakit/utils";
+import { useEffect, useRef } from "react";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/composite/composite-container.tsx
+const TagName = "div";
+function getFirstTabbable(container) {
+	restoreFocusIn(container);
+	const tabbable = getFirstTabbableIn(container);
+	disableFocusIn(container);
+	return tabbable;
+}
+/**
+* Returns props to create a `CompositeContainer` component. This component
+* renders interactive widgets inside composite items. 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
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeContainer({ store });
+* <Composite store={store}>
+*   <CompositeItem {...props}>
+*     <input type="text" />
+*   </CompositeItem>
+* </Composite>
+* ```
+*/
+const useCompositeContainer = createHook(function useCompositeContainer({ store, ...props }) {
+	const context = useCompositeContext();
+	store = store || context;
+	const ref = useRef(null);
+	const isOpenRef = useRef(false);
+	const open = (collapseToEnd = false) => {
+		const container = ref.current;
+		if (!container) return;
+		restoreFocusIn(container);
+		const tabbable = getFirstTabbableIn(container);
+		if (!tabbable) {
+			disableFocusIn(container);
+			return;
+		}
+		isOpenRef.current = true;
+		queueMicrotask(() => {
+			tabbable.focus();
+			if (isTextField(tabbable) || tabbable.isContentEditable) selectTextField(tabbable, collapseToEnd);
+		});
+	};
+	const close = () => {
+		const container = ref.current;
+		if (!container) return;
+		isOpenRef.current = false;
+		disableFocusIn(container);
+	};
+	const renderedItems = useStoreState(store, "renderedItems");
+	useEffect(() => {
+		const container = ref.current;
+		if (!container) return;
+		if (!isOpenRef.current && renderedItems?.length) disableFocusIn(container);
+	}, [renderedItems]);
+	const onFocusProp = props.onFocus;
+	const onFocus = useEvent((event) => {
+		onFocusProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const isOpen = isOpenRef.current;
+		if (isSelfTarget(event)) {
+			isOpenRef.current = false;
+			const { baseElement } = store.getState();
+			const containers = baseElement?.querySelectorAll("[data-composite-container]");
+			if (containers) for (const container of containers) disableFocusIn(container);
+		} else if (!isOpen) {
+			isOpenRef.current = true;
+			restoreFocusIn(event.currentTarget);
+			store?.setState("moves", 0);
+		}
+	});
+	const onBlurProp = props.onBlur;
+	const onBlur = useEvent((event) => {
+		onBlurProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isFocusEventOutside(event)) close();
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (event.altKey) return;
+		if (event.ctrlKey) return;
+		if (event.metaKey) return;
+		if (event.shiftKey) return;
+		const container = event.currentTarget;
+		if (isSelfTarget(event)) {
+			if (event.key.length === 1 && event.key !== " ") {
+				const tabbable = getFirstTabbable(container);
+				if (!tabbable) return;
+				if (isTextField(tabbable) || tabbable.isContentEditable) {
+					event.stopPropagation();
+					open();
+				}
+			} else if (event.key === "Delete" || event.key === "Backspace") {
+				const tabbable = getFirstTabbable(container);
+				if (!tabbable) return;
+				if (isTextField(tabbable) || tabbable.isContentEditable) {
+					open();
+					const onInput = () => queueMicrotask(() => container.focus());
+					container.addEventListener("input", onInput, { once: true });
+				}
+			}
+		} else if (event.key === "Escape") queueMicrotask(() => container.focus());
+		else if (event.key === "Enter") {
+			const target = event.target;
+			if (target.tagName === "INPUT" && !isButton(target) || target.tagName === "TEXTAREA" || target.isContentEditable) {
+				event.preventDefault();
+				queueMicrotask(() => container.focus());
+			}
+		}
+	});
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isSelfTarget(event) && !event.detail) open(true);
+	});
+	props = {
+		"data-composite-container": "",
+		...props,
+		ref: useMergeRefs(ref, props.ref),
+		onFocus,
+		onBlur,
+		onKeyDown,
+		onClick
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a container for interactive widgets inside composite items. 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
+* @example
+* ```jsx {3-5}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeItem render={<CompositeContainer />}>
+*       <input type="text" />
+*     </CompositeItem>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeContainer = forwardRef(function CompositeContainer(props) {
+	return createElement(TagName, useCompositeContainer(props));
+});
+//#endregion
+export { CompositeContainer, useCompositeContainer };
+
+//# sourceMappingURL=composite-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-container.js","names":["composite"],"sources":["../../src/composite/composite-container.tsx"],"sourcesContent":["// TODO: Add data-attribute to indicate whether it's expanded?\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  isButton,\n  isTextField,\n  isFocusEventOutside,\n  isSelfTarget,\n  disableFocusIn,\n  getFirstTabbableIn,\n  restoreFocusIn,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, KeyboardEvent, MouseEvent } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport { selectTextField } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getFirstTabbable(container: HTMLElement) {\n  restoreFocusIn(container);\n  const tabbable = getFirstTabbableIn(container);\n  disableFocusIn(container);\n  return tabbable;\n}\n\n/**\n * Returns props to create a `CompositeContainer` component. This component\n * renders interactive widgets inside composite items. 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 * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeContainer({ store });\n * <Composite store={store}>\n *   <CompositeItem {...props}>\n *     <input type=\"text\" />\n *   </CompositeItem>\n * </Composite>\n * ```\n */\nexport const useCompositeContainer = createHook<\n  TagName,\n  CompositeContainerOptions\n>(function useCompositeContainer({ store, ...props }) {\n  const context = useCompositeContext();\n  store = store || context;\n\n  const ref = useRef<HTMLType>(null);\n  const isOpenRef = useRef(false);\n\n  const open = (collapseToEnd = false) => {\n    const container = ref.current;\n    if (!container) return;\n    restoreFocusIn(container);\n    const tabbable = getFirstTabbableIn(container);\n    if (!tabbable) {\n      disableFocusIn(container);\n      return;\n    }\n    isOpenRef.current = true;\n    queueMicrotask(() => {\n      tabbable.focus();\n      if (isTextField(tabbable) || tabbable.isContentEditable) {\n        selectTextField(tabbable, collapseToEnd);\n      }\n    });\n  };\n\n  const close = () => {\n    const container = ref.current;\n    if (!container) return;\n    isOpenRef.current = false;\n    disableFocusIn(container);\n  };\n\n  const renderedItems = useStoreState(store, \"renderedItems\");\n\n  // Disable focus on the tabbable elements inside the container when the\n  // container is mounted.\n  useEffect(() => {\n    const container = ref.current;\n    if (!container) return;\n    const isOpen = isOpenRef.current;\n    // We need to wait for the items to be populated before we can disable\n    // focus, so we consider edge cases where some tabbable elements become\n    // disabled after the first render (for example, when rendering nested\n    // composite elements).\n    if (!isOpen && renderedItems?.length) {\n      disableFocusIn(container);\n    }\n  }, [renderedItems]);\n\n  const onFocusProp = props.onFocus;\n\n  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n    onFocusProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!store) return;\n    const isOpen = isOpenRef.current;\n    if (isSelfTarget(event)) {\n      // The container element itself has received focus. Here we make an\n      // additional step in case tabbable elements have been added lazily to\n      // the DOM. We get all containers in the current composite element and\n      // disable all tabbable elements inside them.\n      isOpenRef.current = false;\n      const { baseElement } = store.getState();\n      const composite = baseElement;\n      const selector = \"[data-composite-container]\";\n      const containers = composite?.querySelectorAll<HTMLElement>(selector);\n      if (containers) {\n        for (const container of containers) {\n          disableFocusIn(container);\n        }\n      }\n    } else if (!isOpen) {\n      // Otherwise, if any element inside the container has received focus,\n      // for example, by a direct user click, we should act as the container\n      // has been opened.\n      isOpenRef.current = true;\n      restoreFocusIn(event.currentTarget);\n      // Resets the moves in the store so the composite item will not be\n      // focused right after the focusable element inside the container gets\n      // focus.\n      store?.setState(\"moves\", 0);\n    }\n  });\n\n  const onBlurProp = props.onBlur;\n\n  const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n    onBlurProp?.(event);\n    if (event.defaultPrevented) return;\n    if (isFocusEventOutside(event)) {\n      close();\n    }\n  });\n\n  const onKeyDownProp = props.onKeyDown;\n\n  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented) return;\n    if (event.altKey) return;\n    if (event.ctrlKey) return;\n    if (event.metaKey) return;\n    if (event.shiftKey) return;\n    const container = event.currentTarget;\n    if (isSelfTarget(event)) {\n      // Alphanumeric key on container: focus the first tabbable element in\n      // the container if it's a text field or contenteditable element. This\n      // will automatically replace the text field value with the pressed key.\n      if (event.key.length === 1 && event.key !== \" \") {\n        const tabbable = getFirstTabbable(container);\n        if (!tabbable) return;\n        if (isTextField(tabbable) || tabbable.isContentEditable) {\n          event.stopPropagation();\n          open();\n        }\n      }\n\n      // Delete/Backspace on container: focus on the first tabbable element in\n      // the container if it's a text field or contenteditable element. This\n      // will automatically clear the text field value.\n      else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n        const tabbable = getFirstTabbable(container);\n        if (!tabbable) return;\n        if (isTextField(tabbable) || tabbable.isContentEditable) {\n          open();\n          // We need to move focus back to the container as soon as the\n          // delete/backspace key is captured by the text field.\n          const onInput = () => queueMicrotask(() => container.focus());\n          container.addEventListener(\"input\", onInput, { once: true });\n        }\n      }\n    }\n\n    // Escape on tabbable element inside container: move focus back to the\n    // container.\n    else if (event.key === \"Escape\") {\n      queueMicrotask(() => container.focus());\n    }\n\n    // Enter on tabbable element inside container: move focus back to the\n    // container only if it's an input or contenteditable element.\n    else if (event.key === \"Enter\") {\n      const target = event.target as HTMLElement;\n      const isInput =\n        (target.tagName === \"INPUT\" && !isButton(target)) ||\n        target.tagName === \"TEXTAREA\";\n      if (isInput || target.isContentEditable) {\n        event.preventDefault();\n        queueMicrotask(() => container.focus());\n      }\n    }\n  });\n\n  const onClickProp = props.onClick;\n\n  const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n    onClickProp?.(event);\n    if (event.defaultPrevented) return;\n    if (isSelfTarget(event) && !event.detail) {\n      // Move focus to the first tabbable element in the container and place\n      // at the end.\n      open(true);\n    }\n  });\n\n  props = {\n    \"data-composite-container\": \"\",\n    ...props,\n    ref: useMergeRefs(ref, props.ref),\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onClick,\n  };\n\n  return removeUndefinedValues(props);\n});\n\n/**\n * Renders a container for interactive widgets inside composite items. This\n * should be used in conjunction with the\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) component or\n * a component that uses\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem render={<CompositeContainer />}>\n *       <input type=\"text\" />\n *     </CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeContainer = forwardRef(function CompositeContainer(\n  props: CompositeContainerProps,\n) {\n  const htmlProps = useCompositeContainer(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeContainerOptions<\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 CompositeContainerProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeContainerOptions<T>\n>;\n"],"mappings":";;;;;;;;AA8BA,MAAA,UAAS;SACP,iBAAwB,WAAA;CACxB,eAAM,SAAW;CACjB,MAAA,WAAe,mBAAS,SAAA;CACxB,eAAO,SAAA;CACT,OAAA;;;;;;;;;;;;;;;;;;;MAuBE,wBAAgB,WAAoB,SAAA,sBAAA,EAAA,OAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAM,SAAM;CACZ,MAAM,MAAA,OAAY,IAAA;CAElB,MAAM,YAAQ,OAAA,KAAgB;OAC5B,QAAM,gBAAgB,UAAA;EACtB,MAAK,YAAW,IAAA;EAChB,IAAA,CAAA,WAAe;EACf,eAAM,SAAW;EACjB,MAAK,WAAU,mBAAA,SAAA;MACb,CAAA,UAAA;GACA,eAAA,SAAA;GACF;EACA;EACA,UAAA,UAAA;uBACiB;GACf,SAAI,MAAA;GAGL,IAAA,YAAA,QAAA,KAAA,SAAA,mBAAA,gBAAA,UAAA,aAAA;EACH,CAAA;CAEA;OACE,cAAkB;EAClB,MAAK,YAAW,IAAA;EAChB,IAAA,CAAA,WAAU;EACV,UAAA,UAAe;EACjB,eAAA,SAAA;CAEA;CAIA,MAAA,gBAAgB,cAAA,OAAA,eAAA;iBACR;EACN,MAAK,YAAW,IAAA;EAMhB,IAAI,CALW,WAAU;EAQ3B,IAAI,CAAA,UAAA,WAAc,eAAA,QAAA,eAAA,SAAA;CAElB,GAAA,CAAA,aAAM,CAAA;CAEN,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAC,kBAAO;EACZ,IAAA,CAAA,OAAM;EACN,MAAI,SAAA,UAAqB;MAKvB,aAAU,KAAU,GAAA;GACpB,UAAQ,UAAA;GAGR,MAAM,EAAA,gBAAaA,MAAAA,SAAW;GAC9B,MAAI,aACF,aAAW,iBAAa,4BACE;GAG9B,IAAA,YAAY,KAAQ,MAAA,aAAA,YAAA,eAAA,SAAA;SAIlB,IAAU,CAAA,QAAA;GACV,UAAA,UAAe;GAIf,eAAO,MAAS,aAAU;GAC5B,OAAA,SAAA,SAAA,CAAA;EACD;CAED,CAAA;CAEA,MAAM,aAAS,MAAU;OACvB,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAI,MAAA,kBAAoB;EAGzB,IAAA,oBAAA,KAAA,GAAA,MAAA;CAED,CAAA;CAEA,MAAM,gBAAY,MAAU;OAC1B,YAAgB,UAAK,UAAA;EACrB,gBAAU,KAAA;EACV,IAAI,MAAM,kBAAQ;EAClB,IAAI,MAAM,QAAA;EACV,IAAI,MAAM,SAAS;EACnB,IAAI,MAAM,SAAA;EACV,IAAA,MAAM,UAAY;EAClB,MAAI,YAAa,MAAK;mBAIN,KAAA;OACZ,MAAM,IAAA,WAAW,KAAA,MAAiB,QAAS,KAAA;IAC3C,MAAK,WAAU,iBAAA,SAAA;IACf,IAAI,CAAA,UAAA;QACF,YAAM,QAAgB,KAAA,SAAA,mBAAA;KACtB,MAAK,gBAAA;KACP,KAAA;IACF;UAMQ,IAAA,MAAA,QAAW,YAAiB,MAAA,QAAS,aAAA;IAC3C,MAAK,WAAU,iBAAA,SAAA;IACf,IAAI,CAAA,UAAA;QACF,YAAK,QAAA,KAAA,SAAA,mBAAA;KAGL,KAAA;KACA,MAAA,gBAAU,qBAA0B,UAAiB,MAAM,CAAA;KAC7D,UAAA,iBAAA,SAAA,SAAA,EAAA,MAAA,KAAA,CAAA;IACF;;SAWG,IAAI,MAAM,QAAQ,UAAS,qBAAA,UAAA,MAAA,CAAA;OAC9B,IAAM,MAAA,QAAe,SAAA;GAIrB,MAFG,SAAO,MAAA;OAGR,OAAM,YAAe,WAAA,CAAA,SAAA,MAAA,KAAA,OAAA,YAAA,cAAA,OAAA,mBAAA;IACrB,MAAA,eAAqB;IACvB,qBAAA,UAAA,MAAA,CAAA;GACF;EACD;CAED,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAwB;EAK7B,IAAA,aAAA,KAAA,KAAA,CAAA,MAAA,QAAA,KAAA,IAAA;CAED,CAAA;SACE;EACA,4BAAG;EACH,GAAA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACA;EACA;EACA;EACF;CAEA;CACD,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;MAwBC,qBAAqB,WADH,SAAA,mBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,sBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,34 @@
+import { r as CompositeStoreItem, t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+
+//#region src/composite/composite-context.d.ts
+/**
+ * Returns the composite store from the nearest composite container.
+ * @example
+ * function CompositeItem() {
+ *   const store = useCompositeContext();
+ *
+ *   if (!store) {
+ *     throw new Error("CompositeItem must be wrapped in CompositeProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useCompositeContext: () => CompositeStore<CompositeStoreItem> | undefined;
+declare const useCompositeScopedContext: (onlyScoped?: boolean) => CompositeStore<CompositeStoreItem> | undefined;
+declare const useCompositeProviderContext: () => CompositeStore<CompositeStoreItem> | undefined;
+declare const CompositeContextProvider: (props: import("react").ProviderProps<CompositeStore<CompositeStoreItem> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const CompositeScopedContextProvider: (props: import("react").ProviderProps<CompositeStore<CompositeStoreItem> | undefined>) => import("react/jsx-runtime").JSX.Element;
+interface ItemContext {
+  baseElement?: HTMLElement;
+  id?: string;
+}
+declare const CompositeItemContext: import("react").Context<ItemContext | undefined>;
+interface RowContext extends ItemContext {
+  ariaSetSize?: number;
+  ariaPosInSet?: number;
+}
+declare const CompositeRowContext: import("react").Context<RowContext | undefined>;
+//#endregion
+export { CompositeContextProvider, CompositeItemContext, CompositeRowContext, CompositeScopedContextProvider, useCompositeContext, useCompositeProviderContext, useCompositeScopedContext };
+//# sourceMappingURL=composite-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-context.d.ts","names":["CompositeStore","useCompositeContext","_$__composite_store_ts0","CompositeStoreItem","useCompositeScopedContext","onlyScoped","useCompositeProviderContext","CompositeContextProvider","ProviderProps","props","JSX","Element","CompositeScopedContextProvider","ItemContext","HTMLElement","baseElement","id","CompositeItemContext","Context","RowContext","ariaSetSize","ariaPosInSet","CompositeRowContext"],"sources":["../../src/composite/composite-context.d.ts"],"mappings":";;;;;AAcA;;;;AAA8D;AAC9D;;;;;;cADqBC,mBAAAA,QAA2BD,cAAc,CAA+DE,kBAAAA;AAAAA,cACxGE,yBAAAA,GAA4BC,UAAAA,eAAyBL,cAAc,CAA+DE,kBAAAA;AAAAA,cAClII,2BAAAA,QAAmCN,cAAc,CAA+DE,kBAAAA;AAAAA,cAChHK,wBAAAA,GAA2BE,KAAAA,kBAAuBD,aAAAA,CAAcR,cAAc,CAA4GE,kBAAAA,+CAAXQ,GAAAA,CAAIC,OAAAA;AAAAA,cACnLC,8BAAAA,GAAiCH,KAAAA,kBAAuBD,aAAAA,CAAcR,cAAc,CAA4GE,kBAAAA,+CAAXQ,GAAAA,CAAIC,OAAAA;AAAAA,UACpME,WAAAA;EACNE,WAAAA,GAAcD,WAAW;EACzBE,EAAAA;AAAAA;AAAAA,cAEiBC,oBAAAA,kBAAsCC,OAAAA,CAAQL,WAAW;AAAA,UACpEM,UAAAA,SAAmBN,WAAW;EACpCO,WAAAA;EACAC,YAAAA;AAAAA;AAAAA,cAEiBC,mBAAAA,kBAAqCJ,OAAAA,CAAQC,UAAU"}

package/dist/composite/composite-context.js

@@ -0,0 +1,30 @@
+"use client";
+import { CollectionContextProvider, CollectionScopedContextProvider } from "../collection/collection-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+import { createContext } from "react";
+//#region src/composite/composite-context.tsx
+const ctx = createStoreContext([CollectionContextProvider], [CollectionScopedContextProvider]);
+/**
+* Returns the composite store from the nearest composite container.
+* @example
+* function CompositeItem() {
+*   const store = useCompositeContext();
+*
+*   if (!store) {
+*     throw new Error("CompositeItem must be wrapped in CompositeProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useCompositeContext = ctx.useContext;
+const useCompositeScopedContext = ctx.useScopedContext;
+const useCompositeProviderContext = ctx.useProviderContext;
+const CompositeContextProvider = ctx.ContextProvider;
+const CompositeScopedContextProvider = ctx.ScopedContextProvider;
+const CompositeItemContext = createContext(void 0);
+const CompositeRowContext = createContext(void 0);
+//#endregion
+export { CompositeContextProvider, CompositeItemContext, CompositeRowContext, CompositeScopedContextProvider, useCompositeContext, useCompositeProviderContext, useCompositeScopedContext };
+
+//# sourceMappingURL=composite-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-context.js","names":[],"sources":["../../src/composite/composite-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport { createContext } from \"react\";\nimport {\n  CollectionContextProvider,\n  CollectionScopedContextProvider,\n} from \"../collection/collection-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst ctx = createStoreContext<CompositeStore>(\n  [CollectionContextProvider],\n  [CollectionScopedContextProvider],\n);\n\n/**\n * Returns the composite store from the nearest composite container.\n * @example\n * function CompositeItem() {\n *   const store = useCompositeContext();\n *\n *   if (!store) {\n *     throw new Error(\"CompositeItem must be wrapped in CompositeProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useCompositeContext = ctx.useContext;\n\nexport const useCompositeScopedContext = ctx.useScopedContext;\n\nexport const useCompositeProviderContext = ctx.useProviderContext;\n\nexport const CompositeContextProvider = ctx.ContextProvider;\n\nexport const CompositeScopedContextProvider = ctx.ScopedContextProvider;\n\ninterface ItemContext {\n  baseElement?: HTMLElement;\n  id?: string;\n}\n\nexport const CompositeItemContext = createContext<ItemContext | undefined>(\n  undefined,\n);\n\ninterface RowContext extends ItemContext {\n  ariaSetSize?: number;\n  ariaPosInSet?: number;\n}\n\nexport const CompositeRowContext = createContext<RowContext | undefined>(\n  undefined,\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAa,sBAAA,IAAA;AAEb,MAAa,4BAAA,IAA8B;AAE3C,MAAa,8BAA2B,IAAI;AAE5C,MAAa,2BAAA,IAAA;AAOb,MAAa,iCAAuB,IAClC;AAQF,MAAa,uBAAsB,cACjC,KACF,CAAA"}

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

@@ -0,0 +1,55 @@
+import { t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+import { n as GroupLabelOptions } from "../group-label-C16IDs1b.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-group-label.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * 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>
+ * ```
+ */
+declare const useCompositeGroupLabel: import("@ariakit/react-utils").Hook<"div", CompositeGroupLabelOptions<"div">>;
+/**
+ * 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>
+ * ```
+ */
+declare const CompositeGroupLabel: (props: CompositeGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeGroupLabelOptions<T extends ElementType = TagName> extends GroupLabelOptions<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 CompositeGroupLabelProps<T extends ElementType = TagName> = Props<T, CompositeGroupLabelOptions<T>>;
+//#endregion
+export { CompositeGroupLabel, CompositeGroupLabelOptions, CompositeGroupLabelProps, useCompositeGroupLabel };
+//# sourceMappingURL=composite-group-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-group-label.d.ts","names":["Props","ElementType","GroupLabelOptions","CompositeStore","TagName","useCompositeGroupLabel","CompositeGroupLabelOptions","Hook","CompositeGroupLabel","CompositeGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAa7B;;AAf2D,cAetCC,sBAAAA,iCAAuDE,IAAAA,QAAYD,0BAA0B;;AAAA;AAmBlH;;;;;;;;;AAA+J;AAC/J;;;;;;cADqBE,mBAAAA,GAAsBE,KAAAA,EAAOD,wBAAwB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzHN,0BAAAA,WAAqCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAAD;;;;;;;;EASlGC,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,wBAAAA,WAAmCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,0BAAAA,CAA2BO,CAAAA"}