@dinachi/cli 0.5.1 → 0.6.0

package/dist/index.js

@@ -102,6 +102,13 @@ function getComponentRegistry() {
       dependencies: ["@base-ui/react", "class-variance-authority"],
       utilityDependencies: ["cn"]
     },
+    badge: {
+      name: "badge",
+      description: "A small status indicator for highlighting information.",
+      files: [{ name: "badge.tsx" }, { name: "index.ts" }],
+      dependencies: ["@base-ui/react", "class-variance-authority"],
+      utilityDependencies: ["cn"]
+    },
     button: {
       name: "button",
       description: "A customizable button component with multiple variants.",
@@ -109,6 +116,13 @@ function getComponentRegistry() {
       dependencies: ["@base-ui/react", "class-variance-authority"],
       utilityDependencies: ["cn", "variants"]
     },
+    card: {
+      name: "card",
+      description: "A container for grouping related content with header, body, and footer sections.",
+      files: [{ name: "card.tsx" }, { name: "index.ts" }],
+      dependencies: [],
+      utilityDependencies: ["cn"]
+    },
     checkbox: {
       name: "checkbox",
       description: "A control that allows the user to select one or more options from a set.",
@@ -292,6 +306,13 @@ function getComponentRegistry() {
       dependencies: ["@base-ui/react"],
       utilityDependencies: ["cn"]
     },
+    textarea: {
+      name: "textarea",
+      description: "A multi-line text input for longer form content.",
+      files: [{ name: "textarea.tsx" }, { name: "index.ts" }],
+      dependencies: [],
+      utilityDependencies: ["cn"]
+    },
     toast: {
       name: "toast",
       description: "Generates toast notifications with support for different types, promises, actions, and global management.",
@@ -946,6 +967,275 @@ export function cn(...inputs: ClassValue[]) {
 }
 `;
 }
+function detectTailwindMajorVersion(projectRoot) {
+  const packageJsonPath = path4.join(projectRoot, "package.json");
+  if (!fs4.existsSync(packageJsonPath)) return 4;
+  try {
+    const raw = fs4.readFileSync(packageJsonPath, "utf-8");
+    const packageJson = JSON.parse(raw);
+    const deps = { ...packageJson.dependencies ?? {}, ...packageJson.devDependencies ?? {} };
+    const twVersion = deps.tailwindcss;
+    if (!twVersion) return 4;
+    const match = twVersion.match(/(\d+)/);
+    return match ? parseInt(match[1], 10) : 4;
+  } catch {
+    return 4;
+  }
+}
+function getThemeCSS(tailwindMajor, mode) {
+  const lightVars = `:root {
+  --background: oklch(0.986 0.0034 145.5499);
+  --foreground: oklch(0.1459 0.0497 142.4953);
+  --card: oklch(0.9781 0.0017 145.5621);
+  --card-foreground: oklch(0.1459 0.0497 142.4953);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1324 0.0033 145.3864);
+  --primary: oklch(0.1324 0.0033 145.3864);
+  --primary-foreground: oklch(0.9729 0.0101 145.4971);
+  --secondary: oklch(0.9248 0.0051 145.5339);
+  --secondary-foreground: oklch(0.1324 0.0033 145.3864);
+  --muted: oklch(0.9631 0.0017 145.5619);
+  --muted-foreground: oklch(0.1849 0.0629 142.4953);
+  --accent: oklch(0.9248 0.0051 145.5339);
+  --accent-foreground: oklch(0.1459 0.0497 142.4953);
+  --destructive: oklch(0.5248 0.1368 20.8317);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9239 0.0017 145.5613);
+  --input: oklch(0.8481 0.0105 145.4823);
+  --ring: oklch(0.1459 0.0497 142.4953);
+  --radius: 0.625rem;
+}`;
+  const darkVars = `.dark {
+  --background: oklch(0.1149 0 0);
+  --foreground: oklch(0.7999 0.0218 134.1191);
+  --card: oklch(0.133 0.0021 196.9098);
+  --card-foreground: oklch(0.7996 0.023 132.5769);
+  --popover: oklch(0.1663 0.0138 135.2766);
+  --popover-foreground: oklch(0.9742 0.0101 131.3574);
+  --primary: oklch(0.9729 0.0101 145.4971);
+  --primary-foreground: oklch(0.1324 0.0033 145.3864);
+  --secondary: oklch(0.1844 0.0062 122.0354);
+  --secondary-foreground: oklch(0.8009 0.0399 133.2927);
+  --muted: oklch(0.1579 0.0017 196.9874);
+  --muted-foreground: oklch(0.7897 0.0171 133.8518);
+  --accent: oklch(0.1391 0.0113 136.9894);
+  --accent-foreground: oklch(0.9742 0.0101 131.3574);
+  --destructive: oklch(0.2258 0.0524 12.6119);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.1811 0.0128 129.2819);
+  --input: oklch(0.2213 0.0193 135.2915);
+  --ring: oklch(0.9248 0.0051 145.5339);
+}`;
+  const parts = [];
+  if (tailwindMajor >= 4) {
+    if (mode === "full") {
+      parts.push('@import "tailwindcss";');
+    }
+    parts.push(lightVars, darkVars);
+    parts.push(`@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}`);
+    parts.push(`@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`);
+  } else {
+    if (mode === "full") {
+      parts.push("@tailwind base;\n@tailwind components;\n@tailwind utilities;");
+    }
+    parts.push(lightVars, darkVars);
+    parts.push(`@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`);
+  }
+  return parts.join("\n\n") + "\n";
+}
+async function injectThemeCSS(cssFilePath, tailwindMajor) {
+  await fs4.ensureDir(path4.dirname(cssFilePath));
+  if (fs4.existsSync(cssFilePath)) {
+    const existing = await fs4.readFile(cssFilePath, "utf-8");
+    if (existing.includes("--primary:")) {
+      return { path: cssFilePath, skipped: true };
+    }
+    const theme2 = getThemeCSS(tailwindMajor, "append");
+    await fs4.writeFile(cssFilePath, existing.trimEnd() + "\n\n" + theme2);
+    return { path: cssFilePath, updated: true };
+  }
+  const theme = getThemeCSS(tailwindMajor, "full");
+  await fs4.writeFile(cssFilePath, theme);
+  return { path: cssFilePath, created: true };
+}
+function getTW3ColorExtend() {
+  return `colors: {
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+        },
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },`;
+}
+function createTW3Config(isCjs) {
+  const colorExtend = getTW3ColorExtend();
+  if (isCjs) {
+    return `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      ${colorExtend}
+    },
+  },
+  plugins: [],
+}
+`;
+  }
+  return `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      ${colorExtend}
+    },
+  },
+  plugins: [],
+}
+`;
+}
+async function ensureTW3ColorConfig(projectRoot, configFileName) {
+  const candidates = [
+    configFileName,
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs"
+  ];
+  let configPath = null;
+  for (const candidate of candidates) {
+    const candidatePath = path4.join(projectRoot, candidate);
+    if (fs4.existsSync(candidatePath)) {
+      configPath = candidatePath;
+      break;
+    }
+  }
+  if (!configPath) {
+    configPath = path4.join(projectRoot, configFileName);
+    const ext = path4.extname(configPath);
+    const isCjs = ext === ".cjs";
+    await fs4.writeFile(configPath, createTW3Config(isCjs));
+    return { path: configPath, created: true };
+  }
+  const content = await fs4.readFile(configPath, "utf-8");
+  if (content.includes('"var(--primary)"') || content.includes("'var(--primary)'")) {
+    return { path: configPath, skipped: true };
+  }
+  const colorExtend = getTW3ColorExtend();
+  const extendMatch = content.match(/extend\s*:\s*\{/);
+  if (extendMatch && extendMatch.index !== void 0) {
+    const insertPos = extendMatch.index + extendMatch[0].length;
+    const updated = content.slice(0, insertPos) + "\n      " + colorExtend + content.slice(insertPos);
+    await fs4.writeFile(configPath, updated);
+    return { path: configPath, updated: true };
+  }
+  const themeMatch = content.match(/theme\s*:\s*\{/);
+  if (themeMatch && themeMatch.index !== void 0) {
+    const insertPos = themeMatch.index + themeMatch[0].length;
+    const extendBlock = `
+    extend: {
+      ${colorExtend}
+    },`;
+    const updated = content.slice(0, insertPos) + extendBlock + content.slice(insertPos);
+    await fs4.writeFile(configPath, updated);
+    return { path: configPath, updated: true };
+  }
+  const closingBrace = content.lastIndexOf("}");
+  if (closingBrace !== -1) {
+    const before = content.slice(0, closingBrace).trimEnd();
+    const needsComma = !before.endsWith(",") && !before.endsWith("{");
+    const themeBlock = `${needsComma ? "," : ""}
+  theme: {
+    extend: {
+      ${colorExtend}
+    },
+  },
+`;
+    const updated = before + themeBlock + content.slice(closingBrace);
+    await fs4.writeFile(configPath, updated);
+    return { path: configPath, updated: true };
+  }
+  return { path: configPath, skipped: true };
+}
 function readJsonConfig(filePath) {
   try {
     const content = fs4.readFileSync(filePath, "utf-8");
@@ -1041,6 +1331,15 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
     await fs4.ensureDir(utilsDirPath);
     const utilsContent = createUtilsFileContent();
     await fs4.writeFile(utilsFilePath, utilsContent);
+    spinner.text = "Setting up color theme...";
+    const tailwindMajor = detectTailwindMajorVersion(projectRoot);
+    const cssFilePath = path4.resolve(projectRoot, projectConfig.cssPath);
+    const themeCSSResult = await injectThemeCSS(cssFilePath, tailwindMajor);
+    let twColorConfigResult = null;
+    if (tailwindMajor < 4) {
+      spinner.text = "Configuring Tailwind color mappings...";
+      twColorConfigResult = await ensureTW3ColorConfig(projectRoot, projectConfig.tailwindConfig);
+    }
     spinner.text = "Installing dependencies...";
     const deps = ["class-variance-authority", "clsx", "tailwind-merge"];
     if (!options.skipInstall) {
@@ -1091,6 +1390,22 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
         `  ${chalk2.yellow("!")} Could not update ${aliasConfigUpdate.path}. Configure @/* manually if you use alias imports.`
       );
     }
+    if (themeCSSResult.created) {
+      console.log(`  ${chalk2.green("+")} Created ${projectConfig.cssPath} with color theme (light + dark)`);
+    } else if (themeCSSResult.updated) {
+      console.log(`  ${chalk2.blue("~")} Updated ${projectConfig.cssPath} with color theme (light + dark)`);
+    } else if (themeCSSResult.skipped) {
+      console.log(`  ${chalk2.gray("-")} Color theme already configured in ${projectConfig.cssPath}`);
+    }
+    if (twColorConfigResult) {
+      if (twColorConfigResult.created) {
+        console.log(`  ${chalk2.green("+")} Created ${projectConfig.tailwindConfig} with color mappings`);
+      } else if (twColorConfigResult.updated) {
+        console.log(`  ${chalk2.blue("~")} Updated ${projectConfig.tailwindConfig} with color mappings`);
+      } else if (twColorConfigResult.skipped) {
+        console.log(`  ${chalk2.gray("-")} Color mappings already in ${projectConfig.tailwindConfig}`);
+      }
+    }
     if (!projectConfig.isTypeScript) {
       console.log();
       console.log(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [
@@ -27,18 +27,25 @@
     "templates"
   ],
   "dependencies": {
-    "commander": "^14.0.2",
     "chalk": "^5.3.0",
-    "ora": "^9.0.0",
-    "prompts": "^2.4.2",
+    "commander": "^14.0.2",
+    "execa": "^9.6.1",
     "fs-extra": "^11.2.0",
     "node-fetch": "^3.3.2",
-    "execa": "^9.6.1",
+    "ora": "^9.0.0",
+    "prompts": "^2.4.2",
     "ts-morph": "^27.0.2"
   },
   "devDependencies": {
+    "@base-ui/react": "1.2.0",
     "@types/fs-extra": "^11.0.4",
     "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "0.552.0",
+    "react": "19.2.4",
+    "tailwind-merge": "^3.5.0",
     "tsup": "^8.0.1",
     "typescript": "^5.5.3"
   },

package/templates/accordion/accordion.tsx

@@ -1,10 +1,15 @@
-// @ts-nocheck
 import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 import { ChevronDown } from "lucide-react";
 
-const Accordion = BaseAccordion.Root;
+const Accordion = React.forwardRef<
+  React.ComponentRef<typeof BaseAccordion.Root>,
+  React.ComponentProps<typeof BaseAccordion.Root>
+>(({ className, ...props }, ref) => (
+  <BaseAccordion.Root ref={ref} className={cn(className)} {...props} />
+));
+Accordion.displayName = "Accordion";
 
 const AccordionItem = React.forwardRef<
   HTMLDivElement,

package/templates/alert-dialog/alert-dialog.tsx

@@ -1,9 +1,8 @@
-// @ts-nocheck
-import * as React from "react"
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react";
+import { cn } from "@/lib/utils";
 
-const AlertDialog = BaseAlertDialog.Root
+const AlertDialog = BaseAlertDialog.Root;
 
 const AlertDialogTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -21,10 +20,10 @@ const AlertDialogTrigger = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogTrigger.displayName = "AlertDialogTrigger"
+));
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
 
-const AlertDialogPortal = BaseAlertDialog.Portal
+const AlertDialogPortal = BaseAlertDialog.Portal;
 
 const AlertDialogBackdrop = React.forwardRef<
   HTMLDivElement,
@@ -40,8 +39,8 @@ const AlertDialogBackdrop = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogBackdrop.displayName = "AlertDialogBackdrop"
+));
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
 
 const AlertDialogPopup = React.forwardRef<
   HTMLDivElement,
@@ -58,8 +57,8 @@ const AlertDialogPopup = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogPopup.displayName = "AlertDialogPopup"
+));
+AlertDialogPopup.displayName = "AlertDialogPopup";
 
 const AlertDialogTitle = React.forwardRef<
   HTMLHeadingElement,
@@ -70,8 +69,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = "AlertDialogTitle"
+));
+AlertDialogTitle.displayName = "AlertDialogTitle";
 
 const AlertDialogDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -82,8 +81,8 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-AlertDialogDescription.displayName = "AlertDialogDescription"
+));
+AlertDialogDescription.displayName = "AlertDialogDescription";
 
 const AlertDialogAction = React.forwardRef<
   HTMLButtonElement,
@@ -99,8 +98,8 @@ const AlertDialogAction = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogAction.displayName = "AlertDialogAction"
+));
+AlertDialogAction.displayName = "AlertDialogAction";
 
 const AlertDialogCancel = React.forwardRef<
   HTMLButtonElement,
@@ -116,8 +115,8 @@ const AlertDialogCancel = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = "AlertDialogCancel"
+));
+AlertDialogCancel.displayName = "AlertDialogCancel";
 
 const AlertDialogHeader = ({
   className,
@@ -130,8 +129,8 @@ const AlertDialogHeader = ({
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -144,8 +143,8 @@ const AlertDialogFooter = ({
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 export {
   AlertDialog,
@@ -159,4 +158,4 @@ export {
   AlertDialogCancel,
   AlertDialogHeader,
   AlertDialogFooter,
-} 
+}; 

package/templates/alert-dialog/index.ts

@@ -10,4 +10,4 @@ export {
   AlertDialogCancel,
   AlertDialogHeader,
   AlertDialogFooter,
-} from "./alert-dialog" 
+} from "./alert-dialog"; 

package/templates/autocomplete/autocomplete.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/avatar/avatar.tsx

@@ -1,9 +1,7 @@
-// @ts-nocheck
 import * as React from "react";
 import { Avatar as BaseAvatar } from "@base-ui/react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils"
-
+import { cn } from "@/lib/utils";
 
 const avatarVariants = cva(
   "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",