sigma-ui 1.1.2 → 1.2.0

package/dist/index.js

@@ -139,6 +139,43 @@ async function transform(opts) {
   return sourceFile?.getFullText();
 }
 
+// src/utils/transformers/transform-component-naming.ts
+function pascalToKebab(pascalCase) {
+  return pascalCase.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+}
+function kebabToPascal(kebabCase) {
+  return kebabCase.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function transformDirectoryName(dirName, naming) {
+  if (naming === "kebab-case") {
+    return dirName;
+  }
+  return kebabToPascal(dirName);
+}
+function transformFileName(fileName, naming) {
+  if (naming === "pascal-case") {
+    return fileName;
+  }
+  if (fileName === "index.ts") {
+    return fileName;
+  }
+  const extension = fileName.includes(".") ? fileName.slice(fileName.lastIndexOf(".")) : "";
+  const baseName = fileName.includes(".") ? fileName.slice(0, fileName.lastIndexOf(".")) : fileName;
+  return pascalToKebab(baseName) + extension;
+}
+function transformLocalVueImports(content, naming) {
+  if (naming === "pascal-case") {
+    return content;
+  }
+  return content.replace(
+    /from\s+['"]\.\/([\w-]+)\.vue['"]/g,
+    (match, componentName) => {
+      const kebabName = pascalToKebab(componentName);
+      return `from './${kebabName}.vue'`;
+    }
+  );
+}
+
 // src/utils/get-config.ts
 import { existsSync as existsSync2 } from "node:fs";
 import process2 from "node:process";
@@ -217,6 +254,7 @@ var registryBaseColorSchema = z.object({
     })
   })
 });
