shadcn-vue 1.0.3 → 2.0.0

package/dist/index.js

@@ -99,7 +99,7 @@ var rawConfigSchema = z.object({
   style: z.string(),
   typescript: z.boolean().default(true),
   tailwind: z.object({
-    config: z.string(),
+    config: z.string().optional(),
     css: z.string(),
     baseColor: z.string(),
     cssVariables: z.boolean().default(true),
@@ -152,7 +152,7 @@ async function resolveConfigPaths(cwd, config) {
     ...config,
     resolvedPaths: {
       cwd,
-      tailwindConfig: path.resolve(cwd, config.tailwind.config),
+      tailwindConfig: config.tailwind.config ? path.resolve(cwd, config.tailwind.config) : "",
       tailwindCss: path.resolve(cwd, config.tailwind.css),
       utils: await resolveImport(config.aliases.utils, tsConfig),
       components: await resolveImport(config.aliases.components, tsConfig),
@@ -182,9 +182,14 @@ async function getRawConfig(cwd) {
     }
     return rawConfigSchema.parse(configResult.config);
   } catch (error) {
+    console.log(error.message);
     throw new Error(`Invalid configuration found in ${cwd}/components.json.`);
   }
 }
+async function getTargetStyleFromConfig(cwd, fallback) {
+  const projectInfo = await getProjectInfo(cwd);
+  return projectInfo?.tailwindVersion === "v4" ? "new-york-v4" : fallback;
+}
 
 // src/utils/get-package-info.ts
 import fs from "fs-extra";
@@ -220,6 +225,7 @@ async function getProjectInfo(cwd) {
     typescript,
     tailwindConfigFile,
     tailwindCssFile,
+    tailwindVersion,
     aliasPrefix,
     packageJson
   ] = await Promise.all([
@@ -231,6 +237,7 @@ async function getProjectInfo(cwd) {
     isTypeScriptProject(cwd),
     getTailwindConfigFile(cwd),
     getTailwindCssFile(cwd),
+    getTailwindVersion(cwd),
     getTsConfigAliasPrefix(cwd),
     getPackageInfo(cwd, false)
   ]);
@@ -239,6 +246,7 @@ async function getProjectInfo(cwd) {
     typescript,
     tailwindConfigFile,
     tailwindCssFile,
+    tailwindVersion,
     aliasPrefix
   };
   if (configFiles.find((file) => file.startsWith("nuxt.config."))?.length) {
@@ -259,18 +267,40 @@ async function getProjectInfo(cwd) {
   }
   return type;
 }
+async function getTailwindVersion(cwd) {
+  const [packageInfo, config] = await Promise.all([
+    getPackageInfo(cwd),
+    getConfig(cwd)
+  ]);
+  if (config?.tailwind?.config === "") {
+    return "v4";
+  }
+  if (!packageInfo?.dependencies?.tailwindcss && !packageInfo?.devDependencies?.tailwindcss) {
+    return null;
+  }
+  if (/^(?:\^|~)?3(?:\.\d+)*(?:-.*)?$/.test(
+    packageInfo?.dependencies?.tailwindcss || packageInfo?.devDependencies?.tailwindcss || ""
+  )) {
+    return "v3";
+  }
+  return "v4";
+}
 async function getTailwindCssFile(cwd) {
-  const files = await glob(["**/*.css", "**/*.scss"], {
-    cwd,
-    deep: 5,
-    ignore: PROJECT_SHARED_IGNORE
-  });
+  const [files, tailwindVersion] = await Promise.all([
+    glob(["**/*.css", "**/*.scss"], {
+      cwd,
+      deep: 5,
+      ignore: PROJECT_SHARED_IGNORE
+    }),
+    getTailwindVersion(cwd)
+  ]);
   if (!files.length) {
     return null;
   }
+  const needle = tailwindVersion === "v4" ? `@import "tailwindcss"` : "@tailwind base";
   for (const file of files) {
     const contents = await fs2.readFile(path3.resolve(cwd, file), "utf8");
-    if (contents.includes("@tailwind base")) {
+    if (contents.includes(`@import "tailwindcss"`) || contents.includes(`@import 'tailwindcss'`) || contents.includes(`@tailwind base`)) {
       return file;
     }
   }
@@ -317,7 +347,7 @@ async function getProjectConfig(cwd, defaultProjectInfo = null) {
   if (existingConfig) {
     return existingConfig;
   }
-  if (!projectInfo || !projectInfo.tailwindConfigFile || !projectInfo.tailwindCssFile) {
+  if (!projectInfo || !projectInfo.tailwindCssFile || projectInfo.tailwindVersion === "v3" && !projectInfo.tailwindConfigFile) {
     return null;
   }
   const config = {
@@ -325,7 +355,7 @@ async function getProjectConfig(cwd, defaultProjectInfo = null) {
     typescript: projectInfo.typescript,
     style: "new-york",
     tailwind: {
-      config: projectInfo.tailwindConfigFile,
+      config: projectInfo.tailwindConfigFile ?? "",
       baseColor: "zinc",
       css: projectInfo.tailwindCssFile,
       cssVariables: true,
@@ -342,6 +372,16 @@ async function getProjectConfig(cwd, defaultProjectInfo = null) {
   };
   return await resolveConfigPaths(cwd, config);
 }
+async function getProjectTailwindVersionFromConfig(config) {
+  if (!config.resolvedPaths?.cwd) {
+    return "v3";
+  }
+  const projectInfo = await getProjectInfo(config.resolvedPaths.cwd);
+  if (!projectInfo?.tailwindVersion) {
+    return null;
+  }
+  return projectInfo.tailwindVersion;
+}
 
 // src/utils/logger.ts
 import consola from "consola";
@@ -429,19 +469,27 @@ Once configured, you can use the cli to add components.`
     logger.break();
     process.exit(1);
   }
-  if (!projectInfo) {
-    logger.break();
-    process.exit(1);
-  }
   frameworkSpinner?.succeed(
     `Verifying framework. Found ${highlighter.info(
       projectInfo.framework.label
     )}.`
   );
-  const tailwindSpinner = spinner(`Validating Tailwind CSS.`, {
+  let tailwindSpinnerMessage = "Validating Tailwind CSS.";
+  if (projectInfo.tailwindVersion === "v4") {
+    tailwindSpinnerMessage = `Validating Tailwind CSS config. Found ${highlighter.info(
+      "v4"
+    )}.`;
+  }
+  const tailwindSpinner = spinner(tailwindSpinnerMessage, {
     silent: options.silent
   }).start();
-  if (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile) {
+  if (projectInfo.tailwindVersion === "v3" && (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile)) {
+    errors[TAILWIND_NOT_CONFIGURED] = true;
+    tailwindSpinner?.fail();
+  } else if (projectInfo.tailwindVersion === "v4" && !projectInfo?.tailwindCssFile) {
+    errors[TAILWIND_NOT_CONFIGURED] = true;
+    tailwindSpinner?.fail();
+  } else if (!projectInfo.tailwindVersion) {
     errors[TAILWIND_NOT_CONFIGURED] = true;
     tailwindSpinner?.fail();
   } else {
@@ -579,6 +627,10 @@ var registryBaseColorSchema = z3.object({
     light: z3.record(z3.string(), z3.string()),
     dark: z3.record(z3.string(), z3.string())
   }),
+  cssVarsV4: z3.object({
+    light: z3.record(z3.string(), z3.string()),
+    dark: z3.record(z3.string(), z3.string())
+  }).optional(),
   inlineColorsTemplate: z3.string(),
   cssVarsTemplate: z3.string()
 });
@@ -609,8 +661,12 @@ async function updateTailwindConfig(tailwindConfig, config, options) {
   }
   options = {
     silent: false,
+    tailwindVersion: "v3",
     ...options
   };
+  if (options.tailwindVersion === "v4") {
+    return;
+  }
   const tailwindFileRelativePath = path5.relative(
     config.resolvedPaths.cwd,
     config.resolvedPaths.tailwindConfig
@@ -979,29 +1035,30 @@ async function getRegistryIcons() {
     return {};
   }
 }
+var BASE_COLORS = [
+  {
+    name: "neutral",
+    label: "Neutral"
+  },
+  {
+    name: "gray",
+    label: "Gray"
+  },
+  {
+    name: "zinc",
+    label: "Zinc"
+  },
+  {
+    name: "stone",
+    label: "Stone"
+  },
+  {
+    name: "slate",
+    label: "Slate"
+  }
+];
 async function getRegistryBaseColors() {
-  return [
-    {
-      name: "neutral",
-      label: "Neutral"
-    },
-    {
-      name: "gray",
-      label: "Gray"
-    },
-    {
-      name: "zinc",
-      label: "Zinc"
-    },
-    {
-      name: "stone",
-      label: "Stone"
-    },
-    {
-      name: "slate",
-      label: "Slate"
-    }
-  ];
+  return BASE_COLORS;
 }
 async function getRegistryBaseColor(baseColor) {
   try {
@@ -1138,9 +1195,10 @@ async function registryResolveItemsTree(names, config) {
 async function resolveRegistryDependencies(url, config) {
   const visited = /* @__PURE__ */ new Set();
   const payload = [];
+  const style = config.resolvedPaths?.cwd ? await getTargetStyleFromConfig(config.resolvedPaths.cwd, config.style) : config.style;
   async function resolveDependencies(itemUrl) {
     const url2 = getRegistryUrl(
-      isUrl(itemUrl) ? itemUrl : `styles/${config.style}/${itemUrl}.json`
+      isUrl(itemUrl) ? itemUrl : `styles/${style}/${itemUrl}.json`
     );
     if (visited.has(url2)) {
       return;
@@ -1166,7 +1224,10 @@ async function resolveRegistryDependencies(url, config) {
   return Array.from(new Set(payload));
 }
 async function registryGetTheme(name, config) {
-  const baseColor = await getRegistryBaseColor(name);
+  const [baseColor, tailwindVersion] = await Promise.all([
+    getRegistryBaseColor(name),
+    getProjectTailwindVersionFromConfig(config)
+  ]);
   if (!baseColor) {
     return null;
   }
@@ -1209,6 +1270,18 @@ async function registryGetTheme(name, config) {
         ...theme.cssVars.dark
       }
     };
+    if (tailwindVersion === "v4" && baseColor.cssVarsV4) {
+      theme.cssVars = {
+        light: {
+          ...theme.cssVars.light,
+          ...baseColor.cssVarsV4.light
+        },
+        dark: {
+          ...theme.cssVars.dark,
+          ...baseColor.cssVarsV4.dark
+        }
+      };
+    }
   }
   return theme;
 }
@@ -1233,16 +1306,18 @@ function isUrl(path17) {
 
 // src/utils/updaters/update-css-vars.ts
 import { promises as fs5 } from "node:fs";
-import path7 from "pathe";
+import path7 from "node:path";
 import postcss from "postcss";
 import AtRule from "postcss/lib/at-rule";
+import { z as z5 } from "zod";
 async function updateCssVars(cssVars, config, options) {
-  if (!cssVars || !Object.keys(cssVars).length || !config.resolvedPaths.tailwindCss) {
+  if (!config.resolvedPaths.tailwindCss || !Object.keys(cssVars ?? {}).length) {
     return;
   }
   options = {
     cleanupDefaultNextStyles: false,
     silent: false,
+    tailwindVersion: "v3",
     ...options
   };
   const cssFilepath = config.resolvedPaths.tailwindCss;
@@ -1257,35 +1332,68 @@ async function updateCssVars(cssVars, config, options) {
     }
   ).start();
   const raw = await fs5.readFile(cssFilepath, "utf8");
-  const output = await transformCssVars(raw, cssVars, config, {
-    cleanupDefaultNextStyles: options.cleanupDefaultNextStyles
+  const output = await transformCssVars(raw, cssVars ?? {}, config, {
+    cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
+    tailwindVersion: options.tailwindVersion,
+    tailwindConfig: options.tailwindConfig
   });
   await fs5.writeFile(cssFilepath, output, "utf8");
   cssVarsSpinner.succeed();
 }
-async function transformCssVars(input, cssVars, config, options) {
+async function transformCssVars(input, cssVars, config, options = {
+  cleanupDefaultNextStyles: false,
+  tailwindVersion: "v3",
+  tailwindConfig: void 0
+}) {
   options = {
     cleanupDefaultNextStyles: false,
+    tailwindVersion: "v3",
+    tailwindConfig: void 0,
     ...options
   };
-  const plugins = [updateCssVarsPlugin(cssVars)];
+  let plugins = [updateCssVarsPlugin(cssVars)];
   if (options.cleanupDefaultNextStyles) {
     plugins.push(cleanupDefaultNextStylesPlugin());
   }
+  if (options.tailwindVersion === "v4") {
+    plugins = [addCustomVariant({ params: "dark (&:is(.dark *))" })];
+    if (options.cleanupDefaultNextStyles) {
+      plugins.push(cleanupDefaultNextStylesPlugin());
+    }
+    plugins.push(updateCssVarsPluginV4(cssVars));
+    plugins.push(updateThemePlugin(cssVars));
+    if (options.tailwindConfig) {
+      plugins.push(updateTailwindConfigPlugin(options.tailwindConfig));
+      plugins.push(updateTailwindConfigAnimationPlugin(options.tailwindConfig));
+      plugins.push(updateTailwindConfigKeyframesPlugin(options.tailwindConfig));
+    }
+  }
   if (config.tailwind.cssVariables) {
-    plugins.push(updateBaseLayerPlugin());
+    plugins.push(
+      updateBaseLayerPlugin({ tailwindVersion: options.tailwindVersion })
+    );
   }
   const result = await postcss(plugins).process(input, {
     from: void 0
   });
-  return result.css;
+  let output = result.css;
+  output = output.replace(/\/\* ---break--- \*\//g, "");
+  if (options.tailwindVersion === "v4") {
+    output = output.replace(/(\n\s*\n)+/g, "\n\n");
+  }
+  return output;
 }
-function updateBaseLayerPlugin() {
+function updateBaseLayerPlugin({
+  tailwindVersion
+}) {
   return {
     postcssPlugin: "update-base-layer",
     Once(root) {
       const requiredRules = [
-        { selector: "*", apply: "border-border" },
+        {
+          selector: "*",
+          apply: tailwindVersion === "v4" ? "border-border outline-ring/50" : "border-border"
+        },
         { selector: "body", apply: "bg-background text-foreground" }
       ];
       let baseLayer = root.nodes.find(
@@ -1304,6 +1412,7 @@ function updateBaseLayerPlugin() {
           raws: { semicolon: true, between: " ", before: "\n" }
         });
         root.append(baseLayer);
+        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }));
       }
       requiredRules.forEach(({ selector, apply }) => {
         const existingRule = baseLayer?.nodes?.find(
@@ -1347,6 +1456,7 @@ function updateCssVarsPlugin(cssVars) {
           }
         });
         root.append(baseLayer);
+        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }));
       }
       if (baseLayer !== void 0) {
         Object.entries(cssVars).forEach(([key, vars]) => {
@@ -1387,6 +1497,9 @@ function cleanupDefaultNextStylesPlugin() {
         bodyRule.nodes.find((node) => {
           return node.type === "decl" && node.prop === "background" && (node.value.startsWith("linear-gradient") || node.value === "var(--background)");
         })?.remove();
+        bodyRule.nodes.find(
+          (node) => node.type === "decl" && node.prop === "font-family" && node.value === "Arial, Helvetica, sans-serif"
+        )?.remove();
         if (bodyRule.nodes.length === 0) {
           bodyRule.remove();
         }
@@ -1430,6 +1543,298 @@ function addOrUpdateVars(baseLayer, selector, vars) {
     existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl);
   });
 }
+function updateCssVarsPluginV4(cssVars) {
+  return {
+    postcssPlugin: "update-css-vars-v4",
+    Once(root) {
+      Object.entries(cssVars).forEach(([key, vars]) => {
+        const selector = key === "light" ? ":root" : `.${key}`;
+        let ruleNode = root.nodes?.find(
+          (node) => node.type === "rule" && node.selector === selector
+        );
+        if (!ruleNode && Object.keys(vars).length > 0) {
+          ruleNode = postcss.rule({
+            selector,
+            nodes: [],
+            raws: { semicolon: true, between: " ", before: "\n" }
+          });
+          root.append(ruleNode);
+          root.insertBefore(ruleNode, postcss.comment({ text: "---break---" }));
+        }
+        Object.entries(vars).forEach(([key2, value]) => {
+          let prop = `--${key2.replace(/^--/, "")}`;
+          if (prop === "--sidebar-background") {
+            prop = "--sidebar";
+          }
+          if (isLocalHSLValue(value)) {
+            value = `hsl(${value})`;
+          }
+          const newDecl = postcss.decl({
+            prop,
+            value,
+            raws: { semicolon: true }
+          });
+          const existingDecl = ruleNode?.nodes.find(
+            (node) => node.type === "decl" && node.prop === prop
+          );
+          if (!existingDecl) {
+            ruleNode?.append(newDecl);
+          }
+        });
+      });
+    }
+  };
+}
+function updateThemePlugin(cssVars) {
+  return {
+    postcssPlugin: "update-theme",
+    Once(root) {
+      const variables = Array.from(
+        new Set(
+          Object.keys(cssVars).flatMap(
+            (key) => Object.keys(cssVars[key] || {})
+          )
+        )
+      );
+      if (!variables.length) {
+        return;
+      }
+      const themeNode = upsertThemeNode(root);
+      const themeVarNodes = themeNode.nodes?.filter(
+        (node) => node.type === "decl" && node.prop.startsWith("--")
+      );
+      for (const variable of variables) {
+        const value = Object.values(cssVars).find((vars) => vars[variable])?.[variable];
+        if (!value) {
+          continue;
+        }
+        if (variable === "radius") {
+          const radiusVariables = {
+            sm: "calc(var(--radius) - 4px)",
+            md: "calc(var(--radius) - 2px)",
+            lg: "var(--radius)",
+            xl: "calc(var(--radius) + 4px)"
+          };
+          for (const [key, value2] of Object.entries(radiusVariables)) {
+            const cssVarNode2 = postcss.decl({
+              prop: `--radius-${key}`,
+              value: value2,
+              raws: { semicolon: true }
+            });
+            if (themeNode?.nodes?.find(
+              (node) => node.type === "decl" && node.prop === cssVarNode2.prop
+            )) {
+              continue;
+            }
+            themeNode?.append(cssVarNode2);
+          }
+          continue;
+        }
+        let prop = isLocalHSLValue(value) || isColorValue(value) ? `--color-${variable.replace(/^--/, "")}` : `--${variable.replace(/^--/, "")}`;
+        if (prop === "--color-sidebar-background") {
+          prop = "--color-sidebar";
+        }
+        let propValue = `var(--${variable})`;
+        if (prop === "--color-sidebar") {
+          propValue = "var(--sidebar)";
+        }
+        const cssVarNode = postcss.decl({
+          prop,
+          value: propValue,
+          raws: { semicolon: true }
+        });
+        const existingDecl = themeNode?.nodes?.find(
+          (node) => node.type === "decl" && node.prop === cssVarNode.prop
+        );
+        if (!existingDecl) {
+          if (themeVarNodes?.length) {
+            themeNode?.insertAfter(
+              themeVarNodes[themeVarNodes.length - 1],
+              cssVarNode
+            );
+          } else {
+            themeNode?.append(cssVarNode);
+          }
+        }
+      }
+    }
+  };
+}
+function upsertThemeNode(root) {
+  let themeNode = root.nodes.find(
+    (node) => node.type === "atrule" && node.name === "theme" && node.params === "inline"
+  );
+  if (!themeNode) {
+    themeNode = postcss.atRule({
+      name: "theme",
+      params: "inline",
+      nodes: [],
+      raws: { semicolon: true, between: " ", before: "\n" }
+    });
+    root.append(themeNode);
+    root.insertBefore(themeNode, postcss.comment({ text: "---break---" }));
+  }
+  return themeNode;
+}
+function addCustomVariant({ params }) {
+  return {
+    postcssPlugin: "add-custom-variant",
+    Once(root) {
+      const customVariant = root.nodes.find(
+        (node) => node.type === "atrule" && node.name === "custom-variant"
+      );
+      if (!customVariant) {
+        const variantNode = postcss.atRule({
+          name: "custom-variant",
+          params,
+          raws: { semicolon: true, before: "\n" }
+        });
+        root.insertAfter(root.nodes[0], variantNode);
+        root.insertBefore(variantNode, postcss.comment({ text: "---break---" }));
+      }
+    }
+  };
+}
+function updateTailwindConfigPlugin(tailwindConfig) {
+  return {
+    postcssPlugin: "update-tailwind-config",
+    Once(root) {
+      if (!tailwindConfig?.plugins) {
+        return;
+      }
+      const quoteType = getQuoteType(root);
+      const quote = quoteType === "single" ? "'" : '"';
+      const pluginNodes = root.nodes.filter(
+        (node) => node.type === "atrule" && node.name === "plugin"
+      );
+      const lastPluginNode = pluginNodes[pluginNodes.length - 1] || root.nodes[0];
+      for (const plugin of tailwindConfig.plugins) {
+        const pluginName = plugin.replace(/^require\(["']|["']\)$/g, "");
+        if (pluginNodes.some((node) => {
+          return node.params.replace(/["']/g, "") === pluginName;
+        })) {
+          continue;
+        }
+        const pluginNode = postcss.atRule({
+          name: "plugin",
+          params: `${quote}${pluginName}${quote}`,
+          raws: { semicolon: true, before: "\n" }
+        });
+        root.insertAfter(lastPluginNode, pluginNode);
+        root.insertBefore(pluginNode, postcss.comment({ text: "---break---" }));
+      }
+    }
+  };
+}
+function updateTailwindConfigKeyframesPlugin(tailwindConfig) {
+  return {
+    postcssPlugin: "update-tailwind-config-keyframes",
+    Once(root) {
+      if (!tailwindConfig?.theme?.extend?.keyframes) {
+        return;
+      }
+      const themeNode = upsertThemeNode(root);
+      const existingKeyFrameNodes = themeNode.nodes?.filter(
+        (node) => node.type === "atrule" && node.name === "keyframes"
+      );
+      const keyframeValueSchema = z5.record(
+        z5.string(),
+        z5.record(z5.string(), z5.string())
+      );
+      for (const [keyframeName, keyframeValue] of Object.entries(
+        tailwindConfig.theme.extend.keyframes
+      )) {
+        if (typeof keyframeName !== "string") {
+          continue;
+        }
+        const parsedKeyframeValue = keyframeValueSchema.safeParse(keyframeValue);
+        if (!parsedKeyframeValue.success) {
+          continue;
+        }
+        if (existingKeyFrameNodes?.find(
+          (node) => node.type === "atrule" && node.name === "keyframes" && node.params === keyframeName
+        )) {
+          continue;
+        }
+        const keyframeNode = postcss.atRule({
+          name: "keyframes",
+          params: keyframeName,
+          nodes: [],
+          raws: { semicolon: true, between: " ", before: "\n  " }
+        });
+        for (const [key, values] of Object.entries(parsedKeyframeValue.data)) {
+          const rule = postcss.rule({
+            selector: key,
+            nodes: Object.entries(values).map(
+              ([key2, value]) => postcss.decl({
+                prop: key2,
+                value,
+                raws: { semicolon: true, before: "\n      ", between: ": " }
+              })
+            ),
+            raws: { semicolon: true, between: " ", before: "\n    " }
+          });
+          keyframeNode.append(rule);
+        }
+        themeNode.append(keyframeNode);
+        themeNode.insertBefore(
+          keyframeNode,
+          postcss.comment({ text: "---break---" })
+        );
+      }
+    }
+  };
+}
+function updateTailwindConfigAnimationPlugin(tailwindConfig) {
+  return {
+    postcssPlugin: "update-tailwind-config-animation",
+    Once(root) {
+      if (!tailwindConfig?.theme?.extend?.animation) {
+        return;
+      }
+      const themeNode = upsertThemeNode(root);
+      const existingAnimationNodes = themeNode.nodes?.filter(
+        (node) => node.type === "decl" && node.prop.startsWith("--animate-")
+      );
+      const parsedAnimationValue = z5.record(z5.string(), z5.string()).safeParse(tailwindConfig.theme.extend.animation);
+      if (!parsedAnimationValue.success) {
+        return;
+      }
+      for (const [key, value] of Object.entries(parsedAnimationValue.data)) {
+        const prop = `--animate-${key}`;
+        if (existingAnimationNodes?.find(
+          (node) => node.prop === prop
+        )) {
+          continue;
+        }
+        const animationNode = postcss.decl({
+          prop,
+          value,
+          raws: { semicolon: true, between: ": ", before: "\n  " }
+        });
+        themeNode.append(animationNode);
+      }
+    }
+  };
+}
+function getQuoteType(root) {
+  const firstNode = root.nodes[0];
+  const raw = firstNode.toString();
+  if (raw.includes("'")) {
+    return "single";
+  }
+  return "double";
+}
+function isLocalHSLValue(value) {
+  if (value.startsWith("hsl") || value.startsWith("rgb") || value.startsWith("#") || value.startsWith("oklch")) {
+    return false;
+  }
+  const chunks = value.split(" ");
+  return chunks.length === 3 && chunks.slice(1, 3).every((chunk) => chunk.includes("%"));
+}
+function isColorValue(value) {
+  return value.startsWith("hsl") || value.startsWith("rgb") || value.startsWith("#") || value.startsWith("oklch");
+}
 
 // src/utils/updaters/update-dependencies.ts
 import { addDependency } from "nypm";
@@ -1836,7 +2241,7 @@ async function updateFiles(files, config, options) {
       if (!existingFolder) {
         folderSkipped.set(folderName, false);
       }
-      if (!folderSkipped.has(folderName)) {
+      if (!folderSkipped.has(folderName) && !options.overwrite) {
         filesCreatedSpinner.stop();
         const { overwrite } = await prompts({
           type: "confirm",
@@ -1939,6 +2344,9 @@ async function addComponents(components, config, options) {
     isNewProject: false,
     ...options
   };
+  return await addProjectComponents(components, config, options);
+}
+async function addProjectComponents(components, config, options) {
   const registrySpinner = spinner(`Checking registry.`, {
     silent: options.silent
   })?.start();
@@ -1948,12 +2356,16 @@ async function addComponents(components, config, options) {
     return handleError(new Error("Failed to fetch components from registry."));
   }
   registrySpinner?.succeed();
+  const tailwindVersion = await getProjectTailwindVersionFromConfig(config);
   await updateTailwindConfig(tree.tailwind?.config, config, {
-    silent: options.silent
+    silent: options.silent,
+    tailwindVersion
   });
   await updateCssVars(tree.cssVars, config, {
     cleanupDefaultNextStyles: options.isNewProject,
-    silent: options.silent
+    silent: options.silent,
+    tailwindVersion,
+    tailwindConfig: tree.tailwind?.config
   });
   await updateDependencies(tree.dependencies, config, {
     silent: options.silent
@@ -2040,16 +2452,30 @@ async function addTailwindConfigContent(configObject, content) {
 import { Command } from "commander";
 import path10 from "pathe";
 import prompts2 from "prompts";
-import { z as z5 } from "zod";
-var initOptionsSchema = z5.object({
-  cwd: z5.string(),
-  components: z5.array(z5.string()).optional(),
-  yes: z5.boolean(),
-  defaults: z5.boolean(),
-  force: z5.boolean(),
-  silent: z5.boolean(),
-  isNewProject: z5.boolean(),
-  srcDir: z5.boolean().optional()
+import { z as z6 } from "zod";
+var initOptionsSchema = z6.object({
+  cwd: z6.string(),
+  components: z6.array(z6.string()).optional(),
+  yes: z6.boolean(),
+  defaults: z6.boolean(),
+  force: z6.boolean(),
+  silent: z6.boolean(),
+  isNewProject: z6.boolean(),
+  srcDir: z6.boolean().optional(),
+  cssVariables: z6.boolean(),
+  baseColor: z6.string().optional().refine(
+    (val) => {
+      if (val) {
+        return BASE_COLORS.find((color) => color.name === val);
+      }
+      return true;
+    },
+    {
+      message: `Invalid base color. Please use '${BASE_COLORS.map(
+        (color) => color.name
+      ).join("', '")}'`
+    }
+  )
 });
 var init = new Command().name("init").description("initialize your project and install dependencies").argument(
   "[components...]",
@@ -2058,11 +2484,7 @@ var init = new Command().name("init").description("initialize your project and i
   "-c, --cwd <cwd>",
   "the working directory. defaults to the current directory.",
   process.cwd()
-).option("-s, --silent", "mute output.", false).option(
-  "--src-dir",
-  "use the src directory when creating a new project.",
-  false
-).action(async (components, opts) => {
+).option("-s, --silent", "mute output.", false).option("--css-variables", "use css variables for theming.", true).option("--no-css-variables", "do not use css variables for theming.").action(async (components, opts) => {
   try {
     const options = initOptionsSchema.parse({
       cwd: path10.resolve(opts.cwd),
@@ -2241,13 +2663,14 @@ async function promptForMinimalConfig(defaultConfig, opts) {
   let baseColor = defaultConfig.tailwind.baseColor;
   let cssVariables = defaultConfig.tailwind.cssVariables;
   if (!opts.defaults) {
-    const [styles, baseColors] = await Promise.all([
+    const [styles, baseColors, tailwindVersion] = await Promise.all([
       getRegistryStyles(),
-      getRegistryBaseColors()
+      getRegistryBaseColors(),
+      getProjectTailwindVersionFromConfig(defaultConfig)
     ]);
     const options = await prompts2([
       {
-        type: "select",
+        type: tailwindVersion === "v4" ? null : "select",
         name: "style",
         message: `Which ${highlighter.info("style")} would you like to use?`,
         choices: styles.map((style2) => ({
@@ -2257,7 +2680,7 @@ async function promptForMinimalConfig(defaultConfig, opts) {
         initial: 0
       },
       {
-        type: "select",
+        type: opts.baseColor ? null : "select",
         name: "tailwindBaseColor",
         message: `Which color would you like to use as the ${highlighter.info(
           "base color"
@@ -2266,21 +2689,11 @@ async function promptForMinimalConfig(defaultConfig, opts) {
           title: color.label,
           value: color.name
         }))
-      },
-      {
-        type: "toggle",
-        name: "tailwindCssVariables",
-        message: `Would you like to use ${highlighter.info(
-          "CSS variables"
-        )} for theming?`,
-        initial: defaultConfig?.tailwind.cssVariables,
-        active: "yes",
-        inactive: "no"
       }
     ]);
-    style = options.style;
-    baseColor = options.tailwindBaseColor;
-    cssVariables = options.tailwindCssVariables;
+    style = options.style ?? "new-york";
+    baseColor = options.tailwindBaseColor ?? baseColor;
+    cssVariables = opts.cssVariables;
   }
   return rawConfigSchema.parse({
     $schema: defaultConfig?.$schema,
@@ -2347,16 +2760,29 @@ Before you can add components, you must create a valid ${highlighter.info(
 import { Command as Command2 } from "commander";
 import path12 from "pathe";
 import prompts3 from "prompts";
-import { z as z6 } from "zod";
-var addOptionsSchema = z6.object({
-  components: z6.array(z6.string()).optional(),
-  yes: z6.boolean(),
-  overwrite: z6.boolean(),
-  cwd: z6.string(),
-  all: z6.boolean(),
-  path: z6.string().optional(),
-  silent: z6.boolean(),
-  srcDir: z6.boolean().optional()
+import { z as z7 } from "zod";
+var DEPRECATED_COMPONENTS = [
+  {
+    name: "toast",
+    deprecatedBy: "sonner",
+    message: "The toast component is deprecated. Use the sonner component instead."
+  },
+  {
+    name: "toaster",
+    deprecatedBy: "sonner",
+    message: "The toaster component is deprecated. Use the sonner component instead."
+  }
+];
+var addOptionsSchema = z7.object({
+  components: z7.array(z7.string()).optional(),
+  yes: z7.boolean(),
+  overwrite: z7.boolean(),
+  cwd: z7.string(),
+  all: z7.boolean(),
+  path: z7.string().optional(),
+  silent: z7.boolean(),
+  srcDir: z7.boolean().optional(),
+  cssVariables: z7.boolean()
 });
 var add = new Command2().name("add").description("add a component to your project").argument(
   "[components...]",
@@ -2369,7 +2795,7 @@ var add = new Command2().name("add").description("add a component to your projec
   "--src-dir",
   "use the src directory when creating a new project.",
   false
-).action(async (components, opts) => {
+).option("--css-variables", "use css variables for theming.", true).option("--no-css-variables", "do not use css variables for theming.").action(async (components, opts) => {
   try {
     const options = addOptionsSchema.parse({
       components,
@@ -2398,6 +2824,20 @@ var add = new Command2().name("add").description("add a component to your projec
     if (!options.components?.length) {
       options.components = await promptForRegistryComponents(options);
     }
+    const projectInfo = await getProjectInfo(options.cwd);
+    if (projectInfo?.tailwindVersion === "v4") {
+      const deprecatedComponents = DEPRECATED_COMPONENTS.filter(
+        (component) => options.components?.includes(component.name)
+      );
+      if (deprecatedComponents?.length) {
+        logger.break();
+        deprecatedComponents.forEach((component) => {
+          logger.warn(highlighter.warn(component.message));
+        });
+        logger.break();
+        process.exit(1);
+      }
+    }
     let { errors, config } = await preFlightAdd(options);
     if (errors[MISSING_CONFIG]) {
       const { proceed } = await prompts3({
@@ -2420,7 +2860,8 @@ var add = new Command2().name("add").description("add a component to your projec
         skipPreflight: false,
         silent: true,
         isNewProject: false,
-        srcDir: options.srcDir
+        srcDir: options.srcDir,
+        cssVariables: options.cssVariables
       });
     }
     if (!config) {
@@ -2442,7 +2883,9 @@ async function promptForRegistryComponents(options) {
     return [];
   }
   if (options.all) {
-    return registryIndex.map((entry) => entry.name);
+    return registryIndex.map((entry) => entry.name).filter(
+      (component) => !DEPRECATED_COMPONENTS.some((c) => c.name === component)
+    );
   }
   if (options.components?.length) {
     return options.components;
@@ -2453,7 +2896,11 @@ async function promptForRegistryComponents(options) {
     message: "Which components would you like to add?",
     hint: "Space to select. A to toggle all. Enter to submit.",
     instructions: false,
-    choices: registryIndex.filter((entry) => entry.type === "registry:ui").map((entry) => ({
+    choices: registryIndex.filter(
+      (entry) => entry.type === "registry:ui" && !DEPRECATED_COMPONENTS.some(
+        (component) => component.name === entry.name
+      )
+    ).map((entry) => ({
       title: entry.name,
       value: entry.name,
       selected: options.all ? true : options.components?.includes(entry.name)
@@ -2464,7 +2911,7 @@ async function promptForRegistryComponents(options) {
     logger.info("");
     process.exit(1);
   }
-  const result = z6.array(z6.string()).safeParse(components);
+  const result = z7.array(z7.string()).safeParse(components);
   if (!result.success) {
     logger.error("");
     handleError(new Error("Something went wrong. Please try again."));
@@ -2478,12 +2925,12 @@ import { existsSync as existsSync2, promises as fs10 } from "node:fs";
 import { Command as Command3 } from "commander";
 import { diffLines } from "diff";
 import path13 from "pathe";
-import { z as z7 } from "zod";
-var updateOptionsSchema = z7.object({
-  component: z7.string().optional(),
-  yes: z7.boolean(),
-  cwd: z7.string(),
-  path: z7.string().optional()
+import { z as z8 } from "zod";
+var updateOptionsSchema = z8.object({
+  component: z8.string().optional(),
+  yes: z8.boolean(),
+  cwd: z8.string(),
+  path: z8.string().optional()
 });
 var diff = new Command3().name("diff").description("check for updates against the registry").argument("[component]", "the component name").option("-y, --yes", "skip confirmation prompt.", false).option(
   "-c, --cwd <cwd>",
@@ -2843,17 +3290,17 @@ Before you can run a migration, you must create a valid ${highlighter.info(
 import { Command as Command5 } from "commander";
 import consola4 from "consola";
 import path16 from "pathe";
-import { z as z8 } from "zod";
+import { z as z9 } from "zod";
 var migrations = [
   {
     name: "icons",
     description: "migrate your ui components to a different icon library."
   }
 ];
-var migrateOptionsSchema = z8.object({
-  cwd: z8.string(),
-  list: z8.boolean(),
-  migration: z8.string().refine(
+var migrateOptionsSchema = z9.object({
+  cwd: z9.string(),
+  list: z9.boolean(),
+  migration: z9.string().refine(
     (value) => value && migrations.some((migration) => migration.name === value),
     {
       message: "You must specify a valid migration. Run `shadcn migrate --list` to see available migrations."
@@ -2909,7 +3356,7 @@ import { Command as Command6 } from "commander";
 var package_default = {
   name: "shadcn-vue",
   type: "module",
-  version: "1.0.3",
+  version: "2.0.0",
   description: "Add components to your apps.",
   publishConfig: {
     access: "public"