@dinachi/cli 0.6.1 → 0.6.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DinachiUI
+
+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/dist/index.js

@@ -11,6 +11,7 @@ import path3 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import ora from "ora";
 import chalk from "chalk";
+import prompts from "prompts";
 
 // src/utils/registry.ts
 import fs from "fs-extra";
@@ -374,25 +375,14 @@ var LOCK_FILE_MAP = [
   { file: "yarn.lock", manager: "yarn" },
   { file: "package-lock.json", manager: "npm" }
 ];
-function walkUpDirectories(startDir) {
-  const dirs = [];
-  let current = path2.resolve(startDir);
-  while (true) {
-    dirs.push(current);
-    const parent = path2.dirname(current);
-    if (parent === current) {
-      break;
+function detectPackageManager(startDir = process.cwd()) {
+  for (const entry of LOCK_FILE_MAP) {
+    if (fs2.existsSync(path2.join(startDir, entry.file))) {
+      return entry.manager;
     }
-    current = parent;
   }
-  return dirs;
-}
-function detectManagerFromPackageJson(startDir) {
-  for (const dir of walkUpDirectories(startDir)) {
-    const packageJsonPath = path2.join(dir, "package.json");
-    if (!fs2.existsSync(packageJsonPath)) {
-      continue;
-    }
+  const packageJsonPath = path2.join(startDir, "package.json");
+  if (fs2.existsSync(packageJsonPath)) {
     try {
       const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
       const value = packageJson.packageManager ?? "";
@@ -401,21 +391,6 @@ function detectManagerFromPackageJson(startDir) {
       if (value.startsWith("bun@")) return "bun";
       if (value.startsWith("npm@")) return "npm";
     } catch {
-      continue;
-    }
-  }
-  return null;
-}
-function detectPackageManager(startDir = process.cwd()) {
-  const packageJsonManager = detectManagerFromPackageJson(startDir);
-  if (packageJsonManager) {
-    return packageJsonManager;
-  }
-  for (const dir of walkUpDirectories(startDir)) {
-    for (const entry of LOCK_FILE_MAP) {
-      if (fs2.existsSync(path2.join(dir, entry.file))) {
-        return entry.manager;
-      }
     }
   }
   return "npm";
@@ -699,7 +674,8 @@ async function ensureTW4Plugin(deps, cssFilePath) {
   let updated;
   if (importMatch) {
     updated = content.replace(importMatch[0], `${importMatch[0].trimEnd()}
-${pluginLine}`);
+${pluginLine}
+`);
   } else {
     updated = `${pluginLine}
 ${content}`;
@@ -769,6 +745,19 @@ ${updatedContent}`;
 function escapeRegex(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function extractExportBlocks(content) {
+  const results = [];
+  const regex = /export\s+(?:type\s+)?{[^}]*}\s*from\s+['"]\.\/([^'"]+)['"]\s*;?/g;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    results.push({ block: match[0].trimEnd(), modulePath: match[1] });
+  }
+  const starRegex = /export\s+\*\s+from\s+['"]\.\/([^'"]+)['"]\s*;?/g;
+  while ((match = starRegex.exec(content)) !== null) {
+    results.push({ block: match[0].trimEnd(), modulePath: match[1] });
+  }
+  return results;
+}
 async function handleIndexFile(sourcePath, targetPath, allFilesAdded, targetDir) {
   const templateContent = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
   if (!fs3.existsSync(targetPath)) {
@@ -777,28 +766,27 @@ async function handleIndexFile(sourcePath, targetPath, allFilesAdded, targetDir)
     return;
   }
   const existingContent = await fs3.readFile(targetPath, "utf-8");
-  const exportLines = templateContent.split("\n").map((line) => line.trim()).filter((line) => /^export\s+/.test(line) && /from\s+['"]\.\/[^'"]+['"]/.test(line));
-  const linesToAppend = [];
-  for (const line of exportLines) {
-    const match = line.match(/from\s+['"]\.\/([^'"]+)['"]/);
-    if (!match) {
-      continue;
-    }
-    const modulePath = match[1];
+  const exportBlocks = extractExportBlocks(templateContent);
+  const blocksToAppend = [];
+  for (const { block, modulePath } of exportBlocks) {
     const modulePathPattern = new RegExp(`from\\s+['"]\\./${escapeRegex(modulePath)}['"]`);
     if (modulePathPattern.test(existingContent)) {
       continue;
     }
-    linesToAppend.push(line.endsWith(";") ? line : `${line};`);
+    const normalized = block.endsWith(";") ? block : `${block};`;
+    blocksToAppend.push(normalized);
   }
-  if (linesToAppend.length === 0) {
+  if (blocksToAppend.length === 0) {
     return;
   }
   const updatedContent = `${existingContent.trimEnd()}
-${linesToAppend.join("\n")}
+${blocksToAppend.join("\n")}
 `;
   await fs3.writeFile(targetPath, updatedContent);
-  allFilesAdded.push({ name: "index.ts", path: path3.join(targetDir, "index.ts") });
+  const indexPath = path3.join(targetDir, "index.ts");
+  if (!allFilesAdded.some((f) => f.path === indexPath)) {
+    allFilesAdded.push({ name: "index.ts", path: indexPath });
+  }
 }
 var addCommand = new Command("add").description("Add a component to your project").argument("[components...]", "Names of the components to add (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").option("--skip-install", "Skip package installation").action(
   async (componentNames, options) => {
@@ -901,8 +889,19 @@ var addCommand = new Command("add").description("Add a component to your project
             continue;
           }
           if (fs3.existsSync(targetPath) && !options.overwrite) {
-            spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
-            continue;
+            spinner.stop();
+            const { overwrite } = await prompts({
+              type: "confirm",
+              name: "overwrite",
+              message: `${file.name} already exists. Overwrite?`,
+              initial: false
+            });
+            if (!overwrite) {
+              console.log(`  ${chalk.yellow("\u2298")} Skipped ${file.name}`);
+              spinner.start();
+              continue;
+            }
+            spinner.start();
           }
           const templateContent = stripTemplateDirective(await fs3.readFile(sourcePath, "utf-8"));
           const rewrittenContent = rewriteTemplateImports(templateContent, targetPath, utilsFilePath, libDir);
@@ -996,7 +995,7 @@ import { Command as Command2 } from "commander";
 import { execSync as execSync2 } from "child_process";
 import fs4 from "fs-extra";
 import path4 from "path";
-import prompts from "prompts";
+import prompts2 from "prompts";
 import chalk2 from "chalk";
 import ora2 from "ora";
 function normalizeProjectPath(inputPath, projectRoot) {
@@ -1032,7 +1031,16 @@ function detectTailwindMajorVersion2(projectRoot) {
     return 4;
   }
 }
-function getThemeCSS(tailwindMajor, mode) {
+var DINACHI_THEME_PREFIXES = ["--color-", "--radius-"];
+function extractPreservedThemeVars(css) {
+  const themeMatch = css.match(/@theme\s+inline\s*\{([^}]*)\}/);
+  if (!themeMatch) return [];
+  return themeMatch[1].split("\n").map((line) => line.trim()).filter((line) => {
+    if (!line || line.startsWith("//") || line.startsWith("/*")) return false;
+    return line.startsWith("--") && !DINACHI_THEME_PREFIXES.some((p) => line.startsWith(p));
+  });
+}
+function getThemeCSS(tailwindMajor, mode, preservedThemeVars = []) {
   const lightVars = `:root {
   --background: oklch(0.986 0.0034 145.5499);
   --foreground: oklch(0.1459 0.0497 142.4953);
@@ -1082,6 +1090,7 @@ function getThemeCSS(tailwindMajor, mode) {
       parts.push('@import "tailwindcss";');
     }
     parts.push(lightVars, darkVars);
+    const preservedLines = preservedThemeVars.length > 0 ? "\n" + preservedThemeVars.map((v) => `  ${v}`).join("\n") : "";
     parts.push(`@theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -1105,7 +1114,7 @@ function getThemeCSS(tailwindMajor, mode) {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 4px);${preservedLines}
 }`);
     parts.push(`@layer base {
   * {
@@ -1148,9 +1157,10 @@ async function injectThemeCSS(cssFilePath, tailwindMajor) {
     if (existing.includes("--primary:")) {
       return { path: cssFilePath, skipped: true };
     }
+    const preservedVars = tailwindMajor >= 4 ? extractPreservedThemeVars(existing) : [];
     const cleaned = stripConflictingCSS(existing);
-    const theme2 = getThemeCSS(tailwindMajor, "append");
-    const result = cleaned.length > 0 ? cleaned + "\n\n" + theme2 : getThemeCSS(tailwindMajor, "full");
+    const theme2 = getThemeCSS(tailwindMajor, "append", preservedVars);
+    const result = cleaned.length > 0 ? cleaned + "\n\n" + theme2 : getThemeCSS(tailwindMajor, "full", preservedVars);
     await fs4.writeFile(cssFilePath, result);
     return { path: cssFilePath, updated: true };
   }
@@ -1329,7 +1339,9 @@ async function ensureAtAlias(projectRoot, srcDir, isTypeScript) {
     }
   }
   const aliasTarget = srcDir === "." ? "*" : `${srcDir}/*`;
-  const alreadyConfigured = compilerOptions.baseUrl === "." && Array.isArray(paths["@/*"]) && paths["@/*"][0] === aliasTarget;
+  const aliasTargetAlt = srcDir === "." ? "./*" : `./${srcDir}/*`;
+  const existingAlias = paths["@/*"]?.[0];
+  const alreadyConfigured = compilerOptions.baseUrl === "." && existingAlias === aliasTarget || existingAlias === aliasTargetAlt;
   if (alreadyConfigured) {
     return { path: configPath };
   }
@@ -1364,7 +1376,7 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
   const projectConfig = detectProjectType();
   console.log(chalk2.gray(`Detected ${projectConfig.framework} project`));
   console.log();
-  const response = await prompts([
+  const response = await prompts2([
     {
       type: "text",
       name: "componentsPath",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [
@@ -15,7 +15,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dinachi/ui.git"
+    "url": "git+https://github.com/raymond-UI/dinachiUI.git"
   },
   "homepage": "https://dinachi.dev",
   "bin": {

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

@@ -33,7 +33,7 @@ const AlertDialogBackdrop = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80",
-      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
       "transition-all duration-150",
       className
     )}
@@ -50,8 +50,8 @@ const AlertDialogPopup = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg",
-      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
-      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+      "data-starting-style:scale-95 data-starting-style:opacity-0",
+      "data-ending-style:scale-95 data-ending-style:opacity-0",
       "transition-all duration-150",
       className
     )}

package/templates/autocomplete/autocomplete.tsx

@@ -71,24 +71,30 @@ AutocompleteClear.displayName = "AutocompleteClear"
 
 const AutocompleteContent = React.forwardRef<
   React.ComponentRef<typeof AutocompletePrimitive.Popup>,
-  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Popup>
->(({ className, ...props }, ref) => (
-  <AutocompletePortal>
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Popup> & {
+    readonly portal?: boolean
+  }
+>(({ className, portal = true, ...props }, ref) => {
+  const content = (
     <AutocompletePrimitive.Positioner sideOffset={4}>
       <AutocompletePrimitive.Popup
         ref={ref}
         className={cn(
-          "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-          "origin-[var(--transform-origin)] outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          "relative z-50 min-w-48 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "origin-(--transform-origin) outline-none",
+          "data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95",
+          "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
           className
         )}
         {...props}
       />
     </AutocompletePrimitive.Positioner>
-  </AutocompletePortal>
-))
+  )
+
+  if (!portal) return content
+
+  return <AutocompletePortal>{content}</AutocompletePortal>
+})
 AutocompleteContent.displayName = "AutocompleteContent"
 
 const AutocompleteList = React.forwardRef<
@@ -113,8 +119,8 @@ const AutocompleteItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -151,7 +157,7 @@ const AutocompleteEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AutocompletePrimitive.Empty
     ref={ref}
-    className={cn("px-2 py-6 text-center text-sm text-muted-foreground", className)}
+    className={cn("p-2 text-center text-sm text-muted-foreground", className)}
     {...props}
   />
 ))

package/templates/button/button.tsx

@@ -39,11 +39,13 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, render, nativeButton, ...props }, ref) => {
     return (
       <BaseButton
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        render={render}
+        nativeButton={render ? (nativeButton ?? false) : nativeButton}
         {...props}
       />
     )

package/templates/combobox/combobox.tsx

@@ -71,24 +71,30 @@ ComboboxClear.displayName = "ComboboxClear"
 
 const ComboboxContent = React.forwardRef<
   React.ComponentRef<typeof ComboboxPrimitive.Popup>,
-  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup>
->(({ className, ...props }, ref) => (
-  <ComboboxPortal>
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> & {
+    readonly portal?: boolean
+  }
+>(({ className, portal = true, ...props }, ref) => {
+  const content = (
     <ComboboxPrimitive.Positioner sideOffset={4}>
       <ComboboxPrimitive.Popup
         ref={ref}
         className={cn(
-          "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-          "origin-[var(--transform-origin)] outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          "relative z-50 min-w-48 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "origin-(--transform-origin) outline-none",
+          "data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95",
+          "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
           className
         )}
         {...props}
       />
     </ComboboxPrimitive.Positioner>
-  </ComboboxPortal>
-))
+  )
+
+  if (!portal) return content
+
+  return <ComboboxPortal>{content}</ComboboxPortal>
+})
 ComboboxContent.displayName = "ComboboxContent"
 
 const ComboboxList = React.forwardRef<
@@ -113,8 +119,8 @@ const ComboboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-10",
       className
     )}
@@ -156,7 +162,7 @@ const ComboboxEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ComboboxPrimitive.Empty
     ref={ref}
-    className={cn("px-2 py-6 text-center text-sm text-muted-foreground", className)}
+    className={cn("p-2 text-center text-sm text-muted-foreground", className)}
     {...props}
   />
 ))

package/templates/menu/menu.tsx

@@ -30,8 +30,8 @@ const MenuTrigger = React.forwardRef<
       "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium",
       "hover:bg-accent hover:text-accent-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-popup-open:bg-accent data-popup-open:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
@@ -75,10 +75,10 @@ const MenuContent = React.forwardRef<
       <MenuPrimitive.Popup
         ref={ref}
         className={cn(
-          "z-50 min-w-[10rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          "origin-[var(--transform-origin)] outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          "z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "origin-(--transform-origin) outline-none",
+          "data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95",
+          "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
           className
         )}
         {...props}
@@ -99,8 +99,8 @@ const MenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -118,8 +118,8 @@ const MenuCheckboxItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       className
     )}
     checked={checked}
@@ -150,14 +150,14 @@ const MenuRadioItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       className
     )}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <Circle className="h-2 w-2 fill-current data-[checked]:block data-[unchecked]:hidden" />
+      <Circle className="h-2 w-2 fill-current data-checked:block data-unchecked:hidden" />
     </span>
     {children}
   </MenuPrimitive.RadioItem>
@@ -226,9 +226,9 @@ const MenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
-      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      "data-popup-open:bg-accent data-popup-open:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -249,10 +249,10 @@ const MenuSubContent = React.forwardRef<
       <MenuPrimitive.Popup
         ref={ref}
         className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          "origin-[var(--transform-origin)] outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "origin-(--transform-origin) outline-none",
+          "data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95",
+          "data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
           className
         )}
         {...props}

package/templates/menubar/index.ts

@@ -9,6 +9,7 @@ export {
   MenubarCheckboxItem,
   MenubarRadioGroup,
   MenubarRadioItem,
+  MenubarGroup,
   MenubarLabel,
   MenubarSeparator,
   MenubarShortcut,

package/templates/menubar/menubar.tsx

@@ -175,6 +175,14 @@ const MenubarRadioItem = React.forwardRef<
 ))
 MenubarRadioItem.displayName = "MenubarRadioItem"
 
