omnira-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Omnira UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,145 @@
+# Omnira UI
+
+A premium glassmorphism design system — dark-first, glass-forward, no compromises.
+
+30+ base components, sidebar navigation, feature cards, 1,000+ icons, and a CLI to scaffold your project with your chosen accent color and theme mode.
+
+**[Live Documentation →](https://ui.omnira.space)**
+
+---
+
+## Quick Start
+
+### 1. Install
+
+```bash
+npm install omnira-ui
+# or
+pnpm add omnira-ui
+```
+
+### 2. Initialize your project
+
+```bash
+npx omnira-ui init
+```
+
+The CLI walks you through:
+- **Project name**
+- **Accent color** — 10 presets: Lime (default), Blue, Cyan, Green, Orange, Pink, Purple, Red, Teal, Yellow
+- **Theme mode** — Dark-first or Light-first
+
+It generates `omnira.config.ts` and `omnira-overrides.css` ready to import in your root layout.
+
+### 3. Use components
+
+```tsx
+import { Button } from "omnira-ui/components/ui/Button";
+import { Badge } from "omnira-ui/components/ui/Badge";
+import { Input } from "omnira-ui/components/ui/Input";
+
+export default function MyPage() {
+    return (
+        <div>
+            <Button variant="primary" size="md">Get Started</Button>
+            <Badge variant="success" dot>Online</Badge>
+            <Input label="Email" placeholder="you@example.com" />
+        </div>
+    );
+}
+```
+
+---
+
+## Components
+
+### Base Components (30+)
+
+| Component | Description |
+|-----------|-------------|
+| **Button** | Primary, secondary, tertiary, ghost, accent — 4 sizes, loading states, icon support |
+| **Input** | Text, password, search — leading/trailing icons, dropdowns, copy-to-clipboard |
+| **Badge** | 6 semantic variants with dot indicators and 3 sizes |
+| **Select** | Fully accessible dropdown with keyboard navigation |
+| **Dropdown** | Menu dropdown with items, dividers, and icons |
+| **Toggle** | On/off switch with labels |
+| **Checkbox** | Single checkbox with indeterminate state |
+| **Radio Button / Radio Group** | Single and grouped radio controls |
+| **Slider** | Range selection with custom tracks |
+| **Rating** | Star-based rating with half-star support |
+| **Tag** | Dismissible tags with variants |
+| **Tooltip** | Positioned tooltips with arrow indicators |
+| **Collapse** | Animated accordion panels |
+| **Textarea** | Multi-line text input |
+| **Text Editor** | Rich text input with formatting toolbar |
+| **Progress Indicator** | Bars and circular progress |
+| **Avatar** | Image, initials, and status indicators |
+| **Credit Card** | Visual card component with formatting |
+| **QR Code** | Scannable QR generation |
+| **Phone** | International phone number input |
+| **Verification Code Input** | OTP-style pin entry |
+| **Video Player** | Custom-styled media player |
+| **Browser** | Chrome-style browser frame mockup |
+| **App Store Button** | iOS and Android download buttons |
+| **Social Button** | OAuth provider buttons (Google, GitHub, etc.) |
+| **Illustration** | Decorative SVG components |
+| **Badge Group** | Grouped badge layouts |
+| **Button Group** | Connected button sets |
+| **Featured Icon** | Highlighted icon containers |
+
+### Application UI
+
+- **Sidebar Navigation** — 5 variants: Simple, Section Dividers, Section Headings, Slim (icon-only), Dual Panel
+- **12 Feature Cards** — Progress, Storage, Image Banner, Cookie Consent, Referral, Onboarding, Upgrade, Support, Event, Message, Current Project, Free Trial
+- **User Account Menu** — Popup with profile, settings, account switching, sign out
+- **Search Bar** — Integrated ⌘K search component
+
+---
+
+## Design System
+
+- **Dark-first** — Every surface designed in dark mode first, then adapted to light
+- **Glassmorphism** — Frosted glass surfaces with backdrop blur and layered depth
+- **Lime accent** — `#D2FE17` (dark) / `#8AB400` (light), or choose from 10 presets
+- **CSS Custom Properties** — Every design token is a CSS variable you own
+- **`data-theme` switching** — Smooth 0.4s transitions between dark and light
+
+---
+
+## Tech Stack
+
+- **Next.js 16+** (App Router) + **TypeScript**
+- **CSS Modules** + **CSS Custom Properties** (no Tailwind)
+- **iconsax-react** (Bulk variant) — 1,000+ icons
+- **Framer Motion** for animations
+- **Host Grotesk** (display) + **Rubik** (body) typography
+
+---
+
+## Development
+
+Clone the repo and run the documentation site locally:
+
+```bash
+git clone https://github.com/nidrosoft/omniraui.git
+cd omniraui
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view the docs.
+
+### Project Structure
+
+```
+components/ui/          # Component library source (published to npm)
+cli/                    # CLI tool (published to npm)
+app/                    # Documentation site (Next.js App Router)
+lib/                    # Shared utilities
+```
+
+---
+
+## License
+
+MIT © [Omnira UI](https://ui.omnira.space)

package/cli/omnira-init.mjs

@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+
+/**
+ * Omnira UI — Interactive Setup CLI
+ *
+ * Usage:  npx omnira-ui init
+ *         node cli/omnira-init.mjs
+ *
+ * Walks the user through project naming, accent color selection,
+ * and theme mode — then generates omnira.config.ts and a CSS
+ * overrides file ready to import.
+ */
+
+import * as readline from "node:readline";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { COLOR_PRESETS, DEFAULT_COLOR, DEFAULT_THEME, THEME_MODES } from "./presets.mjs";
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+const RESET = "\x1b[0m";
+const BOLD = "\x1b[1m";
+const DIM = "\x1b[2m";
+const GREEN = "\x1b[32m";
+const CYAN = "\x1b[36m";
+const YELLOW = "\x1b[33m";
+const MAGENTA = "\x1b[35m";
+const WHITE = "\x1b[97m";
+
+function colorize(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+function log(msg = "") {
+    process.stdout.write(msg + "\n");
+}
+
+function blank() {
+    log();
+}
+
+// ── Readline prompt ──────────────────────────────────────────────────
+
+function createPrompt() {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+
+    function ask(question) {
+        return new Promise((resolve) => {
+            rl.question(question, (answer) => resolve(answer.trim()));
+        });
+    }
+
+    function close() {
+        rl.close();
+    }
+
+    return { ask, close };
+}
+
+// ── Color picker (interactive list) ─────────────────────────────────
+
+async function pickColor(promptFn) {
+    const keys = Object.keys(COLOR_PRESETS);
+
+    blank();
+    log(`${BOLD}${WHITE}  Available accent colors:${RESET}`);
+    blank();
+
+    keys.forEach((key, i) => {
+        const preset = COLOR_PRESETS[key];
+        const swatch = colorize(preset.hex);
+        const isDefault = key === DEFAULT_COLOR;
+        const suffix = isDefault ? ` ${DIM}(default)${RESET}` : "";
+        const num = String(i + 1).padStart(2, " ");
+        log(`    ${DIM}${num}.${RESET} ${swatch}●${RESET}  ${preset.label}${suffix}  ${DIM}${preset.hex}${RESET}`);
+    });
+
+    blank();
+    const answer = await promptFn(`  ${CYAN}?${RESET} ${BOLD}Pick a color${RESET} ${DIM}(number or name, default: lime):${RESET} `);
+
+    if (!answer) return DEFAULT_COLOR;
+
+    // Match by number
+    const num = parseInt(answer, 10);
+    if (!isNaN(num) && num >= 1 && num <= keys.length) {
+        return keys[num - 1];
+    }
+
+    // Match by name (case-insensitive)
+    const lower = answer.toLowerCase();
+    if (COLOR_PRESETS[lower]) return lower;
+
+    // Fuzzy match
+    const match = keys.find((k) => k.startsWith(lower) || COLOR_PRESETS[k].label.toLowerCase().startsWith(lower));
+    if (match) return match;
+
+    log(`  ${YELLOW}!${RESET} Unknown color "${answer}", using lime.`);
+    return DEFAULT_COLOR;
+}
+
+// ── Theme mode picker ───────────────────────────────────────────────
+
+async function pickTheme(promptFn) {
+    blank();
+    log(`${BOLD}${WHITE}  Theme modes:${RESET}`);
+    blank();
+    log(`    ${DIM} 1.${RESET} Dark-first  ${DIM}(default)${RESET}`);
+    log(`    ${DIM} 2.${RESET} Light-first`);
+    blank();
+
+    const answer = await promptFn(`  ${CYAN}?${RESET} ${BOLD}Default theme mode${RESET} ${DIM}(1 or 2, default: 1):${RESET} `);
+
+    if (!answer || answer === "1" || answer.toLowerCase().startsWith("dark")) return "dark-first";
+    if (answer === "2" || answer.toLowerCase().startsWith("light")) return "light-first";
+
+    log(`  ${YELLOW}!${RESET} Unknown option "${answer}", using dark-first.`);
+    return DEFAULT_THEME;
+}
+
+// ── File generators ─────────────────────────────────────────────────
+
+function generateConfig(projectName, colorKey, themeMode) {
+    return `/**
+ * Omnira UI Configuration
+ * Generated by: npx omnira-ui init
+ *
+ * This file defines your project's Omnira UI settings.
+ * Import the generated CSS overrides in your root layout.
+ */
+
+const omniraConfig = {
+    project: "${projectName}",
+    accent: "${colorKey}",
+    theme: "${themeMode}",
+};
+
+export default omniraConfig;
+`;
+}
+
+function generateCSS(colorKey, themeMode) {
+    const preset = COLOR_PRESETS[colorKey];
+    if (!preset) return "";
+
+    // If lime (default), no overrides needed
+    if (colorKey === "lime") {
+        return `/**
+ * Omnira UI — Theme Overrides
+ * Generated by: npx omnira-ui init
+ *
+ * Accent: ${preset.label} (${preset.hex})
+ * Theme:  ${themeMode}
+ *
+ * Using default Lime preset — no overrides needed.
+ * Import this file after globals.css in your root layout.
+ */
+`;
+    }
+
+    let css = `/**
+ * Omnira UI — Theme Overrides
+ * Generated by: npx omnira-ui init
+ *
+ * Accent: ${preset.label} (${preset.hex})
+ * Theme:  ${themeMode}
+ *
+ * Import this file after globals.css in your root layout:
+ *   import "./omnira-overrides.css";
+ */
+
+`;
+
+    // Dark overrides
+    css += `[data-theme="dark"] {\n`;
+    for (const [prop, value] of Object.entries(preset.dark)) {
+        css += `    ${prop}: ${value};\n`;
+    }
+    css += `}\n\n`;
+
+    // Light overrides
+    css += `[data-theme="light"] {\n`;
+    for (const [prop, value] of Object.entries(preset.light)) {
+        css += `    ${prop}: ${value};\n`;
+    }
+    css += `}\n`;
+
+    return css;
+}
+
+// ── Main ─────────────────────────────────────────────────────────────
+
+async function main() {
+    const { ask, close } = createPrompt();
+
+    blank();
+    log(`  ${BOLD}${GREEN}✦${RESET} ${BOLD}${WHITE}Omnira UI Setup${RESET}`);
+    log(`  ${DIM}The premium glassmorphism design system${RESET}`);
+    blank();
+
+    // 1. Project name
+    const projectName = (await ask(`  ${CYAN}?${RESET} ${BOLD}Project name${RESET} ${DIM}(default: my-app):${RESET} `)) || "my-app";
+
+    // 2. Accent color
+    const colorKey = await pickColor(ask);
+    const preset = COLOR_PRESETS[colorKey];
+
+    // 3. Theme mode
+    const themeMode = await pickTheme(ask);
+
+    close();
+
+    // ── Summary ──
+    blank();
+    log(`  ${DIM}─────────────────────────────────────${RESET}`);
+    blank();
+    log(`  ${BOLD}${WHITE}Configuration:${RESET}`);
+    blank();
+    log(`    ${DIM}Project:${RESET}  ${WHITE}${projectName}${RESET}`);
+    log(`    ${DIM}Accent:${RESET}   ${colorize(preset.hex)}●${RESET}  ${preset.label} ${DIM}(${preset.hex})${RESET}`);
+    log(`    ${DIM}Theme:${RESET}    ${WHITE}${themeMode === "dark-first" ? "Dark-first" : "Light-first"}${RESET}`);
+    blank();
+
+    // ── Write files ──
+    const cwd = process.cwd();
+    const configPath = path.join(cwd, "omnira.config.ts");
+    const cssPath = path.join(cwd, "omnira-overrides.css");
+
+    // Config file
+    fs.writeFileSync(configPath, generateConfig(projectName, colorKey, themeMode), "utf-8");
+    log(`  ${GREEN}✓${RESET} Created ${BOLD}omnira.config.ts${RESET}`);
+
+    // CSS overrides
+    const cssContent = generateCSS(colorKey, themeMode);
+    fs.writeFileSync(cssPath, cssContent, "utf-8");
+    log(`  ${GREEN}✓${RESET} Created ${BOLD}omnira-overrides.css${RESET}`);
+
+    blank();
+
+    if (colorKey !== "lime") {
+        log(`  ${DIM}Import the overrides in your root layout:${RESET}`);
+        blank();
+        log(`    ${MAGENTA}import${RESET} ${WHITE}"./globals.css"${RESET};`);
+        log(`    ${MAGENTA}import${RESET} ${WHITE}"./omnira-overrides.css"${RESET};`);
+        blank();
+    }
+
+    log(`  ${GREEN}✓${RESET} ${BOLD}${WHITE}Ready to go!${RESET} Run ${CYAN}npx omnira-ui${RESET} to reconfigure anytime.`);
+    blank();
+}
+
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});