blend-native 0.0.1-beta.0

package/lib/commonjs/index.js

@@ -0,0 +1,256 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function () {
+    return _index.Alert;
+  }
+});
+Object.defineProperty(exports, "AlertActionPosition", {
+  enumerable: true,
+  get: function () {
+    return _node.AlertV2ActionPosition;
+  }
+});
+Object.defineProperty(exports, "AlertSubType", {
+  enumerable: true,
+  get: function () {
+    return _node.AlertV2SubType;
+  }
+});
+Object.defineProperty(exports, "AlertType", {
+  enumerable: true,
+  get: function () {
+    return _node.AlertV2Type;
+  }
+});
+Object.defineProperty(exports, "BlendNativeProvider", {
+  enumerable: true,
+  get: function () {
+    return _BlendNativeProvider.BlendNativeProvider;
+  }
+});
+Object.defineProperty(exports, "BlendNativeThemeContext", {
+  enumerable: true,
+  get: function () {
+    return _BlendNativeProvider.BlendNativeThemeContext;
+  }
+});
+Object.defineProperty(exports, "Block", {
+  enumerable: true,
+  get: function () {
+    return _Block.Block;
+  }
+});
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.BottomSheet;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _index2.Button;
+  }
+});
+Object.defineProperty(exports, "ButtonSize", {
+  enumerable: true,
+  get: function () {
+    return _node.ButtonV2Size;
+  }
+});
+Object.defineProperty(exports, "ButtonState", {
+  enumerable: true,
+  get: function () {
+    return _node.ButtonV2State;
+  }
+});
+Object.defineProperty(exports, "ButtonSubType", {
+  enumerable: true,
+  get: function () {
+    return _node.ButtonV2SubType;
+  }
+});
+Object.defineProperty(exports, "ButtonType", {
+  enumerable: true,
+  get: function () {
+    return _node.ButtonV2Type;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_NATIVE_THEME", {
+  enumerable: true,
+  get: function () {
+    return _BlendNativeProvider.DEFAULT_NATIVE_THEME;
+  }
+});
+Object.defineProperty(exports, "InputSize", {
+  enumerable: true,
+  get: function () {
+    return _node.InputSizeV2;
+  }
+});
+Object.defineProperty(exports, "InputState", {
+  enumerable: true,
+  get: function () {
+    return _node.InputStateV2;
+  }
+});
+Object.defineProperty(exports, "MIN_TOUCH_TARGET", {
+  enumerable: true,
+  get: function () {
+    return _touchTarget.MIN_TOUCH_TARGET;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _portal.Portal;
+  }
+});
+Object.defineProperty(exports, "Pressable", {
+  enumerable: true,
+  get: function () {
+    return _Pressable.Pressable;
+  }
+});
+Object.defineProperty(exports, "PrimitiveInput", {
+  enumerable: true,
+  get: function () {
+    return _PrimitiveInput.PrimitiveInput;
+  }
+});
+Object.defineProperty(exports, "SYSTEM_THEME", {
+  enumerable: true,
+  get: function () {
+    return _systemTheme.SYSTEM_THEME;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function () {
+    return _Separator.Separator;
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _index5.Skeleton;
+  }
+});
+Object.defineProperty(exports, "Slot", {
+  enumerable: true,
+  get: function () {
+    return _Slot.Slot;
+  }
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function () {
+    return _index3.Tag;
+  }
+});
+Object.defineProperty(exports, "TagColor", {
+  enumerable: true,
+  get: function () {
+    return _node.TagV2Color;
+  }
+});
+Object.defineProperty(exports, "TagSize", {
+  enumerable: true,
+  get: function () {
+    return _node.TagV2Size;
+  }
+});
+Object.defineProperty(exports, "TagSubType", {
+  enumerable: true,
+  get: function () {
+    return _node.TagV2SubType;
+  }
+});
+Object.defineProperty(exports, "TagType", {
+  enumerable: true,
+  get: function () {
+    return _node.TagV2Type;
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _Text.Text;
+  }
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _index4.TextInput;
+  }
+});
+Object.defineProperty(exports, "Theme", {
+  enumerable: true,
+  get: function () {
+    return _node.Theme;
+  }
+});
+Object.defineProperty(exports, "dismissToast", {
+  enumerable: true,
+  get: function () {
+    return _toastStore.dismissToast;
+  }
+});
+Object.defineProperty(exports, "showToast", {
+  enumerable: true,
+  get: function () {
+    return _toastStore.showToast;
+  }
+});
+Object.defineProperty(exports, "useLiveRegionAnnounce", {
+  enumerable: true,
+  get: function () {
+    return _useLiveRegion.useLiveRegionAnnounce;
+  }
+});
+Object.defineProperty(exports, "useNativeBreakpoint", {
+  enumerable: true,
+  get: function () {
+    return _useNativeBreakpoint.useNativeBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useNativeTokens", {
+  enumerable: true,
+  get: function () {
+    return _useNativeTokens.useNativeTokens;
+  }
+});
+Object.defineProperty(exports, "useReduceMotion", {
+  enumerable: true,
+  get: function () {
+    return _useReduceMotion.useReduceMotion;
+  }
+});
+var _index = require("./components/Alert/index.js");
+var _index2 = require("./components/Button/index.js");
+var _index3 = require("./components/Tag/index.js");
+var _index4 = require("./components/TextInput/index.js");
+var _index5 = require("./components/Skeleton/index.js");
+var _BlendNativeProvider = require("./theme/BlendNativeProvider.js");
+var _systemTheme = require("./theme/systemTheme.js");
+var _useNativeTokens = require("./theme/useNativeTokens.js");
+var _useNativeBreakpoint = require("./theme/useNativeBreakpoint.js");
+var _Block = require("./primitives/Block.js");
+var _Pressable = require("./primitives/Pressable.js");
+var _Text = require("./primitives/Text.js");
+var _Slot = require("./primitives/Slot.js");
+var _Separator = require("./primitives/Separator.js");
+var _PrimitiveInput = require("./primitives/PrimitiveInput.js");
+var _touchTarget = require("./primitives/touchTarget.js");
+var _portal = require("./overlay/portal.js");
+var _useReduceMotion = require("./motion/useReduceMotion.js");
+var _BottomSheet = require("./overlay/sheet/BottomSheet.js");
+var _toastStore = require("./overlay/toast/toastStore.js");
+var _useLiveRegion = require("./a11y/useLiveRegion.js");
+var _node = require("@juspay/blend-design-system/node");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_index","require","_index2","_index3","_index4","_index5","_BlendNativeProvider","_systemTheme","_useNativeTokens","_useNativeBreakpoint","_Block","_Pressable","_Text","_Slot","_Separator","_PrimitiveInput","_touchTarget","_portal","_useReduceMotion","_BottomSheet","_toastStore","_useLiveRegion","_node"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAJ,OAAA;AAcA,IAAAK,oBAAA,GAAAL,OAAA;AAWA,IAAAM,YAAA,GAAAN,OAAA;AAQA,IAAAO,gBAAA,GAAAP,OAAA;AACA,IAAAQ,oBAAA,GAAAR,OAAA;AASA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,UAAA,GAAAV,OAAA;AACA,IAAAW,KAAA,GAAAX,OAAA;AACA,IAAAY,KAAA,GAAAZ,OAAA;AACA,IAAAa,UAAA,GAAAb,OAAA;AACA,IAAAc,eAAA,GAAAd,OAAA;AAkBA,IAAAe,YAAA,GAAAf,OAAA;AAOA,IAAAgB,OAAA,GAAAhB,OAAA;AAEA,IAAAiB,gBAAA,GAAAjB,OAAA;AAIA,IAAAkB,YAAA,GAAAlB,OAAA;AAKA,IAAAmB,WAAA,GAAAnB,OAAA;AAcA,IAAAoB,cAAA,GAAApB,OAAA;AAEA,IAAAqB,KAAA,GAAArB,OAAA","ignoreList":[]}

package/lib/commonjs/motion/motion.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MOTION_PRESETS = exports.MOTION_EASING = exports.MOTION_DURATION = void 0;
+exports.reducedMotionVariant = reducedMotionVariant;
+/**
+ * Motion tokens and presets.
+ *
+ * Web Blend has no motion token layer — durations and curves are scattered
+ * inline (`transition: 'transform 0.15s ease-in-out'`, the MenuV2/ModalV2
+ * animation modules). Native centralises them here so every overlay and
+ * state change moves the same way.
+ *
+ * Pure data, deliberately independent of any animation library: consumers
+ * (the Reanimated-based overlay components) translate a preset into
+ * `withTiming`/`withSpring` calls. Keeping the descriptions library-free
+ * means this module stays vitest-testable and the animation dependency
+ * stays contained to the components that actually animate.
+ */
+
+/** Milliseconds. `fast` = state feedback, `normal` = overlays, `slow` = sheets. */
+const MOTION_DURATION = exports.MOTION_DURATION = {
+  fast: 150,
+  normal: 250,
+  slow: 400
+};
+
+/** Cubic-bezier control points, CSS order `[x1, y1, x2, y2]`. */
+const MOTION_EASING = exports.MOTION_EASING = {
+  /** Both ends eased — in-place state changes. */
+  standard: [0.4, 0, 0.2, 1],
+  /** Fast start, soft landing — content entering the screen. */
+  decelerate: [0, 0, 0.2, 1],
+  /** Soft start, fast exit — content leaving the screen. */
+  accelerate: [0.4, 0, 1, 1]
+};
+
+/** Transform/opacity state at one end of a transition. */
+
+/**
+ * The presets the overlay components share.
+ *
+ * - `fade` — tooltips, backdrops.
+ * - `scaleFade` — menus, popovers, selects (anchored surfaces growing from
+ *   their anchor).
+ * - `slideUp` — toasts and sheets entering from the bottom edge (the
+ *   translate distance is a starting offset; sheets override it with their
+ *   own measured height).
+ * - `slideDown` — banners entering from the top edge.
+ */
+const MOTION_PRESETS = exports.MOTION_PRESETS = {
+  fade: {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    },
+    duration: MOTION_DURATION.fast,
+    easing: 'decelerate',
+    exitDuration: MOTION_DURATION.fast,
+    exitEasing: 'accelerate'
+  },
+  scaleFade: {
+    from: {
+      opacity: 0,
+      scale: 0.95
+    },
+    to: {
+      opacity: 1,
+      scale: 1
+    },
+    duration: MOTION_DURATION.normal,
+    easing: 'decelerate',
+    exitDuration: MOTION_DURATION.fast,
+    exitEasing: 'accelerate'
+  },
+  slideUp: {
+    from: {
+      opacity: 0,
+      translateY: 16
+    },
+    to: {
+      opacity: 1,
+      translateY: 0
+    },
+    duration: MOTION_DURATION.normal,
+    easing: 'decelerate',
+    exitDuration: MOTION_DURATION.fast,
+    exitEasing: 'accelerate'
+  },
+  slideDown: {
+    from: {
+      opacity: 0,
+      translateY: -16
+    },
+    to: {
+      opacity: 1,
+      translateY: 0
+    },
+    duration: MOTION_DURATION.normal,
+    easing: 'decelerate',
+    exitDuration: MOTION_DURATION.fast,
+    exitEasing: 'accelerate'
+  }
+};
+/**
+ * A preset with motion removed — what every animation collapses to when the
+ * user has OS reduce-motion enabled (see `useReduceMotion`): a fast opacity
+ * change, no movement, no scaling.
+ */
+function reducedMotionVariant(preset) {
+  return {
+    from: {
+      opacity: preset.from.opacity ?? 0
+    },
+    to: {
+      opacity: preset.to.opacity ?? 1
+    },
+    duration: MOTION_DURATION.fast,
+    easing: 'standard',
+    exitDuration: MOTION_DURATION.fast,
+    exitEasing: 'standard'
+  };
+}
+//# sourceMappingURL=motion.js.map

