@roxyapi/ui 0.3.1 → 0.4.1

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.
Files changed (165) hide show
  1. package/AGENTS.md +34 -7
  2. package/README.md +145 -26
  3. package/dist/cdn/components/ashtakavarga-grid.js +74 -19
  4. package/dist/cdn/components/ashtakavarga-grid.js.map +2 -2
  5. package/dist/cdn/components/biorhythm-chart.js +18 -4
  6. package/dist/cdn/components/biorhythm-chart.js.map +2 -2
  7. package/dist/cdn/components/choghadiya-grid.js +47 -12
  8. package/dist/cdn/components/choghadiya-grid.js.map +3 -3
  9. package/dist/cdn/components/compatibility-card.js +21 -7
  10. package/dist/cdn/components/compatibility-card.js.map +2 -2
  11. package/dist/cdn/components/dasha-timeline.js +113 -28
  12. package/dist/cdn/components/dasha-timeline.js.map +3 -3
  13. package/dist/cdn/components/data.js +27 -13
  14. package/dist/cdn/components/data.js.map +2 -2
  15. package/dist/cdn/components/divisional-chart.js +225 -118
  16. package/dist/cdn/components/divisional-chart.js.map +4 -4
  17. package/dist/cdn/components/dosha-card.js +18 -4
  18. package/dist/cdn/components/dosha-card.js.map +2 -2
  19. package/dist/cdn/components/endpoint-form.js +25 -11
  20. package/dist/cdn/components/endpoint-form.js.map +2 -2
  21. package/dist/cdn/components/guna-milan.js +20 -6
  22. package/dist/cdn/components/guna-milan.js.map +2 -2
  23. package/dist/cdn/components/hexagram.js +22 -8
  24. package/dist/cdn/components/hexagram.js.map +2 -2
  25. package/dist/cdn/components/horoscope-card.js +20 -6
  26. package/dist/cdn/components/horoscope-card.js.map +2 -2
  27. package/dist/cdn/components/kp-chart.js +19 -5
  28. package/dist/cdn/components/kp-chart.js.map +2 -2
  29. package/dist/cdn/components/kp-planets-table.js +17 -3
  30. package/dist/cdn/components/kp-planets-table.js.map +2 -2
  31. package/dist/cdn/components/kp-ruling-planets.js +17 -3
  32. package/dist/cdn/components/kp-ruling-planets.js.map +2 -2
  33. package/dist/cdn/components/location-search.js +18 -4
  34. package/dist/cdn/components/location-search.js.map +2 -2
  35. package/dist/cdn/components/moon-phase.js +27 -13
  36. package/dist/cdn/components/moon-phase.js.map +2 -2
  37. package/dist/cdn/components/nakshatra-card.js +16 -2
  38. package/dist/cdn/components/nakshatra-card.js.map +2 -2
  39. package/dist/cdn/components/natal-chart.js +79 -40
  40. package/dist/cdn/components/natal-chart.js.map +3 -3
  41. package/dist/cdn/components/numerology-card.js +18 -4
  42. package/dist/cdn/components/numerology-card.js.map +2 -2
  43. package/dist/cdn/components/panchang-table.js +53 -25
  44. package/dist/cdn/components/panchang-table.js.map +3 -3
  45. package/dist/cdn/components/shadbala-table.js +24 -10
  46. package/dist/cdn/components/shadbala-table.js.map +2 -2
  47. package/dist/cdn/components/synastry-chart.js +96 -48
  48. package/dist/cdn/components/synastry-chart.js.map +3 -3
  49. package/dist/cdn/components/tarot-card.js +17 -3
  50. package/dist/cdn/components/tarot-card.js.map +2 -2
  51. package/dist/cdn/components/tarot-spread.js +39 -25
  52. package/dist/cdn/components/tarot-spread.js.map +2 -2
  53. package/dist/cdn/components/transits-table.js +18 -4
  54. package/dist/cdn/components/transits-table.js.map +2 -2
  55. package/dist/cdn/components/vedic-kundli.js +215 -105
  56. package/dist/cdn/components/vedic-kundli.js.map +4 -4
  57. package/dist/cdn/components/vedic-planets-table.js +22 -8
  58. package/dist/cdn/components/vedic-planets-table.js.map +2 -2
  59. package/dist/cdn/components/western-planets-table.js +18 -4
  60. package/dist/cdn/components/western-planets-table.js.map +2 -2
  61. package/dist/cdn/components/yoga-list.js +17 -3
  62. package/dist/cdn/components/yoga-list.js.map +2 -2
  63. package/dist/cdn/roxy-ui.js +1082 -816
  64. package/dist/cdn/roxy-ui.js.map +4 -4
  65. package/dist/components/ashtakavarga-grid.d.ts +13 -1
  66. package/dist/components/ashtakavarga-grid.d.ts.map +1 -1
  67. package/dist/components/ashtakavarga-grid.js +86 -11
  68. package/dist/components/ashtakavarga-grid.js.map +2 -2
  69. package/dist/components/biorhythm-chart.js +14 -0
  70. package/dist/components/biorhythm-chart.js.map +2 -2
  71. package/dist/components/choghadiya-grid.d.ts +6 -0
  72. package/dist/components/choghadiya-grid.d.ts.map +1 -1
  73. package/dist/components/choghadiya-grid.js +50 -2
  74. package/dist/components/choghadiya-grid.js.map +2 -2
  75. package/dist/components/compatibility-card.js +14 -0
  76. package/dist/components/compatibility-card.js.map +2 -2
  77. package/dist/components/dasha-timeline.d.ts +10 -0
  78. package/dist/components/dasha-timeline.d.ts.map +1 -1
  79. package/dist/components/dasha-timeline.js +135 -4
  80. package/dist/components/dasha-timeline.js.map +2 -2
  81. package/dist/components/data.js +14 -0
  82. package/dist/components/data.js.map +2 -2
  83. package/dist/components/divisional-chart.d.ts +9 -6
  84. package/dist/components/divisional-chart.d.ts.map +1 -1
  85. package/dist/components/divisional-chart.js +546 -251
  86. package/dist/components/divisional-chart.js.map +4 -4
  87. package/dist/components/dosha-card.js +14 -0
  88. package/dist/components/dosha-card.js.map +2 -2
  89. package/dist/components/endpoint-form.js +14 -0
  90. package/dist/components/endpoint-form.js.map +2 -2
  91. package/dist/components/guna-milan.js +14 -0
  92. package/dist/components/guna-milan.js.map +2 -2
  93. package/dist/components/hexagram.js +14 -0
  94. package/dist/components/hexagram.js.map +2 -2
  95. package/dist/components/horoscope-card.js +14 -0
  96. package/dist/components/horoscope-card.js.map +2 -2
  97. package/dist/components/kp-chart.js +14 -0
  98. package/dist/components/kp-chart.js.map +2 -2
  99. package/dist/components/kp-planets-table.js +14 -0
  100. package/dist/components/kp-planets-table.js.map +2 -2
  101. package/dist/components/kp-ruling-planets.js +14 -0
  102. package/dist/components/kp-ruling-planets.js.map +2 -2
  103. package/dist/components/location-search.js +14 -0
  104. package/dist/components/location-search.js.map +2 -2
  105. package/dist/components/moon-phase.js +14 -0
  106. package/dist/components/moon-phase.js.map +2 -2
  107. package/dist/components/nakshatra-card.js +14 -0
  108. package/dist/components/nakshatra-card.js.map +2 -2
  109. package/dist/components/natal-chart.d.ts.map +1 -1
  110. package/dist/components/natal-chart.js +76 -6
  111. package/dist/components/natal-chart.js.map +2 -2
  112. package/dist/components/numerology-card.js +14 -0
  113. package/dist/components/numerology-card.js.map +2 -2
  114. package/dist/components/panchang-table.d.ts +1 -0
  115. package/dist/components/panchang-table.d.ts.map +1 -1
  116. package/dist/components/panchang-table.js +37 -1
  117. package/dist/components/panchang-table.js.map +2 -2
  118. package/dist/components/shadbala-table.js +14 -0
  119. package/dist/components/shadbala-table.js.map +2 -2
  120. package/dist/components/synastry-chart.d.ts +6 -0
  121. package/dist/components/synastry-chart.d.ts.map +1 -1
  122. package/dist/components/synastry-chart.js +106 -7
  123. package/dist/components/synastry-chart.js.map +2 -2
  124. package/dist/components/tarot-card.js +14 -0
  125. package/dist/components/tarot-card.js.map +2 -2
  126. package/dist/components/tarot-spread.js +14 -0
  127. package/dist/components/tarot-spread.js.map +2 -2
  128. package/dist/components/transits-table.js +14 -0
  129. package/dist/components/transits-table.js.map +2 -2
  130. package/dist/components/vedic-kundli.d.ts +14 -9
  131. package/dist/components/vedic-kundli.d.ts.map +1 -1
  132. package/dist/components/vedic-kundli.js +537 -245
  133. package/dist/components/vedic-kundli.js.map +4 -4
  134. package/dist/components/vedic-planets-table.js +14 -0
  135. package/dist/components/vedic-planets-table.js.map +2 -2
  136. package/dist/components/western-planets-table.js +14 -0
  137. package/dist/components/western-planets-table.js.map +2 -2
  138. package/dist/components/yoga-list.js +14 -0
  139. package/dist/components/yoga-list.js.map +2 -2
  140. package/dist/index.cjs +1397 -797
  141. package/dist/index.cjs.map +4 -4
  142. package/dist/index.js +1278 -678
  143. package/dist/index.js.map +4 -4
  144. package/dist/manifest.json +23 -23
  145. package/dist/styles/tokens.css +8 -23
  146. package/dist/utils/base-styles.d.ts.map +1 -1
  147. package/dist/utils/kundli-render.d.ts +43 -104
  148. package/dist/utils/kundli-render.d.ts.map +1 -1
  149. package/dist/utils/kundli-styles.d.ts +13 -0
  150. package/dist/utils/kundli-styles.d.ts.map +1 -0
  151. package/dist/version.d.ts +1 -1
  152. package/package.json +1 -1
  153. package/src/components/ashtakavarga-grid.ts +73 -11
  154. package/src/components/choghadiya-grid.ts +37 -2
  155. package/src/components/dasha-timeline.ts +135 -4
  156. package/src/components/divisional-chart.ts +40 -97
  157. package/src/components/natal-chart.ts +89 -6
  158. package/src/components/panchang-table.ts +34 -1
  159. package/src/components/synastry-chart.ts +84 -8
  160. package/src/components/vedic-kundli.ts +35 -95
  161. package/src/styles/tokens.css +8 -23
  162. package/src/utils/base-styles.ts +14 -0
  163. package/src/utils/kundli-render.ts +609 -270
  164. package/src/utils/kundli-styles.ts +124 -0
  165. package/src/version.ts +1 -1
