rippleui-cli 0.1.1 → 0.1.2

package/dist/lib/config.js

@@ -0,0 +1,19 @@
+import fs from "fs/promises";
+import path from "path";
+const configPath = path.resolve(process.cwd(), "components.json");
+export const readConfig = async () => {
+    try {
+        const raw = await fs.readFile(configPath, "utf-8");
+        return JSON.parse(raw);
+    }
+    catch { }
+};
+export const writeConfig = async (config) => {
+    await fs.writeFile(configPath, JSON.stringify(config, null, 2) + "\n");
+};
+export const requireConfig = (config) => {
+    if (!config) {
+        console.error('No components.json found. Run "ripple-ui init" first.');
+        process.exit(1);
+    }
+};

package/dist/lib/css.js

@@ -0,0 +1,149 @@
+import fs from 'fs/promises';
+import { accentThemes, bases } from './themes.js';
+export const updateCss = async (cssPath, baseName, accentName) => {
+    const marker = '/* Ripple UI Theme */';
+    let existingContent = '';
+    try {
+        existingContent = await fs.readFile(cssPath, 'utf-8');
+    }
+    catch { }
+    const markerIdx = existingContent.indexOf(marker);
+    const userContent = markerIdx !== -1
+        ? existingContent.slice(0, markerIdx).trimEnd()
+        : existingContent.trimEnd();
+    const b = bases[baseName];
+    const a = accentThemes[accentName];
+    const content = `/* Ripple UI Theme */
+@import "tw-animate-css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: ${b.root.bg};
+    --foreground: ${b.root.fg};
+    --card: ${b.root.card.bg};
+    --card-foreground: ${b.root.card.fg};
+    --popover: ${b.root.popover.bg};
+    --popover-foreground: ${b.root.popover.fg};
+    --primary: ${a.root.primary.bg};
+    --primary-foreground: ${a.root.primary.fg};
+    --secondary: ${b.root.secondary.bg};
+    --secondary-foreground: ${b.root.secondary.fg};
+    --muted: ${b.root.muted.bg};
+    --muted-foreground: ${b.root.muted.fg};
+    --accent: ${b.root.accent.bg};
+    --accent-foreground: ${b.root.accent.fg};
+    --destructive: ${b.root.destructive};
+    --border: ${b.root.border};
+    --input: ${b.root.input};
+    --ring: ${b.root.ring};
+    --chart-1: ${b.root.charts[0]};
+    --chart-2: ${b.root.charts[1]};
+    --chart-3: ${b.root.charts[2]};
+    --chart-4: ${b.root.charts[3]};
+    --chart-5: ${b.root.charts[4]};
+    --radius: ${a.radius};
+    --sidebar: ${b.root.sidebar.bg};
+    --sidebar-foreground: ${b.root.sidebar.fg};
+    --sidebar-primary: ${a.root.sidebar.primary.bg};
+    --sidebar-primary-foreground: ${a.root.sidebar.primary.fg};
+    --sidebar-accent: ${b.root.sidebar.accent.bg};
+    --sidebar-accent-foreground: ${b.root.sidebar.accent.fg};
+    --sidebar-border: ${b.root.sidebar.border};
+    --sidebar-ring: ${b.root.sidebar.ring};
+}
+
+.dark {
+    --background: ${b.dark.bg};
+    --foreground: ${b.dark.fg};
+    --card: ${b.dark.card.bg};
+    --card-foreground: ${b.dark.card.fg};
+    --popover: ${b.dark.popover.bg};
+    --popover-foreground: ${b.dark.popover.fg};
+    --primary: ${a.dark.primary.bg};
+    --primary-foreground: ${a.dark.primary.fg};
+    --secondary: ${b.dark.secondary.bg};
+    --secondary-foreground: ${b.dark.secondary.fg};
+    --muted: ${b.dark.muted.bg};
+    --muted-foreground: ${b.dark.muted.fg};
+    --accent: ${b.dark.accent.bg};
+    --accent-foreground: ${b.dark.accent.fg};
+    --destructive: ${b.dark.destructive};
+    --border: ${b.dark.border};
+    --input: ${b.dark.input};
+    --ring: ${b.dark.ring};
+    --chart-1: ${b.dark.charts[0]};
+    --chart-2: ${b.dark.charts[1]};
+    --chart-3: ${b.dark.charts[2]};
+    --chart-4: ${b.dark.charts[3]};
+    --chart-5: ${b.dark.charts[4]};
+    --sidebar: ${b.dark.sidebar.bg};
+    --sidebar-foreground: ${b.dark.sidebar.fg};
+    --sidebar-primary: ${a.dark.sidebar.primary.bg};
+    --sidebar-primary-foreground: ${a.dark.sidebar.primary.fg};
+    --sidebar-accent: ${b.dark.sidebar.accent.bg};
+    --sidebar-accent-foreground: ${b.dark.sidebar.accent.fg};
+    --sidebar-border: ${b.dark.sidebar.border};
+    --sidebar-ring: ${b.dark.sidebar.ring};
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}`;
+    const newContent = userContent
+        ? `${userContent}\n\n${content}\n`
+        : `${content}\n`;
+    await fs.writeFile(cssPath, newContent);
+};

