@youversion/platform-react-ui 0.4.2 → 0.4.3

package/README.md

@@ -1,346 +1,178 @@
+![License](https://img.shields.io/badge/license-Apache%20License%202.0-blue)
+![React >= 19.0.0](https://img.shields.io/badge/React-%3E%3D%2019.0.0-61dafb?logo=react&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
+
 # @youversion/platform-react-ui
 
-React SDK for YouVersion Platform (web).
+Pre-built React components for building Bible-based applications with the YouVersion Platform SDK. Get styled, production-ready components that work seamlessly with Bible content.
+
+## Overview
+
+`@youversion/platform-react-ui` provides ready-to-use React components for Bible-focused applications. Features include pre-styled components with theming support, light and dark mode out of the box, scoped CSS to prevent conflicts, and accessibility-first design.
+
+This package depends on [@youversion/platform-react-hooks](../hooks/README.md) and [@youversion/platform-core](../core/README.md).
+
+> **📚 Full Documentation:** [developers.youversion.com/sdks/react](https://developers.youversion.com/sdks/react)
 
 ## Installation
 
 ```bash
 pnpm add @youversion/platform-react-ui
-# or
-npm install @youversion/platform-react-ui
-# or
-yarn add @youversion/platform-react-ui
 ```
 
-## Quick Start
+### Peer Dependencies
 
-### Import the styles
+Requires React 19.0.0 or higher:
 
-For the components to be styled, import the CSS once at the app’s global entry.
+```bash
+pnpm install react@19.0.0
+```
 
-- Next.js App Router: import in your app root (for example, [examples/nextjs/src/app/layout.tsx](examples/nextjs/src/app/layout.tsx:1))
-  ```ts
-  // app/layout.tsx
-  import '@youversion/platform-react-ui/styles.css';
-  ```
-- Vite/SPA: import it once in your main entry file (e.g., main.tsx) or a global stylesheet that is imported there:
-  ```ts
-  // main.tsx
-  import '@youversion/platform-react-ui/styles.css';
-  ```
+### Prerequisites
 
-### Add the Providers
+- YouVersion Platform App Key ([Get from platform.youversion.com](https://platform.youversion.com/))
 
-Wrap your app with the required providers. YVPProvider handles authentication, while BibleSDKProvider enables Bible-related components like BibleTextView.
+## When to Use This Package
+
+Use `@youversion/platform-react-ui` when you need:
+- ✅ Production-ready Bible components for your React app
+- ✅ Pre-styled components with light/dark mode
+- ✅ Minimal setup—wrap your app with providers and use components
+- ✅ Consistent, accessible UI out of the box
+
+**Use other packages instead if:**
+- ❌ Need low-level API access → Use [@youversion/platform-core](../core/README.md)
+- ❌ Want custom UI → Use [@youversion/platform-react-hooks](../hooks/README.md)
+
+## Related Packages
+
+- **[@youversion/platform-core](../core/README.md)** - Low-level TypeScript SDK for direct API access
+- **[@youversion/platform-react-hooks](../hooks/README.md)** - React hooks for declarative data fetching
+
+## Setup
+
+Import styles and wrap your app with required providers:
 
 ```tsx
 import { BibleSDKProvider, YVPProvider } from '@youversion/platform-react-ui';
+import '@youversion/platform-react-ui/styles.css';
 
 function App() {
   return (
-    <BibleSDKProvider appId="your-app-id">
-      <YVPProvider config={{ appId: 'your-app-id'}}>
-        <YourApp />
+    <BibleSDKProvider appKey="YOUR_APP_KEY">
+      <YVPProvider config={{ appKey: "YOUR_APP_KEY" }}>
+        {/* All components work here */}
       </YVPProvider>
     </BibleSDKProvider>
   );
 }
 ```
 
-## Theming
-
-The React SDK’s theme is fully scoped to its own wrapper to avoid conflicts with host apps and ShadCN UI variables.
+> **⚠️ Missing Provider Error:** If components don't render correctly, check that both `BibleSDKProvider` and `YVPProvider` wrap your component tree.
 
-- Dark and light modes are controlled via the theme prop on [YVPProvider()](packages/ui/src/providers/YVPProvider.tsx:32)
-- CSS variables are defined under the SDK wrapper only, preventing collisions with app-level variables
+## Quick Start
 
-Basic usage (set dark or light):
+**Next.js App Router:**
 
 ```tsx
-import { BibleSDKProvider, YVPProvider } from '@youversion/platform-react-ui';
+// app/layout.tsx
 import '@youversion/platform-react-ui/styles.css';
+import { BibleSDKProvider, YVPProvider } from '@youversion/platform-react-ui';
 
-export default function App() {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <BibleSDKProvider appId="YOUR_APP_ID">
-      <YVPProvider
-        config={{ appId: 'YOUR_APP_ID'}}
-        theme="dark"  // 'light' | 'dark' (default is 'light')
-      >
-        <YourApp />
-      </YVPProvider>
-    </BibleSDKProvider>
+    <html lang="en">
+      <body>
+        <BibleSDKProvider appKey={process.env.NEXT_PUBLIC_APP_KEY!}>
+          <YVPProvider config={{ appKey: process.env.NEXT_PUBLIC_APP_KEY! }}>
+            {children}
+          </YVPProvider>
+        </BibleSDKProvider>
+      </body>
+    </html>
   );
 }
 ```
 
-Toggle theme at runtime:
+```tsx
+// app/page.tsx
+import { VerseOfTheDay } from '@youversion/platform-react-ui';
+
+export default function Home() {
+  return <VerseOfTheDay versionId={111} />;
+}
+```
+
+## Features
+
+- Ready-to-use UI components for Bible content
+- Light and dark mode toggling
+- CSS variable overrides for customization
+- Verse display with proper formatting
+- Bible version and chapter selection
+- Full TypeScript support
+- Accessibility features
+
+## Theming
+
+Toggle theme via the `YVPProvider`:
 
 ```tsx
 import { useState } from 'react';
 import { BibleSDKProvider, YVPProvider } from '@youversion/platform-react-ui';
-import '@youversion/platform-react-ui/styles.css';
 
 export default function App() {
   const [theme, setTheme] = useState<'light' | 'dark'>('light');
 
   return (
-    <BibleSDKProvider appId="YOUR_APP_ID">
-      <YVPProvider
-        config={{ appId: 'YOUR_APP_ID' }}
-        theme={theme}
-      >
+    <BibleSDKProvider appKey="YOUR_APP_KEY">
+      <YVPProvider config={{ appKey: "YOUR_APP_KEY" }} theme={theme}>
         <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
           Toggle theme
         </button>
-        <YourApp />
       </YVPProvider>
     </BibleSDKProvider>
   );
 }
 ```
 
-## Customizing Styles
-
-The React SDK uses scoped CSS variables prefixed with `--yv-` to avoid conflicts with your app's styles. You can override these variables to customize colors, fonts, and Bible reader appearance.
-
-### Overriding CSS Variables
-
-Add custom styles after importing `@youversion/platform-react-ui/styles.css`:
+Customize via CSS variables:
 
 ```css
 [data-yv-sdk] {
-  /* Override theme colors */
-  --yv-primary: #your-color;
-  --yv-background: #your-bg-color;
-
-  /* Override Bible reader styles */
+  --yv-primary: #your-primary-color;
+  --yv-background: #your-background-color;
   --yv-reader-font-size: 18px;
-  --yv-reader-line-height: 1.5;
-  --yv-reader-font-family: 'Your Font', serif;
-}
-```
-
-### Key Customizable Variables
-
-#### Theme Colors
-- `--yv-background`, `--yv-foreground`: Main background and text colors
-- `--yv-primary`, `--yv-primary-foreground`: Primary button colors
-- `--yv-secondary`, `--yv-secondary-foreground`: Secondary colors
-- `--yv-muted`, `--yv-muted-foreground`: Muted text colors
-- `--yv-accent`, `--yv-accent-foreground`: Accent colors
-- `--yv-destructive`, `--yv-destructive-foreground`: Error/destructive colors
-
-#### Bible Reader
-- `--yv-reader-font-family`: Font stack for Bible text (defaults to Inter and Source Serif Pro)
-- `--yv-reader-font-size`: Font size for verses (default: 20px)
-- `--yv-reader-line-height`: Line height for verses (default: 1.625)
-- `--yv-red`, `--yv-red-dark-mode`: Color for words of Jesus
-
-#### Color Palettes
-The SDK includes predefined palettes (teal, blue, purple, etc.) that can be overridden or used in your components via Tailwind classes like `yv:text-teal-30`.
-
-## Components
-
-### SignInButton
-
-```tsx
-import { SignInButton } from '@youversion/platform-react-ui';
-
-export default function Page() {
-  return (
-    <main className="flex flex-col items-center gap-4">
-      <SignInButton />
-    </main>
-  );
 }
 ```
 
-### Verse
-
-The Verse component provides sub-components for rendering Bible verses.
-
-#### Verse.Text
-
-Renders a single verse with superscript number and text.
-
-```tsx
-import { Verse } from '@youversion/platform-react-ui';
-
-export default function Page() {
-  return (
-    <Verse.Text number={16} text="For God so loved the world..." size="lg" />
-  );
-}
-```
-
-Props:
-- `number`: The verse number.
-- `text`: The verse text.
-- `size`: Optional size variant ('default' | 'lg', default: 'default').
-
-#### Verse.Html
-
-Renders HTML content for Bible verses with optional styling.
-
-```tsx
-import { Verse } from '@youversion/platform-react-ui';
-
-export default function Page() {
-  return (
-    <Verse.Html html="<p>Verse content</p>" fontFamily="serif" fontSize={20} lineHeight={1.5} />
-  );
-}
-```
-
-Props:
-- `html`: The HTML content of the verse(s).
-- `fontFamily`: Optional font family for the text.
-- `fontSize`: Optional font size in pixels.
-- `lineHeight`: Optional line height.
-
-### BibleTextView
-
-Renders Bible verses or passages from the YouVersion API. Requires the app to be wrapped with `BibleSDKProvider`.
-
-```tsx
-import { BibleTextView } from '@youversion/platform-react-ui';
-
-export default function Page() {
-  return (
-    <BibleTextView
-      reference="JHN.3.16"
-      versionId={1}
-      fontFamily="serif"
-      fontSize={20}
-      lineHeight={1.5}
-    />
-  );
-}
-```
+## Troubleshooting
 
-Props:
-- `reference`: The Bible reference (e.g., "JHN.3.16" for John 3:16).
-- `versionId`: The Bible version ID (e.g., 1 for KJV).
-- `fontFamily`: Optional font family for the text.
-- `fontSize`: Optional font size in pixels.
-- `lineHeight`: Optional line height.
+### Styles Not Applied
 
-## Hooks
+**Solution:** Ensure you imported `@youversion/platform-react-ui/styles.css` at your app's root entry point (e.g., `app/layout.tsx` for Next.js).
 
-### useAuthentication
+### Next.js Error: "Global CSS cannot be imported from within node_modules"
 
-Provides the auth state and actions (sign in/out, fetch profile). See implementation in [/src/hooks/useAuthentication.ts](./src/hooks/useAuthentication.ts).
+**Solution:** Move the import to your root layout file:
 
 ```tsx
-import { useAuthentication } from '@youversion/platform-react-ui';
-
-export function AuthControls() {
-  const { isAuthenticated, isLoading, signIn, signOut, fetchUserInfo } = useAuthentication();
-
-  if (isLoading) return <p>Loading…</p>;
-
-  return isAuthenticated ? (
-    <div className="flex items-center gap-2">
-      <button onClick={() => fetchUserInfo()} className="rounded-md px-4 py-2 bg-secondary text-secondary-foreground">
-        Fetch profile
-      </button>
-      <button onClick={() => signOut()} className="rounded-md px-4 py-2 bg-destructive text-white">
-        Sign out
-      </button>
-    </div>
-  ) : (
-    <button onClick={() => signIn()} className="rounded-md px-4 py-2 bg-primary text-primary-foreground">
-      Sign in with YouVersion
-    </button>
-  );
-}
+// app/layout.tsx
+import '@youversion/platform-react-ui/styles.css';
 ```
 
-
 ## Development
 
-### Project Structure
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions including Storybook setup.
 
-```
-packages/ui/
-├── .storybook/          # Storybook configuration
-├── src/
-│   ├── components/      # UI components (SignInButton, etc.)
-│   ├── hooks/           # React hooks (useAuthentication)
-│   ├── lib/             # Utility functions
-│   ├── providers/       # YVPProvider and context
-│   ├── styles/          # Global styles and CSS
-│   └── test/            # Test utilities
-├── scripts/             # Build scripts
-├── chromatic.config.json # Chromatic visual regression config
-└── package.json
-```
-
-### Storybook
-
-Storybook is used for component development and documentation.
-
-**Environment Setup:**
-
-Copy the `.env.example` file into a `.env.local` file in `packages/ui/` with the following environment variables for Storybook to work properly:
-
-```bash
-# Required for Storybook components that interact with YouVersion API
-STORYBOOK_YOUVERSION_APP_ID="your-app-id"
-
-# Optional: Required for Chromatic visual regression testing
-CHROMATIC_PROJECT_TOKEN="your-chromatic-token"
-```
-
-**Start Storybook:**
-```bash
-pnpm storybook
-```
-
-**Build Storybook:**
-```bash
-pnpm build-storybook
-```
-
-### Visual Testing with Chromatic
-
-Chromatic provides visual regression testing for Storybook components.
-
-**Run Chromatic:**
-```bash
-pnpm chromatic
-```
-
-This command:
-- Uses `dotenv` to load `.env.local`
-- Requires `CHROMATIC_PROJECT_TOKEN` in `.env.local` (see Storybook section above)
-- Runs visual regression tests on component stories
-- Only tests changed components (see [chromatic.config.json](chromatic.config.json))
-
-### Commands
-
-See [package.json](package.json) for all available scripts:
-- `pnpm build` - Build all outputs (CSS, JS, types)
-- `pnpm dev` - Watch mode for development
-- `pnpm test` - Run Vitest tests
-- `pnpm test:watch` - Run tests in watch mode
-- `pnpm typecheck` - Type check without emitting
-- `pnpm lint` - Run ESLint
-
-## Troubleshooting
+## License
 
-- Styles not applied:
-  - Ensure you imported `@youversion/platform-react-ui/styles.css` at your app's global entry (e.g., [examples/nextjs/src/app/layout.tsx](../../examples/nextjs/src/app/layout.tsx)).
-  - Do not import the CSS from inside component modules.
-- Next.js error “Global CSS cannot be imported from within node_modules”:
-  - Move the import to your root layout (App Router)
-- Storybook components not working:
-  - Ensure `STORYBOOK_YOUVERSION_APP_ID` is  set in `.env.local`
-  - Components will use fallback demo values if environment variables are not set
-- Chromatic not running:
-  - Ensure `CHROMATIC_PROJECT_TOKEN` is set in `.env.local`
+See [LICENSE](../../LICENSE)
 
-## License
+## Support
 
-License is TBD.
+- GitHub Issues: [Create an issue](https://github.com/youversion/platform-sdk-react/issues)
+- Platform Docs: [platform.youversion.com](https://platform.youversion.com/)
+- React Hooks: [@youversion/platform-react-hooks](../hooks/README.md)
+- Core SDK: [@youversion/platform-core](../core/README.md)
+- Monorepo: [YouVersion Platform SDK](../../README.md)

package/dist/components/bible-chapter-picker.d.ts

@@ -13,7 +13,14 @@ export type RootProps = {
     children?: ReactNode;
 };
 declare function Root({ book: controlledBook, defaultBook, onBookChange, chapter: controlledChapter, defaultChapter, onChapterChange, versionId, background, children, }: RootProps): import("react/jsx-runtime").JSX.Element;
-export type TriggerProps = React.ComponentProps<typeof PopoverTrigger>;
+export type TriggerProps = Omit<React.ComponentProps<typeof PopoverTrigger>, 'children'> & {
+    children?: React.ReactNode | ((props: {
+        book: string;
+        chapter: string;
+        currentBook: BibleBook | undefined;
+        loading: boolean;
+    }) => React.ReactNode);
+};
 declare function Trigger({ asChild, children, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare const BibleChapterPicker: {
     Root: typeof Root;

package/dist/components/bible-chapter-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bible-chapter-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-chapter-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAW,cAAc,EAAgC,MAAM,cAAc,CAAC;AAuBrF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,IAAI,EAAE,cAAc,EACpB,WAAgB,EAChB,YAAY,EACZ,OAAO,EAAE,iBAAiB,EAC1B,cAAmB,EACnB,eAAe,EACf,SAAS,EACT,UAAoB,EACpB,QAAQ,GACT,EAAE,SAAS,2CA2JX;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAgBpE;AAED,eAAO,MAAM,kBAAkB;;;CAAuC,CAAC"}
+{"version":3,"file":"bible-chapter-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-chapter-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAW,cAAc,EAAgC,MAAM,cAAc,CAAC;AAuBrF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,IAAI,EAAE,cAAc,EACpB,WAAgB,EAChB,YAAY,EACZ,OAAO,EAAE,iBAAiB,EAC1B,cAAmB,EACnB,eAAe,EACf,SAAS,EACT,UAAoB,EACpB,QAAQ,GACT,EAAE,SAAS,2CA2JX;AAED,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACzF,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,SAAS,GAAG,SAAS,CAAC;QACnC,OAAO,EAAE,OAAO,CAAC;KAClB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5B,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAqBpE;AAED,eAAO,MAAM,kBAAkB;;;CAAuC,CAAC"}

package/dist/components/bible-reader.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export type RootProps = {
+    book?: string;
+    defaultBook?: string;
+    onBookChange?: (book: string) => void;
+    chapter?: string;
+    defaultChapter?: string;
+    onChapterChange?: (chapter: string) => void;
+    versionId?: number;
+    defaultVersionId?: number;
+    onVersionChange?: (versionId: number) => void;
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    showVerseNumbers?: boolean;
+    background?: 'light' | 'dark';
+    children?: ReactNode;
+};
+declare function Root({ book: controlledBook, defaultBook, onBookChange, chapter: controlledChapter, defaultChapter, onChapterChange, versionId: controlledVersionId, defaultVersionId, onVersionChange, fontFamily, fontSize, lineHeight, showVerseNumbers, background, children, }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare function Content(): import("react/jsx-runtime").JSX.Element;
+declare function Toolbar({ border }: {
+    border?: 'top' | 'bottom';
+}): import("react/jsx-runtime").JSX.Element;
+export declare const BibleReader: {
+    Root: typeof Root;
+    Content: typeof Content;
+    Toolbar: typeof Toolbar;
+};
+export type BibleReaderRootProps = RootProps;
+export {};
+//# sourceMappingURL=bible-reader.d.ts.map

package/dist/components/bible-reader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bible-reader.d.ts","sourceRoot":"","sources":["../../src/components/bible-reader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiC3E,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,OAAO,EAAE,iBAAiB,EAC1B,cAAoB,EACpB,eAAe,EACf,SAAS,EAAE,mBAAmB,EAC9B,gBAAsB,EACtB,eAAe,EACf,UAAU,EACV,QAAa,EACb,UAAU,EACV,gBAAuB,EACvB,UAAoB,EACpB,QAAQ,GACT,EAAE,SAAS,2CA4CX;AAED,iBAAS,OAAO,4CA8Cf;AAED,iBAAS,OAAO,CAAC,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CA+CjE;AAED,eAAO,MAAM,WAAW;;;;CAAgD,CAAC;AACzE,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC"}

package/dist/components/bible-reader.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BibleReader } from './bible-reader';
+declare const meta: Meta<typeof BibleReader.Root>;
+export default meta;
+type Story = StoryObj<typeof BibleReader.Root>;
+/**
+ * Default uncontrolled story: Component manages its own state with John 1 NIV as default
+ */
+export declare const Default: Story;
+/**
+ * Dark theme
+ */
+export declare const DarkTheme: Story;
+/**
+ * Custom styling with larger font and increased line height
+ */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=bible-reader.stories.d.ts.map

package/dist/components/bible-reader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bible-reader.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-reader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAAC,IAAI,CA0CvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC"}

package/dist/components/bible-version-picker.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { PopoverTrigger } from './ui/popover';
+import type { BibleVersion } from '@youversion/platform-core';
 export type RootProps = {
     versionId: number;
     onVersionChange?: (versionId: number) => void;
@@ -8,13 +9,19 @@ export type RootProps = {
     children?: ReactNode;
 };
 declare function Root({ versionId: controlledVersionId, onVersionChange, background, side, children, }: RootProps): import("react/jsx-runtime").JSX.Element;
-export type TriggerProps = React.ComponentProps<typeof PopoverTrigger>;
-declare function Trigger({ asChild, children, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+export type BibleVersionPickerTriggerProps = Omit<React.ComponentProps<typeof PopoverTrigger>, 'children'> & {
+    children?: React.ReactNode | ((props: {
+        version: BibleVersion | null;
+        loading: boolean;
+    }) => React.ReactNode);
+};
+declare function Trigger({ asChild, children, ...props }: BibleVersionPickerTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function Content(): import("react/jsx-runtime").JSX.Element;
 export declare const BibleVersionPicker: {
     Root: typeof Root;
     Trigger: typeof Trigger;
     Content: typeof Content;
 };
+export type BibleVersionPickerRootProps = RootProps;
 export {};
 //# sourceMappingURL=bible-version-picker.d.ts.map

package/dist/components/bible-version-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bible-version-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7F,OAAO,EAAW,cAAc,EAAgC,MAAM,cAAc,CAAC;AAsCrF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,SAAS,EAAE,mBAAmB,EAC9B,eAAe,EACf,UAAoB,EACpB,IAAY,EACZ,QAAQ,GACT,EAAE,SAAS,2CAqDX;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAgBpE;AAED,iBAAS,OAAO,4CA0Lf;AAED,eAAO,MAAM,kBAAkB;;;;CAAgD,CAAC"}
+{"version":3,"file":"bible-version-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7F,OAAO,EAAW,cAAc,EAAgC,MAAM,cAAc,CAAC;AAErF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAoC9D,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,SAAS,EAAE,mBAAmB,EAC9B,eAAe,EACf,UAAoB,EACpB,IAAY,EACZ,QAAQ,GACT,EAAE,SAAS,2CAqDX;AAED,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAC3C,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,8BAA8B,2CAqBtF;AAED,iBAAS,OAAO,4CA0Lf;AAED,eAAO,MAAM,kBAAkB;;;;CAAgD,CAAC;AAChF,MAAM,MAAM,2BAA2B,GAAG,SAAS,CAAC"}

package/dist/components/bible-version-picker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bible-version-picker.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA8B5E,QAAA,MAAM,IAAI;;2DAV8D,SAAS;;;;yBAdpD,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;CAgDV,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAmC1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA4BtC,CAAC"}
+{"version":3,"file":"bible-version-picker.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AA0B5E,QAAA,MAAM,IAAI;;2DAV8D,SAAS;;;;yBAVpD,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;CA4CV,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAmC1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA4BtC,CAAC"}

package/dist/components/bible-widget-view.stories.d.ts

@@ -1,5 +1,5 @@
-import type { StoryObj } from "@storybook/react-vite";
-import { BibleWidgetView } from "./bible-widget-view";
+import type { StoryObj } from '@storybook/react-vite';
+import { BibleWidgetView } from './bible-widget-view';
 declare const meta: {
     title: string;
     component: typeof BibleWidgetView;

package/dist/components/bible-widget-view.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bible-widget-view.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAA,MAAM,IAAI;;;;;;yBAOE,KAAK,CAAC,aAAa,KAAG,KAAK,CAAC,YAAY;;;;;;;;;;;;CAmBZ,CAAC;AAEzC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}
+{"version":3,"file":"bible-widget-view.stories.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAA,MAAM,IAAI;;;;;;yBAOE,KAAK,CAAC,aAAa,KAAG,KAAK,CAAC,YAAY;;;;;;;;;;;;CAiBZ,CAAC;AAEzC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 export { BibleChapterPicker, type RootProps, type TriggerProps } from './bible-chapter-picker';
+export { BibleReader, type BibleReaderRootProps } from './bible-reader';
+export { BibleVersionPicker, type BibleVersionPickerRootProps, type BibleVersionPickerTriggerProps, } from './bible-version-picker';
 export { SignInButton, type SignInButtonProps } from './SignInButton';
 export { VerseOfTheDay, type VerseOfTheDayProps } from './verse-of-the-day';
 export { BibleTextView, type BibleTextViewProps } from './verse';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,GACpC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC"}