blend-native 0.0.1-beta.0

package/lib/module/primitives/pressFeedback.js

@@ -0,0 +1,48 @@
+"use strict";
+
+/**
+ * Press feedback is platform-idiomatic, not uniform.
+ *
+ * Web scales the surface by `0.99`, and that reads correctly on iOS where a
+ * subtle depress is the convention. Android users expect a **ripple**, and a
+ * scale transform there looks like a bug. Applying both would double the
+ * feedback.
+ *
+ * The decision lives here — a leaf module with no `react-native` value import
+ * — so it is unit-testable outside a renderer, the same split as
+ * `theme/breakpoint.ts`, `primitives/touchTarget.ts` and the shadow handling
+ * in `adapters/surfaceStyle.ts`. `Pressable` passes the real `Platform.OS`.
+ */
+
+/**
+ * Ripple colour used when neither the caller nor the active-state token
+ * supplies one. Low-alpha black is Android's own default for light surfaces.
+ */
+export const DEFAULT_RIPPLE_COLOR = 'rgba(0, 0, 0, 0.12)';
+export function resolvePressFeedback(platform, options = {}) {
+  const {
+    rippleColor,
+    activeBackgroundColor,
+    rippleBorderless = false,
+    pressedScale = 0.99
+  } = options;
+  if (platform === 'android') {
+    return {
+      androidRipple: {
+        color: rippleColor ?? activeBackgroundColor ?? DEFAULT_RIPPLE_COLOR,
+        borderless: rippleBorderless
+      },
+      // The ripple is the feedback; scaling as well would double it.
+      pressedTransform: {}
+    };
+  }
+  return {
+    androidRipple: undefined,
+    pressedTransform: {
+      transform: [{
+        scale: pressedScale
+      }]
+    }
+  };
+}
+//# sourceMappingURL=pressFeedback.js.map

package/lib/module/primitives/pressFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_RIPPLE_COLOR","resolvePressFeedback","platform","options","rippleColor","activeBackgroundColor","rippleBorderless","pressedScale","androidRipple","color","borderless","pressedTransform","undefined","transform","scale"],"sourceRoot":"../../../src","sources":["primitives/pressFeedback.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAqBA;AACA;AACA;AACA;AACA,OAAO,MAAMA,oBAAoB,GAAG,qBAAqB;AAEzD,OAAO,SAASC,oBAAoBA,CAChCC,QAA+B,EAC/BC,OAOC,GAAG,CAAC,CAAC,EACO;EACb,MAAM;IACFC,WAAW;IACXC,qBAAqB;IACrBC,gBAAgB,GAAG,KAAK;IACxBC,YAAY,GAAG;EACnB,CAAC,GAAGJ,OAAO;EAEX,IAAID,QAAQ,KAAK,SAAS,EAAE;IACxB,OAAO;MACHM,aAAa,EAAE;QACXC,KAAK,EACDL,WAAW,IACXC,qBAAqB,IACrBL,oBAAoB;QACxBU,UAAU,EAAEJ;MAChB,CAAC;MACD;MACAK,gBAAgB,EAAE,CAAC;IACvB,CAAC;EACL;EAEA,OAAO;IACHH,aAAa,EAAEI,SAAS;IACxBD,gBAAgB,EAAE;MAAEE,SAAS,EAAE,CAAC;QAAEC,KAAK,EAAEP;MAAa,CAAC;IAAE;EAC7D,CAAC;AACL","ignoreList":[]}

package/lib/module/primitives/textStyle.js

@@ -0,0 +1,23 @@
+"use strict";
+
+/**
+ * Shared text-style resolution for `Text` and `PrimitiveInput`.
+ *
+ * Leaf module with only a type import from `react-native`, so it stays
+ * vitest-testable — the `theme/breakpoint.ts` pattern.
+ */
+
+/**
+ * Resolve a CSS font-weight value to a RN-compatible `TextStyle['fontWeight']`.
+ * RN accepts `'normal' | 'bold' | '100'..'900'` (as string or number).
+ */
+export function resolveFontWeight(w) {
+  if (w === undefined) return undefined;
+  if (typeof w === 'number') return String(w);
+  // Token values are numeric strings like `"500"`.
+  if (/^\d+$/.test(w)) return w;
+  const lower = w.toLowerCase();
+  if (lower === 'normal' || lower === 'bold') return lower;
+  return undefined;
+}
+//# sourceMappingURL=textStyle.js.map

package/lib/module/primitives/textStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveFontWeight","w","undefined","String","test","lower","toLowerCase"],"sourceRoot":"../../../src","sources":["primitives/textStyle.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASA,iBAAiBA,CAC7BC,CAA8B,EACP;EACvB,IAAIA,CAAC,KAAKC,SAAS,EAAE,OAAOA,SAAS;EACrC,IAAI,OAAOD,CAAC,KAAK,QAAQ,EAAE,OAAOE,MAAM,CAACF,CAAC,CAAC;EAC3C;EACA,IAAI,OAAO,CAACG,IAAI,CAACH,CAAC,CAAC,EAAE,OAAOA,CAAC;EAC7B,MAAMI,KAAK,GAAGJ,CAAC,CAACK,WAAW,CAAC,CAAC;EAC7B,IAAID,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,MAAM,EAAE,OAAOA,KAAK;EACxD,OAAOH,SAAS;AACpB","ignoreList":[]}

