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

package/README.md

@@ -1,3 +1,106 @@
-# Temporary Holding Version
+# Activityual UI Component Library (`@adarsh.nishad/activityual-ui`)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A reusable, accessible web component library built with **Lit** for the **Activityual** cloud-native personal habit tracker.
+
+---
+
+## Components
+
+| Component | Custom Element Tag | Description |
+| :--- | :--- | :--- |
+| **Button** | `<activityual-button>` | Interactive button (`primary`, `secondary`, `amber`, `charcoal`, `ghost`, `danger`) with loading states |
+| **Card** | `<activityual-card>` | Obsidian glass container card with subtle borders and glow |
+| **Activity Card** | `<activityual-activity-card>` | Core habit/activity card with streak badges, actions, and progress |
+| **Stat Card** | `<activityual-stat-card>` | Metrics and KPI display card with sparkline and delta indicators |
+| **Progress Ring** | `<activityual-progress-ring>` | Circular SVG progress ring with animated stroke and target values |
+| **Streak Badge** | `<activityual-streak-badge>` | Visual flame streak badge displaying active day streaks |
+| **Status Pill** | `<activityual-status-pill>` | Activity status indicators (`active`, `paused`, `archived`, `completed`) |
+| **Chart Panel** | `<activityual-chart-panel>` | Analytics and visualization container panel with filters |
+| **Recommendation Banner**| `<activityual-recommendation-banner>` | AI-driven habit suggestion and nudge banner |
+| **Empty State** | `<activityual-empty-state>` | Placeholder presentation for empty lists and initial states |
+| **Confirm Dialog** | `<activityual-confirm-dialog>` | Modal confirmation dialog with backdrop blur |
+| **Form Field** | `<activityual-form-field>` | Styled input / select / textarea wrapper with validation |
+
+---
+
+## Installation & Consumption
+
+### In SvelteKit / Web Applications
+
+Install the package:
+
+```bash
+npm install @adarsh.nishad/activityual-ui
+```
+
+Register all custom elements in your root layout (`src/routes/+layout.svelte`):
+
+```typescript
+import '@adarsh.nishad/activityual-ui';
+```
+
+Or import design tokens directly:
+
+```typescript
+import { tokens } from '@adarsh.nishad/activityual-ui';
+```
+
+---
+
+## Building & Publishing to npm
+
+Follow these steps whenever you make changes to `packages/activityual-ui` and want to publish a new release:
+
+### Step 1: Verify npm Authentication
+
+```bash
+npm whoami
+```
+
+If not logged in, run:
+
+```bash
+npm login
+```
+
+### Step 2: Build the Library
+
+Compile all custom elements and TypeScript type definitions into `dist/`:
+
+```bash
+# From repository root:
+npm run build:ui
+
+# Or directly in this directory:
+npm run build
+```
+
+### Step 3: Bump Version
+
+Bump the semantic version (`patch`, `minor`, or `major`):
+
+```bash
+# From repository root:
+npm run version:ui:patch   # e.g. 0.1.0 -> 0.1.1
+# or
+npm run version:ui:minor   # e.g. 0.1.0 -> 0.2.0
+# or
+npm run version:ui:major   # e.g. 0.1.0 -> 1.0.0
+
+# Or navigate directly:
+cd packages/activityual-ui
+npm version patch # or minor / major
+```
+
+### Step 4: Publish to npm
+
+Since it is a scoped package (`@adarsh.nishad/...`), publish with public access:
+
+```bash
+# From repository root:
+npm run publish:ui
+
+# Or navigate directly:
+cd packages/activityual-ui
+npm publish --access public
+```