package/lib/commonjs/motion/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MOTION_DURATION","exports","fast","normal","slow","MOTION_EASING","standard","decelerate","accelerate","MOTION_PRESETS","fade","from","opacity","to","duration","easing","exitDuration","exitEasing","scaleFade","scale","slideUp","translateY","slideDown","reducedMotionVariant","preset"],"sourceRoot":"../../../src","sources":["motion/motion.ts"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACO,MAAMA,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3BE,IAAI,EAAE,GAAG;EACTC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACV,CAAU;;AAEV;AACO,MAAMC,aAAa,GAAAJ,OAAA,CAAAI,aAAA,GAAG;EACzB;EACAC,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;EAC1B;EACAC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;EAC1B;EACAC,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAC7B,CAAU;;AAIV;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAAc,GAAAR,OAAA,CAAAQ,cAAA,GAAG;EAC1BC,IAAI,EAAE;IACFC,IAAI,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAC;IACpBC,EAAE,EAAE;MAAED,OAAO,EAAE;IAAE,CAAC;IAClBE,QAAQ,EAAEd,eAAe,CAACE,IAAI;IAC9Ba,MAAM,EAAE,YAAY;IACpBC,YAAY,EAAEhB,eAAe,CAACE,IAAI;IAClCe,UAAU,EAAE;EAChB,CAAC;EACDC,SAAS,EAAE;IACPP,IAAI,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEO,KAAK,EAAE;IAAK,CAAC;IACjCN,EAAE,EAAE;MAAED,OAAO,EAAE,CAAC;MAAEO,KAAK,EAAE;IAAE,CAAC;IAC5BL,QAAQ,EAAEd,eAAe,CAACG,MAAM;IAChCY,MAAM,EAAE,YAAY;IACpBC,YAAY,EAAEhB,eAAe,CAACE,IAAI;IAClCe,UAAU,EAAE;EAChB,CAAC;EACDG,OAAO,EAAE;IACLT,IAAI,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAES,UAAU,EAAE;IAAG,CAAC;IACpCR,EAAE,EAAE;MAAED,OAAO,EAAE,CAAC;MAAES,UAAU,EAAE;IAAE,CAAC;IACjCP,QAAQ,EAAEd,eAAe,CAACG,MAAM;IAChCY,MAAM,EAAE,YAAY;IACpBC,YAAY,EAAEhB,eAAe,CAACE,IAAI;IAClCe,UAAU,EAAE;EAChB,CAAC;EACDK,SAAS,EAAE;IACPX,IAAI,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAES,UAAU,EAAE,CAAC;IAAG,CAAC;IACrCR,EAAE,EAAE;MAAED,OAAO,EAAE,CAAC;MAAES,UAAU,EAAE;IAAE,CAAC;IACjCP,QAAQ,EAAEd,eAAe,CAACG,MAAM;IAChCY,MAAM,EAAE,YAAY;IACpBC,YAAY,EAAEhB,eAAe,CAACE,IAAI;IAClCe,UAAU,EAAE;EAChB;AACJ,CAAiD;AAIjD;AACA;AACA;AACA;AACA;AACO,SAASM,oBAAoBA,CAACC,MAAoB,EAAgB;EACrE,OAAO;IACHb,IAAI,EAAE;MAAEC,OAAO,EAAEY,MAAM,CAACb,IAAI,CAACC,OAAO,IAAI;IAAE,CAAC;IAC3CC,EAAE,EAAE;MAAED,OAAO,EAAEY,MAAM,CAACX,EAAE,CAACD,OAAO,IAAI;IAAE,CAAC;IACvCE,QAAQ,EAAEd,eAAe,CAACE,IAAI;IAC9Ba,MAAM,EAAE,UAAU;IAClBC,YAAY,EAAEhB,eAAe,CAACE,IAAI;IAClCe,UAAU,EAAE;EAChB,CAAC;AACL","ignoreList":[]}