+var componentNamingSchema = z.enum(["pascal-case", "kebab-case"]).default("pascal-case");
 var rawConfigSchema = z.object({
   $schema: z.string().optional(),
   styleSystem: commonFields.styleSystem,
@@ -233,7 +271,8 @@ var rawConfigSchema = z.object({
     utils: z.string().default(""),
     components: z.string()
   }),
-  generatePreflight: z.boolean().optional().default(true)
+  generatePreflight: z.boolean().optional().default(true),
+  componentNaming: componentNamingSchema
 });
 var configSchema = rawConfigSchema.extend({
   resolvedPaths: z.object({
@@ -245,7 +284,8 @@ var configSchema = rawConfigSchema.extend({
 });
 var initOptionsSchema = z.object({
   cwd: commonFields.cwd,
-  yes: commonFields.yes
+  yes: commonFields.yes,
+  defaults: z.boolean().default(false)
 });
 var addOptionsSchema = z.object({
   components: commonFields.components,
@@ -952,7 +992,9 @@ async function processItem(item, targetDir, options8, config, baseColor, cwd, se
     if (!existsSync3(targetDir)) {
       await fs3.mkdir(targetDir, { recursive: true });
     }
-    const componentPath = path5.resolve(targetDir, item.name);
+    const componentNaming = config.componentNaming ?? "pascal-case";
+    const transformedDirName = transformDirectoryName(item.name, componentNaming);
+    const componentPath = path5.resolve(targetDir, transformedDirName);
     const existingComponent = item.files.filter(
       (file) => existsSync3(path5.resolve(componentPath, file.name))
     );
@@ -1010,19 +1052,22 @@ async function writeComponentFiles(item, componentDir, config, baseColor) {
   if (!existsSync3(componentDir)) {
     await fs3.mkdir(componentDir, { recursive: true });
   }
+  const componentNaming = config.componentNaming ?? "pascal-case";
   const files = item.files.map((file) => ({
     ...file,
-    path: path5.resolve(componentDir, file.name)
+    originalName: file.name,
+    name: transformFileName(file.name, componentNaming),
+    path: path5.resolve(componentDir, transformFileName(file.name, componentNaming))
   }));
   for (const file of files) {
+    const fileContent = transformLocalVueImports(file.content, componentNaming);
     const content = await transform({
       filename: file.path,
-      raw: file.content,
+      raw: fileContent,
       config,
       baseColor
     });
-    const filePath = file.path;
-    await fs3.writeFile(filePath, content);
+    await fs3.writeFile(file.path, content);
   }
 }
 
@@ -24108,55 +24153,82 @@ import { existsSync as existsSync5 } from "node:fs";
 import path13 from "pathe";
 import fs7 from "fs-extra";
 import { readPackageJSON } from "pkg-types";
-async function getProjectInfo() {
-  const info = {
-    tsconfig: null,
-    isNuxt: false,
-    sigmaUiNuxtModuleInfo: void 0,
-    isVueVite: false,
-    srcDir: false,
-    componentsUiDir: false,
-    srcComponentsUiDir: false
+async function getProjectInfo(cwd = process.cwd()) {
+  const framework = detectFramework(cwd);
+  const tsConfigPath = detectTsConfigPath(cwd, framework);
+  const hasTailwind = await detectTailwind(cwd);
+  const { configType: tailwindConfigType, configPath: tailwindConfigPath } = detectTailwindConfigType(cwd);
+  const sigmaUiNuxtModuleInfo = framework === "nuxt" ? await getSigmaUiNuxtInfo() : void 0;
+  return {
+    framework,
+    tsConfigPath,
+    srcDir: existsSync5(path13.resolve(cwd, "src")),
+    srcComponentsUiDir: existsSync5(path13.resolve(cwd, "src/components/ui")),
+    componentsUiDir: existsSync5(path13.resolve(cwd, "components/ui")),
+    hasTailwind,
+    tailwindConfigType,
+    tailwindConfigPath,
+    sigmaUiNuxtModuleInfo
   };
-  try {
-    const tsconfig = await getTsConfig();
-    const isNuxt = existsSync5(path13.resolve("./nuxt.config.js")) || existsSync5(path13.resolve("./nuxt.config.ts"));
-    const sigmaUiNuxtModuleInfo = isNuxt ? await getSigmaUiNuxtInfo() : void 0;
-    return {
-      tsconfig,
-      isNuxt,
-      sigmaUiNuxtModuleInfo,
-      isVueVite: existsSync5(path13.resolve("./vite.config.js")) || existsSync5(path13.resolve("./vite.config.ts")),
-      srcDir: existsSync5(path13.resolve("./src")),
-      srcComponentsUiDir: existsSync5(path13.resolve("./src/components/ui")),
-      componentsUiDir: existsSync5(path13.resolve("./components/ui"))
-    };
-  } catch (error) {
-    console.log(error);
-    return info;
+}
+function detectTailwindConfigType(cwd) {
+  const jsConfigPaths = [
+    "tailwind.config.js",
+    "tailwind.config.ts",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs"
+  ];
+  for (const configPath of jsConfigPaths) {
+    if (existsSync5(path13.resolve(cwd, configPath))) {
+      return { configType: "js", configPath };
+    }
   }
+  return { configType: "css", configPath: null };
 }
-async function getSigmaUiNuxtInfo() {
-  let nuxtModule;
+function detectFramework(cwd) {
+  if (existsSync5(path13.resolve(cwd, "nuxt.config.js")) || existsSync5(path13.resolve(cwd, "nuxt.config.ts"))) {
+    return "nuxt";
+  }
+  if (existsSync5(path13.resolve(cwd, "astro.config.mjs")) || existsSync5(path13.resolve(cwd, "astro.config.ts"))) {
+    return "astro";
+  }
+  if (existsSync5(path13.resolve(cwd, "artisan"))) {
+    return "laravel";
+  }
+  return "vite";
+}
+function detectTsConfigPath(cwd, framework) {
+  if (framework === "nuxt") {
+    return ".nuxt/tsconfig.json";
+  }
+  const possiblePaths = [
+    "tsconfig.json",
+    "tsconfig.app.json"
+  ];
+  for (const tsPath of possiblePaths) {
+    if (existsSync5(path13.resolve(cwd, tsPath))) {
+      return tsPath;
+    }
+  }
+  return "tsconfig.json";
+}
+async function detectTailwind(cwd) {
   try {
-    nuxtModule = await readPackageJSON("sigma-ui-nuxt");
-  } catch (error) {
-    console.log(error);
-    nuxtModule = void 0;
+    const packageJson = await readPackageJSON(cwd);
+    const allDeps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    return "tailwindcss" in allDeps;
+  } catch {
+    return false;
   }
-  return nuxtModule;
 }
-async function getTsConfig() {
+async function getSigmaUiNuxtInfo() {
   try {
-    const tsconfigPath = path13.join("tsconfig.json");
-    const tsconfig = await fs7.readJSON(tsconfigPath);
-    if (!tsconfig) {
-      throw new Error("tsconfig.json is missing");
-    }
-    return tsconfig;
-  } catch (error) {
-    console.log(error);
-    return null;
+    return await readPackageJSON("sigma-ui-nuxt");
+  } catch {
+    return void 0;
   }
 }
 
@@ -24216,43 +24288,162 @@ function applyPrefixesCss(css, prefix) {
 }
 
 // ../shared/templates/tailwind-config.ts
-var TAILWIND_KEYFRAMES = `
-"fade-in": {
+var UTILS_TEMPLATE = `import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+var TAILWIND_V4_CSS_TEMPLATE = `@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-ring: hsl(var(--ring));
+
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-xs: min(calc(var(--radius) / 2.5), 6px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--reka-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--reka-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--reka-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--reka-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@layer base {
+  :root {
+    --backdrop-filter-blur: 32px;
+    --radius: 0.5rem;
+
+    <%- cssVarsLight %>
+  }
+ 
+  .dark {
+    <%- cssVarsDark %>
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
+var TAILWIND_KEYFRAMES_JS = `
+"sigma-ui-fade-in": {
   from: { opacity: 0 },
   to: { opacity: 1 },
 },
-"accordion-down": {
+"sigma-ui-accordion-down": {
   from: { height: 0 },
   to: { height: "var(--reka-accordion-content-height)" },
 },
-"accordion-up": {
+"sigma-ui-accordion-up": {
   from: { height: "var(--reka-accordion-content-height)" },
   to: { height: 0 },
 },
-"collapsible-down": {
+"sigma-ui-collapsible-down": {
   from: { height: 0 },
-  to: { height: 'var(--reka-collapsible-content-height)' },
+  to: { height: "var(--reka-collapsible-content-height)" },
 },
-"collapsible-up": {
-  from: { height: 'var(--reka-collapsible-content-height)' },
+"sigma-ui-collapsible-up": {
+  from: { height: "var(--reka-collapsible-content-height)" },
   to: { height: 0 },
 },
+"sigma-ui-popover-slide-blur-from-top": {
+  from: { opacity: 0, transform: "translateY(-1rem) scaleY(0.98)", filter: "blur(4px)" },
+  to: { opacity: 1, transform: "translateY(0) scaleY(1)", filter: "blur(0px)" },
+},
+"sigma-ui-popover-slide-blur-from-bottom": {
+  from: { opacity: 0, transform: "translateY(1rem) scaleY(0.98)", filter: "blur(4px)" },
+  to: { opacity: 1, transform: "translateY(0) scaleY(1)", filter: "blur(0px)" },
+},
+"sigma-ui-popover-slide-blur-from-left": {
+  from: { opacity: 0, transform: "translateX(-1rem) scaleY(0.98)", filter: "blur(4px)" },
+  to: { opacity: 1, transform: "translateX(0) scaleY(1)", filter: "blur(0px)" },
+},
+"sigma-ui-popover-slide-blur-from-right": {
+  from: { opacity: 0, transform: "translateX(1rem) scaleY(0.98)", filter: "blur(4px)" },
+  to: { opacity: 1, transform: "translateX(0) scaleY(1)", filter: "blur(0px)" },
+},
+"sigma-ui-popover-fade-scale-blur-out": {
+  from: { opacity: 1, transform: "scaleY(1)", filter: "blur(0px)" },
+  to: { opacity: 0, transform: "scaleY(0.98)", filter: "blur(4px)" },
+},
 `;
-var TAILWIND_ANIMATION = `
-"fade-in": "fade-in 0.5s ease-in-out",
-"accordion-down": "accordion-down 0.2s ease-out",
-"accordion-up": "accordion-up 0.2s ease-out",
-"collapsible-down": "collapsible-down 0.2s ease-in-out",
-"collapsible-up": "collapsible-up 0.2s ease-in-out",
-`;
-var UTILS_TEMPLATE = `import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+var TAILWIND_ANIMATION_JS = `
+"fade-in": "sigma-ui-fade-in 0.5s ease-in-out",
+"accordion-down": "sigma-ui-accordion-down 0.2s ease-out",
+"accordion-up": "sigma-ui-accordion-up 0.2s ease-out",
+"collapsible-down": "sigma-ui-collapsible-down 0.2s ease-in-out",
+"collapsible-up": "sigma-ui-collapsible-up 0.2s ease-in-out",
+"popover-slide-blur-from-top": "sigma-ui-popover-slide-blur-from-top 150ms ease-out",
+"popover-slide-blur-from-bottom": "sigma-ui-popover-slide-blur-from-bottom 150ms ease-out",
+"popover-slide-blur-from-left": "sigma-ui-popover-slide-blur-from-left 150ms ease-out",
+"popover-slide-blur-from-right": "sigma-ui-popover-slide-blur-from-right 150ms ease-out",
+"popover-fade-scale-blur-out": "sigma-ui-popover-fade-scale-blur-out 150ms ease-in",
 `;
-var TAILWIND_CONFIG_TEMPLATE = `const animate = require("tailwindcss-animate")
+var TAILWIND_CONFIG_JS_TEMPLATE = `const animate = require("tailwindcss-animate")
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -24326,15 +24517,39 @@ module.exports = {
         xs: 'min(calc(var(--radius) / 2.5), 6px)',
       },
       keyframes: {
-        ${TAILWIND_KEYFRAMES}
+        ${TAILWIND_KEYFRAMES_JS}
       },
       animation: {
-        ${TAILWIND_ANIMATION}
+        ${TAILWIND_ANIMATION_JS}
       },
     },
   },
   plugins: [animate],
 }`;
+var TAILWIND_CSS_WITH_JS_CONFIG_TEMPLATE = `@import "tailwindcss";
+@config "<%- configPath %>";
+
+@layer base {
+  :root {
+    --backdrop-filter-blur: 32px;
+    --radius: 0.5rem;
+
+    <%- cssVarsLight %>
+  }
+ 
+  .dark {
+    <%- cssVarsDark %>
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
 
 // ../shared/templates/preflight.ts
 var PREFLIGHT_CSS_TEMPLATE = `
@@ -24753,22 +24968,19 @@ var PROJECT_DEV_DEPENDENCIES = {
     ]
   }
 };
-var init = new Command3().name("init").description("initialize your project and install dependencies").option("-y, --yes", "skip confirmation prompt.", false).option(
+var init = new Command3().name("init").description("initialize your project and install dependencies").option("-y, --yes", "skip confirmation prompt.", false).option("-d, --defaults", "use default configuration without prompts.", false).option(
   "-c, --cwd <cwd>",
   "the working directory. defaults to the current directory.",
   process5.cwd()
 ).action(async (opts) => {
   try {
-    const spinner = ora2("Fetching data...").start();
     const options8 = initOptionsSchema.parse(opts);
     const cwd = path14.resolve(options8.cwd);
     if (!existsSync6(cwd)) {
       consola5.error(`The path ${cwd} does not exist. Please try again.`);
       process5.exit(1);
     }
-    const existingConfig = await getConfig(cwd);
-    spinner.stop();
-    const config = await promptForConfig(cwd, existingConfig, options8.yes);
+    const config = await promptForConfig(cwd, options8.yes, options8.defaults);
     await runInit(cwd, config);
     consola5.log("");
     consola5.info(
@@ -24779,115 +24991,111 @@ var init = new Command3().name("init").description("initialize your project and
     handleError(error);
   }
 });
-async function promptForConfig(cwd, defaultConfig = null, skip2 = false) {
+function getDetectedConfig(projectInfo) {
+  const { framework, tsConfigPath, hasTailwind, tailwindConfigType, tailwindConfigPath } = projectInfo;
+  return {
+    framework,
+    tsConfigPath,
+    cssPath: TAILWIND_CSS_PATH[framework],
+    tailwindConfigPath: tailwindConfigPath ?? (framework === "astro" ? "tailwind.config.mjs" : DEFAULT_TAILWIND_CONFIG),
+    tailwindConfigType,
+    setupTailwind: !hasTailwind
+  };
+}
+async function promptForConfig(cwd, skipConfirmation = false, useDefaults = false) {
   const highlight = (text) => colors4.cyan(text);
+  const spinner = ora2("Detecting project settings...").start();
+  const projectInfo = await getProjectInfo(cwd);
+  const detectedConfig = getDetectedConfig(projectInfo);
   const styles3 = await getRegistryStyles();
   const baseColors2 = await getRegistryBaseColors();
+  spinner.stop();
+  consola5.info(`Detected ${highlight(detectedConfig.framework)} project`);
+  if (useDefaults) {
+    const config2 = createConfig({
+      framework: detectedConfig.framework,
+      styleSystem: "tailwind",
+      tailwindBaseColor: "grayscale",
+      componentNaming: "pascal-case",
+      tsConfigPath: detectedConfig.tsConfigPath,
+      cssPath: detectedConfig.cssPath,
+      tailwindConfigPath: detectedConfig.tailwindConfigPath,
+      tailwindConfigType: detectedConfig.tailwindConfigType,
+      setupTailwind: detectedConfig.setupTailwind,
+      components: DEFAULT_COMPONENTS,
+      utils: DEFAULT_UTILS,
+      generatePreflight: true
+    });
+    await writeConfigFile(cwd, config2);
+    return await resolveConfigPaths(cwd, config2);
+  }
   const options8 = await prompts2([
-    {
-      type: "select",
-      name: "framework",
-      message: `Which ${highlight("framework")} are you using?`,
-      choices: [
-        { title: "Vite", value: "vite" },
-        { title: "Nuxt", value: "nuxt" },
-        { title: "Laravel", value: "laravel" },
-        { title: "Astro", value: "astro" }
-      ]
-    },
     {
       type: "select",
       name: "styleSystem",
-      message: `Which ${highlight("style system")} are you using?`,
+      message: `Which ${highlight("style system")} would you like to use?`,
       choices: styles3.map((style) => ({
         title: style.label,
         value: style.name
       }))
     },
-    {
-      type: (_, answers) => answers.styleSystem === "tailwind" ? "toggle" : null,
-      name: "setupTailwind",
-      message: `Setup ${highlight("Tailwind")} in this project for you?`,
-      initial: !defaultConfig?.tailwind.config,
-      active: "yes",
-      inactive: "no"
-    },
     {
       type: "select",
       name: "tailwindBaseColor",
-      message: `Choose primary ${highlight("base color")}:`,
+      message: `Choose a ${highlight("base color")} for your theme:`,
       choices: baseColors2.map((color) => ({
         title: color.label,
         value: color.name
       }))
     },
     {
-      type: (_, answers) => answers.styleSystem === "tailwind" ? "text" : null,
-      name: "tailwindConfig",
-      message: `Specify the path to ${highlight("tailwind")} config file ${colors4.gray("(it will be overwritten / created)")}`,
-      initial: (_, answers) => {
-        if (defaultConfig?.tailwind.config) {
-          return defaultConfig?.tailwind.config;
-        }
-        if (answers.framework === "astro") {
-          return "tailwind.config.mjs";
-        } else {
-          return DEFAULT_TAILWIND_CONFIG;
-        }
-      }
-    },
-    {
-      type: "text",
-      name: "tsConfigPath",
-      message: `Specify the path to ${highlight("tsconfig")} file`,
-      initial: (_, values) => {
-        const prefix = values.framework === "nuxt" ? ".nuxt/" : "./";
-        return `${prefix}tsconfig.json`;
-      }
-    },
-    {
-      type: "text",
-      name: "cssPath",
-      message: `Specify the path to ${highlight("global CSS")} file ${colors4.gray("(it will be overwritten / created)")}`,
-      initial: (_, values) => defaultConfig?.cssPath ?? TAILWIND_CSS_PATH[values.framework]
-    },
-    {
-      type: "text",
-      name: "components",
-      message: `Configure the import alias for ${highlight("components")}:`,
-      initial: defaultConfig?.aliases.components ?? DEFAULT_COMPONENTS
-    },
-    {
-      type: (_, answers) => answers.styleSystem === "tailwind" ? "text" : null,
-      name: "utils",
-      message: `Configure the import alias for ${highlight("utils")}:`,
-      initial: defaultConfig?.aliases.utils ?? DEFAULT_UTILS
-    },
-    {
-      type: (_, answers) => answers.styleSystem === "css" ? "toggle" : null,
-      name: "generatePreflight",
-      message: `Generate ${highlight("preflight.css")} with modern CSS reset? ${colors4.gray("(recommended)")}`,
-      initial: true,
-      active: "yes",
-      inactive: "no"
+      type: "select",
+      name: "componentNaming",
+      message: `Choose ${highlight("component naming")} convention:`,
+      choices: [
+        { title: "PascalCase (Button.vue)", value: "pascal-case" },
+        { title: "kebab-case (button.vue)", value: "kebab-case" }
+      ],
+      initial: 0
     }
   ]);
-  if (!skip2) {
+  if (!skipConfirmation) {
+    consola5.log("");
+    consola5.box(
+      `Framework: ${highlight(detectedConfig.framework)}
+Style: ${highlight(options8.styleSystem)}
+Theme: ${highlight(options8.tailwindBaseColor)}
+Naming: ${highlight(options8.componentNaming)}
+CSS: ${highlight(detectedConfig.cssPath)}
+Components: ${highlight(DEFAULT_COMPONENTS)}`
+    );
     const { proceed } = await prompts2({
       type: "confirm",
       name: "proceed",
-      message: `Configuration is done. The config file will be created (${highlight(CONFIG_FILE_PATH)}) and the required dependencies will be installed. Make sure to handle any unstaged Git changes before proceeding. Finish setup?`,
+      message: "Proceed with installation?",
       initial: true
     });
     if (!proceed) {
       process5.exit(0);
     }
   }
-  const config = createConfig(options8);
+  const config = createConfig({
+    ...options8,
+    framework: detectedConfig.framework,
+    tsConfigPath: detectedConfig.tsConfigPath,
+    cssPath: detectedConfig.cssPath,
+    tailwindConfigPath: options8.styleSystem === "tailwind" ? detectedConfig.tailwindConfigPath : "",
+    tailwindConfigType: detectedConfig.tailwindConfigType,
+    setupTailwind: options8.styleSystem === "tailwind" ? detectedConfig.setupTailwind : false,
+    components: DEFAULT_COMPONENTS,
+    utils: DEFAULT_UTILS,
+    generatePreflight: options8.styleSystem === "css"
+  });
   await writeConfigFile(cwd, config);
   return await resolveConfigPaths(cwd, config);
 }
 function createConfig(options8) {
+  const usesJsConfig = options8.tailwindConfigType === "js";
   const config = rawConfigSchema.parse({
     $schema: "https://sigma-ui.dev/schema.json",
     styleSystem: options8.styleSystem,
@@ -24897,13 +25105,14 @@ function createConfig(options8) {
     cssPath: options8.cssPath,
     baseColor: options8.tailwindBaseColor,
     tailwind: {
-      config: options8.tailwindConfig || ""
+      config: usesJsConfig ? options8.tailwindConfigPath : ""
     },
     aliases: {
       utils: options8.utils || "",
       components: options8.components
     },
-    generatePreflight: options8.generatePreflight
+    generatePreflight: options8.generatePreflight,
+    componentNaming: options8.componentNaming || "pascal-case"
   });
   return config;
 }
@@ -24914,38 +25123,39 @@ async function writeConfigFile(cwd, config) {
   await fs8.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8");
   spinner.succeed();
 }
-async function handleNuxtProject() {
-  const { isNuxt, sigmaUiNuxtModuleInfo } = await getProjectInfo();
-  if (isNuxt) {
+async function handleNuxtProject(cwd) {
+  const projectInfo = await getProjectInfo(cwd);
+  if (projectInfo.framework === "nuxt") {
     consola5.log("");
-    if (sigmaUiNuxtModuleInfo) {
-      consola5.info(`Detected a Nuxt project with 'sigma-ui-nuxt' v${sigmaUiNuxtModuleInfo.version}`);
+    if (projectInfo.sigmaUiNuxtModuleInfo) {
+      consola5.info(`Detected a Nuxt project with 'sigma-ui-nuxt' v${projectInfo.sigmaUiNuxtModuleInfo.version}`);
     } else {
       consola5.warn(`Detected a Nuxt project without 'sigma-ui-nuxt' module. It's recommended to install it.`);
     }
   }
 }
 async function runInit(cwd, config) {
-  await writeFiles(config);
+  await writeFiles(config, cwd);
   await installDependencies2(config, cwd);
 }
-async function writeFiles(config) {
+async function writeFiles(config, cwd) {
   const writeFilesSpinner = ora2("Initializing project")?.start();
-  await handleNuxtProject();
+  await handleNuxtProject(cwd);
   await ensureDirectoriesExist(config);
-  if (config.tailwind.config) {
-    writeTailwindConfig(config);
-    if (config.framework === "vite" && config.setupTailwind) {
-      await updateViteConfig();
-    }
+  const hasJsConfig = Boolean(config.tailwind.config && config.tailwind.config.length > 0);
+  if (hasJsConfig) {
+    await writeTailwindJsConfig(config);
   }
-  writeCssFile(config);
+  if (config.framework === "vite" && config.setupTailwind) {
+    await updateViteConfig();
+  }
+  await writeCssFile(config, hasJsConfig);
   writeCnFile(config);
   await writePreflightCss(config);
   writeFilesSpinner?.succeed();
 }
-async function writeTailwindConfig(config) {
-  const unformattedConfig = template(TAILWIND_CONFIG_TEMPLATE)({
+async function writeTailwindJsConfig(config) {
+  const unformattedConfig = template(TAILWIND_CONFIG_JS_TEMPLATE)({
     framework: config.framework,
     prefix: config.tailwind.prefix,
     extension: "ts"
@@ -24966,23 +25176,47 @@ async function writeTailwindConfig(config) {
     "utf8"
   );
 }
-async function writeCssFile(config) {
+async function writeCssFile(config, hasJsConfig) {
   const baseColorData = await getRegistryBaseColor(config.baseColor);
-  if (baseColorData) {
-    const file = config.resolvedPaths.tailwindCss;
-    let data = "";
-    if (config.styleSystem === "tailwind") {
-      data = config.tailwind.prefix ? applyPrefixesCss(baseColorData.templates.tailwind.withVariables, config.tailwind.prefix) : baseColorData.templates.tailwind.withVariables;
-    } else if (config.styleSystem === "css") {
-      data = baseColorData.templates.css.withVariables;
-      if (config.generatePreflight) {
-        data = `@import "./preflight.css";
+  if (!baseColorData) {
+    return;
+  }
+  const file = config.resolvedPaths.tailwindCss;
+  let data = "";
+  if (config.styleSystem === "tailwind") {
+    const cssVarsLight = generateCssVars(baseColorData.cssVars.light);
+    const cssVarsDark = generateCssVars(baseColorData.cssVars.dark);
+    if (hasJsConfig) {
+      data = template(TAILWIND_CSS_WITH_JS_CONFIG_TEMPLATE)({
+        configPath: config.tailwind.config,
+        cssVarsLight,
+        cssVarsDark
+      });
+    } else {
+      data = template(TAILWIND_V4_CSS_TEMPLATE)({
+        cssVarsLight,
+        cssVarsDark
+      });
+    }
+    if (config.tailwind.prefix) {
+      data = applyPrefixesCss(data, config.tailwind.prefix);
+    }
+  } else if (config.styleSystem === "css") {
+    data = baseColorData.templates.css.withVariables;
+    if (config.generatePreflight) {
+      data = `@import "./preflight.css";
 
 ${data}`;
-      }
     }
-    await fs8.writeFile(file, data, "utf8");
   }
+  const formattedCss = await src_default.format(data, {
+    parser: "css",
+    singleQuote: true
+  });
+  await fs8.writeFile(file, formattedCss, "utf8");
+}
+function generateCssVars(vars) {
+  return Object.entries(vars).map(([key2, value]) => `--${key2}: ${value};`).join("\n    ");
 }
 async function writeCnFile(config) {
   if (config.resolvedPaths.utils) {
@@ -25004,11 +25238,11 @@ async function writePreflightCss(config) {
   }
 }
 async function installDependencies2(config, cwd) {
-  const { sigmaUiNuxtModuleInfo } = await getProjectInfo();
+  const projectInfo = await getProjectInfo(cwd);
   const dependenciesSpinner = ora2("Installing dependencies")?.start();
   let baseDeps = [];
   let baseDevDeps = [];
-  if (sigmaUiNuxtModuleInfo?.version) {
+  if (projectInfo.sigmaUiNuxtModuleInfo?.version) {
     baseDeps = [];
   } else {
     if (config.styleSystem === "css") {