@ariakit/react-components 0.1.0

package/dist/checkbox/checkbox.js

@@ -0,0 +1,148 @@
+"use client";
+import { useCommand } from "../command/command.js";
+import { CheckboxCheckedContext } from "./checkbox-checked-context.js";
+import { useCheckboxContext } from "./checkbox-context.js";
+import { createElement, createHook, forwardRef, useEvent, useForceUpdate, useMergeRefs, useTagName, useWrapElement } from "@ariakit/react-utils";
+import { disabledFromProps, removeUndefinedValues } from "@ariakit/utils";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/checkbox/checkbox.tsx
+const TagName = "input";
+function setMixed(element, mixed) {
+	if (mixed) element.indeterminate = true;
+	else if (element.indeterminate) element.indeterminate = false;
+}
+function isNativeCheckbox(tagName, type) {
+	return tagName === "input" && (!type || type === "checkbox");
+}
+function getPrimitiveValue(value) {
+	if (Array.isArray(value)) return value.toString();
+	return value;
+}
+/**
+* Returns props to create a `Checkbox` component. If the element is not a
+* native checkbox, the hook will return additional props to make sure it's
+* accessible.
+* @see https://ariakit.com/components/checkbox
+* @example
+* ```jsx
+* const props = useCheckbox({ render: <div /> });
+* <Role {...props}>Accessible checkbox</Role>
+* ```
+*/
+const useCheckbox = createHook(function useCheckbox({ store, name, value: valueProp, checked: checkedProp, defaultChecked, ...props }) {
+	const context = useCheckboxContext();
+	store = store || context;
+	const [_checked, setChecked] = useState(defaultChecked ?? false);
+	const checked = useStoreState(store, (state) => {
+		if (checkedProp !== void 0) return checkedProp;
+		if (state?.value === void 0) return _checked;
+		if (valueProp != null) {
+			if (Array.isArray(state.value)) {
+				const primitiveValue = getPrimitiveValue(valueProp);
+				return state.value.includes(primitiveValue);
+			}
+			return state.value === valueProp;
+		}
+		if (Array.isArray(state.value)) return false;
+		if (typeof state.value === "boolean") return state.value;
+		return false;
+	});
+	const ref = useRef(null);
+	const nativeCheckbox = isNativeCheckbox(useTagName(ref, TagName), props.type);
+	const mixed = checked ? checked === "mixed" : void 0;
+	const isChecked = checked === "mixed" ? false : checked;
+	const disabled = disabledFromProps(props);
+	const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		setMixed(element, mixed);
+		if (nativeCheckbox) return;
+		element.checked = isChecked;
+		if (name !== void 0) element.name = name;
+		if (valueProp !== void 0) element.value = String(valueProp);
+	}, [
+		propertyUpdated,
+		mixed,
+		nativeCheckbox,
+		isChecked,
+		name,
+		valueProp
+	]);
+	const onChangeProp = props.onChange;
+	const onChange = useEvent((event) => {
+		if (disabled) {
+			event.stopPropagation();
+			event.preventDefault();
+			return;
+		}
+		setMixed(event.currentTarget, mixed);
+		if (!nativeCheckbox) {
+			event.currentTarget.checked = !event.currentTarget.checked;
+			schedulePropertyUpdate();
+		}
+		onChangeProp?.(event);
+		if (event.defaultPrevented) return;
+		const elementChecked = event.currentTarget.checked;
+		setChecked(elementChecked);
+		store?.setValue((prevValue) => {
+			if (valueProp == null) return elementChecked;
+			const primitiveValue = getPrimitiveValue(valueProp);
+			if (!Array.isArray(prevValue)) return prevValue === primitiveValue ? false : primitiveValue;
+			if (elementChecked) {
+				if (prevValue.includes(primitiveValue)) return prevValue;
+				return [...prevValue, primitiveValue];
+			}
+			return prevValue.filter((v) => v !== primitiveValue);
+		});
+	});
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (nativeCheckbox) return;
+		onChange(event);
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(CheckboxCheckedContext.Provider, {
+		value: isChecked,
+		children: element
+	}), [isChecked]);
+	props = {
+		role: !nativeCheckbox ? "checkbox" : void 0,
+		type: nativeCheckbox ? "checkbox" : void 0,
+		"aria-checked": checked,
+		...props,
+		ref: useMergeRefs(ref, props.ref),
+		onChange,
+		onClick
+	};
+	props = useCommand({
+		clickOnEnter: !nativeCheckbox,
+		...props
+	});
+	return removeUndefinedValues({
+		name: nativeCheckbox ? name : void 0,
+		value: nativeCheckbox ? valueProp : void 0,
+		checked: isChecked,
+		...props
+	});
+});
+/**
+* Renders an accessible checkbox element. If the underlying element is not a
+* native checkbox, this component will pass additional attributes to make sure
+* it's accessible.
+* @see https://ariakit.com/components/checkbox
+* @example
+* ```jsx
+* <Checkbox render={<div />}>Accessible checkbox</Checkbox>
+* ```
+*/
+const Checkbox = forwardRef(function Checkbox(props) {
+	return createElement(TagName, useCheckbox(props));
+});
+//#endregion
+export { Checkbox, useCheckbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useForceUpdate,\n  useMergeRefs,\n  useTagName,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { disabledFromProps, removeUndefinedValues } from \"@ariakit/utils\";\nimport type {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  ElementType,\n  MouseEvent,\n} from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CommandOptions } from \"../command/command.tsx\";\nimport { useCommand } from \"../command/command.tsx\";\nimport { CheckboxCheckedContext } from \"./checkbox-checked-context.tsx\";\nimport { useCheckboxContext } from \"./checkbox-context.tsx\";\nimport type { CheckboxStore } from \"./checkbox-store.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction setMixed(element: HTMLType, mixed?: boolean) {\n  if (mixed) {\n    element.indeterminate = true;\n  } else if (element.indeterminate) {\n    element.indeterminate = false;\n  }\n}\n\nfunction isNativeCheckbox(tagName?: string, type?: string) {\n  return tagName === \"input\" && (!type || type === \"checkbox\");\n}\n\nfunction getPrimitiveValue<T>(value: T) {\n  if (Array.isArray(value)) {\n    return value.toString();\n  }\n  return value as Exclude<T, readonly any[]>;\n}\n\n/**\n * Returns props to create a `Checkbox` component. If the element is not a\n * native checkbox, the hook will return additional props to make sure it's\n * accessible.\n * @see https://ariakit.com/components/checkbox\n * @example\n * ```jsx\n * const props = useCheckbox({ render: <div /> });\n * <Role {...props}>Accessible checkbox</Role>\n * ```\n */\nexport const useCheckbox = createHook<TagName, CheckboxOptions>(\n  function useCheckbox({\n    store,\n    name,\n    value: valueProp,\n    checked: checkedProp,\n    defaultChecked,\n    ...props\n  }) {\n    const context = useCheckboxContext();\n    store = store || context;\n\n    const [_checked, setChecked] = useState(defaultChecked ?? false);\n\n    const checked = useStoreState(store, (state) => {\n      if (checkedProp !== undefined) return checkedProp;\n      if (state?.value === undefined) return _checked;\n      if (valueProp != null) {\n        if (Array.isArray(state.value)) {\n          const primitiveValue = getPrimitiveValue(valueProp);\n          return state.value.includes(primitiveValue);\n        }\n        return state.value === valueProp;\n      }\n      if (Array.isArray(state.value)) return false;\n      if (typeof state.value === \"boolean\") return state.value;\n      return false;\n    });\n\n    const ref = useRef<HTMLType>(null);\n    const tagName = useTagName(ref, TagName);\n    const nativeCheckbox = isNativeCheckbox(tagName, props.type);\n    const mixed = checked ? checked === \"mixed\" : undefined;\n    const isChecked = checked === \"mixed\" ? false : checked;\n    const disabled = disabledFromProps(props);\n    // When the checked property is programmatically set on the change event, we\n    // need to schedule the element's property update, so the controlled\n    // isChecked state can be taken into account.\n    const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();\n\n    useEffect(() => {\n      const element = ref.current;\n      if (!element) return;\n      setMixed(element, mixed);\n      if (nativeCheckbox) return;\n      element.checked = isChecked;\n      if (name !== undefined) {\n        element.name = name;\n      }\n      if (valueProp !== undefined) {\n        element.value = String(valueProp);\n      }\n    }, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);\n\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLType>) => {\n      if (disabled) {\n        event.stopPropagation();\n        event.preventDefault();\n        return;\n      }\n      setMixed(event.currentTarget, mixed);\n      if (!nativeCheckbox) {\n        // If the element is not a native checkbox, we need to manually update\n        // its checked property.\n        event.currentTarget.checked = !event.currentTarget.checked;\n        schedulePropertyUpdate();\n      }\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n\n      const elementChecked = event.currentTarget.checked;\n      setChecked(elementChecked);\n\n      store?.setValue((prevValue) => {\n        if (valueProp == null) return elementChecked;\n        const primitiveValue = getPrimitiveValue(valueProp);\n        if (!Array.isArray(prevValue)) {\n          return prevValue === primitiveValue ? false : primitiveValue;\n        }\n        if (elementChecked) {\n          if (prevValue.includes(primitiveValue)) {\n            return prevValue;\n          }\n          return [...prevValue, primitiveValue];\n        }\n        return prevValue.filter((v) => v !== primitiveValue);\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 (nativeCheckbox) return;\n      // @ts-expect-error The onChange event expects a ChangeEvent, but here we\n      // need to pass a MouseEvent.\n      onChange(event);\n    });\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CheckboxCheckedContext.Provider value={isChecked}>\n          {element}\n        </CheckboxCheckedContext.Provider>\n      ),\n      [isChecked],\n    );\n\n    props = {\n      role: !nativeCheckbox ? \"checkbox\" : undefined,\n      type: nativeCheckbox ? \"checkbox\" : undefined,\n      \"aria-checked\": checked,\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n      onChange,\n      onClick,\n    };\n\n    props = useCommand<TagName>({ clickOnEnter: !nativeCheckbox, ...props });\n\n    return removeUndefinedValues({\n      name: nativeCheckbox ? name : undefined,\n      value: nativeCheckbox ? valueProp : undefined,\n      checked: isChecked,\n      ...props,\n    });\n  },\n);\n\n/**\n * Renders an accessible checkbox element. If the underlying element is not a\n * native checkbox, this component will pass additional attributes to make sure\n * it's accessible.\n * @see https://ariakit.com/components/checkbox\n * @example\n * ```jsx\n * <Checkbox render={<div />}>Accessible checkbox</Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(function Checkbox(props: CheckboxProps) {\n  const htmlProps = useCheckbox(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CheckboxOptions<\n  T extends ElementType = TagName,\n> extends CommandOptions<T> {\n  /**\n   * Object returned by the\n   * [`useCheckboxStore`](https://ariakit.com/reference/use-checkbox-store)\n   * hook. If not provided, the closest\n   * [`CheckboxProvider`](https://ariakit.com/reference/checkbox-provider)\n   * component's context will be used. Otherwise, the component will fall back\n   * to an internal store.\n   *\n   * Live examples:\n   * - [Checkbox as button](https://ariakit.com/examples/checkbox-as-button)\n   */\n  store?: CheckboxStore;\n  /**\n   * The native `name` attribute.\n   *\n   * Live examples:\n   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)\n   */\n  name?: string;\n  /**\n   * The value of the checkbox. This is useful when the same checkbox store is\n   * used for multiple [`Checkbox`](https://ariakit.com/reference/checkbox)\n   * elements, in which case the value will be an array of checked values.\n   *\n   * Live examples:\n   * - [Checkbox group](https://ariakit.com/examples/checkbox-group)\n   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)\n   * @example\n   * ```jsx \"value\"\n   * <CheckboxProvider defaultValue={[\"Apple\", \"Orange\"]}>\n   *   <Checkbox value=\"Apple\" />\n   *   <Checkbox value=\"Orange\" />\n   *   <Checkbox value=\"Watermelon\" />\n   * </CheckboxProvider>\n   * ```\n   */\n  value?: ComponentPropsWithoutRef<TagName>[\"value\"];\n  /**\n   * The default checked state of the checkbox. This prop is ignored if the\n   * [`checked`](https://ariakit.com/reference/checkbox#checked) or the\n   * [`store`](https://ariakit.com/reference/checkbox#store) props are provided.\n   */\n  defaultChecked?: \"mixed\" | boolean;\n  /**\n   * The checked state of the checkbox. This will override the value inferred\n   * from [`store`](https://ariakit.com/reference/checkbox#store) prop, if\n   * provided. This can be `\"mixed\"` to indicate that the checkbox is partially\n   * checked.\n   */\n  checked?: \"mixed\" | boolean;\n  /**\n   * A function that is called when the checkbox's checked state changes.\n   */\n  onChange?: ComponentPropsWithoutRef<TagName>[\"onChange\"];\n}\n\nexport type CheckboxProps<T extends ElementType = TagName> = Props<\n  T,\n  CheckboxOptions<T>\n>;\n"],"mappings":"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"}

