blend-native 0.0.1-beta.0 → 0.0.1-beta.2

package/lib/typescript/module/overlay/useAnchoredPosition.d.ts

@@ -1,17 +1,26 @@
 import { type LayoutChangeEvent, type View } from 'react-native';
-import { type Alignment, type AnchoredPosition, type Placement } from './positioning.js';
+import { type Alignment, type AnchoredPosition, type Placement, type Rect } from './positioning.js';
 /**
  * Measurement plumbing for `computeAnchoredPosition`.
  *
  * Wires the three inputs the pure engine needs: the anchor's window rect
- * (`measureInWindow`, taken when the overlay opens), the floating content's
- * size (its `onLayout`), and the window size (re-renders on rotation).
+ * (`measureInWindow`), the floating content's size (its `onLayout`), and
+ * the window size — reduced by the soft keyboard's height so content flips
+ * and clamps above it.
+ *
+ * Re-measure philosophy: the overlay components render a touch-capturing
+ * backdrop while open, so nothing can scroll under an open overlay — the
+ * anchor only moves on rotation or when the keyboard changes the window.
+ * The anchor is measured when `open` flips true and re-measured on
+ * window-dimension or keyboard changes while open; `remeasure()` covers
+ * anything exotic. There is no RN ResizeObserver, and polling would burn
+ * battery for a case the backdrop already prevents.
  *
  * ```tsx
- * const { anchorRef, measureAnchor, onContentLayout, position } =
- *     useAnchoredPosition({ placement: 'bottom' })
+ * const { anchorRef, onContentLayout, position, arrow } =
+ *     useAnchoredPosition({ open, placement: 'bottom', arrowSize: 6 })
  *
- * <Pressable ref={anchorRef} onPress={() => { measureAnchor(); open() }} />
+ * <Pressable ref={anchorRef} onPress={open} />
  * <Portal>
  *   <View
  *     onLayout={onContentLayout}
@@ -25,16 +34,34 @@ import { type Alignment, type AnchoredPosition, type Placement } from './positio
  *
  * `position` is `null` until both measurements land — render the content
  * transparent (not unmounted, or `onLayout` never fires) until then.
+ * `arrow` is `null` unless `arrowSize` is set; it is the arrow's center in
+ * content-local coordinates (`computeArrowPosition`).
  */
-export declare function useAnchoredPosition(options?: {
+export declare function useAnchoredPosition(options: {
+    /** Whether the overlay is presented — measurement follows this. */
+    open: boolean;
     placement?: Placement;
     alignment?: Alignment;
     offset?: number;
     viewportPadding?: number;
+    /** Edge length of the arrow square; enables the `arrow` result. */
+    arrowSize?: number;
+    /**
+     * Arrow-led cross axis (the tooltip contract): the tip sits at the
+     * `alignment` spot on the content and the content moves so the tip
+     * lands on the anchor's center. Requires `arrowSize`.
+     */
+    arrowAligned?: boolean;
 }): {
     anchorRef: import("react").RefObject<View | null>;
-    measureAnchor: () => void;
     onContentLayout: (event: LayoutChangeEvent) => void;
     position: AnchoredPosition | null;
+    arrow: {
+        x: number;
+        y: number;
+    } | null;
+    /** The anchor's window rect — for anchor-width-matched dropdowns. */
+    anchorRect: Rect | null;
+    remeasure: () => void;
 };
 //# sourceMappingURL=useAnchoredPosition.d.ts.map

package/lib/typescript/module/overlay/useAnchoredPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../../../src/overlay/useAnchoredPosition.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,iBAAiB,EACtB,KAAK,IAAI,EACZ,MAAM,cAAc,CAAA;AACrB,OAAO,EAEH,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,SAAS,EAGjB,MAAM,kBAAe,CAAA;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;CAC3B;;;6BAa+C,iBAAiB;;EAgChE"}
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../../../src/overlay/useAnchoredPosition.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,iBAAiB,EACtB,KAAK,IAAI,EACZ,MAAM,cAAc,CAAA;AACrB,OAAO,EAIH,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,IAAI,EAEZ,MAAM,kBAAe,CAAA;AAGtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE;IACzC,mEAAmE;IACnE,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;;6BAkC+C,iBAAiB;;;WAW7C,MAAM;WAAK,MAAM;;IAoD7B,qEAAqE;;;EAI5E"}

package/lib/typescript/module/overlay/useKeyboardHeight.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The soft keyboard's current height in window points — dependency-free
+ * keyboard tracking for overlays.
+ *
+ * iOS fires `keyboardWillShow/Hide` ahead of the frame change, so an
+ * animation started from this state tracks the keyboard closely; Android
+ * only has the `Did` events. Height comes from `endCoordinates`, so an iOS
+ * keyboard that changes height (emoji pane, autocomplete bar) updates too.
+ */
+export declare function useKeyboardHeight(): {
+    height: number;
+    visible: boolean;
+};
+export default useKeyboardHeight;
+//# sourceMappingURL=useKeyboardHeight.d.ts.map

package/lib/typescript/module/overlay/useKeyboardHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardHeight.d.ts","sourceRoot":"","sources":["../../../../src/overlay/useKeyboardHeight.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,IAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAqBxE;AAED,eAAe,iBAAiB,CAAA"}

package/lib/typescript/module/primitives/Block.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { View, type ViewProps, type StyleProp, type ViewStyle } from 'react-native';
 import { type SurfaceStyleProps } from '../adapters/surfaceStyle.js';
 /**
  * Native `Block` — a `View` driven by token-shaped style props.
@@ -21,7 +21,7 @@ import { type SurfaceStyleProps } from '../adapters/surfaceStyle.js';
 export type BlockProps = SurfaceStyleProps & {
     children?: React.ReactNode;
     /** Escape hatch for RN styles the token props do not cover. */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 } & Omit<ViewProps, 'style'>;
 /**
  * Memoised because primitives sit at the leaves of every component tree: a
@@ -31,7 +31,7 @@ export type BlockProps = SurfaceStyleProps & {
 export declare const Block: React.NamedExoticComponent<SurfaceStyleProps & {
     children?: React.ReactNode;
     /** Escape hatch for RN styles the token props do not cover. */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 } & Omit<ViewProps, "style"> & React.RefAttributes<View>>;
 export default Block;
 //# sourceMappingURL=Block.d.ts.map

