bearnie 0.1.0

package/README.md

@@ -0,0 +1,295 @@
+# Bearnie CLI
+
+A command-line interface for adding Bearnie UI components to your Astro project.
+
+## Quick Start
+
+```bash
+# 1. Navigate to your Astro project
+cd my-astro-project
+
+# 2. Initialize Bearnie
+npx bearnie init
+
+# 3. Add components
+npx bearnie add button card input
+
+# 4. Use in your Astro pages
+```
+
+```astro
+---
+import Button from "@/components/ui/button/Button.astro";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+---
+
+<Card>
+  <CardHeader>
+    <CardTitle>Welcome</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <Button>Click me</Button>
+  </CardContent>
+</Card>
+```
+
+## Installation
+
+```bash
+# Install globally
+npm install -g bearnie
+
+# Or use npx (recommended)
+npx bearnie add button
+```
+
+## Commands
+
+### `init`
+
+Initialize Bearnie in your project. This sets up the necessary configuration and utilities.
+
+```bash
+npx bearnie init
+```
+
+This will:
+
+- Create a `bearnie.json` configuration file
+- Set up the `src/components/bearnie` directory
+- Create the `cn()` utility function
+- Install `clsx`, `tailwind-merge`, and `tailwindcss` dependencies
+
+**Options:**
+
+- `-y, --yes` - Skip confirmation prompts and use defaults
+- `-c, --cwd <path>` - Set the working directory (defaults to current directory)
+
+### `add`
+
+Add components to your project.
+
+```bash
+# Add a single component
+npx bearnie add button
+
+# Add multiple components
+npx bearnie add button card input
+
+# Add all available components
+npx bearnie add --all
+
+# Interactive component selection
+npx bearnie add
+```
+
+**Options:**
+
+- `-y, --yes` - Skip confirmation prompts
+- `-a, --all` - Add all available components
+- `-c, --cwd <path>` - Set the working directory
+
+### `list`
+
+List all available components.
+
+```bash
+# Display formatted list
+npx bearnie list
+
+# Output as JSON
+npx bearnie list --json
+```
+
+**Options:**
+
+- `--json` - Output as JSON
+
+## Configuration
+
+After running `init`, a `bearnie.json` file is created in your project root:
+
+```json
+{
+  "componentsDir": "src/components/bearnie",
+  "utilsDir": "src/utils",
+  "typescript": true
+}
+```
+
+### Configuration Options
+
+| Option          | Type      | Default               | Description                                  |
+| --------------- | --------- | --------------------- | -------------------------------------------- |
+| `componentsDir` | `string`  | `"src/components/bearnie"` | Directory where components will be installed |
+| `utilsDir`      | `string`  | `"src/utils"`         | Directory for utility functions              |
+| `typescript`    | `boolean` | `true`                | Whether to use TypeScript                    |
+
+## Environment Variables
+
+| Variable               | Description                                      |
+| ---------------------- | ------------------------------------------------ |
+| `BEARNIE_REGISTRY_URL`  | Custom registry URL (for self-hosted registries) |
+| `BEARNIE_REGISTRY_PATH` | Local file path to registry (for development)    |
+
+## Local Development
+
+For local development and testing:
+
+```bash
+# Clone the repository
+git clone https://github.com/michael-andreuzza/bearnie.git
+cd bearnie
+
+# Install CLI dependencies
+cd packages/cli
+npm install
+
+# Build the CLI
+npm run build
+
+# Link for local testing
+npm link
+
+# Now you can use it
+bearnie add button
+```
+
+### Testing with Local Registry
+
+1. Generate the registry files:
+
+   ```bash
+   npm run generate-registry
+   ```
+
+2. Use the local registry path:
+   ```bash
+   BEARNIE_REGISTRY_PATH=/path/to/bearnie/public/registry bearnie add button
+   ```
+
+Or start the dev server and use the URL:
+
+```bash
+npm run dev
+BEARNIE_REGISTRY_URL=http://localhost:4321/registry bearnie add button
+```
+
+## Available Components
+
+**Form:** button, input, textarea, label, checkbox, radio, select, switch
+
+**Layout:** card, separator, scroll-area, aspect-ratio
+
+**Navigation:** breadcrumb, tabs, dropdown-menu
+
+**Feedback:** alert, badge, progress, skeleton, spinner, toast, tooltip
+
+**Disclosure:** accordion, collapsible, dialog, popover
+
+**Display:** avatar, table
+
+## Usage Examples
+
+### Basic Button
+
+```astro
+---
+import Button from "@/components/ui/button/Button.astro";
+---
+
+<Button>Default</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="destructive">Delete</Button>
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+```
+
+### Form with Input and Label
+
+```astro
+---
+import Input from "@/components/ui/input/Input.astro";
+import Label from "@/components/ui/label/Label.astro";
+import Button from "@/components/ui/button/Button.astro";
+---
+
+<form class="space-y-4">
+  <div>
+    <Label for="email">Email</Label>
+    <Input type="email" id="email" placeholder="you@example.com" />
+  </div>
+  <div>
+    <Label for="password">Password</Label>
+    <Input type="password" id="password" />
+  </div>
+  <Button type="submit">Sign In</Button>
+</form>
+```
+
+### Card with Content
+
+```astro
+---
+import Card from "@/components/ui/card/Card.astro";
+import CardHeader from "@/components/ui/card/CardHeader.astro";
+import CardTitle from "@/components/ui/card/CardTitle.astro";
+import CardDescription from "@/components/ui/card/CardDescription.astro";
+import CardContent from "@/components/ui/card/CardContent.astro";
+import CardFooter from "@/components/ui/card/CardFooter.astro";
+import Button from "@/components/ui/button/Button.astro";
+---
+
+<Card class="w-96">
+  <CardHeader>
+    <CardTitle>Create Account</CardTitle>
+    <CardDescription>Enter your details below</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <!-- Form fields here -->
+  </CardContent>
+  <CardFooter>
+    <Button class="w-full">Submit</Button>
+  </CardFooter>
+</Card>
+```
+
+### Alert Messages
+
+```astro
+---
+import Alert from "@/components/ui/alert/Alert.astro";
+import AlertTitle from "@/components/ui/alert/AlertTitle.astro";
+import AlertDescription from "@/components/ui/alert/AlertDescription.astro";
+---
+
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>This is an informational message.</AlertDescription>
+</Alert>
+
+<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Something went wrong.</AlertDescription>
+</Alert>
+```
+
+## Path Aliases
+
+Bearnie components use the `@/` path alias. Make sure your `tsconfig.json` has:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,663 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+import chalk5 from "chalk";
+
+// src/commands/init.ts
+import chalk2 from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+import path2 from "path";
+import fs2 from "fs-extra";
+import { execa } from "execa";
+
+// src/utils/config.ts
+import path from "path";
+import fs from "fs-extra";
+var DEFAULT_CONFIG = {
+  componentsDir: "src/components/bearnie",
+  utilsDir: "src/utils",
+  tailwindConfig: "tailwind.config.mjs",
+  typescript: true
+};
+var CONFIG_FILE = "bearnie.json";
+async function getProjectConfig(cwd) {
+  const configPath = path.join(cwd, CONFIG_FILE);
+  if (await fs.pathExists(configPath)) {
+    const content = await fs.readFile(configPath, "utf-8");
+    return JSON.parse(content);
+  }
+  return null;
+}
+async function saveProjectConfig(cwd, config) {
+  const configPath = path.join(cwd, CONFIG_FILE);
+  await fs.writeFile(configPath, JSON.stringify(config, null, 2));
+}
+async function isAstroProject(cwd) {
+  const packageJsonPath = path.join(cwd, "package.json");
+  if (!await fs.pathExists(packageJsonPath)) {
+    return false;
+  }
+  const packageJson = await fs.readJson(packageJsonPath);
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  return "astro" in deps;
+}
+async function hasTailwindInstalled(cwd) {
+  const packageJsonPath = path.join(cwd, "package.json");
+  if (!await fs.pathExists(packageJsonPath)) {
+    return false;
+  }
+  const packageJson = await fs.readJson(packageJsonPath);
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  return "tailwindcss" in deps;
+}
+
+// src/utils/ui.ts
+import chalk from "chalk";
+var brand = {
+  primary: chalk.hex("#F59E0B"),
+  // Amber (bear/honey color)
+  secondary: chalk.hex("#FCD34D"),
+  // Light amber
+  accent: chalk.hex("#FBBF24"),
+  // Mid amber
+  muted: chalk.dim,
+  success: chalk.green,
+  warning: chalk.yellow,
+  error: chalk.red,
+  info: chalk.cyan
+};
+var banner = `
+${brand.primary("   \u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E")}
+${brand.primary("   \u2502")}  ${brand.secondary("\u{1F43B}")} ${chalk.bold.white("bearnie")}                         ${brand.primary("\u2502")}
+${brand.primary("   \u2502")}  ${brand.muted("UI components for Astro")}           ${brand.primary("\u2502")}
+${brand.primary("   \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F")}
+`;
+var logo = `${brand.secondary("\u{1F43B}")} ${chalk.bold.white("bearnie")}`;
+var messages = {
+  // Greetings
+  greeting: () => `${brand.primary("Hey!")} Let's build something beautiful.`,
+  // Init messages
+  initStart: () => `${brand.primary("Hey!")} Let's set up your project.`,
+  initSuccess: () => `${brand.success("\u2713")} ${chalk.bold("You're all set!")} Time to add some components.`,
+  alreadyInit: () => `Looks like Bearnie is already set up here.`,
+  // Add messages
+  addStart: () => `${brand.primary("Hey!")} Let's add some components.`,
+  fetching: () => `Fetching the good stuff...`,
+  foundComponents: (count) => `Found ${chalk.bold(count)} components ready to use`,
+  resolving: () => `Gathering what you need...`,
+  installing: (name) => `Adding ${chalk.cyan(name)}...`,
+  installed: (name) => `${brand.success("\u2713")} ${name} is ready`,
+  installingDeps: () => `Installing dependencies...`,
+  // List messages
+  listHeader: (version) => `${logo} ${brand.muted(`v${version}`)}`,
+  listFooter: (count) => `${brand.accent("\u{1F43B}")} ${count} components available`,
+  // Success messages (randomized for fun)
+  success: () => {
+    const messages2 = [
+      `${brand.success("\u{1F389}")} ${chalk.bold("All done!")} Happy building!`,
+      `${brand.success("\u2728")} ${chalk.bold("Looking good!")} Your components are ready.`,
+      `${brand.success("\u{1F43B}")} ${chalk.bold("Done!")} Time to make something awesome.`,
+      `${brand.success("\u{1F680}")} ${chalk.bold("Ready to go!")} Have fun building!`
+    ];
+    return messages2[Math.floor(Math.random() * messages2.length)];
+  },
+  // Error messages (friendly, not scary)
+  notAstro: () => `Hmm, this doesn't look like an Astro project.`,
+  notAstroHelp: () => `Make sure you're in the root of an Astro project with a package.json.`,
+  networkError: () => `Couldn't reach the component registry.`,
+  networkErrorHelp: () => `Check your internet connection and try again.`,
+  unknownComponent: (names) => `Couldn't find: ${names.map((n) => chalk.yellow(n)).join(", ")}`,
+  // Hints
+  hint: (text) => brand.muted(`  \u{1F4A1} ${text}`),
+  nextStep: (step) => `   ${brand.muted("\u2192")} ${step}`
+};
+var print = {
+  banner: () => console.log(banner),
+  logo: () => console.log(`
+  ${logo}
+`),
+  greeting: () => console.log(`
+  ${messages.greeting()}
+`),
+  success: () => console.log(`
+  ${messages.success()}
+`),
+  newline: () => console.log(),
+  // Formatted output
+  step: (text) => console.log(`  ${text}`),
+  hint: (text) => console.log(messages.hint(text)),
+  error: (text) => console.log(`  ${brand.error("\u2717")} ${text}`),
+  warning: (text) => console.log(`  ${brand.warning("\u26A0")} ${text}`),
+  info: (text) => console.log(`  ${brand.info("\u2139")} ${text}`),
+  // Next steps box
+  nextSteps: (steps) => {
+    console.log();
+    console.log(`  ${chalk.bold("Next steps:")}`);
+    steps.forEach((step, i) => {
+      console.log(`  ${brand.muted(`${i + 1}.`)} ${step}`);
+    });
+    console.log();
+  },
+  // Footer
+  footer: () => {
+    const link2 = (text, url) => `\x1B]8;;${url}\x07${chalk.cyan(text)}\x1B]8;;\x07`;
+    console.log(`  ${brand.muted("Built with")} ${brand.secondary("\u{1F43B}")} ${brand.muted("by")} ${link2("Michael Andreuzza", "https://michaelandreuzza.com")}`);
+    console.log();
+  }
+};
+var promptsTheme = {
+  prefix: brand.secondary("?"),
+  highlight: brand.accent,
+  submit: brand.success("\u2713")
+};
+
+// src/commands/init.ts
+async function init(options) {
+  const cwd = path2.resolve(options.cwd);
+  print.logo();
+  console.log(`  ${messages.initStart()}`);
+  print.newline();
+  const isAstro = await isAstroProject(cwd);
+  if (!isAstro) {
+    print.error(messages.notAstro());
+    print.hint(messages.notAstroHelp());
+    print.newline();
+    process.exit(1);
+  }
+  const configPath = path2.join(cwd, CONFIG_FILE);
+  if (await fs2.pathExists(configPath)) {
+    print.warning(messages.alreadyInit());
+    print.newline();
+    const { overwrite } = options.yes ? { overwrite: true } : await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: "Want to start fresh?",
+      initial: false
+    });
+    if (!overwrite) {
+      print.hint("No changes made. Your config is safe!");
+      print.newline();
+      process.exit(0);
+    }
+  }
+  const hasTailwind = await hasTailwindInstalled(cwd);
+  if (!hasTailwind) {
+    print.warning("Tailwind CSS isn't installed yet.");
+    const { installTailwind } = options.yes ? { installTailwind: true } : await prompts({
+      type: "confirm",
+      name: "installTailwind",
+      message: "Want me to install it for you?",
+      initial: true
+    });
+    if (installTailwind) {
+      const spinner2 = ora({
+        text: "Installing Tailwind CSS...",
+        color: "green"
+      }).start();
+      try {
+        await execa(
+          "npm",
+          ["install", "-D", "tailwindcss", "@tailwindcss/vite"],
+          { cwd }
+        );
+        spinner2.succeed(brand.success("Tailwind CSS is ready"));
+      } catch (error) {
+        spinner2.fail("Couldn't install Tailwind CSS");
+        print.hint(
+          "Try manually: npm install -D tailwindcss @tailwindcss/vite"
+        );
+      }
+    }
+  }
+  let config = { ...DEFAULT_CONFIG };
+  if (!options.yes) {
+    print.newline();
+    console.log(`  ${chalk2.bold("Where should things go?")}`);
+    print.newline();
+    const responses = await prompts([
+      {
+        type: "text",
+        name: "componentsDir",
+        message: "Components directory",
+        initial: DEFAULT_CONFIG.componentsDir
+      },
+      {
+        type: "text",
+        name: "utilsDir",
+        message: "Utilities directory",
+        initial: DEFAULT_CONFIG.utilsDir
+      }
+    ]);
+    config = {
+      ...config,
+      ...responses
+    };
+  }
+  const spinner = ora({
+    text: "Setting things up...",
+    color: "green"
+  }).start();
+  try {
+    await fs2.ensureDir(path2.join(cwd, config.componentsDir));
+    await fs2.ensureDir(path2.join(cwd, config.utilsDir));
+    spinner.text = "Creating directories...";
+  } catch (error) {
+    spinner.fail("Couldn't create directories");
+    process.exit(1);
+  }
+  const cnUtilContent = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+  try {
+    const utilPath = path2.join(cwd, config.utilsDir, "cn.ts");
+    if (!await fs2.pathExists(utilPath)) {
+      await fs2.writeFile(utilPath, cnUtilContent);
+      const packageJson = await fs2.readJson(path2.join(cwd, "package.json"));
+      const deps = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies
+      };
+      const toInstall = [];
+      if (!("clsx" in deps)) toInstall.push("clsx");
+      if (!("tailwind-merge" in deps)) toInstall.push("tailwind-merge");
+      if (toInstall.length > 0) {
+        spinner.text = "Installing utilities...";
+        await execa("npm", ["install", ...toInstall], { cwd });
+      }
+    }
+  } catch (error) {
+    spinner.fail("Couldn't create utility files");
+  }
+  try {
+    await saveProjectConfig(cwd, config);
+    spinner.succeed(brand.success("Everything is set up"));
+  } catch (error) {
+    spinner.fail("Couldn't save configuration");
+    process.exit(1);
+  }
+  print.newline();
+  console.log(`  ${messages.initSuccess()}`);
+  print.nextSteps([
+    `Add your first component: ${chalk2.cyan("npx bearnie add button")}`,
+    `Browse all components: ${chalk2.cyan("npx bearnie list")}`,
+    `Add CSS variables: ${chalk2.cyan("npx bearnie add styles")}`
+  ]);
+  print.footer();
+}
+
+// src/commands/add.ts
+import chalk3 from "chalk";
+import ora2 from "ora";
+import prompts2 from "prompts";
+import path4 from "path";
+import fs4 from "fs-extra";
+import { execa as execa2 } from "execa";
+
+// src/utils/registry.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+var REGISTRY_URL = process.env.BEARNIE_REGISTRY_URL || "https://bearnie.dev/registry";
+var REGISTRY_PATH = process.env.BEARNIE_REGISTRY_PATH;
+var REGISTRY_INDEX_URL = `${REGISTRY_URL}/index.json`;
+async function getRegistryIndex() {
+  if (REGISTRY_PATH) {
+    const indexPath = path3.join(REGISTRY_PATH, "index.json");
+    if (await fs3.pathExists(indexPath)) {
+      return fs3.readJson(indexPath);
+    }
+    throw new Error(`Registry index not found at: ${indexPath}`);
+  }
+  const response = await fetch(REGISTRY_INDEX_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch registry index: ${response.statusText}`);
+  }
+  return response.json();
+}
+async function getComponent(name) {
+  if (REGISTRY_PATH) {
+    const componentPath = path3.join(REGISTRY_PATH, `${name}.json`);
+    if (await fs3.pathExists(componentPath)) {
+      return fs3.readJson(componentPath);
+    }
+    throw new Error(`Component "${name}" not found at: ${componentPath}`);
+  }
+  const url = `${REGISTRY_URL}/${name}.json`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Component "${name}" not found in registry`);
+  }
+  return response.json();
+}
+async function resolveComponentDependencies(names, resolved = /* @__PURE__ */ new Set()) {
+  const result = [];
+  for (const name of names) {
+    if (resolved.has(name)) continue;
+    resolved.add(name);
+    const component = await getComponent(name);
+    if (component.registryDependencies?.length) {
+      const deps = await resolveComponentDependencies(
+        component.registryDependencies,
+        resolved
+      );
+      result.push(...deps);
+    }
+    result.push(name);
+  }
+  return result;
+}
+
+// src/commands/add.ts
+async function add(components, options) {
+  const cwd = path4.resolve(options.cwd);
+  print.logo();
+  console.log(`  ${messages.addStart()}`);
+  print.newline();
+  let config = await getProjectConfig(cwd);
+  if (!config) {
+    print.warning(
+      `Project not initialized. Run ${chalk3.cyan("npx bearnie init")} first.`
+    );
+    print.newline();
+    const { proceed } = options.yes ? { proceed: true } : await prompts2({
+      type: "confirm",
+      name: "proceed",
+      message: "Want to use default settings for now?",
+      initial: true
+    });
+    if (!proceed) {
+      process.exit(0);
+    }
+    config = DEFAULT_CONFIG;
+  }
+  const indexSpinner = ora2({
+    text: messages.fetching(),
+    color: "green"
+  }).start();
+  let registryIndex;
+  try {
+    registryIndex = await getRegistryIndex();
+    indexSpinner.succeed(messages.foundComponents(registryIndex.components.length));
+  } catch (error) {
+    indexSpinner.fail(messages.networkError());
+    print.hint(messages.networkErrorHelp());
+    process.exit(1);
+  }
+  let selectedComponents = [];
+  if (options.all) {
+    selectedComponents = registryIndex.components.map((c) => c.name);
+  } else if (components.length === 0) {
+    print.newline();
+    const { selected } = await prompts2({
+      type: "multiselect",
+      name: "selected",
+      message: "What would you like to add?",
+      choices: registryIndex.components.map((c) => ({
+        title: c.name,
+        description: c.description,
+        value: c.name
+      })),
+      hint: "Space to select, Enter to confirm",
+      instructions: false
+    });
+    if (!selected || selected.length === 0) {
+      print.hint("No components selected.");
+      print.newline();
+      process.exit(0);
+    }
+    selectedComponents = selected;
+  } else {
+    const availableNames = registryIndex.components.map((c) => c.name);
+    const invalid = components.filter((c) => !availableNames.includes(c));
+    if (invalid.length > 0) {
+      print.error(messages.unknownComponent(invalid));
+      print.hint(`Run ${chalk3.cyan("npx bearnie list")} to see what's available.`);
+      print.newline();
+      process.exit(1);
+    }
+    selectedComponents = components;
+  }
+  const resolveSpinner = ora2({
+    text: messages.resolving(),
+    color: "green"
+  }).start();
+  let allComponents;
+  try {
+    allComponents = await resolveComponentDependencies(selectedComponents);
+    const extraDeps = allComponents.length - selectedComponents.length;
+    if (extraDeps > 0) {
+      resolveSpinner.succeed(
+        `Adding ${chalk3.bold(selectedComponents.length)} component${selectedComponents.length > 1 ? "s" : ""} ${brand.muted(`(+${extraDeps} dependencies)`)}`
+      );
+    } else {
+      resolveSpinner.succeed(
+        `Adding ${chalk3.bold(allComponents.length)} component${allComponents.length > 1 ? "s" : ""}`
+      );
+    }
+  } catch (error) {
+    resolveSpinner.fail("Couldn't resolve dependencies");
+    process.exit(1);
+  }
+  print.newline();
+  const npmDeps = /* @__PURE__ */ new Set();
+  const npmDevDeps = /* @__PURE__ */ new Set();
+  const writtenFiles = [];
+  const skippedFiles = [];
+  for (const componentName of allComponents) {
+    const spinner = ora2({
+      text: messages.installing(componentName),
+      color: "green"
+    }).start();
+    try {
+      const component = await getComponent(componentName);
+      component.dependencies?.forEach((d) => npmDeps.add(d));
+      component.devDependencies?.forEach((d) => npmDevDeps.add(d));
+      for (const file of component.files) {
+        const filePath = path4.join(cwd, config.componentsDir, file.path);
+        const exists = await fs4.pathExists(filePath);
+        if (exists && !options.yes) {
+          skippedFiles.push(file.path);
+          continue;
+        }
+        await fs4.ensureDir(path4.dirname(filePath));
+        await fs4.writeFile(filePath, file.content);
+        writtenFiles.push(file.path);
+      }
+      spinner.succeed(messages.installed(componentName));
+    } catch (error) {
+      spinner.fail(`Couldn't add ${componentName}`);
+      print.hint(`${error}`);
+    }
+  }
+  const allDeps = [...npmDeps];
+  const allDevDeps = [...npmDevDeps];
+  if (allDeps.length > 0 || allDevDeps.length > 0) {
+    const depsSpinner = ora2({
+      text: messages.installingDeps(),
+      color: "green"
+    }).start();
+    try {
+      const packageJson = await fs4.readJson(path4.join(cwd, "package.json"));
+      const existingDeps = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies
+      };
+      const newDeps = allDeps.filter((d) => !(d in existingDeps));
+      const newDevDeps = allDevDeps.filter((d) => !(d in existingDeps));
+      if (newDeps.length > 0) {
+        await execa2("npm", ["install", ...newDeps], { cwd });
+      }
+      if (newDevDeps.length > 0) {
+        await execa2("npm", ["install", "-D", ...newDevDeps], { cwd });
+      }
+      depsSpinner.succeed("Dependencies installed");
+    } catch (error) {
+      depsSpinner.fail("Some dependencies couldn't be installed");
+      print.hint("You might need to install them manually.");
+    }
+  }
+  print.newline();
+  if (writtenFiles.length > 0) {
+    console.log(
+      `  ${brand.success("\u2713")} Created ${chalk3.bold(writtenFiles.length)} file${writtenFiles.length > 1 ? "s" : ""}:`
+    );
+    writtenFiles.slice(0, 5).forEach((f) => {
+      console.log(brand.muted(`     ${f}`));
+    });
+    if (writtenFiles.length > 5) {
+      console.log(brand.muted(`     ...and ${writtenFiles.length - 5} more`));
+    }
+  }
+  if (skippedFiles.length > 0) {
+    print.newline();
+    console.log(
+      `  ${brand.warning("\u26A0")} Skipped ${skippedFiles.length} existing file${skippedFiles.length > 1 ? "s" : ""}`
+    );
+    print.hint(`Use ${chalk3.cyan("--yes")} to overwrite.`);
+  }
+  print.newline();
+  print.success();
+}
+
+// src/commands/list.ts
+import chalk4 from "chalk";
+import ora3 from "ora";
+async function list(options) {
+  const spinner = ora3({
+    text: messages.fetching(),
+    color: "green"
+  }).start();
+  try {
+    const registry = await getRegistryIndex();
+    spinner.stop();
+    if (options.json) {
+      console.log(JSON.stringify(registry.components, null, 2));
+      return;
+    }
+    print.newline();
+    console.log(`  ${messages.listHeader(registry.version)}`);
+    print.newline();
+    const categories = /* @__PURE__ */ new Map();
+    for (const component of registry.components) {
+      const cat = component.category || "other";
+      if (!categories.has(cat)) {
+        categories.set(cat, []);
+      }
+      categories.get(cat).push(component);
+    }
+    const categoryConfig = {
+      foundation: { emoji: "\u{1F3A8}", label: "Foundation" },
+      form: { emoji: "\u{1F4DD}", label: "Form" },
+      layout: { emoji: "\u{1F4D0}", label: "Layout" },
+      navigation: { emoji: "\u{1F9ED}", label: "Navigation" },
+      feedback: { emoji: "\u{1F4AC}", label: "Feedback" },
+      disclosure: { emoji: "\u{1F4C2}", label: "Disclosure" },
+      display: { emoji: "\u2728", label: "Display" },
+      other: { emoji: "\u{1F4E6}", label: "Other" }
+    };
+    const categoryOrder = [
+      "foundation",
+      "form",
+      "layout",
+      "navigation",
+      "feedback",
+      "disclosure",
+      "display",
+      "other"
+    ];
+    for (const category of categoryOrder) {
+      const components = categories.get(category);
+      if (!components || components.length === 0) continue;
+      const config = categoryConfig[category] || { emoji: "\u{1F4E6}", label: category };
+      console.log(`  ${config.emoji} ${chalk4.bold(config.label)}`);
+      print.newline();
+      for (const component of components) {
+        const name = brand.accent(component.name.padEnd(18));
+        const desc = brand.muted(component.description);
+        console.log(`     ${name} ${desc}`);
+      }
+      print.newline();
+    }
+    console.log(`  ${messages.listFooter(registry.components.length)}`);
+    print.newline();
+    console.log(`  ${chalk4.bold("Quick commands:")}`);
+    console.log(`  ${brand.muted("\u2192")} Add a component:    ${chalk4.cyan("npx bearnie add button")}`);
+    console.log(`  ${brand.muted("\u2192")} Add everything:     ${chalk4.cyan("npx bearnie add --all")}`);
+    console.log(`  ${brand.muted("\u2192")} Add CSS variables:  ${chalk4.cyan("npx bearnie add styles")}`);
+    print.newline();
+  } catch (error) {
+    spinner.fail(messages.networkError());
+    print.hint(messages.networkErrorHelp());
+    process.exit(1);
+  }
+}
+
+// src/index.ts
+var amber = chalk5.hex("#F59E0B");
+var logo2 = `${amber("\u{1F43B}")} ${chalk5.bold("bearnie")}`;
+var link = (text, url) => `\x1B]8;;${url}\x07${chalk5.cyan(text)}\x1B]8;;\x07`;
+var program = new Command();
+program.name("bearnie").description("UI components for Astro").version("0.1.0").configureOutput({
+  writeOut: (str) => process.stdout.write(str),
+  writeErr: (str) => process.stdout.write(str),
+  outputError: (str, write) => {
+    write(`
+  ${logo2}
+
+`);
+    write(`  ${chalk5.red("Oops!")} ${str.replace("error: ", "")}
+`);
+  }
+}).addHelpText("beforeAll", `
+  ${logo2}
+`).addHelpText(
+  "afterAll",
+  `
+  ${chalk5.dim("Built with")} ${amber("\u{1F43B}")} ${chalk5.dim("by")} ${link("Michael Andreuzza", "https://michaelandreuzza.com")}
+`
+);
+program.command("init").description("Set up Bearnie in your project").option("-y, --yes", "Skip prompts and use defaults").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 prompts and overwrite files").option("-a, --all", "Add all components").option("--cwd <path>", "Working directory", process.cwd()).action(add);
+program.command("list").description("Browse available components").option("--json", "Output as JSON").action(list);
+program.action(() => {
+  console.log(`
+  ${logo2}
+
+  ${amber("Hey!")} UI components for Astro.
+  Built with Tailwind CSS, no frameworks required.
+
+  ${chalk5.bold("Commands:")}
+    ${chalk5.cyan("init")}          Set up Bearnie in your project
+    ${chalk5.cyan("add")} ${chalk5.dim("<name>")}    Add a component
+    ${chalk5.cyan("list")}          Browse all components
+
+  ${chalk5.bold("Examples:")}
+    ${chalk5.dim("$")} npx bearnie init
+    ${chalk5.dim("$")} npx bearnie add button card
+    ${chalk5.dim("$")} npx bearnie add --all
+
+  ${chalk5.dim("Run")} ${chalk5.cyan("bearnie <command> --help")} ${chalk5.dim("for more info")}
+`);
+});
+program.parse();
+program.on("command:*", () => {
+  console.log(`
+  ${logo2}
+
+  ${chalk5.yellow("Hmm,")} I don't know that command: ${chalk5.red(program.args.join(" "))}
+
+  Run ${chalk5.cyan("npx bearnie --help")} to see what I can do.
+`);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "bearnie",
+  "version": "0.1.0",
+  "description": "CLI for installing Bearnie UI components",
+  "type": "module",
+  "license": "MIT",
+  "bin": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "execa": "^9.3.1",
+    "fs-extra": "^11.2.0",
+    "node-fetch": "^3.3.2",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.14.9",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "author": "Michael Andreuzza",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/michael-andreuzza/bearnie.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://bearnie.dev",
+  "bugs": {
+    "url": "https://github.com/michael-andreuzza/bearnie/issues"
+  },
+  "keywords": [
+    "astro",
+    "ui",
+    "components",
+    "cli",
+    "tailwindcss",
+    "bearnie"
+  ]
+}