@tamagui/popper 1.0.0-beta.10

package/dist/cjs/Popper.js

@@ -0,0 +1,233 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popper_exports = {};
+__export(Popper_exports, {
+  Popper: () => Popper,
+  PopperAnchor: () => PopperAnchor,
+  PopperArrow: () => PopperArrow,
+  PopperContent: () => PopperContent,
+  createPopperScope: () => createPopperScope
+});
+module.exports = __toCommonJS(Popper_exports);
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_stacks = require("@tamagui/stacks");
+var React = __toESM(require("react"));
+var import_floating = require("./floating");
+var import_useFloating = require("./useFloating");
+const POPPER_NAME = "Popper";
+const [createPopperContext, createScope] = (0, import_create_context.createContextScope)(POPPER_NAME);
+const createPopperScope = createScope;
+const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+const Popper = /* @__PURE__ */ __name((props) => {
+  const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
+  const [isMounted, setIsMounted] = React.useState(false);
+  (0, import_core.useIsomorphicLayoutEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  const anchorRef = React.useRef();
+  const [arrowEl, setArrow] = React.useState(null);
+  const [arrowSize, setArrowSize] = React.useState(0);
+  const arrowRef = React.useRef();
+  const floating = (0, import_useFloating.useFloating)({
+    placement,
+    middleware: [
+      stayInFrame ? (0, import_floating.shift)(stayInFrame) : null,
+      allowFlip ? (0, import_floating.flip)(allowFlip) : null,
+      arrowEl ? (0, import_floating.arrow)({ element: arrowEl }) : null,
+      arrowSize ? (0, import_floating.offset)(arrowSize) : null
+    ].filter(Boolean)
+  });
+  const { refs, middlewareData } = floating;
+  const composedArrowRefs = (0, import_compose_refs.useComposedRefs)(arrowRef, setArrow);
+  (0, import_core.useIsomorphicLayoutEffect)(() => {
+    floating.reference(anchorRef.current);
+  }, [anchorRef]);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    return (0, import_floating.autoUpdate)(refs.reference.current, refs.floating.current, floating.update);
+  }, [refs.floating.current, refs.reference.current]);
+  const arrowStyle = React.useMemo(() => {
+    return middlewareData.arrow;
+  }, [JSON.stringify(middlewareData.arrow || {})]);
+  return /* @__PURE__ */ React.createElement(PopperProvider, __spreadValues({
+    scope: __scopePopper,
+    anchorRef,
+    size,
+    arrowRef: composedArrowRefs,
+    arrowStyle,
+    onArrowSize: setArrowSize,
+    isMounted
+  }, floating), children);
+}, "Popper");
+Popper.displayName = POPPER_NAME;
+const ANCHOR_NAME = "PopperAnchor";
+const PopperAnchor = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { __scopePopper, virtualRef } = _a, anchorProps = __objRest(_a, ["__scopePopper", "virtualRef"]);
+  const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
+  const ref = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, anchorRef);
+  if (virtualRef) {
+    return null;
+  }
+  const stackProps = __spreadValues({
+    ref: composedRefs
+  }, anchorProps);
+  return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({}, getReferenceProps ? getReferenceProps(stackProps) : stackProps));
+});
+PopperAnchor.displayName = ANCHOR_NAME;
+const CONTENT_NAME = "PopperContent";
+const PopperContentFrame = (0, import_core.styled)(import_stacks.SizableStack, {
+  name: "PopperContent",
+  backgroundColor: "$background",
+  alignItems: "center",
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const PopperContent = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { __scopePopper } = _a, contentProps = __objRest(_a, ["__scopePopper"]);
+  const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
+  const contentRefs = (0, import_compose_refs.useComposedRefs)(floating, forwardedRef);
+  const contents = React.useMemo(() => {
+    return /* @__PURE__ */ React.createElement(PopperContentFrame, __spreadProps(__spreadValues({
+      key: "popper-content-frame",
+      "data-placement": placement,
+      "data-strategy": strategy
+    }, contentProps), {
+      size: contentProps.size ?? size
+    }));
+  }, [placement, strategy, props]);
+  if (!isMounted) {
+    return null;
+  }
+  const frameProps = {
+    ref: contentRefs,
+    x: x || 0,
+    y: y || 0,
+    position: "absolute"
+  };
+  return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
+});
+PopperContent.displayName = CONTENT_NAME;
+const ARROW_NAME = "PopperArrow";
+const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: "PopperArrow",
+  borderColor: "$borderColor",
+  backgroundColor: "$background",
+  position: "absolute",
+  zIndex: 1
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow2(props, forwardedRef) {
+  const _a = props, { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0 } = _a, arrowProps = __objRest(_a, ["__scopePopper", "offset", "size", "borderWidth"]);
+  const context = usePopperContext(ARROW_NAME, __scopePopper);
+  const tokens = (0, import_core.getTokens)();
+  const sizeVal = sizeProp ?? context.size;
+  const sizeValResolved = (0, import_core.getVariableValue)(tokens.size[sizeVal] ?? sizeVal ?? 12);
+  const size = +sizeValResolved;
+  const { placement } = context;
+  const { x, y } = context.arrowStyle || { x: 0, y: 0 };
+  const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
+  const primaryPlacement = placement ? placement.split("-")[0] : "top";
+  let arrowStyle = { x, y, width: size, height: size };
+  if (primaryPlacement) {
+    const oppSide = opposites[primaryPlacement];
+    if (oppSide) {
+      arrowStyle[oppSide] = -size / 2;
+    }
+    if (oppSide === "top" || oppSide === "bottom") {
+      arrowStyle.left = 0;
+    }
+    if (oppSide === "left" || oppSide === "right") {
+      arrowStyle.top = 0;
+    }
+  }
+  (0, import_core.useIsomorphicLayoutEffect)(() => {
+    var _a2;
+    (_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
+  }, [size, context.onArrowSize]);
+  return /* @__PURE__ */ React.createElement(PopperArrowFrame, __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, arrowProps), {
+    ref: refs
+  }), arrowStyle), {
+    rotate: "45deg"
+  }), primaryPlacement === "top" && {
+    borderBottomWidth: borderWidth,
+    borderRightWidth: borderWidth
+  }), primaryPlacement === "bottom" && {
+    borderTopWidth: borderWidth,
+    borderLeftWidth: borderWidth
+  }), primaryPlacement === "left" && {
+    borderTopWidth: borderWidth,
+    borderRightWidth: borderWidth
+  }), primaryPlacement === "right" && {
+    borderBottomWidth: borderWidth,
+    borderLeftWidth: borderWidth
+  }));
+}, "PopperArrow"));
+PopperArrow.displayName = ARROW_NAME;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popper,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  createPopperScope
+});
+//# sourceMappingURL=Popper.js.map

