omnira-ui 0.3.0 → 0.4.1

package/cli/omnira-init.mjs

@@ -1,20 +1,16 @@
 #!/usr/bin/env node
 
 /**
- * Omnira UI — Project Scaffolding CLI
+ * Omnira UI — CLI
  *
- * Usage:  npx omnira-ui init
+ * Commands:
+ *   npx omnira-ui init              Full project scaffolding
+ *   npx omnira-ui add <Component>   Copy a single component into your project
+ *   npx omnira-ui add               List all available components
  *
- * Scaffolds the full Omnira UI design system into your project:
- *   - All base components → components/ui/
- *   - Utility helpers     → lib/
- *   - Theme provider      → lib/theme-context.tsx
- *   - Design tokens CSS   → app/globals.css
- *   - Accent overrides    → omnira-overrides.css (if non-default)
- *   - Config file         → omnira.config.ts
- *
- * Advanced components (Sidebar, Feature Cards, etc.) can be copied
- * from the documentation site: https://ui.omnira.space
+ * The `add` command copies only the requested component folder into
+ * components/ui/ and ensures required lib utilities (cn.ts, etc.)
+ * and globals.css are present. No full scaffolding needed.
  */
 
 import * as readline from "node:readline";
@@ -29,6 +25,28 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const PKG_ROOT = path.resolve(__dirname, "..");
 
+// ── Detect src/ directory structure ─────────────────────────────────
+
+function detectSrcDir(cwd) {
+    const srcDir = path.join(cwd, "src");
+    if (fs.existsSync(srcDir)) {
+        // If src/ contains app/, components/, or lib/, it's a src-based project
+        if (
+            fs.existsSync(path.join(srcDir, "app")) ||
+            fs.existsSync(path.join(srcDir, "components")) ||
+            fs.existsSync(path.join(srcDir, "lib"))
+        ) {
+            return "src";
+        }
+    }
+    return "";
+}
+
+function getProjectBase(cwd) {
+    const srcPrefix = detectSrcDir(cwd);
+    return srcPrefix ? path.join(cwd, srcPrefix) : cwd;
+}
+
 // ── ANSI helpers ─────────────────────────────────────────────────────
 
 const RESET = "\x1b[0m";