package/dist/checkbox-store-CYZPR4N4.d.ts

@@ -0,0 +1,38 @@
+import { BivariantCallback, PickRequired } from "@ariakit/utils";
+import * as Core from "@ariakit/components/checkbox/checkbox-store";
+import { Store } from "@ariakit/react-store";
+
+//#region src/checkbox/checkbox-store.d.ts
+declare function useCheckboxStoreProps<T extends Core.CheckboxStore>(store: T, update: () => void, props: CheckboxStoreProps): T;
+/**
+ * Creates a checkbox store to conveniently manage a checkbox value,
+ * whether it's a string, number, boolean, or an array of strings or numbers.
+ * @see https://ariakit.com/components/checkbox
+ * @example
+ * ```jsx
+ * const checkbox = useCheckboxStore({ defaultValue: true });
+ * <Checkbox store={checkbox} />
+ * ```
+ */
+declare function useCheckboxStore<T extends CheckboxStoreValue = CheckboxStoreValue>(props: PickRequired<CheckboxStoreProps<T>, "value" | "defaultValue">): CheckboxStore<T>;
+declare function useCheckboxStore(props?: CheckboxStoreProps): CheckboxStore;
+type CheckboxStoreValue = Core.CheckboxStoreValue;
+type CheckboxStoreState<T extends CheckboxStoreValue = CheckboxStoreValue> = Core.CheckboxStoreState<T>;
+type CheckboxStoreFunctions<T extends CheckboxStoreValue = CheckboxStoreValue> = Core.CheckboxStoreFunctions<T>;
+interface CheckboxStoreOptions<T extends CheckboxStoreValue = CheckboxStoreValue> extends Core.CheckboxStoreOptions<T> {
+  /**
+   * A callback that gets called when the
+   * [`value`](https://ariakit.com/reference/checkbox-provider#value) state
+   * changes.
+   * @example
+   * function MyCheckbox({ value, onChange }) {
+   *   const checkbox = useCheckboxStore({ value, setValue: onChange });
+   * }
+   */
+  setValue?: BivariantCallback<(value: CheckboxStoreState<T>["value"]) => void>;
+}
+interface CheckboxStoreProps<T extends CheckboxStoreValue = CheckboxStoreValue> extends CheckboxStoreOptions<T>, Core.CheckboxStoreProps<T> {}
+interface CheckboxStore<T extends CheckboxStoreValue = CheckboxStoreValue> extends CheckboxStoreFunctions<T>, Store<Core.CheckboxStore<T>> {}
+//#endregion
+export { CheckboxStoreState as a, useCheckboxStoreProps as c, CheckboxStoreProps as i, CheckboxStoreFunctions as n, CheckboxStoreValue as o, CheckboxStoreOptions as r, useCheckboxStore as s, CheckboxStore as t };
+//# sourceMappingURL=checkbox-store-CYZPR4N4.d.ts.map

