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

package/dist/confirm-dialog.js

@@ -0,0 +1,140 @@
+import { LitElement, html, css } from 'lit';
+import './button.js';
+export class ActivityualConfirmDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.title = 'Confirm Action';
+        this.message = 'Are you sure you want to proceed?';
+        this.confirmText = 'Confirm';
+        this.cancelText = 'Cancel';
+        this.danger = false;
+    }
+    static { this.properties = {
+        open: { type: Boolean, reflect: true },
+        title: { type: String },
+        message: { type: String },
+        confirmText: { type: String },
+        cancelText: { type: String },
+        danger: { type: Boolean }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: contents;
+		}
+
+		.backdrop {
+			position: fixed;
+			inset: 0;
+			background: rgba(8, 8, 8, 0.82);
+			backdrop-filter: blur(20px);
+			-webkit-backdrop-filter: blur(20px);
+			z-index: 999;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 1.5rem;
+			box-sizing: border-box;
+			animation: fadeIn 0.2s ease;
+		}
+
+		.dialog {
+			background: linear-gradient(145deg, rgba(38, 38, 38, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
+			backdrop-filter: blur(28px);
+			-webkit-backdrop-filter: blur(28px);
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			border-radius: 16px;
+			padding: 1.75rem;
+			max-width: 420px;
+			width: 100%;
+			box-shadow:
+				0 25px 60px -15px rgba(0, 0, 0, 0.8),
+				0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			box-sizing: border-box;
+			animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+		}
+
+		.title {
+			font-size: 16px;
+			font-weight: 700;
+			color: #f5f5f5;
+			margin: 0 0 0.4rem 0;
+			letter-spacing: -0.01em;
+		}
+
+		.message {
+			font-size: 12.5px;
+			color: #a5a5a5;
+			line-height: 1.5;
+			margin: 0 0 1.25rem 0;
+		}
+
+		.actions {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: 0.65rem;
+		}
+
+		@keyframes fadeIn {
+			from {
+				opacity: 0;
+			}
+			to {
+				opacity: 1;
+			}
+		}
+
+		@keyframes slideUp {
+			from {
+				opacity: 0;
+				transform: translateY(10px) scale(0.98);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0) scale(1);
+			}
+		}
+	`; }
+    handleConfirm() {
+        this.dispatchEvent(new CustomEvent('confirm', { bubbles: true, composed: true }));
+        this.open = false;
+    }
+    handleCancel() {
+        this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
+        this.open = false;
+    }
+    render() {
+        if (!this.open)
+            return html ``;
+        return html `
+			<div
+				class="backdrop"
+				@click="${(e) => {
+            if (e.target === e.currentTarget)
+                this.handleCancel();
+        }}"
+			>
+				<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
+					<h3 class="title" id="dialog-title">${this.title}</h3>
+					<p class="message">${this.message}</p>
+					<div class="actions">
+						<activityual-button variant="secondary" @click="${this.handleCancel}">
+							${this.cancelText}
+						</activityual-button>
+						<activityual-button
+							variant="${this.danger ? 'danger' : 'primary'}"
+							@click="${this.handleConfirm}"
+						>
+							${this.confirmText}
+						</activityual-button>
+					</div>
+				</div>
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-confirm-dialog')) {
+    customElements.define('activityual-confirm-dialog', ActivityualConfirmDialog);
+}

package/dist/empty-state.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import './button.js';
+export declare class ActivityualEmptyState extends LitElement {
+    static properties: {
+        title: {
+            type: StringConstructor;
+        };
+        message: {
+            type: StringConstructor;
+        };
+        actionText: {
+            type: StringConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+    };
+    title: string;
+    message: string;
+    actionText: string;
+    icon: string;
+    static styles: import("lit").CSSResult;
+    handleAction(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/empty-state.js

@@ -0,0 +1,95 @@
+import { LitElement, html, css } from 'lit';
+import './button.js';
+export class ActivityualEmptyState extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = 'No habits tracked yet';
+        this.message = 'Start by creating your first daily ritual to build momentum.';
+        this.actionText = 'Create Habit';
+        this.icon = '🌱';
+    }
+    static { this.properties = {
+        title: { type: String },
+        message: { type: String },
+        actionText: { type: String },
+        icon: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+		}
+
+		.empty-box {
+			background: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(20, 20, 20, 0.7) 100%);
+			backdrop-filter: blur(16px);
+			-webkit-backdrop-filter: blur(16px);
+			border: 1px dashed rgba(255, 255, 255, 0.12);
+			border-radius: 16px;
+			padding: 2.5rem 1.75rem;
+			text-align: center;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 0.85rem;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			box-sizing: border-box;
+		}
+
+		.icon-pod {
+			width: 52px;
+			height: 52px;
+			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;
+			font-size: 24px;
+			margin-bottom: 0.25rem;
+			box-shadow: 0 0 16px rgba(255, 67, 5, 0.18);
+		}
+
+		.title {
+			font-size: 16px;
+			font-weight: 700;
+			color: #f5f5f5;
+			margin: 0;
+			letter-spacing: -0.01em;
+		}
+
+		.message {
+			font-size: 12.5px;
+			color: #a5a5a5;
+			max-width: 360px;
+			line-height: 1.5;
+			margin: 0 0 0.5rem 0;
+		}
+	`; }
+    handleAction() {
+        this.dispatchEvent(new CustomEvent('action-click', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+			<div class="empty-box">
+				<div class="icon-pod" aria-hidden="true">${this.icon}</div>
+				<h3 class="title">${this.title}</h3>
+				<p class="message">${this.message}</p>
+				${this.actionText
+            ? html `
+							<activityual-button variant="primary" @click="${this.handleAction}">
+								+ ${this.actionText}
+							</activityual-button>
+					  `
+            : ''}
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-empty-state')) {
+    customElements.define('activityual-empty-state', ActivityualEmptyState);
+}

package/dist/form-field.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+export declare class ActivityualFormField extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        type: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        error: {
+            type: StringConstructor;
+        };
+        required: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+    };
+    label: string;
+    name: string;
+    type: string;
+    value: string;
+    placeholder: string;
+    error: string;
+    required: boolean;
+    disabled: boolean;
+    static styles: import("lit").CSSResult;
+    handleInput(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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