+const MenubarGroup = React.forwardRef<
+  React.ComponentRef<typeof Menu.Group>,
+  React.ComponentProps<typeof Menu.Group>
+>(({ className, ...props }, ref) => (
+  <Menu.Group ref={ref} className={cn(className)} {...props} />
+))
+MenubarGroup.displayName = "MenubarGroup"
+
 const MenubarLabel = React.forwardRef<
   React.ComponentRef<typeof Menu.GroupLabel>,
   React.ComponentProps<typeof Menu.GroupLabel> & {
@@ -293,6 +301,7 @@ export {
   MenubarCheckboxItem,
   MenubarRadioGroup,
   MenubarRadioItem,
+  MenubarGroup,
   MenubarLabel,
   MenubarSeparator,
   MenubarShortcut,

package/templates/popover/popover.tsx

@@ -17,10 +17,11 @@ const PopoverContent = React.forwardRef<
     readonly sideOffset?: number
     readonly align?: "start" | "center" | "end"
     readonly side?: "top" | "bottom" | "left" | "right"
+    readonly portal?: boolean
   }
->(({ className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Positioner 
+>(({ className, align = "center", side = "bottom", sideOffset = 8, portal = true, ...props }, ref) => {
+  const content = (
+    <PopoverPrimitive.Positioner
       align={align}
       side={side}
       sideOffset={sideOffset}
@@ -29,17 +30,21 @@ const PopoverContent = React.forwardRef<
         ref={ref}
         className={cn(
           "z-50 rounded-lg border bg-popover px-6 py-4 text-popover-foreground shadow-lg outline-none",
-          "origin-[var(--transform-origin)]",
-          "data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
-          "data-[ending-style]:scale-90 data-[ending-style]:opacity-0",
+          "origin-(--transform-origin)",
+          "data-starting-style:scale-90 data-starting-style:opacity-0",
+          "data-ending-style:scale-90 data-ending-style:opacity-0",
           "transition-[transform,opacity] duration-150",
           className
         )}
         {...props}
       />
     </PopoverPrimitive.Positioner>
-  </PopoverPrimitive.Portal>
-))
+  )
+
+  if (!portal) return content
+
+  return <PopoverPrimitive.Portal>{content}</PopoverPrimitive.Portal>
+})
 PopoverContent.displayName = "PopoverContent"
 
 // Optimized PopoverArrow
@@ -113,7 +118,7 @@ const PopoverBackdrop = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-40 bg-black/50",
-      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
       "transition-opacity duration-150",
       className
     )}