package/dist/checkbox-store-CYZPR4N4.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-store-CYZPR4N4.d.ts","names":["Core","Store","BivariantCallback","PickRequired","useCheckboxStoreProps","T","CheckboxStore","CheckboxStoreProps","store","update","props","useCheckboxStore","CheckboxStoreValue","CheckboxStoreState","CheckboxStoreFunctions","CheckboxStoreOptions","setValue","value"],"sources":["../src/checkbox/checkbox-store.d.ts"],"mappings":";;;;;iBAGwBI,qBAAAA,WAAgCJ,IAAAA,CAAKM,aAAAA,CAAAA,CAAeE,KAAAA,EAAOH,CAAAA,EAAGI,MAAAA,cAAoBC,KAAAA,EAAOH,kBAAAA,GAAqBF,CAAAA;;AAAtI;;;;;;;;;iBAWwBM,gBAAAA,WAA2BC,kBAAAA,GAAqBA,kBAAAA,CAAAA,CAAoBF,KAAAA,EAAOP,YAAAA,CAAaI,kBAAAA,CAAmBF,CAAAA,+BAAgCC,aAAAA,CAAcD,CAAAA;AAAAA,iBACzJM,gBAAAA,CAAiBD,KAAAA,GAAQH,kBAAAA,GAAqBD,aAAa;AAAA,KACvEM,kBAAAA,GAAqBZ,IAAAA,CAAKY,kBAAkB;AAAA,KAC5CC,kBAAAA,WAA6BD,kBAAAA,GAAqBA,kBAAAA,IAAsBZ,IAAAA,CAAKa,kBAAAA,CAAmBR,CAAAA;AAAAA,KAChGS,sBAAAA,WAAiCF,kBAAAA,GAAqBA,kBAAAA,IAAsBZ,IAAAA,CAAKc,sBAAAA,CAAuBT,CAAAA;AAAAA,UACnGU,oBAAAA,WAA+BH,kBAAAA,GAAqBA,kBAAAA,UAA4BZ,IAAAA,CAAKe,oBAAAA,CAAqBV,CAAAA;EAhBVE;;;;AAAsB;AAWvI;;;;EAeIS,QAAAA,GAAWd,iBAAAA,EAAmBe,KAAAA,EAAOJ,kBAAAA,CAAmBR,CAAAA;AAAAA;AAAAA,UAE3CE,kBAAAA,WAA6BK,kBAAAA,GAAqBA,kBAAAA,UAA4BG,oBAAAA,CAAqBV,CAAAA,GAAIL,IAAAA,CAAKO,kBAAAA,CAAmBF,CAAAA;AAAAA,UAE/HC,aAAAA,WAAwBM,kBAAAA,GAAqBA,kBAAAA,UAA4BE,sBAAAA,CAAuBT,CAAAA,GAAIJ,KAAAA,CAAMD,IAAAA,CAAKM,aAAAA,CAAcD,CAAAA"}

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