package/dist/cjs/Popper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Popper.tsx"],
+  "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  SizeTokens,\n  StackProps,\n  getTokens,\n  getVariableValue,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStack, SizableStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingResult & {\n  isMounted: boolean\n  anchorRef: any\n  size?: SizeTokens\n  placement?: Placement\n  arrowRef: any\n  onArrowSize?: (val: number) => void\n  arrowStyle?: Partial<Coords> & {\n    centerOffset: number\n  }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n  const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = props\n\n  const [isMounted, setIsMounted] = React.useState(false)\n  useIsomorphicLayoutEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  const anchorRef = React.useRef<any>()\n  const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(allowFlip) : (null as any),\n      arrowEl ? arrow({ element: arrowEl }) : (null as any),\n      arrowSize ? offset(arrowSize) : (null as any),\n    ].filter(Boolean),\n  })\n\n  const { refs, middlewareData } = floating\n\n  const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n  useIsomorphicLayoutEffect(() => {\n    floating.reference(anchorRef.current)\n  }, [anchorRef])\n\n  React.useEffect(() => {\n    if (!refs.reference.current || !refs.floating.current) {\n      return\n    }\n    // Only call this when the floating element is rendered\n    return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n  virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n    const { __scopePopper, virtualRef, ...anchorProps } = props\n    const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n    const ref = React.useRef<PopperAnchorRef>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n    if (virtualRef) {\n      return null\n    }\n    const stackProps = {\n      ref: composedRefs,\n      ...anchorProps,\n    }\n    return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(SizableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n  (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n    const { __scopePopper, ...contentProps } = props\n    const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n      usePopperContext(CONTENT_NAME, __scopePopper)\n    const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n    const contents = React.useMemo(() => {\n      return (\n        <PopperContentFrame\n          key=\"popper-content-frame\"\n          data-placement={placement}\n          data-strategy={strategy}\n          {...contentProps}\n          size={contentProps.size ?? size}\n        />\n      )\n    }, [placement, strategy, props])\n\n    // all poppers hidden on ssr by default\n    if (!isMounted) {\n      return null\n    }\n\n    const frameProps = {\n      ref: contentRefs,\n      x: (x as any) || 0,\n      y: (y as any) || 0,\n      position: 'absolute',\n    }\n\n    // outer frame because we explicitly dont want animation to apply to this\n    return (\n      <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n        {contents}\n      </YStack>\n    )\n  }\n)\n\nPopperContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n  offset?: number\n  size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n  name: 'PopperArrow',\n  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 1,\n  // TODO bug not applying\n  // rotate: '45deg',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(\n  function PopperArrow(props: ScopedProps<PopperArrowProps>, forwardedRef) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(tokens.size[sizeVal as any] ?? sizeVal ?? 12)\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[oppSide] = -size / 2\n      }\n      if (oppSide === 'top' || oppSide === 'bottom') {\n        arrowStyle.left = 0\n      }\n      if (oppSide === 'left' || oppSide === 'right') {\n        arrowStyle.top = 0\n      }\n    }\n\n    // send the Arrow's offset up to Popper\n    useIsomorphicLayoutEffect(() => {\n      context.onArrowSize?.(size)\n    }, [size, context.onArrowSize])\n\n    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        // left={0}\n        // top={0}\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  }\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/floating.js

