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

package/dist/card.js

@@ -0,0 +1,99 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'default';
+        this.padding = 'md';
+    }
+    static { this.properties = {
+        variant: { type: String },
+        padding: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+		}
+
+		.card {
+			box-sizing: border-box;
+			border-radius: 1rem;
+			position: relative;
+			overflow: hidden;
+			transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+			color: #f5f5f5;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+		}
+
+		/* Padding options */
+		.pad-none {
+			padding: 0;
+		}
+		.pad-sm {
+			padding: 1rem;
+		}
+		.pad-md {
+			padding: 1.25rem 1.5rem;
+		}
+		.pad-lg {
+			padding: 1.75rem;
+		}
+
+		/* Vaulto Obsidian Glass Card */
+		.default {
+			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);
+			box-shadow:
+				0 10px 28px -4px rgba(0, 0, 0, 0.45),
+				inset 0 1px 0 rgba(255, 255, 255, 0.08);
+		}
+
+		.default: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%);
+		}
+
+		/* Signature Accent Card (Vaulto Subtle Obsidian Orange Sheen) */
+		.amber {
+			background: linear-gradient(145deg, rgba(45, 30, 24, 0.7) 0%, rgba(24, 20, 18, 0.85) 100%);
+			color: #ffffff;
+			border: 1px solid rgba(255, 67, 5, 0.3);
+			box-shadow:
+				0 10px 28px -4px rgba(0, 0, 0, 0.5),
+				inset 0 1px 0 rgba(255, 67, 5, 0.25),
+				0 0 20px rgba(255, 67, 5, 0.1);
+		}
+
+		/* Inset well */
+		.inset {
+			background: #121212;
+			border: 1px solid rgba(255, 255, 255, 0.05);
+			border-radius: 9999px;
+			box-shadow:
+				inset 0 2px 4px rgba(0, 0, 0, 0.5),
+				0 1px 1px rgba(255, 255, 255, 0.02);
+		}
+
+		/* Shell enclosure */
+		.shell {
+			background: rgba(8, 8, 8, 0.98);
+			backdrop-filter: blur(32px);
+			-webkit-backdrop-filter: blur(32px);
+			border: 1px solid rgba(255, 255, 255, 0.05);
+			border-radius: 1.25rem;
+			box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
+		}
+	`; }
+    render() {
+        return html `
+			<div class="card ${this.variant} pad-${this.padding}">
+				<slot></slot>
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-card')) {
+    customElements.define('activityual-card', ActivityualCard);
+}