package/dist/activity-card.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+import './status-pill.js';
+import './button.js';
+export declare class ActivityualActivityCard extends LitElement {
+    static properties: {
+        activityId: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        category: {
+            type: StringConstructor;
+        };
+        frequency: {
+            type: StringConstructor;
+        };
+        status: {
+            type: StringConstructor;
+        };
+        streak: {
+            type: NumberConstructor;
+        };
+        notes: {
+            type: StringConstructor;
+        };
+        readOnly: {
+            type: BooleanConstructor;
+        };
+    };
+    activityId: string;
+    title: string;
+    category: string;
+    frequency: string;
+    status: 'done' | 'missed' | 'pending';
+    streak: number;
+    notes: string;
+    readOnly: boolean;
+    static styles: import("lit").CSSResult;
+    getCategoryIcon(cat: string): string;
+    handleAction(status: 'done' | 'missed'): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/activity-card.js

@@ -0,0 +1,302 @@
+import { LitElement, html, css } from 'lit';
+import './status-pill.js';
+import './button.js';
+export class ActivityualActivityCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activityId = '';
+        this.title = '';
+        this.category = 'General';
+        this.frequency = 'Daily';
+        this.status = 'pending';
+        this.streak = 0;
+        this.notes = '';
+        this.readOnly = false;
+    }
+    static { this.properties = {
+        activityId: { type: String },
+        title: { type: String },
+        category: { type: String },
+        frequency: { type: String },
+        status: { type: String },
+        streak: { type: Number },
+        notes: { type: String },
+        readOnly: { type: Boolean }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: block;
+			box-sizing: border-box;
+		}
+
+		.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: 14px;
+			padding: 1rem 1.25rem;
+			box-shadow:
+				0 8px 24px -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;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1rem;
+			transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+			box-sizing: border-box;
+		}
+
+		.card:hover {
+			background: linear-gradient(145deg, rgba(48, 48, 48, 0.75) 0%, rgba(28, 28, 28, 0.88) 100%);
+			transform: translateY(-1px);
+			border-color: rgba(255, 255, 255, 0.1);
+			box-shadow:
+				0 14px 32px -6px rgba(0, 0, 0, 0.55),
+				inset 0 1px 0 rgba(255, 255, 255, 0.12);
+		}
+
+		.left-cluster {
+			display: flex;
+			align-items: center;
+			gap: 0.85rem;
+			min-width: 0;
+			flex: 1;
+		}
+
+		.category-icon {
+			width: 38px;
+			height: 38px;
+			border-radius: 10px;
+			background: rgba(255, 67, 5, 0.1);
+			border: 1px solid rgba(255, 67, 5, 0.2);
+			color: #ff4305;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 16px;
+			flex-shrink: 0;
+			box-shadow: 0 0 10px rgba(255, 67, 5, 0.15);
+		}
+
+		.info {
+			display: flex;
+			flex-direction: column;
+			gap: 0.2rem;
+			min-width: 0;
+		}
+
+		.title-row {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			flex-wrap: wrap;
+		}
+
+		.title {
+			font-size: 13.5px;
+			font-weight: 600;
+			color: #f5f5f5;
+			margin: 0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			letter-spacing: -0.01em;
+		}
+
+		.meta {
+			display: flex;
+			align-items: center;
+			gap: 0.55rem;
+			font-size: 11px;
+			color: #a5a5a5;
+			font-family: 'JetBrains Mono', monospace;
+		}
+
+		.meta-tag {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.25rem;
+		}
+
+		.streak-tag {
+			color: #ff4305;
+			font-weight: 600;
+		}
+
+		.notes {
+			font-size: 11.5px;
+			color: #707070;
+			margin: 0.2rem 0 0 0;
+			display: -webkit-box;
+			-webkit-line-clamp: 1;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+		}
+
+		.dot-trail {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			margin-top: 4px;
+		}
+
+		.dot {
+			width: 6px;
+			height: 6px;
+			border-radius: 50%;
+			background: rgba(255, 255, 255, 0.12);
+		}
+
+		.dot.done {
+			background: #25d366;
+			box-shadow: 0 0 6px rgba(37, 211, 102, 0.4);
+		}
+
+		.dot.missed {
+			background: #ff3434;
+			box-shadow: 0 0 6px rgba(255, 52, 52, 0.4);
+		}
+
+		.right-cluster {
+			display: flex;
+			align-items: center;
+			gap: 0.65rem;
+			flex-shrink: 0;
+		}
+
+		.action-btn {
+			width: 32px;
+			height: 32px;
+			border-radius: 9999px;
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			background: rgba(255, 255, 255, 0.04);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			font-size: 13px;
+			font-weight: 700;
+			color: #a5a5a5;
+			transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+			outline: none;
+		}
+
+		.action-btn:focus-visible {
+			box-shadow: 0 0 0 2px rgba(255, 67, 5, 0.4);
+		}
+
+		.action-done:hover {
+			background: rgba(37, 211, 102, 0.2);
+			border-color: #25d366;
+			color: #25d366;
+			box-shadow: 0 0 10px rgba(37, 211, 102, 0.3);
+			transform: scale(1.05);
+		}
+
+		.action-done.active {
+			background: #25d366;
+			border-color: #25d366;
+			color: #ffffff;
+			box-shadow: 0 0 12px rgba(37, 211, 102, 0.4);
+		}
+
+		.action-missed:hover {
+			background: rgba(255, 52, 52, 0.2);
+			border-color: #ff3434;
+			color: #ff3434;
+			box-shadow: 0 0 10px rgba(255, 52, 52, 0.3);
+			transform: scale(1.05);
+		}
+
+		.action-missed.active {
+			background: #ff3434;
+			border-color: #ff3434;
+			color: #ffffff;
+			box-shadow: 0 0 12px rgba(255, 52, 52, 0.4);
+		}
+	`; }
+    getCategoryIcon(cat) {
+        const lower = cat.toLowerCase();
+        if (lower.includes('health') || lower.includes('hydration') || lower.includes('water'))
+            return '💧';
+        if (lower.includes('fit') || lower.includes('workout') || lower.includes('sport'))
+            return '⚡';
+        if (lower.includes('mind') || lower.includes('read') || lower.includes('meditat'))
+            return '📖';
+        if (lower.includes('code') || lower.includes('deep') || lower.includes('work'))
+            return '🎯';
+        return '✨';
+    }
+    handleAction(status) {
+        this.dispatchEvent(new CustomEvent('status-change', {
+            detail: { activityId: this.activityId, status },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+			<div class="card">
+				<div class="left-cluster">
+					<div class="category-icon" aria-hidden="true">
+						${this.getCategoryIcon(this.category)}
+					</div>
+					<div class="info">
+						<div class="title-row">
+							<h3 class="title">${this.title}</h3>
+						</div>
+						<div class="meta">
+							<span class="meta-tag">${this.category}</span>
+							<span>•</span>
+							<span class="meta-tag">${this.frequency}</span>
+							${this.streak > 0
+            ? html `
+										<span>•</span>
+										<span class="meta-tag streak-tag">🔥 ${this.streak}d streak</span>
+								  `
+            : ''}
+						</div>
+						${this.notes ? html `<p class="notes">${this.notes}</p>` : ''}
+						<div class="dot-trail" aria-label="Recent consistency">
+							<span class="dot done"></span>
+							<span class="dot done"></span>
+							<span class="dot done"></span>
+							<span class="dot done"></span>
+							<span class="dot ${this.status === 'done' ? 'done' : this.status === 'missed' ? 'missed' : ''}"></span>
+						</div>
+					</div>
+				</div>
+
+				<div class="right-cluster">
+					<activityual-status-pill .status="${this.status}" size="sm"></activityual-status-pill>
+
+					${!this.readOnly
+            ? html `
+								<button
+									class="action-btn action-done ${this.status === 'done' ? 'active' : ''}"
+									title="Mark Done"
+									aria-label="Mark ${this.title} Done"
+									@click="${() => this.handleAction('done')}"
+								>
+									✓
+								</button>
+								<button
+									class="action-btn action-missed ${this.status === 'missed' ? 'active' : ''}"
+									title="Mark Missed"
+									aria-label="Mark ${this.title} Missed"
+									@click="${() => this.handleAction('missed')}"
+								>
+									✕
+								</button>
+						  `
+            : ''}
+				</div>
+			</div>
+		`;
+    }
+}
+if (!customElements.get('activityual-activity-card')) {
+    customElements.define('activityual-activity-card', ActivityualActivityCard);
+}

