@tamagui/collection 1.2.15

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Radix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/Collection.js

@@ -0,0 +1,106 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Collection_exports = {};
+__export(Collection_exports, {
+  createCollection: () => createCollection
+});
+module.exports = __toCommonJS(Collection_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_react = __toESM(require("react"));
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope] = (0, import_create_context.createContextScope)(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+    collectionRef: { current: null },
+    itemMap: /* @__PURE__ */ new Map()
+  });
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = import_react.default.useRef(null);
+    const itemMap = import_react.default.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlot = import_react.default.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slot, { ref: composedRefs, children });
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-collection-item";
+  const CollectionItemSlot = import_react.default.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = import_react.default.useRef(null);
+      const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      import_react.default.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = import_react.default.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode)
+        return [];
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      );
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope
+  ];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCollection
+});
+//# sourceMappingURL=Collection.js.map

package/dist/cjs/Collection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Collection.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = HTMLElement\ninterface CollectionProps extends SlotProps {\n  scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider'\n  const [createCollectionContext, createCollectionScope] =\n    createContextScope(PROVIDER_NAME)\n\n  type ContextValue = {\n    collectionRef: React.RefObject<CollectionElement>\n    itemMap: Map<\n      React.RefObject<ItemElement>,\n      { ref: React.RefObject<ItemElement> } & ItemData\n    >\n  }\n\n  const [CollectionProviderImpl, useCollectionContext] =\n    createCollectionContext<ContextValue>(PROVIDER_NAME, {\n      collectionRef: { current: null },\n      itemMap: new Map(),\n    })\n\n  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n    props\n  ) => {\n    const { scope, children } = props\n    const ref = React.useRef<CollectionElement>(null)\n    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n    return (\n      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n        {children}\n      </CollectionProviderImpl>\n    )\n  }\n\n  CollectionProvider.displayName = PROVIDER_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n      return <Slot ref={composedRefs}>{children}</Slot>\n    }\n  )\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n  const ITEM_DATA_ATTR = 'data-collection-item'\n\n  type CollectionItemSlotProps = ItemData & {\n    children: React.ReactNode\n    scope: any\n  }\n\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props\n      const ref = React.useRef<ItemElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref)\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n      React.useEffect(() => {\n        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n        return () => void context.itemMap.delete(ref)\n      })\n\n      return (\n        <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n          {children}\n        </Slot>\n      )\n    }\n  )\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n    const getItems = React.useCallback(() => {\n      const collectionNode = context.collectionRef.current\n      if (!collectionNode) return []\n      const orderedNodes = Array.from(\n        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n      )\n      const items = Array.from(context.itemMap.values())\n      const orderedItems = items.sort(\n        (a, b) =>\n          orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n      )\n      return orderedItems\n    }, [context.collectionRef, context.itemMap])\n\n    return getItems\n  }\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    useCollection,\n    createCollectionScope,\n  ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CM;AA9CN,0BAAgC;AAChC,kBAAqB;AACrB,4BAAmC;AACnC,mBAAkB;AAalB,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,QACnD,0CAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,aAAAA,QAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,aAAAA,QAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,4CAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,mBAAe,qCAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,4CAAC,oBAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,aAAAA,QAAM,OAAoB,IAAI;AAC1C,YAAM,mBAAe,qCAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,mBAAAA,QAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,4CAAC,oBAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,aAAAA,QAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MAC9E;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Collection"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collection'\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,yBAAd;",
+  "names": []
+}

package/dist/esm/Collection.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { Slot } from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import React from "react";
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+    collectionRef: { current: null },
+    itemMap: /* @__PURE__ */ new Map()
+  });
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React.useRef(null);
+    const itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ jsx(Slot, { ref: composedRefs, children });
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-collection-item";
+  const CollectionItemSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = React.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ jsx(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode)
+        return [];
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      );
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope
+  ];
+}
+export {
+  createCollection
+};
+//# sourceMappingURL=Collection.js.map

