@srcroot/ui 0.0.1

package/dist/index.js

@@ -0,0 +1,640 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { Command } from "commander";
+
+// src/cli/commands/init.ts
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+import { fileURLToPath } from "url";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var UTILS_CONTENT = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+var CSS_VARIABLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
+var TAILWIND_CONFIG = `import type { Config } from "tailwindcss"
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config
+`;
+async function init(options) {
+  const cwd = path.resolve(options.cwd);
+  console.log(chalk.cyan("\n\u{1F680} Initializing srcroot-ui...\n"));
+  const packageJsonPath = path.join(cwd, "package.json");
+  if (!fs.existsSync(packageJsonPath)) {
+    console.log(chalk.red("Error: No package.json found. Please run this in a project directory."));
+    process.exit(1);
+  }
+  const srcDir = path.join(cwd, "src");
+  const appDir = path.join(cwd, "app");
+  const isAppRouter = fs.existsSync(appDir);
+  const libDir = path.join(srcDir, "lib");
+  const componentsDir = path.join(srcDir, "components", "ui");
+  const globalsPath = isAppRouter ? path.join(appDir, "globals.css") : path.join(srcDir, "styles", "globals.css");
+  if (!options.yes) {
+    const response = await prompts([
+      {
+        type: "confirm",
+        name: "proceed",
+        message: `This will create files in ${chalk.cyan(cwd)}. Continue?`,
+        initial: true
+      }
+    ]);
+    if (!response.proceed) {
+      console.log(chalk.yellow("Cancelled."));
+      process.exit(0);
+    }
+  }
+  const spinner = ora("Creating project structure...").start();
+  try {
+    await fs.ensureDir(libDir);
+    await fs.ensureDir(componentsDir);
+    const utilsPath = path.join(libDir, "utils.ts");
+    await fs.writeFile(utilsPath, UTILS_CONTENT);
+    spinner.succeed(`Created ${chalk.cyan("src/lib/utils.ts")}`);
+    spinner.start("Setting up CSS variables...");
+    const stylesDir = path.dirname(globalsPath);
+    await fs.ensureDir(stylesDir);
+    if (fs.existsSync(globalsPath)) {
+      const existingCss = await fs.readFile(globalsPath, "utf-8");
+      if (!existingCss.includes("--background:")) {
+        await fs.writeFile(globalsPath, CSS_VARIABLES + "\n" + existingCss);
+        spinner.succeed(`Updated ${chalk.cyan(path.relative(cwd, globalsPath))}`);
+      } else {
+        spinner.info(`CSS variables already exist in ${chalk.cyan(path.relative(cwd, globalsPath))}`);
+      }
+    } else {
+      await fs.writeFile(globalsPath, CSS_VARIABLES);
+      spinner.succeed(`Created ${chalk.cyan(path.relative(cwd, globalsPath))}`);
+    }
+    spinner.start("Setting up Tailwind config...");
+    const tailwindConfigPath = path.join(cwd, "tailwind.config.ts");
+    if (!fs.existsSync(tailwindConfigPath)) {
+      await fs.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+      spinner.succeed(`Created ${chalk.cyan("tailwind.config.ts")}`);
+    } else {
+      spinner.info(`${chalk.cyan("tailwind.config.ts")} already exists, skipping`);
+    }
+    spinner.start("Checking dependencies...");
+    const pkg = await fs.readJson(packageJsonPath);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const missing = [];
+    const requiredDeps = ["clsx", "tailwind-merge", "class-variance-authority", "lucide-react"];
+    for (const dep of requiredDeps) {
+      if (!deps[dep]) {
+        missing.push(dep);
+      }
+    }
+    if (missing.length > 0) {
+      spinner.stop();
+      const { install } = await prompts({
+        type: "confirm",
+        name: "install",
+        message: `Missing dependencies: ${missing.join(", ")}. Install now?`,
+        initial: true
+      });
+      if (install) {
+        spinner.start(`Installing dependencies...`);
+        import("child_process").then(({ execSync }) => {
+          execSync(`npm install ${missing.join(" ")}`, { stdio: "ignore", cwd });
+          spinner.succeed("Dependencies installed");
+        }).catch(() => {
+          spinner.fail("Failed to install dependencies automatically.");
+          console.log(chalk.dim(`
+Please manually run: npm install ${missing.join(" ")}
+`));
+        });
+      } else {
+        console.log(chalk.dim(`
+Please manually run: npm install ${missing.join(" ")}
+`));
+      }
+    } else {
+      spinner.succeed("All dependencies installed");
+    }
+    console.log(chalk.green("\n\u2705 Project initialized successfully!\n"));
+    console.log("Next steps:");
+    console.log(chalk.dim("  1. Install missing dependencies (if any)"));
+    console.log(chalk.dim("  2. Run: npx srcroot-ui add button"));
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to initialize project");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// src/cli/commands/add.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import chalk2 from "chalk";
+import ora2 from "ora";
+import prompts2 from "prompts";
+import { fileURLToPath as fileURLToPath2 } from "url";
+
+// src/cli/registry.ts
+var REGISTRY = {
+  // Core
+  button: {
+    file: "button.tsx",
+    description: "Polymorphic button with variants",
+    category: "Core",
+    dependencies: []
+  },
+  badge: {
+    file: "badge.tsx",
+    description: "Status indicator",
+    category: "Core",
+    dependencies: []
+  },
+  avatar: {
+    file: "avatar.tsx",
+    description: "User avatar with fallback",
+    category: "Core",
+    dependencies: []
+  },
+  separator: {
+    file: "separator.tsx",
+    description: "Visual divider",
+    category: "Core",
+    dependencies: []
+  },
+  // Typography
+  text: {
+    file: "text.tsx",
+    description: "Polymorphic typography",
+    category: "Typography",
+    dependencies: []
+  },
+  label: {
+    file: "label.tsx",
+    description: "Form label",
+    category: "Typography",
+    dependencies: []
+  },
+  // Forms
+  input: {
+    file: "input.tsx",
+    description: "Text input field",
+    category: "Forms",
+    dependencies: []
+  },
+  textarea: {
+    file: "textarea.tsx",
+    description: "Multi-line text input",
+    category: "Forms",
+    dependencies: []
+  },
+  checkbox: {
+    file: "checkbox.tsx",
+    description: "Checkbox input",
+    category: "Forms",
+    dependencies: []
+  },
+  radio: {
+    file: "radio.tsx",
+    description: "Radio button group",
+    category: "Forms",
+    dependencies: []
+  },
+  switch: {
+    file: "switch.tsx",
+    description: "Toggle switch",
+    category: "Forms",
+    dependencies: []
+  },
+  slider: {
+    file: "slider.tsx",
+    description: "Range slider",
+    category: "Forms",
+    dependencies: []
+  },
+  select: {
+    file: "select.tsx",
+    description: "Custom select dropdown",
+    category: "Forms",
+    dependencies: []
+  },
+  // Layout
+  card: {
+    file: "card.tsx",
+    description: "Card container",
+    category: "Layout",
+    dependencies: []
+  },
+  container: {
+    file: "container.tsx",
+    description: "Max-width container",
+    category: "Layout",
+    dependencies: []
+  },
+  "aspect-ratio": {
+    file: "aspect-ratio.tsx",
+    description: "Maintain aspect ratio",
+    category: "Layout",
+    dependencies: []
+  },
+  // Data Display
+  accordion: {
+    file: "accordion.tsx",
+    description: "Expandable sections",
+    category: "Data Display",
+    dependencies: []
+  },
+  tabs: {
+    file: "tabs.tsx",
+    description: "Tab navigation",
+    category: "Data Display",
+    dependencies: []
+  },
+  table: {
+    file: "table.tsx",
+    description: "Data table",
+    category: "Data Display",
+    dependencies: []
+  },
+  progress: {
+    file: "progress.tsx",
+    description: "Progress indicator",
+    category: "Data Display",
+    dependencies: []
+  },
+  skeleton: {
+    file: "skeleton.tsx",
+    description: "Loading placeholder",
+    category: "Data Display",
+    dependencies: []
+  },
+  // Overlay / Feedback
+  dialog: {
+    file: "dialog.tsx",
+    description: "Modal dialog",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  "alert-dialog": {
+    file: "alert-dialog.tsx",
+    description: "Confirmation dialog",
+    category: "Overlay / Feedback",
+    dependencies: ["dialog"]
+  },
+  sheet: {
+    file: "sheet.tsx",
+    description: "Slide-in panel",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  popover: {
+    file: "popover.tsx",
+    description: "Floating content",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  tooltip: {
+    file: "tooltip.tsx",
+    description: "Hover tooltip",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  "dropdown-menu": {
+    file: "dropdown-menu.tsx",
+    description: "Action dropdown",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  toast: {
+    file: "toast.tsx",
+    description: "Notification toast",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  alert: {
+    file: "alert.tsx",
+    description: "Inline alert",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  // Navigation
+  breadcrumb: {
+    file: "breadcrumb.tsx",
+    description: "Breadcrumb navigation",
+    category: "Navigation",
+    dependencies: []
+  },
+  pagination: {
+    file: "pagination.tsx",
+    description: "Page navigation",
+    category: "Navigation",
+    dependencies: ["button"]
+  },
+  // New Components
+  "loading-spinner": {
+    file: "loading-spinner.tsx",
+    description: "Loading spinner with variants",
+    category: "Feedback",
+    dependencies: []
+  },
+  image: {
+    file: "image.tsx",
+    description: "Enhanced image with loading",
+    category: "Data Display",
+    dependencies: []
+  },
+  "button-group": {
+    file: "button-group.tsx",
+    description: "Group buttons together",
+    category: "Core",
+    dependencies: ["button"]
+  },
+  "otp-input": {
+    file: "otp-input.tsx",
+    description: "OTP verification input",
+    category: "Forms",
+    dependencies: []
+  },
+  search: {
+    file: "search.tsx",
+    description: "Search input with debounce",
+    category: "Forms",
+    dependencies: []
+  },
+  "star-rating": {
+    file: "star-rating.tsx",
+    description: "Star rating input",
+    category: "Feedback",
+    dependencies: []
+  },
+  collapsible: {
+    file: "collapsible.tsx",
+    description: "Expandable section",
+    category: "Data Display",
+    dependencies: []
+  },
+  carousel: {
+    file: "carousel.tsx",
+    description: "Image/content slider",
+    category: "Data Display",
+    dependencies: []
+  },
+  calendar: {
+    file: "calendar.tsx",
+    description: "Date picker",
+    category: "Forms",
+    dependencies: []
+  }
+};
+
+// src/cli/commands/add.ts
+var __dirname3 = path2.dirname(fileURLToPath2(import.meta.url));
+async function add(components, options) {
+  const cwd = path2.resolve(options.cwd);
+  if (options.all) {
+    components = Object.keys(REGISTRY);
+  }
+  if (components.length === 0) {
+    const { items } = await prompts2({
+      type: "multiselect",
+      name: "items",
+      message: "Which components would you like to add?",
+      hint: "Space to select. A to toggle all. Enter to submit.",
+      choices: Object.keys(REGISTRY).map((name) => ({
+        title: name,
+        value: name
+      }))
+    });
+    if (!items || items.length === 0) {
+      console.log(chalk2.yellow("No components selected."));
+      process.exit(0);
+    }
+    components = items;
+  }
+  const validComponents = [];
+  const invalidComponents = [];
+  for (const comp of components) {
+    if (comp in REGISTRY) {
+      validComponents.push(comp);
+    } else {
+      invalidComponents.push(comp);
+    }
+  }
+  if (invalidComponents.length > 0) {
+    console.log(chalk2.red(`Unknown components: ${invalidComponents.join(", ")}`));
+    console.log(chalk2.dim("\nRun 'srcroot-ui list' to see available components."));
+    process.exit(1);
+  }
+  const toInstall = /* @__PURE__ */ new Set();
+  function resolveDeps(name) {
+    if (toInstall.has(name)) return;
+    toInstall.add(name);
+    const comp = REGISTRY[name];
+    if (comp.dependencies) {
+      for (const dep of comp.dependencies) {
+        resolveDeps(dep);
+      }
+    }
+  }
+  for (const comp of validComponents) {
+    resolveDeps(comp);
+  }
+  const componentsToAdd = Array.from(toInstall);
+  console.log(chalk2.cyan("\n\u{1F4E6} Adding components:\n"));
+  componentsToAdd.forEach((name) => {
+    console.log(chalk2.dim(`  - ${name}`));
+  });
+  console.log();
+  if (!options.yes) {
+    const response = await prompts2({
+      type: "confirm",
+      name: "proceed",
+      message: "Continue?",
+      initial: true
+    });
+    if (!response.proceed) {
+      console.log(chalk2.yellow("Cancelled."));
+      process.exit(0);
+    }
+  }
+  const spinner = ora2("Adding components...").start();
+  const componentsDir = path2.join(cwd, "src", "components", "ui");
+  try {
+    await fs2.ensureDir(componentsDir);
+    for (const name of componentsToAdd) {
+      const comp = REGISTRY[name];
+      const targetPath = path2.join(componentsDir, comp.file);
+      if (fs2.existsSync(targetPath) && !options.overwrite) {
+        spinner.info(`${chalk2.cyan(comp.file)} already exists, skipping (use --overwrite to replace)`);
+        continue;
+      }
+      const registryPath = path2.resolve(__dirname3, "..", "..", "..", "registry", comp.file);
+      if (!fs2.existsSync(registryPath)) {
+        spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
+        continue;
+      }
+      const content = await fs2.readFile(registryPath, "utf-8");
+      await fs2.writeFile(targetPath, content);
+      spinner.succeed(`Added ${chalk2.cyan(comp.file)}`);
+    }
+    console.log(chalk2.green("\n\u2705 Components added successfully!\n"));
+  } catch (error) {
+    spinner.fail("Failed to add components");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// src/cli/commands/list.ts
+import chalk3 from "chalk";
+async function list() {
+  console.log(chalk3.cyan("\n\u{1F4E6} Available components:\n"));
+  const categories = {
+    "Core": [],
+    "Typography": [],
+    "Forms": [],
+    "Layout": [],
+    "Data Display": [],
+    "Overlay / Feedback": [],
+    "Navigation": []
+  };
+  for (const [name, comp] of Object.entries(REGISTRY)) {
+    if (categories[comp.category]) {
+      categories[comp.category].push(name);
+    }
+  }
+  for (const [category, components] of Object.entries(categories)) {
+    if (components.length === 0) continue;
+    console.log(chalk3.bold.white(`  ${category}`));
+    components.forEach((name) => {
+      const comp = REGISTRY[name];
+      console.log(chalk3.dim(`    - ${name}`) + chalk3.gray(` (${comp.description})`));
+    });
+    console.log();
+  }
+  console.log(chalk3.dim("Usage: npx srcroot-ui add <component>\n"));
+}
+
+// src/cli/index.ts
+var program = new Command();
+program.name("@srcroot/ui").description("Add polymorphic, accessible UI components to your project").version("0.0.1");
+program.command("init").description("Initialize your project with srcroot-ui").option("-y, --yes", "Skip confirmation prompts", false).option("--cwd <path>", "Working directory", process.cwd()).action(init);
+program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-a, --all", "Add all available components", false).option("--cwd <path>", "Working directory", process.cwd()).action(add);
+program.command("list").description("List all available components").action(list);
+program.parse();

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@srcroot/ui",
+  "version": "0.0.1",
+  "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
+  "type": "module",
+  "bin": {
+    "srcroot-ui": "./dist/cli/index.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "files": [
+    "dist",
+    "registry"
+  ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwind",
+    "polymorphic",
+    "accessible"
+  ],
+  "dependencies": {
+    "commander": "^12.1.0",
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.1",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}