package/AGENTS.md CHANGED
@@ -4,7 +4,7 @@ This file teaches AI coding agents (Claude Code, Cursor, Copilot, Codex, Gemini
4
4
 
5
5
  This file ships inside both `@roxyapi/ui` and `@roxyapi/ui-react` on npm. After install, read it at `node_modules/@roxyapi/ui/AGENTS.md`.
6
6
 
7
- Live preview: <https://roxyapi.github.io/ui/>. Source of truth for component types: the OpenAPI spec at `roxyapi.com/openapi.json`, regenerated into `packages/ui/src/types/types.gen.ts`.
7
+ Live preview: <https://roxyapi.github.io/ui/>. Source of truth for component types: the combined OpenAPI spec at `https://roxyapi.com/api/v2/openapi.json`, regenerated into `packages/ui/src/types/types.gen.ts`. Per-product specs live at `https://roxyapi.com/api/v2/{slug}/openapi.json`.
8
8
 
9
9
  ## Identity
10
10
 
@@ -22,6 +22,7 @@ Map the natural-language request to a component first; fall back to the table be
22
22
  | "birth chart", "natal chart", "Western chart", "show me my planets" | `<roxy-natal-chart>` |
23
23
  | "match two birth charts", "compare us in Western astrology", "synastry" | `<roxy-synastry-chart>` |
24
24
  | "kundli", "Vedic chart", "rashi chart", "South/North Indian chart" | `<roxy-vedic-kundli>` |
25
+ | "D9", "navamsa", "varga chart", "divisional chart", "D10 dasamsa", "D60 shashtiamsa" | `<roxy-divisional-chart>` (request body needs `division: integer`, supported 2,3,4,7,9,10,12,16,20,24,27,30,40,45,60) |
25
26
  | "kundli matching", "Guna Milan", "match for marriage", "36-point compatibility" | `<roxy-guna-milan>` |
26
27
  | "are we compatible", "compatibility score", "love score" (cross-domain) | `<roxy-compatibility-card>` |
27
28
  | "panchang for today", "tithi", "nakshatra", "muhurta", "auspicious times" | `<roxy-panchang-table>` |
@@ -188,7 +189,7 @@ import type { NatalChartResponse } from '@roxyapi/sdk';
188
189
  import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';
189
190
  const roxy = createRoxy('pk_live_xxx');
190
191
  const { data } = await roxy.astrology.generateNatalChart({
191
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
192
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
192
193
  });
193
194
  document.getElementById('chart').data = data;
194
195
  </script>
@@ -268,8 +269,8 @@ Use a publishable key (`pk_live_*` or `pk_test_*`) for client-side embeds. Get o
268
269
  data-publishable-key="pk_live_xxx"
269
270
  data-date="1990-01-15"
270
271
  data-time="14:30:00"
271
- data-latitude="28.6139"
272
- data-longitude="77.209"
272
+ data-latitude="19.07"
273
+ data-longitude="72.88"
273
274
  data-timezone="5.5"
274
275
  ></div>
275
276
  ```
@@ -283,7 +284,7 @@ A remote MCP server at `roxyapi.com/mcp/{domain}` exposes each RoxyAPI endpoint
283
284
  ```ts
284
285
  // Pseudocode for any MCP-aware agent
285
286
  const result = await mcp.call('roxyapi.astrology.generate_natal_chart', {
286
- date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5,
287
+ date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5,
287
288
  });
288
289
  document.querySelector('roxy-natal-chart').data = result;
289
290
  ```
@@ -303,7 +304,7 @@ const roxy = createRoxy(process.env.ROXY_API_KEY!);
303
304
 
304
305
  export default async function Page() {
305
306
  const { data } = await roxy.vedicAstrology.generateBirthChart({
306
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
307
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
307
308
  });
308
309
  return <BirthChartView data={data} />;
309
310
  }
@@ -319,12 +320,38 @@ export default function BirthChartView({ data }: { data: unknown }) {
319
320
  }
320
321
  ```
321
322
 
323
+ ## Theming and dark mode
324
+
325
+ Components react to three signals in priority order. No events to dispatch. No JS bridge to write.
326
+
327
+ | Signal | Where | Effect |
328
+ |---|---|---|
329
+ | `prefers-color-scheme: dark` | OS | Default. Follows user system setting. |
330
+ | `data-theme="light"` or `data-theme="dark"` | `<html>` / `<body>` / any ancestor / the component itself | Wins over OS. Per-element override scope works. |
331
+ | `.dark` class | Any ancestor | Equivalent to `data-theme="dark"`. Use when the host stack already ships a `.dark` toggle (Tailwind, shadcn). |
332
+
333
+ To toggle at runtime:
334
+
335
+ ```ts
336
+ document.documentElement.dataset.theme = 'dark'; // or 'light'
337
+ ```
338
+
339
+ That single line re-themes every Roxy UI component on the page. Persist user choice in `localStorage` from your own code; the library does not own preferences.
340
+
341
+ Per-element scope is supported:
342
+
343
+ ```html
344
+ <roxy-natal-chart data-theme="dark" .data=${chart}></roxy-natal-chart>
345
+ ```
346
+
347
+ Every visible aspect of the chart is driven by `--roxy-*` CSS custom properties on `:host`. Override any token on `:root`, on `:host`, or per element. Do not write Tailwind utility classes inside the components; the Shadow DOM boundary stops them at the door.
348
+
322
349
  ## Rules every agent must follow
323
350
 
324
351
  - Always call `/location/search` first before any chart endpoint that takes latitude, longitude, or timezone. Use `<roxy-location-search>` for the input UI.
325
352
  - Pass the response object directly. Components are stateless; they do not fetch internally except for `<roxy-location-search>`, `<roxy-endpoint-form>`, and the widgets auto-mount script.
326
353
  - Use the typed SDK from `@roxyapi/sdk` so prop shapes match the spec automatically.
327
- - Theming is CSS custom properties on `:root` or per element. Do not write Tailwind classes inside the components; the shadow DOM ignores them.
354
+ - Theming is CSS custom properties on `:root` or per element. Switch light and dark via `data-theme` on any ancestor (see the table above). Do not write Tailwind classes inside the components; the shadow DOM ignores them.
328
355
  - Honor reduced motion. The library already respects `prefers-reduced-motion: reduce` and the `--roxy-motion-duration` variable.
329
356
  - A11y violations are CI failures. Do not paste over `role` or `aria-*` attributes; the components emit them correctly already.
330
357
  - Component types come from the OpenAPI spec via `@hey-api/openapi-ts`. Do not redefine response shapes locally; if a field is missing, fix the spec, regenerate, propagate.
package/README.md CHANGED
@@ -76,16 +76,39 @@ Light, dark, your brand. Override one CSS variable and every component updates.
76
76
  }