package/lib/module/primitives/tintSlot.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { cloneElement, isValidElement } from 'react';
+
+/**
+ * Icon tinting.
+ *
+ * Kept in its own leaf module — importing nothing from `react-native` — so it
+ * stays unit-testable outside a renderer, the same split as
+ * `theme/breakpoint.ts` and `primitives/touchTarget.ts`.
+ */
+
+/**
+ * Props an icon element may accept for tinting.
+ *
+ * `color` is the channel every mainstream RN icon library understands —
+ * `lucide-react-native`, `phosphor-react-native`, `react-native-vector-icons`
+ * — and is what `Slot` sets.
+ *
+ * `fill` is deliberately NOT set. Lucide renders stroke-based artwork with
+ * `fill: "none"`, and its `Icon` spreads unknown props over both the root
+ * `Svg` and every child path *after* those defaults, so supplying a `fill`
+ * overrides `"none"` and floods the glyph solid — an outlined X becomes a
+ * filled block. Artwork that genuinely needs a fill should set it itself.
+ */
+
+/**
+ * Apply a tint to an icon element.
+ *
+ * Only sets `color`, and only when the element has not set it explicitly —
+ * an icon rendered as `<Icon color="red" />` keeps red. Non-element children
+ * (a bare string, a number, `null`) are returned untouched.
+ */
+export function tintSlot(node, color) {
+  if (!color || ! /*#__PURE__*/isValidElement(node)) return node;
+  const element = node;
+  if (element.props.color !== undefined) return node;
+  return /*#__PURE__*/cloneElement(element, {
+    color
+  });
+}
+//# sourceMappingURL=tintSlot.js.map

package/lib/module/primitives/tintSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","isValidElement","tintSlot","node","color","element","props","undefined"],"sourceRoot":"../../../src","sources":["primitives/tintSlot.ts"],"mappings":";;AAAA,SAASA,YAAY,EAAEC,cAAc,QAAQ,OAAO;;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CACpBC,IAAe,EACfC,KAAyB,EAChB;EACT,IAAI,CAACA,KAAK,IAAI,eAACH,cAAc,CAACE,IAAI,CAAC,EAAE,OAAOA,IAAI;EAEhD,MAAME,OAAO,GAAGF,IAAmC;EACnD,IAAIE,OAAO,CAACC,KAAK,CAACF,KAAK,KAAKG,SAAS,EAAE,OAAOJ,IAAI;EAElD,oBAAOH,YAAY,CAACK,OAAO,EAAE;IAAED;EAAM,CAAC,CAAC;AAC3C","ignoreList":[]}

package/lib/module/primitives/touchTarget.js

@@ -0,0 +1,58 @@
+"use strict";
+
+/**
+ * Minimum tap-target policy.
+ *
+ * Kept in its own leaf module — importing nothing from `react-native` — so it
+ * stays unit-testable outside a renderer. (RN's entrypoint ships Flow syntax
+ * that non-Metro bundlers cannot parse, so any module that value-imports it is
+ * unusable from a plain Node test runner. Same split as `theme/breakpoint.ts`.)
+ */
+
+/** Inset applied to each edge of the touch region. */
+
+/**
+ * Apple's Human Interface Guidelines minimum tappable size, in points. Also
+ * clears Material's 48dp target once RN's density conversion is applied.
+ */
+export const MIN_TOUCH_TARGET = 44;
+
+/**
+ * Slop needed to bring a rendered control up to the minimum tap target.
+ *
+ * Design-system controls are frequently smaller than the guideline by intent —
+ * an `xs` Tag is 20pt tall — so the fix is to widen the *touch* region rather
+ * than the control. Returns `undefined` when the control already complies (or
+ * when the minimum is disabled with `0`), so no `hitSlop` prop is emitted.
+ *
+ * ```
+ * resolveHitSlop(120, 48) -> undefined          // already compliant
+ * resolveHitSlop(60, 20)  -> { top: 12, bottom: 12, left: 0, right: 0 }
+ * resolveHitSlop(24, 24)  -> { top: 10, bottom: 10, left: 10, right: 10 }
+ * ```
+ */
+export function resolveHitSlop(width, height, minTouchTarget = MIN_TOUCH_TARGET) {
+  if (!minTouchTarget) return undefined;
+  const horizontal = Math.max(0, (minTouchTarget - width) / 2);
+  const vertical = Math.max(0, (minTouchTarget - height) / 2);
+  if (horizontal === 0 && vertical === 0) return undefined;
+  return {
+    top: vertical,
+    bottom: vertical,
+    left: horizontal,
+    right: horizontal
+  };
+}
+
+/**
+ * Whether two slop values are equivalent.
+ *
+ * Lets callers skip a state update when a re-measure produces the same result,
+ * which keeps a control that never needed slop from re-rendering at all.
+ */
+export function sameHitSlop(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.top === b.top && a.bottom === b.bottom && a.left === b.left && a.right === b.right;
+}
+//# sourceMappingURL=touchTarget.js.map

