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

package/dist/form-field.js

@@ -0,0 +1,144 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualFormField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.name = '';
+        this.type = 'text';
+        this.value = '';
+        this.placeholder = '';
+        this.error = '';
+        this.required = false;
+        this.disabled = false;
+    }
+    static { this.properties = {
+        label: { type: String },
+        name: { type: String },
+        type: { type: String },
+        value: { type: String },
+        placeholder: { type: String },
+        error: { type: String },
+        required: { type: Boolean },
+        disabled: { type: Boolean }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+			margin-bottom: 1.15rem;
+		}
+
+		.field-group {
+			display: flex;
+			flex-direction: column;
+			gap: 0.35rem;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+		}
+
+		label {
+			font-size: 11.5px;
+			font-weight: 600;
+			color: #f5f5f5;
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+		}
+
+		.required-star {
+			color: #ff3434;
+		}
+
+		.input-trough {
+			background: #121212;
+			border: 1px solid rgba(255, 255, 255, 0.06);
+			border-radius: 10px;
+			padding: 0 0.85rem;
+			height: 40px;
+			display: flex;
+			align-items: center;
+			box-shadow:
+				inset 0 2px 4px rgba(0, 0, 0, 0.5),
+				0 1px 1px rgba(255, 255, 255, 0.02);
+			transition: all 0.2s ease;
+		}
+
+		.input-trough:focus-within {
+			border-color: #ff4305;
+			box-shadow:
+				0 0 0 2px rgba(255, 67, 5, 0.25),
+				inset 0 1px 2px rgba(0, 0, 0, 0.4);
+		}
+
+		.has-error {
+			border-color: #ff3434 !important;
+			background: rgba(255, 52, 52, 0.06) !important;
+			box-shadow: 0 0 0 2px rgba(255, 52, 52, 0.2) !important;
+		}
+
+		input {
+			width: 100%;
+			background: transparent;
+			border: none;
+			outline: none;
+			font-family: inherit;
+			font-size: 13px;
+			font-weight: 500;
+			color: #f5f5f5;
+		}
+
+		input::placeholder {
+			color: #707070;
+		}
+
+		input:disabled {
+			opacity: 0.35;
+			cursor: not-allowed;
+		}
+
+		.error-message {
+			font-size: 10.5px;
+			font-weight: 500;
+			color: #ff3434;
+			margin-top: 0.2rem;
+		}
+	`; }
+    handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        this.dispatchEvent(new CustomEvent('input-change', {
+            detail: { name: this.name, value: this.value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+			<div class="field-group">
+				${this.label
+            ? html `
+							<label for="${this.name}">
+								<span>${this.label}</span>
+								${this.required ? html `<span class="required-star" aria-hidden="true">*</span>` : ''}
+							</label>
+					  `
+            : ''}
+				<div class="input-trough ${this.error ? 'has-error' : ''}">
+					<input
+						id="${this.name}"
+						name="${this.name}"
+						type="${this.type}"
+						.value="${this.value}"
+						placeholder="${this.placeholder}"
+						?required="${this.required}"
+						?disabled="${this.disabled}"
+						@input="${this.handleInput}"
+					/>
+				</div>
+				${this.error ? html `<span class="error-message" role="alert">${this.error}</span>` : ''}
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-form-field')) {
+    customElements.define('activityual-form-field', ActivityualFormField);
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './tokens.js';
+export * from './button.js';
+export * from './card.js';
+export * from './status-pill.js';
+export * from './streak-badge.js';
+export * from './progress-ring.js';
+export * from './stat-card.js';
+export * from './activity-card.js';
+export * from './chart-panel.js';
+export * from './recommendation-banner.js';
+export * from './empty-state.js';
+export * from './confirm-dialog.js';
+export * from './form-field.js';

package/dist/index.js

@@ -0,0 +1,13 @@
+export * from './tokens.js';
+export * from './button.js';
+export * from './card.js';
+export * from './status-pill.js';
+export * from './streak-badge.js';
+export * from './progress-ring.js';
+export * from './stat-card.js';
+export * from './activity-card.js';
+export * from './chart-panel.js';
+export * from './recommendation-banner.js';
+export * from './empty-state.js';
+export * from './confirm-dialog.js';
+export * from './form-field.js';

package/dist/progress-ring.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class ActivityualProgressRing extends LitElement {
+    static properties: {
+        percentage: {
+            type: NumberConstructor;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+        strokeWidth: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    percentage: number;
+    size: number;
+    strokeWidth: number;
+    label: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/progress-ring.js

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualProgressRing extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.percentage = 0;
+        this.size = 120;
+        this.strokeWidth = 10;
+        this.label = 'Rhythm';
+    }
+    static { this.properties = {
+        percentage: { type: Number },
+        size: { type: Number },
+        strokeWidth: { type: Number },
+        label: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		.container {
+			position: relative;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			user-select: none;
+		}
+
+		svg {
+			transform: rotate(-90deg);
+		}
+
+		.bg-circle {
+			fill: none;
+			stroke: rgba(255, 255, 255, 0.05);
+		}
+
+		.progress-circle {
+			fill: none;
+			stroke: #ff4305;
+			stroke-linecap: round;
+			transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+			filter: drop-shadow(0 0 6px rgba(255, 67, 5, 0.4));
+		}
+
+		.progress-circle.complete {
+			stroke: #25d366;
+			filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.4));
+		}
+
+		.content {
+			position: absolute;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+		}
+
+		.value {
+			font-size: 20px;
+			font-weight: 700;
+			color: #f5f5f5;
+			line-height: 1;
+			font-family: 'JetBrains Mono', monospace;
+			font-variant-numeric: tabular-nums;
+		}
+
+		.label-text {
+			font-size: 9.5px;
+			font-weight: 600;
+			color: #707070;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			margin-top: 3px;
+		}
+	`; }
+    render() {
+        const radius = (this.size - this.strokeWidth) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const clampedPercent = Math.min(Math.max(this.percentage, 0), 100);
+        const strokeDashoffset = circumference - (clampedPercent / 100) * circumference;
+        const isComplete = clampedPercent >= 100;
+        return html `
+			<div
+				class="container"
+				style="width: ${this.size}px; height: ${this.size}px;"
+				role="progressbar"
+				aria-valuenow="${clampedPercent}"
+				aria-valuemin="0"
+				aria-valuemax="100"
+				aria-label="${this.label}: ${clampedPercent}%"
+			>
+				<svg width="${this.size}" height="${this.size}">
+					<circle
+						class="bg-circle"
+						cx="${this.size / 2}"
+						cy="${this.size / 2}"
+						r="${radius}"
+						stroke-width="${this.strokeWidth}"
+					></circle>
+					<circle
+						class="progress-circle ${isComplete ? 'complete' : ''}"
+						cx="${this.size / 2}"
+						cy="${this.size / 2}"
+						r="${radius}"
+						stroke-width="${this.strokeWidth}"
+						stroke-dasharray="${circumference}"
+						stroke-dashoffset="${strokeDashoffset}"
+					></circle>
+				</svg>
+				<div class="content">
+					<span class="value">${clampedPercent}%</span>
+					<span class="label-text">${this.label}</span>
+				</div>
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-progress-ring')) {
+    customElements.define('activityual-progress-ring', ActivityualProgressRing);
+}

package/dist/recommendation-banner.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class ActivityualRecommendationBanner extends LitElement {
+    static properties: {
+        activityTitle: {
+            type: StringConstructor;
+        };
+        suggestedTime: {
+            type: StringConstructor;
+        };
+        reason: {
+            type: StringConstructor;
+        };
+        sampleSize: {
+            type: NumberConstructor;
+        };
+        status: {
+            type: StringConstructor;
+        };
+        generatedAt: {
+            type: StringConstructor;
+        };
+    };
+    activityTitle: string;
+    suggestedTime: string;
+    reason: string;
+    sampleSize: number;
+    status: 'available' | 'insufficient_history';
+    generatedAt: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

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);
+}