package/lib/commonjs/motion/useReduceMotion.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useReduceMotion = useReduceMotion;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Whether the OS reduce-motion accessibility setting is on.
+ *
+ * The native counterpart of web's `prefers-reduced-motion` media query.
+ * Overlay components pair this with `reducedMotionVariant` so every
+ * animation collapses to a quick fade when the user asked for less motion.
+ *
+ * Starts `false` and corrects itself once the async platform query
+ * resolves — the safe default, since acting on it only ever *removes*
+ * motion. Subscribes to changes for the lifetime of the component.
+ */
+function useReduceMotion() {
+  const [reduceMotion, setReduceMotion] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
+      if (mounted) setReduceMotion(enabled);
+    });
+    const subscription = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+    return () => {
+      mounted = false;
+      subscription.remove();
+    };
+  }, []);
+  return reduceMotion;
+}
+var _default = exports.default = useReduceMotion;
+//# sourceMappingURL=useReduceMotion.js.map

package/lib/commonjs/motion/useReduceMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","useReduceMotion","reduceMotion","setReduceMotion","useState","useEffect","mounted","AccessibilityInfo","isReduceMotionEnabled","then","enabled","subscription","addEventListener","remove","_default","exports","default"],"sourceRoot":"../../../src","sources":["motion/useReduceMotion.ts"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,eAAeA,CAAA,EAAY;EACvC,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEvD,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIC,OAAO,GAAG,IAAI;IAClBC,8BAAiB,CAACC,qBAAqB,CAAC,CAAC,CAACC,IAAI,CAAEC,OAAO,IAAK;MACxD,IAAIJ,OAAO,EAAEH,eAAe,CAACO,OAAO,CAAC;IACzC,CAAC,CAAC;IACF,MAAMC,YAAY,GAAGJ,8BAAiB,CAACK,gBAAgB,CACnD,qBAAqB,EACrBT,eACJ,CAAC;IACD,OAAO,MAAM;MACTG,OAAO,GAAG,KAAK;MACfK,YAAY,CAACE,MAAM,CAAC,CAAC;IACzB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOX,YAAY;AACvB;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcf,eAAe","ignoreList":[]}