package/lib/module/primitives/touchTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MIN_TOUCH_TARGET","resolveHitSlop","width","height","minTouchTarget","undefined","horizontal","Math","max","vertical","top","bottom","left","right","sameHitSlop","a","b"],"sourceRoot":"../../../src","sources":["primitives/touchTarget.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAQA;AACA;AACA;AACA;AACA,OAAO,MAAMA,gBAAgB,GAAG,EAAE;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAC1BC,KAAa,EACbC,MAAc,EACdC,cAAsB,GAAGJ,gBAAgB,EACtB;EACnB,IAAI,CAACI,cAAc,EAAE,OAAOC,SAAS;EAErC,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE,CAACJ,cAAc,GAAGF,KAAK,IAAI,CAAC,CAAC;EAC5D,MAAMO,QAAQ,GAAGF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE,CAACJ,cAAc,GAAGD,MAAM,IAAI,CAAC,CAAC;EAC3D,IAAIG,UAAU,KAAK,CAAC,IAAIG,QAAQ,KAAK,CAAC,EAAE,OAAOJ,SAAS;EAExD,OAAO;IACHK,GAAG,EAAED,QAAQ;IACbE,MAAM,EAAEF,QAAQ;IAChBG,IAAI,EAAEN,UAAU;IAChBO,KAAK,EAAEP;EACX,CAAC;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASQ,WAAWA,CAACC,CAAW,EAAEC,CAAW,EAAW;EAC3D,IAAID,CAAC,KAAKC,CAAC,EAAE,OAAO,IAAI;EACxB,IAAI,CAACD,CAAC,IAAI,CAACC,CAAC,EAAE,OAAO,KAAK;EAC1B,OACID,CAAC,CAACL,GAAG,KAAKM,CAAC,CAACN,GAAG,IACfK,CAAC,CAACJ,MAAM,KAAKK,CAAC,CAACL,MAAM,IACrBI,CAAC,CAACH,IAAI,KAAKI,CAAC,CAACJ,IAAI,IACjBG,CAAC,CAACF,KAAK,KAAKG,CAAC,CAACH,KAAK;AAE3B","ignoreList":[]}

package/lib/module/theme/BlendNativeProvider.js

@@ -0,0 +1,78 @@
+"use strict";
+
+import React, { createContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { BREAKPOINTS, FOUNDATION_THEME, Theme } from '@juspay/blend-design-system/node';
+import { PortalArea } from "../overlay/portal.js";
+import { ToastOutlet } from "../overlay/toast/ToastOutlet.js";
+import { resolveFontFamilies } from "./fonts.js";
+import { resolveThemeSetting, SYSTEM_THEME } from "./systemTheme.js";
+
+/**
+ * Theme context for `blend-native`.
+ *
+ * Replaces the per-component `theme` prop the package shipped with. A prop
+ * meant no app-wide dark mode (every call site had to thread it), no nested
+ * theme scopes, and — most importantly — no `componentTokens` overrides,
+ * which is a first-class feature of web Blend that native consumers simply
+ * did not have.
+ *
+ * Mirrors web's `ThemeProvider` API (`{ theme, componentTokens,
+ * foundationTokens }`) so the two platforms are configured the same way, and
+ * like web it is optional: components fall back to these defaults when no
+ * provider is mounted.
+ *
+ * Two native-only additions:
+ *
+ * - `theme="system"` follows the OS appearance via `useColorScheme`,
+ *   re-rendering when the user flips light/dark. The sentinel is resolved
+ *   *before* the value enters context, so consumers only ever see a concrete
+ *   theme.
+ * - `fontFamily` resolves one font family per role (see `theme/fonts.ts`) —
+ *   RN's replacement for web's CSS font inheritance.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EMPTY_OVERRIDES = {};
+export const DEFAULT_NATIVE_THEME = {
+  theme: Theme.LIGHT,
+  componentTokens: EMPTY_OVERRIDES,
+  foundationTokens: FOUNDATION_THEME,
+  breakpoints: BREAKPOINTS,
+  fontFamily: resolveFontFamilies(FOUNDATION_THEME)
+};
+export const BlendNativeThemeContext = /*#__PURE__*/createContext(DEFAULT_NATIVE_THEME);
+export function BlendNativeProvider({
+  children,
+  theme = Theme.LIGHT,
+  componentTokens = EMPTY_OVERRIDES,
+  foundationTokens = FOUNDATION_THEME,
+  breakpoints = BREAKPOINTS,
+  fontFamily
+}) {
+  // Subscribed unconditionally (hooks must be), but only `theme="system"`
+  // reads it — an explicit theme is unaffected by OS appearance changes.
+  const colorScheme = useColorScheme();
+  const resolvedTheme = resolveThemeSetting(theme, colorScheme);
+
+  // Memoised on the same keys web's `initTokens` uses: objects by
+  // reference (they are module-scope singletons in practice), theme by
+  // value. Keeps the context value stable so a re-render of the provider's
+  // parent does not invalidate every consumer's token memo.
+  const value = useMemo(() => ({
+    theme: resolvedTheme,
+    componentTokens,
+    foundationTokens,
+    breakpoints,
+    fontFamily: resolveFontFamilies(foundationTokens, fontFamily)
+  }), [resolvedTheme, componentTokens, foundationTokens, breakpoints, fontFamily]);
+  return /*#__PURE__*/_jsx(BlendNativeThemeContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsxs(PortalArea, {
+      children: [children, /*#__PURE__*/_jsx(ToastOutlet, {})]
+    })
+  });
+}
+BlendNativeProvider.displayName = 'BlendNativeProvider';
+export { SYSTEM_THEME };
+export default BlendNativeProvider;
+//# sourceMappingURL=BlendNativeProvider.js.map

