aetherx-dt-ui 0.1.0

package/dist/cli/index.mjs

@@ -0,0 +1,440 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import fs from 'node:fs';
+import path from 'node:path';
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import { fileURLToPath } from 'node:url';
+import { execSync } from 'node:child_process';
+
+const CONFIG_FILE = ".dtui.json";
+function getConfigPath() {
+  return path.resolve(process.cwd(), CONFIG_FILE);
+}
+function configExists() {
+  return fs.existsSync(getConfigPath());
+}
+function readConfig() {
+  const configPath = getConfigPath();
+  if (!fs.existsSync(configPath)) {
+    throw new Error("No .dtui.json found. Run `npx dt-ui init` first.");
+  }
+  const raw = fs.readFileSync(configPath, "utf-8");
+  return JSON.parse(raw);
+}
+function writeConfig(config) {
+  const configPath = getConfigPath();
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n", "utf-8");
+}
+function detectFramework() {
+  const cwd = process.cwd();
+  if (fs.existsSync(path.join(cwd, "nuxt.config.ts")) || fs.existsSync(path.join(cwd, "nuxt.config.js"))) {
+    return "nuxt";
+  }
+  if (fs.existsSync(path.join(cwd, "vite.config.ts")) || fs.existsSync(path.join(cwd, "vite.config.js"))) {
+    return "vue-vite";
+  }
+  return "vue";
+}
+function detectPackageManager() {
+  const cwd = process.cwd();
+  if (fs.existsSync(path.join(cwd, "bun.lockb")) || fs.existsSync(path.join(cwd, "bun.lock"))) {
+    return "bun";
+  }
+  if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fs.existsSync(path.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  return "npm";
+}
+function getInstallCommand(pm, deps) {
+  const depStr = deps.join(" ");
+  switch (pm) {
+    case "pnpm":
+      return `pnpm add ${depStr}`;
+    case "yarn":
+      return `yarn add ${depStr}`;
+    case "bun":
+      return `bun add ${depStr}`;
+    default:
+      return `npm install ${depStr}`;
+  }
+}
+
+function getRegistryDir() {
+  const thisFile = fileURLToPath(import.meta.url);
+  const cliDir = path.dirname(thisFile);
+  const candidates = [
+    // When running from built dist/
+    path.resolve(cliDir, "../../src/registry"),
+    // When running from src/cli/utils/
+    path.resolve(cliDir, "../../registry"),
+    // When running via unbuild stub
+    path.resolve(cliDir, "../../../src/registry")
+  ];
+  for (const candidate of candidates) {
+    if (fs.existsSync(path.join(candidate, "registry.json"))) {
+      return candidate;
+    }
+  }
+  throw new Error("Could not find registry directory. Make sure dt-ui is installed correctly.");
+}
+function loadRegistry() {
+  const registryDir = getRegistryDir();
+  const registryPath = path.join(registryDir, "registry.json");
+  const raw = fs.readFileSync(registryPath, "utf-8");
+  return JSON.parse(raw);
+}
+function getComponentFiles(componentName) {
+  const registryDir = getRegistryDir();
+  const registry = loadRegistry();
+  const component = registry.components[componentName];
+  if (!component) {
+    throw new Error(`Component "${componentName}" not found in registry.`);
+  }
+  return component.files.map((fileName) => {
+    const filePath = path.join(registryDir, "components", componentName, fileName);
+    return {
+      name: fileName,
+      content: fs.readFileSync(filePath, "utf-8")
+    };
+  });
+}
+function getStylesContent() {
+  const registryDir = getRegistryDir();
+  return fs.readFileSync(path.join(registryDir, "styles", "base.css"), "utf-8");
+}
+function getLibContent() {
+  const registryDir = getRegistryDir();
+  return fs.readFileSync(path.join(registryDir, "lib", "utils.ts"), "utf-8");
+}
+function getDocContent(docsPath) {
+  const registryDir = getRegistryDir();
+  const fullPath = path.join(registryDir, docsPath);
+  if (!fs.existsSync(fullPath)) {
+    return "";
+  }
+  return fs.readFileSync(fullPath, "utf-8");
+}
+function getAllComponentNames() {
+  const registry = loadRegistry();
+  return Object.keys(registry.components);
+}
+
+const AGENT_HEADER = `# DT UI \u2014 Component Reference
+
+This project uses dt-ui components. Below is the complete API reference for all installed components. Components use pure CSS with CSS custom properties for theming. No Tailwind or CSS framework required.
+
+## Theming
+
+All components use CSS custom properties prefixed with \`--dt-\` defined in \`base.css\`. Override them in your project's CSS to customize the look.
+
+### Available Tokens
+
+| Token | Default (Light) | Description |
+|-------|-----------------|-------------|
+| \`--dt-primary\` | \`hsl(220 72% 50%)\` | Brand/primary color |
+| \`--dt-primary-hover\` | \`hsl(220 72% 42%)\` | Primary hover state |
+| \`--dt-primary-foreground\` | \`hsl(0 0% 100%)\` | Text on primary bg |
+| \`--dt-secondary\` | \`hsl(220 14% 94%)\` | Secondary background |
+| \`--dt-secondary-foreground\` | \`hsl(220 10% 20%)\` | Text on secondary bg |
+| \`--dt-destructive\` | \`hsl(0 72% 51%)\` | Destructive/danger color |
+| \`--dt-success\` | \`hsl(142 72% 40%)\` | Success color |
+| \`--dt-warning\` | \`hsl(38 92% 50%)\` | Warning color |
+| \`--dt-border\` | \`hsl(220 13% 88%)\` | Border color |
+| \`--dt-ring\` | \`hsl(220 72% 50%)\` | Focus ring color |
+| \`--dt-radius-sm\` | \`0.25rem\` | Small border radius |
+| \`--dt-radius-md\` | \`0.375rem\` | Medium border radius |
+| \`--dt-radius-lg\` | \`0.5rem\` | Large border radius |
+| \`--dt-shadow-sm\` | \`0 1px 2px...\` | Small shadow |
+| \`--dt-shadow-md\` | \`0 4px 6px...\` | Medium shadow |
+| \`--dt-shadow-lg\` | \`0 10px 15px...\` | Large shadow |
+
+### Dark Mode
+
+Add the \`dark\` class to your \`<html>\` or \`<body>\` element. All tokens automatically adjust.
+
+---
+
+## Components
+
+`;
+function getAgentMdPath() {
+  return path.resolve(process.cwd(), "AGENT.md");
+}
+function createAgentMd() {
+  fs.writeFileSync(getAgentMdPath(), AGENT_HEADER, "utf-8");
+}
+function appendComponentDoc(componentName) {
+  const registry = loadRegistry();
+  const component = registry.components[componentName];
+  if (!component) return;
+  const docContent = getDocContent(component.docs);
+  if (!docContent) return;
+  const agentPath = getAgentMdPath();
+  if (!fs.existsSync(agentPath)) {
+    createAgentMd();
+  }
+  const existing = fs.readFileSync(agentPath, "utf-8");
+  if (existing.includes(`### ${component.name}`)) return;
+  const separator = "\n---\n\n";
+  fs.appendFileSync(agentPath, docContent + separator, "utf-8");
+}
+
+async function initCommand() {
+  p.intro(pc.bold(pc.cyan("dt-ui init")));
+  if (configExists()) {
+    const overwrite = await p.confirm({
+      message: "A .dtui.json config already exists. Overwrite?",
+      initialValue: false
+    });
+    if (p.isCancel(overwrite) || !overwrite) {
+      p.cancel("Init cancelled.");
+      process.exit(0);
+    }
+  }
+  const detectedFramework = detectFramework();
+  const answers = await p.group(
+    {
+      framework: () => p.select({
+        message: "Which framework does your project use?",
+        initialValue: detectedFramework,
+        options: [
+          { value: "nuxt", label: "Nuxt", hint: detectedFramework === "nuxt" ? "detected" : void 0 },
+          { value: "vue-vite", label: "Vue + Vite", hint: detectedFramework === "vue-vite" ? "detected" : void 0 },
+          { value: "vue", label: "Vue (plain)", hint: detectedFramework === "vue" ? "detected" : void 0 }
+        ]
+      }),
+      componentsDir: () => p.text({
+        message: "Where should components be installed?",
+        initialValue: "src/components/ui",
+        placeholder: "src/components/ui"
+      }),
+      libDir: () => p.text({
+        message: "Where should lib utils go?",
+        initialValue: "src/lib",
+        placeholder: "src/lib"
+      }),
+      agent: () => p.confirm({
+        message: "Include AI agent documentation (AGENT.md)?",
+        initialValue: true
+      })
+    },
+    {
+      onCancel: () => {
+        p.cancel("Init cancelled.");
+        process.exit(0);
+      }
+    }
+  );
+  const stylesDir = "src/styles";
+  const config = {
+    framework: answers.framework,
+    componentsDir: answers.componentsDir,
+    libDir: answers.libDir,
+    stylesDir,
+    installedComponents: [],
+    agent: answers.agent
+  };
+  const s = p.spinner();
+  writeConfig(config);
+  s.start("Copying base.css...");
+  const stylesPath = path.resolve(process.cwd(), stylesDir);
+  fs.mkdirSync(stylesPath, { recursive: true });
+  fs.writeFileSync(
+    path.join(stylesPath, "base.css"),
+    getStylesContent(),
+    "utf-8"
+  );
+  s.stop("base.css copied");
+  s.start("Copying lib/utils.ts...");
+  const libPath = path.resolve(process.cwd(), answers.libDir);
+  fs.mkdirSync(libPath, { recursive: true });
+  fs.writeFileSync(
+    path.join(libPath, "utils.ts"),
+    getLibContent(),
+    "utf-8"
+  );
+  s.stop("lib/utils.ts copied");
+  if (answers.agent) {
+    s.start("Creating AGENT.md...");
+    createAgentMd();
+    s.stop("AGENT.md created");
+  }
+  p.note(
+    [
+      `${pc.bold("Next steps:")}`,
+      "",
+      `1. Import base.css in your main entry file:`,
+      `   ${pc.cyan("import './styles/base.css'")}`,
+      "",
+      `2. Add your first component:`,
+      `   ${pc.cyan("npx dt-ui add button")}`,
+      "",
+      `3. Use it in your Vue components:`,
+      `   ${pc.cyan('<DtButton variant="default">Click me</DtButton>')}`
+    ].join("\n"),
+    "Setup complete!"
+  );
+  p.outro(pc.green("dt-ui initialized successfully!"));
+}
+
+async function addCommand(componentNames) {
+  p.intro(pc.bold(pc.cyan("dt-ui add")));
+  if (!configExists()) {
+    p.cancel("No .dtui.json found. Run `npx dt-ui init` first.");
+    process.exit(1);
+  }
+  const config = readConfig();
+  const registry = loadRegistry();
+  const allNames = getAllComponentNames();
+  if (!componentNames || componentNames.length === 0) {
+    const selected = await p.multiselect({
+      message: "Which components would you like to add?",
+      options: allNames.map((name) => ({
+        value: name,
+        label: registry.components[name].name,
+        hint: config.installedComponents.includes(name) ? "installed" : void 0
+      })),
+      required: true
+    });
+    if (p.isCancel(selected)) {
+      p.cancel("Cancelled.");
+      process.exit(0);
+    }
+    componentNames = selected;
+  }
+  const invalid = componentNames.filter((n) => !registry.components[n]);
+  if (invalid.length > 0) {
+    p.cancel(
+      `Unknown component(s): ${invalid.map((n) => pc.red(n)).join(", ")}. Run ${pc.cyan("npx dt-ui list")} to see available components.`
+    );
+    process.exit(1);
+  }
+  const toInstall = /* @__PURE__ */ new Set();
+  const depQueue = [...componentNames];
+  while (depQueue.length > 0) {
+    const name = depQueue.pop();
+    if (toInstall.has(name)) continue;
+    toInstall.add(name);
+    const comp = registry.components[name];
+    for (const dep of comp.internalDeps) {
+      if (!toInstall.has(dep) && !config.installedComponents.includes(dep)) {
+        depQueue.push(dep);
+      }
+    }
+  }
+  const extraDeps = [...toInstall].filter((n) => !componentNames.includes(n));
+  if (extraDeps.length > 0) {
+    const confirmDeps = await p.confirm({
+      message: `The following dependencies are also required: ${extraDeps.map((n) => pc.cyan(n)).join(", ")}. Install them too?`,
+      initialValue: true
+    });
+    if (p.isCancel(confirmDeps)) {
+      p.cancel("Cancelled.");
+      process.exit(0);
+    }
+    if (!confirmDeps) {
+      for (const dep of extraDeps) {
+        toInstall.delete(dep);
+      }
+    }
+  }
+  const alreadyInstalled = [...toInstall].filter(
+    (n) => config.installedComponents.includes(n)
+  );
+  if (alreadyInstalled.length > 0) {
+    const overwrite = await p.confirm({
+      message: `${alreadyInstalled.map((n) => pc.yellow(n)).join(", ")} already installed. Overwrite?`,
+      initialValue: false
+    });
+    if (p.isCancel(overwrite) || !overwrite) {
+      for (const name of alreadyInstalled) {
+        toInstall.delete(name);
+      }
+    }
+  }
+  if (toInstall.size === 0) {
+    p.cancel("Nothing to install.");
+    process.exit(0);
+  }
+  const s = p.spinner();
+  const allPeerDeps = /* @__PURE__ */ new Set();
+  const installed = [];
+  for (const componentName of toInstall) {
+    const comp = registry.components[componentName];
+    s.start(`Installing ${pc.cyan(comp.name)}...`);
+    const files = getComponentFiles(componentName);
+    const targetDir = path.resolve(
+      process.cwd(),
+      config.componentsDir,
+      componentName
+    );
+    fs.mkdirSync(targetDir, { recursive: true });
+    for (const file of files) {
+      fs.writeFileSync(path.join(targetDir, file.name), file.content, "utf-8");
+    }
+    for (const dep of comp.peerDeps) {
+      allPeerDeps.add(dep);
+    }
+    if (!config.installedComponents.includes(componentName)) {
+      config.installedComponents.push(componentName);
+    }
+    if (config.agent) {
+      appendComponentDoc(componentName);
+    }
+    installed.push(componentName);
+    s.stop(`${pc.green("\u2713")} ${comp.name} installed`);
+  }
+  if (allPeerDeps.size > 0) {
+    const pm = detectPackageManager();
+    const cmd = getInstallCommand(pm, [...allPeerDeps]);
+    s.start(`Installing peer dependencies: ${[...allPeerDeps].join(", ")}...`);
+    try {
+      execSync(cmd, { cwd: process.cwd(), stdio: "pipe" });
+      s.stop("Peer dependencies installed");
+    } catch {
+      s.stop(pc.yellow("Failed to install peer dependencies. Please install manually:"));
+      p.log.warn(pc.dim(cmd));
+    }
+  }
+  writeConfig(config);
+  p.note(
+    installed.map((name) => {
+      const comp = registry.components[name];
+      return `${pc.green("\u2713")} ${comp.name} \u2192 ${config.componentsDir}/${name}/`;
+    }).join("\n"),
+    "Installed components"
+  );
+  p.outro(pc.green(`${installed.length} component(s) added successfully!`));
+}
+
+async function listCommand() {
+  p.intro(pc.bold(pc.cyan("dt-ui components")));
+  const registry = loadRegistry();
+  const installed = configExists() ? readConfig().installedComponents : [];
+  const components = Object.entries(registry.components);
+  const rows = components.map(([key, comp]) => {
+    const isInstalled = installed.includes(key);
+    const status = isInstalled ? pc.green("\u2713") : pc.dim("\u25CB");
+    const name = isInstalled ? pc.green(comp.name) : comp.name;
+    const deps = comp.internalDeps.length > 0 ? pc.dim(` (requires: ${comp.internalDeps.join(", ")})`) : "";
+    return `  ${status}  ${name.padEnd(isInstalled ? 30 : 20)}  ${pc.dim(comp.description)}${deps}`;
+  });
+  p.note(rows.join("\n"), `${components.length} components available`);
+  if (!configExists()) {
+    p.log.info(`Run ${pc.cyan("npx dt-ui init")} to get started.`);
+  } else {
+    p.log.info(`Run ${pc.cyan("npx dt-ui add <component>")} to install.`);
+  }
+  p.outro("");
+}
+
+const program = new Command();
+program.name("dt-ui").description("DT UI \u2014 Lightweight, customizable Vue components for DT projects").version("0.1.0");
+program.command("init").description("Initialize dt-ui in your project").action(initCommand);
+program.command("add").description("Add a component to your project").argument("[components...]", "Component names to add").action(addCommand);
+program.command("list").description("List all available components").action(listCommand);
+program.parse();

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "aetherx-dt-ui",
+  "version": "0.1.0",
+  "description": "Lightweight, customizable Vue components for DT projects",
+  "type": "module",
+  "bin": {
+    "dt-ui": "dist/cli/index.mjs"
+  },
+  "files": [
+    "dist",
+    "src/registry"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "commander": "^13.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.0",
+    "typescript": "^5.7.0",
+    "unbuild": "^3.3.1",
+    "vitepress": "^1.6.3",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "vue",
+    "components",
+    "ui",
+    "design-system",
+    "dt"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ashomurodov/dt-ui.git"
+  },
+  "homepage": "https://github.com/ashomurodov/dt-ui#readme",
+  "bugs": {
+    "url": "https://github.com/ashomurodov/dt-ui/issues"
+  }
+}