@@ -0,0 +1,18 @@
+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 floating_exports = {};
+module.exports = __toCommonJS(floating_exports);
+__reExport(floating_exports, require("@floating-ui/react-dom"), module.exports);
+//# sourceMappingURL=floating.js.map

package/dist/cjs/floating.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/floating.tsx"],
+  "sourcesContent": ["export * from '@floating-ui/react-dom'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,mCAAd;",
+  "names": []
+}

package/dist/cjs/floating.native.js

@@ -0,0 +1,18 @@
+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 floating_native_exports = {};
+module.exports = __toCommonJS(floating_native_exports);
+__reExport(floating_native_exports, require("@floating-ui/react-native"), module.exports);
+//# sourceMappingURL=floating.native.js.map

package/dist/cjs/floating.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/floating.native.tsx"],
+  "sourcesContent": ["export * from '@floating-ui/react-native'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAc,sCAAd;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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 = {};
+__export(src_exports, {
+  FloatingOverrideContext: () => import_useFloating.FloatingOverrideContext,
+  UseFloatingFn: () => import_useFloating.UseFloatingFn
+});
+module.exports = __toCommonJS(src_exports);
+var import_useFloating = require("./useFloating");
+__reExport(src_exports, require("./Popper"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingOverrideContext,
+  UseFloatingFn
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export { FloatingOverrideContext, UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuD;AACvD,wBAAc,qBADd;",
+  "names": []
+}

package/dist/cjs/useFloating.js

@@ -0,0 +1,41 @@
+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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFloating_exports = {};
+__export(useFloating_exports, {
+  FloatingOverrideContext: () => FloatingOverrideContext,
+  useFloating: () => useFloating
+});
+module.exports = __toCommonJS(useFloating_exports);
+var import_react = require("react");
+var Floating = __toESM(require("./floating"));
+const FloatingOverrideContext = (0, import_react.createContext)(null);
+const useFloating = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = (0, import_react.useContext)(FloatingOverrideContext);
+  return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
+}, "useFloating");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloatingOverrideContext,
+  useFloating
+});
+//# sourceMappingURL=useFloating.js.map

package/dist/cjs/useFloating.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useFloating.tsx"],
+  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingResult = ReturnType<UseFloatingFn> & {\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingResult => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAE1C,eAA0B;AAWnB,MAAM,0BAA0B,gCAAoC,IAAI;AAExE,MAAM,cAAc,wBAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,6BAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C,GAH2B;",
+  "names": []
+}

package/dist/esm/Popper.js