package/dist/button.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'charcoal' | 'amber';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export declare class ActivityualButton extends LitElement {
+    static properties: {
+        variant: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+        };
+    };
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    type: string;
+    static styles: import("lit").CSSResult;
+    handleClick(e: MouseEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/button.js

@@ -0,0 +1,184 @@
+import { LitElement, html, css } from 'lit';
+export class ActivityualButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'primary';
+        this.size = 'md';
+        this.disabled = false;
+        this.loading = false;
+        this.type = 'button';
+    }
+    static { this.properties = {
+        variant: { type: String },
+        size: { type: String },
+        disabled: { type: Boolean, reflect: true },
+        loading: { type: Boolean, reflect: true },
+        type: { type: String }
+    }; }
+    static { this.styles = css `
+		:host {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			gap: 0.5rem;
+			font-family: Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+			font-weight: 600;
+			letter-spacing: -0.01em;
+			border-radius: 9999px;
+			cursor: pointer;
+			transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+			box-sizing: border-box;
+			width: 100%;
+			text-decoration: none;
+			outline: none;
+			user-select: none;
+		}
+
+		button:focus-visible {
+			box-shadow: 0 0 0 2px rgba(255, 67, 5, 0.4);
+		}
+
+		/* Sizes */
+		button.sm {
+			height: 30px;
+			padding: 0 12px;
+			font-size: 11px;
+		}
+
+		button.md {
+			height: 36px;
+			padding: 0 16px;
+			font-size: 12px;
+		}
+
+		button.lg {
+			height: 42px;
+			padding: 0 22px;
+			font-size: 14px;
+		}
+
+		/* Primary: Vaulto solid vibrant orange */
+		button.primary,
+		button.amber {
+			background: #ff4305;
+			color: #ffffff;
+			border: 1px solid rgba(255, 255, 255, 0.15);
+			box-shadow:
+				0 4px 14px rgba(255, 67, 5, 0.35),
+				inset 0 1px 1px rgba(255, 255, 255, 0.2);
+		}
+		button.primary:hover:not(:disabled),
+		button.amber:hover:not(:disabled) {
+			background: #e93b00;
+			transform: translateY(-1px);
+			box-shadow:
+				0 6px 18px rgba(255, 67, 5, 0.45),
+				inset 0 1px 1px rgba(255, 255, 255, 0.3);
+		}
+		button.primary:active:not(:disabled),
+		button.amber:active:not(:disabled) {
+			transform: translateY(1px);
+		}
+
+		/* Secondary: Vaulto dark translucent obsidian */
+		button.secondary,
+		button.charcoal {
+			background: rgba(255, 255, 255, 0.05);
+			color: #f5f5f5;
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			backdrop-filter: blur(12px);
+			-webkit-backdrop-filter: blur(12px);
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		}
+		button.secondary:hover:not(:disabled),
+		button.charcoal:hover:not(:disabled) {
+			background: rgba(255, 255, 255, 0.09);
+			border-color: rgba(255, 255, 255, 0.14);
+			transform: translateY(-1px);
+		}
+		button.secondary:active:not(:disabled),
+		button.charcoal:active:not(:disabled) {
+			transform: translateY(1px);
+		}
+
+		/* Ghost */
+		button.ghost {
+			background: transparent;
+			color: #a5a5a5;
+			border: 1px solid transparent;
+		}
+		button.ghost:hover:not(:disabled) {
+			background: rgba(255, 255, 255, 0.05);
+			color: #ffffff;
+		}
+
+		/* Danger */
+		button.danger {
+			background: #ff3434;
+			color: #ffffff;
+			border: 1px solid rgba(255, 255, 255, 0.15);
+			box-shadow: 0 4px 14px rgba(255, 52, 52, 0.35);
+		}
+		button.danger:hover:not(:disabled) {
+			background: #e02020;
+			transform: translateY(-1px);
+			box-shadow: 0 6px 18px rgba(255, 52, 52, 0.45);
+		}
+
+		button:disabled {
+			opacity: 0.35;
+			cursor: not-allowed;
+			transform: none !important;
+			box-shadow: none !important;
+		}
+
+		.spinner {
+			width: 14px;
+			height: 14px;
+			border: 2px solid rgba(255, 255, 255, 0.3);
+			border-radius: 50%;
+			border-top-color: currentColor;
+			animation: spin 0.8s linear infinite;
+		}
+
+		@keyframes spin {
+			to {
+				transform: rotate(360deg);
+			}
+		}
+	`; }
+    handleClick(e) {
+        if (this.disabled || this.loading) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (this.type === 'submit') {
+            const form = this.closest('form');
+            if (form) {
+                form.requestSubmit();
+            }
+        }
+    }
+    render() {
+        return html `
+			<button
+				class="${this.variant} ${this.size}"
+				?disabled="${this.disabled || this.loading}"
+				type="${this.type}"
+				@click="${this.handleClick}"
+			>
+				${this.loading ? html `<span class="spinner" aria-hidden="true"></span>` : ''}
+				<slot></slot>
+			</button>
+		`;
+    }
+}
+if (!customElements.get('activityual-button')) {
+    customElements.define('activityual-button', ActivityualButton);
+}

package/dist/card.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export type CardVariant = 'default' | 'amber' | 'inset' | 'shell';
+export declare class ActivityualCard extends LitElement {
+    static properties: {
+        variant: {
+            type: StringConstructor;
+        };
+        padding: {
+            type: StringConstructor;
+        };
+    };
+    variant: CardVariant;
+    padding: 'none' | 'sm' | 'md' | 'lg';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}