omnira-ui 0.6.5 → 0.6.7

package/README.md

@@ -122,6 +122,22 @@ Browse the full library and copy advanced components (Sidebar, Feature Cards, et
 - **User Account Menu** — Popup with profile, settings, account switching, sign out
 - **Search Bar** — Integrated ⌘K search component
 
+### Industry Widgets
+
+Drop-in dashboard widgets that follow the system design tokens — accent colors track the configurator and never go off-system.
+
+- **Fintech / Large** (10) — `CashflowAnalytics`, `SendMoney`, `CashflowSplit`, `SavingAccount`, `FinancialGrowth`, `SpendsBreakdown`, `SavingsMonthly`, `CreditPaymentPlanner`, `SavingsGoals`, `ExpensesChart`
+- **Fintech / Medium** (20) — `EmergencyFunds`, `IncomeBreakdown`, `WeeklyExpenditure`, `CreditCardUsed`, `AssetAllocation`, `MonthlySubscription`, `SavingsBuckets`, `MyCard`, `ConvertCurrency`, `SendMoneyCompact`, `TotalBalance`, `StockPosition`, `SpendingLimit`, `GoalProgress`, `SavedMoney`, `CashflowSummary`, `CashflowRing`, `CreditScore`, `InvestmentChart`, `DailyRevenue`
+
+Install all of one size in a single command:
+
+```bash
+npx omnira-ui add fintech-widgets         # 10 large widgets
+npx omnira-ui add fintech-widgets-medium  # 20 medium widgets
+```
+
+Or grab any single widget by its kebab-case slug — e.g. `npx omnira-ui add cashflow-analytics`. Browse them at [omnira.one/docs/widgets/fintech](https://omnira.one/docs/widgets/fintech).
+
 ---
 
 ## Design System

package/app/globals.css

@@ -13,29 +13,49 @@
 
 /* --- CSS Custom Properties: Dark Mode (Default) --- */
 [data-theme="dark"] {
+    /* Primary Accent (Mint/Teal for Pulse Dashboard) */
+    --color-primary: #3FC39E;
+    --color-primary-hover: #36B08E;
+    --color-primary-gradient: #2D9A7A;
+    --color-primary-text: #121212;
+
+    /* Legacy Lime Accent (Kept for backward compatibility with old components) */
     --color-lime: #D2FE17;
     --color-lime-hover: #c0e616;
     --color-lime-gradient: #ABC928;
     --color-lime-text: #121212;
 
+    /* Backgrounds */
     --color-bg-primary: #202020;
     --color-bg-secondary: #1a1a1a;
     --color-bg-card: rgba(248, 248, 248, 0.03);
     --color-bg-elevated: rgba(248, 248, 248, 0.06);
     --color-bg-input: rgba(248, 248, 248, 0.04);
     --color-bg-hover: rgba(248, 248, 248, 0.05);
+    --color-bg-sunken: rgba(248, 248, 248, 0.02);
     --color-bg-overlay: rgba(10, 10, 10, 0.97);
     --color-bg-sidebar: #1a1a1a;
 
+    /* Primary Accent Backgrounds */
+    --color-bg-primary-subtle: rgba(63, 195, 158, 0.06);
+    --color-bg-primary-medium: rgba(63, 195, 158, 0.08);
+    --color-bg-primary-strong: rgba(63, 195, 158, 0.12);
+
     --color-text-primary: rgba(248, 248, 248, 0.95);
     --color-text-secondary: rgba(248, 248, 248, 0.70);
     --color-text-tertiary: rgba(248, 248, 248, 0.50);
 
+    /* Borders */
     --color-border-subtle: rgba(255, 255, 255, 0.05);
     --color-border-standard: rgba(255, 255, 255, 0.06);
     --color-border-medium: rgba(255, 255, 255, 0.08);
     --color-border-strong: rgba(255, 255, 255, 0.15);
 
+    /* Primary Accent Borders */
+    --color-border-primary-subtle: rgba(63, 195, 158, 0.10);
+    --color-border-primary-medium: rgba(63, 195, 158, 0.15);
+    --color-border-primary-strong: rgba(63, 195, 158, 0.30);
+
     --color-border-lime-subtle: rgba(210, 254, 23, 0.1);
     --color-border-lime-medium: rgba(210, 254, 23, 0.15);
     --color-border-lime-strong: rgba(210, 254, 23, 0.3);
@@ -62,7 +82,7 @@
     --shadow-card-light: inset 1px 2px 12px rgba(248, 248, 248, 0.03), 0px 8px 28px rgba(0, 0, 0, 0.12);
     --shadow-card-accent: inset 2px 4px 16px rgba(210, 254, 23, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2);
     --shadow-card-hover: inset 2px 4px 16px rgba(248, 248, 248, 0.08), 0px 12px 40px rgba(0, 0, 0, 0.28);
-    --shadow-btn-primary: 0 8px 24px rgba(210, 254, 23, 0.3);
+    --shadow-btn-primary: 0 8px 24px rgba(63, 195, 158, 0.3);
     --shadow-glow-lime: 0 0 8px rgba(210, 254, 23, 0.6), 0 0 16px rgba(210, 254, 23, 0.3);
 
     --gradient-text: linear-gradient(93deg, rgba(248, 248, 248, 0.9), rgba(248, 248, 248, 0.5));

package/cli/omnira-init.mjs

@@ -406,6 +406,7 @@ const PAGE_BUNDLES = {
     // Navigation
     "sidebar-navigation": ["SidebarNavigation", "Button", "Avatar", "Badge", "Dropdown", "Toggle", "Tooltip"],
     "header-navigation":  ["Button", "Avatar", "Badge", "Dropdown"],
+    "language-selector":  ["LanguageSelector"],
     // Modals
     "modal":              ["Modal", "Button", "Badge", "Input", "Toggle", "Checkbox"],
     "modals":             ["Modal", "Button", "Badge", "Input", "Toggle", "Checkbox"],
@@ -487,6 +488,55 @@ const PAGE_BUNDLES = {
     // ── Shared pages bundles ──
     "login":                     ["AuthPage", "LoginSimple", "LoginSplitImage", "LoginSplitQuote", "LoginCardSeparated", "SocialButton", "Button", "Input", "Checkbox"],
     "sign-up":                   ["SignUpSimple", "SignUpSplitImage", "SignUpSplitQuote", "SignUpCardSeparated", "SocialButton", "Button", "Input", "Checkbox"],
+    "verification":              ["VerificationPage", "Button", "PinInput"],
+    "forgot-password":           ["ForgotPassword", "Button", "Input", "Checkbox"],
+    "not-found-page":            ["NotFoundPage", "Button"],
+    "404":                       ["NotFoundPage", "Button"],
+    "email-template":            ["EmailTemplate"],
+    // ── Marketing component bundles ──
+    "marketing-header":          ["MarketingHeader", "Button"],
+    // ── Widget bundles — industry-specific UI blocks ──
+    "fintech-widgets":           [
+        "CashflowAnalytics", "SendMoney", "CashflowSplit", "SavingAccount", "FinancialGrowth",
+        "SpendsBreakdown", "SavingsMonthly", "CreditPaymentPlanner", "SavingsGoals", "ExpensesChart",
+    ],
+    "cashflow-analytics":        ["CashflowAnalytics"],
+    "send-money":                ["SendMoney"],
+    "cashflow-split":            ["CashflowSplit"],
+    "saving-account":            ["SavingAccount"],
+    "financial-growth":          ["FinancialGrowth"],
+    "spends-breakdown":          ["SpendsBreakdown"],
+    "savings-monthly":           ["SavingsMonthly"],
+    "credit-payment-planner":    ["CreditPaymentPlanner"],
+    "savings-goals":             ["SavingsGoals"],
+    "expenses-chart":            ["ExpensesChart"],
+    // ── Medium fintech widgets ──
+    "fintech-widgets-medium":    [
+        "EmergencyFunds", "IncomeBreakdown", "WeeklyExpenditure", "CreditCardUsed", "AssetAllocation",
+        "MonthlySubscription", "SavingsBuckets", "MyCard", "ConvertCurrency", "SendMoneyCompact",
+        "TotalBalance", "StockPosition", "SpendingLimit", "GoalProgress", "SavedMoney",
+        "CashflowSummary", "CashflowRing", "CreditScore", "InvestmentChart", "DailyRevenue",
+    ],
+    "emergency-funds":           ["EmergencyFunds"],
+    "income-breakdown":          ["IncomeBreakdown"],
+    "weekly-expenditure":        ["WeeklyExpenditure"],
+    "credit-card-used":          ["CreditCardUsed"],
+    "asset-allocation":          ["AssetAllocation"],
+    "monthly-subscription":      ["MonthlySubscription"],
+    "savings-buckets":           ["SavingsBuckets"],
+    "my-card":                   ["MyCard"],
+    "convert-currency":          ["ConvertCurrency"],
+    "send-money-compact":        ["SendMoneyCompact"],
+    "total-balance":             ["TotalBalance"],
+    "stock-position":            ["StockPosition"],
+    "spending-limit":            ["SpendingLimit"],
+    "goal-progress":             ["GoalProgress"],
+    "saved-money":               ["SavedMoney"],
+    "cashflow-summary":          ["CashflowSummary"],
+    "cashflow-ring":             ["CashflowRing"],
+    "credit-score":              ["CreditScore"],
+    "investment-chart":          ["InvestmentChart"],
+    "daily-revenue":             ["DailyRevenue"],
 };
 
 // ── Add command — copy a single component ───────────────────────────

package/components/ui/ActivityFeed/ActivityFeed.module.css

@@ -8,13 +8,13 @@
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-standard);
     border-radius: var(--radius-xl);
-    padding: 24px;
+    padding: 20px;
 }
 
 /* ── Item ── */
 .item {
     display: flex;
-    gap: 12px;
+    gap: 10px;
     position: relative;
 }
 
@@ -32,27 +32,27 @@
     flex-direction: column;
     align-items: center;
     flex-shrink: 0;
-    width: 36px;
+    width: 30px;
 }
 
 .avatar {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
 }
 
 .avatarFallback {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: var(--color-bg-elevated);
     border: 1px solid var(--color-border-standard);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
     color: var(--color-text-secondary);
     flex-shrink: 0;
@@ -60,8 +60,8 @@
 }
 
 .iconBubble {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: var(--color-bg-lime-subtle);
     display: flex;
@@ -74,20 +74,20 @@
 .connector {
     width: 2px;
     flex: 1;
-    min-height: 24px;
+    min-height: 20px;
     background: var(--color-border-standard);
 }
 
 /* ── Compact ── */
 .compact .timeline {
-    width: 28px;
+    width: 24px;
 }
 
 .compact .avatar,
 .compact .avatarFallback,
 .compact .iconBubble {
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
 }
 
 .compact .avatarFallback {
@@ -95,18 +95,18 @@
 }
 
 .compact .connector {
-    min-height: 16px;
+    min-height: 12px;
 }
 
 /* ── Content Column ── */
 .content {
     flex: 1;
     min-width: 0;
-    padding-bottom: 24px;
+    padding-bottom: 18px;
 }
 
 .compact .content {
-    padding-bottom: 16px;
+    padding-bottom: 12px;
 }
 
 .item:last-child .content {
@@ -122,8 +122,8 @@
 }
 
 .userName {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 13px;
+    font-weight: 500;
     color: var(--color-text-primary);
 }
 
@@ -133,7 +133,7 @@
 }
 
 .body {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--color-text-secondary);
     line-height: 1.5;
 }