package/dist/esm/Collection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Collection.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = HTMLElement\ninterface CollectionProps extends SlotProps {\n  scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider'\n  const [createCollectionContext, createCollectionScope] =\n    createContextScope(PROVIDER_NAME)\n\n  type ContextValue = {\n    collectionRef: React.RefObject<CollectionElement>\n    itemMap: Map<\n      React.RefObject<ItemElement>,\n      { ref: React.RefObject<ItemElement> } & ItemData\n    >\n  }\n\n  const [CollectionProviderImpl, useCollectionContext] =\n    createCollectionContext<ContextValue>(PROVIDER_NAME, {\n      collectionRef: { current: null },\n      itemMap: new Map(),\n    })\n\n  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n    props\n  ) => {\n    const { scope, children } = props\n    const ref = React.useRef<CollectionElement>(null)\n    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n    return (\n      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n        {children}\n      </CollectionProviderImpl>\n    )\n  }\n\n  CollectionProvider.displayName = PROVIDER_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n      return <Slot ref={composedRefs}>{children}</Slot>\n    }\n  )\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n  const ITEM_DATA_ATTR = 'data-collection-item'\n\n  type CollectionItemSlotProps = ItemData & {\n    children: React.ReactNode\n    scope: any\n  }\n\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props\n      const ref = React.useRef<ItemElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref)\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n      React.useEffect(() => {\n        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n        return () => void context.itemMap.delete(ref)\n      })\n\n      return (\n        <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n          {children}\n        </Slot>\n      )\n    }\n  )\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n    const getItems = React.useCallback(() => {\n      const collectionNode = context.collectionRef.current\n      if (!collectionNode) return []\n      const orderedNodes = Array.from(\n        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n      )\n      const items = Array.from(context.itemMap.values())\n      const orderedItems = items.sort(\n        (a, b) =>\n          orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n      )\n      return orderedItems\n    }, [context.collectionRef, context.itemMap])\n\n    return getItems\n  }\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    useCollection,\n    createCollectionScope,\n  ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
+  "mappings": "AA8CM;AA9CN,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,oBAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,oBAAC,QAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MAC9E;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/Collection.mjs

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { Slot } from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import React from "react";
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+    collectionRef: { current: null },
+    itemMap: /* @__PURE__ */ new Map()
+  });
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React.useRef(null);
+    const itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ jsx(Slot, { ref: composedRefs, children });
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-collection-item";
+  const CollectionItemSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = React.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ jsx(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode)
+        return [];
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      );
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope
+  ];
+}
+export {
+  createCollection
+};
+//# sourceMappingURL=Collection.mjs.map

package/dist/esm/Collection.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Collection.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = HTMLElement\ninterface CollectionProps extends SlotProps {\n  scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider'\n  const [createCollectionContext, createCollectionScope] =\n    createContextScope(PROVIDER_NAME)\n\n  type ContextValue = {\n    collectionRef: React.RefObject<CollectionElement>\n    itemMap: Map<\n      React.RefObject<ItemElement>,\n      { ref: React.RefObject<ItemElement> } & ItemData\n    >\n  }\n\n  const [CollectionProviderImpl, useCollectionContext] =\n    createCollectionContext<ContextValue>(PROVIDER_NAME, {\n      collectionRef: { current: null },\n      itemMap: new Map(),\n    })\n\n  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n    props\n  ) => {\n    const { scope, children } = props\n    const ref = React.useRef<CollectionElement>(null)\n    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n    return (\n      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n        {children}\n      </CollectionProviderImpl>\n    )\n  }\n\n  CollectionProvider.displayName = PROVIDER_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n      return <Slot ref={composedRefs}>{children}</Slot>\n    }\n  )\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n  const ITEM_DATA_ATTR = 'data-collection-item'\n\n  type CollectionItemSlotProps = ItemData & {\n    children: React.ReactNode\n    scope: any\n  }\n\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props\n      const ref = React.useRef<ItemElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref)\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n      React.useEffect(() => {\n        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n        return () => void context.itemMap.delete(ref)\n      })\n\n      return (\n        <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n          {children}\n        </Slot>\n      )\n    }\n  )\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n    const getItems = React.useCallback(() => {\n      const collectionNode = context.collectionRef.current\n      if (!collectionNode) return []\n      const orderedNodes = Array.from(\n        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n      )\n      const items = Array.from(context.itemMap.values())\n      const orderedItems = items.sort(\n        (a, b) =>\n          orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n      )\n      return orderedItems\n    }, [context.collectionRef, context.itemMap])\n\n    return getItems\n  }\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    useCollection,\n    createCollectionScope,\n  ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
+  "mappings": "AA8CM;AA9CN,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,oBAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,oBAAC,QAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MAC9E;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./Collection";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collection'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/esm/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Collection";
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collection'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/jsx/Collection.js

@@ -0,0 +1,71 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { Slot } from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import React from "react";
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+    collectionRef: { current: null },
+    itemMap: /* @__PURE__ */ new Map()
+  });
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React.useRef(null);
+    const itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
+    return <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>{children}</CollectionProviderImpl>;
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return <Slot ref={composedRefs}>{children}</Slot>;
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-collection-item";
+  const CollectionItemSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = React.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return <Slot {...{ [ITEM_DATA_ATTR]: "" }} ref={composedRefs}>{children}</Slot>;
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode)
+        return [];
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      );
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope
+  ];
+}
+export {
+  createCollection
+};
+//# sourceMappingURL=Collection.js.map

