@nikala-ui/cli 0.9.9 → 0.9.10

package/README.md

@@ -13,9 +13,19 @@ Official Documentation & Interactive Demos: [nikala.magradze.dev](https://nikala
 Execute directly using your preferred package manager:
 
 ```bash
+# Add components
+bunx @nikala-ui/cli add button dialog
+
+# Upgrade / update installed components & hooks to latest registry versions
+bunx @nikala-ui/cli upgrade
+bunx @nikala-ui/cli update button --all
+
+# Remove / uninstall installed components or hooks
+bunx @nikala-ui/cli remove button
+bunx @nikala-ui/cli uninstall -h create-clipboard
+
+# Initialize project
 bunx @nikala-ui/cli init
-# or
-npx @nikala-ui/cli init
 ```
 
 ---

package/dist/commands/remove.d.ts

@@ -0,0 +1,9 @@
+interface RemoveOptions {
+    all?: boolean;
+    hook?: boolean;
+}
+/**
+ * Command handler to safely uninstall/remove local Nikala UI components or reactive hooks.
+ */
+export declare function removeCommand(components?: string[], options?: RemoveOptions): Promise<void>;
+export {};

package/dist/commands/remove.js

@@ -0,0 +1,93 @@
+import fs from "fs-extra";
+import path from "node:path";
+import prompts from "prompts";
+import pc from "picocolors";
+import { readConfig } from "../utils/file.js";
+/**
+ * Command handler to safely uninstall/remove local Nikala UI components or reactive hooks.
+ */
+export async function removeCommand(components = [], options = {}) {
+    const cwd = process.cwd();
+    const config = await readConfig(cwd);
+    if (!config) {
+        console.log(pc.red("❌ nikala.config.json not found! Run `nikala init` first."));
+        process.exit(1);
+    }
+    const isHookMode = Boolean(options.hook);
+    const targetDir = isHookMode
+        ? config.alias.hooks
+            ? path.resolve(cwd, config.alias.hooks)
+            : path.join(cwd, "src/hooks")
+        : path.resolve(cwd, config.alias.components);
+    if (!(await fs.pathExists(targetDir))) {
+        console.log(pc.yellow(`⚠️ Directory ${targetDir} does not exist.`));
+        return;
+    }
+    // Find installed files in target directory
+    const files = await fs.readdir(targetDir);
+    const installedItems = [];
+    for (const file of files) {
+        if (file.endsWith(".tsx") || file.endsWith(".ts")) {
+            const name = path.basename(file, path.extname(file));
+            if (name !== "index" && name !== "cn") {
+                installedItems.push(name);
+            }
+        }
+    }
+    if (installedItems.length === 0) {
+        console.log(pc.yellow(`\n⚠️ No installed ${isHookMode ? "hooks" : "components"} found to remove.`));
+        return;
+    }
+    let itemsToRemove = [];
+    if (options.all || components.includes("all")) {
+        itemsToRemove = installedItems;
+    }
+    else if (components.length > 0) {
+        itemsToRemove = components.filter((c) => installedItems.includes(c));
+        if (itemsToRemove.length === 0) {
+            console.log(pc.red(`❌ None of the specified items (${components.join(", ")}) exist in ${targetDir}`));
+            return;
+        }
+    }
+    else {
+        const response = await prompts({
+            type: "autocompleteMultiselect",
+            name: "selectedItems",
+            message: `Select ${isHookMode ? "hooks" : "components"} to remove (Space to select, Enter to confirm)`,
+            choices: installedItems.map((item) => ({
+                title: item,
+                value: item,
+            })),
+            hint: "- Space to select. Return to submit.",
+        });
+        if (!response.selectedItems || response.selectedItems.length === 0) {
+            console.log(pc.yellow(`\n❌ Removal cancelled. No items selected.`));
+            return;
+        }
+        itemsToRemove = response.selectedItems;
+    }
+    const confirmPrompt = await prompts({
+        type: "confirm",
+        name: "confirmed",
+        message: `Are you sure you want to delete ${itemsToRemove.length} item(s) (${itemsToRemove.join(", ")})?`,
+        initial: false,
+    });
+    if (!confirmPrompt.confirmed) {
+        console.log(pc.yellow("\n❌ Removal cancelled."));
+        return;
+    }
+    console.log(pc.cyan(`\n🗑️ Removing items...\n`));
+    for (const name of itemsToRemove) {
+        const tsxPath = path.join(targetDir, `${name}.tsx`);
+        const tsPath = path.join(targetDir, `${name}.ts`);
+        if (await fs.pathExists(tsxPath)) {
+            await fs.remove(tsxPath);
+            console.log(pc.green(`  ✓ Removed ${name}.tsx`));
+        }
+        else if (await fs.pathExists(tsPath)) {
+            await fs.remove(tsPath);
+            console.log(pc.green(`  ✓ Removed ${name}.ts`));
+        }
+    }
+    console.log(pc.green(`\n✅ Successfully removed ${itemsToRemove.length} ${isHookMode ? "hook(s)" : "component(s)"}!`));
+}

package/dist/commands/upgrade.d.ts

@@ -0,0 +1,10 @@
+interface UpgradeOptions {
+    all?: boolean;
+    overwrite?: boolean;
+}
+/**
+ * Command handler to inspect local components/hooks against the latest registry
+ * and update them to the latest versions.
+ */
+export declare function upgradeCommand(targets?: string[], options?: UpgradeOptions): Promise<void>;
+export {};

package/dist/commands/upgrade.js

@@ -0,0 +1,116 @@
+import fs from "fs-extra";
+import path from "node:path";
+import prompts from "prompts";
+import pc from "picocolors";
+import { readConfig } from "../utils/file.js";
+import { installDependencies } from "../utils/pkg.js";
+import { getRegistryIndex, getRegistryItem } from "../utils/registry.js";
+import { writeComponentFiles } from "../utils/add/write-component-files.js";
+/**
+ * Command handler to inspect local components/hooks against the latest registry
+ * and update them to the latest versions.
+ */
+export async function upgradeCommand(targets = [], options = {}) {
+    const cwd = process.cwd();
+    const config = await readConfig(cwd);
+    if (!config) {
+        console.log(pc.red("❌ nikala.config.json not found! Run `nikala init` first."));
+        process.exit(1);
+    }
+    const registryIndex = await getRegistryIndex();
+    if (!registryIndex) {
+        console.log(pc.red("❌ Failed to fetch registry index. Ensure network connection."));
+        process.exit(1);
+    }
+    const componentsDir = path.resolve(cwd, config.alias.components);
+    const hooksDir = config.alias.hooks ? path.resolve(cwd, config.alias.hooks) : path.join(cwd, "src/hooks");
+    // Inspect locally installed components and hooks
+    const installedItems = [];
+    for (const item of registryIndex) {
+        const isHook = item.type === "registry:hook";
+        const targetDir = isHook ? hooksDir : componentsDir;
+        const itemPath = path.join(targetDir, `${item.name}.tsx`);
+        const hookItemPath = path.join(targetDir, `${item.name}.ts`);
+        if ((await fs.pathExists(itemPath)) || (await fs.pathExists(hookItemPath))) {
+            installedItems.push({
+                name: item.name,
+                type: item.type,
+                title: item.title,
+            });
+        }
+    }
+    if (installedItems.length === 0) {
+        console.log(pc.yellow("\n⚠️ No Nikala UI components or hooks found in your project to upgrade."));
+        return;
+    }
+    let itemsToUpgrade = [];
+    if (options.all || targets.includes("all")) {
+        itemsToUpgrade = installedItems.map((i) => i.name);
+    }
+    else if (targets.length > 0) {
+        itemsToUpgrade = targets.filter((t) => installedItems.some((i) => i.name === t));
+        if (itemsToUpgrade.length === 0) {
+            console.log(pc.red(`❌ None of the requested items (${targets.join(", ")}) are installed locally.`));
+            return;
+        }
+    }
+    else {
+        const response = await prompts({
+            type: "autocompleteMultiselect",
+            name: "selected",
+            message: "Select installed components/hooks to upgrade to latest version",
+            choices: installedItems.map((item) => ({
+                title: `${item.title} (${item.type === "registry:hook" ? "Hook" : "Component"})`,
+                value: item.name,
+                selected: true,
+            })),
+            hint: "- Space to toggle selection. Return to confirm.",
+        });
+        if (!response.selected || response.selected.length === 0) {
+            console.log(pc.yellow("\n❌ Upgrade cancelled. No items selected."));
+            return;
+        }
+        itemsToUpgrade = response.selected;
+    }
+    // 2. Resolve internal registry component dependencies automatically
+    const { resolveRegistryDependencies } = await import("../utils/registry.js");
+    const resolvedUpgradeTargets = await resolveRegistryDependencies(itemsToUpgrade);
+    console.log(pc.cyan(`\n🔄 Upgrading ${resolvedUpgradeTargets.length} item(s) to latest registry version...\n`));
+    const requiredNpmDeps = new Set();
+    for (const name of resolvedUpgradeTargets) {
+        const item = await getRegistryItem(name);
+        if (!item)
+            continue;
+        const isHook = item.type === "registry:hook";
+        const targetDir = isHook ? hooksDir : componentsDir;
+        if (item.dependencies) {
+            for (const dep of item.dependencies) {
+                requiredNpmDeps.add(dep);
+            }
+        }
+        await writeComponentFiles(cwd, item, targetDir, true);
+        console.log(pc.green(`  ✓ Updated ${name} (${isHook ? "Hook" : "Component"})`));
+    }
+    // Check npm packages upgrade
+    const missingNpmDeps = [];
+    const userPkgPath = path.join(cwd, "package.json");
+    if (await fs.pathExists(userPkgPath)) {
+        try {
+            const userPkg = await fs.readJson(userPkgPath);
+            const installed = { ...userPkg.dependencies, ...userPkg.devDependencies };
+            for (const dep of requiredNpmDeps) {
+                if (!installed[dep]) {
+                    missingNpmDeps.push(dep);
+                }
+            }
+        }
+        catch {
+            missingNpmDeps.push(...Array.from(requiredNpmDeps));
+        }
+    }
+    if (missingNpmDeps.length > 0) {
+        console.log(pc.yellow("\n📦 Installing newly required dependencies..."));
+        await installDependencies(missingNpmDeps, cwd);
+    }
+    console.log(pc.green(`\n✅ Successfully upgraded ${itemsToUpgrade.length} item(s) to latest version!`));
+}

package/dist/index.js

@@ -6,14 +6,16 @@ import { add } from "./commands/add.js";
 import { themeCommand } from "./commands/theme.js";
 import { validateCommand } from "./commands/validate.js";
 import { diffCommand } from "./commands/diff.js";
-console.log(`\n🎨 ${pc.bold(pc.red("Nikala UI"))} ${pc.dim("v0.9.9")} — SolidJS + Tailwind v4 components`);
+import { upgradeCommand } from "./commands/upgrade.js";
+import { removeCommand } from "./commands/remove.js";
+console.log(`\n🎨 ${pc.bold(pc.red("Nikala UI"))} ${pc.dim("v0.9.10")} — SolidJS + Tailwind v4 components`);
 console.log(`   ${pc.italic(pc.dim("Honoring Niko Pirosmani (Nikala)"))}\n`);
 console.log(`   ${pc.dim("Docs:")} ${pc.underline(pc.cyan("https://nikala.magradze.dev"))}\n`);
 const program = new Command();
 program
     .name("nikala")
     .description("Nikala UI — SolidJS + Tailwind v4 components")
-    .version("0.9.9");
+    .version("0.9.10");
 program
     .command("init")
     .description("Initialize Nikala UI in your project")
@@ -26,6 +28,22 @@ program
     .option("--all", "Add all available items")
     .option("-h, --hook", "Add reactive hook primitive(s) instead of UI components")
     .action(add);
+// Upgrade / Update command
+program
+    .command("upgrade [components...]")
+    .alias("update")
+    .description("Upgrade locally installed components and hooks to the latest registry version")
+    .option("--all", "Upgrade all installed items")
+    .action((components, options) => upgradeCommand(components, options));
+// Remove / Uninstall command
+program
+    .command("remove [components...]")
+    .alias("uninstall")
+    .alias("clean")
+    .description("Remove or uninstall installed components or reactive hooks from your project")
+    .option("-h, --hook", "Remove reactive hook primitive(s) instead of UI components")
+    .option("--all", "Remove all installed components or hooks")
+    .action((components, options) => removeCommand(components, options));
 // Parent theme command
 const themeProg = program
     .command("theme")

package/dist/utils/theme.d.ts

@@ -3,24 +3,43 @@ export interface BasePalette {
     lightFg: string;
     darkBg: string;
     darkFg: string;
+    lightCard: string;
+    darkCard: string;
+    lightPopover: string;
+    darkPopover: string;
     lightMuted: string;
     lightMutedFg: string;
     darkMuted: string;
     darkMutedFg: string;
+    lightAccent: string;
+    darkAccent: string;
     lightBorder: string;
     darkBorder: string;
+    lightInput: string;
+    darkInput: string;
     lightRing: string;
     darkRing: string;
+    lightSidebar: string;
+    darkSidebar: string;
+    lightSidebarBorder: string;
+    darkSidebarBorder: string;
 }
 export interface PrimaryColor {
     light: string;
     dark: string;
     lightFg: string;
     darkFg: string;
+    charts: {
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+    };
 }
 export declare const BASE_PALETTES: Record<string, BasePalette>;
 export declare const PRIMARY_COLORS: Record<string, PrimaryColor>;
 /**
- * Generates Tailwind CSS v4 theme variables based on base palette and primary accent color.
+ * Generates Tailwind CSS v4 theme variables matching tweakcn specification.
  */
 export declare function generateThemeCss(baseColor?: string, primaryColor?: string): string;

package/dist/utils/theme.js

@@ -1,124 +1,244 @@
 export const BASE_PALETTES = {
     zinc: {
-        lightBg: "#ffffff",
-        lightFg: "#09090b",
-        darkBg: "#09090b",
-        darkFg: "#fafafa",
-        lightMuted: "#f4f4f5",
-        lightMutedFg: "#71717a",
-        darkMuted: "#27272a",
-        darkMutedFg: "#a1a1aa",
-        lightBorder: "#e4e4e7",
-        darkBorder: "#27272a",
-        lightRing: "#18181b",
-        darkRing: "#d4d4d8",
+        lightBg: "oklch(1 0 0)",
+        lightFg: "oklch(0.1450 0 0)",
+        darkBg: "oklch(0.1450 0 0)",
+        darkFg: "oklch(0.9850 0 0)",
+        lightCard: "oklch(1 0 0)",
+        darkCard: "oklch(0.2050 0 0)",
+        lightPopover: "oklch(1 0 0)",
+        darkPopover: "oklch(0.2690 0 0)",
+        lightMuted: "oklch(0.9700 0 0)",
+        lightMutedFg: "oklch(0.5560 0 0)",
+        darkMuted: "oklch(0.2690 0 0)",
+        darkMutedFg: "oklch(0.7080 0 0)",
+        lightAccent: "oklch(0.9700 0 0)",
+        darkAccent: "oklch(0.3710 0 0)",
+        lightBorder: "oklch(0.9220 0 0)",
+        darkBorder: "oklch(0.2750 0 0)",
+        lightInput: "oklch(0.9220 0 0)",
+        darkInput: "oklch(0.3250 0 0)",
+        lightRing: "oklch(0.7080 0 0)",
+        darkRing: "oklch(0.5560 0 0)",
+        lightSidebar: "oklch(0.9850 0 0)",
+        darkSidebar: "oklch(0.2050 0 0)",
+        lightSidebarBorder: "oklch(0.9220 0 0)",
+        darkSidebarBorder: "oklch(0.2750 0 0)",
     },
     slate: {
-        lightBg: "#ffffff",
-        lightFg: "#020617",
-        darkBg: "#020617",
-        darkFg: "#f8fafc",
-        lightMuted: "#f1f5f9",
-        lightMutedFg: "#64748b",
-        darkMuted: "#1e293b",
-        darkMutedFg: "#94a3b8",
-        lightBorder: "#e2e8f0",
-        darkBorder: "#1e293b",
-        lightRing: "#0f172a",
-        darkRing: "#cbd5e1",
+        lightBg: "oklch(1 0 0)",
+        lightFg: "oklch(0.13 0.028 261.692)",
+        darkBg: "oklch(0.13 0.028 261.692)",
+        darkFg: "oklch(0.985 0.002 247.839)",
+        lightCard: "oklch(1 0 0)",
+        darkCard: "oklch(0.18 0.025 261.692)",
+        lightPopover: "oklch(1 0 0)",
+        darkPopover: "oklch(0.24 0.025 261.692)",
+        lightMuted: "oklch(0.965 0.007 247.896)",
+        lightMutedFg: "oklch(0.552 0.016 285.938)",
+        darkMuted: "oklch(0.24 0.025 261.692)",
+        darkMutedFg: "oklch(0.704 0.015 286.067)",
+        lightAccent: "oklch(0.965 0.007 247.896)",
+        darkAccent: "oklch(0.34 0.025 261.692)",
+        lightBorder: "oklch(0.92 0.008 286.32)",
+        darkBorder: "oklch(0.27 0.02 261.692)",
+        lightInput: "oklch(0.92 0.008 286.32)",
+        darkInput: "oklch(0.32 0.02 261.692)",
+        lightRing: "oklch(0.7 0.015 286.067)",
+        darkRing: "oklch(0.55 0.016 285.938)",
+        lightSidebar: "oklch(0.985 0.002 247.839)",
+        darkSidebar: "oklch(0.18 0.025 261.692)",
+        lightSidebarBorder: "oklch(0.92 0.008 286.32)",
+        darkSidebarBorder: "oklch(0.27 0.02 261.692)",
     },
     gray: {
-        lightBg: "#ffffff",
-        lightFg: "#030712",
-        darkBg: "#030712",
-        darkFg: "#f9fafb",
-        lightMuted: "#f3f4f6",
-        lightMutedFg: "#6b7280",
-        darkMuted: "#1f2937",
-        darkMutedFg: "#9ca3af",
-        lightBorder: "#e5e7eb",
-        darkBorder: "#1f2937",
-        lightRing: "#111827",
-        darkRing: "#d1d5db",
+        lightBg: "oklch(1 0 0)",
+        lightFg: "oklch(0.141 0.005 285.823)",
+        darkBg: "oklch(0.141 0.005 285.823)",
+        darkFg: "oklch(0.985 0 0)",
+        lightCard: "oklch(1 0 0)",
+        darkCard: "oklch(0.205 0.005 285.823)",
+        lightPopover: "oklch(1 0 0)",
+        darkPopover: "oklch(0.269 0.005 285.823)",
+        lightMuted: "oklch(0.967 0.001 286.375)",
+        lightMutedFg: "oklch(0.552 0.016 285.938)",
+        darkMuted: "oklch(0.269 0.005 285.823)",
+        darkMutedFg: "oklch(0.707 0.004 286.32)",
+        lightAccent: "oklch(0.967 0.001 286.375)",
+        darkAccent: "oklch(0.371 0.005 285.823)",
+        lightBorder: "oklch(0.92 0.004 286.32)",
+        darkBorder: "oklch(0.275 0.005 285.823)",
+        lightInput: "oklch(0.92 0.004 286.32)",
+        darkInput: "oklch(0.325 0.005 285.823)",
+        lightRing: "oklch(0.707 0.004 286.32)",
+        darkRing: "oklch(0.552 0.016 285.938)",
+        lightSidebar: "oklch(0.985 0 0)",
+        darkSidebar: "oklch(0.205 0.005 285.823)",
+        lightSidebarBorder: "oklch(0.92 0.004 286.32)",
+        darkSidebarBorder: "oklch(0.275 0.005 285.823)",
     },
     neutral: {
-        lightBg: "#ffffff",
-        lightFg: "#0a0a0a",
-        darkBg: "#0a0a0a",
-        darkFg: "#fafafa",
-        lightMuted: "#f5f5f5",
-        lightMutedFg: "#737373",
-        darkMuted: "#262626",
-        darkMutedFg: "#a3a3a3",
-        lightBorder: "#e5e5e5",
-        darkBorder: "#262626",
-        lightRing: "#171717",
-        darkRing: "#d4d4d4",
+        lightBg: "oklch(1 0 0)",
+        lightFg: "oklch(0.145 0 0)",
+        darkBg: "oklch(0.145 0 0)",
+        darkFg: "oklch(0.985 0 0)",
+        lightCard: "oklch(1 0 0)",
+        darkCard: "oklch(0.205 0 0)",
+        lightPopover: "oklch(1 0 0)",
+        darkPopover: "oklch(0.269 0 0)",
+        lightMuted: "oklch(0.970 0 0)",
+        lightMutedFg: "oklch(0.556 0 0)",
+        darkMuted: "oklch(0.269 0 0)",
+        darkMutedFg: "oklch(0.708 0 0)",
+        lightAccent: "oklch(0.970 0 0)",
+        darkAccent: "oklch(0.371 0 0)",
+        lightBorder: "oklch(0.922 0 0)",
+        darkBorder: "oklch(0.275 0 0)",
+        lightInput: "oklch(0.922 0 0)",
+        darkInput: "oklch(0.325 0 0)",
+        lightRing: "oklch(0.708 0 0)",
+        darkRing: "oklch(0.556 0 0)",
+        lightSidebar: "oklch(0.985 0 0)",
+        darkSidebar: "oklch(0.205 0 0)",
+        lightSidebarBorder: "oklch(0.922 0 0)",
+        darkSidebarBorder: "oklch(0.275 0 0)",
     },
     stone: {
-        lightBg: "#ffffff",
-        lightFg: "#0c0a09",
-        darkBg: "#0c0a09",
-        darkFg: "#fafaf9",
-        lightMuted: "#f5f5f4",
-        lightMutedFg: "#78716c",
-        darkMuted: "#292524",
-        darkMutedFg: "#a8a29e",
-        lightBorder: "#e7e5e4",
-        darkBorder: "#292524",
-        lightRing: "#1c1917",
-        darkRing: "#d6d3d1",
+        lightBg: "oklch(1 0 0)",
+        lightFg: "oklch(0.147 0.004 49.25)",
+        darkBg: "oklch(0.147 0.004 49.25)",
+        darkFg: "oklch(0.985 0.001 106.423)",
+        lightCard: "oklch(1 0 0)",
+        darkCard: "oklch(0.216 0.006 56.043)",
+        lightPopover: "oklch(1 0 0)",
+        darkPopover: "oklch(0.274 0.006 56.043)",
+        lightMuted: "oklch(0.967 0.003 91.685)",
+        lightMutedFg: "oklch(0.553 0.013 58.071)",
+        darkMuted: "oklch(0.274 0.006 56.043)",
+        darkMutedFg: "oklch(0.709 0.01 56.259)",
+        lightAccent: "oklch(0.967 0.003 91.685)",
+        darkAccent: "oklch(0.374 0.007 56.043)",
+        lightBorder: "oklch(0.923 0.003 48.717)",
+        darkBorder: "oklch(0.279 0.006 56.043)",
+        lightInput: "oklch(0.923 0.003 48.717)",
+        darkInput: "oklch(0.329 0.006 56.043)",
+        lightRing: "oklch(0.709 0.01 56.259)",
+        darkRing: "oklch(0.553 0.013 58.071)",
+        lightSidebar: "oklch(0.985 0.001 106.423)",
+        darkSidebar: "oklch(0.216 0.006 56.043)",
+        lightSidebarBorder: "oklch(0.923 0.003 48.717)",
+        darkSidebarBorder: "oklch(0.279 0.006 56.043)",
     },
 };
 export const PRIMARY_COLORS = {
-    wine: { light: "#722f37", dark: "#9e3b47", lightFg: "#ffffff", darkFg: "#ffffff" },
-    violet: { light: "#7c3aed", dark: "#8b5cf6", lightFg: "#ffffff", darkFg: "#ffffff" },
-    sky: { light: "#0284c7", dark: "#38bdf8", lightFg: "#ffffff", darkFg: "#0f172a" },
-    emerald: { light: "#059669", dark: "#34d399", lightFg: "#ffffff", darkFg: "#052e16" },
-    rose: { light: "#e11d48", dark: "#fb7185", lightFg: "#ffffff", darkFg: "#ffffff" },
-    amber: { light: "#d97706", dark: "#fbbf24", lightFg: "#ffffff", darkFg: "#111827" },
-    zinc: { light: "#18181b", dark: "#fafafa", lightFg: "#fafafa", darkFg: "#18181b" },
+    wine: {
+        light: "oklch(0.4 0.09 15.0)",
+        dark: "oklch(0.4 0.09 15.0)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.9850 0 0)",
+        charts: {
+            chart1: "oklch(0.55 0.18 15)",
+            chart2: "oklch(0.65 0.15 25)",
+            chart3: "oklch(0.45 0.12 350)",
+            chart4: "oklch(0.75 0.10 35)",
+            chart5: "oklch(0.35 0.08 10)",
+        },
+    },
+    violet: {
+        light: "oklch(0.55 0.22 285)",
+        dark: "oklch(0.65 0.2 285)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.9850 0 0)",
+        charts: {
+            chart1: "oklch(0.65 0.22 285)",
+            chart2: "oklch(0.55 0.19 260)",
+            chart3: "oklch(0.75 0.15 310)",
+            chart4: "oklch(0.45 0.16 270)",
+            chart5: "oklch(0.85 0.10 290)",
+        },
+    },
+    sky: {
+        light: "oklch(0.6 0.16 230)",
+        dark: "oklch(0.7 0.14 230)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.1450 0 0)",
+        charts: {
+            chart1: "oklch(0.7 0.16 230)",
+            chart2: "oklch(0.6 0.14 210)",
+            chart3: "oklch(0.5 0.15 250)",
+            chart4: "oklch(0.8 0.10 220)",
+            chart5: "oklch(0.4 0.12 240)",
+        },
+    },
+    emerald: {
+        light: "oklch(0.55 0.18 160)",
+        dark: "oklch(0.65 0.16 160)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.1450 0 0)",
+        charts: {
+            chart1: "oklch(0.65 0.18 160)",
+            chart2: "oklch(0.55 0.15 140)",
+            chart3: "oklch(0.45 0.16 175)",
+            chart4: "oklch(0.75 0.12 150)",
+            chart5: "oklch(0.35 0.10 165)",
+        },
+    },
+    rose: {
+        light: "oklch(0.55 0.22 15)",
+        dark: "oklch(0.65 0.2 15)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.9850 0 0)",
+        charts: {
+            chart1: "oklch(0.65 0.22 15)",
+            chart2: "oklch(0.55 0.18 350)",
+            chart3: "oklch(0.75 0.16 25)",
+            chart4: "oklch(0.45 0.15 5)",
+            chart5: "oklch(0.85 0.10 30)",
+        },
+    },
+    amber: {
+        light: "oklch(0.65 0.18 70)",
+        dark: "oklch(0.75 0.16 70)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.1450 0 0)",
+        charts: {
+            chart1: "oklch(0.75 0.18 70)",
+            chart2: "oklch(0.65 0.16 50)",
+            chart3: "oklch(0.55 0.15 85)",
+            chart4: "oklch(0.85 0.12 60)",
+            chart5: "oklch(0.45 0.14 75)",
+        },
+    },
+    zinc: {
+        light: "oklch(0.2050 0 0)",
+        dark: "oklch(0.9850 0 0)",
+        lightFg: "oklch(0.9850 0 0)",
+        darkFg: "oklch(0.1450 0 0)",
+        charts: {
+            chart1: "oklch(0.8100 0.1000 252)",
+            chart2: "oklch(0.6200 0.1900 260)",
+            chart3: "oklch(0.5500 0.2200 263)",
+            chart4: "oklch(0.4900 0.2200 264)",
+            chart5: "oklch(0.4200 0.1800 266)",
+        },
+    },
 };
 /**
- * Generates Tailwind CSS v4 theme variables based on base palette and primary accent color.
+ * Generates Tailwind CSS v4 theme variables matching tweakcn specification.
  */
 export function generateThemeCss(baseColor = "zinc", primaryColor = "wine") {
     const base = BASE_PALETTES[baseColor] || BASE_PALETTES.zinc;
     const primary = PRIMARY_COLORS[primaryColor] || PRIMARY_COLORS.wine;
     return `@import "tailwindcss";
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
+@custom-variant dark (&:is(.dark *));
 
 :root {
-  color-scheme: light;
   --background: ${base.lightBg};
   --foreground: ${base.lightFg};
-  --card: ${base.lightBg};
+  --card: ${base.lightCard};
   --card-foreground: ${base.lightFg};
-  --popover: ${base.lightBg};
+  --popover: ${base.lightPopover};
   --popover-foreground: ${base.lightFg};
   --primary: ${primary.light};
   --primary-foreground: ${primary.lightFg};
@@ -126,23 +246,54 @@ export function generateThemeCss(baseColor = "zinc", primaryColor = "wine") {
   --secondary-foreground: ${base.lightFg};
   --muted: ${base.lightMuted};
   --muted-foreground: ${base.lightMutedFg};
-  --accent: ${base.lightMuted};
+  --accent: ${base.lightAccent};
   --accent-foreground: ${base.lightFg};
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
+  --destructive: oklch(0.5770 0.2450 27.3250);
+  --destructive-foreground: oklch(1 0 0);
   --border: ${base.lightBorder};
-  --input: ${base.lightBorder};
+  --input: ${base.lightInput};
   --ring: ${base.lightRing};
-  --radius: 0.5rem;
+  --chart-1: ${primary.charts.chart1};
+  --chart-2: ${primary.charts.chart2};
+  --chart-3: ${primary.charts.chart3};
+  --chart-4: ${primary.charts.chart4};
+  --chart-5: ${primary.charts.chart5};
+  --sidebar: ${base.lightSidebar};
+  --sidebar-foreground: ${base.lightFg};
+  --sidebar-primary: ${primary.light};
+  --sidebar-primary-foreground: ${primary.lightFg};
+  --sidebar-accent: ${base.lightMuted};
+  --sidebar-accent-foreground: ${base.lightFg};
+  --sidebar-border: ${base.lightSidebarBorder};
+  --sidebar-ring: ${base.lightRing};
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.625rem;
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
 }
 
 .dark {
-  color-scheme: dark;
   --background: ${base.darkBg};
   --foreground: ${base.darkFg};
-  --card: ${base.darkBg};
+  --card: ${base.darkCard};
   --card-foreground: ${base.darkFg};
-  --popover: ${base.darkBg};
+  --popover: ${base.darkPopover};
   --popover-foreground: ${base.darkFg};
   --primary: ${primary.dark};
   --primary-foreground: ${primary.darkFg};
@@ -150,14 +301,97 @@ export function generateThemeCss(baseColor = "zinc", primaryColor = "wine") {
   --secondary-foreground: ${base.darkFg};
   --muted: ${base.darkMuted};
   --muted-foreground: ${base.darkMutedFg};
-  --accent: ${base.darkMuted};
+  --accent: ${base.darkAccent};
   --accent-foreground: ${base.darkFg};
-  --destructive: #7f1d1d;
-  --destructive-foreground: #ffffff;
+  --destructive: oklch(0.7040 0.1910 22.2160);
+  --destructive-foreground: ${base.darkFg};
   --border: ${base.darkBorder};
-  --input: ${base.darkBorder};
+  --input: ${base.darkInput};
   --ring: ${base.darkRing};
-  --radius: 0.5rem;
+  --chart-1: ${primary.charts.chart1};
+  --chart-2: ${primary.charts.chart2};
+  --chart-3: ${primary.charts.chart3};
+  --chart-4: ${primary.charts.chart4};
+  --chart-5: ${primary.charts.chart5};
+  --sidebar: ${base.darkSidebar};
+  --sidebar-foreground: ${base.darkFg};
+  --sidebar-primary: ${primary.dark};
+  --sidebar-primary-foreground: ${primary.darkFg};
+  --sidebar-accent: ${base.darkMuted};
+  --sidebar-accent-foreground: ${base.darkFg};
+  --sidebar-border: ${base.darkSidebarBorder};
+  --sidebar-ring: ${base.darkRing};
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.625rem;
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 }
 
 @layer base {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/cli",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "description": "Command line interface for Nikala UI",
   "type": "module",
   "main": "./dist/index.js",