package/lib/module/theme/BlendNativeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useMemo","useColorScheme","BREAKPOINTS","FOUNDATION_THEME","Theme","PortalArea","ToastOutlet","resolveFontFamilies","resolveThemeSetting","SYSTEM_THEME","jsx","_jsx","jsxs","_jsxs","EMPTY_OVERRIDES","DEFAULT_NATIVE_THEME","theme","LIGHT","componentTokens","foundationTokens","breakpoints","fontFamily","BlendNativeThemeContext","BlendNativeProvider","children","colorScheme","resolvedTheme","value","Provider","displayName"],"sourceRoot":"../../../src","sources":["theme/BlendNativeProvider.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,OAAO,QAAQ,OAAO;AACrD,SAASC,cAAc,QAAQ,cAAc;AAC7C,SACIC,WAAW,EACXC,gBAAgB,EAChBC,KAAK,QAEF,kCAAkC;AAEzC,SAASC,UAAU,QAAQ,sBAAmB;AAC9C,SAASC,WAAW,QAAQ,iCAA8B;AAC1D,SACIC,mBAAmB,QAGhB,YAAS;AAChB,SACIC,mBAAmB,EACnBC,YAAY,QAET,kBAAe;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiCA,MAAMC,eAA8C,GAAG,CAAC,CAAC;AAEzD,OAAO,MAAMC,oBAA2C,GAAG;EACvDC,KAAK,EAAEZ,KAAK,CAACa,KAAK;EAClBC,eAAe,EAAEJ,eAAe;EAChCK,gBAAgB,EAAEhB,gBAAgB;EAClCiB,WAAW,EAAElB,WAAW;EACxBmB,UAAU,EAAEd,mBAAmB,CAACJ,gBAAgB;AACpD,CAAC;AAED,OAAO,MAAMmB,uBAAuB,gBAChCvB,aAAa,CAAwBgB,oBAAoB,CAAC;AA2B9D,OAAO,SAASQ,mBAAmBA,CAAC;EAChCC,QAAQ;EACRR,KAAK,GAAGZ,KAAK,CAACa,KAAK;EACnBC,eAAe,GAAGJ,eAAe;EACjCK,gBAAgB,GAAGhB,gBAAgB;EACnCiB,WAAW,GAAGlB,WAAW;EACzBmB;AACsB,CAAC,EAAE;EACzB;EACA;EACA,MAAMI,WAAW,GAAGxB,cAAc,CAAC,CAAC;EACpC,MAAMyB,aAAa,GAAGlB,mBAAmB,CAACQ,KAAK,EAAES,WAAW,CAAC;;EAE7D;EACA;EACA;EACA;EACA,MAAME,KAAK,GAAG3B,OAAO,CACjB,OAAO;IACHgB,KAAK,EAAEU,aAAa;IACpBR,eAAe;IACfC,gBAAgB;IAChBC,WAAW;IACXC,UAAU,EAAEd,mBAAmB,CAACY,gBAAgB,EAAEE,UAAU;EAChE,CAAC,CAAC,EACF,CACIK,aAAa,EACbR,eAAe,EACfC,gBAAgB,EAChBC,WAAW,EACXC,UAAU,CAElB,CAAC;EAED,oBACIV,IAAA,CAACW,uBAAuB,CAACM,QAAQ;IAACD,KAAK,EAAEA,KAAM;IAAAH,QAAA,eAM3CX,KAAA,CAACR,UAAU;MAAAmB,QAAA,GACNA,QAAQ,eACTb,IAAA,CAACL,WAAW,IAAE,CAAC;IAAA,CACP;EAAC,CACiB,CAAC;AAE3C;AAEAiB,mBAAmB,CAACM,WAAW,GAAG,qBAAqB;AAEvD,SAASpB,YAAY;AAErB,eAAec,mBAAmB","ignoreList":[]}

package/lib/module/theme/breakpoint.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { BREAKPOINTS } from '@juspay/blend-design-system/node';
+
+/**
+ * Pure breakpoint resolution.
+ *
+ * Kept in its own leaf module — importing nothing from `react-native` — so it
+ * stays testable and reusable outside a React render. `useNativeBreakpoint`
+ * layers the `useWindowDimensions` subscription on top.
+ *
+ * (React Native's entrypoint ships Flow syntax that non-Metro bundlers cannot
+ * parse, so any module that value-imports it is unusable from a plain Node
+ * test runner. Splitting the logic out is the same pattern the web package
+ * uses for `shared/datetime/timeCore.ts`.)
+ */
+
+/**
+ * Resolve a viewport width to a Blend breakpoint label.
+ *
+ * Mirrors web's `useBreakPoints` exactly, including its quirk: **only**
+ * 320–1023 maps to `'sm'`; everything else — including widths below 320 —
+ * returns `'lg'`. Reproduced deliberately so a given width resolves to the
+ * same tokens on both platforms.
+ *
+ * Thresholds come from `BREAKPOINTS` in the web package rather than being
+ * duplicated, so retuning them stays a one-line change in one place.
+ */
+export function resolveBreakpoint(width, breakpoints = BREAKPOINTS) {
+  if (width >= breakpoints.sm && width < breakpoints.lg) return 'sm';
+  return 'lg';
+}
+//# sourceMappingURL=breakpoint.js.map