package/dist/jsx/Collection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Collection.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = HTMLElement\ninterface CollectionProps extends SlotProps {\n  scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider'\n  const [createCollectionContext, createCollectionScope] =\n    createContextScope(PROVIDER_NAME)\n\n  type ContextValue = {\n    collectionRef: React.RefObject<CollectionElement>\n    itemMap: Map<\n      React.RefObject<ItemElement>,\n      { ref: React.RefObject<ItemElement> } & ItemData\n    >\n  }\n\n  const [CollectionProviderImpl, useCollectionContext] =\n    createCollectionContext<ContextValue>(PROVIDER_NAME, {\n      collectionRef: { current: null },\n      itemMap: new Map(),\n    })\n\n  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n    props\n  ) => {\n    const { scope, children } = props\n    const ref = React.useRef<CollectionElement>(null)\n    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n    return (\n      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n        {children}\n      </CollectionProviderImpl>\n    )\n  }\n\n  CollectionProvider.displayName = PROVIDER_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n      return <Slot ref={composedRefs}>{children}</Slot>\n    }\n  )\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n  const ITEM_DATA_ATTR = 'data-collection-item'\n\n  type CollectionItemSlotProps = ItemData & {\n    children: React.ReactNode\n    scope: any\n  }\n\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props\n      const ref = React.useRef<ItemElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref)\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n      React.useEffect(() => {\n        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n        return () => void context.itemMap.delete(ref)\n      })\n\n      return (\n        <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n          {children}\n        </Slot>\n      )\n    }\n  )\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n    const getItems = React.useCallback(() => {\n      const collectionNode = context.collectionRef.current\n      if (!collectionNode) return []\n      const orderedNodes = Array.from(\n        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n      )\n      const items = Array.from(context.itemMap.values())\n      const orderedItems = items.sort(\n        (a, b) =>\n          orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n      )\n      return orderedItems\n    }, [context.collectionRef, context.itemMap])\n\n    return getItems\n  }\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    useCollection,\n    createCollectionScope,\n  ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,CAAC,uBAAuB,OAAO,OAAO,SAAS,SAAS,eAAe,MACpE,SACH,EAFC;AAAA,EAIL;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,CAAC,KAAK,KAAK,eAAe,SAAS,EAAlC;AAAA,IACV;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,CAAC,SAAS,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,eACtC,SACH,EAFC;AAAA,IAIL;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MAC9E;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/jsx/Collection.mjs

@@ -0,0 +1,71 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { Slot } from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import React from "react";
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+    collectionRef: { current: null },
+    itemMap: /* @__PURE__ */ new Map()
+  });
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React.useRef(null);
+    const itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
+    return <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>{children}</CollectionProviderImpl>;
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return <Slot ref={composedRefs}>{children}</Slot>;
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-collection-item";
+  const CollectionItemSlot = React.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = React.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return <Slot {...{ [ITEM_DATA_ATTR]: "" }} ref={composedRefs}>{children}</Slot>;
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode)
+        return [];
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      );
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope
+  ];
+}
+export {
+  createCollection
+};
+//# sourceMappingURL=Collection.mjs.map

