rippleui-cli 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,75 @@
+# ripple-ui
+A shadcn/ui inspired component library for Ripple TS.
+
+## Getting started
+
+### 1. Initialize
+
+```sh
+npx rippleui-cli init
+```
+
+This will:
+
+- Detect your tailwind setup and import alias defined in the vite configuration
+- Ask you to chose a base color and an accent theme
+- Write a `components.json` config file
+- Inject CSS variables and theme tokens into your main CSS file
+
+### 2. Add components
+
+```sh
+npx rippleui-cli add <component name>
+```
+
+Components and their dependencies are copied into your src/components/ directory.
+
+### 3. Browse available components
+
+```sh
+npx rippleui-cli list
+```
+
+### 4. See what's installed
+
+```sh
+npx rippleui-cli installed
+```
+
+## Aviable components
+
+- button
+- checkbox
+- input
+- label
+- utils
+
+## Theming
+
+### Base colors:
+- stone
+- zinc
+- slate
+
+### Accent themes:
+- neutral
+- blue
+- violet
+- rose
+- orange
+
+## components.json
+
+Generated during initalization:
+```json
+{
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils"
+  },
+  "css": "src/index.css",
+  "installed": [],
+  "componentsDir": "src/components",
+  "utilsDir": "src/utils"
+}
+```

package/dist/cli.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { add } from "./commands/add.js";
+import { init } from "./commands/init.js";
+import { installed } from "./commands/installed.js";
+import { list } from "./commands/list.js";
+const program = new Command();
+program
+    .command("add <component>")
+    .description("Add a Ripple UI component")
+    .action(add);
+program.command("list").description("List available components").action(list);
+program
+    .command("installed")
+    .description("List installed components")
+    .action(installed);
+program.command("init").description("Creates components.json").action(init);
+program.parse(process.argv);

package/dist/commands/add.js

@@ -0,0 +1,40 @@
+import { readConfig, requireConfig, writeConfig } from "../lib/config.js";
+import { installEntry } from "../lib/install.js";
+import { fetchRegistry } from "../lib/registry.js";
+export const add = async (component) => {
+    const config = await readConfig();
+    if (!config) {
+        console.error("Error reading the config.");
+        process.exit(1);
+    }
+    requireConfig(config);
+    const registry = await fetchRegistry();
+    if (!registry[component]) {
+        console.error(`Component "${component}" not found.`);
+        process.exit(1);
+    }
+    const alreadyInstalled = new Set(config.installed);
+    // component + its dependencies
+    const toInstall = new Set();
+    function collectDeps(name) {
+        if (alreadyInstalled.has(name))
+            return;
+        if (toInstall.has(name))
+            return;
+        toInstall.add(name);
+        for (const dep of registry[name]?.dependencies ?? []) {
+            collectDeps(dep);
+        }
+    }
+    collectDeps(component);
+    if (toInstall.size === 0) {
+        console.log(`"${component}" is already installed.`);
+        return;
+    }
+    console.log(`Installing: ${[...toInstall].join(", ")}\n`);
+    const npmDeps = new Set();
+    await installEntry(component, config, alreadyInstalled, npmDeps);
+    config.installed = [...new Set([...config.installed, ...toInstall])];
+    await writeConfig(config);
+    console.log(`\nDone.`);
+};

package/dist/commands/init.js