package/lib/commonjs/overlay/portal.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Portal = Portal;
+exports.PortalArea = PortalArea;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Portal — layered rendering above the app's content.
+ *
+ * The native replacement for web's `createPortal`/Radix `Portal`: overlay
+ * components (modal, menu, popover, tooltip, snackbar) mount their surface
+ * through `<Portal>` and it renders in an absolute-fill layer that
+ * `BlendNativeProvider` places *after* the app's children, so it paints on
+ * top regardless of where in the tree the overlay was opened.
+ *
+ * Layers stack in mount order — the overlay opened last paints on top,
+ * which matches how web portals appended to `document.body` behave.
+ *
+ * The provider must sit at a screen-filling root (the usual place for a
+ * theme provider): the layers are absolutely positioned siblings of the
+ * app's children, so they cover exactly what the provider's parent covers.
+ *
+ * With no provider mounted, `<Portal>` renders its children in place — an
+ * overlay degrades to inline rendering rather than disappearing.
+ */
+
+const PortalRegistryContext = /*#__PURE__*/(0, _react.createContext)(null);
+let warnedNoProvider = false;
+/** Renders `children` into the provider's overlay layer. */
+function Portal({
+  children
+}) {
+  const registry = (0, _react.useContext)(PortalRegistryContext);
+  const key = (0, _react.useId)();
+  (0, _react.useEffect)(() => {
+    if (!registry) return;
+    registry.mount(key, children);
+    return () => registry.unmount(key);
+  }, [registry, key, children]);
+
+  // In an effect, not during render — warning inline would be a
+  // render-phase side effect (breaks under StrictMode double-render, the
+  // same class of bug Pressable's parse memoisation fixed).
+  (0, _react.useEffect)(() => {
+    if (registry || warnedNoProvider) return;
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      warnedNoProvider = true;
+      console.warn('[blend-native] <Portal> used without BlendNativeProvider — ' + 'rendering inline. Overlays will not layer above the app.');
+    }
+  }, [registry]);
+  if (!registry) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+  return null;
+}
+Portal.displayName = 'Portal';
+
+/**
+ * Internal — wraps the app's children with the portal registry and renders
+ * the mounted layers after them. Used by `BlendNativeProvider`; not public.
+ */
+function PortalArea({
+  children
+}) {
+  const [portals, setPortals] = (0, _react.useState)([]);
+  const mount = (0, _react.useCallback)((key, node) => {
+    setPortals(current => {
+      const existing = current.findIndex(p => p.key === key);
+      if (existing === -1) return [...current, {
+        key,
+        node
+      }];
+      // Re-mount with new content keeps its layer position.
+      const next = current.slice();
+      next[existing] = {
+        key,
+        node
+      };
+      return next;
+    });
+  }, []);
+  const unmount = (0, _react.useCallback)(key => {
+    setPortals(current => current.filter(p => p.key !== key));
+  }, []);
+  const registry = (0, _react.useMemo)(() => ({
+    mount,
+    unmount
+  }), [mount, unmount]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PortalRegistryContext.Provider, {
+    value: registry,
+    children: [children, portals.map(({
+      key,
+      node
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFill
+      // Touches fall through empty layer area to the app;
+      // the overlay's own views still receive theirs.
+      ,
+      pointerEvents: "box-none",
+      children: node
+    }, key))]
+  });
+}
+PortalArea.displayName = 'PortalArea';
+//# sourceMappingURL=portal.js.map

