@youversion/platform-react-ui 1.12.2 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -43,29 +43,72 @@ function App() {
43
43
 
44
44
  ## Theming
45
45
 
46
- Toggle theme via the `YVPProvider`:
46
+ Set the theme via the `YouVersionProvider`'s `theme` prop. Defaults to `'light'`.
47
+
48
+ ```tsx
49
+ import { YouVersionProvider, BibleTextView } from '@youversion/platform-react-ui';
50
+
51
+ function App() {
52
+ return (
53
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme="dark">
54
+ <BibleTextView reference="JHN.1.1-4" versionId={111} />
55
+ </YouVersionProvider>
56
+ );
57
+ }
58
+ ```
59
+
60
+ ### Theme options
61
+
62
+ | Value | Behavior |
63
+ |-------|----------|
64
+ | `'light'` | Light mode (default) |
65
+ | `'dark'` | Dark mode |
66
+ | `'system'` | Follows the user's OS preference via `prefers-color-scheme` |
67
+
68
+ ### Following OS theme
69
+
70
+ Pass `theme="system"` to automatically match the user's OS setting:
71
+
72
+ ```tsx
73
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme="system">
74
+ {/* Components switch between light/dark based on OS preference */}
75
+ </YouVersionProvider>
76
+ ```
77
+
78
+ ### Toggling theme manually
47
79
 
48
80
  ```tsx
49
81
  import { useState } from 'react';
50
- import { YouVersionProvider, YVPProvider, BibleTextView } from '@youversion/platform-react-ui';
82
+ import { YouVersionProvider, BibleTextView } from '@youversion/platform-react-ui';
51
83
 
52
- export default function App() {
84
+ function App() {
53
85
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
54
86
 
55
87
  return (
56
- <YouVersionProvider appKey="YOUR_APP_KEY">
57
- <YVPProvider config={{ appKey: "YOUR_APP_KEY" }} theme={theme}>
58
- <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
59
- Toggle theme
60
- </button>
61
- <BibleTextView reference="JHN.1.1-4" versionId={111} />
62
- </YVPProvider>
88
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme={theme}>
89
+ <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
90
+ Toggle theme
91
+ </button>
92
+ <BibleTextView reference="JHN.1.1-4" versionId={111} />
63
93
  </YouVersionProvider>
64
94
  );
65
95
  }
66
96
  ```
67
97
 
68
- Customize via CSS variables:
98
+ ### Per-component overrides
99
+
100
+ Individual components accept a `background` prop to override the provider theme locally:
101
+
102
+ ```tsx
103
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme="light">
104
+ {/* This component uses dark styling despite the provider being light */}
105
+ <BibleReader.Root background="dark" versionId={111}>
106
+ <BibleReader.Content />
107
+ </BibleReader.Root>
108
+ </YouVersionProvider>
109
+ ```
110
+
111
+ ### Custom CSS variables
69
112
 
70
113
  ```css
71
114
  [data-yv-sdk] {
@@ -1 +1 @@
1
- {"version":3,"file":"bible-reader.d.ts","sourceRoot":"","sources":["../../src/components/bible-reader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA6Cf,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;AAMF,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,UAAoB,EACpB,QAA4B,EAC5B,UAAU,EACV,gBAAuB,EACvB,UAAU,EACV,QAAQ,GACT,EAAE,SAAS,2CAgFX;AAED,iBAAS,OAAO,4CAoEf;AAuCD,iBAAS,OAAO,CAAC,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CAmKjE;AAED,eAAO,MAAM,WAAW;;;;CAAgD,CAAC;AACzE,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC"}
1
+ {"version":3,"file":"bible-reader.d.ts","sourceRoot":"","sources":["../../src/components/bible-reader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA6Cf,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;AAMF,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,UAAoB,EACpB,QAA4B,EAC5B,UAAU,EACV,gBAAuB,EACvB,UAAU,EACV,QAAQ,GACT,EAAE,SAAS,2CAgFX;AAED,iBAAS,OAAO,4CAoEf;AA2CD,iBAAS,OAAO,CAAC,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CAmKjE;AAED,eAAO,MAAM,WAAW;;;;CAAgD,CAAC;AACzE,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import type { BibleVersion } from '@youversion/platform-core';
2
2
  import { type ReactNode } from 'react';
3
- export declare const RECENT_VERSIONS_KEY = "youversion-platform:picker:recent-versions";
4
3
  import { PopoverTrigger } from './ui/popover';
4
+ export declare const RECENT_VERSIONS_KEY = "youversion-platform:picker:recent-versions";
5
5
  export type RootProps = {
6
6
  versionId: number;
7
7
  onVersionChange?: (versionId: number) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"bible-version-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAW9D,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAyBhF,OAAO,EAA2B,cAAc,EAAE,MAAM,cAAc,CAAC;AAqHvE,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,UAAU,EACV,IAAY,EACZ,QAAQ,GACT,EAAE,SAAS,2CAmFX;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,2CAkBtF;AAED,iBAAS,OAAO,4CA+Of;AAED,eAAO,MAAM,kBAAkB;;;;CAAgD,CAAC;AAChF,MAAM,MAAM,2BAA2B,GAAG,SAAS,CAAC"}
1
+ {"version":3,"file":"bible-version-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,2BAA2B,CAAC;AASxE,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AASf,OAAO,EAA2B,cAAc,EAAE,MAAM,cAAc,CAAC;AAGvE,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAqIhF,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,UAAU,EACV,IAAY,EACZ,QAAQ,GACT,EAAE,SAAS,2CAoIX;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,2CAkBtF;AAED,iBAAS,OAAO,4CAsTf;AAED,eAAO,MAAM,kBAAkB;;;;CAAgD,CAAC;AAChF,MAAM,MAAM,2BAA2B,GAAG,SAAS,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAkExC"}
1
+ {"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAmExC"}
@@ -1 +1 @@
1
- {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAEtE;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,SAAS,CAEzE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,KAAgB,EAChB,OAAO,EACP,UAAiB,EACjB,UAAc,EACd,KAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B,GAAG,KAAK,CAAC,SAAS,CAmClB;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,CAExE;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CAEvE;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAEtE;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,SAAS,CAEzE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,KAAgB,EAChB,OAAO,EACP,UAAiB,EACjB,UAAc,EACd,KAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B,GAAG,KAAK,CAAC,SAAS,CAwClB;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,SAAS,CAExE;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CAEvE;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}