package/components/ui/ActivityGauge/ActivityGauge.module.css

@@ -11,8 +11,7 @@
     border-radius: var(--radius-lg);
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-standard);
-    box-shadow: var(--shadow-card);
-    backdrop-filter: var(--blur-standard);
+    box-shadow: var(--shadow-card-light);
 }
 
 /* ── SVG Gauge ── */

package/components/ui/AgentThinking/AgentThinking.module.css

@@ -35,7 +35,7 @@
     border-radius: var(--radius-lg);
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-standard);
-    overflow: hidden;
+    overflow: visible;
 }
 
 /* ── Header bar ── */
@@ -120,6 +120,8 @@
     position: relative;
     flex-shrink: 0;
     user-select: none;
+    min-width: 160px;
+    height: 42px;
 }
 
 .chip:hover {
@@ -217,6 +219,11 @@
     min-width: 0;
     position: relative;
     z-index: 1;
+    flex: 1;
+    overflow: hidden;
+    /* 8 × 4pt grid; 28px clipped .stateBadge borders */
+    height: 32px;
+    justify-content: center;
 }
 
 .chipName {
@@ -257,6 +264,7 @@
     display: flex;
     align-items: center;
     gap: 0;
+    height: 14px;
 }
 
 .cursor {
@@ -299,17 +307,15 @@
     position: relative;
 }
 
+/* Near-opaque surface so the activity log stays readable over arbitrary UI
+   (card tokens are glass / low-alpha by design — see --color-bg-card). */
 .popover {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    width: 280px;
     border-radius: var(--radius-lg);
-    background: var(--color-bg-card);
+    background: var(--color-bg-overlay);
     border: 1px solid var(--color-border-standard);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
-    z-index: 100;
+    box-shadow:
+        0 4px 6px rgba(0, 0, 0, 0.08),
+        0 12px 40px rgba(0, 0, 0, 0.28);
     overflow: hidden;
 }
 
@@ -411,7 +417,10 @@
     background: transparent !important;
     border: none !important;
     border-radius: var(--radius-lg) !important;
-    overflow: hidden !important;
+    overflow: visible !important;
+    /* Docs: portaled popover is position:fixed — extra margin separates stacked demos
+       so the next section sits lower and overlaps less in the viewport. */
+    margin-bottom: 5rem !important;
 }
 
 /* ── Responsive ── */