package/lib/module/theme/breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BREAKPOINTS","resolveBreakpoint","width","breakpoints","sm","lg"],"sourceRoot":"../../../src","sources":["theme/breakpoint.ts"],"mappings":";;AAAA,SACIA,WAAW,QAER,kCAAkC;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAC7BC,KAAa,EACbC,WAA2B,GAAGH,WAAW,EACzB;EAChB,IAAIE,KAAK,IAAIC,WAAW,CAACC,EAAE,IAAIF,KAAK,GAAGC,WAAW,CAACE,EAAE,EAAE,OAAO,IAAI;EAClE,OAAO,IAAI;AACf","ignoreList":[]}

package/lib/module/theme/fonts.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { FOUNDATION_THEME } from '@juspay/blend-design-system/node';
+
+/**
+ * Font-family policy.
+ *
+ * Web never applies Blend's font tokens — components inherit whatever face the
+ * host document loads (`fontFamily: 'inherit'` in the primitives), and the
+ * consuming app supplies InterDisplay via `@font-face`. React Native has no
+ * inheritance and no `@font-face`, so the provider is the inheritance
+ * mechanism: it resolves one family per role and `Text` applies it.
+ *
+ * Defaults come from the foundation tokens (`font.family`), so out of the box
+ * native asks for the same faces the design system names. A consumer that has
+ * not loaded those fonts sees the platform fallback (plus a dev warning on
+ * iOS) — load them with `expo-font` or native assets, or opt out:
+ *
+ * - `fontFamily="system"` — platform fonts everywhere, no families applied.
+ * - `fontFamily={{ mono: 'JetBrainsMono' }}` — override one role, keep the
+ *   token defaults for the rest.
+ * - `fontFamily={{ body: null }}` — disable one role only.
+ *
+ * Kept as a leaf module with no `react-native` value import so it stays
+ * testable under plain vitest — the same constraint as `theme/breakpoint.ts`.
+ */
+
+/** One resolved family per role; `null` means "leave the platform font". */
+
+/** What `BlendNativeProvider` accepts for its `fontFamily` prop. */
+
+const ROLES = ['display', 'body', 'heading', 'mono'];
+
+/**
+ * Resolve the provider's `fontFamily` option against the active foundation
+ * tokens. Pure; called once per provider render.
+ */
+export function resolveFontFamilies(foundationTokens = FOUNDATION_THEME, option) {
+  const resolved = {};
+  for (const role of ROLES) {
+    if (option === 'system') {
+      resolved[role] = null;
+      continue;
+    }
+    const override = option?.[role];
+    if (override !== undefined) {
+      resolved[role] = override;
+      continue;
+    }
+    const token = foundationTokens.font?.family?.[role];
+    resolved[role] = token !== undefined ? String(token) : null;
+  }
+  return resolved;
+}
+//# sourceMappingURL=fonts.js.map

package/lib/module/theme/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FOUNDATION_THEME","ROLES","resolveFontFamilies","foundationTokens","option","resolved","role","override","undefined","token","font","family","String"],"sourceRoot":"../../../src","sources":["theme/fonts.ts"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,kCAAkC;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;;AAGA;;AAKA,MAAMC,KAAuB,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;;AAEtE;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAC/BC,gBAAyC,GAAGH,gBAAgB,EAC5DI,MAA+B,EACb;EAClB,MAAMC,QAAQ,GAAG,CAAC,CAAuB;EAEzC,KAAK,MAAMC,IAAI,IAAIL,KAAK,EAAE;IACtB,IAAIG,MAAM,KAAK,QAAQ,EAAE;MACrBC,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI;MACrB;IACJ;IACA,MAAMC,QAAQ,GAAGH,MAAM,GAAGE,IAAI,CAAC;IAC/B,IAAIC,QAAQ,KAAKC,SAAS,EAAE;MACxBH,QAAQ,CAACC,IAAI,CAAC,GAAGC,QAAQ;MACzB;IACJ;IACA,MAAME,KAAK,GAAGN,gBAAgB,CAACO,IAAI,EAAEC,MAAM,GAAGL,IAAI,CAAC;IACnDD,QAAQ,CAACC,IAAI,CAAC,GAAGG,KAAK,KAAKD,SAAS,GAAGI,MAAM,CAACH,KAAK,CAAC,GAAG,IAAI;EAC/D;EAEA,OAAOJ,QAAQ;AACnB","ignoreList":[]}

package/lib/module/theme/nativeTokenRegistry.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import { getAlertV2Tokens, getButtonV2Tokens, getSkeletonTokens, getTagV2Tokens, getTextInputV2Tokens } from '@juspay/blend-design-system/node';
+
+/**
+ * Slot name → token factory.
+ *
+ * **This is the only file to edit when adding a component.** Web needs three
+ * files changed in lockstep for a new token slot (`context/ThemeContext.tsx`
+ * for the type + default, `context/initComponentTokens.ts` for the `??`
+ * fallback, `context/useComponentToken.ts` for the union and `switch` case) —
+ * and missing one throws at runtime. Native collapses that to a single
+ * registry entry, with the slot union derived from the object rather than
+ * hand-maintained alongside it.
+ *
+ * Factories come from `@juspay/blend-design-system/node`, the React-free
+ * entry, so registering one pulls in no UI code.
+ */
+export const NATIVE_TOKEN_REGISTRY = {
+  ALERTV2: getAlertV2Tokens,
+  BUTTONV2: getButtonV2Tokens,
+  SKELETON: getSkeletonTokens,
+  TAGV2: getTagV2Tokens,
+  TEXT_INPUTV2: getTextInputV2Tokens
+};
+
+/** Every component slot native can resolve. Derived, never hand-written. */
+
+/**
+ * A Blend token factory: pure, takes foundation tokens plus a theme, and
+ * returns one token object per breakpoint.
+ */
+
+/** Overrides accepted by `BlendNativeProvider`, keyed by slot. */
+
+export const NATIVE_TOKEN_SLOTS = Object.keys(NATIVE_TOKEN_REGISTRY);
+export function isNativeTokenSlot(value) {
+  return Object.prototype.hasOwnProperty.call(NATIVE_TOKEN_REGISTRY, value);
+}
+//# sourceMappingURL=nativeTokenRegistry.js.map

