rippleui-cli 0.1.2 → 0.1.3

package/README.md

@@ -1,5 +1,6 @@
 # ripple-ui
-A shadcn/ui inspired component library for Ripple TS.
+
+A [shadcn/ui](https://github.com/shadcn-ui/ui) inspired component library for [Ripple TS](https://github.com/Ripple-TS/ripple).
 
 ## Getting started
 
@@ -41,17 +42,20 @@ npx rippleui-cli installed
 - button
 - checkbox
 - input
+- select
 - label
 - utils
 
 ## Theming
 
 ### Base colors:
+
 - stone
 - zinc
 - slate
 
 ### Accent themes:
+
 - neutral
 - blue
 - violet
@@ -61,6 +65,7 @@ npx rippleui-cli installed
 ## components.json
 
 Generated during initialization:
+
 ```json
 {
   "aliases": {

package/dist/cli.js

@@ -4,6 +4,17 @@ import { add } from "./commands/add.js";
 import { init } from "./commands/init.js";
 import { installed } from "./commands/installed.js";
 import { list } from "./commands/list.js";
+process.on("unhandledRejection", (reason) => {
+    const msg = reason instanceof Error ? reason.message : String(reason ?? "Unkown error");
+    console.error(`✖  Unexpected error: ${msg}`);
+    console.error("   If this keeps happening, please open an issue at https://github.com/radeqq007/ripple-ui/issues");
+    process.exit(1);
+});
+process.on("uncaughtException", (err) => {
+    console.error(`✖  Unexpected error: ${err.message}`);
+    console.error("   If this keeps happening, please open an issue at https://github.com/radeqq007/ripple-ui/issues");
+    process.exit(1);
+});
 const program = new Command();
 program
     .command("add <component>")

package/dist/commands/add.js

@@ -1,4 +1,5 @@
 import { readConfig, requireConfig, writeConfig } from "../lib/config.js";
+import { die } from "../lib/errors.js";
 import { installEntry } from "../lib/install.js";
 import { fetchRegistry } from "../lib/registry.js";
 export const add = async (component) => {
@@ -9,9 +10,8 @@ export const add = async (component) => {
     }
     requireConfig(config);
     const registry = await fetchRegistry();
-    if (!registry[component]) {
-        console.error(`Component "${component}" not found.`);
-        process.exit(1);
+    if (!registry[component] || component.startsWith("$")) {
+        die(`Component "${component}" not found in the registry.`, `use 'npx rippleui-cli list' to see aviable components.`);
     }
     const alreadyInstalled = new Set(config.installed);
     // component + its dependencies
@@ -28,7 +28,7 @@ export const add = async (component) => {
     }
     collectDeps(component);
     if (toInstall.size === 0) {
-        console.log(`"${component}" is already installed.`);
+        console.log(`✔  "${component}" is already installed.`);
         return;
     }
     console.log(`Installing: ${[...toInstall].join(", ")}\n`);

package/dist/commands/init.js

@@ -1,63 +1,66 @@
-import fs from 'fs/promises';
-import path from 'path';
-import prompts from 'prompts';
-import { updateCss } from '../lib/css.js';
-import { detectCssFile, detectImportAlias, detectTailwind, } from '../lib/detect.js';
-import { installNpmDeps } from '../lib/install.js';
-import { accentThemes, bases } from '../lib/themes.js';
+import fs from "node:fs/promises";
+import path from "node:path";
+import prompts from "prompts";
+import { updateCss } from "../lib/css.js";
+import { detectCssFile, detectImportAlias, detectTailwind, } from "../lib/detect.js";
+import { die, formatError } from "../lib/errors.js";
+import { installNpmDeps } from "../lib/install.js";
+import { accentThemes, bases } from "../lib/themes.js";
 export const init = async () => {
     const cwd = process.cwd();
     try {
         await fs.access(`${cwd}/components.json`);
-        console.log('✔  components.json already exists. Skipping initialization.');
+        console.log("✔  components.json already exists. Skipping initialization.");
         process.exit(1);
     }
     catch { }
     if (await detectTailwind(cwd)) {
-        console.log('✔  Validating tailwindcss.');
+        console.log("✔  Validating tailwindcss.");
     }
     else {
-        console.error('✖  Tailwind CSS not detected. Please install it first: https://tailwindcss.com/docs/installation');
-        process.exit(1);
+        die("Tailwind CSS not found in your project dependencies.", "Install it first: https://tailwindcss.com/docs/installation");
     }
     let mainCssFile = await detectCssFile(cwd);
-    if (mainCssFile === null) {
-        console.log('Could not find the main CSS file.');
+    if (!mainCssFile) {
+        console.log("Could not find the main CSS file.");
         const response = await prompts([
             {
-                type: 'text',
-                name: 'mainCssFile',
-                message: 'Where is your main CSS file?',
-                initial: 'src/index.css',
+                type: "text",
+                name: "mainCssFile",
+                message: "Where is your main CSS file?",
+                initial: "src/index.css",
             },
         ]);
         mainCssFile = response.mainCssFile;
     }
+    if (!mainCssFile) {
+        die("A valid CSS file path is required to continue.", "Re-run init and provide the path to your main CSS file.");
+    }
     const detectedAlias = await detectImportAlias(cwd);
     console.log(`✔  Validating import alias. Found "${detectedAlias}".`);
-    const baseChoices = Object.keys(bases).map(name => ({
+    const baseChoices = Object.keys(bases).map((name) => ({
         title: name.charAt(0).toUpperCase() + name.slice(1),
         value: name,
     }));
-    const accentChoices = Object.keys(accentThemes).map(name => ({
+    const accentChoices = Object.keys(accentThemes).map((name) => ({
         title: name.charAt(0).toUpperCase() + name.slice(1),
         value: name,
     }));
     const { base, accent } = await prompts([
         {
-            type: 'select',
-            name: 'base',
-            message: 'Select a base color (neutral scale for backgrounds, borders, muted tones):',
+            type: "select",
+            name: "base",
+            message: "Select a base color (neutral scale for backgrounds, borders, muted tones):",
             choices: baseChoices,
         },
         {
-            type: 'select',
-            name: 'accent',
-            message: 'Select an accent theme (primary/brand color and border radius):',
+            type: "select",
+            name: "accent",
+            message: "Select an accent theme (primary/brand color and border radius):",
             choices: accentChoices,
         },
     ]);
-    console.log('✔  Writing components.json.');
+    console.log("✔  Writing components.json.");
     const config = {
         aliases: {
             components: `${detectedAlias}/components`,
@@ -66,13 +69,18 @@ export const init = async () => {
         css: mainCssFile,
         installed: [],
         // TODO: maybe detect those instead of hardcoding the directories
-        componentsDir: 'src/components',
-        utilsDir: 'src/utils',
+        componentsDir: "src/components",
+        utilsDir: "src/utils",
     };
-    await fs.writeFile('components.json', JSON.stringify(config, null, 2) + '\n');
+    try {
+        await fs.writeFile("components.json", `${JSON.stringify(config, null, 2)}\n`);
+    }
+    catch (e) {
+        die(`Could not write components.json: ${formatError(e)}`, "Make sure you have write permission in the current directory.");
+    }
     await updateCss(path.join(cwd, mainCssFile), base, accent);
     console.log(`✔  Updating ${mainCssFile}`);
-    console.log('\tInstalling dependencies...');
-    await installNpmDeps(['@fontsource-variable/geist', 'tw-animate-css'], cwd);
-    console.log('Done.');
+    console.log("\tInstalling dependencies...");
+    await installNpmDeps(["@fontsource-variable/geist", "tw-animate-css"], cwd);
+    console.log("Done.");
 };

package/dist/commands/installed.js

@@ -1,9 +1,9 @@
 import { readConfig } from "../lib/config.js";
+import { die } from "../lib/errors.js";
 export const installed = async () => {
     const config = await readConfig();
     if (!config) {
-        console.error("Could not read the components.json file.");
-        process.exit(1);
+        die("No components.json found.", 'Run "npx rippleui-cli init" first to set up your project.');
     }
     if (config.installed.length === 0) {
         console.log("No components installed yet.");

package/dist/commands/list.js

@@ -1,7 +1,7 @@
 import { fetchRegistry } from "../lib/registry.js";
 export const list = async () => {
     const registry = await fetchRegistry();
-    const names = Object.keys(registry);
+    const names = Object.keys(registry).filter((k) => !k.startsWith("$"));
     console.log("Available components:");
     for (const name of names) {
         console.log(`  ${name}`);

package/dist/lib/config.js

@@ -1,15 +1,24 @@
-import fs from "fs/promises";
-import path from "path";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { die, formatError } from "./errors.js";
 const configPath = path.resolve(process.cwd(), "components.json");
 export const readConfig = async () => {
+    let raw;
+    try {
+        raw = await fs.readFile(configPath, "utf-8");
+    }
+    catch (e) {
+        die(`Could not read components.json: ${formatError(e)}`);
+    }
     try {
-        const raw = await fs.readFile(configPath, "utf-8");
         return JSON.parse(raw);
     }
-    catch { }
+    catch {
+        die("components.json contains invalid JSON.", `Fix or delete ${configPath} and run "rippleui-cli init" again.`);
+    }
 };
 export const writeConfig = async (config) => {
-    await fs.writeFile(configPath, JSON.stringify(config, null, 2) + "\n");
+    await fs.writeFile(configPath, `${JSON.stringify(config, null, 2)}\n`);
 };
 export const requireConfig = (config) => {
     if (!config) {

package/dist/lib/css.js

@@ -1,18 +1,32 @@
-import fs from 'fs/promises';
-import { accentThemes, bases } from './themes.js';
+import fs from "node:fs/promises";
+import { die } from "./errors.js";
+import { accentThemes, bases } from "./themes.js";
 export const updateCss = async (cssPath, baseName, accentName) => {
-    const marker = '/* Ripple UI Theme */';
-    let existingContent = '';
+    const marker = "/* Ripple UI Theme */";
+    let existingContent = "";
     try {
-        existingContent = await fs.readFile(cssPath, 'utf-8');
+        existingContent = await fs.readFile(cssPath, "utf-8");
+    }
+    catch {
+        die(`Could not read CSS file: ${cssPath}`, `Check that the file exists and is readable.`);
     }
-    catch { }
     const markerIdx = existingContent.indexOf(marker);
     const userContent = markerIdx !== -1
         ? existingContent.slice(0, markerIdx).trimEnd()
         : existingContent.trimEnd();
     const b = bases[baseName];
+    if (!b)
+        die(`Unknown base color: ${baseName}`);
     const a = accentThemes[accentName];
+    if (!a)
+        die(`Unkown accent theme: ${accentName}`);
+    // Typescript doesn't detect the never type in die()
+    // Those checks are always false
+    // They are here just to make typescript shut up
+    if (!a)
+        return;
+    if (!b)
+        return;
     const content = `/* Ripple UI Theme */
 @import "tw-animate-css";
 @import "@fontsource-variable/geist";
@@ -145,5 +159,10 @@ export const updateCss = async (cssPath, baseName, accentName) => {
     const newContent = userContent
         ? `${userContent}\n\n${content}\n`
         : `${content}\n`;
-    await fs.writeFile(cssPath, newContent);
+    try {
+        await fs.writeFile(cssPath, newContent);
+    }
+    catch (e) {
+        die(`Could not write into ${cssPath}: ${e.message}`);
+    }
 };

package/dist/lib/detect.js

@@ -1,5 +1,6 @@
-import fs from "fs/promises";
-import path from "path";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { die, formatError } from "./errors.js";
 export const detectPackageManager = async (cwd) => {
     try {
         const raw = await fs.readFile(path.join(cwd, "package.json"), "utf-8");
@@ -13,8 +14,14 @@ export const detectPackageManager = async (cwd) => {
     return "npm";
 };
 export const detectTailwind = async (cwd) => {
+    let raw;
+    try {
+        raw = await fs.readFile(path.join(cwd, "package.json"), "utf-8");
+    }
+    catch (e) {
+        die(`Could not read package.json: ${formatError(e)}`);
+    }
     try {
-        const raw = await fs.readFile(path.join(cwd, "package.json"), "utf-8");
         const pkg = JSON.parse(raw);
         const deps = {
             ...pkg.dependencies,
@@ -22,7 +29,8 @@ export const detectTailwind = async (cwd) => {
         };
         return "tailwindcss" in deps;
     }
-    catch (e) {
+    catch {
+        die("package.json contains invalid JSON.", "Fix your package.json and try again.");
         return false;
     }
 };
@@ -67,13 +75,21 @@ export const detectImportAlias = async (cwd) => {
     // Fall back to tsconfig.json
     try {
         const raw = await fs.readFile(path.join(cwd, "tsconfig.json"), "utf-8");
-        const tsconfig = JSON.parse(raw);
+        let tsconfig;
+        try {
+            tsconfig = JSON.parse(raw);
+        }
+        catch {
+            die("tsconfig.json contains invalid JSON.", "Fix your tsconfig.json and try again.");
+        }
         const paths = tsconfig.compilerOptions?.paths ?? {};
         for (const alias of Object.keys(paths)) {
             return alias.replace(/\/\*$/, "");
         }
     }
-    catch { }
+    catch (e) {
+        die(`Could not read tsconfig.json: ${formatError(e)}`);
+    }
     console.error("No import alias found.");
     process.exit(1);
 };

package/dist/lib/errors.js

@@ -0,0 +1,26 @@
+export const die = (msg, hint) => {
+    console.error(`✖  ${msg}`);
+    if (hint)
+        console.error(`   ${hint}`);
+    return process.exit(1);
+};
+export const warn = (msg) => {
+    console.warn(`⚠  ${msg}`);
+};
+export const isNetworkError = (err) => {
+    if (!(err instanceof Error))
+        return false;
+    return (err.message.includes("fetch") ||
+        err.message.includes("ENOTFOUND") ||
+        err.message.includes("ECONNREFUSED") ||
+        err.message.includes("ETIMEDOUT") ||
+        err.message.includes("network") ||
+        err.message.toLowerCase().includes("failed to fetch"));
+};
+export const formatError = (err) => {
+    if (err instanceof Error)
+        return err.message;
+    if (typeof err === "string")
+        return err;
+    return "An unknown error occurred";
+};

package/dist/lib/install.js

@@ -1,7 +1,8 @@
-import { execSync } from "child_process";
-import fs from "fs/promises";
-import path from "path";
+import { execSync } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
 import { detectPackageManager } from "./detect.js";
+import { die } from "./errors.js";
 import { fetchFile, fetchRegistry } from "./registry.js";
 export const resolveTargetDir = (name, entry, config) => {
     // utils
@@ -15,7 +16,12 @@ export async function installNpmDeps(packages, cwd) {
     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" });
+    try {
+        execSync(`${cmd} ${packages.join(" ")}`, { cwd, stdio: "inherit" });
+    }
+    catch {
+        die(`Failed to install npm packages: ${packages.join(", ")}`, `Try running "${cmd} ${packages.join(" ")}" manually, then re-run this command.`);
+    }
 }
 export const installEntry = async (name, config, installed = new Set(), npmDeps = new Set()) => {
     if (installed.has(name))
@@ -24,7 +30,7 @@ export const installEntry = async (name, config, installed = new Set(), npmDeps
     const registry = await fetchRegistry();
     const entry = registry[name];
     if (!entry)
-        throw new Error(`"${name}" not found in registry`);
+        die(`"${name}" not found in registry`, 'Run "rippleui-cli list" to see all available components.');
     for (const pkg of entry.npmDependencies ?? []) {
         npmDeps.add(pkg);
     }
@@ -33,12 +39,22 @@ export const installEntry = async (name, config, installed = new Set(), npmDeps
     }
     const targetDir = resolveTargetDir(name, entry, config);
     const targetPath = path.resolve(process.cwd(), targetDir);
-    await fs.mkdir(targetPath, { recursive: true });
+    try {
+        await fs.mkdir(targetPath, { recursive: true });
+    }
+    catch {
+        die(`Could not create directory: ${targetPath}`, `Check that you have write permission here: ${path.dirname(targetPath)}`);
+    }
     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);
+        try {
+            await fs.writeFile(dest, content);
+        }
+        catch {
+            die(`Could not write file: ${dest}`, `Check that you have write permission in: ${targetPath}`);
+        }
     }));
     console.log(`✔  Installed: ${name} → ${targetPath}`);
     if (npmDeps.size > 0) {

package/dist/lib/registry.js

@@ -1,15 +1,59 @@
+import { die, formatError, isNetworkError } from "./errors.js";
 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();
+    let res;
+    try {
+        res = await fetch(REGISTRY_URL);
+    }
+    catch (e) {
+        if (isNetworkError(e)) {
+            die("Could not reach the ripple-ui registry.", "Check your internet connection and try again.");
+        }
+        die(`Failed to fetch registry: ${formatError(e)}`);
+    }
+    if (!res.ok) {
+        if (res.status === 404)
+            die("Registry not found (404).", "The registry URL may have changed. Please update rippleui-cli.");
+        if (res.status >= 500)
+            die(`Registry server error (${res.status}).`, "GitHub may be experiencing issues. Try again in a moment.");
+        die(`Failed to fetch registry: HTTP ${res.status} ${res.statusText}`);
+    }
+    try {
+        return res.json();
+    }
+    catch {
+        die("Registry response was not valid JSON.", "This may be a temporary issue - please try again.");
+        process.exit(1);
+    }
 };
-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();
+export const fetchFile = async (filePath) => {
+    const url = `${GITHUB_RAW}/${filePath}`;
+    let res;
+    try {
+        res = await fetch(url);
+    }
+    catch (e) {
+        if (isNetworkError(e)) {
+            die("Lost connection while downloading component files.", "Check your internet connection and try again.");
+        }
+        die(`Failed to fetch file "${filePath}": ${formatError(e)}`);
+    }
+    // Typescript doesn't detect the never type from die()
+    // This check is always false, it's there to make typescript shut up
+    if (!res)
+        process.exit(1);
+    if (!res.ok) {
+        if (res.status === 404) {
+            die(`Component file not found: ${filePath}`, "The registry may be out of sync. Try updating rippleui-cli.");
+        }
+        die(`Failed to fetch file "${filePath}": HTTP ${res.status} ${res.statusText}`);
+    }
+    try {
+        return await res.text();
+    }
+    catch (err) {
+        die(`Failed to read file content for "${filePath}": ${formatError(err)}`);
+        process.exit(1);
+    }
 };

package/dist/lib/themes.js

@@ -2,329 +2,329 @@
 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)',
+            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)',
+                "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)',
+                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)',
+            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)',
+                "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)',
+                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)' },
+            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)',
+                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)',
+                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)',
+                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)',
+            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)',
+                "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)',
+                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)',
+                    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)',
+                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)',
+            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)',
+                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)',
+                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)',
+                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)',
+                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)',
+                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)',
+            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)',
+                "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)',
+                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)',
+                    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)',
+                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)' },
+            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)',
+                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)',
+                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)',
+                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)',
+            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)',
+                "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)',
+                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)',
+                    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)',
+                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)',
+            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)',
+                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)',
+                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)',
+                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)',
+                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)',
+                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)',
+            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)',
+                "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)',
+                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)',
+                    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)',
+                border: "oklch(1 0 0 / 10%)",
+                ring: "oklch(0.554 0.046 257.417)",
             },
         },
     },
 };
 export const accentThemes = {
     neutral: {
-        radius: '0.625rem',
+        radius: "0.625rem",
         root: {
-            primary: { bg: 'oklch(0.205 0 0)', fg: 'oklch(0.986 0 0)' },
+            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)' },
+                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)' },
+            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)' },
+                primary: { bg: "oklch(0.488 0.243 264.376)", fg: "oklch(0.985 0 0)" },
             },
         },
     },
     blue: {
-        radius: '0.5rem',
+        radius: "0.5rem",
         root: {
-            primary: { bg: 'oklch(0.546 0.245 262.881)', fg: 'oklch(0.985 0 0)' },
+            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)',
+                    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)' },
+            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)',
+                    bg: "oklch(0.623 0.214 259.815)",
+                    fg: "oklch(0.985 0 0)",
                 },
             },
         },
     },
     violet: {
-        radius: '0.75rem',
+        radius: "0.75rem",
         root: {
-            primary: { bg: 'oklch(0.541 0.281 293.009)', fg: 'oklch(0.985 0 0)' },
+            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)',
+                    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)' },
+            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)',
+                    bg: "oklch(0.606 0.25 292.717)",
+                    fg: "oklch(0.985 0 0)",
                 },
             },
         },
     },
     rose: {
-        radius: '0.5rem',
+        radius: "0.5rem",
         root: {
-            primary: { bg: 'oklch(0.586 0.253 17.585)', fg: 'oklch(0.985 0 0)' },
+            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)',
+                    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)' },
+            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)',
+                    bg: "oklch(0.645 0.246 16.439)",
+                    fg: "oklch(0.985 0 0)",
                 },
             },
         },
     },
     orange: {
-        radius: '0.625rem',
+        radius: "0.625rem",
         root: {
-            primary: { bg: 'oklch(0.646 0.222 41.116)', fg: 'oklch(0.985 0 0)' },
+            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)',
+                    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)' },
+            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)',
+                    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.2",
+	"version": "0.1.3",
 	"description": "shadcn/ui inspired components library for Ripple TS",
 	"type": "module",
 	"scripts": {
@@ -8,7 +8,7 @@
 		"watch": "tsc --watch",
 		"lint": "biome check .",
 		"format": "biome format . --write",
-		"check": "biome check . --all",
+		"check": "biome check .",
 		"prepublishOnly": "npm run build"
 	},
 	"bin": {
@@ -25,7 +25,7 @@
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/radeqq007/ripple-ui.git"
+		"url": "git+https://github.com/radeqq007/ripple-ui.git"
 	},
 	"homepage": "https://github.com/radeqq007/ripple-ui#readme",
 	"bugs": {

package/registry.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://raw.githubusercontent.com/radeqq007/ripple-ui/main/registry.schema.json",
 	"button": {
 		"files": ["Button.ripple"],
 		"path": "components/button",
@@ -17,7 +18,13 @@
 	},
 	"checkbox": {
 		"files": ["Checkbox.ripple"],
-		"path":"components/checkbox",
+		"path": "components/checkbox",
+		"dependencies": ["utils"],
+		"npmDependencies": ["lucide-ripple", "ark-ripple"]
+	},
+	"select": {
+		"files": ["Select.ripple"],
+		"path": "components/select",
 		"dependencies": ["utils"],
 		"npmDependencies": ["lucide-ripple", "ark-ripple"]
 	},

package/registry.schema.json

@@ -0,0 +1,29 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema#",
+	"type": "object",
+	"properties": {
+		"$schema": { "type": "string" }
+	},
+	"additionalProperties": {
+		"type": "object",
+		"required": ["files", "path"],
+		"properties": {
+			"files": {
+				"type": "array",
+				"items": { "type": "string" },
+				"minItems": 1
+			},
+			"path": { "type": "string" },
+			"dependencies": {
+				"type": "array",
+				"items": { "type": "string" }
+			},
+			"npmDependencies": {
+				"type": "array",
+				"items": { "type": "string" }
+			},
+			"target": { "type": "string" }
+		},
+		"additionalProperties": false
+	}
+}