feat: make Form.SelectTrigger more flexible (#634)

huntabyte · Jan 12, 2024 · d48d69f · d48d69f · vercel · Jan 12, 2024
1 parent 1d119d9
commit d48d69f
Show file tree

Hide file tree

Showing 343 changed files with 911 additions and 2,764 deletions.
diff --git a/apps/www/.eslintrc.cjs b/apps/www/.eslintrc.cjs
@@ -32,8 +32,7 @@ module.exports = {
 					"warn",
 					{
 						argsIgnorePattern: "^_",
-						varsIgnorePattern:
-							"^\\$\\$(Props|Events|Slots|Generic)$"
+						varsIgnorePattern: "^\\$\\$(Props|Events|Slots|Generic)$"
 					}
 				]
 			}

diff --git a/apps/www/.prettierrc b/apps/www/.prettierrc
@@ -2,7 +2,7 @@
 	"useTabs": true,
 	"singleQuote": false,
 	"trailingComma": "none",
-	"printWidth": 80,
+	"printWidth": 100,
 	"endOfLine": "lf",
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": false,

diff --git a/apps/www/mdsvex.config.js b/apps/www/mdsvex.config.js
@@ -17,10 +17,7 @@ const __dirname = fileURLToPath(new URL(".", import.meta.url));
 /** @type {import('mdsvex').MdsvexOptions} */
 export const mdsvexOptions = {
 	extensions: [".md"],
-	layout: path.resolve(
-		__dirname,
-		"./src/lib/components/docs/mdsvex/mdsvex.svelte"
-	),
+	layout: path.resolve(__dirname, "./src/lib/components/docs/mdsvex/mdsvex.svelte"),
 	smartypants: {
 		quotes: false,
 		ellipses: false,
@@ -45,10 +42,7 @@ export const mdsvexOptions = {
 						const match = codeEl.data?.meta.match(regex);
 						if (match) {
 							node.__event__ = match ? match[1] : null;
-							codeEl.data.meta = codeEl.data.meta.replace(
-								regex,
-								""
-							);
+							codeEl.data.meta = codeEl.data.meta.replace(regex, "");
 						}
 					}
 
@@ -63,10 +57,7 @@ export const mdsvexOptions = {
 			rehypePrettyCode,
 			{
 				theme: JSON.parse(
-					fs.readFileSync(
-						path.resolve(__dirname, "./other/themes/dark.json"),
-						"utf-8"
-					)
+					fs.readFileSync(path.resolve(__dirname, "./other/themes/dark.json"), "utf-8")
 				),
 				onVisitLine(node) {
 					if (node.children.length === 0) {
@@ -102,10 +93,7 @@ export function rehypeComponentExample() {
 	return async (tree) => {
 		const nameRegex = /name="([^"]+)"/;
 		visit(tree, (node, index, parent) => {
-			if (
-				node?.type === "raw" &&
-				node?.value?.startsWith("<ComponentPreview")
-			) {
+			if (node?.type === "raw" && node?.value?.startsWith("<ComponentPreview")) {
 				const match = node.value.match(nameRegex);
 				const name = match ? match[1] : null;
 
@@ -190,10 +178,7 @@ function rehypeComponentPreToPre() {
 		// Replace `Component.pre` tags with `pre` tags.
 		// This is a workaround to use rehype-pretty-code along with custom mdsvex components.
 		visit(tree, (node) => {
-			if (
-				node?.type === "element" &&
-				node?.tagName === "Components.pre"
-			) {
+			if (node?.type === "element" && node?.tagName === "Components.pre") {
 				node.tagName = "pre";
 			}
 

diff --git a/apps/www/other/rehype-component-example.ts b/apps/www/other/rehype-component-example.ts
@@ -11,10 +11,7 @@ export function rehypeComponentExample() {
 	return async (tree) => {
 		const nameRegex = /name="([^"]+)"/;
 		visit(tree, (node, index, parent) => {
-			if (
-				node?.type === "raw" &&
-				node?.value?.startsWith("<ComponentExample")
-			) {
+			if (node?.type === "raw" && node?.value?.startsWith("<ComponentExample")) {
 				const match = node.value.match(nameRegex);
 				const name = match ? match[1] : null;
 

diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
@@ -39,9 +39,7 @@ for (const style of styles) {
 			continue;
 		}
 
-		const resolveFiles = item.files.map(
-			(file) => `../src/lib/registry/${style.name}/${file}`
-		);
+		const resolveFiles = item.files.map((file) => `../src/lib/registry/${style.name}/${file}`);
 
 		const type = item.type.split(":")[1];
 		index += `
@@ -113,18 +111,13 @@ for (const style of styles) {
 // Build registry/styles/index.json.
 // ----------------------------------------------------------------------------
 const stylesJson = JSON.stringify(styles, null, 2);
-fs.writeFileSync(
-	path.join(REGISTRY_PATH, "styles/index.json"),
-	stylesJson,
-	"utf8"
-);
+fs.writeFileSync(path.join(REGISTRY_PATH, "styles/index.json"), stylesJson, "utf8");
 
 // ----------------------------------------------------------------------------
 // Build registry/index.json.
 // ----------------------------------------------------------------------------
 const names = result.data.filter(
-	(item) =>
-		item.type === "components:ui" && !REGISTRY_IGNORE.includes(item.name)
+	(item) => item.type === "components:ui" && !REGISTRY_IGNORE.includes(item.name)
 );
 const registryJson = JSON.stringify(names, null, 2);
 rimraf.sync(path.join(REGISTRY_PATH, "index.json"));
@@ -150,29 +143,17 @@ for (const [color, value] of Object.entries(colors)) {
 	if (Array.isArray(value)) {
 		colorsData[color] = value.map((item) => ({
 			...item,
-			rgbChannel: item.rgb.replace(
-				/^rgb\((\d+),(\d+),(\d+)\)$/,
-				"$1 $2 $3"
-			),
-			hslChannel: item.hsl.replace(
-				/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
-				"$1 $2 $3"
-			)
+			rgbChannel: item.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"),
+			hslChannel: item.hsl.replace(/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, "$1 $2 $3")
 		}));
 		continue;
 	}
 
 	if (typeof value === "object") {
 		colorsData[color] = {
 			...value,
-			rgbChannel: value.rgb.replace(
-				/^rgb\((\d+),(\d+),(\d+)\)$/,
-				"$1 $2 $3"
-			),
-			hslChannel: value.hsl.replace(
-				/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
-				"$1 $2 $3"
-			)
+			rgbChannel: value.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"),
+			hslChannel: value.hsl.replace(/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, "$1 $2 $3")
 		};
 		continue;
 	}
@@ -281,17 +262,12 @@ for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone", "lime"]) {
 		base["cssVars"][mode] = {};
 		for (const [key, value] of Object.entries(values)) {
 			if (typeof value === "string") {
-				const resolvedColor = value.replace(
-					/{{base}}-/g,
-					`${baseColor}-`
-				);
+				const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`);
 				base["inlineColors"][mode][key] = resolvedColor;
 
 				const [resolvedBase, scale] = resolvedColor.split("-");
 				const color = scale
-					? colorsData[resolvedBase].find(
-							(item: any) => item.scale === parseInt(scale)
-					  )
+					? colorsData[resolvedBase].find((item: any) => item.scale === parseInt(scale))
 					: colorsData[resolvedBase];
 				if (color) {
 					base["cssVars"][mode][key] = color.hslChannel;
@@ -391,10 +367,6 @@ for (const theme of themes) {
 	);
 }
 
-fs.writeFileSync(
-	path.join(REGISTRY_PATH, `themes.css`),
-	themeCSS.join("\n"),
-	"utf8"
-);
+fs.writeFileSync(path.join(REGISTRY_PATH, `themes.css`), themeCSS.join("\n"), "utf8");
 
 console.log("✅ Done!");
diff --git a/apps/www/scripts/registry.ts b/apps/www/scripts/registry.ts
@@ -68,8 +68,9 @@ async function crawlExample(rootPath: string) {
 		if (dirent.isFile() && dirent.name.endsWith(".svelte")) {
 			const [name] = dirent.name.split(".svelte");
 			const file_path = join("example", dirent.name);
-			const { dependencies, registryDependencies } =
-				await getDependencies(join(rootPath, dirent.name));
+			const { dependencies, registryDependencies } = await getDependencies(
+				join(rootPath, dirent.name)
+			);
 
 			exampleRegistry.push({
 				name,
@@ -116,13 +117,9 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
 		const deps = await getDependencies(join(componentPath, dirent.name));
 
 		deps.dependencies.forEach((dep) => dependencies.add(dep));
-		REQUIRED_COMPONENT_DEPS.get(componentName)?.forEach((dep) =>
-			dependencies.add(dep)
-		);
+		REQUIRED_COMPONENT_DEPS.get(componentName)?.forEach((dep) => dependencies.add(dep));
 
-		deps.registryDependencies.forEach((dep) =>
-			registryDependencies.add(dep)
-		);
+		deps.registryDependencies.forEach((dep) => registryDependencies.add(dep));
 	}
 
 	return {

diff --git a/apps/www/src/app.html b/apps/www/src/app.html
@@ -11,10 +11,7 @@
 		data-sveltekit-preload-data="hover"
 		class="min-h-screen bg-background antialiased font-sans"
 	>
-		<div
-			style="display: contents"
-			class="relative flex min-h-screen flex-col"
-		>
+		<div style="display: contents" class="relative flex min-h-screen flex-col">
 			%sveltekit.body%
 		</div>
 	</body>

diff --git a/apps/www/src/lib/components/docs/announcement.svelte b/apps/www/src/lib/components/docs/announcement.svelte
@@ -17,8 +17,6 @@
 >
 	🎉 <Separator class="mx-2 h-4" orientation="vertical" />{" "}
 	<span class="sm:hidden">New components and more.</span>
-	<span class="hidden sm:inline">
-		New components, cli updates and more.
-	</span>
+	<span class="hidden sm:inline"> New components, cli updates and more. </span>
 	<Icons.arrowRight class="ml-1 h-4 w-4" />
 </a>
diff --git a/apps/www/src/lib/components/docs/charts/bar.svelte b/apps/www/src/lib/components/docs/charts/bar.svelte
@@ -90,8 +90,7 @@
 						x="57"
 						y="-4"
 						fill="#888888"
-						text-anchor="end"
-						><tspan x="36" dy="0.355em">${tick}</tspan></text
+						text-anchor="end"><tspan x="36" dy="0.355em">${tick}</tspan></text
 					>
 				</g>
 			{/each}
@@ -112,9 +111,7 @@
 						fill="#888888"
 						text-anchor="middle"
 						><tspan x={barWidth / 2} dy="0.71em"
-							>{width > 380
-								? point.name
-								: formatMobile(point.name)}</tspan
+							>{width > 380 ? point.name : formatMobile(point.name)}</tspan
 						></text
 					>
 				</g>

diff --git a/apps/www/src/lib/components/docs/code-block-wrapper.svelte b/apps/www/src/lib/components/docs/code-block-wrapper.svelte
@@ -27,11 +27,7 @@
 				)}
 			>
 				<Collapsible.Trigger asChild let:builder>
-					<Button
-						variant="secondary"
-						builders={[builder]}
-						class="h-8 text-xs"
-					>
+					<Button variant="secondary" builders={[builder]} class="h-8 text-xs">
 						{open ? "Collapse" : expandButtonTitle}
 					</Button>
 				</Collapsible.Trigger>

diff --git a/apps/www/src/lib/components/docs/command-menu.svelte b/apps/www/src/lib/components/docs/command-menu.svelte
@@ -77,9 +77,7 @@
 								navItem.href && goto(navItem.href);
 							})}
 					>
-						<div
-							class="mr-2 flex h-4 w-4 items-center justify-center"
-						>
+						<div class="mr-2 flex h-4 w-4 items-center justify-center">
 							<Circle class="h-3 w-3" />
 						</div>
 						{navItem.title}
@@ -89,24 +87,15 @@
 		{/each}
 		<Command.Separator />
 		<Command.Group heading="Theme">
-			<Command.Item
-				value="light"
-				onSelect={() => runCommand(() => setMode("light"))}
-			>
+			<Command.Item value="light" onSelect={() => runCommand(() => setMode("light"))}>
 				<Sun class="mr-2 h-4 w-4" />
 				Light
 			</Command.Item>
-			<Command.Item
-				value="dark"
-				onSelect={() => runCommand(() => setMode("dark"))}
-			>
+			<Command.Item value="dark" onSelect={() => runCommand(() => setMode("dark"))}>
 				<Moon class="mr-2 h-4 w-4" />
 				Dark
 			</Command.Item>
-			<Command.Item
-				value="system"
-				onSelect={() => runCommand(() => resetMode())}
-			>
+			<Command.Item value="system" onSelect={() => runCommand(() => resetMode())}>
 				<Laptop class="mr-2 h-4 w-4" />
 				System
 			</Command.Item>

diff --git a/apps/www/src/lib/components/docs/component-example.svelte b/apps/www/src/lib/components/docs/component-example.svelte
@@ -13,15 +13,10 @@
 	export let align: "start" | "center" | "end" = "center";
 </script>
 
-<div
-	class={cn("group relative my-4 flex flex-col space-y-2", className)}
-	{...$$restProps}
->
+<div class={cn("group relative my-4 flex flex-col space-y-2", className)} {...$$restProps}>
 	<Tabs.Root value="preview" class="relative mr-auto w-full">
 		<div class="flex items-center justify-between pb-3">
-			<Tabs.List
-				class="w-full justify-start rounded-none border-b bg-transparent p-0"
-			>
+			<Tabs.List class="w-full justify-start rounded-none border-b bg-transparent p-0">
 				<Tabs.Trigger
 					value="preview"
 					class="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"

diff --git a/apps/www/src/lib/components/docs/component-preview-manual.svelte b/apps/www/src/lib/components/docs/component-preview-manual.svelte
@@ -7,10 +7,7 @@
 	export { className as class };
 </script>
 
-<div
-	class={cn("group relative my-4 flex flex-col space-y-2", className)}
-	{...$$restProps}
->
+<div class={cn("group relative my-4 flex flex-col space-y-2", className)} {...$$restProps}>
 	<div class="relative mr-auto w-full">
 		<div class="relative rounded-md border">
 			<div class="flex items-center justify-between p-4">

diff --git a/apps/www/src/lib/components/docs/component-preview.svelte b/apps/www/src/lib/components/docs/component-preview.svelte
@@ -24,15 +24,10 @@
 	export let style = "";
 </script>
 
-<div
-	class={cn("group relative my-4 flex flex-col space-y-2", className)}
-	{...$$restProps}
->
+<div class={cn("group relative my-4 flex flex-col space-y-2", className)} {...$$restProps}>
 	<Tabs.Root value="preview" class="relative mr-auto w-full">
 		<div class="flex items-center justify-between pb-3">
-			<Tabs.List
-				class="w-full justify-start rounded-none border-b bg-transparent p-0"
-			>
+			<Tabs.List class="w-full justify-start rounded-none border-b bg-transparent p-0">
 				<Tabs.Trigger
 					value="preview"
 					class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
@@ -66,12 +61,8 @@
 				>
 					<slot name="example">
 						{#await component}
-							<div
-								class="flex items-center text-sm text-muted-foreground"
-							>
-								<Icons.spinner
-									class="mr-2 h-4 w-4 animate-spin"
-								/>
+							<div class="flex items-center text-sm text-muted-foreground">
+								<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 								Loading...
 							</div>
 						{:then Component}