@ariakit/react-components 0.1.0

package/dist/collection/collection-store.js

@@ -0,0 +1,18 @@
+"use client";
+import { useUpdateEffect } from "@ariakit/react-utils";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/collection/collection-store";
+//#region src/collection/collection-store.ts
+function useCollectionStoreProps(store, update, props) {
+	useUpdateEffect(update, [props.store]);
+	useStoreProps(store, props, "items", "setItems");
+	return store;
+}
+function useCollectionStore(props = {}) {
+	const [store, update] = useStore(Core.createCollectionStore, props);
+	return useCollectionStoreProps(store, update, props);
+}
+//#endregion
+export { useCollectionStore, useCollectionStoreProps };
+
+//# sourceMappingURL=collection-store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection-store.js","names":[],"sources":["../../src/collection/collection-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/collection/collection-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport { useUpdateEffect } from \"@ariakit/react-utils\";\nimport type { BivariantCallback, PickRequired } from \"@ariakit/utils\";\n\nexport function useCollectionStoreProps<T extends Core.CollectionStore>(\n  store: T,\n  update: () => void,\n  props: CollectionStoreProps,\n) {\n  useUpdateEffect(update, [props.store]);\n  useStoreProps(store, props, \"items\", \"setItems\");\n  return store;\n}\n\n/**\n * Creates a collection store to control\n * [Collection](https://ariakit.com/components/collection) components.\n * @see https://ariakit.com/components/collection\n * @example\n * ```jsx\n * const collection = useCollectionStore();\n *\n * <Collection store={collection}>\n *   <CollectionItem>Item</CollectionItem>\n *   <CollectionItem>Item</CollectionItem>\n *   <CollectionItem>Item</CollectionItem>\n * </Collection>\n * ```\n */\n\nexport function useCollectionStore<\n  T extends CollectionStoreItem = CollectionStoreItem,\n>(\n  props: PickRequired<CollectionStoreProps<T>, \"items\" | \"defaultItems\">,\n): CollectionStore<T>;\n\nexport function useCollectionStore(\n  props?: CollectionStoreProps,\n): CollectionStore;\n\nexport function useCollectionStore(\n  props: CollectionStoreProps = {},\n): CollectionStore {\n  const [store, update] = useStore(Core.createCollectionStore, props);\n  return useCollectionStoreProps(store, update, props);\n}\n\nexport interface CollectionStoreItem extends Core.CollectionStoreItem {}\n\nexport interface CollectionStoreState<\n  T extends CollectionStoreItem = CollectionStoreItem,\n> extends Core.CollectionStoreState<T> {}\n\nexport interface CollectionStoreFunctions<\n  T extends CollectionStoreItem = CollectionStoreItem,\n> extends Core.CollectionStoreFunctions<T> {}\n\nexport interface CollectionStoreOptions<\n  T extends CollectionStoreItem = CollectionStoreItem,\n> extends Core.CollectionStoreOptions<T> {\n  /**\n   * A callback that gets called when the\n   * [`items`](https://ariakit.com/reference/collection-provider#items) state\n   * changes.\n   * @example\n   * const [items, setItems] = useState([]);\n   * const collection = useCollectionStore({ items, setItems });\n   */\n  setItems?: BivariantCallback<\n    (items: CollectionStoreState<T>[\"items\"]) => void\n  >;\n}\n\nexport interface CollectionStoreProps<\n  T extends CollectionStoreItem = CollectionStoreItem,\n>\n  extends CollectionStoreOptions<T>, Core.CollectionStoreProps<T> {}\n\nexport interface CollectionStore<\n  T extends CollectionStoreItem = CollectionStoreItem,\n>\n  extends CollectionStoreFunctions<T>, Store<Core.CollectionStore<T>> {}\n"],"mappings":";;;;;SAWE,wBAA+B,OAAM,QAAA,OAAA;CACrC,gBAAc,QAAO,CAAA,MAAO,KAAA,CAAS;CACrC,cAAO,OAAA,OAAA,SAAA,UAAA;CACT,OAAA;AA4BA;SAGS,mBAAiB,QAAS,CAAA,GAAK;CACtC,MAAA,CAAO,OAAA,UAAA,SAAwB,KAAO,uBAAa,KAAA;CACrD,OAAA,wBAAA,OAAA,QAAA,KAAA"}

package/dist/collection/collection.d.ts