package/lib/typescript/module/primitives/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,EACH,IAAI,EAIJ,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AACrB,OAAO,EAEH,KAAK,iBAAiB,EACzB,MAAM,6BAA0B,CAAA;AAEjC;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AA4E5B;;;;GAIG;AACH,eAAO,MAAM,KAAK;eApFH,KAAK,CAAC,SAAS;IAC1B,+DAA+D;YACvD,SAAS;yDAkFe,CAAA;AAWpC,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,EACH,IAAI,EAIJ,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AACrB,OAAO,EAEH,KAAK,iBAAiB,EACzB,MAAM,6BAA0B,CAAA;AAEjC;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AA4E5B;;;;GAIG;AACH,eAAO,MAAM,KAAK;eApFH,KAAK,CAAC,SAAS;IAC1B,+DAA+D;YACvD,SAAS,CAAC,SAAS,CAAC;yDAkFI,CAAA;AAWpC,eAAe,KAAK,CAAA"}

package/lib/typescript/module/primitives/Pressable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, type GestureResponderEvent, type PressableProps, type ViewStyle } from 'react-native';
+import { View, type GestureResponderEvent, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
 import { type SurfaceStyleProps } from '../adapters/surfaceStyle.js';
 import { MIN_TOUCH_TARGET } from './touchTarget.js';
 export { MIN_TOUCH_TARGET };
@@ -81,7 +81,7 @@ export type PrimitivePressableProps = SurfaceStyleProps & {
      */
     minTouchTarget?: number;
     onPress?: (event: GestureResponderEvent) => void;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 } & Omit<PressableProps, 'style' | 'onPress' | 'disabled' | 'children'>;
 /** Memoised — see the note on `Block`. */
 export declare const Pressable: React.NamedExoticComponent<SurfaceStyleProps & {
@@ -129,7 +129,7 @@ export declare const Pressable: React.NamedExoticComponent<SurfaceStyleProps & {
      */
     minTouchTarget?: number;
     onPress?: (event: GestureResponderEvent) => void;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 } & Omit<PressableProps, "children" | "style" | "onPress" | "disabled"> & React.RefAttributes<View>>;
 export default Pressable;
 //# sourceMappingURL=Pressable.d.ts.map

package/lib/typescript/module/primitives/Pressable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAGH,IAAI,EAEJ,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EAEnB,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AAMrB,OAAO,EAEH,KAAK,iBAAiB,EACzB,MAAM,6BAA0B,CAAA;AAKjC,OAAO,EACH,gBAAgB,EAInB,MAAM,kBAAe,CAAA;AAItB,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAE3B;;;;;;;;;;;;;GAaG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IACvC,+DAA+D;IAC/D,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAChD,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAoZvE,0CAA0C;AAC1C,eAAO,MAAM,SAAS;eApcP,KAAK,CAAC,SAAS;IAC1B,4CAA4C;uBACzB,MAAM;IACzB,8CAA8C;yBACzB,MAAM;mBACZ,MAAM;qBACJ,MAAM;sBACL,MAAM;eAEb,OAAO;IAClB;;;;OAIG;cACO,OAAO;kBACH,MAAM;iBACP,MAAM,GAAG,OAAO,GAAG,OAAO;IACvC,+DAA+D;gCACnC,MAAM;IAClC,wDAAwD;mBACzC,MAAM;IACrB;;;;;;OAMG;kBACW,MAAM;IACpB;;;OAGG;uBACgB,OAAO;IAC1B;;;;;;;OAOG;qBACc,MAAM;cAEb,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;YACxC,SAAS;oGAsZuB,CAAA;AAG5C,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAGH,IAAI,EAEJ,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AAMrB,OAAO,EAEH,KAAK,iBAAiB,EACzB,MAAM,6BAA0B,CAAA;AAKjC,OAAO,EACH,gBAAgB,EAInB,MAAM,kBAAe,CAAA;AAItB,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAE3B;;;;;;;;;;;;;GAaG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IACvC,+DAA+D;IAC/D,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AA6XvE,0CAA0C;AAC1C,eAAO,MAAM,SAAS;eA7aP,KAAK,CAAC,SAAS;IAC1B,4CAA4C;uBACzB,MAAM;IACzB,8CAA8C;yBACzB,MAAM;mBACZ,MAAM;qBACJ,MAAM;sBACL,MAAM;eAEb,OAAO;IAClB;;;;OAIG;cACO,OAAO;kBACH,MAAM;iBACP,MAAM,GAAG,OAAO,GAAG,OAAO;IACvC,+DAA+D;gCACnC,MAAM;IAClC,wDAAwD;mBACzC,MAAM;IACrB;;;;;;OAMG;kBACW,MAAM;IACpB;;;OAGG;uBACgB,OAAO;IAC1B;;;;;;;OAOG;qBACc,MAAM;cAEb,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;YACxC,SAAS,CAAC,SAAS,CAAC;oGA+XY,CAAA;AAG5C,eAAe,SAAS,CAAA"}

package/lib/typescript/module/primitives/PrimitiveInput.d.ts

@@ -1,4 +1,4 @@
-import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
+import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps, type StyleProp, type TextStyle } from 'react-native';
 /**
  * Native `PrimitiveInput` — a bare RN `TextInput` driven by token-shaped
  * text props, the input counterpart of `Text`.
@@ -22,7 +22,7 @@ export type PrimitiveInputProps = {
     lineHeight?: string | number;
     /** Placeholder colour for the current state. */
     placeholderColor?: string;
-    style?: TextStyle;
+    style?: StyleProp<TextStyle>;
 } & Omit<RNTextInputProps, 'style' | 'placeholderTextColor'>;
 /** Memoised — see the note on `Block`. */
 export declare const PrimitiveInput: import("react").NamedExoticComponent<{
@@ -36,7 +36,7 @@ export declare const PrimitiveInput: import("react").NamedExoticComponent<{
     lineHeight?: string | number;
     /** Placeholder colour for the current state. */
     placeholderColor?: string;
-    style?: TextStyle;
+    style?: StyleProp<TextStyle>;
 } & Omit<RNTextInputProps, "style" | "placeholderTextColor"> & import("react").RefAttributes<RNTextInput>>;
 export default PrimitiveInput;
 //# sourceMappingURL=PrimitiveInput.d.ts.map

package/lib/typescript/module/primitives/PrimitiveInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitiveInput.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveInput.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,SAAS,IAAI,WAAW,EAExB,KAAK,cAAc,IAAI,gBAAgB,EACvC,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AAKrB;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,mBAAmB,GAAG;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,sBAAsB,CAAC,CAAA;AAoC5D,0CAA0C;AAC1C,eAAO,MAAM,cAAc;IAhDvB,4CAA4C;eACjC,MAAM,GAAG,MAAM;IAC1B,2DAA2D;iBAC9C,MAAM,GAAG,MAAM;IAC5B,yCAAyC;YACjC,MAAM;IACd,iDAAiD;iBACpC,MAAM,GAAG,MAAM;IAC5B,gDAAgD;uBAC7B,MAAM;YACjB,SAAS;0GAsCiC,CAAA;AAatD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PrimitiveInput.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveInput.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,SAAS,IAAI,WAAW,EAExB,KAAK,cAAc,IAAI,gBAAgB,EACvC,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AAKrB;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,mBAAmB,GAAG;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,sBAAsB,CAAC,CAAA;AAoC5D,0CAA0C;AAC1C,eAAO,MAAM,cAAc;IAhDvB,4CAA4C;eACjC,MAAM,GAAG,MAAM;IAC1B,2DAA2D;iBAC9C,MAAM,GAAG,MAAM;IAC5B,yCAAyC;YACjC,MAAM;IACd,iDAAiD;iBACpC,MAAM,GAAG,MAAM;IAC5B,gDAAgD;uBAC7B,MAAM;YACjB,SAAS,CAAC,SAAS,CAAC;0GAsCsB,CAAA;AAatD,eAAe,cAAc,CAAA"}

package/lib/typescript/module/primitives/Separator.d.ts

@@ -1,4 +1,4 @@
-import { type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
 /**
  * Decorative divider.
  *
@@ -17,7 +17,7 @@ export type SeparatorProps = {
     /** Thickness across the line. Token string or number. */
     thickness?: string | number;
     color?: string;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
 };
 export declare function Separator({ orientation, length, thickness, color, style, testID, }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/module/primitives/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAI/D;;;;;;;;;GASG;AAEH,MAAM,MAAM,cAAc,GAAG;IACzB,qEAAqE;IACrE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAMD,wBAAgB,SAAS,CAAC,EACtB,WAAwB,EACxB,MAAuB,EACvB,SAA6B,EAC7B,KAAqB,EACrB,KAAK,EACL,MAAM,GACT,EAAE,cAAc,2CAsBhB;yBA7Be,SAAS;;;AAiCzB,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAI/E;;;;;;;;;GASG;AAEH,MAAM,MAAM,cAAc,GAAG;IACzB,qEAAqE;IACrE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAMD,wBAAgB,SAAS,CAAC,EACtB,WAAwB,EACxB,MAAuB,EACvB,SAA6B,EAC7B,KAAqB,EACrB,KAAK,EACL,MAAM,GACT,EAAE,cAAc,2CAsBhB;yBA7Be,SAAS;;;AAiCzB,eAAe,SAAS,CAAA"}

package/lib/typescript/module/primitives/Slot.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
 import { tintSlot } from './tintSlot.js';
 export { tintSlot };
 /**
@@ -38,7 +38,7 @@ export type SlotProps = {
      * renders a text label, matching web's `aria-hidden`.
      */
     hidden?: boolean;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
 };
 declare function SlotImpl({ children, color, maxHeight, hidden, style, testID, }: SlotProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/typescript/module/primitives/Slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AACnC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,SAAS,GAAG;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,iBAAS,QAAQ,CAAC,EACd,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAc,EACd,KAAK,EACL,MAAM,GACT,EAAE,SAAS,kDAuBX;AAED,0CAA0C;AAC1C,eAAO,MAAM,IAAI,4CAAiB,CAAA;AAYlC,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AACnC,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,SAAS,GAAG;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,iBAAS,QAAQ,CAAC,EACd,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAc,EACd,KAAK,EACL,MAAM,GACT,EAAE,SAAS,kDAuBX;AAED,0CAA0C;AAC1C,eAAO,MAAM,IAAI,4CAAiB,CAAA;AAYlC,eAAe,IAAI,CAAA"}

package/lib/typescript/module/primitives/Text.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TextProps as RNTextProps, type TextStyle } from 'react-native';
+import { type TextProps as RNTextProps, type StyleProp, type TextStyle } from 'react-native';
 import type { NativeFontRole } from '../theme/fonts.js';
 /**
  * Native `Text` — renders a RN `Text` from token-driven style props.
@@ -41,7 +41,7 @@ export type BlendTextProps = {
     /** Flex display — web `Text` is sometimes `inline`; on RN Text is always inline. */
     as?: string;
 } & Omit<RNTextProps, 'style'> & {
-    style?: TextStyle;
+    style?: StyleProp<TextStyle>;
 };
 declare function TextImpl({ children, fontSize, fontWeight, color, lineHeight, textAlign, fontFamily, fontRole, style, ...rest }: BlendTextProps): import("react/jsx-runtime").JSX.Element;
 /** Memoised — see the note on `Block`. */