package/dist/jsx/Collection.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Collection.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport { Slot } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport React from 'react'\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>\ntype CollectionElement = HTMLElement\ninterface CollectionProps extends SlotProps {\n  scope: any\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>\u2026</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider'\n  const [createCollectionContext, createCollectionScope] =\n    createContextScope(PROVIDER_NAME)\n\n  type ContextValue = {\n    collectionRef: React.RefObject<CollectionElement>\n    itemMap: Map<\n      React.RefObject<ItemElement>,\n      { ref: React.RefObject<ItemElement> } & ItemData\n    >\n  }\n\n  const [CollectionProviderImpl, useCollectionContext] =\n    createCollectionContext<ContextValue>(PROVIDER_NAME, {\n      collectionRef: { current: null },\n      itemMap: new Map(),\n    })\n\n  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (\n    props\n  ) => {\n    const { scope, children } = props\n    const ref = React.useRef<CollectionElement>(null)\n    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current\n    return (\n      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n        {children}\n      </CollectionProviderImpl>\n    )\n  }\n\n  CollectionProvider.displayName = PROVIDER_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'\n\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)\n      return <Slot ref={composedRefs}>{children}</Slot>\n    }\n  )\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot'\n  const ITEM_DATA_ATTR = 'data-collection-item'\n\n  type CollectionItemSlotProps = ItemData & {\n    children: React.ReactNode\n    scope: any\n  }\n\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props\n      const ref = React.useRef<ItemElement>(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref)\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope)\n\n      React.useEffect(() => {\n        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })\n        return () => void context.itemMap.delete(ref)\n      })\n\n      return (\n        <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n          {children}\n        </Slot>\n      )\n    }\n  )\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const context = useCollectionContext(name + 'CollectionConsumer', scope)\n\n    const getItems = React.useCallback(() => {\n      const collectionNode = context.collectionRef.current\n      if (!collectionNode) return []\n      const orderedNodes = Array.from(\n        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n      )\n      const items = Array.from(context.itemMap.values())\n      const orderedItems = items.sort(\n        (a, b) =>\n          orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n      )\n      return orderedItems\n    }, [context.collectionRef, context.itemMap])\n\n    return getItems\n  }\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    useCollection,\n    createCollectionScope,\n  ] as const\n}\n\nexport { createCollection }\nexport type { CollectionProps }\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,WAAW;AAalB,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,aAAa;AAUlC,QAAM,CAAC,wBAAwB,oBAAoB,IACjD,wBAAsC,eAAe;AAAA,IACnD,eAAe,EAAE,SAAS,KAAK;AAAA,IAC/B,SAAS,oBAAI,IAAI;AAAA,EACnB,CAAC;AAEH,QAAM,qBAA2E,CAC/E,UACG;AACH,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,CAAC,uBAAuB,OAAO,OAAO,SAAS,SAAS,eAAe,MACpE,SACH,EAFC;AAAA,EAIL;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,CAAC,KAAK,KAAK,eAAe,SAAS,EAAlC;AAAA,IACV;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,CAAC,SAAS,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,eACtC,SACH,EAFC;AAAA,IAIL;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC;AAAgB,eAAO,CAAC;AAC7B,YAAM,eAAe,MAAM;AAAA,QACzB,eAAe,iBAAiB,IAAI,iBAAiB;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MACF,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MAC9E;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./Collection";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collection'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/jsx/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Collection";
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collection'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@tamagui/collection",
+  "version": "1.2.15",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/compose-refs": "^1.2.15",
+    "@tamagui/core": "^1.2.15",
+    "@tamagui/create-context": "^1.2.15",
+    "@tamagui/polyfill-dev": "^1.2.15",
+    "@tamagui/stacks": "^1.2.15",
+    "@tamagui/use-controllable-state": "^1.2.15"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.2.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/Collection.tsx