@@ -270,13 +288,21 @@ async function main() {
 
     const cwd = process.cwd();
 
+    // ── Detect project structure ──
+    const base = getProjectBase(cwd);
+    const srcPrefix = detectSrcDir(cwd);
+    if (srcPrefix) {
+        log(`  ${DIM}Detected ${BOLD}${srcPrefix}/${RESET}${DIM} directory structure${RESET}`);
+        blank();
+    }
+
     // ── 1. Copy all base components ──
     const componentsSrc = path.join(PKG_ROOT, "components", "ui");
-    const componentsDest = path.join(cwd, "components", "ui");
+    const componentsDest = path.join(base, "components", "ui");
 
     if (fs.existsSync(componentsSrc)) {
         const count = copyDirRecursive(componentsSrc, componentsDest);
-        log(`  ${GREEN}✓${RESET} Copied ${BOLD}${count} files${RESET} → ${DIM}components/ui/${RESET}`);
+        log(`  ${GREEN}✓${RESET} Copied ${BOLD}${count} files${RESET} → ${DIM}${srcPrefix ? srcPrefix + "/" : ""}components/ui/${RESET}`);
     } else {
         log(`  ${RED}✗${RESET} Components source not found at ${componentsSrc}`);
         log(`    ${DIM}This may happen when running locally. Components are bundled in the npm package.${RESET}`);
@@ -284,7 +310,7 @@ async function main() {
 
     // ── 2. Copy lib utilities ──
     const libFiles = ["cn.ts", "copy-to-clipboard.ts", "theme-context.tsx"];
-    const libDest = path.join(cwd, "lib");
+    const libDest = path.join(base, "lib");
     fs.mkdirSync(libDest, { recursive: true });
 
     for (const file of libFiles) {
@@ -297,7 +323,7 @@ async function main() {
 
     // ── 3. Copy globals.css (design system tokens) ──
     const globalsSrc = path.join(PKG_ROOT, "app", "globals.css");
-    const appDir = path.join(cwd, "app");
+    const appDir = path.join(base, "app");
     fs.mkdirSync(appDir, { recursive: true });
 
     if (copyFile(globalsSrc, path.join(appDir, "globals.css"))) {
@@ -315,7 +341,7 @@ async function main() {
     log(`  ${GREEN}✓${RESET} Created ${BOLD}omnira-overrides.css${RESET}`);
 
     // ── 6. Generate providers.tsx ──
-    const providersPath = path.join(appDir, "providers.tsx");
+    const providersPath = path.join(base, "app", "providers.tsx");
     if (!fs.existsSync(providersPath)) {
         fs.writeFileSync(providersPath, generateProviders(themeMode), "utf-8");
         log(`  ${GREEN}✓${RESET} Created ${BOLD}app/providers.tsx${RESET} ${DIM}(ThemeProvider wrapper)${RESET}`);
@@ -362,7 +388,342 @@ async function main() {
     blank();
 }
 
-main().catch((err) => {
-    console.error(err);
-    process.exit(1);
-});
+// ── Page bundles — map page slugs to all required components ────────
+
+const PAGE_BUNDLES = {
+    // Card Headers
+    "card-header":        ["CardHeader", "Button", "Badge", "Avatar", "Dropdown"],
+    "card-headers":       ["CardHeader", "Button", "Badge", "Avatar", "Dropdown"],
+    // Page Headers
+    "page-header":        ["PageHeader", "Button", "Badge"],
+    "page-headers":       ["PageHeader", "Button", "Badge"],
+    // Section Headers
+    "section-header":     ["Button", "Badge"],
+    "section-headers":    ["Button", "Badge"],
+    // Section Footers
+    "section-footer":     ["Button"],
+    "section-footers":    ["Button"],
+    // Navigation
+    "sidebar-navigation": ["SidebarNavigation", "Button", "Avatar", "Badge", "Dropdown", "Toggle", "Tooltip"],
+    "header-navigation":  ["Button", "Avatar", "Badge", "Dropdown"],
+    // Modals
+    "modal":              ["Modal", "Button", "Badge", "Input", "Toggle", "Checkbox"],
+    "modals":             ["Modal", "Button", "Badge", "Input", "Toggle", "Checkbox"],
+    // Command Menus
+    "command-menu":       ["Button", "Input", "Badge"],
+    "command-menus":      ["Button", "Input", "Badge"],
+    // Charts
+    "line-bar-chart":     ["Card"],
+    "line-bar-charts":    ["Card"],
+    "activity-gauge":     ["ActivityGauge"],
+    "activity-gauges":    ["ActivityGauge"],
+    "pie-chart":          ["Card"],
+    "pie-charts":         ["Card"],
+    "radar-chart":        ["Card"],
+    "radar-charts":       ["Card"],
+    // Metrics
+    "metrics":            ["Metric", "Button"],
+    // Slide Out
+    "slide-out":          ["SlideOut", "Button", "Input", "Badge"],
+    // Inline CTA
+    "inline-cta":         ["Button", "Badge", "Input"],
+    // Pagination
+    "pagination":         ["Button", "ButtonUtility"],
+    // Carousel
+    "carousel":           ["Button", "ButtonUtility"],
+    // Progress Steps
+    "progress-steps":     ["ProgressBar", "Badge"],
+    // Activity Feed
+    "activity-feed":      ["Avatar", "Badge", "Button"],
+    // Messaging
+    "messaging":          ["Avatar", "Button", "Input"],
+    // Tabs
+    "tabs":               ["Button", "Badge"],
+    // Table
+    "table":              ["Table", "Avatar", "Badge", "Button", "ButtonUtility", "Dropdown", "ProgressBar"],
+    // Breadcrumbs
+    "breadcrumbs":        ["Button"],
+    // Alerts
+    "alert":              ["Button", "Badge"],
+    "alerts":             ["Button", "Badge"],
+    // Notifications
+    "notification":       ["Button", "Avatar", "Badge"],
+    "notifications":      ["Button", "Avatar", "Badge"],
+    // Date Picker
+    "date-picker":        ["Button", "Input"],
+    // Calendar
+    "calendar":           ["Calendar", "Button"],
+    // File Upload
+    "file-upload":        ["Button", "ProgressBar"],
+    // Content Divider
+    "content-divider":    ["Button"],
+    // Loading Indicator
+    "loading-indicator":  ["ProgressBar"],
+    // Empty States
+    "empty-state":        ["EmptyState", "Button"],
+    "empty-states":       ["EmptyState", "Button"],
+    // Code Snippet
+    "code-snippet":       ["Button"],
+    // Card
+    "card":               ["Card", "Button", "Badge"],
+    // Matrix
+    "matrix":             ["Card"],
+};
+
+// ── Add command — copy a single component ───────────────────────────
+
+function getAvailableComponents() {
+    const componentsDir = path.join(PKG_ROOT, "components", "ui");
+    if (!fs.existsSync(componentsDir)) return [];
+    return fs.readdirSync(componentsDir, { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => d.name)
+        .sort();
+}
+
+function listComponents() {
+    const components = getAvailableComponents();
+    const bundles = Object.keys(PAGE_BUNDLES).sort();
+
+    blank();
+    log(`  ${BOLD}${GREEN}✦${RESET} ${BOLD}${WHITE}Omnira UI — Available Components${RESET}`);
+    log(`  ${DIM}Copy individual components or full page bundles into your project${RESET}`);
+    blank();
+
+    if (components.length === 0) {
+        log(`  ${RED}✗${RESET} No components found. This may happen when running locally.`);
+        blank();
+        return;
+    }
+
+    log(`  ${BOLD}${WHITE}Individual Components:${RESET}`);
+    blank();
+
+    const cols = 3;
+    const rows = Math.ceil(components.length / cols);
+    const colWidth = 22;
+
+    for (let r = 0; r < rows; r++) {
+        let line = "    ";
+        for (let c = 0; c < cols; c++) {
+            const idx = r + c * rows;
+            if (idx < components.length) {
+                line += components[idx].padEnd(colWidth);
+            }
+        }
+        log(line);
+    }
+
+    blank();
+    log(`  ${BOLD}${WHITE}Page Bundles:${RESET} ${DIM}(installs all components needed for a page)${RESET}`);
+    blank();
+
+    const bCols = 3;
+    const bRows = Math.ceil(bundles.length / bCols);
+
+    for (let r = 0; r < bRows; r++) {
+        let line = "    ";
+        for (let c = 0; c < bCols; c++) {
+            const idx = r + c * bRows;
+            if (idx < bundles.length) {
+                const slug = bundles[idx];
+                const count = PAGE_BUNDLES[slug].length;
+                line += `${slug} ${DIM}(${count})${RESET}`.padEnd(colWidth + 10);
+            }
+        }
+        log(line);
+    }
+
+    blank();
+    log(`  ${BOLD}${WHITE}Usage:${RESET}`);
+    blank();
+    log(`    ${CYAN}npx omnira-ui add Table${RESET}            ${DIM}Single component${RESET}`);
+    log(`    ${CYAN}npx omnira-ui add card-headers${RESET}     ${DIM}All components for Card Headers page${RESET}`);
+    log(`    ${CYAN}npx omnira-ui add Button Badge${RESET}     ${DIM}Multiple components${RESET}`);
+    blank();
+}
+
+function ensureLibDeps(cwd) {
+    const base = getProjectBase(cwd);
+    const libFiles = ["cn.ts", "copy-to-clipboard.ts", "theme-context.tsx"];
+    const libDest = path.join(base, "lib");
+    let copied = 0;
+
+    for (const file of libFiles) {
+        const dest = path.join(libDest, file);
+        if (!fs.existsSync(dest)) {
+            const src = path.join(PKG_ROOT, "lib", file);
+            if (copyFile(src, dest)) {
+                log(`  ${GREEN}✓${RESET} Copied ${BOLD}lib/${file}${RESET} ${DIM}(dependency)${RESET}`);
+                copied++;
+            }
+        }
+    }
+
+    // Ensure globals.css exists
+    const globalsDest = path.join(base, "app", "globals.css");
+    if (!fs.existsSync(globalsDest)) {
+        const globalsSrc = path.join(PKG_ROOT, "app", "globals.css");
+        if (copyFile(globalsSrc, globalsDest)) {
+            log(`  ${GREEN}✓${RESET} Copied ${BOLD}app/globals.css${RESET} ${DIM}(design tokens)${RESET}`);
+            copied++;
+        }
+    }
+
+    return copied;
+}
+
+function resolveNames(inputNames) {
+    // Expand page bundle aliases into individual component names
+    const resolved = new Set();
+    const unknown = [];
+
+    const available = getAvailableComponents();
+    const availableLower = available.map((c) => c.toLowerCase());
+
+    for (const name of inputNames) {
+        const lower = name.toLowerCase();
+
+        // Check page bundles first
+        if (PAGE_BUNDLES[lower]) {
+            for (const comp of PAGE_BUNDLES[lower]) {
+                resolved.add(comp);
+            }
+            continue;
+        }
+
+        // Check individual component (case-insensitive)
+        const idx = availableLower.indexOf(lower);
+        if (idx !== -1) {
+            resolved.add(available[idx]);
+            continue;
+        }
+
+        unknown.push(name);
+    }
+
+    return { resolved: [...resolved], unknown };
+}
+
+function addComponents(componentNames) {
+    const cwd = process.cwd();
+    const base = getProjectBase(cwd);
+    const srcPrefix = detectSrcDir(cwd);
+    const available = getAvailableComponents();
+
+    // Resolve page bundles and individual names
+    const { resolved, unknown } = resolveNames(componentNames);
+
+    // Check if any input was a page bundle for nicer messaging
+    const isBundle = componentNames.some((n) => PAGE_BUNDLES[n.toLowerCase()]);
+
+    blank();
+    log(`  ${BOLD}${GREEN}✦${RESET} ${BOLD}${WHITE}Omnira UI — Add Components${RESET}`);
+    if (isBundle) {
+        log(`  ${DIM}Installing page bundle: ${componentNames.filter((n) => PAGE_BUNDLES[n.toLowerCase()]).join(", ")}${RESET}`);
+    }
+    if (srcPrefix) {
+        log(`  ${DIM}Detected ${BOLD}${srcPrefix}/${RESET}${DIM} directory structure${RESET}`);
+    }
+    blank();
+
+    let totalFiles = 0;
+    const added = [];
+    const destPrefix = srcPrefix ? srcPrefix + "/" : "";
+
+    for (const actualName of resolved) {
+        const src = path.join(PKG_ROOT, "components", "ui", actualName);
+        const dest = path.join(base, "components", "ui", actualName);
+
+        if (!fs.existsSync(src)) continue;
+
+        const count = copyDirRecursive(src, dest);
+        log(`  ${GREEN}✓${RESET} Copied ${BOLD}${actualName}${RESET} ${DIM}(${count} files)${RESET} → ${DIM}${destPrefix}components/ui/${actualName}/${RESET}`);
+        totalFiles += count;
+        added.push(actualName);
+    }
+
+    for (const name of unknown) {
+        log(`  ${RED}✗${RESET} "${name}" is not a component or page bundle.`);
+    }
+
+    // Ensure lib dependencies are present
+    if (added.length > 0) {
+        blank();
+        log(`  ${DIM}Checking dependencies...${RESET}`);
+        ensureLibDeps(cwd);
+    }
+
+    blank();
+    log(`  ${DIM}─────────────────────────────────────${RESET}`);
+    blank();
+
+    if (added.length > 0) {
+        log(`  ${GREEN}✓${RESET} ${BOLD}${WHITE}Added ${added.length} component${added.length > 1 ? "s" : ""} (${totalFiles} files)${RESET}`);
+        blank();
+        log(`  ${BOLD}${WHITE}Usage:${RESET}`);
+        blank();
+        for (const name of added) {
+            log(`    ${MAGENTA}import${RESET} { ${name} } ${MAGENTA}from${RESET} ${WHITE}"@/components/ui/${name}"${RESET};`);
+        }
+        blank();
+
+        const globalsPath = path.join(base, "app", "globals.css");
+        if (!fs.existsSync(globalsPath)) {
+            log(`  ${YELLOW}!${RESET} Don't forget to import ${BOLD}globals.css${RESET} in your root layout.`);
+            blank();
+        }
+    }
+
+    if (unknown.length > 0) {
+        log(`  ${YELLOW}!${RESET} Run ${CYAN}npx omnira-ui add${RESET} to see all available components.`);
+        blank();
+    }
+}
+
+// ── Help ─────────────────────────────────────────────────────────────
+
+function showHelp() {
+    blank();
+    log(`  ${BOLD}${GREEN}✦${RESET} ${BOLD}${WHITE}Omnira UI — CLI${RESET}`);
+    log(`  ${DIM}The premium glassmorphism design system${RESET}`);
+    blank();
+    log(`  ${BOLD}${WHITE}Commands:${RESET}`);
+    blank();
+    log(`    ${CYAN}npx omnira-ui init${RESET}              Scaffold the full design system`);
+    log(`    ${CYAN}npx omnira-ui add <name>${RESET}        Add a component or page bundle`);
+    log(`    ${CYAN}npx omnira-ui add${RESET}               List all components & page bundles`);
+    log(`    ${CYAN}npx omnira-ui help${RESET}              Show this help message`);
+    blank();
+    log(`  ${BOLD}${WHITE}Examples:${RESET}`);
+    blank();
+    log(`    ${CYAN}npx omnira-ui add Table${RESET}            ${DIM}Single component${RESET}`);
+    log(`    ${CYAN}npx omnira-ui add card-headers${RESET}     ${DIM}All components for Card Headers page${RESET}`);
+    log(`    ${CYAN}npx omnira-ui add Button Badge${RESET}     ${DIM}Multiple components${RESET}`);
+    log(`    ${CYAN}npx omnira-ui init${RESET}                 ${DIM}Full project scaffolding${RESET}`);
+    blank();
+}
+
+// ── Command router ──────────────────────────────────────────────────
+
+const args = process.argv.slice(2);
+const command = args[0]?.toLowerCase();
+
+if (!command || command === "init") {
+    main().catch((err) => {
+        console.error(err);
+        process.exit(1);
+    });
+} else if (command === "add") {
+    const componentNames = args.slice(1);
+    if (componentNames.length === 0) {
+        listComponents();
+    } else {
+        addComponents(componentNames);
+    }
+} else if (command === "help" || command === "--help" || command === "-h") {
+    showHelp();
+} else {
+    log(`\n  ${RED}✗${RESET} Unknown command: "${command}"\n`);
+    showHelp();
+}

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

@@ -100,6 +100,43 @@
     margin-top: -8px;
 }
 
+/* ── Multi-ring center label ── */
+
+.multiCenterLabel {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    line-height: 1;
+    margin-bottom: 2px;
+}
+
+/* ── Legend ── */
+
+.legend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.legendItem {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.legendDot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    flex-shrink: 0;
+}
+
+.legendText {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+}
+
 /* ── Grid layout for demos ── */
 
 .gaugeGrid {
@@ -107,3 +144,9 @@
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
 }
+
+.multiGaugeGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+}

package/components/ui/ActivityGauge/MultiActivityGauge.tsx

@@ -0,0 +1,141 @@
+import { cn } from "@/lib/cn";
+import styles from "./ActivityGauge.module.css";
+
+/* ── Types ── */
+
+export type MultiGaugeColor = "lime" | "info" | "warning" | "error" | "success";
+
+export interface RingData {
+    value: number;
+    max?: number;
+    label: string;
+}
+
+export interface MultiActivityGaugeProps {
+    rings: RingData[];
+    centerLabel?: string;
+    centerValue?: string | number;
+    color?: MultiGaugeColor;
+    size?: number;
+    strokeWidth?: number;
+    gap?: number;
+    showLegend?: boolean;
+    className?: string;
+}
+
+/* ── Color shades (dark → medium → light for each base color) ── */
+
+const COLOR_SHADES: Record<MultiGaugeColor, string[]> = {
+    lime: [
+        "var(--color-lime)",
+        "rgba(163, 230, 53, 0.6)",
+        "rgba(163, 230, 53, 0.3)",
+    ],
+    info: [
+        "var(--color-info)",
+        "rgba(96, 165, 250, 0.6)",
+        "rgba(96, 165, 250, 0.3)",
+    ],
+    warning: [
+        "var(--color-warning)",
+        "rgba(251, 191, 36, 0.6)",
+        "rgba(251, 191, 36, 0.3)",
+    ],
+    error: [
+        "var(--color-error)",
+        "rgba(248, 113, 113, 0.6)",
+        "rgba(248, 113, 113, 0.3)",
+    ],
+    success: [
+        "var(--color-success)",
+        "rgba(74, 222, 128, 0.6)",
+        "rgba(74, 222, 128, 0.3)",
+    ],
+};
+
+/* ── Component ── */
+
+export function MultiActivityGauge({
+    rings,
+    centerLabel,
+    centerValue,
+    color = "lime",
+    size = 180,
+    strokeWidth = 10,
+    gap = 4,
+    showLegend = true,
+    className,
+}: MultiActivityGaugeProps) {
+    const shades = COLOR_SHADES[color];
+    const ringCount = Math.min(rings.length, 3);
+
+    return (
+        <div className={cn(styles.gaugeCard, className)}>
+            <div className={styles.gaugeWrapper} style={{ width: size, height: size }}>
+                <svg
+                    className={styles.gaugeSvg}
+                    width={size}
+                    height={size}
+                    viewBox={`0 0 ${size} ${size}`}
+                >
+                    {rings.slice(0, 3).map((ring, i) => {
+                        const ringRadius =
+                            (size - strokeWidth) / 2 - i * (strokeWidth + gap);
+                        const circumference = 2 * Math.PI * ringRadius;
+                        const percentage = Math.min(ring.value / (ring.max ?? 100), 1);
+                        const offset = circumference * (1 - percentage);
+
+                        return (
+                            <g key={i}>
+                                {/* Track */}
+                                <circle
+                                    className={styles.gaugeTrack}
+                                    cx={size / 2}
+                                    cy={size / 2}
+                                    r={ringRadius}
+                                    strokeWidth={strokeWidth}
+                                />
+                                {/* Fill */}
+                                <circle
+                                    className={styles.gaugeFill}
+                                    cx={size / 2}
+                                    cy={size / 2}
+                                    r={ringRadius}
+                                    strokeWidth={strokeWidth}
+                                    strokeDasharray={circumference}
+                                    strokeDashoffset={offset}
+                                    style={{ stroke: shades[i] }}
+                                />
+                            </g>
+                        );
+                    })}
+                </svg>
+
+                {/* Center text */}
+                <div className={styles.gaugeCenter}>
+                    {centerLabel && (
+                        <span className={styles.multiCenterLabel}>{centerLabel}</span>
+                    )}
+                    {centerValue !== undefined && (
+                        <span className={styles.gaugeValue}>{centerValue}</span>
+                    )}
+                </div>
+            </div>
+
+            {/* Legend */}
+            {showLegend && (
+                <div className={styles.legend}>
+                    {rings.slice(0, 3).map((ring, i) => (
+                        <div key={i} className={styles.legendItem}>
+                            <span
+                                className={styles.legendDot}
+                                style={{ background: shades[i] }}
+                            />
+                            <span className={styles.legendText}>{ring.label}</span>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/components/ui/ActivityGauge/index.ts

@@ -1,2 +1,4 @@
 export { ActivityGauge } from "./ActivityGauge";
 export type { ActivityGaugeProps, GaugeColor } from "./ActivityGauge";
+export { MultiActivityGauge } from "./MultiActivityGauge";
+export type { MultiActivityGaugeProps, RingData, MultiGaugeColor } from "./MultiActivityGauge";