package/lib/module/theme/nativeTokenRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getAlertV2Tokens","getButtonV2Tokens","getSkeletonTokens","getTagV2Tokens","getTextInputV2Tokens","NATIVE_TOKEN_REGISTRY","ALERTV2","BUTTONV2","SKELETON","TAGV2","TEXT_INPUTV2","NATIVE_TOKEN_SLOTS","Object","keys","isNativeTokenSlot","value","prototype","hasOwnProperty","call"],"sourceRoot":"../../../src","sources":["theme/nativeTokenRegistry.ts"],"mappings":";;AAAA,SAGIA,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,cAAc,EACdC,oBAAoB,QAEjB,kCAAkC;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,OAAO,EAAEN,gBAAgB;EACzBO,QAAQ,EAAEN,iBAAiB;EAC3BO,QAAQ,EAAEN,iBAAiB;EAC3BO,KAAK,EAAEN,cAAc;EACrBO,YAAY,EAAEN;AAClB,CAAU;;AAEV;;AAGA;AACA;AACA;AACA;;AAMA;;AAKA,OAAO,MAAMO,kBAAkB,GAAGC,MAAM,CAACC,IAAI,CACzCR,qBACJ,CAAsB;AAEtB,OAAO,SAASS,iBAAiBA,CAACC,KAAa,EAA4B;EACvE,OAAOH,MAAM,CAACI,SAAS,CAACC,cAAc,CAACC,IAAI,CAACb,qBAAqB,EAAEU,KAAK,CAAC;AAC7E","ignoreList":[]}

package/lib/module/theme/systemTheme.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import { Theme } from '@juspay/blend-design-system/node';
+
+/**
+ * `theme="system"` resolution.
+ *
+ * The provider accepts the sentinel and resolves it against the OS appearance
+ * (`useColorScheme`) before the value enters context, so token resolution and
+ * every consumer below only ever see a concrete theme.
+ *
+ * Kept as a leaf module with no `react-native` value import so the mapping is
+ * testable under plain vitest; the provider owns the `useColorScheme`
+ * subscription.
+ */
+
+/** Pass as `theme` to follow the OS light/dark setting. */
+export const SYSTEM_THEME = 'system';
+/**
+ * Resolve a theme setting to a concrete theme.
+ *
+ * `colorScheme` is `useColorScheme()`'s value. Typed as `string` rather than
+ * a literal union because RN's `ColorSchemeName` has grown values across
+ * versions (`'unspecified'` on some platforms) — anything that is not
+ * `'dark'` resolves light, matching the provider's default.
+ */
+export function resolveThemeSetting(theme, colorScheme) {
+  if (theme !== SYSTEM_THEME) return theme;
+  return colorScheme === 'dark' ? Theme.DARK : Theme.LIGHT;
+}
+//# sourceMappingURL=systemTheme.js.map

package/lib/module/theme/systemTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Theme","SYSTEM_THEME","resolveThemeSetting","theme","colorScheme","DARK","LIGHT"],"sourceRoot":"../../../src","sources":["theme/systemTheme.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,kCAAkC;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,YAAY,GAAG,QAAiB;AAI7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAC/BC,KAAyB,EACzBC,WAAsC,EACxB;EACd,IAAID,KAAK,KAAKF,YAAY,EAAE,OAAOE,KAAK;EACxC,OAAOC,WAAW,KAAK,MAAM,GAAGJ,KAAK,CAACK,IAAI,GAAGL,KAAK,CAACM,KAAK;AAC5D","ignoreList":[]}

package/lib/module/theme/useNativeBreakpoint.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { useWindowDimensions } from 'react-native';
+import { BREAKPOINTS } from '@juspay/blend-design-system/node';
+import { resolveBreakpoint } from "./breakpoint.js";
+export { resolveBreakpoint };
+/**
+ * The active breakpoint for the current RN viewport.
+ *
+ * `useWindowDimensions` is RN's equivalent of web's resize listener — it
+ * re-renders on rotation, split-screen, and foldable unfold. The previous
+ * implementation hardcoded `'sm'` on the assumption that native is
+ * phone-only, which silently gave tablets and landscape the wrong tokens.
+ *
+ * The width→label mapping itself lives in `./breakpoint`, which imports
+ * nothing from `react-native` and is therefore unit-testable.
+ */
+export function useNativeBreakpoint(breakpoints = BREAKPOINTS) {
+  const {
+    width
+  } = useWindowDimensions();
+  return resolveBreakpoint(width, breakpoints);
+}
+//# sourceMappingURL=useNativeBreakpoint.js.map

