@roxyapi/ui 0.1.3 → 0.2.1

package/src/components/yoga-list.ts

@@ -0,0 +1,328 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { GetYogaResponse, ListYogasResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { debounce } from '../utils/debounce.js';
+
+type YogaListData =
+	| ListYogasResponse
+	| GetYogaResponse
+	| { yogas: Array<GetYogaResponse> };
+
+/**
+ * Yoga catalog and detail renderer. Accepts three data modes:
+ *   - Catalog: ListYogasResponse (yogas array of {id, name} + total)
+ *   - Detail: GetYogaResponse (single yoga with description, result, quality)
+ *   - Detail array: { yogas: Array<GetYogaResponse> } for pre-filtered sets
+ *
+ * Catalog and detail-array modes include a live search filter.
+ */
+@customElement('roxy-yoga-list')
+export class RoxyYogaList extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.count {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.search-wrap {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.search {
+				width: 100%;
+				max-width: 280px;
+				padding: 0.35em 0.75em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-family: var(--roxy-font-sans);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				outline: none;
+			}
+			.search::placeholder {
+				color: var(--roxy-fg, #0a0a0a);
+				opacity: 0.65;
+			}
+			.search:focus {
+				border-color: var(--roxy-accent, #f59e0b);
+				box-shadow: 0 0 0 2px color-mix(in srgb, var(--roxy-accent, #f59e0b) 30%, transparent);
+			}
+			.grid {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+				grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+			}
+			.yoga-chip {
+				padding: 0.4em 0.8em;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: var(--roxy-bg, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				word-break: break-word;
+			}
+			.yoga-chip .yoga-id {
+				display: block;
+				font-size: 0.7em;
+				color: var(--roxy-fg, #0a0a0a);
+				opacity: 0.75;
+				margin-top: 0.15em;
+			}
+			.detail-card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.detail-name {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.quality-chip {
+				display: inline-block;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+			}
+			.quality-Positive {
+				background: color-mix(in srgb, var(--roxy-success, #22c55e) 18%, transparent);
+				color: var(--roxy-success-fg, #15803d);
+				border: 1px solid color-mix(in srgb, var(--roxy-success, #22c55e) 40%, transparent);
+			}
+			.quality-Negative {
+				background: color-mix(in srgb, var(--roxy-danger, #ef4444) 18%, transparent);
+				color: var(--roxy-danger-fg, #b91c1c);
+				border: 1px solid color-mix(in srgb, var(--roxy-danger, #ef4444) 40%, transparent);
+			}
+			.quality-Both {
+				background: color-mix(in srgb, var(--roxy-warning, #f59e0b) 18%, transparent);
+				color: var(--roxy-warning-fg, #b45309);
+				border: 1px solid color-mix(in srgb, var(--roxy-warning, #f59e0b) 40%, transparent);
+			}
+			.description {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			details {
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			details summary {
+				cursor: pointer;
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: 500;
+				padding: 0.25em 0;
+				list-style: none;
+				display: flex;
+				align-items: center;
+				gap: 0.4em;
+			}
+			details summary::before {
+				content: '+';
+				font-size: 1.1em;
+				line-height: 1;
+			}
+			details[open] summary::before {
+				content: '-';
+			}
+			details .result-body {
+				padding-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			.no-results {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				padding: var(--roxy-space-md, 1rem) 0;
+				text-align: center;
+			}
+			.detail-grid {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: YogaListData | null = null;
+
+	@state()
+	private filter = '';
+
+	private readonly handleInput = debounce((e: Event) => {
+		this.filter = (e.target as HTMLInputElement).value;
+	}, 200);
+
+	private renderQualityChip(quality: string) {
+		const cls = `quality-chip quality-${quality}`;
+		return html`<span class=${cls}>${quality}</span>`;
+	}
+
+	private renderDetailCard(yoga: GetYogaResponse) {
+		return html`<div class="detail-card">
+			<p class="detail-name">
+				${yoga.name}
+				${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing}
+			</p>
+			${
+				yoga.description
+					? html`<p class="description">${yoga.description}</p>`
+					: nothing
+			}
+			${
+				yoga.result
+					? html`<details>
+						<summary>Effects</summary>
+						<div class="result-body">${yoga.result}</div>
+					</details>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+
+		const d = this.data;
+		const lc = this.filter.toLowerCase();
+
+		// Detail mode: single GetYogaResponse
+		if (
+			'description' in d &&
+			typeof (d as GetYogaResponse).description === 'string'
+		) {
+			const yoga = d as GetYogaResponse;
+			return html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+		}
+
+		// Detail-array mode: { yogas: Array<GetYogaResponse> } where items have description
+		if ('yogas' in d && Array.isArray((d as { yogas: unknown[] }).yogas)) {
+			const allYogas = (
+				d as { yogas: Array<GetYogaResponse | { id: string; name: string }> }
+			).yogas;
+			const isDetailArray = allYogas.length > 0 && 'description' in allYogas[0];
+
+			if (isDetailArray) {
+				const detailYogas = allYogas as GetYogaResponse[];
+				const filtered = lc
+					? detailYogas.filter((y) => y.name.toLowerCase().includes(lc))
+					: detailYogas;
+				const total = (d as ListYogasResponse).total;
+				return html`<div class="wrap">
+					<div class="head">
+						<h2 class="title">Yoga catalog</h2>
+						${
+							total !== undefined
+								? html`<span class="count">${total} total</span>`
+								: nothing
+						}
+					</div>
+					<div class="search-wrap">
+						<input
+							class="search"
+							type="search"
+							placeholder="Filter yogas..."
+							aria-label="Filter yoga list by name"
+							.value=${this.filter}
+							@input=${this.handleInput}
+						/>
+					</div>
+					<div
+						class="detail-grid"
+						role="region"
+						aria-live="polite"
+						aria-label="Yoga results"
+					>
+						${
+							filtered.length > 0
+								? filtered.map((y) => this.renderDetailCard(y))
+								: html`<p class="no-results">No yogas match your search.</p>`
+						}
+					</div>
+				</div>`;
+			}
+
+			// Catalog mode: ListYogasResponse with {id, name} items
+			const catalogYogas = allYogas as Array<{ id: string; name: string }>;
+			const filtered = lc
+				? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc))
+				: catalogYogas;
+			const total = (d as ListYogasResponse).total;
+			return html`<div class="wrap">
+				<div class="head">
+					<h2 class="title">Yoga catalog</h2>
+					${
+						total !== undefined
+							? html`<span class="count">${total} total</span>`
+							: nothing
+					}
+				</div>
+				<div class="search-wrap">
+					<input
+						class="search"
+						type="search"
+						placeholder="Filter yogas..."
+						aria-label="Filter yoga list by name"
+						.value=${this.filter}
+						@input=${this.handleInput}
+					/>
+				</div>
+				<div
+					class="grid"
+					role="region"
+					aria-live="polite"
+					aria-label="Yoga results"
+				>
+					${
+						filtered.length > 0
+							? filtered.map(
+									(y) => html`<div class="yoga-chip">
+									${y.name}
+									<span class="yoga-id">${y.id}</span>
+								</div>`,
+								)
+							: html`<p class="no-results">No yogas match your search.</p>`
+					}
+				</div>
+			</div>`;
+		}
+
+		return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-yoga-list': RoxyYogaList;
+	}
+}

package/src/index.ts

@@ -5,12 +5,15 @@
  *   import '@roxyapi/ui/components/natal-chart';
  */
 
+export { RoxyAshtakavargaGrid } from './components/ashtakavarga-grid.js';
 // Biorhythm
 export { RoxyBiorhythmChart } from './components/biorhythm-chart.js';
+export { RoxyChoghadiyaGrid } from './components/choghadiya-grid.js';
 export { RoxyCompatibilityCard } from './components/compatibility-card.js';
 export { RoxyDashaTimeline } from './components/dasha-timeline.js';
 // Generic fallback first so it is always available for nested rendering
 export { RoxyData } from './components/data.js';
+export { RoxyDivisionalChart } from './components/divisional-chart.js';
 export { RoxyDoshaCard } from './components/dosha-card.js';
 // Helpers
 export { RoxyEndpointForm } from './components/endpoint-form.js';
@@ -21,17 +24,20 @@ export { RoxyHoroscopeCard } from './components/horoscope-card.js';
 export { RoxyKpPlanetsTable } from './components/kp-planets-table.js';
 export { RoxyLocationSearch } from './components/location-search.js';
 export { RoxyMoonPhase } from './components/moon-phase.js';
-// Western
+// Western astrology
 export { RoxyNatalChart } from './components/natal-chart.js';
 // Numerology
 export { RoxyNumerologyCard } from './components/numerology-card.js';
 export { RoxyPanchangTable } from './components/panchang-table.js';
+export { RoxyShadbalaTable } from './components/shadbala-table.js';
 export { RoxySynastryChart } from './components/synastry-chart.js';
 // Tarot
 export { RoxyTarotCard } from './components/tarot-card.js';
 export { RoxyTarotSpread } from './components/tarot-spread.js';
-// Vedic
+export { RoxyTransitsTable } from './components/transits-table.js';
+// Vedic astrology
 export { RoxyVedicKundli } from './components/vedic-kundli.js';
+export { RoxyYogaList } from './components/yoga-list.js';
 
 import { ROXY_COMPONENTS, type RoxyComponentSlug } from './manifest.js';
 
@@ -39,13 +45,9 @@ export {
 	ROXY_COMPONENTS,
 	type RoxyComponent,
 	type RoxyComponentSlug,
-	type RoxyComponentTag,
-	type RoxyDomain,
 } from './manifest.js';
 export { ROXY_UI_VERSION } from './version.js';
 
 /** Slugs in declaration order. Kept for the auto-mount widgets script and downstream codegen. */
 export const ROXY_UI_COMPONENTS: readonly RoxyComponentSlug[] =
 	ROXY_COMPONENTS.map((c) => c.slug) as RoxyComponentSlug[];
-
-export type RoxyUIComponentName = RoxyComponentSlug;