77
77
  ```
78
78
 
79
- Pick a tone, set the vars, every chart and card follows. Full token reference at [THEMING.md](https://github.com/RoxyAPI/ui/blob/main/packages/ui/THEMING.md). Live tweaker on the [demo site](https://roxyapi.github.io/ui/).
79
+ Pick a tone, set the vars, every chart and card follows. Full token reference at [THEMING.md](https://github.com/RoxyAPI/ui/blob/main/packages/ui/THEMING.md). Live tweaker on the [demo site](https://roxyapi.github.io/ui/). See the [FAQ](#faq) for switching between light and dark at runtime.
80
80
 
81
- ## Gallery (chart-heavy components)
81
+ ## Gallery
82
+
83
+ Every chart, table, and card adapts to light and dark automatically. Hover any image on GitHub to inspect tooltips.
84
+
85
+ ### Western astrology
82
86
 
83
87
  <table>
84
88
  <tr>
89
+ <td width="50%"><strong>Natal chart</strong> · <code>&lt;roxy-natal-chart&gt;</code><br><sub>POST /astrology/natal-chart</sub><br>
90
+ <picture>
91
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/natal-chart-dark.png">
92
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/natal-chart-light.png" alt="Natal chart wheel with 14 planets, real house cusps, IC DC Part of Fortune Vertex, aspect lines">
93
+ </picture>
94
+ </td>
85
95
  <td width="50%"><strong>Synastry</strong> · <code>&lt;roxy-synastry-chart&gt;</code><br><sub>POST /astrology/synastry</sub><br>
86
96
  <picture>
87
97
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-dark.png">
88
- <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-light.png" alt="Synastry dual-wheel with inter-aspects">
98
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-light.png" alt="Synastry dual-wheel with inter-aspects table">
99
+ </picture>
100
+ </td>
101
+ </tr>
102
+ </table>
103
+
104
+ ### Vedic astrology
105
+
106
+ <table>
107
+ <tr>
108
+ <td width="50%"><strong>Vedic kundli</strong> · <code>&lt;roxy-vedic-kundli&gt;</code><br><sub>POST /vedic-astrology/birth-chart</sub><br>
109
+ <picture>
110
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/vedic-kundli-dark.png">
111
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/vedic-kundli-light.png" alt="Vedic kundli D1 rashi chart, South Indian style with Lagna marker">
89
112
  </picture>
90
113
  </td>
91
114
  <td width="50%"><strong>KP chart</strong> · <code>&lt;roxy-kp-chart&gt;</code><br><sub>POST /vedic-astrology/kp/chart</sub><br>
@@ -99,27 +122,60 @@ Pick a tone, set the vars, every chart and card follows. Full token reference at
99
122
  <td width="50%"><strong>Divisional chart</strong> · <code>&lt;roxy-divisional-chart&gt;</code><br><sub>POST /vedic-astrology/divisional-chart</sub><br>
100
123
  <picture>
101
124
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/divisional-chart-dark.png">
102
- <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/divisional-chart-light.png" alt="Vedic divisional chart D9 navamsa wheel">
125
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/divisional-chart-light.png" alt="D2 to D60 varga chart, D9 navamsa shown">
103
126
  </picture>
104
127
  </td>
105
- <td width="50%"><strong>Dasha timeline</strong> · <code>&lt;roxy-dasha-timeline&gt;</code><br><sub>POST /vedic-astrology/dasha/&lbrace;current,major,sub&rbrace;</sub><br>
128
+ <td width="50%"><strong>Ashtakavarga grid</strong> · <code>&lt;roxy-ashtakavarga-grid&gt;</code><br><sub>POST /vedic-astrology/ashtakavarga</sub><br>
106
129
  <picture>
107
- <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-dark.png">
108
- <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-light.png" alt="Vimshottari dasha mahadasha and antardasha timeline">
130
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/ashtakavarga-grid-dark.png">
131
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/ashtakavarga-grid-light.png" alt="Ashtakavarga sarva and bhinna bindu heatmap">
109
132
  </picture>
110
133
  </td>
111
134
  </tr>
112
135
  <tr>
113
- <td width="50%"><strong>Ashtakavarga grid</strong> · <code>&lt;roxy-ashtakavarga-grid&gt;</code><br><sub>POST /vedic-astrology/ashtakavarga</sub><br>
136
+ <td width="50%"><strong>Dasha timeline</strong> · <code>&lt;roxy-dasha-timeline&gt;</code><br><sub>POST /vedic-astrology/dasha/&lbrace;current,major,sub&rbrace;</sub><br>
114
137
  <picture>
115
- <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/ashtakavarga-grid-dark.png">
116
- <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/ashtakavarga-grid-light.png" alt="Ashtakavarga sarva and bhinna bindu heatmap">
138
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-dark.png">
139
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-light.png" alt="Vimshottari mahadasha and antardasha timeline with progress bars">
140
+ </picture>
141
+ </td>
142
+ <td width="50%"><strong>Shadbala table</strong> · <code>&lt;roxy-shadbala-table&gt;</code><br><sub>POST /vedic-astrology/shadbala</sub><br>
143
+ <picture>
144
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/shadbala-table-dark.png">
145
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/shadbala-table-light.png" alt="Six-fold planetary strength bars with rupas and adequacy badges">
117
146
  </picture>
118
147
  </td>
148
+ </tr>
149
+ </table>
150
+
151
+ ### Other domains
152
+
153
+ <table>
154
+ <tr>
119
155
  <td width="50%"><strong>Tarot spread</strong> · <code>&lt;roxy-tarot-spread&gt;</code><br><sub>POST /tarot/spreads/&lbrace;three-card,celtic-cross,love&rbrace;</sub><br>
120
156
  <picture>
121
157
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-dark.png">
122
- <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-light.png" alt="Tarot spread with three-card layout and reading">
158
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-light.png" alt="Three-card tarot spread with position labels and reading">
159
+ </picture>
160
+ </td>
161
+ <td width="50%"><strong>Biorhythm</strong> · <code>&lt;roxy-biorhythm-chart&gt;</code><br><sub>POST /biorhythm/&lbrace;daily,forecast,critical-days&rbrace;</sub><br>
162
+ <picture>
163
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/biorhythm-chart-dark.png">
164
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/biorhythm-chart-light.png" alt="Physical, emotional, intellectual cycle bars">
165
+ </picture>
166
+ </td>
167
+ </tr>
168
+ <tr>
169
+ <td width="50%"><strong>I Ching hexagram</strong> · <code>&lt;roxy-hexagram&gt;</code><br><sub>GET /iching/hexagrams/&lbrace;number&rbrace;, /iching/cast</sub><br>
170
+ <picture>
171
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/hexagram-dark.png">
172
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/hexagram-light.png" alt="Hexagram with trigrams, judgment, image, changing lines">
173
+ </picture>
174
+ </td>
175
+ <td width="50%"><strong>Numerology</strong> · <code>&lt;roxy-numerology-card&gt;</code><br><sub>POST /numerology/&lbrace;life-path,expression,personal-year,chart&rbrace;</sub><br>
176
+ <picture>
177
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/numerology-card-dark.png">
178
+ <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/numerology-card-light.png" alt="Life path number card with archetype, keywords, and interpretation">
123
179
  </picture>
124
180
  </td>
125
181
  </tr>
@@ -138,7 +194,7 @@ Tables, cards, forms, and helper components in the [live demo](https://roxyapi.g
138
194
 
139
195
  ## Start with one component
140
196
 
141
- Vanilla HTML. Three lines. No build step.
197
+ Vanilla HTML. No build step. Replace `YOUR_API_KEY` with a publishable key from <https://roxyapi.com/account>.
142
198
 
143
199
  ```html
