@sudobility/building_blocks_rn 0.0.9 → 0.0.12

package/dist/src/components/settings/SettingsListScreen.js

@@ -12,12 +12,12 @@ export function SettingsListScreen({ sections, onSectionPress, title = 'Settings
         });
         onSectionPress(section.id);
     };
-    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, children: title }), _jsx(View, { style: styles.sectionList, children: sections.map((section, index) => {
+    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, accessibilityRole: 'header', children: title }), _jsx(View, { style: styles.sectionList, accessibilityRole: 'list', children: sections.map((section, index) => {
                     const IconComponent = section.icon;
                     return (_jsxs(Pressable, { style: [
                             styles.sectionRow,
                             index < sections.length - 1 && styles.sectionRowBorder,
-                        ], onPress: () => handlePress(section), children: [IconComponent && (_jsx(View, { style: styles.iconContainer, children: _jsx(IconComponent, { size: 20, color: styles.iconColor.color }) })), _jsxs(View, { style: styles.sectionInfo, children: [_jsx(Text, { style: styles.sectionLabel, children: section.label }), section.description && (_jsx(Text, { style: styles.sectionDescription, children: section.description }))] }), _jsx(Text, { style: styles.chevron, children: '\u203A' })] }, section.id));
+                        ], onPress: () => handlePress(section), accessibilityRole: 'button', accessibilityLabel: `${section.label}${section.description ? `, ${section.description}` : ''}`, accessibilityHint: `Opens ${section.label} settings`, children: [IconComponent && (_jsx(View, { style: styles.iconContainer, children: _jsx(IconComponent, { size: 20, color: styles.iconColor.color }) })), _jsxs(View, { style: styles.sectionInfo, children: [_jsx(Text, { style: styles.sectionLabel, children: section.label }), section.description && (_jsx(Text, { style: styles.sectionDescription, children: section.description }))] }), _jsx(Text, { style: styles.chevron, children: '\u203A' })] }, section.id));
                 }) })] }));
 }
 const useStyles = createThemedStyles(colors => ({
@@ -56,7 +56,7 @@ const useStyles = createThemedStyles(colors => ({
         backgroundColor: colors.surfaceSecondary,
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: 12,
+        marginEnd: 12,
     },
     iconColor: {
         color: colors.primary,
@@ -77,6 +77,6 @@ const useStyles = createThemedStyles(colors => ({
     chevron: {
         fontSize: 22,
         color: colors.textMuted,
-        marginLeft: 8,
+        marginStart: 8,
     },
 }));

package/dist/src/components/subscription/SafeSubscriptionContext.js

@@ -1,3 +1,12 @@
+/**
+ * @fileoverview Safe subscription context for React Native.
+ *
+ * Provides a context that returns a stub value (`isSubscribed: false`) when
+ * no provider wraps the tree. This allows components to read subscription
+ * state without crashing when a subscription provider is absent. Uses a
+ * default context value rather than null, so `useSafeSubscription()` never
+ * throws and never returns null.
+ */
 import { createContext, useContext } from 'react';
 export const STUB_SUBSCRIPTION_VALUE = {
     isSubscribed: false,

package/dist/src/components/subscription/SubscriptionScreen.js

@@ -1,4 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview Subscription plan selector screen for React Native.
+ *
+ * Simpler plan selector (no current status display) with package cards,
+ * purchase buttons, and a restore purchases flow. Uses the same
+ * purchase/restore callback pattern as AppSubscriptionPage.
+ */
 import { useState, useCallback } from 'react';
 import { View, Text, Pressable, ScrollView, ActivityIndicator, } from 'react-native';
 import { createThemedStyles } from '../../utils/styles';
@@ -52,16 +59,22 @@ export function SubscriptionScreen({ packages, labels = {}, formatters = {}, onP
             setLoading(null);
         }
     }, [loading, onRestore, onRestoreSuccess, onError, onTrack]);
-    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, children: labels.title ?? 'Subscription' }), labels.subtitle && (_jsx(Text, { style: styles.subtitle, children: labels.subtitle })), _jsx(View, { style: styles.packageList, children: packages.map(pkg => (_jsxs(View, { style: [
+    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, accessibilityRole: 'header', children: labels.title ?? 'Subscription' }), labels.subtitle && (_jsx(Text, { style: styles.subtitle, children: labels.subtitle })), _jsx(View, { style: styles.packageList, accessibilityRole: 'list', children: packages.map(pkg => (_jsxs(View, { style: [
                         styles.packageCard,
                         pkg.isMostPopular && styles.packageCardPopular,
-                    ], children: [pkg.isMostPopular && (_jsx(View, { style: styles.popularBadge, children: _jsx(Text, { style: styles.popularBadgeText, children: labels.mostPopular ?? 'Most Popular' }) })), _jsx(Text, { style: styles.packageTitle, children: pkg.title }), pkg.description && (_jsx(Text, { style: styles.packageDescription, children: pkg.description })), _jsx(Text, { style: styles.packagePrice, children: formatPrice(pkg.price, pkg.currency) }), pkg.features && pkg.features.length > 0 && (_jsx(View, { style: styles.featureList, children: pkg.features.map((feature, i) => (_jsxs(Text, { style: styles.featureItem, children: ['\u2713', " ", feature] }, i))) })), pkg.isCurrent ? (_jsx(View, { style: styles.currentBadge, children: _jsx(Text, { style: styles.currentBadgeText, children: labels.currentlyActive ?? 'Current Plan' }) })) : (_jsx(Pressable, { style: [
+                    ], accessibilityRole: 'summary', accessibilityLabel: `${pkg.title}, ${formatPrice(pkg.price, pkg.currency)}${pkg.isMostPopular ? ', Most Popular' : ''}${pkg.isCurrent ? ', Current Plan' : ''}`, children: [pkg.isMostPopular && (_jsx(View, { style: styles.popularBadge, children: _jsx(Text, { style: styles.popularBadgeText, children: labels.mostPopular ?? 'Most Popular' }) })), _jsx(Text, { style: styles.packageTitle, children: pkg.title }), pkg.description && (_jsx(Text, { style: styles.packageDescription, children: pkg.description })), _jsx(Text, { style: styles.packagePrice, children: formatPrice(pkg.price, pkg.currency) }), pkg.features && pkg.features.length > 0 && (_jsx(View, { style: styles.featureList, children: pkg.features.map((feature, i) => (_jsxs(Text, { style: styles.featureItem, children: ['\u2713', " ", feature] }, i))) })), pkg.isCurrent ? (_jsx(View, { style: styles.currentBadge, children: _jsx(Text, { style: styles.currentBadgeText, children: labels.currentlyActive ?? 'Current Plan' }) })) : (_jsx(Pressable, { style: [
                                 styles.purchaseButton,
                                 loading === pkg.id && styles.purchaseButtonDisabled,
-                            ], onPress: () => handlePurchase(pkg), disabled: loading !== null, children: loading === pkg.id ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.purchaseButtonText, children: labels.purchase ?? 'Subscribe' })) }))] }, pkg.id))) }), _jsx(Pressable, { style: [
+                            ], onPress: () => handlePurchase(pkg), disabled: loading !== null, accessibilityRole: 'button', accessibilityLabel: `${labels.purchase ?? 'Subscribe'} to ${pkg.title}`, accessibilityState: {
+                                disabled: loading !== null,
+                                busy: loading === pkg.id,
+                            }, children: loading === pkg.id ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.purchaseButtonText, children: labels.purchase ?? 'Subscribe' })) }))] }, pkg.id))) }), _jsx(Pressable, { style: [
                     styles.restoreButton,
                     loading === 'restore' && styles.restoreButtonDisabled,
-                ], onPress: handleRestore, disabled: loading !== null, children: loading === 'restore' ? (_jsx(ActivityIndicator, { color: styles.restoreText.color, size: 'small' })) : (_jsx(Text, { style: styles.restoreText, children: labels.restore ?? 'Restore Purchases' })) }), labels.restoreDescription && (_jsx(Text, { style: styles.restoreDescription, children: labels.restoreDescription }))] }));
+                ], onPress: handleRestore, disabled: loading !== null, accessibilityRole: 'button', accessibilityLabel: labels.restore ?? 'Restore Purchases', accessibilityState: {
+                    disabled: loading !== null,
+                    busy: loading === 'restore',
+                }, children: loading === 'restore' ? (_jsx(ActivityIndicator, { color: styles.restoreText.color, size: 'small' })) : (_jsx(Text, { style: styles.restoreText, children: labels.restore ?? 'Restore Purchases' })) }), labels.restoreDescription && (_jsx(Text, { style: styles.restoreDescription, children: labels.restoreDescription }))] }));
 }
 const useStyles = createThemedStyles(colors => ({
     container: {

package/dist/src/components/toast/ToastProvider.d.ts

@@ -1,3 +1,26 @@
+/**
+ * @fileoverview Animated toast notification provider for React Native.
+ *
+ * Provides a context-based toast system with slide-down + fade-in animations.
+ * Toasts are positioned at the top of the screen, respecting safe area insets.
+ * Supports four toast types (success, error, warning, info) with configurable
+ * auto-dismiss duration and tap-to-dismiss.
+ *
+ * @platform ios - Safe area insets from notch/dynamic island are respected.
+ * @platform android - Safe area insets from status bar are respected.
+ *
+ * @example
+ * ```tsx
+ * // Wrap your app
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ *
+ * // Show a toast from any child
+ * const { addToast } = useToast();
+ * addToast('Saved!', 'success');
+ * ```
+ */
 import React from 'react';
 export type ToastType = 'success' | 'error' | 'warning' | 'info';
 export interface Toast {

package/dist/src/components/toast/ToastProvider.js

@@ -1,26 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
+/**
+ * @fileoverview Animated toast notification provider for React Native.
+ *
+ * Provides a context-based toast system with slide-down + fade-in animations.
+ * Toasts are positioned at the top of the screen, respecting safe area insets.
+ * Supports four toast types (success, error, warning, info) with configurable
+ * auto-dismiss duration and tap-to-dismiss.
+ *
+ * @platform ios - Safe area insets from notch/dynamic island are respected.
+ * @platform android - Safe area insets from status bar are respected.
+ *
+ * @example
+ * ```tsx
+ * // Wrap your app
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ *
+ * // Show a toast from any child
+ * const { addToast } = useToast();
+ * addToast('Saved!', 'success');
+ * ```
+ */
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { View, Text, Animated, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../../theme/ThemeContext';
 import { createThemedStyles } from '../../utils/styles';
 const ToastContext = createContext(null);
-let toastCounter = 0;
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
     const insets = useSafeAreaInsets();
     const styles = useToastStyles();
+    const counterRef = useRef(0);
+    const timeoutsRef = useRef(new Map());
     const removeToast = useCallback((id) => {
         setToasts(prev => prev.filter(t => t.id !== id));
+        const timeoutId = timeoutsRef.current.get(id);
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutsRef.current.delete(id);
+        }
     }, []);
     const addToast = useCallback((message, type = 'info', duration = 3000) => {
-        const id = `toast-${++toastCounter}`;
+        const id = `toast-${++counterRef.current}`;
         setToasts(prev => [...prev, { id, message, type, duration }]);
         if (duration > 0) {
-            setTimeout(() => removeToast(id), duration);
+            const timeoutId = setTimeout(() => {
+                removeToast(id);
+            }, duration);
+            timeoutsRef.current.set(id, timeoutId);
         }
     }, [removeToast]);
-    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: [styles.toastContainer, { top: insets.top + 8 }], pointerEvents: 'box-none', children: toasts.map(toast => (_jsx(ToastItem, { toast: toast, onDismiss: () => removeToast(toast.id) }, toast.id))) })] }));
+    // Clean up all timeouts on unmount
+    useEffect(() => {
+        const timeouts = timeoutsRef.current;
+        return () => {
+            timeouts.forEach(timeoutId => clearTimeout(timeoutId));
+            timeouts.clear();
+        };
+    }, []);
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: [styles.toastContainer, { top: insets.top + 8 }], pointerEvents: 'box-none', accessibilityRole: 'alert', accessibilityLiveRegion: 'polite', children: toasts.map(toast => (_jsx(ToastItem, { toast: toast, onDismiss: () => removeToast(toast.id) }, toast.id))) })] }));
 }
 function ToastItem({ toast, onDismiss, }) {
     const { colors } = useTheme();
@@ -50,7 +90,7 @@ function ToastItem({ toast, onDismiss, }) {
     return (_jsx(Animated.View, { style: [
             styles.toast,
             { backgroundColor: bgColor, opacity, transform: [{ translateY }] },
-        ], children: _jsx(Pressable, { style: styles.toastContent, onPress: onDismiss, children: _jsx(Text, { style: styles.toastText, children: toast.message }) }) }));
+        ], accessibilityRole: 'alert', accessibilityLabel: `${toast.type}: ${toast.message}`, children: _jsx(Pressable, { style: styles.toastContent, onPress: onDismiss, accessibilityRole: 'button', accessibilityLabel: `Dismiss notification: ${toast.message}`, children: _jsx(Text, { style: styles.toastText, children: toast.message }) }) }));
 }
 /**
  * Hook to access toast functionality.

package/dist/src/constants/languages.d.ts

@@ -1,3 +1,11 @@
+/**
+ * @fileoverview Language configuration constants for React Native i18n.
+ *
+ * Defines the `LanguageConfig` type, a default set of 16 supported languages
+ * with emoji flags, the `RTL_LANGUAGES` array (currently Arabic), and an
+ * `isRTL()` helper function for checking if a language code uses
+ * right-to-left text direction.
+ */
 export interface LanguageConfig {
     code: string;
     name: string;

package/dist/src/constants/languages.js

@@ -1,3 +1,11 @@
+/**
+ * @fileoverview Language configuration constants for React Native i18n.
+ *
+ * Defines the `LanguageConfig` type, a default set of 16 supported languages
+ * with emoji flags, the `RTL_LANGUAGES` array (currently Arabic), and an
+ * `isRTL()` helper function for checking if a language code uses
+ * right-to-left text direction.
+ */
 /**
  * Default set of 16 supported languages with their flags.
  * Apps can override this list by passing their own languages prop.

package/dist/src/i18n/index.d.ts

@@ -1,8 +1,11 @@
 /**
- * React Native i18n initialization.
+ * @fileoverview React Native i18n initialization using i18next.
  *
- * Uses react-native-localize for device language detection
- * and bundled translations (no HTTP backend).
+ * Provides `initializeI18nRN()` for configuring the i18n instance with
+ * bundled translations (no HTTP backend). Uses `react-native-localize`
+ * (optional peer dependency) for device language detection, falling back
+ * to English. Safe to call multiple times -- only initializes once.
+ * Includes Chinese fallback chains: `zh -> zh -> en`, `zh-hant -> zh-hant -> zh -> en`.
  */
 import i18n from 'i18next';
 export interface I18nConfig {

package/dist/src/i18n/index.js

@@ -1,8 +1,11 @@
 /**
- * React Native i18n initialization.
+ * @fileoverview React Native i18n initialization using i18next.
  *
- * Uses react-native-localize for device language detection
- * and bundled translations (no HTTP backend).
+ * Provides `initializeI18nRN()` for configuring the i18n instance with
+ * bundled translations (no HTTP backend). Uses `react-native-localize`
+ * (optional peer dependency) for device language detection, falling back
+ * to English. Safe to call multiple times -- only initializes once.
+ * Includes Chinese fallback chains: `zh -> zh -> en`, `zh-hant -> zh-hant -> zh -> en`.
  */
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';

package/dist/src/native/WebAuth.d.ts

@@ -0,0 +1,3 @@
+export declare function authenticate(url: string, callbackURLScheme: string): Promise<string | null>;
+export declare function generateCodeVerifier(): Promise<string>;
+export declare function sha256Base64Url(input: string): Promise<string>;

package/dist/src/native/WebAuth.js

@@ -0,0 +1,20 @@
+import { NativeModules, Platform } from 'react-native';
+const { WebAuthModule } = NativeModules;
+export async function authenticate(url, callbackURLScheme) {
+    if ((Platform.OS === 'macos' || Platform.OS === 'windows') && WebAuthModule) {
+        return WebAuthModule.authenticate(url, callbackURLScheme);
+    }
+    throw new Error(`Web auth not implemented for ${Platform.OS}`);
+}
+export async function generateCodeVerifier() {
+    if ((Platform.OS === 'macos' || Platform.OS === 'windows') && WebAuthModule) {
+        return WebAuthModule.generateCodeVerifier();
+    }
+    throw new Error(`Code verifier generation not implemented for ${Platform.OS}`);
+}
+export async function sha256Base64Url(input) {
+    if ((Platform.OS === 'macos' || Platform.OS === 'windows') && WebAuthModule) {
+        return WebAuthModule.sha256(input);
+    }
+    throw new Error(`SHA-256 not implemented for ${Platform.OS}`);
+}

package/dist/src/theme/ThemeContext.d.ts

@@ -1,3 +1,17 @@
+/**
+ * @fileoverview Theme context and provider for React Native.
+ *
+ * Manages light/dark mode with automatic system detection via `useColorScheme()`.
+ * Persists user preference to AsyncStorage and delays rendering until the
+ * persisted theme is loaded (prevents theme flash on startup).
+ *
+ * Includes a subtle fade animation (250ms) when switching between light and dark
+ * modes to provide a smooth visual transition.
+ *
+ * Provides dual hooks:
+ * - `useTheme()` - throws if no ThemeProvider is present
+ * - `useThemeSafe()` - returns null if no ThemeProvider is present
+ */
 import React from 'react';
 import { Theme } from '../types';
 import { type ThemeColors } from './colors';

package/dist/src/theme/ThemeContext.js

@@ -1,6 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import { useColorScheme } from 'react-native';
+/**
+ * @fileoverview Theme context and provider for React Native.
+ *
+ * Manages light/dark mode with automatic system detection via `useColorScheme()`.
+ * Persists user preference to AsyncStorage and delays rendering until the
+ * persisted theme is loaded (prevents theme flash on startup).
+ *
+ * Includes a subtle fade animation (250ms) when switching between light and dark
+ * modes to provide a smooth visual transition.
+ *
+ * Provides dual hooks:
+ * - `useTheme()` - throws if no ThemeProvider is present
+ * - `useThemeSafe()` - returns null if no ThemeProvider is present
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Animated, useColorScheme } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Theme } from '../types';
 import { lightColors, darkColors } from './colors';
@@ -10,6 +24,7 @@ export function ThemeProvider({ children, initialTheme, storageKeyPrefix, }) {
     const systemColorScheme = useColorScheme();
     const [theme, setThemeState] = useState(initialTheme ?? Theme.SYSTEM);
     const [loaded, setLoaded] = useState(false);
+    const fadeAnim = useRef(new Animated.Value(1)).current;
     const storageKey = storageKeyPrefix
         ? `${storageKeyPrefix}/${THEME_STORAGE_KEY}`
         : THEME_STORAGE_KEY;
@@ -22,16 +37,29 @@ export function ThemeProvider({ children, initialTheme, storageKeyPrefix, }) {
             setLoaded(true);
         });
     }, [storageKey]);
-    const setTheme = useCallback((newTheme) => {
-        setThemeState(newTheme);
-        AsyncStorage.setItem(storageKey, newTheme);
-    }, [storageKey]);
     const resolvedTheme = useMemo(() => {
         if (theme === Theme.SYSTEM) {
             return systemColorScheme === 'dark' ? 'dark' : 'light';
         }
         return theme === Theme.DARK ? 'dark' : 'light';
     }, [theme, systemColorScheme]);
+    // Track previous resolved theme for animation
+    const prevResolvedThemeRef = useRef(resolvedTheme);
+    useEffect(() => {
+        if (loaded && prevResolvedThemeRef.current !== resolvedTheme) {
+            prevResolvedThemeRef.current = resolvedTheme;
+            fadeAnim.setValue(0.7);
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 250,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [resolvedTheme, loaded, fadeAnim]);
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+        AsyncStorage.setItem(storageKey, newTheme);
+    }, [storageKey]);
     const colors = useMemo(() => (resolvedTheme === 'dark' ? darkColors : lightColors), [resolvedTheme]);
     const value = useMemo(() => ({
         theme,
@@ -44,7 +72,7 @@ export function ThemeProvider({ children, initialTheme, storageKeyPrefix, }) {
     if (!loaded) {
         return null;
     }
-    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx(Animated.View, { style: { flex: 1, opacity: fadeAnim }, children: children }) }));
 }
 /**
  * Hook to access theme context.

package/dist/src/theme/colors.d.ts

@@ -1,6 +1,10 @@
 /**
- * Color palette for building_blocks_rn.
- * Matches the web app's Tailwind color tokens.
+ * @fileoverview Color palette and theme color definitions for React Native.
+ *
+ * Defines the color palette (matching Tailwind CSS color tokens), the
+ * `ThemeColors` interface (20 properties), and both light and dark theme
+ * color objects. Light mode uses white/light-gray surfaces; dark mode uses
+ * gray-800/900 surfaces with inverted text colors.
  */
 export declare const palette: {
     readonly primary: {

package/dist/src/theme/colors.js

@@ -1,6 +1,10 @@
 /**
- * Color palette for building_blocks_rn.
- * Matches the web app's Tailwind color tokens.
+ * @fileoverview Color palette and theme color definitions for React Native.
+ *
+ * Defines the color palette (matching Tailwind CSS color tokens), the
+ * `ThemeColors` interface (20 properties), and both light and dark theme
+ * color objects. Light mode uses white/light-gray surfaces; dark mode uses
+ * gray-800/900 surfaces with inverted text colors.
  */
 export const palette = {
     primary: {

package/dist/src/theme/spacing.d.ts

@@ -1,6 +1,9 @@
 /**
- * Spacing scale for consistent layout.
- * Values in logical pixels.
+ * @fileoverview Spacing scale constants for React Native layout.
+ *
+ * Provides a consistent spacing scale (xs through 5xl) with values in
+ * logical pixels, used throughout all building_blocks_rn components
+ * for margins, paddings, and gaps.
  */
 export declare const spacing: {
     readonly xs: 4;

package/dist/src/theme/spacing.js

@@ -1,6 +1,9 @@
 /**
- * Spacing scale for consistent layout.
- * Values in logical pixels.
+ * @fileoverview Spacing scale constants for React Native layout.
+ *
+ * Provides a consistent spacing scale (xs through 5xl) with values in
+ * logical pixels, used throughout all building_blocks_rn components
+ * for margins, paddings, and gaps.
  */
 export const spacing = {
     xs: 4,

package/dist/src/theme/typography.d.ts

@@ -1,7 +1,11 @@
-import { FontSize } from '../types';
 /**
- * Typography scale.
+ * @fileoverview Typography scale and font utilities for React Native.
+ *
+ * Defines font sizes (xs through 4xl), font weights (normal through bold),
+ * and a `getFontSizeMultiplier()` utility that maps the `FontSize` enum
+ * to a numeric scale factor (0.875 for small, 1.0 for medium, 1.125 for large).
  */
+import { FontSize } from '../types';
 export declare const fontSizes: {
     readonly xs: 12;
     readonly sm: 14;

package/dist/src/theme/typography.js

@@ -1,7 +1,11 @@
-import { FontSize } from '../types';
 /**
- * Typography scale.
+ * @fileoverview Typography scale and font utilities for React Native.
+ *
+ * Defines font sizes (xs through 4xl), font weights (normal through bold),
+ * and a `getFontSizeMultiplier()` utility that maps the `FontSize` enum
+ * to a numeric scale factor (0.875 for small, 1.0 for medium, 1.125 for large).
  */
+import { FontSize } from '../types';
 export const fontSizes = {
     xs: 12,
     sm: 14,

package/macos/WebAuthModule.h

@@ -0,0 +1,4 @@
+#import <React/RCTBridgeModule.h>
+
+@interface WebAuthModule : NSObject <RCTBridgeModule>
+@end

package/macos/WebAuthModule.m

@@ -0,0 +1,104 @@
+#import "WebAuthModule.h"
+#import <AuthenticationServices/AuthenticationServices.h>
+#import <CommonCrypto/CommonDigest.h>
+#import <Security/Security.h>
+
+@interface WebAuthModule () <ASWebAuthenticationPresentationContextProviding>
+@property (nonatomic, strong) ASWebAuthenticationSession *authSession;
+@end
+
+@implementation WebAuthModule
+
+RCT_EXPORT_MODULE();
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+RCT_EXPORT_METHOD(authenticate:(NSString *)urlString
+                  callbackURLScheme:(NSString *)callbackURLScheme
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject) {
+  dispatch_async(dispatch_get_main_queue(), ^{
+    NSURL *authURL = [NSURL URLWithString:urlString];
+    if (!authURL) {
+      reject(@"INVALID_URL", @"Invalid authentication URL", nil);
+      return;
+    }
+
+    self.authSession =
+      [[ASWebAuthenticationSession alloc]
+        initWithURL:authURL
+        callbackURLScheme:callbackURLScheme
+        completionHandler:^(NSURL * _Nullable callbackURL,
+                            NSError * _Nullable error) {
+          self.authSession = nil;
+          if (error) {
+            if (error.code == ASWebAuthenticationSessionErrorCodeCanceledLogin) {
+              resolve([NSNull null]);
+            } else {
+              reject(@"AUTH_ERROR", error.localizedDescription, error);
+            }
+            return;
+          }
+          if (callbackURL) {
+            resolve(callbackURL.absoluteString);
+          } else {
+            resolve([NSNull null]);
+          }
+        }];
+
+    self.authSession.presentationContextProvider = self;
+    self.authSession.prefersEphemeralWebBrowserSession = NO;
+
+    if (![self.authSession start]) {
+      self.authSession = nil;
+      reject(@"SESSION_ERROR",
+             @"Failed to start authentication session", nil);
+    }
+  });
+}
+
+RCT_EXPORT_METHOD(generateCodeVerifier:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject) {
+  uint8_t randomBytes[32];
+  OSStatus status = SecRandomCopyBytes(kSecRandomDefault, 32, randomBytes);
+  if (status != errSecSuccess) {
+    reject(@"RANDOM_ERROR", @"Failed to generate random bytes", nil);
+    return;
+  }
+
+  NSData *data = [NSData dataWithBytes:randomBytes length:32];
+  NSString *base64 = [data base64EncodedStringWithOptions:0];
+  NSString *base64url = base64;
+  base64url = [base64url stringByReplacingOccurrencesOfString:@"+" withString:@"-"];
+  base64url = [base64url stringByReplacingOccurrencesOfString:@"/" withString:@"_"];
+  base64url = [base64url stringByReplacingOccurrencesOfString:@"=" withString:@""];
+  resolve(base64url);
+}
+
+RCT_EXPORT_METHOD(sha256:(NSString *)input
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject) {
+  NSData *data = [input dataUsingEncoding:NSUTF8StringEncoding];
+  uint8_t digest[CC_SHA256_DIGEST_LENGTH];
+  CC_SHA256(data.bytes, (CC_LONG)data.length, digest);
+
+  // Base64url encode
+  NSData *hashData = [NSData dataWithBytes:digest length:CC_SHA256_DIGEST_LENGTH];
+  NSString *base64 = [hashData base64EncodedStringWithOptions:0];
+  NSString *base64url = base64;
+  base64url = [base64url stringByReplacingOccurrencesOfString:@"+" withString:@"-"];
+  base64url = [base64url stringByReplacingOccurrencesOfString:@"/" withString:@"_"];
+  base64url = [base64url stringByReplacingOccurrencesOfString:@"=" withString:@""];
+  resolve(base64url);
+}
+
+#pragma mark - ASWebAuthenticationPresentationContextProviding
+
+- (ASPresentationAnchor)presentationAnchorForWebAuthenticationSession:
+    (ASWebAuthenticationSession *)session {
+  return NSApp.keyWindow ?: NSApp.windows.firstObject;
+}
+
+@end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,6 +20,10 @@
   },
   "files": [
     "dist",
+    "macos",
+    "windows",
+    "react-native.config.js",
+    "building-blocks-rn-macos.podspec",
     "README.md"
   ],
   "scripts": {
@@ -27,7 +31,7 @@
     "dev": "tsc -p tsconfig.build.json --watch",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "test": "echo 'No tests configured yet'",
+    "test": "vitest run",
     "lint": "eslint . --ext ts,tsx --ignore-pattern 'dist' --ignore-pattern 'node_modules' --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --ignore-pattern 'dist' --ignore-pattern 'node_modules' --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json}\"",
@@ -66,6 +70,13 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/native": "^7.1.28",
+    "@react-navigation/native-stack": "^7.10.1",
+    "@sudobility/types": "^1.9.55",
+    "@tanstack/react-query": "^5.90.19",
+    "@types/react": "~19.1.0",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
     "eslint": "^9.38.0",
@@ -73,19 +84,16 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.0",
+    "i18next": "^25.8.0",
+    "jsdom": "^28.1.0",
     "prettier": "^3.6.2",
-    "@types/react": "~19.1.0",
-    "typescript": "~5.9.2",
     "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-i18next": "^16.5.3",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "~5.6.0",
-    "@react-navigation/native": "^7.1.28",
-    "@react-navigation/native-stack": "^7.10.1",
-    "@react-native-async-storage/async-storage": "2.2.0",
-    "i18next": "^25.8.0",
-    "react-i18next": "^16.5.3",
-    "@tanstack/react-query": "^5.90.19",
-    "@sudobility/types": "^1.9.54"
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.18"
   },
   "publishConfig": {
     "access": "public"

package/react-native.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: null,
+      android: null,
+      macos: {
+        podspecPath: __dirname + '/building-blocks-rn-macos.podspec',
+      },
+    },
+  },
+};