package/dist/lib/detect.js

@@ -0,0 +1,79 @@
+import fs from "fs/promises";
+import path from "path";
+export const detectPackageManager = async (cwd) => {
+    try {
+        const raw = await fs.readFile(path.join(cwd, "package.json"), "utf-8");
+        const pkg = JSON.parse(raw);
+        if (pkg.packageManager) {
+            // e.g. "pnpm@10.32.1" → "pnpm"
+            return pkg.packageManager.split("@")[0];
+        }
+    }
+    catch { }
+    return "npm";
+};
+export const detectTailwind = async (cwd) => {
+    try {
+        const raw = await fs.readFile(path.join(cwd, "package.json"), "utf-8");
+        const pkg = JSON.parse(raw);
+        const deps = {
+            ...pkg.dependencies,
+            ...pkg.devDependencies,
+        };
+        return "tailwindcss" in deps;
+    }
+    catch (e) {
+        return false;
+    }
+};
+export const detectCssFile = async (cwd) => {
+    const paths = ["src/index.css", "src/main.css", "src/styles.css"];
+    for (const relPath of paths) {
+        const fullPath = path.resolve(cwd, relPath);
+        try {
+            await fs.access(fullPath);
+            console.log(`✔  Found main CSS file: ${relPath}`);
+            return relPath;
+        }
+        catch { }
+    }
+    return null;
+};
+export const detectImportAlias = async (cwd) => {
+    const viteConfigNames = [
+        "vite.config.ts",
+        "vite.config.js",
+        "vite.config.mts",
+        "vite.config.mjs",
+    ];
+    for (const configName of viteConfigNames) {
+        const fullPath = path.join(cwd, configName);
+        try {
+            const raw = await fs.readFile(fullPath, "utf-8");
+            const objectAliasMatch = raw.match(/alias\s*:\s*\{([^}]+)\}/s);
+            if (objectAliasMatch?.[1]) {
+                const entryMatch = objectAliasMatch[1].match(/['"]?(@[^'":/\s]+|[^'":/\s]+)['"]?\s*:/);
+                if (entryMatch?.[1]) {
+                    return entryMatch[1];
+                }
+            }
+            const arrayFindMatch = raw.match(/find\s*:\s*['"]([^'"]+)['"]/);
+            if (arrayFindMatch?.[1]) {
+                return arrayFindMatch[1];
+            }
+        }
+        catch { }
+    }
+    // Fall back to tsconfig.json
+    try {
+        const raw = await fs.readFile(path.join(cwd, "tsconfig.json"), "utf-8");
+        const tsconfig = JSON.parse(raw);
+        const paths = tsconfig.compilerOptions?.paths ?? {};
+        for (const alias of Object.keys(paths)) {
+            return alias.replace(/\/\*$/, "");
+        }
+    }
+    catch { }
+    console.error("No import alias found.");
+    process.exit(1);
+};