@@ -0,0 +1,24 @@
+import { r as CollectionStoreItem, t as CollectionStore } from "../collection-store-CbwzYsWf.js";
+
+//#region src/collection/collection-context.d.ts
+/**
+ * Returns the collection store from the nearest collection container.
+ * @example
+ * function CollectionItem() {
+ *   const store = useCollectionContext();
+ *
+ *   if (!store) {
+ *     throw new Error("CollectionItem must be wrapped in CollectionProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useCollectionContext: () => CollectionStore<CollectionStoreItem> | undefined;
+declare const useCollectionScopedContext: (onlyScoped?: boolean) => CollectionStore<CollectionStoreItem> | undefined;
+declare const useCollectionProviderContext: () => CollectionStore<CollectionStoreItem> | undefined;
+declare const CollectionContextProvider: (props: import("react").ProviderProps<CollectionStore<CollectionStoreItem> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const CollectionScopedContextProvider: (props: import("react").ProviderProps<CollectionStore<CollectionStoreItem> | undefined>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CollectionContextProvider, CollectionScopedContextProvider, useCollectionContext, useCollectionProviderContext, useCollectionScopedContext };
+//# sourceMappingURL=collection-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection-context.d.ts","names":["CollectionStore","useCollectionContext","_$__collection_store_ts0","CollectionStoreItem","useCollectionScopedContext","onlyScoped","useCollectionProviderContext","CollectionContextProvider","ProviderProps","props","JSX","Element","CollectionScopedContextProvider"],"sources":["../../src/collection/collection-context.d.ts"],"mappings":";;;;;AAcA;;;;AAAgE;AAChE;;;;;;cADqBC,oBAAAA,QAA4BD,eAAe,CAAiEE,mBAAAA;AAAAA,cAC5GE,0BAAAA,GAA6BC,UAAAA,eAAyBL,eAAe,CAAiEE,mBAAAA;AAAAA,cACtII,4BAAAA,QAAoCN,eAAe,CAAiEE,mBAAAA;AAAAA,cACpHK,yBAAAA,GAA4BE,KAAAA,kBAAuBD,aAAAA,CAAcR,eAAe,CAA8GE,mBAAAA,+CAAXQ,GAAAA,CAAIC,OAAAA;AAAAA,cACvLC,+BAAAA,GAAkCH,KAAAA,kBAAuBD,aAAAA,CAAcR,eAAe,CAA8GE,mBAAAA,+CAAXQ,GAAAA,CAAIC,OAAAA"}

package/dist/collection/collection-context.js

@@ -0,0 +1,26 @@
+"use client";
+import { createStoreContext } from "@ariakit/react-utils";
+//#region src/collection/collection-context.tsx
+const ctx = createStoreContext();
+/**
+* Returns the collection store from the nearest collection container.
+* @example
+* function CollectionItem() {
+*   const store = useCollectionContext();
+*
+*   if (!store) {
+*     throw new Error("CollectionItem must be wrapped in CollectionProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useCollectionContext = ctx.useContext;
+const useCollectionScopedContext = ctx.useScopedContext;
+const useCollectionProviderContext = ctx.useProviderContext;
+const CollectionContextProvider = ctx.ContextProvider;
+const CollectionScopedContextProvider = ctx.ScopedContextProvider;
+//#endregion
+export { CollectionContextProvider, CollectionScopedContextProvider, useCollectionContext, useCollectionProviderContext, useCollectionScopedContext };
+
+//# sourceMappingURL=collection-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection-context.js","names":[],"sources":["../../src/collection/collection-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport type { CollectionStore } from \"./collection-store.ts\";\n\nconst ctx = createStoreContext<CollectionStore>();\n\n/**\n * Returns the collection store from the nearest collection container.\n * @example\n * function CollectionItem() {\n *   const store = useCollectionContext();\n *\n *   if (!store) {\n *     throw new Error(\"CollectionItem must be wrapped in CollectionProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useCollectionContext = ctx.useContext;\n\nexport const useCollectionScopedContext = ctx.useScopedContext;\n\nexport const useCollectionProviderContext = ctx.useProviderContext;\n\nexport const CollectionContextProvider = ctx.ContextProvider;\n\nexport const CollectionScopedContextProvider = ctx.ScopedContextProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,uBAAA,IAAA;AAEb,MAAa,6BAAA,IAA+B;AAE5C,MAAa,+BAA4B,IAAI;AAE7C,MAAa,4BAAA,IAAA"}

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

@@ -0,0 +1,2 @@
+import { i as useCollectionItemOffscreen, n as CollectionItemOptions, r as CollectionItemProps, t as CollectionItem } from "../collection-item-offscreen-DyXa-sqj.js";
+export { CollectionItem, CollectionItemOptions, CollectionItemProps, useCollectionItemOffscreen };

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

@@ -0,0 +1,88 @@
+"use client";
+import { Role } from "../role/role.js";
+import { CollectionItem as CollectionItem$1 } from "./collection-item.js";
+import { forwardRef, useForceUpdate, useId, useMergeRefs } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useCallback, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/collection/collection-item-offscreen.tsx
+const TagName = "div";
+function requestIdleCallback(callback) {
+	if (typeof window.requestIdleCallback === "function") return window.requestIdleCallback(callback);
+	callback();
+	return 0;
+}
+function cancelIdleCallback(id) {
+	if (typeof window.cancelIdleCallback === "function") window.cancelIdleCallback(id);
+}
+function useCollectionItemOffscreen({ offscreenMode = "active", offscreenRoot, ...props }) {
+	const id = useId(props.id);
+	const [updated, forceUpdate] = useForceUpdate();
+	const forcedUpdatesCountRef = useRef(0);
+	const [_active, setActive] = useState(offscreenMode === "active");
+	const active = _active || offscreenMode === "active";
+	const observerRef = useRef(null);
+	const idleCallbackIdRef = useRef(0);
+	return {
+		id,
+		active,
+		ref: useCallback((element) => {
+			if (!element || offscreenMode === "active") {
+				cancelIdleCallback(idleCallbackIdRef.current);
+				observerRef.current?.disconnect();
+				return;
+			}
+			invariant(offscreenRoot !== void 0, "The offscreenRoot prop must provided.");
+			const getOffscreenRoot = () => {
+				if (!offscreenRoot) return null;
+				if (typeof offscreenRoot === "function") return offscreenRoot(element);
+				if ("current" in offscreenRoot) return offscreenRoot.current;
+				return offscreenRoot;
+			};
+			const root = getOffscreenRoot();
+			if (!root) {
+				forcedUpdatesCountRef.current++;
+				if (forcedUpdatesCountRef.current > 3) throw new Error("The offscreenRoot is not available. Please make sure the root element is mounted.");
+				forceUpdate();
+				return;
+			}
+			if (!observerRef.current || observerRef.current.root !== root) observerRef.current = new IntersectionObserver(([entry]) => {
+				cancelIdleCallback(idleCallbackIdRef.current);
+				const isIntersecting = !!entry?.isIntersecting;
+				idleCallbackIdRef.current = requestIdleCallback(() => {
+					if (!isIntersecting && offscreenMode === "lazy") return;
+					setActive(isIntersecting);
+				});
+			}, {
+				root,
+				rootMargin: "40%"
+			});
+			observerRef.current.observe(element);
+		}, [
+			updated,
+			offscreenMode,
+			offscreenRoot
+		]),
+		"data-offscreen": !active || void 0
+	};
+}
+const CollectionItem = forwardRef(function CollectionItem({ offscreenMode, offscreenRoot, ...props }) {
+	const { active, ref, ...rest } = useCollectionItemOffscreen({
+		offscreenMode,
+		offscreenRoot,
+		...props
+	});
+	const allProps = {
+		...rest,
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	if (active) return /* @__PURE__ */ jsx(CollectionItem$1, { ...allProps });
+	const { store, shouldRegisterItem, getItem, element, ...htmlProps } = allProps;
+	const Component = Role[TagName];
+	return /* @__PURE__ */ jsx(Component, { ...htmlProps });
+});
+//#endregion
+export { CollectionItem, useCollectionItemOffscreen };
+
+//# sourceMappingURL=collection-item-offscreen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection-item-offscreen.js","names":["Base.CollectionItem"],"sources":["../../src/collection/collection-item-offscreen.tsx"],"sourcesContent":["import {\n  useForceUpdate,\n  useId,\n  useMergeRefs,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType, RefCallback, RefObject } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { Role } from \"../role/role.tsx\";\nimport * as Base from \"./collection-item.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction requestIdleCallback(callback: () => void) {\n  if (typeof window.requestIdleCallback === \"function\") {\n    return window.requestIdleCallback(callback);\n  }\n  callback();\n  return 0;\n}\n\nfunction cancelIdleCallback(id: number) {\n  if (typeof window.cancelIdleCallback === \"function\") {\n    window.cancelIdleCallback(id);\n  }\n}\n\nexport function useCollectionItemOffscreen<\n  T extends ElementType,\n  // oxlint-disable-next-line no-unnecessary-type-parameters\n  P extends CollectionItemProps<T>,\n>({ offscreenMode = \"active\", offscreenRoot, ...props }: P) {\n  const id = useId(props.id);\n  const [updated, forceUpdate] = useForceUpdate();\n  const forcedUpdatesCountRef = useRef(0);\n\n  const [_active, setActive] = useState(offscreenMode === \"active\");\n  const active = _active || offscreenMode === \"active\";\n\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const idleCallbackIdRef = useRef(0);\n\n  const ref = useCallback<RefCallback<HTMLType>>(\n    (element) => {\n      if (!element || offscreenMode === \"active\") {\n        cancelIdleCallback(idleCallbackIdRef.current);\n        observerRef.current?.disconnect();\n        return;\n      }\n\n      invariant(\n        offscreenRoot !== undefined,\n        process.env.NODE_ENV !== \"production\" &&\n          \"The offscreenRoot prop must provided.\",\n      );\n\n      const getOffscreenRoot = () => {\n        if (!offscreenRoot) return null;\n        if (typeof offscreenRoot === \"function\") {\n          return offscreenRoot(element);\n        }\n        if (\"current\" in offscreenRoot) {\n          return offscreenRoot.current;\n        }\n        return offscreenRoot;\n      };\n\n      const root = getOffscreenRoot();\n\n      if (!root) {\n        forcedUpdatesCountRef.current++;\n        if (forcedUpdatesCountRef.current > 3) {\n          throw new Error(\n            \"The offscreenRoot is not available. Please make sure the root element is mounted.\",\n          );\n        }\n        forceUpdate();\n        return;\n      }\n\n      if (!observerRef.current || observerRef.current.root !== root) {\n        observerRef.current = new IntersectionObserver(\n          ([entry]) => {\n            cancelIdleCallback(idleCallbackIdRef.current);\n            const isIntersecting = !!entry?.isIntersecting;\n            idleCallbackIdRef.current = requestIdleCallback(() => {\n              if (!isIntersecting && offscreenMode === \"lazy\") return;\n              setActive(isIntersecting);\n            });\n          },\n          { root, rootMargin: \"40%\" },\n        );\n      }\n\n      observerRef.current.observe(element);\n    },\n    // This callback intentionally depends on `updated` so `forceUpdate()`\n    // causes React to re-run the ref callback when the offscreen root becomes\n    // available.\n    // oxlint-disable-next-line exhaustive-deps\n    [updated, offscreenMode, offscreenRoot],\n  );\n\n  return {\n    id,\n    active,\n    ref,\n    \"data-offscreen\": !active || undefined,\n  };\n}\n\nexport const CollectionItem = forwardRef(function CollectionItem({\n  offscreenMode,\n  offscreenRoot,\n  ...props\n}: CollectionItemProps) {\n  const { active, ref, ...rest } = useCollectionItemOffscreen({\n    offscreenMode,\n    offscreenRoot,\n    ...props,\n  });\n  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };\n  if (active) {\n    return <Base.CollectionItem {...allProps} />;\n  }\n  // Remove CompositeItem props\n  const {\n    store,\n    shouldRegisterItem,\n    getItem,\n    // @ts-expect-error This prop may come from a collection renderer.\n    element,\n    ...htmlProps\n  } = allProps;\n  const Component = Role[TagName];\n  return <Component {...htmlProps} />;\n});\n\nexport interface CollectionItemOptions<\n  T extends ElementType = TagName,\n> extends Base.CollectionItemOptions<T> {\n  offscreenMode?: \"active\" | \"passive\" | \"lazy\";\n  offscreenRoot?:\n    | HTMLElement\n    | RefObject<HTMLElement | null>\n    | ((element: HTMLElement) => HTMLElement | null)\n    | null;\n}\n\nexport type CollectionItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CollectionItemOptions<T>\n>;\n"],"mappings":";;;;;;;;AAiBA,MAAA,UAAS;SACH,oBAAc,UAAA;CAGlB,IAAA,OAAS,OAAA,wBAAA,YAAA,OAAA,OAAA,oBAAA,QAAA;CACT,SAAO;CACT,OAAA;AAEA;SACM,mBAAc,IAAA;CAGpB,IAAA,OAAA,OAAA,uBAAA,YAAA,OAAA,mBAAA,EAAA;AAEA;SAKQ,2BAAmB,EAAA,gBAAA,UAAA,eAAA,GAAA,SAAA;CACzB,MAAM,KAAC,MAAS,MAAA,EAAA;CAChB,MAAM,CAAA,SAAA,eAAwB,eAAQ;CAEtC,MAAM,wBAAuB,OAAA,CAAS;CACtC,MAAM,CAAA,SAAS,aAAW,SAAA,kBAAkB,QAAA;CAE5C,MAAM,SAAA,WAAc,kBAAwC;CAC5D,MAAM,cAAA,OAAoB,IAAA;CA+D1B,MAAA,oBAAO,OAAA,CAAA;QACL;EACA;EACA;OA9DM,aAAY,YAAA;OACd,CAAA,WAAA,kBAAmB,UAAkB;IACrC,mBAAY,kBAAoB,OAAA;IAChC,YAAA,SAAA,WAAA;IACF;GAEA;GAMA,UAAM,kBAAA,KAAyB,GAAA,uCAAA;SACxB,yBAAsB;IAC3B,IAAI,CAAA,eAAO,OAAA;IAGX,IAAI,OAAA,kBAAa,YACR,OAAA,cAAc,OAAA;IAEvB,IAAA,aAAO,eAAA,OAAA,cAAA;IACT,OAAA;GAEA;GAEA,MAAK,OAAM,iBAAA;OACT,CAAA,MAAA;IACA,sBAAI;IAKJ,IAAA,sBAAY,UAAA,GAAA,MAAA,IAAA,MAAA,mFAAA;IACZ,YAAA;IACF;GAEA;OAGM,CAAA,YAAA,WAAmB,YAAkB,QAAO,SAAA,MAAA,YAAA,UAAA,IAAA,sBAAA,CAAA,WAAA;IAC5C,mBAAM,kBAA0B,OAAA;IAChC,MAAA,iBAAkB,CAAA,CAAA,OAAU;sBACrB,UAAkB,0BAA0B;KACjD,IAAA,CAAA,kBAAU,kBAAc,QAAA;KACzB,UAAA,cAAA;IACH,CAAA;MACE;IAAM;IACV,YAAA;GAGF,CAAA;GACF,YAKA,QAAA,QAAA,OAAA;KAAC;GAAS;GAAe;GAMvB;EACF,CAAA;EACF,kBAAA,CAAA,UAAA,KAAA;CACF;AAEA;MAKE,iBAAqB,WAAY,SAAA,eAAA,EAAA,eAA2B,eAAA,GAAA,SAAA;OAC1D,EAAA,QAAA,KAAA,GAAA,SAAA,2BAAA;EACA;EACA;EACD,GAAA;CACD,CAAA;OAAsB,WAAA;EAAM,GAAG;EAAO,GAAA;EAAkC,KAAA,aAAA,KAAA,MAAA,GAAA;CACxE;CAIA,IAAA,QACE,OAEA,oBAAA,kBAGG,EAAA,GAAA,SACD,CAAA;CACJ,MAAM,EAAA,OAAA,oBAAiB,SAAA,SAAA,GAAA,cAAA;CACvB,MAAA,YAAO,KAAA;CACR,OAAA,oBAAA,WAAA,EAAA,GAAA,UAAA,CAAA"}

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

