@sudobility/building_blocks_rn 0.0.7 → 0.0.9

package/dist/src/app/SudobilityAppRN.d.ts

@@ -1,6 +1,9 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { i18n as I18nInstance } from 'i18next';
 import { Theme } from '../types';
+/**
+ * Props for the SudobilityAppRN base app wrapper.
+ */
 export interface SudobilityAppRNProps {
     children: ReactNode;
     /** Pre-configured i18n instance */
@@ -26,4 +29,29 @@ export interface SudobilityAppRNProps {
     /** Storage key prefix for persisted settings */
     storageKeyPrefix?: string;
 }
+/**
+ * Base app wrapper that composes providers in a specific order (outermost to innermost):
+ *
+ * 1. SafeAreaProvider (always present)
+ * 2. I18nextProvider (if `i18n` provided)
+ * 3. ThemeProvider (or custom `ThemeProviderComponent`)
+ * 4. QueryClientProvider (if provided)
+ * 5. ToastProvider (or custom `ToastProviderComponent`)
+ * 6. AppProviders (custom additional providers)
+ *
+ * @example
+ * ```tsx
+ * import { SudobilityAppRN } from '@sudobility/building_blocks_rn';
+ *
+ * function App() {
+ *   return (
+ *     <SudobilityAppRN i18n={i18n} initialTheme={Theme.SYSTEM}>
+ *       <NavigationContainer>
+ *         <RootNavigator />
+ *       </NavigationContainer>
+ *     </SudobilityAppRN>
+ *   );
+ * }
+ * ```
+ */
 export declare function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, }: SudobilityAppRNProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/app/SudobilityAppRN.js

@@ -3,6 +3,31 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from '../theme/ThemeContext';
 import { ToastProvider } from '../components/toast/ToastProvider';
+/**
+ * Base app wrapper that composes providers in a specific order (outermost to innermost):
+ *
+ * 1. SafeAreaProvider (always present)
+ * 2. I18nextProvider (if `i18n` provided)
+ * 3. ThemeProvider (or custom `ThemeProviderComponent`)
+ * 4. QueryClientProvider (if provided)
+ * 5. ToastProvider (or custom `ToastProviderComponent`)
+ * 6. AppProviders (custom additional providers)
+ *
+ * @example
+ * ```tsx
+ * import { SudobilityAppRN } from '@sudobility/building_blocks_rn';
+ *
+ * function App() {
+ *   return (
+ *     <SudobilityAppRN i18n={i18n} initialTheme={Theme.SYSTEM}>
+ *       <NavigationContainer>
+ *         <RootNavigator />
+ *       </NavigationContainer>
+ *     </SudobilityAppRN>
+ *   );
+ * }
+ * ```
+ */
 export function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, }) {
     let content = _jsx(_Fragment, { children: children });
     // Wrap with additional providers (innermost)

package/dist/src/hooks/useResponsive.d.ts

@@ -1,11 +1,36 @@
+/**
+ * Responsive dimension and breakpoint information.
+ */
 export interface ResponsiveInfo {
+    /** Current window width in logical pixels */
     width: number;
+    /** Current window height in logical pixels */
     height: number;
+    /** true when width < 380 (small phones) */
     isSmall: boolean;
+    /** true when width is 380-768 (standard phones) */
     isMedium: boolean;
+    /** true when width > 768 (tablets and larger) */
     isLarge: boolean;
 }
 /**
  * Hook for responsive breakpoint detection.
+ *
+ * Uses `useWindowDimensions` to reactively track screen size
+ * and provides boolean flags for common breakpoint ranges.
+ *
+ * @returns Responsive dimension info with breakpoint booleans
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isLarge, isSmall } = useResponsive();
+ *   return (
+ *     <View style={{ padding: isLarge ? 24 : isSmall ? 8 : 16 }}>
+ *       <Text>Responsive content</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
  */
 export declare function useResponsive(): ResponsiveInfo;

package/dist/src/hooks/useResponsive.js

@@ -1,6 +1,29 @@
+/**
+ * @fileoverview Responsive breakpoint detection hook for React Native.
+ *
+ * Provides window dimension info and boolean breakpoint flags
+ * for adapting layouts to different screen sizes.
+ */
 import { useWindowDimensions } from 'react-native';
 /**
  * Hook for responsive breakpoint detection.
+ *
+ * Uses `useWindowDimensions` to reactively track screen size
+ * and provides boolean flags for common breakpoint ranges.
+ *
+ * @returns Responsive dimension info with breakpoint booleans
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isLarge, isSmall } = useResponsive();
+ *   return (
+ *     <View style={{ padding: isLarge ? 24 : isSmall ? 8 : 16 }}>
+ *       <Text>Responsive content</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
  */
 export function useResponsive() {
     const { width, height } = useWindowDimensions();

package/dist/src/utils/styles.d.ts

@@ -6,6 +6,13 @@ type NamedStyles<T> = {
 /**
  * Create a hook that generates themed styles.
  *
+ * Returns a custom hook that, when called inside a component, produces
+ * a memoized `StyleSheet` object derived from the current theme colors.
+ * Styles recompute only when the theme changes (light/dark switch).
+ *
+ * @param factory - Function that receives `ThemeColors` and returns a style object
+ * @returns A React hook that returns the themed StyleSheet
+ *
  * @example
  * ```tsx
  * const useStyles = createThemedStyles((colors) => ({

package/dist/src/utils/styles.js

@@ -1,9 +1,22 @@
+/**
+ * @fileoverview Themed style utilities for React Native.
+ *
+ * Provides `createThemedStyles()`, the standard pattern for creating
+ * theme-reactive StyleSheet objects used by every component in this package.
+ */
 import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../theme/ThemeContext';
 /**
  * Create a hook that generates themed styles.
  *
+ * Returns a custom hook that, when called inside a component, produces
+ * a memoized `StyleSheet` object derived from the current theme colors.
+ * Styles recompute only when the theme changes (light/dark switch).
+ *
+ * @param factory - Function that receives `ThemeColors` and returns a style object
+ * @returns A React hook that returns the themed StyleSheet
+ *
  * @example
  * ```tsx
  * const useStyles = createThemedStyles((colors) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",
@@ -85,7 +85,7 @@
     "i18next": "^25.8.0",
     "react-i18next": "^16.5.3",
     "@tanstack/react-query": "^5.90.19",
-    "@sudobility/types": "^1.9.52"
+    "@sudobility/types": "^1.9.54"
   },
   "publishConfig": {
     "access": "public"