@@ -0,0 +1,193 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getTokens,
+  getVariableValue,
+  styled,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { SizableStack, YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { arrow, autoUpdate, flip, offset, shift } from "./floating";
+import { useFloating } from "./useFloating";
+const POPPER_NAME = "Popper";
+const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
+const createPopperScope = createScope;
+const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+const Popper = /* @__PURE__ */ __name((props) => {
+  const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
+  const [isMounted, setIsMounted] = React.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const anchorRef = React.useRef();
+  const [arrowEl, setArrow] = React.useState(null);
+  const [arrowSize, setArrowSize] = React.useState(0);
+  const arrowRef = React.useRef();
+  const floating = useFloating({
+    placement,
+    middleware: [
+      stayInFrame ? shift(stayInFrame) : null,
+      allowFlip ? flip(allowFlip) : null,
+      arrowEl ? arrow({ element: arrowEl }) : null,
+      arrowSize ? offset(arrowSize) : null
+    ].filter(Boolean)
+  });
+  const { refs, middlewareData } = floating;
+  const composedArrowRefs = useComposedRefs(arrowRef, setArrow);
+  useIsomorphicLayoutEffect(() => {
+    floating.reference(anchorRef.current);
+  }, [anchorRef]);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
+  }, [refs.floating.current, refs.reference.current]);
+  const arrowStyle = React.useMemo(() => {
+    return middlewareData.arrow;
+  }, [JSON.stringify(middlewareData.arrow || {})]);
+  return /* @__PURE__ */ React.createElement(PopperProvider, {
+    scope: __scopePopper,
+    anchorRef,
+    size,
+    arrowRef: composedArrowRefs,
+    arrowStyle,
+    onArrowSize: setArrowSize,
+    isMounted,
+    ...floating
+  }, children);
+}, "Popper");
+Popper.displayName = POPPER_NAME;
+const ANCHOR_NAME = "PopperAnchor";
+const PopperAnchor = React.forwardRef((props, forwardedRef) => {
+  const { __scopePopper, virtualRef, ...anchorProps } = props;
+  const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
+  if (virtualRef) {
+    return null;
+  }
+  const stackProps = {
+    ref: composedRefs,
+    ...anchorProps
+  };
+  return /* @__PURE__ */ React.createElement(YStack, {
+    ...getReferenceProps ? getReferenceProps(stackProps) : stackProps
+  });
+});
+PopperAnchor.displayName = ANCHOR_NAME;
+const CONTENT_NAME = "PopperContent";
+const PopperContentFrame = styled(SizableStack, {
+  name: "PopperContent",
+  backgroundColor: "$background",
+  alignItems: "center",
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const PopperContent = React.forwardRef((props, forwardedRef) => {
+  const { __scopePopper, ...contentProps } = props;
+  const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
+  const contentRefs = useComposedRefs(floating, forwardedRef);
+  const contents = React.useMemo(() => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(PopperContentFrame, {
+      key: "popper-content-frame",
+      "data-placement": placement,
+      "data-strategy": strategy,
+      ...contentProps,
+      size: (_a = contentProps.size) != null ? _a : size
+    });
+  }, [placement, strategy, props]);
+  if (!isMounted) {
+    return null;
+  }
+  const frameProps = {
+    ref: contentRefs,
+    x: x || 0,
+    y: y || 0,
+    position: "absolute"
+  };
+  return /* @__PURE__ */ React.createElement(YStack, {
+    ...getFloatingProps ? getFloatingProps(frameProps) : frameProps
+  }, contents);
+});
+PopperContent.displayName = CONTENT_NAME;
+const ARROW_NAME = "PopperArrow";
+const PopperArrowFrame = styled(YStack, {
+  name: "PopperArrow",
+  borderColor: "$borderColor",
+  backgroundColor: "$background",
+  position: "absolute",
+  zIndex: 1
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow2(props, forwardedRef) {
+  var _a, _b;
+  const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
+  const context = usePopperContext(ARROW_NAME, __scopePopper);
+  const tokens = getTokens();
+  const sizeVal = sizeProp != null ? sizeProp : context.size;
+  const sizeValResolved = getVariableValue((_b = (_a = tokens.size[sizeVal]) != null ? _a : sizeVal) != null ? _b : 12);
+  const size = +sizeValResolved;
+  const { placement } = context;
+  const { x, y } = context.arrowStyle || { x: 0, y: 0 };
+  const refs = useComposedRefs(context.arrowRef, forwardedRef);
+  const primaryPlacement = placement ? placement.split("-")[0] : "top";
+  let arrowStyle = { x, y, width: size, height: size };
+  if (primaryPlacement) {
+    const oppSide = opposites[primaryPlacement];
+    if (oppSide) {
+      arrowStyle[oppSide] = -size / 2;
+    }
+    if (oppSide === "top" || oppSide === "bottom") {
+      arrowStyle.left = 0;
+    }
+    if (oppSide === "left" || oppSide === "right") {
+      arrowStyle.top = 0;
+    }
+  }
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    (_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
+  }, [size, context.onArrowSize]);
+  return /* @__PURE__ */ React.createElement(PopperArrowFrame, {
+    ...arrowProps,
+    ref: refs,
+    ...arrowStyle,
+    rotate: "45deg",
+    ...primaryPlacement === "top" && {
+      borderBottomWidth: borderWidth,
+      borderRightWidth: borderWidth
+    },
+    ...primaryPlacement === "bottom" && {
+      borderTopWidth: borderWidth,
+      borderLeftWidth: borderWidth
+    },
+    ...primaryPlacement === "left" && {
+      borderTopWidth: borderWidth,
+      borderRightWidth: borderWidth
+    },
+    ...primaryPlacement === "right" && {
+      borderBottomWidth: borderWidth,
+      borderLeftWidth: borderWidth
+    }
+  });
+}, "PopperArrow"));
+PopperArrow.displayName = ARROW_NAME;
+export {
+  Popper,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  createPopperScope
+};
+//# sourceMappingURL=Popper.js.map