@@ -0,0 +1,2 @@
+import { i as useCollectionItem, n as CollectionItemOptions, r as CollectionItemProps, t as CollectionItem } from "../collection-item-C-g2BwVF.js";
+export { CollectionItem, CollectionItemOptions, CollectionItemProps, useCollectionItem };

package/dist/collection/collection-item.js

@@ -0,0 +1,69 @@
+"use client";
+import { useCollectionContext } from "./collection-context.js";
+import { createElement, createHook, forwardRef, useId, useMergeRefs } from "@ariakit/react-utils";
+import { identity, removeUndefinedValues } from "@ariakit/utils";
+import { useEffect, useRef } from "react";
+//#region src/collection/collection-item.tsx
+const TagName = "div";
+/**
+* Returns props to create a `CollectionItem` component. This hook will register
+* the item in the collection store. If this hook is used in a component that is
+* wrapped by `Collection` or a component that implements `useCollection`,
+* there's no need to explicitly pass the `store` prop.
+* @see https://ariakit.com/components/collection
+* @example
+* ```jsx
+* const store = useCollectionStore();
+* const props = useCollectionItem({ store });
+* <Role {...props}>Item</Role>
+* ```
+*/
+const useCollectionItem = createHook(function useCollectionItem({ store, shouldRegisterItem = true, getItem = identity, element, ...props }) {
+	const context = useCollectionContext();
+	store = store || context;
+	const id = useId(props.id);
+	const ref = useRef(element);
+	useEffect(() => {
+		const element = ref.current;
+		if (!id) return;
+		if (!element) return;
+		if (!shouldRegisterItem) return;
+		const item = getItem({
+			id,
+			element
+		});
+		return store?.renderItem(item);
+	}, [
+		id,
+		shouldRegisterItem,
+		getItem,
+		store
+	]);
+	props = {
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders an item in a collection. The collection store can be passed
+* explicitly through the
+* [`store`](https://ariakit.com/reference/collection-item#store) prop or
+* implicitly through the parent
+* [`Collection`](https://ariakit.com/reference/collection) component.
+* @see https://ariakit.com/components/collection
+* @example
+* ```jsx
+* const store = useCollectionStore();
+* <CollectionItem store={store}>Item 1</CollectionItem>
+* <CollectionItem store={store}>Item 2</CollectionItem>
+* <CollectionItem store={store}>Item 3</CollectionItem>
+* ```
+*/
+const CollectionItem = forwardRef(function CollectionItem(props) {
+	return createElement(TagName, useCollectionItem(props));
+});
+//#endregion
+export { CollectionItem, useCollectionItem };
+
+//# sourceMappingURL=collection-item.js.map

package/dist/collection/collection-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-item.js","names":[],"sources":["../../src/collection/collection-item.tsx"],"sourcesContent":["import type { CollectionStoreItem } from \"@ariakit/components/collection/collection-store\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { identity, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { useCollectionContext } from \"./collection-context.tsx\";\nimport type { CollectionStore } from \"./collection-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `CollectionItem` component. This hook will register\n * the item in the collection store. If this hook is used in a component that is\n * wrapped by `Collection` or a component that implements `useCollection`,\n * there's no need to explicitly pass the `store` prop.\n * @see https://ariakit.com/components/collection\n * @example\n * ```jsx\n * const store = useCollectionStore();\n * const props = useCollectionItem({ store });\n * <Role {...props}>Item</Role>\n * ```\n */\nexport const useCollectionItem = createHook<TagName, CollectionItemOptions>(\n  function useCollectionItem({\n    store,\n    shouldRegisterItem = true,\n    getItem = identity,\n    // @ts-expect-error This prop may come from a collection renderer.\n    element,\n    ...props\n  }) {\n    const context = useCollectionContext();\n    store = store || context;\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(element);\n\n    useEffect(() => {\n      const element = ref.current;\n      if (!id) return;\n      if (!element) return;\n      if (!shouldRegisterItem) return;\n      const item = getItem({ id, element });\n      return store?.renderItem(item);\n    }, [id, shouldRegisterItem, getItem, store]);\n\n    props = {\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an item in a collection. The collection store can be passed\n * explicitly through the\n * [`store`](https://ariakit.com/reference/collection-item#store) prop or\n * implicitly through the parent\n * [`Collection`](https://ariakit.com/reference/collection) component.\n * @see https://ariakit.com/components/collection\n * @example\n * ```jsx\n * const store = useCollectionStore();\n * <CollectionItem store={store}>Item 1</CollectionItem>\n * <CollectionItem store={store}>Item 2</CollectionItem>\n * <CollectionItem store={store}>Item 3</CollectionItem>\n * ```\n */\nexport const CollectionItem = forwardRef(function CollectionItem(\n  props: CollectionItemProps,\n) {\n  const htmlProps = useCollectionItem(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CollectionItemOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCollectionStore`](https://ariakit.com/reference/use-collection-store)\n   * hook. If not provided, the closest\n   * [`Collection`](https://ariakit.com/reference/collection) or\n   * [`CollectionProvider`](https://ariakit.com/reference/collection-provider)\n   * components' context will be used.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   */\n  store?: CollectionStore;\n  /**\n   * The unique ID of the item. This will be used to register the item in the\n   * store and for the element's `id` attribute. If not provided, a unique ID\n   * will be automatically generated.\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Tab with React Router](https://ariakit.com/examples/tab-react-router)\n   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   */\n  id?: string;\n  /**\n   * Whether the item should be registered as part of the collection.\n   * @default true\n   */\n  shouldRegisterItem?: boolean;\n  /**\n   * A memoized function that returns props to be passed with the item during\n   * its registration in the store.\n   * @example\n   * ```jsx\n   * const getItem = useCallback((data) => ({ ...data, custom: true }), []);\n   * <CollectionItem getItem={getItem} />\n   * ```\n   */\n  getItem?: (props: CollectionStoreItem) => CollectionStoreItem;\n}\n\nexport type CollectionItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CollectionItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;MAyCI,oBAAgB,WAAA,SAAqB,kBAAA,EAAA,OAAA,qBAAA,MAAA,UAAA,UAAA,SAAA,GAAA,SAAA;CACrC,MAAA,UAAQ,qBAAS;CAEjB,QAAM,SAAW;CACjB,MAAM,KAAA,MAAM,MAAiB,EAAA;CAE7B,MAAA,MAAA,OAAgB,OAAA;iBACR;EACN,MAAK,UAAI,IAAA;EACT,IAAI,CAAC,IAAA;EACL,IAAI,CAAC,SAAA;EACL,IAAA,CAAA,oBAAqB;QAAE,OAAA,QAAA;GAAI;GAAS;EACpC,CAAA;EACF,OAAG,OAAA,WAAA,IAAA;IAAC;EAAI;EAAoB;EAAS;EAAM;CAE3C,CAAA;SACK;EACH,GAAA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;MAqBE,iBAAqB,WADH,SAAA,eACqB,OAAA;CACxC,OAAA,cAAA,SAAA,kBAAA,KAAA,CAAA"}

package/dist/collection/collection-provider.d.ts

@@ -0,0 +1,26 @@
+import { a as CollectionStoreProps, r as CollectionStoreItem } from "../collection-store-CbwzYsWf.js";
+import { ReactElement, ReactNode } from "react";
+import { PickRequired } from "@ariakit/utils";
+
+//#region src/collection/collection-provider.d.ts
+/**
+ * Provides a collection store to
+ * [`CollectionItem`](https://ariakit.com/reference/collection-item) components.
+ * @see https://ariakit.com/components/collection
+ * @example
+ * ```jsx
+ * <CollectionProvider>
+ *   <CollectionItem />
+ *   <CollectionItem />
+ *   <CollectionItem />
+ * </CollectionProvider>
+ * ```
+ */
+declare function CollectionProvider<T extends CollectionStoreItem = CollectionStoreItem>(props: PickRequired<CollectionProviderProps<T>, "items" | "defaultItems">): ReactElement;
+declare function CollectionProvider(props?: CollectionProviderProps): ReactElement;
+interface CollectionProviderProps<T extends CollectionStoreItem = CollectionStoreItem> extends CollectionStoreProps<T> {
+  children?: ReactNode;
+}
+//#endregion
+export { CollectionProvider, CollectionProviderProps };
+//# sourceMappingURL=collection-provider.d.ts.map

package/dist/collection/collection-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-provider.d.ts","names":["PickRequired","ReactElement","ReactNode","CollectionStoreItem","CollectionStoreProps","CollectionProvider","T","CollectionProviderProps","props","children"],"sources":["../../src/collection/collection-provider.d.ts"],"mappings":";;;;;;;AAgBA;;;;;;;;;;;iBAAwBK,kBAAAA,WAA6BF,mBAAAA,GAAsBA,mBAAAA,CAAAA,CAAqBK,KAAAA,EAAOR,YAAAA,CAAaO,uBAAAA,CAAwBD,CAAAA,+BAAgCL,YAAAA;AAAAA,iBACpJI,kBAAAA,CAAmBG,KAAAA,GAAQD,uBAAAA,GAA0BN,YAAY;AAAA,UACxEM,uBAAAA,WAAkCJ,mBAAAA,GAAsBA,mBAAAA,UAA6BC,oBAAAA,CAAqBE,CAAAA;EACvHG,QAAAA,GAAWP,SAAAA;AAAAA"}

package/dist/collection/collection-provider.js

@@ -0,0 +1,15 @@
+"use client";
+import { CollectionContextProvider } from "./collection-context.js";
+import { useCollectionStore } from "./collection-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/collection/collection-provider.tsx
+function CollectionProvider(props = {}) {
+	return /* @__PURE__ */ jsx(CollectionContextProvider, {
+		value: useCollectionStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { CollectionProvider };
+
+//# sourceMappingURL=collection-provider.js.map

package/dist/collection/collection-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-provider.js","names":[],"sources":["../../src/collection/collection-provider.tsx"],"sourcesContent":["import type { PickRequired } from \"@ariakit/utils\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { CollectionContextProvider } from \"./collection-context.tsx\";\nimport type {\n  CollectionStoreItem,\n  CollectionStoreProps,\n} from \"./collection-store.ts\";\nimport { useCollectionStore } from \"./collection-store.ts\";\n\n/**\n * Provides a collection store to\n * [`CollectionItem`](https://ariakit.com/reference/collection-item) components.\n * @see https://ariakit.com/components/collection\n * @example\n * ```jsx\n * <CollectionProvider>\n *   <CollectionItem />\n *   <CollectionItem />\n *   <CollectionItem />\n * </CollectionProvider>\n * ```\n */\n\nexport function CollectionProvider<\n  T extends CollectionStoreItem = CollectionStoreItem,\n>(\n  props: PickRequired<CollectionProviderProps<T>, \"items\" | \"defaultItems\">,\n): ReactElement;\n\nexport function CollectionProvider(\n  props?: CollectionProviderProps,\n): ReactElement;\n\nexport function CollectionProvider(props: CollectionProviderProps = {}) {\n  const store = useCollectionStore(props);\n  return (\n    <CollectionContextProvider value={store}>\n      {props.children}\n    </CollectionContextProvider>\n  );\n}\n\nexport interface CollectionProviderProps<\n  T extends CollectionStoreItem = CollectionStoreItem,\n> extends CollectionStoreProps<T> {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;SAoCI,mBAAC,QAAA,CAAA,GAAA;QAFW,oBAAmB,2BAEO;4BAC7B,KAAA;EACkB,UAAA,MAAA;CAE/B,CAAA"}

package/dist/collection/collection-renderer.d.ts

@@ -0,0 +1,2 @@
+import { a as CollectionRendererItemProps, c as getCollectionRendererItem, i as CollectionRendererItemObject, l as getCollectionRendererItemId, n as CollectionRendererBaseItemProps, o as CollectionRendererOptions, r as CollectionRendererItem, s as CollectionRendererProps, t as CollectionRenderer, u as useCollectionRenderer } from "../collection-renderer-DsPD9ksD.js";
+export { CollectionRenderer, CollectionRendererBaseItemProps, CollectionRendererItem, CollectionRendererItemObject, CollectionRendererItemProps, CollectionRendererOptions, CollectionRendererProps, getCollectionRendererItem, getCollectionRendererItemId, useCollectionRenderer };