@adarsh.nishad/activityual-ui 0.0.0-stage → 0.2.0

package/dist/recommendation-banner.js

@@ -0,0 +1,192 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualRecommendationBanner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activityTitle = '';
+        this.suggestedTime = '';
+        this.reason = '';
+        this.sampleSize = 0;
+        this.status = 'available';
+        this.generatedAt = '';
+    }
+    static { this.properties = {
+        activityTitle: { type: String },
+        suggestedTime: { type: String },
+        reason: { type: String },
+        sampleSize: { type: Number },
+        status: { type: String },
+        generatedAt: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+		}
+
+		.banner {
+			background: linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%);
+			backdrop-filter: blur(20px);
+			-webkit-backdrop-filter: blur(20px);
+			border: 1px solid rgba(255, 255, 255, 0.05);
+			border-left: 3px solid #ff4305;
+			border-radius: 16px;
+			padding: 1.25rem 1.5rem;
+			box-shadow:
+				0 10px 28px -4px rgba(0, 0, 0, 0.45),
+				0 0 16px rgba(255, 67, 5, 0.08);
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			position: relative;
+			overflow: hidden;
+			box-sizing: border-box;
+		}
+
+		.insufficient {
+			border-left: 3px solid #555555;
+			border-style: dashed;
+		}
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 0.65rem;
+		}
+
+		.badge {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.4rem;
+			font-size: 10px;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			padding: 0.2rem 0.65rem;
+			border-radius: 9999px;
+			background: rgba(255, 67, 5, 0.12);
+			color: #ff4305;
+			border: 1px solid rgba(255, 67, 5, 0.25);
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.sample-tag {
+			font-size: 10.5px;
+			font-weight: 600;
+			background: rgba(255, 255, 255, 0.05);
+			color: #a5a5a5;
+			border: 1px solid rgba(255, 255, 255, 0.06);
+			padding: 0.15rem 0.55rem;
+			border-radius: 9999px;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.title {
+			font-size: 15px;
+			font-weight: 700;
+			letter-spacing: -0.015em;
+			color: #f5f5f5;
+			margin: 0 0 0.4rem 0;
+			line-height: 1.3;
+		}
+
+		.explanation {
+			font-size: 12.5px;
+			line-height: 1.5;
+			color: #a5a5a5;
+			margin: 0;
+		}
+
+		.time-pod {
+			margin-top: 0.85rem;
+			display: inline-flex;
+			align-items: center;
+			gap: 0.65rem;
+			padding: 0.4rem 0.85rem;
+			border-radius: 9999px;
+			background: #252525;
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			color: #ffffff;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		}
+
+		.time-label {
+			font-size: 10px;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: #ff4305;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.time-val {
+			font-size: 12px;
+			font-weight: 700;
+			color: #ffffff;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.footer {
+			margin-top: 0.85rem;
+			font-size: 10.5px;
+			color: #707070;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			border-top: 1px solid rgba(255, 255, 255, 0.05);
+			padding-top: 0.65rem;
+			font-family: 'JetBrains Mono', monospace;
+		}
+	`; }
+    render() {
+        if (this.status === 'insufficient_history') {
+            return html `
+				<div class="banner insufficient">
+					<div class="header">
+						<span class="badge" style="background: rgba(255,255,255,0.06); color: #a5a5a5; border-color: rgba(255,255,255,0.1);">
+							Gathering Data
+						</span>
+						<span class="sample-tag">${this.sampleSize} / 5 records</span>
+					</div>
+					<h3 class="title">Personalized Rhythm Learning</h3>
+					<p class="explanation">
+						Activityual needs at least 5 records of <strong>${this.activityTitle}</strong>
+						before computing personalized circadian timing recommendations. Keep tracking!
+					</p>
+				</div>
+			`;
+        }
+        return html `
+			<div class="banner">
+				<div class="header">
+					<span class="badge">Optimization Suggestion</span>
+					${this.sampleSize > 0
+            ? html `<span class="sample-tag">${this.sampleSize} data points evaluated</span>`
+            : ''}
+				</div>
+
+				<h3 class="title">Shift "${this.activityTitle}" schedule</h3>
+				<p class="explanation">${this.reason}</p>
+
+				${this.suggestedTime
+            ? html `
+							<div class="time-pod">
+								<span class="time-label">Recommended Time</span>
+								<span class="time-val">${this.suggestedTime}</span>
+							</div>
+					  `
+            : ''}
+
+				${this.generatedAt
+            ? html `
+							<div class="footer">
+								<span>Model: Activityual Circadian v2</span>
+								<span>Updated: ${new Date(this.generatedAt).toLocaleDateString()}</span>
+							</div>
+					  `
+            : ''}
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-recommendation-banner')) {
+    customElements.define('activityual-recommendation-banner', ActivityualRecommendationBanner);
+}

package/dist/stat-card.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export declare class ActivityualStatCard extends LitElement {
+    static properties: {
+        title: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        subtitle: {
+            type: StringConstructor;
+        };
+        delta: {
+            type: StringConstructor;
+        };
+        deltaType: {
+            type: StringConstructor;
+        };
+    };
+    title: string;
+    value: string;
+    subtitle: string;
+    delta: string;
+    deltaType: 'positive' | 'negative' | 'neutral';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/stat-card.js

@@ -0,0 +1,137 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualStatCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = '';
+        this.value = '0';
+        this.subtitle = '';
+        this.delta = '';
+        this.deltaType = 'neutral';
+    }
+    static { this.properties = {
+        title: { type: String },
+        value: { type: String },
+        subtitle: { type: String },
+        delta: { type: String },
+        deltaType: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+		}
+
+		.stat-card {
+			background: linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%);
+			backdrop-filter: blur(20px);
+			-webkit-backdrop-filter: blur(20px);
+			border: 1px solid rgba(255, 255, 255, 0.05);
+			border-radius: 16px;
+			padding: 1.15rem 1.35rem;
+			box-shadow:
+				0 10px 28px -4px rgba(0, 0, 0, 0.45),
+				inset 0 1px 0 rgba(255, 255, 255, 0.08);
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			display: flex;
+			flex-direction: column;
+			gap: 0.45rem;
+			box-sizing: border-box;
+			transition: all 0.2s ease;
+		}
+
+		.stat-card:hover {
+			border-color: rgba(255, 255, 255, 0.1);
+			background: linear-gradient(145deg, rgba(48, 48, 48, 0.75) 0%, rgba(28, 28, 28, 0.88) 100%);
+			transform: translateY(-1px);
+		}
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.title {
+			font-size: 11px;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			color: #a5a5a5;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.value-row {
+			display: flex;
+			align-items: baseline;
+			gap: 0.65rem;
+		}
+
+		.value {
+			font-size: 28px;
+			font-weight: 700;
+			letter-spacing: -0.03em;
+			color: #f5f5f5;
+			line-height: 1.1;
+			font-family: 'JetBrains Mono', monospace;
+			font-variant-numeric: tabular-nums;
+		}
+
+		.delta-pill {
+			font-size: 10.5px;
+			font-weight: 600;
+			padding: 0.2rem 0.55rem;
+			border-radius: 9999px;
+			line-height: 1;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.delta-positive {
+			background: rgba(37, 211, 102, 0.12);
+			color: #25d366;
+			border: 1px solid rgba(37, 211, 102, 0.25);
+		}
+
+		.delta-negative {
+			background: rgba(255, 52, 52, 0.12);
+			color: #ff3434;
+			border: 1px solid rgba(255, 52, 52, 0.25);
+		}
+
+		.delta-neutral {
+			background: rgba(255, 255, 255, 0.06);
+			color: #a5a5a5;
+			border: 1px solid rgba(255, 255, 255, 0.08);
+		}
+
+		.subtitle {
+			font-size: 11.5px;
+			font-weight: 400;
+			color: #707070;
+			margin: 0;
+		}
+	`; }
+    render() {
+        return html `
+			<div class="stat-card">
+				<div class="header">
+					<span class="title">${this.title}</span>
+					<slot name="icon"></slot>
+				</div>
+				<div class="value-row">
+					<span class="value">${this.value}</span>
+					${this.delta
+            ? html `
+								<span class="delta-pill delta-${this.deltaType}">
+									${this.delta}
+								</span>
+						  `
+            : ''}
+				</div>
+				${this.subtitle ? html `<p class="subtitle">${this.subtitle}</p>` : ''}
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-stat-card')) {
+    customElements.define('activityual-stat-card', ActivityualStatCard);
+}

package/dist/status-pill.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export type OccurrenceStatus = 'done' | 'missed' | 'pending';
+export declare class ActivityualStatusPill extends LitElement {
+    static properties: {
+        status: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+    };
+    status: OccurrenceStatus;
+    size: 'sm' | 'md';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/status-pill.js

@@ -0,0 +1,96 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualStatusPill extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.status = 'pending';
+        this.size = 'md';
+    }
+    static { this.properties = {
+        status: { type: String },
+        size: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		.pill {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.35rem;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			border-radius: 9999px;
+			user-select: none;
+			transition: all 0.2s ease;
+		}
+
+		.sm {
+			height: 22px;
+			padding: 0 8px;
+			font-size: 9.5px;
+		}
+
+		.md {
+			height: 26px;
+			padding: 0 10px;
+			font-size: 10.5px;
+		}
+
+		/* DONE: Vaulto Financial Positive Emerald */
+		.done {
+			background: rgba(37, 211, 102, 0.12);
+			color: #25d366;
+			border: 1px solid rgba(37, 211, 102, 0.25);
+			box-shadow: 0 0 8px rgba(37, 211, 102, 0.15);
+		}
+
+		/* MISSED: Vaulto Financial Negative Red */
+		.missed {
+			background: rgba(255, 52, 52, 0.12);
+			color: #ff3434;
+			border: 1px solid rgba(255, 52, 52, 0.25);
+			box-shadow: 0 0 8px rgba(255, 52, 52, 0.15);
+		}
+
+		/* PENDING: Warm Amber */
+		.pending {
+			background: rgba(245, 158, 11, 0.12);
+			color: #f59e0b;
+			border: 1px solid rgba(245, 158, 11, 0.2);
+		}
+
+		.icon {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 11px;
+			line-height: 1;
+			font-weight: 800;
+		}
+	`; }
+    render() {
+        let iconMarkup = html `<span class="icon" aria-hidden="true">○</span>`;
+        let label = 'PENDING';
+        if (this.status === 'done') {
+            iconMarkup = html `<span class="icon" aria-hidden="true">✓</span>`;
+            label = 'DONE';
+        }
+        else if (this.status === 'missed') {
+            iconMarkup = html `<span class="icon" aria-hidden="true">✕</span>`;
+            label = 'MISSED';
+        }
+        return html `
+			<span class="pill ${this.status} ${this.size}" role="status" aria-label="Status: ${label}">
+				${iconMarkup}
+				<span>${label}</span>
+			</span>
+		`;
+    }
+}
+if (!customElements.get('activityual-status-pill')) {
+    customElements.define('activityual-status-pill', ActivityualStatusPill);
+}

package/dist/streak-badge.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export declare class ActivityualStreakBadge extends LitElement {
+    static properties: {
+        count: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        highlight: {
+            type: BooleanConstructor;
+        };
+    };
+    count: number;
+    label: string;
+    highlight: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/streak-badge.js

@@ -0,0 +1,89 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualStreakBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.count = 0;
+        this.label = 'Days';
+        this.highlight = false;
+    }
+    static { this.properties = {
+        count: { type: Number },
+        label: { type: String },
+        highlight: { type: Boolean }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		.badge {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.6rem;
+			padding: 0.45rem 0.8rem;
+			border-radius: 12px;
+			background: linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%);
+			backdrop-filter: blur(16px);
+			-webkit-backdrop-filter: blur(16px);
+			border: 1px solid rgba(255, 255, 255, 0.05);
+			box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			user-select: none;
+			transition: all 0.2s ease;
+		}
+
+		.icon-frame {
+			width: 28px;
+			height: 28px;
+			border-radius: 50%;
+			background: rgba(255, 67, 5, 0.12);
+			border: 1px solid rgba(255, 67, 5, 0.25);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #ff4305;
+			font-size: 14px;
+			box-shadow: 0 0 10px rgba(255, 67, 5, 0.2);
+		}
+
+		.text-group {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.count {
+			font-size: 13px;
+			font-weight: 700;
+			color: #f5f5f5;
+			line-height: 1;
+			font-variant-numeric: tabular-nums;
+		}
+
+		.label {
+			font-size: 10px;
+			font-weight: 500;
+			color: #a5a5a5;
+			margin-top: 2px;
+		}
+
+		.highlight {
+			border-color: rgba(255, 67, 5, 0.35);
+			box-shadow: 0 0 14px rgba(255, 67, 5, 0.2);
+		}
+	`; }
+    render() {
+        return html `
+			<div class="badge ${this.highlight ? 'highlight' : ''}" role="status" aria-label="${this.count} ${this.label} Streak">
+				<div class="icon-frame" aria-hidden="true">🔥</div>
+				<div class="text-group">
+					<span class="count">${this.count} ${this.label}</span>
+					<span class="label">Active Flow Streak</span>
+				</div>
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-streak-badge')) {
+    customElements.define('activityual-streak-badge', ActivityualStreakBadge);
+}