@@ -0,0 +1,55 @@
+import { t as CollectionStore } from "../collection-store-CbwzYsWf.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/collection/collection.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Collection` component. It receives the collection
+ * store through the `store` prop and provides context for `CollectionItem`
+ * components.
+ * @see https://ariakit.com/components/collection
+ * @example
+ * ```jsx
+ * const collection = useCollectionStore();
+ * const props = useCollection({ store });
+ * <Role {...props}>
+ *   <CollectionItem>Item 1</CollectionItem>
+ *   <CollectionItem>Item 2</CollectionItem>
+ *   <CollectionItem>Item 3</CollectionItem>
+ * </Role>
+ * ```
+ */
+declare const useCollection: import("@ariakit/react-utils").Hook<"div", CollectionOptions<"div">>;
+/**
+ * Renders a simple wrapper for collection items. It accepts a collection store
+ * through the [`store`](https://ariakit.com/reference/collection#store) prop
+ * and provides context for
+ * [`CollectionItem`](https://ariakit.com/reference/collection-item) components.
+ * @see https://ariakit.com/components/collection
+ * @example
+ * ```jsx
+ * const collection = useCollectionStore();
+ * <Collection store={collection}>
+ *   <CollectionItem>Item 1</CollectionItem>
+ *   <CollectionItem>Item 2</CollectionItem>
+ *   <CollectionItem>Item 3</CollectionItem>
+ * </Collection>
+ * ```
+ */
+declare const Collection: (props: CollectionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CollectionOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useCollectionStore`](https://ariakit.com/reference/use-collection-store)
+   * hook. If not provided, the closest
+   * [`CollectionProvider`](https://ariakit.com/reference/collection-provider)
+   * component's context will be used.
+   */
+  store?: CollectionStore;
+}
+type CollectionProps<T extends ElementType = TagName> = Props<T, CollectionOptions<T>>;
+//#endregion
+export { Collection, CollectionOptions, CollectionProps, useCollection };
+//# sourceMappingURL=collection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection.d.ts","names":["Options","Props","ElementType","CollectionStore","TagName","useCollection","CollectionOptions","Hook","Collection","CollectionProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/collection/collection.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAiB7B;;;;AAAgG;AAiBhG;AApC6D,cAmBxCC,aAAAA,iCAA8CE,IAAAA,QAAYD,iBAAiB;;;;;;;;AAiB6C;AAC7I;;;;;;;;cADqBE,UAAAA,GAAaE,KAAAA,EAAOD,eAAe,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvGN,iBAAAA,YAA6BJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA/BE;;;;;;AAQnB;EAAvBY,KAAAA,GAAQX,eAAAA;AAAAA;AAAAA,KAEAM,eAAAA,WAA0BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,iBAAAA,CAAkBS,CAAAA"}

package/dist/collection/collection.js

@@ -0,0 +1,55 @@
+"use client";
+import { CollectionScopedContextProvider, useCollectionProviderContext } from "./collection-context.js";
+import { createElement, createHook, forwardRef, useWrapElement } from "@ariakit/react-utils";
+import { removeUndefinedValues } from "@ariakit/utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/collection/collection.tsx
+const TagName = "div";
+/**
+* Returns props to create a `Collection` component. It receives the collection
+* store through the `store` prop and provides context for `CollectionItem`
+* components.
+* @see https://ariakit.com/components/collection
+* @example
+* ```jsx
+* const collection = useCollectionStore();
+* const props = useCollection({ store });
+* <Role {...props}>
+*   <CollectionItem>Item 1</CollectionItem>
+*   <CollectionItem>Item 2</CollectionItem>
+*   <CollectionItem>Item 3</CollectionItem>
+* </Role>
+* ```
+*/
+const useCollection = createHook(function useCollection({ store, ...props }) {
+	const context = useCollectionProviderContext();
+	store = store || context;
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(CollectionScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a simple wrapper for collection items. It accepts a collection store
+* through the [`store`](https://ariakit.com/reference/collection#store) prop
+* and provides context for
+* [`CollectionItem`](https://ariakit.com/reference/collection-item) components.
+* @see https://ariakit.com/components/collection
+* @example
+* ```jsx
+* const collection = useCollectionStore();
+* <Collection store={collection}>
+*   <CollectionItem>Item 1</CollectionItem>
+*   <CollectionItem>Item 2</CollectionItem>
+*   <CollectionItem>Item 3</CollectionItem>
+* </Collection>
+* ```
+*/
+const Collection = forwardRef(function Collection(props) {
+	return createElement(TagName, useCollection(props));
+});
+//#endregion
+export { Collection, useCollection };
+
+//# sourceMappingURL=collection.js.map

package/dist/collection/collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection.js","names":[],"sources":["../../src/collection/collection.tsx"],"sourcesContent":["import {\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport {\n  CollectionScopedContextProvider,\n  useCollectionProviderContext,\n} from \"./collection-context.tsx\";\nimport type { CollectionStore } from \"./collection-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Collection` component. It receives the collection\n * store through the `store` prop and provides context for `CollectionItem`\n * components.\n * @see https://ariakit.com/components/collection\n * @example\n * ```jsx\n * const collection = useCollectionStore();\n * const props = useCollection({ store });\n * <Role {...props}>\n *   <CollectionItem>Item 1</CollectionItem>\n *   <CollectionItem>Item 2</CollectionItem>\n *   <CollectionItem>Item 3</CollectionItem>\n * </Role>\n * ```\n */\nexport const useCollection = createHook<TagName, CollectionOptions>(\n  function useCollection({ store, ...props }) {\n    const context = useCollectionProviderContext();\n    store = store || context;\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CollectionScopedContextProvider value={store}>\n          {element}\n        </CollectionScopedContextProvider>\n      ),\n      [store],\n    );\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a simple wrapper for collection items. It accepts a collection store\n * through the [`store`](https://ariakit.com/reference/collection#store) prop\n * and provides context for\n * [`CollectionItem`](https://ariakit.com/reference/collection-item) components.\n * @see https://ariakit.com/components/collection\n * @example\n * ```jsx\n * const collection = useCollectionStore();\n * <Collection store={collection}>\n *   <CollectionItem>Item 1</CollectionItem>\n *   <CollectionItem>Item 2</CollectionItem>\n *   <CollectionItem>Item 3</CollectionItem>\n * </Collection>\n * ```\n */\nexport const Collection = forwardRef(function Collection(\n  props: CollectionProps,\n) {\n  const htmlProps = useCollection(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CollectionOptions<\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   * [`CollectionProvider`](https://ariakit.com/reference/collection-provider)\n   * component's context will be used.\n   */\n  store?: CollectionStore;\n}\n\nexport type CollectionProps<T extends ElementType = TagName> = Props<\n  T,\n  CollectionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAoCI,gBAAgB,WAAA,SAAA,cAA6B,EAAA,OAAA,GAAA,SAAA;CAC7C,MAAA,UAAQ,6BAAS;CAEjB,QAAQ,SAAA;SAGoC,eAAA,QAAA,YAAA,oBAAA,iCAAA;;EAEP,UAGrC;CAEA,CAAA,GAAA,CAAA,KAAO,CAAA;CAEX,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;MAsBE,aAAO,WAAc,SADH,WACoB,OAAC;CACxC,OAAA,cAAA,SAAA,cAAA,KAAA,CAAA"}

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

@@ -0,0 +1,84 @@
+import { t as CollectionStore } from "./collection-store-CbwzYsWf.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+import { CollectionStoreItem } from "@ariakit/components/collection/collection-store";
+
+//#region src/collection/collection-item.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * 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>
+ * ```
+ */
+declare const useCollectionItem: import("@ariakit/react-utils").Hook<"div", CollectionItemOptions<"div">>;
+/**
+ * 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>
+ * ```
+ */
+declare const CollectionItem: (props: CollectionItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CollectionItemOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useCollectionStore`](https://ariakit.com/reference/use-collection-store)
+   * hook. If not provided, the closest
+   * [`Collection`](https://ariakit.com/reference/collection) or
+   * [`CollectionProvider`](https://ariakit.com/reference/collection-provider)
+   * components' context will be used.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  store?: CollectionStore;
+  /**
+   * The unique ID of the item. This will be used to register the item in the
+   * store and for the element's `id` attribute. If not provided, a unique ID
+   * will be automatically generated.
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Tab with React Router](https://ariakit.com/examples/tab-react-router)
+   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)
+   * - [Select with Combobox and
+   *   Tabs](https://ariakit.com/examples/select-combobox-tab)
+   */
+  id?: string;
+  /**
+   * Whether the item should be registered as part of the collection.
+   * @default true
+   */
+  shouldRegisterItem?: boolean;
+  /**
+   * A memoized function that returns props to be passed with the item during
+   * its registration in the store.
+   * @example
+   * ```jsx
+   * const getItem = useCallback((data) => ({ ...data, custom: true }), []);
+   * <CollectionItem getItem={getItem} />
+   * ```
+   */
+  getItem?: (props: CollectionStoreItem) => CollectionStoreItem;
+}
+type CollectionItemProps<T extends ElementType = TagName> = Props<T, CollectionItemOptions<T>>;
+//#endregion
+export { useCollectionItem as i, CollectionItemOptions as n, CollectionItemProps as r, CollectionItem as t };
+//# sourceMappingURL=collection-item-C-g2BwVF.d.ts.map

package/dist/collection-item-C-g2BwVF.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-item-C-g2BwVF.d.ts","names":["CollectionStoreItem","Options","Props","ElementType","CollectionStore","TagName","useCollectionItem","CollectionItemOptions","Hook","CollectionItem","CollectionItemProps","props","ReactElement","JSXElementConstructor","_T","store","id","shouldRegisterItem","getItem","T"],"sources":["../src/collection/collection-item.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAc7B;;;AAhB6D,cAgBxCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;AAAA;AAgBxG;;;;;;;;;AAAqJ;AACrJ;;;;AAjBwG,cAgBnFE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,YAAiCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAwC3DD;;;;;;;;;;;EA5BlBe,KAAAA,GAAQX,eAAAA;EAkBRa;;;;;;AAU6D;AAEjE;;;;;EAjBID,EAAAA;EAiB8FG;;;;EAZ9FF,kBAAAA;EAY4BE;;;;;;;;AAAmE;EAF/FD,OAAAA,IAAWP,KAAAA,EAAOX,mBAAAA,KAAwBA,mBAAAA;AAAAA;AAAAA,KAElCU,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMiB,CAAAA,EAAGZ,qBAAAA,CAAsBY,CAAAA"}

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

@@ -0,0 +1,30 @@
+import { n as CollectionItemOptions$1 } from "./collection-item-C-g2BwVF.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, RefCallback, RefObject } from "react";
+
+//#region src/collection/collection-item-offscreen.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+declare function useCollectionItemOffscreen<T extends ElementType, P extends CollectionItemProps<T>>({
+  offscreenMode,
+  offscreenRoot,
+  ...props
+}: P): {
+  id: string | undefined;
+  active: boolean;
+  ref: RefCallback<HTMLDivElement>;
+  "data-offscreen": true | undefined;
+};
+declare const CollectionItem: ({
+  offscreenMode,
+  offscreenRoot,
+  ...props
+}: CollectionItemProps) => import("react/jsx-runtime").JSX.Element;
+interface CollectionItemOptions<T extends ElementType = TagName> extends CollectionItemOptions$1<T> {
+  offscreenMode?: "active" | "passive" | "lazy";
+  offscreenRoot?: HTMLElement | RefObject<HTMLElement | null> | ((element: HTMLElement) => HTMLElement | null) | null;
+}
+type CollectionItemProps<T extends ElementType = TagName> = Props<T, CollectionItemOptions<T>>;
+//#endregion
+export { useCollectionItemOffscreen as i, CollectionItemOptions as n, CollectionItemProps as r, CollectionItem as t };
+//# sourceMappingURL=collection-item-offscreen-DyXa-sqj.d.ts.map

package/dist/collection-item-offscreen-DyXa-sqj.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-item-offscreen-DyXa-sqj.d.ts","names":["Props","ElementType","RefCallback","RefObject","Base","TagName","useCollectionItemOffscreen","T","P","CollectionItemProps","offscreenMode","offscreenRoot","HTMLDivElement","props","id","active","ref","CollectionItem","JSX","Element","CollectionItemOptions","HTMLElement","element"],"sources":["../src/collection/collection-item-offscreen.d.ts"],"mappings":";;;;;cAGcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,iBACLC,0BAAAA,WAAqCL,WAAAA,YAAuBQ,mBAAAA,CAAoBF,CAAAA,EAAAA,CAAAA;EAAMG,aAAAA;EAAeC,aAAAA;EAAAA,GAAkBE;AAAAA,GAASL,CAAAA;EACpJM,EAAAA;EACAC,MAAAA;EACAC,GAAAA,EAAKd,WAAAA,CAAYU,cAAAA;EACjB,gBAAA;AAAA;AAAA,cAEiBK,cAAAA;EAAmBP,aAAAA;EAAeC,aAAAA;EAAAA,GAAkBE;AAAAA,GAASJ,mBAAAA,iCAAoDS,GAAAA,CAAIC,OAAAA;AAAAA,UACzHC,qBAAAA,WAAgCnB,WAAAA,GAAcI,OAAAA,UAAiBD,uBAAAA,CAA2BG,CAAAA;EACvGG,aAAAA;EACAC,aAAAA,GAAgBU,WAAAA,GAAclB,SAAAA,CAAUkB,WAAAA,aAAwBC,OAAAA,EAASD,WAAAA,KAAgBA,WAAAA;AAAAA;AAAAA,KAEjFZ,mBAAAA,WAA8BR,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMO,CAAAA,EAAGa,qBAAAA,CAAsBb,CAAAA"}