package/src/registry/components/badge/DtBadge.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning'
+export type BadgeSize = 'sm' | 'default'
+
+const props = withDefaults(defineProps<{
+  variant?: BadgeVariant
+  size?: BadgeSize
+  dot?: boolean
+}>(), {
+  variant: 'default',
+  size: 'default',
+})
+
+const classes = computed(() => [
+  'dt-badge',
+  `dt-badge--${props.variant}`,
+  `dt-badge--${props.size}`,
+  props.dot && 'dt-badge--dot',
+].filter(Boolean))
+</script>
+
+<template>
+  <span :class="classes" v-bind="$attrs">
+    <span v-if="dot" class="dt-badge__dot" aria-hidden="true" />
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.dt-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dt-space-1);
+  font-weight: 500;
+  border-radius: var(--dt-radius-full);
+  white-space: nowrap;
+  transition: background-color var(--dt-transition-base), color var(--dt-transition-base);
+  border: 1px solid transparent;
+  line-height: 1;
+}
+
+/* Sizes */
+.dt-badge--sm {
+  padding: 0.125rem 0.5rem;
+  font-size: var(--dt-font-size-xs);
+}
+.dt-badge--default {
+  padding: 0.25rem 0.625rem;
+  font-size: var(--dt-font-size-sm);
+}
+
+/* Variants */
+.dt-badge--default {
+  background-color: var(--dt-primary);
+  color: var(--dt-primary-foreground);
+}
+
+.dt-badge--secondary {
+  background-color: var(--dt-secondary);
+  color: var(--dt-secondary-foreground);
+}
+
+.dt-badge--outline {
+  border-color: var(--dt-border);
+  background-color: transparent;
+  color: var(--dt-foreground);
+}
+
+.dt-badge--destructive {
+  background-color: var(--dt-destructive);
+  color: var(--dt-destructive-foreground);
+}
+
+.dt-badge--success {
+  background-color: var(--dt-success);
+  color: var(--dt-success-foreground);
+}
+
+.dt-badge--warning {
+  background-color: var(--dt-warning);
+  color: var(--dt-warning-foreground);
+}
+
+/* Dot */
+.dt-badge__dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: var(--dt-radius-full);
+  background-color: currentColor;
+  flex-shrink: 0;
+}
+</style>

package/src/registry/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as DtBadge } from './DtBadge.vue'
+export type { BadgeVariant, BadgeSize } from './DtBadge.vue'