package/lib/module/theme/useNativeBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useWindowDimensions","BREAKPOINTS","resolveBreakpoint","useNativeBreakpoint","breakpoints","width"],"sourceRoot":"../../../src","sources":["theme/useNativeBreakpoint.ts"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SACIC,WAAW,QAER,kCAAkC;AACzC,SAASC,iBAAiB,QAA+B,iBAAc;AAEvE,SAASA,iBAAiB;AAG1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAC/BC,WAA2B,GAAGH,WAAW,EACzB;EAChB,MAAM;IAAEI;EAAM,CAAC,GAAGL,mBAAmB,CAAC,CAAC;EACvC,OAAOE,iBAAiB,CAACG,KAAK,EAAED,WAAW,CAAC;AAChD","ignoreList":[]}

package/lib/module/theme/useNativeTokens.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import { useContext, useMemo } from 'react';
+import { mergeTokenTree } from '@juspay/blend-design-system/node';
+import { BlendNativeThemeContext } from "./BlendNativeProvider.js";
+import { NATIVE_TOKEN_REGISTRY, NATIVE_TOKEN_SLOTS, isNativeTokenSlot } from "./nativeTokenRegistry.js";
+import { useNativeBreakpoint } from "./useNativeBreakpoint.js";
+
+/**
+ * Resolve one component's tokens, flattened for the active breakpoint and
+ * with any provider overrides deep-merged in.
+ *
+ * The native counterpart of web's `useResponsiveTokens('BUTTONV2')`, and
+ * deliberately the same call shape so component code reads the same on both
+ * platforms.
+ *
+ * Note `mergeTokenTree` is imported from the web package rather than
+ * reimplemented — override semantics (plain objects merge key-by-key,
+ * everything else replaces, `undefined` is skipped) must not drift between
+ * web and native.
+ */
+
+/** Resolution cache, keyed the way web's `initTokens` keys its own. */
+const resolutionCache = new WeakMap();
+function resolveResponsive(slot, foundationTokens, theme, overrides) {
+  let byKey = resolutionCache.get(foundationTokens);
+  if (!byKey) {
+    byKey = new Map();
+    resolutionCache.set(foundationTokens, byKey);
+  }
+
+  // Overrides participate in the key by identity — they are expected to be
+  // a stable object from the consumer, exactly as on web.
+  const hasOverride = overrides !== undefined;
+  const cacheKey = `${slot}::${String(theme)}::${hasOverride ? 'o' : '-'}`;
+  if (!hasOverride) {
+    const cached = byKey.get(cacheKey);
+    if (cached) return cached;
+  }
+  const factory = NATIVE_TOKEN_REGISTRY[slot];
+  const responsive = factory(foundationTokens, theme);
+  const resolved = hasOverride ? mergeTokenTree(responsive, overrides) : responsive;
+  if (!hasOverride) byKey.set(cacheKey, resolved);
+  return resolved;
+}
+export function useNativeTokens(slot) {
+  const {
+    theme,
+    componentTokens,
+    foundationTokens,
+    breakpoints
+  } = useContext(BlendNativeThemeContext);
+  // The provider's `breakpoints` must reach the resolver — calling
+  // `useNativeBreakpoint()` bare silently ignores a consumer's override
+  // and resolves against the defaults.
+  const breakpoint = useNativeBreakpoint(breakpoints);
+  if (!isNativeTokenSlot(slot)) {
+    throw new Error(`[blend-native] Unknown component token slot "${slot}". ` + `Known slots: ${NATIVE_TOKEN_SLOTS.join(', ')}. ` + `Register new components in src/theme/nativeTokenRegistry.ts.`);
+  }
+  const overrides = componentTokens?.[slot];
+  return useMemo(() => {
+    const responsive = resolveResponsive(slot, foundationTokens, theme, overrides);
+    return responsive[breakpoint];
+  }, [slot, foundationTokens, theme, overrides, breakpoint]);
+}
+export default useNativeTokens;
+//# sourceMappingURL=useNativeTokens.js.map