package/lib/commonjs/overlay/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PortalRegistryContext","createContext","warnedNoProvider","Portal","children","registry","useContext","key","useId","useEffect","mount","unmount","__DEV__","console","warn","jsx","Fragment","displayName","PortalArea","portals","setPortals","useState","useCallback","node","current","existing","findIndex","p","next","slice","filter","useMemo","jsxs","Provider","value","map","View","style","StyleSheet","absoluteFill","pointerEvents"],"sourceRoot":"../../../src","sources":["overlay/portal.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/overlay/positioning.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeAnchoredPosition = computeAnchoredPosition;
+/**
+ * Anchored-overlay positioning.
+ *
+ * The native replacement for what Radix/floating-ui do on web: place a
+ * floating box (menu, popover, tooltip, select list) against an anchor
+ * rect, flipping to the opposite side when space runs out and clamping
+ * into the viewport.
+ *
+ * Pure and RN-free — rects in, a position out — so the whole placement
+ * matrix is unit-testable under vitest. `useAnchoredPosition` layers the
+ * measurement plumbing on top.
+ */
+
+/** Which side of the anchor the content prefers. */
+
+/** Alignment along the anchor's other axis. */
+
+const opposite = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+
+/** Space between the anchor and the viewport edge on one side. */
+function spaceOn(side, anchor, viewport, offset, padding) {
+  switch (side) {
+    case 'top':
+      return anchor.y - offset - padding;
+    case 'bottom':
+      return viewport.height - (anchor.y + anchor.height) - offset - padding;
+    case 'left':
+      return anchor.x - offset - padding;
+    case 'right':
+      return viewport.width - (anchor.x + anchor.width) - offset - padding;
+  }
+}
+const clamp = (value, min, max) =>
+// A viewport smaller than the padding produces min > max; the lower
+// bound wins so content pins to the leading edge instead of NaN-ing.
+Math.max(min, Math.min(value, Math.max(min, max)));
+
+/**
+ * Compute where to place floating content against an anchor.
+ *
+ * - **Flip**: when the preferred side cannot fit the content but the
+ *   opposite side can fit more of it, the placement flips.
+ * - **Clamp**: the cross-axis position shifts to keep the content inside
+ *   the viewport padding (matching floating-ui's `shift`).
+ * - **Cap**: `maxHeight`/`maxWidth` report the space actually available on
+ *   the resolved side, so scrollable content can cap itself.
+ */
+function computeAnchoredPosition(input) {
+  const {
+    anchor,
+    content,
+    viewport,
+    placement: preferred = 'bottom',
+    alignment = 'start',
+    offset = 8,
+    viewportPadding = 8
+  } = input;
+  const preferredSpace = spaceOn(preferred, anchor, viewport, offset, viewportPadding);
+  const isVertical = preferred === 'top' || preferred === 'bottom';
+  const needed = isVertical ? content.height : content.width;
+  let placement = preferred;
+  if (needed > preferredSpace) {
+    const other = spaceOn(opposite[preferred], anchor, viewport, offset, viewportPadding);
+    if (other > preferredSpace) placement = opposite[preferred];
+  }
+
+  // ---- Main axis ------------------------------------------------------
+  let x = 0;
+  let y = 0;
+  switch (placement) {
+    case 'top':
+      y = anchor.y - offset - content.height;
+      break;
+    case 'bottom':
+      y = anchor.y + anchor.height + offset;
+      break;
+    case 'left':
+      x = anchor.x - offset - content.width;
+      break;
+    case 'right':
+      x = anchor.x + anchor.width + offset;
+      break;
+  }
+
+  // ---- Cross axis -----------------------------------------------------
+  const alignAlong = (anchorStart, anchorLength, contentLength) => {
+    if (alignment === 'start') return anchorStart;
+    if (alignment === 'end') return anchorStart + anchorLength - contentLength;
+    return anchorStart + (anchorLength - contentLength) / 2;
+  };
+  if (placement === 'top' || placement === 'bottom') {
+    x = alignAlong(anchor.x, anchor.width, content.width);
+  } else {
+    y = alignAlong(anchor.y, anchor.height, content.height);
+  }
+
+  // ---- Keep inside the viewport ---------------------------------------
+  x = clamp(x, viewportPadding, viewport.width - viewportPadding - content.width);
+  y = clamp(y, viewportPadding, viewport.height - viewportPadding - content.height);
+  const available = spaceOn(placement, anchor, viewport, offset, viewportPadding);
+  const maxHeight = placement === 'top' || placement === 'bottom' ? Math.max(0, available) : Math.max(0, viewport.height - 2 * viewportPadding);
+  const maxWidth = placement === 'left' || placement === 'right' ? Math.max(0, available) : Math.max(0, viewport.width - 2 * viewportPadding);
+  return {
+    x,
+    y,
+    placement,
+    maxHeight,
+    maxWidth
+  };
+}
+//# sourceMappingURL=positioning.js.map