144
200
  <script
@@ -149,15 +205,31 @@ Vanilla HTML. Three lines. No build step.
149
205
  <roxy-natal-chart id="chart"></roxy-natal-chart>
150
206
  <script type="module">
151
207
  import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';
152
- const roxy = createRoxy(import.meta.env?.ROXY_API_KEY);
208
+ const roxy = createRoxy('YOUR_API_KEY');
153
209
  const { data } = await roxy.astrology.generateNatalChart({
154
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
210
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
155
211
  });
156
212
  document.getElementById('chart').data = data;
157
213
  </script>
158
214
  ```
159
215
 
160
- Then add the kundli, the panchang, the dasha timeline, the tarot spread.
216
+ > **Unwrap `data` before passing to the component.** The SDK returns `{ data, error, request, response }`. Pass the envelope and the chart renders `[object Object]`. This is the most common integration bug.
217
+
218
+ Want a Vedic kundli instead? Same shape, different SDK method:
219
+
220
+ ```html
221
+ <roxy-vedic-kundli id="kundli" chart-style="south"></roxy-vedic-kundli>
222
+ <script type="module">
223
+ import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';
224
+ const roxy = createRoxy('YOUR_API_KEY');
225
+ const { data } = await roxy.vedicAstrology.generateBirthChart({
226
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
227
+ });
228
+ document.getElementById('kundli').data = data;
229
+ </script>
230
+ ```
231
+
232
+ In production, geocode the user's city with `<roxy-location-search>` (see [Quick start](#quick-start)) instead of hardcoding coordinates.
161
233
 
162
234
  ## Install
163
235
 
@@ -225,7 +297,7 @@ const roxy = createRoxy(process.env.ROXY_API_KEY!);
225
297
 
226
298
  // 1. Natal chart. The #1 Western query, called on every onboarding.
227
299
  const { data: natal } = await roxy.astrology.generateNatalChart({
228
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
300
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
229
301
  });
230
302
  <RoxyNatalChart data={natal} />
231
303
 
@@ -236,59 +308,67 @@ const { data: horoscope } = await roxy.astrology.getDailyHoroscope({ path: { sig
236
308
  // 3. Synastry. The dating-app pro-tier feature, full inter-aspect analysis between two charts.
237
309
  const { data: synastry } = await roxy.astrology.calculateSynastry({
238
310
  body: {
239
- person1: { date: '1990-01-15', time: '14:30:00', latitude: 28.61, longitude: 77.20, timezone: 5.5 },
311
+ person1: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
240
312
  person2: { date: '1992-07-22', time: '09:00:00', latitude: 19.07, longitude: 72.87, timezone: 5.5 },
241
313
  },
242
314
  });
243
315
  <RoxySynastryChart data={synastry} />
244
316
  ```
