next: prep for @next release

.changeset/pre.json

@@ -0,0 +1,11 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "shadcn-svelte": "0.13.0",
+    "playground-js": "0.0.2",
+    "playground-ts": "0.0.1",
+    "docs": "0.1.0"
+  },
+  "changesets": []
+}

packages/cli/src/commands/add.ts

@@ -251,7 +251,7 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 			title: `${highlight(pm)}: Installing dependencies`,
 			enabled: dependencies.size > 0,
 			async task() {
-				await execa(pm, [add, ...dependencies], {
+				await execa(pm, [add, "-D", ...dependencies], {
 					cwd,
 				});
 				return `Dependencies installed with ${highlight(pm)}`;

packages/cli/src/commands/init.ts

@@ -20,8 +20,15 @@ import {
 	detectLanguage,
 	detectPM,
 } from "../utils/auto-detect.js";
+import { SITE_BASE_URL } from "../constants.js";
+
+const PROJECT_DEPENDENCIES = [
+	"tailwind-variants",
+	"clsx",
+	"tailwind-merge",
+	"tailwindcss-animate",
+] as const;
 
-const PROJECT_DEPENDENCIES = ["tailwind-variants", "clsx", "tailwind-merge"] as const;
 const highlight = (...args: unknown[]) => color.bold.cyan(...args);
 
 const baseColors = getBaseColors();
@@ -123,7 +130,7 @@ async function promptForConfig(cwd: string, defaultConfig: Config | null, option
 	const langConfig = detectLanguage(cwd);
 	if (langConfig === undefined) {
 		throw error(
-			`Failed to find a ${highlight("tsconfig.json")} or ${highlight("jsconfig.json")} file. See: ${color.underline("https://www.shadcn-svelte.com/docs/installation#opt-out-of-typescript")}`
+			`Failed to find a ${highlight("tsconfig.json")} or ${highlight("jsconfig.json")} file. See: ${color.underline(`${SITE_BASE_URL}/docs/installation#opt-out-of-typescript`)}`
 		);
 	}
 
@@ -265,7 +272,7 @@ async function promptForConfig(cwd: string, defaultConfig: Config | null, option
 	}
 
 	const config = v.parse(cliConfig.rawConfigSchema, {
-		$schema: "https://shadcn-svelte.com/schema.json",
+		$schema: `${SITE_BASE_URL}/schema.json`,
 		style,
 		typescript: langConfig.type === "tsconfig.json",
 		tailwind: {
@@ -296,7 +303,7 @@ function validateImportAlias(alias: string, langConfig: DetectLanguageResult) {
 	if (resolvedPath !== undefined) {
 		return;
 	}
-	return `"${color.bold(alias)}" does not use an existing path alias defined in your ${color.bold(langConfig.type)}. See: ${color.underline("https://www.shadcn-svelte.com/docs/installation/manual#configure-path-aliases")}`;
+	return `"${color.bold(alias)}" does not use an existing path alias defined in your ${color.bold(langConfig.type)}. See: ${color.underline(`${SITE_BASE_URL}/docs/installation/manual#configure-path-aliases`)}`;
 }
 
 export async function runInit(cwd: string, config: Config, options: InitOptions) {
@@ -371,7 +378,7 @@ export async function runInit(cwd: string, config: Config, options: InitOptions)
 			title: `${highlight(pm)}: Installing dependencies`,
 			enabled: options.deps,
 			async task() {
-				await execa(pm, [add, ...PROJECT_DEPENDENCIES], {
+				await execa(pm, [add, "-D", ...PROJECT_DEPENDENCIES], {
 					cwd,
 				});
 				return `Dependencies installed with ${highlight(pm)}`;

packages/cli/src/commands/update.ts

@@ -237,7 +237,7 @@ async function runUpdate(cwd: string, config: Config, options: UpdateOptions) {
 			title: `${highlight(pm)}: Installing dependencies`,
 			enabled: dependencies.size > 0,
 			async task() {
-				await execa(pm, [add, ...dependencies], {
+				await execa(pm, [add, "-D", ...dependencies], {
 					cwd,
 				});
 				return `Dependencies installed with ${highlight(pm)}`;

packages/cli/src/constants.ts

@@ -0,0 +1 @@
+export const SITE_BASE_URL = "https://next.shadcn-svelte.com";

packages/cli/src/utils/get-config.ts

@@ -6,6 +6,7 @@ import { getTsconfig } from "get-tsconfig";
 import { ConfigError, error } from "./errors.js";
 import { resolveImport } from "./resolve-imports.js";
 import { syncSvelteKit } from "./sveltekit.js";
+import { SITE_BASE_URL } from "../constants.js";
 
 export const DEFAULT_STYLE = "default";
 export const DEFAULT_COMPONENTS = "$lib/components";
@@ -74,7 +75,7 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
 
 	if (pathAliases === null) {
 		throw error(
-			`Missing ${highlight("paths")} field in your ${highlight(tsconfigType)} for path aliases. See: ${color.underline("https://www.shadcn-svelte.com/docs/installation/manual#configure-path-aliases")}`
+			`Missing ${highlight("paths")} field in your ${highlight(tsconfigType)} for path aliases. See: ${color.underline(`${SITE_BASE_URL}/docs/installation/manual#configure-path-aliases`)}`
 		);
 	}
 
@@ -84,7 +85,7 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
 		new ConfigError(
 			`Invalid import alias found: (${highlight(`"${type}": "${alias}"`)}) in ${highlight("components.json")}.
    - Import aliases ${color.underline("must use")} existing path aliases defined in your ${highlight(tsconfigType)} (e.g. "${type}": "$lib/${type}").
-   - See: ${color.underline("https://www.shadcn-svelte.com/docs/installation/manual#configure-path-aliases")}.`
+   - See: ${color.underline(`${SITE_BASE_URL}/docs/installation/manual#configure-path-aliases`)}.`
 		);
 
 	if (utilsPath === undefined) throw aliasError("utils", config.aliases.utils);
@@ -105,7 +106,7 @@ export function getTSConfig(cwd: string, tsconfigName: "tsconfig.json" | "jsconf
 	const parsedConfig = getTsconfig(path.resolve(cwd, "package.json"), tsconfigName);
 	if (parsedConfig === null) {
 		throw error(
-			`Failed to find ${highlight(tsconfigName)}. See: ${color.underline("https://www.shadcn-svelte.com/docs/installation#opt-out-of-typescript")}`
+			`Failed to find ${highlight(tsconfigName)}. See: ${color.underline(`${SITE_BASE_URL}/docs/installation#opt-out-of-typescript`)}`
 		);
 	}
 

packages/cli/src/utils/registry/index.ts

@@ -7,8 +7,9 @@ import { error } from "../errors.js";
 import { getEnvProxy } from "../get-env-proxy.js";
 import type { Config } from "../get-config.js";
 import * as schemas from "./schema.js";
+import { SITE_BASE_URL } from "../../constants.js";
 
-const baseUrl = process.env.COMPONENTS_REGISTRY_URL ?? "https://shadcn-svelte.com";
+const baseUrl = process.env.COMPONENTS_REGISTRY_URL ?? SITE_BASE_URL;
 
 export type RegistryItem = v.InferOutput<typeof schemas.registryItemSchema>;
 

packages/cli/src/utils/templates.ts

@@ -1,121 +1,25 @@
 export const UTILS = `import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
-}
-
-type FlyAndScaleParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const flyAndScale = (
-	node: Element,
-	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (
-		valueA: number,
-		scaleA: [number, number],
-		scaleB: [number, number]
-	) => {
-		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: Record<string, number | string | undefined>
-	): string => {
-		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
-	};
 };`;
 
 export const 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
-	};
 };`;
 
 const TAILWIND_JS = `import { fontFamily } from "tailwindcss/defaultTheme";
+import tailwindcssAnimate from "tailwindcss-animate";
 
 /** @type {import('tailwindcss').Config} */
 const config = {`;
 
 const TAILWIND_TS = `import { fontFamily } from "tailwindcss/defaultTheme";
+import tailwindcssAnimate from "tailwindcss-animate";
 import type { Config } from "tailwindcss";
 
 const config: Config = {`;
@@ -175,9 +79,15 @@ const TAILWIND_WITH_VARIABLES = `
 			},
 			fontFamily: {
 				sans: [...fontFamily.sans]
-			}
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+				"caret-blink": "caret-blink 1.25s ease-out infinite",
+			},
 		}
 	},
+	plugins: [tailwindcssAnimate],
 };
 
 export default config;
@@ -187,34 +97,3 @@ export const TAILWIND_CONFIG_WITH_VARIABLES = {
 	TS: TAILWIND_TS + TAILWIND_WITH_VARIABLES,
 	JS: TAILWIND_JS + TAILWIND_WITH_VARIABLES,
 };
-
-export const TAILWIND_CONFIG = `import { fontFamily } from "tailwindcss/defaultTheme";
-
-/** @type {import('tailwindcss').Config} */
-const config = {
-	darkMode: ["class"],
-	content: ["./src/**/*.{html,js,svelte,ts}"],
-	safelist: ["dark"],
-	theme: {
-		container: {
-			center: true,
-			padding: "2rem",
-			screens: {
-				"2xl": "1400px"
-			}
-		},
-		extend: {
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
-			},
-			fontFamily: {
-				sans: [...fontFamily.sans]
-			}
-		}
-	},
-};
-
-export default config;
-`;

packages/cli/test/commands/init.spec.ts

@@ -69,7 +69,7 @@ it("init (config-full)", async () => {
 
 	expect(execa).toHaveBeenCalledWith(
 		"pnpm",
-		["add", "tailwind-variants", "clsx", "tailwind-merge"],
+		["add", "-D", "tailwind-variants", "clsx", "tailwind-merge", "tailwindcss-animate"],
 		{ cwd: targetDir }
 	);
 

sites/docs/scripts/build-registry.ts

@@ -11,6 +11,7 @@ import { buildRegistry } from "./registry";
 import { transformContent } from "./transformers";
 import { BASE_STYLES, BASE_STYLES_WITH_VARIABLES, THEME_STYLES_WITH_VARIABLES } from "./templates";
 import { getChunks } from "./transform-chunks.js";
+import { TMP_NEXT_DEPS } from "./tmp";
 
 const REGISTRY_PATH = path.resolve("static", "registry");
 const REGISTRY_IGNORE = ["super-form"];
@@ -212,7 +213,9 @@ export const Index = {
 			...item,
 			style: undefined, // discard `style`
 			// The `default` style uses `lucide-svelte`, so we'll discard it for the purposes of the index
-			dependencies: item.dependencies.filter((dep) => dep !== "lucide-svelte"),
+			dependencies: item.dependencies
+				.filter((dep) => dep !== "lucide-svelte")
+				.map((dep) => (TMP_NEXT_DEPS.includes(dep) ? `${dep}@next` : dep)),
 			// We only want the relative file paths
 			files: item.files.map((file) => file.path),
 		}));

sites/docs/scripts/registry.ts

@@ -4,6 +4,7 @@ import { parse, preprocess } from "svelte/compiler";
 import { walk } from "estree-walker";
 import { type Registry, styles } from "../src/lib/registry";
 import config from "../svelte.config.js";
+import { TMP_NEXT_DEPS } from "./tmp";
 
 // [Dependency, [...PeerDependencies]]
 const DEPENDENCIES = new Map<string, string[]>([
@@ -102,7 +103,9 @@ async function buildUIRegistry(componentPath: string, componentName: string, sty
 		files,
 		name: componentName,
 		registryDependencies: Array.from(registryDependencies),
-		dependencies: Array.from(dependencies),
+		dependencies: Array.from(dependencies).map((dep) =>
+			TMP_NEXT_DEPS.includes(dep) ? `${dep}@next` : dep
+		),
 	} satisfies RegistryItem;
 }
 

sites/docs/scripts/tmp.ts

@@ -0,0 +1 @@
+export const TMP_NEXT_DEPS = ["bits-ui", "formsnap", "paneforge", "vaul-svelte"];

sites/docs/src/content/cli.md

@@ -13,7 +13,7 @@ Use the `init` command to initialize dependencies for a new project.
 
 The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and creates CSS variables for the project.
 
-<PMExecute command="shadcn-svelte@latest init" />
+<PMExecute command="shadcn-svelte@next init" />
 
 You will be asked a few questions to configure `components.json`:
 
@@ -49,7 +49,7 @@ Options:
 
 Use the `add` command to add components and dependencies to your project.
 
-<PMExecute command="shadcn-svelte@latest add [component]" />
+<PMExecute command="shadcn-svelte@next add [component]" />
 
 You will be presented with a list of components to choose from:
 
@@ -93,7 +93,7 @@ Options:
 
 Use the `update` command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command.
 
-<PMExecute command="shadcn-svelte@latest update [component]" />
+<PMExecute command="shadcn-svelte@next update [component]" />
 
 ### Options
 
@@ -120,5 +120,5 @@ Options:
 This enables the use of a proxy when sending out requests to fetch from the `shadcn` registry. If the `HTTP_PROXY` or `http_proxy` environment variables have been set, the request library underneath will respect the proxy settings.
 
 ```bash
-HTTP_PROXY="<proxy-url>" npx shadcn-svelte@latest init
+HTTP_PROXY="<proxy-url>" npx shadcn-svelte@next init
 ```

sites/docs/src/content/components-json.md

@@ -19,7 +19,7 @@ We use it to understand how your project is set up and how to generate component
 
 You can create a `components.json` file in your project by running the following command:
 
-<PMExecute command="shadcn-svelte@latest init" />
+<PMExecute command="shadcn-svelte@next init" />
 
 See the [CLI section](/docs/cli) for more information.