blend-native 0.0.1-beta.0

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

@@ -0,0 +1,34 @@
+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`.
+ */
+export type NativeFontRole = 'display' | 'body' | 'heading' | 'mono';
+/** One resolved family per role; `null` means "leave the platform font". */
+export type NativeFontFamilies = Record<NativeFontRole, string | null>;
+/** What `BlendNativeProvider` accepts for its `fontFamily` prop. */
+export type NativeFontFamilyOption = 'system' | Partial<Record<NativeFontRole, string | null>>;
+/**
+ * Resolve the provider's `fontFamily` option against the active foundation
+ * tokens. Pure; called once per provider render.
+ */
+export declare function resolveFontFamilies(foundationTokens?: typeof FOUNDATION_THEME, option?: NativeFontFamilyOption): NativeFontFamilies;
+//# sourceMappingURL=fonts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;AAEpE,4EAA4E;AAC5E,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC,CAAA;AAEtE,oEAAoE;AACpE,MAAM,MAAM,sBAAsB,GAC5B,QAAQ,GACR,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAA;AAIpD;;;GAGG;AACH,wBAAgB,mBAAmB,CAC/B,gBAAgB,GAAE,OAAO,gBAAmC,EAC5D,MAAM,CAAC,EAAE,sBAAsB,GAChC,kBAAkB,CAkBpB"}

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

@@ -0,0 +1,34 @@
+import { FOUNDATION_THEME, Theme, type BreakpointType } 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 declare const NATIVE_TOKEN_REGISTRY: {
+    readonly ALERTV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveAlertV2Tokens;
+    readonly BUTTONV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveButtonV2Tokens;
+    readonly SKELETON: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveSkeletonTokens;
+    readonly TAGV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveTagV2Tokens;
+    readonly TEXT_INPUTV2: (foundationToken: import("@juspay/blend-design-system/node").FoundationTokenType, theme?: Theme | string) => import("@juspay/blend-design-system/node").ResponsiveTextInputV2Tokens;
+};
+/** Every component slot native can resolve. Derived, never hand-written. */
+export type NativeTokenSlot = keyof typeof NATIVE_TOKEN_REGISTRY;
+/**
+ * A Blend token factory: pure, takes foundation tokens plus a theme, and
+ * returns one token object per breakpoint.
+ */
+export type TokenFactory<T> = (foundation: typeof FOUNDATION_THEME, theme?: Theme | string) => Record<keyof BreakpointType, T>;
+/** Overrides accepted by `BlendNativeProvider`, keyed by slot. */
+export type NativeComponentTokenOverrides = Partial<Record<NativeTokenSlot, unknown>>;
+export declare const NATIVE_TOKEN_SLOTS: NativeTokenSlot[];
+export declare function isNativeTokenSlot(value: string): value is NativeTokenSlot;
+//# sourceMappingURL=nativeTokenRegistry.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+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 declare const SYSTEM_THEME: "system";
+export type NativeThemeSetting = Theme | string | typeof SYSTEM_THEME;
+/**
+ * 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 declare function resolveThemeSetting(theme: NativeThemeSetting, colorScheme: string | null | undefined): Theme | string;
+//# sourceMappingURL=systemTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"systemTheme.d.ts","sourceRoot":"","sources":["../../../../src/theme/systemTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAA;AAExD;;;;;;;;;;GAUG;AAEH,2DAA2D;AAC3D,eAAO,MAAM,YAAY,EAAG,QAAiB,CAAA;AAE7C,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,YAAY,CAAA;AAErE;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAC/B,KAAK,EAAE,kBAAkB,EACzB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACvC,KAAK,GAAG,MAAM,CAGhB"}

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

@@ -0,0 +1,17 @@
+import { type BreakpointType } from '@juspay/blend-design-system/node';
+import { resolveBreakpoint, type NativeBreakpoint } from './breakpoint.js';
+export { resolveBreakpoint };
+export type { NativeBreakpoint };
+/**
+ * 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 declare function useNativeBreakpoint(breakpoints?: BreakpointType): NativeBreakpoint;
+//# sourceMappingURL=useNativeBreakpoint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeBreakpoint.d.ts","sourceRoot":"","sources":["../../../../src/theme/useNativeBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,cAAc,EACtB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAc,CAAA;AAEvE,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,GAAE,cAA4B,GAC1C,gBAAgB,CAGlB"}

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

@@ -0,0 +1,4 @@
+import { type NativeTokenSlot } from './nativeTokenRegistry.js';
+export declare function useNativeTokens<T>(slot: NativeTokenSlot): T;
+export default useNativeTokens;
+//# sourceMappingURL=useNativeTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeTokens.d.ts","sourceRoot":"","sources":["../../../../src/theme/useNativeTokens.ts"],"names":[],"mappings":"AAQA,OAAO,EAIH,KAAK,eAAe,EAEvB,MAAM,0BAAuB,CAAA;AAuD9B,wBAAgB,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,eAAe,GAAG,CAAC,CA2B3D;AAED,eAAe,eAAe,CAAA"}

package/package.json

@@ -0,0 +1,137 @@
+{
+    "name": "blend-native",
+    "version": "0.0.1-beta.0",
+    "description": "React Native components for Blend Design System",
+    "type": "module",
+    "main": "./lib/commonjs/index.js",
+    "types": "./lib/typescript/commonjs/index.d.ts",
+    "files": [
+        "lib",
+        "src",
+        "!**/__tests__",
+        "!**/*.test.*"
+    ],
+    "sideEffects": false,
+    "exports": {
+        ".": {
+            "source": "./src/index.ts",
+            "react-native": "./src/index.ts",
+            "import": {
+                "types": "./lib/typescript/module/index.d.ts",
+                "default": "./lib/module/index.js"
+            },
+            "require": {
+                "types": "./lib/typescript/commonjs/index.d.ts",
+                "default": "./lib/commonjs/index.js"
+            },
+            "default": "./lib/commonjs/index.js"
+        }
+    },
+    "scripts": {
+        "build": "bob build",
+        "check:peer": "node scripts/check-peer-exports.mjs",
+        "clean": "rm -rf lib",
+        "lint": "eslint .",
+        "prepublishOnly": "bob build",
+        "test": "vitest run && jest",
+        "test:render": "jest",
+        "test:unit": "vitest run",
+        "test:watch": "vitest",
+        "typecheck": "tsc --noEmit"
+    },
+    "peerDependencies": {
+        "@juspay/blend-design-system": ">=0.0.38-beta.2",
+        "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",
+        "react-native-gesture-handler": ">=2.20.0",
+        "react-native-safe-area-context": ">=4.10.0"
+    },
+    "peerDependenciesMeta": {
+        "expo-linear-gradient": {
+            "optional": true
+        },
+        "react-native-safe-area-context": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.25.0",
+        "@juspay/blend-design-system": "workspace:*",
+        "@react-native/jest-preset": "^0.85.3",
+        "@testing-library/react-native": "^13.3.3",
+        "@types/jest": "^30.0.0",
+        "@types/react": "^19.1.17",
+        "babel-jest": "29.7.0",
+        "eslint": "^9.25.0",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "eslint-plugin-import-x": "^4.6.1",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "expo-linear-gradient": "~15.0.3",
+        "jest": "^29.7.0",
+        "lucide-react-native": "^1.33.0",
+        "react": "19.2.3",
+        "react-native": "0.85.3",
+        "react-native-builder-bob": "^0.43.0",
+        "react-native-gesture-handler": "2.31.1",
+        "react-native-reanimated": "4.3.1",
+        "react-native-safe-area-context": "5.7.0",
+        "react-native-svg": "15.15.5",
+        "react-native-worklets": "0.8.3",
+        "react-test-renderer": "19.2.3",
+        "test-renderer": "^1.2.0",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.30.1",
+        "vitest": "^3.2.4"
+    },
+    "keywords": [
+        "react-native",
+        "blend",
+        "design-system",
+        "juspay",
+        "ui"
+    ],
+    "author": "Juspay",
+    "license": "MIT",
+    "homepage": "https://blend.juspay.design/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/juspay/blend-design-system.git"
+    },
+    "bugs": {
+        "url": "https://github.com/juspay/blend-design-system/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "packageManager": "pnpm@10.21.0",
+    "module": "./lib/module/index.js",
+    "source": "./src/index.ts",
+    "react-native-builder-bob": {
+        "source": "src",
+        "output": "lib",
+        "targets": [
+            [
+                "commonjs",
+                {
+                    "esm": true
+                }
+            ],
+            [
+                "module",
+                {
+                    "esm": true
+                }
+            ],
+            [
+                "typescript",
+                {
+                    "project": "tsconfig.build.json"
+                }
+            ]
+        ]
+    }
+}

package/src/a11y/announcement.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 function buildAnnouncement(
+    heading?: string,
+    description?: string
+): string | undefined {
+    const parts = [heading, description]
+        .map((part) => part?.trim())
+        .filter((part): part is string => Boolean(part))
+
+    if (parts.length === 0) return undefined
+    if (parts.length === 1) return parts[0]
+
+    // Punctuate between the two so the reader pauses rather than running the
+    // heading into the description as one sentence.
+    const [head, rest] = parts
+    return /[.!?:]$/.test(head) ? `${head} ${rest}` : `${head}. ${rest}`
+}

package/src/a11y/useLiveRegion.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react'
+import { AccessibilityInfo, Platform } from 'react-native'
+
+/**
+ * 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 function useLiveRegionAnnounce(
+    message: string | undefined,
+    enabled = true
+): void {
+    const lastAnnounced = useRef<string | undefined>(undefined)
+
+    useEffect(() => {
+        if (!enabled || !message) return
+        // Android already announces via accessibilityLiveRegion; announcing
+        // again here would read the alert twice.
+        if (Platform.OS !== 'ios') return
+        if (lastAnnounced.current === message) return
+
+        lastAnnounced.current = message
+        AccessibilityInfo.announceForAccessibility(message)
+    }, [message, enabled])
+}
+
+export default useLiveRegionAnnounce