245
317
 
246
- ### 2. Vedic astrology (kundli, panchang, dasha, dosha, KP, ashtakavarga)
318
+ ### 2. Vedic astrology (kundli, panchang, dasha, dosha, KP, ashtakavarga, divisional)
247
319
 
248
- The depth moat. India astrology market: $163M in 2024, projected $1.8B by 2030 (49% CAGR). Kundli, panchang, dasha, dosha, and KP horary are the five Google-dominant queries for every matrimonial platform, kundli generator, and muhurat app.
320
+ The depth moat. India astrology market: $163M in 2024, projected $1.8B by 2030 (49% CAGR). Kundli, panchang, dasha, dosha, KP horary, and divisional charts (D9 Navamsa, D10 Dasamsa) are the highest-traffic Vedic queries for every matrimonial platform, kundli generator, muhurat app, and professional reader.
249
321
 
250
322
  ```tsx
251
323
  import {
252
324
  RoxyVedicKundli, RoxyVedicPlanetsTable, RoxyPanchangTable,
253
325
  RoxyDashaTimeline, RoxyDoshaCard, RoxyKpChart, RoxyAshtakavargaGrid,
326
+ RoxyDivisionalChart,
254
327
  } from '@roxyapi/ui-react';
255
328
 
256
329
  // Kundli + positions table share a single API call (the same response renders both).
257
330
  const { data: kundli } = await roxy.vedicAstrology.generateBirthChart({
258
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
331
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
259
332
  });
260
333
  <RoxyVedicKundli data={kundli} chart-style="south" />
261
334
  <RoxyVedicPlanetsTable data={kundli} />
262
335
 
263
336
  // Panchang. Tithi, nakshatra, yoga, karana, rahu kaal, abhijit muhurta in one call.
264
337
  const { data: panchang } = await roxy.vedicAstrology.getDetailedPanchang({
265
- body: { date: '2026-04-22', latitude: 28.6139, longitude: 77.209 },
338
+ body: { date: '2026-04-22', latitude: 19.07, longitude: 72.88 },
266
339
  });
267
340
  <RoxyPanchangTable data={panchang} />
268
341
 
269
342
  // Vimshottari dasha. The 120-year planetary period timeline.
270
343
  const { data: dasha } = await roxy.vedicAstrology.getMajorDashas({
271
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
344
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
272
345
  });
273
346
  <RoxyDashaTimeline data={dasha} period="major" />
274
347
 
275
348
  // Mangal Dosha. Most-asked matrimonial question in India.
276
349
  const { data: dosha } = await roxy.vedicAstrology.checkManglikDosha({
277
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
350
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
278
351
  });
279
352
  <RoxyDoshaCard data={dosha} />
280
353
 
281
354
  // KP chart. The horary timing tool, sub-lord stellar hierarchy on every cusp.
282
355
  const { data: kp } = await roxy.vedicAstrology.generateKpChart({
283
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
356
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
284
357
  });
285
358
  <RoxyKpChart data={kp} />
286
359
 
287
360
  // Ashtakavarga. Bindu strength heatmap with Sarva, Bhinna, Shodhya Pinda views.
288
361
  const { data: ashtaka } = await roxy.vedicAstrology.calculateAshtakavarga({
289
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
362
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
290
363
  });
291
364
  <RoxyAshtakavargaGrid data={ashtaka} />
365
+
366
+ // Divisional chart (D9 Navamsa shown). `division` is the integer 9 — not "D9".
367
+ // Supported: 2, 3, 4, 7, 9, 10, 12, 16, 20, 24, 27, 30, 40, 45, 60.
368
+ const { data: d9 } = await roxy.vedicAstrology.generateDivisionalChart({
369
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5, division: 9 },
370
+ });
371
+ <RoxyDivisionalChart data={d9} />
292
372
  ```