package/dist/esm/Popper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Popper.tsx"],
+  "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  SizeTokens,\n  StackProps,\n  getTokens,\n  getVariableValue,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStack, SizableStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingResult & {\n  isMounted: boolean\n  anchorRef: any\n  size?: SizeTokens\n  placement?: Placement\n  arrowRef: any\n  onArrowSize?: (val: number) => void\n  arrowStyle?: Partial<Coords> & {\n    centerOffset: number\n  }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n  const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = props\n\n  const [isMounted, setIsMounted] = React.useState(false)\n  useIsomorphicLayoutEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  const anchorRef = React.useRef<any>()\n  const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(allowFlip) : (null as any),\n      arrowEl ? arrow({ element: arrowEl }) : (null as any),\n      arrowSize ? offset(arrowSize) : (null as any),\n    ].filter(Boolean),\n  })\n\n  const { refs, middlewareData } = floating\n\n  const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n  useIsomorphicLayoutEffect(() => {\n    floating.reference(anchorRef.current)\n  }, [anchorRef])\n\n  React.useEffect(() => {\n    if (!refs.reference.current || !refs.floating.current) {\n      return\n    }\n    // Only call this when the floating element is rendered\n    return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n  virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n    const { __scopePopper, virtualRef, ...anchorProps } = props\n    const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n    const ref = React.useRef<PopperAnchorRef>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n    if (virtualRef) {\n      return null\n    }\n    const stackProps = {\n      ref: composedRefs,\n      ...anchorProps,\n    }\n    return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(SizableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n  (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n    const { __scopePopper, ...contentProps } = props\n    const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n      usePopperContext(CONTENT_NAME, __scopePopper)\n    const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n    const contents = React.useMemo(() => {\n      return (\n        <PopperContentFrame\n          key=\"popper-content-frame\"\n          data-placement={placement}\n          data-strategy={strategy}\n          {...contentProps}\n          size={contentProps.size ?? size}\n        />\n      )\n    }, [placement, strategy, props])\n\n    // all poppers hidden on ssr by default\n    if (!isMounted) {\n      return null\n    }\n\n    const frameProps = {\n      ref: contentRefs,\n      x: (x as any) || 0,\n      y: (y as any) || 0,\n      position: 'absolute',\n    }\n\n    // outer frame because we explicitly dont want animation to apply to this\n    return (\n      <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n        {contents}\n      </YStack>\n    )\n  }\n)\n\nPopperContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n  offset?: number\n  size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n  name: 'PopperArrow',\n  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 1,\n  // TODO bug not applying\n  // rotate: '45deg',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(\n  function PopperArrow(props: ScopedProps<PopperArrowProps>, forwardedRef) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(tokens.size[sizeVal as any] ?? sizeVal ?? 12)\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[oppSide] = -size / 2\n      }\n      if (oppSide === 'top' || oppSide === 'bottom') {\n        arrowStyle.left = 0\n      }\n      if (oppSide === 'left' || oppSide === 'right') {\n        arrowStyle.top = 0\n      }\n    }\n\n    // send the Arrow's offset up to Popper\n    useIsomorphicLayoutEffect(() => {\n      context.onArrowSize?.(size)\n    }, [size, context.onArrowSize])\n\n    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        // left={0}\n        // top={0}\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  }\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/floating.js

@@ -0,0 +1,2 @@
+export * from "@floating-ui/react-dom";
+//# sourceMappingURL=floating.js.map