package/templates/radio/radio.tsx

@@ -21,7 +21,7 @@ const Radio = React.forwardRef<
   <RadioPrimitive.Root
     ref={ref}
     className={cn(
-      "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background",
+      "flex items-center justify-center aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
       className

package/templates/select/select.tsx

@@ -39,9 +39,10 @@ const SelectContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {
     readonly position?: "item-aligned" | "popper"
     readonly sideOffset?: number
+    readonly portal?: boolean
   }
->(({ className, children, position = "popper", sideOffset = 4, ...props }, ref) => (
-  <SelectPrimitive.Portal>
+>(({ className, children, position = "popper", sideOffset = 4, portal = true, ...props }, ref) => {
+  const content = (
     <SelectPrimitive.Positioner
       sideOffset={sideOffset}
       alignItemWithTrigger={position === "item-aligned"}
@@ -49,7 +50,7 @@ const SelectContent = React.forwardRef<
       <SelectPrimitive.Popup
         ref={ref}
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
@@ -65,8 +66,12 @@ const SelectContent = React.forwardRef<
         <SelectScrollDownArrow />
       </SelectPrimitive.Popup>
     </SelectPrimitive.Positioner>
-  </SelectPrimitive.Portal>
-))
+  )
+
+  if (!portal) return content
+
+  return <SelectPrimitive.Portal>{content}</SelectPrimitive.Portal>
+})
 SelectContent.displayName = "SelectContent"
 
 // Add scroll arrows for better UX with large lists
@@ -143,7 +148,7 @@ const SelectItem = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none",
-        "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
         // Dynamic padding based on indicator presence and position
         showIndicator && isLeftIndicator && "pl-8",
         showIndicator && isRightIndicator && "pr-8",