293
373
 
294
374
  ### 3. Numerology (life path, full chart, personal year)
@@ -500,12 +580,51 @@ Roxy UI runs in any framework that supports the DOM: **React, Next.js, Vue, Svel
500
580
 
501
581
  ## FAQ
502
582
 
583
+ <details>
584
+ <summary><strong>How do I switch between light and dark mode?</strong></summary>
585
+
586
+ No events. No JavaScript bridge. Components read three CSS signals in priority order:
587
+
588
+ 1. **`prefers-color-scheme`**: follows the operating system by default. Ship nothing, get correct behaviour.
589
+ 2. **`data-theme="dark"` or `data-theme="light"`** on any ancestor (typically `<html>` or `<body>`). Wins over system preference.
590
+ 3. **`.dark` class** on any ancestor. Equivalent to `data-theme="dark"`. Useful when the host stack already toggles a `.dark` class (Tailwind, shadcn).
591
+
592
+ ```ts
593
+ // Toggle on click. No imports from this library needed.
594
+ document.documentElement.dataset.theme =
595
+ document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
596
+ ```
597
+
598
+ ```ts
599
+ // React: bind theme to component state.
600
+ useEffect(() => {
601
+ document.documentElement.dataset.theme = theme;
602
+ }, [theme]);
603
+ ```
604
+
605
+ Persist the choice in `localStorage` from your own code; the components do not own user preferences. Per-element overrides also work, so one chart can run in dark on an otherwise light page:
606
+
607
+ ```html
608
+ <roxy-natal-chart data-theme="dark" .data=${chart}></roxy-natal-chart>
609
+ ```
610
+ </details>
611
+
503
612
  <details>