package/dist/chart-panel.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export interface ChartBarData {
+    label: string;
+    value: number;
+    target?: number;
+    highlight?: boolean;
+    status?: 'done' | 'missed' | 'pending';
+}
+export declare class ActivityualChartPanel extends LitElement {
+    static properties: {
+        title: {
+            type: StringConstructor;
+        };
+        subtitle: {
+            type: StringConstructor;
+        };
+        data: {
+            type: ArrayConstructor;
+        };
+    };
+    title: string;
+    subtitle: string;
+    data: ChartBarData[];
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/chart-panel.js

@@ -0,0 +1,247 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualChartPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = 'Weekly Consistency & Rhythm';
+        this.subtitle = 'Daily completions mapped against target baseline';
+        this.data = [];
+    }
+    static { this.properties = {
+        title: { type: String },
+        subtitle: { type: String },
+        data: { type: Array }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+		}
+
+		.panel {
+			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.25rem 1.5rem;
+			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;
+			box-sizing: border-box;
+		}
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 1.25rem;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+		}
+
+		.title {
+			font-size: 15px;
+			font-weight: 600;
+			color: #f5f5f5;
+			margin: 0;
+			letter-spacing: -0.01em;
+		}
+
+		.subtitle {
+			font-size: 11.5px;
+			color: #707070;
+			margin-top: 2px;
+		}
+
+		.chart-stage {
+			display: flex;
+			align-items: flex-end;
+			justify-content: space-between;
+			height: 150px;
+			padding: 0 0.5rem;
+			gap: 0.75rem;
+			border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+			padding-bottom: 0.5rem;
+		}
+
+		.bar-col {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			flex: 1;
+			height: 100%;
+			justify-content: flex-end;
+			gap: 0.5rem;
+		}
+
+		.bar-stem {
+			width: 100%;
+			max-width: 34px;
+			background: rgba(255, 255, 255, 0.03);
+			border-radius: 9999px;
+			position: relative;
+			display: flex;
+			align-items: flex-start;
+			justify-content: center;
+			padding-top: 6px;
+			transition: all 0.3s ease;
+			border: 1px solid rgba(255, 255, 255, 0.05);
+			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+		}
+
+		.bar-stem:hover {
+			transform: scaleY(1.02);
+			border-color: rgba(255, 67, 5, 0.3);
+		}
+
+		.bar-fill {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			border-radius: 9999px;
+			background: #333333;
+			transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+		}
+
+		/* Active day highlight in Vaulto red/orange gradient */
+		.highlight-col .bar-fill {
+			background: linear-gradient(180deg, #ff4305 0%, #ff3434 100%);
+			box-shadow: 0 0 14px rgba(255, 67, 5, 0.35);
+		}
+
+		.bar-fill.done {
+			background: linear-gradient(180deg, #25d366 0%, #1ea852 100%);
+			box-shadow: 0 0 10px rgba(37, 211, 102, 0.3);
+		}
+
+		.bar-fill.missed {
+			background: linear-gradient(180deg, #ff3434 0%, #d32f2f 100%);
+			box-shadow: 0 0 10px rgba(255, 52, 52, 0.3);
+		}
+
+		.bar-val {
+			position: relative;
+			z-index: 10;
+			font-size: 10px;
+			font-weight: 600;
+			color: #f5f5f5;
+			line-height: 1;
+			font-family: 'JetBrains Mono', monospace;
+			font-variant-numeric: tabular-nums;
+		}
+
+		.bar-label {
+			font-size: 11px;
+			font-weight: 500;
+			color: #707070;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.highlight-col .bar-label {
+			color: #f5f5f5;
+			font-weight: 700;
+		}
+
+		.highlight-col .bar-stem {
+			border-color: rgba(255, 67, 5, 0.35);
+			box-shadow: 0 0 14px rgba(255, 67, 5, 0.2);
+		}
+
+		.footer {
+			margin-top: 0.85rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 11px;
+			color: #707070;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.legend {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		.legend-item {
+			display: flex;
+			align-items: center;
+			gap: 0.35rem;
+		}
+
+		.legend-dot {
+			width: 7px;
+			height: 7px;
+			border-radius: 50%;
+		}
+
+		.dot-actual {
+			background: #ff4305;
+			box-shadow: 0 0 6px rgba(255, 67, 5, 0.5);
+		}
+
+		.dot-benchmark {
+			background: rgba(255, 255, 255, 0.2);
+		}
+	`; }
+    render() {
+        // Default weekly mockup data if none passed
+        const displayData = this.data.length > 0 ? this.data : [
+            { label: 'Sun', value: 45, status: 'done' },
+            { label: 'Mon', value: 70, status: 'done' },
+            { label: 'Tue', value: 60, status: 'done' },
+            { label: 'Wed', value: 92, highlight: true, status: 'done' },
+            { label: 'Thu', value: 55, status: 'pending' },
+            { label: 'Fri', value: 75, status: 'done' },
+            { label: 'Sat', value: 65, status: 'done' }
+        ];
+        return html `
+			<div class="panel">
+				<div class="header">
+					<div>
+						<h3 class="title">${this.title}</h3>
+						${this.subtitle ? html `<p class="subtitle">${this.subtitle}</p>` : ''}
+					</div>
+					<slot name="action"></slot>
+				</div>
+
+				<div class="chart-stage" role="img" aria-label="${this.title}">
+					${displayData.map((bar) => {
+            const heightPct = Math.min(Math.max(bar.value, 0), 100);
+            return html `
+							<div class="bar-col ${bar.highlight ? 'highlight-col' : ''}">
+								<div class="bar-stem" style="height: 100%;">
+									<div
+										class="bar-fill ${bar.status || ''}"
+										style="height: ${heightPct}%;"
+									></div>
+									<span class="bar-val">${bar.value}%</span>
+								</div>
+								<span class="bar-label">${bar.label}</span>
+							</div>
+						`;
+        })}
+				</div>
+
+				<div class="footer">
+					<div class="legend">
+						<span class="legend-item">
+							<span class="legend-dot dot-actual"></span>
+							<span>Peak Flow</span>
+						</span>
+						<span class="legend-item">
+							<span class="legend-dot dot-benchmark"></span>
+							<span>Target Rhythm</span>
+						</span>
+					</div>
+					<span>Baseline: 80% Target</span>
+				</div>
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-chart-panel')) {
+    customElements.define('activityual-chart-panel', ActivityualChartPanel);
+}

package/dist/confirm-dialog.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import './button.js';
+export declare class ActivityualConfirmDialog extends LitElement {
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        message: {
+            type: StringConstructor;
+        };
+        confirmText: {
+            type: StringConstructor;
+        };
+        cancelText: {
+            type: StringConstructor;
+        };
+        danger: {
+            type: BooleanConstructor;
+        };
+    };
+    open: boolean;
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText: string;
+    danger: boolean;
+    static styles: import("lit").CSSResult;
+    handleConfirm(): void;
+    handleCancel(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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