package/dist/esm/floating.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/floating.tsx"],
+  "sourcesContent": ["export * from '@floating-ui/react-dom'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/floating.native.js

@@ -0,0 +1,2 @@
+export * from "@floating-ui/react-native";
+//# sourceMappingURL=floating.native.js.map

package/dist/esm/floating.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/floating.native.tsx"],
+  "sourcesContent": ["export * from '@floating-ui/react-native'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import { FloatingOverrideContext, UseFloatingFn } from "./useFloating";
+export * from "./Popper";
+export {
+  FloatingOverrideContext,
+  UseFloatingFn
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export { FloatingOverrideContext, UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
+  "mappings": "AAAA;AACA;",
+  "names": []
+}

package/dist/esm/useFloating.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createContext, useContext } from "react";
+import * as Floating from "./floating";
+const FloatingOverrideContext = createContext(null);
+const useFloating = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = useContext(FloatingOverrideContext);
+  return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
+}, "useFloating");
+export {
+  FloatingOverrideContext,
+  useFloating
+};
+//# sourceMappingURL=useFloating.js.map

package/dist/esm/useFloating.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useFloating.tsx"],
+  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingResult = ReturnType<UseFloatingFn> & {\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingResult => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
+  "mappings": ";;AAAA;AAEA;AAWO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,wBAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C,GAH2B;",
+  "names": []
+}

package/dist/jsx/Popper.js

@@ -0,0 +1,164 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getTokens,
+  getVariableValue,
+  styled,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { SizableStack, YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { arrow, autoUpdate, flip, offset, shift } from "./floating";
+import { useFloating } from "./useFloating";
+const POPPER_NAME = "Popper";
+const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
+const createPopperScope = createScope;
+const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+const Popper = /* @__PURE__ */ __name((props) => {
+  const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
+  const [isMounted, setIsMounted] = React.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const anchorRef = React.useRef();
+  const [arrowEl, setArrow] = React.useState(null);
+  const [arrowSize, setArrowSize] = React.useState(0);
+  const arrowRef = React.useRef();
+  const floating = useFloating({
+    placement,
+    middleware: [
+      stayInFrame ? shift(stayInFrame) : null,
+      allowFlip ? flip(allowFlip) : null,
+      arrowEl ? arrow({ element: arrowEl }) : null,
+      arrowSize ? offset(arrowSize) : null
+    ].filter(Boolean)
+  });
+  const { refs, middlewareData } = floating;
+  const composedArrowRefs = useComposedRefs(arrowRef, setArrow);
+  useIsomorphicLayoutEffect(() => {
+    floating.reference(anchorRef.current);
+  }, [anchorRef]);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
+  }, [refs.floating.current, refs.reference.current]);
+  const arrowStyle = React.useMemo(() => {
+    return middlewareData.arrow;
+  }, [JSON.stringify(middlewareData.arrow || {})]);
+  return <PopperProvider scope={__scopePopper} anchorRef={anchorRef} size={size} arrowRef={composedArrowRefs} arrowStyle={arrowStyle} onArrowSize={setArrowSize} isMounted={isMounted} {...floating}>{children}</PopperProvider>;
+}, "Popper");
+Popper.displayName = POPPER_NAME;
+const ANCHOR_NAME = "PopperAnchor";
+const PopperAnchor = React.forwardRef((props, forwardedRef) => {
+  const { __scopePopper, virtualRef, ...anchorProps } = props;
+  const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
+  if (virtualRef) {
+    return null;
+  }
+  const stackProps = {
+    ref: composedRefs,
+    ...anchorProps
+  };
+  return <YStack {...getReferenceProps ? getReferenceProps(stackProps) : stackProps} />;
+});
+PopperAnchor.displayName = ANCHOR_NAME;
+const CONTENT_NAME = "PopperContent";
+const PopperContentFrame = styled(SizableStack, {
+  name: "PopperContent",
+  backgroundColor: "$background",
+  alignItems: "center",
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const PopperContent = React.forwardRef((props, forwardedRef) => {
+  const { __scopePopper, ...contentProps } = props;
+  const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
+  const contentRefs = useComposedRefs(floating, forwardedRef);
+  const contents = React.useMemo(() => {
+    var _a;
+    return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} {...contentProps} size={(_a = contentProps.size) != null ? _a : size} />;
+  }, [placement, strategy, props]);
+  if (!isMounted) {
+    return null;
+  }
+  const frameProps = {
+    ref: contentRefs,
+    x: x || 0,
+    y: y || 0,
+    position: "absolute"
+  };
+  return <YStack {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}>{contents}</YStack>;
+});
+PopperContent.displayName = CONTENT_NAME;
+const ARROW_NAME = "PopperArrow";
+const PopperArrowFrame = styled(YStack, {
+  name: "PopperArrow",
+  borderColor: "$borderColor",
+  backgroundColor: "$background",
+  position: "absolute",
+  zIndex: 1
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow2(props, forwardedRef) {
+  var _a, _b;
+  const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
+  const context = usePopperContext(ARROW_NAME, __scopePopper);
+  const tokens = getTokens();
+  const sizeVal = sizeProp != null ? sizeProp : context.size;
+  const sizeValResolved = getVariableValue((_b = (_a = tokens.size[sizeVal]) != null ? _a : sizeVal) != null ? _b : 12);
+  const size = +sizeValResolved;
+  const { placement } = context;
+  const { x, y } = context.arrowStyle || { x: 0, y: 0 };
+  const refs = useComposedRefs(context.arrowRef, forwardedRef);
+  const primaryPlacement = placement ? placement.split("-")[0] : "top";
+  let arrowStyle = { x, y, width: size, height: size };
+  if (primaryPlacement) {
+    const oppSide = opposites[primaryPlacement];
+    if (oppSide) {
+      arrowStyle[oppSide] = -size / 2;
+    }
+    if (oppSide === "top" || oppSide === "bottom") {
+      arrowStyle.left = 0;
+    }
+    if (oppSide === "left" || oppSide === "right") {
+      arrowStyle.top = 0;
+    }
+  }
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    (_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
+  }, [size, context.onArrowSize]);
+  return <PopperArrowFrame {...arrowProps} ref={refs} {...arrowStyle} rotate="45deg" {...primaryPlacement === "top" && {
+    borderBottomWidth: borderWidth,
+    borderRightWidth: borderWidth
+  }} {...primaryPlacement === "bottom" && {
+    borderTopWidth: borderWidth,
+    borderLeftWidth: borderWidth
+  }} {...primaryPlacement === "left" && {
+    borderTopWidth: borderWidth,
+    borderRightWidth: borderWidth
+  }} {...primaryPlacement === "right" && {
+    borderBottomWidth: borderWidth,
+    borderLeftWidth: borderWidth
+  }} />;
+}, "PopperArrow"));
+PopperArrow.displayName = ARROW_NAME;
+export {
+  Popper,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  createPopperScope
+};