504
613
  <summary><strong>How big is each component? What is the bundle cost?</strong></summary>
505
614
 
506
615
  Per-component bundles run 8-10 KB gzipped, capped at 30 KB by CI. The full bundle (every component, helpers, base styles) is around 26 KB gzipped, capped at 150 KB. The React package loads the runtime on mount, so a route that renders one chart pays for one component, not the whole catalog. Pin a concrete version in production for byte-stable cache hits.
507
616
  </details>
508
617
 
618
+ <details>
619
+ <summary><strong>How tall does each component render on mobile?</strong></summary>
620
+
621
+ Charts stay square: every wheel and grid component honours `aspect-ratio: 1 / 1` capped at `max-width: 560px`, so at a 390px phone width the chart itself is around 390px tall.
622
+
623
+ What can grow vertically is the data card around it. `<roxy-natal-chart>` stacks the wheel above the aspect-grid tab, the dignity table, and the planet-reading accordion; the host article on the demo page measures roughly 2100px tall at 390px width because the accordion is fully expanded server-side. Production embeds usually drop the accordion or wrap the chart in a sized container, and the wheel alone fits the fold. Same applies to the synastry chart and the dasha timeline.
624
+
625
+ Rule of thumb: chart-only components (`<roxy-vedic-kundli>`, `<roxy-divisional-chart>`, `<roxy-ashtakavarga-grid>`, `<roxy-tarot-card>`) stay within their aspect ratio. Components that bundle a wheel plus interpretation copy (`<roxy-natal-chart>`, `<roxy-synastry-chart>`, `<roxy-dasha-timeline>`) grow tall to fit their content. Pick the level of detail by component choice.
626
+ </details>
627
+
509
628
  <details>
510
629
  <summary><strong>Does this work with Next.js App Router, Remix, Nuxt, SvelteKit, and Astro?</strong></summary>
511
630
 
@@ -520,7 +639,7 @@ const roxy = createRoxy(process.env.ROXY_API_KEY!);
520
639
 
521
640
  export default async function Page() {
522
641
  const { data } = await roxy.astrology.generateNatalChart({
523
- body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
642
+ body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
524
643
  });
525
644
  return <ChartView data={data} />;
526
645
  }