package/dist/lib/install.js

@@ -0,0 +1,54 @@
+import { execSync } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { detectPackageManager } from "./detect.js";
+import { fetchFile, fetchRegistry } from "./registry.js";
+export const resolveTargetDir = (name, entry, config) => {
+    // utils
+    if (entry.target)
+        return config.utilsDir ?? entry.target;
+    return `${config.componentsDir}/${name}`;
+};
+export async function installNpmDeps(packages, cwd) {
+    if (packages.length === 0)
+        return;
+    const pm = await detectPackageManager(cwd);
+    const cmd = pm === "npm" ? "npm install" : `${pm} add`;
+    console.log(`\nInstalling npm packages with ${pm}: ${packages.join(", ")}`);
+    execSync(`${cmd} ${packages.join(" ")}`, { cwd, stdio: "inherit" });
+}
+export const installEntry = async (name, config, installed = new Set(), npmDeps = new Set()) => {
+    if (installed.has(name))
+        return;
+    installed.add(name);
+    const registry = await fetchRegistry();
+    const entry = registry[name];
+    if (!entry)
+        throw new Error(`"${name}" not found in registry`);
+    for (const pkg of entry.npmDependencies ?? []) {
+        npmDeps.add(pkg);
+    }
+    for (const dep of entry.dependencies ?? []) {
+        await installEntry(dep, config, installed, npmDeps);
+    }
+    const targetDir = resolveTargetDir(name, entry, config);
+    const targetPath = path.resolve(process.cwd(), targetDir);
+    await fs.mkdir(targetPath, { recursive: true });
+    await Promise.all(entry.files.map(async (file) => {
+        let content = await fetchFile(`${entry.path}/${file}`);
+        content = updateImports(content, config);
+        const dest = path.resolve(targetPath, file);
+        await fs.writeFile(dest, content);
+    }));
+    console.log(`✔  Installed: ${name} → ${targetPath}`);
+    if (npmDeps.size > 0) {
+        await installNpmDeps([...npmDeps], process.cwd());
+        npmDeps.clear();
+    }
+};
+export const updateImports = (content, config) => {
+    return content
+        .replace(/@\/components/g, config.aliases.components)
+        .replace(/@\/lib/g, config.aliases.utils)
+        .replace(/@\/utils/g, config.aliases.utils);
+};

package/dist/lib/registry.js

@@ -0,0 +1,15 @@
+const GITHUB_RAW = "https://raw.githubusercontent.com/radeqq007/ripple-ui/main";
+const REGISTRY_URL = `${GITHUB_RAW}/registry.json`;
+export const fetchRegistry = async () => {
+    const res = await fetch(REGISTRY_URL);
+    if (!res.ok)
+        throw new Error(`Failed to fetch registry: ${res.statusText}`);
+    return res.json();
+};
+export const fetchFile = async (path) => {
+    const url = `${GITHUB_RAW}/${path}`;
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`Failed to fetch file ${path}: ${res.statusText}`);
+    return res.text();
+};

package/dist/lib/themes.js