package/dist/jsx/floating.js

@@ -0,0 +1 @@
+export * from "@floating-ui/react-dom";

package/dist/jsx/floating.native.js

@@ -0,0 +1 @@
+export * from "@floating-ui/react-native";

package/dist/jsx/index.js

@@ -0,0 +1,6 @@
+import { FloatingOverrideContext, UseFloatingFn } from "./useFloating";
+export * from "./Popper";
+export {
+  FloatingOverrideContext,
+  UseFloatingFn
+};

package/dist/jsx/useFloating.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createContext, useContext } from "react";
+import * as Floating from "./floating";
+const FloatingOverrideContext = createContext(null);
+const useFloating = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = useContext(FloatingOverrideContext);
+  return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
+}, "useFloating");
+export {
+  FloatingOverrideContext,
+  useFloating
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tamagui/popper",
+  "version": "1.0.0-beta.10",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "typings": "types",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "0.7.0",
+    "@floating-ui/react-native": "^0.7.0",
+    "@tamagui/compose-refs": "^1.0.0-beta.10",
+    "@tamagui/core": "^1.0.0-beta.10",
+    "@tamagui/create-context": "^1.0.0-beta.10",
+    "@tamagui/stacks": "^1.0.0-beta.10",
+    "@tamagui/use-controllable-state": "^1.0.0-beta.10"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.0-beta.10",
+    "@types/react-native": "^0.67.3",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/Popper.d.ts

@@ -0,0 +1,94 @@
+import { SizeTokens } from '@tamagui/core';
+import { SizableStackProps, YStackProps } from '@tamagui/stacks';
+import * as React from 'react';
+import { View } from 'react-native';
+import { Placement, flip, shift } from './floating';
+declare type ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never;
+declare type FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never;
+export declare const createPopperScope: import("@tamagui/create-context").CreateScope;
+export declare type PopperProps = {
+    size?: SizeTokens;
+    children?: React.ReactNode;
+    placement?: Placement;
+    stayInFrame?: ShiftProps;
+    allowFlip?: FlipProps;
+};
+export declare const Popper: React.FC<PopperProps>;
+declare type PopperAnchorRef = HTMLElement | View;
+export declare type PopperAnchorProps = YStackProps & {
+    virtualRef?: React.RefObject<any>;
+};
+export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}>> & {
+    virtualRef?: React.RefObject<any> | undefined;
+} & React.RefAttributes<PopperAnchorRef>>;
+declare type PopperContentElement = HTMLElement | View;
+export declare type PopperContentProps = SizableStackProps;
+export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}, "size" | "focusable" | "fontFamily" | "disabled" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    bordered?: boolean | undefined;
+    size?: SizeTokens | undefined;
+    disabled?: boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}, "size" | "focusable" | "fontFamily" | "disabled" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    bordered?: boolean | undefined;
+    size?: SizeTokens | undefined;
+    disabled?: boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}, "size" | "focusable" | "fontFamily" | "disabled" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    bordered?: boolean | undefined;
+    size?: SizeTokens | undefined;
+    disabled?: boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}>> & React.RefAttributes<PopperContentElement>>;
+declare type PopperArrowElement = HTMLElement | View;
+export declare type PopperArrowProps = YStackProps & {
+    offset?: number;
+    size?: SizeTokens;
+};
+export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+    fullscreen?: boolean | undefined;
+    elevation?: SizeTokens | undefined;
+}>> & {
+    offset?: number | undefined;
+    size?: SizeTokens | undefined;
+} & React.RefAttributes<PopperArrowElement>>;
+export {};
+//# sourceMappingURL=Popper.d.ts.map