@@ -0,0 +1,78 @@
+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';
+export const init = async () => {
+    const cwd = process.cwd();
+    try {
+        await fs.access(`${cwd}/components.json`);
+        console.log('✔  components.json already exists. Skipping initialization.');
+        process.exit(1);
+    }
+    catch { }
+    if (await detectTailwind(cwd)) {
+        console.log('✔  Validating tailwindcss.');
+    }
+    else {
+        console.error('✖  Tailwind CSS not detected. Please install it first: https://tailwindcss.com/docs/installation');
+        process.exit(1);
+    }
+    let mainCssFile = await detectCssFile(cwd);
+    if (mainCssFile === null) {
+        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',
+            },
+        ]);
+        mainCssFile = response.mainCssFile;
+    }
+    const detectedAlias = await detectImportAlias(cwd);
+    console.log(`✔  Validating import alias. Found "${detectedAlias}".`);
+    const baseChoices = Object.keys(bases).map(name => ({
+        title: name.charAt(0).toUpperCase() + name.slice(1),
+        value: 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):',
+            choices: baseChoices,
+        },
+        {
+            type: 'select',
+            name: 'accent',
+            message: 'Select an accent theme (primary/brand color and border radius):',
+            choices: accentChoices,
+        },
+    ]);
+    console.log('✔  Writing components.json.');
+    const config = {
+        aliases: {
+            components: `${detectedAlias}/components`,
+            utils: `${detectedAlias}/utils`,
+        },
+        css: mainCssFile,
+        installed: [],
+        // TODO: maybe detect those instead of hardcoding the directories
+        componentsDir: 'src/components',
+        utilsDir: 'src/utils',
+    };
+    await fs.writeFile('components.json', JSON.stringify(config, null, 2) + '\n');
+    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.');
+};

package/dist/commands/installed.js

@@ -0,0 +1,17 @@
+import { readConfig } from "../lib/config.js";
+export const installed = async () => {
+    const config = await readConfig();
+    if (!config) {
+        console.error("Could not read the components.json file.");
+        process.exit(1);
+    }
+    if (config.installed.length === 0) {
+        console.log("No components installed yet.");
+    }
+    else {
+        console.log("Installed:\n");
+        for (const name of config.installed) {
+            console.log(`  ✔ ${name}`);
+        }
+    }
+};

package/dist/commands/list.js

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

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "rippleui-cli",
+	"version": "0.1.0",
+	"description": "shadcn/ui inspired components library for Ripple TS",
+	"type": "module",
+	"scripts": {
+		"build": "tsc",
+		"watch": "tsc --watch",
+		"lint": "biome check .",
+		"format": "biome format . --write",
+		"check": "biome check . --all",
+		"prepublishOnly": "npm run build"
+	},
+	"bin": {
+		"rippleui-cli": "dist/cli.js"
+	},
+	"keywords": [
+		"ripple",
+		"ui",
+		"components",
+		"tailwindcss",
+		"shadcn"
+	],
+	"author": "Radosław Kaczmarczyk",
+	"license": "MIT",
+	"repository": {
+    "type": "git",
+    "url": "https://github.com/radeqq007/ripple-ui.git"
+  },
+  "homepage": "https://github.com/radeqq007/ripple-ui#readme",
+  "bugs": {
+    "url": "https://github.com/radeqq007/ripple-ui/issues"
+  },
+	"engines": {
+		"node": ">=18"
+	},
+	"packageManager": "pnpm@10.32.1",
+	"dependencies": {
+		"commander": "^14.0.3",
+		"fs-extra": "^11.3.4",
+		"prompts": "^2.4.2"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.4.10",
+		"@types/node": "^25.5.0",
+		"@types/prompts": "^2.4.9",
+		"ark-ripple": "^0.0.4",
+		"clsx": "^2.1.1",
+		"lucide-ripple": "^0.0.7",
+		"tailwind-merge": "^3.0.0",
+		"tsx": "^4.21.0",
+		"typescript": "^6.0.2"
+	},
+	"peerDependencies": {
+		"clsx": ">=2",
+		"tailwind-merge": ">=3"
+	}
+}

package/registry.json

@@ -0,0 +1,30 @@
+{
+	"button": {
+		"files": ["Button.ripple"],
+		"path": "components/button",
+		"dependencies": ["utils"],
+		"npmDependencies": ["class-variance-authority"]
+	},
+	"label": {
+		"files": ["Label.ripple"],
+		"path": "components/label",
+		"dependencies": ["utils"]
+	},
+	"input": {
+		"files": ["Input.ripple"],
+		"path": "components/input",
+		"dependencies": ["utils"]
+	},
+	"checkbox": {
+		"files": ["Checkbox.ripple"],
+		"path":"components/checkbox",
+		"dependencies": ["utils"],
+		"npmDependencies": ["lucide-ripple", "ark-ripple"]
+	},
+	"utils": {
+		"files": ["utils.ts"],
+		"path": "lib/",
+		"target": "src/lib",
+		"npmDependencies": ["clsx", "tailwind-merge"]
+	}
+}