@@ -0,0 +1,332 @@
+// ─── Shared types ────────────────────────────────────────────────────────────
+export const bases = {
+    stone: {
+        root: {
+            bg: 'oklch(1 0 0)',
+            fg: 'oklch(0.145 0 0)',
+            card: { bg: 'oklch(1 0 0)', fg: 'oklch(0.145 0 0)' },
+            popover: { bg: 'oklch(1 0 0)', fg: 'oklch(0.145 0 0)' },
+            secondary: { bg: 'oklch(0.97 0 0)', fg: 'oklch(0.205 0 0)' },
+            muted: { bg: 'oklch(0.97 0 0)', fg: 'oklch(0.556 0 0)' },
+            accent: { bg: 'oklch(0.97 0 0)', fg: 'oklch(0.205 0 0)' },
+            destructive: 'oklch(0.577 0.245 27.325)',
+            border: 'oklch(0.922 0 0)',
+            input: 'oklch(0.922 0 0)',
+            ring: 'oklch(0.708 0 0)',
+            charts: [
+                'oklch(0.87 0 0)',
+                'oklch(0.556 0 0)',
+                'oklch(0.439 0 0)',
+                'oklch(0.371 0 0)',
+                'oklch(0.269 0 0)',
+            ],
+            sidebar: {
+                bg: 'oklch(0.985 0 0)',
+                fg: 'oklch(0.145 0 0)',
+                accent: { bg: 'oklch(0.97 0 0)', fg: 'oklch(0.205 0 0)' },
+                border: 'oklch(0.922 0 0)',
+                ring: 'oklch(0.708 0 0)',
+            },
+        },
+        dark: {
+            bg: 'oklch(0.145 0 0)',
+            fg: 'oklch(0.985 0 0)',
+            card: { bg: 'oklch(0.205 0 0)', fg: 'oklch(0.985 0 0)' },
+            popover: { bg: 'oklch(0.205 0 0)', fg: 'oklch(0.985 0 0)' },
+            secondary: { bg: 'oklch(0.269 0 0)', fg: 'oklch(0.985 0 0)' },
+            muted: { bg: 'oklch(0.269 0 0)', fg: 'oklch(0.708 0 0)' },
+            accent: { bg: 'oklch(0.269 0 0)', fg: 'oklch(0.985 0 0)' },
+            destructive: 'oklch(0.704 0.191 22.216)',
+            border: 'oklch(1 0 0 / 10%)',
+            input: 'oklch(1 0 0 / 15%)',
+            ring: 'oklch(0.556 0 0)',
+            charts: [
+                'oklch(0.87 0 0)',
+                'oklch(0.556 0 0)',
+                'oklch(0.439 0 0)',
+                'oklch(0.371 0 0)',
+                'oklch(0.269 0 0)',
+            ],
+            sidebar: {
+                bg: 'oklch(0.205 0 0)',
+                fg: 'oklch(0.985 0 0)',
+                accent: { bg: 'oklch(0.269 0 0)', fg: 'oklch(0.985 0 0)' },
+                border: 'oklch(1 0 0 / 10%)',
+                ring: 'oklch(0.556 0 0)',
+            },
+        },
+    },
+    zinc: {
+        root: {
+            bg: 'oklch(1 0 0)',
+            fg: 'oklch(0.141 0.005 285.823)',
+            card: { bg: 'oklch(1 0 0)', fg: 'oklch(0.141 0.005 285.823)' },
+            popover: { bg: 'oklch(1 0 0)', fg: 'oklch(0.141 0.005 285.823)' },
+            secondary: {
+                bg: 'oklch(0.967 0.001 286.375)',
+                fg: 'oklch(0.21 0.006 285.885)',
+            },
+            muted: {
+                bg: 'oklch(0.967 0.001 286.375)',
+                fg: 'oklch(0.552 0.016 285.938)',
+            },
+            accent: {
+                bg: 'oklch(0.967 0.001 286.375)',
+                fg: 'oklch(0.21 0.006 285.885)',
+            },
+            destructive: 'oklch(0.577 0.245 27.325)',
+            border: 'oklch(0.92 0.004 286.32)',
+            input: 'oklch(0.92 0.004 286.32)',
+            ring: 'oklch(0.705 0.015 286.067)',
+            charts: [
+                'oklch(0.869 0.005 286.286)',
+                'oklch(0.552 0.016 285.938)',
+                'oklch(0.442 0.017 285.786)',
+                'oklch(0.37 0.013 285.805)',
+                'oklch(0.274 0.006 286.033)',
+            ],
+            sidebar: {
+                bg: 'oklch(0.985 0.002 286.067)',
+                fg: 'oklch(0.141 0.005 285.823)',
+                accent: {
+                    bg: 'oklch(0.967 0.001 286.375)',
+                    fg: 'oklch(0.21 0.006 285.885)',
+                },
+                border: 'oklch(0.92 0.004 286.32)',
+                ring: 'oklch(0.705 0.015 286.067)',
+            },
+        },
+        dark: {
+            bg: 'oklch(0.141 0.005 285.823)',
+            fg: 'oklch(0.985 0 0)',
+            card: {
+                bg: 'oklch(0.21 0.006 285.885)',
+                fg: 'oklch(0.985 0 0)',
+            },
+            popover: {
+                bg: 'oklch(0.21 0.006 285.885)',
+                fg: 'oklch(0.985 0 0)',
+            },
+            secondary: {
+                bg: 'oklch(0.274 0.006 286.033)',
+                fg: 'oklch(0.985 0 0)',
+            },
+            muted: {
+                bg: 'oklch(0.274 0.006 286.033)',
+                fg: 'oklch(0.705 0.015 286.067)',
+            },
+            accent: {
+                bg: 'oklch(0.274 0.006 286.033)',
+                fg: 'oklch(0.985 0 0)',
+            },
+            destructive: 'oklch(0.704 0.191 22.216)',
+            border: 'oklch(1 0 0 / 10%)',
+            input: 'oklch(1 0 0 / 15%)',
+            ring: 'oklch(0.552 0.016 285.938)',
+            charts: [
+                'oklch(0.869 0.005 286.286)',
+                'oklch(0.552 0.016 285.938)',
+                'oklch(0.442 0.017 285.786)',
+                'oklch(0.37 0.013 285.805)',
+                'oklch(0.274 0.006 286.033)',
+            ],
+            sidebar: {
+                bg: 'oklch(0.21 0.006 285.885)',
+                fg: 'oklch(0.985 0 0)',
+                accent: {
+                    bg: 'oklch(0.274 0.006 286.033)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+                border: 'oklch(1 0 0 / 10%)',
+                ring: 'oklch(0.552 0.016 285.938)',
+            },
+        },
+    },
+    slate: {
+        root: {
+            bg: 'oklch(1 0 0)',
+            fg: 'oklch(0.129 0.042 264.695)',
+            card: { bg: 'oklch(1 0 0)', fg: 'oklch(0.129 0.042 264.695)' },
+            popover: { bg: 'oklch(1 0 0)', fg: 'oklch(0.129 0.042 264.695)' },
+            secondary: {
+                bg: 'oklch(0.968 0.007 247.896)',
+                fg: 'oklch(0.208 0.042 265.755)',
+            },
+            muted: {
+                bg: 'oklch(0.968 0.007 247.896)',
+                fg: 'oklch(0.554 0.046 257.417)',
+            },
+            accent: {
+                bg: 'oklch(0.968 0.007 247.896)',
+                fg: 'oklch(0.208 0.042 265.755)',
+            },
+            destructive: 'oklch(0.577 0.245 27.325)',
+            border: 'oklch(0.929 0.013 255.508)',
+            input: 'oklch(0.929 0.013 255.508)',
+            ring: 'oklch(0.704 0.04 256.788)',
+            charts: [
+                'oklch(0.868 0.017 252.894)',
+                'oklch(0.554 0.046 257.417)',
+                'oklch(0.446 0.043 257.281)',
+                'oklch(0.372 0.044 257.287)',
+                'oklch(0.279 0.041 260.031)',
+            ],
+            sidebar: {
+                bg: 'oklch(0.984 0.003 247.858)',
+                fg: 'oklch(0.129 0.042 264.695)',
+                accent: {
+                    bg: 'oklch(0.968 0.007 247.896)',
+                    fg: 'oklch(0.208 0.042 265.755)',
+                },
+                border: 'oklch(0.929 0.013 255.508)',
+                ring: 'oklch(0.704 0.04 256.788)',
+            },
+        },
+        dark: {
+            bg: 'oklch(0.129 0.042 264.695)',
+            fg: 'oklch(0.984 0.003 247.858)',
+            card: {
+                bg: 'oklch(0.208 0.042 265.755)',
+                fg: 'oklch(0.984 0.003 247.858)',
+            },
+            popover: {
+                bg: 'oklch(0.208 0.042 265.755)',
+                fg: 'oklch(0.984 0.003 247.858)',
+            },
+            secondary: {
+                bg: 'oklch(0.279 0.041 260.031)',
+                fg: 'oklch(0.984 0.003 247.858)',
+            },
+            muted: {
+                bg: 'oklch(0.279 0.041 260.031)',
+                fg: 'oklch(0.704 0.04 256.788)',
+            },
+            accent: {
+                bg: 'oklch(0.279 0.041 260.031)',
+                fg: 'oklch(0.984 0.003 247.858)',
+            },
+            destructive: 'oklch(0.704 0.191 22.216)',
+            border: 'oklch(1 0 0 / 10%)',
+            input: 'oklch(1 0 0 / 15%)',
+            ring: 'oklch(0.554 0.046 257.417)',
+            charts: [
+                'oklch(0.868 0.017 252.894)',
+                'oklch(0.554 0.046 257.417)',
+                'oklch(0.446 0.043 257.281)',
+                'oklch(0.372 0.044 257.287)',
+                'oklch(0.279 0.041 260.031)',
+            ],
+            sidebar: {
+                bg: 'oklch(0.208 0.042 265.755)',
+                fg: 'oklch(0.984 0.003 247.858)',
+                accent: {
+                    bg: 'oklch(0.279 0.041 260.031)',
+                    fg: 'oklch(0.984 0.003 247.858)',
+                },
+                border: 'oklch(1 0 0 / 10%)',
+                ring: 'oklch(0.554 0.046 257.417)',
+            },
+        },
+    },
+};
+export const accentThemes = {
+    neutral: {
+        radius: '0.625rem',
+        root: {
+            primary: { bg: 'oklch(0.205 0 0)', fg: 'oklch(0.986 0 0)' },
+            sidebar: {
+                primary: { bg: 'oklch(0.205 0 0)', fg: 'oklch(0.985 0 0)' },
+            },
+        },
+        dark: {
+            primary: { bg: 'oklch(0.922 0 0)', fg: 'oklch(0.205 0 0)' },
+            sidebar: {
+                primary: { bg: 'oklch(0.488 0.243 264.376)', fg: 'oklch(0.985 0 0)' },
+            },
+        },
+    },
+    blue: {
+        radius: '0.5rem',
+        root: {
+            primary: { bg: 'oklch(0.546 0.245 262.881)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.546 0.245 262.881)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+        dark: {
+            primary: { bg: 'oklch(0.623 0.214 259.815)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.623 0.214 259.815)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+    },
+    violet: {
+        radius: '0.75rem',
+        root: {
+            primary: { bg: 'oklch(0.541 0.281 293.009)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.541 0.281 293.009)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+        dark: {
+            primary: { bg: 'oklch(0.606 0.25 292.717)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.606 0.25 292.717)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+    },
+    rose: {
+        radius: '0.5rem',
+        root: {
+            primary: { bg: 'oklch(0.586 0.253 17.585)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.586 0.253 17.585)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+        dark: {
+            primary: { bg: 'oklch(0.645 0.246 16.439)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.645 0.246 16.439)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+    },
+    orange: {
+        radius: '0.625rem',
+        root: {
+            primary: { bg: 'oklch(0.646 0.222 41.116)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.646 0.222 41.116)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+        dark: {
+            primary: { bg: 'oklch(0.702 0.191 42.842)', fg: 'oklch(0.985 0 0)' },
+            sidebar: {
+                primary: {
+                    bg: 'oklch(0.702 0.191 42.842)',
+                    fg: 'oklch(0.985 0 0)',
+                },
+            },
+        },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rippleui-cli",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "shadcn/ui inspired components library for Ripple TS",
 	"type": "module",
 	"scripts": {