shadcn-svelte 0.6.1 → 0.7.0

package/dist/index.js

@@ -5223,6 +5223,7 @@ var DEFAULT_COMPONENTS = "$lib/components";
 var DEFAULT_UTILS = "$lib/utils";
 var DEFAULT_TAILWIND_CSS = "src/app.pcss";
 var DEFAULT_TAILWIND_CONFIG = "tailwind.config.cjs";
+var DEFAULT_TYPESCRIPT = true;
 var rawConfigSchema = z.object({
   $schema: z.string().optional(),
   style: z.string(),
@@ -5235,7 +5236,8 @@ var rawConfigSchema = z.object({
   aliases: z.object({
     components: z.string().transform((v) => v.replace(/[\u{0080}-\u{FFFF}]/gu, "")),
     utils: z.string().transform((v) => v.replace(/[\u{0080}-\u{FFFF}]/gu, ""))
-  })
+  }),
+  typescript: z.boolean().default(true)
 }).strict();
 var configSchema = rawConfigSchema.extend({
   resolvedPaths: z.object({
@@ -5265,8 +5267,10 @@ async function resolveConfigPaths(cwd, config) {
     );
   }
   const tsconfigPath = await find(path8.resolve(cwd, "package.json"), { root: cwd });
-  if (tsconfigPath === null)
-    throw new Error(`Failed to find ${logger.highlight("tsconfig.json")}.`);
+  if (tsconfigPath === null) {
+    const configToFind = config.typescript ? "tsconfig.json" : "jsconfig.json";
+    throw new Error(`Failed to find ${logger.highlight(configToFind)}.`);
+  }
   const parsedConfig = await parseNative(tsconfigPath);
   const absoluteBaseUrl = parsedConfig.result.options.pathsBasePath;
   let paths = parsedConfig.result.options.paths;
@@ -5448,9 +5452,10 @@ async function resolveTree(index, names) {
     (component, index2, self2) => self2.findIndex((c2) => c2.name === component.name) === index2
   );
 }
-async function fetchTree(style2, tree) {
+async function fetchTree(config, tree) {
   try {
-    const paths = tree.map((item2) => `styles/${style2}/${item2.name}.json`);
+    const trueStyle = config.typescript ? config.style : `${config.style}-js`;
+    const paths = tree.map((item2) => `styles/${trueStyle}/${item2.name}.json`);
     const result = await fetchRegistry(paths);
     return registryWithContentSchema.parse(result);
   } catch (error) {
@@ -6530,8 +6535,8 @@ var MagicString = class {
   }
 };
 
-// src/utils/transformer.ts
-function transformImport(content, config) {
+// src/utils/transformers.ts
+function transformImports(content, config) {
   const s = new MagicString(content);
   s.replaceAll(/@\/registry\/[^/]+/g, config.aliases.components);
   s.replaceAll(/\$lib\/utils/g, config.aliases.utils);
@@ -6607,7 +6612,7 @@ var add = new Command().command("add").description("add components to your proje
       return;
     }
     const tree = await resolveTree(registryIndex, selectedComponents);
-    const payload = await fetchTree(config.style, tree);
+    const payload = await fetchTree(config, tree);
     const baseColor = await getRegistryBaseColor(config.tailwind.baseColor);
     if (!payload.length) {
       logger.warn("Selected components not found. Exiting.");
@@ -6648,9 +6653,9 @@ ${highlight(selectedComponents)}`);
         process.cwd(),
         path10.resolve(targetDir, item2.name)
       );
-      const existingComponent = item2.files.filter(
-        (file) => existsSync2(path10.resolve(targetDir, item2.name, file.name))
-      );
+      const existingComponent = item2.files.filter((file) => {
+        return existsSync2(path10.resolve(targetDir, item2.name, file.name));
+      });
       if (existingComponent.length && !options.overwrite) {
         if (selectedComponents.includes(item2.name)) {
           logger.warn(
@@ -6670,7 +6675,7 @@ Component ${highlight(
       for (const file of item2.files) {
         const componentDir = path10.resolve(targetDir, item2.name);
         let filePath = path10.resolve(targetDir, item2.name, file.name);
-        const content = transformImport(file.content, config);
+        const content = transformImports(file.content, config);
         if (!existsSync2(componentDir)) {
           await fs6.mkdir(componentDir, { recursive: true });
         }
@@ -6787,6 +6792,54 @@ export const flyAndScale = (
         easing: cubicOut
     };
 };`;
+var UTILS_JS = `import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+export const flyAndScale = (
+    node,
+    params = { y: -8, x: 0, start: 0.95, duration: 150 }
+) => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+
+    const scaleConversion = (valueA, scaleA, scaleB) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+
+        return valueB;
+    };
+
+    const styleToString = (style) => {
+        return Object.keys(style).reduce((str, key) => {
+            if (style[key] === undefined) return str;
+            return str + \`\${key}:\${style[key]};\`;
+        }, "");
+    };
+
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+            return styleToString({
+                transform: \`\${transform} translate3d(\${x}px, \${y}px, 0) scale(\${scale})\`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+};`;
 var TAILWIND_CONFIG_WITH_VARIABLES = `import { fontFamily } from "tailwindcss/defaultTheme";
 
 /** @type {import('tailwindcss').Config} */
@@ -6861,9 +6914,7 @@ var init2 = new Command2().command("init").description("Configure your SvelteKit
   process.cwd()
 ).action(async (options) => {
   const cwd = path11.resolve(options.cwd);
-  logger.warn(
-    "This command assumes a SvelteKit project with TypeScript and Tailwind CSS."
-  );
+  logger.warn("This command assumes a SvelteKit project with Tailwind CSS.");
   logger.warn(
     "If you don't have these, follow the manual steps at https://shadcn-svelte.com/docs/installation."
   );
@@ -6907,6 +6958,14 @@ async function promptForConfig(cwd, defaultConfig = null, skip = false) {
   const styles2 = await getRegistryStyles();
   const baseColors = await getRegistryBaseColors();
   const options = await prompts3([
+    {
+      type: "toggle",
+      name: "typescript",
+      message: `Would you like to use ${highlight("TypeScript")} (recommended)?`,
+      initial: defaultConfig?.typescript ?? DEFAULT_TYPESCRIPT,
+      active: "yes",
+      inactive: "no"
+    },
     {
       type: "select",
       name: "style",
@@ -6969,6 +7028,7 @@ async function promptForConfig(cwd, defaultConfig = null, skip = false) {
   const config = rawConfigSchema.parse({
     $schema: "https://shadcn-svelte.com/schema.json",
     style: options.style,
+    typescript: options.typescript,
     tailwind: {
       config: options.tailwindConfig,
       css: options.tailwindCss,
@@ -7030,7 +7090,9 @@ async function runInit(cwd, config) {
       "utf8"
     );
   }
-  await fs7.writeFile(`${config.resolvedPaths.utils}.ts`, UTILS, "utf8");
+  const utilsPath = config.resolvedPaths.utils + (config.typescript ? ".ts" : ".js");
+  const utilsTemplate = config.typescript ? UTILS : UTILS_JS;
+  await fs7.writeFile(utilsPath, utilsTemplate, "utf8");
   spinner?.succeed();
   const dependenciesSpinner = ora2(`Installing dependencies...`)?.start();
   const packageManager = await getPackageManager(cwd);
@@ -7140,7 +7202,8 @@ var update = new Command3().command("update").description("update components in
       return;
     }
     if (selectedComponents.find((item2) => item2.name === "utils")) {
-      const utilsPath = config.resolvedPaths.utils + ".ts";
+      const extension = config.typescript ? ".ts" : ".js";
+      const utilsPath = config.resolvedPaths.utils + extension;
       if (!existsSync4(utilsPath)) {
         spinner.fail(
           `utils at ${logger.highlight(utilsPath)} does not exist.`
@@ -7154,7 +7217,7 @@ var update = new Command3().command("update").description("update components in
       registryIndex,
       selectedComponents.map((com) => com.name)
     );
-    const payload = await fetchTree(config.style, tree);
+    const payload = await fetchTree(config, tree);
     for (const item2 of payload) {
       spinner.text = `Updating ${item2.name}...`;
       const targetDir = await getItemTargetPath(config, item2);
@@ -7167,7 +7230,7 @@ var update = new Command3().command("update").description("update components in
       for (const file of item2.files) {
         const componentDir2 = path12.resolve(targetDir, item2.name);
         let filePath = path12.resolve(targetDir, item2.name, file.name);
-        const content = transformImport(file.content, config);
+        const content = transformImports(file.content, config);
         if (!existsSync4(componentDir2)) {
           await fs8.mkdir(componentDir2, { recursive: true });
         }