package/types/Popper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAMX,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAgB,iBAAiB,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACtF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAU,SAAS,EAAqB,IAAI,EAAU,KAAK,EAAE,MAAM,YAAY,CAAA;AAGtF,aAAK,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACnF,aAAK,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAWjF,eAAO,MAAM,iBAAiB,+CAAc,CAAA;AAe5C,oBAAY,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,CAAA;AAUD,aAAK,eAAe,GAAG,WAAW,GAAG,IAAI,CAAA;AAEzC,oBAAY,iBAAiB,GAAG,WAAW,GAAG;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;yCAexB,CAAA;AAUD,aAAK,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE9C,oBAAY,kBAAkB,GAAG,iBAAiB,CAAA;AAYlD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAsCzB,CAAA;AAUD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE5C,oBAAY,gBAAgB,GAAG,WAAW,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAmBD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CA4DvB,CAAA"}

package/types/floating.d.ts

@@ -0,0 +1,2 @@
+export * from '@floating-ui/react-dom';
+//# sourceMappingURL=floating.d.ts.map

package/types/floating.d.ts.map

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

package/types/floating.native.d.ts

@@ -0,0 +1,2 @@
+export * from '@floating-ui/react-native';
+//# sourceMappingURL=floating.native.d.ts.map

package/types/floating.native.d.ts.map

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

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export { FloatingOverrideContext, UseFloatingFn } from './useFloating';
+export * from './Popper';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACtE,cAAc,UAAU,CAAA"}

package/types/useFloating.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as Floating from './floating';
+export declare type UseFloatingFn = typeof Floating.useFloating;
+declare type UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never;
+export declare type UseFloatingResult = ReturnType<UseFloatingFn> & {
+    getFloatingProps?: (props: {
+        ref: any;
+        [key: string]: any;
+    }) => any;
+    getReferenceProps?: (props: {
+        ref: any;
+        [key: string]: any;
+    }) => any;
+};
+export declare const FloatingOverrideContext: import("react").Context<typeof Floating.useFloating | null>;
+export declare const useFloating: (props: UseFloatingProps) => UseFloatingResult;
+export {};
+//# sourceMappingURL=useFloating.d.ts.map

package/types/useFloating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloating.d.ts","sourceRoot":"","sources":["../src/useFloating.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAA;AAEtC,oBAAY,aAAa,GAAG,OAAO,QAAQ,CAAC,WAAW,CAAA;AAEvD,aAAK,gBAAgB,GAAG,aAAa,SAAS,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK,CAAA;AAEzF,oBAAY,iBAAiB,GAAG,UAAU,CAAC,aAAa,CAAC,GAAG;IAC1D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;IACnE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,uBAAuB,6DAA4C,CAAA;AAEhF,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,iBAGrD,CAAA"}

package/types/useFloating.native.d.ts

@@ -0,0 +1,2 @@
+export * from '@floating-ui/react-native';
+//# sourceMappingURL=useFloating.native.d.ts.map

package/types/useFloating.native.d.ts.map

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

package/types/useFloating.web.d.ts

@@ -0,0 +1,2 @@
+export * from '@floating-ui/react-dom';
+//# sourceMappingURL=useFloating.web.d.ts.map

package/types/useFloating.web.d.ts.map

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