package/lib/typescript/module/primitives/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,EAGH,KAAK,SAAS,IAAI,WAAW,EAC7B,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,cAAc,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACnD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oFAAoF;IACpF,EAAE,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAEL,iBAAS,QAAQ,CAAC,EACd,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,QAAiB,EACjB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,cAAc,2CAoBhB;AAED,0CAA0C;AAC1C,eAAO,MAAM,IAAI,4CAAiB,CAAA;AAOlC,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/primitives/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,EAGH,KAAK,SAAS,IAAI,WAAW,EAC7B,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,cAAc,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACnD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oFAAoF;IACpF,EAAE,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B,CAAA;AAEL,iBAAS,QAAQ,CAAC,EACd,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,QAAiB,EACjB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,cAAc,2CAoBhB;AAED,0CAA0C;AAC1C,eAAO,MAAM,IAAI,4CAAiB,CAAA;AAOlC,eAAe,IAAI,CAAA"}

package/lib/typescript/module/theme/nativeTokenRegistry.d.ts

@@ -14,11 +14,37 @@ import { FOUNDATION_THEME, Theme, type BreakpointType } from '@juspay/blend-desi
  * entry, so registering one pulls in no UI code.
  */
 export declare const NATIVE_TOKEN_REGISTRY: {
+    readonly ACCORDIONV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveAccordionV2Tokens;
     readonly ALERTV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveAlertV2Tokens;
+    readonly AVATARV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveAvatarV2Tokens;
+    readonly BADGE: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveBadgeTokens;
     readonly BUTTONV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveButtonV2Tokens;
+    readonly BREADCRUMBV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveBreadcrumbV2Tokens;
+    readonly CARDV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveCardV2Tokens;
+    readonly CHARTSV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveChartV2Tokens;
+    readonly CHECKBOXV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveCheckboxV2Tokens;
+    readonly KEYVALUEPAIRV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveKeyValuePairV2Tokens;
+    readonly MENUV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveMenuV2TokensType;
+    readonly MODALV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("node_modules/@juspay/blend-design-system/dist/components/ModalV2/modalV2.tokens.types").ResponsiveModalV2Tokens;
+    readonly MULTI_SELECT_V2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveMultiSelectV2Tokens;
+    readonly NUMBER_INPUT_V2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveNumberInputV2Tokens;
+    readonly OTP_INPUTV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveOTPInputV2Tokens;
+    readonly POPOVERV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("node_modules/@juspay/blend-design-system/dist/components/PopoverV2/popoverV2.tokens.types").ResponsivePopoverV2Tokens;
+    readonly PROGRESS_BARV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveProgressBarV2Tokens;
+    readonly RADIOV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveRadioV2Tokens;
+    readonly SEARCH_INPUT_V2: (foundationTokens: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSearchInputV2Tokens;
+    readonly SINGLE_SELECT_V2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSingleSelectV2Tokens;
     readonly SKELETON: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSkeletonTokens;
+    readonly SNACKBARV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSnackbarV2Tokens;
+    readonly SPINNER: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSpinnerTokens;
+    readonly STATCARDV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveStatCardV2Tokens;
+    readonly SWITCHV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSwitchV2Tokens;
+    readonly TABSV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveTabsV2Tokens;
     readonly TAGV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveTagV2Tokens;
+    readonly TEXT_AREA_V2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveTextAreaV2Tokens;
     readonly TEXT_INPUTV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveTextInputV2Tokens;
+    readonly UPLOADV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveUploadV2Tokens;
+    readonly TOOLTIPV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("node_modules/@juspay/blend-design-system/dist/components/TooltipV2/tooltipV2.tokens.types").ResponsiveTooltipV2Tokens;
 };
 /** Every component slot native can resolve. Derived, never hand-written. */
 export type NativeTokenSlot = keyof typeof NATIVE_TOKEN_REGISTRY;

package/lib/typescript/module/theme/nativeTokenRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeTokenRegistry.d.ts","sourceRoot":"","sources":["../../../../src/theme/nativeTokenRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAChB,KAAK,EAML,KAAK,cAAc,EACtB,MAAM,kCAAkC,CAAA;AAEzC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB;;;;;;CAMxB,CAAA;AAEV,4EAA4E;AAC5E,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,qBAAqB,CAAA;AAEhE;;;GAGG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAC1B,UAAU,EAAE,OAAO,gBAAgB,EACnC,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,KACrB,MAAM,CAAC,MAAM,cAAc,EAAE,CAAC,CAAC,CAAA;AAEpC,kEAAkE;AAClE,MAAM,MAAM,6BAA6B,GAAG,OAAO,CAC/C,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CACnC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAE1B,eAAe,EAAE,CAAA;AAEtB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,eAAe,CAEzE"}
+{"version":3,"file":"nativeTokenRegistry.d.ts","sourceRoot":"","sources":["../../../../src/theme/nativeTokenRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAChB,KAAK,EAgCL,KAAK,cAAc,EACtB,MAAM,kCAAkC,CAAA;AAEzC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAA;AAEV,4EAA4E;AAC5E,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,qBAAqB,CAAA;AAEhE;;;GAGG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAC1B,UAAU,EAAE,OAAO,gBAAgB,EACnC,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,KACrB,MAAM,CAAC,MAAM,cAAc,EAAE,CAAC,CAAC,CAAA;AAEpC,kEAAkE;AAClE,MAAM,MAAM,6BAA6B,GAAG,OAAO,CAC/C,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CACnC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAE1B,eAAe,EAAE,CAAA;AAEtB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,eAAe,CAEzE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blend-native",
-    "version": "0.0.1-beta.0",
+    "version": "0.0.1-beta.2",
     "description": "React Native components for Blend Design System",
     "type": "module",
     "main": "./lib/commonjs/index.js",
@@ -40,13 +40,15 @@
         "typecheck": "tsc --noEmit"
     },
     "peerDependencies": {
-        "@juspay/blend-design-system": ">=0.0.38-beta.2",
+        "@juspay/blend-design-system": ">=0.0.38-beta.3",
         "expo-linear-gradient": ">=15.0.0",
         "lucide-react-native": ">=1.0.0",
         "react": ">=18.2.0",
         "react-native": ">=0.74.0",
         "react-native-svg": ">=12.0.0",
-        "react-native-reanimated": ">=3.16.0",
+        "victory-native": ">=36.9.0",
+        "react-native-reanimated": ">=4.0.0",
+        "react-native-worklets": ">=0.8.0",
         "react-native-gesture-handler": ">=2.20.0",
         "react-native-safe-area-context": ">=4.10.0"
     },
@@ -78,6 +80,7 @@
         "react-native-builder-bob": "^0.43.0",
         "react-native-gesture-handler": "2.31.1",
         "react-native-reanimated": "4.3.1",
+        "victory-native": "^36.9.2",
         "react-native-safe-area-context": "5.7.0",
         "react-native-svg": "15.15.5",
         "react-native-worklets": "0.8.3",

package/src/adapters/cssStringAdapter.ts

@@ -25,7 +25,8 @@ import type { ViewStyle } from 'react-native'
  * Here the `.` inside the optional group is mandatory, so each digit run has
  * exactly one valid division and matching stays linear.
  */
-const NUMBER = String.raw`-?(?:\d+(?:\.\d+)?|\.\d+)`
+const UNSIGNED_NUMBER = String.raw`(?:\d+(?:\.\d+)?|\.\d+)`
+const NUMBER = `-?${UNSIGNED_NUMBER}`
 
 /** `"6px"`, `"1.5px"`, `"0"` — a length, with the unit optional. */
 const DIMENSION_RE = new RegExp(`^(${NUMBER})(?:px)?$`)
@@ -33,6 +34,20 @@ const DIMENSION_RE = new RegExp(`^(${NUMBER})(?:px)?$`)
 /** `"50%"`, `"33.5%"`, `"-5%"` — a percentage. */
 const PERCENT_RE = new RegExp(`^(${NUMBER})%$`)
 
+/** `"1px solid #E1E4EA"` — width, style, color. Width cannot be negative. */
+const BORDER_RE = new RegExp(
+    String.raw`^(${UNSIGNED_NUMBER})px\s+(solid|dashed|dotted)\s+(.+)$`
+)
+
+/** Every signed decimal in a string — for box-shadow's number run. */
+const NUMBER_G = new RegExp(NUMBER, 'g')
+
+/** `rgba(5, 5, 6, 0.07)` — channels, with the alpha optional. */
+const RGBA_RE = new RegExp(
+    String.raw`rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(${UNSIGNED_NUMBER}))?\s*\)`,
+    'i'
+)
+
 /**
  * Result of parsing a background token.
  *
@@ -150,30 +165,35 @@ export function parseDuration(
 
 /**
  * Parse a CSS `border` shorthand (`"1px solid #E1E4EA"`) into RN border props.
- * Returns `{ borderWidth, borderColor }` — the only two border properties RN
- * supports uniformly across iOS/Android.
+ * Returns `{ borderWidth, borderColor, borderStyle }`. `borderStyle` is always
+ * emitted on a match (`'solid'` is RN's default, so existing tokens render
+ * identically); `'dashed'` / `'dotted'` reach RN's `borderStyle` directly.
  *
- * `parseBorder("1.5px solid #1A56DB") → { borderWidth: 1.5, borderColor: "#1A56DB" }`
+ * `parseBorder("1.5px solid #1A56DB") → { borderWidth: 1.5, borderColor: "#1A56DB", borderStyle: "solid" }`
+ * `parseBorder("1.5px dashed #1A56DB") → { borderWidth: 1.5, borderColor: "#1A56DB", borderStyle: "dashed" }`
  * `parseBorder("none") → {}`
  */
 export function parseBorder(
     value: string | undefined
-): Partial<Pick<ViewStyle, 'borderWidth' | 'borderColor'>> {
+): Partial<Pick<ViewStyle, 'borderWidth' | 'borderColor' | 'borderStyle'>> {
     if (!value || value === 'none' || value === 'transparent') {
         return {}
     }
     // Match: <width> <style> <color>
     // width: "1px" / "1.5px"
-    // style: "solid" / "dashed" / "dotted" (RN only renders solid reliably)
+    // style: "solid" / "dashed" / "dotted"
     // color: hex / rgb / rgba / named
-    const match = value
-        .trim()
-        .match(/^(\d*\.?\d+)px\s+(?:solid|dashed|dotted)\s+(.+)$/)
+    const match = value.trim().match(BORDER_RE)
     if (!match) return {}
     const width = parseFloat(match[1])
-    const color = match[2].trim()
+    const borderStyle = match[2] as NonNullable<ViewStyle['borderStyle']>
+    // Strip `!important` — web token factories emit it on some borders;
+    // RN has no CSS specificity, so it's meaningless here and makes the
+    // color string invalid if left in. Whitespace around it is handled by
+    // `.trim()` so the regex itself stays linear (no `\s*` quantifiers).
+    const color = match[3].replace(/!important$/i, '').trim()
     if (Number.isNaN(width) || !color) return {}
-    return { borderWidth: width, borderColor: color }
+    return { borderWidth: width, borderColor: color, borderStyle }
 }
 
 /**
@@ -201,8 +221,10 @@ export function parseBorderRadius(
     const trimmed = value.trim()
     if (trimmed === '' || trimmed === 'none') return undefined
 
-    const parts = trimmed.split(/\s+/).map((p) => parseFloat(p))
-    if (parts.some((p) => Number.isNaN(p))) return undefined
+    // Each corner must be a plain length — `parseFloat` would silently turn
+    // `"50%"` into `50` and `"12abc"` into `12`, both wrong on RN.
+    const parts = trimmed.split(/\s+/).map((p) => parseDimension(p))
+    if (parts.some((p) => p === undefined)) return undefined
 
     if (parts.length === 1) return parts[0]
     if (parts.length === 4) {
@@ -262,8 +284,7 @@ export function parseBoxShadow(
     const numericPart = outer
         .replace(/#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)/gi, ' ')
         .replace(/\binset\b/gi, ' ')
-    const nums =
-        numericPart.match(/-?\d*\.?\d+/g)?.map((t) => parseFloat(t)) ?? []
+    const nums = numericPart.match(NUMBER_G)?.map((t) => parseFloat(t)) ?? []
 
     const [offsetX = 0, offsetY = 0, blur = 0, spread = 0] = nums
 
@@ -275,9 +296,7 @@ export function parseBoxShadow(
     // alpha separately for shadowOpacity (iOS multiplies them).
     let resolvedColor = shadowColor
     let resolvedOpacity = 1
-    const rgbaMatch = shadowColor.match(
-        /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/i
-    )
+    const rgbaMatch = shadowColor.match(RGBA_RE)
     if (rgbaMatch) {
         const [, r, g, b, a] = rgbaMatch
         resolvedColor = `rgb(${r}, ${g}, ${b})`
@@ -298,21 +317,79 @@ export function parseBoxShadow(
     }
 }
 
+/** `linear-gradient(<angle>deg, <stops>)` — the only gradient form Blend tokens use. */
+const LINEAR_GRADIENT_RE = new RegExp(
+    String.raw`linear-gradient\(\s*(${NUMBER})deg\s*,\s*(.+)\s*\)`,
+    'i'
+)
+
+/** The first color inside an unsupported gradient — its degrade target. */
+const FIRST_COLOR_RE = /#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)/i
+
+/** CSS-wide keywords that look like named colors but mean nothing to RN. */
+const NON_COLOR_KEYWORDS = new Set([
+    'inherit',
+    'initial',
+    'unset',
+    'revert',
+    'currentcolor',
+])
+
+/**
+ * Resolve gradient stop positions the way CSS does: a stop without a position
+ * gets one — first stop 0, last stop 1, interior stops spread evenly between
+ * their nearest positioned neighbours — and no stop may sit before an earlier
+ * one (out-of-order positions are raised to the running maximum).
+ */
+function resolveStopLocations(locations: (number | null)[]): number[] {
+    const out = locations.slice()
+    if (out[0] === null) out[0] = 0
+    if (out[out.length - 1] === null) out[out.length - 1] = 1
+
+    // Out-of-order specified positions clamp up to the running maximum.
+    let runningMax = 0
+    for (let i = 0; i < out.length; i++) {
+        const loc = out[i]
+        if (loc === null) continue
+        out[i] = Math.max(loc, runningMax)
+        runningMax = out[i] as number
+    }
+
+    // Interpolate each run of unspecified positions between its neighbours.
+    let i = 0
+    while (i < out.length) {
+        if (out[i] !== null) {
+            i++
+            continue
+        }
+        let j = i
+        while (out[j] === null) j++
+        const prev = out[i - 1] as number
+        const next = out[j] as number
+        const runLength = j - i
+        for (let k = 0; k < runLength; k++) {
+            out[i + k] = prev + ((k + 1) * (next - prev)) / (runLength + 1)
+        }
+        i = j
+    }
+    return out as number[]
+}
+
 /**
  * Parse a CSS `background` value into a `ParsedBackground`.
  *
  * - `"linear-gradient(180deg, #1A56DB -5%, #2563EB 107.5%)"` → gradient descriptor
- *   (percentage midpoints outside [0,1] are clamped — known limitation)
+ *   (percentage stops outside [0,1] are clamped — known limitation)
  * - `"#FFFFFF"` / `"rgb(255,255,255)"` → flat color
- * - `"none"` / `"transparent"` → null
+ * - unsupported gradient syntax (`to top`, radial, conic) → flat first stop,
+ *   never the raw string as a "color"
+ * - `"none"` / `"transparent"` / anything unrecognised → null
  */
 export function parseBackground(value: string | undefined): ParsedBackground {
     if (!value || value === 'none' || value === 'transparent') return null
 
     // Gradient?
-    const gradientMatch = value.match(
-        /linear-gradient\(\s*(\d+)deg\s*,\s*(.+)\s*\)/i
-    )
+    const gradientMatch = value.match(LINEAR_GRADIENT_RE)
     if (gradientMatch) {
         const angle = parseFloat(gradientMatch[1])
         const stopsStr = gradientMatch[2]
@@ -327,7 +404,7 @@ export function parseBackground(value: string | undefined): ParsedBackground {
             .map((s) => s.trim())
             .filter(Boolean)
         const colors: string[] = []
-        const locations: number[] = []
+        const locations: (number | null)[] = []
         for (const stop of stopStrs) {
             // "color" or "color position%"
             const parts = stop.split(/\s+/)
@@ -336,7 +413,7 @@ export function parseBackground(value: string | undefined): ParsedBackground {
                 const pct = parseFloat(parts[1]) / 100
                 locations.push(Math.min(1, Math.max(0, pct)))
             } else {
-                locations.push(0)
+                locations.push(null)
             }
         }
 
@@ -345,13 +422,6 @@ export function parseBackground(value: string | undefined): ParsedBackground {
             return colors[0] ? { type: 'flat', color: colors[0] } : null
         }
 
-        // If locations weren't specified, distribute evenly.
-        const allZero = locations.every((l) => l === 0)
-        let resolvedLocations = locations
-        if (allZero) {
-            resolvedLocations = colors.map((_, i) => i / (colors.length - 1))
-        }
-
         // Convert CSS angle (0deg = bottom→top) to RN {start, end} coords.
         // RN's LinearGradient uses normalized [0,1] coordinates on the bounding box.
         // 0deg → start={x:0.5,y:1} end={x:0.5,y:0}
@@ -370,14 +440,29 @@ export function parseBackground(value: string | undefined): ParsedBackground {
         return {
             type: 'gradient',
             colors,
-            locations: resolvedLocations,
+            locations: resolveStopLocations(locations),
             start,
             end,
         }
     }
 
-    // Solid color (hex / rgb / rgba / named)
-    if (/^(#[0-9a-fA-F]{3,8}|rgba?\(|[a-z]+)/i.test(value)) {
+    // Any other gradient form (`to top`, non-numeric angles, radial, conic):
+    // degrade to the first color stop rather than handing RN a gradient
+    // string as a "color" — an invalid color renders as a hard error.
+    if (/gradient\(/i.test(value)) {
+        const firstColor = value.match(FIRST_COLOR_RE)
+        return firstColor ? { type: 'flat', color: firstColor[0] } : null
+    }
+
+    // Solid color — a whole-string hex / rgb / rgba / hsl / named color.
+    // Anything trailing after the color (or a bare keyword like `inherit`)
+    // is not expressible as an RN color and returns null instead.
+    if (
+        /^#[0-9a-fA-F]{3,8}$/.test(value) ||
+        /^(?:rgba?|hsla?)\(/i.test(value) ||
+        (/^[a-z]+$/i.test(value) &&
+            !NON_COLOR_KEYWORDS.has(value.toLowerCase()))
+    ) {
         return { type: 'flat', color: value }
     }
 

package/src/adapters/optionalGradient.ts

@@ -1,5 +1,5 @@
 import type React from 'react'
-import type { ViewStyle } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
 
 /**
  * Optional `expo-linear-gradient` probe, shared by every surface that can
@@ -22,7 +22,7 @@ export type GradientComponent = React.ComponentType<{
     locations?: readonly number[]
     start?: { x: number; y: number }
     end?: { x: number; y: number }
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
 }>
 
 type GradientModule = { LinearGradient: GradientComponent }