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

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

package/dist/tokens.d.ts

@@ -0,0 +1,174 @@
+export declare const tokens: {
+    readonly name: "Vaulto Obsidian";
+    readonly version: "3.0.0";
+    readonly colors: {
+        readonly canvasBase: "#080808";
+        readonly background: "#080808";
+        readonly surface: "#272727";
+        readonly surfaceDim: "#111111";
+        readonly surfaceSubtle: "#1B1B1B";
+        readonly surfaceCard: "#202020";
+        readonly surfaceElevated: "#2C2C2C";
+        readonly surfaceBright: "#353535";
+        readonly surfaceContainer: "#1D1D1D";
+        readonly surfaceContainerLow: "#151515";
+        readonly surfaceContainerLowest: "#080808";
+        readonly surfaceContainerHigh: "#272727";
+        readonly surfaceContainerHighest: "#333333";
+        readonly surfaceHover: "#353535";
+        readonly surfaceActive: "#414141";
+        readonly surfaceInset: "#121212";
+        readonly bgCanvas: "#080808";
+        readonly textPrimary: "#F5F5F5";
+        readonly textSecondary: "#A5A5A5";
+        readonly textTertiary: "#707070";
+        readonly textMuted: "#707070";
+        readonly textInverse: "#101010";
+        readonly onSurface: "#F5F5F5";
+        readonly onSurfaceVariant: "#A5A5A5";
+        readonly inverseSurface: "#F5F5F5";
+        readonly inverseOnSurface: "#181818";
+        readonly primary: "#FF4305";
+        readonly primaryHover: "#E93B00";
+        readonly primaryContainer: "#FF4305";
+        readonly primarySoft: "rgba(255, 67, 5, 0.12)";
+        readonly primaryFixed: "#FFDAD3";
+        readonly primaryFixedDim: "#FFB4A4";
+        readonly onPrimary: "#FFFFFF";
+        readonly onPrimaryContainer: "#FFFFFF";
+        readonly accentGlow: "rgba(255, 67, 5, 0.25)";
+        readonly statusDone: "#25D366";
+        readonly statusDoneBg: "rgba(37, 211, 102, 0.12)";
+        readonly statusDoneBorder: "rgba(37, 211, 102, 0.25)";
+        readonly secondary: "#25D366";
+        readonly secondaryContainer: "#1EA852";
+        readonly statusMissed: "#FF3434";
+        readonly statusMissedBg: "rgba(255, 52, 52, 0.12)";
+        readonly statusMissedBorder: "rgba(255, 52, 52, 0.25)";
+        readonly error: "#FF3434";
+        readonly errorContainer: "#D32F2F";
+        readonly statusPending: "#F59E0B";
+        readonly statusPendingBg: "rgba(245, 158, 11, 0.12)";
+        readonly statusPendingBorder: "rgba(245, 158, 11, 0.25)";
+        readonly neutral: "#929292";
+        readonly tertiary: "#A5A5A5";
+        readonly borderSubtle: "rgba(255, 255, 255, 0.05)";
+        readonly borderStrong: "rgba(255, 255, 255, 0.12)";
+        readonly borderHighlight: "rgba(255, 255, 255, 0.1)";
+        readonly outline: "#383838";
+        readonly outlineVariant: "#555555";
+    };
+    readonly typography: {
+        readonly fontFamilySans: "Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+        readonly fontFamilyMono: "'JetBrains Mono', monospace";
+        readonly sizes: {
+            readonly displayLg: {
+                readonly fontSize: "2rem";
+                readonly lineHeight: "2.25rem";
+                readonly fontWeight: "700";
+                readonly letterSpacing: "-0.03em";
+            };
+            readonly displayLgMobile: {
+                readonly fontSize: "1.75rem";
+                readonly lineHeight: "2rem";
+                readonly fontWeight: "700";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly headlineLg: {
+                readonly fontSize: "1.5rem";
+                readonly lineHeight: "1.875rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly headlineMd: {
+                readonly fontSize: "1.125rem";
+                readonly lineHeight: "1.5rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.015em";
+            };
+            readonly headlineSm: {
+                readonly fontSize: "1rem";
+                readonly lineHeight: "1.375rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly statCounter: {
+                readonly fontSize: "1.875rem";
+                readonly lineHeight: "2.125rem";
+                readonly fontWeight: "700";
+                readonly letterSpacing: "-0.03em";
+            };
+            readonly bodyLg: {
+                readonly fontSize: "0.9375rem";
+                readonly lineHeight: "1.375rem";
+                readonly fontWeight: "400";
+                readonly letterSpacing: "0em";
+            };
+            readonly bodyMd: {
+                readonly fontSize: "0.8125rem";
+                readonly lineHeight: "1.25rem";
+                readonly fontWeight: "400";
+                readonly letterSpacing: "0em";
+            };
+            readonly bodySm: {
+                readonly fontSize: "0.6875rem";
+                readonly lineHeight: "1rem";
+                readonly fontWeight: "400";
+                readonly letterSpacing: "0.01em";
+            };
+            readonly labelMd: {
+                readonly fontSize: "0.8125rem";
+                readonly lineHeight: "1.125rem";
+                readonly fontWeight: "500";
+                readonly letterSpacing: "0.01em";
+            };
+            readonly labelSm: {
+                readonly fontSize: "0.6875rem";
+                readonly lineHeight: "0.9375rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "0.04em";
+            };
+        };
+    };
+    readonly spacing: {
+        readonly spaceXs: "0.25rem";
+        readonly spaceSm: "0.5rem";
+        readonly spaceMd: "0.75rem";
+        readonly spaceLg: "1.25rem";
+        readonly spaceXl: "1.5rem";
+        readonly space2xl: "2.5rem";
+        readonly gutter: "0.75rem";
+        readonly gutterDesktop: "1rem";
+        readonly margin: "1rem";
+        readonly marginTablet: "1.25rem";
+        readonly marginDesktop: "1.5rem";
+    };
+    readonly radii: {
+        readonly sm: "0.5rem";
+        readonly DEFAULT: "0.6875rem";
+        readonly md: "0.6875rem";
+        readonly lg: "0.9375rem";
+        readonly xl: "1.125rem";
+        readonly full: "9999px";
+    };
+    readonly elevation: {
+        readonly glassLow: {
+            readonly background: "rgba(32, 32, 32, 0.7)";
+            readonly backdropFilter: "blur(12px)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.04)";
+        };
+        readonly glassCard: {
+            readonly background: "linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%)";
+            readonly backdropFilter: "blur(20px)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.05)";
+            readonly boxShadow: "0 10px 28px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
+        };
+        readonly glassElevated: {
+            readonly background: "linear-gradient(145deg, rgba(50, 50, 50, 0.75) 0%, rgba(30, 30, 30, 0.88) 100%)";
+            readonly backdropFilter: "blur(24px)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.08)";
+            readonly boxShadow: "0 16px 36px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12)";
+        };
+    };
+};
+export type ThemeTokens = typeof tokens;

package/dist/tokens.js

@@ -0,0 +1,125 @@
+export const tokens = {
+    name: 'Vaulto Obsidian',
+    version: '3.0.0',
+    colors: {
+        // Canvas and surfaces (Vaulto pure charcoal & near-black foundation)
+        canvasBase: '#080808',
+        background: '#080808',
+        surface: '#272727',
+        surfaceDim: '#111111',
+        surfaceSubtle: '#1B1B1B',
+        surfaceCard: '#202020',
+        surfaceElevated: '#2C2C2C',
+        surfaceBright: '#353535',
+        surfaceContainer: '#1D1D1D',
+        surfaceContainerLow: '#151515',
+        surfaceContainerLowest: '#080808',
+        surfaceContainerHigh: '#272727',
+        surfaceContainerHighest: '#333333',
+        surfaceHover: '#353535',
+        surfaceActive: '#414141',
+        surfaceInset: '#121212',
+        bgCanvas: '#080808',
+        // Text and typography
+        textPrimary: '#F5F5F5',
+        textSecondary: '#A5A5A5',
+        textTertiary: '#707070',
+        textMuted: '#707070',
+        textInverse: '#101010',
+        onSurface: '#F5F5F5',
+        onSurfaceVariant: '#A5A5A5',
+        inverseSurface: '#F5F5F5',
+        inverseOnSurface: '#181818',
+        // Primary accent (Vaulto Signature Orange)
+        primary: '#FF4305',
+        primaryHover: '#E93B00',
+        primaryContainer: '#FF4305',
+        primarySoft: 'rgba(255, 67, 5, 0.12)',
+        primaryFixed: '#FFDAD3',
+        primaryFixedDim: '#FFB4A4',
+        onPrimary: '#FFFFFF',
+        onPrimaryContainer: '#FFFFFF',
+        accentGlow: 'rgba(255, 67, 5, 0.25)',
+        // Success & Completion (Vaulto Financial Positive)
+        statusDone: '#25D366',
+        statusDoneBg: 'rgba(37, 211, 102, 0.12)',
+        statusDoneBorder: 'rgba(37, 211, 102, 0.25)',
+        secondary: '#25D366',
+        secondaryContainer: '#1EA852',
+        // Warning & Missed (Vaulto Financial Negative)
+        statusMissed: '#FF3434',
+        statusMissedBg: 'rgba(255, 52, 52, 0.12)',
+        statusMissedBorder: 'rgba(255, 52, 52, 0.25)',
+        error: '#FF3434',
+        errorContainer: '#D32F2F',
+        // Pending & Neutral Status
+        statusPending: '#F59E0B',
+        statusPendingBg: 'rgba(245, 158, 11, 0.12)',
+        statusPendingBorder: 'rgba(245, 158, 11, 0.25)',
+        neutral: '#929292',
+        tertiary: '#A5A5A5',
+        // Borders & Lines
+        borderSubtle: 'rgba(255, 255, 255, 0.05)',
+        borderStrong: 'rgba(255, 255, 255, 0.12)',
+        borderHighlight: 'rgba(255, 255, 255, 0.1)',
+        outline: '#383838',
+        outlineVariant: '#555555'
+    },
+    typography: {
+        fontFamilySans: "Inter, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        fontFamilyMono: "'JetBrains Mono', monospace",
+        sizes: {
+            displayLg: { fontSize: '2rem', lineHeight: '2.25rem', fontWeight: '700', letterSpacing: '-0.03em' },
+            displayLgMobile: { fontSize: '1.75rem', lineHeight: '2rem', fontWeight: '700', letterSpacing: '-0.02em' },
+            headlineLg: { fontSize: '1.5rem', lineHeight: '1.875rem', fontWeight: '600', letterSpacing: '-0.02em' },
+            headlineMd: { fontSize: '1.125rem', lineHeight: '1.5rem', fontWeight: '600', letterSpacing: '-0.015em' },
+            headlineSm: { fontSize: '1rem', lineHeight: '1.375rem', fontWeight: '600', letterSpacing: '-0.01em' },
+            statCounter: { fontSize: '1.875rem', lineHeight: '2.125rem', fontWeight: '700', letterSpacing: '-0.03em' },
+            bodyLg: { fontSize: '0.9375rem', lineHeight: '1.375rem', fontWeight: '400', letterSpacing: '0em' },
+            bodyMd: { fontSize: '0.8125rem', lineHeight: '1.25rem', fontWeight: '400', letterSpacing: '0em' },
+            bodySm: { fontSize: '0.6875rem', lineHeight: '1rem', fontWeight: '400', letterSpacing: '0.01em' },
+            labelMd: { fontSize: '0.8125rem', lineHeight: '1.125rem', fontWeight: '500', letterSpacing: '0.01em' },
+            labelSm: { fontSize: '0.6875rem', lineHeight: '0.9375rem', fontWeight: '600', letterSpacing: '0.04em' }
+        }
+    },
+    spacing: {
+        spaceXs: '0.25rem',
+        spaceSm: '0.5rem',
+        spaceMd: '0.75rem',
+        spaceLg: '1.25rem',
+        spaceXl: '1.5rem',
+        space2xl: '2.5rem',
+        gutter: '0.75rem',
+        gutterDesktop: '1rem',
+        margin: '1rem',
+        marginTablet: '1.25rem',
+        marginDesktop: '1.5rem'
+    },
+    radii: {
+        sm: '0.5rem',
+        DEFAULT: '0.6875rem',
+        md: '0.6875rem',
+        lg: '0.9375rem',
+        xl: '1.125rem',
+        full: '9999px'
+    },
+    elevation: {
+        glassLow: {
+            background: 'rgba(32, 32, 32, 0.7)',
+            backdropFilter: 'blur(12px)',
+            border: '1px solid rgba(255, 255, 255, 0.04)'
+        },
+        glassCard: {
+            background: 'linear-gradient(145deg, rgba(42, 42, 42, 0.65) 0%, rgba(24, 24, 24, 0.8) 100%)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(255, 255, 255, 0.05)',
+            boxShadow: '0 10px 28px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08)'
+        },
+        glassElevated: {
+            background: 'linear-gradient(145deg, rgba(50, 50, 50, 0.75) 0%, rgba(30, 30, 30, 0.88) 100%)',
+            backdropFilter: 'blur(24px)',
+            border: '1px solid rgba(255, 255, 255, 0.08)',
+            boxShadow: '0 16px 36px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12)'
+        }
+    }
+};

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@adarsh.nishad/activityual-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "check": "tsc --noEmit",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "typescript": "6.0.3"
+  }
+}