@@ -0,0 +1,138 @@
+import { useComposedRefs } from '@tamagui/compose-refs'
+import { Slot } from '@tamagui/core'
+import { createContextScope } from '@tamagui/create-context'
+import React from 'react'
+
+type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>
+type CollectionElement = HTMLElement
+interface CollectionProps extends SlotProps {
+  scope: any
+}
+
+// We have resorted to returning slots directly rather than exposing primitives that can then
+// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
+// This is because we encountered issues with generic types that cannot be statically analysed
+// due to creating them dynamically via createCollection.
+
+function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {
+  /* -----------------------------------------------------------------------------------------------
+   * CollectionProvider
+   * ---------------------------------------------------------------------------------------------*/
+
+  const PROVIDER_NAME = name + 'CollectionProvider'
+  const [createCollectionContext, createCollectionScope] =
+    createContextScope(PROVIDER_NAME)
+
+  type ContextValue = {
+    collectionRef: React.RefObject<CollectionElement>
+    itemMap: Map<
+      React.RefObject<ItemElement>,
+      { ref: React.RefObject<ItemElement> } & ItemData
+    >
+  }
+
+  const [CollectionProviderImpl, useCollectionContext] =
+    createCollectionContext<ContextValue>(PROVIDER_NAME, {
+      collectionRef: { current: null },
+      itemMap: new Map(),
+    })
+
+  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (
+    props
+  ) => {
+    const { scope, children } = props
+    const ref = React.useRef<CollectionElement>(null)
+    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current
+    return (
+      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>
+        {children}
+      </CollectionProviderImpl>
+    )
+  }
+
+  CollectionProvider.displayName = PROVIDER_NAME
+
+  /* -----------------------------------------------------------------------------------------------
+   * CollectionSlot
+   * ---------------------------------------------------------------------------------------------*/
+
+  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'
+
+  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(
+    (props, forwardedRef) => {
+      const { scope, children } = props
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope)
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)
+      return <Slot ref={composedRefs}>{children}</Slot>
+    }
+  )
+
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME
+
+  /* -----------------------------------------------------------------------------------------------
+   * CollectionItem
+   * ---------------------------------------------------------------------------------------------*/
+
+  const ITEM_SLOT_NAME = name + 'CollectionItemSlot'
+  const ITEM_DATA_ATTR = 'data-collection-item'
+
+  type CollectionItemSlotProps = ItemData & {
+    children: React.ReactNode
+    scope: any
+  }
+
+  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props
+      const ref = React.useRef<ItemElement>(null)
+      const composedRefs = useComposedRefs(forwardedRef, ref)
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope)
+
+      React.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) })
+        return () => void context.itemMap.delete(ref)
+      })
+
+      return (
+        <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>
+          {children}
+        </Slot>
+      )
+    }
+  )
+
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME
+
+  /* -----------------------------------------------------------------------------------------------
+   * useCollection
+   * ---------------------------------------------------------------------------------------------*/
+
+  function useCollection(scope: any) {
+    const context = useCollectionContext(name + 'CollectionConsumer', scope)
+
+    const getItems = React.useCallback(() => {
+      const collectionNode = context.collectionRef.current
+      if (!collectionNode) return []
+      const orderedNodes = Array.from(
+        collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)
+      )
+      const items = Array.from(context.itemMap.values())
+      const orderedItems = items.sort(
+        (a, b) =>
+          orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)
+      )
+      return orderedItems
+    }, [context.collectionRef, context.itemMap])
+
+    return getItems
+  }
+
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope,
+  ] as const
+}
+
+export { createCollection }
+export type { CollectionProps }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Collection'

package/types/Collection.d.ts

@@ -0,0 +1,22 @@
+import { Slot } from '@tamagui/core';
+import React from 'react';
+type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;
+interface CollectionProps extends SlotProps {
+    scope: any;
+}
+declare function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string): readonly [{
+    readonly Provider: React.FC<{
+        children?: React.ReactNode;
+        scope: any;
+    }>;
+    readonly Slot: React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>;
+    readonly ItemSlot: React.ForwardRefExoticComponent<React.PropsWithoutRef<ItemData & {
+        children: React.ReactNode;
+        scope: any;
+    }> & React.RefAttributes<ItemElement>>;
+}, (scope: any) => () => ({
+    ref: React.RefObject<ItemElement>;
+} & ItemData)[], import("@tamagui/create-context").CreateScope];
+export { createCollection };
+export type { CollectionProps };
+//# sourceMappingURL=Collection.d.ts.map

package/types/Collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../src/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5D,UAAU,eAAgB,SAAQ,SAAS;IACzC,KAAK,EAAE,GAAG,CAAA;CACX;AAOD,iBAAS,gBAAgB,CAAC,WAAW,SAAS,WAAW,EAAE,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM;;mBAuBpC,MAAM,SAAS;eAAS,GAAG;;;;kBAwC/D,MAAM,SAAS;eAClB,GAAG;;WA6BkB,GAAG;SAhFtB,MAAM,SAAS,CAAC,WAAW,CAAC;gEAyGxC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Collection';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}