package/lib/module/theme/useNativeTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","useMemo","mergeTokenTree","BlendNativeThemeContext","NATIVE_TOKEN_REGISTRY","NATIVE_TOKEN_SLOTS","isNativeTokenSlot","useNativeBreakpoint","resolutionCache","WeakMap","resolveResponsive","slot","foundationTokens","theme","overrides","byKey","get","Map","set","hasOverride","undefined","cacheKey","String","cached","factory","responsive","resolved","useNativeTokens","componentTokens","breakpoints","breakpoint","Error","join"],"sourceRoot":"../../../src","sources":["theme/useNativeTokens.ts"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAGIC,cAAc,QAEX,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAAuB;AAC/D,SACIC,qBAAqB,EACrBC,kBAAkB,EAClBC,iBAAiB,QAGd,0BAAuB;AAC9B,SAASC,mBAAmB,QAAQ,0BAAuB;;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,MAAMC,eAAe,GAAG,IAAIC,OAAO,CAGjC,CAAC;AAEH,SAASC,iBAAiBA,CACtBC,IAAqB,EACrBC,gBAAyC,EACzCC,KAAqB,EACrBC,SAAkB,EACmB;EACrC,IAAIC,KAAK,GAAGP,eAAe,CAACQ,GAAG,CAACJ,gBAAgB,CAAC;EACjD,IAAI,CAACG,KAAK,EAAE;IACRA,KAAK,GAAG,IAAIE,GAAG,CAAC,CAAC;IACjBT,eAAe,CAACU,GAAG,CAACN,gBAAgB,EAAEG,KAAK,CAAC;EAChD;;EAEA;EACA;EACA,MAAMI,WAAW,GAAGL,SAAS,KAAKM,SAAS;EAC3C,MAAMC,QAAQ,GAAG,GAAGV,IAAI,KAAKW,MAAM,CAACT,KAAK,CAAC,KAAKM,WAAW,GAAG,GAAG,GAAG,GAAG,EAAE;EAExE,IAAI,CAACA,WAAW,EAAE;IACd,MAAMI,MAAM,GAAGR,KAAK,CAACC,GAAG,CAACK,QAAQ,CAAC;IAClC,IAAIE,MAAM,EAAE,OAAOA,MAAM;EAC7B;EAEA,MAAMC,OAAO,GAAGpB,qBAAqB,CAACO,IAAI,CAA0B;EACpE,MAAMc,UAAU,GAAGD,OAAO,CAACZ,gBAAgB,EAAEC,KAAK,CAAC;EACnD,MAAMa,QAAQ,GACVP,WAAW,GAAGjB,cAAc,CAACuB,UAAU,EAAEX,SAAS,CAAC,GAAGW,UAChB;EAE1C,IAAI,CAACN,WAAW,EAAEJ,KAAK,CAACG,GAAG,CAACG,QAAQ,EAAEK,QAAQ,CAAC;EAC/C,OAAOA,QAAQ;AACnB;AAEA,OAAO,SAASC,eAAeA,CAAIhB,IAAqB,EAAK;EACzD,MAAM;IAAEE,KAAK;IAAEe,eAAe;IAAEhB,gBAAgB;IAAEiB;EAAY,CAAC,GAC3D7B,UAAU,CAACG,uBAAuB,CAAC;EACvC;EACA;EACA;EACA,MAAM2B,UAAU,GAAGvB,mBAAmB,CAACsB,WAAW,CAAC;EAEnD,IAAI,CAACvB,iBAAiB,CAACK,IAAI,CAAC,EAAE;IAC1B,MAAM,IAAIoB,KAAK,CACX,gDAAgDpB,IAAI,KAAK,GACrD,gBAAgBN,kBAAkB,CAAC2B,IAAI,CAAC,IAAI,CAAC,IAAI,GACjD,8DACR,CAAC;EACL;EAEA,MAAMlB,SAAS,GAAGc,eAAe,GAAGjB,IAAI,CAAC;EAEzC,OAAOV,OAAO,CAAC,MAAM;IACjB,MAAMwB,UAAU,GAAGf,iBAAiB,CAChCC,IAAI,EACJC,gBAAgB,EAChBC,KAAK,EACLC,SACJ,CAAC;IACD,OAAOW,UAAU,CAACK,UAAU,CAAC;EACjC,CAAC,EAAE,CAACnB,IAAI,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,SAAS,EAAEgB,UAAU,CAAC,CAAC;AAC9D;AAEA,eAAeH,eAAe","ignoreList":[]}

package/lib/typescript/commonjs/a11y/announcement.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Live-region message construction.
+ *
+ * Kept RN-free so it stays unit-testable outside a renderer — the same split
+ * as `theme/breakpoint.ts` and `primitives/touchTarget.ts`.
+ */
+/**
+ * Compose the sentence a screen reader should announce for a status surface.
+ *
+ * Web relies on `aria-atomic="true"` to have the whole region re-read when any
+ * part changes, so the announcement is heading and description together. iOS
+ * has no live-region concept at all and must be told the exact string, so it
+ * is built here rather than left to the platform.
+ *
+ * Returns `undefined` when there is nothing worth announcing, so callers can
+ * skip the announcement entirely instead of interrupting the user with silence.
+ *
+ * ```
+ * buildAnnouncement('Saved', 'Your changes are live')  -> 'Saved. Your changes are live'
+ * buildAnnouncement('Saved', undefined)                -> 'Saved'
+ * buildAnnouncement(undefined, 'Your changes are live')-> 'Your changes are live'
+ * buildAnnouncement(undefined, undefined)              -> undefined
+ * ```
+ */
+export declare function buildAnnouncement(heading?: string, description?: string): string | undefined;
+//# sourceMappingURL=announcement.d.ts.map

package/lib/typescript/commonjs/a11y/announcement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement.d.ts","sourceRoot":"","sources":["../../../../src/a11y/announcement.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAC7B,OAAO,CAAC,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACrB,MAAM,GAAG,SAAS,CAYpB"}

package/lib/typescript/commonjs/a11y/useLiveRegion.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Announce a status message to assistive tech.
+ *
+ * Web expresses this declaratively with `aria-live` + `aria-atomic`. React
+ * Native splits it across platforms:
+ *
+ * - **Android** understands `accessibilityLiveRegion` on the view itself, so
+ *   callers set that prop directly and this hook stays out of the way.
+ * - **iOS** has no live-region support. The only route is to hand the exact
+ *   string to `announceForAccessibility`, which is what this does.
+ *
+ * Re-announces when the message changes, and skips repeats of the same string
+ * so a parent re-render does not interrupt the user twice with the same text.
+ */
+export declare function useLiveRegionAnnounce(message: string | undefined, enabled?: boolean): void;
+export default useLiveRegionAnnounce;
+//# sourceMappingURL=useLiveRegion.d.ts.map

package/lib/typescript/commonjs/a11y/useLiveRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveRegion.d.ts","sourceRoot":"","sources":["../../../../src/a11y/useLiveRegion.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,OAAO,UAAO,GACf,IAAI,CAaN;AAED,eAAe,qBAAqB,CAAA"}