diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
new file mode 100644
index 00000000..9efd4d1b
--- /dev/null
+++ b/.github/workflows/check.yml
@@ -0,0 +1,33 @@
+name: Code Quality Check
+
+on:
+  - push
+  - pull_request
+
+jobs:
+  cache-and-install:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Format
+        run: pnpm ci:format
+
+      - name: Lint
+        run: pnpm ci:lint
diff --git a/.husky/pre-commit b/.husky/pre-commit
deleted file mode 100644
index cb2c84d5..00000000
--- a/.husky/pre-commit
+++ /dev/null
@@ -1 +0,0 @@
-pnpm lint-staged
diff --git a/.husky/registry b/.husky/registry
new file mode 100644
index 00000000..f4b6b78d
--- /dev/null
+++ b/.husky/registry
@@ -0,0 +1 @@
+pnpm -F docs registry:gen
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d29d370e..f10692b6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,13 +1,14 @@
 {
-	"tailwindCSS.experimental.classRegex": [
-		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-	],
-	"editor.defaultFormatter": "biomejs.biome",
-	"editor.codeActionsOnSave": {
-		"quickfix.biome": "explicit",
-		"source.organizeImports.biome": "explicit",
-		"source.removeUnusedImports": "explicit"
-	},
-	"astro.content-intellisense": true,
-	"eslint.useFlatConfig": true
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.removeUnusedImports": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.useFlatConfig": true,
+  "[yaml]": {
+    "editor.defaultFormatter": "redhat.vscode-yaml"
+  }
 }
diff --git a/biome.json b/biome.json
deleted file mode 100644
index fb20ba08..00000000
--- a/biome.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
-	"formatter": {
-		"enabled": true
-	},
-	"organizeImports": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"style": {
-				"noNonNullAssertion": "off"
-			},
-			"suspicious": {
-				"noExplicitAny": "off"
-			},
-			"a11y": {
-				"noSvgWithoutTitle": "off"
-			}
-		},
-		"ignore": ["*.js"]
-	},
-	"css": {
-		"formatter": {
-			"enabled": true
-		}
-	}
-}
diff --git a/docs/.lintstagedrc.json b/docs/.lintstagedrc.json
deleted file mode 100644
index 5ed1dba8..00000000
--- a/docs/.lintstagedrc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-	"src/**/*.{ts,tsx}": [
-		"pnpm registry:gen",
-		"biome check --write --unsafe --staged --no-errors-on-unmatched",
-		"eslint --fix"
-	]
-}
diff --git a/docs/.prettierignore b/docs/.prettierignore
new file mode 100644
index 00000000..968b90c7
--- /dev/null
+++ b/docs/.prettierignore
@@ -0,0 +1 @@
+src/__registry__/**
\ No newline at end of file
diff --git a/docs/app.config.ts b/docs/app.config.ts
index 9f11d70e..7815efdf 100644
--- a/docs/app.config.ts
+++ b/docs/app.config.ts
@@ -1,153 +1,154 @@
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import { defineConfig } from "@solidjs/start/config";
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { defineConfig } from "@solidjs/start/config"
 //@ts-expect-error
-import pkg from "@vinxi/plugin-mdx";
-import { type Options, rehypePrettyCode } from "rehype-pretty-code";
-import rehypeSlug from "rehype-slug";
-import { codeImport } from "remark-code-import";
-import remarkFrontmatter from "remark-frontmatter";
-import remarkGFM from "remark-gfm";
-import { visit } from "unist-util-visit";
-import docsGen from "./plugins/gen";
+import pkg from "@vinxi/plugin-mdx"
+import { rehypePrettyCode, type Options } from "rehype-pretty-code"
+import rehypeSlug from "rehype-slug"
+import { codeImport } from "remark-code-import"
+import remarkFrontmatter from "remark-frontmatter"
+import remarkGFM from "remark-gfm"
+import { visit } from "unist-util-visit"
 
-const { default: mdx } = pkg;
+import docsGen from "./plugins/gen"
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const { default: mdx } = pkg
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export default defineConfig({
-	extensions: ["mdx"],
-	vite: {
-		plugins: [
-			mdx.withImports({})({
-				jsx: true,
-				jsxImportSource: "solid-js",
-				providerImportSource: "@/components/mdx",
-				remarkPlugins: [
-					remarkGFM,
-					remarkFrontmatter,
-					[
-						codeImport,
-						{
-							allowImportingFromOutside: true,
-						} satisfies Parameters<typeof codeImport>[0],
-					],
-				],
-				rehypePlugins: [
-					rehypeSlug,
-					() => (tree: any) => {
-						visit(tree, (node) => {
-							if (node.type === "element" && node.tagName === "pre") {
-								const [codeEl] = node.children;
-								if (codeEl.tagName !== "code") return;
+  extensions: ["mdx"],
+  vite: {
+    plugins: [
+      mdx.withImports({})({
+        jsx: true,
+        jsxImportSource: "solid-js",
+        providerImportSource: "@/components/mdx",
+        remarkPlugins: [
+          remarkGFM,
+          remarkFrontmatter,
+          [
+            codeImport,
+            {
+              allowImportingFromOutside: true,
+            } satisfies Parameters<typeof codeImport>[0],
+          ],
+        ],
+        rehypePlugins: [
+          rehypeSlug,
+          () => (tree: any) => {
+            visit(tree, (node) => {
+              if (node.type === "element" && node.tagName === "pre") {
+                const [codeEl] = node.children
+                if (codeEl.tagName !== "code") return
 
-								node.__rawString__ = codeEl.children[0].value;
-								node.__src__ = node.properties.__src__;
-							}
-						});
-					},
-					[
-						rehypePrettyCode,
-						{
-							theme: "vesper",
-							keepBackground: false,
-						} satisfies Options,
-					],
-					() => (tree: any) => {
-						visit(tree, (node) => {
-							if (node?.type === "element" && node?.tagName === "figure") {
-								if (!("data-rehype-pretty-code-figure" in node.properties))
-									return;
+                node.__rawString__ = codeEl.children[0].value
+                node.__src__ = node.properties.__src__
+              }
+            })
+          },
+          [
+            rehypePrettyCode,
+            {
+              theme: "vesper",
+              keepBackground: false,
+            } satisfies Options,
+          ],
+          () => (tree: any) => {
+            visit(tree, (node) => {
+              if (node?.type === "element" && node?.tagName === "figure") {
+                if (!("data-rehype-pretty-code-figure" in node.properties))
+                  return
 
-								const preElement = node.children.at(-1);
-								if (preElement.tagName !== "pre") return;
+                const preElement = node.children.at(-1)
+                if (preElement.tagName !== "pre") return
 
-								preElement.properties.withMeta =
-									node.children.at(0).tagName === "figcaption";
-								preElement.properties.rawString = node.__rawString__;
-								if (node.__src__) preElement.properties.src = node.__src__;
-							}
-						});
-					},
-					() => (tree: any) => {
-						visit(tree, (node) => {
-							if (node.type !== "element" || node?.tagName !== "pre") return;
+                preElement.properties.withMeta =
+                  node.children.at(0).tagName === "figcaption"
+                preElement.properties.rawString = node.__rawString__
+                if (node.__src__) preElement.properties.src = node.__src__
+              }
+            })
+          },
+          () => (tree: any) => {
+            visit(tree, (node) => {
+              if (node.type !== "element" || node?.tagName !== "pre") return
 
-							// npm install.
-							if (node.properties?.rawString?.startsWith("npm install")) {
-								const npmCommand = node.properties.rawString;
-								node.properties.npmCommand = npmCommand;
-								node.properties.yarnCommand = npmCommand.replace(
-									"npm install",
-									"yarn add",
-								);
-								node.properties.pnpmCommand = npmCommand.replace(
-									"npm install",
-									"pnpm add",
-								);
-								node.properties.bunCommand = npmCommand.replace(
-									"npm install",
-									"bun add",
-								);
-							}
+              // npm install.
+              if (node.properties?.rawString?.startsWith("npm install")) {
+                const npmCommand = node.properties.rawString
+                node.properties.npmCommand = npmCommand
+                node.properties.yarnCommand = npmCommand.replace(
+                  "npm install",
+                  "yarn add"
+                )
+                node.properties.pnpmCommand = npmCommand.replace(
+                  "npm install",
+                  "pnpm add"
+                )
+                node.properties.bunCommand = npmCommand.replace(
+                  "npm install",
+                  "bun add"
+                )
+              }
 
-							// npx create.
-							if (node.properties?.rawString?.startsWith("npx create-")) {
-								const npmCommand = node.properties.rawString;
-								node.properties.npmCommand = npmCommand;
-								node.properties.yarnCommand = npmCommand.replace(
-									"npx create-",
-									"yarn create ",
-								);
-								node.properties.pnpmCommand = npmCommand.replace(
-									"npx create-",
-									"pnpm create ",
-								);
-								node.properties.bunCommand = npmCommand.replace(
-									"npx create-",
-									"bun create",
-								);
-							}
+              // npx create.
+              if (node.properties?.rawString?.startsWith("npx create-")) {
+                const npmCommand = node.properties.rawString
+                node.properties.npmCommand = npmCommand
+                node.properties.yarnCommand = npmCommand.replace(
+                  "npx create-",
+                  "yarn create "
+                )
+                node.properties.pnpmCommand = npmCommand.replace(
+                  "npx create-",
+                  "pnpm create "
+                )
+                node.properties.bunCommand = npmCommand.replace(
+                  "npx create-",
+                  "bun create"
+                )
+              }
 
-							// npx.
-							if (
-								node.properties?.rawString?.startsWith("npx") &&
-								!node.properties?.rawString?.startsWith("npx create-")
-							) {
-								const npmCommand = node.properties.rawString;
-								node.properties.npmCommand = npmCommand;
-								node.properties.yarnCommand = npmCommand;
-								node.properties.pnpmCommand = npmCommand.replace(
-									"npx",
-									"pnpm dlx",
-								);
-								node.properties.bunCommand = npmCommand.replace("npx", "bunx");
-							}
-						});
-					},
-					() => (tree: any) => {
-						visit(tree, "text", (node) => {
-							if (node.value.includes("@/registry")) {
-								node.value = node.value
-									.replace(/@\/registry\/tailwindcss\/hooks\//g, "@/hooks/")
-									.replace(/@\/registry\/tailwindcss\/libs\//g, "@/libs/")
-									.replace(
-										/@\/registry\/tailwindcss\/ui\//g,
-										"@/components/ui/",
-									);
-							}
-						});
-					},
-				],
-			}),
-			docsGen(),
-		],
-		resolve: {
-			alias: {
-				"#content": resolve(__dirname, "./.content"),
-				"@": resolve(__dirname, "./src"),
-			},
-		},
-	},
-});
+              // npx.
+              if (
+                node.properties?.rawString?.startsWith("npx") &&
+                !node.properties?.rawString?.startsWith("npx create-")
+              ) {
+                const npmCommand = node.properties.rawString
+                node.properties.npmCommand = npmCommand
+                node.properties.yarnCommand = npmCommand
+                node.properties.pnpmCommand = npmCommand.replace(
+                  "npx",
+                  "pnpm dlx"
+                )
+                node.properties.bunCommand = npmCommand.replace("npx", "bunx")
+              }
+            })
+          },
+          () => (tree: any) => {
+            visit(tree, "text", (node) => {
+              if (node.value.includes("@/registry")) {
+                node.value = node.value
+                  .replace(/@\/registry\/tailwindcss\/hooks\//g, "@/hooks/")
+                  .replace(/@\/registry\/tailwindcss\/libs\//g, "@/libs/")
+                  .replace(
+                    /@\/registry\/tailwindcss\/ui\//g,
+                    "@/components/ui/"
+                  )
+              }
+            })
+          },
+        ],
+      }),
+      docsGen(),
+    ],
+    resolve: {
+      alias: {
+        "#content": resolve(__dirname, "./.content"),
+        "@": resolve(__dirname, "./src"),
+      },
+    },
+  },
+})
diff --git a/docs/biome.json b/docs/biome.json
deleted file mode 100644
index 69357bb6..00000000
--- a/docs/biome.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
-	"extends": ["../biome.json"],
-	"formatter": {
-		"ignore": ["./src/__registry__/index.ts"]
-	},
-	"linter": {
-		"ignore": [
-			"./src/routes/(app)/examples/_components/**/*.tsx",
-			"./src/**/*.css"
-		]
-	}
-}
diff --git a/docs/eslint.config.js b/docs/eslint.config.js
index 6e34cf8a..31920aed 100644
--- a/docs/eslint.config.js
+++ b/docs/eslint.config.js
@@ -1,47 +1,9 @@
-import js from "@eslint/js";
-import * as tsParser from "@typescript-eslint/parser";
-import biome from "eslint-config-biome";
-import solid from "eslint-plugin-solid/configs/typescript";
-import tseslint from "typescript-eslint";
+import config from "../eslint.config.mjs"
 
-export default tseslint.config(
-	js.configs.recommended,
-	tseslint.configs.strictTypeChecked,
-	tseslint.configs.stylisticTypeChecked,
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	biome,
-	{
-		languageOptions: {
-			parserOptions: {
-				projectService: true,
-				tsconfigRootDir: import.meta.dirname,
-			},
-		},
-	},
-	{
-		files: ["**/*.{ts,tsx}"],
-		...solid,
-		languageOptions: {
-			parser: tsParser,
-			parserOptions: {
-				project: "tsconfig.json",
-			},
-		},
-	},
-	{
-		rules: {
-			"@typescript-eslint/no-unsafe-assignment": "off",
-			"@typescript-eslint/no-unsafe-call": "off",
-			"@typescript-eslint/no-unsafe-member-access": "off",
-			"@typescript-eslint/consistent-type-definitions": ["error", "type"],
-			"@typescript-eslint/no-confusing-void-expression": "off",
-			"@typescript-eslint/ban-ts-comment": "off",
-			"@typescript-eslint/no-unsafe-return": "off",
-			"@typescript-eslint/restrict-plus-operands": "off",
-			"@typescript-eslint/no-misused-promises": "off",
-			"@typescript-eslint/restrict-template-expressions": "off",
-			"@typescript-eslint/no-redundant-type-constituents": "off",
-			"@typescript-eslint/no-unused-vars": "warn",
-		},
-	},
-);
+/** @type {import('eslint').Linter.Config} */
+export default [
+  ...config,
+  {
+    ignores: ["src/__registry__/**", "app.config.ts"],
+  },
+]
diff --git a/docs/package.json b/docs/package.json
index 40259ddf..cab1bdec 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,69 +1,67 @@
 {
-	"name": "docs",
-	"type": "module",
-	"scripts": {
-		"dev": "pnpm registry:gen && pnpm vinxi dev",
-		"build": "pnpm registry:gen && pnpm vinxi build",
-		"start": "vinxi start",
-		"version": "vinxi version",
-		"registry:gen": "tsx ./scripts/index.ts"
-	},
-	"dependencies": {
-		"@ark-ui/solid": "^4.5.1",
-		"@corvu/drawer": "^0.2.2",
-		"@corvu/otp-field": "^0.1.4",
-		"@corvu/resizable": "^0.2.3",
-		"@kobalte/core": "^0.13.7",
-		"@solid-primitives/intersection-observer": "^2.1.6",
-		"@solid-primitives/storage": "^4.2.1",
-		"@solidjs/meta": "^0.29.4",
-		"@solidjs/router": "^0.15.0",
-		"@solidjs/start": "^1.0.10",
-		"@tanstack/solid-table": "^8.20.5",
-		"@unovis/solid": "^1.5.0",
-		"@unovis/ts": "^1.5.0",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"cmdk-solid": "^1.1.0",
-		"embla-carousel-autoplay": "8.5.1",
-		"embla-carousel-solid": "8.5.1",
-		"shiki": "^1.24.2",
-		"solid-js": "^1.9.2",
-		"solid-wrap-balancer": "^0.0.5",
-		"somoto": "^0.0.2",
-		"tailwind-merge": "^2.5.5",
-		"vinxi": "^0.4.3"
-	},
-	"engines": {
-		"node": ">=18"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.16.0",
-		"@typescript-eslint/parser": "^8.17.0",
-		"@vinxi/plugin-mdx": "^3.7.2",
-		"autoprefixer": "^10.4.20",
-		"eslint": "^9.16.0",
-		"eslint-config-biome": "^1.9.4",
-		"eslint-plugin-solid": "^0.14.4",
-		"postcss": "^8.4.49",
-		"rehype-pretty-code": "^0.14.0",
-		"rehype-slug": "^6.0.0",
-		"rehype-stringify": "^10.0.1",
-		"remark-code-import": "^1.2.0",
-		"remark-frontmatter": "^5.0.0",
-		"remark-gfm": "^3.0.1",
-		"remark-parse": "^11.0.0",
-		"remark-rehype": "^11.1.1",
-		"rimraf": "^6.0.1",
-		"tailwindcss": "^3.4.16",
-		"tailwindcss-animate": "^1.0.7",
-		"to-vfile": "^8.0.0",
-		"ts-morph": "^24.0.0",
-		"tsx": "^4.19.2",
-		"typescript-eslint": "^8.17.0",
-		"unified": "^11.0.5",
-		"unist-util-visit": "^5.0.0",
-		"valibot": "1.0.0-beta.9",
-		"vfile-matter": "^5.0.0"
-	}
+  "name": "docs",
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm registry:gen && pnpm vinxi dev",
+    "build": "pnpm registry:gen && pnpm vinxi build",
+    "start": "vinxi start",
+    "version": "vinxi version",
+    "registry:gen": "tsx ./scripts/index.ts",
+    "lint": "eslint --fix --max-warnings 0 --report-unused-disable-directives",
+    "format": "prettier -w \"**/*.{ts,tsx,mdx}\"",
+    "ci:lint": "eslint --max-warnings 0 --report-unused-disable-directives",
+    "ci:format": "prettier -c \"**/*.{ts,tsx,mdx}\""
+  },
+  "dependencies": {
+    "@ark-ui/solid": "^4.5.1",
+    "@corvu/drawer": "^0.2.2",
+    "@corvu/otp-field": "^0.1.4",
+    "@corvu/resizable": "^0.2.3",
+    "@kobalte/core": "^0.13.7",
+    "@solid-primitives/intersection-observer": "^2.1.6",
+    "@solid-primitives/storage": "^4.2.1",
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "^1.0.10",
+    "@tanstack/solid-table": "^8.20.5",
+    "@unovis/solid": "^1.5.0",
+    "@unovis/ts": "^1.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk-solid": "^1.1.0",
+    "embla-carousel-autoplay": "8.5.1",
+    "embla-carousel-solid": "8.5.1",
+    "shiki": "^1.24.2",
+    "solid-js": "^1.9.2",
+    "solid-wrap-balancer": "^0.0.5",
+    "somoto": "^0.0.2",
+    "tailwind-merge": "^2.5.5",
+    "vinxi": "^0.4.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@vinxi/plugin-mdx": "^3.7.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "rehype-pretty-code": "^0.14.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-code-import": "^1.2.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^3.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^3.4.16",
+    "tailwindcss-animate": "^1.0.7",
+    "to-vfile": "^8.0.0",
+    "ts-morph": "^24.0.0",
+    "tsx": "^4.19.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "valibot": "1.0.0-beta.9",
+    "vfile-matter": "^5.0.0"
+  }
 }
diff --git a/docs/plugins/gen.ts b/docs/plugins/gen.ts
index b610f6ca..a0060ac6 100644
--- a/docs/plugins/gen.ts
+++ b/docs/plugins/gen.ts
@@ -1,113 +1,113 @@
-import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
-import { join, relative, resolve } from "node:path";
-import rehypeSlug from "rehype-slug";
-import rehypeStringify from "rehype-stringify";
-import remarkFrontmatter from "remark-frontmatter";
-import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
-import { readSync } from "to-vfile";
-import { unified } from "unified";
-import { matter } from "vfile-matter";
-import type { Plugin } from "vinxi";
+import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs"
+import { join, relative, resolve } from "node:path"
+import rehypeSlug from "rehype-slug"
+import rehypeStringify from "rehype-stringify"
+import remarkFrontmatter from "remark-frontmatter"
+import remarkParse from "remark-parse"
+import remarkRehype from "remark-rehype"
+import { readSync } from "to-vfile"
+import { unified } from "unified"
+import { matter } from "vfile-matter"
+import type { Plugin } from "vinxi"
 
 type Doc = {
-	headings?: { depth: number; slug: string; text: string }[];
-	frontmatter?: {
-		title: string;
-		description: string;
-		component: boolean;
-		link: {
-			doc: string;
-			api: string;
-		};
-		toc: boolean;
-	};
-	slug?: string;
-};
+  headings?: { depth: number; slug: string; text: string }[]
+  frontmatter?: {
+    title: string
+    description: string
+    component: boolean
+    link: {
+      doc: string
+      api: string
+    }
+    toc: boolean
+  }
+  slug?: string
+}
 
 const traverseDirectory = async (
-	currentDir: string,
-	docsDir: string,
-	processor: ReturnType<typeof unified>,
-	docs: Doc[],
+  currentDir: string,
+  docsDir: string,
+  processor: ReturnType<typeof unified>,
+  docs: Doc[]
 ) => {
-	const items = readdirSync(currentDir, { withFileTypes: true });
-
-	for (const item of items) {
-		const fullPath = join(currentDir, item.name);
-
-		if (item.isDirectory()) {
-			await traverseDirectory(fullPath, docsDir, processor, docs);
-		} else if (item.isFile() && item.name.endsWith(".mdx")) {
-			const fileContent = readSync(fullPath, "utf-8");
-			matter(fileContent);
-
-			const relativePath = relative(docsDir, fullPath);
-			const slug = `/docs/${relativePath.replace(/\.mdx$/, "").replace(/\\/g, "/")}`;
-
-			const processed = await processor.process(String(fileContent));
-			const headings: { depth: number; slug: string; text: string }[] = [];
-
-			// Extract headings with slugs
-			const regex = /<h(\d) id="([^"]+)">([^<]+)<\/h\d>/g;
-			let match: RegExpExecArray | null;
-
-			// biome-ignore lint/suspicious/noAssignInExpressions:
-			while ((match = regex.exec(String(processed))) !== null) {
-				const depth = Number(match[1]);
-				const slug = match[2];
-				const text = match[3].trim();
-
-				headings.push({ depth, slug, text });
-			}
-
-			docs.push({
-				frontmatter: fileContent.data.matter as Doc["frontmatter"],
-				headings,
-				slug,
-			});
-		}
-	}
-};
+  const items = readdirSync(currentDir, { withFileTypes: true })
+
+  for (const item of items) {
+    const fullPath = join(currentDir, item.name)
+
+    if (item.isDirectory()) {
+      await traverseDirectory(fullPath, docsDir, processor, docs)
+    } else if (item.isFile() && item.name.endsWith(".mdx")) {
+      const fileContent = readSync(fullPath, "utf-8")
+      matter(fileContent)
+
+      const relativePath = relative(docsDir, fullPath)
+      const slug = `/docs/${relativePath.replace(/\.mdx$/, "").replace(/\\/g, "/")}`
+
+      const processed = await processor.process(String(fileContent))
+      const headings: { depth: number; slug: string; text: string }[] = []
+
+      // Extract headings with slugs
+      const regex = /<h(\d) id="([^"]+)">([^<]+)<\/h\d>/g
+      let match: RegExpExecArray | null
+
+      // biome-ignore lint/suspicious/noAssignInExpressions:
+      while ((match = regex.exec(String(processed))) !== null) {
+        const depth = Number(match[1])
+        const slug = match[2]
+        const text = match[3].trim()
+
+        headings.push({ depth, slug, text })
+      }
+
+      docs.push({
+        frontmatter: fileContent.data.matter as Doc["frontmatter"],
+        headings,
+        slug,
+      })
+    }
+  }
+}
 
 const processFiles = async () => {
-	const docs: Doc[] = [];
-	const outputFile = resolve(".content/index.js");
-	const docsDir = resolve("src/routes/(app)/docs");
-
-	if (!existsSync(".content")) {
-		mkdirSync(".content", { recursive: true });
-	}
-
-	const processor = unified()
-		.use(remarkParse)
-		.use(remarkFrontmatter)
-		.use(remarkRehype)
-		.use(rehypeSlug)
-		.use(rehypeStringify);
-
-	// @ts-expect-error
-	await traverseDirectory(docsDir, docsDir, processor, docs);
-
-	writeFileSync(
-		outputFile,
-		`export const allDocs = ${JSON.stringify(docs, null, 2)}`,
-		"utf-8",
-	);
-};
+  const docs: Doc[] = []
+  const outputFile = resolve(".content/index.js")
+  const docsDir = resolve("src/routes/(app)/docs")
+
+  if (!existsSync(".content")) {
+    mkdirSync(".content", { recursive: true })
+  }
+
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkFrontmatter)
+    .use(remarkRehype)
+    .use(rehypeSlug)
+    .use(rehypeStringify)
+
+  // @ts-expect-error
+  await traverseDirectory(docsDir, docsDir, processor, docs)
+
+  writeFileSync(
+    outputFile,
+    `export const allDocs = ${JSON.stringify(docs, null, 2)}`,
+    "utf-8"
+  )
+}
 
 export default function docsGen(): Plugin {
-	return {
-		name: "docs-gen",
-		async buildStart() {
-			await processFiles();
-		},
-		configureServer(server) {
-			server.watcher.on("change", async (filePath) => {
-				if (filePath.endsWith(".mdx")) {
-					await processFiles();
-				}
-			});
-		},
-	};
+  return {
+    name: "docs-gen",
+    async buildStart() {
+      await processFiles()
+    },
+    configureServer(server) {
+      server.watcher.on("change", async (filePath) => {
+        if (filePath.endsWith(".mdx")) {
+          await processFiles()
+        }
+      })
+    },
+  }
 }
diff --git a/docs/scripts/index.ts b/docs/scripts/index.ts
index 5b4484e0..9173b983 100644
--- a/docs/scripts/index.ts
+++ b/docs/scripts/index.ts
@@ -1,285 +1,278 @@
-import { existsSync, mkdirSync } from "node:fs";
-import fs from "node:fs";
-import { tmpdir } from "node:os";
-import path from "node:path";
-import { registry } from "@/registry";
-import { frameworks } from "@/registry/frameworks";
-import { type Registry, registrySchema } from "@/registry/schema";
-import { rimraf } from "rimraf";
-import { Project, ScriptKind } from "ts-morph";
-import * as v from "valibot";
-
-const REGISTRY_PATH = path.join(process.cwd(), "public/registry");
+import fs, { existsSync, mkdirSync } from "node:fs"
+import { tmpdir } from "node:os"
+import path from "node:path"
+import { registry } from "@/registry"
+import { rimraf } from "rimraf"
+import { Project, ScriptKind } from "ts-morph"
+import * as v from "valibot"
+
+import { frameworks } from "@/registry/frameworks"
+import { registrySchema, type Registry } from "@/registry/schema"
+
+const REGISTRY_PATH = path.join(process.cwd(), "public/registry")
 
 const project = new Project({
-	compilerOptions: {},
-});
+  compilerOptions: {},
+})
 
 function createTempSourceFile(filename: string) {
-	const dir = fs.mkdtempSync(path.join(tmpdir(), "shadcn-"));
-	return path.join(dir, filename);
+  const dir = fs.mkdtempSync(path.join(tmpdir(), "shadcn-"))
+  return path.join(dir, filename)
 }
 
 const fixImport = (content: string) => {
-	const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g;
-
-	const replacement = (
-		match: string,
-		path: string,
-		type: string,
-		component: string,
-	) => {
-		if (type.endsWith("components")) {
-			return `@/components/${component}`;
-		}
-		if (type.endsWith("ui")) {
-			return `@/components/ui/${component}`;
-		}
-		if (type.endsWith("hooks")) {
-			return `@/hooks/${component}`;
-		}
-		if (type.endsWith("lib")) {
-			return `@/lib/${component}`;
-		}
-
-		return match;
-	};
-
-	return content.replace(regex, replacement);
-};
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string
+  ) => {
+    if (type.endsWith("components")) {
+      return `@/components/${component}`
+    }
+    if (type.endsWith("ui")) {
+      return `@/components/ui/${component}`
+    }
+    if (type.endsWith("hooks")) {
+      return `@/hooks/${component}`
+    }
+    if (type.endsWith("lib")) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
 
 const getFileContent = (filePath: string) => {
-	const raw = fs.readFileSync(filePath, "utf-8");
+  const raw = fs.readFileSync(filePath, "utf-8")
 
-	const project = new Project({
-		compilerOptions: {},
-	});
+  const project = new Project({
+    compilerOptions: {},
+  })
 
-	const tempFile = createTempSourceFile(filePath);
-	const sourceFile = project.createSourceFile(tempFile, raw, {
-		scriptKind: ScriptKind.TSX,
-	});
+  const tempFile = createTempSourceFile(filePath)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
 
-	let code = sourceFile.getFullText();
+  let code = sourceFile.getFullText()
 
-	// Fix imports.
-	code = fixImport(code);
+  // Fix imports.
+  code = fixImport(code)
 
-	return JSON.stringify(code, null, 4);
-};
+  return JSON.stringify(code, null, 4)
+}
 
 // ----------------------------------------------------------------------------
 // Build __registry__/index.tsx.
 // ----------------------------------------------------------------------------
 function buildRegistry(registry: Registry) {
-	let index = `// @ts-nocheck
+  let index = `// @ts-nocheck
 // This file is autogenerated by scripts/index.ts
 // Do not edit this file directly.
 import { clientOnly } from "@solidjs/start"
   
 export const Index: Record<string, any> = {
-  `;
-
-	for (const framework of frameworks) {
-		// we don't render any of component or example of `unocss`
-		if (framework.name === "unocss") {
-			break;
-		}
-
-		index += ` "${framework.name}": {`;
-
-		// Build style index.
-		for (const item of registry) {
-			// we only need `example` and `block`
-			if (item.type === "registry:example" || item.type === "registry:block") {
-				const resolveFiles = item.files?.map(
-					(file) =>
-						`src/registry/${framework.name}/${
-							typeof file === "string" ? file : file.path
-						}`,
-				);
-				if (!resolveFiles) {
-					continue;
-				}
-
-				const type = item.type.split(":")[1];
-				let sourceFilename = "";
-
-				let componentPath = `@/registry/${framework.name}/${type}/${item.name}`;
-
-				if (item.type === "registry:block") {
-					const file = resolveFiles[0];
-					const filename = path.basename(file);
-
-					let raw: string;
-					try {
-						raw = fs.readFileSync(file, "utf8");
-					} catch {
-						continue;
-					}
-
-					const tempFile = createTempSourceFile(filename);
-					const sourceFile = project.createSourceFile(tempFile, raw, {
-						scriptKind: ScriptKind.TSX,
-					});
-
-					// Find all imports.
-					const imports = new Map<
-						string,
-						{
-							module: string;
-							text: string;
-							isDefault?: boolean;
-						}
-					>();
-					for (const node of sourceFile.getImportDeclarations()) {
-						const module = node.getModuleSpecifier().getLiteralValue();
-						for (const item of node.getNamedImports()) {
-							imports.set(item.getText(), {
-								module,
-								text: node.getText(),
-							});
-						}
-
-						const defaultImport = node.getDefaultImport();
-						if (defaultImport) {
-							imports.set(defaultImport.getText(), {
-								module,
-								text: defaultImport.getText(),
-								isDefault: true,
-							});
-						}
-					}
-
-					// // Write the source file for blocks only.
-					sourceFilename = `__registry__/${framework.name}/${type}/${item.name}.tsx`;
-
-					if (item.files) {
-						const files = item.files.map((file) =>
-							typeof file === "string"
-								? { type: "registry:page", path: file }
-								: file,
-						);
-						if (files.length) {
-							sourceFilename = `src/__registry__/${framework.name}/${files[0].path}`;
-						}
-					}
-
-					const sourcePath = path.join(process.cwd(), sourceFilename);
-					if (!existsSync(sourcePath)) {
-						fs.mkdirSync(sourcePath, { recursive: true });
-					}
-
-					rimraf.sync(sourcePath);
-					fs.writeFileSync(sourcePath, sourceFile.getText());
-				}
-
-				if (item.files) {
-					const files = item.files.map((file) =>
-						typeof file === "string"
-							? { type: "registry:page", path: file }
-							: file,
-					);
-					if (files.length) {
-						componentPath = `@/registry/${framework.name}/${files[0].path.slice(0, -4)}`;
-					}
-				}
-
-				index += ` 
+  `
+
+  for (const framework of frameworks) {
+    // we don't render any of component or example of `unocss`
+    if (framework.name === "unocss") {
+      break
+    }
+
+    index += ` "${framework.name}": {`
+
+    // Build style index.
+    for (const item of registry) {
+      // we only need `example` and `block`
+      if (item.type === "registry:example" || item.type === "registry:block") {
+        const resolveFiles = item.files?.map(
+          (file) =>
+            `src/registry/${framework.name}/${
+              typeof file === "string" ? file : file.path
+            }`
+        )
+        if (!resolveFiles) {
+          continue
+        }
+
+        const type = item.type.split(":")[1]
+        let sourceFilename = ""
+
+        let componentPath = `@/registry/${framework.name}/${type}/${item.name}`
+
+        if (item.type === "registry:block") {
+          const file = resolveFiles[0]
+          const filename = path.basename(file)
+
+          let raw: string
+          try {
+            raw = fs.readFileSync(file, "utf8")
+          } catch {
+            continue
+          }
+
+          const tempFile = createTempSourceFile(filename)
+          const sourceFile = project.createSourceFile(tempFile, raw, {
+            scriptKind: ScriptKind.TSX,
+          })
+
+          // Find all imports.
+          const imports = new Map<
+            string,
+            {
+              module: string
+              text: string
+              isDefault?: boolean
+            }
+          >()
+          for (const node of sourceFile.getImportDeclarations()) {
+            const module = node.getModuleSpecifier().getLiteralValue()
+            for (const item of node.getNamedImports()) {
+              imports.set(item.getText(), {
+                module,
+                text: node.getText(),
+              })
+            }
+
+            const defaultImport = node.getDefaultImport()
+            if (defaultImport) {
+              imports.set(defaultImport.getText(), {
+                module,
+                text: defaultImport.getText(),
+                isDefault: true,
+              })
+            }
+          }
+
+          // // Write the source file for blocks only.
+          sourceFilename = `__registry__/${framework.name}/${type}/${item.name}.tsx`
+
+          if (item.files) {
+            const files = item.files.map((file) =>
+              typeof file === "string"
+                ? { type: "registry:page", path: file }
+                : file
+            )
+            if (files.length) {
+              sourceFilename = `src/__registry__/${framework.name}/${files[0].path}`
+            }
+          }
+
+          const sourcePath = path.join(process.cwd(), sourceFilename)
+          if (!existsSync(sourcePath)) {
+            fs.mkdirSync(sourcePath, { recursive: true })
+          }
+
+          rimraf.sync(sourcePath)
+          fs.writeFileSync(sourcePath, sourceFile.getText())
+        }
+
+        if (item.files) {
+          const files = item.files.map((file) =>
+            typeof file === "string"
+              ? { type: "registry:page", path: file }
+              : file
+          )
+          if (files.length) {
+            componentPath = `@/registry/${framework.name}/${files[0].path.slice(0, -4)}`
+          }
+        }
+
+        index += ` 
 		"${item.name}": {
 			name: "${item.name}",
 			description: "${item.description ?? ""}",
 			type: "${item.type}",
 			registryDependencies: ${JSON.stringify(item.registryDependencies)},
 			files: [${item.files?.map((file) => {
-				const filePath = `src/registry/${framework.name}/${
-					typeof file === "string" ? file : file.path
-				}`;
-				const resolvedFilePath = path.resolve(filePath);
-				const content = getFileContent(filePath);
-
-				return typeof file === "string"
-					? `"${resolvedFilePath}"`
-					: `{
+        const filePath = `src/registry/${framework.name}/${
+          typeof file === "string" ? file : file.path
+        }`
+        const resolvedFilePath = path.resolve(filePath)
+        const content = getFileContent(filePath)
+
+        return typeof file === "string"
+          ? `"${resolvedFilePath}"`
+          : `{
 				path: "${filePath}",
 				type: "${file.type}",
 				target: "${file.target ?? ""}",
 				content: ${item.type === "registry:block" ? content : '""'}
-			}`;
-			})}],
+			}`
+      })}],
 			component: clientOnly(() => import("${componentPath}"), { lazy: true }),
 			source: "${sourceFilename}",
 			category: "${item.category ?? ""}",
 			subcategory: "${item.subcategory ?? ""}"
-		},`;
-			}
-		}
+		},`
+      }
+    }
 
-		index += `
-	},`;
-	}
+    index += `
+	},`
+  }
 
-	index += `
+  index += `
+  }
+  `
+
+  // ----------------------------------------------------------------------------
+  // Build registry/index.json.
+  // ----------------------------------------------------------------------------
+  const items = registry
+    .filter((item) => ["registry:ui"].includes(item.type))
+    .map((item) => {
+      return {
+        ...item,
+        files: item.files?.map((_file) => {
+          const file =
+            typeof _file === "string"
+              ? {
+                  path: _file,
+                  type: item.type,
+                }
+              : _file
+
+          return file
+        }),
+      }
+    })
+  const registryJson = JSON.stringify(items, null, 2)
+  if (!existsSync(path.join(REGISTRY_PATH))) {
+    mkdirSync(path.join(REGISTRY_PATH), { recursive: true })
   }
-  `;
-
-	// ----------------------------------------------------------------------------
-	// Build registry/index.json.
-	// ----------------------------------------------------------------------------
-	const items = registry
-		.filter((item) => ["registry:ui"].includes(item.type))
-		.map((item) => {
-			return {
-				...item,
-				files: item.files?.map((_file) => {
-					const file =
-						typeof _file === "string"
-							? {
-									path: _file,
-									type: item.type,
-								}
-							: _file;
-
-					return file;
-				}),
-			};
-		});
-	const registryJson = JSON.stringify(items, null, 2);
-	if (!existsSync(path.join(REGISTRY_PATH))) {
-		mkdirSync(path.join(REGISTRY_PATH), { recursive: true });
-	}
-	rimraf.sync(path.join(REGISTRY_PATH, "index.json"));
-	fs.writeFileSync(
-		path.join(REGISTRY_PATH, "index.json"),
-		registryJson,
-		"utf8",
-	);
-
-	// Write style index.
-	if (!existsSync(path.join(process.cwd(), "src/__registry__"))) {
-		mkdirSync(path.join(process.cwd(), "src/__registry__"), {
-			recursive: true,
-		});
-	}
-	rimraf.sync(path.join(process.cwd(), "src/__registry__/index.ts"));
-	fs.writeFileSync(
-		path.join(process.cwd(), "src/__registry__/index.ts"),
-		index,
-	);
+  rimraf.sync(path.join(REGISTRY_PATH, "index.json"))
+  fs.writeFileSync(path.join(REGISTRY_PATH, "index.json"), registryJson, "utf8")
+
+  // Write style index.
+  if (!existsSync(path.join(process.cwd(), "src/__registry__"))) {
+    mkdirSync(path.join(process.cwd(), "src/__registry__"), {
+      recursive: true,
+    })
+  }
+  rimraf.sync(path.join(process.cwd(), "src/__registry__/index.ts"))
+  fs.writeFileSync(path.join(process.cwd(), "src/__registry__/index.ts"), index)
 }
 
 try {
-	const result = v.safeParse(registrySchema, registry);
+  const result = v.safeParse(registrySchema, registry)
 
-	if (!result.success) {
-		console.error(result.issues);
-		process.exit(1);
-	}
+  if (!result.success) {
+    console.error(result.issues)
+    process.exit(1)
+  }
 
-	buildRegistry(result.output);
+  buildRegistry(result.output)
 
-	console.log("✅ Done!");
+  console.log("✅ Done!")
 } catch (error) {
-	console.error(error);
-	process.exit(1);
+  console.error(error)
+  process.exit(1)
 }
diff --git a/docs/src/__registry__/index.ts b/docs/src/__registry__/index.ts
index ebe17eae..79abe7f5 100644
--- a/docs/src/__registry__/index.ts
+++ b/docs/src/__registry__/index.ts
@@ -1518,7 +1518,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/blocks/demo-sidebar.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import { For } from \"solid-js\";\r\nimport {\r\n\tSidebar,\r\n\tSidebarContent,\r\n\tSidebarGroup,\r\n\tSidebarGroupContent,\r\n\tSidebarGroupLabel,\r\n\tSidebarInset,\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tSidebarProvider,\r\n\tSidebarTrigger,\r\n} from \"../ui/sidebar\";\r\n\r\nconst items = [\r\n\t{\r\n\t\ttitle: \"Home\",\r\n\t\turl: \"#\",\r\n\t\ticon: () => (\r\n\t\t\t<svg\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\tclass=\"size-4\"\r\n\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t>\r\n\t\t\t\t<g\r\n\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\" />\r\n\t\t\t\t\t<path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\r\n\t\t\t\t</g>\r\n\t\t\t</svg>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Inbox\",\r\n\t\turl: \"#\",\r\n\t\ticon: () => (\r\n\t\t\t<svg\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\tclass=\"size-4\"\r\n\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t>\r\n\t\t\t\t<g\r\n\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path d=\"M22 12h-6l-2 3h-4l-2-3H2\" />\r\n\t\t\t\t\t<path d=\"M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11\" />\r\n\t\t\t\t</g>\r\n\t\t\t</svg>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Calendar\",\r\n\t\turl: \"#\",\r\n\t\ticon: () => (\r\n\t\t\t<svg\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\tclass=\"size-4\"\r\n\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t>\r\n\t\t\t\t<g\r\n\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path d=\"M8 2v4m8-4v4\" />\r\n\t\t\t\t\t<rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" />\r\n\t\t\t\t\t<path d=\"M3 10h18\" />\r\n\t\t\t\t</g>\r\n\t\t\t</svg>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Search\",\r\n\t\turl: \"#\",\r\n\t\ticon: () => (\r\n\t\t\t<svg\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\tclass=\"size-4\"\r\n\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t>\r\n\t\t\t\t<g\r\n\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n\t\t\t\t\t<path d=\"m21 21l-4.3-4.3\" />\r\n\t\t\t\t</g>\r\n\t\t\t</svg>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Settings\",\r\n\t\turl: \"#\",\r\n\t\ticon: () => (\r\n\t\t\t<svg\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\tclass=\"size-4\"\r\n\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t>\r\n\t\t\t\t<g\r\n\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2\" />\r\n\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"3\" />\r\n\t\t\t\t</g>\r\n\t\t\t</svg>\r\n\t\t),\r\n\t},\r\n];\r\n\r\nconst AppSidebar = () => {\r\n\treturn (\r\n\t\t<SidebarProvider>\r\n\t\t\t<Sidebar>\r\n\t\t\t\t<SidebarContent>\r\n\t\t\t\t\t<SidebarGroup>\r\n\t\t\t\t\t\t<SidebarGroupLabel>Application</SidebarGroupLabel>\r\n\t\t\t\t\t\t<SidebarGroupContent>\r\n\t\t\t\t\t\t\t<SidebarMenu>\r\n\t\t\t\t\t\t\t\t<For each={items}>\r\n\t\t\t\t\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuButton as=\"a\" href={item.url}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<item.icon />\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</For>\r\n\t\t\t\t\t\t\t</SidebarMenu>\r\n\t\t\t\t\t\t</SidebarGroupContent>\r\n\t\t\t\t\t</SidebarGroup>\r\n\t\t\t\t</SidebarContent>\r\n\t\t\t</Sidebar>\r\n\t\t\t<SidebarInset>\r\n\t\t\t\t<header class=\"flex items-center justify-between px-4 h-12\">\r\n\t\t\t\t\t<SidebarTrigger />\r\n\t\t\t\t</header>\r\n\t\t\t</SidebarInset>\r\n\t\t</SidebarProvider>\r\n\t);\r\n};\r\n\r\nexport default AppSidebar;\r\n"
+				content: "import { For } from \"solid-js\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"../ui/sidebar\"\n\nconst items = [\n  {\n    title: \"Home\",\n    url: \"#\",\n    icon: () => (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"size-4\"\n        viewBox=\"0 0 24 24\"\n      >\n        <g\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\" />\n          <path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\n        </g>\n      </svg>\n    ),\n  },\n  {\n    title: \"Inbox\",\n    url: \"#\",\n    icon: () => (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"size-4\"\n        viewBox=\"0 0 24 24\"\n      >\n        <g\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M22 12h-6l-2 3h-4l-2-3H2\" />\n          <path d=\"M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11\" />\n        </g>\n      </svg>\n    ),\n  },\n  {\n    title: \"Calendar\",\n    url: \"#\",\n    icon: () => (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"size-4\"\n        viewBox=\"0 0 24 24\"\n      >\n        <g\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M8 2v4m8-4v4\" />\n          <rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" />\n          <path d=\"M3 10h18\" />\n        </g>\n      </svg>\n    ),\n  },\n  {\n    title: \"Search\",\n    url: \"#\",\n    icon: () => (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"size-4\"\n        viewBox=\"0 0 24 24\"\n      >\n        <g\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21l-4.3-4.3\" />\n        </g>\n      </svg>\n    ),\n  },\n  {\n    title: \"Settings\",\n    url: \"#\",\n    icon: () => (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"size-4\"\n        viewBox=\"0 0 24 24\"\n      >\n        <g\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2\" />\n          <circle cx=\"12\" cy=\"12\" r=\"3\" />\n        </g>\n      </svg>\n    ),\n  },\n]\n\nconst AppSidebar = () => {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <For each={items}>\n                  {(item) => (\n                    <SidebarMenuItem>\n                      <SidebarMenuButton as=\"a\" href={item.url}>\n                        <item.icon />\n                        <span>{item.title}</span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  )}\n                </For>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n      <SidebarInset>\n        <header class=\"flex h-12 items-center justify-between px-4\">\n          <SidebarTrigger />\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nexport default AppSidebar\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/blocks/demo-sidebar"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/blocks/demo-sidebar.tsx",
@@ -1534,32 +1534,32 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/blocks/sidebar-01/index.tsx",
 				type: "registry:page",
 				target: "src/routes/dashboard.tsx",
-				content: "import AppSidebar from \"@/components/app-sidebar\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport {\r\n\tSidebarInset,\r\n\tSidebarProvider,\r\n\tSidebarTrigger,\r\n} from \"@/components/ui/sidebar\";\r\n\r\nconst Page = () => {\r\n\treturn (\r\n\t\t<SidebarProvider>\r\n\t\t\t<AppSidebar />\r\n\t\t\t<SidebarInset>\r\n\t\t\t\t<header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\r\n\t\t\t\t\t<div class=\"flex items-center gap-2 px-4\">\r\n\t\t\t\t\t\t<SidebarTrigger class=\"-ml-1\" />\r\n\t\t\t\t\t\t<Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</header>\r\n\t\t\t\t<div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\r\n\t\t\t\t\t<div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\r\n\t\t\t\t</div>\r\n\t\t\t</SidebarInset>\r\n\t\t</SidebarProvider>\r\n\t);\r\n};\r\n\r\nexport default Page;\r\n"
+				content: "import AppSidebar from \"@/components/app-sidebar\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nconst Page = () => {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div class=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger class=\"-ml-1\" />\n            <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          </div>\n        </header>\n        <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div class=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nexport default Page\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar.tsx",
 				type: "registry:component",
 				target: "src/components/app-sidebar.tsx",
-				content: "import NavMain from \"@/components/nav-main\";\r\nimport NavProjects from \"@/components/nav-projects\";\r\nimport NavUser from \"@/components/nav-user\";\r\nimport TeamSwitcher from \"@/components/team-switcher\";\r\nimport {\r\n\tSidebar,\r\n\tSidebarContent,\r\n\tSidebarFooter,\r\n\tSidebarHeader,\r\n\tSidebarRail,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { ComponentProps } from \"solid-js\";\r\n\r\n// This is sample data.\r\nconst data = {\r\n\tuser: {\r\n\t\tname: \"shadcn\",\r\n\t\temail: \"m@example.com\",\r\n\t\tavatar: \"/avatars/shadcn.jpg\",\r\n\t},\r\n\tteams: [\r\n\t\t{\r\n\t\t\tname: \"Acme Inc\",\r\n\t\t\tlogo: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4 shrink-0\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M7 2h10M5 6h14\" />\r\n\t\t\t\t\t\t<rect width=\"18\" height=\"12\" x=\"3\" y=\"10\" rx=\"2\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\tplan: \"Enterprise\",\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: \"Acme Corp.\",\r\n\t\t\tlogo: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4 shrink-0\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\tplan: \"Startup\",\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: \"Evil Corp.\",\r\n\t\t\tlogo: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4 shrink-0\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\tplan: \"Free\",\r\n\t\t},\r\n\t],\r\n\tnavMain: [\r\n\t\t{\r\n\t\t\ttitle: \"Playground\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"m7 11l2-2l-2-2m4 6h4\" />\r\n\t\t\t\t\t\t<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\tisActive: true,\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"History\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Starred\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Settings\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Models\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M12 8V4H8\" />\r\n\t\t\t\t\t\t<rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" />\r\n\t\t\t\t\t\t<path d=\"M2 14h2m16 0h2m-7-1v2m-6-2v2\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Genesis\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Explorer\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Quantum\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Documentation\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Introduction\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Get Started\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Tutorials\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Changelog\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Settings\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M20 7h-9m3 10H5\" />\r\n\t\t\t\t\t\t<circle cx=\"17\" cy=\"17\" r=\"3\" />\r\n\t\t\t\t\t\t<circle cx=\"7\" cy=\"7\" r=\"3\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"General\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Team\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Billing\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Limits\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t],\r\n\tprojects: [\r\n\t\t{\r\n\t\t\tname: \"Design Engineering\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M22 6H2m20 12H2M6 2v20M18 2v20\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: \"Sales & Marketing\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\" />\r\n\t\t\t\t\t\t<path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: \"Travel\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t],\r\n};\r\n\r\nconst AppSidebar = (props: ComponentProps<typeof Sidebar>) => {\r\n\treturn (\r\n\t\t<Sidebar collapsible=\"icon\" {...props}>\r\n\t\t\t<SidebarHeader>\r\n\t\t\t\t<TeamSwitcher teams={data.teams} />\r\n\t\t\t</SidebarHeader>\r\n\t\t\t<SidebarContent>\r\n\t\t\t\t<NavMain items={data.navMain} />\r\n\t\t\t\t<NavProjects projects={data.projects} />\r\n\t\t\t</SidebarContent>\r\n\t\t\t<SidebarFooter>\r\n\t\t\t\t<NavUser user={data.user} />\r\n\t\t\t</SidebarFooter>\r\n\t\t\t<SidebarRail />\r\n\t\t</Sidebar>\r\n\t);\r\n};\r\n\r\nexport default AppSidebar;\r\n"
+				content: "import type { ComponentProps } from \"solid-js\"\n\nimport NavMain from \"@/components/nav-main\"\nimport NavProjects from \"@/components/nav-projects\"\nimport NavUser from \"@/components/nav-user\"\nimport TeamSwitcher from \"@/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4 shrink-0\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M7 2h10M5 6h14\" />\n            <rect width=\"18\" height=\"12\" x=\"3\" y=\"10\" rx=\"2\" />\n          </g>\n        </svg>\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4 shrink-0\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2\"\n          />\n        </svg>\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4 shrink-0\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"\n          />\n        </svg>\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"m7 11l2-2l-2-2m4 6h4\" />\n            <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" />\n          </g>\n        </svg>\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M12 8V4H8\" />\n            <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" />\n            <path d=\"M2 14h2m16 0h2m-7-1v2m-6-2v2\" />\n          </g>\n        </svg>\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z\"\n          />\n        </svg>\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M20 7h-9m3 10H5\" />\n            <circle cx=\"17\" cy=\"17\" r=\"3\" />\n            <circle cx=\"7\" cy=\"7\" r=\"3\" />\n          </g>\n        </svg>\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M22 6H2m20 12H2M6 2v20M18 2v20\"\n          />\n        </svg>\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\" />\n            <path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" />\n          </g>\n        </svg>\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15\"\n          />\n        </svg>\n      ),\n    },\n  ],\n}\n\nconst AppSidebar = (props: ComponentProps<typeof Sidebar>) => {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\nexport default AppSidebar\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-01/components/nav-main.tsx",
 				type: "registry:component",
 				target: "src/components/nav-main.tsx",
-				content: "import {\r\n\tCollapsible,\r\n\tCollapsibleContent,\r\n\tCollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\";\r\nimport {\r\n\tSidebarGroup,\r\n\tSidebarGroupLabel,\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tSidebarMenuSub,\r\n\tSidebarMenuSubButton,\r\n\tSidebarMenuSubItem,\r\n} from \"@/components/ui/sidebar\";\r\nimport type {\r\n\tCollapsibleRootProps,\r\n\tCollapsibleTriggerProps,\r\n} from \"@kobalte/core/collapsible\";\r\nimport { type Accessor, For, type JSX, Show } from \"solid-js\";\r\n\r\nconst NavMain = (props: {\r\n\titems: {\r\n\t\ttitle: string;\r\n\t\turl: string;\r\n\t\ticon?: Accessor<JSX.Element>;\r\n\t\tisActive?: boolean;\r\n\t\titems?: {\r\n\t\t\ttitle: string;\r\n\t\t\turl: string;\r\n\t\t}[];\r\n\t}[];\r\n}) => {\r\n\treturn (\r\n\t\t<SidebarGroup>\r\n\t\t\t<SidebarGroupLabel>Platform</SidebarGroupLabel>\r\n\t\t\t<SidebarMenu>\r\n\t\t\t\t<For each={props.items}>\r\n\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t<Collapsible\r\n\t\t\t\t\t\t\tdefaultOpen={item.isActive}\r\n\t\t\t\t\t\t\tas={(props: CollapsibleRootProps) => (\r\n\t\t\t\t\t\t\t\t<SidebarMenuItem {...props}>\r\n\t\t\t\t\t\t\t\t\t<CollapsibleTrigger\r\n\t\t\t\t\t\t\t\t\t\tas={(props: CollapsibleTriggerProps) => (\r\n\t\t\t\t\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuButton\r\n\t\t\t\t\t\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltip={item.title}\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"[&>svg:last-of-type]:data-[expanded]:rotate-90\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Show when={item.icon!()}>{item.icon!()}</Show>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"ml-auto transition-transform duration-200\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\td=\"m9 18l6-6l-6-6\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t<CollapsibleContent>\r\n\t\t\t\t\t\t\t\t\t\t<SidebarMenuSub>\r\n\t\t\t\t\t\t\t\t\t\t\t<For each={item.items}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{(subItem) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton as=\"a\" href={subItem.url}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{subItem.title}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t</For>\r\n\t\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\r\n\t\t\t\t\t\t\t\t\t</CollapsibleContent>\r\n\t\t\t\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</For>\r\n\t\t\t</SidebarMenu>\r\n\t\t</SidebarGroup>\r\n\t);\r\n};\r\n\r\nexport default NavMain;\r\n"
+				content: "import { For, Show, type Accessor, type JSX } from \"solid-js\"\nimport type {\n  CollapsibleRootProps,\n  CollapsibleTriggerProps,\n} from \"@kobalte/core/collapsible\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nconst NavMain = (props: {\n  items: {\n    title: string\n    url: string\n    icon?: Accessor<JSX.Element>\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) => {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        <For each={props.items}>\n          {(item) => (\n            <Collapsible\n              defaultOpen={item.isActive}\n              as={(props: CollapsibleRootProps) => (\n                <SidebarMenuItem {...props}>\n                  <CollapsibleTrigger\n                    as={(props: CollapsibleTriggerProps) => (\n                      // @ts-expect-error\n                      <SidebarMenuButton\n                        {...props}\n                        tooltip={item.title}\n                        class=\"[&>svg:last-of-type]:data-[expanded]:rotate-90\"\n                      >\n                        <Show when={item.icon!()}>{item.icon!()}</Show>\n                        <span>{item.title}</span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          class=\"ml-auto transition-transform duration-200\"\n                          viewBox=\"0 0 24 24\"\n                        >\n                          <path\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            stroke-width=\"2\"\n                            d=\"m9 18l6-6l-6-6\"\n                          />\n                        </svg>\n                      </SidebarMenuButton>\n                    )}\n                  />\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <For each={item.items}>\n                        {(subItem) => (\n                          <SidebarMenuSubItem>\n                            <SidebarMenuSubButton as=\"a\" href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        )}\n                      </For>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              )}\n            />\n          )}\n        </For>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nexport default NavMain\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-01/components/nav-projects.tsx",
 				type: "registry:component",
 				target: "src/components/nav-projects.tsx",
-				content: "import {\r\n\tDropdownMenu,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuItem,\r\n\tDropdownMenuSeparator,\r\n\tDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport {\r\n\tSidebarGroup,\r\n\tSidebarGroupLabel,\r\n\tSidebarMenu,\r\n\tSidebarMenuAction,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tuseSideBar,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\";\r\nimport { type Accessor, For, type JSX } from \"solid-js\";\r\n\r\nconst NavProjects = (props: {\r\n\tprojects: {\r\n\t\tname: string;\r\n\t\turl: string;\r\n\t\ticon: Accessor<JSX.Element>;\r\n\t}[];\r\n}) => {\r\n\tconst { isMobile } = useSideBar();\r\n\r\n\treturn (\r\n\t\t<SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\r\n\t\t\t<SidebarGroupLabel>Projects</SidebarGroupLabel>\r\n\t\t\t<SidebarMenu>\r\n\t\t\t\t<For each={props.projects}>\r\n\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t\t\t<SidebarMenuButton as=\"a\" href={item.url}>\r\n\t\t\t\t\t\t\t\t<item.icon />\r\n\t\t\t\t\t\t\t\t<span>{item.name}</span>\r\n\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t<DropdownMenu\r\n\t\t\t\t\t\t\t\tplacement={isMobile() ? \"bottom-end\" : \"right-start\"}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<DropdownMenuTrigger\r\n\t\t\t\t\t\t\t\t\tas={(props: DropdownMenuTriggerProps) => (\r\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t\t\t\t<SidebarMenuAction {...props} showOnHover>\r\n\t\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<circle cx=\"19\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<circle cx=\"5\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"sr-only\">More</span>\r\n\t\t\t\t\t\t\t\t\t\t</SidebarMenuAction>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<DropdownMenuContent class=\"w-48 rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"text-muted-foreground size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t<span>View Project</span>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"text-muted-foreground size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"m15 17l5-5l-5-5\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M4 18v-2a4 4 0 0 1 4-4h12\" />\r\n\t\t\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t<span>Share Project</span>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"text-muted-foreground size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t<span>Delete Project</span>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t</DropdownMenuContent>\r\n\t\t\t\t\t\t\t</DropdownMenu>\r\n\t\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</For>\r\n\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t<SidebarMenuButton class=\"text-sidebar-foreground/70\">\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\tclass=\"text-sidebar-foreground/70 size-4\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t<circle cx=\"19\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t<circle cx=\"5\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t<span>More</span>\r\n\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t</SidebarMenuItem>\r\n\t\t\t</SidebarMenu>\r\n\t\t</SidebarGroup>\r\n\t);\r\n};\r\n\r\nexport default NavProjects;\r\n"
+				content: "import { For, type Accessor, type JSX } from \"solid-js\"\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSideBar,\n} from \"@/components/ui/sidebar\"\n\nconst NavProjects = (props: {\n  projects: {\n    name: string\n    url: string\n    icon: Accessor<JSX.Element>\n  }[]\n}) => {\n  const { isMobile } = useSideBar()\n\n  return (\n    <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        <For each={props.projects}>\n          {(item) => (\n            <SidebarMenuItem>\n              <SidebarMenuButton as=\"a\" href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </SidebarMenuButton>\n              <DropdownMenu\n                placement={isMobile() ? \"bottom-end\" : \"right-start\"}\n              >\n                <DropdownMenuTrigger\n                  as={(props: DropdownMenuTriggerProps) => (\n                    // @ts-expect-error\n                    <SidebarMenuAction {...props} showOnHover>\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        class=\"size-4\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <g\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        >\n                          <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                          <circle cx=\"19\" cy=\"12\" r=\"1\" />\n                          <circle cx=\"5\" cy=\"12\" r=\"1\" />\n                        </g>\n                      </svg>\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  )}\n                />\n                <DropdownMenuContent class=\"w-48 rounded-lg\">\n                  <DropdownMenuItem>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"text-muted-foreground size-4\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\n                      />\n                    </svg>\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"text-muted-foreground size-4\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                      >\n                        <path d=\"m15 17l5-5l-5-5\" />\n                        <path d=\"M4 18v-2a4 4 0 0 1 4-4h12\" />\n                      </g>\n                    </svg>\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"text-muted-foreground size-4\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6\"\n                      />\n                    </svg>\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          )}\n        </For>\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"text-sidebar-foreground/70 size-4\"\n              viewBox=\"0 0 24 24\"\n            >\n              <g\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                <circle cx=\"19\" cy=\"12\" r=\"1\" />\n                <circle cx=\"5\" cy=\"12\" r=\"1\" />\n              </g>\n            </svg>\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nexport default NavProjects\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-01/components/nav-user.tsx",
 				type: "registry:component",
 				target: "src/components/nav-user.tsx",
-				content: "import {\r\n\tDropdownMenu,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuGroup,\r\n\tDropdownMenuGroupLabel,\r\n\tDropdownMenuItem,\r\n\tDropdownMenuSeparator,\r\n\tDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport {\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tuseSideBar,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\";\r\nimport { Image } from \"@kobalte/core/image\";\r\n\r\nconst NavUser = (props: {\r\n\tuser: {\r\n\t\tname: string;\r\n\t\temail: string;\r\n\t\tavatar: string;\r\n\t};\r\n}) => {\r\n\tconst { isMobile } = useSideBar();\r\n\r\n\treturn (\r\n\t\t<SidebarMenu>\r\n\t\t\t<SidebarMenuItem>\r\n\t\t\t\t<DropdownMenu placement={isMobile() ? \"bottom-end\" : \"right-end\"}>\r\n\t\t\t\t\t<DropdownMenuTrigger\r\n\t\t\t\t\t\tas={(triggerProps: DropdownMenuTriggerProps) => (\r\n\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t<SidebarMenuButton\r\n\t\t\t\t\t\t\t\t{...triggerProps}\r\n\t\t\t\t\t\t\t\tsize=\"lg\"\r\n\t\t\t\t\t\t\t\tclass=\"data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<Image class=\"relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t<Image.Img\r\n\t\t\t\t\t\t\t\t\t\tclass=\"aspect-square h-full w-full\"\r\n\t\t\t\t\t\t\t\t\t\tsrc={props.user.avatar}\r\n\t\t\t\t\t\t\t\t\t\talt={props.user.name}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t<Image.Fallback class=\"flex h-full w-full items-center justify-center bg-muted rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t\tCN\r\n\t\t\t\t\t\t\t\t\t</Image.Fallback>\r\n\t\t\t\t\t\t\t\t</Image>\r\n\t\t\t\t\t\t\t\t<div class=\"grid flex-1 text-left text-sm leading-tight\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"truncate font-semibold\">{props.user.name}</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"truncate text-xs\">{props.user.email}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"ml-auto size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"m7 15l5 5l5-5M7 9l5-5l5 5\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<DropdownMenuContent class=\"w-[--kb-popper-anchor-width] min-w-56 rounded-lg\">\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuGroupLabel class=\"p-0 font-normal\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\r\n\t\t\t\t\t\t\t\t\t<Image class=\"relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t\t<Image.Img\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"aspect-square h-full w-full\"\r\n\t\t\t\t\t\t\t\t\t\t\tsrc={props.user.avatar}\r\n\t\t\t\t\t\t\t\t\t\t\talt={props.user.name}\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t<Image.Fallback class=\"flex h-full w-full items-center justify-center bg-muted rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t\t\tCN\r\n\t\t\t\t\t\t\t\t\t\t</Image.Fallback>\r\n\t\t\t\t\t\t\t\t\t</Image>\r\n\t\t\t\t\t\t\t\t\t<div class=\"grid flex-1 text-left text-sm leading-tight\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"truncate font-semibold\">\r\n\t\t\t\t\t\t\t\t\t\t\t{props.user.name}\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"truncate text-xs\">{props.user.email}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</DropdownMenuGroupLabel>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tUpgrade to Pro\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76\" />\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"m9 12l2 2l4-4\" />\r\n\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tAccount\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" />\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"M2 10h20\" />\r\n\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tBilling\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tNotifications\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\td=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\tLog out\r\n\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t</DropdownMenuContent>\r\n\t\t\t\t</DropdownMenu>\r\n\t\t\t</SidebarMenuItem>\r\n\t\t</SidebarMenu>\r\n\t);\r\n};\r\n\r\nexport default NavUser;\r\n"
+				content: "import type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\"\nimport { Image } from \"@kobalte/core/image\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSideBar,\n} from \"@/components/ui/sidebar\"\n\nconst NavUser = (props: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) => {\n  const { isMobile } = useSideBar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu placement={isMobile() ? \"bottom-end\" : \"right-end\"}>\n          <DropdownMenuTrigger\n            as={(triggerProps: DropdownMenuTriggerProps) => (\n              // @ts-expect-error\n              <SidebarMenuButton\n                {...triggerProps}\n                size=\"lg\"\n                class=\"data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground\"\n              >\n                <Image class=\"relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg\">\n                  <Image.Img\n                    class=\"aspect-square h-full w-full\"\n                    src={props.user.avatar}\n                    alt={props.user.name}\n                  />\n                  <Image.Fallback class=\"bg-muted flex h-full w-full items-center justify-center rounded-lg\">\n                    CN\n                  </Image.Fallback>\n                </Image>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">{props.user.name}</span>\n                  <span class=\"truncate text-xs\">{props.user.email}</span>\n                </div>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"ml-auto size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"m7 15l5 5l5-5M7 9l5-5l5 5\"\n                  />\n                </svg>\n              </SidebarMenuButton>\n            )}\n          />\n          <DropdownMenuContent class=\"w-[--kb-popper-anchor-width] min-w-56 rounded-lg\">\n            <DropdownMenuGroup>\n              <DropdownMenuGroupLabel class=\"p-0 font-normal\">\n                <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Image class=\"relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg\">\n                    <Image.Img\n                      class=\"aspect-square h-full w-full\"\n                      src={props.user.avatar}\n                      alt={props.user.name}\n                    />\n                    <Image.Fallback class=\"bg-muted flex h-full w-full items-center justify-center rounded-lg\">\n                      CN\n                    </Image.Fallback>\n                  </Image>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">\n                      {props.user.name}\n                    </span>\n                    <span class=\"truncate text-xs\">{props.user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuGroupLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3\"\n                  />\n                </svg>\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                  >\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76\" />\n                    <path d=\"m9 12l2 2l4-4\" />\n                  </g>\n                </svg>\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                  >\n                    <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" />\n                    <path d=\"M2 10h20\" />\n                  </g>\n                </svg>\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0\"\n                  />\n                </svg>\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9\"\n                />\n              </svg>\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nexport default NavUser\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-01/components/team-switcher.tsx",
 				type: "registry:component",
 				target: "src/components/team-switcher.tsx",
-				content: "import {\r\n\tDropdownMenu,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuGroup,\r\n\tDropdownMenuGroupLabel,\r\n\tDropdownMenuItem,\r\n\tDropdownMenuSeparator,\r\n\tDropdownMenuShortcut,\r\n\tDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport {\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tuseSideBar,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\";\r\nimport { type Accessor, For, type JSX, createSignal } from \"solid-js\";\r\n\r\nconst TeamSwitcher = (props: {\r\n\tteams: {\r\n\t\tname: string;\r\n\t\tlogo: Accessor<JSX.Element>;\r\n\t\tplan: string;\r\n\t}[];\r\n}) => {\r\n\tconst [activeTeam, setActiveTeam] = createSignal(props.teams[0]);\r\n\tconst { isMobile } = useSideBar();\r\n\r\n\treturn (\r\n\t\t<SidebarMenu>\r\n\t\t\t<SidebarMenuItem>\r\n\t\t\t\t<DropdownMenu\r\n\t\t\t\t\tplacement={isMobile() ? \"bottom-end\" : \"right-start\"}\r\n\t\t\t\t\tsameWidth\r\n\t\t\t\t>\r\n\t\t\t\t\t<DropdownMenuTrigger\r\n\t\t\t\t\t\tas={(props: DropdownMenuTriggerProps) => (\r\n\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t<SidebarMenuButton\r\n\t\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\t\tsize=\"lg\"\r\n\t\t\t\t\t\t\t\tclass=\"data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\r\n\t\t\t\t\t\t\t\t\t{activeTeam().logo()}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"grid flex-1 text-left text-sm leading-tight\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"truncate font-semibold\">\r\n\t\t\t\t\t\t\t\t\t\t{activeTeam().name}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"truncate text-xs\">{activeTeam().plan}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"ml-auto size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"m7 15l5 5l5-5M7 9l5-5l5 5\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<DropdownMenuContent class=\"w-[--kb-popper-anchor-width] min-w-56 rounded-lg\">\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuGroupLabel class=\"text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tTeams\r\n\t\t\t\t\t\t\t</DropdownMenuGroupLabel>\r\n\t\t\t\t\t\t\t<For each={props.teams}>\r\n\t\t\t\t\t\t\t\t{(team, index) => (\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\r\n\t\t\t\t\t\t\t\t\t\tonClick={() => setActiveTeam(team)}\r\n\t\t\t\t\t\t\t\t\t\tclass=\"gap-2 p-2\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"flex size-6 items-center justify-center rounded-sm border\">\r\n\t\t\t\t\t\t\t\t\t\t\t{team.logo()}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t{team.name}\r\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</For>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuItem class=\"gap-2 p-2\">\r\n\t\t\t\t\t\t\t<div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M5 12h14m-7-7v14\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"font-medium text-muted-foreground\">Add team</div>\r\n\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t</DropdownMenuContent>\r\n\t\t\t\t</DropdownMenu>\r\n\t\t\t</SidebarMenuItem>\r\n\t\t</SidebarMenu>\r\n\t);\r\n};\r\n\r\nexport default TeamSwitcher;\r\n"
+				content: "import { For, createSignal, type Accessor, type JSX } from \"solid-js\"\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSideBar,\n} from \"@/components/ui/sidebar\"\n\nconst TeamSwitcher = (props: {\n  teams: {\n    name: string\n    logo: Accessor<JSX.Element>\n    plan: string\n  }[]\n}) => {\n  // eslint-disable-next-line solid/reactivity\n  const [activeTeam, setActiveTeam] = createSignal(props.teams[0])\n  const { isMobile } = useSideBar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu\n          placement={isMobile() ? \"bottom-end\" : \"right-start\"}\n          sameWidth\n        >\n          <DropdownMenuTrigger\n            as={(props: DropdownMenuTriggerProps) => (\n              // @ts-expect-error\n              <SidebarMenuButton\n                {...props}\n                size=\"lg\"\n                class=\"data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground\"\n              >\n                <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  {activeTeam().logo()}\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">\n                    {activeTeam().name}\n                  </span>\n                  <span class=\"truncate text-xs\">{activeTeam().plan}</span>\n                </div>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"ml-auto size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"m7 15l5 5l5-5M7 9l5-5l5 5\"\n                  />\n                </svg>\n              </SidebarMenuButton>\n            )}\n          />\n          <DropdownMenuContent class=\"w-[--kb-popper-anchor-width] min-w-56 rounded-lg\">\n            <DropdownMenuGroup>\n              <DropdownMenuGroupLabel class=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuGroupLabel>\n              <For each={props.teams}>\n                {(team, index) => (\n                  <DropdownMenuItem\n                    onClick={() => setActiveTeam(team)}\n                    class=\"gap-2 p-2\"\n                  >\n                    <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                      {team.logo()}\n                    </div>\n                    {team.name}\n                    <DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                )}\n              </For>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem class=\"gap-2 p-2\">\n              <div class=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M5 12h14m-7-7v14\"\n                  />\n                </svg>\n              </div>\n              <div class=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nexport default TeamSwitcher\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/blocks/sidebar-01/index"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/blocks/sidebar-01/index.tsx",
@@ -1575,12 +1575,12 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/blocks/sidebar-02/index.tsx",
 				type: "registry:page",
 				target: "src/routes/dashboard.tsx",
-				content: "import AppSidebar from \"@/components/app-sidebar\";\r\nimport {\r\n\tSidebarInset,\r\n\tSidebarProvider,\r\n\tSidebarTrigger,\r\n} from \"@/components/ui/sidebar\";\r\n\r\nconst Page = () => {\r\n\treturn (\r\n\t\t<SidebarProvider\r\n\t\t\tstyle={{\r\n\t\t\t\t\"--sidebar-width\": \"19rem\",\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t<AppSidebar />\r\n\t\t\t<SidebarInset>\r\n\t\t\t\t<header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\r\n\t\t\t\t\t<SidebarTrigger class=\"-ml-1\" />\r\n\t\t\t\t</header>\r\n\t\t\t\t<div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\r\n\t\t\t\t\t<div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\r\n\t\t\t\t</div>\r\n\t\t\t</SidebarInset>\r\n\t\t</SidebarProvider>\r\n\t);\r\n};\r\n\r\nexport default Page;\r\n"
+				content: "import AppSidebar from \"@/components/app-sidebar\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nconst Page = () => {\n  return (\n    <SidebarProvider\n      style={{\n        \"--sidebar-width\": \"19rem\",\n      }}\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header class=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n        </header>\n        <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div class=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nexport default Page\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar.tsx",
 				type: "registry:component",
 				target: "src/components/app-sidebar.tsx",
-				content: "import {\r\n\tSidebar,\r\n\tSidebarContent,\r\n\tSidebarGroup,\r\n\tSidebarHeader,\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tSidebarMenuSub,\r\n\tSidebarMenuSubButton,\r\n\tSidebarMenuSubItem,\r\n} from \"@/components/ui/sidebar\";\r\nimport { type ComponentProps, For, Show } from \"solid-js\";\r\n\r\n// This is sample data.\r\nconst data = {\r\n\tnavMain: [\r\n\t\t{\r\n\t\t\ttitle: \"Getting Started\",\r\n\t\t\turl: \"#\",\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Installation\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Project Structure\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Building Your Application\",\r\n\t\t\turl: \"#\",\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Routing\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Data Fetching\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t\tisActive: true,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Rendering\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Caching\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Styling\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Optimizing\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Configuring\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Testing\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Authentication\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Deploying\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Upgrading\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Examples\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"API Reference\",\r\n\t\t\turl: \"#\",\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Components\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"File Conventions\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Functions\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"next.config.js Options\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"CLI\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Edge Runtime\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Architecture\",\r\n\t\t\turl: \"#\",\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Accessibility\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Fast Refresh\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Next.js Compiler\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Supported Browsers\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Turbopack\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Community\",\r\n\t\t\turl: \"#\",\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Contribution Guide\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t],\r\n};\r\n\r\nconst AppSidebar = (props: ComponentProps<typeof Sidebar>) => {\r\n\treturn (\r\n\t\t<Sidebar variant=\"floating\" {...props}>\r\n\t\t\t<SidebarHeader>\r\n\t\t\t\t<SidebarMenu>\r\n\t\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t\t<SidebarMenuButton size=\"lg\" as=\"a\" href=\"#\">\r\n\t\t\t\t\t\t\t<div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"M7 2h10M5 6h14\" />\r\n\t\t\t\t\t\t\t\t\t\t<rect width=\"18\" height=\"12\" x=\"3\" y=\"10\" rx=\"2\" />\r\n\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"flex flex-col gap-0.5 leading-none\">\r\n\t\t\t\t\t\t\t\t<span class=\"font-semibold\">Documentation</span>\r\n\t\t\t\t\t\t\t\t<span class=\"\">v1.0.0</span>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t</SidebarMenu>\r\n\t\t\t</SidebarHeader>\r\n\t\t\t<SidebarContent>\r\n\t\t\t\t<SidebarGroup>\r\n\t\t\t\t\t<SidebarMenu class=\"gap-2\">\r\n\t\t\t\t\t\t<For each={data.navMain}>\r\n\t\t\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton as=\"a\" href={item.url} class=\"font-medium\">\r\n\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t\t\t<Show when={item.items.length}>\r\n\t\t\t\t\t\t\t\t\t\t<SidebarMenuSub class=\"ml-0 border-l-0 px-1.5\">\r\n\t\t\t\t\t\t\t\t\t\t\t<For each={item.items}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisActive={item.isActive}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tas=\"a\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thref={item.url}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t</For>\r\n\t\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\r\n\t\t\t\t\t\t\t\t\t</Show>\r\n\t\t\t\t\t\t\t\t</>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</For>\r\n\t\t\t\t\t</SidebarMenu>\r\n\t\t\t\t</SidebarGroup>\r\n\t\t\t</SidebarContent>\r\n\t\t</Sidebar>\r\n\t);\r\n};\r\n\r\nexport default AppSidebar;\r\n"
+				content: "import { For, Show, type ComponentProps } from \"solid-js\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nconst AppSidebar = (props: ComponentProps<typeof Sidebar>) => {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as=\"a\" href=\"#\">\n              <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                  >\n                    <path d=\"M7 2h10M5 6h14\" />\n                    <rect width=\"18\" height=\"12\" x=\"3\" y=\"10\" rx=\"2\" />\n                  </g>\n                </svg>\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-semibold\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu class=\"gap-2\">\n            <For each={data.navMain}>\n              {(item) => (\n                <>\n                  <SidebarMenuButton as=\"a\" href={item.url} class=\"font-medium\">\n                    {item.title}\n                  </SidebarMenuButton>\n                  <Show when={item.items.length}>\n                    <SidebarMenuSub class=\"ml-0 border-l-0 px-1.5\">\n                      <For each={item.items}>\n                        {(item) => (\n                          <SidebarMenuSubItem>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              as=\"a\"\n                              href={item.url}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        )}\n                      </For>\n                    </SidebarMenuSub>\n                  </Show>\n                </>\n              )}\n            </For>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n\nexport default AppSidebar\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/blocks/sidebar-02/index"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/blocks/sidebar-02/index.tsx",
@@ -1596,32 +1596,32 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/blocks/sidebar-03/index.tsx",
 				type: "registry:page",
 				target: "src/routes/dashboard.tsx",
-				content: "import AppSidebar from \"@/components/app-sidebar\";\r\nimport {\r\n\tSidebarInset,\r\n\tSidebarProvider,\r\n\tSidebarSeparator,\r\n\tSidebarTrigger,\r\n} from \"@/components/ui/sidebar\";\r\n\r\nconst Page = () => {\r\n\treturn (\r\n\t\t<SidebarProvider>\r\n\t\t\t<AppSidebar />\r\n\t\t\t<SidebarInset>\r\n\t\t\t\t<header class=\"flex h-16 shrink-0 items-center gap-2\">\r\n\t\t\t\t\t<div class=\"flex items-center gap-2 px-4\">\r\n\t\t\t\t\t\t<SidebarTrigger class=\"-ml-1\" />\r\n\t\t\t\t\t\t<SidebarSeparator orientation=\"vertical\" class=\"mr-2 h-4\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</header>\r\n\t\t\t\t<div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\r\n\t\t\t\t\t<div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t\t<div class=\"aspect-video rounded-xl bg-muted/50\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\r\n\t\t\t\t</div>\r\n\t\t\t</SidebarInset>\r\n\t\t</SidebarProvider>\r\n\t);\r\n};\r\n\r\nexport default Page;\r\n"
+				content: "import AppSidebar from \"@/components/app-sidebar\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarSeparator,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n\nconst Page = () => {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header class=\"flex h-16 shrink-0 items-center gap-2\">\n          <div class=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger class=\"-ml-1\" />\n            <SidebarSeparator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          </div>\n        </header>\n        <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div class=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n\nexport default Page\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar.tsx",
 				type: "registry:component",
 				target: "src/components/app-sidebar.tsx",
-				content: "import NavMain from \"@/components/nav-main\";\r\nimport NavProjects from \"@/components/nav-projects\";\r\nimport NavSecondary from \"@/components/nav-secondary\";\r\nimport NavUser from \"@/components/nav-user\";\r\nimport {\r\n\tSidebar,\r\n\tSidebarContent,\r\n\tSidebarFooter,\r\n\tSidebarHeader,\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { ComponentProps } from \"solid-js\";\r\n\r\n// This is sample data.\r\nconst data = {\r\n\tuser: {\r\n\t\tname: \"shadcn\",\r\n\t\temail: \"m@example.com\",\r\n\t\tavatar: \"https://ui.shadcn.com/avatars/shadcn.jpg\",\r\n\t},\r\n\tnavMain: [\r\n\t\t{\r\n\t\t\ttitle: \"Playground\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"m7 11l2-2l-2-2m4 6h4\" />\r\n\t\t\t\t\t\t<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\tisActive: true,\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"History\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Starred\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Settings\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Models\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M12 8V4H8\" />\r\n\t\t\t\t\t\t<rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" />\r\n\t\t\t\t\t\t<path d=\"M2 14h2m16 0h2m-7-1v2m-6-2v2\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Genesis\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Explorer\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Quantum\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Documentation\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Introduction\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Get Started\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Tutorials\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Changelog\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Settings\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M20 7h-9m3 10H5\" />\r\n\t\t\t\t\t\t<circle cx=\"17\" cy=\"17\" r=\"3\" />\r\n\t\t\t\t\t\t<circle cx=\"7\" cy=\"7\" r=\"3\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"General\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Team\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Billing\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\ttitle: \"Limits\",\r\n\t\t\t\t\turl: \"#\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t},\r\n\t],\r\n\tnavSecondary: [\r\n\t\t{\r\n\t\t\ttitle: \"Support\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n\t\t\t\t\t\t<path d=\"m4.93 4.93l4.24 4.24m5.66 0l4.24-4.24m-4.24 9.9l4.24 4.24m-9.9-4.24l-4.24 4.24\" />\r\n\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"4\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t\t{\r\n\t\t\ttitle: \"Feedback\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t],\r\n\tprojects: [\r\n\t\t{\r\n\t\t\tname: \"Design Engineering\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M22 6H2m20 12H2M6 2v20M18 2v20\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: \"Sales & Marketing\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<g\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<path d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\" />\r\n\t\t\t\t\t\t<path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: \"Travel\",\r\n\t\t\turl: \"#\",\r\n\t\t\ticon: () => (\r\n\t\t\t\t<svg\r\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<path\r\n\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\td=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</svg>\r\n\t\t\t),\r\n\t\t},\r\n\t],\r\n};\r\n\r\nconst AppSidebar = (props: ComponentProps<typeof Sidebar>) => {\r\n\treturn (\r\n\t\t<Sidebar variant=\"inset\" {...props}>\r\n\t\t\t<SidebarHeader>\r\n\t\t\t\t<SidebarMenu>\r\n\t\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t\t<SidebarMenuButton size=\"lg\" as=\"a\" href=\"#\">\r\n\t\t\t\t\t\t\t<div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"grid flex-1 text-left text-sm leading-tight\">\r\n\t\t\t\t\t\t\t\t<span class=\"truncate font-semibold\">Acme Inc</span>\r\n\t\t\t\t\t\t\t\t<span class=\"truncate text-xs\">Enterprise</span>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t</SidebarMenu>\r\n\t\t\t</SidebarHeader>\r\n\t\t\t<SidebarContent>\r\n\t\t\t\t<NavMain items={data.navMain} />\r\n\t\t\t\t<NavProjects projects={data.projects} />\r\n\t\t\t\t<NavSecondary items={data.navSecondary} class=\"mt-auto\" />\r\n\t\t\t</SidebarContent>\r\n\t\t\t<SidebarFooter>\r\n\t\t\t\t<NavUser user={data.user} />\r\n\t\t\t</SidebarFooter>\r\n\t\t</Sidebar>\r\n\t);\r\n};\r\n\r\nexport default AppSidebar;\r\n"
+				content: "import type { ComponentProps } from \"solid-js\"\n\nimport NavMain from \"@/components/nav-main\"\nimport NavProjects from \"@/components/nav-projects\"\nimport NavSecondary from \"@/components/nav-secondary\"\nimport NavUser from \"@/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"https://ui.shadcn.com/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"m7 11l2-2l-2-2m4 6h4\" />\n            <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" />\n          </g>\n        </svg>\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M12 8V4H8\" />\n            <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" />\n            <path d=\"M2 14h2m16 0h2m-7-1v2m-6-2v2\" />\n          </g>\n        </svg>\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z\"\n          />\n        </svg>\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M20 7h-9m3 10H5\" />\n            <circle cx=\"17\" cy=\"17\" r=\"3\" />\n            <circle cx=\"7\" cy=\"7\" r=\"3\" />\n          </g>\n        </svg>\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path d=\"m4.93 4.93l4.24 4.24m5.66 0l4.24-4.24m-4.24 9.9l4.24 4.24m-9.9-4.24l-4.24 4.24\" />\n            <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          </g>\n        </svg>\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939\"\n          />\n        </svg>\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M22 6H2m20 12H2M6 2v20M18 2v20\"\n          />\n        </svg>\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n          >\n            <path d=\"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z\" />\n            <path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\" />\n          </g>\n        </svg>\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: () => (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15\"\n          />\n        </svg>\n      ),\n    },\n  ],\n}\n\nconst AppSidebar = (props: ComponentProps<typeof Sidebar>) => {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as=\"a\" href=\"#\">\n              <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"\n                  />\n                </svg>\n              </div>\n              <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                <span class=\"truncate font-semibold\">Acme Inc</span>\n                <span class=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} class=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n\nexport default AppSidebar\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-03/components/nav-main.tsx",
 				type: "registry:component",
 				target: "src/components/nav-main.tsx",
-				content: "import {\r\n\tCollapsible,\r\n\tCollapsibleContent,\r\n\tCollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\";\r\nimport {\r\n\tSidebarGroup,\r\n\tSidebarGroupLabel,\r\n\tSidebarMenu,\r\n\tSidebarMenuAction,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tSidebarMenuSub,\r\n\tSidebarMenuSubButton,\r\n\tSidebarMenuSubItem,\r\n} from \"@/components/ui/sidebar\";\r\nimport type {\r\n\tCollapsibleRootProps,\r\n\tCollapsibleTriggerProps,\r\n} from \"@kobalte/core/collapsible\";\r\nimport { type Accessor, For, type JSX, Show } from \"solid-js\";\r\n\r\nconst NavMain = (props: {\r\n\titems: {\r\n\t\ttitle: string;\r\n\t\turl: string;\r\n\t\ticon: Accessor<JSX.Element>;\r\n\t\tisActive?: boolean;\r\n\t\titems?: {\r\n\t\t\ttitle: string;\r\n\t\t\turl: string;\r\n\t\t}[];\r\n\t}[];\r\n}) => {\r\n\treturn (\r\n\t\t<SidebarGroup>\r\n\t\t\t<SidebarGroupLabel>Platform</SidebarGroupLabel>\r\n\t\t\t<SidebarMenu>\r\n\t\t\t\t<For each={props.items}>\r\n\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t<Collapsible\r\n\t\t\t\t\t\t\tdefaultOpen={item.isActive}\r\n\t\t\t\t\t\t\tas={(props: CollapsibleRootProps) => (\r\n\t\t\t\t\t\t\t\t<SidebarMenuItem {...props}>\r\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton\r\n\t\t\t\t\t\t\t\t\t\ttooltip={item.title}\r\n\t\t\t\t\t\t\t\t\t\tas=\"a\"\r\n\t\t\t\t\t\t\t\t\t\thref={item.url}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<item.icon />\r\n\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\r\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t\t\t<Show when={item.items?.length}>\r\n\t\t\t\t\t\t\t\t\t\t<CollapsibleTrigger\r\n\t\t\t\t\t\t\t\t\t\t\tas={(props: CollapsibleTriggerProps) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuAction\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"data-[expanded]:rotate-90\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"transition-transform duration-200\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\td=\"m9 18l6-6l-6-6\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"sr-only\">Toggle</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuAction>\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t<CollapsibleContent>\r\n\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSub>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<For each={item.items}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{(subItem) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SidebarMenuSubButton as=\"a\" href={subItem.url}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{subItem.title}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubButton>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSubItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</For>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t</SidebarMenuSub>\r\n\t\t\t\t\t\t\t\t\t\t</CollapsibleContent>\r\n\t\t\t\t\t\t\t\t\t</Show>\r\n\t\t\t\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</For>\r\n\t\t\t</SidebarMenu>\r\n\t\t</SidebarGroup>\r\n\t);\r\n};\r\n\r\nexport default NavMain;\r\n"
+				content: "import { For, Show, type Accessor, type JSX } from \"solid-js\"\nimport type {\n  CollapsibleRootProps,\n  CollapsibleTriggerProps,\n} from \"@kobalte/core/collapsible\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\nconst NavMain = (props: {\n  items: {\n    title: string\n    url: string\n    icon: Accessor<JSX.Element>\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) => {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        <For each={props.items}>\n          {(item) => (\n            <Collapsible\n              defaultOpen={item.isActive}\n              as={(props: CollapsibleRootProps) => (\n                <SidebarMenuItem {...props}>\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    as=\"a\"\n                    href={item.url}\n                  >\n                    <item.icon />\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  <Show when={item.items?.length}>\n                    <CollapsibleTrigger\n                      as={(props: CollapsibleTriggerProps) => (\n                        // @ts-expect-error\n                        <SidebarMenuAction\n                          {...props}\n                          class=\"data-[expanded]:rotate-90\"\n                        >\n                          <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            class=\"transition-transform duration-200\"\n                            viewBox=\"0 0 24 24\"\n                          >\n                            <path\n                              fill=\"none\"\n                              stroke=\"currentColor\"\n                              stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\"\n                              stroke-width=\"2\"\n                              d=\"m9 18l6-6l-6-6\"\n                            />\n                          </svg>\n                          <span class=\"sr-only\">Toggle</span>\n                        </SidebarMenuAction>\n                      )}\n                    />\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {\n                          <For each={item.items}>\n                            {(subItem) => (\n                              <SidebarMenuSubItem>\n                                <SidebarMenuSubButton as=\"a\" href={subItem.url}>\n                                  <span>{subItem.title}</span>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            )}\n                          </For>\n                        }\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </Show>\n                </SidebarMenuItem>\n              )}\n            />\n          )}\n        </For>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nexport default NavMain\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-03/components/nav-projects.tsx",
 				type: "registry:component",
 				target: "src/components/nav-projects.tsx",
-				content: "import {\r\n\tDropdownMenu,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuItem,\r\n\tDropdownMenuSeparator,\r\n\tDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport {\r\n\tSidebarGroup,\r\n\tSidebarGroupLabel,\r\n\tSidebarMenu,\r\n\tSidebarMenuAction,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tuseSideBar,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\";\r\nimport { type Accessor, For, type JSX } from \"solid-js\";\r\n\r\nconst NavProjects = (props: {\r\n\tprojects: {\r\n\t\tname: string;\r\n\t\turl: string;\r\n\t\ticon: Accessor<JSX.Element>;\r\n\t}[];\r\n}) => {\r\n\tconst { isMobile } = useSideBar();\r\n\r\n\treturn (\r\n\t\t<SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\r\n\t\t\t<SidebarGroupLabel>Projects</SidebarGroupLabel>\r\n\t\t\t<SidebarMenu>\r\n\t\t\t\t<For each={props.projects}>\r\n\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t\t\t<SidebarMenuButton as=\"a\" href={item.url}>\r\n\t\t\t\t\t\t\t\t<item.icon />\r\n\t\t\t\t\t\t\t\t<span>{item.name}</span>\r\n\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t<DropdownMenu\r\n\t\t\t\t\t\t\t\tplacement={isMobile() ? \"bottom-end\" : \"right-start\"}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<DropdownMenuTrigger\r\n\t\t\t\t\t\t\t\t\tas={(props: DropdownMenuTriggerProps) => (\r\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t\t\t\t<SidebarMenuAction showOnHover {...props}>\r\n\t\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<circle cx=\"19\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<circle cx=\"5\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"sr-only\">More</span>\r\n\t\t\t\t\t\t\t\t\t\t</SidebarMenuAction>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<DropdownMenuContent class=\"w-48 rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"text-muted-foreground size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t<span>View Project</span>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"text-muted-foreground size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"m15 17l5-5l-5-5\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M4 18v-2a4 4 0 0 1 4-4h12\" />\r\n\t\t\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t<span>Share Project</span>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"text-muted-foreground size-4\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t\t<span>Delete Project</span>\r\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t</DropdownMenuContent>\r\n\t\t\t\t\t\t\t</DropdownMenu>\r\n\t\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</For>\r\n\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t<SidebarMenuButton class=\"text-sidebar-foreground/70\">\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\tclass=\"text-sidebar-foreground/70 size-4\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t<circle cx=\"19\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t\t<circle cx=\"5\" cy=\"12\" r=\"1\" />\r\n\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t<span>More</span>\r\n\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t</SidebarMenuItem>\r\n\t\t\t</SidebarMenu>\r\n\t\t</SidebarGroup>\r\n\t);\r\n};\r\n\r\nexport default NavProjects;\r\n"
+				content: "import { For, type Accessor, type JSX } from \"solid-js\"\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSideBar,\n} from \"@/components/ui/sidebar\"\n\nconst NavProjects = (props: {\n  projects: {\n    name: string\n    url: string\n    icon: Accessor<JSX.Element>\n  }[]\n}) => {\n  const { isMobile } = useSideBar()\n\n  return (\n    <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        <For each={props.projects}>\n          {(item) => (\n            <SidebarMenuItem>\n              <SidebarMenuButton as=\"a\" href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </SidebarMenuButton>\n              <DropdownMenu\n                placement={isMobile() ? \"bottom-end\" : \"right-start\"}\n              >\n                <DropdownMenuTrigger\n                  as={(props: DropdownMenuTriggerProps) => (\n                    // @ts-expect-error\n                    <SidebarMenuAction showOnHover {...props}>\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        class=\"size-4\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <g\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          stroke-width=\"2\"\n                        >\n                          <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                          <circle cx=\"19\" cy=\"12\" r=\"1\" />\n                          <circle cx=\"5\" cy=\"12\" r=\"1\" />\n                        </g>\n                      </svg>\n                      <span class=\"sr-only\">More</span>\n                    </SidebarMenuAction>\n                  )}\n                />\n                <DropdownMenuContent class=\"w-48 rounded-lg\">\n                  <DropdownMenuItem>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"text-muted-foreground size-4\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\n                      />\n                    </svg>\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"text-muted-foreground size-4\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <g\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                      >\n                        <path d=\"m15 17l5-5l-5-5\" />\n                        <path d=\"M4 18v-2a4 4 0 0 1 4-4h12\" />\n                      </g>\n                    </svg>\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"text-muted-foreground size-4\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6\"\n                      />\n                    </svg>\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          )}\n        </For>\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"text-sidebar-foreground/70 size-4\"\n              viewBox=\"0 0 24 24\"\n            >\n              <g\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                <circle cx=\"19\" cy=\"12\" r=\"1\" />\n                <circle cx=\"5\" cy=\"12\" r=\"1\" />\n              </g>\n            </svg>\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n\nexport default NavProjects\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-03/components/nav-user.tsx",
 				type: "registry:component",
 				target: "src/components/nav-user.tsx",
-				content: "import {\r\n\tDropdownMenu,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuGroup,\r\n\tDropdownMenuGroupLabel,\r\n\tDropdownMenuItem,\r\n\tDropdownMenuSeparator,\r\n\tDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport {\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n\tuseSideBar,\r\n} from \"@/components/ui/sidebar\";\r\nimport type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\";\r\nimport { Image } from \"@kobalte/core/image\";\r\n\r\nconst NavUser = (props: {\r\n\tuser: {\r\n\t\tname: string;\r\n\t\temail: string;\r\n\t\tavatar: string;\r\n\t};\r\n}) => {\r\n\tconst { isMobile } = useSideBar();\r\n\r\n\treturn (\r\n\t\t<SidebarMenu>\r\n\t\t\t<SidebarMenuItem>\r\n\t\t\t\t<DropdownMenu placement={isMobile() ? \"bottom-end\" : \"right-end\"}>\r\n\t\t\t\t\t<DropdownMenuTrigger\r\n\t\t\t\t\t\tas={(triggerProps: DropdownMenuTriggerProps) => (\r\n\t\t\t\t\t\t\t// @ts-expect-error\r\n\t\t\t\t\t\t\t<SidebarMenuButton\r\n\t\t\t\t\t\t\t\t{...triggerProps}\r\n\t\t\t\t\t\t\t\tsize=\"lg\"\r\n\t\t\t\t\t\t\t\tclass=\"data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<Image class=\"relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t<Image.Img\r\n\t\t\t\t\t\t\t\t\t\tclass=\"aspect-square h-full w-full\"\r\n\t\t\t\t\t\t\t\t\t\tsrc={props.user.avatar}\r\n\t\t\t\t\t\t\t\t\t\talt={props.user.name}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t<Image.Fallback class=\"flex h-full w-full items-center justify-center bg-muted rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t\tCN\r\n\t\t\t\t\t\t\t\t\t</Image.Fallback>\r\n\t\t\t\t\t\t\t\t</Image>\r\n\t\t\t\t\t\t\t\t<div class=\"grid flex-1 text-left text-sm leading-tight\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"truncate font-semibold\">{props.user.name}</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"truncate text-xs\">{props.user.email}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"ml-auto size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"m7 15l5 5l5-5M7 9l5-5l5 5\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<DropdownMenuContent class=\"w-[--kb-popper-anchor-width] min-w-56 rounded-lg\">\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuGroupLabel class=\"p-0 font-normal\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\r\n\t\t\t\t\t\t\t\t\t<Image class=\"relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t\t<Image.Img\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"aspect-square h-full w-full\"\r\n\t\t\t\t\t\t\t\t\t\t\tsrc={props.user.avatar}\r\n\t\t\t\t\t\t\t\t\t\t\talt={props.user.name}\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t<Image.Fallback class=\"flex h-full w-full items-center justify-center bg-muted rounded-lg\">\r\n\t\t\t\t\t\t\t\t\t\t\tCN\r\n\t\t\t\t\t\t\t\t\t\t</Image.Fallback>\r\n\t\t\t\t\t\t\t\t\t</Image>\r\n\t\t\t\t\t\t\t\t\t<div class=\"grid flex-1 text-left text-sm leading-tight\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"truncate font-semibold\">\r\n\t\t\t\t\t\t\t\t\t\t\t{props.user.name}\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"truncate text-xs\">{props.user.email}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</DropdownMenuGroupLabel>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tUpgrade to Pro\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76\" />\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"m9 12l2 2l4-4\" />\r\n\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tAccount\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" />\r\n\t\t\t\t\t\t\t\t\t\t<path d=\"M2 10h20\" />\r\n\t\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tBilling\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\tNotifications\r\n\t\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t\td=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\tLog out\r\n\t\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t</DropdownMenuContent>\r\n\t\t\t\t</DropdownMenu>\r\n\t\t\t</SidebarMenuItem>\r\n\t\t</SidebarMenu>\r\n\t);\r\n};\r\n\r\nexport default NavUser;\r\n"
+				content: "import type { DropdownMenuTriggerProps } from \"@kobalte/core/dropdown-menu\"\nimport { Image } from \"@kobalte/core/image\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSideBar,\n} from \"@/components/ui/sidebar\"\n\nconst NavUser = (props: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) => {\n  const { isMobile } = useSideBar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu placement={isMobile() ? \"bottom-end\" : \"right-end\"}>\n          <DropdownMenuTrigger\n            as={(triggerProps: DropdownMenuTriggerProps) => (\n              // @ts-expect-error\n              <SidebarMenuButton\n                {...triggerProps}\n                size=\"lg\"\n                class=\"data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground\"\n              >\n                <Image class=\"relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg\">\n                  <Image.Img\n                    class=\"aspect-square h-full w-full\"\n                    src={props.user.avatar}\n                    alt={props.user.name}\n                  />\n                  <Image.Fallback class=\"bg-muted flex h-full w-full items-center justify-center rounded-lg\">\n                    CN\n                  </Image.Fallback>\n                </Image>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-semibold\">{props.user.name}</span>\n                  <span class=\"truncate text-xs\">{props.user.email}</span>\n                </div>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"ml-auto size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"m7 15l5 5l5-5M7 9l5-5l5 5\"\n                  />\n                </svg>\n              </SidebarMenuButton>\n            )}\n          />\n          <DropdownMenuContent class=\"w-[--kb-popper-anchor-width] min-w-56 rounded-lg\">\n            <DropdownMenuGroup>\n              <DropdownMenuGroupLabel class=\"p-0 font-normal\">\n                <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Image class=\"relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg\">\n                    <Image.Img\n                      class=\"aspect-square h-full w-full\"\n                      src={props.user.avatar}\n                      alt={props.user.name}\n                    />\n                    <Image.Fallback class=\"bg-muted flex h-full w-full items-center justify-center rounded-lg\">\n                      CN\n                    </Image.Fallback>\n                  </Image>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">\n                      {props.user.name}\n                    </span>\n                    <span class=\"truncate text-xs\">{props.user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuGroupLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3\"\n                  />\n                </svg>\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                  >\n                    <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76\" />\n                    <path d=\"m9 12l2 2l4-4\" />\n                  </g>\n                </svg>\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <g\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                  >\n                    <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" />\n                    <path d=\"M2 10h20\" />\n                  </g>\n                </svg>\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-4\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0\"\n                  />\n                </svg>\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9\"\n                />\n              </svg>\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nexport default NavUser\n"
 			},{
 				path: "src/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary.tsx",
 				type: "registry:component",
 				target: "src/components/nav-secondary.tsx",
-				content: "import {\r\n\tSidebarGroup,\r\n\tSidebarGroupContent,\r\n\tSidebarMenu,\r\n\tSidebarMenuButton,\r\n\tSidebarMenuItem,\r\n} from \"@/components/ui/sidebar\";\r\nimport {\r\n\ttype Accessor,\r\n\ttype ComponentProps,\r\n\tFor,\r\n\ttype JSXElement,\r\n\tsplitProps,\r\n} from \"solid-js\";\r\n\r\nconst NavSecondary = (\r\n\tprops: ComponentProps<typeof SidebarGroup> & {\r\n\t\titems: {\r\n\t\t\ttitle: string;\r\n\t\t\turl: string;\r\n\t\t\ticon: Accessor<JSXElement>;\r\n\t\t}[];\r\n\t},\r\n) => {\r\n\tconst [local, rest] = splitProps(props, [\"items\"]);\r\n\r\n\treturn (\r\n\t\t<SidebarGroup {...rest}>\r\n\t\t\t<SidebarGroupContent>\r\n\t\t\t\t<SidebarMenu>\r\n\t\t\t\t\t<For each={local.items}>\r\n\t\t\t\t\t\t{(item) => (\r\n\t\t\t\t\t\t\t<SidebarMenuItem>\r\n\t\t\t\t\t\t\t\t<SidebarMenuButton as=\"a\" size=\"sm\" href={item.url}>\r\n\t\t\t\t\t\t\t\t\t<item.icon />\r\n\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\r\n\t\t\t\t\t\t\t\t</SidebarMenuButton>\r\n\t\t\t\t\t\t\t</SidebarMenuItem>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</For>\r\n\t\t\t\t</SidebarMenu>\r\n\t\t\t</SidebarGroupContent>\r\n\t\t</SidebarGroup>\r\n\t);\r\n};\r\n\r\nexport default NavSecondary;\r\n"
+				content: "import {\n  For,\n  splitProps,\n  type Accessor,\n  type ComponentProps,\n  type JSXElement,\n} from \"solid-js\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst NavSecondary = (\n  props: ComponentProps<typeof SidebarGroup> & {\n    items: {\n      title: string\n      url: string\n      icon: Accessor<JSXElement>\n    }[]\n  }\n) => {\n  const [local, rest] = splitProps(props, [\"items\"])\n\n  return (\n    <SidebarGroup {...rest}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <For each={local.items}>\n            {(item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton as=\"a\" size=\"sm\" href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            )}\n          </For>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n\nexport default NavSecondary\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/blocks/sidebar-03/index"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/blocks/sidebar-03/index.tsx",
@@ -1637,7 +1637,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\r\n\tCard,\r\n\tCardContent,\r\n\tCardDescription,\r\n\tCardFooter,\r\n\tCardHeader,\r\n\tCardTitle,\r\n} from \"@/components/ui/card\";\r\nimport {\r\n\ttype ChartConfig,\r\n\tChartContainer,\r\n\tChartCrosshair,\r\n\tChartTooltipContent,\r\n} from \"@/components/ui/chart\";\r\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\r\nimport { CurveType, Position } from \"@unovis/ts\";\r\n\r\ntype DataRecord = {\r\n\tmonth: string;\r\n\tdesktop: number;\r\n};\r\n\r\nconst data: DataRecord[] = [\r\n\t{ month: \"January\", desktop: 186 },\r\n\t{ month: \"February\", desktop: 305 },\r\n\t{ month: \"March\", desktop: 237 },\r\n\t{ month: \"April\", desktop: 73 },\r\n\t{ month: \"May\", desktop: 209 },\r\n\t{ month: \"June\", desktop: 214 },\r\n];\r\n\r\nconst chartConfig = {\r\n\tdesktop: {\r\n\t\tlabel: \"Desktop\",\r\n\t\tcolor: \"hsl(var(--chart-1))\",\r\n\t},\r\n} satisfies ChartConfig;\r\n\r\nconst AreaChart = () => {\r\n\treturn (\r\n\t\t<Card>\r\n\t\t\t<CardHeader>\r\n\t\t\t\t<CardTitle>Area Chart</CardTitle>\r\n\t\t\t\t<CardDescription>\r\n\t\t\t\t\tShowing total visitors for the last 6 months\r\n\t\t\t\t</CardDescription>\r\n\t\t\t</CardHeader>\r\n\t\t\t<CardContent class=\"h-[300px]\">\r\n\t\t\t\t<ChartContainer\r\n\t\t\t\t\tconfig={chartConfig}\r\n\t\t\t\t\ttype=\"xy\"\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tyDomain={[0, 310]}\r\n\t\t\t\t>\r\n\t\t\t\t\t<VisArea<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={(d) => d.desktop}\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\topacity={0.4}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisLine<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={(d) => d.desktop}\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t\tlineWidth={1}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisAxis<DataRecord>\r\n\t\t\t\t\t\ttype=\"x\"\r\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\r\n\t\t\t\t\t\tgridLine={false}\r\n\t\t\t\t\t\ttickLine={false}\r\n\t\t\t\t\t\tdomainLine={false}\r\n\t\t\t\t\t\tnumTicks={data.length}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<ChartCrosshair<DataRecord>\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\ttemplate={(props) => (\r\n\t\t\t\t\t\t\t<ChartTooltipContent\r\n\t\t\t\t\t\t\t\tlabelKey=\"month\"\r\n\t\t\t\t\t\t\t\tindicator=\"line\"\r\n\t\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\r\n\t\t\t\t</ChartContainer>\r\n\t\t\t</CardContent>\r\n\t\t\t<CardFooter>\r\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\r\n\t\t\t\t\t<div class=\"grid gap-2\">\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\r\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\r\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\r\n\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\r\n\t\t\t\t\t\t\tJanuary - June 2024\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CardFooter>\r\n\t\t</Card>\r\n\t);\r\n};\r\n\r\nexport default AreaChart;\r\n"
+				content: "import { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\"\nimport { CurveType, Position } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nconst AreaChart = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 310]}\n        >\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            opacity={0.4}\n            curveType={CurveType.Natural}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            curveType={CurveType.Natural}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <ChartCrosshair<DataRecord>\n            color=\"var(--color-desktop)\"\n            template={(props) => (\n              <ChartTooltipContent\n                labelKey=\"month\"\n                indicator=\"line\"\n                {...props}\n              />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default AreaChart\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart.tsx",
@@ -1653,7 +1653,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart-linear.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\r\n\tCard,\r\n\tCardContent,\r\n\tCardDescription,\r\n\tCardFooter,\r\n\tCardHeader,\r\n\tCardTitle,\r\n} from \"@/components/ui/card\";\r\nimport {\r\n\ttype ChartConfig,\r\n\tChartContainer,\r\n\tChartCrosshair,\r\n\tChartTooltipContent,\r\n} from \"@/components/ui/chart\";\r\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\r\nimport { CurveType, Position } from \"@unovis/ts\";\r\n\r\ntype DataRecord = {\r\n\tmonth: string;\r\n\tdesktop: number;\r\n};\r\n\r\nconst data: DataRecord[] = [\r\n\t{ month: \"January\", desktop: 186 },\r\n\t{ month: \"February\", desktop: 305 },\r\n\t{ month: \"March\", desktop: 237 },\r\n\t{ month: \"April\", desktop: 73 },\r\n\t{ month: \"May\", desktop: 209 },\r\n\t{ month: \"June\", desktop: 214 },\r\n];\r\n\r\nconst chartConfig = {\r\n\tdesktop: {\r\n\t\tlabel: \"Desktop\",\r\n\t\tcolor: \"hsl(var(--chart-1))\",\r\n\t},\r\n} satisfies ChartConfig;\r\n\r\nconst AreaChartLinear = () => {\r\n\treturn (\r\n\t\t<Card>\r\n\t\t\t<CardHeader>\r\n\t\t\t\t<CardTitle>Area Chart - Linear</CardTitle>\r\n\t\t\t\t<CardDescription>\r\n\t\t\t\t\tShowing total visitors for the last 6 months\r\n\t\t\t\t</CardDescription>\r\n\t\t\t</CardHeader>\r\n\t\t\t<CardContent class=\"h-[300px]\">\r\n\t\t\t\t<ChartContainer\r\n\t\t\t\t\tconfig={chartConfig}\r\n\t\t\t\t\ttype=\"xy\"\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tyDomain={[0, 310]}\r\n\t\t\t\t>\r\n\t\t\t\t\t<VisArea<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={(d) => d.desktop}\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\topacity={0.4}\r\n\t\t\t\t\t\tcurveType={CurveType.Linear}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisLine<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={(d) => d.desktop}\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\tcurveType={CurveType.Linear}\r\n\t\t\t\t\t\tlineWidth={1}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisAxis<DataRecord>\r\n\t\t\t\t\t\ttype=\"x\"\r\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\r\n\t\t\t\t\t\tgridLine={false}\r\n\t\t\t\t\t\ttickLine={false}\r\n\t\t\t\t\t\tdomainLine={false}\r\n\t\t\t\t\t\tnumTicks={data.length}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<ChartCrosshair<DataRecord>\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\ttemplate={(props) => (\r\n\t\t\t\t\t\t\t<ChartTooltipContent\r\n\t\t\t\t\t\t\t\tlabelKey=\"month\"\r\n\t\t\t\t\t\t\t\tindicator=\"dot\"\r\n\t\t\t\t\t\t\t\thideLabel\r\n\t\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\r\n\t\t\t\t</ChartContainer>\r\n\t\t\t</CardContent>\r\n\t\t\t<CardFooter>\r\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\r\n\t\t\t\t\t<div class=\"grid gap-2\">\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\r\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\r\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\r\n\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\r\n\t\t\t\t\t\t\tJanuary - June 2024\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CardFooter>\r\n\t\t</Card>\r\n\t);\r\n};\r\n\r\nexport default AreaChartLinear;\r\n"
+				content: "import { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\"\nimport { CurveType, Position } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nconst AreaChartLinear = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 310]}\n        >\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            opacity={0.4}\n            curveType={CurveType.Linear}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            curveType={CurveType.Linear}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <ChartCrosshair<DataRecord>\n            color=\"var(--color-desktop)\"\n            template={(props) => (\n              <ChartTooltipContent\n                labelKey=\"month\"\n                indicator=\"dot\"\n                hideLabel\n                {...props}\n              />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default AreaChartLinear\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart-linear"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart-linear.tsx",
@@ -1669,7 +1669,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart-step.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\r\n\tCard,\r\n\tCardContent,\r\n\tCardDescription,\r\n\tCardFooter,\r\n\tCardHeader,\r\n\tCardTitle,\r\n} from \"@/components/ui/card\";\r\nimport {\r\n\ttype ChartConfig,\r\n\tChartContainer,\r\n\tChartCrosshair,\r\n\tChartTooltipContent,\r\n} from \"@/components/ui/chart\";\r\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\r\nimport { CurveType, Position } from \"@unovis/ts\";\r\n\r\ntype DataRecord = {\r\n\tmonth: string;\r\n\tdesktop: number;\r\n};\r\n\r\nconst data: DataRecord[] = [\r\n\t{ month: \"January\", desktop: 186 },\r\n\t{ month: \"February\", desktop: 305 },\r\n\t{ month: \"March\", desktop: 237 },\r\n\t{ month: \"April\", desktop: 73 },\r\n\t{ month: \"May\", desktop: 209 },\r\n\t{ month: \"June\", desktop: 214 },\r\n];\r\n\r\nconst chartConfig = {\r\n\tdesktop: {\r\n\t\tlabel: \"Desktop\",\r\n\t\tcolor: \"hsl(var(--chart-1))\",\r\n\t\ticon: (\r\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n\t\t\t\t<path\r\n\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\td=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"\r\n\t\t\t\t/>\r\n\t\t\t</svg>\r\n\t\t),\r\n\t},\r\n} satisfies ChartConfig;\r\n\r\nconst AreaChartStep = () => {\r\n\treturn (\r\n\t\t<Card>\r\n\t\t\t<CardHeader>\r\n\t\t\t\t<CardTitle>Area Chart - Step</CardTitle>\r\n\t\t\t\t<CardDescription>\r\n\t\t\t\t\tShowing total visitors for the last 6 months\r\n\t\t\t\t</CardDescription>\r\n\t\t\t</CardHeader>\r\n\t\t\t<CardContent class=\"h-[300px]\">\r\n\t\t\t\t<ChartContainer\r\n\t\t\t\t\tconfig={chartConfig}\r\n\t\t\t\t\ttype=\"xy\"\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tyDomain={[0, 310]}\r\n\t\t\t\t>\r\n\t\t\t\t\t<VisArea<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={(d) => d.desktop}\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\topacity={0.4}\r\n\t\t\t\t\t\tcurveType={CurveType.Step}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisLine<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={(d) => d.desktop}\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\tcurveType={CurveType.Step}\r\n\t\t\t\t\t\tlineWidth={1}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisAxis<DataRecord>\r\n\t\t\t\t\t\ttype=\"x\"\r\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\r\n\t\t\t\t\t\tgridLine={false}\r\n\t\t\t\t\t\ttickLine={false}\r\n\t\t\t\t\t\tdomainLine={false}\r\n\t\t\t\t\t\tnumTicks={data.length}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<ChartCrosshair<DataRecord>\r\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\r\n\t\t\t\t\t\ttemplate={(props) => (\r\n\t\t\t\t\t\t\t<ChartTooltipContent labelKey=\"month\" hideLabel {...props} />\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\r\n\t\t\t\t</ChartContainer>\r\n\t\t\t</CardContent>\r\n\t\t\t<CardFooter>\r\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\r\n\t\t\t\t\t<div class=\"grid gap-2\">\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\r\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\r\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\r\n\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\r\n\t\t\t\t\t\t\tJanuary - June 2024\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CardFooter>\r\n\t\t</Card>\r\n\t);\r\n};\r\n\r\nexport default AreaChartStep;\r\n"
+				content: "import { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\"\nimport { CurveType, Position } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"\n        />\n      </svg>\n    ),\n  },\n} satisfies ChartConfig\n\nconst AreaChartStep = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 310]}\n        >\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            opacity={0.4}\n            curveType={CurveType.Step}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            curveType={CurveType.Step}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <ChartCrosshair<DataRecord>\n            color=\"var(--color-desktop)\"\n            template={(props) => (\n              <ChartTooltipContent labelKey=\"month\" hideLabel {...props} />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default AreaChartStep\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart-step"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart-step.tsx",
@@ -1685,7 +1685,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart-stacked.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\r\n\tCard,\r\n\tCardContent,\r\n\tCardDescription,\r\n\tCardFooter,\r\n\tCardHeader,\r\n\tCardTitle,\r\n} from \"@/components/ui/card\";\r\nimport {\r\n\ttype ChartConfig,\r\n\tChartContainer,\r\n\tChartCrosshair,\r\n\tChartTooltipContent,\r\n} from \"@/components/ui/chart\";\r\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\r\nimport { CurveType, Position } from \"@unovis/ts\";\r\n\r\ntype DataRecord = {\r\n\tmonth: string;\r\n\tdesktop: number;\r\n\tmobile: number;\r\n};\r\n\r\nconst data: DataRecord[] = [\r\n\t{ month: \"January\", desktop: 186, mobile: 80 },\r\n\t{ month: \"February\", desktop: 305, mobile: 200 },\r\n\t{ month: \"March\", desktop: 237, mobile: 120 },\r\n\t{ month: \"April\", desktop: 73, mobile: 190 },\r\n\t{ month: \"May\", desktop: 209, mobile: 130 },\r\n\t{ month: \"June\", desktop: 214, mobile: 140 },\r\n];\r\n\r\nconst chartConfig = {\r\n\tdesktop: {\r\n\t\tlabel: \"Desktop\",\r\n\t\tcolor: \"hsl(var(--chart-1))\",\r\n\t},\r\n\tmobile: {\r\n\t\tlabel: \"Mobile\",\r\n\t\tcolor: \"hsl(var(--chart-2))\",\r\n\t},\r\n} satisfies ChartConfig;\r\n\r\nconst AreaChartStacked = () => {\r\n\treturn (\r\n\t\t<Card>\r\n\t\t\t<CardHeader>\r\n\t\t\t\t<CardTitle>Area Chart - Stacked</CardTitle>\r\n\t\t\t\t<CardDescription>\r\n\t\t\t\t\tShowing total visitors for the last 6 months\r\n\t\t\t\t</CardDescription>\r\n\t\t\t</CardHeader>\r\n\t\t\t<CardContent class=\"h-[300px]\">\r\n\t\t\t\t<ChartContainer\r\n\t\t\t\t\tconfig={chartConfig}\r\n\t\t\t\t\ttype=\"xy\"\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tyDomain={[0, 620]}\r\n\t\t\t\t>\r\n\t\t\t\t\t<VisArea<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\topacity={0.4}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisLine<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t\tlineWidth={1}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisAxis<DataRecord>\r\n\t\t\t\t\t\ttype=\"x\"\r\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\r\n\t\t\t\t\t\tgridLine={false}\r\n\t\t\t\t\t\ttickLine={false}\r\n\t\t\t\t\t\tdomainLine={false}\r\n\t\t\t\t\t\tnumTicks={data.length}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<ChartCrosshair<DataRecord>\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\ttemplate={(props) => (\r\n\t\t\t\t\t\t\t<ChartTooltipContent labelKey=\"month\" {...props} />\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\r\n\t\t\t\t</ChartContainer>\r\n\t\t\t</CardContent>\r\n\t\t\t<CardFooter>\r\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\r\n\t\t\t\t\t<div class=\"grid gap-2\">\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\r\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\r\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\r\n\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\r\n\t\t\t\t\t\t\tJanuary - June 2024\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CardFooter>\r\n\t\t</Card>\r\n\t);\r\n};\r\n\r\nexport default AreaChartStacked;\r\n"
+				content: "import { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\"\nimport { CurveType, Position } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n  mobile: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nconst AreaChartStacked = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 620]}\n        >\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            opacity={0.4}\n            curveType={CurveType.Natural}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            curveType={CurveType.Natural}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <ChartCrosshair<DataRecord>\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            template={(props) => (\n              <ChartTooltipContent labelKey=\"month\" {...props} />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default AreaChartStacked\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart-stacked"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart-stacked.tsx",
@@ -1701,7 +1701,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart-legend.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\r\n\tCard,\r\n\tCardContent,\r\n\tCardDescription,\r\n\tCardFooter,\r\n\tCardHeader,\r\n\tCardTitle,\r\n} from \"@/components/ui/card\";\r\nimport {\r\n\ttype ChartConfig,\r\n\tChartContainer,\r\n\tChartCrosshair,\r\n\tChartTooltipContent,\r\n} from \"@/components/ui/chart\";\r\nimport {\r\n\tVisArea,\r\n\tVisAxis,\r\n\tVisBulletLegend,\r\n\tVisLine,\r\n\tVisTooltip,\r\n} from \"@unovis/solid\";\r\nimport {\r\n\ttype BulletLegendItemInterface,\r\n\tCurveType,\r\n\tPosition,\r\n} from \"@unovis/ts\";\r\n\r\ntype DataRecord = {\r\n\tmonth: string;\r\n\tdesktop: number;\r\n\tmobile: number;\r\n};\r\n\r\nconst data: DataRecord[] = [\r\n\t{ month: \"January\", desktop: 186, mobile: 80 },\r\n\t{ month: \"February\", desktop: 305, mobile: 200 },\r\n\t{ month: \"March\", desktop: 237, mobile: 120 },\r\n\t{ month: \"April\", desktop: 73, mobile: 190 },\r\n\t{ month: \"May\", desktop: 209, mobile: 130 },\r\n\t{ month: \"June\", desktop: 214, mobile: 140 },\r\n];\r\n\r\nconst chartConfig = {\r\n\tdesktop: {\r\n\t\tlabel: \"Desktop\",\r\n\t\tcolor: \"hsl(var(--chart-1))\",\r\n\t},\r\n\tmobile: {\r\n\t\tlabel: \"Mobile\",\r\n\t\tcolor: \"hsl(var(--chart-2))\",\r\n\t},\r\n} satisfies ChartConfig;\r\n\r\nconst AreaChartLegend = () => {\r\n\tconst items = (): BulletLegendItemInterface[] => {\r\n\t\treturn Object.entries(chartConfig).map(([_, config]) => ({\r\n\t\t\tname: config.label,\r\n\t\t\tcolor: config.color,\r\n\t\t}));\r\n\t};\r\n\r\n\treturn (\r\n\t\t<Card>\r\n\t\t\t<CardHeader>\r\n\t\t\t\t<CardTitle>Area Chart - Legend</CardTitle>\r\n\t\t\t\t<CardDescription>\r\n\t\t\t\t\tShowing total visitors for the last 6 months\r\n\t\t\t\t</CardDescription>\r\n\t\t\t</CardHeader>\r\n\t\t\t<CardContent class=\"h-[300px]\">\r\n\t\t\t\t<ChartContainer\r\n\t\t\t\t\tconfig={chartConfig}\r\n\t\t\t\t\ttype=\"xy\"\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tyDomain={[0, 620]}\r\n\t\t\t\t>\r\n\t\t\t\t\t<VisArea<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\topacity={0.4}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisLine<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t\tlineWidth={1}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisAxis<DataRecord>\r\n\t\t\t\t\t\ttype=\"x\"\r\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\r\n\t\t\t\t\t\tgridLine={false}\r\n\t\t\t\t\t\ttickLine={false}\r\n\t\t\t\t\t\tdomainLine={false}\r\n\t\t\t\t\t\tnumTicks={data.length}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<ChartCrosshair<DataRecord>\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\ttemplate={(props) => (\r\n\t\t\t\t\t\t\t<ChartTooltipContent\r\n\t\t\t\t\t\t\t\tlabelKey=\"month\"\r\n\t\t\t\t\t\t\t\tindicator=\"line\"\r\n\t\t\t\t\t\t\t\t{...props}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\r\n\t\t\t\t</ChartContainer>\r\n\t\t\t\t<div class=\"flex items-center justify-center gap-4 pt-3\">\r\n\t\t\t\t\t<VisBulletLegend items={items()} />\r\n\t\t\t\t</div>\r\n\t\t\t</CardContent>\r\n\t\t\t<CardFooter>\r\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\r\n\t\t\t\t\t<div class=\"grid gap-2\">\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\r\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\r\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\r\n\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\r\n\t\t\t\t\t\t\tJanuary - June 2024\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CardFooter>\r\n\t\t</Card>\r\n\t);\r\n};\r\n\r\nexport default AreaChartLegend;\r\n"
+				content: "import {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisLine,\n  VisTooltip,\n} from \"@unovis/solid\"\nimport { CurveType, Position, type BulletLegendItemInterface } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n  mobile: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nconst AreaChartLegend = () => {\n  const items = (): BulletLegendItemInterface[] => {\n    return Object.entries(chartConfig).map(([_, config]) => ({\n      name: config.label,\n      color: config.color,\n    }))\n  }\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 620]}\n        >\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            opacity={0.4}\n            curveType={CurveType.Natural}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            curveType={CurveType.Natural}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <ChartCrosshair<DataRecord>\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            template={(props) => (\n              <ChartTooltipContent\n                labelKey=\"month\"\n                indicator=\"line\"\n                {...props}\n              />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n        <div class=\"flex items-center justify-center gap-4 pt-3\">\n          <VisBulletLegend items={items()} />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default AreaChartLegend\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart-legend"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart-legend.tsx",
@@ -1717,7 +1717,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart-gradient.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\r\n\tCard,\r\n\tCardContent,\r\n\tCardDescription,\r\n\tCardFooter,\r\n\tCardHeader,\r\n\tCardTitle,\r\n} from \"@/components/ui/card\";\r\nimport {\r\n\ttype ChartConfig,\r\n\tChartContainer,\r\n\tChartCrosshair,\r\n\tChartTooltipContent,\r\n} from \"@/components/ui/chart\";\r\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\r\nimport { Area, CurveType, Position } from \"@unovis/ts\";\r\n\r\ntype DataRecord = {\r\n\tmonth: string;\r\n\tdesktop: number;\r\n\tmobile: number;\r\n};\r\n\r\nconst data: DataRecord[] = [\r\n\t{ month: \"January\", desktop: 186, mobile: 80 },\r\n\t{ month: \"February\", desktop: 305, mobile: 200 },\r\n\t{ month: \"March\", desktop: 237, mobile: 120 },\r\n\t{ month: \"April\", desktop: 73, mobile: 190 },\r\n\t{ month: \"May\", desktop: 209, mobile: 130 },\r\n\t{ month: \"June\", desktop: 214, mobile: 140 },\r\n];\r\n\r\nconst chartConfig = {\r\n\tdesktop: {\r\n\t\tlabel: \"Desktop\",\r\n\t\tcolor: \"hsl(var(--chart-1))\",\r\n\t},\r\n\tmobile: {\r\n\t\tlabel: \"Mobile\",\r\n\t\tcolor: \"hsl(var(--chart-2))\",\r\n\t},\r\n} satisfies ChartConfig;\r\n\r\nconst AreaChartGradient = () => {\r\n\treturn (\r\n\t\t<Card>\r\n\t\t\t<CardHeader>\r\n\t\t\t\t<CardTitle>Area Chart - Gradient</CardTitle>\r\n\t\t\t\t<CardDescription>\r\n\t\t\t\t\tShowing total visitors for the last 6 months\r\n\t\t\t\t</CardDescription>\r\n\t\t\t</CardHeader>\r\n\t\t\t<CardContent class=\"h-[300px]\">\r\n\t\t\t\t<ChartContainer\r\n\t\t\t\t\tconfig={chartConfig}\r\n\t\t\t\t\ttype=\"xy\"\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tyDomain={[0, 620]}\r\n\t\t\t\t>\r\n\t\t\t\t\t<svg height={0} width={0}>\r\n\t\t\t\t\t\t<defs>\r\n\t\t\t\t\t\t\t<linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n\t\t\t\t\t\t\t\t<stop\r\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\r\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\r\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<stop\r\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\r\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\r\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</linearGradient>\r\n\t\t\t\t\t\t\t<linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n\t\t\t\t\t\t\t\t<stop\r\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\r\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\r\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<stop\r\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\r\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\r\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</linearGradient>\r\n\t\t\t\t\t\t</defs>\r\n\t\t\t\t\t</svg>\r\n\t\t\t\t\t<VisArea<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\r\n\t\t\t\t\t\tcolor=\"auto\"\r\n\t\t\t\t\t\topacity={0.4}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t\tattributes={{\r\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(1)`]: {\r\n\t\t\t\t\t\t\t\tfill: \"url(#fillDesktop)\",\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(2)`]: {\r\n\t\t\t\t\t\t\t\tfill: \"url(#fillMobile)\",\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisLine<DataRecord>\r\n\t\t\t\t\t\tx={(_, i) => i}\r\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\tcurveType={CurveType.Natural}\r\n\t\t\t\t\t\tlineWidth={1}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisAxis<DataRecord>\r\n\t\t\t\t\t\ttype=\"x\"\r\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\r\n\t\t\t\t\t\tgridLine={false}\r\n\t\t\t\t\t\ttickLine={false}\r\n\t\t\t\t\t\tdomainLine={false}\r\n\t\t\t\t\t\tnumTicks={data.length}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<ChartCrosshair<DataRecord>\r\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\r\n\t\t\t\t\t\ttemplate={(props) => (\r\n\t\t\t\t\t\t\t<ChartTooltipContent labelKey=\"month\" {...props} />\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\r\n\t\t\t\t</ChartContainer>\r\n\t\t\t</CardContent>\r\n\t\t\t<CardFooter>\r\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\r\n\t\t\t\t\t<div class=\"grid gap-2\">\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\r\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\tclass=\"size-4\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<g\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\r\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\r\n\t\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\r\n\t\t\t\t\t\t\tJanuary - June 2024\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CardFooter>\r\n\t\t</Card>\r\n\t);\r\n};\r\n\r\nexport default AreaChartGradient;\r\n"
+				content: "import { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\"\nimport { Area, CurveType, Position } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n  mobile: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nconst AreaChartGradient = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 620]}\n        >\n          <svg height={0} width={0}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stop-color=\"var(--color-desktop)\"\n                  stop-opacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stop-color=\"var(--color-desktop)\"\n                  stop-opacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stop-color=\"var(--color-mobile)\"\n                  stop-opacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stop-color=\"var(--color-mobile)\"\n                  stop-opacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n          </svg>\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.desktop]}\n            color=\"auto\"\n            opacity={0.4}\n            curveType={CurveType.Natural}\n            attributes={{\n              [`${Area.selectors.area}:nth-child(1)`]: {\n                fill: \"url(#fillDesktop)\",\n              },\n              [`${Area.selectors.area}:nth-child(2)`]: {\n                fill: \"url(#fillMobile)\",\n              },\n            }}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            curveType={CurveType.Natural}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <ChartCrosshair<DataRecord>\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            template={(props) => (\n              <ChartTooltipContent labelKey=\"month\" {...props} />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default AreaChartGradient\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart-gradient"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart-gradient.tsx",
@@ -1733,7 +1733,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/area-chart-interactive.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import { useIsMobile } from \"@/hooks/use-mobile\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport {\n\tVisArea,\n\tVisAxis,\n\tVisBrush,\n\tVisBulletLegend,\n\tVisLine,\n\tVisTooltip,\n} from \"@unovis/solid\";\nimport {\n\tArea,\n\ttype BulletLegendItemInterface,\n\tCurveType,\n\tPosition,\n} from \"@unovis/ts\";\nimport { batch, createSignal } from \"solid-js\";\n\ntype DataRecord = {\n\tdate: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ date: \"2024-04-01\", desktop: 222, mobile: 150 },\n\t{ date: \"2024-04-02\", desktop: 97, mobile: 180 },\n\t{ date: \"2024-04-03\", desktop: 167, mobile: 120 },\n\t{ date: \"2024-04-04\", desktop: 242, mobile: 260 },\n\t{ date: \"2024-04-05\", desktop: 373, mobile: 290 },\n\t{ date: \"2024-04-06\", desktop: 301, mobile: 340 },\n\t{ date: \"2024-04-07\", desktop: 245, mobile: 180 },\n\t{ date: \"2024-04-08\", desktop: 409, mobile: 320 },\n\t{ date: \"2024-04-09\", desktop: 59, mobile: 110 },\n\t{ date: \"2024-04-10\", desktop: 261, mobile: 190 },\n\t{ date: \"2024-04-11\", desktop: 327, mobile: 350 },\n\t{ date: \"2024-04-12\", desktop: 292, mobile: 210 },\n\t{ date: \"2024-04-13\", desktop: 342, mobile: 380 },\n\t{ date: \"2024-04-14\", desktop: 137, mobile: 220 },\n\t{ date: \"2024-04-15\", desktop: 120, mobile: 170 },\n\t{ date: \"2024-04-16\", desktop: 138, mobile: 190 },\n\t{ date: \"2024-04-17\", desktop: 446, mobile: 360 },\n\t{ date: \"2024-04-18\", desktop: 364, mobile: 410 },\n\t{ date: \"2024-04-19\", desktop: 243, mobile: 180 },\n\t{ date: \"2024-04-20\", desktop: 89, mobile: 150 },\n\t{ date: \"2024-04-21\", desktop: 137, mobile: 200 },\n\t{ date: \"2024-04-22\", desktop: 224, mobile: 170 },\n\t{ date: \"2024-04-23\", desktop: 138, mobile: 230 },\n\t{ date: \"2024-04-24\", desktop: 387, mobile: 290 },\n\t{ date: \"2024-04-25\", desktop: 215, mobile: 250 },\n\t{ date: \"2024-04-26\", desktop: 75, mobile: 130 },\n\t{ date: \"2024-04-27\", desktop: 383, mobile: 420 },\n\t{ date: \"2024-04-28\", desktop: 122, mobile: 180 },\n\t{ date: \"2024-04-29\", desktop: 315, mobile: 240 },\n\t{ date: \"2024-04-30\", desktop: 454, mobile: 380 },\n\t{ date: \"2024-05-01\", desktop: 165, mobile: 220 },\n\t{ date: \"2024-05-02\", desktop: 293, mobile: 310 },\n\t{ date: \"2024-05-03\", desktop: 247, mobile: 190 },\n\t{ date: \"2024-05-04\", desktop: 385, mobile: 420 },\n\t{ date: \"2024-05-05\", desktop: 481, mobile: 390 },\n\t{ date: \"2024-05-06\", desktop: 498, mobile: 520 },\n\t{ date: \"2024-05-07\", desktop: 388, mobile: 300 },\n\t{ date: \"2024-05-08\", desktop: 149, mobile: 210 },\n\t{ date: \"2024-05-09\", desktop: 227, mobile: 180 },\n\t{ date: \"2024-05-10\", desktop: 293, mobile: 330 },\n\t{ date: \"2024-05-11\", desktop: 335, mobile: 270 },\n\t{ date: \"2024-05-12\", desktop: 197, mobile: 240 },\n\t{ date: \"2024-05-13\", desktop: 197, mobile: 160 },\n\t{ date: \"2024-05-14\", desktop: 448, mobile: 490 },\n\t{ date: \"2024-05-15\", desktop: 473, mobile: 380 },\n\t{ date: \"2024-05-16\", desktop: 338, mobile: 400 },\n\t{ date: \"2024-05-17\", desktop: 499, mobile: 420 },\n\t{ date: \"2024-05-18\", desktop: 315, mobile: 350 },\n\t{ date: \"2024-05-19\", desktop: 235, mobile: 180 },\n\t{ date: \"2024-05-20\", desktop: 177, mobile: 230 },\n\t{ date: \"2024-05-21\", desktop: 82, mobile: 140 },\n\t{ date: \"2024-05-22\", desktop: 81, mobile: 120 },\n\t{ date: \"2024-05-23\", desktop: 252, mobile: 290 },\n\t{ date: \"2024-05-24\", desktop: 294, mobile: 220 },\n\t{ date: \"2024-05-25\", desktop: 201, mobile: 250 },\n\t{ date: \"2024-05-26\", desktop: 213, mobile: 170 },\n\t{ date: \"2024-05-27\", desktop: 420, mobile: 460 },\n\t{ date: \"2024-05-28\", desktop: 233, mobile: 190 },\n\t{ date: \"2024-05-29\", desktop: 78, mobile: 130 },\n\t{ date: \"2024-05-30\", desktop: 340, mobile: 280 },\n\t{ date: \"2024-05-31\", desktop: 178, mobile: 230 },\n\t{ date: \"2024-06-01\", desktop: 178, mobile: 200 },\n\t{ date: \"2024-06-02\", desktop: 470, mobile: 410 },\n\t{ date: \"2024-06-03\", desktop: 103, mobile: 160 },\n\t{ date: \"2024-06-04\", desktop: 439, mobile: 380 },\n\t{ date: \"2024-06-05\", desktop: 88, mobile: 140 },\n\t{ date: \"2024-06-06\", desktop: 294, mobile: 250 },\n\t{ date: \"2024-06-07\", desktop: 323, mobile: 370 },\n\t{ date: \"2024-06-08\", desktop: 385, mobile: 320 },\n\t{ date: \"2024-06-09\", desktop: 438, mobile: 480 },\n\t{ date: \"2024-06-10\", desktop: 155, mobile: 200 },\n\t{ date: \"2024-06-11\", desktop: 92, mobile: 150 },\n\t{ date: \"2024-06-12\", desktop: 492, mobile: 420 },\n\t{ date: \"2024-06-13\", desktop: 81, mobile: 130 },\n\t{ date: \"2024-06-14\", desktop: 426, mobile: 380 },\n\t{ date: \"2024-06-15\", desktop: 307, mobile: 350 },\n\t{ date: \"2024-06-16\", desktop: 371, mobile: 310 },\n\t{ date: \"2024-06-17\", desktop: 475, mobile: 520 },\n\t{ date: \"2024-06-18\", desktop: 107, mobile: 170 },\n\t{ date: \"2024-06-19\", desktop: 341, mobile: 290 },\n\t{ date: \"2024-06-20\", desktop: 408, mobile: 450 },\n\t{ date: \"2024-06-21\", desktop: 169, mobile: 210 },\n\t{ date: \"2024-06-22\", desktop: 317, mobile: 270 },\n\t{ date: \"2024-06-23\", desktop: 480, mobile: 530 },\n\t{ date: \"2024-06-24\", desktop: 132, mobile: 180 },\n\t{ date: \"2024-06-25\", desktop: 141, mobile: 190 },\n\t{ date: \"2024-06-26\", desktop: 434, mobile: 380 },\n\t{ date: \"2024-06-27\", desktop: 448, mobile: 490 },\n\t{ date: \"2024-06-28\", desktop: 149, mobile: 200 },\n\t{ date: \"2024-06-29\", desktop: 103, mobile: 160 },\n\t{ date: \"2024-06-30\", desktop: 446, mobile: 400 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartInteractive = () => {\n\tconst items = (): BulletLegendItemInterface[] => {\n\t\treturn Object.entries(chartConfig).map(([_, config]) => ({\n\t\t\tname: config.label,\n\t\t\tcolor: config.color,\n\t\t}));\n\t};\n\n\tconst [duration, setDuration] = createSignal<number | undefined>(0);\n\tconst [domain, setDomain] = createSignal<[number, number]>([\n\t\tdata.findIndex((d) => d.date === \"2024-04-30\"),\n\t\tdata.findIndex((d) => d.date === \"2024-06-01\"),\n\t]);\n\n\tconst isMobile = useIsMobile();\n\n\tconst numTicks = () => {\n\t\tif (isMobile()) {\n\t\t\treturn 4;\n\t\t}\n\t\treturn 15;\n\t};\n\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Area Chart - Interactive</CardTitle>\n\t\t\t\t<CardDescription>\n\t\t\t\t\tShowing total visitors for the last 3 months\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 1600]}\n\t\t\t\t\txDomain={domain()}\n\t\t\t\t\tduration={duration()}\n\t\t\t\t\tclass=\"aspect-auto\"\n\t\t\t\t>\n\t\t\t\t\t<svg height={0} width={0}>\n\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t<linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t<linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t</defs>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<VisArea<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor=\"auto\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(1)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillDesktop)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(2)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillMobile)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisLine<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => {\n\t\t\t\t\t\t\tconst date = new Date(data[d as number].date);\n\t\t\t\t\t\t\treturn date.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={Math.min(numTicks(), domain()[1] - domain()[0])}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChartCrosshair<DataRecord>\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\tlabelKey=\"date\"\n\t\t\t\t\t\t\t\tlabelFormatter={(d) => {\n\t\t\t\t\t\t\t\t\tconst date = new Date(data[d as number].date);\n\t\t\t\t\t\t\t\t\treturn date.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t</ChartContainer>\n\t\t\t\t<div class=\"flex items-center justify-center gap-4 pt-3\">\n\t\t\t\t\t<VisBulletLegend items={items()} />\n\t\t\t\t</div>\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\theight={75}\n\t\t\t\t\tpadding={{\n\t\t\t\t\t\ttop: 12,\n\t\t\t\t\t}}\n\t\t\t\t\tclass=\"aspect-auto\"\n\t\t\t\t>\n\t\t\t\t\t<svg height={0} width={0}>\n\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t<linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t<linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t</defs>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<VisArea<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor=\"auto\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(1)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillDesktop)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(2)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillMobile)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisLine<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => {\n\t\t\t\t\t\t\tconst date = new Date(data[d as number].date);\n\t\t\t\t\t\t\treturn date.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={numTicks()}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisBrush\n\t\t\t\t\t\tselection={domain()}\n\t\t\t\t\t\tonBrush={(selection, _, userDriven) => {\n\t\t\t\t\t\t\tif (userDriven)\n\t\t\t\t\t\t\t\tbatch(() => {\n\t\t\t\t\t\t\t\t\tsetDuration(0);\n\t\t\t\t\t\t\t\t\tsetDomain(selection!);\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tdraggable\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n};\n\nexport default AreaChartInteractive;\n"
+				content: "import { batch, createSignal } from \"solid-js\"\nimport {\n  VisArea,\n  VisAxis,\n  VisBrush,\n  VisBulletLegend,\n  VisLine,\n  VisTooltip,\n} from \"@unovis/solid\"\nimport {\n  Area,\n  CurveType,\n  Position,\n  type BulletLegendItemInterface,\n} from \"@unovis/ts\"\n\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  date: string\n  desktop: number\n  mobile: number\n}\n\nconst data: DataRecord[] = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nconst AreaChartInteractive = () => {\n  const items = (): BulletLegendItemInterface[] => {\n    return Object.entries(chartConfig).map(([_, config]) => ({\n      name: config.label,\n      color: config.color,\n    }))\n  }\n\n  const [duration, setDuration] = createSignal<number | undefined>(0)\n  const [domain, setDomain] = createSignal<[number, number]>([\n    data.findIndex((d) => d.date === \"2024-04-30\"),\n    data.findIndex((d) => d.date === \"2024-06-01\"),\n  ])\n\n  const isMobile = useIsMobile()\n\n  const numTicks = () => {\n    if (isMobile()) {\n      return 4\n    }\n    return 15\n  }\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Interactive</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 3 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 1600]}\n          xDomain={domain()}\n          duration={duration()}\n          class=\"aspect-auto\"\n        >\n          <svg height={0} width={0}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stop-color=\"var(--color-desktop)\"\n                  stop-opacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stop-color=\"var(--color-desktop)\"\n                  stop-opacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stop-color=\"var(--color-mobile)\"\n                  stop-opacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stop-color=\"var(--color-mobile)\"\n                  stop-opacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n          </svg>\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.desktop]}\n            color=\"auto\"\n            opacity={0.4}\n            curveType={CurveType.Natural}\n            attributes={{\n              [`${Area.selectors.area}:nth-child(1)`]: {\n                fill: \"url(#fillDesktop)\",\n              },\n              [`${Area.selectors.area}:nth-child(2)`]: {\n                fill: \"url(#fillMobile)\",\n              },\n            }}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            curveType={CurveType.Natural}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => {\n              const date = new Date(data[d as number].date)\n              return date.toLocaleDateString(\"en-US\", {\n                month: \"short\",\n                day: \"numeric\",\n              })\n            }}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={Math.min(numTicks(), domain()[1] - domain()[0])}\n          />\n          <ChartCrosshair<DataRecord>\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            template={(props) => (\n              <ChartTooltipContent\n                labelKey=\"date\"\n                labelFormatter={(d) => {\n                  const date = new Date(data[d as number].date)\n                  return date.toLocaleDateString(\"en-US\", {\n                    month: \"short\",\n                    day: \"numeric\",\n                  })\n                }}\n                {...props}\n              />\n            )}\n          />\n          <VisTooltip horizontalPlacement={Position.Center} />\n        </ChartContainer>\n        <div class=\"flex items-center justify-center gap-4 pt-3\">\n          <VisBulletLegend items={items()} />\n        </div>\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          height={75}\n          padding={{\n            top: 12,\n          }}\n          class=\"aspect-auto\"\n        >\n          <svg height={0} width={0}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stop-color=\"var(--color-desktop)\"\n                  stop-opacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stop-color=\"var(--color-desktop)\"\n                  stop-opacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stop-color=\"var(--color-mobile)\"\n                  stop-opacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stop-color=\"var(--color-mobile)\"\n                  stop-opacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n          </svg>\n          <VisArea<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.desktop]}\n            color=\"auto\"\n            opacity={0.4}\n            curveType={CurveType.Natural}\n            attributes={{\n              [`${Area.selectors.area}:nth-child(1)`]: {\n                fill: \"url(#fillDesktop)\",\n              },\n              [`${Area.selectors.area}:nth-child(2)`]: {\n                fill: \"url(#fillMobile)\",\n              },\n            }}\n          />\n          <VisLine<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n            color={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n            curveType={CurveType.Natural}\n            lineWidth={1}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => {\n              const date = new Date(data[d as number].date)\n              return date.toLocaleDateString(\"en-US\", {\n                month: \"short\",\n                day: \"numeric\",\n              })\n            }}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={numTicks()}\n          />\n          <VisBrush\n            selection={domain()}\n            onBrush={(selection, _, userDriven) => {\n              if (userDriven)\n                batch(() => {\n                  setDuration(0)\n                  setDomain(selection!)\n                })\n            }}\n            draggable\n          />\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default AreaChartInteractive\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/area-chart-interactive"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/area-chart-interactive.tsx",
@@ -1749,7 +1749,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/bar-chart.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\";\nimport { StackedBar } from \"@unovis/ts\";\nimport { render } from \"solid-js/web\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186 },\n\t{ month: \"February\", desktop: 305 },\n\t{ month: \"March\", desktop: 237 },\n\t{ month: \"April\", desktop: 73 },\n\t{ month: \"May\", desktop: 209 },\n\t{ month: \"June\", desktop: 214 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n} satisfies ChartConfig;\n\nconst BarChart = () => {\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Bar Chart</CardTitle>\n\t\t\t\t<CardDescription>January - June 2024</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent class=\"h-[300px]\">\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 310]}\n\t\t\t\t>\n\t\t\t\t\t<VisStackedBar<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\troundedCorners={8}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip\n\t\t\t\t\t\ttriggers={{\n\t\t\t\t\t\t\t[StackedBar.selectors.bar]: (d: DataRecord, x) => {\n\t\t\t\t\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\t\t\t\t\tconst Component = () => (\n\t\t\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\t\t\tdata={d}\n\t\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\t\t\thideLabel\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\trender(() => <Component />, container);\n\t\t\t\t\t\t\t\treturn container.innerHTML;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n\nexport default BarChart;\n"
+				content: "import { render } from \"solid-js/web\"\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\"\nimport { StackedBar } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nconst BarChart = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 310]}\n        >\n          <VisStackedBar<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            roundedCorners={8}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <VisTooltip\n            triggers={{\n              [StackedBar.selectors.bar]: (d: DataRecord, x) => {\n                const container = document.createElement(\"div\")\n                const Component = () => (\n                  <ChartTooltipContent\n                    data={d}\n                    x={x}\n                    config={chartConfig}\n                    labelKey=\"month\"\n                    hideLabel\n                  />\n                )\n                render(() => <Component />, container)\n                return container.innerHTML\n              },\n            }}\n          />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default BarChart\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/bar-chart"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/bar-chart.tsx",
@@ -1765,7 +1765,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/bar-chart-horizontal.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\";\nimport { Direction, Orientation, StackedBar } from \"@unovis/ts\";\nimport { render } from \"solid-js/web\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186 },\n\t{ month: \"February\", desktop: 305 },\n\t{ month: \"March\", desktop: 237 },\n\t{ month: \"April\", desktop: 73 },\n\t{ month: \"May\", desktop: 209 },\n\t{ month: \"June\", desktop: 214 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n} satisfies ChartConfig;\n\nconst BarChartHorizontal = () => {\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Bar Chart- Horizontal</CardTitle>\n\t\t\t\t<CardDescription>January - June 2024</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent class=\"h-[300px]\">\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDirection={Direction.South}\n\t\t\t\t>\n\t\t\t\t\t<VisStackedBar<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\troundedCorners={5}\n\t\t\t\t\t\torientation={Orientation.Horizontal}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"y\"\n\t\t\t\t\t\ttickFormat={(_, i) => data[i].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip\n\t\t\t\t\t\ttriggers={{\n\t\t\t\t\t\t\t[StackedBar.selectors.bar]: (d: DataRecord, x) => {\n\t\t\t\t\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\t\t\t\t\tconst Component = () => (\n\t\t\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\t\t\tdata={d}\n\t\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\t\t\thideLabel\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\trender(() => <Component />, container);\n\t\t\t\t\t\t\t\treturn container.innerHTML;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n\nexport default BarChartHorizontal;\n"
+				content: "import { render } from \"solid-js/web\"\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\"\nimport { Direction, Orientation, StackedBar } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nconst BarChartHorizontal = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart- Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDirection={Direction.South}\n        >\n          <VisStackedBar<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.desktop}\n            color=\"var(--color-desktop)\"\n            roundedCorners={5}\n            orientation={Orientation.Horizontal}\n          />\n          <VisAxis<DataRecord>\n            type=\"y\"\n            tickFormat={(_, i) => data[i].month}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <VisTooltip\n            triggers={{\n              [StackedBar.selectors.bar]: (d: DataRecord, x) => {\n                const container = document.createElement(\"div\")\n                const Component = () => (\n                  <ChartTooltipContent\n                    data={d}\n                    x={x}\n                    config={chartConfig}\n                    labelKey=\"month\"\n                    hideLabel\n                  />\n                )\n                render(() => <Component />, container)\n                return container.innerHTML\n              },\n            }}\n          />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default BarChartHorizontal\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/bar-chart-horizontal"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/bar-chart-horizontal.tsx",
@@ -1781,7 +1781,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/bar-chart-multiply.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisAxis, VisGroupedBar, VisTooltip } from \"@unovis/solid\";\nimport { GroupedBar } from \"@unovis/ts\";\nimport { render } from \"solid-js/web\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186, mobile: 80 },\n\t{ month: \"February\", desktop: 305, mobile: 200 },\n\t{ month: \"March\", desktop: 237, mobile: 120 },\n\t{ month: \"April\", desktop: 73, mobile: 190 },\n\t{ month: \"May\", desktop: 209, mobile: 130 },\n\t{ month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst BarChartMultiply = () => {\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Bar Chart - Multiply</CardTitle>\n\t\t\t\t<CardDescription>January - June 2024</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent class=\"h-[300px]\">\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 310]}\n\t\t\t\t>\n\t\t\t\t\t<VisGroupedBar<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.desktop, (d) => d.mobile]}\n\t\t\t\t\t\tcolor={[\"var(--color-desktop)\", \"var(--color-mobile)\"]}\n\t\t\t\t\t\troundedCorners={4}\n\t\t\t\t\t\tbarPadding={0.2}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip\n\t\t\t\t\t\ttriggers={{\n\t\t\t\t\t\t\t[GroupedBar.selectors.bar]: (d: DataRecord, x) => {\n\t\t\t\t\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\t\t\t\t\tconst Component = () => (\n\t\t\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\t\t\tdata={d}\n\t\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\t\t\tindicator=\"dashed\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\trender(() => <Component />, container);\n\t\t\t\t\t\t\t\treturn container.innerHTML;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n\nexport default BarChartMultiply;\n"
+				content: "import { render } from \"solid-js/web\"\nimport { VisAxis, VisGroupedBar, VisTooltip } from \"@unovis/solid\"\nimport { GroupedBar } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n  mobile: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nconst BarChartMultiply = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiply</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 310]}\n        >\n          <VisGroupedBar<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.desktop, (d) => d.mobile]}\n            color={[\"var(--color-desktop)\", \"var(--color-mobile)\"]}\n            roundedCorners={4}\n            barPadding={0.2}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <VisTooltip\n            triggers={{\n              [GroupedBar.selectors.bar]: (d: DataRecord, x) => {\n                const container = document.createElement(\"div\")\n                const Component = () => (\n                  <ChartTooltipContent\n                    data={d}\n                    x={x}\n                    config={chartConfig}\n                    labelKey=\"month\"\n                    indicator=\"dashed\"\n                  />\n                )\n                render(() => <Component />, container)\n                return container.innerHTML\n              },\n            }}\n          />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default BarChartMultiply\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/bar-chart-multiply"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/bar-chart-multiply.tsx",
@@ -1797,7 +1797,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/bar-chart-stacked.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport {\n\tVisAxis,\n\tVisBulletLegend,\n\tVisStackedBar,\n\tVisTooltip,\n} from \"@unovis/solid\";\nimport { type BulletLegendItemInterface, StackedBar } from \"@unovis/ts\";\nimport { render } from \"solid-js/web\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186, mobile: 80 },\n\t{ month: \"February\", desktop: 305, mobile: 200 },\n\t{ month: \"March\", desktop: 237, mobile: 120 },\n\t{ month: \"April\", desktop: 73, mobile: 190 },\n\t{ month: \"May\", desktop: 209, mobile: 130 },\n\t{ month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst BarChartStacked = () => {\n\tconst items = (): BulletLegendItemInterface[] => {\n\t\treturn Object.entries(chartConfig).map(([_, config]) => ({\n\t\t\tname: config.label,\n\t\t\tcolor: config.color,\n\t\t}));\n\t};\n\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Bar Chart - Stacked</CardTitle>\n\t\t\t\t<CardDescription>January - June 2024</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent class=\"h-[300px]\">\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 620]}\n\t\t\t\t>\n\t\t\t\t\t<VisStackedBar<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.desktop, (d) => d.mobile]}\n\t\t\t\t\t\tcolor={[\"var(--color-desktop)\", \"var(--color-mobile)\"]}\n\t\t\t\t\t\troundedCorners={4}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month.slice(0, 3)}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip\n\t\t\t\t\t\ttriggers={{\n\t\t\t\t\t\t\t[StackedBar.selectors.bar]: (d: DataRecord, x) => {\n\t\t\t\t\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\t\t\t\t\tconst Component = () => (\n\t\t\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\t\t\tdata={d}\n\t\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\trender(() => <Component />, container);\n\t\t\t\t\t\t\t\treturn container.innerHTML;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t\t<div class=\"flex items-center justify-center gap-4 pt-3\">\n\t\t\t\t\t<VisBulletLegend items={items()} />\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n\nexport default BarChartStacked;\n"
+				content: "import { render } from \"solid-js/web\"\nimport {\n  VisAxis,\n  VisBulletLegend,\n  VisStackedBar,\n  VisTooltip,\n} from \"@unovis/solid\"\nimport { StackedBar, type BulletLegendItemInterface } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  month: string\n  desktop: number\n  mobile: number\n}\n\nconst data: DataRecord[] = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nconst BarChartStacked = () => {\n  const items = (): BulletLegendItemInterface[] => {\n    return Object.entries(chartConfig).map(([_, config]) => ({\n      name: config.label,\n      color: config.color,\n    }))\n  }\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 620]}\n        >\n          <VisStackedBar<DataRecord>\n            x={(_, i) => i}\n            y={[(d) => d.desktop, (d) => d.mobile]}\n            color={[\"var(--color-desktop)\", \"var(--color-mobile)\"]}\n            roundedCorners={4}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(d) => data[d as number].month.slice(0, 3)}\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <VisTooltip\n            triggers={{\n              [StackedBar.selectors.bar]: (d: DataRecord, x) => {\n                const container = document.createElement(\"div\")\n                const Component = () => (\n                  <ChartTooltipContent\n                    data={d}\n                    x={x}\n                    config={chartConfig}\n                    labelKey=\"month\"\n                  />\n                )\n                render(() => <Component />, container)\n                return container.innerHTML\n              },\n            }}\n          />\n        </ChartContainer>\n        <div class=\"flex items-center justify-center gap-4 pt-3\">\n          <VisBulletLegend items={items()} />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default BarChartStacked\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/bar-chart-stacked"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/bar-chart-stacked.tsx",
@@ -1813,7 +1813,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/bar-chart-mixed.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\";\nimport { Direction, Orientation, StackedBar } from \"@unovis/ts\";\nimport { render } from \"solid-js/web\";\n\ntype DataRecord = {\n\tbrowser: string;\n\tvisitors: number;\n\tfill: string;\n};\n\nconst data: DataRecord[] = [\n\t{ browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n\t{ browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n\t{ browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n\t{ browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n\t{ browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n];\n\nconst chartConfig = {\n\tvisitors: {\n\t\tlabel: \"Visitors\",\n\t},\n\tchrome: {\n\t\tlabel: \"Chrome\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tsafari: {\n\t\tlabel: \"Safari\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n\tfirefox: {\n\t\tlabel: \"Firefox\",\n\t\tcolor: \"hsl(var(--chart-3))\",\n\t},\n\tedge: {\n\t\tlabel: \"Edge\",\n\t\tcolor: \"hsl(var(--chart-4))\",\n\t},\n\tother: {\n\t\tlabel: \"Other\",\n\t\tcolor: \"hsl(var(--chart-5))\",\n\t},\n} satisfies ChartConfig;\n\nconst BarChartMixed = () => {\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Bar Chart- Mixed</CardTitle>\n\t\t\t\t<CardDescription>January - June 2024</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent class=\"h-[300px]\">\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDirection={Direction.South}\n\t\t\t\t>\n\t\t\t\t\t<VisStackedBar<DataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.visitors}\n\t\t\t\t\t\tcolor={(d) => d.fill}\n\t\t\t\t\t\troundedCorners={5}\n\t\t\t\t\t\torientation={Orientation.Horizontal}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"y\"\n\t\t\t\t\t\ttickFormat={(_, i) =>\n\t\t\t\t\t\t\tchartConfig[data[i].browser as keyof typeof chartConfig].label\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip\n\t\t\t\t\t\ttriggers={{\n\t\t\t\t\t\t\t[StackedBar.selectors.bar]: (d: DataRecord, x) => {\n\t\t\t\t\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\t\t\t\t\tconst Component = () => (\n\t\t\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\t\t\tdata={d}\n\t\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\t\t\t\t\t\tlabelKey=\"browser\"\n\t\t\t\t\t\t\t\t\t\thideLabel\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\trender(() => <Component />, container);\n\t\t\t\t\t\t\t\treturn container.innerHTML;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n\nexport default BarChartMixed;\n"
+				content: "import { render } from \"solid-js/web\"\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\"\nimport { Direction, Orientation, StackedBar } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  browser: string\n  visitors: number\n  fill: string\n}\n\nconst data: DataRecord[] = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nconst BarChartMixed = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart- Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDirection={Direction.South}\n        >\n          <VisStackedBar<DataRecord>\n            x={(_, i) => i}\n            y={(d) => d.visitors}\n            color={(d) => d.fill}\n            roundedCorners={5}\n            orientation={Orientation.Horizontal}\n          />\n          <VisAxis<DataRecord>\n            type=\"y\"\n            tickFormat={(_, i) =>\n              chartConfig[data[i].browser as keyof typeof chartConfig].label\n            }\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <VisTooltip\n            triggers={{\n              [StackedBar.selectors.bar]: (d: DataRecord, x) => {\n                const container = document.createElement(\"div\")\n                const Component = () => (\n                  <ChartTooltipContent\n                    data={d}\n                    x={x}\n                    config={chartConfig}\n                    labelKey=\"browser\"\n                    hideLabel\n                  />\n                )\n                render(() => <Component />, container)\n                return container.innerHTML\n              },\n            }}\n          />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default BarChartMixed\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/bar-chart-mixed"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/bar-chart-mixed.tsx",
@@ -1829,7 +1829,7 @@ export const Index: Record<string, any> = {
 				path: "src/registry/tailwindcss/charts/bar-chart-active.tsx",
 				type: "registry:block",
 				target: "",
-				content: "import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\";\nimport { StackedBar } from \"@unovis/ts\";\nimport { render } from \"solid-js/web\";\n\ntype DataRecord = {\n\tbrowser: string;\n\tvisitors: number;\n\tfill: string;\n};\n\nconst data: DataRecord[] = [\n\t{ browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n\t{ browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n\t{ browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n\t{ browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n\t{ browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n];\n\nconst chartConfig = {\n\tvisitors: {\n\t\tlabel: \"Visitors\",\n\t},\n\tchrome: {\n\t\tlabel: \"Chrome\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tsafari: {\n\t\tlabel: \"Safari\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n\tfirefox: {\n\t\tlabel: \"Firefox\",\n\t\tcolor: \"hsl(var(--chart-3))\",\n\t},\n\tedge: {\n\t\tlabel: \"Edge\",\n\t\tcolor: \"hsl(var(--chart-4))\",\n\t},\n\tother: {\n\t\tlabel: \"Other\",\n\t\tcolor: \"hsl(var(--chart-5))\",\n\t},\n} satisfies ChartConfig;\n\nconst BarChartActive = () => {\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Bar Chart- Active</CardTitle>\n\t\t\t\t<CardDescription>January - June 2024</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent class=\"h-[300px]\">\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 310]}\n\t\t\t\t>\n\t\t\t\t\t<style\n\t\t\t\t\t\tinnerText={`path[data-stacked-bar-active=true] {\n\t\t\t\t\t--vis-stacked-bar-stroke-color: ${data.find((d) => d.browser === \"firefox\")?.fill};\n\t\t\t\t\t--vis-stacked-bar-stroke-width: 2;\n\t\t\t\t\t--vis-stacked-bar-hover-stroke-color: var(--vis-stacked-bar-stroke-color);\n\t\t\t\t\t--vis-stacked-bar-hover-stroke-width: var(--vis-stacked-bar-stroke-width);\n\t\t\t\t\t}`}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisStackedBar<DataRecord>\n\t\t\t\t\t\tid={(d) => `stacked-bar-${d.browser}`}\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.visitors}\n\t\t\t\t\t\tcolor={(d) => d.fill}\n\t\t\t\t\t\troundedCorners={8}\n\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t[StackedBar.selectors.bar]: {\n\t\t\t\t\t\t\t\t\"stroke-width\": 2,\n\t\t\t\t\t\t\t\t\"stroke-dasharray\": 4,\n\t\t\t\t\t\t\t\t\"stroke-dashoffset\": 4,\n\t\t\t\t\t\t\t\t\"fill-opacity\": 0.8,\n\t\t\t\t\t\t\t\t\"data-stacked-bar-active\": (d) => d.browser === \"firefox\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisAxis<DataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(_, i) =>\n\t\t\t\t\t\t\tchartConfig[data[i].browser as keyof typeof chartConfig].label\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t<VisTooltip\n\t\t\t\t\t\ttriggers={{\n\t\t\t\t\t\t\t[StackedBar.selectors.bar]: (d: DataRecord, x) => {\n\t\t\t\t\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\t\t\t\t\tconst Component = () => (\n\t\t\t\t\t\t\t\t\t<ChartTooltipContent\n\t\t\t\t\t\t\t\t\t\tdata={d}\n\t\t\t\t\t\t\t\t\t\tx={x}\n\t\t\t\t\t\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\t\t\t\t\t\tlabelKey=\"browser\"\n\t\t\t\t\t\t\t\t\t\thideLabel\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\trender(() => <Component />, container);\n\t\t\t\t\t\t\t\treturn container.innerHTML;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t<path d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n};\n\nexport default BarChartActive;\n"
+				content: "import { render } from \"solid-js/web\"\nimport { VisAxis, VisStackedBar, VisTooltip } from \"@unovis/solid\"\nimport { StackedBar } from \"@unovis/ts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\ntype DataRecord = {\n  browser: string\n  visitors: number\n  fill: string\n}\n\nconst data: DataRecord[] = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nconst BarChartActive = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart- Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent class=\"h-[300px]\">\n        <ChartContainer\n          config={chartConfig}\n          type=\"xy\"\n          data={data}\n          yDomain={[0, 310]}\n        >\n          <style\n            innerText={`path[data-stacked-bar-active=true] {\n\t\t\t\t\t--vis-stacked-bar-stroke-color: ${data.find((d) => d.browser === \"firefox\")?.fill};\n\t\t\t\t\t--vis-stacked-bar-stroke-width: 2;\n\t\t\t\t\t--vis-stacked-bar-hover-stroke-color: var(--vis-stacked-bar-stroke-color);\n\t\t\t\t\t--vis-stacked-bar-hover-stroke-width: var(--vis-stacked-bar-stroke-width);\n\t\t\t\t\t}`}\n          />\n          <VisStackedBar<DataRecord>\n            id={(d) => `stacked-bar-${d.browser}`}\n            x={(_, i) => i}\n            y={(d) => d.visitors}\n            color={(d) => d.fill}\n            roundedCorners={8}\n            attributes={{\n              [StackedBar.selectors.bar]: {\n                \"stroke-width\": 2,\n                \"stroke-dasharray\": 4,\n                \"stroke-dashoffset\": 4,\n                \"fill-opacity\": 0.8,\n                \"data-stacked-bar-active\": (d) => d.browser === \"firefox\",\n              },\n            }}\n          />\n          <VisAxis<DataRecord>\n            type=\"x\"\n            tickFormat={(_, i) =>\n              chartConfig[data[i].browser as keyof typeof chartConfig].label\n            }\n            gridLine={false}\n            tickLine={false}\n            domainLine={false}\n            numTicks={data.length}\n          />\n          <VisTooltip\n            triggers={{\n              [StackedBar.selectors.bar]: (d: DataRecord, x) => {\n                const container = document.createElement(\"div\")\n                const Component = () => (\n                  <ChartTooltipContent\n                    data={d}\n                    x={x}\n                    config={chartConfig}\n                    labelKey=\"browser\"\n                    hideLabel\n                  />\n                )\n                render(() => <Component />, container)\n                return container.innerHTML\n              },\n            }}\n          />\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div class=\"flex w-full items-start gap-2 text-sm\">\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                viewBox=\"0 0 24 24\"\n              >\n                <g\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n                  <path d=\"M16 7h6v6\" />\n                </g>\n              </svg>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n\nexport default BarChartActive\n"
 			}],
 			component: clientOnly(() => import("@/registry/tailwindcss/charts/bar-chart-active"), { lazy: true }),
 			source: "src/__registry__/tailwindcss/charts/bar-chart-active.tsx",
diff --git a/docs/src/__registry__/tailwindcss/blocks/demo-sidebar.tsx b/docs/src/__registry__/tailwindcss/blocks/demo-sidebar.tsx
index 16bc9d03..aae50268 100644
--- a/docs/src/__registry__/tailwindcss/blocks/demo-sidebar.tsx
+++ b/docs/src/__registry__/tailwindcss/blocks/demo-sidebar.tsx
@@ -1,163 +1,164 @@
-import { For } from "solid-js";
+import { For } from "solid-js"
+
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarInset,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarProvider,
-	SidebarTrigger,
-} from "../ui/sidebar";
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "../ui/sidebar"
 
 const items = [
-	{
-		title: "Home",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
-					<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Inbox",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M22 12h-6l-2 3h-4l-2-3H2" />
-					<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Calendar",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M8 2v4m8-4v4" />
-					<rect width="18" height="18" x="3" y="4" rx="2" />
-					<path d="M3 10h18" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Search",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<circle cx="11" cy="11" r="8" />
-					<path d="m21 21l-4.3-4.3" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Settings",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" />
-					<circle cx="12" cy="12" r="3" />
-				</g>
-			</svg>
-		),
-	},
-];
+  {
+    title: "Home",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+          <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+          <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M8 2v4m8-4v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21l-4.3-4.3" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" />
+          <circle cx="12" cy="12" r="3" />
+        </g>
+      </svg>
+    ),
+  },
+]
 
 const AppSidebar = () => {
-	return (
-		<SidebarProvider>
-			<Sidebar>
-				<SidebarContent>
-					<SidebarGroup>
-						<SidebarGroupLabel>Application</SidebarGroupLabel>
-						<SidebarGroupContent>
-							<SidebarMenu>
-								<For each={items}>
-									{(item) => (
-										<SidebarMenuItem>
-											<SidebarMenuButton as="a" href={item.url}>
-												<item.icon />
-												<span>{item.title}</span>
-											</SidebarMenuButton>
-										</SidebarMenuItem>
-									)}
-								</For>
-							</SidebarMenu>
-						</SidebarGroupContent>
-					</SidebarGroup>
-				</SidebarContent>
-			</Sidebar>
-			<SidebarInset>
-				<header class="flex items-center justify-between px-4 h-12">
-					<SidebarTrigger />
-				</header>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Application</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <For each={items}>
+                  {(item) => (
+                    <SidebarMenuItem>
+                      <SidebarMenuButton as="a" href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  )}
+                </For>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header class="flex h-12 items-center justify-between px-4">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
diff --git a/docs/src/__registry__/tailwindcss/blocks/sidebar-01/index.tsx b/docs/src/__registry__/tailwindcss/blocks/sidebar-01/index.tsx
index 7f4b876a..1be712e2 100644
--- a/docs/src/__registry__/tailwindcss/blocks/sidebar-01/index.tsx
+++ b/docs/src/__registry__/tailwindcss/blocks/sidebar-01/index.tsx
@@ -1,33 +1,33 @@
-import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/registry/tailwindcss/ui/sidebar";
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const Page = () => {
-	return (
-		<SidebarProvider>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-					<div class="flex items-center gap-2 px-4">
-						<SidebarTrigger class="-ml-1" />
-						<Separator orientation="vertical" class="mr-2 h-4" />
-					</div>
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-					</div>
-					<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div class="flex items-center gap-2 px-4">
+            <SidebarTrigger class="-ml-1" />
+            <Separator orientation="vertical" class="mr-2 h-4" />
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/docs/src/__registry__/tailwindcss/blocks/sidebar-02/index.tsx b/docs/src/__registry__/tailwindcss/blocks/sidebar-02/index.tsx
index df20878d..48a46ced 100644
--- a/docs/src/__registry__/tailwindcss/blocks/sidebar-02/index.tsx
+++ b/docs/src/__registry__/tailwindcss/blocks/sidebar-02/index.tsx
@@ -1,33 +1,33 @@
-import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar";
+import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar"
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/registry/tailwindcss/ui/sidebar";
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const Page = () => {
-	return (
-		<SidebarProvider
-			style={{
-				"--sidebar-width": "19rem",
-			}}
-		>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2 px-4">
-					<SidebarTrigger class="-ml-1" />
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-					</div>
-					<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider
+      style={{
+        "--sidebar-width": "19rem",
+      }}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger class="-ml-1" />
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/docs/src/__registry__/tailwindcss/blocks/sidebar-03/index.tsx b/docs/src/__registry__/tailwindcss/blocks/sidebar-03/index.tsx
index aa79c6c4..19d748cd 100644
--- a/docs/src/__registry__/tailwindcss/blocks/sidebar-03/index.tsx
+++ b/docs/src/__registry__/tailwindcss/blocks/sidebar-03/index.tsx
@@ -1,33 +1,33 @@
-import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar";
+import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar"
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarSeparator,
-	SidebarTrigger,
-} from "@/registry/tailwindcss/ui/sidebar";
+  SidebarInset,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const Page = () => {
-	return (
-		<SidebarProvider>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2">
-					<div class="flex items-center gap-2 px-4">
-						<SidebarTrigger class="-ml-1" />
-						<SidebarSeparator orientation="vertical" class="mr-2 h-4" />
-					</div>
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-					</div>
-					<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2">
+          <div class="flex items-center gap-2 px-4">
+            <SidebarTrigger class="-ml-1" />
+            <SidebarSeparator orientation="vertical" class="mr-2 h-4" />
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-gradient.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-gradient.tsx
index 6e8b889d..7e0f6ad5 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart-gradient.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart-gradient.tsx
@@ -1,159 +1,160 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { Area, CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { Area, CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartGradient = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Gradient</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<svg height={0} width={0}>
-						<defs>
-							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-						</defs>
-					</svg>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color="auto"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-						attributes={{
-							[`${Area.selectors.area}:nth-child(1)`]: {
-								fill: "url(#fillDesktop)",
-							},
-							[`${Area.selectors.area}:nth-child(2)`]: {
-								fill: "url(#fillMobile)",
-							},
-						}}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent labelKey="month" {...props} />
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Gradient</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <svg height={0} width={0}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+          </svg>
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color="auto"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+            attributes={{
+              [`${Area.selectors.area}:nth-child(1)`]: {
+                fill: "url(#fillDesktop)",
+              },
+              [`${Area.selectors.area}:nth-child(2)`]: {
+                fill: "url(#fillMobile)",
+              },
+            }}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent labelKey="month" {...props} />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartGradient;
+export default AreaChartGradient
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-interactive.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-interactive.tsx
index a7624f56..ac2599ad 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart-interactive.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart-interactive.tsx
@@ -1,359 +1,360 @@
-import { useIsMobile } from "@/registry/tailwindcss/hooks/use-mobile";
+import { batch, createSignal } from "solid-js"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  VisArea,
+  VisAxis,
+  VisBrush,
+  VisBulletLegend,
+  VisLine,
+  VisTooltip,
+} from "@unovis/solid"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
+  Area,
+  CurveType,
+  Position,
+  type BulletLegendItemInterface,
+} from "@unovis/ts"
+
+import { useIsMobile } from "@/registry/tailwindcss/hooks/use-mobile"
 import {
-	VisArea,
-	VisAxis,
-	VisBrush,
-	VisBulletLegend,
-	VisLine,
-	VisTooltip,
-} from "@unovis/solid";
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Area,
-	type BulletLegendItemInterface,
-	CurveType,
-	Position,
-} from "@unovis/ts";
-import { batch, createSignal } from "solid-js";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	date: string;
-	desktop: number;
-	mobile: number;
-};
+  date: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ date: "2024-04-01", desktop: 222, mobile: 150 },
-	{ date: "2024-04-02", desktop: 97, mobile: 180 },
-	{ date: "2024-04-03", desktop: 167, mobile: 120 },
-	{ date: "2024-04-04", desktop: 242, mobile: 260 },
-	{ date: "2024-04-05", desktop: 373, mobile: 290 },
-	{ date: "2024-04-06", desktop: 301, mobile: 340 },
-	{ date: "2024-04-07", desktop: 245, mobile: 180 },
-	{ date: "2024-04-08", desktop: 409, mobile: 320 },
-	{ date: "2024-04-09", desktop: 59, mobile: 110 },
-	{ date: "2024-04-10", desktop: 261, mobile: 190 },
-	{ date: "2024-04-11", desktop: 327, mobile: 350 },
-	{ date: "2024-04-12", desktop: 292, mobile: 210 },
-	{ date: "2024-04-13", desktop: 342, mobile: 380 },
-	{ date: "2024-04-14", desktop: 137, mobile: 220 },
-	{ date: "2024-04-15", desktop: 120, mobile: 170 },
-	{ date: "2024-04-16", desktop: 138, mobile: 190 },
-	{ date: "2024-04-17", desktop: 446, mobile: 360 },
-	{ date: "2024-04-18", desktop: 364, mobile: 410 },
-	{ date: "2024-04-19", desktop: 243, mobile: 180 },
-	{ date: "2024-04-20", desktop: 89, mobile: 150 },
-	{ date: "2024-04-21", desktop: 137, mobile: 200 },
-	{ date: "2024-04-22", desktop: 224, mobile: 170 },
-	{ date: "2024-04-23", desktop: 138, mobile: 230 },
-	{ date: "2024-04-24", desktop: 387, mobile: 290 },
-	{ date: "2024-04-25", desktop: 215, mobile: 250 },
-	{ date: "2024-04-26", desktop: 75, mobile: 130 },
-	{ date: "2024-04-27", desktop: 383, mobile: 420 },
-	{ date: "2024-04-28", desktop: 122, mobile: 180 },
-	{ date: "2024-04-29", desktop: 315, mobile: 240 },
-	{ date: "2024-04-30", desktop: 454, mobile: 380 },
-	{ date: "2024-05-01", desktop: 165, mobile: 220 },
-	{ date: "2024-05-02", desktop: 293, mobile: 310 },
-	{ date: "2024-05-03", desktop: 247, mobile: 190 },
-	{ date: "2024-05-04", desktop: 385, mobile: 420 },
-	{ date: "2024-05-05", desktop: 481, mobile: 390 },
-	{ date: "2024-05-06", desktop: 498, mobile: 520 },
-	{ date: "2024-05-07", desktop: 388, mobile: 300 },
-	{ date: "2024-05-08", desktop: 149, mobile: 210 },
-	{ date: "2024-05-09", desktop: 227, mobile: 180 },
-	{ date: "2024-05-10", desktop: 293, mobile: 330 },
-	{ date: "2024-05-11", desktop: 335, mobile: 270 },
-	{ date: "2024-05-12", desktop: 197, mobile: 240 },
-	{ date: "2024-05-13", desktop: 197, mobile: 160 },
-	{ date: "2024-05-14", desktop: 448, mobile: 490 },
-	{ date: "2024-05-15", desktop: 473, mobile: 380 },
-	{ date: "2024-05-16", desktop: 338, mobile: 400 },
-	{ date: "2024-05-17", desktop: 499, mobile: 420 },
-	{ date: "2024-05-18", desktop: 315, mobile: 350 },
-	{ date: "2024-05-19", desktop: 235, mobile: 180 },
-	{ date: "2024-05-20", desktop: 177, mobile: 230 },
-	{ date: "2024-05-21", desktop: 82, mobile: 140 },
-	{ date: "2024-05-22", desktop: 81, mobile: 120 },
-	{ date: "2024-05-23", desktop: 252, mobile: 290 },
-	{ date: "2024-05-24", desktop: 294, mobile: 220 },
-	{ date: "2024-05-25", desktop: 201, mobile: 250 },
-	{ date: "2024-05-26", desktop: 213, mobile: 170 },
-	{ date: "2024-05-27", desktop: 420, mobile: 460 },
-	{ date: "2024-05-28", desktop: 233, mobile: 190 },
-	{ date: "2024-05-29", desktop: 78, mobile: 130 },
-	{ date: "2024-05-30", desktop: 340, mobile: 280 },
-	{ date: "2024-05-31", desktop: 178, mobile: 230 },
-	{ date: "2024-06-01", desktop: 178, mobile: 200 },
-	{ date: "2024-06-02", desktop: 470, mobile: 410 },
-	{ date: "2024-06-03", desktop: 103, mobile: 160 },
-	{ date: "2024-06-04", desktop: 439, mobile: 380 },
-	{ date: "2024-06-05", desktop: 88, mobile: 140 },
-	{ date: "2024-06-06", desktop: 294, mobile: 250 },
-	{ date: "2024-06-07", desktop: 323, mobile: 370 },
-	{ date: "2024-06-08", desktop: 385, mobile: 320 },
-	{ date: "2024-06-09", desktop: 438, mobile: 480 },
-	{ date: "2024-06-10", desktop: 155, mobile: 200 },
-	{ date: "2024-06-11", desktop: 92, mobile: 150 },
-	{ date: "2024-06-12", desktop: 492, mobile: 420 },
-	{ date: "2024-06-13", desktop: 81, mobile: 130 },
-	{ date: "2024-06-14", desktop: 426, mobile: 380 },
-	{ date: "2024-06-15", desktop: 307, mobile: 350 },
-	{ date: "2024-06-16", desktop: 371, mobile: 310 },
-	{ date: "2024-06-17", desktop: 475, mobile: 520 },
-	{ date: "2024-06-18", desktop: 107, mobile: 170 },
-	{ date: "2024-06-19", desktop: 341, mobile: 290 },
-	{ date: "2024-06-20", desktop: 408, mobile: 450 },
-	{ date: "2024-06-21", desktop: 169, mobile: 210 },
-	{ date: "2024-06-22", desktop: 317, mobile: 270 },
-	{ date: "2024-06-23", desktop: 480, mobile: 530 },
-	{ date: "2024-06-24", desktop: 132, mobile: 180 },
-	{ date: "2024-06-25", desktop: 141, mobile: 190 },
-	{ date: "2024-06-26", desktop: 434, mobile: 380 },
-	{ date: "2024-06-27", desktop: 448, mobile: 490 },
-	{ date: "2024-06-28", desktop: 149, mobile: 200 },
-	{ date: "2024-06-29", desktop: 103, mobile: 160 },
-	{ date: "2024-06-30", desktop: 446, mobile: 400 },
-];
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartInteractive = () => {
-	const items = (): BulletLegendItemInterface[] => {
-		return Object.entries(chartConfig).map(([_, config]) => ({
-			name: config.label,
-			color: config.color,
-		}));
-	};
+  const items = (): BulletLegendItemInterface[] => {
+    return Object.entries(chartConfig).map(([_, config]) => ({
+      name: config.label,
+      color: config.color,
+    }))
+  }
 
-	const [duration, setDuration] = createSignal<number | undefined>(0);
-	const [domain, setDomain] = createSignal<[number, number]>([
-		data.findIndex((d) => d.date === "2024-04-30"),
-		data.findIndex((d) => d.date === "2024-06-01"),
-	]);
+  const [duration, setDuration] = createSignal<number | undefined>(0)
+  const [domain, setDomain] = createSignal<[number, number]>([
+    data.findIndex((d) => d.date === "2024-04-30"),
+    data.findIndex((d) => d.date === "2024-06-01"),
+  ])
 
-	const isMobile = useIsMobile();
+  const isMobile = useIsMobile()
 
-	const numTicks = () => {
-		if (isMobile()) {
-			return 4;
-		}
-		return 15;
-	};
+  const numTicks = () => {
+    if (isMobile()) {
+      return 4
+    }
+    return 15
+  }
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Interactive</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 3 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 1600]}
-					xDomain={domain()}
-					duration={duration()}
-					class="aspect-auto"
-				>
-					<svg height={0} width={0}>
-						<defs>
-							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-						</defs>
-					</svg>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color="auto"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-						attributes={{
-							[`${Area.selectors.area}:nth-child(1)`]: {
-								fill: "url(#fillDesktop)",
-							},
-							[`${Area.selectors.area}:nth-child(2)`]: {
-								fill: "url(#fillMobile)",
-							},
-						}}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => {
-							const date = new Date(data[d as number].date);
-							return date.toLocaleDateString("en-US", {
-								month: "short",
-								day: "numeric",
-							});
-						}}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={Math.min(numTicks(), domain()[1] - domain()[0])}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="date"
-								labelFormatter={(d) => {
-									const date = new Date(data[d as number].date);
-									return date.toLocaleDateString("en-US", {
-										month: "short",
-										day: "numeric",
-									});
-								}}
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-				<div class="flex items-center justify-center gap-4 pt-3">
-					<VisBulletLegend items={items()} />
-				</div>
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					height={75}
-					padding={{
-						top: 12,
-					}}
-					class="aspect-auto"
-				>
-					<svg height={0} width={0}>
-						<defs>
-							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-						</defs>
-					</svg>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color="auto"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-						attributes={{
-							[`${Area.selectors.area}:nth-child(1)`]: {
-								fill: "url(#fillDesktop)",
-							},
-							[`${Area.selectors.area}:nth-child(2)`]: {
-								fill: "url(#fillMobile)",
-							},
-						}}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => {
-							const date = new Date(data[d as number].date);
-							return date.toLocaleDateString("en-US", {
-								month: "short",
-								day: "numeric",
-							});
-						}}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={numTicks()}
-					/>
-					<VisBrush
-						selection={domain()}
-						onBrush={(selection, _, userDriven) => {
-							if (userDriven)
-								batch(() => {
-									setDuration(0);
-									setDomain(selection!);
-								});
-						}}
-						draggable
-					/>
-				</ChartContainer>
-			</CardContent>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Interactive</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 3 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 1600]}
+          xDomain={domain()}
+          duration={duration()}
+          class="aspect-auto"
+        >
+          <svg height={0} width={0}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+          </svg>
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color="auto"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+            attributes={{
+              [`${Area.selectors.area}:nth-child(1)`]: {
+                fill: "url(#fillDesktop)",
+              },
+              [`${Area.selectors.area}:nth-child(2)`]: {
+                fill: "url(#fillMobile)",
+              },
+            }}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => {
+              const date = new Date(data[d as number].date)
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })
+            }}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={Math.min(numTicks(), domain()[1] - domain()[0])}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="date"
+                labelFormatter={(d) => {
+                  const date = new Date(data[d as number].date)
+                  return date.toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                  })
+                }}
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+        <div class="flex items-center justify-center gap-4 pt-3">
+          <VisBulletLegend items={items()} />
+        </div>
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          height={75}
+          padding={{
+            top: 12,
+          }}
+          class="aspect-auto"
+        >
+          <svg height={0} width={0}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+          </svg>
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color="auto"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+            attributes={{
+              [`${Area.selectors.area}:nth-child(1)`]: {
+                fill: "url(#fillDesktop)",
+              },
+              [`${Area.selectors.area}:nth-child(2)`]: {
+                fill: "url(#fillMobile)",
+              },
+            }}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => {
+              const date = new Date(data[d as number].date)
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })
+            }}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={numTicks()}
+          />
+          <VisBrush
+            selection={domain()}
+            onBrush={(selection, _, userDriven) => {
+              if (userDriven)
+                batch(() => {
+                  setDuration(0)
+                  setDomain(selection!)
+                })
+            }}
+            draggable
+          />
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
 
-export default AreaChartInteractive;
+export default AreaChartInteractive
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-legend.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-legend.tsx
index 3587492f..a201603f 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart-legend.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart-legend.tsx
@@ -1,147 +1,144 @@
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
-import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
+  VisArea,
+  VisAxis,
+  VisBulletLegend,
+  VisLine,
+  VisTooltip,
+} from "@unovis/solid"
+import { CurveType, Position, type BulletLegendItemInterface } from "@unovis/ts"
+
 import {
-	VisArea,
-	VisAxis,
-	VisBulletLegend,
-	VisLine,
-	VisTooltip,
-} from "@unovis/solid";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type BulletLegendItemInterface,
-	CurveType,
-	Position,
-} from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartLegend = () => {
-	const items = (): BulletLegendItemInterface[] => {
-		return Object.entries(chartConfig).map(([_, config]) => ({
-			name: config.label,
-			color: config.color,
-		}));
-	};
+  const items = (): BulletLegendItemInterface[] => {
+    return Object.entries(chartConfig).map(([_, config]) => ({
+      name: config.label,
+      color: config.color,
+    }))
+  }
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Legend</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						opacity={0.4}
-						curveType={CurveType.Natural}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="line"
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-				<div class="flex items-center justify-center gap-4 pt-3">
-					<VisBulletLegend items={items()} />
-				</div>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            opacity={0.4}
+            curveType={CurveType.Natural}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="line"
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+        <div class="flex items-center justify-center gap-4 pt-3">
+          <VisBulletLegend items={items()} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartLegend;
+export default AreaChartLegend
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-linear.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-linear.tsx
index cf9a64d8..b85aa846 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart-linear.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart-linear.tsx
@@ -1,123 +1,124 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const AreaChartLinear = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Linear</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						opacity={0.4}
-						curveType={CurveType.Linear}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						curveType={CurveType.Linear}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="dot"
-								hideLabel
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Linear</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            opacity={0.4}
+            curveType={CurveType.Linear}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            curveType={CurveType.Linear}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="dot"
+                hideLabel
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartLinear;
+export default AreaChartLinear
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-stacked.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-stacked.tsx
index 6c6196b2..3c260255 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart-stacked.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart-stacked.tsx
@@ -1,123 +1,124 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartStacked = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Stacked</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						opacity={0.4}
-						curveType={CurveType.Natural}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent labelKey="month" {...props} />
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            opacity={0.4}
+            curveType={CurveType.Natural}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent labelKey="month" {...props} />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartStacked;
+export default AreaChartStacked
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-step.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-step.tsx
index 8e303ab7..c293eae0 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart-step.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart-step.tsx
@@ -1,130 +1,131 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-		icon: (
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
-				/>
-			</svg>
-		),
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+        />
+      </svg>
+    ),
+  },
+} satisfies ChartConfig
 
 const AreaChartStep = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Step</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						opacity={0.4}
-						curveType={CurveType.Step}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						curveType={CurveType.Step}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent labelKey="month" hideLabel {...props} />
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Step</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            opacity={0.4}
+            curveType={CurveType.Step}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            curveType={CurveType.Step}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent labelKey="month" hideLabel {...props} />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartStep;
+export default AreaChartStep
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart.tsx
index d008af01..1ca10225 100644
--- a/docs/src/__registry__/tailwindcss/charts/area-chart.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/area-chart.tsx
@@ -1,122 +1,123 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const AreaChart = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="line"
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="line"
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChart;
+export default AreaChart
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-active.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-active.tsx
index 421a5857..3baf9bec 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-active.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-active.tsx
@@ -1,158 +1,159 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	browser: string;
-	visitors: number;
-	fill: string;
-};
+  browser: string
+  visitors: number
+  fill: string
+}
 
 const data: DataRecord[] = [
-	{ browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
-	{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-	{ browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
-	{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-	{ browser: "other", visitors: 90, fill: "var(--color-other)" },
-];
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
 
 const chartConfig = {
-	visitors: {
-		label: "Visitors",
-	},
-	chrome: {
-		label: "Chrome",
-		color: "hsl(var(--chart-1))",
-	},
-	safari: {
-		label: "Safari",
-		color: "hsl(var(--chart-2))",
-	},
-	firefox: {
-		label: "Firefox",
-		color: "hsl(var(--chart-3))",
-	},
-	edge: {
-		label: "Edge",
-		color: "hsl(var(--chart-4))",
-	},
-	other: {
-		label: "Other",
-		color: "hsl(var(--chart-5))",
-	},
-} satisfies ChartConfig;
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
 
 const BarChartActive = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart- Active</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<style
-						innerText={`path[data-stacked-bar-active=true] {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart- Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <style
+            innerText={`path[data-stacked-bar-active=true] {
 					--vis-stacked-bar-stroke-color: ${data.find((d) => d.browser === "firefox")?.fill};
 					--vis-stacked-bar-stroke-width: 2;
 					--vis-stacked-bar-hover-stroke-color: var(--vis-stacked-bar-stroke-color);
 					--vis-stacked-bar-hover-stroke-width: var(--vis-stacked-bar-stroke-width);
 					}`}
-					/>
-					<VisStackedBar<DataRecord>
-						id={(d) => `stacked-bar-${d.browser}`}
-						x={(_, i) => i}
-						y={(d) => d.visitors}
-						color={(d) => d.fill}
-						roundedCorners={8}
-						attributes={{
-							[StackedBar.selectors.bar]: {
-								"stroke-width": 2,
-								"stroke-dasharray": 4,
-								"stroke-dashoffset": 4,
-								"fill-opacity": 0.8,
-								"data-stacked-bar-active": (d) => d.browser === "firefox",
-							},
-						}}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(_, i) =>
-							chartConfig[data[i].browser as keyof typeof chartConfig].label
-						}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="browser"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+          />
+          <VisStackedBar<DataRecord>
+            id={(d) => `stacked-bar-${d.browser}`}
+            x={(_, i) => i}
+            y={(d) => d.visitors}
+            color={(d) => d.fill}
+            roundedCorners={8}
+            attributes={{
+              [StackedBar.selectors.bar]: {
+                "stroke-width": 2,
+                "stroke-dasharray": 4,
+                "stroke-dashoffset": 4,
+                "fill-opacity": 0.8,
+                "data-stacked-bar-active": (d) => d.browser === "firefox",
+              },
+            }}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(_, i) =>
+              chartConfig[data[i].browser as keyof typeof chartConfig].label
+            }
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="browser"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartActive;
+export default BarChartActive
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-horizontal.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-horizontal.tsx
index 9ded2b93..0f07b1b8 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-horizontal.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-horizontal.tsx
@@ -1,120 +1,121 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { Direction, Orientation, StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { Direction, Orientation, StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const BarChartHorizontal = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart- Horizontal</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDirection={Direction.South}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						roundedCorners={5}
-						orientation={Orientation.Horizontal}
-					/>
-					<VisAxis<DataRecord>
-						type="y"
-						tickFormat={(_, i) => data[i].month}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart- Horizontal</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDirection={Direction.South}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            roundedCorners={5}
+            orientation={Orientation.Horizontal}
+          />
+          <VisAxis<DataRecord>
+            type="y"
+            tickFormat={(_, i) => data[i].month}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartHorizontal;
+export default BarChartHorizontal
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-interactive.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-interactive.tsx
index 4318aad8..dfbf864b 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-interactive.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-interactive.tsx
@@ -1,236 +1,238 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
-import { useIsMobile } from "../hooks/use-mobile";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
+
+import { useIsMobile } from "../hooks/use-mobile"
 
 type DataRecord = {
-	date: string;
-	desktop: number;
-	mobile: number;
-};
+  date: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ date: "2024-04-01", desktop: 222, mobile: 150 },
-	{ date: "2024-04-02", desktop: 97, mobile: 180 },
-	{ date: "2024-04-03", desktop: 167, mobile: 120 },
-	{ date: "2024-04-04", desktop: 242, mobile: 260 },
-	{ date: "2024-04-05", desktop: 373, mobile: 290 },
-	{ date: "2024-04-06", desktop: 301, mobile: 340 },
-	{ date: "2024-04-07", desktop: 245, mobile: 180 },
-	{ date: "2024-04-08", desktop: 409, mobile: 320 },
-	{ date: "2024-04-09", desktop: 59, mobile: 110 },
-	{ date: "2024-04-10", desktop: 261, mobile: 190 },
-	{ date: "2024-04-11", desktop: 327, mobile: 350 },
-	{ date: "2024-04-12", desktop: 292, mobile: 210 },
-	{ date: "2024-04-13", desktop: 342, mobile: 380 },
-	{ date: "2024-04-14", desktop: 137, mobile: 220 },
-	{ date: "2024-04-15", desktop: 120, mobile: 170 },
-	{ date: "2024-04-16", desktop: 138, mobile: 190 },
-	{ date: "2024-04-17", desktop: 446, mobile: 360 },
-	{ date: "2024-04-18", desktop: 364, mobile: 410 },
-	{ date: "2024-04-19", desktop: 243, mobile: 180 },
-	{ date: "2024-04-20", desktop: 89, mobile: 150 },
-	{ date: "2024-04-21", desktop: 137, mobile: 200 },
-	{ date: "2024-04-22", desktop: 224, mobile: 170 },
-	{ date: "2024-04-23", desktop: 138, mobile: 230 },
-	{ date: "2024-04-24", desktop: 387, mobile: 290 },
-	{ date: "2024-04-25", desktop: 215, mobile: 250 },
-	{ date: "2024-04-26", desktop: 75, mobile: 130 },
-	{ date: "2024-04-27", desktop: 383, mobile: 420 },
-	{ date: "2024-04-28", desktop: 122, mobile: 180 },
-	{ date: "2024-04-29", desktop: 315, mobile: 240 },
-	{ date: "2024-04-30", desktop: 454, mobile: 380 },
-	{ date: "2024-05-01", desktop: 165, mobile: 220 },
-	{ date: "2024-05-02", desktop: 293, mobile: 310 },
-	{ date: "2024-05-03", desktop: 247, mobile: 190 },
-	{ date: "2024-05-04", desktop: 385, mobile: 420 },
-	{ date: "2024-05-05", desktop: 481, mobile: 390 },
-	{ date: "2024-05-06", desktop: 498, mobile: 520 },
-	{ date: "2024-05-07", desktop: 388, mobile: 300 },
-	{ date: "2024-05-08", desktop: 149, mobile: 210 },
-	{ date: "2024-05-09", desktop: 227, mobile: 180 },
-	{ date: "2024-05-10", desktop: 293, mobile: 330 },
-	{ date: "2024-05-11", desktop: 335, mobile: 270 },
-	{ date: "2024-05-12", desktop: 197, mobile: 240 },
-	{ date: "2024-05-13", desktop: 197, mobile: 160 },
-	{ date: "2024-05-14", desktop: 448, mobile: 490 },
-	{ date: "2024-05-15", desktop: 473, mobile: 380 },
-	{ date: "2024-05-16", desktop: 338, mobile: 400 },
-	{ date: "2024-05-17", desktop: 499, mobile: 420 },
-	{ date: "2024-05-18", desktop: 315, mobile: 350 },
-	{ date: "2024-05-19", desktop: 235, mobile: 180 },
-	{ date: "2024-05-20", desktop: 177, mobile: 230 },
-	{ date: "2024-05-21", desktop: 82, mobile: 140 },
-	{ date: "2024-05-22", desktop: 81, mobile: 120 },
-	{ date: "2024-05-23", desktop: 252, mobile: 290 },
-	{ date: "2024-05-24", desktop: 294, mobile: 220 },
-	{ date: "2024-05-25", desktop: 201, mobile: 250 },
-	{ date: "2024-05-26", desktop: 213, mobile: 170 },
-	{ date: "2024-05-27", desktop: 420, mobile: 460 },
-	{ date: "2024-05-28", desktop: 233, mobile: 190 },
-	{ date: "2024-05-29", desktop: 78, mobile: 130 },
-	{ date: "2024-05-30", desktop: 340, mobile: 280 },
-	{ date: "2024-05-31", desktop: 178, mobile: 230 },
-	{ date: "2024-06-01", desktop: 178, mobile: 200 },
-	{ date: "2024-06-02", desktop: 470, mobile: 410 },
-	{ date: "2024-06-03", desktop: 103, mobile: 160 },
-	{ date: "2024-06-04", desktop: 439, mobile: 380 },
-	{ date: "2024-06-05", desktop: 88, mobile: 140 },
-	{ date: "2024-06-06", desktop: 294, mobile: 250 },
-	{ date: "2024-06-07", desktop: 323, mobile: 370 },
-	{ date: "2024-06-08", desktop: 385, mobile: 320 },
-	{ date: "2024-06-09", desktop: 438, mobile: 480 },
-	{ date: "2024-06-10", desktop: 155, mobile: 200 },
-	{ date: "2024-06-11", desktop: 92, mobile: 150 },
-	{ date: "2024-06-12", desktop: 492, mobile: 420 },
-	{ date: "2024-06-13", desktop: 81, mobile: 130 },
-	{ date: "2024-06-14", desktop: 426, mobile: 380 },
-	{ date: "2024-06-15", desktop: 307, mobile: 350 },
-	{ date: "2024-06-16", desktop: 371, mobile: 310 },
-	{ date: "2024-06-17", desktop: 475, mobile: 520 },
-	{ date: "2024-06-18", desktop: 107, mobile: 170 },
-	{ date: "2024-06-19", desktop: 341, mobile: 290 },
-	{ date: "2024-06-20", desktop: 408, mobile: 450 },
-	{ date: "2024-06-21", desktop: 169, mobile: 210 },
-	{ date: "2024-06-22", desktop: 317, mobile: 270 },
-	{ date: "2024-06-23", desktop: 480, mobile: 530 },
-	{ date: "2024-06-24", desktop: 132, mobile: 180 },
-	{ date: "2024-06-25", desktop: 141, mobile: 190 },
-	{ date: "2024-06-26", desktop: 434, mobile: 380 },
-	{ date: "2024-06-27", desktop: 448, mobile: 490 },
-	{ date: "2024-06-28", desktop: 149, mobile: 200 },
-	{ date: "2024-06-29", desktop: 103, mobile: 160 },
-	{ date: "2024-06-30", desktop: 446, mobile: 400 },
-];
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const BarChartInteractive = () => {
-	const isMobile = useIsMobile();
+  const isMobile = useIsMobile()
 
-	const numTicks = () => {
-		if (isMobile()) {
-			return 4;
-		}
-		return 15;
-	};
+  const numTicks = () => {
+    if (isMobile()) {
+      return 4
+    }
+    return 15
+  }
 
-	return (
-		<Card>
-			<CardHeader class="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-				<div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
-					<CardTitle>Bar Chart - Interactive</CardTitle>
-					<CardDescription>
-						Showing total visitors for the last 3 months
-					</CardDescription>
-				</div>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[
-						0,
-						Math.max(
-							...data.map((d) => d.desktop),
-							...data.map((d) => d.mobile),
-						),
-					]}
-					class="aspect-auto"
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						barPadding={0.2}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => {
-							const date = new Date(data[d as number].date);
-							return date.toLocaleDateString("en-US", {
-								month: "short",
-								day: "numeric",
-							});
-						}}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={numTicks()}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="date"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader class="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle>Bar Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[
+            0,
+            Math.max(
+              ...data.map((d) => d.desktop),
+              ...data.map((d) => d.mobile)
+            ),
+          ]}
+          class="aspect-auto"
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            barPadding={0.2}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => {
+              const date = new Date(data[d as number].date)
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })
+            }}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={numTicks()}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="date"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartInteractive;
+export default BarChartInteractive
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-mixed.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-mixed.tsx
index 6978a55e..33219289 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-mixed.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-mixed.tsx
@@ -1,141 +1,142 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { Direction, Orientation, StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { Direction, Orientation, StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	browser: string;
-	visitors: number;
-	fill: string;
-};
+  browser: string
+  visitors: number
+  fill: string
+}
 
 const data: DataRecord[] = [
-	{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-	{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-	{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-	{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-	{ browser: "other", visitors: 90, fill: "var(--color-other)" },
-];
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
 
 const chartConfig = {
-	visitors: {
-		label: "Visitors",
-	},
-	chrome: {
-		label: "Chrome",
-		color: "hsl(var(--chart-1))",
-	},
-	safari: {
-		label: "Safari",
-		color: "hsl(var(--chart-2))",
-	},
-	firefox: {
-		label: "Firefox",
-		color: "hsl(var(--chart-3))",
-	},
-	edge: {
-		label: "Edge",
-		color: "hsl(var(--chart-4))",
-	},
-	other: {
-		label: "Other",
-		color: "hsl(var(--chart-5))",
-	},
-} satisfies ChartConfig;
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
 
 const BarChartMixed = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart- Mixed</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDirection={Direction.South}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.visitors}
-						color={(d) => d.fill}
-						roundedCorners={5}
-						orientation={Orientation.Horizontal}
-					/>
-					<VisAxis<DataRecord>
-						type="y"
-						tickFormat={(_, i) =>
-							chartConfig[data[i].browser as keyof typeof chartConfig].label
-						}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="browser"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart- Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDirection={Direction.South}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.visitors}
+            color={(d) => d.fill}
+            roundedCorners={5}
+            orientation={Orientation.Horizontal}
+          />
+          <VisAxis<DataRecord>
+            type="y"
+            tickFormat={(_, i) =>
+              chartConfig[data[i].browser as keyof typeof chartConfig].label
+            }
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="browser"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartMixed;
+export default BarChartMixed
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-multiply.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-multiply.tsx
index 87872e3f..9e955178 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-multiply.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-multiply.tsx
@@ -1,125 +1,126 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisGroupedBar, VisTooltip } from "@unovis/solid"
+import { GroupedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisGroupedBar, VisTooltip } from "@unovis/solid";
-import { GroupedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const BarChartMultiply = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart - Multiply</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisGroupedBar<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.desktop, (d) => d.mobile]}
-						color={["var(--color-desktop)", "var(--color-mobile)"]}
-						roundedCorners={4}
-						barPadding={0.2}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[GroupedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-										indicator="dashed"
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiply</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisGroupedBar<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.desktop, (d) => d.mobile]}
+            color={["var(--color-desktop)", "var(--color-mobile)"]}
+            roundedCorners={4}
+            barPadding={0.2}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [GroupedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                    indicator="dashed"
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartMultiply;
+export default BarChartMultiply
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-negative.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-negative.tsx
index 8899a1a9..69963263 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-negative.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-negative.tsx
@@ -1,112 +1,113 @@
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const BarChartNegative = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart - Negative</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						roundedCorners={8}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="line"
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Negative</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            roundedCorners={8}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="line"
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartNegative;
+export default BarChartNegative
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart-stacked.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart-stacked.tsx
index 75697d60..c059dc58 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart-stacked.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart-stacked.tsx
@@ -1,138 +1,139 @@
+import { render } from "solid-js/web"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  VisAxis,
+  VisBulletLegend,
+  VisStackedBar,
+  VisTooltip,
+} from "@unovis/solid"
+import { StackedBar, type BulletLegendItemInterface } from "@unovis/ts"
+
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	VisAxis,
-	VisBulletLegend,
-	VisStackedBar,
-	VisTooltip,
-} from "@unovis/solid";
-import { type BulletLegendItemInterface, StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const BarChartStacked = () => {
-	const items = (): BulletLegendItemInterface[] => {
-		return Object.entries(chartConfig).map(([_, config]) => ({
-			name: config.label,
-			color: config.color,
-		}));
-	};
+  const items = (): BulletLegendItemInterface[] => {
+    return Object.entries(chartConfig).map(([_, config]) => ({
+      name: config.label,
+      color: config.color,
+    }))
+  }
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart - Stacked</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.desktop, (d) => d.mobile]}
-						color={["var(--color-desktop)", "var(--color-mobile)"]}
-						roundedCorners={4}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-				<div class="flex items-center justify-center gap-4 pt-3">
-					<VisBulletLegend items={items()} />
-				</div>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.desktop, (d) => d.mobile]}
+            color={["var(--color-desktop)", "var(--color-mobile)"]}
+            roundedCorners={4}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+        <div class="flex items-center justify-center gap-4 pt-3">
+          <VisBulletLegend items={items()} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartStacked;
+export default BarChartStacked
diff --git a/docs/src/__registry__/tailwindcss/charts/bar-chart.tsx b/docs/src/__registry__/tailwindcss/charts/bar-chart.tsx
index 2cef53af..18a291a5 100644
--- a/docs/src/__registry__/tailwindcss/charts/bar-chart.tsx
+++ b/docs/src/__registry__/tailwindcss/charts/bar-chart.tsx
@@ -1,119 +1,120 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const BarChart = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						roundedCorners={8}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            roundedCorners={8}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChart;
+export default BarChart
diff --git a/docs/src/action/registry.ts b/docs/src/action/registry.ts
index 4bbfc7e4..0437a4bd 100644
--- a/docs/src/action/registry.ts
+++ b/docs/src/action/registry.ts
@@ -1,35 +1,35 @@
-"use server";
+"use server"
 
-import type * as v from "valibot";
+import { query } from "@solidjs/router"
+import type * as v from "valibot"
 
-import { highlightCode } from "@/libs/highlight-code";
-import { createFileTreeForRegistryItemFiles } from "@/libs/registry";
-import type { registryItemFileSchema } from "@/registry/schema";
-import { query } from "@solidjs/router";
+import { highlightCode } from "@/libs/highlight-code"
+import { createFileTreeForRegistryItemFiles } from "@/libs/registry"
+import type { registryItemFileSchema } from "@/registry/schema"
 
 export const getCachedFileTree = query(
-	// eslint-disable-next-line @typescript-eslint/require-await
-	async (files: { path: string; target?: string }[] | undefined) => {
-		if (!files) {
-			return null;
-		}
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async (files: { path: string; target?: string }[] | undefined) => {
+    if (!files) {
+      return null
+    }
 
-		return createFileTreeForRegistryItemFiles(files);
-	},
-	"file-tree",
-);
+    return createFileTreeForRegistryItemFiles(files)
+  },
+  "file-tree"
+)
 
 export const getCachedHighlightedFiles = query(
-	async (files: v.InferInput<typeof registryItemFileSchema>[] | undefined) => {
-		if (!files) {
-			return null;
-		}
-		return await Promise.all(
-			files.map(async (file) => ({
-				...file,
-				highlightedContent: await highlightCode(file.content ?? ""),
-			})),
-		);
-	},
-	"highlighted-file",
-);
+  async (files: v.InferInput<typeof registryItemFileSchema>[] | undefined) => {
+    if (!files) {
+      return null
+    }
+    return await Promise.all(
+      files.map(async (file) => ({
+        ...file,
+        highlightedContent: await highlightCode(file.content ?? ""),
+      }))
+    )
+  },
+  "highlighted-file"
+)
diff --git a/docs/src/app.tsx b/docs/src/app.tsx
index 7b66ab58..240e2a20 100644
--- a/docs/src/app.tsx
+++ b/docs/src/app.tsx
@@ -1,53 +1,54 @@
-import { Metadata } from "@/components/metadata";
-import { Toaster } from "@/registry/tailwindcss/ui/sonner";
-import { ToastList, ToastRegion } from "@/registry/tailwindcss/ui/toast";
+import { Suspense } from "solid-js"
+import { isServer } from "solid-js/web"
+import { MetaProvider } from "@solidjs/meta"
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start/router"
 import {
-	ColorModeProvider,
-	ColorModeScript,
-	cookieStorageManagerSSR,
-} from "@kobalte/core";
-import { MetaProvider } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
-import { isServer } from "solid-js/web";
-import { getCookie } from "vinxi/http";
+  ColorModeProvider,
+  ColorModeScript,
+  cookieStorageManagerSSR,
+} from "@kobalte/core"
+import { getCookie } from "vinxi/http"
 
-import "./app.css";
-import "./mdx.css";
+import { Metadata } from "@/components/metadata"
+import { Toaster } from "@/registry/tailwindcss/ui/sonner"
+import { ToastList, ToastRegion } from "@/registry/tailwindcss/ui/toast"
+
+import "./app.css"
+import "./mdx.css"
 
 const getServerCookies = () => {
-	"use server";
-	const colorMode = getCookie("kb-color-mode");
-	return colorMode ? `kb-color-mode=${colorMode}` : "";
-};
+  "use server"
+  const colorMode = getCookie("kb-color-mode")
+  return colorMode ? `kb-color-mode=${colorMode}` : ""
+}
 
 export default function App() {
-	const storageManager = cookieStorageManagerSSR(
-		isServer ? getServerCookies() : document.cookie,
-	);
+  const storageManager = cookieStorageManagerSSR(
+    isServer ? getServerCookies() : document.cookie
+  )
 
-	return (
-		<Router
-			root={(props) => (
-				<MetaProvider>
-					<Metadata />
-					<ColorModeScript storageType={storageManager.type} />
-					<ColorModeProvider storageManager={storageManager}>
-						<Suspense>
-							<div class="relative flex min-h-svh flex-col bg-background">
-								{props.children}
-							</div>
-						</Suspense>
-						<ToastRegion>
-							<ToastList />
-						</ToastRegion>
-						<Toaster />
-					</ColorModeProvider>
-				</MetaProvider>
-			)}
-		>
-			<FileRoutes />
-		</Router>
-	);
+  return (
+    <Router
+      root={(props) => (
+        <MetaProvider>
+          <Metadata />
+          <ColorModeScript storageType={storageManager.type} />
+          <ColorModeProvider storageManager={storageManager}>
+            <Suspense>
+              <div class="bg-background relative flex min-h-svh flex-col">
+                {props.children}
+              </div>
+            </Suspense>
+            <ToastRegion>
+              <ToastList />
+            </ToastRegion>
+            <Toaster />
+          </ColorModeProvider>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  )
 }
diff --git a/docs/src/components/announcement.tsx b/docs/src/components/announcement.tsx
index e76a1877..8b0e6422 100644
--- a/docs/src/components/announcement.tsx
+++ b/docs/src/components/announcement.tsx
@@ -1,26 +1,26 @@
 export const Announcement = () => {
-	return (
-		<a
-			href="/docs/changelog#dec-2024---updates"
-			class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
-		>
-			<span class="underline-offset-4 group-hover:underline">
-				Introducing Charts, Sidebar component and more
-			</span>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="ml-1 h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14m-4 4l4-4m-4-4l4 4"
-				/>
-			</svg>
-		</a>
-	);
-};
+  return (
+    <a
+      href="/docs/changelog#dec-2024---updates"
+      class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
+    >
+      <span class="underline-offset-4 group-hover:underline">
+        Introducing Charts, Sidebar component and more
+      </span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="ml-1 h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14m-4 4l4-4m-4-4l4 4"
+        />
+      </svg>
+    </a>
+  )
+}
diff --git a/docs/src/components/block-display.tsx b/docs/src/components/block-display.tsx
index 093d48ad..0e597591 100644
--- a/docs/src/components/block-display.tsx
+++ b/docs/src/components/block-display.tsx
@@ -1,31 +1,29 @@
-import { Index } from "@/__registry__";
-import {
-	getCachedFileTree,
-	getCachedHighlightedFiles,
-} from "@/action/registry";
-import type { RegistryEntry } from "@/registry/schema";
-import { createAsync } from "@solidjs/router";
-import { clientOnly } from "@solidjs/start";
-import { Show, createMemo } from "solid-js";
+import { Show, createMemo } from "solid-js"
+import { createAsync } from "@solidjs/router"
+import { clientOnly } from "@solidjs/start"
+import { Index } from "@/__registry__"
+import { getCachedFileTree, getCachedHighlightedFiles } from "@/action/registry"
 
-const BlockViewer = clientOnly(() => import("./block-viewer"), { lazy: true });
+import type { RegistryEntry } from "@/registry/schema"
+
+const BlockViewer = clientOnly(() => import("./block-viewer"), { lazy: true })
 
 const BlockDisplay = (props: { name: string }) => {
-	const item = createMemo<RegistryEntry>(() => Index.tailwindcss[props.name]);
-	const tree = createAsync(() => getCachedFileTree(item().files));
-	const highlightedFiles = createAsync(() =>
-		getCachedHighlightedFiles(item().files),
-	);
+  const item = createMemo<RegistryEntry>(() => Index.tailwindcss[props.name])
+  const tree = createAsync(() => getCachedFileTree(item().files))
+  const highlightedFiles = createAsync(() =>
+    getCachedHighlightedFiles(item().files)
+  )
 
-	return (
-		<Show when={item().files && tree() && highlightedFiles()}>
-			<BlockViewer
-				item={item()}
-				tree={tree()!}
-				highlightedFiles={highlightedFiles()!}
-			/>
-		</Show>
-	);
-};
+  return (
+    <Show when={item().files && tree() && highlightedFiles()}>
+      <BlockViewer
+        item={item()}
+        tree={tree()!}
+        highlightedFiles={highlightedFiles()!}
+      />
+    </Show>
+  )
+}
 
-export default BlockDisplay;
+export default BlockDisplay
diff --git a/docs/src/components/block-viewer.tsx b/docs/src/components/block-viewer.tsx
index 7e3ba293..2ff0f12e 100644
--- a/docs/src/components/block-viewer.tsx
+++ b/docs/src/components/block-viewer.tsx
@@ -1,623 +1,622 @@
-import type {
-	FileTree,
-	createFileTreeForRegistryItemFiles,
-} from "@/libs/registry";
-import type { RegistryEntry, registryItemFileSchema } from "@/registry/schema";
-import { Button } from "@/registry/tailwindcss/ui/button";
 import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/registry/tailwindcss/ui/collapsible";
+  For,
+  Show,
+  createContext,
+  createMemo,
+  createSignal,
+  useContext,
+  type Accessor,
+  type ParentProps,
+  type Setter,
+} from "solid-js"
+import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible"
+import type * as v from "valibot"
+
+import type {
+  FileTree,
+  createFileTreeForRegistryItemFiles,
+} from "@/libs/registry"
+import type { RegistryEntry, registryItemFileSchema } from "@/registry/schema"
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Resizable,
-	ResizableHandle,
-	ResizablePanel,
-} from "@/registry/tailwindcss/ui/resizable";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/tailwindcss/ui/collapsible"
 import {
-	Sidebar,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSub,
-	SidebarProvider,
-} from "@/registry/tailwindcss/ui/sidebar";
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/registry/tailwindcss/ui/resizable"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 import {
-	Tabs,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/registry/tailwindcss/ui/tabs";
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+} from "@/registry/tailwindcss/ui/sidebar"
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
-import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible";
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/tailwindcss/ui/tabs"
 import {
-	type Accessor,
-	For,
-	type ParentProps,
-	type Setter,
-	Show,
-	createContext,
-	createMemo,
-	createSignal,
-	useContext,
-} from "solid-js";
-import type * as v from "valibot";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 type BlockViewerProps = {
-	item: RegistryEntry | undefined;
-	tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null;
-	highlightedFiles:
-		| (v.InferInput<typeof registryItemFileSchema> & {
-				highlightedContent: string;
-		  })[]
-		| null;
-};
+  item: RegistryEntry | undefined
+  tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
+  highlightedFiles:
+    | (v.InferInput<typeof registryItemFileSchema> & {
+        highlightedContent: string
+      })[]
+    | null
+}
 
 type BlockViewerContext = {
-	item: Accessor<RegistryEntry | undefined>;
-	view: Accessor<"code" | "preview">;
-	setView: Setter<"code" | "preview">;
-	sizes: Accessor<number[]>;
-	setSizes: Setter<number[]>;
-	activeFile: Accessor<string | null>;
-	setActiveFile: Setter<string | null>;
-	tree: Accessor<ReturnType<typeof createFileTreeForRegistryItemFiles> | null>;
-	highlightedFiles: Accessor<
-		| (v.InferInput<typeof registryItemFileSchema> & {
-				highlightedContent: string;
-		  })[]
-		| null
-	>;
-};
+  item: Accessor<RegistryEntry | undefined>
+  view: Accessor<"code" | "preview">
+  setView: Setter<"code" | "preview">
+  sizes: Accessor<number[]>
+  setSizes: Setter<number[]>
+  activeFile: Accessor<string | null>
+  setActiveFile: Setter<string | null>
+  tree: Accessor<ReturnType<typeof createFileTreeForRegistryItemFiles> | null>
+  highlightedFiles: Accessor<
+    | (v.InferInput<typeof registryItemFileSchema> & {
+        highlightedContent: string
+      })[]
+    | null
+  >
+}
 
-const BlockViewerContext = createContext<BlockViewerContext>();
+const BlockViewerContext = createContext<BlockViewerContext>()
 
 const useBlockViewer = () => {
-	const context = useContext(BlockViewerContext);
+  const context = useContext(BlockViewerContext)
 
-	if (!context) {
-		throw new Error(
-			"`useBlockViewer` must be used within a `BlockViewerProvider`.",
-		);
-	}
+  if (!context) {
+    throw new Error(
+      "`useBlockViewer` must be used within a `BlockViewerProvider`."
+    )
+  }
 
-	return context;
-};
+  return context
+}
 
 const BlockViewerProvider = (props: ParentProps<BlockViewerProps>) => {
-	const [view, setView] = createSignal<"code" | "preview">("preview");
-	const [sizes, setSizes] = createSignal([1, 0]);
-	const [activeFile, setActiveFile] = createSignal<string | null>(
-		// eslint-disable-next-line solid/reactivity
-		props.highlightedFiles?.[0].target ?? null,
-	);
+  const [view, setView] = createSignal<"code" | "preview">("preview")
+  const [sizes, setSizes] = createSignal([1, 0])
+  const [activeFile, setActiveFile] = createSignal<string | null>(
+    // eslint-disable-next-line solid/reactivity
+    props.highlightedFiles?.[0].target ?? null
+  )
 
-	const value: BlockViewerContext = {
-		item: () => props.item,
-		tree: () => props.tree,
-		view,
-		setView,
-		sizes,
-		setSizes,
-		activeFile,
-		setActiveFile,
-		highlightedFiles: () => props.highlightedFiles,
-	};
+  const value: BlockViewerContext = {
+    item: () => props.item,
+    tree: () => props.tree,
+    view,
+    setView,
+    sizes,
+    setSizes,
+    activeFile,
+    setActiveFile,
+    highlightedFiles: () => props.highlightedFiles,
+  }
 
-	return (
-		<BlockViewerContext.Provider value={value}>
-			<div
-				id={props.item?.name}
-				data-view={view()}
-				class="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
-				style={{
-					"--height": props.item?.meta?.iframeHeight ?? "800px",
-				}}
-			>
-				{props.children}
-			</div>
-		</BlockViewerContext.Provider>
-	);
-};
+  return (
+    <BlockViewerContext.Provider value={value}>
+      <div
+        id={props.item?.name}
+        data-view={view()}
+        class="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
+        style={{
+          "--height": props.item?.meta?.iframeHeight ?? "800px",
+        }}
+      >
+        {props.children}
+      </div>
+    </BlockViewerContext.Provider>
+  )
+}
 
 const BlockViewerToolbar = () => {
-	const { setView, item, setSizes } = useBlockViewer();
-	const [isCopied, setIsCopied] = createSignal(false);
+  const { setView, item, setSizes } = useBlockViewer()
+  const [isCopied, setIsCopied] = createSignal(false)
 
-	const copyToClipboard = async () => {
-		setIsCopied(true);
-		await navigator.clipboard.writeText(
-			`npx shadcn@latest add ${item()?.name}`,
-		);
-		setTimeout(() => setIsCopied(false), 2000);
-	};
+  const copyToClipboard = async () => {
+    setIsCopied(true)
+    await navigator.clipboard.writeText(`npx shadcn@latest add ${item()?.name}`)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
 
-	return (
-		<div class="flex w-full items-center gap-2">
-			<Tabs
-				defaultValue="preview"
-				onChange={(value) => setView(value as "preview" | "code")}
-				class="hidden lg:flex w-fit"
-			>
-				<TabsList class="h-7 rounded-md">
-					<TabsTrigger value="preview" class="h-[1.45rem] px-2 text-xs">
-						Preview
-					</TabsTrigger>
-					<TabsTrigger value="code" class="h-[1.45rem] px-2 text-xs">
-						Code
-					</TabsTrigger>
-					<TabsIndicator class="rounded-sm" />
-				</TabsList>
-			</Tabs>
-			<Separator
-				orientation="vertical"
-				class="mx-2 hidden data-[orientation=vertical]:h-4 lg:flex"
-			/>
-			<a
-				href={`#${item()?.name}`}
-				class="text-sm font-medium underline-offset-2 hover:underline"
-			>
-				{item()?.description}
-			</a>
-			<div class="ml-auto flex items-center gap-2">
-				<Button
-					variant="ghost"
-					class="hidden h-7 w-7 rounded-md border bg-transparent shadow-none md:flex lg:w-auto gap-2"
-					size="sm"
-					onClick={copyToClipboard}
-				>
-					<Show
-						when={isCopied()}
-						fallback={
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-3.5"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m4 17l6-6l-6-6m8 14h8"
-								/>
-							</svg>
-						}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-3.5"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M20 6L9 17l-5-5"
-							/>
-						</svg>
-					</Show>
-					<span class="hidden lg:inline">
-						npx shadcn-solid add {item()?.name}
-					</span>
-				</Button>
-				<Separator orientation="vertical" class="mx-2 hidden h-4 md:flex" />
-				<div class="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex">
-					<ToggleGroup
-						defaultValue="1"
-						onChange={(size) => setSizes([Number(size), 0])}
-					>
-						<ToggleGroupItem
-							value="1"
-							class="h-[22px] w-[22px] rounded-sm p-0"
-							title="Desktop"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-3.5"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<rect width="20" height="14" x="2" y="3" rx="2" />
-									<path d="M8 21h8m-4-4v4" />
-								</g>
-							</svg>
-						</ToggleGroupItem>
-						<ToggleGroupItem
-							value="0.6"
-							class="h-[22px] w-[22px] rounded-sm p-0"
-							title="Tablet"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-3.5"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M18 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM9 18h6"
-								/>
-							</svg>
-						</ToggleGroupItem>
-						<ToggleGroupItem
-							value="0.3"
-							class="h-[22px] w-[22px] rounded-sm p-0"
-							title="Mobile"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-3.5"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01"
-								/>
-							</svg>
-						</ToggleGroupItem>
-						<Separator
-							orientation="vertical"
-							class="data-[orientation=vertical]:h-4"
-						/>
-						<Button
-							size="icon"
-							variant="ghost"
-							class="h-[22px] w-[22px] rounded-sm p-0"
-							as="a"
-							title="Open in New Tab"
-							href={`/blocks/${item()?.name}`}
-							target="_blank"
-						>
-							<span class="sr-only">Open in New Tab</span>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-3.5"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="M3 7V5a2 2 0 0 1 2-2h2m10 0h2a2 2 0 0 1 2 2v2m0 10v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" />
-									<rect width="10" height="8" x="7" y="8" rx="1" />
-								</g>
-							</svg>
-						</Button>
-					</ToggleGroup>
-				</div>
-				<Separator orientation="vertical" class="mx-2 hidden h-4 xl:flex" />
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="flex w-full items-center gap-2">
+      <Tabs
+        defaultValue="preview"
+        onChange={(value) => setView(value as "preview" | "code")}
+        class="hidden w-fit lg:flex"
+      >
+        <TabsList class="h-7 rounded-md">
+          <TabsTrigger value="preview" class="h-[1.45rem] px-2 text-xs">
+            Preview
+          </TabsTrigger>
+          <TabsTrigger value="code" class="h-[1.45rem] px-2 text-xs">
+            Code
+          </TabsTrigger>
+          <TabsIndicator class="rounded-sm" />
+        </TabsList>
+      </Tabs>
+      <Separator
+        orientation="vertical"
+        class="mx-2 hidden data-[orientation=vertical]:h-4 lg:flex"
+      />
+      <a
+        href={`#${item()?.name}`}
+        class="text-sm font-medium underline-offset-2 hover:underline"
+      >
+        {item()?.description}
+      </a>
+      <div class="ml-auto flex items-center gap-2">
+        <Button
+          variant="ghost"
+          class="hidden h-7 w-7 gap-2 rounded-md border bg-transparent shadow-none md:flex lg:w-auto"
+          size="sm"
+          onClick={copyToClipboard}
+        >
+          <Show
+            when={isCopied()}
+            fallback={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m4 17l6-6l-6-6m8 14h8"
+                />
+              </svg>
+            }
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-3.5"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M20 6L9 17l-5-5"
+              />
+            </svg>
+          </Show>
+          <span class="hidden lg:inline">
+            npx shadcn-solid add {item()?.name}
+          </span>
+        </Button>
+        <Separator orientation="vertical" class="mx-2 hidden h-4 md:flex" />
+        <div class="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex">
+          <ToggleGroup
+            defaultValue="1"
+            onChange={(size) => setSizes([Number(size), 0])}
+          >
+            <ToggleGroupItem
+              value="1"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+              title="Desktop"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <rect width="20" height="14" x="2" y="3" rx="2" />
+                  <path d="M8 21h8m-4-4v4" />
+                </g>
+              </svg>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="0.6"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+              title="Tablet"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M18 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM9 18h6"
+                />
+              </svg>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="0.3"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+              title="Mobile"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01"
+                />
+              </svg>
+            </ToggleGroupItem>
+            <Separator
+              orientation="vertical"
+              class="data-[orientation=vertical]:h-4"
+            />
+            <Button
+              size="icon"
+              variant="ghost"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+              as="a"
+              title="Open in New Tab"
+              href={`/blocks/${item()?.name}`}
+              target="_blank"
+            >
+              <span class="sr-only">Open in New Tab</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="M3 7V5a2 2 0 0 1 2-2h2m10 0h2a2 2 0 0 1 2 2v2m0 10v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" />
+                  <rect width="10" height="8" x="7" y="8" rx="1" />
+                </g>
+              </svg>
+            </Button>
+          </ToggleGroup>
+        </div>
+        <Separator orientation="vertical" class="mx-2 hidden h-4 xl:flex" />
+      </div>
+    </div>
+  )
+}
 
 const BlockViewerView = () => {
-	const { item, sizes, setSizes } = useBlockViewer();
+  const { item, sizes, setSizes } = useBlockViewer()
 
-	return (
-		<div class="group-data-[view=code]/block-view-wrapper:hidden md:h-[--height]">
-			<div class="grid w-full gap-4">
-				<Resizable sizes={sizes()} onSizesChange={setSizes}>
-					<ResizablePanel
-						initialSize={1}
-						minSize={0.3}
-						class="relative aspect-[4/2.5] rounded-xl border bg-background md:aspect-auto overflow-hidden"
-					>
-						<img
-							src={`/images/blocks/${item()?.name}.png`}
-							alt={item.name}
-							data-block={item.name}
-							width={1440}
-							height={900}
-							class="object-cover dark:hidden md:hidden md:dark:hidden"
-						/>
-						<img
-							src={`/images/blocks/${item()?.name}-dark.png`}
-							alt={item.name}
-							data-block={item.name}
-							width={1440}
-							height={900}
-							class="hidden object-cover dark:block md:hidden md:dark:hidden"
-						/>
-						<iframe
-							src={`/blocks/${item()?.name}`}
-							height={item()?.meta?.iframeHeight ?? 800}
-							class="w-full bg-background hidden md:block"
-							title={item()?.name}
-							loading="lazy"
-						/>
-					</ResizablePanel>
-					<ResizableHandle class="hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" />
-					<ResizablePanel initialSize={0} minSize={0} />
-				</Resizable>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="group-data-[view=code]/block-view-wrapper:hidden md:h-[--height]">
+      <div class="grid w-full gap-4">
+        <Resizable sizes={sizes()} onSizesChange={setSizes}>
+          <ResizablePanel
+            initialSize={1}
+            minSize={0.3}
+            class="bg-background relative aspect-[4/2.5] overflow-hidden rounded-xl border md:aspect-auto"
+          >
+            <img
+              src={`/images/blocks/${item()?.name}.png`}
+              alt={item.name}
+              data-block={item.name}
+              width={1440}
+              height={900}
+              class="object-cover md:hidden dark:hidden md:dark:hidden"
+            />
+            <img
+              src={`/images/blocks/${item()?.name}-dark.png`}
+              alt={item.name}
+              data-block={item.name}
+              width={1440}
+              height={900}
+              class="hidden object-cover md:hidden dark:block md:dark:hidden"
+            />
+            <iframe
+              src={`/blocks/${item()?.name}`}
+              height={item()?.meta?.iframeHeight ?? 800}
+              class="bg-background hidden w-full md:block"
+              title={item()?.name}
+              loading="lazy"
+            />
+          </ResizablePanel>
+          <ResizableHandle class="after:bg-border hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:transition-all after:hover:h-10 md:block" />
+          <ResizablePanel initialSize={0} minSize={0} />
+        </Resizable>
+      </div>
+    </div>
+  )
+}
 
 const BlockViewerCode = () => {
-	const { activeFile, highlightedFiles } = useBlockViewer();
+  const { activeFile, highlightedFiles } = useBlockViewer()
 
-	const file = createMemo(() => {
-		return highlightedFiles()?.find((file) => file.target === activeFile());
-	});
+  const file = createMemo(() => {
+    return highlightedFiles()?.find((file) => file.target === activeFile())
+  })
 
-	return (
-		<Show when={file()}>
-			<div class="mr-[14px] flex h-[--height] overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden">
-				<div class="w-[280px]">
-					<BlockViewerFileTree />
-				</div>
-				<div class="flex min-w-0 flex-1 flex-col">
-					<div class="flex h-12 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-4"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-								<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-							</g>
-						</svg>
-						{file()!.target}
-						<div class="ml-auto flex items-center gap-2">
-							<BlockCopyCodeButton />
-						</div>
-					</div>
-					<div
-						data-rehype-pretty-code-figure=""
-						// eslint-disable-next-line solid/no-innerhtml
-						innerHTML={file()?.highlightedContent ?? ""}
-						class="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-12 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
-					/>
-				</div>
-			</div>
-		</Show>
-	);
-};
+  return (
+    <Show when={file()}>
+      <div class="mr-[14px] flex h-[--height] overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden">
+        <div class="w-[280px]">
+          <BlockViewerFileTree />
+        </div>
+        <div class="flex min-w-0 flex-1 flex-col">
+          <div class="flex h-12 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-4"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+                <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+              </g>
+            </svg>
+            {file()!.target}
+            <div class="ml-auto flex items-center gap-2">
+              <BlockCopyCodeButton />
+            </div>
+          </div>
+          <div
+            data-rehype-pretty-code-figure=""
+            // eslint-disable-next-line solid/no-innerhtml
+            innerHTML={file()?.highlightedContent ?? ""}
+            class="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-12 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed"
+          />
+        </div>
+      </div>
+    </Show>
+  )
+}
 
 const BlockViewerFileTree = () => {
-	const { tree } = useBlockViewer();
+  const { tree } = useBlockViewer()
 
-	return (
-		<Show when={tree}>
-			<SidebarProvider class="flex !min-h-full flex-col">
-				<Sidebar
-					collapsible="none"
-					class="w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white"
-				>
-					<SidebarGroupLabel class="h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
-						Files
-					</SidebarGroupLabel>
-					<SidebarGroup class="p-0">
-						<SidebarGroupContent>
-							<SidebarMenu class="gap-1.5">
-								<For each={tree()}>
-									{(file) => <Tree item={file} index={1} />}
-								</For>
-							</SidebarMenu>
-						</SidebarGroupContent>
-					</SidebarGroup>
-				</Sidebar>
-			</SidebarProvider>
-		</Show>
-	);
-};
+  return (
+    <Show when={tree}>
+      <SidebarProvider class="flex !min-h-full flex-col">
+        <Sidebar
+          collapsible="none"
+          class="w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white"
+        >
+          <SidebarGroupLabel class="h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
+            Files
+          </SidebarGroupLabel>
+          <SidebarGroup class="p-0">
+            <SidebarGroupContent>
+              <SidebarMenu class="gap-1.5">
+                <For each={tree()}>
+                  {(file) => <Tree item={file} index={1} />}
+                </For>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </Sidebar>
+      </SidebarProvider>
+    </Show>
+  )
+}
 
 const Tree = (props: { item: FileTree; index: number }) => {
-	const { activeFile, setActiveFile } = useBlockViewer();
+  const { activeFile, setActiveFile } = useBlockViewer()
 
-	return (
-		<Show
-			when={props.item.children}
-			fallback={
-				<SidebarMenuItem>
-					<SidebarMenuButton
-						isActive={props.item.path === activeFile()}
-						onClick={() => props.item.path && setActiveFile(props.item.path)}
-						class="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white"
-						data-index={props.index}
-						style={{
-							"--index": `${props.index * (props.index === 2 ? 1.2 : 1.3)}rem`,
-						}}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-4 invisible"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="m9 18l6-6l-6-6"
-							/>
-						</svg>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-4"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-								<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-							</g>
-						</svg>
-						{props.item.name}
-					</SidebarMenuButton>
-				</SidebarMenuItem>
-			}
-		>
-			<SidebarMenuItem>
-				<Collapsible
-					class="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
-					defaultOpen
-				>
-					<CollapsibleTrigger
-						as={(triggerProps: CollapsibleTriggerProps) => (
-							// @ts-expect-error
-							<SidebarMenuButton
-								{...triggerProps}
-								class="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white data-[state=open]:hover:bg-zinc-700 data-[state=open]:hover:text-white"
-								style={{
-									"--index": `${props.index * (props.index === 1 ? 1 : 1.2)}rem`,
-								}}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4 transition-transform"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="m9 18l6-6l-6-6"
-									/>
-								</svg>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
-									/>
-								</svg>
-								{props.item.name}
-							</SidebarMenuButton>
-						)}
-					/>
-					<CollapsibleContent>
-						<SidebarMenuSub class="m-0 w-full border-none p-0">
-							<For each={props.item.children}>
-								{(subItem) => <Tree item={subItem} index={props.index + 1} />}
-							</For>
-						</SidebarMenuSub>
-					</CollapsibleContent>
-				</Collapsible>
-			</SidebarMenuItem>
-		</Show>
-	);
-};
+  return (
+    <Show
+      when={props.item.children}
+      fallback={
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            isActive={props.item.path === activeFile()}
+            onClick={() => props.item.path && setActiveFile(props.item.path)}
+            class="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white"
+            data-index={props.index}
+            style={{
+              "--index": `${props.index * (props.index === 2 ? 1.2 : 1.3)}rem`,
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="invisible size-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m9 18l6-6l-6-6"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-4"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+                <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+              </g>
+            </svg>
+            {props.item.name}
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      }
+    >
+      <SidebarMenuItem>
+        <Collapsible
+          class="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+          defaultOpen
+        >
+          <CollapsibleTrigger
+            as={(triggerProps: CollapsibleTriggerProps) => (
+              // @ts-expect-error
+              <SidebarMenuButton
+                {...triggerProps}
+                class="whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white data-[state=open]:hover:bg-zinc-700 data-[state=open]:hover:text-white"
+                style={{
+                  "--index": `${props.index * (props.index === 1 ? 1 : 1.2)}rem`,
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4 transition-transform"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m9 18l6-6l-6-6"
+                  />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+                  />
+                </svg>
+                {props.item.name}
+              </SidebarMenuButton>
+            )}
+          />
+          <CollapsibleContent>
+            <SidebarMenuSub class="m-0 w-full border-none p-0">
+              <For each={props.item.children}>
+                {(subItem) => <Tree item={subItem} index={props.index + 1} />}
+              </For>
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </Collapsible>
+      </SidebarMenuItem>
+    </Show>
+  )
+}
 
 const BlockCopyCodeButton = () => {
-	const { activeFile, item } = useBlockViewer();
-	const [isCopied, setIsCopied] = createSignal(false);
+  const { activeFile, item } = useBlockViewer()
+  const [isCopied, setIsCopied] = createSignal(false)
 
-	const copyToClipboard = async (content: string) => {
-		setIsCopied(true);
-		await navigator.clipboard.writeText(content);
-		setTimeout(() => setIsCopied(false), 2000);
-	};
+  const copyToClipboard = async (content: string) => {
+    setIsCopied(true)
+    await navigator.clipboard.writeText(content)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
 
-	const file = createMemo(() => {
-		return item()?.files?.find((file) => file.target === activeFile());
-	});
+  const file = createMemo(() => {
+    return item()?.files?.find((file) => file.target === activeFile())
+  })
 
-	const content = () => file()?.content;
+  const content = () => file()?.content
 
-	return (
-		<Show when={content()}>
-			<Button
-				onClick={() => copyToClipboard(content()!)}
-				class="h-7 w-7 shrink-0 rounded-lg p-0 hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white [&>svg]:size-3.5"
-				variant="ghost"
-			>
-				<Show
-					when={isCopied()}
-					fallback={
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-								<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
-							</g>
-							<title>Copy</title>
-						</svg>
-					}
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-							<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
-						</g>
-						<title>Copied</title>
-					</svg>
-				</Show>
-			</Button>
-		</Show>
-	);
-};
+  return (
+    <Show when={content()}>
+      <Button
+        onClick={() => copyToClipboard(content()!)}
+        class="h-7 w-7 shrink-0 rounded-lg p-0 hover:bg-zinc-700 hover:text-white focus:bg-zinc-700 focus:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white [&>svg]:size-3.5"
+        variant="ghost"
+      >
+        <Show
+          when={isCopied()}
+          fallback={
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+                <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
+              </g>
+              <title>Copy</title>
+            </svg>
+          }
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+              <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
+            </g>
+            <title>Copied</title>
+          </svg>
+        </Show>
+      </Button>
+    </Show>
+  )
+}
 
 const BlockViewer = (props: BlockViewerProps) => {
-	return (
-		<BlockViewerProvider {...props}>
-			<BlockViewerToolbar />
-			<BlockViewerView />
-			<BlockViewerCode />
-		</BlockViewerProvider>
-	);
-};
+  return (
+    <BlockViewerProvider {...props}>
+      <BlockViewerToolbar />
+      <BlockViewerView />
+      <BlockViewerCode />
+    </BlockViewerProvider>
+  )
+}
 
-export default BlockViewer;
+export default BlockViewer
diff --git a/docs/src/components/chart-display.tsx b/docs/src/components/chart-display.tsx
index 733f083f..04e7ec50 100644
--- a/docs/src/components/chart-display.tsx
+++ b/docs/src/components/chart-display.tsx
@@ -1,37 +1,38 @@
-import { Index } from "@/__registry__";
-import type { RegistryEntry } from "@/registry/schema";
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { clientOnly } from "@solidjs/start";
-import { type ComponentProps, Show, createMemo, splitProps } from "solid-js";
+import { Show, createMemo, splitProps, type ComponentProps } from "solid-js"
+import { clientOnly } from "@solidjs/start"
+import { Index } from "@/__registry__"
+
+import type { RegistryEntry } from "@/registry/schema"
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 const ChartToolbar = clientOnly(() => import("./chart-toolbar"), {
-	lazy: true,
-});
+  lazy: true,
+})
 
 const ChartDisplay = (
-	props: ComponentProps<"div"> & {
-		name: string;
-	},
+  props: ComponentProps<"div"> & {
+    name: string
+  }
 ) => {
-	const [local, rest] = splitProps(props, ["name", "children", "class"]);
-	const item = createMemo<RegistryEntry>(() => Index.tailwindcss[props.name]);
+  const [local, rest] = splitProps(props, ["name", "children", "class"])
+  const item = createMemo<RegistryEntry>(() => Index.tailwindcss[props.name])
 
-	return (
-		<Show when={item()}>
-			<div
-				class={cn(
-					"themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
-					local.class,
-				)}
-				{...rest}
-			>
-				<ChartToolbar item={item()} />
-				<div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
-					{local.children}
-				</div>
-			</div>
-		</Show>
-	);
-};
+  return (
+    <Show when={item()}>
+      <div
+        class={cn(
+          "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
+          local.class
+        )}
+        {...rest}
+      >
+        <ChartToolbar item={item()} />
+        <div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+          {local.children}
+        </div>
+      </div>
+    </Show>
+  )
+}
 
-export default ChartDisplay;
+export default ChartDisplay
diff --git a/docs/src/components/chart-toolbar.tsx b/docs/src/components/chart-toolbar.tsx
index 533c2d54..9691ee4c 100644
--- a/docs/src/components/chart-toolbar.tsx
+++ b/docs/src/components/chart-toolbar.tsx
@@ -1,111 +1,110 @@
-import type { RegistryEntry } from "@/registry/schema";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { Match, Show, Switch, createSignal } from "solid-js";
+import { Match, Show, Switch, createSignal } from "solid-js"
 
-const ChartToolbar = (props: {
-	item: RegistryEntry | undefined;
-}) => {
-	return (
-		<div class="flex items-center gap-2 relative z-20 justify-end border-b bg-card px-3 py-2.5 text-card-foreground">
-			<div class="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
-				<ChartTitle item={props.item} />
-			</div>
-			<div class="ml-auto">
-				<ChartCopyButton item={props.item} />
-			</div>
-		</div>
-	);
-};
+import type { RegistryEntry } from "@/registry/schema"
+import { Button } from "@/registry/tailwindcss/ui/button"
 
-export default ChartToolbar;
+const ChartToolbar = (props: { item: RegistryEntry | undefined }) => {
+  return (
+    <div class="bg-card text-card-foreground relative z-20 flex items-center justify-end gap-2 border-b px-3 py-2.5">
+      <div class="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
+        <ChartTitle item={props.item} />
+      </div>
+      <div class="ml-auto">
+        <ChartCopyButton item={props.item} />
+      </div>
+    </div>
+  )
+}
+
+export default ChartToolbar
 
 const ChartTitle = (props: { item: RegistryEntry | undefined }) => {
-	return (
-		<Switch>
-			<Match when={props.item?.name.includes("area")}>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M3 3v16a2 2 0 0 0 2 2h16" />
-						<path d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z" />
-					</g>
-				</svg>
-				Chart
-			</Match>
-			<Match when={props.item?.name.includes("bar")}>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M3 3v16a2 2 0 0 0 2 2h16" />
-						<rect width="4" height="12" x="15" y="5" rx="1" />
-						<rect width="4" height="9" x="7" y="8" rx="1" />
-					</g>
-				</svg>
-				Chart
-			</Match>
-		</Switch>
-	);
-};
+  return (
+    <Switch>
+      <Match when={props.item?.name.includes("area")}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+            <path d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z" />
+          </g>
+        </svg>
+        Chart
+      </Match>
+      <Match when={props.item?.name.includes("bar")}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+            <rect width="4" height="12" x="15" y="5" rx="1" />
+            <rect width="4" height="9" x="7" y="8" rx="1" />
+          </g>
+        </svg>
+        Chart
+      </Match>
+    </Switch>
+  )
+}
 
 const ChartCopyButton = (props: { item: RegistryEntry | undefined }) => {
-	const [isCopied, setIsCopied] = createSignal(false);
+  const [isCopied, setIsCopied] = createSignal(false)
 
-	const copyToClipboard = async () => {
-		setIsCopied(true);
-		// @ts-expect-error
-		await navigator.clipboard.writeText(props.item?.files[0].content);
-		setTimeout(() => setIsCopied(false), 2000);
-	};
+  const copyToClipboard = async () => {
+    setIsCopied(true)
+    // @ts-expect-error
+    await navigator.clipboard.writeText(props.item?.files[0].content)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
 
-	return (
-		<Button
-			variant="outline"
-			size="icon"
-			onClick={copyToClipboard}
-			class="size-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:size-3"
-		>
-			<Show
-				when={isCopied()}
-				fallback={
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-							<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
-						</g>
-						<title>Copy</title>
-					</svg>
-				}
-			>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-						<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
-					</g>
-					<title>Copied</title>
-				</svg>
-			</Show>
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={copyToClipboard}
+      class="text-foreground hover:bg-muted dark:text-foreground size-6 rounded-[6px] bg-transparent shadow-none [&_svg]:size-3"
+    >
+      <Show
+        when={isCopied()}
+        fallback={
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+              <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
+            </g>
+            <title>Copy</title>
+          </svg>
+        }
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+            <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
+          </g>
+          <title>Copied</title>
+        </svg>
+      </Show>
+    </Button>
+  )
+}
diff --git a/docs/src/components/command-menu.tsx b/docs/src/components/command-menu.tsx
index dfb9a01b..e2b821ca 100644
--- a/docs/src/components/command-menu.tsx
+++ b/docs/src/components/command-menu.tsx
@@ -1,252 +1,257 @@
-import type { TNavItem } from "@/config/docs";
-import { docsConfig } from "@/config/docs";
-import { Button } from "@/registry/tailwindcss/ui/button";
 import {
-	CommandDialog,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/registry/tailwindcss/ui/command";
-import { useColorMode } from "@kobalte/core";
-import { useNavigate } from "@solidjs/router";
-import type { JSXElement } from "solid-js";
-import { For, createEffect, createSignal, onCleanup } from "solid-js";
-
-type Option = TNavItem & { value: string; icon: JSXElement };
+  For,
+  createEffect,
+  createSignal,
+  onCleanup,
+  type JSXElement,
+} from "solid-js"
+import { useNavigate } from "@solidjs/router"
+import { useColorMode } from "@kobalte/core"
+
+import { docsConfig, type TNavItem } from "@/config/docs"
+import { Button } from "@/registry/tailwindcss/ui/button"
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/tailwindcss/ui/command"
+
+type Option = TNavItem & { value: string; icon: JSXElement }
 
 type List = {
-	label: string;
-	options: Option[];
-};
+  label: string
+  options: Option[]
+}
 
 const CommandMenu = () => {
-	const navigate = useNavigate();
-	const { setColorMode } = useColorMode();
-
-	const data = () => {
-		const temp: List[] = [];
-
-		temp.push({
-			label: "Links",
-			options: docsConfig.mainNav.map((e) => ({
-				...e,
-				value: e.title,
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="currentColor"
-							fill-rule="evenodd"
-							d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172C21 19.657 21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828C18.657 2 16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M8 9.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 4a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"
-							clip-rule="evenodd"
-						/>
-						<title>{}</title>
-					</svg>
-				),
-			})),
-		});
-
-		// biome-ignore lint/complexity/noForEach: <explanation>
-		docsConfig.sidebarNav.forEach((e) =>
-			temp.push({
-				label: e.title,
-				options: e.items.map((e) => ({
-					...e,
-					value: e.title,
-					icon: (
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="currentColor"
-								fill-rule="evenodd"
-								d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172C21 19.657 21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828C18.657 2 16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M8 9.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 4a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"
-								clip-rule="evenodd"
-							/>
-							<title>Doc</title>
-						</svg>
-					),
-				})),
-			}),
-		);
-
-		temp.push({
-			label: "Theme",
-			options: [
-				{
-					title: "Light",
-					value: "light",
-					icon: (
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
-							/>
-							<title>Light mode</title>
-						</svg>
-					),
-				},
-				{
-					title: "Dark",
-					value: "dark",
-					icon: (
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
-							/>
-							<title>Dark mode</title>
-						</svg>
-					),
-				},
-				{
-					title: "System",
-					value: "system",
-					icon: (
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M3 19h18M5 7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"
-							/>
-							<title>System mode</title>
-						</svg>
-					),
-				},
-			],
-		});
-
-		return temp;
-	};
-
-	const [open, setOpen] = createSignal(false);
-
-	createEffect(() => {
-		const down = (e: KeyboardEvent) => {
-			if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
-				if (
-					(e.target instanceof HTMLElement && e.target.isContentEditable) ||
-					e.target instanceof HTMLInputElement ||
-					e.target instanceof HTMLTextAreaElement ||
-					e.target instanceof HTMLSelectElement
-				) {
-					return;
-				}
-
-				e.preventDefault();
-				setOpen((open) => !open);
-			}
-		};
-
-		document.addEventListener("keydown", down);
-
-		onCleanup(() => {
-			document.removeEventListener("keydown", down);
-		});
-	});
-
-	return (
-		<>
-			<Button
-				variant="outline"
-				class="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
-				onClick={() => setOpen(true)}
-			>
-				<span class="hidden lg:inline-flex">Search documentation...</span>
-				<span class="inline-flex lg:hidden">Search...</span>
-				<kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium opacity-100 sm:flex">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-3.5"
-						viewBox="0 0 32 32"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							d="M19 19v4a4 4 0 1 0 4-4zm0 0v-6m0 6h-6m6-6V9a4 4 0 1 1 4 4zm0 0h-6m-4 0h-.007m0 0A4 4 0 1 1 13 9v4m-4.007 0H13m0 0v6m0 0v4a4 4 0 1 1-4-4z"
-						/>
-						<title>Command</title>
-					</svg>
-					<span>K</span>
-				</kbd>
-			</Button>
-			<CommandDialog
-				class="rounded-lg border shadow-md"
-				open={open()}
-				onOpenChange={setOpen}
-			>
-				<CommandInput placeholder="Type a command or search..." />
-				<CommandList>
-					<CommandEmpty>No results found.</CommandEmpty>
-					<For each={data()}>
-						{(item) => (
-							<CommandGroup heading={item.label}>
-								<For each={item.options}>
-									{(item) => (
-										<CommandItem
-											disabled={item.disabled}
-											onSelect={() => {
-												switch (item.value) {
-													case "light":
-														setColorMode("light");
-														break;
-													case "dark":
-														setColorMode("dark");
-														break;
-													case "system":
-														setColorMode("system");
-														break;
-													default:
-														// @ts-expect-error
-														navigate(item.href);
-														break;
-												}
-												setOpen(false);
-											}}
-										>
-											{item.icon}
-											<span>{item.title}</span>
-										</CommandItem>
-									)}
-								</For>
-							</CommandGroup>
-						)}
-					</For>
-				</CommandList>
-			</CommandDialog>
-		</>
-	);
-};
-
-export default CommandMenu;
+  const navigate = useNavigate()
+  const { setColorMode } = useColorMode()
+
+  const data = () => {
+    const temp: List[] = []
+
+    temp.push({
+      label: "Links",
+      options: docsConfig.mainNav.map((e) => ({
+        ...e,
+        value: e.title,
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172C21 19.657 21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828C18.657 2 16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M8 9.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 4a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"
+              clip-rule="evenodd"
+            />
+            <title>{}</title>
+          </svg>
+        ),
+      })),
+    })
+
+    // biome-ignore lint/complexity/noForEach: <explanation>
+    docsConfig.sidebarNav.forEach((e) =>
+      temp.push({
+        label: e.title,
+        options: e.items.map((e) => ({
+          ...e,
+          value: e.title,
+          icon: (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172C21 19.657 21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828C18.657 2 16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M8 9.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 4a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z"
+                clip-rule="evenodd"
+              />
+              <title>Doc</title>
+            </svg>
+          ),
+        })),
+      })
+    )
+
+    temp.push({
+      label: "Theme",
+      options: [
+        {
+          title: "Light",
+          value: "light",
+          icon: (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
+              />
+              <title>Light mode</title>
+            </svg>
+          ),
+        },
+        {
+          title: "Dark",
+          value: "dark",
+          icon: (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
+              />
+              <title>Dark mode</title>
+            </svg>
+          ),
+        },
+        {
+          title: "System",
+          value: "system",
+          icon: (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 19h18M5 7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"
+              />
+              <title>System mode</title>
+            </svg>
+          ),
+        },
+      ],
+    })
+
+    return temp
+  }
+
+  const [open, setOpen] = createSignal(false)
+
+  createEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+
+    onCleanup(() => {
+      document.removeEventListener("keydown", down)
+    })
+  })
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        class="bg-muted/50 text-muted-foreground relative h-8 w-full justify-start rounded-[0.5rem] text-sm font-normal shadow-none sm:pr-12 md:w-40 lg:w-64"
+        onClick={() => setOpen(true)}
+      >
+        <span class="hidden lg:inline-flex">Search documentation...</span>
+        <span class="inline-flex lg:hidden">Search...</span>
+        <kbd class="bg-muted pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium opacity-100 sm:flex">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 32 32"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              d="M19 19v4a4 4 0 1 0 4-4zm0 0v-6m0 6h-6m6-6V9a4 4 0 1 1 4 4zm0 0h-6m-4 0h-.007m0 0A4 4 0 1 1 13 9v4m-4.007 0H13m0 0v6m0 0v4a4 4 0 1 1-4-4z"
+            />
+            <title>Command</title>
+          </svg>
+          <span>K</span>
+        </kbd>
+      </Button>
+      <CommandDialog
+        class="rounded-lg border shadow-md"
+        open={open()}
+        onOpenChange={setOpen}
+      >
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <For each={data()}>
+            {(item) => (
+              <CommandGroup heading={item.label}>
+                <For each={item.options}>
+                  {(item) => (
+                    <CommandItem
+                      disabled={item.disabled}
+                      onSelect={() => {
+                        switch (item.value) {
+                          case "light":
+                            setColorMode("light")
+                            break
+                          case "dark":
+                            setColorMode("dark")
+                            break
+                          case "system":
+                            setColorMode("system")
+                            break
+                          default:
+                            // @ts-expect-error
+                            navigate(item.href)
+                            break
+                        }
+                        setOpen(false)
+                      }}
+                    >
+                      {item.icon}
+                      <span>{item.title}</span>
+                    </CommandItem>
+                  )}
+                </For>
+              </CommandGroup>
+            )}
+          </For>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
+
+export default CommandMenu
diff --git a/docs/src/components/component-installation.tsx b/docs/src/components/component-installation.tsx
index 0ad8e049..f867a1e0 100644
--- a/docs/src/components/component-installation.tsx
+++ b/docs/src/components/component-installation.tsx
@@ -1,52 +1,53 @@
+import { children, type ParentProps } from "solid-js"
+
 import {
-	Tabs,
-	TabsContent,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/registry/tailwindcss/ui/tabs";
-import { type ParentProps, children } from "solid-js";
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/tailwindcss/ui/tabs"
 
 const ComponentInstallation = (props: ParentProps) => {
-	const childrens = children(() => props.children).toArray();
+  const childrens = children(() => props.children).toArray()
 
-	return (
-		<Tabs defaultValue="cli" class="relative mt-6 w-full">
-			<TabsList class="bg-transparent border-b rounded-none">
-				<TabsTrigger value="cli" class="w-fit">
-					CLI
-				</TabsTrigger>
-				<TabsTrigger value="manual" class="w-fit">
-					Manual
-				</TabsTrigger>
-				<TabsIndicator variant="underline" />
-			</TabsList>
-			<TabsContent
-				class="relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold"
-				value="cli"
-			>
-				{childrens[0]}
-			</TabsContent>
-			<TabsContent
-				value="manual"
-				class="relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold"
-			>
-				<Tabs defaultValue="tw">
-					<TabsList class="mt-6 w-fit">
-						<TabsTrigger value="tw" class="w-[110px]">
-							TailwindCSS
-						</TabsTrigger>
-						<TabsTrigger value="uno" class="w-[110px]">
-							UnoCSS
-						</TabsTrigger>
-						<TabsIndicator />
-					</TabsList>
-					<TabsContent value="tw">{childrens[1]}</TabsContent>
-					<TabsContent value="uno">{childrens[2]}</TabsContent>
-				</Tabs>
-			</TabsContent>
-		</Tabs>
-	);
-};
+  return (
+    <Tabs defaultValue="cli" class="relative mt-6 w-full">
+      <TabsList class="rounded-none border-b bg-transparent">
+        <TabsTrigger value="cli" class="w-fit">
+          CLI
+        </TabsTrigger>
+        <TabsTrigger value="manual" class="w-fit">
+          Manual
+        </TabsTrigger>
+        <TabsIndicator variant="underline" />
+      </TabsList>
+      <TabsContent
+        class="relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold"
+        value="cli"
+      >
+        {childrens[0]}
+      </TabsContent>
+      <TabsContent
+        value="manual"
+        class="relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold"
+      >
+        <Tabs defaultValue="tw">
+          <TabsList class="mt-6 w-fit">
+            <TabsTrigger value="tw" class="w-[110px]">
+              TailwindCSS
+            </TabsTrigger>
+            <TabsTrigger value="uno" class="w-[110px]">
+              UnoCSS
+            </TabsTrigger>
+            <TabsIndicator />
+          </TabsList>
+          <TabsContent value="tw">{childrens[1]}</TabsContent>
+          <TabsContent value="uno">{childrens[2]}</TabsContent>
+        </Tabs>
+      </TabsContent>
+    </Tabs>
+  )
+}
 
-export default ComponentInstallation;
+export default ComponentInstallation
diff --git a/docs/src/components/component-preview.tsx b/docs/src/components/component-preview.tsx
index 2ab3aa75..172d122f 100644
--- a/docs/src/components/component-preview.tsx
+++ b/docs/src/components/component-preview.tsx
@@ -1,103 +1,104 @@
-import { Index } from "@/__registry__";
 import {
-	Tabs,
-	TabsContent,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/registry/tailwindcss/ui/tabs";
+  Show,
+  createMemo,
+  mergeProps,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
+import { Index } from "@/__registry__"
+
 import {
-	type JSX,
-	type ParentProps,
-	Show,
-	createMemo,
-	mergeProps,
-} from "solid-js";
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/tailwindcss/ui/tabs"
 
 type Props = {
-	name: string;
-	block?: boolean;
-};
+  name: string
+  block?: boolean
+}
 
 const ComponentPreview = (props: ParentProps<Props>) => {
-	const merge = mergeProps({ block: false }, props);
-	const Component = createMemo(
-		() => Index.tailwindcss[props.name].component as JSX.Element,
-	);
+  const merge = mergeProps({ block: false }, props)
+  const Component = createMemo(
+    () => Index.tailwindcss[props.name].component as JSX.Element
+  )
 
-	return (
-		<Show
-			when={!merge.block}
-			fallback={
-				<div class="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
-					<img
-						src={`/images/blocks/${props.name}.png`}
-						alt={props.name}
-						width={1440}
-						height={900}
-						class="absolute left-0 top-0 z-20 w-[970px] max-w-none bg-background dark:hidden sm:w-[1280px] md:hidden md:dark:hidden"
-					/>
-					<img
-						src={`/images/blocks/${props.name}-dark.png`}
-						alt={props.name}
-						width={1440}
-						height={900}
-						class="absolute left-0 top-0 z-20 hidden w-[970px] max-w-none bg-background dark:block sm:w-[1280px] md:hidden md:dark:hidden"
-					/>
-					<div class="absolute inset-0 hidden w-[1600px] bg-background md:block">
-						<iframe
-							src={`/blocks/${props.name}`}
-							class="size-full"
-							title={props.name}
-							loading="lazy"
-						/>
-					</div>
-				</div>
-			}
-		>
-			<div class="group relative my-4 flex flex-col space-y-2 [&_.preview>div:not(:has(table))]:sm:max-w-[70%]">
-				<Tabs defaultValue="preview">
-					<div class="pb-3">
-						<TabsList class="bg-transparent border-b rounded-none">
-							<TabsTrigger value="preview" class="w-fit">
-								Preview
-							</TabsTrigger>
-							<TabsTrigger value="code" class="w-fit">
-								Code
-							</TabsTrigger>
-							<TabsIndicator variant="underline" />
-						</TabsList>
-					</div>
-					<TabsContent
-						value="preview"
-						class="relative rounded-md preview flex min-h-[350px] w-full justify-center p-10 items-center border has-[table:not([data-scope=date-picker])]:border-none has-[table:not([data-scope=date-picker])]:p-0"
-					>
-						<Show
-							when={Component()}
-							fallback={
-								<p class="text-sm text-muted-foreground">
-									Component{" "}
-									<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
-										{props.name}
-									</code>{" "}
-									not found in registry.
-								</p>
-							}
-						>
-							{Component()}
-						</Show>
-					</TabsContent>
-					<TabsContent value="code">
-						<div class="flex flex-col space-y-4">
-							<div class="w-full rounded-md [&_pre]:!my-0 [&_pre]:!max-h-[350px] [&_pre]:overflow-auto relative [&>[data-raw-code]]:mt-0">
-								{props.children}
-							</div>
-						</div>
-					</TabsContent>
-				</Tabs>
-			</div>
-		</Show>
-	);
-};
+  return (
+    <Show
+      when={!merge.block}
+      fallback={
+        <div class="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
+          <img
+            src={`/images/blocks/${props.name}.png`}
+            alt={props.name}
+            width={1440}
+            height={900}
+            class="bg-background absolute left-0 top-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
+          />
+          <img
+            src={`/images/blocks/${props.name}-dark.png`}
+            alt={props.name}
+            width={1440}
+            height={900}
+            class="bg-background absolute left-0 top-0 z-20 hidden w-[970px] max-w-none sm:w-[1280px] md:hidden dark:block md:dark:hidden"
+          />
+          <div class="bg-background absolute inset-0 hidden w-[1600px] md:block">
+            <iframe
+              src={`/blocks/${props.name}`}
+              class="size-full"
+              title={props.name}
+              loading="lazy"
+            />
+          </div>
+        </div>
+      }
+    >
+      <div class="group relative my-4 flex flex-col space-y-2 [&_.preview>div:not(:has(table))]:sm:max-w-[70%]">
+        <Tabs defaultValue="preview">
+          <div class="pb-3">
+            <TabsList class="rounded-none border-b bg-transparent">
+              <TabsTrigger value="preview" class="w-fit">
+                Preview
+              </TabsTrigger>
+              <TabsTrigger value="code" class="w-fit">
+                Code
+              </TabsTrigger>
+              <TabsIndicator variant="underline" />
+            </TabsList>
+          </div>
+          <TabsContent
+            value="preview"
+            class="preview relative flex min-h-[350px] w-full items-center justify-center rounded-md border p-10 has-[table:not([data-scope=date-picker])]:border-none has-[table:not([data-scope=date-picker])]:p-0"
+          >
+            <Show
+              when={Component()}
+              fallback={
+                <p class="text-muted-foreground text-sm">
+                  Component{" "}
+                  <code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+                    {props.name}
+                  </code>{" "}
+                  not found in registry.
+                </p>
+              }
+            >
+              {Component()}
+            </Show>
+          </TabsContent>
+          <TabsContent value="code">
+            <div class="flex flex-col space-y-4">
+              <div class="relative w-full rounded-md [&>[data-raw-code]]:mt-0 [&_pre]:!my-0 [&_pre]:!max-h-[350px] [&_pre]:overflow-auto">
+                {props.children}
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </Show>
+  )
+}
 
-export default ComponentPreview;
+export default ComponentPreview
diff --git a/docs/src/components/copy-button.tsx b/docs/src/components/copy-button.tsx
index 0a6d3416..e09147b8 100644
--- a/docs/src/components/copy-button.tsx
+++ b/docs/src/components/copy-button.tsx
@@ -1,69 +1,70 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { Show, createSignal } from "solid-js";
+import { Show, createSignal } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 type Props = {
-	rawString: string;
-	withMeta: boolean;
-};
+  rawString: string
+  withMeta: boolean
+}
 
 export const CopyButton = (props: Props) => {
-	const [isCopied, setIsCopied] = createSignal(false);
+  const [isCopied, setIsCopied] = createSignal(false)
 
-	const copyToClipboard = async () => {
-		setIsCopied(true);
-		await navigator.clipboard.writeText(props.rawString);
-		setTimeout(() => setIsCopied(false), 2000);
-	};
+  const copyToClipboard = async () => {
+    setIsCopied(true)
+    await navigator.clipboard.writeText(props.rawString)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
 
-	return (
-		<button
-			type="button"
-			class={cn(
-				"p-1 rounded-md absolute top-4 right-4 text-white hover:bg-neutral-700/70 transition-colors",
-				props.withMeta && "top-16",
-			)}
-			onClick={copyToClipboard}
-		>
-			<Show
-				when={isCopied()}
-				fallback={
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-3.5"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-							<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
-						</g>
-						<title>Copy</title>
-					</svg>
-				}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-3.5"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-						<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
-					</g>
-					<title>Copied</title>
-				</svg>
-			</Show>
-		</button>
-	);
-};
+  return (
+    <button
+      type="button"
+      class={cn(
+        "absolute right-4 top-4 rounded-md p-1 text-white transition-colors hover:bg-neutral-700/70",
+        props.withMeta && "top-16"
+      )}
+      onClick={copyToClipboard}
+    >
+      <Show
+        when={isCopied()}
+        fallback={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+              <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
+            </g>
+            <title>Copy</title>
+          </svg>
+        }
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-3.5"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+            <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
+          </g>
+          <title>Copied</title>
+        </svg>
+      </Show>
+    </button>
+  )
+}
diff --git a/docs/src/components/example-nav.tsx b/docs/src/components/example-nav.tsx
index ec13d433..a6abf901 100644
--- a/docs/src/components/example-nav.tsx
+++ b/docs/src/components/example-nav.tsx
@@ -1,47 +1,48 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { useLocation } from "@solidjs/router";
-import { For } from "solid-js";
+import { For } from "solid-js"
+import { useLocation } from "@solidjs/router"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 const examples = [
-	{
-		name: "Mail",
-		href: "/examples/mail",
-	},
-	{
-		name: "Cards",
-		href: "/examples/cards",
-	},
-	{
-		name: "Authentication",
-		href: "/examples/authentication",
-	},
-];
+  {
+    name: "Mail",
+    href: "/examples/mail",
+  },
+  {
+    name: "Cards",
+    href: "/examples/cards",
+  },
+  {
+    name: "Authentication",
+    href: "/examples/authentication",
+  },
+]
 
 const ExampleNav = () => {
-	const location = useLocation();
+  const location = useLocation()
 
-	return (
-		<div class="relative">
-			<div class="flex items-center">
-				<For each={examples}>
-					{(item, index) => (
-						<a
-							href={item.href}
-							class={cn(
-								"flex h-7 items-center justify-center rounded-full px-4 text-center text-sm font-medium transition-colors hover:text-primary",
-								location.pathname.startsWith(item.href) ||
-									(index() === 0 && location.pathname === "/")
-									? "bg-muted text-primary"
-									: "text-muted-foreground",
-							)}
-						>
-							{item.name}
-						</a>
-					)}
-				</For>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="relative">
+      <div class="flex items-center">
+        <For each={examples}>
+          {(item, index) => (
+            <a
+              href={item.href}
+              class={cn(
+                "hover:text-primary flex h-7 items-center justify-center rounded-full px-4 text-center text-sm font-medium transition-colors",
+                location.pathname.startsWith(item.href) ||
+                  (index() === 0 && location.pathname === "/")
+                  ? "bg-muted text-primary"
+                  : "text-muted-foreground"
+              )}
+            >
+              {item.name}
+            </a>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}
 
-export default ExampleNav;
+export default ExampleNav
diff --git a/docs/src/components/footer.tsx b/docs/src/components/footer.tsx
index 27c37326..822d9034 100644
--- a/docs/src/components/footer.tsx
+++ b/docs/src/components/footer.tsx
@@ -1,41 +1,41 @@
-import { siteConfig } from "@/config/site";
+import { siteConfig } from "@/config/site"
 
 export const Footer = () => {
-	return (
-		<footer class="border-grid border-t py-6 md:px-8 md:py-0">
-			<div class="container-wrapper">
-				<div class="container py-4">
-					<div class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
-						Built & designed by{" "}
-						<a
-							href={siteConfig.links.shadcn.twitter}
-							target="_blank"
-							rel="noreferrer"
-							class="font-medium underline underline-offset-4"
-						>
-							shadcn
-						</a>
-						. Ported to Solid by{" "}
-						<a
-							href={siteConfig.links.facebook}
-							target="_blank"
-							rel="noreferrer"
-							class="font-medium underline underline-offset-4"
-						>
-							hngngn
-						</a>
-						. The source code is available on{" "}
-						<a
-							href={siteConfig.links.github}
-							target="_blank"
-							rel="noreferrer"
-							class="font-medium underline underline-offset-4"
-						>
-							GitHub.
-						</a>
-					</div>
-				</div>
-			</div>
-		</footer>
-	);
-};
+  return (
+    <footer class="border-grid border-t py-6 md:px-8 md:py-0">
+      <div class="container-wrapper">
+        <div class="container py-4">
+          <div class="text-muted-foreground text-balance text-center text-sm leading-loose md:text-left">
+            Built & designed by{" "}
+            <a
+              href={siteConfig.links.shadcn.twitter}
+              target="_blank"
+              rel="noreferrer"
+              class="font-medium underline underline-offset-4"
+            >
+              shadcn
+            </a>
+            . Ported to Solid by{" "}
+            <a
+              href={siteConfig.links.facebook}
+              target="_blank"
+              rel="noreferrer"
+              class="font-medium underline underline-offset-4"
+            >
+              hngngn
+            </a>
+            . The source code is available on{" "}
+            <a
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noreferrer"
+              class="font-medium underline underline-offset-4"
+            >
+              GitHub.
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/docs/src/components/header.tsx b/docs/src/components/header.tsx
index 2633c263..9cbf1afe 100644
--- a/docs/src/components/header.tsx
+++ b/docs/src/components/header.tsx
@@ -1,50 +1,51 @@
-import CommandMenu from "@/components/command-menu";
-import { siteConfig } from "@/config/site";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { MobileNavbar } from "./mobile-navbar";
-import ModeToggle from "./mode-toggle";
-import { Navbar } from "./navbar";
+import { siteConfig } from "@/config/site"
+import CommandMenu from "@/components/command-menu"
+import { Button } from "@/registry/tailwindcss/ui/button"
+
+import { MobileNavbar } from "./mobile-navbar"
+import ModeToggle from "./mode-toggle"
+import { Navbar } from "./navbar"
 
 export const Header = () => {
-	return (
-		<header class="border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-			<div class="container-wrapper">
-				<div class="container flex h-14 items-center">
-					<Navbar />
-					<MobileNavbar />
-					<div class="flex flex-1 items-center justify-between gap-2 md:justify-end">
-						<div class="w-full flex-1 md:w-auto md:flex-none">
-							<CommandMenu />
-						</div>
-						<div class="flex items-center gap-0.5">
-							<Button
-								as="a"
-								variant="ghost"
-								size="icon"
-								href={siteConfig.links.github}
-								target="_blank"
-								rel="noreferrer"
-								class="size-8 px-0"
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 15 15"
-									class="size-4"
-								>
-									<path
-										fill="currentColor"
-										fill-rule="evenodd"
-										d="M7.5.25a7.25 7.25 0 0 0-2.292 14.13c.363.066.495-.158.495-.35c0-.172-.006-.628-.01-1.233c-2.016.438-2.442-.972-2.442-.972c-.33-.838-.805-1.06-.805-1.06c-.658-.45.05-.441.05-.441c.728.051 1.11.747 1.11.747c.647 1.108 1.697.788 2.11.602c.066-.468.254-.788.46-.969c-1.61-.183-3.302-.805-3.302-3.583a2.8 2.8 0 0 1 .747-1.945c-.075-.184-.324-.92.07-1.92c0 0 .61-.194 1.994.744A7 7 0 0 1 7.5 3.756A7 7 0 0 1 9.315 4c1.384-.938 1.992-.743 1.992-.743c.396.998.147 1.735.072 1.919c.465.507.745 1.153.745 1.945c0 2.785-1.695 3.398-3.31 3.577c.26.224.492.667.492 1.343c0 .97-.009 1.751-.009 1.989c0 .194.131.42.499.349A7.25 7.25 0 0 0 7.499.25"
-										clip-rule="evenodd"
-									/>
-									<title>Shadcn-solid Github link</title>
-								</svg>
-							</Button>
-						</div>
-					</div>
-					<ModeToggle />
-				</div>
-			</div>
-		</header>
-	);
-};
+  return (
+    <header class="border-grid bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur">
+      <div class="container-wrapper">
+        <div class="container flex h-14 items-center">
+          <Navbar />
+          <MobileNavbar />
+          <div class="flex flex-1 items-center justify-between gap-2 md:justify-end">
+            <div class="w-full flex-1 md:w-auto md:flex-none">
+              <CommandMenu />
+            </div>
+            <div class="flex items-center gap-0.5">
+              <Button
+                as="a"
+                variant="ghost"
+                size="icon"
+                href={siteConfig.links.github}
+                target="_blank"
+                rel="noreferrer"
+                class="size-8 px-0"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 15 15"
+                  class="size-4"
+                >
+                  <path
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    d="M7.5.25a7.25 7.25 0 0 0-2.292 14.13c.363.066.495-.158.495-.35c0-.172-.006-.628-.01-1.233c-2.016.438-2.442-.972-2.442-.972c-.33-.838-.805-1.06-.805-1.06c-.658-.45.05-.441.05-.441c.728.051 1.11.747 1.11.747c.647 1.108 1.697.788 2.11.602c.066-.468.254-.788.46-.969c-1.61-.183-3.302-.805-3.302-3.583a2.8 2.8 0 0 1 .747-1.945c-.075-.184-.324-.92.07-1.92c0 0 .61-.194 1.994.744A7 7 0 0 1 7.5 3.756A7 7 0 0 1 9.315 4c1.384-.938 1.992-.743 1.992-.743c.396.998.147 1.735.072 1.919c.465.507.745 1.153.745 1.945c0 2.785-1.695 3.398-3.31 3.577c.26.224.492.667.492 1.343c0 .97-.009 1.751-.009 1.989c0 .194.131.42.499.349A7.25 7.25 0 0 0 7.499.25"
+                    clip-rule="evenodd"
+                  />
+                  <title>Shadcn-solid Github link</title>
+                </svg>
+              </Button>
+            </div>
+          </div>
+          <ModeToggle />
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/docs/src/components/logo.tsx b/docs/src/components/logo.tsx
index 47005217..3831009a 100644
--- a/docs/src/components/logo.tsx
+++ b/docs/src/components/logo.tsx
@@ -1,32 +1,32 @@
-import type { ComponentProps, VoidProps } from "solid-js";
+import type { ComponentProps, VoidProps } from "solid-js"
 
 export const Logo = (props: VoidProps<ComponentProps<"svg">>) => {
-	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
-			<rect width="256" height="256" fill="none" />
-			<line
-				x1="208"
-				y1="128"
-				x2="128"
-				y2="208"
-				fill="none"
-				stroke="#446b9e"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="16"
-			/>
-			<line
-				x1="192"
-				y1="40"
-				x2="40"
-				y2="192"
-				fill="none"
-				stroke="#446b9e"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="16"
-			/>
-			<title>Shadcn-solid Logo</title>
-		</svg>
-	);
-};
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <rect width="256" height="256" fill="none" />
+      <line
+        x1="208"
+        y1="128"
+        x2="128"
+        y2="208"
+        fill="none"
+        stroke="#446b9e"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <line
+        x1="192"
+        y1="40"
+        x2="40"
+        y2="192"
+        fill="none"
+        stroke="#446b9e"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <title>Shadcn-solid Logo</title>
+    </svg>
+  )
+}
diff --git a/docs/src/components/mdx-components.tsx b/docs/src/components/mdx-components.tsx
index b714f41d..044933e8 100644
--- a/docs/src/components/mdx-components.tsx
+++ b/docs/src/components/mdx-components.tsx
@@ -1,152 +1,154 @@
-import ComponentInstallation from "@/components/component-installation";
-import ComponentPreview from "@/components/component-preview";
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { Alert, AlertDescription } from "@/registry/tailwindcss/ui/alert";
-import { type ComponentProps, Show, splitProps } from "solid-js";
-import { CopyButton } from "./copy-button";
-import type { MDXComponents } from "./mdx";
-import PackageManagerCopyButton from "./package-manager-copy-button";
+import { Show, splitProps, type ComponentProps } from "solid-js"
+
+import ComponentInstallation from "@/components/component-installation"
+import ComponentPreview from "@/components/component-preview"
+import { cn } from "@/registry/tailwindcss/libs/cn"
+import { Alert, AlertDescription } from "@/registry/tailwindcss/ui/alert"
+
+import { CopyButton } from "./copy-button"
+import type { MDXComponents } from "./mdx"
+import PackageManagerCopyButton from "./package-manager-copy-button"
 
 export const mdxComponents: Partial<MDXComponents> | Record<string, unknown> = {
-	a: (props) => (
-		<a class="font-medium underline underline-offset-4" {...props} />
-	),
-	code: (props) => (
-		<code
-			class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm"
-			{...props}
-		/>
-	),
-	h1: (props) => (
-		<h1 class="font-heading mt-2 scroll-m-20 text-4xl font-bold" {...props} />
-	),
-	h2: (props) => (
-		<h2
-			class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
-			{...props}
-		/>
-	),
-	h3: (props) => (
-		<h3
-			class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-			{...props}
-		/>
-	),
-	h4: (props) => (
-		<h4
-			class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-			{...props}
-		/>
-	),
-	h5: (props) => (
-		<h5
-			class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-			{...props}
-		/>
-	),
-	h6: (props) => (
-		<h6
-			class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-			{...props}
-		/>
-	),
-	li: (props) => <li class="mt-2" {...props} />,
-	ol: (props) => <ol class="my-6 ml-6 list-decimal" {...props} />,
-	p: (props) => (
-		<p class="break-words leading-7 [&:not(:first-child)]:mt-6" {...props} />
-	),
-	ul: (props) => <ul class="my-6 ml-6 list-disc" {...props} />,
-	pre: (
-		props: ComponentProps<"pre"> & {
-			rawString: string;
-			npmCommand: string;
-			yarnCommand: string;
-			pnpmCommand: string;
-			bunCommand: string;
-			withMeta: boolean;
-		},
-	) => {
-		const [local, rest] = splitProps(props, [
-			"rawString",
-			"npmCommand",
-			"yarnCommand",
-			"pnpmCommand",
-			"bunCommand",
-			"withMeta",
-		]);
-		return (
-			<>
-				<pre
-					class="mb-4 mt-6 max-h-[650px] overflow-x-auto py-4 rounded-lg border bg-[#101010] text-white"
-					{...rest}
-				/>
-				<Show when={local.rawString && !local.npmCommand}>
-					<CopyButton rawString={local.rawString} withMeta={local.withMeta} />
-				</Show>
-				<Show
-					when={
-						local.npmCommand &&
-						local.yarnCommand &&
-						local.pnpmCommand &&
-						local.bunCommand
-					}
-				>
-					<PackageManagerCopyButton
-						npmCommand={local.npmCommand}
-						yarnCommand={local.yarnCommand}
-						pnpmCommand={local.pnpmCommand}
-						bunCommand={local.bunCommand}
-					/>
-				</Show>
-			</>
-		);
-	},
-	Step: (props: ComponentProps<"div">) => (
-		<div
-			class="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
-			{...props}
-		/>
-	),
-	StepItem: (props: ComponentProps<"h3">) => (
-		<h3
-			class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
-			{...props}
-		/>
-	),
-	table: (props) => (
-		<div class="my-6 w-full overflow-y-auto">
-			<table
-				class={cn(
-					"relative w-full overflow-hidden border-none text-sm",
-					props.class,
-				)}
-				{...props}
-			/>
-		</div>
-	),
-	tr: (props) => (
-		<tr class={cn("last:border-b-none m-0 border-b", props.class)} {...props} />
-	),
-	th: (props) => (
-		<th
-			class={cn(
-				"px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
-				props.class,
-			)}
-			{...props}
-		/>
-	),
-	td: (props) => (
-		<td
-			class={cn(
-				"px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
-				props.class,
-			)}
-			{...props}
-		/>
-	),
-	ComponentPreview,
-	ComponentInstallation,
-	Alert,
-	AlertDescription,
-};
+  a: (props) => (
+    <a class="font-medium underline underline-offset-4" {...props} />
+  ),
+  code: (props) => (
+    <code
+      class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
+      {...props}
+    />
+  ),
+  h1: (props) => (
+    <h1 class="font-heading mt-2 scroll-m-20 text-4xl font-bold" {...props} />
+  ),
+  h2: (props) => (
+    <h2
+      class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
+      {...props}
+    />
+  ),
+  h3: (props) => (
+    <h3
+      class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
+      {...props}
+    />
+  ),
+  h4: (props) => (
+    <h4
+      class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
+      {...props}
+    />
+  ),
+  h5: (props) => (
+    <h5
+      class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
+      {...props}
+    />
+  ),
+  h6: (props) => (
+    <h6
+      class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
+      {...props}
+    />
+  ),
+  li: (props) => <li class="mt-2" {...props} />,
+  ol: (props) => <ol class="my-6 ml-6 list-decimal" {...props} />,
+  p: (props) => (
+    <p class="break-words leading-7 [&:not(:first-child)]:mt-6" {...props} />
+  ),
+  ul: (props) => <ul class="my-6 ml-6 list-disc" {...props} />,
+  pre: (
+    props: ComponentProps<"pre"> & {
+      rawString: string
+      npmCommand: string
+      yarnCommand: string
+      pnpmCommand: string
+      bunCommand: string
+      withMeta: boolean
+    }
+  ) => {
+    const [local, rest] = splitProps(props, [
+      "rawString",
+      "npmCommand",
+      "yarnCommand",
+      "pnpmCommand",
+      "bunCommand",
+      "withMeta",
+    ])
+    return (
+      <>
+        <pre
+          class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-[#101010] py-4 text-white"
+          {...rest}
+        />
+        <Show when={local.rawString && !local.npmCommand}>
+          <CopyButton rawString={local.rawString} withMeta={local.withMeta} />
+        </Show>
+        <Show
+          when={
+            local.npmCommand &&
+            local.yarnCommand &&
+            local.pnpmCommand &&
+            local.bunCommand
+          }
+        >
+          <PackageManagerCopyButton
+            npmCommand={local.npmCommand}
+            yarnCommand={local.yarnCommand}
+            pnpmCommand={local.pnpmCommand}
+            bunCommand={local.bunCommand}
+          />
+        </Show>
+      </>
+    )
+  },
+  Step: (props: ComponentProps<"div">) => (
+    <div
+      class="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+      {...props}
+    />
+  ),
+  StepItem: (props: ComponentProps<"h3">) => (
+    <h3
+      class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight"
+      {...props}
+    />
+  ),
+  table: (props) => (
+    <div class="my-6 w-full overflow-y-auto">
+      <table
+        class={cn(
+          "relative w-full overflow-hidden border-none text-sm",
+          props.class
+        )}
+        {...props}
+      />
+    </div>
+  ),
+  tr: (props) => (
+    <tr class={cn("last:border-b-none m-0 border-b", props.class)} {...props} />
+  ),
+  th: (props) => (
+    <th
+      class={cn(
+        "px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        props.class
+      )}
+      {...props}
+    />
+  ),
+  td: (props) => (
+    <td
+      class={cn(
+        "px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        props.class
+      )}
+      {...props}
+    />
+  ),
+  ComponentPreview,
+  ComponentInstallation,
+  Alert,
+  AlertDescription,
+}
diff --git a/docs/src/components/mdx.tsx b/docs/src/components/mdx.tsx
index 2b335612..a391f71e 100644
--- a/docs/src/components/mdx.tsx
+++ b/docs/src/components/mdx.tsx
@@ -1,240 +1,240 @@
 // https://github.com/nksaraf/solid-mdx
 
-import type { JSX, ParentProps } from "solid-js";
 import {
-	createComponent,
-	createContext,
-	createMemo,
-	mergeProps,
-	splitProps,
-	useContext,
-} from "solid-js";
-import { Dynamic } from "solid-js/web";
+  createComponent,
+  createContext,
+  createMemo,
+  mergeProps,
+  splitProps,
+  useContext,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
 
 export const HTMLElements = new Set<
-	keyof JSX.HTMLElementTags | keyof JSX.HTMLElementDeprecatedTags
+  keyof JSX.HTMLElementTags | keyof JSX.HTMLElementDeprecatedTags
 >([
-	"a",
-	"abbr",
-	"address",
-	"area",
-	"article",
-	"aside",
-	"audio",
-	"b",
-	"base",
-	"bdi",
-	"bdo",
-	"blockquote",
-	"body",
-	"br",
-	"button",
-	"canvas",
-	"caption",
-	"cite",
-	"code",
-	"col",
-	"colgroup",
-	"data",
-	"datalist",
-	"dd",
-	"del",
-	"details",
-	"dfn",
-	"dialog",
-	"div",
-	"dl",
-	"dt",
-	"em",
-	"embed",
-	"fieldset",
-	"figcaption",
-	"figure",
-	"footer",
-	"form",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"head",
-	"header",
-	"hgroup",
-	"hr",
-	"html",
-	"i",
-	"iframe",
-	"img",
-	"input",
-	"ins",
-	"kbd",
-	"label",
-	"legend",
-	"li",
-	"link",
-	"main",
-	"map",
-	"mark",
-	"menu",
-	"meta",
-	"meter",
-	"nav",
-	"noscript",
-	"object",
-	"ol",
-	"optgroup",
-	"option",
-	"output",
-	"p",
-	"picture",
-	"pre",
-	"progress",
-	"q",
-	"rp",
-	"rt",
-	"ruby",
-	"s",
-	"samp",
-	"script",
-	"section",
-	"select",
-	"slot",
-	"small",
-	"source",
-	"span",
-	"strong",
-	"style",
-	"sub",
-	"summary",
-	"sup",
-	"table",
-	"tbody",
-	"td",
-	"template",
-	"textarea",
-	"tfoot",
-	"th",
-	"thead",
-	"time",
-	"title",
-	"tr",
-	"track",
-	"u",
-	"ul",
-	"var",
-	"video",
-	"wbr",
-	"big",
-	"keygen",
-	"menuitem",
-	"noindex",
-	"param",
-]);
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  "big",
+  "keygen",
+  "menuitem",
+  "noindex",
+  "param",
+])
 
 const SVGElements = new Set<keyof JSX.SVGElementTags>([
-	"animate",
-	"animateMotion",
-	"animateTransform",
-	"circle",
-	"clipPath",
-	"defs",
-	"desc",
-	"ellipse",
-	"feBlend",
-	"feColorMatrix",
-	"feComponentTransfer",
-	"feComposite",
-	"feConvolveMatrix",
-	"feDiffuseLighting",
-	"feDisplacementMap",
-	"feDistantLight",
-	"feFlood",
-	"feFuncA",
-	"feFuncB",
-	"feFuncG",
-	"feFuncR",
-	"feGaussianBlur",
-	"feImage",
-	"feMerge",
-	"feMergeNode",
-	"feMorphology",
-	"feOffset",
-	"fePointLight",
-	"feSpecularLighting",
-	"feSpotLight",
-	"feTile",
-	"feTurbulence",
-	"filter",
-	"foreignObject",
-	"g",
-	"image",
-	"line",
-	"linearGradient",
-	"marker",
-	"mask",
-	"metadata",
-	"mpath",
-	"path",
-	"pattern",
-	"polygon",
-	"polyline",
-	"radialGradient",
-	"rect",
-	"set",
-	"stop",
-	"svg",
-	"switch",
-	"symbol",
-	"text",
-	"textPath",
-	"tspan",
-	"use",
-	"view",
-]);
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tspan",
+  "use",
+  "view",
+])
 
 export type MDXComponents = {
-	[key in keyof JSX.IntrinsicElements]: (
-		props: JSX.IntrinsicElements[key],
-	) => JSX.Element;
-};
+  [key in keyof JSX.IntrinsicElements]: (
+    props: JSX.IntrinsicElements[key]
+  ) => JSX.Element
+}
 
 type MDXProps = ParentProps<{
-	components?: MDXComponents | Record<string, unknown>;
-}>;
+  components?: MDXComponents | Record<string, unknown>
+}>
 
 export const MDXContext = createContext<MDXComponents>(
-	[...HTMLElements, ...SVGElements].reduce((acc, el) => {
-		acc[el] = (props: JSX.IntrinsicElements[typeof el]) => {
-			return createComponent(
-				Dynamic,
-				// eslint-disable-next-line solid/reactivity
-				mergeProps(props, {
-					component: el,
-				}),
-			);
-		};
+  [...HTMLElements, ...SVGElements].reduce((acc, el) => {
+    acc[el] = (props: JSX.IntrinsicElements[typeof el]) => {
+      return createComponent(
+        Dynamic,
+        // eslint-disable-next-line solid/reactivity
+        mergeProps(props, {
+          component: el,
+        })
+      )
+    }
 
-		return acc;
-		// eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter
-	}, {} as MDXComponents),
-);
+    return acc
+  }, {} as MDXComponents)
+)
 
 export const MDXProvider = (props: MDXProps) => {
-	const context = useContext(MDXContext);
-	const [local, other] = splitProps(props, ["children"]);
-	const value = createMemo(() => ({ ...context, ...other.components }));
+  const context = useContext(MDXContext)
+  const [local, other] = splitProps(props, ["children"])
+  const value = createMemo(() => ({ ...context, ...other.components }))
 
-	return createComponent(MDXContext.Provider, {
-		get value() {
-			return value();
-		},
-		get children() {
-			return local.children;
-		},
-	});
-};
+  return createComponent(MDXContext.Provider, {
+    get value() {
+      return value()
+    },
+    get children() {
+      return local.children
+    },
+  })
+}
 
 export const useMDXComponents = () => {
-	return useContext(MDXContext);
-};
+  return useContext(MDXContext)
+}
diff --git a/docs/src/components/metadata.tsx b/docs/src/components/metadata.tsx
index d2cc3409..f698c9ba 100644
--- a/docs/src/components/metadata.tsx
+++ b/docs/src/components/metadata.tsx
@@ -1,54 +1,55 @@
-import { siteConfig } from "@/config/site";
-import { Link, Meta, Style, Title } from "@solidjs/meta";
+import { Link, Meta, Style, Title } from "@solidjs/meta"
+
+import { siteConfig } from "@/config/site"
 
 export const Metadata = () => {
-	return (
-		<>
-			<Title>{siteConfig.title}</Title>
-			<Meta name="description" content={siteConfig.description} />
+  return (
+    <>
+      <Title>{siteConfig.title}</Title>
+      <Meta name="description" content={siteConfig.description} />
 
-			<Meta name="twitter:card" content="summary_large_image" />
-			<Meta name="twitter:title" content={siteConfig.title} />
-			<Meta name="twitter:description" content={siteConfig.description} />
-			<Meta name="twitter:image" content="https://shadcn-solid.com/og.png" />
-			<Meta name="twitter:image:alt" content={siteConfig.title} />
-			<Meta name="twitter:creator" content="@hnggngnn" />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content={siteConfig.title} />
+      <Meta name="twitter:description" content={siteConfig.description} />
+      <Meta name="twitter:image" content="https://shadcn-solid.com/og.png" />
+      <Meta name="twitter:image:alt" content={siteConfig.title} />
+      <Meta name="twitter:creator" content="@hnggngnn" />
 
-			<Meta property="og:title" content={siteConfig.title} />
-			<Meta property="og:description" content={siteConfig.description} />
-			<Meta property="og:url" content={siteConfig.url} />
-			<Meta property="og:site_name" content={siteConfig.title} />
-			<Meta property="og:locale" content="en_US" />
-			<Meta property="og:type" content="article" />
-			<Meta property="og:image" content="https://shadcn-solid.com/og.png" />
-			<Meta property="og:alt" content={siteConfig.title} />
-			<Meta property="og:image:width" content="1200" />
-			<Meta property="og:image:height" content="630" />
+      <Meta property="og:title" content={siteConfig.title} />
+      <Meta property="og:description" content={siteConfig.description} />
+      <Meta property="og:url" content={siteConfig.url} />
+      <Meta property="og:site_name" content={siteConfig.title} />
+      <Meta property="og:locale" content="en_US" />
+      <Meta property="og:type" content="article" />
+      <Meta property="og:image" content="https://shadcn-solid.com/og.png" />
+      <Meta property="og:alt" content={siteConfig.title} />
+      <Meta property="og:image:width" content="1200" />
+      <Meta property="og:image:height" content="630" />
 
-			<Meta property="canonical" content={siteConfig.url} />
+      <Meta property="canonical" content={siteConfig.url} />
 
-			<Link rel="sitemap" href="/sitemap-index.xml" />
-			<Link rel="shortcut icon" href="/favicon-16x16.png" />
-			<Link rel="icon" href="/favicon.ico" />
-			<Link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-			<Link rel="manifest" href="/site.webmanifest" />
-			<Link
-				rel="preload"
-				href="/fonts/Geist%5Bwght%5D.woff2"
-				as="font"
-				type="font/woff2"
-				crossorigin="anonymous"
-			/>
-			<Link
-				rel="preload"
-				href="/fonts/GeistMono%5Bwght%5D.woff2"
-				as="font"
-				type="font/woff2"
-				crossorigin="anonymous"
-			/>
+      <Link rel="sitemap" href="/sitemap-index.xml" />
+      <Link rel="shortcut icon" href="/favicon-16x16.png" />
+      <Link rel="icon" href="/favicon.ico" />
+      <Link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+      <Link rel="manifest" href="/site.webmanifest" />
+      <Link
+        rel="preload"
+        href="/fonts/Geist%5Bwght%5D.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin="anonymous"
+      />
+      <Link
+        rel="preload"
+        href="/fonts/GeistMono%5Bwght%5D.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin="anonymous"
+      />
 
-			<Style type="text/css">
-				{`
+      <Style type="text/css">
+        {`
 		      @font-face {
 		        font-family: "Geist Sans Variable";
 		        src: url("/fonts/Geist%5Bwght%5D.woff2") format("woff2");
@@ -61,7 +62,7 @@ export const Metadata = () => {
 		        font-display: swap;
 		      }
 	      `}
-			</Style>
-		</>
-	);
-};
+      </Style>
+    </>
+  )
+}
diff --git a/docs/src/components/mobile-navbar.tsx b/docs/src/components/mobile-navbar.tsx
index 859dea55..d156fb02 100644
--- a/docs/src/components/mobile-navbar.tsx
+++ b/docs/src/components/mobile-navbar.tsx
@@ -1,74 +1,76 @@
-import { docsConfig } from "@/config/docs";
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { For } from "solid-js"
+import { useBeforeLeave } from "@solidjs/router"
+
+import { docsConfig } from "@/config/docs"
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Drawer,
-	DrawerContent,
-	DrawerTrigger,
-} from "@/registry/tailwindcss/ui/drawer";
-import { useBeforeLeave } from "@solidjs/router";
-import { For } from "solid-js";
-import { Sidebar } from "./sidebar";
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/tailwindcss/ui/drawer"
+
+import { Sidebar } from "./sidebar"
 
 export const MobileNavbar = () => {
-	return (
-		<Drawer breakPoints={[0.75]}>
-			{(props) => {
-				useBeforeLeave(() => {
-					props.setOpen(false);
-				});
+  return (
+    <Drawer breakPoints={[0.75]}>
+      {(props) => {
+        useBeforeLeave(() => {
+          props.setOpen(false)
+        })
 
-				return (
-					<>
-						<DrawerTrigger
-							as={Button}
-							variant="ghost"
-							size="icon"
-							class="md:hidden mr-2 hover:bg-transparent"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								class="size-4"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4 8h16M4 16h16"
-								/>
-								<title>Open menu</title>
-							</svg>
-						</DrawerTrigger>
-						<DrawerContent class="max-h-[60svh] [&>div:first-of-type]:h-1">
-							<div class="p-6 overflow-y-auto">
-								<div class="flex flex-col gap-y-2">
-									<div class="flex flex-col text-sm">
-										<a
-											href="/"
-											class="px-2 py-1 text-foreground transition-colors hover:text-foreground/80"
-										>
-											Home
-										</a>
-										<For each={docsConfig.mainNav}>
-											{(item) => (
-												<a
-													href={item.href}
-													class="px-2 py-1 text-foreground transition-colors hover:text-foreground/80"
-												>
-													{item.title}
-												</a>
-											)}
-										</For>
-									</div>
-									<Sidebar />
-								</div>
-							</div>
-						</DrawerContent>
-					</>
-				);
-			}}
-		</Drawer>
-	);
-};
+        return (
+          <>
+            <DrawerTrigger
+              as={Button}
+              variant="ghost"
+              size="icon"
+              class="mr-2 hover:bg-transparent md:hidden"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="size-4"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 8h16M4 16h16"
+                />
+                <title>Open menu</title>
+              </svg>
+            </DrawerTrigger>
+            <DrawerContent class="max-h-[60svh] [&>div:first-of-type]:h-1">
+              <div class="overflow-y-auto p-6">
+                <div class="flex flex-col gap-y-2">
+                  <div class="flex flex-col text-sm">
+                    <a
+                      href="/"
+                      class="text-foreground hover:text-foreground/80 px-2 py-1 transition-colors"
+                    >
+                      Home
+                    </a>
+                    <For each={docsConfig.mainNav}>
+                      {(item) => (
+                        <a
+                          href={item.href}
+                          class="text-foreground hover:text-foreground/80 px-2 py-1 transition-colors"
+                        >
+                          {item.title}
+                        </a>
+                      )}
+                    </For>
+                  </div>
+                  <Sidebar />
+                </div>
+              </div>
+            </DrawerContent>
+          </>
+        )
+      }}
+    </Drawer>
+  )
+}
diff --git a/docs/src/components/mode-toggle.tsx b/docs/src/components/mode-toggle.tsx
index bfa5629b..bffab6c7 100644
--- a/docs/src/components/mode-toggle.tsx
+++ b/docs/src/components/mode-toggle.tsx
@@ -1,45 +1,46 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { useColorMode } from "@kobalte/core";
-import { createEffect } from "solid-js";
+import { createEffect } from "solid-js"
+import { useColorMode } from "@kobalte/core"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ModeToggle = () => {
-	const { toggleColorMode, colorMode } = useColorMode();
+  const { toggleColorMode, colorMode } = useColorMode()
 
-	createEffect(() => {
-		const windows = new Set([...Array.from(window.frames), window]);
+  createEffect(() => {
+    const windows = new Set([...Array.from(window.frames), window])
 
-		for (const window of windows) {
-			window.document.documentElement.style.colorScheme = colorMode();
-			window.document.documentElement.dataset.kbTheme = colorMode();
-		}
-	});
+    for (const window of windows) {
+      window.document.documentElement.style.colorScheme = colorMode()
+      window.document.documentElement.dataset.kbTheme = colorMode()
+    }
+  })
 
-	return (
-		<Button onClick={toggleColorMode} size="icon" variant="ghost">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4 hidden [html[data-kb-theme=dark]_&]:block"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="currentColor"
-					d="M17.891 12a5.94 5.94 0 0 1-3.68 5.499a5.97 5.97 0 0 1-6.496-1.295A5.948 5.948 0 0 1 11.943 6.05a5.96 5.96 0 0 1 4.21 1.743A5.94 5.94 0 0 1 17.89 12M3.203 13.048H2.05A1.05 1.05 0 0 1 1 12a1.047 1.047 0 0 1 1.05-1.048h1.153A1.05 1.05 0 0 1 4.253 12a1.047 1.047 0 0 1-1.05 1.048m18.747 0h-1.143A1.05 1.05 0 0 1 19.758 12a1.047 1.047 0 0 1 1.05-1.048h1.143A1.05 1.05 0 0 1 23 12a1.047 1.047 0 0 1-1.05 1.048m-9.965-8.8a1.05 1.05 0 0 1-1.05-1.048V2.048A1.047 1.047 0 0 1 11.986 1a1.05 1.05 0 0 1 1.049 1.048V3.2a1.047 1.047 0 0 1-1.05 1.048m0 18.752a1.05 1.05 0 0 1-1.05-1.047V20.8a1.047 1.047 0 0 1 1.05-1.048a1.05 1.05 0 0 1 1.049 1.048v1.152A1.047 1.047 0 0 1 11.984 23M5.753 6.825a1.05 1.05 0 0 1-.745-.314l-.819-.807a1.051 1.051 0 0 1 .745-1.796c.28 0 .548.111.745.308l.819.817a1.047 1.047 0 0 1 0 1.478a1.05 1.05 0 0 1-.745.314m13.271 13.221a1.05 1.05 0 0 1-.735-.304l-.818-.817a1.047 1.047 0 0 1 1.14-1.739q.196.096.34.262l.818.817a1.047 1.047 0 0 1 0 1.477a1.05 1.05 0 0 1-.745.304m-.808-13.221a1.05 1.05 0 0 1-1.034-1.254c.04-.204.142-.391.29-.538l.818-.817a1.05 1.05 0 0 1 1.48 1.488l-.82.807a1.05 1.05 0 0 1-.734.314M4.934 20.046a1.05 1.05 0 0 1-.745-.304a1.046 1.046 0 0 1 0-1.477l.819-.817a1.05 1.05 0 0 1 1.49 0a1.047 1.047 0 0 1 0 1.477l-.819.817a1.05 1.05 0 0 1-.745.304"
-				/>
-				<title>Light mode</title>
-			</svg>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4 hidden [html[data-kb-theme=light]_&]:block"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="currentColor"
-					d="M21.88 15.147a10.23 10.23 0 0 1-19.63-5.64a10.28 10.28 0 0 1 6.63-7.37a1.77 1.77 0 0 1 1-.07a1.8 1.8 0 0 1 .89.45a1.81 1.81 0 0 1 .48 1.84a7 7 0 0 0-.08 4.21a6.27 6.27 0 0 0 4.3 4.31a6.9 6.9 0 0 0 4.2-.08a1.83 1.83 0 0 1 1 0a1.8 1.8 0 0 1 1.3 1.39a1.8 1.8 0 0 1-.09.96"
-				/>
-				<title>Dark mode</title>
-			</svg>
-		</Button>
-	);
-};
+  return (
+    <Button onClick={toggleColorMode} size="icon" variant="ghost">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="hidden size-4 [html[data-kb-theme=dark]_&]:block"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M17.891 12a5.94 5.94 0 0 1-3.68 5.499a5.97 5.97 0 0 1-6.496-1.295A5.948 5.948 0 0 1 11.943 6.05a5.96 5.96 0 0 1 4.21 1.743A5.94 5.94 0 0 1 17.89 12M3.203 13.048H2.05A1.05 1.05 0 0 1 1 12a1.047 1.047 0 0 1 1.05-1.048h1.153A1.05 1.05 0 0 1 4.253 12a1.047 1.047 0 0 1-1.05 1.048m18.747 0h-1.143A1.05 1.05 0 0 1 19.758 12a1.047 1.047 0 0 1 1.05-1.048h1.143A1.05 1.05 0 0 1 23 12a1.047 1.047 0 0 1-1.05 1.048m-9.965-8.8a1.05 1.05 0 0 1-1.05-1.048V2.048A1.047 1.047 0 0 1 11.986 1a1.05 1.05 0 0 1 1.049 1.048V3.2a1.047 1.047 0 0 1-1.05 1.048m0 18.752a1.05 1.05 0 0 1-1.05-1.047V20.8a1.047 1.047 0 0 1 1.05-1.048a1.05 1.05 0 0 1 1.049 1.048v1.152A1.047 1.047 0 0 1 11.984 23M5.753 6.825a1.05 1.05 0 0 1-.745-.314l-.819-.807a1.051 1.051 0 0 1 .745-1.796c.28 0 .548.111.745.308l.819.817a1.047 1.047 0 0 1 0 1.478a1.05 1.05 0 0 1-.745.314m13.271 13.221a1.05 1.05 0 0 1-.735-.304l-.818-.817a1.047 1.047 0 0 1 1.14-1.739q.196.096.34.262l.818.817a1.047 1.047 0 0 1 0 1.477a1.05 1.05 0 0 1-.745.304m-.808-13.221a1.05 1.05 0 0 1-1.034-1.254c.04-.204.142-.391.29-.538l.818-.817a1.05 1.05 0 0 1 1.48 1.488l-.82.807a1.05 1.05 0 0 1-.734.314M4.934 20.046a1.05 1.05 0 0 1-.745-.304a1.046 1.046 0 0 1 0-1.477l.819-.817a1.05 1.05 0 0 1 1.49 0a1.047 1.047 0 0 1 0 1.477l-.819.817a1.05 1.05 0 0 1-.745.304"
+        />
+        <title>Light mode</title>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="hidden size-4 [html[data-kb-theme=light]_&]:block"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M21.88 15.147a10.23 10.23 0 0 1-19.63-5.64a10.28 10.28 0 0 1 6.63-7.37a1.77 1.77 0 0 1 1-.07a1.8 1.8 0 0 1 .89.45a1.81 1.81 0 0 1 .48 1.84a7 7 0 0 0-.08 4.21a6.27 6.27 0 0 0 4.3 4.31a6.9 6.9 0 0 0 4.2-.08a1.83 1.83 0 0 1 1 0a1.8 1.8 0 0 1 1.3 1.39a1.8 1.8 0 0 1-.09.96"
+        />
+        <title>Dark mode</title>
+      </svg>
+    </Button>
+  )
+}
 
-export default ModeToggle;
+export default ModeToggle
diff --git a/docs/src/components/navbar.tsx b/docs/src/components/navbar.tsx
index 3f06dba3..22809616 100644
--- a/docs/src/components/navbar.tsx
+++ b/docs/src/components/navbar.tsx
@@ -1,40 +1,42 @@
-import { docsConfig } from "@/config/docs";
-import { siteConfig } from "@/config/site";
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { useLocation } from "@solidjs/router";
-import { For } from "solid-js";
-import { Logo } from "./logo";
+import { For } from "solid-js"
+import { useLocation } from "@solidjs/router"
+
+import { docsConfig } from "@/config/docs"
+import { siteConfig } from "@/config/site"
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { Logo } from "./logo"
 
 export const Navbar = () => {
-	const location = useLocation();
+  const location = useLocation()
 
-	return (
-		<div class="mr-4 hidden md:flex">
-			<a href="/" class="mr-6 flex items-center space-x-2">
-				<Logo class="h-6 w-6" />
-				<span class="hidden font-bold sm:inline-block">{siteConfig.title}</span>
-			</a>
-			<nav class="flex items-center space-x-6 text-sm font-medium">
-				<For each={docsConfig.mainNav}>
-					{(item) => (
-						<a
-							href={item.href}
-							class={cn(
-								"transition-colors hover:text-foreground/80",
-								location.pathname === item.href ||
-									(item.href === "/docs/components/accordion" &&
-										location.pathname.startsWith("/docs/components")) ||
-									(item.href === "/examples/cards" &&
-										location.pathname.startsWith("/examples"))
-									? "text-foreground"
-									: "opacity-60",
-							)}
-						>
-							{item.title}
-						</a>
-					)}
-				</For>
-			</nav>
-		</div>
-	);
-};
+  return (
+    <div class="mr-4 hidden md:flex">
+      <a href="/" class="mr-6 flex items-center space-x-2">
+        <Logo class="h-6 w-6" />
+        <span class="hidden font-bold sm:inline-block">{siteConfig.title}</span>
+      </a>
+      <nav class="flex items-center space-x-6 text-sm font-medium">
+        <For each={docsConfig.mainNav}>
+          {(item) => (
+            <a
+              href={item.href}
+              class={cn(
+                "hover:text-foreground/80 transition-colors",
+                location.pathname === item.href ||
+                  (item.href === "/docs/components/accordion" &&
+                    location.pathname.startsWith("/docs/components")) ||
+                  (item.href === "/examples/cards" &&
+                    location.pathname.startsWith("/examples"))
+                  ? "text-foreground"
+                  : "opacity-60"
+              )}
+            >
+              {item.title}
+            </a>
+          )}
+        </For>
+      </nav>
+    </div>
+  )
+}
diff --git a/docs/src/components/package-manager-copy-button.tsx b/docs/src/components/package-manager-copy-button.tsx
index 1c78f794..aeacabb0 100644
--- a/docs/src/components/package-manager-copy-button.tsx
+++ b/docs/src/components/package-manager-copy-button.tsx
@@ -1,156 +1,157 @@
+import { For, Show, createSignal, type VoidComponent } from "solid-js"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
-import { For, Show, type VoidComponent, createSignal } from "solid-js";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 
 type Props = {
-	npmCommand: string;
-	pnpmCommand: string;
-	yarnCommand: string;
-	bunCommand: string;
-};
+  npmCommand: string
+  pnpmCommand: string
+  yarnCommand: string
+  bunCommand: string
+}
 
 const PackageManagerCopyButton: VoidComponent<Props> = (props) => {
-	const packageList = [
-		{
-			title: "npm",
-			icon: (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="430"
-					height="512"
-					viewBox="0 0 430 512"
-					class="h-3 w-3 fill-current"
-				>
-					<path d="M71.609 112.569v286.649h143.432v-215.04h71.608v215.04h71.608V112.569H71.608zM430.08 40.96v430.08H0V40.96h430.08z" />
-					<title>Npm command</title>
-				</svg>
-			),
-			value: () => props.npmCommand,
-		},
-		{
-			title: "yarn",
-			icon: (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="477"
-					height="512"
-					viewBox="0 0 477 512"
-					class="h-3 w-3 fill-current"
-				>
-					<path d="M201.875 54.078S223.312-11.056 243.1 1.641c6.101 3.958 28.032 52.767 28.032 52.767s23.416-13.686 26.054-8.575c30.535 93.073 2.41 158.697-37.926 211.067c53.649 50.098 62.982 101.431 52.602 166.38c50.47.108 76.45-49.081 140.82-52.107c28.857-.495 30.341 33.309 8.575 38.585c-44.75 6.317-88.88 56.237-179.077 81.624c-11.635 17.708-81.148 15.728-135.874 20.612c-57.902.615-42.944-44.48-22.096-52.107c-13.596-7.408-14.15-14.796-16.819-14.016c-14.48 77.126-53.98 53.626-78.16 46.995c-18.634-9.894 1.319-33.144 1.319-33.144c-18.14 7.776-32.457-26.504-30.341-60.187c1.979-26.878 31.99-52.932 31.99-52.932c-1.789-67.104 17.813-110.758 69.915-147.417C83.91 177.75 62.91 143.25 90.606 103.06C126.66 93 133.66 50.25 201.876 54.078z" />
-					<title>Yarn command</title>
-				</svg>
-			),
-			value: () => props.yarnCommand,
-		},
-		{
-			title: "pnpm",
-			icon: (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					class="h-3 w-3 fill-current"
-				>
-					<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
-					<title>Pnpm command</title>
-				</svg>
-			),
-			value: () => props.pnpmCommand,
-		},
-		{
-			title: "bun",
-			icon: (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					class="h-3 w-3 fill-current"
-				>
-					<path
-						fill="currentColor"
-						d="M12 22.596c6.628 0 12-4.338 12-9.688c0-3.318-2.057-6.248-5.219-7.986c-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687zM10.599 4.715c.334-.759.503-1.58.498-2.409c0-.145.202-.187.23-.029c.658 2.783-.902 4.162-2.057 4.624c-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977m2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172c1.962 2.111 1.307 4.067.556 5.051c-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431m1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218c2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071a.11.11 0 0 1-.153-.026a.122.122 0 0 1-.022-.083a5.891 5.891 0 0 0-.737-2.331m-5.087.561c-.617.546-1.282.76-2.063 1c-.117 0-.195-.078-.156-.181c1.752-.909 2.376-1.649 2.999-2.778c0 0 .155-.118.188.085c0 .304-.349 1.329-.968 1.874m4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62a2.955 2.955 0 0 1-.925-1.553a.244.244 0 0 1 .064-.198a.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197m-5.458-2.176a1.862 1.862 0 0 1-2.384-.245a1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114a1.931 1.931 0 0 1-.698.869zm8.495.005a1.86 1.86 0 0 1-2.381-.253a1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079c.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117a1.932 1.932 0 0 1-.702.868"
-					/>
-					<title>Bun command</title>
-				</svg>
-			),
-			value: () => props.bunCommand,
-		},
-	];
+  const packageList = [
+    {
+      title: "npm",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="430"
+          height="512"
+          viewBox="0 0 430 512"
+          class="h-3 w-3 fill-current"
+        >
+          <path d="M71.609 112.569v286.649h143.432v-215.04h71.608v215.04h71.608V112.569H71.608zM430.08 40.96v430.08H0V40.96h430.08z" />
+          <title>Npm command</title>
+        </svg>
+      ),
+      value: () => props.npmCommand,
+    },
+    {
+      title: "yarn",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="477"
+          height="512"
+          viewBox="0 0 477 512"
+          class="h-3 w-3 fill-current"
+        >
+          <path d="M201.875 54.078S223.312-11.056 243.1 1.641c6.101 3.958 28.032 52.767 28.032 52.767s23.416-13.686 26.054-8.575c30.535 93.073 2.41 158.697-37.926 211.067c53.649 50.098 62.982 101.431 52.602 166.38c50.47.108 76.45-49.081 140.82-52.107c28.857-.495 30.341 33.309 8.575 38.585c-44.75 6.317-88.88 56.237-179.077 81.624c-11.635 17.708-81.148 15.728-135.874 20.612c-57.902.615-42.944-44.48-22.096-52.107c-13.596-7.408-14.15-14.796-16.819-14.016c-14.48 77.126-53.98 53.626-78.16 46.995c-18.634-9.894 1.319-33.144 1.319-33.144c-18.14 7.776-32.457-26.504-30.341-60.187c1.979-26.878 31.99-52.932 31.99-52.932c-1.789-67.104 17.813-110.758 69.915-147.417C83.91 177.75 62.91 143.25 90.606 103.06C126.66 93 133.66 50.25 201.876 54.078z" />
+          <title>Yarn command</title>
+        </svg>
+      ),
+      value: () => props.yarnCommand,
+    },
+    {
+      title: "pnpm",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="h-3 w-3 fill-current"
+        >
+          <path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
+          <title>Pnpm command</title>
+        </svg>
+      ),
+      value: () => props.pnpmCommand,
+    },
+    {
+      title: "bun",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="h-3 w-3 fill-current"
+        >
+          <path
+            fill="currentColor"
+            d="M12 22.596c6.628 0 12-4.338 12-9.688c0-3.318-2.057-6.248-5.219-7.986c-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687zM10.599 4.715c.334-.759.503-1.58.498-2.409c0-.145.202-.187.23-.029c.658 2.783-.902 4.162-2.057 4.624c-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977m2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172c1.962 2.111 1.307 4.067.556 5.051c-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431m1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218c2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071a.11.11 0 0 1-.153-.026a.122.122 0 0 1-.022-.083a5.891 5.891 0 0 0-.737-2.331m-5.087.561c-.617.546-1.282.76-2.063 1c-.117 0-.195-.078-.156-.181c1.752-.909 2.376-1.649 2.999-2.778c0 0 .155-.118.188.085c0 .304-.349 1.329-.968 1.874m4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62a2.955 2.955 0 0 1-.925-1.553a.244.244 0 0 1 .064-.198a.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197m-5.458-2.176a1.862 1.862 0 0 1-2.384-.245a1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114a1.931 1.931 0 0 1-.698.869zm8.495.005a1.86 1.86 0 0 1-2.381-.253a1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079c.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117a1.932 1.932 0 0 1-.702.868"
+          />
+          <title>Bun command</title>
+        </svg>
+      ),
+      value: () => props.bunCommand,
+    },
+  ]
 
-	const [isCopied, setIsCopied] = createSignal(false);
+  const [isCopied, setIsCopied] = createSignal(false)
 
-	const copyToClipboard = async (value: string) => {
-		setIsCopied(true);
-		await navigator.clipboard.writeText(value);
-		setTimeout(() => setIsCopied(false), 2000);
-	};
+  const copyToClipboard = async (value: string) => {
+    setIsCopied(true)
+    await navigator.clipboard.writeText(value)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
 
-	return (
-		<DropdownMenu placement="bottom-end">
-			<DropdownMenuTrigger class="p-1 rounded-md absolute top-4 right-4 text-white hover:bg-neutral-700/70 transition-colors">
-				<Show
-					when={isCopied()}
-					fallback={
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="size-3.5"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-								<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
-							</g>
-							<title>Copy</title>
-						</svg>
-					}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-3.5"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
-							<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
-						</g>
-						<title>Copied</title>
-					</svg>
-				</Show>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent>
-				<For each={packageList}>
-					{(item) => (
-						<DropdownMenuItem
-							class="flex items-center gap-[0.5rem]"
-							onClick={() => copyToClipboard(item.value())}
-						>
-							{item.icon}
-							{item.title}
-						</DropdownMenuItem>
-					)}
-				</For>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-};
+  return (
+    <DropdownMenu placement="bottom-end">
+      <DropdownMenuTrigger class="absolute right-4 top-4 rounded-md p-1 text-white transition-colors hover:bg-neutral-700/70">
+        <Show
+          when={isCopied()}
+          fallback={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-3.5"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+                <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
+              </g>
+              <title>Copy</title>
+            </svg>
+          }
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+              <path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
+            </g>
+            <title>Copied</title>
+          </svg>
+        </Show>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <For each={packageList}>
+          {(item) => (
+            <DropdownMenuItem
+              class="flex items-center gap-[0.5rem]"
+              onClick={() => copyToClipboard(item.value())}
+            >
+              {item.icon}
+              {item.title}
+            </DropdownMenuItem>
+          )}
+        </For>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
-export default PackageManagerCopyButton;
+export default PackageManagerCopyButton
diff --git a/docs/src/components/page-navigation.tsx b/docs/src/components/page-navigation.tsx
index 2c42d350..61287caf 100644
--- a/docs/src/components/page-navigation.tsx
+++ b/docs/src/components/page-navigation.tsx
@@ -1,92 +1,93 @@
+import { Show } from "solid-js"
+import { useLocation } from "@solidjs/router"
+
 import {
-	type TNavItem,
-	type TNavItemWithChildren,
-	docsConfig,
-} from "@/config/docs";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { useLocation } from "@solidjs/router";
-import { Show } from "solid-js";
+  docsConfig,
+  type TNavItem,
+  type TNavItemWithChildren,
+} from "@/config/docs"
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 export const PageNavigation = () => {
-	const location = useLocation();
+  const location = useLocation()
 
-	const getPagerForDoc = (slug: string) => {
-		const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null];
-		let activeIndex: number;
-		if (!slug) {
-			activeIndex = 1;
-		} else {
-			activeIndex = flattenedLinks.findIndex((link) => slug === link?.href);
-		}
+  const getPagerForDoc = (slug: string) => {
+    const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
+    let activeIndex: number
+    if (!slug) {
+      activeIndex = 1
+    } else {
+      activeIndex = flattenedLinks.findIndex((link) => slug === link?.href)
+    }
 
-		const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null;
-		const next =
-			activeIndex !== flattenedLinks.length - 1
-				? flattenedLinks[activeIndex + 1]
-				: null;
-		return {
-			prev,
-			next,
-		};
-	};
+    const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
+    const next =
+      activeIndex !== flattenedLinks.length - 1
+        ? flattenedLinks[activeIndex + 1]
+        : null
+    return {
+      prev,
+      next,
+    }
+  }
 
-	const flatten = (links: TNavItemWithChildren[]): TNavItem[] => {
-		return links
-			.reduce<TNavItem[]>((flat, link) => {
-				return flat.concat(link.items.length ? flatten(link.items) : link);
-			}, [])
-			.filter((link) => !link.disabled);
-	};
+  const flatten = (links: TNavItemWithChildren[]): TNavItem[] => {
+    return links
+      .reduce<TNavItem[]>((flat, link) => {
+        return flat.concat(link.items.length ? flatten(link.items) : link)
+      }, [])
+      .filter((link) => !link.disabled)
+  }
 
-	const pager = () => getPagerForDoc(location.pathname);
+  const pager = () => getPagerForDoc(location.pathname)
 
-	return (
-		<div class="flex flex-row items-center justify-between">
-			<Show when={pager().prev?.href}>
-				<Button as="a" variant="outline" href={pager().prev?.href}>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m15 6l-6 6l6 6"
-						/>
-						<title>Previous page</title>
-					</svg>
-					{pager().prev?.title}
-				</Button>
-			</Show>
-			<Show when={pager().prev?.href}>
-				<Button
-					as="a"
-					variant="outline"
-					class="ml-auto"
-					href={pager().next?.href}
-				>
-					{pager().next?.title}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="ml-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m9 6l6 6l-6 6"
-						/>
-						<title>Next page</title>
-					</svg>
-				</Button>
-			</Show>
-		</div>
-	);
-};
+  return (
+    <div class="flex flex-row items-center justify-between">
+      <Show when={pager().prev?.href}>
+        <Button as="a" variant="outline" href={pager().prev?.href}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m15 6l-6 6l6 6"
+            />
+            <title>Previous page</title>
+          </svg>
+          {pager().prev?.title}
+        </Button>
+      </Show>
+      <Show when={pager().prev?.href}>
+        <Button
+          as="a"
+          variant="outline"
+          class="ml-auto"
+          href={pager().next?.href}
+        >
+          {pager().next?.title}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="ml-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m9 6l6 6l-6 6"
+            />
+            <title>Next page</title>
+          </svg>
+        </Button>
+      </Show>
+    </div>
+  )
+}
diff --git a/docs/src/components/sidebar.tsx b/docs/src/components/sidebar.tsx
index ea633508..a6486991 100644
--- a/docs/src/components/sidebar.tsx
+++ b/docs/src/components/sidebar.tsx
@@ -1,82 +1,83 @@
-import { docsConfig } from "@/config/docs";
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { useLocation } from "@solidjs/router";
-import { For, Show } from "solid-js";
+import { For, Show } from "solid-js"
+import { useLocation } from "@solidjs/router"
+
+import { docsConfig } from "@/config/docs"
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const Sidebar = () => {
-	const location = useLocation();
+  const location = useLocation()
 
-	return (
-		<div class="w-full">
-			<For each={docsConfig.sidebarNav}>
-				{(item) => (
-					<div class="pb-6">
-						<h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
-							{item.title}
-						</h4>
-						<div class="grid grid-flow-row auto-rows-max text-sm">
-							<For each={item.items}>
-								{(item) => (
-									<Show
-										when={!item.disabled}
-										fallback={
-											<span
-												class={cn(
-													"flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
-													item.disabled && "cursor-not-allowed opacity-60",
-												)}
-											>
-												{item.title}
-												<Show when={item.label}>
-													<span
-														class={cn(
-															"ml-2 rounded-md bg-lime-600/10 px-2 py-1 text-xs leading-none text-lime-600 no-underline ring-1 ring-inset ring-lime-600/20 group-hover:no-underline dark:bg-lime-500/10 dark:text-lime-500 dark:ring-lime-500/20",
-															item.label === "Soon" &&
-																"bg-muted text-muted-foreground",
-															item.label === "Updated" &&
-																"bg-blue-600/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20",
-														)}
-													>
-														{item.label}
-													</span>
-												</Show>
-											</span>
-										}
-									>
-										<a
-											href={item.href}
-											class={cn(
-												"flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
-												item.disabled && "cursor-not-allowed opacity-60",
-												location.pathname === item.href ||
-													(location.pathname.includes("/docs/installation") &&
-														item.href === "/docs/installation")
-													? "font-medium text-foreground"
-													: "text-muted-foreground",
-											)}
-										>
-											{item.title}
-											<Show when={item.label}>
-												<span
-													class={cn(
-														"ml-2 rounded-md bg-lime-600/10 px-2 py-1 text-xs leading-none text-lime-600 no-underline ring-1 ring-inset ring-lime-600/20 group-hover:no-underline dark:bg-lime-500/10 dark:text-lime-500 dark:ring-lime-500/20",
-														item.label === "Soon" &&
-															"bg-muted text-muted-foreground",
-														item.label === "Updated" &&
-															"bg-blue-600/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20",
-													)}
-												>
-													{item.label}
-												</span>
-											</Show>
-										</a>
-									</Show>
-								)}
-							</For>
-						</div>
-					</div>
-				)}
-			</For>
-		</div>
-	);
-};
+  return (
+    <div class="w-full">
+      <For each={docsConfig.sidebarNav}>
+        {(item) => (
+          <div class="pb-6">
+            <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
+              {item.title}
+            </h4>
+            <div class="grid grid-flow-row auto-rows-max text-sm">
+              <For each={item.items}>
+                {(item) => (
+                  <Show
+                    when={!item.disabled}
+                    fallback={
+                      <span
+                        class={cn(
+                          "text-muted-foreground flex w-full cursor-not-allowed items-center rounded-md p-2 hover:underline",
+                          item.disabled && "cursor-not-allowed opacity-60"
+                        )}
+                      >
+                        {item.title}
+                        <Show when={item.label}>
+                          <span
+                            class={cn(
+                              "ml-2 rounded-md bg-lime-600/10 px-2 py-1 text-xs leading-none text-lime-600 no-underline ring-1 ring-inset ring-lime-600/20 group-hover:no-underline dark:bg-lime-500/10 dark:text-lime-500 dark:ring-lime-500/20",
+                              item.label === "Soon" &&
+                                "bg-muted text-muted-foreground",
+                              item.label === "Updated" &&
+                                "bg-blue-600/10 text-blue-600 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-500/20"
+                            )}
+                          >
+                            {item.label}
+                          </span>
+                        </Show>
+                      </span>
+                    }
+                  >
+                    <a
+                      href={item.href}
+                      class={cn(
+                        "flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
+                        item.disabled && "cursor-not-allowed opacity-60",
+                        location.pathname === item.href ||
+                          (location.pathname.includes("/docs/installation") &&
+                            item.href === "/docs/installation")
+                          ? "text-foreground font-medium"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {item.title}
+                      <Show when={item.label}>
+                        <span
+                          class={cn(
+                            "ml-2 rounded-md bg-lime-600/10 px-2 py-1 text-xs leading-none text-lime-600 no-underline ring-1 ring-inset ring-lime-600/20 group-hover:no-underline dark:bg-lime-500/10 dark:text-lime-500 dark:ring-lime-500/20",
+                            item.label === "Soon" &&
+                              "bg-muted text-muted-foreground",
+                            item.label === "Updated" &&
+                              "bg-blue-600/10 text-blue-600 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-500/20"
+                          )}
+                        >
+                          {item.label}
+                        </span>
+                      </Show>
+                    </a>
+                  </Show>
+                )}
+              </For>
+            </div>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
diff --git a/docs/src/components/toc.tsx b/docs/src/components/toc.tsx
index 4bbff88a..d4956ec2 100644
--- a/docs/src/components/toc.tsx
+++ b/docs/src/components/toc.tsx
@@ -1,97 +1,98 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { createIntersectionObserver } from "@solid-primitives/intersection-observer";
-import { useLocation } from "@solidjs/router";
-import { For, createEffect, createSignal } from "solid-js";
+import { For, createEffect, createSignal } from "solid-js"
+import { useLocation } from "@solidjs/router"
+import { createIntersectionObserver } from "@solid-primitives/intersection-observer"
 
-type Heading = { depth: number; slug: string; text: string };
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+type Heading = { depth: number; slug: string; text: string }
 
 type TocProps = {
-	data: Heading[];
-};
+  data: Heading[]
+}
 
 type TocItemProps = {
-	data: Heading;
-};
+  data: Heading
+}
 
 const TocItem = (props: TocItemProps) => {
-	const location = useLocation();
-
-	const handleClick = (event: Event) => {
-		event.preventDefault();
-
-		const element = document.getElementById(props.data.slug);
-
-		if (element) {
-			const elementPosition = element.getBoundingClientRect().top;
-			const offsetPosition = elementPosition + window.scrollY - 70;
-
-			window.scrollTo({
-				top: offsetPosition,
-				behavior: "smooth",
-			});
-		}
-	};
-
-	return (
-		<li class={cn("mt-0 pt-2", props.data.depth === 3 && "pl-4")}>
-			<a
-				href={`${location.pathname}#${props.data.slug}`}
-				class={cn(
-					"inline-block no-underline transition-colors hover:text-foreground text-muted-foreground",
-					"[&.active-toc-item]:font-medium [&.active-toc-item]:text-foreground",
-				)}
-				onClick={handleClick}
-			>
-				{props.data.text}
-			</a>
-		</li>
-	);
-};
+  const location = useLocation()
+
+  const handleClick = (event: Event) => {
+    event.preventDefault()
+
+    const element = document.getElementById(props.data.slug)
+
+    if (element) {
+      const elementPosition = element.getBoundingClientRect().top
+      const offsetPosition = elementPosition + window.scrollY - 70
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth",
+      })
+    }
+  }
+
+  return (
+    <li class={cn("mt-0 pt-2", props.data.depth === 3 && "pl-4")}>
+      <a
+        href={`${location.pathname}#${props.data.slug}`}
+        class={cn(
+          "hover:text-foreground text-muted-foreground inline-block no-underline transition-colors",
+          "[&.active-toc-item]:text-foreground [&.active-toc-item]:font-medium"
+        )}
+        onClick={handleClick}
+      >
+        {props.data.text}
+      </a>
+    </li>
+  )
+}
 
 export const Toc = (props: TocProps) => {
-	const [targets, setTargets] = createSignal<Element[]>([]);
-
-	createEffect(() => {
-		for (const item of props.data) {
-			setTargets((p) => [...p, document.getElementById(item.slug) as Element]);
-		}
-	});
-
-	createIntersectionObserver(
-		targets,
-		(entries) => {
-			let firstIntersectingEntry = null;
-
-			for (const entry of entries) {
-				if (entry.isIntersecting) {
-					firstIntersectingEntry = entry;
-					break;
-				}
-			}
-
-			if (firstIntersectingEntry) {
-				const headingFragment = `#${firstIntersectingEntry.target.id}`;
-				const tocItem = document.querySelector(
-					`a[href="${window.location.pathname + headingFragment}"]`,
-				);
-				const previouslyActivatedItem =
-					document.querySelector(".active-toc-item");
-
-				previouslyActivatedItem?.classList.remove("active-toc-item");
-				tocItem?.classList.add("active-toc-item");
-			}
-		},
-		{
-			threshold: 0.01,
-		},
-	);
-
-	return (
-		<aside class="space-y-2">
-			<p class="font-medium">On This Page</p>
-			<ul class="m-0 list-none">
-				<For each={props.data}>{(h) => <TocItem data={h} />}</For>
-			</ul>
-		</aside>
-	);
-};
+  const [targets, setTargets] = createSignal<Element[]>([])
+
+  createEffect(() => {
+    for (const item of props.data) {
+      setTargets((p) => [...p, document.getElementById(item.slug) as Element])
+    }
+  })
+
+  createIntersectionObserver(
+    targets,
+    (entries) => {
+      let firstIntersectingEntry = null
+
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          firstIntersectingEntry = entry
+          break
+        }
+      }
+
+      if (firstIntersectingEntry) {
+        const headingFragment = `#${firstIntersectingEntry.target.id}`
+        const tocItem = document.querySelector(
+          `a[href="${window.location.pathname + headingFragment}"]`
+        )
+        const previouslyActivatedItem =
+          document.querySelector(".active-toc-item")
+
+        previouslyActivatedItem?.classList.remove("active-toc-item")
+        tocItem?.classList.add("active-toc-item")
+      }
+    },
+    {
+      threshold: 0.01,
+    }
+  )
+
+  return (
+    <aside class="space-y-2">
+      <p class="font-medium">On This Page</p>
+      <ul class="m-0 list-none">
+        <For each={props.data}>{(h) => <TocItem data={h} />}</For>
+      </ul>
+    </aside>
+  )
+}
diff --git a/docs/src/config/docs.ts b/docs/src/config/docs.ts
index 918fedaf..24dc7cac 100644
--- a/docs/src/config/docs.ts
+++ b/docs/src/config/docs.ts
@@ -1,326 +1,326 @@
 export type TNavItem = {
-	title: string;
-	href?: string;
-	disabled?: boolean;
-	label?: string;
-};
+  title: string
+  href?: string
+  disabled?: boolean
+  label?: string
+}
 
 export type TSidebarNavItem = TNavItem & {
-	items: TSidebarNavItem[];
-};
+  items: TSidebarNavItem[]
+}
 
 export type TNavItemWithChildren = TNavItem & {
-	items: TNavItemWithChildren[];
-};
+  items: TNavItemWithChildren[]
+}
 
 export type TDocsConfig = {
-	mainNav: TNavItem[];
-	sidebarNav: TSidebarNavItem[];
-};
+  mainNav: TNavItem[]
+  sidebarNav: TSidebarNavItem[]
+}
 
 export const docsConfig: TDocsConfig = {
-	mainNav: [
-		{
-			title: "Docs",
-			href: "/docs/introduction",
-		},
-		{
-			title: "Components",
-			href: "/docs/components/accordion",
-		},
-		{
-			title: "Blocks",
-			href: "/blocks",
-		},
-		{
-			title: "Charts",
-			href: "/charts",
-		},
-	],
-	sidebarNav: [
-		{
-			title: "Getting Started",
-			items: [
-				{
-					title: "Introduction",
-					href: "/docs/introduction",
-					items: [],
-				},
-				{
-					title: "components.json",
-					href: "/docs/components-json",
-					items: [],
-				},
-				{
-					title: "Theming",
-					href: "/docs/theming",
-					items: [],
-				},
-				{
-					title: "Dark mode",
-					href: "/docs/dark-mode",
-					items: [],
-				},
-				{
-					title: "CLI",
-					href: "/docs/cli",
-					items: [],
-				},
-				{
-					title: "Figma",
-					href: "/docs/figma",
-					items: [],
-				},
-				{
-					title: "Changelog",
-					href: "/docs/changelog#dec-2024---updates",
-					items: [],
-				},
-				{
-					title: "About",
-					href: "/docs/about",
-					items: [],
-				},
-			],
-		},
-		{
-			title: "Installation",
-			items: [
-				{
-					title: "Solid Start",
-					href: "/docs/installation/solid-start",
-					items: [],
-				},
-				{
-					title: "Astro",
-					href: "/docs/installation/astro",
-					items: [],
-				},
-				{
-					title: "Manual",
-					href: "/docs/installation/manual",
-					items: [],
-				},
-			],
-		},
-		{
-			title: "Components",
-			items: [
-				{
-					title: "Accordion",
-					href: "/docs/components/accordion",
-					items: [],
-				},
-				{
-					title: "Alert",
-					href: "/docs/components/alert",
-					items: [],
-				},
-				{
-					title: "Alert Dialog",
-					href: "/docs/components/alert-dialog",
-					items: [],
-				},
-				{
-					title: "Badge",
-					href: "/docs/components/badge",
-					items: [],
-				},
-				{
-					title: "Button",
-					href: "/docs/components/button",
-					items: [],
-				},
-				{
-					title: "Card",
-					href: "/docs/components/card",
-					items: [],
-				},
-				{
-					title: "Carousel",
-					href: "/docs/components/carousel",
-					items: [],
-				},
-				{
-					title: "Chart",
-					href: "/docs/components/chart",
-					items: [],
-					label: "New",
-				},
-				{
-					title: "Checkbox",
-					href: "/docs/components/checkbox",
-					items: [],
-				},
-				{
-					title: "Collapsible",
-					href: "/docs/components/collapsible",
-					items: [],
-				},
-				{
-					title: "Combobox",
-					href: "/docs/components/combobox",
-					items: [],
-				},
-				{
-					title: "Command",
-					href: "/docs/components/command",
-					items: [],
-				},
-				{
-					title: "Context Menu",
-					href: "/docs/components/context-menu",
-					items: [],
-				},
-				{
-					title: "Data Table",
-					href: "/docs/components/data-table",
-					items: [],
-				},
-				{
-					title: "Date Picker",
-					href: "/docs/components/date-picker",
-					items: [],
-				},
-				{
-					title: "Dialog",
-					href: "/docs/components/dialog",
-					items: [],
-				},
-				{
-					title: "Drawer",
-					href: "/docs/components/drawer",
-					items: [],
-					label: "Updated",
-				},
-				{
-					title: "Dropdown Menu",
-					href: "/docs/components/dropdown-menu",
-					items: [],
-				},
-				{
-					title: "Hover Card",
-					href: "/docs/components/hover-card",
-					items: [],
-				},
-				{
-					title: "Menubar",
-					href: "/docs/components/menubar",
-					items: [],
-				},
-				{
-					title: "Navigation Menu",
-					href: "/docs/components/navigation-menu",
-					items: [],
-				},
-				{
-					title: "Number Field",
-					href: "/docs/components/number-field",
-					items: [],
-				},
-				{
-					title: "OTP Field",
-					href: "/docs/components/otp-field",
-					items: [],
-				},
-				{
-					title: "Pagination",
-					href: "/docs/components/pagination",
-					items: [],
-				},
-				{
-					title: "Popover",
-					href: "/docs/components/popover",
-					items: [],
-				},
-				{
-					title: "Progress",
-					href: "/docs/components/progress",
-					items: [],
-				},
-				{
-					title: "Radio Group",
-					href: "/docs/components/radio-group",
-					items: [],
-				},
-				{
-					title: "Resizable",
-					href: "/docs/components/resizable",
-					items: [],
-				},
-				{
-					title: "Select",
-					href: "/docs/components/select",
-					items: [],
-				},
-				{
-					title: "Separator",
-					href: "/docs/components/separator",
-					items: [],
-				},
-				{
-					title: "Sidebar",
-					href: "/docs/components/sidebar",
-					items: [],
-					label: "New",
-				},
-				{
-					title: "Skeleton",
-					href: "/docs/components/skeleton",
-					items: [],
-				},
-				{
-					title: "Sonner",
-					href: "/docs/components/sonner",
-					items: [],
-					label: "Updated",
-				},
-				{
-					title: "Switch",
-					href: "/docs/components/switch",
-					items: [],
-				},
-				{
-					title: "Table",
-					href: "/docs/components/table",
-					items: [],
-				},
-				{
-					title: "Tabs",
-					href: "/docs/components/tabs",
-					items: [],
-				},
-				{
-					title: "Text Field",
-					href: "/docs/components/textfield",
-					items: [],
-				},
-				{
-					title: "Textarea",
-					href: "/docs/components/textarea",
-					items: [],
-				},
-				{
-					title: "Toast",
-					href: "/docs/components/toast",
-					items: [],
-				},
-				{
-					title: "Toggle Group",
-					href: "/docs/components/toggle-group",
-					items: [],
-				},
-				{
-					title: "Toggle",
-					href: "/docs/components/toggle",
-					items: [],
-				},
-				{
-					title: "Tooltip",
-					href: "/docs/components/tooltip",
-					items: [],
-				},
-			],
-		},
-	],
-};
+  mainNav: [
+    {
+      title: "Docs",
+      href: "/docs/introduction",
+    },
+    {
+      title: "Components",
+      href: "/docs/components/accordion",
+    },
+    {
+      title: "Blocks",
+      href: "/blocks",
+    },
+    {
+      title: "Charts",
+      href: "/charts",
+    },
+  ],
+  sidebarNav: [
+    {
+      title: "Getting Started",
+      items: [
+        {
+          title: "Introduction",
+          href: "/docs/introduction",
+          items: [],
+        },
+        {
+          title: "components.json",
+          href: "/docs/components-json",
+          items: [],
+        },
+        {
+          title: "Theming",
+          href: "/docs/theming",
+          items: [],
+        },
+        {
+          title: "Dark mode",
+          href: "/docs/dark-mode",
+          items: [],
+        },
+        {
+          title: "CLI",
+          href: "/docs/cli",
+          items: [],
+        },
+        {
+          title: "Figma",
+          href: "/docs/figma",
+          items: [],
+        },
+        {
+          title: "Changelog",
+          href: "/docs/changelog#dec-2024---updates",
+          items: [],
+        },
+        {
+          title: "About",
+          href: "/docs/about",
+          items: [],
+        },
+      ],
+    },
+    {
+      title: "Installation",
+      items: [
+        {
+          title: "Solid Start",
+          href: "/docs/installation/solid-start",
+          items: [],
+        },
+        {
+          title: "Astro",
+          href: "/docs/installation/astro",
+          items: [],
+        },
+        {
+          title: "Manual",
+          href: "/docs/installation/manual",
+          items: [],
+        },
+      ],
+    },
+    {
+      title: "Components",
+      items: [
+        {
+          title: "Accordion",
+          href: "/docs/components/accordion",
+          items: [],
+        },
+        {
+          title: "Alert",
+          href: "/docs/components/alert",
+          items: [],
+        },
+        {
+          title: "Alert Dialog",
+          href: "/docs/components/alert-dialog",
+          items: [],
+        },
+        {
+          title: "Badge",
+          href: "/docs/components/badge",
+          items: [],
+        },
+        {
+          title: "Button",
+          href: "/docs/components/button",
+          items: [],
+        },
+        {
+          title: "Card",
+          href: "/docs/components/card",
+          items: [],
+        },
+        {
+          title: "Carousel",
+          href: "/docs/components/carousel",
+          items: [],
+        },
+        {
+          title: "Chart",
+          href: "/docs/components/chart",
+          items: [],
+          label: "New",
+        },
+        {
+          title: "Checkbox",
+          href: "/docs/components/checkbox",
+          items: [],
+        },
+        {
+          title: "Collapsible",
+          href: "/docs/components/collapsible",
+          items: [],
+        },
+        {
+          title: "Combobox",
+          href: "/docs/components/combobox",
+          items: [],
+        },
+        {
+          title: "Command",
+          href: "/docs/components/command",
+          items: [],
+        },
+        {
+          title: "Context Menu",
+          href: "/docs/components/context-menu",
+          items: [],
+        },
+        {
+          title: "Data Table",
+          href: "/docs/components/data-table",
+          items: [],
+        },
+        {
+          title: "Date Picker",
+          href: "/docs/components/date-picker",
+          items: [],
+        },
+        {
+          title: "Dialog",
+          href: "/docs/components/dialog",
+          items: [],
+        },
+        {
+          title: "Drawer",
+          href: "/docs/components/drawer",
+          items: [],
+          label: "Updated",
+        },
+        {
+          title: "Dropdown Menu",
+          href: "/docs/components/dropdown-menu",
+          items: [],
+        },
+        {
+          title: "Hover Card",
+          href: "/docs/components/hover-card",
+          items: [],
+        },
+        {
+          title: "Menubar",
+          href: "/docs/components/menubar",
+          items: [],
+        },
+        {
+          title: "Navigation Menu",
+          href: "/docs/components/navigation-menu",
+          items: [],
+        },
+        {
+          title: "Number Field",
+          href: "/docs/components/number-field",
+          items: [],
+        },
+        {
+          title: "OTP Field",
+          href: "/docs/components/otp-field",
+          items: [],
+        },
+        {
+          title: "Pagination",
+          href: "/docs/components/pagination",
+          items: [],
+        },
+        {
+          title: "Popover",
+          href: "/docs/components/popover",
+          items: [],
+        },
+        {
+          title: "Progress",
+          href: "/docs/components/progress",
+          items: [],
+        },
+        {
+          title: "Radio Group",
+          href: "/docs/components/radio-group",
+          items: [],
+        },
+        {
+          title: "Resizable",
+          href: "/docs/components/resizable",
+          items: [],
+        },
+        {
+          title: "Select",
+          href: "/docs/components/select",
+          items: [],
+        },
+        {
+          title: "Separator",
+          href: "/docs/components/separator",
+          items: [],
+        },
+        {
+          title: "Sidebar",
+          href: "/docs/components/sidebar",
+          items: [],
+          label: "New",
+        },
+        {
+          title: "Skeleton",
+          href: "/docs/components/skeleton",
+          items: [],
+        },
+        {
+          title: "Sonner",
+          href: "/docs/components/sonner",
+          items: [],
+          label: "Updated",
+        },
+        {
+          title: "Switch",
+          href: "/docs/components/switch",
+          items: [],
+        },
+        {
+          title: "Table",
+          href: "/docs/components/table",
+          items: [],
+        },
+        {
+          title: "Tabs",
+          href: "/docs/components/tabs",
+          items: [],
+        },
+        {
+          title: "Text Field",
+          href: "/docs/components/textfield",
+          items: [],
+        },
+        {
+          title: "Textarea",
+          href: "/docs/components/textarea",
+          items: [],
+        },
+        {
+          title: "Toast",
+          href: "/docs/components/toast",
+          items: [],
+        },
+        {
+          title: "Toggle Group",
+          href: "/docs/components/toggle-group",
+          items: [],
+        },
+        {
+          title: "Toggle",
+          href: "/docs/components/toggle",
+          items: [],
+        },
+        {
+          title: "Tooltip",
+          href: "/docs/components/tooltip",
+          items: [],
+        },
+      ],
+    },
+  ],
+}
diff --git a/docs/src/config/site.ts b/docs/src/config/site.ts
index 63548fb1..79cdd0f7 100644
--- a/docs/src/config/site.ts
+++ b/docs/src/config/site.ts
@@ -1,14 +1,14 @@
 export const siteConfig = {
-	title: "shadcn-solid",
-	url: "https://shadcn-solid.com",
-	description:
-		"Beautifully designed components built with your choice of UI and CSS frameworks.",
-	links: {
-		facebook: "https://twitter.com/hnggngnn",
-		github: "https://github.com/hngngn/shadcn-solid",
-		shadcn: {
-			twitter: "https://twitter.com/shadcn",
-			github: "https://github.com/shadcn/ui",
-		},
-	},
-};
+  title: "shadcn-solid",
+  url: "https://shadcn-solid.com",
+  description:
+    "Beautifully designed components built with your choice of UI and CSS frameworks.",
+  links: {
+    facebook: "https://twitter.com/hnggngnn",
+    github: "https://github.com/hngngn/shadcn-solid",
+    shadcn: {
+      twitter: "https://twitter.com/shadcn",
+      github: "https://github.com/shadcn/ui",
+    },
+  },
+}
diff --git a/docs/src/entry-client.tsx b/docs/src/entry-client.tsx
index 9bda7ce9..7c9b9b2f 100644
--- a/docs/src/entry-client.tsx
+++ b/docs/src/entry-client.tsx
@@ -1,4 +1,4 @@
 // @refresh reload
-import { StartClient, mount } from "@solidjs/start/client";
+import { StartClient, mount } from "@solidjs/start/client"
 
-mount(() => <StartClient />, document.getElementById("app")!);
+mount(() => <StartClient />, document.getElementById("app")!)
diff --git a/docs/src/entry-server.tsx b/docs/src/entry-server.tsx
index 401eff83..2c2e2995 100644
--- a/docs/src/entry-server.tsx
+++ b/docs/src/entry-server.tsx
@@ -1,5 +1,5 @@
 // @refresh reload
-import { createHandler, StartServer } from "@solidjs/start/server";
+import { StartServer, createHandler } from "@solidjs/start/server"
 
 export default createHandler(() => (
   <StartServer
@@ -18,4 +18,4 @@ export default createHandler(() => (
       </html>
     )}
   />
-));
+))
diff --git a/docs/src/global.d.ts b/docs/src/global.d.ts
index 81e3968a..18f230ec 100644
--- a/docs/src/global.d.ts
+++ b/docs/src/global.d.ts
@@ -1,18 +1,18 @@
 /// <reference types="@solidjs/start/env" />
 
 declare module "virtual:content" {
-	export const allDocs: {
-		heading: { depth: number; slug: string; text: string }[];
-		frontmatter: {
-			title: string;
-			description: string;
-			component?: boolean;
-			link?: {
-				doc?: string;
-				api?: string;
-			};
-			toc?: boolean;
-		};
-		slug: string;
-	};
+  export const allDocs: {
+    heading: { depth: number; slug: string; text: string }[]
+    frontmatter: {
+      title: string
+      description: string
+      component?: boolean
+      link?: {
+        doc?: string
+        api?: string
+      }
+      toc?: boolean
+    }
+    slug: string
+  }
 }
diff --git a/docs/src/libs/blocks.ts b/docs/src/libs/blocks.ts
index c2269254..26dc8e6b 100644
--- a/docs/src/libs/blocks.ts
+++ b/docs/src/libs/blocks.ts
@@ -1,28 +1,29 @@
-"use server";
+"use server"
 
-import { Index } from "@/__registry__";
-import { registryEntrySchema } from "@/registry/schema";
-import * as v from "valibot";
+import { Index } from "@/__registry__"
+import * as v from "valibot"
 
-const BLOCKS_WHITELIST_PREFIXES = ["sidebar"];
-const REGISTRY_BLOCK_TYPES = ["registry:block"];
+import { registryEntrySchema } from "@/registry/schema"
+
+const BLOCKS_WHITELIST_PREFIXES = ["sidebar"]
+const REGISTRY_BLOCK_TYPES = ["registry:block"]
 
 export const getAllBlockId = async () => {
-	const blocks = await _getAllBlocks();
-	return blocks.map((block) => block.name);
-};
+  const blocks = await _getAllBlocks()
+  return blocks.map((block) => block.name)
+}
 
 const _getAllBlocks = async () => {
-	const index = await v.parseAsync(
-		v.record(v.string(), registryEntrySchema),
-		Index.tailwindcss,
-	);
+  const index = await v.parseAsync(
+    v.record(v.string(), registryEntrySchema),
+    Index.tailwindcss
+  )
 
-	return Object.values(index).filter((block) =>
-		BLOCKS_WHITELIST_PREFIXES.some(
-			(prefix) =>
-				block.name.startsWith(prefix) &&
-				REGISTRY_BLOCK_TYPES.includes(block.type),
-		),
-	);
-};
+  return Object.values(index).filter((block) =>
+    BLOCKS_WHITELIST_PREFIXES.some(
+      (prefix) =>
+        block.name.startsWith(prefix) &&
+        REGISTRY_BLOCK_TYPES.includes(block.type)
+    )
+  )
+}
diff --git a/docs/src/libs/highlight-code.ts b/docs/src/libs/highlight-code.ts
index b4c2a6a2..756eeb14 100644
--- a/docs/src/libs/highlight-code.ts
+++ b/docs/src/libs/highlight-code.ts
@@ -1,31 +1,31 @@
-import type { HighlighterCore } from "shiki";
-import { createHighlighterCore } from "shiki/core";
-import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import type { HighlighterCore } from "shiki"
+import { createHighlighterCore } from "shiki/core"
+import { createOnigurumaEngine } from "shiki/engine/oniguruma"
 
-let highlighterPromise: Promise<HighlighterCore> | null = null;
+let highlighterPromise: Promise<HighlighterCore> | null = null
 
 const getHighlighter = async () => {
-	if (!highlighterPromise) {
-		highlighterPromise = createHighlighterCore({
-			themes: [import("shiki/themes/vesper.mjs")],
-			langs: [import("shiki/langs/tsx.mjs")],
-			engine: createOnigurumaEngine(import("shiki/wasm")),
-		});
-	}
-	return highlighterPromise;
-};
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighterCore({
+      themes: [import("shiki/themes/vesper.mjs")],
+      langs: [import("shiki/langs/tsx.mjs")],
+      engine: createOnigurumaEngine(import("shiki/wasm")),
+    })
+  }
+  return highlighterPromise
+}
 
 export const highlightCode = async (code: string) => {
-	const highlighter = await getHighlighter();
-	return highlighter.codeToHtml(code, {
-		lang: "tsx",
-		theme: "vesper",
-		transformers: [
-			{
-				code(node) {
-					node.properties["data-line-numbers"] = "";
-				},
-			},
-		],
-	});
-};
+  const highlighter = await getHighlighter()
+  return highlighter.codeToHtml(code, {
+    lang: "tsx",
+    theme: "vesper",
+    transformers: [
+      {
+        code(node) {
+          node.properties["data-line-numbers"] = ""
+        },
+      },
+    ],
+  })
+}
diff --git a/docs/src/libs/registry.ts b/docs/src/libs/registry.ts
index ff99f576..eb080cff 100644
--- a/docs/src/libs/registry.ts
+++ b/docs/src/libs/registry.ts
@@ -1,260 +1,261 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 
-import fs from "node:fs";
-import { tmpdir } from "node:os";
-import path from "node:path";
-import { Index } from "@/__registry__";
+import fs from "node:fs"
+import { tmpdir } from "node:os"
+import path from "node:path"
+import { Index } from "@/__registry__"
+import { Project, ScriptKind, SyntaxKind, type SourceFile } from "ts-morph"
+import * as v from "valibot"
+
 import {
-	registryEntrySchema,
-	type registryItemFileSchema,
-} from "@/registry/schema";
-import { Project, ScriptKind, type SourceFile, SyntaxKind } from "ts-morph";
-import * as v from "valibot";
+  registryEntrySchema,
+  type registryItemFileSchema,
+} from "@/registry/schema"
 
 const memoizedIndex: typeof Index = Object.fromEntries(
-	Object.entries(Index).map(([style, items]) => [style, { ...items }]),
-);
+  Object.entries(Index).map(([style, items]) => [style, { ...items }])
+)
 
 const createTempSourceFile = (filename: string) => {
-	const dir = fs.mkdtempSync(path.join(tmpdir(), "shadcn-"));
-	return path.join(dir, filename);
-};
+  const dir = fs.mkdtempSync(path.join(tmpdir(), "shadcn-"))
+  return path.join(dir, filename)
+}
 
 const removeVariable = (sourceFile: SourceFile, name: string) => {
-	sourceFile.getVariableDeclaration(name)?.remove();
-};
+  sourceFile.getVariableDeclaration(name)?.remove()
+}
 
 const fixImport = (content: string) => {
-	const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g;
-
-	const replacement = (
-		match: string,
-		path: string,
-		type: string,
-		component: string,
-	) => {
-		if (type.endsWith("components")) {
-			return `@/components/${component}`;
-		}
-		if (type.endsWith("ui")) {
-			return `@/components/ui/${component}`;
-		}
-		if (type.endsWith("hooks")) {
-			return `@/hooks/${component}`;
-		}
-		if (type.endsWith("lib")) {
-			return `@/lib/${component}`;
-		}
-
-		return match;
-	};
-
-	return content.replace(regex, replacement);
-};
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    match: string,
+    path: string,
+    type: string,
+    component: string
+  ) => {
+    if (type.endsWith("components")) {
+      return `@/components/${component}`
+    }
+    if (type.endsWith("ui")) {
+      return `@/components/ui/${component}`
+    }
+    if (type.endsWith("hooks")) {
+      return `@/hooks/${component}`
+    }
+    if (type.endsWith("lib")) {
+      return `@/lib/${component}`
+    }
+
+    return match
+  }
+
+  return content.replace(regex, replacement)
+}
 
 export const getFileContent = (filePath: string) => {
-	const raw = fs.readFileSync(filePath, "utf-8");
+  const raw = fs.readFileSync(filePath, "utf-8")
 
-	const project = new Project({
-		compilerOptions: {},
-	});
+  const project = new Project({
+    compilerOptions: {},
+  })
 
-	const tempFile = createTempSourceFile(filePath);
-	const sourceFile = project.createSourceFile(tempFile, raw, {
-		scriptKind: ScriptKind.TSX,
-	});
+  const tempFile = createTempSourceFile(filePath)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
 
-	// Remove meta variables.
-	removeVariable(sourceFile, "iframeHeight");
-	removeVariable(sourceFile, "containerClassName");
-	removeVariable(sourceFile, "description");
+  // Remove meta variables.
+  removeVariable(sourceFile, "iframeHeight")
+  removeVariable(sourceFile, "containerClassName")
+  removeVariable(sourceFile, "description")
 
-	let code = sourceFile.getFullText();
+  let code = sourceFile.getFullText()
 
-	// Fix imports.
-	code = fixImport(code);
+  // Fix imports.
+  code = fixImport(code)
 
-	return JSON.stringify(code, null, 4);
-};
+  return JSON.stringify(code, null, 4)
+}
 
 const extractVariable = (sourceFile: SourceFile, name: string) => {
-	const variable = sourceFile.getVariableDeclaration(name);
-	if (!variable) {
-		return null;
-	}
+  const variable = sourceFile.getVariableDeclaration(name)
+  if (!variable) {
+    return null
+  }
 
-	const value = variable
-		.getInitializerIfKindOrThrow(SyntaxKind.StringLiteral)
-		.getLiteralValue();
+  const value = variable
+    .getInitializerIfKindOrThrow(SyntaxKind.StringLiteral)
+    .getLiteralValue()
 
-	variable.remove();
+  variable.remove()
 
-	return value;
-};
+  return value
+}
 
 export const getFileMeta = (filePath: string) => {
-	const raw = fs.readFileSync(filePath, "utf-8");
+  const raw = fs.readFileSync(filePath, "utf-8")
 
-	const project = new Project({
-		compilerOptions: {},
-	});
+  const project = new Project({
+    compilerOptions: {},
+  })
 
-	const tempFile = createTempSourceFile(filePath);
-	const sourceFile = project.createSourceFile(tempFile, raw, {
-		scriptKind: ScriptKind.TSX,
-	});
+  const tempFile = createTempSourceFile(filePath)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
 
-	const iframeHeight = extractVariable(sourceFile, "iframeHeight");
-	const containerClassName = extractVariable(sourceFile, "containerClassName");
-	const description = extractVariable(sourceFile, "description");
+  const iframeHeight = extractVariable(sourceFile, "iframeHeight")
+  const containerClassName = extractVariable(sourceFile, "containerClassName")
+  const description = extractVariable(sourceFile, "description")
 
-	return {
-		iframeHeight,
-		containerClassName,
-		description,
-	};
-};
+  return {
+    iframeHeight,
+    containerClassName,
+    description,
+  }
+}
 
 const getFileTarget = (file: v.InferInput<typeof registryItemFileSchema>) => {
-	let target = file.target;
+  let target = file.target
 
-	if (!target || target === "") {
-		const fileName = file.path.split("\\").pop();
+  if (!target || target === "") {
+    const fileName = file.path.split("\\").pop()
 
-		if (
-			file.type === "registry:block" ||
-			file.type === "registry:component" ||
-			file.type === "registry:example"
-		) {
-			target = `src/components/${fileName}`;
-		}
+    if (
+      file.type === "registry:block" ||
+      file.type === "registry:component" ||
+      file.type === "registry:example"
+    ) {
+      target = `src/components/${fileName}`
+    }
 
-		if (file.type === "registry:ui") {
-			target = `src/components/ui/${fileName}`;
-		}
+    if (file.type === "registry:ui") {
+      target = `src/components/ui/${fileName}`
+    }
 
-		if (file.type === "registry:hook") {
-			target = `src/hooks/${fileName}`;
-		}
+    if (file.type === "registry:hook") {
+      target = `src/hooks/${fileName}`
+    }
 
-		if (file.type === "registry:libs") {
-			target = `src/libs/${fileName}`;
-		}
-	}
+    if (file.type === "registry:libs") {
+      target = `src/libs/${fileName}`
+    }
+  }
 
-	return target;
-};
+  return target
+}
 
 export const fixFilePaths = (
-	files: v.InferInput<typeof registryEntrySchema>["files"],
+  files: v.InferInput<typeof registryEntrySchema>["files"]
 ) => {
-	if (!files) {
-		return [];
-	}
-
-	// Resolve all paths relative to the first file's directory.
-	const firstFilePath = files[0].path;
-	const firstFilePathDir = path.dirname(firstFilePath);
-
-	return files.map((file) => {
-		return {
-			...file,
-			path: path.relative(firstFilePathDir, file.path),
-			target: getFileTarget(file),
-		};
-	});
-};
+  if (!files) {
+    return []
+  }
+
+  // Resolve all paths relative to the first file's directory.
+  const firstFilePath = files[0].path
+  const firstFilePathDir = path.dirname(firstFilePath)
+
+  return files.map((file) => {
+    return {
+      ...file,
+      path: path.relative(firstFilePathDir, file.path),
+      target: getFileTarget(file),
+    }
+  })
+}
 
 export const getRegistryItem = (name: string) => {
-	const item = memoizedIndex.tailwindcss[name];
-
-	if (!item) {
-		return null;
-	}
-
-	// Convert all file paths to object.
-	// TODO: remove when we migrate to new registry.
-	item.files = item.files.map((file: unknown) =>
-		typeof file === "string" ? { path: file } : file,
-	);
-
-	// Fail early before doing expensive file operations.
-	const result = v.safeParse(registryEntrySchema, item);
-	if (!result.success) {
-		return null;
-	}
-
-	let files: typeof result.output.files = [];
-	for (const file of item.files) {
-		const content = getFileContent(file.path);
-		const relativePath = path.relative(process.cwd(), file.path);
-
-		files.push({
-			...file,
-			path: relativePath,
-			content,
-		});
-	}
-
-	// Get meta.
-	// Assume the first file is the main file.
-	const meta = getFileMeta(files[0].path);
-
-	// Fix file paths.
-	files = fixFilePaths(files);
-
-	const parsed = v.safeParse(registryEntrySchema, {
-		...result.output,
-		files,
-		meta,
-	});
-
-	if (!parsed.success) {
-		console.error(parsed.issues);
-		return null;
-	}
-
-	return parsed.output;
-};
+  const item = memoizedIndex.tailwindcss[name]
+
+  if (!item) {
+    return null
+  }
+
+  // Convert all file paths to object.
+  // TODO: remove when we migrate to new registry.
+  item.files = item.files.map((file: unknown) =>
+    typeof file === "string" ? { path: file } : file
+  )
+
+  // Fail early before doing expensive file operations.
+  const result = v.safeParse(registryEntrySchema, item)
+  if (!result.success) {
+    return null
+  }
+
+  let files: typeof result.output.files = []
+  for (const file of item.files) {
+    const content = getFileContent(file.path)
+    const relativePath = path.relative(process.cwd(), file.path)
+
+    files.push({
+      ...file,
+      path: relativePath,
+      content,
+    })
+  }
+
+  // Get meta.
+  // Assume the first file is the main file.
+  const meta = getFileMeta(files[0].path)
+
+  // Fix file paths.
+  files = fixFilePaths(files)
+
+  const parsed = v.safeParse(registryEntrySchema, {
+    ...result.output,
+    files,
+    meta,
+  })
+
+  if (!parsed.success) {
+    console.error(parsed.issues)
+    return null
+  }
+
+  return parsed.output
+}
 
 export type FileTree = {
-	name: string;
-	path?: string;
-	children?: FileTree[];
-};
+  name: string
+  path?: string
+  children?: FileTree[]
+}
 
 export const createFileTreeForRegistryItemFiles = (
-	files: { path: string; target?: string }[],
+  files: { path: string; target?: string }[]
 ) => {
-	const root: FileTree[] = [];
-
-	for (const file of files) {
-		const path = file.target ?? file.path;
-		const parts = path.split("/");
-		let currentLevel = root;
-		for (let i = 0; i < parts.length; i++) {
-			const part = parts[i];
-			const isFile = i === parts.length - 1;
-			const existingNode = currentLevel.find((node) => node.name === part);
-			if (existingNode) {
-				if (isFile) {
-					// Update existing file node with full path
-					existingNode.path = path;
-				} else {
-					// Move to next level in the tree
-					currentLevel = existingNode.children!;
-				}
-			} else {
-				const newNode: FileTree = isFile
-					? { name: part, path }
-					: { name: part, children: [] };
-				currentLevel.push(newNode);
-				if (!isFile) {
-					currentLevel = newNode.children!;
-				}
-			}
-		}
-	}
-
-	return root;
-};
+  const root: FileTree[] = []
+
+  for (const file of files) {
+    const path = file.target ?? file.path
+    const parts = path.split("/")
+    let currentLevel = root
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const existingNode = currentLevel.find((node) => node.name === part)
+      if (existingNode) {
+        if (isFile) {
+          // Update existing file node with full path
+          existingNode.path = path
+        } else {
+          // Move to next level in the tree
+          currentLevel = existingNode.children!
+        }
+      } else {
+        const newNode: FileTree = isFile
+          ? { name: part, path }
+          : { name: part, children: [] }
+        currentLevel.push(newNode)
+        if (!isFile) {
+          currentLevel = newNode.children!
+        }
+      }
+    }
+  }
+
+  return root
+}
diff --git a/docs/src/registry/base-color.ts b/docs/src/registry/base-color.ts
index 4abedc29..a63f399d 100644
--- a/docs/src/registry/base-color.ts
+++ b/docs/src/registry/base-color.ts
@@ -1,756 +1,756 @@
 export const baseColors = [
-	{
-		name: "zinc",
-		label: "Zinc",
-		activeColor: {
-			light: "240 5.9% 10%",
-			dark: "240 5.2% 33.9%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "240 10% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "240 10% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "240 10% 3.9%",
-				primary: "240 5.9% 10%",
-				"primary-foreground": "0 0% 98%",
-				secondary: "240 4.8% 95.9%",
-				"secondary-foreground": "240 5.9% 10%",
-				muted: "240 4.8% 95.9%",
-				"muted-foreground": "240 3.8% 46.1%",
-				accent: "240 4.8% 95.9%",
-				"accent-foreground": "240 5.9% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "240 5.9% 90%",
-				input: "240 5.9% 90%",
-				ring: "240 5.9% 10%",
-				radius: "0.5rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "240 10% 3.9%",
-				foreground: "0 0% 98%",
-				card: "240 10% 3.9%",
-				"card-foreground": "0 0% 98%",
-				popover: "240 10% 3.9%",
-				"popover-foreground": "0 0% 98%",
-				primary: "0 0% 98%",
-				"primary-foreground": "240 5.9% 10%",
-				secondary: "240 3.7% 15.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "240 3.7% 15.9%",
-				"muted-foreground": "240 5% 64.9%",
-				accent: "240 3.7% 15.9%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 0% 98%",
-				border: "240 3.7% 15.9%",
-				input: "240 3.7% 15.9%",
-				ring: "240 4.9% 83.9%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "slate",
-		label: "Slate",
-		activeColor: {
-			light: "215.4 16.3% 46.9%",
-			dark: "215.3 19.3% 34.5%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "222.2 84% 4.9%",
-				card: "0 0% 100%",
-				"card-foreground": "222.2 84% 4.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "222.2 84% 4.9%",
-				primary: "222.2 47.4% 11.2%",
-				"primary-foreground": "210 40% 98%",
-				secondary: "210 40% 96.1%",
-				"secondary-foreground": "222.2 47.4% 11.2%",
-				muted: "210 40% 96.1%",
-				"muted-foreground": "215.4 16.3% 46.9%",
-				accent: "210 40% 96.1%",
-				"accent-foreground": "222.2 47.4% 11.2%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "210 40% 98%",
-				border: "214.3 31.8% 91.4%",
-				input: "214.3 31.8% 91.4%",
-				ring: "222.2 84% 4.9%",
-				radius: "0.5rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "222.2 84% 4.9%",
-				foreground: "210 40% 98%",
-				card: "222.2 84% 4.9%",
-				"card-foreground": "210 40% 98%",
-				popover: "222.2 84% 4.9%",
-				"popover-foreground": "210 40% 98%",
-				primary: "210 40% 98%",
-				"primary-foreground": "222.2 47.4% 11.2%",
-				secondary: "217.2 32.6% 17.5%",
-				"secondary-foreground": "210 40% 98%",
-				muted: "217.2 32.6% 17.5%",
-				"muted-foreground": "215 20.2% 65.1%",
-				accent: "217.2 32.6% 17.5%",
-				"accent-foreground": "210 40% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "210 40% 98%",
-				border: "217.2 32.6% 17.5%",
-				input: "217.2 32.6% 17.5%",
-				ring: "212.7 26.8% 83.9",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "stone",
-		label: "Stone",
-		activeColor: {
-			light: "25 5.3% 44.7%",
-			dark: "33.3 5.5% 32.4%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "20 14.3% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "20 14.3% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "20 14.3% 4.1%",
-				primary: "24 9.8% 10%",
-				"primary-foreground": "60 9.1% 97.8%",
-				secondary: "60 4.8% 95.9%",
-				"secondary-foreground": "24 9.8% 10%",
-				muted: "60 4.8% 95.9%",
-				"muted-foreground": "25 5.3% 44.7%",
-				accent: "60 4.8% 95.9%",
-				"accent-foreground": "24 9.8% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "20 5.9% 90%",
-				input: "20 5.9% 90%",
-				ring: "20 14.3% 4.1%",
-				radius: "0.95rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "20 14.3% 4.1%",
-				foreground: "60 9.1% 97.8%",
-				card: "20 14.3% 4.1%",
-				"card-foreground": "60 9.1% 97.8%",
-				popover: "20 14.3% 4.1%",
-				"popover-foreground": "60 9.1% 97.8%",
-				primary: "60 9.1% 97.8%",
-				"primary-foreground": "24 9.8% 10%",
-				secondary: "12 6.5% 15.1%",
-				"secondary-foreground": "60 9.1% 97.8%",
-				muted: "12 6.5% 15.1%",
-				"muted-foreground": "24 5.4% 63.9%",
-				accent: "12 6.5% 15.1%",
-				"accent-foreground": "60 9.1% 97.8%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "12 6.5% 15.1%",
-				input: "12 6.5% 15.1%",
-				ring: "24 5.7% 82.9%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "gray",
-		label: "Gray",
-		activeColor: {
-			light: "220 8.9% 46.1%",
-			dark: "215 13.8% 34.1%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "224 71.4% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "224 71.4% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "224 71.4% 4.1%",
-				primary: "220.9 39.3% 11%",
-				"primary-foreground": "210 20% 98%",
-				secondary: "220 14.3% 95.9%",
-				"secondary-foreground": "220.9 39.3% 11%",
-				muted: "220 14.3% 95.9%",
-				"muted-foreground": "220 8.9% 46.1%",
-				accent: "220 14.3% 95.9%",
-				"accent-foreground": "220.9 39.3% 11%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "210 20% 98%",
-				border: "220 13% 91%",
-				input: "220 13% 91%",
-				ring: "224 71.4% 4.1%",
-				radius: "0.35rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "224 71.4% 4.1%",
-				foreground: "210 20% 98%",
-				card: "224 71.4% 4.1%",
-				"card-foreground": "210 20% 98%",
-				popover: "224 71.4% 4.1%",
-				"popover-foreground": "210 20% 98%",
-				primary: "210 20% 98%",
-				"primary-foreground": "220.9 39.3% 11%",
-				secondary: "215 27.9% 16.9%",
-				"secondary-foreground": "210 20% 98%",
-				muted: "215 27.9% 16.9%",
-				"muted-foreground": "217.9 10.6% 64.9%",
-				accent: "215 27.9% 16.9%",
-				"accent-foreground": "210 20% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "210 20% 98%",
-				border: "215 27.9% 16.9%",
-				input: "215 27.9% 16.9%",
-				ring: "216 12.2% 83.9%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "neutral",
-		label: "Neutral",
-		activeColor: {
-			light: "0 0% 45.1%",
-			dark: "0 0% 32.2%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "0 0% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "0 0% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "0 0% 3.9%",
-				primary: "0 0% 9%",
-				"primary-foreground": "0 0% 98%",
-				secondary: "0 0% 96.1%",
-				"secondary-foreground": "0 0% 9%",
-				muted: "0 0% 96.1%",
-				"muted-foreground": "0 0% 45.1%",
-				accent: "0 0% 96.1%",
-				"accent-foreground": "0 0% 9%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "0 0% 89.8%",
-				input: "0 0% 89.8%",
-				ring: "0 0% 3.9%",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "0 0% 3.9%",
-				foreground: "0 0% 98%",
-				card: "0 0% 3.9%",
-				"card-foreground": "0 0% 98%",
-				popover: "0 0% 3.9%",
-				"popover-foreground": "0 0% 98%",
-				primary: "0 0% 98%",
-				"primary-foreground": "0 0% 9%",
-				secondary: "0 0% 14.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "0 0% 14.9%",
-				"muted-foreground": "0 0% 63.9%",
-				accent: "0 0% 14.9%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 0% 98%",
-				border: "0 0% 14.9%",
-				input: "0 0% 14.9%",
-				ring: "0 0% 83.1%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "red",
-		label: "Red",
-		activeColor: {
-			light: "0 72.2% 50.6%",
-			dark: "0 72.2% 50.6%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "0 0% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "0 0% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "0 0% 3.9%",
-				primary: "0 72.2% 50.6%",
-				"primary-foreground": "0 85.7% 97.3%",
-				secondary: "0 0% 96.1%",
-				"secondary-foreground": "0 0% 9%",
-				muted: "0 0% 96.1%",
-				"muted-foreground": "0 0% 45.1%",
-				accent: "0 0% 96.1%",
-				"accent-foreground": "0 0% 9%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "0 0% 89.8%",
-				input: "0 0% 89.8%",
-				ring: "0 72.2% 50.6%",
-				radius: "0.4rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "0 0% 3.9%",
-				foreground: "0 0% 98%",
-				card: "0 0% 3.9%",
-				"card-foreground": "0 0% 98%",
-				popover: "0 0% 3.9%",
-				"popover-foreground": "0 0% 98%",
-				primary: "0 72.2% 50.6%",
-				"primary-foreground": "0 85.7% 97.3%",
-				secondary: "0 0% 14.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "0 0% 14.9%",
-				"muted-foreground": "0 0% 63.9%",
-				accent: "0 0% 14.9%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 0% 98%",
-				border: "0 0% 14.9%",
-				input: "0 0% 14.9%",
-				ring: "0 72.2% 50.6%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "rose",
-		label: "Rose",
-		activeColor: {
-			light: "346.8 77.2% 49.8%",
-			dark: "346.8 77.2% 49.8%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "240 10% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "240 10% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "240 10% 3.9%",
-				primary: "346.8 77.2% 49.8%",
-				"primary-foreground": "355.7 100% 97.3%",
-				secondary: "240 4.8% 95.9%",
-				"secondary-foreground": "240 5.9% 10%",
-				muted: "240 4.8% 95.9%",
-				"muted-foreground": "240 3.8% 46.1%",
-				accent: "240 4.8% 95.9%",
-				"accent-foreground": "240 5.9% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "240 5.9% 90%",
-				input: "240 5.9% 90%",
-				ring: "346.8 77.2% 49.8%",
-				radius: "0.5rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "20 14.3% 4.1%",
-				foreground: "0 0% 95%",
-				popover: "0 0% 9%",
-				"popover-foreground": "0 0% 95%",
-				card: "24 9.8% 10%",
-				"card-foreground": "0 0% 95%",
-				primary: "346.8 77.2% 49.8%",
-				"primary-foreground": "355.7 100% 97.3%",
-				secondary: "240 3.7% 15.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "0 0% 15%",
-				"muted-foreground": "240 5% 64.9%",
-				accent: "12 6.5% 15.1%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 85.7% 97.3%",
-				border: "240 3.7% 15.9%",
-				input: "240 3.7% 15.9%",
-				ring: "346.8 77.2% 49.8%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "orange",
-		label: "Orange",
-		activeColor: {
-			light: "24.6 95% 53.1%",
-			dark: "20.5 90.2% 48.2%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "20 14.3% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "20 14.3% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "20 14.3% 4.1%",
-				primary: "24.6 95% 53.1%",
-				"primary-foreground": "60 9.1% 97.8%",
-				secondary: "60 4.8% 95.9%",
-				"secondary-foreground": "24 9.8% 10%",
-				muted: "60 4.8% 95.9%",
-				"muted-foreground": "25 5.3% 44.7%",
-				accent: "60 4.8% 95.9%",
-				"accent-foreground": "24 9.8% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "20 5.9% 90%",
-				input: "20 5.9% 90%",
-				ring: "24.6 95% 53.1%",
-				radius: "0.95rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "20 14.3% 4.1%",
-				foreground: "60 9.1% 97.8%",
-				card: "20 14.3% 4.1%",
-				"card-foreground": "60 9.1% 97.8%",
-				popover: "20 14.3% 4.1%",
-				"popover-foreground": "60 9.1% 97.8%",
-				primary: "20.5 90.2% 48.2%",
-				"primary-foreground": "60 9.1% 97.8%",
-				secondary: "12 6.5% 15.1%",
-				"secondary-foreground": "60 9.1% 97.8%",
-				muted: "12 6.5% 15.1%",
-				"muted-foreground": "24 5.4% 63.9%",
-				accent: "12 6.5% 15.1%",
-				"accent-foreground": "60 9.1% 97.8%",
-				destructive: "0 72.2% 50.6%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "12 6.5% 15.1%",
-				input: "12 6.5% 15.1%",
-				ring: "20.5 90.2% 48.2%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "green",
-		label: "Green",
-		activeColor: {
-			light: "142.1 76.2% 36.3%",
-			dark: "142.1 70.6% 45.3%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "240 10% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "240 10% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "240 10% 3.9%",
-				primary: "142.1 76.2% 36.3%",
-				"primary-foreground": "355.7 100% 97.3%",
-				secondary: "240 4.8% 95.9%",
-				"secondary-foreground": "240 5.9% 10%",
-				muted: "240 4.8% 95.9%",
-				"muted-foreground": "240 3.8% 46.1%",
-				accent: "240 4.8% 95.9%",
-				"accent-foreground": "240 5.9% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "240 5.9% 90%",
-				input: "240 5.9% 90%",
-				ring: "142.1 76.2% 36.3%",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "20 14.3% 4.1%",
-				foreground: "0 0% 95%",
-				popover: "0 0% 9%",
-				"popover-foreground": "0 0% 95%",
-				card: "24 9.8% 10%",
-				"card-foreground": "0 0% 95%",
-				primary: "142.1 70.6% 45.3%",
-				"primary-foreground": "144.9 80.4% 10%",
-				secondary: "240 3.7% 15.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "0 0% 15%",
-				"muted-foreground": "240 5% 64.9%",
-				accent: "12 6.5% 15.1%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 85.7% 97.3%",
-				border: "240 3.7% 15.9%",
-				input: "240 3.7% 15.9%",
-				ring: "142.4 71.8% 29.2%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "blue",
-		label: "Blue",
-		activeColor: {
-			light: "221.2 83.2% 53.3%",
-			dark: "217.2 91.2% 59.8%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "222.2 84% 4.9%",
-				card: "0 0% 100%",
-				"card-foreground": "222.2 84% 4.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "222.2 84% 4.9%",
-				primary: "221.2 83.2% 53.3%",
-				"primary-foreground": "210 40% 98%",
-				secondary: "210 40% 96.1%",
-				"secondary-foreground": "222.2 47.4% 11.2%",
-				muted: "210 40% 96.1%",
-				"muted-foreground": "215.4 16.3% 46.9%",
-				accent: "210 40% 96.1%",
-				"accent-foreground": "222.2 47.4% 11.2%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "210 40% 98%",
-				border: "214.3 31.8% 91.4%",
-				input: "214.3 31.8% 91.4%",
-				ring: "221.2 83.2% 53.3%",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "222.2 84% 4.9%",
-				foreground: "210 40% 98%",
-				card: "222.2 84% 4.9%",
-				"card-foreground": "210 40% 98%",
-				popover: "222.2 84% 4.9%",
-				"popover-foreground": "210 40% 98%",
-				primary: "217.2 91.2% 59.8%",
-				"primary-foreground": "222.2 47.4% 11.2%",
-				secondary: "217.2 32.6% 17.5%",
-				"secondary-foreground": "210 40% 98%",
-				muted: "217.2 32.6% 17.5%",
-				"muted-foreground": "215 20.2% 65.1%",
-				accent: "217.2 32.6% 17.5%",
-				"accent-foreground": "210 40% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "210 40% 98%",
-				border: "217.2 32.6% 17.5%",
-				input: "217.2 32.6% 17.5%",
-				ring: "224.3 76.3% 48%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "yellow",
-		label: "Yellow",
-		activeColor: {
-			light: "47.9 95.8% 53.1%",
-			dark: "47.9 95.8% 53.1%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "20 14.3% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "20 14.3% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "20 14.3% 4.1%",
-				primary: "47.9 95.8% 53.1%",
-				"primary-foreground": "26 83.3% 14.1%",
-				secondary: "60 4.8% 95.9%",
-				"secondary-foreground": "24 9.8% 10%",
-				muted: "60 4.8% 95.9%",
-				"muted-foreground": "25 5.3% 44.7%",
-				accent: "60 4.8% 95.9%",
-				"accent-foreground": "24 9.8% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "20 5.9% 90%",
-				input: "20 5.9% 90%",
-				ring: "20 14.3% 4.1%",
-				radius: "0.95rem",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "20 14.3% 4.1%",
-				foreground: "60 9.1% 97.8%",
-				card: "20 14.3% 4.1%",
-				"card-foreground": "60 9.1% 97.8%",
-				popover: "20 14.3% 4.1%",
-				"popover-foreground": "60 9.1% 97.8%",
-				primary: "47.9 95.8% 53.1%",
-				"primary-foreground": "26 83.3% 14.1%",
-				secondary: "12 6.5% 15.1%",
-				"secondary-foreground": "60 9.1% 97.8%",
-				muted: "12 6.5% 15.1%",
-				"muted-foreground": "24 5.4% 63.9%",
-				accent: "12 6.5% 15.1%",
-				"accent-foreground": "60 9.1% 97.8%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "12 6.5% 15.1%",
-				input: "12 6.5% 15.1%",
-				ring: "35.5 91.7% 32.9%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-	{
-		name: "violet",
-		label: "Violet",
-		activeColor: {
-			light: "262.1 83.3% 57.8%",
-			dark: "263.4 70% 50.4%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "224 71.4% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "224 71.4% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "224 71.4% 4.1%",
-				primary: "262.1 83.3% 57.8%",
-				"primary-foreground": "210 20% 98%",
-				secondary: "220 14.3% 95.9%",
-				"secondary-foreground": "220.9 39.3% 11%",
-				muted: "220 14.3% 95.9%",
-				"muted-foreground": "220 8.9% 46.1%",
-				accent: "220 14.3% 95.9%",
-				"accent-foreground": "220.9 39.3% 11%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "210 20% 98%",
-				border: "220 13% 91%",
-				input: "220 13% 91%",
-				ring: "262.1 83.3% 57.8%",
-				"chart-1": "12 76% 61%",
-				"chart-2": "173 58% 39%",
-				"chart-3": "197 37% 24%",
-				"chart-4": "43 74% 66%",
-				"chart-5": "27 87% 67%",
-			},
-			dark: {
-				background: "224 71.4% 4.1%",
-				foreground: "210 20% 98%",
-				card: "224 71.4% 4.1%",
-				"card-foreground": "210 20% 98%",
-				popover: "224 71.4% 4.1%",
-				"popover-foreground": "210 20% 98%",
-				primary: "263.4 70% 50.4%",
-				"primary-foreground": "210 20% 98%",
-				secondary: "215 27.9% 16.9%",
-				"secondary-foreground": "210 20% 98%",
-				muted: "215 27.9% 16.9%",
-				"muted-foreground": "217.9 10.6% 64.9%",
-				accent: "215 27.9% 16.9%",
-				"accent-foreground": "210 20% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "210 20% 98%",
-				border: "215 27.9% 16.9%",
-				input: "215 27.9% 16.9%",
-				ring: "263.4 70% 50.4%",
-				"chart-1": "220 70% 50%",
-				"chart-2": "160 60% 45%",
-				"chart-3": "30 80% 55%",
-				"chart-4": "280 65% 60%",
-				"chart-5": "340 75% 55%",
-			},
-		},
-	},
-] as const;
+  {
+    name: "zinc",
+    label: "Zinc",
+    activeColor: {
+      light: "240 5.9% 10%",
+      dark: "240 5.2% 33.9%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "240 5.9% 10%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "240 5.9% 10%",
+        radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "240 10% 3.9%",
+        foreground: "0 0% 98%",
+        card: "240 10% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "240 10% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "240 5.9% 10%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "240 3.7% 15.9%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "240 3.7% 15.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "240 4.9% 83.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "slate",
+    label: "Slate",
+    activeColor: {
+      light: "215.4 16.3% 46.9%",
+      dark: "215.3 19.3% 34.5%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        primary: "222.2 47.4% 11.2%",
+        "primary-foreground": "210 40% 98%",
+        secondary: "210 40% 96.1%",
+        "secondary-foreground": "222.2 47.4% 11.2%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "222.2 84% 4.9%",
+        radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "210 40% 98%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "212.7 26.8% 83.9",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "stone",
+    label: "Stone",
+    activeColor: {
+      light: "25 5.3% 44.7%",
+      dark: "33.3 5.5% 32.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24 9.8% 10%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "60 9.1% 97.8%",
+        "primary-foreground": "24 9.8% 10%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "24 5.7% 82.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "gray",
+    label: "Gray",
+    activeColor: {
+      light: "220 8.9% 46.1%",
+      dark: "215 13.8% 34.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "220.9 39.3% 11%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "224 71.4% 4.1%",
+        radius: "0.35rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "210 20% 98%",
+        "primary-foreground": "220.9 39.3% 11%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "216 12.2% 83.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "neutral",
+    label: "Neutral",
+    activeColor: {
+      light: "0 0% 45.1%",
+      dark: "0 0% 32.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 0% 9%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 0% 3.9%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "0 0% 9%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 0% 83.1%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "red",
+    label: "Red",
+    activeColor: {
+      light: "0 72.2% 50.6%",
+      dark: "0 72.2% 50.6%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 72.2% 50.6%",
+        "primary-foreground": "0 85.7% 97.3%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 72.2% 50.6%",
+        radius: "0.4rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 72.2% 50.6%",
+        "primary-foreground": "0 85.7% 97.3%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 72.2% 50.6%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    activeColor: {
+      light: "346.8 77.2% 49.8%",
+      dark: "346.8 77.2% 49.8%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "346.8 77.2% 49.8%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "346.8 77.2% 49.8%",
+        radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "0 0% 95%",
+        popover: "0 0% 9%",
+        "popover-foreground": "0 0% 95%",
+        card: "24 9.8% 10%",
+        "card-foreground": "0 0% 95%",
+        primary: "346.8 77.2% 49.8%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 15%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 85.7% 97.3%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "346.8 77.2% 49.8%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "orange",
+    label: "Orange",
+    activeColor: {
+      light: "24.6 95% 53.1%",
+      dark: "20.5 90.2% 48.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24.6 95% 53.1%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "24.6 95% 53.1%",
+        radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "20.5 90.2% 48.2%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 72.2% 50.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "20.5 90.2% 48.2%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "green",
+    label: "Green",
+    activeColor: {
+      light: "142.1 76.2% 36.3%",
+      dark: "142.1 70.6% 45.3%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "142.1 76.2% 36.3%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "142.1 76.2% 36.3%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "0 0% 95%",
+        popover: "0 0% 9%",
+        "popover-foreground": "0 0% 95%",
+        card: "24 9.8% 10%",
+        "card-foreground": "0 0% 95%",
+        primary: "142.1 70.6% 45.3%",
+        "primary-foreground": "144.9 80.4% 10%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 15%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 85.7% 97.3%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "142.4 71.8% 29.2%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "blue",
+    label: "Blue",
+    activeColor: {
+      light: "221.2 83.2% 53.3%",
+      dark: "217.2 91.2% 59.8%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        primary: "221.2 83.2% 53.3%",
+        "primary-foreground": "210 40% 98%",
+        secondary: "210 40% 96.1%",
+        "secondary-foreground": "222.2 47.4% 11.2%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "221.2 83.2% 53.3%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "217.2 91.2% 59.8%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "224.3 76.3% 48%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "yellow",
+    label: "Yellow",
+    activeColor: {
+      light: "47.9 95.8% 53.1%",
+      dark: "47.9 95.8% 53.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "47.9 95.8% 53.1%",
+        "primary-foreground": "26 83.3% 14.1%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "47.9 95.8% 53.1%",
+        "primary-foreground": "26 83.3% 14.1%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "35.5 91.7% 32.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+  {
+    name: "violet",
+    label: "Violet",
+    activeColor: {
+      light: "262.1 83.3% 57.8%",
+      dark: "263.4 70% 50.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "262.1 83.3% 57.8%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "262.1 83.3% 57.8%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "263.4 70% 50.4%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "263.4 70% 50.4%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
+      },
+    },
+  },
+] as const
 
-export type BaseColor = (typeof baseColors)[number];
+export type BaseColor = (typeof baseColors)[number]
diff --git a/docs/src/registry/blocks.ts b/docs/src/registry/blocks.ts
index 19aa90df..4e9ffe36 100644
--- a/docs/src/registry/blocks.ts
+++ b/docs/src/registry/blocks.ts
@@ -1,103 +1,103 @@
-import type { Registry } from "./schema";
+import type { Registry } from "./schema"
 
 export const blocks: Registry = [
-	{
-		name: "sidebar-01",
-		type: "registry:block",
-		description: "A sidebar that collapses to icons.",
-		registryDependencies: [
-			"sidebar",
-			"separator",
-			"collapsible",
-			"dropdown-menu",
-		],
-		files: [
-			{
-				path: "blocks/sidebar-01/index.tsx",
-				type: "registry:page",
-				target: "src/routes/dashboard.tsx",
-			},
-			{
-				path: "blocks/sidebar-01/components/app-sidebar.tsx",
-				type: "registry:component",
-				target: "src/components/app-sidebar.tsx",
-			},
-			{
-				path: "blocks/sidebar-01/components/nav-main.tsx",
-				type: "registry:component",
-				target: "src/components/nav-main.tsx",
-			},
-			{
-				path: "blocks/sidebar-01/components/nav-projects.tsx",
-				type: "registry:component",
-				target: "src/components/nav-projects.tsx",
-			},
-			{
-				path: "blocks/sidebar-01/components/nav-user.tsx",
-				type: "registry:component",
-				target: "src/components/nav-user.tsx",
-			},
-			{
-				path: "blocks/sidebar-01/components/team-switcher.tsx",
-				type: "registry:component",
-				target: "src/components/team-switcher.tsx",
-			},
-		],
-	},
-	{
-		name: "sidebar-02",
-		type: "registry:block",
-		description: "A floating sidebar with submenus.",
-		registryDependencies: ["sidebar"],
-		files: [
-			{
-				path: "blocks/sidebar-02/index.tsx",
-				type: "registry:page",
-				target: "src/routes/dashboard.tsx",
-			},
-			{
-				path: "blocks/sidebar-02/components/app-sidebar.tsx",
-				type: "registry:component",
-				target: "src/components/app-sidebar.tsx",
-			},
-		],
-	},
-	{
-		name: "sidebar-03",
-		type: "registry:block",
-		description: "An inset sidebar with secondary navigation.",
-		registryDependencies: ["sidebar", "collapsible", "dropdown-menu"],
-		files: [
-			{
-				path: "blocks/sidebar-03/index.tsx",
-				type: "registry:page",
-				target: "src/routes/dashboard.tsx",
-			},
-			{
-				path: "blocks/sidebar-03/components/app-sidebar.tsx",
-				type: "registry:component",
-				target: "src/components/app-sidebar.tsx",
-			},
-			{
-				path: "blocks/sidebar-03/components/nav-main.tsx",
-				type: "registry:component",
-				target: "src/components/nav-main.tsx",
-			},
-			{
-				path: "blocks/sidebar-03/components/nav-projects.tsx",
-				type: "registry:component",
-				target: "src/components/nav-projects.tsx",
-			},
-			{
-				path: "blocks/sidebar-03/components/nav-user.tsx",
-				type: "registry:component",
-				target: "src/components/nav-user.tsx",
-			},
-			{
-				path: "blocks/sidebar-03/components/nav-secondary.tsx",
-				type: "registry:component",
-				target: "src/components/nav-secondary.tsx",
-			},
-		],
-	},
-];
+  {
+    name: "sidebar-01",
+    type: "registry:block",
+    description: "A sidebar that collapses to icons.",
+    registryDependencies: [
+      "sidebar",
+      "separator",
+      "collapsible",
+      "dropdown-menu",
+    ],
+    files: [
+      {
+        path: "blocks/sidebar-01/index.tsx",
+        type: "registry:page",
+        target: "src/routes/dashboard.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: "src/components/app-sidebar.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/nav-main.tsx",
+        type: "registry:component",
+        target: "src/components/nav-main.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/nav-projects.tsx",
+        type: "registry:component",
+        target: "src/components/nav-projects.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/nav-user.tsx",
+        type: "registry:component",
+        target: "src/components/nav-user.tsx",
+      },
+      {
+        path: "blocks/sidebar-01/components/team-switcher.tsx",
+        type: "registry:component",
+        target: "src/components/team-switcher.tsx",
+      },
+    ],
+  },
+  {
+    name: "sidebar-02",
+    type: "registry:block",
+    description: "A floating sidebar with submenus.",
+    registryDependencies: ["sidebar"],
+    files: [
+      {
+        path: "blocks/sidebar-02/index.tsx",
+        type: "registry:page",
+        target: "src/routes/dashboard.tsx",
+      },
+      {
+        path: "blocks/sidebar-02/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: "src/components/app-sidebar.tsx",
+      },
+    ],
+  },
+  {
+    name: "sidebar-03",
+    type: "registry:block",
+    description: "An inset sidebar with secondary navigation.",
+    registryDependencies: ["sidebar", "collapsible", "dropdown-menu"],
+    files: [
+      {
+        path: "blocks/sidebar-03/index.tsx",
+        type: "registry:page",
+        target: "src/routes/dashboard.tsx",
+      },
+      {
+        path: "blocks/sidebar-03/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: "src/components/app-sidebar.tsx",
+      },
+      {
+        path: "blocks/sidebar-03/components/nav-main.tsx",
+        type: "registry:component",
+        target: "src/components/nav-main.tsx",
+      },
+      {
+        path: "blocks/sidebar-03/components/nav-projects.tsx",
+        type: "registry:component",
+        target: "src/components/nav-projects.tsx",
+      },
+      {
+        path: "blocks/sidebar-03/components/nav-user.tsx",
+        type: "registry:component",
+        target: "src/components/nav-user.tsx",
+      },
+      {
+        path: "blocks/sidebar-03/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: "src/components/nav-secondary.tsx",
+      },
+    ],
+  },
+]
diff --git a/docs/src/registry/charts.ts b/docs/src/registry/charts.ts
index 010c0841..921801cc 100644
--- a/docs/src/registry/charts.ts
+++ b/docs/src/registry/charts.ts
@@ -1,148 +1,148 @@
-import type { Registry } from "./schema";
+import type { Registry } from "./schema"
 
 export const charts: Registry = [
-	// Area Charts
-	{
-		name: "area-chart",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/area-chart.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "area-chart-linear",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/area-chart-linear.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "area-chart-step",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/area-chart-step.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "area-chart-stacked",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/area-chart-stacked.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "area-chart-legend",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/area-chart-legend.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "area-chart-gradient",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/area-chart-gradient.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "area-chart-interactive",
-		type: "registry:block",
-		registryDependencies: ["card", "chart", "use-mobile"],
-		files: [
-			{
-				path: "charts/area-chart-interactive.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "bar-chart",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/bar-chart.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "bar-chart-horizontal",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/bar-chart-horizontal.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "bar-chart-multiply",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/bar-chart-multiply.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "bar-chart-stacked",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/bar-chart-stacked.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "bar-chart-mixed",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/bar-chart-mixed.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-	{
-		name: "bar-chart-active",
-		type: "registry:block",
-		registryDependencies: ["card", "chart"],
-		files: [
-			{
-				path: "charts/bar-chart-active.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-];
+  // Area Charts
+  {
+    name: "area-chart",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/area-chart.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "area-chart-linear",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/area-chart-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "area-chart-step",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/area-chart-step.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "area-chart-stacked",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/area-chart-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "area-chart-legend",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/area-chart-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "area-chart-gradient",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/area-chart-gradient.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "area-chart-interactive",
+    type: "registry:block",
+    registryDependencies: ["card", "chart", "use-mobile"],
+    files: [
+      {
+        path: "charts/area-chart-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "bar-chart",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/bar-chart.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "bar-chart-horizontal",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/bar-chart-horizontal.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "bar-chart-multiply",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/bar-chart-multiply.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "bar-chart-stacked",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/bar-chart-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "bar-chart-mixed",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/bar-chart-mixed.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+  {
+    name: "bar-chart-active",
+    type: "registry:block",
+    registryDependencies: ["card", "chart"],
+    files: [
+      {
+        path: "charts/bar-chart-active.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+]
diff --git a/docs/src/registry/colors.ts b/docs/src/registry/colors.ts
index 239dae3d..259b67ca 100644
--- a/docs/src/registry/colors.ts
+++ b/docs/src/registry/colors.ts
@@ -1,1556 +1,1556 @@
 export const colors = {
-	inherit: "inherit",
-	current: "currentColor",
-	transparent: "transparent",
-	black: {
-		hex: "#000000",
-		rgb: "rgb(0,0,0)",
-		hsl: "hsl(0,0%,0%)",
-	},
-	white: {
-		hex: "#ffffff",
-		rgb: "rgb(255,255,255)",
-		hsl: "hsl(0,0%,100%)",
-	},
-	slate: [
-		{
-			scale: 50,
-			hex: "#f8fafc",
-			rgb: "rgb(248,250,252)",
-			hsl: "hsl(210,40%,98%)",
-		},
-		{
-			scale: 100,
-			hex: "#f1f5f9",
-			rgb: "rgb(241,245,249)",
-			hsl: "hsl(210,40%,96.1%)",
-		},
-		{
-			scale: 200,
-			hex: "#e2e8f0",
-			rgb: "rgb(226,232,240)",
-			hsl: "hsl(214.3,31.8%,91.4%)",
-		},
-		{
-			scale: 300,
-			hex: "#cbd5e1",
-			rgb: "rgb(203,213,225)",
-			hsl: "hsl(212.7,26.8%,83.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#94a3b8",
-			rgb: "rgb(148,163,184)",
-			hsl: "hsl(215,20.2%,65.1%)",
-		},
-		{
-			scale: 500,
-			hex: "#64748b",
-			rgb: "rgb(100,116,139)",
-			hsl: "hsl(215.4,16.3%,46.9%)",
-		},
-		{
-			scale: 600,
-			hex: "#475569",
-			rgb: "rgb(71,85,105)",
-			hsl: "hsl(215.3,19.3%,34.5%)",
-		},
-		{
-			scale: 700,
-			hex: "#334155",
-			rgb: "rgb(51,65,85)",
-			hsl: "hsl(215.3,25%,26.7%)",
-		},
-		{
-			scale: 800,
-			hex: "#1e293b",
-			rgb: "rgb(30,41,59)",
-			hsl: "hsl(217.2,32.6%,17.5%)",
-		},
-		{
-			scale: 900,
-			hex: "#0f172a",
-			rgb: "rgb(15,23,42)",
-			hsl: "hsl(222.2,47.4%,11.2%)",
-		},
-		{
-			scale: 950,
-			hex: "#020617",
-			rgb: "rgb(2,6,23)",
-			hsl: "hsl(222.2,84%,4.9%)",
-		},
-	],
-	gray: [
-		{
-			scale: 50,
-			hex: "#f9fafb",
-			rgb: "rgb(249,250,251)",
-			hsl: "hsl(210,20%,98%)",
-		},
-		{
-			scale: 100,
-			hex: "#f3f4f6",
-			rgb: "rgb(243,244,246)",
-			hsl: "hsl(220,14.3%,95.9%)",
-		},
-		{
-			scale: 200,
-			hex: "#e5e7eb",
-			rgb: "rgb(229,231,235)",
-			hsl: "hsl(220,13%,91%)",
-		},
-		{
-			scale: 300,
-			hex: "#d1d5db",
-			rgb: "rgb(209,213,219)",
-			hsl: "hsl(216,12.2%,83.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#9ca3af",
-			rgb: "rgb(156,163,175)",
-			hsl: "hsl(217.9,10.6%,64.9%)",
-		},
-		{
-			scale: 500,
-			hex: "#6b7280",
-			rgb: "rgb(107,114,128)",
-			hsl: "hsl(220,8.9%,46.1%)",
-		},
-		{
-			scale: 600,
-			hex: "#4b5563",
-			rgb: "rgb(75,85,99)",
-			hsl: "hsl(215,13.8%,34.1%)",
-		},
-		{
-			scale: 700,
-			hex: "#374151",
-			rgb: "rgb(55,65,81)",
-			hsl: "hsl(216.9,19.1%,26.7%)",
-		},
-		{
-			scale: 800,
-			hex: "#1f2937",
-			rgb: "rgb(31,41,55)",
-			hsl: "hsl(215,27.9%,16.9%)",
-		},
-		{
-			scale: 900,
-			hex: "#111827",
-			rgb: "rgb(17,24,39)",
-			hsl: "hsl(220.9,39.3%,11%)",
-		},
-		{
-			scale: 950,
-			hex: "#030712",
-			rgb: "rgb(3,7,18)",
-			hsl: "hsl(224,71.4%,4.1%)",
-		},
-	],
-	zinc: [
-		{
-			scale: 50,
-			hex: "#fafafa",
-			rgb: "rgb(250,250,250)",
-			hsl: "hsl(0,0%,98%)",
-		},
-		{
-			scale: 100,
-			hex: "#f4f4f5",
-			rgb: "rgb(244,244,245)",
-			hsl: "hsl(240,4.8%,95.9%)",
-		},
-		{
-			scale: 200,
-			hex: "#e4e4e7",
-			rgb: "rgb(228,228,231)",
-			hsl: "hsl(240,5.9%,90%)",
-		},
-		{
-			scale: 300,
-			hex: "#d4d4d8",
-			rgb: "rgb(212,212,216)",
-			hsl: "hsl(240,4.9%,83.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#a1a1aa",
-			rgb: "rgb(161,161,170)",
-			hsl: "hsl(240,5%,64.9%)",
-		},
-		{
-			scale: 500,
-			hex: "#71717a",
-			rgb: "rgb(113,113,122)",
-			hsl: "hsl(240,3.8%,46.1%)",
-		},
-		{
-			scale: 600,
-			hex: "#52525b",
-			rgb: "rgb(82,82,91)",
-			hsl: "hsl(240,5.2%,33.9%)",
-		},
-		{
-			scale: 700,
-			hex: "#3f3f46",
-			rgb: "rgb(63,63,70)",
-			hsl: "hsl(240,5.3%,26.1%)",
-		},
-		{
-			scale: 800,
-			hex: "#27272a",
-			rgb: "rgb(39,39,42)",
-			hsl: "hsl(240,3.7%,15.9%)",
-		},
-		{
-			scale: 900,
-			hex: "#18181b",
-			rgb: "rgb(24,24,27)",
-			hsl: "hsl(240,5.9%,10%)",
-		},
-		{
-			scale: 950,
-			hex: "#09090b",
-			rgb: "rgb(9,9,11)",
-			hsl: "hsl(240,10%,3.9%)",
-		},
-	],
-	neutral: [
-		{
-			scale: 50,
-			hex: "#fafafa",
-			rgb: "rgb(250,250,250)",
-			hsl: "hsl(0,0%,98%)",
-		},
-		{
-			scale: 100,
-			hex: "#f5f5f5",
-			rgb: "rgb(245,245,245)",
-			hsl: "hsl(0,0%,96.1%)",
-		},
-		{
-			scale: 200,
-			hex: "#e5e5e5",
-			rgb: "rgb(229,229,229)",
-			hsl: "hsl(0,0%,89.8%)",
-		},
-		{
-			scale: 300,
-			hex: "#d4d4d4",
-			rgb: "rgb(212,212,212)",
-			hsl: "hsl(0,0%,83.1%)",
-		},
-		{
-			scale: 400,
-			hex: "#a3a3a3",
-			rgb: "rgb(163,163,163)",
-			hsl: "hsl(0,0%,63.9%)",
-		},
-		{
-			scale: 500,
-			hex: "#737373",
-			rgb: "rgb(115,115,115)",
-			hsl: "hsl(0,0%,45.1%)",
-		},
-		{
-			scale: 600,
-			hex: "#525252",
-			rgb: "rgb(82,82,82)",
-			hsl: "hsl(0,0%,32.2%)",
-		},
-		{
-			scale: 700,
-			hex: "#404040",
-			rgb: "rgb(64,64,64)",
-			hsl: "hsl(0,0%,25.1%)",
-		},
-		{
-			scale: 800,
-			hex: "#262626",
-			rgb: "rgb(38,38,38)",
-			hsl: "hsl(0,0%,14.9%)",
-		},
-		{
-			scale: 900,
-			hex: "#171717",
-			rgb: "rgb(23,23,23)",
-			hsl: "hsl(0,0%,9%)",
-		},
-		{
-			scale: 950,
-			hex: "#0a0a0a",
-			rgb: "rgb(10,10,10)",
-			hsl: "hsl(0,0%,3.9%)",
-		},
-	],
-	stone: [
-		{
-			scale: 50,
-			hex: "#fafaf9",
-			rgb: "rgb(250,250,249)",
-			hsl: "hsl(60,9.1%,97.8%)",
-		},
-		{
-			scale: 100,
-			hex: "#f5f5f4",
-			rgb: "rgb(245,245,244)",
-			hsl: "hsl(60,4.8%,95.9%)",
-		},
-		{
-			scale: 200,
-			hex: "#e7e5e4",
-			rgb: "rgb(231,229,228)",
-			hsl: "hsl(20,5.9%,90%)",
-		},
-		{
-			scale: 300,
-			hex: "#d6d3d1",
-			rgb: "rgb(214,211,209)",
-			hsl: "hsl(24,5.7%,82.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#a8a29e",
-			rgb: "rgb(168,162,158)",
-			hsl: "hsl(24,5.4%,63.9%)",
-		},
-		{
-			scale: 500,
-			hex: "#78716c",
-			rgb: "rgb(120,113,108)",
-			hsl: "hsl(25,5.3%,44.7%)",
-		},
-		{
-			scale: 600,
-			hex: "#57534e",
-			rgb: "rgb(87,83,78)",
-			hsl: "hsl(33.3,5.5%,32.4%)",
-		},
-		{
-			scale: 700,
-			hex: "#44403c",
-			rgb: "rgb(68,64,60)",
-			hsl: "hsl(30,6.3%,25.1%)",
-		},
-		{
-			scale: 800,
-			hex: "#292524",
-			rgb: "rgb(41,37,36)",
-			hsl: "hsl(12,6.5%,15.1%)",
-		},
-		{
-			scale: 900,
-			hex: "#1c1917",
-			rgb: "rgb(28,25,23)",
-			hsl: "hsl(24,9.8%,10%)",
-		},
-		{
-			scale: 950,
-			hex: "#0c0a09",
-			rgb: "rgb(12,10,9)",
-			hsl: "hsl(20,14.3%,4.1%)",
-		},
-	],
-	red: [
-		{
-			scale: 50,
-			hex: "#fef2f2",
-			rgb: "rgb(254,242,242)",
-			hsl: "hsl(0,85.7%,97.3%)",
-		},
-		{
-			scale: 100,
-			hex: "#fee2e2",
-			rgb: "rgb(254,226,226)",
-			hsl: "hsl(0,93.3%,94.1%)",
-		},
-		{
-			scale: 200,
-			hex: "#fecaca",
-			rgb: "rgb(254,202,202)",
-			hsl: "hsl(0,96.3%,89.4%)",
-		},
-		{
-			scale: 300,
-			hex: "#fca5a5",
-			rgb: "rgb(252,165,165)",
-			hsl: "hsl(0,93.5%,81.8%)",
-		},
-		{
-			scale: 400,
-			hex: "#f87171",
-			rgb: "rgb(248,113,113)",
-			hsl: "hsl(0,90.6%,70.8%)",
-		},
-		{
-			scale: 500,
-			hex: "#ef4444",
-			rgb: "rgb(239,68,68)",
-			hsl: "hsl(0,84.2%,60.2%)",
-		},
-		{
-			scale: 600,
-			hex: "#dc2626",
-			rgb: "rgb(220,38,38)",
-			hsl: "hsl(0,72.2%,50.6%)",
-		},
-		{
-			scale: 700,
-			hex: "#b91c1c",
-			rgb: "rgb(185,28,28)",
-			hsl: "hsl(0,73.7%,41.8%)",
-		},
-		{
-			scale: 800,
-			hex: "#991b1b",
-			rgb: "rgb(153,27,27)",
-			hsl: "hsl(0,70%,35.3%)",
-		},
-		{
-			scale: 900,
-			hex: "#7f1d1d",
-			rgb: "rgb(127,29,29)",
-			hsl: "hsl(0,62.8%,30.6%)",
-		},
-		{
-			scale: 950,
-			hex: "#450a0a",
-			rgb: "rgb(69,10,10)",
-			hsl: "hsl(0,74.7%,15.5%)",
-		},
-	],
-	orange: [
-		{
-			scale: 50,
-			hex: "#fff7ed",
-			rgb: "rgb(255,247,237)",
-			hsl: "hsl(33.3,100%,96.5%)",
-		},
-		{
-			scale: 100,
-			hex: "#ffedd5",
-			rgb: "rgb(255,237,213)",
-			hsl: "hsl(34.3,100%,91.8%)",
-		},
-		{
-			scale: 200,
-			hex: "#fed7aa",
-			rgb: "rgb(254,215,170)",
-			hsl: "hsl(32.1,97.7%,83.1%)",
-		},
-		{
-			scale: 300,
-			hex: "#fdba74",
-			rgb: "rgb(253,186,116)",
-			hsl: "hsl(30.7,97.2%,72.4%)",
-		},
-		{
-			scale: 400,
-			hex: "#fb923c",
-			rgb: "rgb(251,146,60)",
-			hsl: "hsl(27,96%,61%)",
-		},
-		{
-			scale: 500,
-			hex: "#f97316",
-			rgb: "rgb(249,115,22)",
-			hsl: "hsl(24.6,95%,53.1%)",
-		},
-		{
-			scale: 600,
-			hex: "#ea580c",
-			rgb: "rgb(234,88,12)",
-			hsl: "hsl(20.5,90.2%,48.2%)",
-		},
-		{
-			scale: 700,
-			hex: "#c2410c",
-			rgb: "rgb(194,65,12)",
-			hsl: "hsl(17.5,88.3%,40.4%)",
-		},
-		{
-			scale: 800,
-			hex: "#9a3412",
-			rgb: "rgb(154,52,18)",
-			hsl: "hsl(15,79.1%,33.7%)",
-		},
-		{
-			scale: 900,
-			hex: "#7c2d12",
-			rgb: "rgb(124,45,18)",
-			hsl: "hsl(15.3,74.6%,27.8%)",
-		},
-		{
-			scale: 950,
-			hex: "#431407",
-			rgb: "rgb(67,20,7)",
-			hsl: "hsl(13,81.1%,14.5%)",
-		},
-	],
-	amber: [
-		{
-			scale: 50,
-			hex: "#fffbeb",
-			rgb: "rgb(255,251,235)",
-			hsl: "hsl(48,100%,96.1%)",
-		},
-		{
-			scale: 100,
-			hex: "#fef3c7",
-			rgb: "rgb(254,243,199)",
-			hsl: "hsl(48,96.5%,88.8%)",
-		},
-		{
-			scale: 200,
-			hex: "#fde68a",
-			rgb: "rgb(253,230,138)",
-			hsl: "hsl(48,96.6%,76.7%)",
-		},
-		{
-			scale: 300,
-			hex: "#fcd34d",
-			rgb: "rgb(252,211,77)",
-			hsl: "hsl(45.9,96.7%,64.5%)",
-		},
-		{
-			scale: 400,
-			hex: "#fbbf24",
-			rgb: "rgb(251,191,36)",
-			hsl: "hsl(43.3,96.4%,56.3%)",
-		},
-		{
-			scale: 500,
-			hex: "#f59e0b",
-			rgb: "rgb(245,158,11)",
-			hsl: "hsl(37.7,92.1%,50.2%)",
-		},
-		{
-			scale: 600,
-			hex: "#d97706",
-			rgb: "rgb(217,119,6)",
-			hsl: "hsl(32.1,94.6%,43.7%)",
-		},
-		{
-			scale: 700,
-			hex: "#b45309",
-			rgb: "rgb(180,83,9)",
-			hsl: "hsl(26,90.5%,37.1%)",
-		},
-		{
-			scale: 800,
-			hex: "#92400e",
-			rgb: "rgb(146,64,14)",
-			hsl: "hsl(22.7,82.5%,31.4%)",
-		},
-		{
-			scale: 900,
-			hex: "#78350f",
-			rgb: "rgb(120,53,15)",
-			hsl: "hsl(21.7,77.8%,26.5%)",
-		},
-		{
-			scale: 950,
-			hex: "#451a03",
-			rgb: "rgb(69,26,3)",
-			hsl: "hsl(20.9,91.7%,14.1%)",
-		},
-	],
-	yellow: [
-		{
-			scale: 50,
-			hex: "#fefce8",
-			rgb: "rgb(254,252,232)",
-			hsl: "hsl(54.5,91.7%,95.3%)",
-		},
-		{
-			scale: 100,
-			hex: "#fef9c3",
-			rgb: "rgb(254,249,195)",
-			hsl: "hsl(54.9,96.7%,88%)",
-		},
-		{
-			scale: 200,
-			hex: "#fef08a",
-			rgb: "rgb(254,240,138)",
-			hsl: "hsl(52.8,98.3%,76.9%)",
-		},
-		{
-			scale: 300,
-			hex: "#fde047",
-			rgb: "rgb(253,224,71)",
-			hsl: "hsl(50.4,97.8%,63.5%)",
-		},
-		{
-			scale: 400,
-			hex: "#facc15",
-			rgb: "rgb(250,204,21)",
-			hsl: "hsl(47.9,95.8%,53.1%)",
-		},
-		{
-			scale: 500,
-			hex: "#eab308",
-			rgb: "rgb(234,179,8)",
-			hsl: "hsl(45.4,93.4%,47.5%)",
-		},
-		{
-			scale: 600,
-			hex: "#ca8a04",
-			rgb: "rgb(202,138,4)",
-			hsl: "hsl(40.6,96.1%,40.4%)",
-		},
-		{
-			scale: 700,
-			hex: "#a16207",
-			rgb: "rgb(161,98,7)",
-			hsl: "hsl(35.5,91.7%,32.9%)",
-		},
-		{
-			scale: 800,
-			hex: "#854d0e",
-			rgb: "rgb(133,77,14)",
-			hsl: "hsl(31.8,81%,28.8%)",
-		},
-		{
-			scale: 900,
-			hex: "#713f12",
-			rgb: "rgb(113,63,18)",
-			hsl: "hsl(28.4,72.5%,25.7%)",
-		},
-		{
-			scale: 950,
-			hex: "#422006",
-			rgb: "rgb(66,32,6)",
-			hsl: "hsl(26,83.3%,14.1%)",
-		},
-	],
-	lime: [
-		{
-			scale: 50,
-			hex: "#f7fee7",
-			rgb: "rgb(247,254,231)",
-			hsl: "hsl(78.3,92%,95.1%)",
-		},
-		{
-			scale: 100,
-			hex: "#ecfccb",
-			rgb: "rgb(236,252,203)",
-			hsl: "hsl(79.6,89.1%,89.2%)",
-		},
-		{
-			scale: 200,
-			hex: "#d9f99d",
-			rgb: "rgb(217,249,157)",
-			hsl: "hsl(80.9,88.5%,79.6%)",
-		},
-		{
-			scale: 300,
-			hex: "#bef264",
-			rgb: "rgb(190,242,100)",
-			hsl: "hsl(82,84.5%,67.1%)",
-		},
-		{
-			scale: 400,
-			hex: "#a3e635",
-			rgb: "rgb(163,230,53)",
-			hsl: "hsl(82.7,78%,55.5%)",
-		},
-		{
-			scale: 500,
-			hex: "#84cc16",
-			rgb: "rgb(132,204,22)",
-			hsl: "hsl(83.7,80.5%,44.3%)",
-		},
-		{
-			scale: 600,
-			hex: "#65a30d",
-			rgb: "rgb(101,163,13)",
-			hsl: "hsl(84.8,85.2%,34.5%)",
-		},
-		{
-			scale: 700,
-			hex: "#4d7c0f",
-			rgb: "rgb(77,124,15)",
-			hsl: "hsl(85.9,78.4%,27.3%)",
-		},
-		{
-			scale: 800,
-			hex: "#3f6212",
-			rgb: "rgb(63,98,18)",
-			hsl: "hsl(86.3,69%,22.7%)",
-		},
-		{
-			scale: 900,
-			hex: "#365314",
-			rgb: "rgb(54,83,20)",
-			hsl: "hsl(87.6,61.2%,20.2%)",
-		},
-		{
-			scale: 950,
-			hex: "#1a2e05",
-			rgb: "rgb(26,46,5)",
-			hsl: "hsl(89.3,80.4%,10%)",
-		},
-	],
-	green: [
-		{
-			scale: 50,
-			hex: "#f0fdf4",
-			rgb: "rgb(240,253,244)",
-			hsl: "hsl(138.5,76.5%,96.7%)",
-		},
-		{
-			scale: 100,
-			hex: "#dcfce7",
-			rgb: "rgb(220,252,231)",
-			hsl: "hsl(140.6,84.2%,92.5%)",
-		},
-		{
-			scale: 200,
-			hex: "#bbf7d0",
-			rgb: "rgb(187,247,208)",
-			hsl: "hsl(141,78.9%,85.1%)",
-		},
-		{
-			scale: 300,
-			hex: "#86efac",
-			rgb: "rgb(134,239,172)",
-			hsl: "hsl(141.7,76.6%,73.1%)",
-		},
-		{
-			scale: 400,
-			hex: "#4ade80",
-			rgb: "rgb(74,222,128)",
-			hsl: "hsl(141.9,69.2%,58%)",
-		},
-		{
-			scale: 500,
-			hex: "#22c55e",
-			rgb: "rgb(34,197,94)",
-			hsl: "hsl(142.1,70.6%,45.3%)",
-		},
-		{
-			scale: 600,
-			hex: "#16a34a",
-			rgb: "rgb(22,163,74)",
-			hsl: "hsl(142.1,76.2%,36.3%)",
-		},
-		{
-			scale: 700,
-			hex: "#15803d",
-			rgb: "rgb(21,128,61)",
-			hsl: "hsl(142.4,71.8%,29.2%)",
-		},
-		{
-			scale: 800,
-			hex: "#166534",
-			rgb: "rgb(22,101,52)",
-			hsl: "hsl(142.8,64.2%,24.1%)",
-		},
-		{
-			scale: 900,
-			hex: "#14532d",
-			rgb: "rgb(20,83,45)",
-			hsl: "hsl(143.8,61.2%,20.2%)",
-		},
-		{
-			scale: 950,
-			hex: "#052e16",
-			rgb: "rgb(5,46,22)",
-			hsl: "hsl(144.9,80.4%,10%)",
-		},
-	],
-	emerald: [
-		{
-			scale: 50,
-			hex: "#ecfdf5",
-			rgb: "rgb(236,253,245)",
-			hsl: "hsl(151.8,81%,95.9%)",
-		},
-		{
-			scale: 100,
-			hex: "#d1fae5",
-			rgb: "rgb(209,250,229)",
-			hsl: "hsl(149.3,80.4%,90%)",
-		},
-		{
-			scale: 200,
-			hex: "#a7f3d0",
-			rgb: "rgb(167,243,208)",
-			hsl: "hsl(152.4,76%,80.4%)",
-		},
-		{
-			scale: 300,
-			hex: "#6ee7b7",
-			rgb: "rgb(110,231,183)",
-			hsl: "hsl(156.2,71.6%,66.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#34d399",
-			rgb: "rgb(52,211,153)",
-			hsl: "hsl(158.1,64.4%,51.6%)",
-		},
-		{
-			scale: 500,
-			hex: "#10b981",
-			rgb: "rgb(16,185,129)",
-			hsl: "hsl(160.1,84.1%,39.4%)",
-		},
-		{
-			scale: 600,
-			hex: "#059669",
-			rgb: "rgb(5,150,105)",
-			hsl: "hsl(161.4,93.5%,30.4%)",
-		},
-		{
-			scale: 700,
-			hex: "#047857",
-			rgb: "rgb(4,120,87)",
-			hsl: "hsl(162.9,93.5%,24.3%)",
-		},
-		{
-			scale: 800,
-			hex: "#065f46",
-			rgb: "rgb(6,95,70)",
-			hsl: "hsl(163.1,88.1%,19.8%)",
-		},
-		{
-			scale: 900,
-			hex: "#064e3b",
-			rgb: "rgb(6,78,59)",
-			hsl: "hsl(164.2,85.7%,16.5%)",
-		},
-		{
-			scale: 950,
-			hex: "#022c22",
-			rgb: "rgb(2,44,34)",
-			hsl: "hsl(165.7,91.3%,9%)",
-		},
-	],
-	teal: [
-		{
-			scale: 50,
-			hex: "#f0fdfa",
-			rgb: "rgb(240,253,250)",
-			hsl: "hsl(166.2,76.5%,96.7%)",
-		},
-		{
-			scale: 100,
-			hex: "#ccfbf1",
-			rgb: "rgb(204,251,241)",
-			hsl: "hsl(167.2,85.5%,89.2%)",
-		},
-		{
-			scale: 200,
-			hex: "#99f6e4",
-			rgb: "rgb(153,246,228)",
-			hsl: "hsl(168.4,83.8%,78.2%)",
-		},
-		{
-			scale: 300,
-			hex: "#5eead4",
-			rgb: "rgb(94,234,212)",
-			hsl: "hsl(170.6,76.9%,64.3%)",
-		},
-		{
-			scale: 400,
-			hex: "#2dd4bf",
-			rgb: "rgb(45,212,191)",
-			hsl: "hsl(172.5,66%,50.4%)",
-		},
-		{
-			scale: 500,
-			hex: "#14b8a6",
-			rgb: "rgb(20,184,166)",
-			hsl: "hsl(173.4,80.4%,40%)",
-		},
-		{
-			scale: 600,
-			hex: "#0d9488",
-			rgb: "rgb(13,148,136)",
-			hsl: "hsl(174.7,83.9%,31.6%)",
-		},
-		{
-			scale: 700,
-			hex: "#0f766e",
-			rgb: "rgb(15,118,110)",
-			hsl: "hsl(175.3,77.4%,26.1%)",
-		},
-		{
-			scale: 800,
-			hex: "#115e59",
-			rgb: "rgb(17,94,89)",
-			hsl: "hsl(176.1,69.4%,21.8%)",
-		},
-		{
-			scale: 900,
-			hex: "#134e4a",
-			rgb: "rgb(19,78,74)",
-			hsl: "hsl(175.9,60.8%,19%)",
-		},
-		{
-			scale: 950,
-			hex: "#042f2e",
-			rgb: "rgb(4,47,46)",
-			hsl: "hsl(178.6,84.3%,10%)",
-		},
-	],
-	cyan: [
-		{
-			scale: 50,
-			hex: "#ecfeff",
-			rgb: "rgb(236,254,255)",
-			hsl: "hsl(183.2,100%,96.3%)",
-		},
-		{
-			scale: 100,
-			hex: "#cffafe",
-			rgb: "rgb(207,250,254)",
-			hsl: "hsl(185.1,95.9%,90.4%)",
-		},
-		{
-			scale: 200,
-			hex: "#a5f3fc",
-			rgb: "rgb(165,243,252)",
-			hsl: "hsl(186.2,93.5%,81.8%)",
-		},
-		{
-			scale: 300,
-			hex: "#67e8f9",
-			rgb: "rgb(103,232,249)",
-			hsl: "hsl(187,92.4%,69%)",
-		},
-		{
-			scale: 400,
-			hex: "#22d3ee",
-			rgb: "rgb(34,211,238)",
-			hsl: "hsl(187.9,85.7%,53.3%)",
-		},
-		{
-			scale: 500,
-			hex: "#06b6d4",
-			rgb: "rgb(6,182,212)",
-			hsl: "hsl(188.7,94.5%,42.7%)",
-		},
-		{
-			scale: 600,
-			hex: "#0891b2",
-			rgb: "rgb(8,145,178)",
-			hsl: "hsl(191.6,91.4%,36.5%)",
-		},
-		{
-			scale: 700,
-			hex: "#0e7490",
-			rgb: "rgb(14,116,144)",
-			hsl: "hsl(192.9,82.3%,31%)",
-		},
-		{
-			scale: 800,
-			hex: "#155e75",
-			rgb: "rgb(21,94,117)",
-			hsl: "hsl(194.4,69.6%,27.1%)",
-		},
-		{
-			scale: 900,
-			hex: "#164e63",
-			rgb: "rgb(22,78,99)",
-			hsl: "hsl(196.4,63.6%,23.7%)",
-		},
-		{
-			scale: 950,
-			hex: "#083344",
-			rgb: "rgb(8,51,68)",
-			hsl: "hsl(197,78.9%,14.9%)",
-		},
-	],
-	sky: [
-		{
-			scale: 50,
-			hex: "#f0f9ff",
-			rgb: "rgb(240,249,255)",
-			hsl: "hsl(204,100%,97.1%)",
-		},
-		{
-			scale: 100,
-			hex: "#e0f2fe",
-			rgb: "rgb(224,242,254)",
-			hsl: "hsl(204,93.8%,93.7%)",
-		},
-		{
-			scale: 200,
-			hex: "#bae6fd",
-			rgb: "rgb(186,230,253)",
-			hsl: "hsl(200.6,94.4%,86.1%)",
-		},
-		{
-			scale: 300,
-			hex: "#7dd3fc",
-			rgb: "rgb(125,211,252)",
-			hsl: "hsl(199.4,95.5%,73.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#38bdf8",
-			rgb: "rgb(56,189,248)",
-			hsl: "hsl(198.4,93.2%,59.6%)",
-		},
-		{
-			scale: 500,
-			hex: "#0ea5e9",
-			rgb: "rgb(14,165,233)",
-			hsl: "hsl(198.6,88.7%,48.4%)",
-		},
-		{
-			scale: 600,
-			hex: "#0284c7",
-			rgb: "rgb(2,132,199)",
-			hsl: "hsl(200.4,98%,39.4%)",
-		},
-		{
-			scale: 700,
-			hex: "#0369a1",
-			rgb: "rgb(3,105,161)",
-			hsl: "hsl(201.3,96.3%,32.2%)",
-		},
-		{
-			scale: 800,
-			hex: "#075985",
-			rgb: "rgb(7,89,133)",
-			hsl: "hsl(201,90%,27.5%)",
-		},
-		{
-			scale: 900,
-			hex: "#0c4a6e",
-			rgb: "rgb(12,74,110)",
-			hsl: "hsl(202,80.3%,23.9%)",
-		},
-		{
-			scale: 950,
-			hex: "#082f49",
-			rgb: "rgb(8,47,73)",
-			hsl: "hsl(204,80.2%,15.9%)",
-		},
-	],
-	blue: [
-		{
-			scale: 50,
-			hex: "#eff6ff",
-			rgb: "rgb(239,246,255)",
-			hsl: "hsl(213.8,100%,96.9%)",
-		},
-		{
-			scale: 100,
-			hex: "#dbeafe",
-			rgb: "rgb(219,234,254)",
-			hsl: "hsl(214.3,94.6%,92.7%)",
-		},
-		{
-			scale: 200,
-			hex: "#bfdbfe",
-			rgb: "rgb(191,219,254)",
-			hsl: "hsl(213.3,96.9%,87.3%)",
-		},
-		{
-			scale: 300,
-			hex: "#93c5fd",
-			rgb: "rgb(147,197,253)",
-			hsl: "hsl(211.7,96.4%,78.4%)",
-		},
-		{
-			scale: 400,
-			hex: "#60a5fa",
-			rgb: "rgb(96,165,250)",
-			hsl: "hsl(213.1,93.9%,67.8%)",
-		},
-		{
-			scale: 500,
-			hex: "#3b82f6",
-			rgb: "rgb(59,130,246)",
-			hsl: "hsl(217.2,91.2%,59.8%)",
-		},
-		{
-			scale: 600,
-			hex: "#2563eb",
-			rgb: "rgb(37,99,235)",
-			hsl: "hsl(221.2,83.2%,53.3%)",
-		},
-		{
-			scale: 700,
-			hex: "#1d4ed8",
-			rgb: "rgb(29,78,216)",
-			hsl: "hsl(224.3,76.3%,48%)",
-		},
-		{
-			scale: 800,
-			hex: "#1e40af",
-			rgb: "rgb(30,64,175)",
-			hsl: "hsl(225.9,70.7%,40.2%)",
-		},
-		{
-			scale: 900,
-			hex: "#1e3a8a",
-			rgb: "rgb(30,58,138)",
-			hsl: "hsl(224.4,64.3%,32.9%)",
-		},
-		{
-			scale: 950,
-			hex: "#172554",
-			rgb: "rgb(23,37,84)",
-			hsl: "hsl(226.2,57%,21%)",
-		},
-	],
-	indigo: [
-		{
-			scale: 50,
-			hex: "#eef2ff",
-			rgb: "rgb(238,242,255)",
-			hsl: "hsl(225.9,100%,96.7%)",
-		},
-		{
-			scale: 100,
-			hex: "#e0e7ff",
-			rgb: "rgb(224,231,255)",
-			hsl: "hsl(226.5,100%,93.9%)",
-		},
-		{
-			scale: 200,
-			hex: "#c7d2fe",
-			rgb: "rgb(199,210,254)",
-			hsl: "hsl(228,96.5%,88.8%)",
-		},
-		{
-			scale: 300,
-			hex: "#a5b4fc",
-			rgb: "rgb(165,180,252)",
-			hsl: "hsl(229.7,93.5%,81.8%)",
-		},
-		{
-			scale: 400,
-			hex: "#818cf8",
-			rgb: "rgb(129,140,248)",
-			hsl: "hsl(234.5,89.5%,73.9%)",
-		},
-		{
-			scale: 500,
-			hex: "#6366f1",
-			rgb: "rgb(99,102,241)",
-			hsl: "hsl(238.7,83.5%,66.7%)",
-		},
-		{
-			scale: 600,
-			hex: "#4f46e5",
-			rgb: "rgb(79,70,229)",
-			hsl: "hsl(243.4,75.4%,58.6%)",
-		},
-		{
-			scale: 700,
-			hex: "#4338ca",
-			rgb: "rgb(67,56,202)",
-			hsl: "hsl(244.5,57.9%,50.6%)",
-		},
-		{
-			scale: 800,
-			hex: "#3730a3",
-			rgb: "rgb(55,48,163)",
-			hsl: "hsl(243.7,54.5%,41.4%)",
-		},
-		{
-			scale: 900,
-			hex: "#312e81",
-			rgb: "rgb(49,46,129)",
-			hsl: "hsl(242.2,47.4%,34.3%)",
-		},
-		{
-			scale: 950,
-			hex: "#1e1b4b",
-			rgb: "rgb(30,27,75)",
-			hsl: "hsl(243.8,47.1%,20%)",
-		},
-	],
-	violet: [
-		{
-			scale: 50,
-			hex: "#f5f3ff",
-			rgb: "rgb(245,243,255)",
-			hsl: "hsl(250,100%,97.6%)",
-		},
-		{
-			scale: 100,
-			hex: "#ede9fe",
-			rgb: "rgb(237,233,254)",
-			hsl: "hsl(251.4,91.3%,95.5%)",
-		},
-		{
-			scale: 200,
-			hex: "#ddd6fe",
-			rgb: "rgb(221,214,254)",
-			hsl: "hsl(250.5,95.2%,91.8%)",
-		},
-		{
-			scale: 300,
-			hex: "#c4b5fd",
-			rgb: "rgb(196,181,253)",
-			hsl: "hsl(252.5,94.7%,85.1%)",
-		},
-		{
-			scale: 400,
-			hex: "#a78bfa",
-			rgb: "rgb(167,139,250)",
-			hsl: "hsl(255.1,91.7%,76.3%)",
-		},
-		{
-			scale: 500,
-			hex: "#8b5cf6",
-			rgb: "rgb(139,92,246)",
-			hsl: "hsl(258.3,89.5%,66.3%)",
-		},
-		{
-			scale: 600,
-			hex: "#7c3aed",
-			rgb: "rgb(124,58,237)",
-			hsl: "hsl(262.1,83.3%,57.8%)",
-		},
-		{
-			scale: 700,
-			hex: "#6d28d9",
-			rgb: "rgb(109,40,217)",
-			hsl: "hsl(263.4,70%,50.4%)",
-		},
-		{
-			scale: 800,
-			hex: "#5b21b6",
-			rgb: "rgb(91,33,182)",
-			hsl: "hsl(263.4,69.3%,42.2%)",
-		},
-		{
-			scale: 900,
-			hex: "#4c1d95",
-			rgb: "rgb(76,29,149)",
-			hsl: "hsl(263.5,67.4%,34.9%)",
-		},
-		{
-			scale: 950,
-			hex: "#1e1b4b",
-			rgb: "rgb(46,16,101)",
-			hsl: "hsl(261.2,72.6%,22.9%)",
-		},
-	],
-	purple: [
-		{
-			scale: 50,
-			hex: "#faf5ff",
-			rgb: "rgb(250,245,255)",
-			hsl: "hsl(270,100%,98%)",
-		},
-		{
-			scale: 100,
-			hex: "#f3e8ff",
-			rgb: "rgb(243,232,255)",
-			hsl: "hsl(268.7,100%,95.5%)",
-		},
-		{
-			scale: 200,
-			hex: "#e9d5ff",
-			rgb: "rgb(233,213,255)",
-			hsl: "hsl(268.6,100%,91.8%)",
-		},
-		{
-			scale: 300,
-			hex: "#d8b4fe",
-			rgb: "rgb(216,180,254)",
-			hsl: "hsl(269.2,97.4%,85.1%)",
-		},
-		{
-			scale: 400,
-			hex: "#c084fc",
-			rgb: "rgb(192,132,252)",
-			hsl: "hsl(270,95.2%,75.3%)",
-		},
-		{
-			scale: 500,
-			hex: "#a855f7",
-			rgb: "rgb(168,85,247)",
-			hsl: "hsl(270.7,91%,65.1%)",
-		},
-		{
-			scale: 600,
-			hex: "#9333ea",
-			rgb: "rgb(147,51,234)",
-			hsl: "hsl(271.5,81.3%,55.9%)",
-		},
-		{
-			scale: 700,
-			hex: "#7e22ce",
-			rgb: "rgb(126,34,206)",
-			hsl: "hsl(272.1,71.7%,47.1%)",
-		},
-		{
-			scale: 800,
-			hex: "#6b21a8",
-			rgb: "rgb(107,33,168)",
-			hsl: "hsl(272.9,67.2%,39.4%)",
-		},
-		{
-			scale: 900,
-			hex: "#581c87",
-			rgb: "rgb(88,28,135)",
-			hsl: "hsl(273.6,65.6%,32%)",
-		},
-		{
-			scale: 950,
-			hex: "#3b0764",
-			rgb: "rgb(59,7,100)",
-			hsl: "hsl(273.5,86.9%,21%)",
-		},
-	],
-	fuchsia: [
-		{
-			scale: 50,
-			hex: "#fdf4ff",
-			rgb: "rgb(253,244,255)",
-			hsl: "hsl(289.1,100%,97.8%)",
-		},
-		{
-			scale: 100,
-			hex: "#fae8ff",
-			rgb: "rgb(250,232,255)",
-			hsl: "hsl(287,100%,95.5%)",
-		},
-		{
-			scale: 200,
-			hex: "#f5d0fe",
-			rgb: "rgb(245,208,254)",
-			hsl: "hsl(288.3,95.8%,90.6%)",
-		},
-		{
-			scale: 300,
-			hex: "#f0abfc",
-			rgb: "rgb(240,171,252)",
-			hsl: "hsl(291.1,93.1%,82.9%)",
-		},
-		{
-			scale: 400,
-			hex: "#e879f9",
-			rgb: "rgb(232,121,249)",
-			hsl: "hsl(292,91.4%,72.5%)",
-		},
-		{
-			scale: 500,
-			hex: "#d946ef",
-			rgb: "rgb(217,70,239)",
-			hsl: "hsl(292.2,84.1%,60.6%)",
-		},
-		{
-			scale: 600,
-			hex: "#c026d3",
-			rgb: "rgb(192,38,211)",
-			hsl: "hsl(293.4,69.5%,48.8%)",
-		},
-		{
-			scale: 700,
-			hex: "#a21caf",
-			rgb: "rgb(162,28,175)",
-			hsl: "hsl(294.7,72.4%,39.8%)",
-		},
-		{
-			scale: 800,
-			hex: "#86198f",
-			rgb: "rgb(134,25,143)",
-			hsl: "hsl(295.4,70.2%,32.9%)",
-		},
-		{
-			scale: 900,
-			hex: "#701a75",
-			rgb: "rgb(112,26,117)",
-			hsl: "hsl(296.7,63.6%,28%)",
-		},
-		{
-			scale: 950,
-			hex: "#4a044e",
-			rgb: "rgb(74,4,78)",
-			hsl: "hsl(296.8,90.2%,16.1%)",
-		},
-	],
-	pink: [
-		{
-			scale: 50,
-			hex: "#fdf2f8",
-			rgb: "rgb(253,242,248)",
-			hsl: "hsl(327.3,73.3%,97.1%)",
-		},
-		{
-			scale: 100,
-			hex: "#fce7f3",
-			rgb: "rgb(252,231,243)",
-			hsl: "hsl(325.7,77.8%,94.7%)",
-		},
-		{
-			scale: 200,
-			hex: "#fbcfe8",
-			rgb: "rgb(251,207,232)",
-			hsl: "hsl(325.9,84.6%,89.8%)",
-		},
-		{
-			scale: 300,
-			hex: "#f9a8d4",
-			rgb: "rgb(249,168,212)",
-			hsl: "hsl(327.4,87.1%,81.8%)",
-		},
-		{
-			scale: 400,
-			hex: "#f472b6",
-			rgb: "rgb(244,114,182)",
-			hsl: "hsl(328.6,85.5%,70.2%)",
-		},
-		{
-			scale: 500,
-			hex: "#ec4899",
-			rgb: "rgb(236,72,153)",
-			hsl: "hsl(330.4,81.2%,60.4%)",
-		},
-		{
-			scale: 600,
-			hex: "#db2777",
-			rgb: "rgb(219,39,119)",
-			hsl: "hsl(333.3,71.4%,50.6%)",
-		},
-		{
-			scale: 700,
-			hex: "#be185d",
-			rgb: "rgb(190,24,93)",
-			hsl: "hsl(335.1,77.6%,42%)",
-		},
-		{
-			scale: 800,
-			hex: "#9d174d",
-			rgb: "rgb(157,23,77)",
-			hsl: "hsl(335.8,74.4%,35.3%)",
-		},
-		{
-			scale: 900,
-			hex: "#831843",
-			rgb: "rgb(131,24,67)",
-			hsl: "hsl(335.9,69%,30.4%)",
-		},
-		{
-			scale: 950,
-			hex: "#500724",
-			rgb: "rgb(80,7,36)",
-			hsl: "hsl(336.2,83.9%,17.1%)",
-		},
-	],
-	rose: [
-		{
-			scale: 50,
-			hex: "#fff1f2",
-			rgb: "rgb(255,241,242)",
-			hsl: "hsl(355.7,100%,97.3%)",
-		},
-		{
-			scale: 100,
-			hex: "#ffe4e6",
-			rgb: "rgb(255,228,230)",
-			hsl: "hsl(355.6,100%,94.7%)",
-		},
-		{
-			scale: 200,
-			hex: "#fecdd3",
-			rgb: "rgb(254,205,211)",
-			hsl: "hsl(352.7,96.1%,90%)",
-		},
-		{
-			scale: 300,
-			hex: "#fda4af",
-			rgb: "rgb(253,164,175)",
-			hsl: "hsl(352.6,95.7%,81.8%)",
-		},
-		{
-			scale: 400,
-			hex: "#fb7185",
-			rgb: "rgb(251,113,133)",
-			hsl: "hsl(351.3,94.5%,71.4%)",
-		},
-		{
-			scale: 500,
-			hex: "#f43f5e",
-			rgb: "rgb(244,63,94)",
-			hsl: "hsl(349.7,89.2%,60.2%)",
-		},
-		{
-			scale: 600,
-			hex: "#e11d48",
-			rgb: "rgb(225,29,72)",
-			hsl: "hsl(346.8,77.2%,49.8%)",
-		},
-		{
-			scale: 700,
-			hex: "#be123c",
-			rgb: "rgb(190,18,60)",
-			hsl: "hsl(345.3,82.7%,40.8%)",
-		},
-		{
-			scale: 800,
-			hex: "#9f1239",
-			rgb: "rgb(159,18,57)",
-			hsl: "hsl(343.4,79.7%,34.7%)",
-		},
-		{
-			scale: 900,
-			hex: "#881337",
-			rgb: "rgb(136,19,55)",
-			hsl: "hsl(341.5,75.5%,30.4%)",
-		},
-		{
-			scale: 950,
-			hex: "#4c0519",
-			rgb: "rgb(76,5,25)",
-			hsl: "hsl(343.1,87.7%,15.9%)",
-		},
-	],
-};
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: {
+    hex: "#000000",
+    rgb: "rgb(0,0,0)",
+    hsl: "hsl(0,0%,0%)",
+  },
+  white: {
+    hex: "#ffffff",
+    rgb: "rgb(255,255,255)",
+    hsl: "hsl(0,0%,100%)",
+  },
+  slate: [
+    {
+      scale: 50,
+      hex: "#f8fafc",
+      rgb: "rgb(248,250,252)",
+      hsl: "hsl(210,40%,98%)",
+    },
+    {
+      scale: 100,
+      hex: "#f1f5f9",
+      rgb: "rgb(241,245,249)",
+      hsl: "hsl(210,40%,96.1%)",
+    },
+    {
+      scale: 200,
+      hex: "#e2e8f0",
+      rgb: "rgb(226,232,240)",
+      hsl: "hsl(214.3,31.8%,91.4%)",
+    },
+    {
+      scale: 300,
+      hex: "#cbd5e1",
+      rgb: "rgb(203,213,225)",
+      hsl: "hsl(212.7,26.8%,83.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#94a3b8",
+      rgb: "rgb(148,163,184)",
+      hsl: "hsl(215,20.2%,65.1%)",
+    },
+    {
+      scale: 500,
+      hex: "#64748b",
+      rgb: "rgb(100,116,139)",
+      hsl: "hsl(215.4,16.3%,46.9%)",
+    },
+    {
+      scale: 600,
+      hex: "#475569",
+      rgb: "rgb(71,85,105)",
+      hsl: "hsl(215.3,19.3%,34.5%)",
+    },
+    {
+      scale: 700,
+      hex: "#334155",
+      rgb: "rgb(51,65,85)",
+      hsl: "hsl(215.3,25%,26.7%)",
+    },
+    {
+      scale: 800,
+      hex: "#1e293b",
+      rgb: "rgb(30,41,59)",
+      hsl: "hsl(217.2,32.6%,17.5%)",
+    },
+    {
+      scale: 900,
+      hex: "#0f172a",
+      rgb: "rgb(15,23,42)",
+      hsl: "hsl(222.2,47.4%,11.2%)",
+    },
+    {
+      scale: 950,
+      hex: "#020617",
+      rgb: "rgb(2,6,23)",
+      hsl: "hsl(222.2,84%,4.9%)",
+    },
+  ],
+  gray: [
+    {
+      scale: 50,
+      hex: "#f9fafb",
+      rgb: "rgb(249,250,251)",
+      hsl: "hsl(210,20%,98%)",
+    },
+    {
+      scale: 100,
+      hex: "#f3f4f6",
+      rgb: "rgb(243,244,246)",
+      hsl: "hsl(220,14.3%,95.9%)",
+    },
+    {
+      scale: 200,
+      hex: "#e5e7eb",
+      rgb: "rgb(229,231,235)",
+      hsl: "hsl(220,13%,91%)",
+    },
+    {
+      scale: 300,
+      hex: "#d1d5db",
+      rgb: "rgb(209,213,219)",
+      hsl: "hsl(216,12.2%,83.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#9ca3af",
+      rgb: "rgb(156,163,175)",
+      hsl: "hsl(217.9,10.6%,64.9%)",
+    },
+    {
+      scale: 500,
+      hex: "#6b7280",
+      rgb: "rgb(107,114,128)",
+      hsl: "hsl(220,8.9%,46.1%)",
+    },
+    {
+      scale: 600,
+      hex: "#4b5563",
+      rgb: "rgb(75,85,99)",
+      hsl: "hsl(215,13.8%,34.1%)",
+    },
+    {
+      scale: 700,
+      hex: "#374151",
+      rgb: "rgb(55,65,81)",
+      hsl: "hsl(216.9,19.1%,26.7%)",
+    },
+    {
+      scale: 800,
+      hex: "#1f2937",
+      rgb: "rgb(31,41,55)",
+      hsl: "hsl(215,27.9%,16.9%)",
+    },
+    {
+      scale: 900,
+      hex: "#111827",
+      rgb: "rgb(17,24,39)",
+      hsl: "hsl(220.9,39.3%,11%)",
+    },
+    {
+      scale: 950,
+      hex: "#030712",
+      rgb: "rgb(3,7,18)",
+      hsl: "hsl(224,71.4%,4.1%)",
+    },
+  ],
+  zinc: [
+    {
+      scale: 50,
+      hex: "#fafafa",
+      rgb: "rgb(250,250,250)",
+      hsl: "hsl(0,0%,98%)",
+    },
+    {
+      scale: 100,
+      hex: "#f4f4f5",
+      rgb: "rgb(244,244,245)",
+      hsl: "hsl(240,4.8%,95.9%)",
+    },
+    {
+      scale: 200,
+      hex: "#e4e4e7",
+      rgb: "rgb(228,228,231)",
+      hsl: "hsl(240,5.9%,90%)",
+    },
+    {
+      scale: 300,
+      hex: "#d4d4d8",
+      rgb: "rgb(212,212,216)",
+      hsl: "hsl(240,4.9%,83.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#a1a1aa",
+      rgb: "rgb(161,161,170)",
+      hsl: "hsl(240,5%,64.9%)",
+    },
+    {
+      scale: 500,
+      hex: "#71717a",
+      rgb: "rgb(113,113,122)",
+      hsl: "hsl(240,3.8%,46.1%)",
+    },
+    {
+      scale: 600,
+      hex: "#52525b",
+      rgb: "rgb(82,82,91)",
+      hsl: "hsl(240,5.2%,33.9%)",
+    },
+    {
+      scale: 700,
+      hex: "#3f3f46",
+      rgb: "rgb(63,63,70)",
+      hsl: "hsl(240,5.3%,26.1%)",
+    },
+    {
+      scale: 800,
+      hex: "#27272a",
+      rgb: "rgb(39,39,42)",
+      hsl: "hsl(240,3.7%,15.9%)",
+    },
+    {
+      scale: 900,
+      hex: "#18181b",
+      rgb: "rgb(24,24,27)",
+      hsl: "hsl(240,5.9%,10%)",
+    },
+    {
+      scale: 950,
+      hex: "#09090b",
+      rgb: "rgb(9,9,11)",
+      hsl: "hsl(240,10%,3.9%)",
+    },
+  ],
+  neutral: [
+    {
+      scale: 50,
+      hex: "#fafafa",
+      rgb: "rgb(250,250,250)",
+      hsl: "hsl(0,0%,98%)",
+    },
+    {
+      scale: 100,
+      hex: "#f5f5f5",
+      rgb: "rgb(245,245,245)",
+      hsl: "hsl(0,0%,96.1%)",
+    },
+    {
+      scale: 200,
+      hex: "#e5e5e5",
+      rgb: "rgb(229,229,229)",
+      hsl: "hsl(0,0%,89.8%)",
+    },
+    {
+      scale: 300,
+      hex: "#d4d4d4",
+      rgb: "rgb(212,212,212)",
+      hsl: "hsl(0,0%,83.1%)",
+    },
+    {
+      scale: 400,
+      hex: "#a3a3a3",
+      rgb: "rgb(163,163,163)",
+      hsl: "hsl(0,0%,63.9%)",
+    },
+    {
+      scale: 500,
+      hex: "#737373",
+      rgb: "rgb(115,115,115)",
+      hsl: "hsl(0,0%,45.1%)",
+    },
+    {
+      scale: 600,
+      hex: "#525252",
+      rgb: "rgb(82,82,82)",
+      hsl: "hsl(0,0%,32.2%)",
+    },
+    {
+      scale: 700,
+      hex: "#404040",
+      rgb: "rgb(64,64,64)",
+      hsl: "hsl(0,0%,25.1%)",
+    },
+    {
+      scale: 800,
+      hex: "#262626",
+      rgb: "rgb(38,38,38)",
+      hsl: "hsl(0,0%,14.9%)",
+    },
+    {
+      scale: 900,
+      hex: "#171717",
+      rgb: "rgb(23,23,23)",
+      hsl: "hsl(0,0%,9%)",
+    },
+    {
+      scale: 950,
+      hex: "#0a0a0a",
+      rgb: "rgb(10,10,10)",
+      hsl: "hsl(0,0%,3.9%)",
+    },
+  ],
+  stone: [
+    {
+      scale: 50,
+      hex: "#fafaf9",
+      rgb: "rgb(250,250,249)",
+      hsl: "hsl(60,9.1%,97.8%)",
+    },
+    {
+      scale: 100,
+      hex: "#f5f5f4",
+      rgb: "rgb(245,245,244)",
+      hsl: "hsl(60,4.8%,95.9%)",
+    },
+    {
+      scale: 200,
+      hex: "#e7e5e4",
+      rgb: "rgb(231,229,228)",
+      hsl: "hsl(20,5.9%,90%)",
+    },
+    {
+      scale: 300,
+      hex: "#d6d3d1",
+      rgb: "rgb(214,211,209)",
+      hsl: "hsl(24,5.7%,82.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#a8a29e",
+      rgb: "rgb(168,162,158)",
+      hsl: "hsl(24,5.4%,63.9%)",
+    },
+    {
+      scale: 500,
+      hex: "#78716c",
+      rgb: "rgb(120,113,108)",
+      hsl: "hsl(25,5.3%,44.7%)",
+    },
+    {
+      scale: 600,
+      hex: "#57534e",
+      rgb: "rgb(87,83,78)",
+      hsl: "hsl(33.3,5.5%,32.4%)",
+    },
+    {
+      scale: 700,
+      hex: "#44403c",
+      rgb: "rgb(68,64,60)",
+      hsl: "hsl(30,6.3%,25.1%)",
+    },
+    {
+      scale: 800,
+      hex: "#292524",
+      rgb: "rgb(41,37,36)",
+      hsl: "hsl(12,6.5%,15.1%)",
+    },
+    {
+      scale: 900,
+      hex: "#1c1917",
+      rgb: "rgb(28,25,23)",
+      hsl: "hsl(24,9.8%,10%)",
+    },
+    {
+      scale: 950,
+      hex: "#0c0a09",
+      rgb: "rgb(12,10,9)",
+      hsl: "hsl(20,14.3%,4.1%)",
+    },
+  ],
+  red: [
+    {
+      scale: 50,
+      hex: "#fef2f2",
+      rgb: "rgb(254,242,242)",
+      hsl: "hsl(0,85.7%,97.3%)",
+    },
+    {
+      scale: 100,
+      hex: "#fee2e2",
+      rgb: "rgb(254,226,226)",
+      hsl: "hsl(0,93.3%,94.1%)",
+    },
+    {
+      scale: 200,
+      hex: "#fecaca",
+      rgb: "rgb(254,202,202)",
+      hsl: "hsl(0,96.3%,89.4%)",
+    },
+    {
+      scale: 300,
+      hex: "#fca5a5",
+      rgb: "rgb(252,165,165)",
+      hsl: "hsl(0,93.5%,81.8%)",
+    },
+    {
+      scale: 400,
+      hex: "#f87171",
+      rgb: "rgb(248,113,113)",
+      hsl: "hsl(0,90.6%,70.8%)",
+    },
+    {
+      scale: 500,
+      hex: "#ef4444",
+      rgb: "rgb(239,68,68)",
+      hsl: "hsl(0,84.2%,60.2%)",
+    },
+    {
+      scale: 600,
+      hex: "#dc2626",
+      rgb: "rgb(220,38,38)",
+      hsl: "hsl(0,72.2%,50.6%)",
+    },
+    {
+      scale: 700,
+      hex: "#b91c1c",
+      rgb: "rgb(185,28,28)",
+      hsl: "hsl(0,73.7%,41.8%)",
+    },
+    {
+      scale: 800,
+      hex: "#991b1b",
+      rgb: "rgb(153,27,27)",
+      hsl: "hsl(0,70%,35.3%)",
+    },
+    {
+      scale: 900,
+      hex: "#7f1d1d",
+      rgb: "rgb(127,29,29)",
+      hsl: "hsl(0,62.8%,30.6%)",
+    },
+    {
+      scale: 950,
+      hex: "#450a0a",
+      rgb: "rgb(69,10,10)",
+      hsl: "hsl(0,74.7%,15.5%)",
+    },
+  ],
+  orange: [
+    {
+      scale: 50,
+      hex: "#fff7ed",
+      rgb: "rgb(255,247,237)",
+      hsl: "hsl(33.3,100%,96.5%)",
+    },
+    {
+      scale: 100,
+      hex: "#ffedd5",
+      rgb: "rgb(255,237,213)",
+      hsl: "hsl(34.3,100%,91.8%)",
+    },
+    {
+      scale: 200,
+      hex: "#fed7aa",
+      rgb: "rgb(254,215,170)",
+      hsl: "hsl(32.1,97.7%,83.1%)",
+    },
+    {
+      scale: 300,
+      hex: "#fdba74",
+      rgb: "rgb(253,186,116)",
+      hsl: "hsl(30.7,97.2%,72.4%)",
+    },
+    {
+      scale: 400,
+      hex: "#fb923c",
+      rgb: "rgb(251,146,60)",
+      hsl: "hsl(27,96%,61%)",
+    },
+    {
+      scale: 500,
+      hex: "#f97316",
+      rgb: "rgb(249,115,22)",
+      hsl: "hsl(24.6,95%,53.1%)",
+    },
+    {
+      scale: 600,
+      hex: "#ea580c",
+      rgb: "rgb(234,88,12)",
+      hsl: "hsl(20.5,90.2%,48.2%)",
+    },
+    {
+      scale: 700,
+      hex: "#c2410c",
+      rgb: "rgb(194,65,12)",
+      hsl: "hsl(17.5,88.3%,40.4%)",
+    },
+    {
+      scale: 800,
+      hex: "#9a3412",
+      rgb: "rgb(154,52,18)",
+      hsl: "hsl(15,79.1%,33.7%)",
+    },
+    {
+      scale: 900,
+      hex: "#7c2d12",
+      rgb: "rgb(124,45,18)",
+      hsl: "hsl(15.3,74.6%,27.8%)",
+    },
+    {
+      scale: 950,
+      hex: "#431407",
+      rgb: "rgb(67,20,7)",
+      hsl: "hsl(13,81.1%,14.5%)",
+    },
+  ],
+  amber: [
+    {
+      scale: 50,
+      hex: "#fffbeb",
+      rgb: "rgb(255,251,235)",
+      hsl: "hsl(48,100%,96.1%)",
+    },
+    {
+      scale: 100,
+      hex: "#fef3c7",
+      rgb: "rgb(254,243,199)",
+      hsl: "hsl(48,96.5%,88.8%)",
+    },
+    {
+      scale: 200,
+      hex: "#fde68a",
+      rgb: "rgb(253,230,138)",
+      hsl: "hsl(48,96.6%,76.7%)",
+    },
+    {
+      scale: 300,
+      hex: "#fcd34d",
+      rgb: "rgb(252,211,77)",
+      hsl: "hsl(45.9,96.7%,64.5%)",
+    },
+    {
+      scale: 400,
+      hex: "#fbbf24",
+      rgb: "rgb(251,191,36)",
+      hsl: "hsl(43.3,96.4%,56.3%)",
+    },
+    {
+      scale: 500,
+      hex: "#f59e0b",
+      rgb: "rgb(245,158,11)",
+      hsl: "hsl(37.7,92.1%,50.2%)",
+    },
+    {
+      scale: 600,
+      hex: "#d97706",
+      rgb: "rgb(217,119,6)",
+      hsl: "hsl(32.1,94.6%,43.7%)",
+    },
+    {
+      scale: 700,
+      hex: "#b45309",
+      rgb: "rgb(180,83,9)",
+      hsl: "hsl(26,90.5%,37.1%)",
+    },
+    {
+      scale: 800,
+      hex: "#92400e",
+      rgb: "rgb(146,64,14)",
+      hsl: "hsl(22.7,82.5%,31.4%)",
+    },
+    {
+      scale: 900,
+      hex: "#78350f",
+      rgb: "rgb(120,53,15)",
+      hsl: "hsl(21.7,77.8%,26.5%)",
+    },
+    {
+      scale: 950,
+      hex: "#451a03",
+      rgb: "rgb(69,26,3)",
+      hsl: "hsl(20.9,91.7%,14.1%)",
+    },
+  ],
+  yellow: [
+    {
+      scale: 50,
+      hex: "#fefce8",
+      rgb: "rgb(254,252,232)",
+      hsl: "hsl(54.5,91.7%,95.3%)",
+    },
+    {
+      scale: 100,
+      hex: "#fef9c3",
+      rgb: "rgb(254,249,195)",
+      hsl: "hsl(54.9,96.7%,88%)",
+    },
+    {
+      scale: 200,
+      hex: "#fef08a",
+      rgb: "rgb(254,240,138)",
+      hsl: "hsl(52.8,98.3%,76.9%)",
+    },
+    {
+      scale: 300,
+      hex: "#fde047",
+      rgb: "rgb(253,224,71)",
+      hsl: "hsl(50.4,97.8%,63.5%)",
+    },
+    {
+      scale: 400,
+      hex: "#facc15",
+      rgb: "rgb(250,204,21)",
+      hsl: "hsl(47.9,95.8%,53.1%)",
+    },
+    {
+      scale: 500,
+      hex: "#eab308",
+      rgb: "rgb(234,179,8)",
+      hsl: "hsl(45.4,93.4%,47.5%)",
+    },
+    {
+      scale: 600,
+      hex: "#ca8a04",
+      rgb: "rgb(202,138,4)",
+      hsl: "hsl(40.6,96.1%,40.4%)",
+    },
+    {
+      scale: 700,
+      hex: "#a16207",
+      rgb: "rgb(161,98,7)",
+      hsl: "hsl(35.5,91.7%,32.9%)",
+    },
+    {
+      scale: 800,
+      hex: "#854d0e",
+      rgb: "rgb(133,77,14)",
+      hsl: "hsl(31.8,81%,28.8%)",
+    },
+    {
+      scale: 900,
+      hex: "#713f12",
+      rgb: "rgb(113,63,18)",
+      hsl: "hsl(28.4,72.5%,25.7%)",
+    },
+    {
+      scale: 950,
+      hex: "#422006",
+      rgb: "rgb(66,32,6)",
+      hsl: "hsl(26,83.3%,14.1%)",
+    },
+  ],
+  lime: [
+    {
+      scale: 50,
+      hex: "#f7fee7",
+      rgb: "rgb(247,254,231)",
+      hsl: "hsl(78.3,92%,95.1%)",
+    },
+    {
+      scale: 100,
+      hex: "#ecfccb",
+      rgb: "rgb(236,252,203)",
+      hsl: "hsl(79.6,89.1%,89.2%)",
+    },
+    {
+      scale: 200,
+      hex: "#d9f99d",
+      rgb: "rgb(217,249,157)",
+      hsl: "hsl(80.9,88.5%,79.6%)",
+    },
+    {
+      scale: 300,
+      hex: "#bef264",
+      rgb: "rgb(190,242,100)",
+      hsl: "hsl(82,84.5%,67.1%)",
+    },
+    {
+      scale: 400,
+      hex: "#a3e635",
+      rgb: "rgb(163,230,53)",
+      hsl: "hsl(82.7,78%,55.5%)",
+    },
+    {
+      scale: 500,
+      hex: "#84cc16",
+      rgb: "rgb(132,204,22)",
+      hsl: "hsl(83.7,80.5%,44.3%)",
+    },
+    {
+      scale: 600,
+      hex: "#65a30d",
+      rgb: "rgb(101,163,13)",
+      hsl: "hsl(84.8,85.2%,34.5%)",
+    },
+    {
+      scale: 700,
+      hex: "#4d7c0f",
+      rgb: "rgb(77,124,15)",
+      hsl: "hsl(85.9,78.4%,27.3%)",
+    },
+    {
+      scale: 800,
+      hex: "#3f6212",
+      rgb: "rgb(63,98,18)",
+      hsl: "hsl(86.3,69%,22.7%)",
+    },
+    {
+      scale: 900,
+      hex: "#365314",
+      rgb: "rgb(54,83,20)",
+      hsl: "hsl(87.6,61.2%,20.2%)",
+    },
+    {
+      scale: 950,
+      hex: "#1a2e05",
+      rgb: "rgb(26,46,5)",
+      hsl: "hsl(89.3,80.4%,10%)",
+    },
+  ],
+  green: [
+    {
+      scale: 50,
+      hex: "#f0fdf4",
+      rgb: "rgb(240,253,244)",
+      hsl: "hsl(138.5,76.5%,96.7%)",
+    },
+    {
+      scale: 100,
+      hex: "#dcfce7",
+      rgb: "rgb(220,252,231)",
+      hsl: "hsl(140.6,84.2%,92.5%)",
+    },
+    {
+      scale: 200,
+      hex: "#bbf7d0",
+      rgb: "rgb(187,247,208)",
+      hsl: "hsl(141,78.9%,85.1%)",
+    },
+    {
+      scale: 300,
+      hex: "#86efac",
+      rgb: "rgb(134,239,172)",
+      hsl: "hsl(141.7,76.6%,73.1%)",
+    },
+    {
+      scale: 400,
+      hex: "#4ade80",
+      rgb: "rgb(74,222,128)",
+      hsl: "hsl(141.9,69.2%,58%)",
+    },
+    {
+      scale: 500,
+      hex: "#22c55e",
+      rgb: "rgb(34,197,94)",
+      hsl: "hsl(142.1,70.6%,45.3%)",
+    },
+    {
+      scale: 600,
+      hex: "#16a34a",
+      rgb: "rgb(22,163,74)",
+      hsl: "hsl(142.1,76.2%,36.3%)",
+    },
+    {
+      scale: 700,
+      hex: "#15803d",
+      rgb: "rgb(21,128,61)",
+      hsl: "hsl(142.4,71.8%,29.2%)",
+    },
+    {
+      scale: 800,
+      hex: "#166534",
+      rgb: "rgb(22,101,52)",
+      hsl: "hsl(142.8,64.2%,24.1%)",
+    },
+    {
+      scale: 900,
+      hex: "#14532d",
+      rgb: "rgb(20,83,45)",
+      hsl: "hsl(143.8,61.2%,20.2%)",
+    },
+    {
+      scale: 950,
+      hex: "#052e16",
+      rgb: "rgb(5,46,22)",
+      hsl: "hsl(144.9,80.4%,10%)",
+    },
+  ],
+  emerald: [
+    {
+      scale: 50,
+      hex: "#ecfdf5",
+      rgb: "rgb(236,253,245)",
+      hsl: "hsl(151.8,81%,95.9%)",
+    },
+    {
+      scale: 100,
+      hex: "#d1fae5",
+      rgb: "rgb(209,250,229)",
+      hsl: "hsl(149.3,80.4%,90%)",
+    },
+    {
+      scale: 200,
+      hex: "#a7f3d0",
+      rgb: "rgb(167,243,208)",
+      hsl: "hsl(152.4,76%,80.4%)",
+    },
+    {
+      scale: 300,
+      hex: "#6ee7b7",
+      rgb: "rgb(110,231,183)",
+      hsl: "hsl(156.2,71.6%,66.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#34d399",
+      rgb: "rgb(52,211,153)",
+      hsl: "hsl(158.1,64.4%,51.6%)",
+    },
+    {
+      scale: 500,
+      hex: "#10b981",
+      rgb: "rgb(16,185,129)",
+      hsl: "hsl(160.1,84.1%,39.4%)",
+    },
+    {
+      scale: 600,
+      hex: "#059669",
+      rgb: "rgb(5,150,105)",
+      hsl: "hsl(161.4,93.5%,30.4%)",
+    },
+    {
+      scale: 700,
+      hex: "#047857",
+      rgb: "rgb(4,120,87)",
+      hsl: "hsl(162.9,93.5%,24.3%)",
+    },
+    {
+      scale: 800,
+      hex: "#065f46",
+      rgb: "rgb(6,95,70)",
+      hsl: "hsl(163.1,88.1%,19.8%)",
+    },
+    {
+      scale: 900,
+      hex: "#064e3b",
+      rgb: "rgb(6,78,59)",
+      hsl: "hsl(164.2,85.7%,16.5%)",
+    },
+    {
+      scale: 950,
+      hex: "#022c22",
+      rgb: "rgb(2,44,34)",
+      hsl: "hsl(165.7,91.3%,9%)",
+    },
+  ],
+  teal: [
+    {
+      scale: 50,
+      hex: "#f0fdfa",
+      rgb: "rgb(240,253,250)",
+      hsl: "hsl(166.2,76.5%,96.7%)",
+    },
+    {
+      scale: 100,
+      hex: "#ccfbf1",
+      rgb: "rgb(204,251,241)",
+      hsl: "hsl(167.2,85.5%,89.2%)",
+    },
+    {
+      scale: 200,
+      hex: "#99f6e4",
+      rgb: "rgb(153,246,228)",
+      hsl: "hsl(168.4,83.8%,78.2%)",
+    },
+    {
+      scale: 300,
+      hex: "#5eead4",
+      rgb: "rgb(94,234,212)",
+      hsl: "hsl(170.6,76.9%,64.3%)",
+    },
+    {
+      scale: 400,
+      hex: "#2dd4bf",
+      rgb: "rgb(45,212,191)",
+      hsl: "hsl(172.5,66%,50.4%)",
+    },
+    {
+      scale: 500,
+      hex: "#14b8a6",
+      rgb: "rgb(20,184,166)",
+      hsl: "hsl(173.4,80.4%,40%)",
+    },
+    {
+      scale: 600,
+      hex: "#0d9488",
+      rgb: "rgb(13,148,136)",
+      hsl: "hsl(174.7,83.9%,31.6%)",
+    },
+    {
+      scale: 700,
+      hex: "#0f766e",
+      rgb: "rgb(15,118,110)",
+      hsl: "hsl(175.3,77.4%,26.1%)",
+    },
+    {
+      scale: 800,
+      hex: "#115e59",
+      rgb: "rgb(17,94,89)",
+      hsl: "hsl(176.1,69.4%,21.8%)",
+    },
+    {
+      scale: 900,
+      hex: "#134e4a",
+      rgb: "rgb(19,78,74)",
+      hsl: "hsl(175.9,60.8%,19%)",
+    },
+    {
+      scale: 950,
+      hex: "#042f2e",
+      rgb: "rgb(4,47,46)",
+      hsl: "hsl(178.6,84.3%,10%)",
+    },
+  ],
+  cyan: [
+    {
+      scale: 50,
+      hex: "#ecfeff",
+      rgb: "rgb(236,254,255)",
+      hsl: "hsl(183.2,100%,96.3%)",
+    },
+    {
+      scale: 100,
+      hex: "#cffafe",
+      rgb: "rgb(207,250,254)",
+      hsl: "hsl(185.1,95.9%,90.4%)",
+    },
+    {
+      scale: 200,
+      hex: "#a5f3fc",
+      rgb: "rgb(165,243,252)",
+      hsl: "hsl(186.2,93.5%,81.8%)",
+    },
+    {
+      scale: 300,
+      hex: "#67e8f9",
+      rgb: "rgb(103,232,249)",
+      hsl: "hsl(187,92.4%,69%)",
+    },
+    {
+      scale: 400,
+      hex: "#22d3ee",
+      rgb: "rgb(34,211,238)",
+      hsl: "hsl(187.9,85.7%,53.3%)",
+    },
+    {
+      scale: 500,
+      hex: "#06b6d4",
+      rgb: "rgb(6,182,212)",
+      hsl: "hsl(188.7,94.5%,42.7%)",
+    },
+    {
+      scale: 600,
+      hex: "#0891b2",
+      rgb: "rgb(8,145,178)",
+      hsl: "hsl(191.6,91.4%,36.5%)",
+    },
+    {
+      scale: 700,
+      hex: "#0e7490",
+      rgb: "rgb(14,116,144)",
+      hsl: "hsl(192.9,82.3%,31%)",
+    },
+    {
+      scale: 800,
+      hex: "#155e75",
+      rgb: "rgb(21,94,117)",
+      hsl: "hsl(194.4,69.6%,27.1%)",
+    },
+    {
+      scale: 900,
+      hex: "#164e63",
+      rgb: "rgb(22,78,99)",
+      hsl: "hsl(196.4,63.6%,23.7%)",
+    },
+    {
+      scale: 950,
+      hex: "#083344",
+      rgb: "rgb(8,51,68)",
+      hsl: "hsl(197,78.9%,14.9%)",
+    },
+  ],
+  sky: [
+    {
+      scale: 50,
+      hex: "#f0f9ff",
+      rgb: "rgb(240,249,255)",
+      hsl: "hsl(204,100%,97.1%)",
+    },
+    {
+      scale: 100,
+      hex: "#e0f2fe",
+      rgb: "rgb(224,242,254)",
+      hsl: "hsl(204,93.8%,93.7%)",
+    },
+    {
+      scale: 200,
+      hex: "#bae6fd",
+      rgb: "rgb(186,230,253)",
+      hsl: "hsl(200.6,94.4%,86.1%)",
+    },
+    {
+      scale: 300,
+      hex: "#7dd3fc",
+      rgb: "rgb(125,211,252)",
+      hsl: "hsl(199.4,95.5%,73.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#38bdf8",
+      rgb: "rgb(56,189,248)",
+      hsl: "hsl(198.4,93.2%,59.6%)",
+    },
+    {
+      scale: 500,
+      hex: "#0ea5e9",
+      rgb: "rgb(14,165,233)",
+      hsl: "hsl(198.6,88.7%,48.4%)",
+    },
+    {
+      scale: 600,
+      hex: "#0284c7",
+      rgb: "rgb(2,132,199)",
+      hsl: "hsl(200.4,98%,39.4%)",
+    },
+    {
+      scale: 700,
+      hex: "#0369a1",
+      rgb: "rgb(3,105,161)",
+      hsl: "hsl(201.3,96.3%,32.2%)",
+    },
+    {
+      scale: 800,
+      hex: "#075985",
+      rgb: "rgb(7,89,133)",
+      hsl: "hsl(201,90%,27.5%)",
+    },
+    {
+      scale: 900,
+      hex: "#0c4a6e",
+      rgb: "rgb(12,74,110)",
+      hsl: "hsl(202,80.3%,23.9%)",
+    },
+    {
+      scale: 950,
+      hex: "#082f49",
+      rgb: "rgb(8,47,73)",
+      hsl: "hsl(204,80.2%,15.9%)",
+    },
+  ],
+  blue: [
+    {
+      scale: 50,
+      hex: "#eff6ff",
+      rgb: "rgb(239,246,255)",
+      hsl: "hsl(213.8,100%,96.9%)",
+    },
+    {
+      scale: 100,
+      hex: "#dbeafe",
+      rgb: "rgb(219,234,254)",
+      hsl: "hsl(214.3,94.6%,92.7%)",
+    },
+    {
+      scale: 200,
+      hex: "#bfdbfe",
+      rgb: "rgb(191,219,254)",
+      hsl: "hsl(213.3,96.9%,87.3%)",
+    },
+    {
+      scale: 300,
+      hex: "#93c5fd",
+      rgb: "rgb(147,197,253)",
+      hsl: "hsl(211.7,96.4%,78.4%)",
+    },
+    {
+      scale: 400,
+      hex: "#60a5fa",
+      rgb: "rgb(96,165,250)",
+      hsl: "hsl(213.1,93.9%,67.8%)",
+    },
+    {
+      scale: 500,
+      hex: "#3b82f6",
+      rgb: "rgb(59,130,246)",
+      hsl: "hsl(217.2,91.2%,59.8%)",
+    },
+    {
+      scale: 600,
+      hex: "#2563eb",
+      rgb: "rgb(37,99,235)",
+      hsl: "hsl(221.2,83.2%,53.3%)",
+    },
+    {
+      scale: 700,
+      hex: "#1d4ed8",
+      rgb: "rgb(29,78,216)",
+      hsl: "hsl(224.3,76.3%,48%)",
+    },
+    {
+      scale: 800,
+      hex: "#1e40af",
+      rgb: "rgb(30,64,175)",
+      hsl: "hsl(225.9,70.7%,40.2%)",
+    },
+    {
+      scale: 900,
+      hex: "#1e3a8a",
+      rgb: "rgb(30,58,138)",
+      hsl: "hsl(224.4,64.3%,32.9%)",
+    },
+    {
+      scale: 950,
+      hex: "#172554",
+      rgb: "rgb(23,37,84)",
+      hsl: "hsl(226.2,57%,21%)",
+    },
+  ],
+  indigo: [
+    {
+      scale: 50,
+      hex: "#eef2ff",
+      rgb: "rgb(238,242,255)",
+      hsl: "hsl(225.9,100%,96.7%)",
+    },
+    {
+      scale: 100,
+      hex: "#e0e7ff",
+      rgb: "rgb(224,231,255)",
+      hsl: "hsl(226.5,100%,93.9%)",
+    },
+    {
+      scale: 200,
+      hex: "#c7d2fe",
+      rgb: "rgb(199,210,254)",
+      hsl: "hsl(228,96.5%,88.8%)",
+    },
+    {
+      scale: 300,
+      hex: "#a5b4fc",
+      rgb: "rgb(165,180,252)",
+      hsl: "hsl(229.7,93.5%,81.8%)",
+    },
+    {
+      scale: 400,
+      hex: "#818cf8",
+      rgb: "rgb(129,140,248)",
+      hsl: "hsl(234.5,89.5%,73.9%)",
+    },
+    {
+      scale: 500,
+      hex: "#6366f1",
+      rgb: "rgb(99,102,241)",
+      hsl: "hsl(238.7,83.5%,66.7%)",
+    },
+    {
+      scale: 600,
+      hex: "#4f46e5",
+      rgb: "rgb(79,70,229)",
+      hsl: "hsl(243.4,75.4%,58.6%)",
+    },
+    {
+      scale: 700,
+      hex: "#4338ca",
+      rgb: "rgb(67,56,202)",
+      hsl: "hsl(244.5,57.9%,50.6%)",
+    },
+    {
+      scale: 800,
+      hex: "#3730a3",
+      rgb: "rgb(55,48,163)",
+      hsl: "hsl(243.7,54.5%,41.4%)",
+    },
+    {
+      scale: 900,
+      hex: "#312e81",
+      rgb: "rgb(49,46,129)",
+      hsl: "hsl(242.2,47.4%,34.3%)",
+    },
+    {
+      scale: 950,
+      hex: "#1e1b4b",
+      rgb: "rgb(30,27,75)",
+      hsl: "hsl(243.8,47.1%,20%)",
+    },
+  ],
+  violet: [
+    {
+      scale: 50,
+      hex: "#f5f3ff",
+      rgb: "rgb(245,243,255)",
+      hsl: "hsl(250,100%,97.6%)",
+    },
+    {
+      scale: 100,
+      hex: "#ede9fe",
+      rgb: "rgb(237,233,254)",
+      hsl: "hsl(251.4,91.3%,95.5%)",
+    },
+    {
+      scale: 200,
+      hex: "#ddd6fe",
+      rgb: "rgb(221,214,254)",
+      hsl: "hsl(250.5,95.2%,91.8%)",
+    },
+    {
+      scale: 300,
+      hex: "#c4b5fd",
+      rgb: "rgb(196,181,253)",
+      hsl: "hsl(252.5,94.7%,85.1%)",
+    },
+    {
+      scale: 400,
+      hex: "#a78bfa",
+      rgb: "rgb(167,139,250)",
+      hsl: "hsl(255.1,91.7%,76.3%)",
+    },
+    {
+      scale: 500,
+      hex: "#8b5cf6",
+      rgb: "rgb(139,92,246)",
+      hsl: "hsl(258.3,89.5%,66.3%)",
+    },
+    {
+      scale: 600,
+      hex: "#7c3aed",
+      rgb: "rgb(124,58,237)",
+      hsl: "hsl(262.1,83.3%,57.8%)",
+    },
+    {
+      scale: 700,
+      hex: "#6d28d9",
+      rgb: "rgb(109,40,217)",
+      hsl: "hsl(263.4,70%,50.4%)",
+    },
+    {
+      scale: 800,
+      hex: "#5b21b6",
+      rgb: "rgb(91,33,182)",
+      hsl: "hsl(263.4,69.3%,42.2%)",
+    },
+    {
+      scale: 900,
+      hex: "#4c1d95",
+      rgb: "rgb(76,29,149)",
+      hsl: "hsl(263.5,67.4%,34.9%)",
+    },
+    {
+      scale: 950,
+      hex: "#1e1b4b",
+      rgb: "rgb(46,16,101)",
+      hsl: "hsl(261.2,72.6%,22.9%)",
+    },
+  ],
+  purple: [
+    {
+      scale: 50,
+      hex: "#faf5ff",
+      rgb: "rgb(250,245,255)",
+      hsl: "hsl(270,100%,98%)",
+    },
+    {
+      scale: 100,
+      hex: "#f3e8ff",
+      rgb: "rgb(243,232,255)",
+      hsl: "hsl(268.7,100%,95.5%)",
+    },
+    {
+      scale: 200,
+      hex: "#e9d5ff",
+      rgb: "rgb(233,213,255)",
+      hsl: "hsl(268.6,100%,91.8%)",
+    },
+    {
+      scale: 300,
+      hex: "#d8b4fe",
+      rgb: "rgb(216,180,254)",
+      hsl: "hsl(269.2,97.4%,85.1%)",
+    },
+    {
+      scale: 400,
+      hex: "#c084fc",
+      rgb: "rgb(192,132,252)",
+      hsl: "hsl(270,95.2%,75.3%)",
+    },
+    {
+      scale: 500,
+      hex: "#a855f7",
+      rgb: "rgb(168,85,247)",
+      hsl: "hsl(270.7,91%,65.1%)",
+    },
+    {
+      scale: 600,
+      hex: "#9333ea",
+      rgb: "rgb(147,51,234)",
+      hsl: "hsl(271.5,81.3%,55.9%)",
+    },
+    {
+      scale: 700,
+      hex: "#7e22ce",
+      rgb: "rgb(126,34,206)",
+      hsl: "hsl(272.1,71.7%,47.1%)",
+    },
+    {
+      scale: 800,
+      hex: "#6b21a8",
+      rgb: "rgb(107,33,168)",
+      hsl: "hsl(272.9,67.2%,39.4%)",
+    },
+    {
+      scale: 900,
+      hex: "#581c87",
+      rgb: "rgb(88,28,135)",
+      hsl: "hsl(273.6,65.6%,32%)",
+    },
+    {
+      scale: 950,
+      hex: "#3b0764",
+      rgb: "rgb(59,7,100)",
+      hsl: "hsl(273.5,86.9%,21%)",
+    },
+  ],
+  fuchsia: [
+    {
+      scale: 50,
+      hex: "#fdf4ff",
+      rgb: "rgb(253,244,255)",
+      hsl: "hsl(289.1,100%,97.8%)",
+    },
+    {
+      scale: 100,
+      hex: "#fae8ff",
+      rgb: "rgb(250,232,255)",
+      hsl: "hsl(287,100%,95.5%)",
+    },
+    {
+      scale: 200,
+      hex: "#f5d0fe",
+      rgb: "rgb(245,208,254)",
+      hsl: "hsl(288.3,95.8%,90.6%)",
+    },
+    {
+      scale: 300,
+      hex: "#f0abfc",
+      rgb: "rgb(240,171,252)",
+      hsl: "hsl(291.1,93.1%,82.9%)",
+    },
+    {
+      scale: 400,
+      hex: "#e879f9",
+      rgb: "rgb(232,121,249)",
+      hsl: "hsl(292,91.4%,72.5%)",
+    },
+    {
+      scale: 500,
+      hex: "#d946ef",
+      rgb: "rgb(217,70,239)",
+      hsl: "hsl(292.2,84.1%,60.6%)",
+    },
+    {
+      scale: 600,
+      hex: "#c026d3",
+      rgb: "rgb(192,38,211)",
+      hsl: "hsl(293.4,69.5%,48.8%)",
+    },
+    {
+      scale: 700,
+      hex: "#a21caf",
+      rgb: "rgb(162,28,175)",
+      hsl: "hsl(294.7,72.4%,39.8%)",
+    },
+    {
+      scale: 800,
+      hex: "#86198f",
+      rgb: "rgb(134,25,143)",
+      hsl: "hsl(295.4,70.2%,32.9%)",
+    },
+    {
+      scale: 900,
+      hex: "#701a75",
+      rgb: "rgb(112,26,117)",
+      hsl: "hsl(296.7,63.6%,28%)",
+    },
+    {
+      scale: 950,
+      hex: "#4a044e",
+      rgb: "rgb(74,4,78)",
+      hsl: "hsl(296.8,90.2%,16.1%)",
+    },
+  ],
+  pink: [
+    {
+      scale: 50,
+      hex: "#fdf2f8",
+      rgb: "rgb(253,242,248)",
+      hsl: "hsl(327.3,73.3%,97.1%)",
+    },
+    {
+      scale: 100,
+      hex: "#fce7f3",
+      rgb: "rgb(252,231,243)",
+      hsl: "hsl(325.7,77.8%,94.7%)",
+    },
+    {
+      scale: 200,
+      hex: "#fbcfe8",
+      rgb: "rgb(251,207,232)",
+      hsl: "hsl(325.9,84.6%,89.8%)",
+    },
+    {
+      scale: 300,
+      hex: "#f9a8d4",
+      rgb: "rgb(249,168,212)",
+      hsl: "hsl(327.4,87.1%,81.8%)",
+    },
+    {
+      scale: 400,
+      hex: "#f472b6",
+      rgb: "rgb(244,114,182)",
+      hsl: "hsl(328.6,85.5%,70.2%)",
+    },
+    {
+      scale: 500,
+      hex: "#ec4899",
+      rgb: "rgb(236,72,153)",
+      hsl: "hsl(330.4,81.2%,60.4%)",
+    },
+    {
+      scale: 600,
+      hex: "#db2777",
+      rgb: "rgb(219,39,119)",
+      hsl: "hsl(333.3,71.4%,50.6%)",
+    },
+    {
+      scale: 700,
+      hex: "#be185d",
+      rgb: "rgb(190,24,93)",
+      hsl: "hsl(335.1,77.6%,42%)",
+    },
+    {
+      scale: 800,
+      hex: "#9d174d",
+      rgb: "rgb(157,23,77)",
+      hsl: "hsl(335.8,74.4%,35.3%)",
+    },
+    {
+      scale: 900,
+      hex: "#831843",
+      rgb: "rgb(131,24,67)",
+      hsl: "hsl(335.9,69%,30.4%)",
+    },
+    {
+      scale: 950,
+      hex: "#500724",
+      rgb: "rgb(80,7,36)",
+      hsl: "hsl(336.2,83.9%,17.1%)",
+    },
+  ],
+  rose: [
+    {
+      scale: 50,
+      hex: "#fff1f2",
+      rgb: "rgb(255,241,242)",
+      hsl: "hsl(355.7,100%,97.3%)",
+    },
+    {
+      scale: 100,
+      hex: "#ffe4e6",
+      rgb: "rgb(255,228,230)",
+      hsl: "hsl(355.6,100%,94.7%)",
+    },
+    {
+      scale: 200,
+      hex: "#fecdd3",
+      rgb: "rgb(254,205,211)",
+      hsl: "hsl(352.7,96.1%,90%)",
+    },
+    {
+      scale: 300,
+      hex: "#fda4af",
+      rgb: "rgb(253,164,175)",
+      hsl: "hsl(352.6,95.7%,81.8%)",
+    },
+    {
+      scale: 400,
+      hex: "#fb7185",
+      rgb: "rgb(251,113,133)",
+      hsl: "hsl(351.3,94.5%,71.4%)",
+    },
+    {
+      scale: 500,
+      hex: "#f43f5e",
+      rgb: "rgb(244,63,94)",
+      hsl: "hsl(349.7,89.2%,60.2%)",
+    },
+    {
+      scale: 600,
+      hex: "#e11d48",
+      rgb: "rgb(225,29,72)",
+      hsl: "hsl(346.8,77.2%,49.8%)",
+    },
+    {
+      scale: 700,
+      hex: "#be123c",
+      rgb: "rgb(190,18,60)",
+      hsl: "hsl(345.3,82.7%,40.8%)",
+    },
+    {
+      scale: 800,
+      hex: "#9f1239",
+      rgb: "rgb(159,18,57)",
+      hsl: "hsl(343.4,79.7%,34.7%)",
+    },
+    {
+      scale: 900,
+      hex: "#881337",
+      rgb: "rgb(136,19,55)",
+      hsl: "hsl(341.5,75.5%,30.4%)",
+    },
+    {
+      scale: 950,
+      hex: "#4c0519",
+      rgb: "rgb(76,5,25)",
+      hsl: "hsl(343.1,87.7%,15.9%)",
+    },
+  ],
+}
 
 export const colorMapping = {
-	light: {
-		background: "white",
-		foreground: "{{base}}-950",
-		card: "white",
-		"card-foreground": "{{base}}-950",
-		popover: "white",
-		"popover-foreground": "{{base}}-950",
-		primary: "{{base}}-900",
-		"primary-foreground": "{{base}}-50",
-		secondary: "{{base}}-100",
-		"secondary-foreground": "{{base}}-900",
-		muted: "{{base}}-100",
-		"muted-foreground": "{{base}}-500",
-		accent: "{{base}}-100",
-		"accent-foreground": "{{base}}-900",
-		destructive: "red-500",
-		"destructive-foreground": "{{base}}-50",
-		border: "{{base}}-200",
-		input: "{{base}}-200",
-		ring: "{{base}}-950",
-	},
-	dark: {
-		background: "{{base}}-950",
-		foreground: "{{base}}-50",
-		card: "{{base}}-950",
-		"card-foreground": "{{base}}-50",
-		popover: "{{base}}-950",
-		"popover-foreground": "{{base}}-50",
-		primary: "{{base}}-50",
-		"primary-foreground": "{{base}}-900",
-		secondary: "{{base}}-800",
-		"secondary-foreground": "{{base}}-50",
-		muted: "{{base}}-800",
-		"muted-foreground": "{{base}}-400",
-		accent: "{{base}}-800",
-		"accent-foreground": "{{base}}-50",
-		destructive: "red-900",
-		"destructive-foreground": "{{base}}-50",
-		border: "{{base}}-800",
-		input: "{{base}}-800",
-		ring: "{{base}}-300",
-	},
-};
+  light: {
+    background: "white",
+    foreground: "{{base}}-950",
+    card: "white",
+    "card-foreground": "{{base}}-950",
+    popover: "white",
+    "popover-foreground": "{{base}}-950",
+    primary: "{{base}}-900",
+    "primary-foreground": "{{base}}-50",
+    secondary: "{{base}}-100",
+    "secondary-foreground": "{{base}}-900",
+    muted: "{{base}}-100",
+    "muted-foreground": "{{base}}-500",
+    accent: "{{base}}-100",
+    "accent-foreground": "{{base}}-900",
+    destructive: "red-500",
+    "destructive-foreground": "{{base}}-50",
+    border: "{{base}}-200",
+    input: "{{base}}-200",
+    ring: "{{base}}-950",
+  },
+  dark: {
+    background: "{{base}}-950",
+    foreground: "{{base}}-50",
+    card: "{{base}}-950",
+    "card-foreground": "{{base}}-50",
+    popover: "{{base}}-950",
+    "popover-foreground": "{{base}}-50",
+    primary: "{{base}}-50",
+    "primary-foreground": "{{base}}-900",
+    secondary: "{{base}}-800",
+    "secondary-foreground": "{{base}}-50",
+    muted: "{{base}}-800",
+    "muted-foreground": "{{base}}-400",
+    accent: "{{base}}-800",
+    "accent-foreground": "{{base}}-50",
+    destructive: "red-900",
+    "destructive-foreground": "{{base}}-50",
+    border: "{{base}}-800",
+    input: "{{base}}-800",
+    ring: "{{base}}-300",
+  },
+}
diff --git a/docs/src/registry/examples.ts b/docs/src/registry/examples.ts
index 71e75d75..063429d2 100644
--- a/docs/src/registry/examples.ts
+++ b/docs/src/registry/examples.ts
@@ -1,954 +1,954 @@
-import type { Registry } from "./schema";
+import type { Registry } from "./schema"
 
 export const examples: Registry = [
-	{
-		name: "accordion-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/accordion-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "alert-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/alert-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "alert-destructive",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/alert-destructive.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "alert-dialog-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/alert-dialog-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-secondary",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-secondary.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-destructive",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-destructive.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-outline",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-outline.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-ghost",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-ghost.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-link",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-link.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-with-icon",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-with-icon.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-loading",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-loading.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "button-as-child",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/button-as-child.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "badge-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/badge-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "badge-secondary",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/badge-secondary.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "badge-destructive",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/badge-destructive.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "badge-outline",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/badge-outline.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "calendar-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/calendar-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "card-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/card-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "carousel-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/carousel-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "carousel-size",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/carousel-size.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "carousel-api-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/carousel-api-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "carousel-orientation",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/carousel-orientation.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "carousel-plugin",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/carousel-plugin.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "carousel-spacing",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/carousel-spacing.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "checkbox-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/checkbox-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "checkbox-disabled",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/checkbox-disabled.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "checkbox-with-text",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/checkbox-with-text.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "collapsible-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/collapsible-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "combobox-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/combobox-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "command-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/command-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "command-dialog",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/command-dialog.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "context-menu-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/context-menu-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "data-table-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/data-table-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "date-picker-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/date-picker-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "date-picker-with-range-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/date-picker-with-range-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "dialog-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/dialog-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "drawer-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/drawer-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "drawer-side-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/drawer-side-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "dropdown-menu-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/dropdown-menu-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "dropdown-menu-checkboxes",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/dropdown-menu-checkboxes.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "dropdown-menu-radio-group",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/dropdown-menu-radio-group.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "hover-card-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/hover-card-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "menubar-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/menubar-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "mode-toggle",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/mode-toggle.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "navigation-menu-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/navigation-menu-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "number-field-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/number-field-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "number-field-disabled-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/number-field-disabled-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "number-field-with-error-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/number-field-with-error-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "otp-field-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/otp-field-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "otp-field-with-pattern-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/otp-field-with-pattern-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "otp-field-with-controlled-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/otp-field-with-controlled-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "popover-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/popover-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "pagination-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/pagination-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "progress-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/progress-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "radio-group-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/radio-group-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "resizable-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/resizable-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "resizable-vertical-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/resizable-vertical-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "resizable-with-handle-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/resizable-with-handle-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "select-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/select-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "separator-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/separator-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "skeleton-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/skeleton-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "sonner-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/sonner-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "switch-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/switch-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "table-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/table-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "tabs-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/tabs-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "tabs-orientation-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/tabs-orientation-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textarea-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textarea-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textarea-disabled",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textarea-disabled.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textarea-with-button",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textarea-with-button.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textarea-with-label",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textarea-with-label.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textarea-with-text",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textarea-with-text.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-disabled",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-disabled.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-file",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-file.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-with-button",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-with-button.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-with-label",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-with-label.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-with-text",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-with-text.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "textfield-with-error",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/textfield-with-error.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toast-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toast-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toast-destructive",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toast-destructive.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-group-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-group-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-group-outline-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-group-outline-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-group-single-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-group-single-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-group-small-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-group-small-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-group-large-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-group-large-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-group-disabled-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-group-disabled-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-disabled",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-disabled.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-large",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-large.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-outline",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-outline.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-small",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-small.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "toggle-with-text",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/toggle-with-text.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "tooltip-demo",
-		type: "registry:example",
-		files: [
-			{
-				path: "examples/tooltip-demo.tsx",
-				type: "registry:example",
-			},
-		],
-	},
-	{
-		name: "demo-sidebar",
-		type: "registry:block",
-		files: [
-			{
-				path: "blocks/demo-sidebar.tsx",
-				type: "registry:block",
-			},
-		],
-	},
-];
+  {
+    name: "accordion-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/accordion-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "alert-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/alert-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "alert-destructive",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/alert-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "alert-dialog-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-secondary",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-destructive",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-outline",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-ghost",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-ghost.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-link",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-link.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-with-icon",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-with-icon.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-loading",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-loading.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "button-as-child",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/button-as-child.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/badge-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-secondary",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/badge-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-destructive",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/badge-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "badge-outline",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/badge-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "calendar-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/calendar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "card-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/carousel-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-size",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/carousel-size.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-api-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/carousel-api-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-orientation",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/carousel-orientation.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-plugin",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/carousel-plugin.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "carousel-spacing",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/carousel-spacing.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/checkbox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-disabled",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/checkbox-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "checkbox-with-text",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/checkbox-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "collapsible-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/collapsible-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "combobox-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/combobox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "command-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/command-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "command-dialog",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/command-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "context-menu-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/context-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "data-table-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/data-table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "date-picker-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/date-picker-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "date-picker-with-range-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/date-picker-with-range-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dialog-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "drawer-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/drawer-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "drawer-side-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/drawer-side-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu-checkboxes",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu-radio-group",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "hover-card-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/hover-card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "menubar-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/menubar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "mode-toggle",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/mode-toggle.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "navigation-menu-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "number-field-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/number-field-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "number-field-disabled-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/number-field-disabled-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "number-field-with-error-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/number-field-with-error-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "otp-field-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/otp-field-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "otp-field-with-pattern-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/otp-field-with-pattern-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "otp-field-with-controlled-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/otp-field-with-controlled-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "popover-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/popover-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "pagination-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/pagination-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "progress-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/progress-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "radio-group-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/radio-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/resizable-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-vertical-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/resizable-vertical-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "resizable-with-handle-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/resizable-with-handle-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "select-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/select-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "separator-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/separator-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "skeleton-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/skeleton-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "sonner-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/sonner-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "switch-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/switch-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "table-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "tabs-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/tabs-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "tabs-orientation-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/tabs-orientation-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textarea-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-disabled",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textarea-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-with-button",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textarea-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-with-label",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textarea-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textarea-with-text",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textarea-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-disabled",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-file",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-file.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-with-button",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-with-label",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-with-text",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "textfield-with-error",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/textfield-with-error.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toast-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toast-destructive",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toast-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-outline-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-group-outline-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-single-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-group-single-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-small-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-group-small-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-large-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-group-large-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-group-disabled-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-group-disabled-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-disabled",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-large",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-large.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-outline",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-outline.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-small",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-small.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "toggle-with-text",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/toggle-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "tooltip-demo",
+    type: "registry:example",
+    files: [
+      {
+        path: "examples/tooltip-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "demo-sidebar",
+    type: "registry:block",
+    files: [
+      {
+        path: "blocks/demo-sidebar.tsx",
+        type: "registry:block",
+      },
+    ],
+  },
+]
diff --git a/docs/src/registry/frameworks.ts b/docs/src/registry/frameworks.ts
index 94178857..ee6cd8fa 100644
--- a/docs/src/registry/frameworks.ts
+++ b/docs/src/registry/frameworks.ts
@@ -1,12 +1,12 @@
 export const frameworks = [
-	{
-		name: "tailwindcss",
-		label: "TailwindCSS",
-	},
-	{
-		name: "unocss",
-		label: "UnoCSS",
-	},
-];
+  {
+    name: "tailwindcss",
+    label: "TailwindCSS",
+  },
+  {
+    name: "unocss",
+    label: "UnoCSS",
+  },
+]
 
-export type Framework = (typeof frameworks)[number];
+export type Framework = (typeof frameworks)[number]
diff --git a/docs/src/registry/hooks.ts b/docs/src/registry/hooks.ts
index f0cb092a..6b560009 100644
--- a/docs/src/registry/hooks.ts
+++ b/docs/src/registry/hooks.ts
@@ -1,14 +1,14 @@
-import type { Registry } from "./schema";
+import type { Registry } from "./schema"
 
 export const hooks: Registry = [
-	{
-		name: "use-mobile",
-		type: "registry:hook",
-		files: [
-			{
-				path: "hooks/use-mobile.tsx",
-				type: "registry:hook",
-			},
-		],
-	},
-];
+  {
+    name: "use-mobile",
+    type: "registry:hook",
+    files: [
+      {
+        path: "hooks/use-mobile.tsx",
+        type: "registry:hook",
+      },
+    ],
+  },
+]
diff --git a/docs/src/registry/index.ts b/docs/src/registry/index.ts
index fed7dfd8..858b2cc0 100644
--- a/docs/src/registry/index.ts
+++ b/docs/src/registry/index.ts
@@ -1,16 +1,16 @@
-import { blocks } from "./blocks";
-import { charts } from "./charts";
-import { examples } from "./examples";
-import { hooks } from "./hooks";
-import { libs } from "./libs";
-import type { Registry } from "./schema";
-import { ui } from "./ui";
+import { blocks } from "./blocks"
+import { charts } from "./charts"
+import { examples } from "./examples"
+import { hooks } from "./hooks"
+import { libs } from "./libs"
+import type { Registry } from "./schema"
+import { ui } from "./ui"
 
 export const registry: Registry = [
-	...ui,
-	...examples,
-	...libs,
-	...hooks,
-	...blocks,
-	...charts,
-];
+  ...ui,
+  ...examples,
+  ...libs,
+  ...hooks,
+  ...blocks,
+  ...charts,
+]
diff --git a/docs/src/registry/libs.ts b/docs/src/registry/libs.ts
index b67e1745..6e838854 100644
--- a/docs/src/registry/libs.ts
+++ b/docs/src/registry/libs.ts
@@ -1,35 +1,35 @@
-import type { Registry } from "./schema";
+import type { Registry } from "./schema"
 
 export const libs: Registry = [
-	{
-		name: "cn",
-		type: "registry:libs",
-		dependencies: ["clsx", "tailwind-merge"],
-		files: [
-			{
-				path: "libs/cn.ts",
-				type: "registry:libs",
-			},
-		],
-	},
-	{
-		name: "call-handler",
-		type: "registry:libs",
-		files: [
-			{
-				path: "libs/call-handler.ts",
-				type: "registry:libs",
-			},
-		],
-	},
-	{
-		name: "combine-props",
-		type: "registry:libs",
-		files: [
-			{
-				path: "libs/combine-props.ts",
-				type: "registry:libs",
-			},
-		],
-	},
-];
+  {
+    name: "cn",
+    type: "registry:libs",
+    dependencies: ["clsx", "tailwind-merge"],
+    files: [
+      {
+        path: "libs/cn.ts",
+        type: "registry:libs",
+      },
+    ],
+  },
+  {
+    name: "call-handler",
+    type: "registry:libs",
+    files: [
+      {
+        path: "libs/call-handler.ts",
+        type: "registry:libs",
+      },
+    ],
+  },
+  {
+    name: "combine-props",
+    type: "registry:libs",
+    files: [
+      {
+        path: "libs/combine-props.ts",
+        type: "registry:libs",
+      },
+    ],
+  },
+]
diff --git a/docs/src/registry/schema.ts b/docs/src/registry/schema.ts
index ae21be8c..7dbe2227 100644
--- a/docs/src/registry/schema.ts
+++ b/docs/src/registry/schema.ts
@@ -1,97 +1,97 @@
-import * as v from "valibot";
+import * as v from "valibot"
 
 export const blockChunkSchema = v.object({
-	name: v.string(),
-	description: v.string(),
-	component: v.any(),
-	file: v.string(),
-	code: v.optional(v.string()),
-	container: v.optional(
-		v.object({
-			className: v.nullish(v.string()),
-		}),
-	),
-});
+  name: v.string(),
+  description: v.string(),
+  component: v.any(),
+  file: v.string(),
+  code: v.optional(v.string()),
+  container: v.optional(
+    v.object({
+      className: v.nullish(v.string()),
+    })
+  ),
+})
 
 export const TypeSchema = [
-	"registry:style",
-	"registry:libs",
-	"registry:example",
-	"registry:block",
-	"registry:component",
-	"registry:ui",
-	"registry:hook",
-	"registry:theme",
-	"registry:page",
-] as const;
+  "registry:style",
+  "registry:libs",
+  "registry:example",
+  "registry:block",
+  "registry:component",
+  "registry:ui",
+  "registry:hook",
+  "registry:theme",
+  "registry:page",
+] as const
 
-export const registryItemTypeSchema = v.picklist(TypeSchema);
+export const registryItemTypeSchema = v.picklist(TypeSchema)
 
 export const registryItemFileSchema = v.object({
-	path: v.string(),
-	content: v.optional(v.string()),
-	type: registryItemTypeSchema,
-	target: v.optional(v.string()),
-});
+  path: v.string(),
+  content: v.optional(v.string()),
+  type: registryItemTypeSchema,
+  target: v.optional(v.string()),
+})
 
 export const registryItemTailwindSchema = v.object({
-	config: v.object({
-		content: v.optional(v.array(v.string())),
-		theme: v.optional(v.record(v.string(), v.any())),
-		plugins: v.optional(v.array(v.string())),
-	}),
-});
+  config: v.object({
+    content: v.optional(v.array(v.string())),
+    theme: v.optional(v.record(v.string(), v.any())),
+    plugins: v.optional(v.array(v.string())),
+  }),
+})
 
 export const registryItemCssVarsSchema = v.object({
-	light: v.optional(v.record(v.string(), v.string())),
-	dark: v.optional(v.record(v.string(), v.string())),
-});
+  light: v.optional(v.record(v.string(), v.string())),
+  dark: v.optional(v.record(v.string(), v.string())),
+})
 
 export const registryItemSchema = v.object({
-	name: v.string(),
-	type: registryItemTypeSchema,
-	description: v.optional(v.string()),
-	dependencies: v.optional(v.array(v.string())),
-	devDependencies: v.optional(v.array(v.string())),
-	registryDependencies: v.optional(v.array(v.string())),
-	files: v.optional(v.array(registryItemFileSchema)),
-	tailwind: v.optional(registryItemTailwindSchema),
-	uno: v.optional(registryItemTailwindSchema),
-	cssVars: v.optional(registryItemCssVarsSchema),
-	meta: v.optional(v.record(v.string(), v.any())),
-	docs: v.optional(v.string()),
-});
+  name: v.string(),
+  type: registryItemTypeSchema,
+  description: v.optional(v.string()),
+  dependencies: v.optional(v.array(v.string())),
+  devDependencies: v.optional(v.array(v.string())),
+  registryDependencies: v.optional(v.array(v.string())),
+  files: v.optional(v.array(registryItemFileSchema)),
+  tailwind: v.optional(registryItemTailwindSchema),
+  uno: v.optional(registryItemTailwindSchema),
+  cssVars: v.optional(registryItemCssVarsSchema),
+  meta: v.optional(v.record(v.string(), v.any())),
+  docs: v.optional(v.string()),
+})
 
 export const registryEntrySchema = v.object({
-	...registryItemSchema.entries,
-	...v.object({
-		category: v.optional(v.string()),
-		subcategory: v.optional(v.string()),
-	}).entries,
-});
+  ...registryItemSchema.entries,
+  ...v.object({
+    category: v.optional(v.string()),
+    subcategory: v.optional(v.string()),
+  }).entries,
+})
 
-export const registrySchema = v.array(registryEntrySchema);
+export const registrySchema = v.array(registryEntrySchema)
 
-export type RegistryEntry = v.InferInput<typeof registryEntrySchema>;
+export type RegistryEntry = v.InferInput<typeof registryEntrySchema>
 
-export type Registry = v.InferInput<typeof registrySchema>;
+export type Registry = v.InferInput<typeof registrySchema>
 
 export const blockSchema = v.object({
-	...registryEntrySchema.entries,
-	...v.object({
-		type: v.literal("registry:block"),
-		component: v.any(),
-		container: v.optional(
-			v.object({
-				height: v.nullish(v.string()),
-				className: v.nullish(v.string()),
-			}),
-		),
-		code: v.string(),
-		highlightedCode: v.string(),
-	}).entries,
-});
+  ...registryEntrySchema.entries,
+  ...v.object({
+    type: v.literal("registry:block"),
+    component: v.any(),
+    container: v.optional(
+      v.object({
+        height: v.nullish(v.string()),
+        className: v.nullish(v.string()),
+      })
+    ),
+    code: v.string(),
+    highlightedCode: v.string(),
+  }).entries,
+})
 
-export type Block = v.InferInput<typeof blockSchema>;
+export type Block = v.InferInput<typeof blockSchema>
 
-export type BlockChunk = v.InferInput<typeof blockChunkSchema>;
+export type BlockChunk = v.InferInput<typeof blockChunkSchema>
diff --git a/docs/src/registry/tailwindcss/blocks/demo-sidebar.tsx b/docs/src/registry/tailwindcss/blocks/demo-sidebar.tsx
index 16bc9d03..aae50268 100644
--- a/docs/src/registry/tailwindcss/blocks/demo-sidebar.tsx
+++ b/docs/src/registry/tailwindcss/blocks/demo-sidebar.tsx
@@ -1,163 +1,164 @@
-import { For } from "solid-js";
+import { For } from "solid-js"
+
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarInset,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarProvider,
-	SidebarTrigger,
-} from "../ui/sidebar";
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "../ui/sidebar"
 
 const items = [
-	{
-		title: "Home",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
-					<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Inbox",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M22 12h-6l-2 3h-4l-2-3H2" />
-					<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Calendar",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M8 2v4m8-4v4" />
-					<rect width="18" height="18" x="3" y="4" rx="2" />
-					<path d="M3 10h18" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Search",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<circle cx="11" cy="11" r="8" />
-					<path d="m21 21l-4.3-4.3" />
-				</g>
-			</svg>
-		),
-	},
-	{
-		title: "Settings",
-		url: "#",
-		icon: () => (
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" />
-					<circle cx="12" cy="12" r="3" />
-				</g>
-			</svg>
-		),
-	},
-];
+  {
+    title: "Home",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+          <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+          <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M8 2v4m8-4v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21l-4.3-4.3" />
+        </g>
+      </svg>
+    ),
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" />
+          <circle cx="12" cy="12" r="3" />
+        </g>
+      </svg>
+    ),
+  },
+]
 
 const AppSidebar = () => {
-	return (
-		<SidebarProvider>
-			<Sidebar>
-				<SidebarContent>
-					<SidebarGroup>
-						<SidebarGroupLabel>Application</SidebarGroupLabel>
-						<SidebarGroupContent>
-							<SidebarMenu>
-								<For each={items}>
-									{(item) => (
-										<SidebarMenuItem>
-											<SidebarMenuButton as="a" href={item.url}>
-												<item.icon />
-												<span>{item.title}</span>
-											</SidebarMenuButton>
-										</SidebarMenuItem>
-									)}
-								</For>
-							</SidebarMenu>
-						</SidebarGroupContent>
-					</SidebarGroup>
-				</SidebarContent>
-			</Sidebar>
-			<SidebarInset>
-				<header class="flex items-center justify-between px-4 h-12">
-					<SidebarTrigger />
-				</header>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Application</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <For each={items}>
+                  {(item) => (
+                    <SidebarMenuItem>
+                      <SidebarMenuButton as="a" href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  )}
+                </For>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <header class="flex h-12 items-center justify-between px-4">
+          <SidebarTrigger />
+        </header>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar.tsx
index 45fa2cbd..9078e5be 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar.tsx
@@ -1,324 +1,325 @@
-import NavMain from "@/registry/tailwindcss/blocks/sidebar-01/components/nav-main";
-import NavProjects from "@/registry/tailwindcss/blocks/sidebar-01/components/nav-projects";
-import NavUser from "@/registry/tailwindcss/blocks/sidebar-01/components/nav-user";
-import TeamSwitcher from "@/registry/tailwindcss/blocks/sidebar-01/components/team-switcher";
+import type { ComponentProps } from "solid-js"
+
+import NavMain from "@/registry/tailwindcss/blocks/sidebar-01/components/nav-main"
+import NavProjects from "@/registry/tailwindcss/blocks/sidebar-01/components/nav-projects"
+import NavUser from "@/registry/tailwindcss/blocks/sidebar-01/components/nav-user"
+import TeamSwitcher from "@/registry/tailwindcss/blocks/sidebar-01/components/team-switcher"
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarFooter,
-	SidebarHeader,
-	SidebarRail,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { ComponentProps } from "solid-js";
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 // This is sample data.
 const data = {
-	user: {
-		name: "shadcn",
-		email: "m@example.com",
-		avatar: "/avatars/shadcn.jpg",
-	},
-	teams: [
-		{
-			name: "Acme Inc",
-			logo: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4 shrink-0"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M7 2h10M5 6h14" />
-						<rect width="18" height="12" x="3" y="10" rx="2" />
-					</g>
-				</svg>
-			),
-			plan: "Enterprise",
-		},
-		{
-			name: "Acme Corp.",
-			logo: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4 shrink-0"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2"
-					/>
-				</svg>
-			),
-			plan: "Startup",
-		},
-		{
-			name: "Evil Corp.",
-			logo: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4 shrink-0"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
-					/>
-				</svg>
-			),
-			plan: "Free",
-		},
-	],
-	navMain: [
-		{
-			title: "Playground",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="m7 11l2-2l-2-2m4 6h4" />
-						<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-					</g>
-				</svg>
-			),
-			isActive: true,
-			items: [
-				{
-					title: "History",
-					url: "#",
-				},
-				{
-					title: "Starred",
-					url: "#",
-				},
-				{
-					title: "Settings",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Models",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M12 8V4H8" />
-						<rect width="16" height="12" x="4" y="8" rx="2" />
-						<path d="M2 14h2m16 0h2m-7-1v2m-6-2v2" />
-					</g>
-				</svg>
-			),
-			items: [
-				{
-					title: "Genesis",
-					url: "#",
-				},
-				{
-					title: "Explorer",
-					url: "#",
-				},
-				{
-					title: "Quantum",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Documentation",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z"
-					/>
-				</svg>
-			),
-			items: [
-				{
-					title: "Introduction",
-					url: "#",
-				},
-				{
-					title: "Get Started",
-					url: "#",
-				},
-				{
-					title: "Tutorials",
-					url: "#",
-				},
-				{
-					title: "Changelog",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Settings",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M20 7h-9m3 10H5" />
-						<circle cx="17" cy="17" r="3" />
-						<circle cx="7" cy="7" r="3" />
-					</g>
-				</svg>
-			),
-			items: [
-				{
-					title: "General",
-					url: "#",
-				},
-				{
-					title: "Team",
-					url: "#",
-				},
-				{
-					title: "Billing",
-					url: "#",
-				},
-				{
-					title: "Limits",
-					url: "#",
-				},
-			],
-		},
-	],
-	projects: [
-		{
-			name: "Design Engineering",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M22 6H2m20 12H2M6 2v20M18 2v20"
-					/>
-				</svg>
-			),
-		},
-		{
-			name: "Sales & Marketing",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
-						<path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
-					</g>
-				</svg>
-			),
-		},
-		{
-			name: "Travel",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
-					/>
-				</svg>
-			),
-		},
-	],
-};
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4 shrink-0"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M7 2h10M5 6h14" />
+            <rect width="18" height="12" x="3" y="10" rx="2" />
+          </g>
+        </svg>
+      ),
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4 shrink-0"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2"
+          />
+        </svg>
+      ),
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4 shrink-0"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+          />
+        </svg>
+      ),
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="m7 11l2-2l-2-2m4 6h4" />
+            <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          </g>
+        </svg>
+      ),
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M12 8V4H8" />
+            <rect width="16" height="12" x="4" y="8" rx="2" />
+            <path d="M2 14h2m16 0h2m-7-1v2m-6-2v2" />
+          </g>
+        </svg>
+      ),
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z"
+          />
+        </svg>
+      ),
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M20 7h-9m3 10H5" />
+            <circle cx="17" cy="17" r="3" />
+            <circle cx="7" cy="7" r="3" />
+          </g>
+        </svg>
+      ),
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M22 6H2m20 12H2M6 2v20M18 2v20"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
+            <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
+          </g>
+        </svg>
+      ),
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
+          />
+        </svg>
+      ),
+    },
+  ],
+}
 
 const AppSidebar = (props: ComponentProps<typeof Sidebar>) => {
-	return (
-		<Sidebar collapsible="icon" {...props}>
-			<SidebarHeader>
-				<TeamSwitcher teams={data.teams} />
-			</SidebarHeader>
-			<SidebarContent>
-				<NavMain items={data.navMain} />
-				<NavProjects projects={data.projects} />
-			</SidebarContent>
-			<SidebarFooter>
-				<NavUser user={data.user} />
-			</SidebarFooter>
-			<SidebarRail />
-		</Sidebar>
-	);
-};
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-main.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-main.tsx
index 447da214..ec46a7ac 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-main.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-main.tsx
@@ -1,94 +1,95 @@
+import { For, Show, type Accessor, type JSX } from "solid-js"
+import type {
+  CollapsibleRootProps,
+  CollapsibleTriggerProps,
+} from "@kobalte/core/collapsible"
+
 import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/registry/tailwindcss/ui/collapsible";
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/tailwindcss/ui/collapsible"
 import {
-	SidebarGroup,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSub,
-	SidebarMenuSubButton,
-	SidebarMenuSubItem,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type {
-	CollapsibleRootProps,
-	CollapsibleTriggerProps,
-} from "@kobalte/core/collapsible";
-import { type Accessor, For, type JSX, Show } from "solid-js";
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavMain = (props: {
-	items: {
-		title: string;
-		url: string;
-		icon?: Accessor<JSX.Element>;
-		isActive?: boolean;
-		items?: {
-			title: string;
-			url: string;
-		}[];
-	}[];
+  items: {
+    title: string
+    url: string
+    icon?: Accessor<JSX.Element>
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
 }) => {
-	return (
-		<SidebarGroup>
-			<SidebarGroupLabel>Platform</SidebarGroupLabel>
-			<SidebarMenu>
-				<For each={props.items}>
-					{(item) => (
-						<Collapsible
-							defaultOpen={item.isActive}
-							as={(props: CollapsibleRootProps) => (
-								<SidebarMenuItem {...props}>
-									<CollapsibleTrigger
-										as={(props: CollapsibleTriggerProps) => (
-											// @ts-expect-error
-											<SidebarMenuButton
-												{...props}
-												tooltip={item.title}
-												class="[&>svg:last-of-type]:data-[expanded]:rotate-90"
-											>
-												<Show when={item.icon!()}>{item.icon!()}</Show>
-												<span>{item.title}</span>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="ml-auto transition-transform duration-200"
-													viewBox="0 0 24 24"
-												>
-													<path
-														fill="none"
-														stroke="currentColor"
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="m9 18l6-6l-6-6"
-													/>
-												</svg>
-											</SidebarMenuButton>
-										)}
-									/>
-									<CollapsibleContent>
-										<SidebarMenuSub>
-											<For each={item.items}>
-												{(subItem) => (
-													<SidebarMenuSubItem>
-														<SidebarMenuSubButton as="a" href={subItem.url}>
-															<span>{subItem.title}</span>
-														</SidebarMenuSubButton>
-													</SidebarMenuSubItem>
-												)}
-											</For>
-										</SidebarMenuSub>
-									</CollapsibleContent>
-								</SidebarMenuItem>
-							)}
-						/>
-					)}
-				</For>
-			</SidebarMenu>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={props.items}>
+          {(item) => (
+            <Collapsible
+              defaultOpen={item.isActive}
+              as={(props: CollapsibleRootProps) => (
+                <SidebarMenuItem {...props}>
+                  <CollapsibleTrigger
+                    as={(props: CollapsibleTriggerProps) => (
+                      // @ts-expect-error
+                      <SidebarMenuButton
+                        {...props}
+                        tooltip={item.title}
+                        class="[&>svg:last-of-type]:data-[expanded]:rotate-90"
+                      >
+                        <Show when={item.icon!()}>{item.icon!()}</Show>
+                        <span>{item.title}</span>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="ml-auto transition-transform duration-200"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="m9 18l6-6l-6-6"
+                          />
+                        </svg>
+                      </SidebarMenuButton>
+                    )}
+                  />
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      <For each={item.items}>
+                        {(subItem) => (
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton as="a" href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        )}
+                      </For>
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              )}
+            />
+          )}
+        </For>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
 
-export default NavMain;
+export default NavMain
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-projects.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-projects.tsx
index bdb0641b..c5c6dbc5 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-projects.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-projects.tsx
@@ -1,155 +1,156 @@
+import { For, type Accessor, type JSX } from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 import {
-	SidebarGroup,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuAction,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { type Accessor, For, type JSX } from "solid-js";
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavProjects = (props: {
-	projects: {
-		name: string;
-		url: string;
-		icon: Accessor<JSX.Element>;
-	}[];
+  projects: {
+    name: string
+    url: string
+    icon: Accessor<JSX.Element>
+  }[]
 }) => {
-	const { isMobile } = useSideBar();
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarGroup class="group-data-[collapsible=icon]:hidden">
-			<SidebarGroupLabel>Projects</SidebarGroupLabel>
-			<SidebarMenu>
-				<For each={props.projects}>
-					{(item) => (
-						<SidebarMenuItem>
-							<SidebarMenuButton as="a" href={item.url}>
-								<item.icon />
-								<span>{item.name}</span>
-							</SidebarMenuButton>
-							<DropdownMenu
-								placement={isMobile() ? "bottom-end" : "right-start"}
-							>
-								<DropdownMenuTrigger
-									as={(props: DropdownMenuTriggerProps) => (
-										// @ts-expect-error
-										<SidebarMenuAction {...props} showOnHover>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="size-4"
-												viewBox="0 0 24 24"
-											>
-												<g
-													fill="none"
-													stroke="currentColor"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-												>
-													<circle cx="12" cy="12" r="1" />
-													<circle cx="19" cy="12" r="1" />
-													<circle cx="5" cy="12" r="1" />
-												</g>
-											</svg>
-											<span class="sr-only">More</span>
-										</SidebarMenuAction>
-									)}
-								/>
-								<DropdownMenuContent class="w-48 rounded-lg">
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
-											/>
-										</svg>
-										<span>View Project</span>
-									</DropdownMenuItem>
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<g
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-											>
-												<path d="m15 17l5-5l-5-5" />
-												<path d="M4 18v-2a4 4 0 0 1 4-4h12" />
-											</g>
-										</svg>
-										<span>Share Project</span>
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
-											/>
-										</svg>
-										<span>Delete Project</span>
-									</DropdownMenuItem>
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</SidebarMenuItem>
-					)}
-				</For>
-				<SidebarMenuItem>
-					<SidebarMenuButton class="text-sidebar-foreground/70">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-sidebar-foreground/70 size-4"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<circle cx="12" cy="12" r="1" />
-								<circle cx="19" cy="12" r="1" />
-								<circle cx="5" cy="12" r="1" />
-							</g>
-						</svg>
-						<span>More</span>
-					</SidebarMenuButton>
-				</SidebarMenuItem>
-			</SidebarMenu>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={props.projects}>
+          {(item) => (
+            <SidebarMenuItem>
+              <SidebarMenuButton as="a" href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </SidebarMenuButton>
+              <DropdownMenu
+                placement={isMobile() ? "bottom-end" : "right-start"}
+              >
+                <DropdownMenuTrigger
+                  as={(props: DropdownMenuTriggerProps) => (
+                    // @ts-expect-error
+                    <SidebarMenuAction {...props} showOnHover>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                        >
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="19" cy="12" r="1" />
+                          <circle cx="5" cy="12" r="1" />
+                        </g>
+                      </svg>
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  )}
+                />
+                <DropdownMenuContent class="w-48 rounded-lg">
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+                      />
+                    </svg>
+                    <span>View Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      >
+                        <path d="m15 17l5-5l-5-5" />
+                        <path d="M4 18v-2a4 4 0 0 1 4-4h12" />
+                      </g>
+                    </svg>
+                    <span>Share Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
+                      />
+                    </svg>
+                    <span>Delete Project</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          )}
+        </For>
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-sidebar-foreground/70 size-4"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="19" cy="12" r="1" />
+                <circle cx="5" cy="12" r="1" />
+              </g>
+            </svg>
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
 
-export default NavProjects;
+export default NavProjects
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-user.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-user.tsx
index 5a8bf96f..9cdaf266 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-user.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/nav-user.tsx
@@ -1,197 +1,198 @@
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+import { Image } from "@kobalte/core/image"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 import {
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { Image } from "@kobalte/core/image";
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavUser = (props: {
-	user: {
-		name: string;
-		email: string;
-		avatar: string;
-	};
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
 }) => {
-	const { isMobile } = useSideBar();
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu placement={isMobile() ? "bottom-end" : "right-end"}>
-					<DropdownMenuTrigger
-						as={(triggerProps: DropdownMenuTriggerProps) => (
-							// @ts-expect-error
-							<SidebarMenuButton
-								{...triggerProps}
-								size="lg"
-								class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
-							>
-								<Image class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
-									<Image.Img
-										class="aspect-square h-full w-full"
-										src={props.user.avatar}
-										alt={props.user.name}
-									/>
-									<Image.Fallback class="flex h-full w-full items-center justify-center bg-muted rounded-lg">
-										CN
-									</Image.Fallback>
-								</Image>
-								<div class="grid flex-1 text-left text-sm leading-tight">
-									<span class="truncate font-semibold">{props.user.name}</span>
-									<span class="truncate text-xs">{props.user.email}</span>
-								</div>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="ml-auto size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="m7 15l5 5l5-5M7 9l5-5l5 5"
-									/>
-								</svg>
-							</SidebarMenuButton>
-						)}
-					/>
-					<DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
-						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel class="p-0 font-normal">
-								<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-									<Image class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
-										<Image.Img
-											class="aspect-square h-full w-full"
-											src={props.user.avatar}
-											alt={props.user.name}
-										/>
-										<Image.Fallback class="flex h-full w-full items-center justify-center bg-muted rounded-lg">
-											CN
-										</Image.Fallback>
-									</Image>
-									<div class="grid flex-1 text-left text-sm leading-tight">
-										<span class="truncate font-semibold">
-											{props.user.name}
-										</span>
-										<span class="truncate text-xs">{props.user.email}</span>
-									</div>
-								</div>
-							</DropdownMenuGroupLabel>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
-									/>
-								</svg>
-								Upgrade to Pro
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76" />
-										<path d="m9 12l2 2l4-4" />
-									</g>
-								</svg>
-								Account
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<rect width="20" height="14" x="2" y="5" rx="2" />
-										<path d="M2 10h20" />
-									</g>
-								</svg>
-								Billing
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0"
-									/>
-								</svg>
-								Notifications
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"
-								/>
-							</svg>
-							Log out
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu placement={isMobile() ? "bottom-end" : "right-end"}>
+          <DropdownMenuTrigger
+            as={(triggerProps: DropdownMenuTriggerProps) => (
+              // @ts-expect-error
+              <SidebarMenuButton
+                {...triggerProps}
+                size="lg"
+                class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
+              >
+                <Image class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                  <Image.Img
+                    class="aspect-square h-full w-full"
+                    src={props.user.avatar}
+                    alt={props.user.name}
+                  />
+                  <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-lg">
+                    CN
+                  </Image.Fallback>
+                </Image>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{props.user.name}</span>
+                  <span class="truncate text-xs">{props.user.email}</span>
+                </div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ml-auto size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m7 15l5 5l5-5M7 9l5-5l5 5"
+                  />
+                </svg>
+              </SidebarMenuButton>
+            )}
+          />
+          <DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
+            <DropdownMenuGroup>
+              <DropdownMenuGroupLabel class="p-0 font-normal">
+                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Image class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                    <Image.Img
+                      class="aspect-square h-full w-full"
+                      src={props.user.avatar}
+                      alt={props.user.name}
+                    />
+                    <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-lg">
+                      CN
+                    </Image.Fallback>
+                  </Image>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">
+                      {props.user.name}
+                    </span>
+                    <span class="truncate text-xs">{props.user.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuGroupLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
+                  />
+                </svg>
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76" />
+                    <path d="m9 12l2 2l4-4" />
+                  </g>
+                </svg>
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <rect width="20" height="14" x="2" y="5" rx="2" />
+                    <path d="M2 10h20" />
+                  </g>
+                </svg>
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0"
+                  />
+                </svg>
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"
+                />
+              </svg>
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
 
-export default NavUser;
+export default NavUser
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/team-switcher.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/team-switcher.tsx
index c74a5745..b5952b9b 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-01/components/team-switcher.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-01/components/team-switcher.tsx
@@ -1,118 +1,120 @@
+import { For, createSignal, type Accessor, type JSX } from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 import {
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { type Accessor, For, type JSX, createSignal } from "solid-js";
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const TeamSwitcher = (props: {
-	teams: {
-		name: string;
-		logo: Accessor<JSX.Element>;
-		plan: string;
-	}[];
+  teams: {
+    name: string
+    logo: Accessor<JSX.Element>
+    plan: string
+  }[]
 }) => {
-	const [activeTeam, setActiveTeam] = createSignal(props.teams[0]);
-	const { isMobile } = useSideBar();
+  // eslint-disable-next-line solid/reactivity
+  const [activeTeam, setActiveTeam] = createSignal(props.teams[0])
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu
-					placement={isMobile() ? "bottom-end" : "right-start"}
-					sameWidth
-				>
-					<DropdownMenuTrigger
-						as={(props: DropdownMenuTriggerProps) => (
-							// @ts-expect-error
-							<SidebarMenuButton
-								{...props}
-								size="lg"
-								class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
-							>
-								<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-									{activeTeam().logo()}
-								</div>
-								<div class="grid flex-1 text-left text-sm leading-tight">
-									<span class="truncate font-semibold">
-										{activeTeam().name}
-									</span>
-									<span class="truncate text-xs">{activeTeam().plan}</span>
-								</div>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="ml-auto size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="m7 15l5 5l5-5M7 9l5-5l5 5"
-									/>
-								</svg>
-							</SidebarMenuButton>
-						)}
-					/>
-					<DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
-						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel class="text-xs text-muted-foreground">
-								Teams
-							</DropdownMenuGroupLabel>
-							<For each={props.teams}>
-								{(team, index) => (
-									<DropdownMenuItem
-										onClick={() => setActiveTeam(team)}
-										class="gap-2 p-2"
-									>
-										<div class="flex size-6 items-center justify-center rounded-sm border">
-											{team.logo()}
-										</div>
-										{team.name}
-										<DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
-									</DropdownMenuItem>
-								)}
-							</For>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem class="gap-2 p-2">
-							<div class="flex size-6 items-center justify-center rounded-md border bg-background">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 12h14m-7-7v14"
-									/>
-								</svg>
-							</div>
-							<div class="font-medium text-muted-foreground">Add team</div>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu
+          placement={isMobile() ? "bottom-end" : "right-start"}
+          sameWidth
+        >
+          <DropdownMenuTrigger
+            as={(props: DropdownMenuTriggerProps) => (
+              // @ts-expect-error
+              <SidebarMenuButton
+                {...props}
+                size="lg"
+                class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
+              >
+                <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  {activeTeam().logo()}
+                </div>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">
+                    {activeTeam().name}
+                  </span>
+                  <span class="truncate text-xs">{activeTeam().plan}</span>
+                </div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ml-auto size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m7 15l5 5l5-5M7 9l5-5l5 5"
+                  />
+                </svg>
+              </SidebarMenuButton>
+            )}
+          />
+          <DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
+            <DropdownMenuGroup>
+              <DropdownMenuGroupLabel class="text-muted-foreground text-xs">
+                Teams
+              </DropdownMenuGroupLabel>
+              <For each={props.teams}>
+                {(team, index) => (
+                  <DropdownMenuItem
+                    onClick={() => setActiveTeam(team)}
+                    class="gap-2 p-2"
+                  >
+                    <div class="flex size-6 items-center justify-center rounded-sm border">
+                      {team.logo()}
+                    </div>
+                    {team.name}
+                    <DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                )}
+              </For>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem class="gap-2 p-2">
+              <div class="bg-background flex size-6 items-center justify-center rounded-md border">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 12h14m-7-7v14"
+                  />
+                </svg>
+              </div>
+              <div class="text-muted-foreground font-medium">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
 
-export default TeamSwitcher;
+export default TeamSwitcher
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-01/index.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-01/index.tsx
index 7f4b876a..1be712e2 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-01/index.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-01/index.tsx
@@ -1,33 +1,33 @@
-import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-01/components/app-sidebar"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/registry/tailwindcss/ui/sidebar";
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const Page = () => {
-	return (
-		<SidebarProvider>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-					<div class="flex items-center gap-2 px-4">
-						<SidebarTrigger class="-ml-1" />
-						<Separator orientation="vertical" class="mr-2 h-4" />
-					</div>
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-					</div>
-					<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div class="flex items-center gap-2 px-4">
+            <SidebarTrigger class="-ml-1" />
+            <Separator orientation="vertical" class="mr-2 h-4" />
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar.tsx
index a1b473d8..51183584 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar.tsx
@@ -1,225 +1,226 @@
+import { For, Show, type ComponentProps } from "solid-js"
+
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarHeader,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSub,
-	SidebarMenuSubButton,
-	SidebarMenuSubItem,
-} from "@/registry/tailwindcss/ui/sidebar";
-import { type ComponentProps, For, Show } from "solid-js";
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 // This is sample data.
 const data = {
-	navMain: [
-		{
-			title: "Getting Started",
-			url: "#",
-			items: [
-				{
-					title: "Installation",
-					url: "#",
-				},
-				{
-					title: "Project Structure",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Building Your Application",
-			url: "#",
-			items: [
-				{
-					title: "Routing",
-					url: "#",
-				},
-				{
-					title: "Data Fetching",
-					url: "#",
-					isActive: true,
-				},
-				{
-					title: "Rendering",
-					url: "#",
-				},
-				{
-					title: "Caching",
-					url: "#",
-				},
-				{
-					title: "Styling",
-					url: "#",
-				},
-				{
-					title: "Optimizing",
-					url: "#",
-				},
-				{
-					title: "Configuring",
-					url: "#",
-				},
-				{
-					title: "Testing",
-					url: "#",
-				},
-				{
-					title: "Authentication",
-					url: "#",
-				},
-				{
-					title: "Deploying",
-					url: "#",
-				},
-				{
-					title: "Upgrading",
-					url: "#",
-				},
-				{
-					title: "Examples",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "API Reference",
-			url: "#",
-			items: [
-				{
-					title: "Components",
-					url: "#",
-				},
-				{
-					title: "File Conventions",
-					url: "#",
-				},
-				{
-					title: "Functions",
-					url: "#",
-				},
-				{
-					title: "next.config.js Options",
-					url: "#",
-				},
-				{
-					title: "CLI",
-					url: "#",
-				},
-				{
-					title: "Edge Runtime",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Architecture",
-			url: "#",
-			items: [
-				{
-					title: "Accessibility",
-					url: "#",
-				},
-				{
-					title: "Fast Refresh",
-					url: "#",
-				},
-				{
-					title: "Next.js Compiler",
-					url: "#",
-				},
-				{
-					title: "Supported Browsers",
-					url: "#",
-				},
-				{
-					title: "Turbopack",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Community",
-			url: "#",
-			items: [
-				{
-					title: "Contribution Guide",
-					url: "#",
-				},
-			],
-		},
-	],
-};
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
 
 const AppSidebar = (props: ComponentProps<typeof Sidebar>) => {
-	return (
-		<Sidebar variant="floating" {...props}>
-			<SidebarHeader>
-				<SidebarMenu>
-					<SidebarMenuItem>
-						<SidebarMenuButton size="lg" as="a" href="#">
-							<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<path d="M7 2h10M5 6h14" />
-										<rect width="18" height="12" x="3" y="10" rx="2" />
-									</g>
-								</svg>
-							</div>
-							<div class="flex flex-col gap-0.5 leading-none">
-								<span class="font-semibold">Documentation</span>
-								<span class="">v1.0.0</span>
-							</div>
-						</SidebarMenuButton>
-					</SidebarMenuItem>
-				</SidebarMenu>
-			</SidebarHeader>
-			<SidebarContent>
-				<SidebarGroup>
-					<SidebarMenu class="gap-2">
-						<For each={data.navMain}>
-							{(item) => (
-								<>
-									<SidebarMenuButton as="a" href={item.url} class="font-medium">
-										{item.title}
-									</SidebarMenuButton>
-									<Show when={item.items.length}>
-										<SidebarMenuSub class="ml-0 border-l-0 px-1.5">
-											<For each={item.items}>
-												{(item) => (
-													<SidebarMenuSubItem>
-														<SidebarMenuSubButton
-															isActive={item.isActive}
-															as="a"
-															href={item.url}
-														>
-															{item.title}
-														</SidebarMenuSubButton>
-													</SidebarMenuSubItem>
-												)}
-											</For>
-										</SidebarMenuSub>
-									</Show>
-								</>
-							)}
-						</For>
-					</SidebarMenu>
-				</SidebarGroup>
-			</SidebarContent>
-		</Sidebar>
-	);
-};
+  return (
+    <Sidebar variant="floating" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" as="a" href="#">
+              <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <path d="M7 2h10M5 6h14" />
+                    <rect width="18" height="12" x="3" y="10" rx="2" />
+                  </g>
+                </svg>
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-semibold">Documentation</span>
+                <span class="">v1.0.0</span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu class="gap-2">
+            <For each={data.navMain}>
+              {(item) => (
+                <>
+                  <SidebarMenuButton as="a" href={item.url} class="font-medium">
+                    {item.title}
+                  </SidebarMenuButton>
+                  <Show when={item.items.length}>
+                    <SidebarMenuSub class="ml-0 border-l-0 px-1.5">
+                      <For each={item.items}>
+                        {(item) => (
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton
+                              isActive={item.isActive}
+                              as="a"
+                              href={item.url}
+                            >
+                              {item.title}
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        )}
+                      </For>
+                    </SidebarMenuSub>
+                  </Show>
+                </>
+              )}
+            </For>
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-02/index.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-02/index.tsx
index df20878d..48a46ced 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-02/index.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-02/index.tsx
@@ -1,33 +1,33 @@
-import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar";
+import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-02/components/app-sidebar"
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/registry/tailwindcss/ui/sidebar";
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const Page = () => {
-	return (
-		<SidebarProvider
-			style={{
-				"--sidebar-width": "19rem",
-			}}
-		>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2 px-4">
-					<SidebarTrigger class="-ml-1" />
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-					</div>
-					<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider
+      style={{
+        "--sidebar-width": "19rem",
+      }}
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2 px-4">
+          <SidebarTrigger class="-ml-1" />
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar.tsx
index eb0078ef..e8dd70b6 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar.tsx
@@ -1,332 +1,333 @@
-import NavMain from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-main";
-import NavProjects from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-projects";
-import NavSecondary from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary";
-import NavUser from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-user";
+import type { ComponentProps } from "solid-js"
+
+import NavMain from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-main"
+import NavProjects from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-projects"
+import NavSecondary from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary"
+import NavUser from "@/registry/tailwindcss/blocks/sidebar-03/components/nav-user"
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarFooter,
-	SidebarHeader,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { ComponentProps } from "solid-js";
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 // This is sample data.
 const data = {
-	user: {
-		name: "shadcn",
-		email: "m@example.com",
-		avatar: "https://ui.shadcn.com/avatars/shadcn.jpg",
-	},
-	navMain: [
-		{
-			title: "Playground",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="m7 11l2-2l-2-2m4 6h4" />
-						<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-					</g>
-				</svg>
-			),
-			isActive: true,
-			items: [
-				{
-					title: "History",
-					url: "#",
-				},
-				{
-					title: "Starred",
-					url: "#",
-				},
-				{
-					title: "Settings",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Models",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M12 8V4H8" />
-						<rect width="16" height="12" x="4" y="8" rx="2" />
-						<path d="M2 14h2m16 0h2m-7-1v2m-6-2v2" />
-					</g>
-				</svg>
-			),
-			items: [
-				{
-					title: "Genesis",
-					url: "#",
-				},
-				{
-					title: "Explorer",
-					url: "#",
-				},
-				{
-					title: "Quantum",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Documentation",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z"
-					/>
-				</svg>
-			),
-			items: [
-				{
-					title: "Introduction",
-					url: "#",
-				},
-				{
-					title: "Get Started",
-					url: "#",
-				},
-				{
-					title: "Tutorials",
-					url: "#",
-				},
-				{
-					title: "Changelog",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Settings",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M20 7h-9m3 10H5" />
-						<circle cx="17" cy="17" r="3" />
-						<circle cx="7" cy="7" r="3" />
-					</g>
-				</svg>
-			),
-			items: [
-				{
-					title: "General",
-					url: "#",
-				},
-				{
-					title: "Team",
-					url: "#",
-				},
-				{
-					title: "Billing",
-					url: "#",
-				},
-				{
-					title: "Limits",
-					url: "#",
-				},
-			],
-		},
-	],
-	navSecondary: [
-		{
-			title: "Support",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<circle cx="12" cy="12" r="10" />
-						<path d="m4.93 4.93l4.24 4.24m5.66 0l4.24-4.24m-4.24 9.9l4.24 4.24m-9.9-4.24l-4.24 4.24" />
-						<circle cx="12" cy="12" r="4" />
-					</g>
-				</svg>
-			),
-		},
-		{
-			title: "Feedback",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939"
-					/>
-				</svg>
-			),
-		},
-	],
-	projects: [
-		{
-			name: "Design Engineering",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M22 6H2m20 12H2M6 2v20M18 2v20"
-					/>
-				</svg>
-			),
-		},
-		{
-			name: "Sales & Marketing",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
-						<path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
-					</g>
-				</svg>
-			),
-		},
-		{
-			name: "Travel",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
-					/>
-				</svg>
-			),
-		},
-	],
-};
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "https://ui.shadcn.com/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="m7 11l2-2l-2-2m4 6h4" />
+            <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          </g>
+        </svg>
+      ),
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M12 8V4H8" />
+            <rect width="16" height="12" x="4" y="8" rx="2" />
+            <path d="M2 14h2m16 0h2m-7-1v2m-6-2v2" />
+          </g>
+        </svg>
+      ),
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z"
+          />
+        </svg>
+      ),
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M20 7h-9m3 10H5" />
+            <circle cx="17" cy="17" r="3" />
+            <circle cx="7" cy="7" r="3" />
+          </g>
+        </svg>
+      ),
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Support",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="m4.93 4.93l4.24 4.24m5.66 0l4.24-4.24m-4.24 9.9l4.24 4.24m-9.9-4.24l-4.24 4.24" />
+            <circle cx="12" cy="12" r="4" />
+          </g>
+        </svg>
+      ),
+    },
+    {
+      title: "Feedback",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939"
+          />
+        </svg>
+      ),
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M22 6H2m20 12H2M6 2v20M18 2v20"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
+            <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
+          </g>
+        </svg>
+      ),
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
+          />
+        </svg>
+      ),
+    },
+  ],
+}
 
 const AppSidebar = (props: ComponentProps<typeof Sidebar>) => {
-	return (
-		<Sidebar variant="inset" {...props}>
-			<SidebarHeader>
-				<SidebarMenu>
-					<SidebarMenuItem>
-						<SidebarMenuButton size="lg" as="a" href="#">
-							<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
-									/>
-								</svg>
-							</div>
-							<div class="grid flex-1 text-left text-sm leading-tight">
-								<span class="truncate font-semibold">Acme Inc</span>
-								<span class="truncate text-xs">Enterprise</span>
-							</div>
-						</SidebarMenuButton>
-					</SidebarMenuItem>
-				</SidebarMenu>
-			</SidebarHeader>
-			<SidebarContent>
-				<NavMain items={data.navMain} />
-				<NavProjects projects={data.projects} />
-				<NavSecondary items={data.navSecondary} class="mt-auto" />
-			</SidebarContent>
-			<SidebarFooter>
-				<NavUser user={data.user} />
-			</SidebarFooter>
-		</Sidebar>
-	);
-};
+  return (
+    <Sidebar variant="inset" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" as="a" href="#">
+              <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+                  />
+                </svg>
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">Acme Inc</span>
+                <span class="truncate text-xs">Enterprise</span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} class="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-main.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-main.tsx
index 1dd5c0bd..746b199d 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-main.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-main.tsx
@@ -1,105 +1,106 @@
+import { For, Show, type Accessor, type JSX } from "solid-js"
+import type {
+  CollapsibleRootProps,
+  CollapsibleTriggerProps,
+} from "@kobalte/core/collapsible"
+
 import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/registry/tailwindcss/ui/collapsible";
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/tailwindcss/ui/collapsible"
 import {
-	SidebarGroup,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuAction,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSub,
-	SidebarMenuSubButton,
-	SidebarMenuSubItem,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type {
-	CollapsibleRootProps,
-	CollapsibleTriggerProps,
-} from "@kobalte/core/collapsible";
-import { type Accessor, For, type JSX, Show } from "solid-js";
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavMain = (props: {
-	items: {
-		title: string;
-		url: string;
-		icon: Accessor<JSX.Element>;
-		isActive?: boolean;
-		items?: {
-			title: string;
-			url: string;
-		}[];
-	}[];
+  items: {
+    title: string
+    url: string
+    icon: Accessor<JSX.Element>
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
 }) => {
-	return (
-		<SidebarGroup>
-			<SidebarGroupLabel>Platform</SidebarGroupLabel>
-			<SidebarMenu>
-				<For each={props.items}>
-					{(item) => (
-						<Collapsible
-							defaultOpen={item.isActive}
-							as={(props: CollapsibleRootProps) => (
-								<SidebarMenuItem {...props}>
-									<SidebarMenuButton
-										tooltip={item.title}
-										as="a"
-										href={item.url}
-									>
-										<item.icon />
-										<span>{item.title}</span>
-									</SidebarMenuButton>
-									<Show when={item.items?.length}>
-										<CollapsibleTrigger
-											as={(props: CollapsibleTriggerProps) => (
-												// @ts-expect-error
-												<SidebarMenuAction
-													{...props}
-													class="data-[expanded]:rotate-90"
-												>
-													<svg
-														xmlns="http://www.w3.org/2000/svg"
-														class="transition-transform duration-200"
-														viewBox="0 0 24 24"
-													>
-														<path
-															fill="none"
-															stroke="currentColor"
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															stroke-width="2"
-															d="m9 18l6-6l-6-6"
-														/>
-													</svg>
-													<span class="sr-only">Toggle</span>
-												</SidebarMenuAction>
-											)}
-										/>
-										<CollapsibleContent>
-											<SidebarMenuSub>
-												{
-													<For each={item.items}>
-														{(subItem) => (
-															<SidebarMenuSubItem>
-																<SidebarMenuSubButton as="a" href={subItem.url}>
-																	<span>{subItem.title}</span>
-																</SidebarMenuSubButton>
-															</SidebarMenuSubItem>
-														)}
-													</For>
-												}
-											</SidebarMenuSub>
-										</CollapsibleContent>
-									</Show>
-								</SidebarMenuItem>
-							)}
-						/>
-					)}
-				</For>
-			</SidebarMenu>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={props.items}>
+          {(item) => (
+            <Collapsible
+              defaultOpen={item.isActive}
+              as={(props: CollapsibleRootProps) => (
+                <SidebarMenuItem {...props}>
+                  <SidebarMenuButton
+                    tooltip={item.title}
+                    as="a"
+                    href={item.url}
+                  >
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </SidebarMenuButton>
+                  <Show when={item.items?.length}>
+                    <CollapsibleTrigger
+                      as={(props: CollapsibleTriggerProps) => (
+                        // @ts-expect-error
+                        <SidebarMenuAction
+                          {...props}
+                          class="data-[expanded]:rotate-90"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="transition-transform duration-200"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="m9 18l6-6l-6-6"
+                            />
+                          </svg>
+                          <span class="sr-only">Toggle</span>
+                        </SidebarMenuAction>
+                      )}
+                    />
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {
+                          <For each={item.items}>
+                            {(subItem) => (
+                              <SidebarMenuSubItem>
+                                <SidebarMenuSubButton as="a" href={subItem.url}>
+                                  <span>{subItem.title}</span>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            )}
+                          </For>
+                        }
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </Show>
+                </SidebarMenuItem>
+              )}
+            />
+          )}
+        </For>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
 
-export default NavMain;
+export default NavMain
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-projects.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-projects.tsx
index 4740d24e..d51f312d 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-projects.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-projects.tsx
@@ -1,155 +1,156 @@
+import { For, type Accessor, type JSX } from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 import {
-	SidebarGroup,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuAction,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { type Accessor, For, type JSX } from "solid-js";
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavProjects = (props: {
-	projects: {
-		name: string;
-		url: string;
-		icon: Accessor<JSX.Element>;
-	}[];
+  projects: {
+    name: string
+    url: string
+    icon: Accessor<JSX.Element>
+  }[]
 }) => {
-	const { isMobile } = useSideBar();
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarGroup class="group-data-[collapsible=icon]:hidden">
-			<SidebarGroupLabel>Projects</SidebarGroupLabel>
-			<SidebarMenu>
-				<For each={props.projects}>
-					{(item) => (
-						<SidebarMenuItem>
-							<SidebarMenuButton as="a" href={item.url}>
-								<item.icon />
-								<span>{item.name}</span>
-							</SidebarMenuButton>
-							<DropdownMenu
-								placement={isMobile() ? "bottom-end" : "right-start"}
-							>
-								<DropdownMenuTrigger
-									as={(props: DropdownMenuTriggerProps) => (
-										// @ts-expect-error
-										<SidebarMenuAction showOnHover {...props}>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="size-4"
-												viewBox="0 0 24 24"
-											>
-												<g
-													fill="none"
-													stroke="currentColor"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-												>
-													<circle cx="12" cy="12" r="1" />
-													<circle cx="19" cy="12" r="1" />
-													<circle cx="5" cy="12" r="1" />
-												</g>
-											</svg>
-											<span class="sr-only">More</span>
-										</SidebarMenuAction>
-									)}
-								/>
-								<DropdownMenuContent class="w-48 rounded-lg">
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
-											/>
-										</svg>
-										<span>View Project</span>
-									</DropdownMenuItem>
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<g
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-											>
-												<path d="m15 17l5-5l-5-5" />
-												<path d="M4 18v-2a4 4 0 0 1 4-4h12" />
-											</g>
-										</svg>
-										<span>Share Project</span>
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
-											/>
-										</svg>
-										<span>Delete Project</span>
-									</DropdownMenuItem>
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</SidebarMenuItem>
-					)}
-				</For>
-				<SidebarMenuItem>
-					<SidebarMenuButton class="text-sidebar-foreground/70">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-sidebar-foreground/70 size-4"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<circle cx="12" cy="12" r="1" />
-								<circle cx="19" cy="12" r="1" />
-								<circle cx="5" cy="12" r="1" />
-							</g>
-						</svg>
-						<span>More</span>
-					</SidebarMenuButton>
-				</SidebarMenuItem>
-			</SidebarMenu>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={props.projects}>
+          {(item) => (
+            <SidebarMenuItem>
+              <SidebarMenuButton as="a" href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </SidebarMenuButton>
+              <DropdownMenu
+                placement={isMobile() ? "bottom-end" : "right-start"}
+              >
+                <DropdownMenuTrigger
+                  as={(props: DropdownMenuTriggerProps) => (
+                    // @ts-expect-error
+                    <SidebarMenuAction showOnHover {...props}>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                        >
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="19" cy="12" r="1" />
+                          <circle cx="5" cy="12" r="1" />
+                        </g>
+                      </svg>
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  )}
+                />
+                <DropdownMenuContent class="w-48 rounded-lg">
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+                      />
+                    </svg>
+                    <span>View Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      >
+                        <path d="m15 17l5-5l-5-5" />
+                        <path d="M4 18v-2a4 4 0 0 1 4-4h12" />
+                      </g>
+                    </svg>
+                    <span>Share Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
+                      />
+                    </svg>
+                    <span>Delete Project</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          )}
+        </For>
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-sidebar-foreground/70 size-4"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="19" cy="12" r="1" />
+                <circle cx="5" cy="12" r="1" />
+              </g>
+            </svg>
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
 
-export default NavProjects;
+export default NavProjects
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary.tsx
index 296ef646..7b824dfc 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-secondary.tsx
@@ -1,47 +1,48 @@
 import {
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-} from "@/registry/tailwindcss/ui/sidebar";
+  For,
+  splitProps,
+  type Accessor,
+  type ComponentProps,
+  type JSXElement,
+} from "solid-js"
+
 import {
-	type Accessor,
-	type ComponentProps,
-	For,
-	type JSXElement,
-	splitProps,
-} from "solid-js";
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavSecondary = (
-	props: ComponentProps<typeof SidebarGroup> & {
-		items: {
-			title: string;
-			url: string;
-			icon: Accessor<JSXElement>;
-		}[];
-	},
+  props: ComponentProps<typeof SidebarGroup> & {
+    items: {
+      title: string
+      url: string
+      icon: Accessor<JSXElement>
+    }[]
+  }
 ) => {
-	const [local, rest] = splitProps(props, ["items"]);
+  const [local, rest] = splitProps(props, ["items"])
 
-	return (
-		<SidebarGroup {...rest}>
-			<SidebarGroupContent>
-				<SidebarMenu>
-					<For each={local.items}>
-						{(item) => (
-							<SidebarMenuItem>
-								<SidebarMenuButton as="a" size="sm" href={item.url}>
-									<item.icon />
-									<span>{item.title}</span>
-								</SidebarMenuButton>
-							</SidebarMenuItem>
-						)}
-					</For>
-				</SidebarMenu>
-			</SidebarGroupContent>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup {...rest}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <For each={local.items}>
+            {(item) => (
+              <SidebarMenuItem>
+                <SidebarMenuButton as="a" size="sm" href={item.url}>
+                  <item.icon />
+                  <span>{item.title}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )}
+          </For>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
 
-export default NavSecondary;
+export default NavSecondary
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-user.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-user.tsx
index 5a8bf96f..9cdaf266 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-user.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-03/components/nav-user.tsx
@@ -1,197 +1,198 @@
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+import { Image } from "@kobalte/core/image"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 import {
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/registry/tailwindcss/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { Image } from "@kobalte/core/image";
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const NavUser = (props: {
-	user: {
-		name: string;
-		email: string;
-		avatar: string;
-	};
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
 }) => {
-	const { isMobile } = useSideBar();
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu placement={isMobile() ? "bottom-end" : "right-end"}>
-					<DropdownMenuTrigger
-						as={(triggerProps: DropdownMenuTriggerProps) => (
-							// @ts-expect-error
-							<SidebarMenuButton
-								{...triggerProps}
-								size="lg"
-								class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
-							>
-								<Image class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
-									<Image.Img
-										class="aspect-square h-full w-full"
-										src={props.user.avatar}
-										alt={props.user.name}
-									/>
-									<Image.Fallback class="flex h-full w-full items-center justify-center bg-muted rounded-lg">
-										CN
-									</Image.Fallback>
-								</Image>
-								<div class="grid flex-1 text-left text-sm leading-tight">
-									<span class="truncate font-semibold">{props.user.name}</span>
-									<span class="truncate text-xs">{props.user.email}</span>
-								</div>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="ml-auto size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="m7 15l5 5l5-5M7 9l5-5l5 5"
-									/>
-								</svg>
-							</SidebarMenuButton>
-						)}
-					/>
-					<DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
-						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel class="p-0 font-normal">
-								<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-									<Image class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
-										<Image.Img
-											class="aspect-square h-full w-full"
-											src={props.user.avatar}
-											alt={props.user.name}
-										/>
-										<Image.Fallback class="flex h-full w-full items-center justify-center bg-muted rounded-lg">
-											CN
-										</Image.Fallback>
-									</Image>
-									<div class="grid flex-1 text-left text-sm leading-tight">
-										<span class="truncate font-semibold">
-											{props.user.name}
-										</span>
-										<span class="truncate text-xs">{props.user.email}</span>
-									</div>
-								</div>
-							</DropdownMenuGroupLabel>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
-									/>
-								</svg>
-								Upgrade to Pro
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76" />
-										<path d="m9 12l2 2l4-4" />
-									</g>
-								</svg>
-								Account
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<rect width="20" height="14" x="2" y="5" rx="2" />
-										<path d="M2 10h20" />
-									</g>
-								</svg>
-								Billing
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0"
-									/>
-								</svg>
-								Notifications
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"
-								/>
-							</svg>
-							Log out
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu placement={isMobile() ? "bottom-end" : "right-end"}>
+          <DropdownMenuTrigger
+            as={(triggerProps: DropdownMenuTriggerProps) => (
+              // @ts-expect-error
+              <SidebarMenuButton
+                {...triggerProps}
+                size="lg"
+                class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
+              >
+                <Image class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                  <Image.Img
+                    class="aspect-square h-full w-full"
+                    src={props.user.avatar}
+                    alt={props.user.name}
+                  />
+                  <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-lg">
+                    CN
+                  </Image.Fallback>
+                </Image>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{props.user.name}</span>
+                  <span class="truncate text-xs">{props.user.email}</span>
+                </div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ml-auto size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m7 15l5 5l5-5M7 9l5-5l5 5"
+                  />
+                </svg>
+              </SidebarMenuButton>
+            )}
+          />
+          <DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
+            <DropdownMenuGroup>
+              <DropdownMenuGroupLabel class="p-0 font-normal">
+                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Image class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                    <Image.Img
+                      class="aspect-square h-full w-full"
+                      src={props.user.avatar}
+                      alt={props.user.name}
+                    />
+                    <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-lg">
+                      CN
+                    </Image.Fallback>
+                  </Image>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">
+                      {props.user.name}
+                    </span>
+                    <span class="truncate text-xs">{props.user.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuGroupLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
+                  />
+                </svg>
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76" />
+                    <path d="m9 12l2 2l4-4" />
+                  </g>
+                </svg>
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <rect width="20" height="14" x="2" y="5" rx="2" />
+                    <path d="M2 10h20" />
+                  </g>
+                </svg>
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0"
+                  />
+                </svg>
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"
+                />
+              </svg>
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
 
-export default NavUser;
+export default NavUser
diff --git a/docs/src/registry/tailwindcss/blocks/sidebar-03/index.tsx b/docs/src/registry/tailwindcss/blocks/sidebar-03/index.tsx
index aa79c6c4..19d748cd 100644
--- a/docs/src/registry/tailwindcss/blocks/sidebar-03/index.tsx
+++ b/docs/src/registry/tailwindcss/blocks/sidebar-03/index.tsx
@@ -1,33 +1,33 @@
-import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar";
+import AppSidebar from "@/registry/tailwindcss/blocks/sidebar-03/components/app-sidebar"
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarSeparator,
-	SidebarTrigger,
-} from "@/registry/tailwindcss/ui/sidebar";
+  SidebarInset,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+} from "@/registry/tailwindcss/ui/sidebar"
 
 const Page = () => {
-	return (
-		<SidebarProvider>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2">
-					<div class="flex items-center gap-2 px-4">
-						<SidebarTrigger class="-ml-1" />
-						<SidebarSeparator orientation="vertical" class="mr-2 h-4" />
-					</div>
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-						<div class="aspect-video rounded-xl bg-muted/50" />
-					</div>
-					<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2">
+          <div class="flex items-center gap-2 px-4">
+            <SidebarTrigger class="-ml-1" />
+            <SidebarSeparator orientation="vertical" class="mr-2 h-4" />
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+            <div class="bg-muted/50 aspect-video rounded-xl" />
+          </div>
+          <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-gradient.tsx b/docs/src/registry/tailwindcss/charts/area-chart-gradient.tsx
index 6e8b889d..7e0f6ad5 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart-gradient.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart-gradient.tsx
@@ -1,159 +1,160 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { Area, CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { Area, CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartGradient = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Gradient</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<svg height={0} width={0}>
-						<defs>
-							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-						</defs>
-					</svg>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color="auto"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-						attributes={{
-							[`${Area.selectors.area}:nth-child(1)`]: {
-								fill: "url(#fillDesktop)",
-							},
-							[`${Area.selectors.area}:nth-child(2)`]: {
-								fill: "url(#fillMobile)",
-							},
-						}}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent labelKey="month" {...props} />
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Gradient</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <svg height={0} width={0}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+          </svg>
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color="auto"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+            attributes={{
+              [`${Area.selectors.area}:nth-child(1)`]: {
+                fill: "url(#fillDesktop)",
+              },
+              [`${Area.selectors.area}:nth-child(2)`]: {
+                fill: "url(#fillMobile)",
+              },
+            }}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent labelKey="month" {...props} />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartGradient;
+export default AreaChartGradient
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-interactive.tsx b/docs/src/registry/tailwindcss/charts/area-chart-interactive.tsx
index a7624f56..ac2599ad 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart-interactive.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart-interactive.tsx
@@ -1,359 +1,360 @@
-import { useIsMobile } from "@/registry/tailwindcss/hooks/use-mobile";
+import { batch, createSignal } from "solid-js"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  VisArea,
+  VisAxis,
+  VisBrush,
+  VisBulletLegend,
+  VisLine,
+  VisTooltip,
+} from "@unovis/solid"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
+  Area,
+  CurveType,
+  Position,
+  type BulletLegendItemInterface,
+} from "@unovis/ts"
+
+import { useIsMobile } from "@/registry/tailwindcss/hooks/use-mobile"
 import {
-	VisArea,
-	VisAxis,
-	VisBrush,
-	VisBulletLegend,
-	VisLine,
-	VisTooltip,
-} from "@unovis/solid";
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Area,
-	type BulletLegendItemInterface,
-	CurveType,
-	Position,
-} from "@unovis/ts";
-import { batch, createSignal } from "solid-js";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	date: string;
-	desktop: number;
-	mobile: number;
-};
+  date: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ date: "2024-04-01", desktop: 222, mobile: 150 },
-	{ date: "2024-04-02", desktop: 97, mobile: 180 },
-	{ date: "2024-04-03", desktop: 167, mobile: 120 },
-	{ date: "2024-04-04", desktop: 242, mobile: 260 },
-	{ date: "2024-04-05", desktop: 373, mobile: 290 },
-	{ date: "2024-04-06", desktop: 301, mobile: 340 },
-	{ date: "2024-04-07", desktop: 245, mobile: 180 },
-	{ date: "2024-04-08", desktop: 409, mobile: 320 },
-	{ date: "2024-04-09", desktop: 59, mobile: 110 },
-	{ date: "2024-04-10", desktop: 261, mobile: 190 },
-	{ date: "2024-04-11", desktop: 327, mobile: 350 },
-	{ date: "2024-04-12", desktop: 292, mobile: 210 },
-	{ date: "2024-04-13", desktop: 342, mobile: 380 },
-	{ date: "2024-04-14", desktop: 137, mobile: 220 },
-	{ date: "2024-04-15", desktop: 120, mobile: 170 },
-	{ date: "2024-04-16", desktop: 138, mobile: 190 },
-	{ date: "2024-04-17", desktop: 446, mobile: 360 },
-	{ date: "2024-04-18", desktop: 364, mobile: 410 },
-	{ date: "2024-04-19", desktop: 243, mobile: 180 },
-	{ date: "2024-04-20", desktop: 89, mobile: 150 },
-	{ date: "2024-04-21", desktop: 137, mobile: 200 },
-	{ date: "2024-04-22", desktop: 224, mobile: 170 },
-	{ date: "2024-04-23", desktop: 138, mobile: 230 },
-	{ date: "2024-04-24", desktop: 387, mobile: 290 },
-	{ date: "2024-04-25", desktop: 215, mobile: 250 },
-	{ date: "2024-04-26", desktop: 75, mobile: 130 },
-	{ date: "2024-04-27", desktop: 383, mobile: 420 },
-	{ date: "2024-04-28", desktop: 122, mobile: 180 },
-	{ date: "2024-04-29", desktop: 315, mobile: 240 },
-	{ date: "2024-04-30", desktop: 454, mobile: 380 },
-	{ date: "2024-05-01", desktop: 165, mobile: 220 },
-	{ date: "2024-05-02", desktop: 293, mobile: 310 },
-	{ date: "2024-05-03", desktop: 247, mobile: 190 },
-	{ date: "2024-05-04", desktop: 385, mobile: 420 },
-	{ date: "2024-05-05", desktop: 481, mobile: 390 },
-	{ date: "2024-05-06", desktop: 498, mobile: 520 },
-	{ date: "2024-05-07", desktop: 388, mobile: 300 },
-	{ date: "2024-05-08", desktop: 149, mobile: 210 },
-	{ date: "2024-05-09", desktop: 227, mobile: 180 },
-	{ date: "2024-05-10", desktop: 293, mobile: 330 },
-	{ date: "2024-05-11", desktop: 335, mobile: 270 },
-	{ date: "2024-05-12", desktop: 197, mobile: 240 },
-	{ date: "2024-05-13", desktop: 197, mobile: 160 },
-	{ date: "2024-05-14", desktop: 448, mobile: 490 },
-	{ date: "2024-05-15", desktop: 473, mobile: 380 },
-	{ date: "2024-05-16", desktop: 338, mobile: 400 },
-	{ date: "2024-05-17", desktop: 499, mobile: 420 },
-	{ date: "2024-05-18", desktop: 315, mobile: 350 },
-	{ date: "2024-05-19", desktop: 235, mobile: 180 },
-	{ date: "2024-05-20", desktop: 177, mobile: 230 },
-	{ date: "2024-05-21", desktop: 82, mobile: 140 },
-	{ date: "2024-05-22", desktop: 81, mobile: 120 },
-	{ date: "2024-05-23", desktop: 252, mobile: 290 },
-	{ date: "2024-05-24", desktop: 294, mobile: 220 },
-	{ date: "2024-05-25", desktop: 201, mobile: 250 },
-	{ date: "2024-05-26", desktop: 213, mobile: 170 },
-	{ date: "2024-05-27", desktop: 420, mobile: 460 },
-	{ date: "2024-05-28", desktop: 233, mobile: 190 },
-	{ date: "2024-05-29", desktop: 78, mobile: 130 },
-	{ date: "2024-05-30", desktop: 340, mobile: 280 },
-	{ date: "2024-05-31", desktop: 178, mobile: 230 },
-	{ date: "2024-06-01", desktop: 178, mobile: 200 },
-	{ date: "2024-06-02", desktop: 470, mobile: 410 },
-	{ date: "2024-06-03", desktop: 103, mobile: 160 },
-	{ date: "2024-06-04", desktop: 439, mobile: 380 },
-	{ date: "2024-06-05", desktop: 88, mobile: 140 },
-	{ date: "2024-06-06", desktop: 294, mobile: 250 },
-	{ date: "2024-06-07", desktop: 323, mobile: 370 },
-	{ date: "2024-06-08", desktop: 385, mobile: 320 },
-	{ date: "2024-06-09", desktop: 438, mobile: 480 },
-	{ date: "2024-06-10", desktop: 155, mobile: 200 },
-	{ date: "2024-06-11", desktop: 92, mobile: 150 },
-	{ date: "2024-06-12", desktop: 492, mobile: 420 },
-	{ date: "2024-06-13", desktop: 81, mobile: 130 },
-	{ date: "2024-06-14", desktop: 426, mobile: 380 },
-	{ date: "2024-06-15", desktop: 307, mobile: 350 },
-	{ date: "2024-06-16", desktop: 371, mobile: 310 },
-	{ date: "2024-06-17", desktop: 475, mobile: 520 },
-	{ date: "2024-06-18", desktop: 107, mobile: 170 },
-	{ date: "2024-06-19", desktop: 341, mobile: 290 },
-	{ date: "2024-06-20", desktop: 408, mobile: 450 },
-	{ date: "2024-06-21", desktop: 169, mobile: 210 },
-	{ date: "2024-06-22", desktop: 317, mobile: 270 },
-	{ date: "2024-06-23", desktop: 480, mobile: 530 },
-	{ date: "2024-06-24", desktop: 132, mobile: 180 },
-	{ date: "2024-06-25", desktop: 141, mobile: 190 },
-	{ date: "2024-06-26", desktop: 434, mobile: 380 },
-	{ date: "2024-06-27", desktop: 448, mobile: 490 },
-	{ date: "2024-06-28", desktop: 149, mobile: 200 },
-	{ date: "2024-06-29", desktop: 103, mobile: 160 },
-	{ date: "2024-06-30", desktop: 446, mobile: 400 },
-];
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartInteractive = () => {
-	const items = (): BulletLegendItemInterface[] => {
-		return Object.entries(chartConfig).map(([_, config]) => ({
-			name: config.label,
-			color: config.color,
-		}));
-	};
+  const items = (): BulletLegendItemInterface[] => {
+    return Object.entries(chartConfig).map(([_, config]) => ({
+      name: config.label,
+      color: config.color,
+    }))
+  }
 
-	const [duration, setDuration] = createSignal<number | undefined>(0);
-	const [domain, setDomain] = createSignal<[number, number]>([
-		data.findIndex((d) => d.date === "2024-04-30"),
-		data.findIndex((d) => d.date === "2024-06-01"),
-	]);
+  const [duration, setDuration] = createSignal<number | undefined>(0)
+  const [domain, setDomain] = createSignal<[number, number]>([
+    data.findIndex((d) => d.date === "2024-04-30"),
+    data.findIndex((d) => d.date === "2024-06-01"),
+  ])
 
-	const isMobile = useIsMobile();
+  const isMobile = useIsMobile()
 
-	const numTicks = () => {
-		if (isMobile()) {
-			return 4;
-		}
-		return 15;
-	};
+  const numTicks = () => {
+    if (isMobile()) {
+      return 4
+    }
+    return 15
+  }
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Interactive</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 3 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 1600]}
-					xDomain={domain()}
-					duration={duration()}
-					class="aspect-auto"
-				>
-					<svg height={0} width={0}>
-						<defs>
-							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-						</defs>
-					</svg>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color="auto"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-						attributes={{
-							[`${Area.selectors.area}:nth-child(1)`]: {
-								fill: "url(#fillDesktop)",
-							},
-							[`${Area.selectors.area}:nth-child(2)`]: {
-								fill: "url(#fillMobile)",
-							},
-						}}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => {
-							const date = new Date(data[d as number].date);
-							return date.toLocaleDateString("en-US", {
-								month: "short",
-								day: "numeric",
-							});
-						}}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={Math.min(numTicks(), domain()[1] - domain()[0])}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="date"
-								labelFormatter={(d) => {
-									const date = new Date(data[d as number].date);
-									return date.toLocaleDateString("en-US", {
-										month: "short",
-										day: "numeric",
-									});
-								}}
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-				<div class="flex items-center justify-center gap-4 pt-3">
-					<VisBulletLegend items={items()} />
-				</div>
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					height={75}
-					padding={{
-						top: 12,
-					}}
-					class="aspect-auto"
-				>
-					<svg height={0} width={0}>
-						<defs>
-							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-desktop)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-								<stop
-									offset="5%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.8}
-								/>
-								<stop
-									offset="95%"
-									stop-color="var(--color-mobile)"
-									stop-opacity={0.1}
-								/>
-							</linearGradient>
-						</defs>
-					</svg>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color="auto"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-						attributes={{
-							[`${Area.selectors.area}:nth-child(1)`]: {
-								fill: "url(#fillDesktop)",
-							},
-							[`${Area.selectors.area}:nth-child(2)`]: {
-								fill: "url(#fillMobile)",
-							},
-						}}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => {
-							const date = new Date(data[d as number].date);
-							return date.toLocaleDateString("en-US", {
-								month: "short",
-								day: "numeric",
-							});
-						}}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={numTicks()}
-					/>
-					<VisBrush
-						selection={domain()}
-						onBrush={(selection, _, userDriven) => {
-							if (userDriven)
-								batch(() => {
-									setDuration(0);
-									setDomain(selection!);
-								});
-						}}
-						draggable
-					/>
-				</ChartContainer>
-			</CardContent>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Interactive</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 3 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 1600]}
+          xDomain={domain()}
+          duration={duration()}
+          class="aspect-auto"
+        >
+          <svg height={0} width={0}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+          </svg>
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color="auto"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+            attributes={{
+              [`${Area.selectors.area}:nth-child(1)`]: {
+                fill: "url(#fillDesktop)",
+              },
+              [`${Area.selectors.area}:nth-child(2)`]: {
+                fill: "url(#fillMobile)",
+              },
+            }}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => {
+              const date = new Date(data[d as number].date)
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })
+            }}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={Math.min(numTicks(), domain()[1] - domain()[0])}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="date"
+                labelFormatter={(d) => {
+                  const date = new Date(data[d as number].date)
+                  return date.toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                  })
+                }}
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+        <div class="flex items-center justify-center gap-4 pt-3">
+          <VisBulletLegend items={items()} />
+        </div>
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          height={75}
+          padding={{
+            top: 12,
+          }}
+          class="aspect-auto"
+        >
+          <svg height={0} width={0}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-desktop)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stop-color="var(--color-mobile)"
+                  stop-opacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+          </svg>
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color="auto"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+            attributes={{
+              [`${Area.selectors.area}:nth-child(1)`]: {
+                fill: "url(#fillDesktop)",
+              },
+              [`${Area.selectors.area}:nth-child(2)`]: {
+                fill: "url(#fillMobile)",
+              },
+            }}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => {
+              const date = new Date(data[d as number].date)
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })
+            }}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={numTicks()}
+          />
+          <VisBrush
+            selection={domain()}
+            onBrush={(selection, _, userDriven) => {
+              if (userDriven)
+                batch(() => {
+                  setDuration(0)
+                  setDomain(selection!)
+                })
+            }}
+            draggable
+          />
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
 
-export default AreaChartInteractive;
+export default AreaChartInteractive
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-legend.tsx b/docs/src/registry/tailwindcss/charts/area-chart-legend.tsx
index 3587492f..a201603f 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart-legend.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart-legend.tsx
@@ -1,147 +1,144 @@
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
-import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
+  VisArea,
+  VisAxis,
+  VisBulletLegend,
+  VisLine,
+  VisTooltip,
+} from "@unovis/solid"
+import { CurveType, Position, type BulletLegendItemInterface } from "@unovis/ts"
+
 import {
-	VisArea,
-	VisAxis,
-	VisBulletLegend,
-	VisLine,
-	VisTooltip,
-} from "@unovis/solid";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type BulletLegendItemInterface,
-	CurveType,
-	Position,
-} from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartLegend = () => {
-	const items = (): BulletLegendItemInterface[] => {
-		return Object.entries(chartConfig).map(([_, config]) => ({
-			name: config.label,
-			color: config.color,
-		}));
-	};
+  const items = (): BulletLegendItemInterface[] => {
+    return Object.entries(chartConfig).map(([_, config]) => ({
+      name: config.label,
+      color: config.color,
+    }))
+  }
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Legend</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						opacity={0.4}
-						curveType={CurveType.Natural}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="line"
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-				<div class="flex items-center justify-center gap-4 pt-3">
-					<VisBulletLegend items={items()} />
-				</div>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Legend</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            opacity={0.4}
+            curveType={CurveType.Natural}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="line"
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+        <div class="flex items-center justify-center gap-4 pt-3">
+          <VisBulletLegend items={items()} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartLegend;
+export default AreaChartLegend
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-linear.tsx b/docs/src/registry/tailwindcss/charts/area-chart-linear.tsx
index cf9a64d8..b85aa846 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart-linear.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart-linear.tsx
@@ -1,123 +1,124 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const AreaChartLinear = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Linear</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						opacity={0.4}
-						curveType={CurveType.Linear}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						curveType={CurveType.Linear}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="dot"
-								hideLabel
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Linear</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            opacity={0.4}
+            curveType={CurveType.Linear}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            curveType={CurveType.Linear}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="dot"
+                hideLabel
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartLinear;
+export default AreaChartLinear
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-stacked.tsx b/docs/src/registry/tailwindcss/charts/area-chart-stacked.tsx
index 6c6196b2..3c260255 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart-stacked.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart-stacked.tsx
@@ -1,123 +1,124 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const AreaChartStacked = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Stacked</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						opacity={0.4}
-						curveType={CurveType.Natural}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color={["var(--color-mobile)", "var(--color-desktop)"]}
-						template={(props) => (
-							<ChartTooltipContent labelKey="month" {...props} />
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Stacked</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            opacity={0.4}
+            curveType={CurveType.Natural}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.mobile, (d) => d.mobile + d.desktop]}
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color={["var(--color-mobile)", "var(--color-desktop)"]}
+            template={(props) => (
+              <ChartTooltipContent labelKey="month" {...props} />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartStacked;
+export default AreaChartStacked
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-step.tsx b/docs/src/registry/tailwindcss/charts/area-chart-step.tsx
index 8e303ab7..c293eae0 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart-step.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart-step.tsx
@@ -1,130 +1,131 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-		icon: (
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
-				/>
-			</svg>
-		),
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+        />
+      </svg>
+    ),
+  },
+} satisfies ChartConfig
 
 const AreaChartStep = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart - Step</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						opacity={0.4}
-						curveType={CurveType.Step}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						curveType={CurveType.Step}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent labelKey="month" hideLabel {...props} />
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart - Step</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            opacity={0.4}
+            curveType={CurveType.Step}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            curveType={CurveType.Step}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent labelKey="month" hideLabel {...props} />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChartStep;
+export default AreaChartStep
diff --git a/docs/src/registry/tailwindcss/charts/area-chart.tsx b/docs/src/registry/tailwindcss/charts/area-chart.tsx
index d008af01..1ca10225 100644
--- a/docs/src/registry/tailwindcss/charts/area-chart.tsx
+++ b/docs/src/registry/tailwindcss/charts/area-chart.tsx
@@ -1,122 +1,123 @@
+import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid"
+import { CurveType, Position } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartCrosshair,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisArea, VisAxis, VisLine, VisTooltip } from "@unovis/solid";
-import { CurveType, Position } from "@unovis/ts";
+  ChartContainer,
+  ChartCrosshair,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const AreaChart = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Area Chart</CardTitle>
-				<CardDescription>
-					Showing total visitors for the last 6 months
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisArea<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						opacity={0.4}
-						curveType={CurveType.Natural}
-					/>
-					<VisLine<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						curveType={CurveType.Natural}
-						lineWidth={1}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<ChartCrosshair<DataRecord>
-						color="var(--color-desktop)"
-						template={(props) => (
-							<ChartTooltipContent
-								labelKey="month"
-								indicator="line"
-								{...props}
-							/>
-						)}
-					/>
-					<VisTooltip horizontalPlacement={Position.Center} />
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							January - June 2024
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisArea<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            opacity={0.4}
+            curveType={CurveType.Natural}
+          />
+          <VisLine<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            curveType={CurveType.Natural}
+            lineWidth={1}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <ChartCrosshair<DataRecord>
+            color="var(--color-desktop)"
+            template={(props) => (
+              <ChartTooltipContent
+                labelKey="month"
+                indicator="line"
+                {...props}
+              />
+            )}
+          />
+          <VisTooltip horizontalPlacement={Position.Center} />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default AreaChart;
+export default AreaChart
diff --git a/docs/src/registry/tailwindcss/charts/bar-chart-active.tsx b/docs/src/registry/tailwindcss/charts/bar-chart-active.tsx
index 421a5857..3baf9bec 100644
--- a/docs/src/registry/tailwindcss/charts/bar-chart-active.tsx
+++ b/docs/src/registry/tailwindcss/charts/bar-chart-active.tsx
@@ -1,158 +1,159 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	browser: string;
-	visitors: number;
-	fill: string;
-};
+  browser: string
+  visitors: number
+  fill: string
+}
 
 const data: DataRecord[] = [
-	{ browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
-	{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-	{ browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
-	{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-	{ browser: "other", visitors: 90, fill: "var(--color-other)" },
-];
+  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
 
 const chartConfig = {
-	visitors: {
-		label: "Visitors",
-	},
-	chrome: {
-		label: "Chrome",
-		color: "hsl(var(--chart-1))",
-	},
-	safari: {
-		label: "Safari",
-		color: "hsl(var(--chart-2))",
-	},
-	firefox: {
-		label: "Firefox",
-		color: "hsl(var(--chart-3))",
-	},
-	edge: {
-		label: "Edge",
-		color: "hsl(var(--chart-4))",
-	},
-	other: {
-		label: "Other",
-		color: "hsl(var(--chart-5))",
-	},
-} satisfies ChartConfig;
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
 
 const BarChartActive = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart- Active</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<style
-						innerText={`path[data-stacked-bar-active=true] {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart- Active</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <style
+            innerText={`path[data-stacked-bar-active=true] {
 					--vis-stacked-bar-stroke-color: ${data.find((d) => d.browser === "firefox")?.fill};
 					--vis-stacked-bar-stroke-width: 2;
 					--vis-stacked-bar-hover-stroke-color: var(--vis-stacked-bar-stroke-color);
 					--vis-stacked-bar-hover-stroke-width: var(--vis-stacked-bar-stroke-width);
 					}`}
-					/>
-					<VisStackedBar<DataRecord>
-						id={(d) => `stacked-bar-${d.browser}`}
-						x={(_, i) => i}
-						y={(d) => d.visitors}
-						color={(d) => d.fill}
-						roundedCorners={8}
-						attributes={{
-							[StackedBar.selectors.bar]: {
-								"stroke-width": 2,
-								"stroke-dasharray": 4,
-								"stroke-dashoffset": 4,
-								"fill-opacity": 0.8,
-								"data-stacked-bar-active": (d) => d.browser === "firefox",
-							},
-						}}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(_, i) =>
-							chartConfig[data[i].browser as keyof typeof chartConfig].label
-						}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="browser"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+          />
+          <VisStackedBar<DataRecord>
+            id={(d) => `stacked-bar-${d.browser}`}
+            x={(_, i) => i}
+            y={(d) => d.visitors}
+            color={(d) => d.fill}
+            roundedCorners={8}
+            attributes={{
+              [StackedBar.selectors.bar]: {
+                "stroke-width": 2,
+                "stroke-dasharray": 4,
+                "stroke-dashoffset": 4,
+                "fill-opacity": 0.8,
+                "data-stacked-bar-active": (d) => d.browser === "firefox",
+              },
+            }}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(_, i) =>
+              chartConfig[data[i].browser as keyof typeof chartConfig].label
+            }
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="browser"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartActive;
+export default BarChartActive
diff --git a/docs/src/registry/tailwindcss/charts/bar-chart-horizontal.tsx b/docs/src/registry/tailwindcss/charts/bar-chart-horizontal.tsx
index 9ded2b93..0f07b1b8 100644
--- a/docs/src/registry/tailwindcss/charts/bar-chart-horizontal.tsx
+++ b/docs/src/registry/tailwindcss/charts/bar-chart-horizontal.tsx
@@ -1,120 +1,121 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { Direction, Orientation, StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { Direction, Orientation, StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const BarChartHorizontal = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart- Horizontal</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDirection={Direction.South}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						roundedCorners={5}
-						orientation={Orientation.Horizontal}
-					/>
-					<VisAxis<DataRecord>
-						type="y"
-						tickFormat={(_, i) => data[i].month}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart- Horizontal</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDirection={Direction.South}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            roundedCorners={5}
+            orientation={Orientation.Horizontal}
+          />
+          <VisAxis<DataRecord>
+            type="y"
+            tickFormat={(_, i) => data[i].month}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartHorizontal;
+export default BarChartHorizontal
diff --git a/docs/src/registry/tailwindcss/charts/bar-chart-mixed.tsx b/docs/src/registry/tailwindcss/charts/bar-chart-mixed.tsx
index 6978a55e..33219289 100644
--- a/docs/src/registry/tailwindcss/charts/bar-chart-mixed.tsx
+++ b/docs/src/registry/tailwindcss/charts/bar-chart-mixed.tsx
@@ -1,141 +1,142 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { Direction, Orientation, StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { Direction, Orientation, StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	browser: string;
-	visitors: number;
-	fill: string;
-};
+  browser: string
+  visitors: number
+  fill: string
+}
 
 const data: DataRecord[] = [
-	{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-	{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-	{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-	{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-	{ browser: "other", visitors: 90, fill: "var(--color-other)" },
-];
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+]
 
 const chartConfig = {
-	visitors: {
-		label: "Visitors",
-	},
-	chrome: {
-		label: "Chrome",
-		color: "hsl(var(--chart-1))",
-	},
-	safari: {
-		label: "Safari",
-		color: "hsl(var(--chart-2))",
-	},
-	firefox: {
-		label: "Firefox",
-		color: "hsl(var(--chart-3))",
-	},
-	edge: {
-		label: "Edge",
-		color: "hsl(var(--chart-4))",
-	},
-	other: {
-		label: "Other",
-		color: "hsl(var(--chart-5))",
-	},
-} satisfies ChartConfig;
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "hsl(var(--chart-1))",
+  },
+  safari: {
+    label: "Safari",
+    color: "hsl(var(--chart-2))",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "hsl(var(--chart-3))",
+  },
+  edge: {
+    label: "Edge",
+    color: "hsl(var(--chart-4))",
+  },
+  other: {
+    label: "Other",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
 
 const BarChartMixed = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart- Mixed</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDirection={Direction.South}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.visitors}
-						color={(d) => d.fill}
-						roundedCorners={5}
-						orientation={Orientation.Horizontal}
-					/>
-					<VisAxis<DataRecord>
-						type="y"
-						tickFormat={(_, i) =>
-							chartConfig[data[i].browser as keyof typeof chartConfig].label
-						}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="browser"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart- Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDirection={Direction.South}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.visitors}
+            color={(d) => d.fill}
+            roundedCorners={5}
+            orientation={Orientation.Horizontal}
+          />
+          <VisAxis<DataRecord>
+            type="y"
+            tickFormat={(_, i) =>
+              chartConfig[data[i].browser as keyof typeof chartConfig].label
+            }
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="browser"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartMixed;
+export default BarChartMixed
diff --git a/docs/src/registry/tailwindcss/charts/bar-chart-multiply.tsx b/docs/src/registry/tailwindcss/charts/bar-chart-multiply.tsx
index 87872e3f..9e955178 100644
--- a/docs/src/registry/tailwindcss/charts/bar-chart-multiply.tsx
+++ b/docs/src/registry/tailwindcss/charts/bar-chart-multiply.tsx
@@ -1,125 +1,126 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisGroupedBar, VisTooltip } from "@unovis/solid"
+import { GroupedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisGroupedBar, VisTooltip } from "@unovis/solid";
-import { GroupedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const BarChartMultiply = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart - Multiply</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisGroupedBar<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.desktop, (d) => d.mobile]}
-						color={["var(--color-desktop)", "var(--color-mobile)"]}
-						roundedCorners={4}
-						barPadding={0.2}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[GroupedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-										indicator="dashed"
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiply</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisGroupedBar<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.desktop, (d) => d.mobile]}
+            color={["var(--color-desktop)", "var(--color-mobile)"]}
+            roundedCorners={4}
+            barPadding={0.2}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [GroupedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                    indicator="dashed"
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartMultiply;
+export default BarChartMultiply
diff --git a/docs/src/registry/tailwindcss/charts/bar-chart-stacked.tsx b/docs/src/registry/tailwindcss/charts/bar-chart-stacked.tsx
index 75697d60..c059dc58 100644
--- a/docs/src/registry/tailwindcss/charts/bar-chart-stacked.tsx
+++ b/docs/src/registry/tailwindcss/charts/bar-chart-stacked.tsx
@@ -1,138 +1,139 @@
+import { render } from "solid-js/web"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  VisAxis,
+  VisBulletLegend,
+  VisStackedBar,
+  VisTooltip,
+} from "@unovis/solid"
+import { StackedBar, type BulletLegendItemInterface } from "@unovis/ts"
+
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	VisAxis,
-	VisBulletLegend,
-	VisStackedBar,
-	VisTooltip,
-} from "@unovis/solid";
-import { type BulletLegendItemInterface, StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-	mobile: number;
-};
+  month: string
+  desktop: number
+  mobile: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186, mobile: 80 },
-	{ month: "February", desktop: 305, mobile: 200 },
-	{ month: "March", desktop: 237, mobile: 120 },
-	{ month: "April", desktop: 73, mobile: 190 },
-	{ month: "May", desktop: 209, mobile: 130 },
-	{ month: "June", desktop: 214, mobile: 140 },
-];
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-	mobile: {
-		label: "Mobile",
-		color: "hsl(var(--chart-2))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
 
 const BarChartStacked = () => {
-	const items = (): BulletLegendItemInterface[] => {
-		return Object.entries(chartConfig).map(([_, config]) => ({
-			name: config.label,
-			color: config.color,
-		}));
-	};
+  const items = (): BulletLegendItemInterface[] => {
+    return Object.entries(chartConfig).map(([_, config]) => ({
+      name: config.label,
+      color: config.color,
+    }))
+  }
 
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart - Stacked</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 620]}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={[(d) => d.desktop, (d) => d.mobile]}
-						color={["var(--color-desktop)", "var(--color-mobile)"]}
-						roundedCorners={4}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-				<div class="flex items-center justify-center gap-4 pt-3">
-					<VisBulletLegend items={items()} />
-				</div>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Stacked</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 620]}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={[(d) => d.desktop, (d) => d.mobile]}
+            color={["var(--color-desktop)", "var(--color-mobile)"]}
+            roundedCorners={4}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+        <div class="flex items-center justify-center gap-4 pt-3">
+          <VisBulletLegend items={items()} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChartStacked;
+export default BarChartStacked
diff --git a/docs/src/registry/tailwindcss/charts/bar-chart.tsx b/docs/src/registry/tailwindcss/charts/bar-chart.tsx
index 2cef53af..18a291a5 100644
--- a/docs/src/registry/tailwindcss/charts/bar-chart.tsx
+++ b/docs/src/registry/tailwindcss/charts/bar-chart.tsx
@@ -1,119 +1,120 @@
+import { render } from "solid-js/web"
+import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid"
+import { StackedBar } from "@unovis/ts"
+
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltipContent,
-} from "@/registry/tailwindcss/ui/chart";
-import { VisAxis, VisStackedBar, VisTooltip } from "@unovis/solid";
-import { StackedBar } from "@unovis/ts";
-import { render } from "solid-js/web";
+  ChartContainer,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/tailwindcss/ui/chart"
 
 type DataRecord = {
-	month: string;
-	desktop: number;
-};
+  month: string
+  desktop: number
+}
 
 const data: DataRecord[] = [
-	{ month: "January", desktop: 186 },
-	{ month: "February", desktop: 305 },
-	{ month: "March", desktop: 237 },
-	{ month: "April", desktop: 73 },
-	{ month: "May", desktop: 209 },
-	{ month: "June", desktop: 214 },
-];
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
 
 const chartConfig = {
-	desktop: {
-		label: "Desktop",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig
 
 const BarChart = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Bar Chart</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent class="h-[300px]">
-				<ChartContainer
-					config={chartConfig}
-					type="xy"
-					data={data}
-					yDomain={[0, 310]}
-				>
-					<VisStackedBar<DataRecord>
-						x={(_, i) => i}
-						y={(d) => d.desktop}
-						color="var(--color-desktop)"
-						roundedCorners={8}
-					/>
-					<VisAxis<DataRecord>
-						type="x"
-						tickFormat={(d) => data[d as number].month.slice(0, 3)}
-						gridLine={false}
-						tickLine={false}
-						domainLine={false}
-						numTicks={data.length}
-					/>
-					<VisTooltip
-						triggers={{
-							[StackedBar.selectors.bar]: (d: DataRecord, x) => {
-								const container = document.createElement("div");
-								const Component = () => (
-									<ChartTooltipContent
-										data={d}
-										x={x}
-										config={chartConfig}
-										labelKey="month"
-										hideLabel
-									/>
-								);
-								render(() => <Component />, container);
-								return container.innerHTML;
-							},
-						}}
-					/>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter>
-				<div class="flex w-full items-start gap-2 text-sm">
-					<div class="grid gap-2">
-						<div class="flex items-center gap-2 font-medium leading-none">
-							Trending up by 5.2% this month{" "}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="m22 7l-8.5 8.5l-5-5L2 17" />
-									<path d="M16 7h6v6" />
-								</g>
-							</svg>
-						</div>
-						<div class="flex items-center gap-2 leading-none text-muted-foreground">
-							Showing total visitors for the last 6 months
-						</div>
-					</div>
-				</div>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent class="h-[300px]">
+        <ChartContainer
+          config={chartConfig}
+          type="xy"
+          data={data}
+          yDomain={[0, 310]}
+        >
+          <VisStackedBar<DataRecord>
+            x={(_, i) => i}
+            y={(d) => d.desktop}
+            color="var(--color-desktop)"
+            roundedCorners={8}
+          />
+          <VisAxis<DataRecord>
+            type="x"
+            tickFormat={(d) => data[d as number].month.slice(0, 3)}
+            gridLine={false}
+            tickLine={false}
+            domainLine={false}
+            numTicks={data.length}
+          />
+          <VisTooltip
+            triggers={{
+              [StackedBar.selectors.bar]: (d: DataRecord, x) => {
+                const container = document.createElement("div")
+                const Component = () => (
+                  <ChartTooltipContent
+                    data={d}
+                    x={x}
+                    config={chartConfig}
+                    labelKey="month"
+                    hideLabel
+                  />
+                )
+                render(() => <Component />, container)
+                return container.innerHTML
+              },
+            }}
+          />
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 font-medium leading-none">
+              Trending up by 5.2% this month{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="m22 7l-8.5 8.5l-5-5L2 17" />
+                  <path d="M16 7h6v6" />
+                </g>
+              </svg>
+            </div>
+            <div class="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default BarChart;
+export default BarChart
diff --git a/docs/src/registry/tailwindcss/examples/accordion-demo.tsx b/docs/src/registry/tailwindcss/examples/accordion-demo.tsx
index 46c9452b..9535f709 100644
--- a/docs/src/registry/tailwindcss/examples/accordion-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/accordion-demo.tsx
@@ -1,34 +1,34 @@
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/registry/tailwindcss/ui/accordion";
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/tailwindcss/ui/accordion"
 
 const AccordionDemo = () => {
-	return (
-		<Accordion collapsible class="w-full">
-			<AccordionItem value="item-1">
-				<AccordionTrigger>Is it accessible?</AccordionTrigger>
-				<AccordionContent>
-					Yes. It adheres to the WAI-ARIA design pattern.
-				</AccordionContent>
-			</AccordionItem>
-			<AccordionItem value="item-2">
-				<AccordionTrigger>Is it styled?</AccordionTrigger>
-				<AccordionContent>
-					Yes. It comes with default styles that matches the other components'
-					aesthetic.
-				</AccordionContent>
-			</AccordionItem>
-			<AccordionItem value="item-3">
-				<AccordionTrigger>Is it animated?</AccordionTrigger>
-				<AccordionContent>
-					Yes. It's animated by default, but you can disable it if you prefer.
-				</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	);
-};
+  return (
+    <Accordion collapsible class="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other components'
+          aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
 
-export default AccordionDemo;
+export default AccordionDemo
diff --git a/docs/src/registry/tailwindcss/examples/alert-demo.tsx b/docs/src/registry/tailwindcss/examples/alert-demo.tsx
index d6b2793d..ac8e50f7 100644
--- a/docs/src/registry/tailwindcss/examples/alert-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/alert-demo.tsx
@@ -1,32 +1,32 @@
 import {
-	Alert,
-	AlertDescription,
-	AlertTitle,
-} from "@/registry/tailwindcss/ui/alert";
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/tailwindcss/ui/alert"
 
 const AlertDemo = () => {
-	return (
-		<Alert>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m5 7l5 5l-5 5m7 2h7"
-				/>
-			</svg>
-			<AlertTitle>Heads up!</AlertTitle>
-			<AlertDescription>
-				You can not add components to your app using the cli, yet.
-			</AlertDescription>
-		</Alert>
-	);
-};
+  return (
+    <Alert>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m5 7l5 5l-5 5m7 2h7"
+        />
+      </svg>
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can not add components to your app using the cli, yet.
+      </AlertDescription>
+    </Alert>
+  )
+}
 
-export default AlertDemo;
+export default AlertDemo
diff --git a/docs/src/registry/tailwindcss/examples/alert-destructive.tsx b/docs/src/registry/tailwindcss/examples/alert-destructive.tsx
index ef7ae224..b61e4c80 100644
--- a/docs/src/registry/tailwindcss/examples/alert-destructive.tsx
+++ b/docs/src/registry/tailwindcss/examples/alert-destructive.tsx
@@ -1,32 +1,32 @@
 import {
-	Alert,
-	AlertDescription,
-	AlertTitle,
-} from "@/registry/tailwindcss/ui/alert";
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/tailwindcss/ui/alert"
 
 const AlertDestructive = () => {
-	return (
-		<Alert variant="destructive">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01"
-				/>
-			</svg>
-			<AlertTitle>Error</AlertTitle>
-			<AlertDescription>
-				Your session has expired. Please log in again.
-			</AlertDescription>
-		</Alert>
-	);
-};
+  return (
+    <Alert variant="destructive">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01"
+        />
+      </svg>
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  )
+}
 
-export default AlertDestructive;
+export default AlertDestructive
diff --git a/docs/src/registry/tailwindcss/examples/alert-dialog-demo.tsx b/docs/src/registry/tailwindcss/examples/alert-dialog-demo.tsx
index c93df98f..f8e7375b 100644
--- a/docs/src/registry/tailwindcss/examples/alert-dialog-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/alert-dialog-demo.tsx
@@ -1,42 +1,43 @@
+import type { AlertDialogTriggerProps } from "@kobalte/core/alert-dialog"
+
 import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogClose,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/registry/tailwindcss/ui/alert-dialog";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import type { AlertDialogTriggerProps } from "@kobalte/core/alert-dialog";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/tailwindcss/ui/alert-dialog"
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const AlertDialogDemo = () => {
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger
-				as={(props: AlertDialogTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Show Dialog
-					</Button>
-				)}
-			/>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
-						This action cannot be undone. This will permanently delete your
-						account and remove your data from our servers.
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogClose>Cancel</AlertDialogClose>
-					<AlertDialogAction>Continue</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        as={(props: AlertDialogTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Show Dialog
+          </Button>
+        )}
+      />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogClose>Cancel</AlertDialogClose>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
 
-export default AlertDialogDemo;
+export default AlertDialogDemo
diff --git a/docs/src/registry/tailwindcss/examples/badge-demo.tsx b/docs/src/registry/tailwindcss/examples/badge-demo.tsx
index 80e55801..3e08086a 100644
--- a/docs/src/registry/tailwindcss/examples/badge-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/badge-demo.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/registry/tailwindcss/ui/badge";
+import { Badge } from "@/registry/tailwindcss/ui/badge"
 
 const BadgeDemo = () => {
-	return <Badge>Badge</Badge>;
-};
+  return <Badge>Badge</Badge>
+}
 
-export default BadgeDemo;
+export default BadgeDemo
diff --git a/docs/src/registry/tailwindcss/examples/badge-destructive.tsx b/docs/src/registry/tailwindcss/examples/badge-destructive.tsx
index 0b63379f..1b95690f 100644
--- a/docs/src/registry/tailwindcss/examples/badge-destructive.tsx
+++ b/docs/src/registry/tailwindcss/examples/badge-destructive.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/registry/tailwindcss/ui/badge";
+import { Badge } from "@/registry/tailwindcss/ui/badge"
 
 const BadgeDestructive = () => {
-	return <Badge variant="destructive">Destructive</Badge>;
-};
+  return <Badge variant="destructive">Destructive</Badge>
+}
 
-export default BadgeDestructive;
+export default BadgeDestructive
diff --git a/docs/src/registry/tailwindcss/examples/badge-outline.tsx b/docs/src/registry/tailwindcss/examples/badge-outline.tsx
index 2f4f9ce5..8b3556af 100644
--- a/docs/src/registry/tailwindcss/examples/badge-outline.tsx
+++ b/docs/src/registry/tailwindcss/examples/badge-outline.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/registry/tailwindcss/ui/badge";
+import { Badge } from "@/registry/tailwindcss/ui/badge"
 
 const BadgeOutline = () => {
-	return <Badge variant="outline">Outline</Badge>;
-};
+  return <Badge variant="outline">Outline</Badge>
+}
 
-export default BadgeOutline;
+export default BadgeOutline
diff --git a/docs/src/registry/tailwindcss/examples/badge-secondary.tsx b/docs/src/registry/tailwindcss/examples/badge-secondary.tsx
index bbfb97cb..b4aa1f90 100644
--- a/docs/src/registry/tailwindcss/examples/badge-secondary.tsx
+++ b/docs/src/registry/tailwindcss/examples/badge-secondary.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/registry/tailwindcss/ui/badge";
+import { Badge } from "@/registry/tailwindcss/ui/badge"
 
 const BadgeSecondary = () => {
-	return <Badge variant="secondary">Secondary</Badge>;
-};
+  return <Badge variant="secondary">Secondary</Badge>
+}
 
-export default BadgeSecondary;
+export default BadgeSecondary
diff --git a/docs/src/registry/tailwindcss/examples/button-as-child.tsx b/docs/src/registry/tailwindcss/examples/button-as-child.tsx
index 7c5b8b0f..86e0c3aa 100644
--- a/docs/src/registry/tailwindcss/examples/button-as-child.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-as-child.tsx
@@ -1,11 +1,11 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonAsChild = () => {
-	return (
-		<Button as="a" href="#">
-			Login
-		</Button>
-	);
-};
+  return (
+    <Button as="a" href="#">
+      Login
+    </Button>
+  )
+}
 
-export default ButtonAsChild;
+export default ButtonAsChild
diff --git a/docs/src/registry/tailwindcss/examples/button-demo.tsx b/docs/src/registry/tailwindcss/examples/button-demo.tsx
index df813da7..c4edc62e 100644
--- a/docs/src/registry/tailwindcss/examples/button-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-demo.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonDemo = () => {
-	return <Button>Button</Button>;
-};
+  return <Button>Button</Button>
+}
 
-export default ButtonDemo;
+export default ButtonDemo
diff --git a/docs/src/registry/tailwindcss/examples/button-destructive.tsx b/docs/src/registry/tailwindcss/examples/button-destructive.tsx
index 652261ce..fbdc5265 100644
--- a/docs/src/registry/tailwindcss/examples/button-destructive.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-destructive.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonDestructive = () => {
-	return <Button variant="destructive">Destructive</Button>;
-};
+  return <Button variant="destructive">Destructive</Button>
+}
 
-export default ButtonDestructive;
+export default ButtonDestructive
diff --git a/docs/src/registry/tailwindcss/examples/button-ghost.tsx b/docs/src/registry/tailwindcss/examples/button-ghost.tsx
index 207a973a..bb23098f 100644
--- a/docs/src/registry/tailwindcss/examples/button-ghost.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-ghost.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonGhost = () => {
-	return <Button variant="ghost">Ghost</Button>;
-};
+  return <Button variant="ghost">Ghost</Button>
+}
 
-export default ButtonGhost;
+export default ButtonGhost
diff --git a/docs/src/registry/tailwindcss/examples/button-link.tsx b/docs/src/registry/tailwindcss/examples/button-link.tsx
index 18a44361..c7368bf4 100644
--- a/docs/src/registry/tailwindcss/examples/button-link.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-link.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonLink = () => {
-	return <Button variant="link">Link</Button>;
-};
+  return <Button variant="link">Link</Button>
+}
 
-export default ButtonLink;
+export default ButtonLink
diff --git a/docs/src/registry/tailwindcss/examples/button-loading.tsx b/docs/src/registry/tailwindcss/examples/button-loading.tsx
index dd5671fd..0f60cae1 100644
--- a/docs/src/registry/tailwindcss/examples/button-loading.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-loading.tsx
@@ -1,25 +1,25 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonLoading = () => {
-	return (
-		<Button disabled>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="mr-2 h-4 w-4 animate-spin"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
-				/>
-			</svg>
-			Please wait
-		</Button>
-	);
-};
+  return (
+    <Button disabled>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mr-2 h-4 w-4 animate-spin"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
+        />
+      </svg>
+      Please wait
+    </Button>
+  )
+}
 
-export default ButtonLoading;
+export default ButtonLoading
diff --git a/docs/src/registry/tailwindcss/examples/button-outline.tsx b/docs/src/registry/tailwindcss/examples/button-outline.tsx
index 458886e7..597f6135 100644
--- a/docs/src/registry/tailwindcss/examples/button-outline.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-outline.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonOutline = () => {
-	return <Button variant="outline">Outline</Button>;
-};
+  return <Button variant="outline">Outline</Button>
+}
 
-export default ButtonOutline;
+export default ButtonOutline
diff --git a/docs/src/registry/tailwindcss/examples/button-secondary.tsx b/docs/src/registry/tailwindcss/examples/button-secondary.tsx
index cccc621c..e78e83b2 100644
--- a/docs/src/registry/tailwindcss/examples/button-secondary.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-secondary.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonSecondary = () => {
-	return <Button variant="secondary">Secondary</Button>;
-};
+  return <Button variant="secondary">Secondary</Button>
+}
 
-export default ButtonSecondary;
+export default ButtonSecondary
diff --git a/docs/src/registry/tailwindcss/examples/button-with-icon.tsx b/docs/src/registry/tailwindcss/examples/button-with-icon.tsx
index 81179299..99ad4d2f 100644
--- a/docs/src/registry/tailwindcss/examples/button-with-icon.tsx
+++ b/docs/src/registry/tailwindcss/examples/button-with-icon.tsx
@@ -1,27 +1,27 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ButtonWithIcon = () => {
-	return (
-		<Button>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="mr-2 h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-					<path d="m3 7l9 6l9-6" />
-				</g>
-			</svg>{" "}
-			Login with Email
-		</Button>
-	);
-};
+  return (
+    <Button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="mr-2 h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <path d="m3 7l9 6l9-6" />
+        </g>
+      </svg>{" "}
+      Login with Email
+    </Button>
+  )
+}
 
-export default ButtonWithIcon;
+export default ButtonWithIcon
diff --git a/docs/src/registry/tailwindcss/examples/calendar-demo.tsx b/docs/src/registry/tailwindcss/examples/calendar-demo.tsx
index 6efcf0b8..f7e7599c 100644
--- a/docs/src/registry/tailwindcss/examples/calendar-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/calendar-demo.tsx
@@ -1,144 +1,145 @@
+import { For } from "solid-js"
+
 import {
-	DatePicker,
-	DatePickerContent,
-	DatePickerContext,
-	DatePickerRangeText,
-	DatePickerTable,
-	DatePickerTableBody,
-	DatePickerTableCell,
-	DatePickerTableCellTrigger,
-	DatePickerTableHead,
-	DatePickerTableHeader,
-	DatePickerTableRow,
-	DatePickerView,
-	DatePickerViewControl,
-	DatePickerViewTrigger,
-} from "@/registry/tailwindcss/ui/date-picker";
-import { For } from "solid-js";
+  DatePicker,
+  DatePickerContent,
+  DatePickerContext,
+  DatePickerRangeText,
+  DatePickerTable,
+  DatePickerTableBody,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHead,
+  DatePickerTableHeader,
+  DatePickerTableRow,
+  DatePickerView,
+  DatePickerViewControl,
+  DatePickerViewTrigger,
+} from "@/registry/tailwindcss/ui/date-picker"
 
 const CalendarDemo = () => {
-	return (
-		<DatePicker open>
-			<DatePickerContent>
-				<DatePickerView view="day">
-					<DatePickerContext>
-						{(context) => (
-							<>
-								<DatePickerViewControl>
-									<DatePickerViewTrigger>
-										<DatePickerRangeText />
-									</DatePickerViewTrigger>
-								</DatePickerViewControl>
-								<DatePickerTable>
-									<DatePickerTableHead>
-										<DatePickerTableRow>
-											<For each={context().weekDays}>
-												{(weekDay) => (
-													<DatePickerTableHeader>
-														{weekDay.short}
-													</DatePickerTableHeader>
-												)}
-											</For>
-										</DatePickerTableRow>
-									</DatePickerTableHead>
-									<DatePickerTableBody>
-										<For each={context().weeks}>
-											{(week) => (
-												<DatePickerTableRow>
-													<For each={week}>
-														{(day) => (
-															<DatePickerTableCell value={day}>
-																<DatePickerTableCellTrigger>
-																	{day.day}
-																</DatePickerTableCellTrigger>
-															</DatePickerTableCell>
-														)}
-													</For>
-												</DatePickerTableRow>
-											)}
-										</For>
-									</DatePickerTableBody>
-								</DatePickerTable>
-							</>
-						)}
-					</DatePickerContext>
-				</DatePickerView>
-				<DatePickerView view="month">
-					<DatePickerContext>
-						{(context) => (
-							<>
-								<DatePickerViewControl>
-									<DatePickerViewTrigger>
-										<DatePickerRangeText />
-									</DatePickerViewTrigger>
-								</DatePickerViewControl>
-								<DatePickerTable>
-									<DatePickerTableBody>
-										<For
-											each={context().getMonthsGrid({
-												columns: 4,
-												format: "short",
-											})}
-										>
-											{(months) => (
-												<DatePickerTableRow>
-													<For each={months}>
-														{(month) => (
-															<DatePickerTableCell value={month.value}>
-																<DatePickerTableCellTrigger>
-																	{month.label}
-																</DatePickerTableCellTrigger>
-															</DatePickerTableCell>
-														)}
-													</For>
-												</DatePickerTableRow>
-											)}
-										</For>
-									</DatePickerTableBody>
-								</DatePickerTable>
-							</>
-						)}
-					</DatePickerContext>
-				</DatePickerView>
-				<DatePickerView view="year">
-					<DatePickerContext>
-						{(context) => (
-							<>
-								<DatePickerViewControl>
-									<DatePickerViewTrigger>
-										<DatePickerRangeText />
-									</DatePickerViewTrigger>
-								</DatePickerViewControl>
-								<DatePickerTable>
-									<DatePickerTableBody>
-										<For
-											each={context().getYearsGrid({
-												columns: 4,
-											})}
-										>
-											{(years) => (
-												<DatePickerTableRow>
-													<For each={years}>
-														{(year) => (
-															<DatePickerTableCell value={year.value}>
-																<DatePickerTableCellTrigger>
-																	{year.label}
-																</DatePickerTableCellTrigger>
-															</DatePickerTableCell>
-														)}
-													</For>
-												</DatePickerTableRow>
-											)}
-										</For>
-									</DatePickerTableBody>
-								</DatePickerTable>
-							</>
-						)}
-					</DatePickerContext>
-				</DatePickerView>
-			</DatePickerContent>
-		</DatePicker>
-	);
-};
+  return (
+    <DatePicker open>
+      <DatePickerContent>
+        <DatePickerView view="day">
+          <DatePickerContext>
+            {(context) => (
+              <>
+                <DatePickerViewControl>
+                  <DatePickerViewTrigger>
+                    <DatePickerRangeText />
+                  </DatePickerViewTrigger>
+                </DatePickerViewControl>
+                <DatePickerTable>
+                  <DatePickerTableHead>
+                    <DatePickerTableRow>
+                      <For each={context().weekDays}>
+                        {(weekDay) => (
+                          <DatePickerTableHeader>
+                            {weekDay.short}
+                          </DatePickerTableHeader>
+                        )}
+                      </For>
+                    </DatePickerTableRow>
+                  </DatePickerTableHead>
+                  <DatePickerTableBody>
+                    <For each={context().weeks}>
+                      {(week) => (
+                        <DatePickerTableRow>
+                          <For each={week}>
+                            {(day) => (
+                              <DatePickerTableCell value={day}>
+                                <DatePickerTableCellTrigger>
+                                  {day.day}
+                                </DatePickerTableCellTrigger>
+                              </DatePickerTableCell>
+                            )}
+                          </For>
+                        </DatePickerTableRow>
+                      )}
+                    </For>
+                  </DatePickerTableBody>
+                </DatePickerTable>
+              </>
+            )}
+          </DatePickerContext>
+        </DatePickerView>
+        <DatePickerView view="month">
+          <DatePickerContext>
+            {(context) => (
+              <>
+                <DatePickerViewControl>
+                  <DatePickerViewTrigger>
+                    <DatePickerRangeText />
+                  </DatePickerViewTrigger>
+                </DatePickerViewControl>
+                <DatePickerTable>
+                  <DatePickerTableBody>
+                    <For
+                      each={context().getMonthsGrid({
+                        columns: 4,
+                        format: "short",
+                      })}
+                    >
+                      {(months) => (
+                        <DatePickerTableRow>
+                          <For each={months}>
+                            {(month) => (
+                              <DatePickerTableCell value={month.value}>
+                                <DatePickerTableCellTrigger>
+                                  {month.label}
+                                </DatePickerTableCellTrigger>
+                              </DatePickerTableCell>
+                            )}
+                          </For>
+                        </DatePickerTableRow>
+                      )}
+                    </For>
+                  </DatePickerTableBody>
+                </DatePickerTable>
+              </>
+            )}
+          </DatePickerContext>
+        </DatePickerView>
+        <DatePickerView view="year">
+          <DatePickerContext>
+            {(context) => (
+              <>
+                <DatePickerViewControl>
+                  <DatePickerViewTrigger>
+                    <DatePickerRangeText />
+                  </DatePickerViewTrigger>
+                </DatePickerViewControl>
+                <DatePickerTable>
+                  <DatePickerTableBody>
+                    <For
+                      each={context().getYearsGrid({
+                        columns: 4,
+                      })}
+                    >
+                      {(years) => (
+                        <DatePickerTableRow>
+                          <For each={years}>
+                            {(year) => (
+                              <DatePickerTableCell value={year.value}>
+                                <DatePickerTableCellTrigger>
+                                  {year.label}
+                                </DatePickerTableCellTrigger>
+                              </DatePickerTableCell>
+                            )}
+                          </For>
+                        </DatePickerTableRow>
+                      )}
+                    </For>
+                  </DatePickerTableBody>
+                </DatePickerTable>
+              </>
+            )}
+          </DatePickerContext>
+        </DatePickerView>
+      </DatePickerContent>
+    </DatePicker>
+  )
+}
 
-export default CalendarDemo;
+export default CalendarDemo
diff --git a/docs/src/registry/tailwindcss/examples/card-demo.tsx b/docs/src/registry/tailwindcss/examples/card-demo.tsx
index 97fac129..402b00cd 100644
--- a/docs/src/registry/tailwindcss/examples/card-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/card-demo.tsx
@@ -1,108 +1,109 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { For } from "solid-js"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Switch,
-	SwitchControl,
-	SwitchThumb,
-} from "@/registry/tailwindcss/ui/switch";
-import { For } from "solid-js";
+  Switch,
+  SwitchControl,
+  SwitchThumb,
+} from "@/registry/tailwindcss/ui/switch"
 
 const notifications = [
-	{
-		title: "Your call has been confirmed.",
-		description: "1 hour ago",
-	},
-	{
-		title: "You have a new message!",
-		description: "1 hour ago",
-	},
-	{
-		title: "Your subscription is expiring soon!",
-		description: "2 hours ago",
-	},
-];
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
 
 const CardDemo = () => {
-	return (
-		<Card class="w-[380px]">
-			<CardHeader>
-				<CardTitle>Notifications</CardTitle>
-				<CardDescription>You have 3 unread messages.</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-4">
-				<div class=" flex items-center space-x-4 rounded-md border p-4">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1"
-						/>
-					</svg>
-					<div class="flex-1 space-y-1">
-						<p class="text-sm font-medium leading-none">Push Notifications</p>
-						<p class="text-sm text-muted-foreground">
-							Send notifications to device.
-						</p>
-					</div>
-					<Switch>
-						<SwitchControl>
-							<SwitchThumb />
-						</SwitchControl>
-					</Switch>
-				</div>
-				<div>
-					<For each={notifications}>
-						{(notification) => (
-							<div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
-								<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
-								<div class="space-y-1">
-									<p class="text-sm font-medium leading-none">
-										{notification.title}
-									</p>
-									<p class="text-sm text-muted-foreground">
-										{notification.description}
-									</p>
-								</div>
-							</div>
-						)}
-					</For>
-				</div>
-			</CardContent>
-			<CardFooter>
-				<Button class="w-full">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m5 12l5 5L20 7"
-						/>
-					</svg>
-					Mark all as read
-				</Button>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card class="w-[380px]">
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-4">
+        <div class="flex items-center space-x-4 rounded-md border p-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1"
+            />
+          </svg>
+          <div class="flex-1 space-y-1">
+            <p class="text-sm font-medium leading-none">Push Notifications</p>
+            <p class="text-muted-foreground text-sm">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch>
+            <SwitchControl>
+              <SwitchThumb />
+            </SwitchControl>
+          </Switch>
+        </div>
+        <div>
+          <For each={notifications}>
+            {(notification) => (
+              <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                <div class="space-y-1">
+                  <p class="text-sm font-medium leading-none">
+                    {notification.title}
+                  </p>
+                  <p class="text-muted-foreground text-sm">
+                    {notification.description}
+                  </p>
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button class="w-full">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m5 12l5 5L20 7"
+            />
+          </svg>
+          Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default CardDemo;
+export default CardDemo
diff --git a/docs/src/registry/tailwindcss/examples/carousel-api-demo.tsx b/docs/src/registry/tailwindcss/examples/carousel-api-demo.tsx
index 9f894687..280ee000 100644
--- a/docs/src/registry/tailwindcss/examples/carousel-api-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/carousel-api-demo.tsx
@@ -1,64 +1,65 @@
-import { Card, CardContent } from "@/registry/tailwindcss/ui/card";
+import { Index, createEffect, createSignal } from "solid-js"
+
+import { Card, CardContent } from "@/registry/tailwindcss/ui/card"
 import {
-	Carousel,
-	type CarouselApi,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/registry/tailwindcss/ui/carousel";
-import { Index, createEffect, createSignal } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/registry/tailwindcss/ui/carousel"
 
 const CarouselApiDemo = () => {
-	const [api, setApi] = createSignal<ReturnType<CarouselApi>>();
-	const [current, setCurrent] = createSignal(0);
-	const [count, setCount] = createSignal(0);
+  const [api, setApi] = createSignal<ReturnType<CarouselApi>>()
+  const [current, setCurrent] = createSignal(0)
+  const [count, setCount] = createSignal(0)
 
-	const onSelect = () => {
-		const _api = api();
-		if (_api === undefined) {
-			return;
-		}
+  const onSelect = () => {
+    const _api = api()
+    if (_api === undefined) {
+      return
+    }
 
-		setCurrent(_api.selectedScrollSnap() + 1);
-	};
+    setCurrent(_api.selectedScrollSnap() + 1)
+  }
 
-	createEffect(() => {
-		const _api = api();
-		if (_api === undefined) {
-			return;
-		}
+  createEffect(() => {
+    const _api = api()
+    if (_api === undefined) {
+      return
+    }
 
-		setCount(_api.scrollSnapList().length);
-		setCurrent(_api.selectedScrollSnap() + 1);
+    setCount(_api.scrollSnapList().length)
+    setCurrent(_api.selectedScrollSnap() + 1)
 
-		_api.on("select", onSelect);
-	});
+    _api.on("select", onSelect)
+  })
 
-	return (
-		<div>
-			<Carousel setApi={setApi} class="w-full max-w-xs">
-				<CarouselContent>
-					<Index each={Array.from({ length: 5 })}>
-						{(_, index) => (
-							<CarouselItem>
-								<Card>
-									<CardContent class="flex aspect-square items-center justify-center p-6">
-										<span class="text-4xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</CarouselItem>
-						)}
-					</Index>
-				</CarouselContent>
-				<CarouselPrevious />
-				<CarouselNext />
-			</Carousel>
-			<div class="py-2 text-center text-sm text-muted-foreground">
-				Slide {current()} of {count()}
-			</div>
-		</div>
-	);
-};
+  return (
+    <div>
+      <Carousel setApi={setApi} class="w-full max-w-xs">
+        <CarouselContent>
+          <Index each={Array.from({ length: 5 })}>
+            {(_, index) => (
+              <CarouselItem>
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            )}
+          </Index>
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <div class="text-muted-foreground py-2 text-center text-sm">
+        Slide {current()} of {count()}
+      </div>
+    </div>
+  )
+}
 
-export default CarouselApiDemo;
+export default CarouselApiDemo
diff --git a/docs/src/registry/tailwindcss/examples/carousel-demo.tsx b/docs/src/registry/tailwindcss/examples/carousel-demo.tsx
index 8e3fcaa7..ac7f83c7 100644
--- a/docs/src/registry/tailwindcss/examples/carousel-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/carousel-demo.tsx
@@ -1,35 +1,36 @@
-import { Card, CardContent } from "@/registry/tailwindcss/ui/card";
+import { Index } from "solid-js"
+
+import { Card, CardContent } from "@/registry/tailwindcss/ui/card"
 import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/registry/tailwindcss/ui/carousel";
-import { Index } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/tailwindcss/ui/carousel"
 
 const CarouselDemo = () => {
-	return (
-		<Carousel class="w-full max-w-xs">
-			<CarouselContent>
-				<Index each={Array.from({ length: 5 })}>
-					{(_, index) => (
-						<CarouselItem>
-							<div class="p-1">
-								<Card>
-									<CardContent class="flex aspect-square items-center justify-center p-6">
-										<span class="text-4xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</div>
-						</CarouselItem>
-					)}
-				</Index>
-			</CarouselContent>
-			<CarouselPrevious />
-			<CarouselNext />
-		</Carousel>
-	);
-};
+  return (
+    <Carousel class="w-full max-w-xs">
+      <CarouselContent>
+        <Index each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem>
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </Index>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
 
-export default CarouselDemo;
+export default CarouselDemo
diff --git a/docs/src/registry/tailwindcss/examples/carousel-orientation.tsx b/docs/src/registry/tailwindcss/examples/carousel-orientation.tsx
index a0d00591..b0aa6bce 100644
--- a/docs/src/registry/tailwindcss/examples/carousel-orientation.tsx
+++ b/docs/src/registry/tailwindcss/examples/carousel-orientation.tsx
@@ -1,41 +1,42 @@
-import { Card, CardContent } from "@/registry/tailwindcss/ui/card";
+import { Index } from "solid-js"
+
+import { Card, CardContent } from "@/registry/tailwindcss/ui/card"
 import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/registry/tailwindcss/ui/carousel";
-import { Index } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/tailwindcss/ui/carousel"
 
 const CarouselOrientation = () => {
-	return (
-		<Carousel
-			opts={{
-				align: "start",
-			}}
-			orientation="vertical"
-			class="w-full max-w-xs"
-		>
-			<CarouselContent class="-mt-1 h-[200px]">
-				<Index each={Array.from({ length: 5 })}>
-					{(_, index) => (
-						<CarouselItem class="pt-1 md:basis-1/2">
-							<div class="p-1">
-								<Card>
-									<CardContent class="flex items-center justify-center p-6">
-										<span class="text-3xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</div>
-						</CarouselItem>
-					)}
-				</Index>
-			</CarouselContent>
-			<CarouselPrevious />
-			<CarouselNext />
-		</Carousel>
-	);
-};
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      orientation="vertical"
+      class="w-full max-w-xs"
+    >
+      <CarouselContent class="-mt-1 h-[200px]">
+        <Index each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem class="pt-1 md:basis-1/2">
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex items-center justify-center p-6">
+                    <span class="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </Index>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
 
-export default CarouselOrientation;
+export default CarouselOrientation
diff --git a/docs/src/registry/tailwindcss/examples/carousel-plugin.tsx b/docs/src/registry/tailwindcss/examples/carousel-plugin.tsx
index 0a6fd5dc..60325fcd 100644
--- a/docs/src/registry/tailwindcss/examples/carousel-plugin.tsx
+++ b/docs/src/registry/tailwindcss/examples/carousel-plugin.tsx
@@ -1,43 +1,44 @@
-import { Card, CardContent } from "@/registry/tailwindcss/ui/card";
+import { Index } from "solid-js"
+import Autoplay from "embla-carousel-autoplay"
+
+import { Card, CardContent } from "@/registry/tailwindcss/ui/card"
 import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/registry/tailwindcss/ui/carousel";
-import Autoplay from "embla-carousel-autoplay";
-import { Index } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/tailwindcss/ui/carousel"
 
 const CarouselPlugin = () => {
-	const autoPlayPlugin = Autoplay({ delay: 2000, stopOnInteraction: true });
+  const autoPlayPlugin = Autoplay({ delay: 2000, stopOnInteraction: true })
 
-	return (
-		<Carousel
-			plugins={[autoPlayPlugin]}
-			class="w-full max-w-xs"
-			onMouseEnter={autoPlayPlugin.stop}
-			onMouseLeave={() => autoPlayPlugin.play(false)}
-		>
-			<CarouselContent>
-				<Index each={Array.from({ length: 5 })}>
-					{(_, index) => (
-						<CarouselItem>
-							<div class="p-1">
-								<Card>
-									<CardContent class="flex aspect-square items-center justify-center p-6">
-										<span class="text-4xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</div>
-						</CarouselItem>
-					)}
-				</Index>
-			</CarouselContent>
-			<CarouselPrevious />
-			<CarouselNext />
-		</Carousel>
-	);
-};
+  return (
+    <Carousel
+      plugins={[autoPlayPlugin]}
+      class="w-full max-w-xs"
+      onMouseEnter={autoPlayPlugin.stop}
+      onMouseLeave={() => autoPlayPlugin.play(false)}
+    >
+      <CarouselContent>
+        <Index each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem>
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </Index>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
 
-export default CarouselPlugin;
+export default CarouselPlugin
diff --git a/docs/src/registry/tailwindcss/examples/carousel-size.tsx b/docs/src/registry/tailwindcss/examples/carousel-size.tsx
index 157a84ff..717a7618 100644
--- a/docs/src/registry/tailwindcss/examples/carousel-size.tsx
+++ b/docs/src/registry/tailwindcss/examples/carousel-size.tsx
@@ -1,40 +1,41 @@
-import { Card, CardContent } from "@/registry/tailwindcss/ui/card";
+import { Index } from "solid-js"
+
+import { Card, CardContent } from "@/registry/tailwindcss/ui/card"
 import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/registry/tailwindcss/ui/carousel";
-import { Index } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/tailwindcss/ui/carousel"
 
 const CarouselSize = () => {
-	return (
-		<Carousel
-			opts={{
-				align: "start",
-			}}
-			class="w-full max-w-sm"
-		>
-			<CarouselContent>
-				<Index each={Array.from({ length: 5 })}>
-					{(_, index) => (
-						<CarouselItem class="md:basis-1/2 lg:basis-1/3">
-							<div class="p-1">
-								<Card>
-									<CardContent class="flex aspect-square items-center justify-center p-6">
-										<span class="text-3xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</div>
-						</CarouselItem>
-					)}
-				</Index>
-			</CarouselContent>
-			<CarouselPrevious />
-			<CarouselNext />
-		</Carousel>
-	);
-};
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      class="w-full max-w-sm"
+    >
+      <CarouselContent>
+        <Index each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem class="md:basis-1/2 lg:basis-1/3">
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </Index>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
 
-export default CarouselSize;
+export default CarouselSize
diff --git a/docs/src/registry/tailwindcss/examples/carousel-spacing.tsx b/docs/src/registry/tailwindcss/examples/carousel-spacing.tsx
index 21dafd41..52dab342 100644
--- a/docs/src/registry/tailwindcss/examples/carousel-spacing.tsx
+++ b/docs/src/registry/tailwindcss/examples/carousel-spacing.tsx
@@ -1,34 +1,36 @@
-import { Card, CardContent } from "@/registry/tailwindcss/ui/card";
+import { Index } from "solid-js"
+
+import { Card, CardContent } from "@/registry/tailwindcss/ui/card"
 import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/registry/tailwindcss/ui/carousel";
-import { Index } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/tailwindcss/ui/carousel"
+
 const CarouselSpacing = () => {
-	return (
-		<Carousel class="w-full max-w-sm">
-			<CarouselContent class="-ml-1">
-				<Index each={Array.from({ length: 5 })}>
-					{(_, index) => (
-						<CarouselItem class="pl-1 md:basis-1/2 lg:basis-1/3">
-							<div class="p-1">
-								<Card>
-									<CardContent class="flex aspect-square items-center justify-center p-6">
-										<span class="text-2xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</div>
-						</CarouselItem>
-					)}
-				</Index>
-			</CarouselContent>
-			<CarouselPrevious />
-			<CarouselNext />
-		</Carousel>
-	);
-};
+  return (
+    <Carousel class="w-full max-w-sm">
+      <CarouselContent class="-ml-1">
+        <Index each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem class="pl-1 md:basis-1/2 lg:basis-1/3">
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-2xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </Index>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
 
-export default CarouselSpacing;
+export default CarouselSpacing
diff --git a/docs/src/registry/tailwindcss/examples/checkbox-demo.tsx b/docs/src/registry/tailwindcss/examples/checkbox-demo.tsx
index d3b7397d..5b481c3a 100644
--- a/docs/src/registry/tailwindcss/examples/checkbox-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/checkbox-demo.tsx
@@ -1,18 +1,18 @@
 import {
-	Checkbox,
-	CheckboxControl,
-	CheckboxLabel,
-} from "@/registry/tailwindcss/ui/checkbox";
+  Checkbox,
+  CheckboxControl,
+  CheckboxLabel,
+} from "@/registry/tailwindcss/ui/checkbox"
 
 const CheckboxDemo = () => {
-	return (
-		<Checkbox class="flex items-center space-x-2">
-			<CheckboxControl />
-			<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-				Accept terms and conditions
-			</CheckboxLabel>
-		</Checkbox>
-	);
-};
+  return (
+    <Checkbox class="flex items-center space-x-2">
+      <CheckboxControl />
+      <CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+      </CheckboxLabel>
+    </Checkbox>
+  )
+}
 
-export default CheckboxDemo;
+export default CheckboxDemo
diff --git a/docs/src/registry/tailwindcss/examples/checkbox-disabled.tsx b/docs/src/registry/tailwindcss/examples/checkbox-disabled.tsx
index fff9a892..58c17c07 100644
--- a/docs/src/registry/tailwindcss/examples/checkbox-disabled.tsx
+++ b/docs/src/registry/tailwindcss/examples/checkbox-disabled.tsx
@@ -1,18 +1,18 @@
 import {
-	Checkbox,
-	CheckboxControl,
-	CheckboxLabel,
-} from "@/registry/tailwindcss/ui/checkbox";
+  Checkbox,
+  CheckboxControl,
+  CheckboxLabel,
+} from "@/registry/tailwindcss/ui/checkbox"
 
 const CheckboxDisabledDemo = () => {
-	return (
-		<Checkbox class="flex items-center space-x-2" disabled>
-			<CheckboxControl />
-			<CheckboxLabel class="data-[disabled]:(cursor-not-allowed opacity-70) text-sm font-medium leading-none">
-				Accept terms and conditions
-			</CheckboxLabel>
-		</Checkbox>
-	);
-};
+  return (
+    <Checkbox class="flex items-center space-x-2" disabled>
+      <CheckboxControl />
+      <CheckboxLabel class="data-[disabled]:(cursor-not-allowed opacity-70) text-sm font-medium leading-none">
+        Accept terms and conditions
+      </CheckboxLabel>
+    </Checkbox>
+  )
+}
 
-export default CheckboxDisabledDemo;
+export default CheckboxDisabledDemo
diff --git a/docs/src/registry/tailwindcss/examples/checkbox-with-text.tsx b/docs/src/registry/tailwindcss/examples/checkbox-with-text.tsx
index 4ce4a461..5bc09907 100644
--- a/docs/src/registry/tailwindcss/examples/checkbox-with-text.tsx
+++ b/docs/src/registry/tailwindcss/examples/checkbox-with-text.tsx
@@ -1,24 +1,24 @@
 import {
-	Checkbox,
-	CheckboxControl,
-	CheckboxDescription,
-	CheckboxLabel,
-} from "@/registry/tailwindcss/ui/checkbox";
+  Checkbox,
+  CheckboxControl,
+  CheckboxDescription,
+  CheckboxLabel,
+} from "@/registry/tailwindcss/ui/checkbox"
 
 const CheckboxWithTextDemo = () => {
-	return (
-		<Checkbox class="flex items-start space-x-2">
-			<CheckboxControl />
-			<div class="grid gap-1.5 leading-none">
-				<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-					Accept terms and conditions
-				</CheckboxLabel>
-				<CheckboxDescription class="text-sm text-muted-foreground">
-					You agree to our Terms of Service and Privacy Policy.
-				</CheckboxDescription>
-			</div>
-		</Checkbox>
-	);
-};
+  return (
+    <Checkbox class="flex items-start space-x-2">
+      <CheckboxControl />
+      <div class="grid gap-1.5 leading-none">
+        <CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          Accept terms and conditions
+        </CheckboxLabel>
+        <CheckboxDescription class="text-muted-foreground text-sm">
+          You agree to our Terms of Service and Privacy Policy.
+        </CheckboxDescription>
+      </div>
+    </Checkbox>
+  )
+}
 
-export default CheckboxWithTextDemo;
+export default CheckboxWithTextDemo
diff --git a/docs/src/registry/tailwindcss/examples/collapsible-demo.tsx b/docs/src/registry/tailwindcss/examples/collapsible-demo.tsx
index 9f26adb3..9b4bb551 100644
--- a/docs/src/registry/tailwindcss/examples/collapsible-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/collapsible-demo.tsx
@@ -1,55 +1,56 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { createSignal } from "solid-js"
+import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/registry/tailwindcss/ui/collapsible";
-import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible";
-import { createSignal } from "solid-js";
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/tailwindcss/ui/collapsible"
 
 const CollapsibleDemo = () => {
-	const [isOpen, setIsOpen] = createSignal(false);
+  const [isOpen, setIsOpen] = createSignal(false)
 
-	return (
-		<Collapsible
-			open={isOpen()}
-			onOpenChange={setIsOpen}
-			class="w-350px space-y-2"
-		>
-			<div class="flex items-center justify-between space-x-4 px-4">
-				<h4 class="text-sm font-semibold">
-					@RyanCarniato starred 2 repositories
-				</h4>
-				<CollapsibleTrigger
-					as={(props: CollapsibleTriggerProps) => (
-						<Button variant="ghost" size="sm" class="w-9 p-0" {...props}>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-4 w-4"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-								/>
-							</svg>
-							<span class="sr-only">Toggle</span>
-						</Button>
-					)}
-				/>
-			</div>
-			<div class="rounded-md border px-4 py-3 font-mono text-sm">solid-js</div>
-			<CollapsibleContent class="space-y-2">
-				<div class="rounded-md border px-4 py-3 font-mono text-sm">
-					solid-start
-				</div>
-			</CollapsibleContent>
-		</Collapsible>
-	);
-};
+  return (
+    <Collapsible
+      open={isOpen()}
+      onOpenChange={setIsOpen}
+      class="w-350px space-y-2"
+    >
+      <div class="flex items-center justify-between space-x-4 px-4">
+        <h4 class="text-sm font-semibold">
+          @RyanCarniato starred 2 repositories
+        </h4>
+        <CollapsibleTrigger
+          as={(props: CollapsibleTriggerProps) => (
+            <Button variant="ghost" size="sm" class="w-9 p-0" {...props}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+                />
+              </svg>
+              <span class="sr-only">Toggle</span>
+            </Button>
+          )}
+        />
+      </div>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">solid-js</div>
+      <CollapsibleContent class="space-y-2">
+        <div class="rounded-md border px-4 py-3 font-mono text-sm">
+          solid-start
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
 
-export default CollapsibleDemo;
+export default CollapsibleDemo
diff --git a/docs/src/registry/tailwindcss/examples/combobox-demo.tsx b/docs/src/registry/tailwindcss/examples/combobox-demo.tsx
index 001c7e88..189808fe 100644
--- a/docs/src/registry/tailwindcss/examples/combobox-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/combobox-demo.tsx
@@ -1,28 +1,28 @@
 import {
-	Combobox,
-	ComboboxContent,
-	ComboboxInput,
-	ComboboxItem,
-	ComboboxTrigger,
-} from "@/registry/tailwindcss/ui/combobox";
+  Combobox,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxTrigger,
+} from "@/registry/tailwindcss/ui/combobox"
 
-const ALL_OPTIONS = ["Next.js", "Astro", "Qwik", "SolidStart", "Nuxt.js"];
+const ALL_OPTIONS = ["Next.js", "Astro", "Qwik", "SolidStart", "Nuxt.js"]
 
 const ComboboxDemo = () => {
-	return (
-		<Combobox
-			options={ALL_OPTIONS}
-			placeholder="Search framework…"
-			itemComponent={(props) => (
-				<ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
-			)}
-		>
-			<ComboboxTrigger>
-				<ComboboxInput />
-			</ComboboxTrigger>
-			<ComboboxContent />
-		</Combobox>
-	);
-};
+  return (
+    <Combobox
+      options={ALL_OPTIONS}
+      placeholder="Search framework…"
+      itemComponent={(props) => (
+        <ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
+      )}
+    >
+      <ComboboxTrigger>
+        <ComboboxInput />
+      </ComboboxTrigger>
+      <ComboboxContent />
+    </Combobox>
+  )
+}
 
-export default ComboboxDemo;
+export default ComboboxDemo
diff --git a/docs/src/registry/tailwindcss/examples/command-demo.tsx b/docs/src/registry/tailwindcss/examples/command-demo.tsx
index 8eb3c642..ed9f7c47 100644
--- a/docs/src/registry/tailwindcss/examples/command-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/command-demo.tsx
@@ -1,194 +1,195 @@
+import { For, type JSXElement } from "solid-js"
+
 import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-	CommandShortcut,
-} from "@/registry/tailwindcss/ui/command";
-import { For, type JSXElement } from "solid-js";
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/registry/tailwindcss/ui/command"
 
 type Option = {
-	icon: JSXElement;
-	label: string;
-	disabled: boolean;
-	shortcut?: JSXElement;
-};
+  icon: JSXElement
+  label: string
+  disabled: boolean
+  shortcut?: JSXElement
+}
 
 type List = {
-	label: string;
-	options: Option[];
-};
+  label: string
+  options: Option[]
+}
 
 export const commandData: List[] = [
-	{
-		label: "Suggestions",
-		options: [
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="mr-2 h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
-						/>
-					</svg>
-				),
-				label: "Calendar",
-				disabled: false,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01" />
-							<path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
-						</g>
-					</svg>
-				),
-				label: "Search emoji",
-				disabled: false,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
-							<path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
-						</g>
-					</svg>
-				),
-				label: "Launch",
-				disabled: false,
-			},
-		],
-	},
-	{
-		label: "Settings",
-		options: [
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
-						/>
-					</svg>
-				),
-				label: "Profile",
-				disabled: true,
-				shortcut: <CommandShortcut>⌘P</CommandShortcut>,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-							<path d="m3 7l9 6l9-6" />
-						</g>
-					</svg>
-				),
-				label: "Mail",
-				disabled: false,
-				shortcut: <CommandShortcut>⌘B</CommandShortcut>,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
-							<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-						</g>
-					</svg>
-				),
-				label: "Setting",
-				disabled: false,
-				shortcut: <CommandShortcut>⌘S</CommandShortcut>,
-			},
-		],
-	},
-];
+  {
+    label: "Suggestions",
+    options: [
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2 h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
+            />
+          </svg>
+        ),
+        label: "Calendar",
+        disabled: false,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01" />
+              <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+            </g>
+          </svg>
+        ),
+        label: "Search emoji",
+        disabled: false,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
+              <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
+            </g>
+          </svg>
+        ),
+        label: "Launch",
+        disabled: false,
+      },
+    ],
+  },
+  {
+    label: "Settings",
+    options: [
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
+            />
+          </svg>
+        ),
+        label: "Profile",
+        disabled: true,
+        shortcut: <CommandShortcut>⌘P</CommandShortcut>,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <path d="m3 7l9 6l9-6" />
+            </g>
+          </svg>
+        ),
+        label: "Mail",
+        disabled: false,
+        shortcut: <CommandShortcut>⌘B</CommandShortcut>,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
+              <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
+            </g>
+          </svg>
+        ),
+        label: "Setting",
+        disabled: false,
+        shortcut: <CommandShortcut>⌘S</CommandShortcut>,
+      },
+    ],
+  },
+]
 
 const CommandDemo = () => {
-	return (
-		<Command class="rounded-lg border shadow-md">
-			<CommandInput placeholder="Type a command or search..." />
-			<CommandList>
-				<CommandEmpty>No results found.</CommandEmpty>
-				<For each={commandData}>
-					{(item) => (
-						<CommandGroup heading={item.label}>
-							<For each={item.options}>
-								{(item) => (
-									<CommandItem disabled={item.disabled}>
-										{item.icon}
-										<span>{item.label}</span>
-										{item.shortcut}
-									</CommandItem>
-								)}
-							</For>
-						</CommandGroup>
-					)}
-				</For>
-			</CommandList>
-		</Command>
-	);
-};
+  return (
+    <Command class="rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <For each={commandData}>
+          {(item) => (
+            <CommandGroup heading={item.label}>
+              <For each={item.options}>
+                {(item) => (
+                  <CommandItem disabled={item.disabled}>
+                    {item.icon}
+                    <span>{item.label}</span>
+                    {item.shortcut}
+                  </CommandItem>
+                )}
+              </For>
+            </CommandGroup>
+          )}
+        </For>
+      </CommandList>
+    </Command>
+  )
+}
 
-export default CommandDemo;
+export default CommandDemo
diff --git a/docs/src/registry/tailwindcss/examples/command-dialog.tsx b/docs/src/registry/tailwindcss/examples/command-dialog.tsx
index 6d414bab..d5db0352 100644
--- a/docs/src/registry/tailwindcss/examples/command-dialog.tsx
+++ b/docs/src/registry/tailwindcss/examples/command-dialog.tsx
@@ -1,67 +1,69 @@
+import { For, createEffect, createSignal, onCleanup } from "solid-js"
+
 import {
-	CommandDialog,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/registry/tailwindcss/ui/command";
-import { For, createEffect, createSignal, onCleanup } from "solid-js";
-import { commandData } from "./command-demo";
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/tailwindcss/ui/command"
+
+import { commandData } from "./command-demo"
 
 const CommandDialogDemo = () => {
-	const [open, setOpen] = createSignal(false);
+  const [open, setOpen] = createSignal(false)
 
-	createEffect(() => {
-		const down = (e: KeyboardEvent) => {
-			if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-				e.preventDefault();
-				setOpen((open) => !open);
-			}
-		};
+  createEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
 
-		document.addEventListener("keydown", down);
+    document.addEventListener("keydown", down)
 
-		onCleanup(() => {
-			document.removeEventListener("keydown", down);
-		});
-	});
+    onCleanup(() => {
+      document.removeEventListener("keydown", down)
+    })
+  })
 
-	return (
-		<>
-			<p class="text-sm text-muted-foreground">
-				Press{" "}
-				<kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-					<span class="text-xs">⌘</span>J
-				</kbd>
-			</p>
-			<CommandDialog
-				class="rounded-lg border shadow-md"
-				open={open()}
-				onOpenChange={setOpen}
-			>
-				<CommandInput placeholder="Type a command or search..." />
-				<CommandList>
-					<CommandEmpty>No results found.</CommandEmpty>
-					<For each={commandData}>
-						{(item) => (
-							<CommandGroup heading={item.label}>
-								<For each={item.options}>
-									{(item) => (
-										<CommandItem disabled={item.disabled}>
-											{item.icon}
-											<span>{item.label}</span>
-											{item.shortcut}
-										</CommandItem>
-									)}
-								</For>
-							</CommandGroup>
-						)}
-					</For>
-				</CommandList>
-			</CommandDialog>
-		</>
-	);
-};
+  return (
+    <>
+      <p class="text-muted-foreground text-sm">
+        Press{" "}
+        <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+          <span class="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog
+        class="rounded-lg border shadow-md"
+        open={open()}
+        onOpenChange={setOpen}
+      >
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <For each={commandData}>
+            {(item) => (
+              <CommandGroup heading={item.label}>
+                <For each={item.options}>
+                  {(item) => (
+                    <CommandItem disabled={item.disabled}>
+                      {item.icon}
+                      <span>{item.label}</span>
+                      {item.shortcut}
+                    </CommandItem>
+                  )}
+                </For>
+              </CommandGroup>
+            )}
+          </For>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
 
-export default CommandDialogDemo;
+export default CommandDialogDemo
diff --git a/docs/src/registry/tailwindcss/examples/context-menu-demo.tsx b/docs/src/registry/tailwindcss/examples/context-menu-demo.tsx
index 2ea65aa4..833f37f9 100644
--- a/docs/src/registry/tailwindcss/examples/context-menu-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/context-menu-demo.tsx
@@ -1,72 +1,72 @@
 import {
-	ContextMenu,
-	ContextMenuCheckboxItem,
-	ContextMenuContent,
-	ContextMenuGroup,
-	ContextMenuGroupLabel,
-	ContextMenuItem,
-	ContextMenuRadioGroup,
-	ContextMenuRadioItem,
-	ContextMenuSeparator,
-	ContextMenuShortcut,
-	ContextMenuSub,
-	ContextMenuSubContent,
-	ContextMenuSubTrigger,
-	ContextMenuTrigger,
-} from "@/registry/tailwindcss/ui/context-menu";
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/tailwindcss/ui/context-menu"
 
 const ContextMenuDemo = () => {
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-				Right click here
-			</ContextMenuTrigger>
-			<ContextMenuContent class="w-64">
-				<ContextMenuItem inset>
-					Back
-					<ContextMenuShortcut>⌘[</ContextMenuShortcut>
-				</ContextMenuItem>
-				<ContextMenuItem inset disabled>
-					Forward
-					<ContextMenuShortcut>⌘]</ContextMenuShortcut>
-				</ContextMenuItem>
-				<ContextMenuItem inset>
-					Reload
-					<ContextMenuShortcut>⌘R</ContextMenuShortcut>
-				</ContextMenuItem>
-				<ContextMenuSub>
-					<ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-					<ContextMenuSubContent class="w-48">
-						<ContextMenuItem>
-							Save Page As...
-							<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-						</ContextMenuItem>
-						<ContextMenuItem>Create Shortcut...</ContextMenuItem>
-						<ContextMenuItem>Name Window...</ContextMenuItem>
-						<ContextMenuSeparator />
-						<ContextMenuItem>Developer Tools</ContextMenuItem>
-					</ContextMenuSubContent>
-				</ContextMenuSub>
-				<ContextMenuSeparator />
-				<ContextMenuCheckboxItem checked>
-					Show Bookmarks Bar
-					<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-				</ContextMenuCheckboxItem>
-				<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-				<ContextMenuSeparator />
-				<ContextMenuGroup>
-					<ContextMenuGroupLabel inset>People</ContextMenuGroupLabel>
-					<ContextMenuSeparator />
-					<ContextMenuRadioGroup value="pedro">
-						<ContextMenuRadioItem value="pedro">
-							Pedro Duarte
-						</ContextMenuRadioItem>
-						<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-					</ContextMenuRadioGroup>
-				</ContextMenuGroup>
-			</ContextMenuContent>
-		</ContextMenu>
-	);
-};
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent class="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent class="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuGroupLabel inset>People</ContextMenuGroupLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioGroup value="pedro">
+            <ContextMenuRadioItem value="pedro">
+              Pedro Duarte
+            </ContextMenuRadioItem>
+            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
 
-export default ContextMenuDemo;
+export default ContextMenuDemo
diff --git a/docs/src/registry/tailwindcss/examples/data-table-data.ts b/docs/src/registry/tailwindcss/examples/data-table-data.ts
index e367a339..635ba4d4 100644
--- a/docs/src/registry/tailwindcss/examples/data-table-data.ts
+++ b/docs/src/registry/tailwindcss/examples/data-table-data.ts
@@ -1,158 +1,158 @@
-import type { Task } from "./data-table-demo";
+import type { Task } from "./data-table-demo"
 
 export const dataTable: Task[] = [
-	{
-		id: "5Cv_HJphd7Ct8vmUMbOoA",
-		code: "TASK-70",
-		title:
-			"I'll generate the digital ADP program, that should matrix the CSS panel!",
-		status: "in-progress",
-		label: "feature",
-	},
-	{
-		id: "STlHGZ5ZZI3C6qw5FRWLb",
-		code: "TASK-79",
-		title: "We need to index the neural RSS microchip!",
-		status: "done",
-		label: "enhancement",
-	},
-	{
-		id: "kKRNaR83olEfqlo87ydSS",
-		code: "TASK-46",
-		title: "Use the 1080p IP bus, then you can reboot the haptic firewall!",
-		status: "in-progress",
-		label: "feature",
-	},
-	{
-		id: "8RJXWg_xsCz4icZwAFtX9",
-		code: "TASK-72",
-		title:
-			"Calculating the array won't do anything, we need to program the neural UTF8 sensor!",
-		status: "done",
-		label: "feature",
-	},
-	{
-		id: "PA2XaWzlfR_rHYGjtvIm1",
-		code: "TASK-91",
-		title:
-			"Hacking the pixel won't do anything, we need to index the wireless SDD hard drive!",
-		status: "cancelled",
-		label: "feature",
-	},
-	{
-		id: "SCEhEoXDIYuOeEUh8RJ9K",
-		code: "TASK-51",
-		title:
-			"The SSD port is down, generate the solid state transmitter so we can synthesize the JBOD program!",
-		status: "in-progress",
-		label: "enhancement",
-	},
-	{
-		id: "HTx-1cFXRS7wUJgH5SspB",
-		code: "TASK-92",
-		title: "You can't parse the array without copying the neural AI matrix!",
-		status: "todo",
-		label: "documentation",
-	},
-	{
-		id: "IbWbOByfnFdV18G-dqL2n",
-		code: "TASK-55",
-		title:
-			"The AGP capacitor is down, input the online program so we can index the HTTP microchip!",
-		status: "todo",
-		label: "enhancement",
-	},
-	{
-		id: "qlbOOhg8XQciSiPaz5By_",
-		code: "TASK-91",
-		title:
-			"You can't quantify the microchip without transmitting the redundant IB alarm!",
-		status: "in-progress",
-		label: "feature",
-	},
-	{
-		id: "X5TrXjyqsNfhoDLksl7uU",
-		code: "TASK-15",
-		title: "Use the primary XML sensor, then you can hack the optical card!",
-		status: "in-progress",
-		label: "documentation",
-	},
-	{
-		id: "uunTga73xvp65mLxEuHia",
-		code: "TASK-18",
-		title:
-			"Use the solid state UTF8 microchip, then you can compress the multi-byte capacitor!",
-		status: "in-progress",
-		label: "documentation",
-	},
-	{
-		id: "K96w-mLNT9sQTN5UFck81",
-		code: "TASK-76",
-		title:
-			"The THX circuit is down, compress the neural system so we can synthesize the TLS bandwidth!",
-		status: "done",
-		label: "enhancement",
-	},
-	{
-		id: "iuCChR41hAw6udpKQ1Lgg",
-		code: "TASK-09",
-		title: "Use the neural AGP monitor, then you can parse the back-end feed!",
-		status: "done",
-		label: "bug",
-	},
-	{
-		id: "4ExQrW1EjDfVcwT0QYwiZ",
-		code: "TASK-29",
-		title: "We need to index the optical FTP program!",
-		status: "cancelled",
-		label: "documentation",
-	},
-	{
-		id: "kbbZfOSJFKDCDr8avk38l",
-		code: "TASK-55",
-		title:
-			"You can't hack the array without hacking the cross-platform IB monitor!",
-		status: "done",
-		label: "bug",
-	},
-	{
-		id: "nBqIFZfQRFWXriKgFHAZf",
-		code: "TASK-76",
-		title:
-			"I'll bypass the back-end COM microchip, that should alarm the RSS interface!",
-		status: "todo",
-		label: "documentation",
-	},
-	{
-		id: "VvJ--sJZRH_vLcS6jBBBl",
-		code: "TASK-10",
-		title:
-			"Parsing the array won't do anything, we need to compress the neural IP card!",
-		status: "in-progress",
-		label: "enhancement",
-	},
-	{
-		id: "TQsQy5ppTGFX0Lh9Tp2PY",
-		code: "TASK-74",
-		title:
-			"Use the cross-platform SSL microchip, then you can index the open-source array!",
-		status: "cancelled",
-		label: "enhancement",
-	},
-	{
-		id: "7utf3KwU2_SHVA_RKgDUM",
-		code: "TASK-27",
-		title:
-			"I'll program the open-source SQL feed, that should interface the UTF8 protocol!",
-		status: "cancelled",
-		label: "documentation",
-	},
-	{
-		id: "sn3m5uAQvNWlU5MNQSmvi",
-		code: "TASK-21",
-		title:
-			"Transmitting the feed won't do anything, we need to synthesize the digital VGA transmitter!",
-		status: "done",
-		label: "documentation",
-	},
-];
+  {
+    id: "5Cv_HJphd7Ct8vmUMbOoA",
+    code: "TASK-70",
+    title:
+      "I'll generate the digital ADP program, that should matrix the CSS panel!",
+    status: "in-progress",
+    label: "feature",
+  },
+  {
+    id: "STlHGZ5ZZI3C6qw5FRWLb",
+    code: "TASK-79",
+    title: "We need to index the neural RSS microchip!",
+    status: "done",
+    label: "enhancement",
+  },
+  {
+    id: "kKRNaR83olEfqlo87ydSS",
+    code: "TASK-46",
+    title: "Use the 1080p IP bus, then you can reboot the haptic firewall!",
+    status: "in-progress",
+    label: "feature",
+  },
+  {
+    id: "8RJXWg_xsCz4icZwAFtX9",
+    code: "TASK-72",
+    title:
+      "Calculating the array won't do anything, we need to program the neural UTF8 sensor!",
+    status: "done",
+    label: "feature",
+  },
+  {
+    id: "PA2XaWzlfR_rHYGjtvIm1",
+    code: "TASK-91",
+    title:
+      "Hacking the pixel won't do anything, we need to index the wireless SDD hard drive!",
+    status: "cancelled",
+    label: "feature",
+  },
+  {
+    id: "SCEhEoXDIYuOeEUh8RJ9K",
+    code: "TASK-51",
+    title:
+      "The SSD port is down, generate the solid state transmitter so we can synthesize the JBOD program!",
+    status: "in-progress",
+    label: "enhancement",
+  },
+  {
+    id: "HTx-1cFXRS7wUJgH5SspB",
+    code: "TASK-92",
+    title: "You can't parse the array without copying the neural AI matrix!",
+    status: "todo",
+    label: "documentation",
+  },
+  {
+    id: "IbWbOByfnFdV18G-dqL2n",
+    code: "TASK-55",
+    title:
+      "The AGP capacitor is down, input the online program so we can index the HTTP microchip!",
+    status: "todo",
+    label: "enhancement",
+  },
+  {
+    id: "qlbOOhg8XQciSiPaz5By_",
+    code: "TASK-91",
+    title:
+      "You can't quantify the microchip without transmitting the redundant IB alarm!",
+    status: "in-progress",
+    label: "feature",
+  },
+  {
+    id: "X5TrXjyqsNfhoDLksl7uU",
+    code: "TASK-15",
+    title: "Use the primary XML sensor, then you can hack the optical card!",
+    status: "in-progress",
+    label: "documentation",
+  },
+  {
+    id: "uunTga73xvp65mLxEuHia",
+    code: "TASK-18",
+    title:
+      "Use the solid state UTF8 microchip, then you can compress the multi-byte capacitor!",
+    status: "in-progress",
+    label: "documentation",
+  },
+  {
+    id: "K96w-mLNT9sQTN5UFck81",
+    code: "TASK-76",
+    title:
+      "The THX circuit is down, compress the neural system so we can synthesize the TLS bandwidth!",
+    status: "done",
+    label: "enhancement",
+  },
+  {
+    id: "iuCChR41hAw6udpKQ1Lgg",
+    code: "TASK-09",
+    title: "Use the neural AGP monitor, then you can parse the back-end feed!",
+    status: "done",
+    label: "bug",
+  },
+  {
+    id: "4ExQrW1EjDfVcwT0QYwiZ",
+    code: "TASK-29",
+    title: "We need to index the optical FTP program!",
+    status: "cancelled",
+    label: "documentation",
+  },
+  {
+    id: "kbbZfOSJFKDCDr8avk38l",
+    code: "TASK-55",
+    title:
+      "You can't hack the array without hacking the cross-platform IB monitor!",
+    status: "done",
+    label: "bug",
+  },
+  {
+    id: "nBqIFZfQRFWXriKgFHAZf",
+    code: "TASK-76",
+    title:
+      "I'll bypass the back-end COM microchip, that should alarm the RSS interface!",
+    status: "todo",
+    label: "documentation",
+  },
+  {
+    id: "VvJ--sJZRH_vLcS6jBBBl",
+    code: "TASK-10",
+    title:
+      "Parsing the array won't do anything, we need to compress the neural IP card!",
+    status: "in-progress",
+    label: "enhancement",
+  },
+  {
+    id: "TQsQy5ppTGFX0Lh9Tp2PY",
+    code: "TASK-74",
+    title:
+      "Use the cross-platform SSL microchip, then you can index the open-source array!",
+    status: "cancelled",
+    label: "enhancement",
+  },
+  {
+    id: "7utf3KwU2_SHVA_RKgDUM",
+    code: "TASK-27",
+    title:
+      "I'll program the open-source SQL feed, that should interface the UTF8 protocol!",
+    status: "cancelled",
+    label: "documentation",
+  },
+  {
+    id: "sn3m5uAQvNWlU5MNQSmvi",
+    code: "TASK-21",
+    title:
+      "Transmitting the feed won't do anything, we need to synthesize the digital VGA transmitter!",
+    status: "done",
+    label: "documentation",
+  },
+]
diff --git a/docs/src/registry/tailwindcss/examples/data-table-demo.tsx b/docs/src/registry/tailwindcss/examples/data-table-demo.tsx
index 2b9d2578..028e11f6 100644
--- a/docs/src/registry/tailwindcss/examples/data-table-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/data-table-demo.tsx
@@ -1,794 +1,792 @@
-import { Badge } from "@/registry/tailwindcss/ui/badge";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { Checkbox, CheckboxControl } from "@/registry/tailwindcss/ui/checkbox";
 import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
+  For,
+  Match,
+  Show,
+  Switch,
+  createMemo,
+  createSignal,
+  splitProps,
+  type VoidProps,
+} from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+import type { SelectTriggerProps } from "@kobalte/core/select"
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/registry/tailwindcss/ui/select";
+  createSolidTable,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type Column,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+} from "@tanstack/solid-table"
+
+import { Badge } from "@/registry/tailwindcss/ui/badge"
+import { Button } from "@/registry/tailwindcss/ui/button"
+import { Checkbox, CheckboxControl } from "@/registry/tailwindcss/ui/checkbox"
 import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/registry/tailwindcss/ui/table";
-import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import type { SelectTriggerProps } from "@kobalte/core/select";
-import type {
-	Column,
-	ColumnDef,
-	ColumnFiltersState,
-	SortingState,
-	VisibilityState,
-} from "@tanstack/solid-table";
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 import {
-	createSolidTable,
-	flexRender,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-} from "@tanstack/solid-table";
-import type { VoidProps } from "solid-js";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/tailwindcss/ui/select"
 import {
-	For,
-	Match,
-	Show,
-	Switch,
-	createMemo,
-	createSignal,
-	splitProps,
-} from "solid-js";
-import { dataTable } from "./data-table-data";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/tailwindcss/ui/table"
+import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
+
+import { dataTable } from "./data-table-data"
 
 export type Task = {
-	id: string;
-	code: string;
-	title: string;
-	status: "todo" | "in-progress" | "done" | "cancelled";
-	label: "bug" | "feature" | "enhancement" | "documentation";
-};
+  id: string
+  code: string
+  title: string
+  status: "todo" | "in-progress" | "done" | "cancelled"
+  label: "bug" | "feature" | "enhancement" | "documentation"
+}
 
 const filteredStatusList = () =>
-	["todo", "in-progress", "done", "cancelled"].map((e) => ({
-		title: e,
-		value: e,
-	}));
+  ["todo", "in-progress", "done", "cancelled"].map((e) => ({
+    title: e,
+    value: e,
+  }))
 
 const TableColumnHeader = <TData, TValue>(
-	props: VoidProps<{ column: Column<TData, TValue>; title: string }>,
+  props: VoidProps<{ column: Column<TData, TValue>; title: string }>
 ) => {
-	const [local] = splitProps(props, ["column", "title"]);
+  const [local] = splitProps(props, ["column", "title"])
 
-	return (
-		<Show
-			when={local.column.getCanSort() && local.column.getCanHide()}
-			fallback={<span class="text-sm font-medium">{local.title}</span>}
-		>
-			<div class="flex items-center space-x-2">
-				<DropdownMenu>
-					<DropdownMenuTrigger
-						as={(props: DropdownMenuTriggerProps) => (
-							<Button
-								aria-label={
-									local.column.getIsSorted() === "desc"
-										? "Sorted descending. Click to sort ascending."
-										: local.column.getIsSorted() === "asc"
-											? "Sorted ascending. Click to sort descending."
-											: "Not sorted. Click to sort ascending."
-								}
-								variant="ghost"
-								class="-ml-4 h-8 data-[expanded]:bg-accent"
-								{...props}
-							>
-								<span>{local.title}</span>
-								<div class="ml-1">
-									<Switch
-										fallback={
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="size-3.5"
-												viewBox="0 0 24 24"
-												aria-hidden="true"
-											>
-												<path
-													fill="none"
-													stroke="currentColor"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-												/>
-											</svg>
-										}
-									>
-										<Match when={local.column.getIsSorted() === "asc"}>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="size-3.5"
-												viewBox="0 0 24 24"
-												aria-hidden="true"
-											>
-												<path
-													fill="none"
-													stroke="currentColor"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M12 5v14m4-10l-4-4M8 9l4-4"
-												/>
-											</svg>
-										</Match>
-										<Match when={local.column.getIsSorted() === "desc"}>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="size-3.5"
-												viewBox="0 0 24 24"
-												aria-hidden="true"
-											>
-												<path
-													fill="none"
-													stroke="currentColor"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M12 5v14m4-4l-4 4m-4-4l4 4"
-												/>
-											</svg>
-										</Match>
-									</Switch>
-								</div>
-							</Button>
-						)}
-					/>
-					<DropdownMenuContent>
-						<Show when={local.column.getCanSort()}>
-							<DropdownMenuItem
-								aria-label="Sort ascending"
-								onClick={() => local.column.toggleSorting(false, true)}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="mr-2 size-4 text-muted-foreground/70"
-									aria-hidden="true"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M12 5v14m4-10l-4-4M8 9l4-4"
-									/>
-								</svg>
-								Asc
-							</DropdownMenuItem>
-							<DropdownMenuItem
-								aria-label="Sort descending"
-								onClick={() => local.column.toggleSorting(true, true)}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="mr-2 size-4 text-muted-foreground/70"
-									aria-hidden="true"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M12 5v14m4-4l-4 4m-4-4l4 4"
-									/>
-								</svg>
-								Desc
-							</DropdownMenuItem>
-						</Show>
+  return (
+    <Show
+      when={local.column.getCanSort() && local.column.getCanHide()}
+      fallback={<span class="text-sm font-medium">{local.title}</span>}
+    >
+      <div class="flex items-center space-x-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            as={(props: DropdownMenuTriggerProps) => (
+              <Button
+                aria-label={
+                  local.column.getIsSorted() === "desc"
+                    ? "Sorted descending. Click to sort ascending."
+                    : local.column.getIsSorted() === "asc"
+                      ? "Sorted ascending. Click to sort descending."
+                      : "Not sorted. Click to sort ascending."
+                }
+                variant="ghost"
+                class="data-[expanded]:bg-accent -ml-4 h-8"
+                {...props}
+              >
+                <span>{local.title}</span>
+                <div class="ml-1">
+                  <Switch
+                    fallback={
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+                        />
+                      </svg>
+                    }
+                  >
+                    <Match when={local.column.getIsSorted() === "asc"}>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 5v14m4-10l-4-4M8 9l4-4"
+                        />
+                      </svg>
+                    </Match>
+                    <Match when={local.column.getIsSorted() === "desc"}>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-3.5"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 5v14m4-4l-4 4m-4-4l4 4"
+                        />
+                      </svg>
+                    </Match>
+                  </Switch>
+                </div>
+              </Button>
+            )}
+          />
+          <DropdownMenuContent>
+            <Show when={local.column.getCanSort()}>
+              <DropdownMenuItem
+                aria-label="Sort ascending"
+                onClick={() => local.column.toggleSorting(false, true)}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="text-muted-foreground/70 mr-2 size-4"
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 5v14m4-10l-4-4M8 9l4-4"
+                  />
+                </svg>
+                Asc
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                aria-label="Sort descending"
+                onClick={() => local.column.toggleSorting(true, true)}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="text-muted-foreground/70 mr-2 size-4"
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 5v14m4-4l-4 4m-4-4l4 4"
+                  />
+                </svg>
+                Desc
+              </DropdownMenuItem>
+            </Show>
 
-						<Show when={local.column.getCanSort() && local.column.getCanHide()}>
-							<DropdownMenuSeparator />
-						</Show>
+            <Show when={local.column.getCanSort() && local.column.getCanHide()}>
+              <DropdownMenuSeparator />
+            </Show>
 
-						<Show when={local.column.getCanHide()}>
-							<DropdownMenuItem
-								aria-label="Hide column"
-								onClick={() => local.column.toggleVisibility(false)}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="mr-2 size-4 text-muted-foreground/70"
-									aria-hidden="true"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M21 9c-2.4 2.667-5.4 4-9 4c-3.6 0-6.6-1.333-9-4m0 6l2.5-3.8M21 14.976L18.508 11.2M9 17l.5-4m5.5 4l-.5-4"
-									/>
-								</svg>
-								Hide
-							</DropdownMenuItem>
-						</Show>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
-		</Show>
-	);
-};
+            <Show when={local.column.getCanHide()}>
+              <DropdownMenuItem
+                aria-label="Hide column"
+                onClick={() => local.column.toggleVisibility(false)}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="text-muted-foreground/70 mr-2 size-4"
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 9c-2.4 2.667-5.4 4-9 4c-3.6 0-6.6-1.333-9-4m0 6l2.5-3.8M21 14.976L18.508 11.2M9 17l.5-4m5.5 4l-.5-4"
+                  />
+                </svg>
+                Hide
+              </DropdownMenuItem>
+            </Show>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </Show>
+  )
+}
 
 const columns: ColumnDef<Task>[] = [
-	{
-		id: "selects",
-		header: (props) => (
-			<Checkbox
-				indeterminate={props.table.getIsSomePageRowsSelected()}
-				checked={props.table.getIsAllPageRowsSelected()}
-				onChange={(value) => props.table.toggleAllPageRowsSelected(value)}
-				aria-label="Select all"
-				class="translate-y-[2px]"
-			>
-				<CheckboxControl />
-			</Checkbox>
-		),
-		cell: (props) => (
-			<Checkbox
-				checked={props.row.getIsSelected()}
-				onChange={(value) => props.row.toggleSelected(value)}
-				aria-label="Select row"
-				class="translate-y-[2px]"
-			>
-				<CheckboxControl />
-			</Checkbox>
-		),
-		enableSorting: false,
-		enableHiding: false,
-	},
-	{
-		accessorKey: "code",
-		header: (props) => <TableColumnHeader column={props.column} title="Task" />,
-		cell: (props) => <div class="w-[70px]">{props.row.getValue("code")}</div>,
-		enableSorting: false,
-		enableHiding: false,
-	},
-	{
-		accessorKey: "title",
-		header: (props) => (
-			<TableColumnHeader column={props.column} title="Title" />
-		),
-		cell: (props) => (
-			<div class="flex space-x-2">
-				<Badge variant="outline">{props.row.original.label}</Badge>
-				<span class="max-w-[250px] truncate font-medium">
-					{props.row.getValue("title")}
-				</span>
-			</div>
-		),
-	},
-	{
-		accessorKey: "status",
-		header: (props) => (
-			<TableColumnHeader column={props.column} title="Status" />
-		),
-		cell: (props) => (
-			<div class="flex w-[100px] items-center">
-				<Switch>
-					<Match when={props.row.original.status === "cancelled"}>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="1em"
-							height="1em"
-							class="mr-2 size-4 text-muted-foreground"
-							aria-hidden="true"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M10 20.777a8.942 8.942 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223M14 14l-4-4m0 4l4-4"
-							/>
-						</svg>
-					</Match>
-					<Match when={props.row.original.status === "done"}>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="1em"
-							height="1em"
-							class="mr-2 size-4 text-muted-foreground"
-							aria-hidden="true"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M10 20.777a8.942 8.942 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223" />
-								<path d="m9 12l2 2l4-4" />
-							</g>
-						</svg>
-					</Match>
-					<Match when={props.row.original.status === "in-progress"}>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="1em"
-							height="1em"
-							class="mr-2 size-4 text-muted-foreground"
-							aria-hidden="true"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M10 20.777a8.942 8.942 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223M12 9l-2 3h4l-2 3"
-							/>
-						</svg>
-					</Match>
-					<Match when={props.row.original.status === "todo"}>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="1em"
-							height="1em"
-							class="mr-2 size-4 text-muted-foreground"
-							aria-hidden="true"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M12 16v.01M12 13a2 2 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483M10 20.777a8.942 8.942 0 0 1-2.48-.969" />
-								<path d="M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223" />
-							</g>
-						</svg>
-					</Match>
-				</Switch>
-				<span class="capitalize">{props.row.original.status}</span>
-			</div>
-		),
-		filterFn: (row, id, value) => {
-			return Array.isArray(value) && value.includes(row.getValue(id));
-		},
-	},
-	{
-		id: "actions",
-		cell: () => (
-			<DropdownMenu placement="bottom-end">
-				<DropdownMenuTrigger class="flex items-center justify-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
-						/>
-						<title>Action</title>
-					</svg>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent>
-					<DropdownMenuItem>Edit</DropdownMenuItem>
-					<DropdownMenuItem>Delete</DropdownMenuItem>
-				</DropdownMenuContent>
-			</DropdownMenu>
-		),
-	},
-];
+  {
+    id: "selects",
+    header: (props) => (
+      <Checkbox
+        indeterminate={props.table.getIsSomePageRowsSelected()}
+        checked={props.table.getIsAllPageRowsSelected()}
+        onChange={(value) => props.table.toggleAllPageRowsSelected(value)}
+        aria-label="Select all"
+        class="translate-y-[2px]"
+      >
+        <CheckboxControl />
+      </Checkbox>
+    ),
+    cell: (props) => (
+      <Checkbox
+        checked={props.row.getIsSelected()}
+        onChange={(value) => props.row.toggleSelected(value)}
+        aria-label="Select row"
+        class="translate-y-[2px]"
+      >
+        <CheckboxControl />
+      </Checkbox>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "code",
+    header: (props) => <TableColumnHeader column={props.column} title="Task" />,
+    cell: (props) => <div class="w-[70px]">{props.row.getValue("code")}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "title",
+    header: (props) => (
+      <TableColumnHeader column={props.column} title="Title" />
+    ),
+    cell: (props) => (
+      <div class="flex space-x-2">
+        <Badge variant="outline">{props.row.original.label}</Badge>
+        <span class="max-w-[250px] truncate font-medium">
+          {props.row.getValue("title")}
+        </span>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: (props) => (
+      <TableColumnHeader column={props.column} title="Status" />
+    ),
+    cell: (props) => (
+      <div class="flex w-[100px] items-center">
+        <Switch>
+          <Match when={props.row.original.status === "cancelled"}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              class="text-muted-foreground mr-2 size-4"
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 20.777a8.942 8.942 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223M14 14l-4-4m0 4l4-4"
+              />
+            </svg>
+          </Match>
+          <Match when={props.row.original.status === "done"}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              class="text-muted-foreground mr-2 size-4"
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M10 20.777a8.942 8.942 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223" />
+                <path d="m9 12l2 2l4-4" />
+              </g>
+            </svg>
+          </Match>
+          <Match when={props.row.original.status === "in-progress"}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              class="text-muted-foreground mr-2 size-4"
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 20.777a8.942 8.942 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223M12 9l-2 3h4l-2 3"
+              />
+            </svg>
+          </Match>
+          <Match when={props.row.original.status === "todo"}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              class="text-muted-foreground mr-2 size-4"
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M12 16v.01M12 13a2 2 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483M10 20.777a8.942 8.942 0 0 1-2.48-.969" />
+                <path d="M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a8.961 8.961 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A8.954 8.954 0 0 1 10 3.223" />
+              </g>
+            </svg>
+          </Match>
+        </Switch>
+        <span class="capitalize">{props.row.original.status}</span>
+      </div>
+    ),
+    filterFn: (row, id, value) => {
+      return Array.isArray(value) && value.includes(row.getValue(id))
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <DropdownMenu placement="bottom-end">
+        <DropdownMenuTrigger class="flex items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+            />
+            <title>Action</title>
+          </svg>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
 
 const DataTableDemo = () => {
-	const data = createMemo(() => dataTable);
-	const [rowSelection, setRowSelection] = createSignal({});
-	const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
-		{},
-	);
-	const [columnFilters, setColumnFilters] = createSignal<ColumnFiltersState>(
-		[],
-	);
-	const [sorting, setSorting] = createSignal<SortingState>([]);
+  const data = createMemo(() => dataTable)
+  const [rowSelection, setRowSelection] = createSignal({})
+  const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
+    {}
+  )
+  const [columnFilters, setColumnFilters] = createSignal<ColumnFiltersState>([])
+  const [sorting, setSorting] = createSignal<SortingState>([])
 
-	const table = createSolidTable({
-		get data() {
-			return data();
-		},
-		columns,
-		state: {
-			get sorting() {
-				return sorting();
-			},
-			get columnVisibility() {
-				return columnVisibility();
-			},
-			get rowSelection() {
-				return rowSelection();
-			},
-			get columnFilters() {
-				return columnFilters();
-			},
-		},
-		enableRowSelection: true,
-		onRowSelectionChange: setRowSelection,
-		onSortingChange: setSorting,
-		onColumnFiltersChange: setColumnFilters,
-		onColumnVisibilityChange: setColumnVisibility,
-		getCoreRowModel: getCoreRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-	});
+  const table = createSolidTable({
+    get data() {
+      return data()
+    },
+    columns,
+    state: {
+      get sorting() {
+        return sorting()
+      },
+      get columnVisibility() {
+        return columnVisibility()
+      },
+      get rowSelection() {
+        return rowSelection()
+      },
+      get columnFilters() {
+        return columnFilters()
+      },
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
 
-	return (
-		<div class="w-full space-y-2.5">
-			<div class="flex items-center justify-between gap-2">
-				<TextFieldRoot>
-					<TextField
-						type="text"
-						placeholder="Filter titles..."
-						class="h-8"
-						value={table.getColumn("title")?.getFilterValue() as string}
-						onInput={(e) =>
-							table.getColumn("title")?.setFilterValue(e.currentTarget.value)
-						}
-					/>
-				</TextFieldRoot>
-				<div class="flex items-center gap-2">
-					<Select
-						onChange={(e) => {
-							table
-								.getColumn("status")
-								?.setFilterValue(e.length ? e.map((v) => v.value) : undefined);
-						}}
-						placement="bottom-end"
-						sameWidth={false}
-						options={filteredStatusList()}
-						optionValue="value"
-						optionTextValue="title"
-						multiple
-						itemComponent={(props) => (
-							<SelectItem item={props.item} class="capitalize">
-								{props.item.rawValue.title}
-							</SelectItem>
-						)}
-					>
-						<SelectTrigger
-							as={(props: SelectTriggerProps) => (
-								<Button
-									{...props}
-									aria-label="Filter status"
-									variant="outline"
-									class="relative flex h-8 w-full gap-2 [&>svg]:hidden"
-								>
-									<div class="flex items-center">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="mr-2 size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="m12 20l-3 1v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1.5m2.001 5.5a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75"
-											/>
-											<title>Status</title>
-										</svg>
-										Status
-									</div>
-									<SelectValue<
-										ReturnType<typeof filteredStatusList>[0]
-									> class="flex h-full items-center gap-1">
-										{(state) => (
-											<Show
-												when={state.selectedOptions().length <= 2}
-												fallback={
-													<>
-														<Badge class="absolute -top-2 right-0 block size-4 rounded-full p-0 capitalize md:hidden">
-															{state.selectedOptions().length}
-														</Badge>
-														<Badge class="hidden capitalize md:inline-flex py-0 px-1">
-															{state.selectedOptions().length} selected
-														</Badge>
-													</>
-												}
-											>
-												<For each={state.selectedOptions()}>
-													{(item) => (
-														<>
-															<Badge class="absolute -top-2 right-0 block size-4 rounded-full p-0 capitalize md:hidden">
-																{state.selectedOptions().length}
-															</Badge>
-															<Badge class="hidden capitalize md:inline-flex py-0 px-1">
-																{item.title}
-															</Badge>
-														</>
-													)}
-												</For>
-											</Show>
-										)}
-									</SelectValue>
-								</Button>
-							)}
-						/>
-						<SelectContent />
-					</Select>
-					<DropdownMenu placement="bottom-end">
-						<DropdownMenuTrigger
-							as={(props: DropdownMenuTriggerProps) => (
-								<Button
-									{...props}
-									aria-label="Toggle columns"
-									variant="outline"
-									class="flex h-8"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="mr-2 size-4"
-										viewBox="0 0 24 24"
-									>
-										<g
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-										>
-											<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" />
-											<path d="M12 18c-3.6 0-6.6-2-9-6c2.4-4 5.4-6 9-6c3.6 0 6.6 2 9 6m-3.999 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75" />
-										</g>
-										<title>View</title>
-									</svg>
-									View
-								</Button>
-							)}
-						/>
-						<DropdownMenuContent class="w-40">
-							<DropdownMenuGroup>
-								<DropdownMenuGroupLabel>Toggle columns</DropdownMenuGroupLabel>
-								<DropdownMenuSeparator />
-								<For
-									each={table
-										.getAllColumns()
-										.filter(
-											(column) =>
-												typeof column.accessorFn !== "undefined" &&
-												column.getCanHide(),
-										)}
-								>
-									{(column) => (
-										<DropdownMenuCheckboxItem
-											class="capitalize"
-											checked={column.getIsVisible()}
-											onChange={(value) => column.toggleVisibility(value)}
-										>
-											<span class="truncate">{column.id}</span>
-										</DropdownMenuCheckboxItem>
-									)}
-								</For>
-							</DropdownMenuGroup>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
-			</div>
-			<div class="rounded-md border">
-				<Table>
-					<TableHeader>
-						<For each={table.getHeaderGroups()}>
-							{(headerGroup) => (
-								<TableRow>
-									<For each={headerGroup.headers}>
-										{(header) => {
-											return (
-												<TableHead>
-													{header.isPlaceholder
-														? null
-														: flexRender(
-																header.column.columnDef.header,
-																header.getContext(),
-															)}
-												</TableHead>
-											);
-										}}
-									</For>
-								</TableRow>
-							)}
-						</For>
-					</TableHeader>
-					<TableBody>
-						<Show
-							when={table.getRowModel().rows.length}
-							fallback={
-								<TableRow>
-									<TableCell colSpan={columns.length} class="h-24 text-center">
-										No results.
-									</TableCell>
-								</TableRow>
-							}
-						>
-							<For each={table.getRowModel().rows}>
-								{(row) => (
-									<TableRow data-state={row.getIsSelected() && "selected"}>
-										<For each={row.getVisibleCells()}>
-											{(cell) => (
-												<TableCell>
-													{flexRender(
-														cell.column.columnDef.cell,
-														cell.getContext(),
-													)}
-												</TableCell>
-											)}
-										</For>
-									</TableRow>
-								)}
-							</For>
-						</Show>
-					</TableBody>
-				</Table>
-			</div>
-			<div class="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row">
-				<div class="flex-1 whitespace-nowrap text-sm text-muted-foreground">
-					{table.getFilteredSelectedRowModel().rows.length} of{" "}
-					{table.getFilteredRowModel().rows.length} row(s) selected.
-				</div>
-				<div class="flex flex-col-reverse items-center gap-4 sm:flex-row">
-					<div class="flex items-center space-x-2">
-						<p class="whitespace-nowrap text-sm font-medium">Rows per page</p>
-						<Select
-							value={table.getState().pagination.pageSize}
-							onChange={(value) => value && table.setPageSize(value)}
-							options={[10, 20, 30, 40, 50]}
-							itemComponent={(props) => (
-								<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-							)}
-						>
-							<SelectTrigger class="h-8 w-[4.5rem]">
-								<SelectValue<string>>
-									{(state) => state.selectedOption()}
-								</SelectValue>
-							</SelectTrigger>
-							<SelectContent />
-						</Select>
-					</div>
-					<div class="flex items-center justify-center whitespace-nowrap text-sm font-medium">
-						Page {table.getState().pagination.pageIndex + 1} of{" "}
-						{table.getPageCount()}
-					</div>
-					<div class="flex items-center space-x-2">
-						<Button
-							aria-label="Go to first page"
-							variant="outline"
-							class="flex size-8 p-0"
-							onClick={() => table.setPageIndex(0)}
-							disabled={!table.getCanPreviousPage()}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								aria-hidden="true"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m11 7l-5 5l5 5m6-10l-5 5l5 5"
-								/>
-							</svg>
-						</Button>
-						<Button
-							aria-label="Go to previous page"
-							variant="outline"
-							size="icon"
-							class="size-8"
-							onClick={() => table.previousPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								aria-hidden="true"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m15 6l-6 6l6 6"
-								/>
-							</svg>
-						</Button>
-						<Button
-							aria-label="Go to next page"
-							variant="outline"
-							size="icon"
-							class="size-8"
-							onClick={() => table.nextPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								aria-hidden="true"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m9 6l6 6l-6 6"
-								/>
-							</svg>
-						</Button>
-						<Button
-							aria-label="Go to last page"
-							variant="outline"
-							size="icon"
-							class="flex size-8"
-							onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-							disabled={!table.getCanNextPage()}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								aria-hidden="true"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m7 7l5 5l-5 5m6-10l5 5l-5 5"
-								/>
-							</svg>
-						</Button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="w-full space-y-2.5">
+      <div class="flex items-center justify-between gap-2">
+        <TextFieldRoot>
+          <TextField
+            type="text"
+            placeholder="Filter titles..."
+            class="h-8"
+            value={table.getColumn("title")?.getFilterValue() as string}
+            onInput={(e) =>
+              table.getColumn("title")?.setFilterValue(e.currentTarget.value)
+            }
+          />
+        </TextFieldRoot>
+        <div class="flex items-center gap-2">
+          <Select
+            onChange={(e) => {
+              table
+                .getColumn("status")
+                ?.setFilterValue(e.length ? e.map((v) => v.value) : undefined)
+            }}
+            placement="bottom-end"
+            sameWidth={false}
+            options={filteredStatusList()}
+            optionValue="value"
+            optionTextValue="title"
+            multiple
+            itemComponent={(props) => (
+              <SelectItem item={props.item} class="capitalize">
+                {props.item.rawValue.title}
+              </SelectItem>
+            )}
+          >
+            <SelectTrigger
+              as={(props: SelectTriggerProps) => (
+                <Button
+                  {...props}
+                  aria-label="Filter status"
+                  variant="outline"
+                  class="relative flex h-8 w-full gap-2 [&>svg]:hidden"
+                >
+                  <div class="flex items-center">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="mr-2 size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="m12 20l-3 1v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1.5m2.001 5.5a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75"
+                      />
+                      <title>Status</title>
+                    </svg>
+                    Status
+                  </div>
+                  <SelectValue<
+                    ReturnType<typeof filteredStatusList>[0]
+                  > class="flex h-full items-center gap-1">
+                    {(state) => (
+                      <Show
+                        when={state.selectedOptions().length <= 2}
+                        fallback={
+                          <>
+                            <Badge class="absolute -top-2 right-0 block size-4 rounded-full p-0 capitalize md:hidden">
+                              {state.selectedOptions().length}
+                            </Badge>
+                            <Badge class="hidden px-1 py-0 capitalize md:inline-flex">
+                              {state.selectedOptions().length} selected
+                            </Badge>
+                          </>
+                        }
+                      >
+                        <For each={state.selectedOptions()}>
+                          {(item) => (
+                            <>
+                              <Badge class="absolute -top-2 right-0 block size-4 rounded-full p-0 capitalize md:hidden">
+                                {state.selectedOptions().length}
+                              </Badge>
+                              <Badge class="hidden px-1 py-0 capitalize md:inline-flex">
+                                {item.title}
+                              </Badge>
+                            </>
+                          )}
+                        </For>
+                      </Show>
+                    )}
+                  </SelectValue>
+                </Button>
+              )}
+            />
+            <SelectContent />
+          </Select>
+          <DropdownMenu placement="bottom-end">
+            <DropdownMenuTrigger
+              as={(props: DropdownMenuTriggerProps) => (
+                <Button
+                  {...props}
+                  aria-label="Toggle columns"
+                  variant="outline"
+                  class="flex h-8"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="mr-2 size-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                    >
+                      <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" />
+                      <path d="M12 18c-3.6 0-6.6-2-9-6c2.4-4 5.4-6 9-6c3.6 0 6.6 2 9 6m-3.999 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75" />
+                    </g>
+                    <title>View</title>
+                  </svg>
+                  View
+                </Button>
+              )}
+            />
+            <DropdownMenuContent class="w-40">
+              <DropdownMenuGroup>
+                <DropdownMenuGroupLabel>Toggle columns</DropdownMenuGroupLabel>
+                <DropdownMenuSeparator />
+                <For
+                  each={table
+                    .getAllColumns()
+                    .filter(
+                      (column) =>
+                        typeof column.accessorFn !== "undefined" &&
+                        column.getCanHide()
+                    )}
+                >
+                  {(column) => (
+                    <DropdownMenuCheckboxItem
+                      class="capitalize"
+                      checked={column.getIsVisible()}
+                      onChange={(value) => column.toggleVisibility(value)}
+                    >
+                      <span class="truncate">{column.id}</span>
+                    </DropdownMenuCheckboxItem>
+                  )}
+                </For>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <div class="rounded-md border">
+        <Table>
+          <TableHeader>
+            <For each={table.getHeaderGroups()}>
+              {(headerGroup) => (
+                <TableRow>
+                  <For each={headerGroup.headers}>
+                    {(header) => {
+                      return (
+                        <TableHead>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    }}
+                  </For>
+                </TableRow>
+              )}
+            </For>
+          </TableHeader>
+          <TableBody>
+            <Show
+              when={table.getRowModel().rows.length}
+              fallback={
+                <TableRow>
+                  <TableCell colSpan={columns.length} class="h-24 text-center">
+                    No results.
+                  </TableCell>
+                </TableRow>
+              }
+            >
+              <For each={table.getRowModel().rows}>
+                {(row) => (
+                  <TableRow data-state={row.getIsSelected() && "selected"}>
+                    <For each={row.getVisibleCells()}>
+                      {(cell) => (
+                        <TableCell>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      )}
+                    </For>
+                  </TableRow>
+                )}
+              </For>
+            </Show>
+          </TableBody>
+        </Table>
+      </div>
+      <div class="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row">
+        <div class="text-muted-foreground flex-1 whitespace-nowrap text-sm">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <div class="flex flex-col-reverse items-center gap-4 sm:flex-row">
+          <div class="flex items-center space-x-2">
+            <p class="whitespace-nowrap text-sm font-medium">Rows per page</p>
+            <Select
+              value={table.getState().pagination.pageSize}
+              onChange={(value) => value && table.setPageSize(value)}
+              options={[10, 20, 30, 40, 50]}
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger class="h-8 w-[4.5rem]">
+                <SelectValue<string>>
+                  {(state) => state.selectedOption()}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <div class="flex items-center justify-center whitespace-nowrap text-sm font-medium">
+            Page {table.getState().pagination.pageIndex + 1} of{" "}
+            {table.getPageCount()}
+          </div>
+          <div class="flex items-center space-x-2">
+            <Button
+              aria-label="Go to first page"
+              variant="outline"
+              class="flex size-8 p-0"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m11 7l-5 5l5 5m6-10l-5 5l5 5"
+                />
+              </svg>
+            </Button>
+            <Button
+              aria-label="Go to previous page"
+              variant="outline"
+              size="icon"
+              class="size-8"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m15 6l-6 6l6 6"
+                />
+              </svg>
+            </Button>
+            <Button
+              aria-label="Go to next page"
+              variant="outline"
+              size="icon"
+              class="size-8"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m9 6l6 6l-6 6"
+                />
+              </svg>
+            </Button>
+            <Button
+              aria-label="Go to last page"
+              variant="outline"
+              size="icon"
+              class="flex size-8"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m7 7l5 5l-5 5m6-10l5 5l-5 5"
+                />
+              </svg>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
 
-export default DataTableDemo;
+export default DataTableDemo
diff --git a/docs/src/registry/tailwindcss/examples/date-picker-demo.tsx b/docs/src/registry/tailwindcss/examples/date-picker-demo.tsx
index 6734cfb5..75034755 100644
--- a/docs/src/registry/tailwindcss/examples/date-picker-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/date-picker-demo.tsx
@@ -1,157 +1,158 @@
+import { Index } from "solid-js"
+import { Portal } from "solid-js/web"
+
 import {
-	DatePicker,
-	DatePickerContent,
-	DatePickerContext,
-	DatePickerControl,
-	DatePickerInput,
-	DatePickerPositioner,
-	DatePickerRangeText,
-	DatePickerTable,
-	DatePickerTableBody,
-	DatePickerTableCell,
-	DatePickerTableCellTrigger,
-	DatePickerTableHead,
-	DatePickerTableHeader,
-	DatePickerTableRow,
-	DatePickerTrigger,
-	DatePickerView,
-	DatePickerViewControl,
-	DatePickerViewTrigger,
-} from "@/registry/tailwindcss/ui/date-picker";
-import { Index } from "solid-js";
-import { Portal } from "solid-js/web";
+  DatePicker,
+  DatePickerContent,
+  DatePickerContext,
+  DatePickerControl,
+  DatePickerInput,
+  DatePickerPositioner,
+  DatePickerRangeText,
+  DatePickerTable,
+  DatePickerTableBody,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHead,
+  DatePickerTableHeader,
+  DatePickerTableRow,
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerViewControl,
+  DatePickerViewTrigger,
+} from "@/registry/tailwindcss/ui/date-picker"
 
 const DatePickerDemo = () => {
-	return (
-		<DatePicker>
-			<DatePickerControl>
-				<DatePickerInput />
-				<DatePickerTrigger />
-			</DatePickerControl>
-			<Portal>
-				<DatePickerPositioner>
-					<DatePickerContent>
-						<DatePickerView view="day">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableHead>
-												<DatePickerTableRow>
-													<Index each={context().weekDays}>
-														{(weekDay) => (
-															<DatePickerTableHeader>
-																{weekDay().short}
-															</DatePickerTableHeader>
-														)}
-													</Index>
-												</DatePickerTableRow>
-											</DatePickerTableHead>
-											<DatePickerTableBody>
-												<Index each={context().weeks}>
-													{(week) => (
-														<DatePickerTableRow>
-															<Index each={week()}>
-																{(day) => (
-																	<DatePickerTableCell value={day()}>
-																		<DatePickerTableCellTrigger>
-																			{day().day}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-						<DatePickerView view="month">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableBody>
-												<Index
-													each={context().getMonthsGrid({
-														columns: 4,
-														format: "short",
-													})}
-												>
-													{(months) => (
-														<DatePickerTableRow>
-															<Index each={months()}>
-																{(month) => (
-																	<DatePickerTableCell value={month().value}>
-																		<DatePickerTableCellTrigger>
-																			{month().label}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-						<DatePickerView view="year">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableBody>
-												<Index
-													each={context().getYearsGrid({
-														columns: 4,
-													})}
-												>
-													{(years) => (
-														<DatePickerTableRow>
-															<Index each={years()}>
-																{(year) => (
-																	<DatePickerTableCell value={year().value}>
-																		<DatePickerTableCellTrigger>
-																			{year().label}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-					</DatePickerContent>
-				</DatePickerPositioner>
-			</Portal>
-		</DatePicker>
-	);
-};
+  return (
+    <DatePicker>
+      <DatePickerControl>
+        <DatePickerInput />
+        <DatePickerTrigger />
+      </DatePickerControl>
+      <Portal>
+        <DatePickerPositioner>
+          <DatePickerContent>
+            <DatePickerView view="day">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableHead>
+                        <DatePickerTableRow>
+                          <Index each={context().weekDays}>
+                            {(weekDay) => (
+                              <DatePickerTableHeader>
+                                {weekDay().short}
+                              </DatePickerTableHeader>
+                            )}
+                          </Index>
+                        </DatePickerTableRow>
+                      </DatePickerTableHead>
+                      <DatePickerTableBody>
+                        <Index each={context().weeks}>
+                          {(week) => (
+                            <DatePickerTableRow>
+                              <Index each={week()}>
+                                {(day) => (
+                                  <DatePickerTableCell value={day()}>
+                                    <DatePickerTableCellTrigger>
+                                      {day().day}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+            <DatePickerView view="month">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableBody>
+                        <Index
+                          each={context().getMonthsGrid({
+                            columns: 4,
+                            format: "short",
+                          })}
+                        >
+                          {(months) => (
+                            <DatePickerTableRow>
+                              <Index each={months()}>
+                                {(month) => (
+                                  <DatePickerTableCell value={month().value}>
+                                    <DatePickerTableCellTrigger>
+                                      {month().label}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+            <DatePickerView view="year">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableBody>
+                        <Index
+                          each={context().getYearsGrid({
+                            columns: 4,
+                          })}
+                        >
+                          {(years) => (
+                            <DatePickerTableRow>
+                              <Index each={years()}>
+                                {(year) => (
+                                  <DatePickerTableCell value={year().value}>
+                                    <DatePickerTableCellTrigger>
+                                      {year().label}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+          </DatePickerContent>
+        </DatePickerPositioner>
+      </Portal>
+    </DatePicker>
+  )
+}
 
-export default DatePickerDemo;
+export default DatePickerDemo
diff --git a/docs/src/registry/tailwindcss/examples/date-picker-with-range-demo.tsx b/docs/src/registry/tailwindcss/examples/date-picker-with-range-demo.tsx
index 1fdbda72..3b76d0dd 100644
--- a/docs/src/registry/tailwindcss/examples/date-picker-with-range-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/date-picker-with-range-demo.tsx
@@ -1,199 +1,200 @@
+import { Index, createMemo } from "solid-js"
+import { Portal } from "solid-js/web"
+
 import {
-	DatePicker,
-	DatePickerContent,
-	DatePickerContext,
-	DatePickerControl,
-	DatePickerInput,
-	DatePickerPositioner,
-	DatePickerRangeText,
-	DatePickerTable,
-	DatePickerTableBody,
-	DatePickerTableCell,
-	DatePickerTableCellTrigger,
-	DatePickerTableHead,
-	DatePickerTableHeader,
-	DatePickerTableRow,
-	DatePickerTrigger,
-	DatePickerView,
-	DatePickerViewControl,
-	DatePickerViewTrigger,
-} from "@/registry/tailwindcss/ui/date-picker";
-import { Index, createMemo } from "solid-js";
-import { Portal } from "solid-js/web";
+  DatePicker,
+  DatePickerContent,
+  DatePickerContext,
+  DatePickerControl,
+  DatePickerInput,
+  DatePickerPositioner,
+  DatePickerRangeText,
+  DatePickerTable,
+  DatePickerTableBody,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHead,
+  DatePickerTableHeader,
+  DatePickerTableRow,
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerViewControl,
+  DatePickerViewTrigger,
+} from "@/registry/tailwindcss/ui/date-picker"
 
 const DatePickerDemo = () => {
-	return (
-		<DatePicker numOfMonths={2} selectionMode="range">
-			<DatePickerControl>
-				<DatePickerInput index={0} />
-				<DatePickerInput index={1} />
-				<DatePickerTrigger />
-			</DatePickerControl>
-			<Portal>
-				<DatePickerPositioner>
-					<DatePickerContent>
-						<DatePickerView view="day">
-							<DatePickerContext>
-								{(context) => {
-									const offset = createMemo(() =>
-										context().getOffset({ months: 1 }),
-									);
+  return (
+    <DatePicker numOfMonths={2} selectionMode="range">
+      <DatePickerControl>
+        <DatePickerInput index={0} />
+        <DatePickerInput index={1} />
+        <DatePickerTrigger />
+      </DatePickerControl>
+      <Portal>
+        <DatePickerPositioner>
+          <DatePickerContent>
+            <DatePickerView view="day">
+              <DatePickerContext>
+                {(context) => {
+                  const offset = createMemo(() =>
+                    context().getOffset({ months: 1 })
+                  )
 
-									return (
-										<>
-											<DatePickerViewControl>
-												<DatePickerViewTrigger>
-													<DatePickerRangeText />
-												</DatePickerViewTrigger>
-											</DatePickerViewControl>
-											<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-												<DatePickerTable>
-													<DatePickerTableHead>
-														<DatePickerTableRow>
-															<Index each={context().weekDays}>
-																{(weekDay) => (
-																	<DatePickerTableHeader>
-																		{weekDay().short}
-																	</DatePickerTableHeader>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													</DatePickerTableHead>
-													<DatePickerTableBody>
-														<Index each={context().weeks}>
-															{(week) => (
-																<DatePickerTableRow>
-																	<Index each={week()}>
-																		{(day) => (
-																			<DatePickerTableCell value={day()}>
-																				<DatePickerTableCellTrigger>
-																					{day().day}
-																				</DatePickerTableCellTrigger>
-																			</DatePickerTableCell>
-																		)}
-																	</Index>
-																</DatePickerTableRow>
-															)}
-														</Index>
-													</DatePickerTableBody>
-												</DatePickerTable>
-												<DatePickerTable>
-													<DatePickerTableHead>
-														<DatePickerTableRow>
-															<Index each={context().weekDays}>
-																{(weekDay) => (
-																	<DatePickerTableHeader>
-																		{weekDay().short}
-																	</DatePickerTableHeader>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													</DatePickerTableHead>
-													<DatePickerTableBody>
-														<Index each={offset().weeks}>
-															{(week) => (
-																<DatePickerTableRow>
-																	<Index each={week()}>
-																		{(day) => (
-																			<DatePickerTableCell
-																				value={day()}
-																				visibleRange={offset().visibleRange}
-																			>
-																				<DatePickerTableCellTrigger>
-																					{day().day}
-																				</DatePickerTableCellTrigger>
-																			</DatePickerTableCell>
-																		)}
-																	</Index>
-																</DatePickerTableRow>
-															)}
-														</Index>
-													</DatePickerTableBody>
-												</DatePickerTable>
-											</div>
-										</>
-									);
-								}}
-							</DatePickerContext>
-						</DatePickerView>
-						<DatePickerView view="month">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableBody>
-												<Index
-													each={context().getMonthsGrid({
-														columns: 4,
-														format: "short",
-													})}
-												>
-													{(months) => (
-														<DatePickerTableRow>
-															<Index each={months()}>
-																{(month) => (
-																	<DatePickerTableCell value={month().value}>
-																		<DatePickerTableCellTrigger>
-																			{month().label}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-						<DatePickerView view="year">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableBody>
-												<Index
-													each={context().getYearsGrid({
-														columns: 4,
-													})}
-												>
-													{(years) => (
-														<DatePickerTableRow>
-															<Index each={years()}>
-																{(year) => (
-																	<DatePickerTableCell value={year().value}>
-																		<DatePickerTableCellTrigger>
-																			{year().label}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-					</DatePickerContent>
-				</DatePickerPositioner>
-			</Portal>
-		</DatePicker>
-	);
-};
+                  return (
+                    <>
+                      <DatePickerViewControl>
+                        <DatePickerViewTrigger>
+                          <DatePickerRangeText />
+                        </DatePickerViewTrigger>
+                      </DatePickerViewControl>
+                      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <DatePickerTable>
+                          <DatePickerTableHead>
+                            <DatePickerTableRow>
+                              <Index each={context().weekDays}>
+                                {(weekDay) => (
+                                  <DatePickerTableHeader>
+                                    {weekDay().short}
+                                  </DatePickerTableHeader>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          </DatePickerTableHead>
+                          <DatePickerTableBody>
+                            <Index each={context().weeks}>
+                              {(week) => (
+                                <DatePickerTableRow>
+                                  <Index each={week()}>
+                                    {(day) => (
+                                      <DatePickerTableCell value={day()}>
+                                        <DatePickerTableCellTrigger>
+                                          {day().day}
+                                        </DatePickerTableCellTrigger>
+                                      </DatePickerTableCell>
+                                    )}
+                                  </Index>
+                                </DatePickerTableRow>
+                              )}
+                            </Index>
+                          </DatePickerTableBody>
+                        </DatePickerTable>
+                        <DatePickerTable>
+                          <DatePickerTableHead>
+                            <DatePickerTableRow>
+                              <Index each={context().weekDays}>
+                                {(weekDay) => (
+                                  <DatePickerTableHeader>
+                                    {weekDay().short}
+                                  </DatePickerTableHeader>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          </DatePickerTableHead>
+                          <DatePickerTableBody>
+                            <Index each={offset().weeks}>
+                              {(week) => (
+                                <DatePickerTableRow>
+                                  <Index each={week()}>
+                                    {(day) => (
+                                      <DatePickerTableCell
+                                        value={day()}
+                                        visibleRange={offset().visibleRange}
+                                      >
+                                        <DatePickerTableCellTrigger>
+                                          {day().day}
+                                        </DatePickerTableCellTrigger>
+                                      </DatePickerTableCell>
+                                    )}
+                                  </Index>
+                                </DatePickerTableRow>
+                              )}
+                            </Index>
+                          </DatePickerTableBody>
+                        </DatePickerTable>
+                      </div>
+                    </>
+                  )
+                }}
+              </DatePickerContext>
+            </DatePickerView>
+            <DatePickerView view="month">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableBody>
+                        <Index
+                          each={context().getMonthsGrid({
+                            columns: 4,
+                            format: "short",
+                          })}
+                        >
+                          {(months) => (
+                            <DatePickerTableRow>
+                              <Index each={months()}>
+                                {(month) => (
+                                  <DatePickerTableCell value={month().value}>
+                                    <DatePickerTableCellTrigger>
+                                      {month().label}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+            <DatePickerView view="year">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableBody>
+                        <Index
+                          each={context().getYearsGrid({
+                            columns: 4,
+                          })}
+                        >
+                          {(years) => (
+                            <DatePickerTableRow>
+                              <Index each={years()}>
+                                {(year) => (
+                                  <DatePickerTableCell value={year().value}>
+                                    <DatePickerTableCellTrigger>
+                                      {year().label}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+          </DatePickerContent>
+        </DatePickerPositioner>
+      </Portal>
+    </DatePicker>
+  )
+}
 
-export default DatePickerDemo;
+export default DatePickerDemo
diff --git a/docs/src/registry/tailwindcss/examples/dialog-demo.tsx b/docs/src/registry/tailwindcss/examples/dialog-demo.tsx
index 4e9c2048..64c02508 100644
--- a/docs/src/registry/tailwindcss/examples/dialog-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/dialog-demo.tsx
@@ -1,53 +1,54 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import type { DialogTriggerProps } from "@kobalte/core/dialog"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/registry/tailwindcss/ui/dialog";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/tailwindcss/ui/dialog"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
-import type { DialogTriggerProps } from "@kobalte/core/dialog";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const DialogDemo = () => {
-	return (
-		<Dialog>
-			<DialogTrigger
-				as={(props: DialogTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Edit Profile
-					</Button>
-				)}
-			/>
-			<DialogContent class="sm:max-w-[425px]">
-				<DialogHeader>
-					<DialogTitle>Edit profile</DialogTitle>
-					<DialogDescription>
-						Make changes to your profile here. Click save when you're done.
-					</DialogDescription>
-				</DialogHeader>
-				<div class="grid gap-4 py-4">
-					<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
-						<TextFieldLabel class="text-right">Name</TextFieldLabel>
-						<TextField class="col-span-2 md:col-span-3" />
-					</TextFieldRoot>
-					<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
-						<TextFieldLabel class="text-right">Username</TextFieldLabel>
-						<TextField class="col-span-2 md:col-span-3" />
-					</TextFieldRoot>
-				</div>
-				<DialogFooter>
-					<Button type="submit">Save changes</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-};
+  return (
+    <Dialog>
+      <DialogTrigger
+        as={(props: DialogTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Edit Profile
+          </Button>
+        )}
+      />
+      <DialogContent class="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div class="grid gap-4 py-4">
+          <TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
+            <TextFieldLabel class="text-right">Name</TextFieldLabel>
+            <TextField class="col-span-2 md:col-span-3" />
+          </TextFieldRoot>
+          <TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
+            <TextFieldLabel class="text-right">Username</TextFieldLabel>
+            <TextField class="col-span-2 md:col-span-3" />
+          </TextFieldRoot>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
 
-export default DialogDemo;
+export default DialogDemo
diff --git a/docs/src/registry/tailwindcss/examples/drawer-demo.tsx b/docs/src/registry/tailwindcss/examples/drawer-demo.tsx
index 07878fbb..1fc7ae1c 100644
--- a/docs/src/registry/tailwindcss/examples/drawer-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/drawer-demo.tsx
@@ -1,102 +1,103 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { createSignal } from "solid-js"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Drawer,
-	DrawerClose,
-	DrawerContent,
-	DrawerDescription,
-	DrawerFooter,
-	DrawerHeader,
-	DrawerLabel,
-	DrawerTrigger,
-} from "@/registry/tailwindcss/ui/drawer";
-import { createSignal } from "solid-js";
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerLabel,
+  DrawerTrigger,
+} from "@/registry/tailwindcss/ui/drawer"
 
 const DrawerDemo = () => {
-	const [goal, setGoal] = createSignal(350);
+  const [goal, setGoal] = createSignal(350)
 
-	const onClick = (adjustment: number) => {
-		setGoal(Math.max(200, Math.min(400, goal() + adjustment)));
-	};
+  const onClick = (adjustment: number) => {
+    setGoal(Math.max(200, Math.min(400, goal() + adjustment)))
+  }
 
-	return (
-		<Drawer>
-			<DrawerTrigger as={Button} variant="outline">
-				Open Drawer
-			</DrawerTrigger>
-			<DrawerContent>
-				<div class="mx-auto w-full max-w-sm">
-					<DrawerHeader>
-						<DrawerLabel>Move Goal</DrawerLabel>
-						<DrawerDescription>Set your daily activity goal.</DrawerDescription>
-					</DrawerHeader>
-					<div class="p-4 pb-0">
-						<div class="flex items-center justify-center space-x-2">
-							<Button
-								variant="outline"
-								size="icon"
-								class="h-8 w-8 shrink-0 rounded-full"
-								onClick={() => onClick(-10)}
-								disabled={goal() <= 200}
-							>
-								<svg
-									class="h-4 w-4"
-									stroke-width="1.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M6 12H18"
-										stroke="currentColor"
-										stroke-width="1.5"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-								<span class="sr-only">Decrease</span>
-							</Button>
-							<div class="flex-1 text-center">
-								<div class="text-7xl font-bold tracking-tighter">{goal()}</div>
-								<div class="text-[0.70rem] uppercase text-muted-foreground">
-									Calories/day
-								</div>
-							</div>
-							<Button
-								variant="outline"
-								size="icon"
-								class="h-8 w-8 shrink-0 rounded-full"
-								onClick={() => onClick(10)}
-								disabled={goal() >= 400}
-							>
-								<svg
-									class="h-4 w-4"
-									stroke-width="1.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M6 12H12M18 12H12M12 12V6M12 12V18"
-										stroke="currentColor"
-										stroke-width="1.5"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-								<span class="sr-only">Increase</span>
-							</Button>
-						</div>
-					</div>
-					<DrawerFooter>
-						<Button>Submit</Button>
-						<DrawerClose as={Button} variant="outline">
-							Cancel
-						</DrawerClose>
-					</DrawerFooter>
-				</div>
-			</DrawerContent>
-		</Drawer>
-	);
-};
+  return (
+    <Drawer>
+      <DrawerTrigger as={Button} variant="outline">
+        Open Drawer
+      </DrawerTrigger>
+      <DrawerContent>
+        <div class="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerLabel>Move Goal</DrawerLabel>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div class="p-4 pb-0">
+            <div class="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal() <= 200}
+              >
+                <svg
+                  class="h-4 w-4"
+                  stroke-width="1.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 12H18"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                <span class="sr-only">Decrease</span>
+              </Button>
+              <div class="flex-1 text-center">
+                <div class="text-7xl font-bold tracking-tighter">{goal()}</div>
+                <div class="text-muted-foreground text-[0.70rem] uppercase">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal() >= 400}
+              >
+                <svg
+                  class="h-4 w-4"
+                  stroke-width="1.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 12H12M18 12H12M12 12V6M12 12V18"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                <span class="sr-only">Increase</span>
+              </Button>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose as={Button} variant="outline">
+              Cancel
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
 
-export default DrawerDemo;
+export default DrawerDemo
diff --git a/docs/src/registry/tailwindcss/examples/drawer-side-demo.tsx b/docs/src/registry/tailwindcss/examples/drawer-side-demo.tsx
index a5462460..0d4d5cd8 100644
--- a/docs/src/registry/tailwindcss/examples/drawer-side-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/drawer-side-demo.tsx
@@ -1,34 +1,35 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { For } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Drawer,
-	DrawerContent,
-	DrawerTrigger,
-} from "@/registry/tailwindcss/ui/drawer";
-import { For } from "solid-js";
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/tailwindcss/ui/drawer"
 
-const SIDES = ["top", "right", "bottom", "left"] as const;
+const SIDES = ["top", "right", "bottom", "left"] as const
 
 const DrawerSideDemo = () => {
-	return (
-		<div class="grid grid-cols-2 gap-2">
-			<For each={SIDES}>
-				{(side) => (
-					<Drawer side={side}>
-						<DrawerTrigger as={Button} variant="outline">
-							{side}
-						</DrawerTrigger>
-						<DrawerContent
-							class={cn(
-								(side === "bottom" || side === "top") && "h-64",
-								(side === "right" || side === "left") && "w-64",
-							)}
-						/>
-					</Drawer>
-				)}
-			</For>
-		</div>
-	);
-};
+  return (
+    <div class="grid grid-cols-2 gap-2">
+      <For each={SIDES}>
+        {(side) => (
+          <Drawer side={side}>
+            <DrawerTrigger as={Button} variant="outline">
+              {side}
+            </DrawerTrigger>
+            <DrawerContent
+              class={cn(
+                (side === "bottom" || side === "top") && "h-64",
+                (side === "right" || side === "left") && "w-64"
+              )}
+            />
+          </Drawer>
+        )}
+      </For>
+    </div>
+  )
+}
 
-export default DrawerSideDemo;
+export default DrawerSideDemo
diff --git a/docs/src/registry/tailwindcss/examples/dropdown-menu-checkboxes.tsx b/docs/src/registry/tailwindcss/examples/dropdown-menu-checkboxes.tsx
index 200c2fd8..f9a5d2ab 100644
--- a/docs/src/registry/tailwindcss/examples/dropdown-menu-checkboxes.tsx
+++ b/docs/src/registry/tailwindcss/examples/dropdown-menu-checkboxes.tsx
@@ -1,47 +1,48 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { createSignal } from "solid-js"
+import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
-import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
-import { createSignal } from "solid-js";
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 
 const DropdownMenuCheckboxes = () => {
-	const [showStatusBar, setShowStatusBar] = createSignal<boolean>(true);
-	const [showActivityBar, setShowActivityBar] = createSignal<boolean>(false);
-	const [showPanel, setShowPanel] = createSignal<boolean>(false);
+  const [showStatusBar, setShowStatusBar] = createSignal<boolean>(true)
+  const [showActivityBar, setShowActivityBar] = createSignal<boolean>(false)
+  const [showPanel, setShowPanel] = createSignal<boolean>(false)
 
-	return (
-		<DropdownMenu placement="bottom">
-			<DropdownMenuTrigger
-				as={(props: DropdownMenuSubTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Open
-					</Button>
-				)}
-			/>
-			<DropdownMenuContent class="w-56">
-				<DropdownMenuCheckboxItem
-					checked={showStatusBar()}
-					onChange={setShowStatusBar}
-				>
-					Status Bar
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
-					checked={showActivityBar()}
-					onChange={setShowActivityBar}
-					disabled
-				>
-					Activity Bar
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
-					Panel
-				</DropdownMenuCheckboxItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-};
+  return (
+    <DropdownMenu placement="bottom">
+      <DropdownMenuTrigger
+        as={(props: DropdownMenuSubTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Open
+          </Button>
+        )}
+      />
+      <DropdownMenuContent class="w-56">
+        <DropdownMenuCheckboxItem
+          checked={showStatusBar()}
+          onChange={setShowStatusBar}
+        >
+          Status Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showActivityBar()}
+          onChange={setShowActivityBar}
+          disabled
+        >
+          Activity Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
+          Panel
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
-export default DropdownMenuCheckboxes;
+export default DropdownMenuCheckboxes
diff --git a/docs/src/registry/tailwindcss/examples/dropdown-menu-demo.tsx b/docs/src/registry/tailwindcss/examples/dropdown-menu-demo.tsx
index a06700bc..dbc6a0f2 100644
--- a/docs/src/registry/tailwindcss/examples/dropdown-menu-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/dropdown-menu-demo.tsx
@@ -1,109 +1,110 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
-import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 
 const DropdownMenuDemo = () => {
-	return (
-		<DropdownMenu placement="bottom">
-			<DropdownMenuTrigger
-				as={(props: DropdownMenuSubTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Open
-					</Button>
-				)}
-			/>
-			<DropdownMenuContent class="w-56">
-				<DropdownMenuGroup>
-					<DropdownMenuGroupLabel>My Account</DropdownMenuGroupLabel>
-					<DropdownMenuSeparator />
-					<DropdownMenuItem>
-						<i class="i-lucide:user mr-2" />
-						<span>Profile</span>
-						<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<i class="i-lucide:credit-card mr-2" />
-						<span>Billing</span>
-						<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<i class="i-lucide:settings mr-2" />
-						<span>Settings</span>
-						<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<i class="i-lucide:keyboard mr-2" />
-						<span>Keyboard shortcuts</span>
-						<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuGroup>
-					<DropdownMenuItem>
-						<i class="i-lucide:user mr-2" />
-						<span>Team</span>
-					</DropdownMenuItem>
-					<DropdownMenuSub>
-						<DropdownMenuSubTrigger>
-							<i class="i-lucide:user-plus mr-2" />
-							<span>Invite users</span>
-						</DropdownMenuSubTrigger>
-						<DropdownMenuSubContent>
-							<DropdownMenuItem>
-								<i class="i-lucide:mail mr-2" />
-								<span>Email</span>
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<i class="i-lucide:message-square mr-2" />
-								<span>Message</span>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-							<DropdownMenuItem>
-								<i class="ilucide:plus-circle mr-2" />
-								<span>More...</span>
-							</DropdownMenuItem>
-						</DropdownMenuSubContent>
-					</DropdownMenuSub>
-					<DropdownMenuItem>
-						<i class="i-lucide:plus mr-2" />
-						<span>New Team</span>
-						<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>
-					<i class="i-lucide:github mr-2" />
-					<span>GitHub</span>
-				</DropdownMenuItem>
-				<DropdownMenuItem>
-					<i class="i-lucide:life-buoy mr-2" />
-					<span>Support</span>
-				</DropdownMenuItem>
-				<DropdownMenuItem disabled>
-					<i class="i-lucide:cloud mr-2" />
-					<span>API</span>
-				</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>
-					<i class="i-lucide:log-out mr-2" />
-					<span>Log out</span>
-					<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-};
+  return (
+    <DropdownMenu placement="bottom">
+      <DropdownMenuTrigger
+        as={(props: DropdownMenuSubTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Open
+          </Button>
+        )}
+      />
+      <DropdownMenuContent class="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuGroupLabel>My Account</DropdownMenuGroupLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <i class="i-lucide:user mr-2" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <i class="i-lucide:credit-card mr-2" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <i class="i-lucide:settings mr-2" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <i class="i-lucide:keyboard mr-2" />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <i class="i-lucide:user mr-2" />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <i class="i-lucide:user-plus mr-2" />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <i class="i-lucide:mail mr-2" />
+                <span>Email</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <i class="i-lucide:message-square mr-2" />
+                <span>Message</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <i class="ilucide:plus-circle mr-2" />
+                <span>More...</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <i class="i-lucide:plus mr-2" />
+            <span>New Team</span>
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <i class="i-lucide:github mr-2" />
+          <span>GitHub</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <i class="i-lucide:life-buoy mr-2" />
+          <span>Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <i class="i-lucide:cloud mr-2" />
+          <span>API</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <i class="i-lucide:log-out mr-2" />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
-export default DropdownMenuDemo;
+export default DropdownMenuDemo
diff --git a/docs/src/registry/tailwindcss/examples/dropdown-menu-radio-group.tsx b/docs/src/registry/tailwindcss/examples/dropdown-menu-radio-group.tsx
index ef59421f..177535fc 100644
--- a/docs/src/registry/tailwindcss/examples/dropdown-menu-radio-group.tsx
+++ b/docs/src/registry/tailwindcss/examples/dropdown-menu-radio-group.tsx
@@ -1,42 +1,43 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { createSignal } from "solid-js"
+import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
-import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
-import { createSignal } from "solid-js";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
 
 const DropdownMenuRadioGroupDemo = () => {
-	const [position, setPosition] = createSignal("bottom");
+  const [position, setPosition] = createSignal("bottom")
 
-	return (
-		<DropdownMenu placement="bottom">
-			<DropdownMenuTrigger
-				as={(props: DropdownMenuSubTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Open
-					</Button>
-				)}
-			/>
-			<DropdownMenuContent class="w-56">
-				<DropdownMenuGroup>
-					<DropdownMenuGroupLabel>Panel Position</DropdownMenuGroupLabel>
-					<DropdownMenuSeparator />
-					<DropdownMenuRadioGroup value={position()} onChange={setPosition}>
-						<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-						<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-						<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-					</DropdownMenuRadioGroup>
-				</DropdownMenuGroup>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-};
+  return (
+    <DropdownMenu placement="bottom">
+      <DropdownMenuTrigger
+        as={(props: DropdownMenuSubTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Open
+          </Button>
+        )}
+      />
+      <DropdownMenuContent class="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuGroupLabel>Panel Position</DropdownMenuGroupLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup value={position()} onChange={setPosition}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
-export default DropdownMenuRadioGroupDemo;
+export default DropdownMenuRadioGroupDemo
diff --git a/docs/src/registry/tailwindcss/examples/hover-card-demo.tsx b/docs/src/registry/tailwindcss/examples/hover-card-demo.tsx
index d0837bd3..e46a3d58 100644
--- a/docs/src/registry/tailwindcss/examples/hover-card-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/hover-card-demo.tsx
@@ -1,65 +1,66 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import type { HoverCardTriggerProps } from "@kobalte/core/hover-card"
+import { Image } from "@kobalte/core/image"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	HoverCard,
-	HoverCardContent,
-	HoverCardTrigger,
-} from "@/registry/tailwindcss/ui/hover-card";
-import type { HoverCardTriggerProps } from "@kobalte/core/hover-card";
-import { Image } from "@kobalte/core/image";
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/tailwindcss/ui/hover-card"
 
 const HoverCardDemo = () => {
-	return (
-		<HoverCard>
-			<HoverCardTrigger
-				as={(props: HoverCardTriggerProps) => (
-					<Button variant="link" {...props}>
-						@solid_js
-					</Button>
-				)}
-			/>
-			<HoverCardContent class="w-80">
-				<div class="flex justify-between space-x-4">
-					<Image
-						fallbackDelay={400}
-						class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
-					>
-						<Image.Img
-							src="https://github.com/solidjs.png"
-							class="size-full aspect-square"
-						/>
-						<Image.Fallback class="flex h-full w-full items-center justify-center rounded-full bg-muted">
-							SJ
-						</Image.Fallback>
-					</Image>
-					<div class="space-y-1">
-						<h4 class="text-sm font-semibold">@solid_js</h4>
-						<p class="text-sm">
-							Simple and performant reactivity for building user interfaces.
-						</p>
-						<div class="flex items-center pt-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mr-2 h-4 w-4 opacity-70"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
-								/>
-							</svg>
-							<span class="text-xs text-muted-foreground">
-								Joined March 2021
-							</span>
-						</div>
-					</div>
-				</div>
-			</HoverCardContent>
-		</HoverCard>
-	);
-};
+  return (
+    <HoverCard>
+      <HoverCardTrigger
+        as={(props: HoverCardTriggerProps) => (
+          <Button variant="link" {...props}>
+            @solid_js
+          </Button>
+        )}
+      />
+      <HoverCardContent class="w-80">
+        <div class="flex justify-between space-x-4">
+          <Image
+            fallbackDelay={400}
+            class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+          >
+            <Image.Img
+              src="https://github.com/solidjs.png"
+              class="aspect-square size-full"
+            />
+            <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-full">
+              SJ
+            </Image.Fallback>
+          </Image>
+          <div class="space-y-1">
+            <h4 class="text-sm font-semibold">@solid_js</h4>
+            <p class="text-sm">
+              Simple and performant reactivity for building user interfaces.
+            </p>
+            <div class="flex items-center pt-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="mr-2 h-4 w-4 opacity-70"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
+                />
+              </svg>
+              <span class="text-muted-foreground text-xs">
+                Joined March 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
 
-export default HoverCardDemo;
+export default HoverCardDemo
diff --git a/docs/src/registry/tailwindcss/examples/menubar-demo.tsx b/docs/src/registry/tailwindcss/examples/menubar-demo.tsx
index c01ed4cf..e53d2026 100644
--- a/docs/src/registry/tailwindcss/examples/menubar-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/menubar-demo.tsx
@@ -1,109 +1,109 @@
 import {
-	Menubar,
-	MenubarCheckboxItem,
-	MenubarContent,
-	MenubarItem,
-	MenubarMenu,
-	MenubarRadioGroup,
-	MenubarRadioItem,
-	MenubarSeparator,
-	MenubarShortcut,
-	MenubarSub,
-	MenubarSubContent,
-	MenubarSubTrigger,
-	MenubarTrigger,
-} from "@/registry/tailwindcss/ui/menubar";
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/tailwindcss/ui/menubar"
 
 const MenubarDemo = () => {
-	return (
-		<Menubar>
-			<MenubarMenu>
-				<MenubarTrigger>File</MenubarTrigger>
-				<MenubarContent>
-					<MenubarItem>
-						New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem>
-						New Window <MenubarShortcut>⌘N</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem disabled>New Incognito Window</MenubarItem>
-					<MenubarSeparator />
-					<MenubarSub>
-						<MenubarSubTrigger>Share</MenubarSubTrigger>
-						<MenubarSubContent>
-							<MenubarItem>Email link</MenubarItem>
-							<MenubarItem>Messages</MenubarItem>
-							<MenubarItem>Notes</MenubarItem>
-						</MenubarSubContent>
-					</MenubarSub>
-					<MenubarSeparator />
-					<MenubarItem>
-						Print... <MenubarShortcut>⌘P</MenubarShortcut>
-					</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-			<MenubarMenu>
-				<MenubarTrigger>Edit</MenubarTrigger>
-				<MenubarContent>
-					<MenubarItem>
-						Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem>
-						Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-					</MenubarItem>
-					<MenubarSeparator />
-					<MenubarSub>
-						<MenubarSubTrigger>Find</MenubarSubTrigger>
-						<MenubarSubContent>
-							<MenubarItem>Search the web</MenubarItem>
-							<MenubarSeparator />
-							<MenubarItem>Find...</MenubarItem>
-							<MenubarItem>Find Next</MenubarItem>
-							<MenubarItem>Find Previous</MenubarItem>
-						</MenubarSubContent>
-					</MenubarSub>
-					<MenubarSeparator />
-					<MenubarItem>Cut</MenubarItem>
-					<MenubarItem>Copy</MenubarItem>
-					<MenubarItem>Paste</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-			<MenubarMenu>
-				<MenubarTrigger>View</MenubarTrigger>
-				<MenubarContent>
-					<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-					<MenubarCheckboxItem checked>
-						Always Show Full URLs
-					</MenubarCheckboxItem>
-					<MenubarSeparator />
-					<MenubarItem inset>
-						Reload <MenubarShortcut>⌘R</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem disabled inset>
-						Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-					</MenubarItem>
-					<MenubarSeparator />
-					<MenubarItem inset>Toggle Fullscreen</MenubarItem>
-					<MenubarSeparator />
-					<MenubarItem inset>Hide Sidebar</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-			<MenubarMenu>
-				<MenubarTrigger>Profiles</MenubarTrigger>
-				<MenubarContent>
-					<MenubarRadioGroup value="benoit">
-						<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-						<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-						<MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-					</MenubarRadioGroup>
-					<MenubarSeparator />
-					<MenubarItem inset>Edit...</MenubarItem>
-					<MenubarSeparator />
-					<MenubarItem inset>Add Profile...</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-		</Menubar>
-	);
-};
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
 
-export default MenubarDemo;
+export default MenubarDemo
diff --git a/docs/src/registry/tailwindcss/examples/mode-toggle.tsx b/docs/src/registry/tailwindcss/examples/mode-toggle.tsx
index 236a3162..18bcb005 100644
--- a/docs/src/registry/tailwindcss/examples/mode-toggle.tsx
+++ b/docs/src/registry/tailwindcss/examples/mode-toggle.tsx
@@ -1,35 +1,36 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { useColorMode } from "@kobalte/core";
+import { useColorMode } from "@kobalte/core"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ModeToggle = () => {
-	const { toggleColorMode } = useColorMode();
+  const { toggleColorMode } = useColorMode()
 
-	return (
-		<Button onClick={toggleColorMode} size="icon" variant="ghost">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4 hidden [html[data-kb-theme=dark]_&]:block"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="currentColor"
-					d="M17.891 12a5.94 5.94 0 0 1-3.68 5.499a5.97 5.97 0 0 1-6.496-1.295A5.948 5.948 0 0 1 11.943 6.05a5.96 5.96 0 0 1 4.21 1.743A5.94 5.94 0 0 1 17.89 12M3.203 13.048H2.05A1.05 1.05 0 0 1 1 12a1.047 1.047 0 0 1 1.05-1.048h1.153A1.05 1.05 0 0 1 4.253 12a1.047 1.047 0 0 1-1.05 1.048m18.747 0h-1.143A1.05 1.05 0 0 1 19.758 12a1.047 1.047 0 0 1 1.05-1.048h1.143A1.05 1.05 0 0 1 23 12a1.047 1.047 0 0 1-1.05 1.048m-9.965-8.8a1.05 1.05 0 0 1-1.05-1.048V2.048A1.047 1.047 0 0 1 11.986 1a1.05 1.05 0 0 1 1.049 1.048V3.2a1.047 1.047 0 0 1-1.05 1.048m0 18.752a1.05 1.05 0 0 1-1.05-1.047V20.8a1.047 1.047 0 0 1 1.05-1.048a1.05 1.05 0 0 1 1.049 1.048v1.152A1.047 1.047 0 0 1 11.984 23M5.753 6.825a1.05 1.05 0 0 1-.745-.314l-.819-.807a1.051 1.051 0 0 1 .745-1.796c.28 0 .548.111.745.308l.819.817a1.047 1.047 0 0 1 0 1.478a1.05 1.05 0 0 1-.745.314m13.271 13.221a1.05 1.05 0 0 1-.735-.304l-.818-.817a1.047 1.047 0 0 1 1.14-1.739q.196.096.34.262l.818.817a1.047 1.047 0 0 1 0 1.477a1.05 1.05 0 0 1-.745.304m-.808-13.221a1.05 1.05 0 0 1-1.034-1.254c.04-.204.142-.391.29-.538l.818-.817a1.05 1.05 0 0 1 1.48 1.488l-.82.807a1.05 1.05 0 0 1-.734.314M4.934 20.046a1.05 1.05 0 0 1-.745-.304a1.046 1.046 0 0 1 0-1.477l.819-.817a1.05 1.05 0 0 1 1.49 0a1.047 1.047 0 0 1 0 1.477l-.819.817a1.05 1.05 0 0 1-.745.304"
-				/>
-				<title>Light mode</title>
-			</svg>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4 hidden [html[data-kb-theme=light]_&]:block"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="currentColor"
-					d="M21.88 15.147a10.23 10.23 0 0 1-19.63-5.64a10.28 10.28 0 0 1 6.63-7.37a1.77 1.77 0 0 1 1-.07a1.8 1.8 0 0 1 .89.45a1.81 1.81 0 0 1 .48 1.84a7 7 0 0 0-.08 4.21a6.27 6.27 0 0 0 4.3 4.31a6.9 6.9 0 0 0 4.2-.08a1.83 1.83 0 0 1 1 0a1.8 1.8 0 0 1 1.3 1.39a1.8 1.8 0 0 1-.09.96"
-				/>
-				<title>Dark mode</title>
-			</svg>
-		</Button>
-	);
-};
+  return (
+    <Button onClick={toggleColorMode} size="icon" variant="ghost">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="hidden size-4 [html[data-kb-theme=dark]_&]:block"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M17.891 12a5.94 5.94 0 0 1-3.68 5.499a5.97 5.97 0 0 1-6.496-1.295A5.948 5.948 0 0 1 11.943 6.05a5.96 5.96 0 0 1 4.21 1.743A5.94 5.94 0 0 1 17.89 12M3.203 13.048H2.05A1.05 1.05 0 0 1 1 12a1.047 1.047 0 0 1 1.05-1.048h1.153A1.05 1.05 0 0 1 4.253 12a1.047 1.047 0 0 1-1.05 1.048m18.747 0h-1.143A1.05 1.05 0 0 1 19.758 12a1.047 1.047 0 0 1 1.05-1.048h1.143A1.05 1.05 0 0 1 23 12a1.047 1.047 0 0 1-1.05 1.048m-9.965-8.8a1.05 1.05 0 0 1-1.05-1.048V2.048A1.047 1.047 0 0 1 11.986 1a1.05 1.05 0 0 1 1.049 1.048V3.2a1.047 1.047 0 0 1-1.05 1.048m0 18.752a1.05 1.05 0 0 1-1.05-1.047V20.8a1.047 1.047 0 0 1 1.05-1.048a1.05 1.05 0 0 1 1.049 1.048v1.152A1.047 1.047 0 0 1 11.984 23M5.753 6.825a1.05 1.05 0 0 1-.745-.314l-.819-.807a1.051 1.051 0 0 1 .745-1.796c.28 0 .548.111.745.308l.819.817a1.047 1.047 0 0 1 0 1.478a1.05 1.05 0 0 1-.745.314m13.271 13.221a1.05 1.05 0 0 1-.735-.304l-.818-.817a1.047 1.047 0 0 1 1.14-1.739q.196.096.34.262l.818.817a1.047 1.047 0 0 1 0 1.477a1.05 1.05 0 0 1-.745.304m-.808-13.221a1.05 1.05 0 0 1-1.034-1.254c.04-.204.142-.391.29-.538l.818-.817a1.05 1.05 0 0 1 1.48 1.488l-.82.807a1.05 1.05 0 0 1-.734.314M4.934 20.046a1.05 1.05 0 0 1-.745-.304a1.046 1.046 0 0 1 0-1.477l.819-.817a1.05 1.05 0 0 1 1.49 0a1.047 1.047 0 0 1 0 1.477l-.819.817a1.05 1.05 0 0 1-.745.304"
+        />
+        <title>Light mode</title>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="hidden size-4 [html[data-kb-theme=light]_&]:block"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M21.88 15.147a10.23 10.23 0 0 1-19.63-5.64a10.28 10.28 0 0 1 6.63-7.37a1.77 1.77 0 0 1 1-.07a1.8 1.8 0 0 1 .89.45a1.81 1.81 0 0 1 .48 1.84a7 7 0 0 0-.08 4.21a6.27 6.27 0 0 0 4.3 4.31a6.9 6.9 0 0 0 4.2-.08a1.83 1.83 0 0 1 1 0a1.8 1.8 0 0 1 1.3 1.39a1.8 1.8 0 0 1-.09.96"
+        />
+        <title>Dark mode</title>
+      </svg>
+    </Button>
+  )
+}
 
-export default ModeToggle;
+export default ModeToggle
diff --git a/docs/src/registry/tailwindcss/examples/navigation-menu-demo.tsx b/docs/src/registry/tailwindcss/examples/navigation-menu-demo.tsx
index 73576171..38fd8d34 100644
--- a/docs/src/registry/tailwindcss/examples/navigation-menu-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/navigation-menu-demo.tsx
@@ -1,124 +1,124 @@
+import { For, type ParentProps } from "solid-js"
+
 import {
-	NavigationMenu,
-	NavigationMenuContent,
-	NavigationMenuDescription,
-	NavigationMenuItem,
-	NavigationMenuItemLabel,
-	NavigationMenuLink,
-	NavigationMenuTrigger,
-} from "@/registry/tailwindcss/ui/navigation-menu";
-import type { ParentProps } from "solid-js";
-import { For } from "solid-js";
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuDescription,
+  NavigationMenuItem,
+  NavigationMenuItemLabel,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+} from "@/registry/tailwindcss/ui/navigation-menu"
 
 const ListItem = (props: ParentProps<{ title: string; href: string }>) => {
-	return (
-		<NavigationMenuLink
-			href={props.href}
-			class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-[box-shadow,background-color] duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring"
-		>
-			<NavigationMenuItemLabel class="text-sm font-medium leading-none">
-				{props.title}
-			</NavigationMenuItemLabel>
-			<NavigationMenuDescription class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-				{props.children}
-			</NavigationMenuDescription>
-		</NavigationMenuLink>
-	);
-};
+  return (
+    <NavigationMenuLink
+      href={props.href}
+      class="hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-ring block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-[box-shadow,background-color] duration-200 focus-visible:outline-none focus-visible:ring-[1.5px]"
+    >
+      <NavigationMenuItemLabel class="text-sm font-medium leading-none">
+        {props.title}
+      </NavigationMenuItemLabel>
+      <NavigationMenuDescription class="text-muted-foreground line-clamp-2 text-sm leading-snug">
+        {props.children}
+      </NavigationMenuDescription>
+    </NavigationMenuLink>
+  )
+}
 
 const components: { title: string; href: string; description: string }[] = [
-	{
-		title: "Data Table",
-		href: "/docs/components/data-table",
-		description: "Powerful table and datagrids built using TanStack Table.",
-	},
-	{
-		title: "Date Picker",
-		href: "/docs/components/date-picker",
-		description:
-			"A component that allows users to select a date from a calendar.",
-	},
-	{
-		title: "OTP Field",
-		href: "/docs/components/otp-field",
-		description: "An accessible and customizable OTP Input component.",
-	},
-	{
-		title: "Resizable",
-		href: "/docs/components/resizable",
-		description:
-			"A component that divides your interface into resizable sections.",
-	},
-	{
-		title: "Sonner",
-		href: "/docs/components/sonner",
-		description: "An opinionated toast component for Solid.",
-	},
-	{
-		title: "Toggle Group",
-		href: "/docs/components/toggle-group",
-		description:
-			"A set of two-state buttons that can be toggled on (pressed) or off (not pressed).",
-	},
-];
+  {
+    title: "Data Table",
+    href: "/docs/components/data-table",
+    description: "Powerful table and datagrids built using TanStack Table.",
+  },
+  {
+    title: "Date Picker",
+    href: "/docs/components/date-picker",
+    description:
+      "A component that allows users to select a date from a calendar.",
+  },
+  {
+    title: "OTP Field",
+    href: "/docs/components/otp-field",
+    description: "An accessible and customizable OTP Input component.",
+  },
+  {
+    title: "Resizable",
+    href: "/docs/components/resizable",
+    description:
+      "A component that divides your interface into resizable sections.",
+  },
+  {
+    title: "Sonner",
+    href: "/docs/components/sonner",
+    description: "An opinionated toast component for Solid.",
+  },
+  {
+    title: "Toggle Group",
+    href: "/docs/components/toggle-group",
+    description:
+      "A set of two-state buttons that can be toggled on (pressed) or off (not pressed).",
+  },
+]
 
 const NavigationMenuDemo = () => {
-	return (
-		<NavigationMenu>
-			<NavigationMenuItem>
-				<NavigationMenuTrigger class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:bg-accent">
-					Learn
-				</NavigationMenuTrigger>
-				<NavigationMenuContent class="grid gap-3 p-4 w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] [&>li:first-of-type]:row-span-3">
-					<NavigationMenuLink
-						href="/"
-						class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none transition-shadow duration-200 hover:shadow-md focus-visible:shadow-md focus-visible:ring-[1.5px] focus-visible:ring-ring"
-					>
-						<NavigationMenuItemLabel class="mb-2 mt-4 text-lg font-medium">
-							shadcn-solid
-						</NavigationMenuItemLabel>
-						<NavigationMenuDescription class="text-sm leading-tight text-muted-foreground">
-							Beautifully designed components built with your choice of UI and
-							CSS frameworks
-						</NavigationMenuDescription>
-					</NavigationMenuLink>
-					<ListItem href="/docs" title="Introduction">
-						Beautifully designed components built with your choice of UI and CSS
-						frameworks
-					</ListItem>
-					<ListItem href="/docs/installation" title="Installation">
-						How to install dependencies and structure your app.
-					</ListItem>
-					<ListItem href="/docs/components/typography" title="Typography">
-						Styles for headings, paragraphs, lists...etc.
-					</ListItem>
-				</NavigationMenuContent>
-			</NavigationMenuItem>
+  return (
+    <NavigationMenu>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger class="focus-visible:ring-ring data-[expanded]:bg-accent transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px]">
+          Learn
+        </NavigationMenuTrigger>
+        <NavigationMenuContent class="grid w-[400px] gap-3 p-4 lg:w-[500px] lg:grid-cols-[.75fr_1fr] [&>li:first-of-type]:row-span-3">
+          <NavigationMenuLink
+            href="/"
+            class="from-muted/50 to-muted focus-visible:ring-ring flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none transition-shadow duration-200 hover:shadow-md focus-visible:shadow-md focus-visible:ring-[1.5px]"
+          >
+            <NavigationMenuItemLabel class="mb-2 mt-4 text-lg font-medium">
+              shadcn-solid
+            </NavigationMenuItemLabel>
+            <NavigationMenuDescription class="text-muted-foreground text-sm leading-tight">
+              Beautifully designed components built with your choice of UI and
+              CSS frameworks
+            </NavigationMenuDescription>
+          </NavigationMenuLink>
+          <ListItem href="/docs" title="Introduction">
+            Beautifully designed components built with your choice of UI and CSS
+            frameworks
+          </ListItem>
+          <ListItem href="/docs/installation" title="Installation">
+            How to install dependencies and structure your app.
+          </ListItem>
+          <ListItem href="/docs/components/typography" title="Typography">
+            Styles for headings, paragraphs, lists...etc.
+          </ListItem>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
 
-			<NavigationMenuItem>
-				<NavigationMenuTrigger class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-1.5px focus-visible:ring-ring data-[expanded]:bg-accent">
-					Overview
-				</NavigationMenuTrigger>
-				<NavigationMenuContent class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-					<For each={components}>
-						{(item) => (
-							<ListItem href={item.href} title={item.title}>
-								{item.description}
-							</ListItem>
-						)}
-					</For>
-				</NavigationMenuContent>
-			</NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger class="focus-visible:ring-1.5px focus-visible:ring-ring data-[expanded]:bg-accent transition-[box-shadow,background-color] focus-visible:outline-none">
+          Overview
+        </NavigationMenuTrigger>
+        <NavigationMenuContent class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+          <For each={components}>
+            {(item) => (
+              <ListItem href={item.href} title={item.title}>
+                {item.description}
+              </ListItem>
+            )}
+          </For>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
 
-			<NavigationMenuTrigger
-				as="a"
-				href="/docs"
-				class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:bg-accent"
-			>
-				Documentation
-			</NavigationMenuTrigger>
-		</NavigationMenu>
-	);
-};
+      <NavigationMenuTrigger
+        as="a"
+        href="/docs"
+        class="focus-visible:ring-ring data-[expanded]:bg-accent transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px]"
+      >
+        Documentation
+      </NavigationMenuTrigger>
+    </NavigationMenu>
+  )
+}
 
-export default NavigationMenuDemo;
+export default NavigationMenuDemo
diff --git a/docs/src/registry/tailwindcss/examples/number-field-demo.tsx b/docs/src/registry/tailwindcss/examples/number-field-demo.tsx
index c72cbfd2..c92abcc0 100644
--- a/docs/src/registry/tailwindcss/examples/number-field-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/number-field-demo.tsx
@@ -1,26 +1,26 @@
 import {
-	NumberField,
-	NumberFieldDecrementTrigger,
-	NumberFieldGroup,
-	NumberFieldIncrementTrigger,
-	NumberFieldInput,
-	NumberFieldLabel,
-} from "@/registry/tailwindcss/ui/number-field";
+  NumberField,
+  NumberFieldDecrementTrigger,
+  NumberFieldGroup,
+  NumberFieldIncrementTrigger,
+  NumberFieldInput,
+  NumberFieldLabel,
+} from "@/registry/tailwindcss/ui/number-field"
 
 const NumberFieldDemo = () => {
-	const thisYear = () => new Date(Date.now()).getUTCFullYear();
-	const age = () => thisYear() - 2001;
+  const thisYear = () => new Date(Date.now()).getUTCFullYear()
+  const age = () => thisYear() - 2001
 
-	return (
-		<NumberField defaultValue={age()} minValue={0}>
-			<NumberFieldLabel>Age</NumberFieldLabel>
-			<NumberFieldGroup>
-				<NumberFieldDecrementTrigger aria-label="Decrement" />
-				<NumberFieldInput />
-				<NumberFieldIncrementTrigger aria-label="Increment" />
-			</NumberFieldGroup>
-		</NumberField>
-	);
-};
+  return (
+    <NumberField defaultValue={age()} minValue={0}>
+      <NumberFieldLabel>Age</NumberFieldLabel>
+      <NumberFieldGroup>
+        <NumberFieldDecrementTrigger aria-label="Decrement" />
+        <NumberFieldInput />
+        <NumberFieldIncrementTrigger aria-label="Increment" />
+      </NumberFieldGroup>
+    </NumberField>
+  )
+}
 
-export default NumberFieldDemo;
+export default NumberFieldDemo
diff --git a/docs/src/registry/tailwindcss/examples/number-field-disabled-demo.tsx b/docs/src/registry/tailwindcss/examples/number-field-disabled-demo.tsx
index c3b63377..03f904ae 100644
--- a/docs/src/registry/tailwindcss/examples/number-field-disabled-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/number-field-disabled-demo.tsx
@@ -1,26 +1,26 @@
 import {
-	NumberField,
-	NumberFieldDecrementTrigger,
-	NumberFieldGroup,
-	NumberFieldIncrementTrigger,
-	NumberFieldInput,
-	NumberFieldLabel,
-} from "@/registry/tailwindcss/ui/number-field";
+  NumberField,
+  NumberFieldDecrementTrigger,
+  NumberFieldGroup,
+  NumberFieldIncrementTrigger,
+  NumberFieldInput,
+  NumberFieldLabel,
+} from "@/registry/tailwindcss/ui/number-field"
 
 const NumberFieldDemo = () => {
-	const thisYear = () => new Date(Date.now()).getUTCFullYear();
-	const age = () => thisYear() - 2001;
+  const thisYear = () => new Date(Date.now()).getUTCFullYear()
+  const age = () => thisYear() - 2001
 
-	return (
-		<NumberField defaultValue={age()} minValue={0} disabled>
-			<NumberFieldLabel>Age</NumberFieldLabel>
-			<NumberFieldGroup>
-				<NumberFieldDecrementTrigger aria-label="Decrement" />
-				<NumberFieldInput />
-				<NumberFieldIncrementTrigger aria-label="Increment" />
-			</NumberFieldGroup>
-		</NumberField>
-	);
-};
+  return (
+    <NumberField defaultValue={age()} minValue={0} disabled>
+      <NumberFieldLabel>Age</NumberFieldLabel>
+      <NumberFieldGroup>
+        <NumberFieldDecrementTrigger aria-label="Decrement" />
+        <NumberFieldInput />
+        <NumberFieldIncrementTrigger aria-label="Increment" />
+      </NumberFieldGroup>
+    </NumberField>
+  )
+}
 
-export default NumberFieldDemo;
+export default NumberFieldDemo
diff --git a/docs/src/registry/tailwindcss/examples/number-field-with-error-demo.tsx b/docs/src/registry/tailwindcss/examples/number-field-with-error-demo.tsx
index 49e81990..d300f3dd 100644
--- a/docs/src/registry/tailwindcss/examples/number-field-with-error-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/number-field-with-error-demo.tsx
@@ -1,39 +1,40 @@
+import { createSignal } from "solid-js"
+
 import {
-	NumberField,
-	NumberFieldDecrementTrigger,
-	NumberFieldErrorMessage,
-	NumberFieldGroup,
-	NumberFieldIncrementTrigger,
-	NumberFieldInput,
-	NumberFieldLabel,
-} from "@/registry/tailwindcss/ui/number-field";
-import { createSignal } from "solid-js";
+  NumberField,
+  NumberFieldDecrementTrigger,
+  NumberFieldErrorMessage,
+  NumberFieldGroup,
+  NumberFieldIncrementTrigger,
+  NumberFieldInput,
+  NumberFieldLabel,
+} from "@/registry/tailwindcss/ui/number-field"
 
 const NumberFieldDemo = () => {
-	const [value, setValue] = createSignal(1000);
+  const [value, setValue] = createSignal(1000)
 
-	return (
-		<NumberField
-			formatOptions={{
-				style: "currency",
-				currency: "VND",
-			}}
-			rawValue={value()}
-			onRawValueChange={setValue}
-			validationState={value() >= 1000 ? "valid" : "invalid"}
-			minValue={0}
-		>
-			<NumberFieldLabel>Payment</NumberFieldLabel>
-			<NumberFieldGroup>
-				<NumberFieldDecrementTrigger aria-label="Decrement" />
-				<NumberFieldInput />
-				<NumberFieldIncrementTrigger aria-label="Increment" />
-			</NumberFieldGroup>
-			<NumberFieldErrorMessage>
-				Min ₫1000 to send payment
-			</NumberFieldErrorMessage>
-		</NumberField>
-	);
-};
+  return (
+    <NumberField
+      formatOptions={{
+        style: "currency",
+        currency: "VND",
+      }}
+      rawValue={value()}
+      onRawValueChange={setValue}
+      validationState={value() >= 1000 ? "valid" : "invalid"}
+      minValue={0}
+    >
+      <NumberFieldLabel>Payment</NumberFieldLabel>
+      <NumberFieldGroup>
+        <NumberFieldDecrementTrigger aria-label="Decrement" />
+        <NumberFieldInput />
+        <NumberFieldIncrementTrigger aria-label="Increment" />
+      </NumberFieldGroup>
+      <NumberFieldErrorMessage>
+        Min ₫1000 to send payment
+      </NumberFieldErrorMessage>
+    </NumberField>
+  )
+}
 
-export default NumberFieldDemo;
+export default NumberFieldDemo
diff --git a/docs/src/registry/tailwindcss/examples/otp-field-demo.tsx b/docs/src/registry/tailwindcss/examples/otp-field-demo.tsx
index dc30a203..56485591 100644
--- a/docs/src/registry/tailwindcss/examples/otp-field-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/otp-field-demo.tsx
@@ -1,28 +1,28 @@
 import {
-	OTPField,
-	OTPFieldGroup,
-	OTPFieldInput,
-	OTPFieldSeparator,
-	OTPFieldSlot,
-} from "@/registry/tailwindcss/ui/otp-field";
+  OTPField,
+  OTPFieldGroup,
+  OTPFieldInput,
+  OTPFieldSeparator,
+  OTPFieldSlot,
+} from "@/registry/tailwindcss/ui/otp-field"
 
 const OtpFieldDemo = () => {
-	return (
-		<OTPField maxLength={6}>
-			<OTPFieldInput />
-			<OTPFieldGroup>
-				<OTPFieldSlot index={0} />
-				<OTPFieldSlot index={1} />
-				<OTPFieldSlot index={2} />
-			</OTPFieldGroup>
-			<OTPFieldSeparator />
-			<OTPFieldGroup>
-				<OTPFieldSlot index={3} />
-				<OTPFieldSlot index={4} />
-				<OTPFieldSlot index={5} />
-			</OTPFieldGroup>
-		</OTPField>
-	);
-};
+  return (
+    <OTPField maxLength={6}>
+      <OTPFieldInput />
+      <OTPFieldGroup>
+        <OTPFieldSlot index={0} />
+        <OTPFieldSlot index={1} />
+        <OTPFieldSlot index={2} />
+      </OTPFieldGroup>
+      <OTPFieldSeparator />
+      <OTPFieldGroup>
+        <OTPFieldSlot index={3} />
+        <OTPFieldSlot index={4} />
+        <OTPFieldSlot index={5} />
+      </OTPFieldGroup>
+    </OTPField>
+  )
+}
 
-export default OtpFieldDemo;
+export default OtpFieldDemo
diff --git a/docs/src/registry/tailwindcss/examples/otp-field-with-controlled-demo.tsx b/docs/src/registry/tailwindcss/examples/otp-field-with-controlled-demo.tsx
index e991df86..dc4f3356 100644
--- a/docs/src/registry/tailwindcss/examples/otp-field-with-controlled-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/otp-field-with-controlled-demo.tsx
@@ -1,34 +1,35 @@
+import { Show, createSignal } from "solid-js"
+
 import {
-	OTPField,
-	OTPFieldGroup,
-	OTPFieldInput,
-	OTPFieldSlot,
-} from "@/registry/tailwindcss/ui/otp-field";
-import { Show, createSignal } from "solid-js";
+  OTPField,
+  OTPFieldGroup,
+  OTPFieldInput,
+  OTPFieldSlot,
+} from "@/registry/tailwindcss/ui/otp-field"
 
 const OtpFieldWithControlledDemo = () => {
-	const [value, setValue] = createSignal<string>();
+  const [value, setValue] = createSignal<string>()
 
-	return (
-		<div class="flex flex-col items-center gap-2">
-			<OTPField maxLength={6} value={value()} onValueChange={setValue}>
-				<OTPFieldInput />
-				<OTPFieldGroup>
-					<OTPFieldSlot index={0} />
-					<OTPFieldSlot index={1} />
-					<OTPFieldSlot index={2} />
-					<OTPFieldSlot index={3} />
-					<OTPFieldSlot index={4} />
-					<OTPFieldSlot index={5} />
-				</OTPFieldGroup>
-			</OTPField>
-			<span class="text-center text-sm">
-				<Show fallback="Enter your one-time password." when={value()}>
-					You entered: {value()}
-				</Show>
-			</span>
-		</div>
-	);
-};
+  return (
+    <div class="flex flex-col items-center gap-2">
+      <OTPField maxLength={6} value={value()} onValueChange={setValue}>
+        <OTPFieldInput />
+        <OTPFieldGroup>
+          <OTPFieldSlot index={0} />
+          <OTPFieldSlot index={1} />
+          <OTPFieldSlot index={2} />
+          <OTPFieldSlot index={3} />
+          <OTPFieldSlot index={4} />
+          <OTPFieldSlot index={5} />
+        </OTPFieldGroup>
+      </OTPField>
+      <span class="text-center text-sm">
+        <Show fallback="Enter your one-time password." when={value()}>
+          You entered: {value()}
+        </Show>
+      </span>
+    </div>
+  )
+}
 
-export default OtpFieldWithControlledDemo;
+export default OtpFieldWithControlledDemo
diff --git a/docs/src/registry/tailwindcss/examples/otp-field-with-pattern-demo.tsx b/docs/src/registry/tailwindcss/examples/otp-field-with-pattern-demo.tsx
index b8f79d42..e7f0a964 100644
--- a/docs/src/registry/tailwindcss/examples/otp-field-with-pattern-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/otp-field-with-pattern-demo.tsx
@@ -1,24 +1,24 @@
 import {
-	OTPField,
-	OTPFieldGroup,
-	OTPFieldInput,
-	OTPFieldSlot,
-} from "@/registry/tailwindcss/ui/otp-field";
+  OTPField,
+  OTPFieldGroup,
+  OTPFieldInput,
+  OTPFieldSlot,
+} from "@/registry/tailwindcss/ui/otp-field"
 
 const OTPFieldWithPatternDemo = () => {
-	return (
-		<OTPField maxLength={6}>
-			<OTPFieldInput pattern="^[a-zA-Z0-9]*$" />
-			<OTPFieldGroup>
-				<OTPFieldSlot index={0} />
-				<OTPFieldSlot index={1} />
-				<OTPFieldSlot index={2} />
-				<OTPFieldSlot index={3} />
-				<OTPFieldSlot index={4} />
-				<OTPFieldSlot index={5} />
-			</OTPFieldGroup>
-		</OTPField>
-	);
-};
+  return (
+    <OTPField maxLength={6}>
+      <OTPFieldInput pattern="^[a-zA-Z0-9]*$" />
+      <OTPFieldGroup>
+        <OTPFieldSlot index={0} />
+        <OTPFieldSlot index={1} />
+        <OTPFieldSlot index={2} />
+        <OTPFieldSlot index={3} />
+        <OTPFieldSlot index={4} />
+        <OTPFieldSlot index={5} />
+      </OTPFieldGroup>
+    </OTPField>
+  )
+}
 
-export default OTPFieldWithPatternDemo;
+export default OTPFieldWithPatternDemo
diff --git a/docs/src/registry/tailwindcss/examples/pagination-demo.tsx b/docs/src/registry/tailwindcss/examples/pagination-demo.tsx
index caaf59c8..99bd8703 100644
--- a/docs/src/registry/tailwindcss/examples/pagination-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/pagination-demo.tsx
@@ -1,27 +1,27 @@
 import {
-	Pagination,
-	PaginationEllipsis,
-	PaginationItem,
-	PaginationItems,
-	PaginationNext,
-	PaginationPrevious,
-} from "@/registry/tailwindcss/ui/pagination";
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationItems,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/tailwindcss/ui/pagination"
 
 const PaginationDemo = () => {
-	return (
-		<Pagination
-			fixedItems
-			count={10}
-			itemComponent={(props) => (
-				<PaginationItem page={props.page}>{props.page}</PaginationItem>
-			)}
-			ellipsisComponent={() => <PaginationEllipsis />}
-		>
-			<PaginationPrevious />
-			<PaginationItems />
-			<PaginationNext />
-		</Pagination>
-	);
-};
+  return (
+    <Pagination
+      fixedItems
+      count={10}
+      itemComponent={(props) => (
+        <PaginationItem page={props.page}>{props.page}</PaginationItem>
+      )}
+      ellipsisComponent={() => <PaginationEllipsis />}
+    >
+      <PaginationPrevious />
+      <PaginationItems />
+      <PaginationNext />
+    </Pagination>
+  )
+}
 
-export default PaginationDemo;
+export default PaginationDemo
diff --git a/docs/src/registry/tailwindcss/examples/popover-demo.tsx b/docs/src/registry/tailwindcss/examples/popover-demo.tsx
index 0ec80afd..b914047e 100644
--- a/docs/src/registry/tailwindcss/examples/popover-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/popover-demo.tsx
@@ -1,58 +1,59 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import type { PopoverTriggerProps } from "@kobalte/core/popover"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Popover,
-	PopoverContent,
-	PopoverDescription,
-	PopoverTitle,
-	PopoverTrigger,
-} from "@/registry/tailwindcss/ui/popover";
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/registry/tailwindcss/ui/popover"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
-import type { PopoverTriggerProps } from "@kobalte/core/popover";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const PopoverDemo = () => {
-	return (
-		<Popover>
-			<PopoverTrigger
-				as={(props: PopoverTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Open popover
-					</Button>
-				)}
-			/>
-			<PopoverContent class="w-80">
-				<div class="grid gap-4">
-					<PopoverTitle class="space-y-2">
-						<h4 class="font-medium leading-none">Dimensions</h4>
-						<p class="text-sm text-muted-foreground">
-							Set the dimensions for the layer.
-						</p>
-					</PopoverTitle>
-					<PopoverDescription class="grid gap-2">
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Width</TextFieldLabel>
-							<TextField value="100%" class="col-span-2 h-8" />
-						</TextFieldRoot>
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Max. width</TextFieldLabel>
-							<TextField value="300px" class="col-span-2 h-8" />
-						</TextFieldRoot>
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Height</TextFieldLabel>
-							<TextField value="25px" class="col-span-2 h-8" />
-						</TextFieldRoot>
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Max. height</TextFieldLabel>
-							<TextField value="none" class="col-span-2 h-8" />
-						</TextFieldRoot>
-					</PopoverDescription>
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-};
+  return (
+    <Popover>
+      <PopoverTrigger
+        as={(props: PopoverTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Open popover
+          </Button>
+        )}
+      />
+      <PopoverContent class="w-80">
+        <div class="grid gap-4">
+          <PopoverTitle class="space-y-2">
+            <h4 class="font-medium leading-none">Dimensions</h4>
+            <p class="text-muted-foreground text-sm">
+              Set the dimensions for the layer.
+            </p>
+          </PopoverTitle>
+          <PopoverDescription class="grid gap-2">
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Width</TextFieldLabel>
+              <TextField value="100%" class="col-span-2 h-8" />
+            </TextFieldRoot>
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Max. width</TextFieldLabel>
+              <TextField value="300px" class="col-span-2 h-8" />
+            </TextFieldRoot>
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Height</TextFieldLabel>
+              <TextField value="25px" class="col-span-2 h-8" />
+            </TextFieldRoot>
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Max. height</TextFieldLabel>
+              <TextField value="none" class="col-span-2 h-8" />
+            </TextFieldRoot>
+          </PopoverDescription>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
 
-export default PopoverDemo;
+export default PopoverDemo
diff --git a/docs/src/registry/tailwindcss/examples/progress-demo.tsx b/docs/src/registry/tailwindcss/examples/progress-demo.tsx
index 17171fb2..9dfa6e05 100644
--- a/docs/src/registry/tailwindcss/examples/progress-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/progress-demo.tsx
@@ -1,7 +1,7 @@
-import { Progress } from "@/registry/tailwindcss/ui/progress";
+import { Progress } from "@/registry/tailwindcss/ui/progress"
 
 const ProgressDemo = () => {
-	return <Progress value={60} class="w-60%" />;
-};
+  return <Progress value={60} class="w-60%" />
+}
 
-export default ProgressDemo;
+export default ProgressDemo
diff --git a/docs/src/registry/tailwindcss/examples/radio-group-demo.tsx b/docs/src/registry/tailwindcss/examples/radio-group-demo.tsx
index 5403b24a..057f05d1 100644
--- a/docs/src/registry/tailwindcss/examples/radio-group-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/radio-group-demo.tsx
@@ -1,24 +1,25 @@
+import { For } from "solid-js"
+
 import {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupItemControl,
-	RadioGroupItemLabel,
-} from "@/registry/tailwindcss/ui/radio-group";
-import { For } from "solid-js";
+  RadioGroup,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemLabel,
+} from "@/registry/tailwindcss/ui/radio-group"
 
 const RadioGroupDemo = () => {
-	return (
-		<RadioGroup defaultValue="Orange" class="grid gap-2">
-			<For each={["Apple", "Orange", "Watermelon"]}>
-				{(fruit) => (
-					<RadioGroupItem value={fruit} class="flex items-center gap-2">
-						<RadioGroupItemControl />
-						<RadioGroupItemLabel class="text-sm">{fruit}</RadioGroupItemLabel>
-					</RadioGroupItem>
-				)}
-			</For>
-		</RadioGroup>
-	);
-};
+  return (
+    <RadioGroup defaultValue="Orange" class="grid gap-2">
+      <For each={["Apple", "Orange", "Watermelon"]}>
+        {(fruit) => (
+          <RadioGroupItem value={fruit} class="flex items-center gap-2">
+            <RadioGroupItemControl />
+            <RadioGroupItemLabel class="text-sm">{fruit}</RadioGroupItemLabel>
+          </RadioGroupItem>
+        )}
+      </For>
+    </RadioGroup>
+  )
+}
 
-export default RadioGroupDemo;
+export default RadioGroupDemo
diff --git a/docs/src/registry/tailwindcss/examples/resizable-demo.tsx b/docs/src/registry/tailwindcss/examples/resizable-demo.tsx
index 1e6c587f..1543e15e 100644
--- a/docs/src/registry/tailwindcss/examples/resizable-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/resizable-demo.tsx
@@ -1,35 +1,35 @@
 import {
-	Resizable,
-	ResizableHandle,
-	ResizablePanel,
-} from "@/registry/tailwindcss/ui/resizable";
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/registry/tailwindcss/ui/resizable"
 
 const ResizableDemo = () => {
-	return (
-		<Resizable class="max-w-md rounded-lg border">
-			<ResizablePanel initialSize={0.3} minSize={0.2}>
-				<div class="flex h-[200px] items-center justify-center">
-					<span class="font-semibold">A</span>
-				</div>
-			</ResizablePanel>
-			<ResizableHandle />
-			<ResizablePanel initialSize={0.7} minSize={0.2}>
-				<Resizable orientation="vertical">
-					<ResizablePanel initialSize={0.5} minSize={0.2}>
-						<div class="flex h-full items-center justify-center">
-							<span class="font-semibold">B</span>
-						</div>
-					</ResizablePanel>
-					<ResizableHandle />
-					<ResizablePanel initialSize={0.5} minSize={0.2}>
-						<div class="flex h-full items-center justify-center">
-							<span class="font-semibold">C</span>
-						</div>
-					</ResizablePanel>
-				</Resizable>
-			</ResizablePanel>
-		</Resizable>
-	);
-};
+  return (
+    <Resizable class="max-w-md rounded-lg border">
+      <ResizablePanel initialSize={0.3} minSize={0.2}>
+        <div class="flex h-[200px] items-center justify-center">
+          <span class="font-semibold">A</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel initialSize={0.7} minSize={0.2}>
+        <Resizable orientation="vertical">
+          <ResizablePanel initialSize={0.5} minSize={0.2}>
+            <div class="flex h-full items-center justify-center">
+              <span class="font-semibold">B</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel initialSize={0.5} minSize={0.2}>
+            <div class="flex h-full items-center justify-center">
+              <span class="font-semibold">C</span>
+            </div>
+          </ResizablePanel>
+        </Resizable>
+      </ResizablePanel>
+    </Resizable>
+  )
+}
 
-export default ResizableDemo;
+export default ResizableDemo
diff --git a/docs/src/registry/tailwindcss/examples/resizable-vertical-demo.tsx b/docs/src/registry/tailwindcss/examples/resizable-vertical-demo.tsx
index e42fae11..67950843 100644
--- a/docs/src/registry/tailwindcss/examples/resizable-vertical-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/resizable-vertical-demo.tsx
@@ -1,28 +1,28 @@
 import {
-	Resizable,
-	ResizableHandle,
-	ResizablePanel,
-} from "@/registry/tailwindcss/ui/resizable";
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/registry/tailwindcss/ui/resizable"
 
 const ResizableVerticalDemo = () => {
-	return (
-		<Resizable
-			orientation="vertical"
-			class="h-[200px] max-w-md rounded-lg border"
-		>
-			<ResizablePanel initialSize={0.3} minSize={0.2}>
-				<div class="flex h-full items-center justify-center">
-					<span class="font-semibold">A</span>
-				</div>
-			</ResizablePanel>
-			<ResizableHandle />
-			<ResizablePanel initialSize={0.7} minSize={0.2}>
-				<div class="flex h-full items-center justify-center">
-					<span class="font-semibold">B</span>
-				</div>
-			</ResizablePanel>
-		</Resizable>
-	);
-};
+  return (
+    <Resizable
+      orientation="vertical"
+      class="h-[200px] max-w-md rounded-lg border"
+    >
+      <ResizablePanel initialSize={0.3} minSize={0.2}>
+        <div class="flex h-full items-center justify-center">
+          <span class="font-semibold">A</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel initialSize={0.7} minSize={0.2}>
+        <div class="flex h-full items-center justify-center">
+          <span class="font-semibold">B</span>
+        </div>
+      </ResizablePanel>
+    </Resizable>
+  )
+}
 
-export default ResizableVerticalDemo;
+export default ResizableVerticalDemo
diff --git a/docs/src/registry/tailwindcss/examples/resizable-with-handle-demo.tsx b/docs/src/registry/tailwindcss/examples/resizable-with-handle-demo.tsx
index 4e7bdce8..4ad52c03 100644
--- a/docs/src/registry/tailwindcss/examples/resizable-with-handle-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/resizable-with-handle-demo.tsx
@@ -1,25 +1,25 @@
 import {
-	Resizable,
-	ResizableHandle,
-	ResizablePanel,
-} from "@/registry/tailwindcss/ui/resizable";
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/registry/tailwindcss/ui/resizable"
 
 const ResizableWithHandleDemo = () => {
-	return (
-		<Resizable class="min-h-[200px] max-w-md rounded-lg border">
-			<ResizablePanel initialSize={0.3} minSize={0.2}>
-				<div class="flex h-full items-center justify-center">
-					<span class="font-semibold">A</span>
-				</div>
-			</ResizablePanel>
-			<ResizableHandle withHandle />
-			<ResizablePanel initialSize={0.7} minSize={0.2}>
-				<div class="flex h-full items-center justify-center">
-					<span class="font-semibold">B</span>
-				</div>
-			</ResizablePanel>
-		</Resizable>
-	);
-};
+  return (
+    <Resizable class="min-h-[200px] max-w-md rounded-lg border">
+      <ResizablePanel initialSize={0.3} minSize={0.2}>
+        <div class="flex h-full items-center justify-center">
+          <span class="font-semibold">A</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel initialSize={0.7} minSize={0.2}>
+        <div class="flex h-full items-center justify-center">
+          <span class="font-semibold">B</span>
+        </div>
+      </ResizablePanel>
+    </Resizable>
+  )
+}
 
-export default ResizableWithHandleDemo;
+export default ResizableWithHandleDemo
diff --git a/docs/src/registry/tailwindcss/examples/select-demo.tsx b/docs/src/registry/tailwindcss/examples/select-demo.tsx
index ba066891..b7906edf 100644
--- a/docs/src/registry/tailwindcss/examples/select-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/select-demo.tsx
@@ -1,26 +1,26 @@
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/registry/tailwindcss/ui/select";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/tailwindcss/ui/select"
 
 const SelectDemo = () => {
-	return (
-		<Select
-			options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-			placeholder="Select a fruit…"
-			itemComponent={(props) => (
-				<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-			)}
-		>
-			<SelectTrigger class="w-[180px]">
-				<SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
-			</SelectTrigger>
-			<SelectContent />
-		</Select>
-	);
-};
+  return (
+    <Select
+      options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
+      placeholder="Select a fruit…"
+      itemComponent={(props) => (
+        <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+      )}
+    >
+      <SelectTrigger class="w-[180px]">
+        <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+      </SelectTrigger>
+      <SelectContent />
+    </Select>
+  )
+}
 
-export default SelectDemo;
+export default SelectDemo
diff --git a/docs/src/registry/tailwindcss/examples/separator-demo.tsx b/docs/src/registry/tailwindcss/examples/separator-demo.tsx
index 7f4f74c7..91aa03bb 100644
--- a/docs/src/registry/tailwindcss/examples/separator-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/separator-demo.tsx
@@ -1,24 +1,24 @@
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 
 const SeparatorDemo = () => {
-	return (
-		<div>
-			<div class="space-y-1">
-				<h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
-				<p class="text-sm text-muted-foreground">
-					An open-source UI component library.
-				</p>
-			</div>
-			<Separator class="my-4" />
-			<div class="flex h-5 items-center space-x-4 text-sm">
-				<div>Docs</div>
-				<Separator orientation="vertical" />
-				<div>Source</div>
-				<Separator orientation="vertical" />
-				<div>Changelog</div>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div>
+      <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
+        <p class="text-muted-foreground text-sm">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator class="my-4" />
+      <div class="flex h-5 items-center space-x-4 text-sm">
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+        <Separator orientation="vertical" />
+        <div>Changelog</div>
+      </div>
+    </div>
+  )
+}
 
-export default SeparatorDemo;
+export default SeparatorDemo
diff --git a/docs/src/registry/tailwindcss/examples/skeleton-demo.tsx b/docs/src/registry/tailwindcss/examples/skeleton-demo.tsx
index ee43f57f..d29e04f6 100644
--- a/docs/src/registry/tailwindcss/examples/skeleton-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/skeleton-demo.tsx
@@ -1,15 +1,15 @@
-import { Skeleton } from "@/registry/tailwindcss/ui/skeleton";
+import { Skeleton } from "@/registry/tailwindcss/ui/skeleton"
 
 const SkeletonDemo = () => {
-	return (
-		<div class="flex items-center space-x-4">
-			<Skeleton class="h-12 w-12 rounded-full" />
-			<div class="space-y-2">
-				<Skeleton class="h-4 w-[250px]" />
-				<Skeleton class="h-4 w-[200px]" />
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="flex items-center space-x-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-[250px]" />
+        <Skeleton class="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
 
-export default SkeletonDemo;
+export default SkeletonDemo
diff --git a/docs/src/registry/tailwindcss/examples/sonner-demo.tsx b/docs/src/registry/tailwindcss/examples/sonner-demo.tsx
index 65e5dedd..52f35307 100644
--- a/docs/src/registry/tailwindcss/examples/sonner-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/sonner-demo.tsx
@@ -1,23 +1,24 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { toast } from "somoto";
+import { toast } from "somoto"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const SonnerDemo = () => {
-	return (
-		<Button
-			variant="outline"
-			onClick={() =>
-				toast("Event has been created", {
-					description: "Sunday, December 03, 2023 at 9:00 AM",
-					action: {
-						label: "Undo",
-						onClick: () => console.log("Undo"),
-					},
-				})
-			}
-		>
-			Show Toast
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
 
-export default SonnerDemo;
+export default SonnerDemo
diff --git a/docs/src/registry/tailwindcss/examples/switch-demo.tsx b/docs/src/registry/tailwindcss/examples/switch-demo.tsx
index a1259052..ebc08558 100644
--- a/docs/src/registry/tailwindcss/examples/switch-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/switch-demo.tsx
@@ -1,21 +1,21 @@
 import {
-	Switch,
-	SwitchControl,
-	SwitchLabel,
-	SwitchThumb,
-} from "@/registry/tailwindcss/ui/switch";
+  Switch,
+  SwitchControl,
+  SwitchLabel,
+  SwitchThumb,
+} from "@/registry/tailwindcss/ui/switch"
 
 const SwitchDemo = () => {
-	return (
-		<Switch class="flex items-center space-x-2">
-			<SwitchControl>
-				<SwitchThumb />
-			</SwitchControl>
-			<SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
-				Airplane Mode
-			</SwitchLabel>
-		</Switch>
-	);
-};
+  return (
+    <Switch class="flex items-center space-x-2">
+      <SwitchControl>
+        <SwitchThumb />
+      </SwitchControl>
+      <SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
+        Airplane Mode
+      </SwitchLabel>
+    </Switch>
+  )
+}
 
-export default SwitchDemo;
+export default SwitchDemo
diff --git a/docs/src/registry/tailwindcss/examples/table-demo.tsx b/docs/src/registry/tailwindcss/examples/table-demo.tsx
index d79478ef..956117b7 100644
--- a/docs/src/registry/tailwindcss/examples/table-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/table-demo.tsx
@@ -1,85 +1,86 @@
+import { For } from "solid-js"
+
 import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/registry/tailwindcss/ui/table";
-import { For } from "solid-js";
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/tailwindcss/ui/table"
 
 const invoices = [
-	{
-		invoice: "INV001",
-		paymentStatus: "Paid",
-		totalAmount: "$250.00",
-		paymentMethod: "Credit Card",
-	},
-	{
-		invoice: "INV002",
-		paymentStatus: "Pending",
-		totalAmount: "$150.00",
-		paymentMethod: "PayPal",
-	},
-	{
-		invoice: "INV003",
-		paymentStatus: "Unpaid",
-		totalAmount: "$350.00",
-		paymentMethod: "Bank Transfer",
-	},
-	{
-		invoice: "INV004",
-		paymentStatus: "Paid",
-		totalAmount: "$450.00",
-		paymentMethod: "Credit Card",
-	},
-	{
-		invoice: "INV005",
-		paymentStatus: "Paid",
-		totalAmount: "$550.00",
-		paymentMethod: "PayPal",
-	},
-	{
-		invoice: "INV006",
-		paymentStatus: "Pending",
-		totalAmount: "$200.00",
-		paymentMethod: "Bank Transfer",
-	},
-	{
-		invoice: "INV007",
-		paymentStatus: "Unpaid",
-		totalAmount: "$300.00",
-		paymentMethod: "Credit Card",
-	},
-];
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
 
 const TableDemo = () => {
-	return (
-		<Table>
-			<TableCaption>A list of your recent invoices.</TableCaption>
-			<TableHeader>
-				<TableRow>
-					<TableHead class="w-[100px]">Invoice</TableHead>
-					<TableHead>Status</TableHead>
-					<TableHead>Method</TableHead>
-					<TableHead class="text-right">Amount</TableHead>
-				</TableRow>
-			</TableHeader>
-			<TableBody>
-				<For each={invoices}>
-					{(invoice) => (
-						<TableRow>
-							<TableCell class="font-medium">{invoice.invoice}</TableCell>
-							<TableCell>{invoice.paymentStatus}</TableCell>
-							<TableCell>{invoice.paymentMethod}</TableCell>
-							<TableCell class="text-right">{invoice.totalAmount}</TableCell>
-						</TableRow>
-					)}
-				</For>
-			</TableBody>
-		</Table>
-	);
-};
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead class="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <For each={invoices}>
+          {(invoice) => (
+            <TableRow>
+              <TableCell class="font-medium">{invoice.invoice}</TableCell>
+              <TableCell>{invoice.paymentStatus}</TableCell>
+              <TableCell>{invoice.paymentMethod}</TableCell>
+              <TableCell class="text-right">{invoice.totalAmount}</TableCell>
+            </TableRow>
+          )}
+        </For>
+      </TableBody>
+    </Table>
+  )
+}
 
-export default TableDemo;
+export default TableDemo
diff --git a/docs/src/registry/tailwindcss/examples/tabs-demo.tsx b/docs/src/registry/tailwindcss/examples/tabs-demo.tsx
index d9c34069..051f3134 100644
--- a/docs/src/registry/tailwindcss/examples/tabs-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/tabs-demo.tsx
@@ -1,81 +1,81 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Tabs,
-	TabsContent,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/registry/tailwindcss/ui/tabs";
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/tailwindcss/ui/tabs"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TabsDemo = () => {
-	return (
-		<Tabs defaultValue="account" class="w-[400px]">
-			<TabsList>
-				<TabsTrigger value="account">Account</TabsTrigger>
-				<TabsTrigger value="password">Password</TabsTrigger>
-				<TabsIndicator />
-			</TabsList>
-			<TabsContent value="account">
-				<Card>
-					<CardHeader>
-						<CardTitle>Account</CardTitle>
-						<CardDescription>
-							Make changes to your account here. Click save when you're done.
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="space-y-2">
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Name</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Username</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-					</CardContent>
-					<CardFooter>
-						<Button>Save changes</Button>
-					</CardFooter>
-				</Card>
-			</TabsContent>
-			<TabsContent value="password">
-				<Card>
-					<CardHeader>
-						<CardTitle>Password</CardTitle>
-						<CardDescription>
-							Change your password here. After saving, you'll be logged out.
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="space-y-2">
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Current password</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>New password</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-					</CardContent>
-					<CardFooter>
-						<Button>Save password</Button>
-					</CardFooter>
-				</Card>
-			</TabsContent>
-		</Tabs>
-	);
-};
+  return (
+    <Tabs defaultValue="account" class="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsIndicator />
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Name</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Username</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Current password</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>New password</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
 
-export default TabsDemo;
+export default TabsDemo
diff --git a/docs/src/registry/tailwindcss/examples/tabs-orientation-demo.tsx b/docs/src/registry/tailwindcss/examples/tabs-orientation-demo.tsx
index cf9be831..b052c07d 100644
--- a/docs/src/registry/tailwindcss/examples/tabs-orientation-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/tabs-orientation-demo.tsx
@@ -1,81 +1,81 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Tabs,
-	TabsContent,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/registry/tailwindcss/ui/tabs";
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/tailwindcss/ui/tabs"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TabsOrientationDemo = () => {
-	return (
-		<Tabs defaultValue="account" class="w-[500px]" orientation="vertical">
-			<TabsList class="max-w-[200px]">
-				<TabsTrigger value="account">Account</TabsTrigger>
-				<TabsTrigger value="password">Password</TabsTrigger>
-				<TabsIndicator />
-			</TabsList>
-			<TabsContent value="account">
-				<Card>
-					<CardHeader>
-						<CardTitle>Account</CardTitle>
-						<CardDescription>
-							Make changes to your account here. Click save when you're done.
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="space-y-2">
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Name</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Username</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-					</CardContent>
-					<CardFooter>
-						<Button>Save changes</Button>
-					</CardFooter>
-				</Card>
-			</TabsContent>
-			<TabsContent value="password">
-				<Card>
-					<CardHeader>
-						<CardTitle>Password</CardTitle>
-						<CardDescription>
-							Change your password here. After saving, you'll be logged out.
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="space-y-2">
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Current password</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>New password</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-					</CardContent>
-					<CardFooter>
-						<Button>Save password</Button>
-					</CardFooter>
-				</Card>
-			</TabsContent>
-		</Tabs>
-	);
-};
+  return (
+    <Tabs defaultValue="account" class="w-[500px]" orientation="vertical">
+      <TabsList class="max-w-[200px]">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsIndicator />
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Name</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Username</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Current password</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>New password</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
 
-export default TabsOrientationDemo;
+export default TabsOrientationDemo
diff --git a/docs/src/registry/tailwindcss/examples/textarea-demo.tsx b/docs/src/registry/tailwindcss/examples/textarea-demo.tsx
index 49400a1a..d8eacfa7 100644
--- a/docs/src/registry/tailwindcss/examples/textarea-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/textarea-demo.tsx
@@ -1,12 +1,12 @@
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
-import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
+import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 
 const TextareaDemo = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextArea placeholder="Type your message here." />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextArea placeholder="Type your message here." />
+    </TextFieldRoot>
+  )
+}
 
-export default TextareaDemo;
+export default TextareaDemo
diff --git a/docs/src/registry/tailwindcss/examples/textarea-disabled.tsx b/docs/src/registry/tailwindcss/examples/textarea-disabled.tsx
index f0100ace..bd12ddbc 100644
--- a/docs/src/registry/tailwindcss/examples/textarea-disabled.tsx
+++ b/docs/src/registry/tailwindcss/examples/textarea-disabled.tsx
@@ -1,12 +1,12 @@
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
-import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
+import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 
 const TextareaDisabled = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs" disabled>
-			<TextArea placeholder="Type your message here." />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs" disabled>
+      <TextArea placeholder="Type your message here." />
+    </TextFieldRoot>
+  )
+}
 
-export default TextareaDisabled;
+export default TextareaDisabled
diff --git a/docs/src/registry/tailwindcss/examples/textarea-with-button.tsx b/docs/src/registry/tailwindcss/examples/textarea-with-button.tsx
index ac32e340..bb5d0f7b 100644
--- a/docs/src/registry/tailwindcss/examples/textarea-with-button.tsx
+++ b/docs/src/registry/tailwindcss/examples/textarea-with-button.tsx
@@ -1,18 +1,18 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
-import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+import { Button } from "@/registry/tailwindcss/ui/button"
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
+import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 
 const TextareaWithButton = () => {
-	return (
-		<div class="flex w-full max-w-sm flex-col items-center gap-2">
-			<TextFieldRoot class="w-full">
-				<TextArea placeholder="Type your message here." />
-			</TextFieldRoot>
-			<Button type="submit" class="w-full">
-				Send message
-			</Button>
-		</div>
-	);
-};
+  return (
+    <div class="flex w-full max-w-sm flex-col items-center gap-2">
+      <TextFieldRoot class="w-full">
+        <TextArea placeholder="Type your message here." />
+      </TextFieldRoot>
+      <Button type="submit" class="w-full">
+        Send message
+      </Button>
+    </div>
+  )
+}
 
-export default TextareaWithButton;
+export default TextareaWithButton
diff --git a/docs/src/registry/tailwindcss/examples/textarea-with-label.tsx b/docs/src/registry/tailwindcss/examples/textarea-with-label.tsx
index ddc7a08b..c7bb6529 100644
--- a/docs/src/registry/tailwindcss/examples/textarea-with-label.tsx
+++ b/docs/src/registry/tailwindcss/examples/textarea-with-label.tsx
@@ -1,16 +1,16 @@
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
 import {
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TextareaWithLabel = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextFieldLabel>Your message</TextFieldLabel>
-			<TextArea placeholder="Type your message here." />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextFieldLabel>Your message</TextFieldLabel>
+      <TextArea placeholder="Type your message here." />
+    </TextFieldRoot>
+  )
+}
 
-export default TextareaWithLabel;
+export default TextareaWithLabel
diff --git a/docs/src/registry/tailwindcss/examples/textarea-with-text.tsx b/docs/src/registry/tailwindcss/examples/textarea-with-text.tsx
index 51d9be76..f7e38a66 100644
--- a/docs/src/registry/tailwindcss/examples/textarea-with-text.tsx
+++ b/docs/src/registry/tailwindcss/examples/textarea-with-text.tsx
@@ -1,18 +1,18 @@
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
 import {
-	TextFieldDescription,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextFieldDescription,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TextareaWithText = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextFieldLabel>Your message</TextFieldLabel>
-			<TextArea placeholder="Type your message here." />
-			<TextFieldDescription>Enter your email address.</TextFieldDescription>
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextFieldLabel>Your message</TextFieldLabel>
+      <TextArea placeholder="Type your message here." />
+      <TextFieldDescription>Enter your email address.</TextFieldDescription>
+    </TextFieldRoot>
+  )
+}
 
-export default TextareaWithText;
+export default TextareaWithText
diff --git a/docs/src/registry/tailwindcss/examples/textfield-demo.tsx b/docs/src/registry/tailwindcss/examples/textfield-demo.tsx
index 5075de05..da7056f9 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-demo.tsx
@@ -1,11 +1,11 @@
-import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldDemo = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextField type="email" placeholder="Email" />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextField type="email" placeholder="Email" />
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldDemo;
+export default TextFieldDemo
diff --git a/docs/src/registry/tailwindcss/examples/textfield-disabled.tsx b/docs/src/registry/tailwindcss/examples/textfield-disabled.tsx
index 3dd52d5b..4735004a 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-disabled.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-disabled.tsx
@@ -1,11 +1,11 @@
-import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldDisabled = () => {
-	return (
-		<TextFieldRoot disabled class="w-full max-w-xs">
-			<TextField type="email" placeholder="Email" />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot disabled class="w-full max-w-xs">
+      <TextField type="email" placeholder="Email" />
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldDisabled;
+export default TextFieldDisabled
diff --git a/docs/src/registry/tailwindcss/examples/textfield-file.tsx b/docs/src/registry/tailwindcss/examples/textfield-file.tsx
index 4ada0a58..0ca0d6e7 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-file.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-file.tsx
@@ -1,16 +1,16 @@
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldFile = () => {
-	return (
-		<TextFieldRoot disabled class="w-full max-w-xs">
-			<TextFieldLabel>Picture</TextFieldLabel>
-			<TextField type="file" />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot disabled class="w-full max-w-xs">
+      <TextFieldLabel>Picture</TextFieldLabel>
+      <TextField type="file" />
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldFile;
+export default TextFieldFile
diff --git a/docs/src/registry/tailwindcss/examples/textfield-with-button.tsx b/docs/src/registry/tailwindcss/examples/textfield-with-button.tsx
index 4774a3e8..42e320ca 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-with-button.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-with-button.tsx
@@ -1,15 +1,15 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+import { Button } from "@/registry/tailwindcss/ui/button"
+import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldWithButton = () => {
-	return (
-		<div class="flex w-full max-w-sm items-center space-x-2">
-			<TextFieldRoot class="w-full">
-				<TextField type="email" placeholder="Email" />
-			</TextFieldRoot>
-			<Button type="button">Subscribe</Button>
-		</div>
-	);
-};
+  return (
+    <div class="flex w-full max-w-sm items-center space-x-2">
+      <TextFieldRoot class="w-full">
+        <TextField type="email" placeholder="Email" />
+      </TextFieldRoot>
+      <Button type="button">Subscribe</Button>
+    </div>
+  )
+}
 
-export default TextFieldWithButton;
+export default TextFieldWithButton
diff --git a/docs/src/registry/tailwindcss/examples/textfield-with-error.tsx b/docs/src/registry/tailwindcss/examples/textfield-with-error.tsx
index 30423fb9..5779b3be 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-with-error.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-with-error.tsx
@@ -1,18 +1,18 @@
 import {
-	TextField,
-	TextFieldErrorMessage,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldErrorMessage,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldWithError = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs" validationState="invalid">
-			<TextFieldLabel>Email</TextFieldLabel>
-			<TextField type="email" placeholder="Email" />
-			<TextFieldErrorMessage>Email is required.</TextFieldErrorMessage>
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs" validationState="invalid">
+      <TextFieldLabel>Email</TextFieldLabel>
+      <TextField type="email" placeholder="Email" />
+      <TextFieldErrorMessage>Email is required.</TextFieldErrorMessage>
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldWithError;
+export default TextFieldWithError
diff --git a/docs/src/registry/tailwindcss/examples/textfield-with-label.tsx b/docs/src/registry/tailwindcss/examples/textfield-with-label.tsx
index b77f408a..9d85ac95 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-with-label.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-with-label.tsx
@@ -1,16 +1,16 @@
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldWithLabel = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextFieldLabel>Email</TextFieldLabel>
-			<TextField type="email" placeholder="Email" />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextFieldLabel>Email</TextFieldLabel>
+      <TextField type="email" placeholder="Email" />
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldWithLabel;
+export default TextFieldWithLabel
diff --git a/docs/src/registry/tailwindcss/examples/textfield-with-text.tsx b/docs/src/registry/tailwindcss/examples/textfield-with-text.tsx
index d7367e79..6e6f625c 100644
--- a/docs/src/registry/tailwindcss/examples/textfield-with-text.tsx
+++ b/docs/src/registry/tailwindcss/examples/textfield-with-text.tsx
@@ -1,18 +1,18 @@
 import {
-	TextField,
-	TextFieldDescription,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldDescription,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 const TextFieldWithText = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextFieldLabel>Email</TextFieldLabel>
-			<TextField type="email" placeholder="Email" />
-			<TextFieldDescription>Enter your email address.</TextFieldDescription>
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextFieldLabel>Email</TextFieldLabel>
+      <TextField type="email" placeholder="Email" />
+      <TextFieldDescription>Enter your email address.</TextFieldDescription>
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldWithText;
+export default TextFieldWithText
diff --git a/docs/src/registry/tailwindcss/examples/toast-demo.tsx b/docs/src/registry/tailwindcss/examples/toast-demo.tsx
index b7fdc512..44f2a3fe 100644
--- a/docs/src/registry/tailwindcss/examples/toast-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toast-demo.tsx
@@ -1,33 +1,34 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { toaster } from "@kobalte/core"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Toast,
-	ToastContent,
-	ToastDescription,
-	ToastProgress,
-	ToastTitle,
-} from "@/registry/tailwindcss/ui/toast";
-import { toaster } from "@kobalte/core";
+  Toast,
+  ToastContent,
+  ToastDescription,
+  ToastProgress,
+  ToastTitle,
+} from "@/registry/tailwindcss/ui/toast"
 
 const ToastDemo = () => {
-	const showToast = () => {
-		toaster.show((props) => (
-			<Toast toastId={props.toastId}>
-				<ToastContent>
-					<ToastTitle>Scheduled: Catch up</ToastTitle>
-					<ToastDescription>
-						Friday, February 10, 2023 at 5:57 PM
-					</ToastDescription>
-				</ToastContent>
-				<ToastProgress />
-			</Toast>
-		));
-	};
+  const showToast = () => {
+    toaster.show((props) => (
+      <Toast toastId={props.toastId}>
+        <ToastContent>
+          <ToastTitle>Scheduled: Catch up</ToastTitle>
+          <ToastDescription>
+            Friday, February 10, 2023 at 5:57 PM
+          </ToastDescription>
+        </ToastContent>
+        <ToastProgress />
+      </Toast>
+    ))
+  }
 
-	return (
-		<Button variant="outline" onClick={showToast}>
-			Add to calendar
-		</Button>
-	);
-};
+  return (
+    <Button variant="outline" onClick={showToast}>
+      Add to calendar
+    </Button>
+  )
+}
 
-export default ToastDemo;
+export default ToastDemo
diff --git a/docs/src/registry/tailwindcss/examples/toast-destructive.tsx b/docs/src/registry/tailwindcss/examples/toast-destructive.tsx
index cd4fca2a..38c38d1f 100644
--- a/docs/src/registry/tailwindcss/examples/toast-destructive.tsx
+++ b/docs/src/registry/tailwindcss/examples/toast-destructive.tsx
@@ -1,32 +1,33 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { toaster } from "@kobalte/core"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Toast,
-	ToastContent,
-	ToastDescription,
-	ToastProgress,
-	ToastTitle,
-} from "@/registry/tailwindcss/ui/toast";
-import { toaster } from "@kobalte/core";
+  Toast,
+  ToastContent,
+  ToastDescription,
+  ToastProgress,
+  ToastTitle,
+} from "@/registry/tailwindcss/ui/toast"
 
 const ToastDestructive = () => {
-	const showToast = () =>
-		toaster.show((props) => (
-			<Toast toastId={props.toastId} variant="destructive">
-				<ToastContent>
-					<ToastTitle>Uh oh! Something went wrong.</ToastTitle>
-					<ToastDescription>
-						There was a problem with your request.
-					</ToastDescription>
-				</ToastContent>
-				<ToastProgress />
-			</Toast>
-		));
+  const showToast = () =>
+    toaster.show((props) => (
+      <Toast toastId={props.toastId} variant="destructive">
+        <ToastContent>
+          <ToastTitle>Uh oh! Something went wrong.</ToastTitle>
+          <ToastDescription>
+            There was a problem with your request.
+          </ToastDescription>
+        </ToastContent>
+        <ToastProgress />
+      </Toast>
+    ))
 
-	return (
-		<Button variant="outline" onClick={showToast}>
-			Add to calendar
-		</Button>
-	);
-};
+  return (
+    <Button variant="outline" onClick={showToast}>
+      Add to calendar
+    </Button>
+  )
+}
 
-export default ToastDestructive;
+export default ToastDestructive
diff --git a/docs/src/registry/tailwindcss/examples/toggle-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-demo.tsx
index 83cfacff..3d323626 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-demo.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/registry/tailwindcss/ui/toggle";
+import { ToggleButton } from "@/registry/tailwindcss/ui/toggle"
 
 const ToggleDemo = () => {
-	return (
-		<ToggleButton aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleDemo;
+export default ToggleDemo
diff --git a/docs/src/registry/tailwindcss/examples/toggle-disabled.tsx b/docs/src/registry/tailwindcss/examples/toggle-disabled.tsx
index c2a14ee1..9d6247c3 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-disabled.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-disabled.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/registry/tailwindcss/ui/toggle";
+import { ToggleButton } from "@/registry/tailwindcss/ui/toggle"
 
 const ToggleDisabled = () => {
-	return (
-		<ToggleButton disabled aria-label="Toggle underline">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton disabled aria-label="Toggle underline">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleDisabled;
+export default ToggleDisabled
diff --git a/docs/src/registry/tailwindcss/examples/toggle-group-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-group-demo.tsx
index 022aac8f..810a5f38 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-group-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-group-demo.tsx
@@ -1,61 +1,61 @@
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 const ToggleGroupDemo = () => {
-	return (
-		<ToggleGroup multiple>
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup multiple>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupDemo;
+export default ToggleGroupDemo
diff --git a/docs/src/registry/tailwindcss/examples/toggle-group-disabled-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-group-disabled-demo.tsx
index c4dc6641..1eca735c 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-group-disabled-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-group-disabled-demo.tsx
@@ -1,61 +1,61 @@
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 const ToggleGroupOutline = () => {
-	return (
-		<ToggleGroup disabled>
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup disabled>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupOutline;
+export default ToggleGroupOutline
diff --git a/docs/src/registry/tailwindcss/examples/toggle-group-large-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-group-large-demo.tsx
index f9cfc742..8994759d 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-group-large-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-group-large-demo.tsx
@@ -1,61 +1,61 @@
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 const ToggleGroupOutline = () => {
-	return (
-		<ToggleGroup size="lg">
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup size="lg">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupOutline;
+export default ToggleGroupOutline
diff --git a/docs/src/registry/tailwindcss/examples/toggle-group-outline-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-group-outline-demo.tsx
index d6a4c846..3722d953 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-group-outline-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-group-outline-demo.tsx
@@ -1,61 +1,61 @@
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 const ToggleGroupOutline = () => {
-	return (
-		<ToggleGroup multiple variant="outline">
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup multiple variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupOutline;
+export default ToggleGroupOutline
diff --git a/docs/src/registry/tailwindcss/examples/toggle-group-single-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-group-single-demo.tsx
index 15d611b6..c3672ba3 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-group-single-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-group-single-demo.tsx
@@ -1,61 +1,61 @@
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 const ToggleGroupOutline = () => {
-	return (
-		<ToggleGroup>
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupOutline;
+export default ToggleGroupOutline
diff --git a/docs/src/registry/tailwindcss/examples/toggle-group-small-demo.tsx b/docs/src/registry/tailwindcss/examples/toggle-group-small-demo.tsx
index be093e52..f4d0ca9c 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-group-small-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-group-small-demo.tsx
@@ -1,61 +1,61 @@
 import {
-	ToggleGroup,
-	ToggleGroupItem,
-} from "@/registry/tailwindcss/ui/toggle-group";
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/tailwindcss/ui/toggle-group"
 
 const ToggleGroupOutline = () => {
-	return (
-		<ToggleGroup size="sm">
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupOutline;
+export default ToggleGroupOutline
diff --git a/docs/src/registry/tailwindcss/examples/toggle-large.tsx b/docs/src/registry/tailwindcss/examples/toggle-large.tsx
index 459206fb..8819b5f5 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-large.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-large.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/registry/tailwindcss/ui/toggle";
+import { ToggleButton } from "@/registry/tailwindcss/ui/toggle"
 
 const ToggleLarge = () => {
-	return (
-		<ToggleButton size="lg" aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5h6M7 19h6m1-14l-4 14"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton size="lg" aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5h6M7 19h6m1-14l-4 14"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleLarge;
+export default ToggleLarge
diff --git a/docs/src/registry/tailwindcss/examples/toggle-outline.tsx b/docs/src/registry/tailwindcss/examples/toggle-outline.tsx
index 27e40028..dfbc378f 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-outline.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-outline.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/registry/tailwindcss/ui/toggle";
+import { ToggleButton } from "@/registry/tailwindcss/ui/toggle"
 
 const ToggleOutline = () => {
-	return (
-		<ToggleButton variant="outline" aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5h6M7 19h6m1-14l-4 14"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton variant="outline" aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5h6M7 19h6m1-14l-4 14"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleOutline;
+export default ToggleOutline
diff --git a/docs/src/registry/tailwindcss/examples/toggle-small.tsx b/docs/src/registry/tailwindcss/examples/toggle-small.tsx
index 266ccb63..5ec9ff98 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-small.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-small.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/registry/tailwindcss/ui/toggle";
+import { ToggleButton } from "@/registry/tailwindcss/ui/toggle"
 
 const ToggleSmall = () => {
-	return (
-		<ToggleButton size="sm" aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5h6M7 19h6m1-14l-4 14"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton size="sm" aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5h6M7 19h6m1-14l-4 14"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleSmall;
+export default ToggleSmall
diff --git a/docs/src/registry/tailwindcss/examples/toggle-with-text.tsx b/docs/src/registry/tailwindcss/examples/toggle-with-text.tsx
index 0a0f07e2..51f520b4 100644
--- a/docs/src/registry/tailwindcss/examples/toggle-with-text.tsx
+++ b/docs/src/registry/tailwindcss/examples/toggle-with-text.tsx
@@ -1,25 +1,25 @@
-import { ToggleButton } from "@/registry/tailwindcss/ui/toggle";
+import { ToggleButton } from "@/registry/tailwindcss/ui/toggle"
 
 const ToggleWithText = () => {
-	return (
-		<ToggleButton aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="mr-2 h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5h6M7 19h6m1-14l-4 14"
-				/>
-			</svg>
-			Italic
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="mr-2 h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5h6M7 19h6m1-14l-4 14"
+        />
+      </svg>
+      Italic
+    </ToggleButton>
+  )
+}
 
-export default ToggleWithText;
+export default ToggleWithText
diff --git a/docs/src/registry/tailwindcss/examples/tooltip-demo.tsx b/docs/src/registry/tailwindcss/examples/tooltip-demo.tsx
index 5b63e0a6..0ad96b50 100644
--- a/docs/src/registry/tailwindcss/examples/tooltip-demo.tsx
+++ b/docs/src/registry/tailwindcss/examples/tooltip-demo.tsx
@@ -1,26 +1,27 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import type { TooltipTriggerProps } from "@kobalte/core/tooltip"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/registry/tailwindcss/ui/tooltip";
-import type { TooltipTriggerProps } from "@kobalte/core/tooltip";
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tailwindcss/ui/tooltip"
 
 const TooltipDemo = () => {
-	return (
-		<Tooltip>
-			<TooltipTrigger
-				as={(props: TooltipTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Hover
-					</Button>
-				)}
-			/>
-			<TooltipContent>
-				<p>Add to library</p>
-			</TooltipContent>
-		</Tooltip>
-	);
-};
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        as={(props: TooltipTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Hover
+          </Button>
+        )}
+      />
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
 
-export default TooltipDemo;
+export default TooltipDemo
diff --git a/docs/src/registry/tailwindcss/hooks/use-mobile.tsx b/docs/src/registry/tailwindcss/hooks/use-mobile.tsx
index 6f566688..24c3112f 100644
--- a/docs/src/registry/tailwindcss/hooks/use-mobile.tsx
+++ b/docs/src/registry/tailwindcss/hooks/use-mobile.tsx
@@ -1,23 +1,23 @@
-import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
 
 export const useIsMobile = () => {
-	const [isMobile, setIsMobile] = createSignal<boolean>();
+  const [isMobile, setIsMobile] = createSignal<boolean>()
 
-	const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-	const onChange = () => {
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-	};
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+  const onChange = () => {
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+  }
 
-	createEffect(() => {
-		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-	});
+  createEffect(() => {
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+  })
 
-	onCleanup(() => {
-		mql.removeEventListener("change", onChange);
-	});
+  onCleanup(() => {
+    mql.removeEventListener("change", onChange)
+  })
 
-	return isMobile as Accessor<boolean>;
-};
+  return isMobile as Accessor<boolean>
+}
diff --git a/docs/src/registry/tailwindcss/libs/call-handler.ts b/docs/src/registry/tailwindcss/libs/call-handler.ts
index 453078c5..0df09627 100644
--- a/docs/src/registry/tailwindcss/libs/call-handler.ts
+++ b/docs/src/registry/tailwindcss/libs/call-handler.ts
@@ -3,26 +3,26 @@
 // https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/assertion.ts
 // https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/events.ts
 
-import type { JSX } from "solid-js";
+import type { JSX } from "solid-js"
 
 // Function assertions
 // biome-ignore lint/complexity/noBannedTypes:
 export function isFunction(value: unknown): value is Function {
-	return typeof value === "function";
+  return typeof value === "function"
 }
 
 /** Call a JSX.EventHandlerUnion with the event. */
 export const callHandler = <T, E extends Event>(
-	event: E & { currentTarget: T; target: Element },
-	handler: JSX.EventHandlerUnion<T, E> | undefined,
+  event: E & { currentTarget: T; target: Element },
+  handler: JSX.EventHandlerUnion<T, E> | undefined
 ) => {
-	if (handler) {
-		if (isFunction(handler)) {
-			handler(event);
-		} else {
-			handler[0](handler[1], event);
-		}
-	}
+  if (handler) {
+    if (isFunction(handler)) {
+      handler(event)
+    } else {
+      handler[0](handler[1], event)
+    }
+  }
 
-	return event.defaultPrevented;
-};
+  return event.defaultPrevented
+}
diff --git a/docs/src/registry/tailwindcss/libs/cn.ts b/docs/src/registry/tailwindcss/libs/cn.ts
index 4f31bb04..013cbc39 100644
--- a/docs/src/registry/tailwindcss/libs/cn.ts
+++ b/docs/src/registry/tailwindcss/libs/cn.ts
@@ -1,5 +1,4 @@
-import type { ClassValue } from "clsx";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
+import clsx, { type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
-export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));
+export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists))
diff --git a/docs/src/registry/tailwindcss/libs/combine-props.ts b/docs/src/registry/tailwindcss/libs/combine-props.ts
index 7801514c..d3aa1be2 100644
--- a/docs/src/registry/tailwindcss/libs/combine-props.ts
+++ b/docs/src/registry/tailwindcss/libs/combine-props.ts
@@ -1,8 +1,8 @@
 // https://github.com/solidjs-community/solid-primitives/blob/main/packages/props/src/combineProps.ts
 
-import type { JSX } from "solid-js";
+import type { JSX } from "solid-js"
 
-const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
+const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g
 
 /**
  * converts inline string styles to object form
@@ -11,13 +11,13 @@ const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
  * styles; // { margin: "24px", border: "1px solid #121212" }
  * */
 export function stringStyleToObject(style: string): JSX.CSSProperties {
-	const object: Record<string, string> = {};
-	let match: RegExpExecArray | null;
-	// biome-ignore lint/suspicious/noAssignInExpressions:
-	while ((match = extractCSSregex.exec(style))) {
-		object[match[1]] = match[2]!;
-	}
-	return object;
+  const object: Record<string, string> = {}
+  let match: RegExpExecArray | null
+  // biome-ignore lint/suspicious/noAssignInExpressions:
+  while ((match = extractCSSregex.exec(style))) {
+    object[match[1]] = match[2]!
+  }
+  return object
 }
 
 /**
@@ -29,29 +29,29 @@ export function stringStyleToObject(style: string): JSX.CSSProperties {
  * });
  * styles; // { margin: "2rem", border: "1px solid #121212", padding: "16px" }
  */
-export function combineStyle(a: string, b: string): string;
+export function combineStyle(a: string, b: string): string
 export function combineStyle(
-	a: JSX.CSSProperties | undefined,
-	b: JSX.CSSProperties | undefined,
-): JSX.CSSProperties;
+  a: JSX.CSSProperties | undefined,
+  b: JSX.CSSProperties | undefined
+): JSX.CSSProperties
 export function combineStyle(
-	a: JSX.CSSProperties | string | undefined,
-	b: JSX.CSSProperties | string | undefined,
-): JSX.CSSProperties;
+  a: JSX.CSSProperties | string | undefined,
+  b: JSX.CSSProperties | string | undefined
+): JSX.CSSProperties
 export function combineStyle(
-	a: JSX.CSSProperties | string | undefined,
-	b: JSX.CSSProperties | string | undefined,
+  a: JSX.CSSProperties | string | undefined,
+  b: JSX.CSSProperties | string | undefined
 ): JSX.CSSProperties | string {
-	let _a = a;
-	let _b = b;
+  let _a = a
+  let _b = b
 
-	if (typeof _a === "string") {
-		if (typeof _b === "string") return `${_a};${_b}`;
+  if (typeof _a === "string") {
+    if (typeof _b === "string") return `${_a};${_b}`
 
-		_a = stringStyleToObject(_a);
-	} else if (typeof _b === "string") {
-		_b = stringStyleToObject(_b);
-	}
+    _a = stringStyleToObject(_a)
+  } else if (typeof _b === "string") {
+    _b = stringStyleToObject(_b)
+  }
 
-	return { ..._a, ..._b };
+  return { ..._a, ..._b }
 }
diff --git a/docs/src/registry/tailwindcss/ui/accordion.tsx b/docs/src/registry/tailwindcss/ui/accordion.tsx
index a142c5e3..b12632a0 100644
--- a/docs/src/registry/tailwindcss/ui/accordion.tsx
+++ b/docs/src/registry/tailwindcss/ui/accordion.tsx
@@ -1,97 +1,98 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	AccordionContentProps,
-	AccordionItemProps,
-	AccordionTriggerProps,
-} from "@kobalte/core/accordion";
-import { Accordion as AccordionPrimitive } from "@kobalte/core/accordion";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { type ParentProps, type ValidComponent, splitProps } from "solid-js";
+import { splitProps, type ParentProps, type ValidComponent } from "solid-js"
+import {
+  Accordion as AccordionPrimitive,
+  type AccordionContentProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+} from "@kobalte/core/accordion"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Accordion = AccordionPrimitive;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const Accordion = AccordionPrimitive
 
 type accordionItemProps<T extends ValidComponent = "div"> =
-	AccordionItemProps<T> & {
-		class?: string;
-	};
+  AccordionItemProps<T> & {
+    class?: string
+  }
 
 export const AccordionItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, accordionItemProps<T>>,
+  props: PolymorphicProps<T, accordionItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as accordionItemProps, ["class"]);
+  const [local, rest] = splitProps(props as accordionItemProps, ["class"])
 
-	return (
-		<AccordionPrimitive.Item class={cn("border-b", local.class)} {...rest} />
-	);
-};
+  return (
+    <AccordionPrimitive.Item class={cn("border-b", local.class)} {...rest} />
+  )
+}
 
 type accordionTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	AccordionTriggerProps<T> & {
-		class?: string;
-	}
->;
+  AccordionTriggerProps<T> & {
+    class?: string
+  }
+>
 
 export const AccordionTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, accordionTriggerProps<T>>,
+  props: PolymorphicProps<T, accordionTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as accordionTriggerProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as accordionTriggerProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<AccordionPrimitive.Header class="flex" as="div">
-			<AccordionPrimitive.Trigger
-				class={cn(
-					"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-shadow hover:underline focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring [&[data-expanded]>svg]:rotate-180",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4 text-muted-foreground transition-transform duration-200"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m6 9l6 6l6-6"
-					/>
-					<title>Arrow</title>
-				</svg>
-			</AccordionPrimitive.Trigger>
-		</AccordionPrimitive.Header>
-	);
-};
+  return (
+    <AccordionPrimitive.Header class="flex" as="div">
+      <AccordionPrimitive.Trigger
+        class={cn(
+          "focus-visible:ring-ring flex flex-1 items-center justify-between py-4 text-sm font-medium transition-shadow hover:underline focus-visible:outline-none focus-visible:ring-[1.5px] [&[data-expanded]>svg]:rotate-180",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="text-muted-foreground h-4 w-4 transition-transform duration-200"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m6 9l6 6l6-6"
+          />
+          <title>Arrow</title>
+        </svg>
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
 
 type accordionContentProps<T extends ValidComponent = "div"> = ParentProps<
-	AccordionContentProps<T> & {
-		class?: string;
-	}
->;
+  AccordionContentProps<T> & {
+    class?: string
+  }
+>
 
 export const AccordionContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, accordionContentProps<T>>,
+  props: PolymorphicProps<T, accordionContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as accordionContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as accordionContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<AccordionPrimitive.Content
-			class={cn(
-				"animate-accordion-up overflow-hidden text-sm data-[expanded]:animate-accordion-down",
-				local.class,
-			)}
-			{...rest}
-		>
-			<div class="pb-4 pt-0">{local.children}</div>
-		</AccordionPrimitive.Content>
-	);
-};
+  return (
+    <AccordionPrimitive.Content
+      class={cn(
+        "animate-accordion-up data-[expanded]:animate-accordion-down overflow-hidden text-sm",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="pb-4 pt-0">{local.children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/alert-dialog.tsx b/docs/src/registry/tailwindcss/ui/alert-dialog.tsx
index c4ee0b16..aafb2763 100644
--- a/docs/src/registry/tailwindcss/ui/alert-dialog.tsx
+++ b/docs/src/registry/tailwindcss/ui/alert-dialog.tsx
@@ -1,152 +1,158 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	AlertDialogCloseButtonProps,
-	AlertDialogContentProps,
-	AlertDialogDescriptionProps,
-	AlertDialogTitleProps,
-} from "@kobalte/core/alert-dialog";
-import { AlertDialog as AlertDialogPrimitive } from "@kobalte/core/alert-dialog";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
-import { buttonVariants } from "./button";
-
-export const AlertDialog = AlertDialogPrimitive;
-export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+import {
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  AlertDialog as AlertDialogPrimitive,
+  type AlertDialogCloseButtonProps,
+  type AlertDialogContentProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogTitleProps,
+} from "@kobalte/core/alert-dialog"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { buttonVariants } from "./button"
+
+export const AlertDialog = AlertDialogPrimitive
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 type alertDialogContentProps<T extends ValidComponent = "div"> = ParentProps<
-	AlertDialogContentProps<T> & {
-		class?: string;
-	}
->;
+  AlertDialogContentProps<T> & {
+    class?: string
+  }
+>
 
 export const AlertDialogContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, alertDialogContentProps<T>>,
+  props: PolymorphicProps<T, alertDialogContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogContentProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<AlertDialogPrimitive.Portal>
-			<AlertDialogPrimitive.Overlay
-				class={cn(
-					"fixed inset-0 z-50 bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
-				)}
-			/>
-			<AlertDialogPrimitive.Content
-				class={cn(
-					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg data-[closed]:duration-200 data-[expanded]:duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</AlertDialogPrimitive.Content>
-		</AlertDialogPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogContentProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay
+        class={cn(
+          "bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 fixed inset-0 z-50"
+        )}
+      />
+      <AlertDialogPrimitive.Content
+        class={cn(
+          "bg-background data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg data-[closed]:duration-200 data-[expanded]:duration-200 sm:rounded-lg md:w-full",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>
+  )
+}
 
 export const AlertDialogHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"flex flex-col space-y-2 text-center sm:text-left",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const AlertDialogFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type alertDialogTitleProps<T extends ValidComponent = "h2"> =
-	AlertDialogTitleProps<T> & {
-		class?: string;
-	};
+  AlertDialogTitleProps<T> & {
+    class?: string
+  }
 
 export const AlertDialogTitle = <T extends ValidComponent = "h2">(
-	props: PolymorphicProps<T, alertDialogTitleProps<T>>,
+  props: PolymorphicProps<T, alertDialogTitleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogTitleProps, ["class"]);
+  const [local, rest] = splitProps(props as alertDialogTitleProps, ["class"])
 
-	return (
-		<AlertDialogPrimitive.Title
-			class={cn("text-lg font-semibold", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <AlertDialogPrimitive.Title
+      class={cn("text-lg font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type alertDialogDescriptionProps<T extends ValidComponent = "p"> =
-	AlertDialogDescriptionProps<T> & {
-		class?: string;
-	};
+  AlertDialogDescriptionProps<T> & {
+    class?: string
+  }
 
 export const AlertDialogDescription = <T extends ValidComponent = "p">(
-	props: PolymorphicProps<T, alertDialogDescriptionProps<T>>,
+  props: PolymorphicProps<T, alertDialogDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogDescriptionProps, [
-		"class",
-	]);
-
-	return (
-		<AlertDialogPrimitive.Description
-			class={cn("text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogDescriptionProps, [
+    "class",
+  ])
+
+  return (
+    <AlertDialogPrimitive.Description
+      class={cn("text-muted-foreground text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type alertDialogCloseProps<T extends ValidComponent = "button"> =
-	AlertDialogCloseButtonProps<T> & {
-		class?: string;
-	};
+  AlertDialogCloseButtonProps<T> & {
+    class?: string
+  }
 
 export const AlertDialogClose = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, alertDialogCloseProps<T>>,
+  props: PolymorphicProps<T, alertDialogCloseProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"]);
-
-	return (
-		<AlertDialogPrimitive.CloseButton
-			class={cn(
-				buttonVariants({
-					variant: "outline",
-				}),
-				"mt-2 md:mt-0",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"])
+
+  return (
+    <AlertDialogPrimitive.CloseButton
+      class={cn(
+        buttonVariants({
+          variant: "outline",
+        }),
+        "mt-2 md:mt-0",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const AlertDialogAction = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, alertDialogCloseProps<T>>,
+  props: PolymorphicProps<T, alertDialogCloseProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"]);
-
-	return (
-		<AlertDialogPrimitive.CloseButton
-			class={cn(buttonVariants(), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"])
+
+  return (
+    <AlertDialogPrimitive.CloseButton
+      class={cn(buttonVariants(), local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/alert.tsx b/docs/src/registry/tailwindcss/ui/alert.tsx
index c9b1942a..0ef28dd7 100644
--- a/docs/src/registry/tailwindcss/ui/alert.tsx
+++ b/docs/src/registry/tailwindcss/ui/alert.tsx
@@ -1,66 +1,67 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { AlertRootProps } from "@kobalte/core/alert";
-import { Alert as AlertPrimitive } from "@kobalte/core/alert";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ComponentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ComponentProps, type ValidComponent } from "solid-js"
+import {
+  Alert as AlertPrimitive,
+  type AlertRootProps,
+} from "@kobalte/core/alert"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const alertVariants = cva(
-	"relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-	{
-		variants: {
-			variant: {
-				default: "bg-background text-foreground",
-				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 type alertProps<T extends ValidComponent = "div"> = AlertRootProps<T> &
-	VariantProps<typeof alertVariants> & {
-		class?: string;
-	};
+  VariantProps<typeof alertVariants> & {
+    class?: string
+  }
 
 export const Alert = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, alertProps<T>>,
+  props: PolymorphicProps<T, alertProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertProps, ["class", "variant"]);
+  const [local, rest] = splitProps(props as alertProps, ["class", "variant"])
 
-	return (
-		<AlertPrimitive
-			class={cn(
-				alertVariants({
-					variant: props.variant,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <AlertPrimitive
+      class={cn(
+        alertVariants({
+          variant: props.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const AlertTitle = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn("font-medium leading-5 tracking-tight", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn("font-medium leading-5 tracking-tight", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const AlertDescription = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...rest} />
-	);
-};
+  return (
+    <div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...rest} />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/badge.tsx b/docs/src/registry/tailwindcss/ui/badge.tsx
index 72c43243..fa61d6bb 100644
--- a/docs/src/registry/tailwindcss/ui/badge.tsx
+++ b/docs/src/registry/tailwindcss/ui/badge.tsx
@@ -1,42 +1,42 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const badgeVariants = cva(
-	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring",
-	{
-		variants: {
-			variant: {
-				default:
-					"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-				secondary:
-					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				destructive:
-					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-				outline: "text-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 export const Badge = (
-	props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
+  props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>
 ) => {
-	const [local, rest] = splitProps(props, ["class", "variant"]);
+  const [local, rest] = splitProps(props, ["class", "variant"])
 
-	return (
-		<div
-			class={cn(
-				badgeVariants({
-					variant: local.variant,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn(
+        badgeVariants({
+          variant: local.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/button.tsx b/docs/src/registry/tailwindcss/ui/button.tsx
index e3f3d906..cc990b97 100644
--- a/docs/src/registry/tailwindcss/ui/button.tsx
+++ b/docs/src/registry/tailwindcss/ui/button.tsx
@@ -1,67 +1,68 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { ButtonRootProps } from "@kobalte/core/button";
-import { Button as ButtonPrimitive } from "@kobalte/core/button";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import {
+  Button as ButtonPrimitive,
+  type ButtonRootProps,
+} from "@kobalte/core/button"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const buttonVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-	{
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground shadow hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 px-4 py-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
-				icon: "h-9 w-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 export type buttonProps<T extends ValidComponent = "button"> =
-	ButtonRootProps<T> &
-		VariantProps<typeof buttonVariants> & {
-			class?: string;
-		};
+  ButtonRootProps<T> &
+    VariantProps<typeof buttonVariants> & {
+      class?: string
+    }
 
 export const Button = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, buttonProps<T>>,
+  props: PolymorphicProps<T, buttonProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as buttonProps, [
-		"class",
-		"variant",
-		"size",
-	]);
+  const [local, rest] = splitProps(props as buttonProps, [
+    "class",
+    "variant",
+    "size",
+  ])
 
-	return (
-		<ButtonPrimitive
-			class={cn(
-				buttonVariants({
-					size: local.size,
-					variant: local.variant,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ButtonPrimitive
+      class={cn(
+        buttonVariants({
+          size: local.size,
+          variant: local.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/card.tsx b/docs/src/registry/tailwindcss/ui/card.tsx
index 71a65f1b..3f052a1e 100644
--- a/docs/src/registry/tailwindcss/ui/card.tsx
+++ b/docs/src/registry/tailwindcss/ui/card.tsx
@@ -1,60 +1,58 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { ComponentProps, ParentComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ComponentProps, type ParentComponent } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const Card = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"rounded-xl border bg-card text-card-foreground shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "bg-card text-card-foreground rounded-xl border shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CardHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...rest} />
-	);
-};
+  return (
+    <div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...rest} />
+  )
+}
 
 export const CardTitle: ParentComponent<ComponentProps<"h1">> = (props) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<h1
-			class={cn("font-semibold leading-none tracking-tight", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <h1
+      class={cn("font-semibold leading-none tracking-tight", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const CardDescription: ParentComponent<ComponentProps<"h3">> = (
-	props,
+  props
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<h3 class={cn("text-sm text-muted-foreground", local.class)} {...rest} />
-	);
-};
+  return (
+    <h3 class={cn("text-muted-foreground text-sm", local.class)} {...rest} />
+  )
+}
 
 export const CardContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return <div class={cn("p-6 pt-0", local.class)} {...rest} />;
-};
+  return <div class={cn("p-6 pt-0", local.class)} {...rest} />
+}
 
 export const CardFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("flex items-center p-6 pt-0", local.class)} {...rest} />
-	);
-};
+  return <div class={cn("flex items-center p-6 pt-0", local.class)} {...rest} />
+}
diff --git a/docs/src/registry/tailwindcss/ui/carousel.tsx b/docs/src/registry/tailwindcss/ui/carousel.tsx
index bbfc9f12..ab1568a1 100644
--- a/docs/src/registry/tailwindcss/ui/carousel.tsx
+++ b/docs/src/registry/tailwindcss/ui/carousel.tsx
@@ -1,273 +1,274 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { CreateEmblaCarouselType } from "embla-carousel-solid";
-import createEmblaCarousel from "embla-carousel-solid";
-import type {
-	Accessor,
-	ComponentProps,
-	ParentProps,
-	VoidProps,
-} from "solid-js";
 import {
-	createContext,
-	createEffect,
-	createMemo,
-	createSignal,
-	mergeProps,
-	onCleanup,
-	splitProps,
-	useContext,
-} from "solid-js";
-import { Button } from "./button";
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  mergeProps,
+  onCleanup,
+  splitProps,
+  useContext,
+  type Accessor,
+  type ComponentProps,
+  type ParentProps,
+  type VoidProps,
+} from "solid-js"
+import createEmblaCarousel, {
+  type CreateEmblaCarouselType,
+} from "embla-carousel-solid"
 
-export type CarouselApi = CreateEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof createEmblaCarousel>;
-type CarouselOptions = NonNullable<UseCarouselParameters[0]>;
-type CarouselPlugin = NonNullable<UseCarouselParameters[1]>;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { Button } from "./button"
+
+export type CarouselApi = CreateEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof createEmblaCarousel>
+type CarouselOptions = NonNullable<UseCarouselParameters[0]>
+type CarouselPlugin = NonNullable<UseCarouselParameters[1]>
 
 type CarouselProps = {
-	opts?: ReturnType<CarouselOptions>;
-	plugins?: ReturnType<CarouselPlugin>;
-	orientation?: "horizontal" | "vertical";
-	setApi?: (api: CarouselApi) => void;
-};
+  opts?: ReturnType<CarouselOptions>
+  plugins?: ReturnType<CarouselPlugin>
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
 
 type CarouselContextProps = {
-	carouselRef: ReturnType<typeof createEmblaCarousel>[0];
-	api: ReturnType<typeof createEmblaCarousel>[1];
-	scrollPrev: () => void;
-	scrollNext: () => void;
-	canScrollPrev: Accessor<boolean>;
-	canScrollNext: Accessor<boolean>;
-} & CarouselProps;
+  carouselRef: ReturnType<typeof createEmblaCarousel>[0]
+  api: ReturnType<typeof createEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: Accessor<boolean>
+  canScrollNext: Accessor<boolean>
+} & CarouselProps
 
 const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(
-	null,
-);
+  null
+)
 
 const useCarousel = () => {
-	const context = useContext(CarouselContext);
+  const context = useContext(CarouselContext)
 
-	if (!context) {
-		throw new Error("useCarousel must be used within a <Carousel />");
-	}
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
 
-	return context();
-};
+  return context()
+}
 
 export const Carousel = (props: ComponentProps<"div"> & CarouselProps) => {
-	const merge = mergeProps<
-		ParentProps<ComponentProps<"div"> & CarouselProps>[]
-	>({ orientation: "horizontal" }, props);
+  const merge = mergeProps<
+    ParentProps<ComponentProps<"div"> & CarouselProps>[]
+  >({ orientation: "horizontal" }, props)
 
-	const [local, rest] = splitProps(merge, [
-		"orientation",
-		"opts",
-		"setApi",
-		"plugins",
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(merge, [
+    "orientation",
+    "opts",
+    "setApi",
+    "plugins",
+    "class",
+    "children",
+  ])
 
-	const [carouselRef, api] = createEmblaCarousel(
-		() => ({
-			...local.opts,
-			axis: local.orientation === "horizontal" ? "x" : "y",
-		}),
-		() => local.plugins ?? [],
-	);
-	const [canScrollPrev, setCanScrollPrev] = createSignal(false);
-	const [canScrollNext, setCanScrollNext] = createSignal(false);
+  const [carouselRef, api] = createEmblaCarousel(
+    () => ({
+      ...local.opts,
+      axis: local.orientation === "horizontal" ? "x" : "y",
+    }),
+    () => local.plugins ?? []
+  )
+  const [canScrollPrev, setCanScrollPrev] = createSignal(false)
+  const [canScrollNext, setCanScrollNext] = createSignal(false)
 
-	const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
-		setCanScrollPrev(api.canScrollPrev());
-		setCanScrollNext(api.canScrollNext());
-	};
+  const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }
 
-	const scrollPrev = () => api()?.scrollPrev();
+  const scrollPrev = () => api()?.scrollPrev()
 
-	const scrollNext = () => api()?.scrollNext();
+  const scrollNext = () => api()?.scrollNext()
 
-	const handleKeyDown = (event: KeyboardEvent) => {
-		if (event.key === "ArrowLeft") {
-			event.preventDefault();
-			scrollPrev();
-		} else if (event.key === "ArrowRight") {
-			event.preventDefault();
-			scrollNext();
-		}
-	};
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }
 
-	createEffect(() => {
-		if (!api() || !local.setApi) return;
+  createEffect(() => {
+    if (!api() || !local.setApi) return
 
-		local.setApi(api);
-	});
+    local.setApi(api)
+  })
 
-	createEffect(() => {
-		const _api = api();
-		if (_api === undefined) return;
+  createEffect(() => {
+    const _api = api()
+    if (_api === undefined) return
 
-		onSelect(_api);
-		_api.on("reInit", onSelect);
-		_api.on("select", onSelect);
+    onSelect(_api)
+    _api.on("reInit", onSelect)
+    _api.on("select", onSelect)
 
-		onCleanup(() => {
-			_api.off("select", onSelect);
-		});
-	});
+    onCleanup(() => {
+      _api.off("select", onSelect)
+    })
+  })
 
-	const value = createMemo(
-		() =>
-			({
-				carouselRef,
-				api,
-				opts: local.opts,
-				orientation:
-					local.orientation ??
-					(local.opts?.axis === "y" ? "vertical" : "horizontal"),
-				scrollPrev,
-				scrollNext,
-				canScrollPrev,
-				canScrollNext,
-			}) satisfies CarouselContextProps,
-	);
+  const value = createMemo(
+    () =>
+      ({
+        carouselRef,
+        api,
+        opts: local.opts,
+        orientation:
+          local.orientation ??
+          (local.opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }) satisfies CarouselContextProps
+  )
 
-	return (
-		<CarouselContext.Provider value={value}>
-			<div
-				onKeyDown={handleKeyDown}
-				class={cn("relative", local.class)}
-				// biome-ignore lint/a11y/useSemanticElements:
-				role="region"
-				aria-roledescription="carousel"
-				{...rest}
-			>
-				{local.children}
-			</div>
-		</CarouselContext.Provider>
-	);
-};
+  return (
+    <CarouselContext.Provider value={value}>
+      <div
+        onKeyDown={handleKeyDown}
+        class={cn("relative", local.class)}
+        // biome-ignore lint/a11y/useSemanticElements:
+        role="region"
+        aria-roledescription="carousel"
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
 
 export const CarouselContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-	const { carouselRef, orientation } = useCarousel();
+  const [local, rest] = splitProps(props, ["class"])
+  const { carouselRef, orientation } = useCarousel()
 
-	return (
-		<div ref={carouselRef} class="overflow-hidden">
-			<div
-				class={cn(
-					"flex",
-					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
+  return (
+    <div ref={carouselRef} class="overflow-hidden">
+      <div
+        class={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          local.class
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
 
 export const CarouselItem = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-	const { orientation } = useCarousel();
+  const [local, rest] = splitProps(props, ["class"])
+  const { orientation } = useCarousel()
 
-	return (
-		<div
-			role="group"
-			aria-roledescription="slide"
-			class={cn(
-				"min-w-0 shrink-0 grow-0 basis-full",
-				orientation === "horizontal" ? "pl-4" : "pt-4",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      class={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CarouselPrevious = (
-	props: VoidProps<ComponentProps<typeof Button>>,
+  props: VoidProps<ComponentProps<typeof Button>>
 ) => {
-	const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
-		{ variant: "outline", size: "icon" },
-		props,
-	);
-	const [local, rest] = splitProps(merge, ["class", "variant", "size"]);
-	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
+    { variant: "outline", size: "icon" },
+    props
+  )
+  const [local, rest] = splitProps(merge, ["class", "variant", "size"])
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
-	return (
-		<Button
-			variant={local.variant}
-			size={local.size}
-			class={cn(
-				"absolute  h-8 w-8 touch-manipulation rounded-full",
-				orientation === "horizontal"
-					? "-left-12 top-1/2 -translate-y-1/2"
-					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-				local.class,
-			)}
-			disabled={!canScrollPrev()}
-			onClick={scrollPrev}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="size-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14M5 12l6 6m-6-6l6-6"
-				/>
-				<title>Previous slide</title>
-			</svg>
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant={local.variant}
+      size={local.size}
+      class={cn(
+        "absolute h-8 w-8 touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        local.class
+      )}
+      disabled={!canScrollPrev()}
+      onClick={scrollPrev}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="size-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14M5 12l6 6m-6-6l6-6"
+        />
+        <title>Previous slide</title>
+      </svg>
+    </Button>
+  )
+}
 
 export const CarouselNext = (
-	props: VoidProps<ComponentProps<typeof Button>>,
+  props: VoidProps<ComponentProps<typeof Button>>
 ) => {
-	const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
-		{ variant: "outline", size: "icon" },
-		props,
-	);
-	const [local, rest] = splitProps(merge, ["class", "variant", "size"]);
-	const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
+    { variant: "outline", size: "icon" },
+    props
+  )
+  const [local, rest] = splitProps(merge, ["class", "variant", "size"])
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
-	return (
-		<Button
-			variant={local.variant}
-			size={local.size}
-			class={cn(
-				"absolute h-8 w-8 touch-manipulation rounded-full",
-				orientation === "horizontal"
-					? "-right-12 top-1/2 -translate-y-1/2"
-					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-				local.class,
-			)}
-			disabled={!canScrollNext()}
-			onClick={scrollNext}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="size-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14m-4 4l4-4m-4-4l4 4"
-				/>
-				<title>Next slide</title>
-			</svg>
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant={local.variant}
+      size={local.size}
+      class={cn(
+        "absolute h-8 w-8 touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        local.class
+      )}
+      disabled={!canScrollNext()}
+      onClick={scrollNext}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="size-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14m-4 4l4-4m-4-4l4 4"
+        />
+        <title>Next slide</title>
+      </svg>
+    </Button>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/chart.tsx b/docs/src/registry/tailwindcss/ui/chart.tsx
index 92b7b932..c65273b6 100644
--- a/docs/src/registry/tailwindcss/ui/chart.tsx
+++ b/docs/src/registry/tailwindcss/ui/chart.tsx
@@ -1,290 +1,291 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
 import {
-	VisCrosshair,
-	type VisCrosshairProps,
-	VisSingleContainer,
-	VisXYContainer,
-} from "@unovis/solid";
+  For,
+  Match,
+  Show,
+  Switch,
+  createContext,
+  mergeProps,
+  splitProps,
+  useContext,
+  type JSX,
+} from "solid-js"
+import { render } from "solid-js/web"
 import {
-	For,
-	type JSX,
-	Match,
-	Show,
-	Switch,
-	createContext,
-	mergeProps,
-	splitProps,
-	useContext,
-} from "solid-js";
-import { render } from "solid-js/web";
+  VisCrosshair,
+  VisSingleContainer,
+  VisXYContainer,
+  type VisCrosshairProps,
+} from "@unovis/solid"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: '[data-kb-theme="dark"]' } as const;
+const THEMES = { light: "", dark: '[data-kb-theme="dark"]' } as const
 
 export type ChartConfig = Record<
-	string,
-	{
-		label?: JSX.Element;
-		icon?: JSX.Element;
-	} & (
-		| { color?: string; theme?: never }
-		| { color?: never; theme: Record<keyof typeof THEMES, string> }
-	)
->;
+  string,
+  {
+    label?: JSX.Element
+    icon?: JSX.Element
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
 
 type chartContextProps = {
-	config: ChartConfig;
-};
+  config: ChartConfig
+}
 
-const ChartContext = createContext<chartContextProps>();
+const ChartContext = createContext<chartContextProps>()
 
 const useChart = () => {
-	const context = useContext(ChartContext);
+  const context = useContext(ChartContext)
 
-	if (!context) {
-		throw new Error("useChart must be used within a <ChartContainer />");
-	}
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
 
-	return context;
-};
+  return context
+}
 
 type SingleContainer<T> = Parameters<typeof VisSingleContainer<T>>[0] & {
-	type: "single";
-};
+  type: "single"
+}
 
 type XYContainer<T> = Parameters<typeof VisXYContainer<T>>[0] & {
-	type: "xy";
-};
+  type: "xy"
+}
 
 type chartContainerProps<T> = (XYContainer<T> | SingleContainer<T>) &
-	chartContextProps;
+  chartContextProps
 
 export const ChartContainer = <T,>(props: chartContainerProps<T>) => {
-	const [local, rest] = splitProps(props, [
-		"config",
-		"children",
-		"type",
-		"class",
-	]);
-
-	return (
-		<ChartContext.Provider
-			value={{
-				get config() {
-					return local.config;
-				},
-			}}
-		>
-			<div class={cn("flex aspect-video justify-center", local.class)}>
-				<Switch>
-					<Match when={local.type === "xy"}>
-						<VisXYContainer {...(rest as Omit<XYContainer<T>, "type">)}>
-							<ChartStyle type="xy" config={local.config} />
-							{local.children}
-						</VisXYContainer>
-					</Match>
-
-					<Match when={local.type === "single"}>
-						<VisSingleContainer {...(rest as Omit<SingleContainer<T>, "type">)}>
-							<ChartStyle type="single" config={local.config} />
-							{local.children}
-						</VisSingleContainer>
-					</Match>
-				</Switch>
-			</div>
-		</ChartContext.Provider>
-	);
-};
+  const [local, rest] = splitProps(props, [
+    "config",
+    "children",
+    "type",
+    "class",
+  ])
+
+  return (
+    <ChartContext.Provider
+      value={{
+        get config() {
+          return local.config
+        },
+      }}
+    >
+      <div class={cn("flex aspect-video justify-center", local.class)}>
+        <Switch>
+          <Match when={local.type === "xy"}>
+            <VisXYContainer {...(rest as Omit<XYContainer<T>, "type">)}>
+              <ChartStyle type="xy" config={local.config} />
+              {local.children}
+            </VisXYContainer>
+          </Match>
+
+          <Match when={local.type === "single"}>
+            <VisSingleContainer {...(rest as Omit<SingleContainer<T>, "type">)}>
+              <ChartStyle type="single" config={local.config} />
+              {local.children}
+            </VisSingleContainer>
+          </Match>
+        </Switch>
+      </div>
+    </ChartContext.Provider>
+  )
+}
 
 export const ChartStyle = (
-	props: { type: "xy" | "single" } & Omit<chartContextProps, "data">,
+  props: { type: "xy" | "single" } & Omit<chartContextProps, "data">
 ) => {
-	const colorConfig = () =>
-		Object.entries(props.config).filter(
-			([, config]) => config.theme ?? config.color,
-		);
-
-	return (
-		<Show when={colorConfig().length}>
-			<style
-				innerText={Object.entries(THEMES)
-					.map(
-						([theme, prefix]) => `
+  const colorConfig = () =>
+    Object.entries(props.config).filter(
+      ([, config]) => config.theme ?? config.color
+    )
+
+  return (
+    <Show when={colorConfig().length}>
+      <style
+        innerText={Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
 						${prefix} [data-vis-${props.type}-container] {
 						${colorConfig()
-							.map(([key, itemConfig]) => {
-								const color =
-									itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-									itemConfig.color;
-								return color ? `  --color-${key}: ${color};` : null;
-							})
-							.join("\n")}
+              .map(([key, itemConfig]) => {
+                const color =
+                  itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+                  itemConfig.color
+                return color ? `  --color-${key}: ${color};` : null
+              })
+              .join("\n")}
 						}
-						`,
-					)
-					.join("\n")}
-			/>
-		</Show>
-	);
-};
+						`
+          )
+          .join("\n")}
+      />
+    </Show>
+  )
+}
 
 type chartCrosshairProps<T> = Omit<VisCrosshairProps<T>, "template"> & {
-	template?: (
-		props: {
-			data: T;
-			x: number | Date;
-		} & chartContextProps,
-	) => JSX.Element;
-};
+  template?: (
+    props: {
+      data: T
+      x: number | Date
+    } & chartContextProps
+  ) => JSX.Element
+}
 
 export const ChartCrosshair = <T,>(props: chartCrosshairProps<T>) => {
-	const [local, rest] = splitProps(props, ["template"]);
-	const { config } = useChart();
+  const [local, rest] = splitProps(props, ["template"])
+  const { config } = useChart()
 
-	const template = (d: T, x: number | Date) => {
-		const container = document.createElement("div");
-		const Component = () =>
-			!local.template ? null : local.template({ data: d, x, config });
-		render(() => <Component />, container);
-		return container.innerHTML;
-	};
+  const template = (d: T, x: number | Date) => {
+    const container = document.createElement("div")
+    const Component = () =>
+      !local.template ? null : local.template({ data: d, x, config })
+    render(() => <Component />, container)
+    return container.innerHTML
+  }
 
-	return <VisCrosshair template={template} {...rest} />;
-};
+  return <VisCrosshair template={template} {...rest} />
+}
 
 type chartTooltipContentProps<T> = {
-	data: T;
-	x: number | Date;
-	class?: string;
-	hideLabel?: boolean;
-	hideIndicator?: boolean;
-	indicator?: "line" | "dot" | "dashed";
-	labelKey: keyof T;
-	labelFormatter?: (data: number | Date) => JSX.Element;
-} & chartContextProps;
+  data: T
+  x: number | Date
+  class?: string
+  hideLabel?: boolean
+  hideIndicator?: boolean
+  indicator?: "line" | "dot" | "dashed"
+  labelKey: keyof T
+  labelFormatter?: (data: number | Date) => JSX.Element
+} & chartContextProps
 
 export const ChartTooltipContent = <T,>(props: chartTooltipContentProps<T>) => {
-	const merge = mergeProps(
-		{
-			hideLabel: false,
-			hideIndicator: false,
-			indicator: "dot",
-		} satisfies Partial<chartTooltipContentProps<T>>,
-		props,
-	);
-
-	const value = () =>
-		getConfigFromData(merge.data, merge.labelKey, merge.config);
-
-	const tooltipLabel = () => {
-		if (merge.hideLabel || !value().items.length) {
-			return null;
-		}
-
-		return (
-			<div class="font-medium">
-				<Show
-					when={!merge.labelFormatter}
-					fallback={merge.labelFormatter!(
-						typeof merge.x === "number" ? Math.round(merge.x) : merge.x,
-					)}
-				>
-					{value().label as JSX.Element}
-				</Show>
-			</div>
-		);
-	};
-
-	const nestLabel = () =>
-		value().items.length === 1 && merge.indicator !== "dot";
-
-	return (
-		<div
-			class={cn("grid min-w-[8rem] items-start gap-1.5 text-xs", merge.class)}
-		>
-			<Show when={!nestLabel()}>{tooltipLabel()}</Show>
-			<div class="grid gap-1.5">
-				<For each={value().items}>
-					{(item) => (
-						<div
-							class={cn(
-								"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-								merge.indicator === "dot" && "items-center",
-							)}
-						>
-							<Show when={item.icon}>{item.icon}</Show>
-							<Show when={!item.icon && !merge.hideIndicator}>
-								<div
-									class={cn(
-										"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-										{
-											"h-2.5 w-2.5": merge.indicator === "dot",
-											"w-1": merge.indicator === "line",
-											"w-0 border-[1.5px] border-dashed bg-transparent":
-												merge.indicator === "dashed",
-											"my-0.5": nestLabel() && merge.indicator === "dashed",
-										},
-									)}
-									style={{
-										"--color-border": item.color,
-										"--color-bg": item.color,
-									}}
-								/>
-							</Show>
-							<div
-								class={cn(
-									"flex flex-1 justify-between leading-none gap-1.5",
-									nestLabel() ? "items-end" : "items-center",
-								)}
-							>
-								<div class="grid gap-1.5">
-									<Show when={nestLabel()}>{tooltipLabel()}</Show>
-									<span class="text-muted-foreground capitalize">
-										{item.key}
-									</span>
-								</div>
-								<span class="font-mono font-medium tabular-nums text-foreground">
-									{item.value}
-								</span>
-							</div>
-						</div>
-					)}
-				</For>
-			</div>
-		</div>
-	);
-};
+  const merge = mergeProps(
+    {
+      hideLabel: false,
+      hideIndicator: false,
+      indicator: "dot",
+    } satisfies Partial<chartTooltipContentProps<T>>,
+    props
+  )
+
+  const value = () =>
+    getConfigFromData(merge.data, merge.labelKey, merge.config)
+
+  const tooltipLabel = () => {
+    if (merge.hideLabel || !value().items.length) {
+      return null
+    }
+
+    return (
+      <div class="font-medium">
+        <Show
+          when={!merge.labelFormatter}
+          fallback={merge.labelFormatter!(
+            typeof merge.x === "number" ? Math.round(merge.x) : merge.x
+          )}
+        >
+          {value().label as JSX.Element}
+        </Show>
+      </div>
+    )
+  }
+
+  const nestLabel = () =>
+    value().items.length === 1 && merge.indicator !== "dot"
+
+  return (
+    <div
+      class={cn("grid min-w-[8rem] items-start gap-1.5 text-xs", merge.class)}
+    >
+      <Show when={!nestLabel()}>{tooltipLabel()}</Show>
+      <div class="grid gap-1.5">
+        <For each={value().items}>
+          {(item) => (
+            <div
+              class={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                merge.indicator === "dot" && "items-center"
+              )}
+            >
+              <Show when={item.icon}>{item.icon}</Show>
+              <Show when={!item.icon && !merge.hideIndicator}>
+                <div
+                  class={cn(
+                    "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                    {
+                      "h-2.5 w-2.5": merge.indicator === "dot",
+                      "w-1": merge.indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent":
+                        merge.indicator === "dashed",
+                      "my-0.5": nestLabel() && merge.indicator === "dashed",
+                    }
+                  )}
+                  style={{
+                    "--color-border": item.color,
+                    "--color-bg": item.color,
+                  }}
+                />
+              </Show>
+              <div
+                class={cn(
+                  "flex flex-1 justify-between gap-1.5 leading-none",
+                  nestLabel() ? "items-end" : "items-center"
+                )}
+              >
+                <div class="grid gap-1.5">
+                  <Show when={nestLabel()}>{tooltipLabel()}</Show>
+                  <span class="text-muted-foreground capitalize">
+                    {item.key}
+                  </span>
+                </div>
+                <span class="text-foreground font-mono font-medium tabular-nums">
+                  {item.value}
+                </span>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}
 
 const getConfigFromData = <T,>(
-	data: T,
-	labelKey: keyof T,
-	config: ChartConfig,
+  data: T,
+  labelKey: keyof T,
+  config: ChartConfig
 ) => {
-	// @ts-expect-error
-	const valueKeys = Object.entries(data)
-		.filter(([key, value]) => key !== labelKey && typeof value === "number")
-		.map(([key]) => key);
-
-	const items = valueKeys.map((key) => {
-		const configItem = config[key];
-		let color = configItem.color;
-
-		// @ts-expect-error
-		if (!color && "fill" in data) {
-			color = data.fill as string;
-		}
-
-		return {
-			// @ts-expect-error: Access numeric value
-			value: data[key] as number,
-			key: configItem.label,
-			icon: configItem.icon,
-			color,
-		};
-	});
-
-	return {
-		label: data[labelKey],
-		items,
-	};
-};
+  // @ts-expect-error
+  const valueKeys = Object.entries(data)
+    .filter(([key, value]) => key !== labelKey && typeof value === "number")
+    .map(([key]) => key)
+
+  const items = valueKeys.map((key) => {
+    const configItem = config[key]
+    let color = configItem.color
+
+    // @ts-expect-error
+    if (!color && "fill" in data) {
+      color = data.fill as string
+    }
+
+    return {
+      // @ts-expect-error: Access numeric value
+      value: data[key] as number,
+      key: configItem.label,
+      icon: configItem.icon,
+      color,
+    }
+  })
+
+  return {
+    label: data[labelKey],
+    items,
+  }
+}
diff --git a/docs/src/registry/tailwindcss/ui/checkbox.tsx b/docs/src/registry/tailwindcss/ui/checkbox.tsx
index 696e0e38..05ef0922 100644
--- a/docs/src/registry/tailwindcss/ui/checkbox.tsx
+++ b/docs/src/registry/tailwindcss/ui/checkbox.tsx
@@ -1,55 +1,57 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { CheckboxControlProps } from "@kobalte/core/checkbox";
-import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import {
+  Checkbox as CheckboxPrimitive,
+  type CheckboxControlProps,
+} from "@kobalte/core/checkbox"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const CheckboxLabel = CheckboxPrimitive.Label;
-export const Checkbox = CheckboxPrimitive;
-export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage;
-export const CheckboxDescription = CheckboxPrimitive.Description;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const CheckboxLabel = CheckboxPrimitive.Label
+export const Checkbox = CheckboxPrimitive
+export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage
+export const CheckboxDescription = CheckboxPrimitive.Description
 
 type checkboxControlProps<T extends ValidComponent = "div"> = VoidProps<
-	CheckboxControlProps<T> & { class?: string }
->;
+  CheckboxControlProps<T> & { class?: string }
+>
 
 export const CheckboxControl = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, checkboxControlProps<T>>,
+  props: PolymorphicProps<T, checkboxControlProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as checkboxControlProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as checkboxControlProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<>
-			<CheckboxPrimitive.Input class="[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-[1.5px] [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background" />
-			<CheckboxPrimitive.Control
-				class={cn(
-					"h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[checked]:text-primary-foreground data-[disabled]:opacity-50",
-					local.class,
-				)}
-				{...rest}
-			>
-				<CheckboxPrimitive.Indicator class="flex items-center justify-center text-current">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m5 12l5 5L20 7"
-						/>
-						<title>Checkbox</title>
-					</svg>
-				</CheckboxPrimitive.Indicator>
-			</CheckboxPrimitive.Control>
-		</>
-	);
-};
+  return (
+    <>
+      <CheckboxPrimitive.Input class="[&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-background [&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-[1.5px] [&:focus-visible+div]:ring-offset-2" />
+      <CheckboxPrimitive.Control
+        class={cn(
+          "border-primary focus-visible:ring-ring data-[checked]:bg-primary data-[checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border shadow transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+          local.class
+        )}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator class="flex items-center justify-center text-current">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m5 12l5 5L20 7"
+            />
+            <title>Checkbox</title>
+          </svg>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Control>
+    </>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/collapsible.tsx b/docs/src/registry/tailwindcss/ui/collapsible.tsx
index cfd444c1..87b3adc4 100644
--- a/docs/src/registry/tailwindcss/ui/collapsible.tsx
+++ b/docs/src/registry/tailwindcss/ui/collapsible.tsx
@@ -1,31 +1,33 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { CollapsibleContentProps } from "@kobalte/core/collapsible";
-import { Collapsible as CollapsiblePrimitive } from "@kobalte/core/collapsible";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import {
+  Collapsible as CollapsiblePrimitive,
+  type CollapsibleContentProps,
+} from "@kobalte/core/collapsible"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Collapsible = CollapsiblePrimitive;
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+export const Collapsible = CollapsiblePrimitive
+
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger
 
 type collapsibleContentProps<T extends ValidComponent = "div"> =
-	CollapsibleContentProps<T> & {
-		class?: string;
-	};
+  CollapsibleContentProps<T> & {
+    class?: string
+  }
 
 export const CollapsibleContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, collapsibleContentProps<T>>,
+  props: PolymorphicProps<T, collapsibleContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as collapsibleContentProps, ["class"]);
+  const [local, rest] = splitProps(props as collapsibleContentProps, ["class"])
 
-	return (
-		<CollapsiblePrimitive.Content
-			class={cn(
-				"overflow-hidden animate-collapsible-up data-[expanded]:animate-collapsible-down",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <CollapsiblePrimitive.Content
+      class={cn(
+        "animate-collapsible-up data-[expanded]:animate-collapsible-down overflow-hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/combobox.tsx b/docs/src/registry/tailwindcss/ui/combobox.tsx
index e26e9923..62a3038c 100644
--- a/docs/src/registry/tailwindcss/ui/combobox.tsx
+++ b/docs/src/registry/tailwindcss/ui/combobox.tsx
@@ -1,156 +1,161 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	ComboboxContentProps,
-	ComboboxInputProps,
-	ComboboxItemProps,
-	ComboboxTriggerProps,
-} from "@kobalte/core/combobox";
-import { Combobox as ComboboxPrimitive } from "@kobalte/core/combobox";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ParentProps, ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import {
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  Combobox as ComboboxPrimitive,
+  type ComboboxContentProps,
+  type ComboboxInputProps,
+  type ComboboxItemProps,
+  type ComboboxTriggerProps,
+} from "@kobalte/core/combobox"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Combobox = ComboboxPrimitive;
-export const ComboboxDescription = ComboboxPrimitive.Description;
-export const ComboboxErrorMessage = ComboboxPrimitive.ErrorMessage;
-export const ComboboxItemDescription = ComboboxPrimitive.ItemDescription;
-export const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const Combobox = ComboboxPrimitive
+export const ComboboxDescription = ComboboxPrimitive.Description
+export const ComboboxErrorMessage = ComboboxPrimitive.ErrorMessage
+export const ComboboxItemDescription = ComboboxPrimitive.ItemDescription
+export const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect
 
 type comboboxInputProps<T extends ValidComponent = "input"> = VoidProps<
-	ComboboxInputProps<T> & {
-		class?: string;
-	}
->;
+  ComboboxInputProps<T> & {
+    class?: string
+  }
+>
 
 export const ComboboxInput = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, comboboxInputProps<T>>,
+  props: PolymorphicProps<T, comboboxInputProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxInputProps, ["class"]);
+  const [local, rest] = splitProps(props as comboboxInputProps, ["class"])
 
-	return (
-		<ComboboxPrimitive.Input
-			class={cn(
-				"h-full bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ComboboxPrimitive.Input
+      class={cn(
+        "placeholder:text-muted-foreground h-full bg-transparent text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type comboboxTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	ComboboxTriggerProps<T> & {
-		class?: string;
-	}
->;
+  ComboboxTriggerProps<T> & {
+    class?: string
+  }
+>
 
 export const ComboboxTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, comboboxTriggerProps<T>>,
+  props: PolymorphicProps<T, comboboxTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxTriggerProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as comboboxTriggerProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ComboboxPrimitive.Control>
-			<ComboboxPrimitive.Trigger
-				class={cn(
-					"flex h-9 w-full items-center justify-between rounded-md border border-input px-3 shadow-sm",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<ComboboxPrimitive.Icon class="flex h-3.5 w-3.5 items-center justify-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4 opacity-50"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-						/>
-						<title>Arrow</title>
-					</svg>
-				</ComboboxPrimitive.Icon>
-			</ComboboxPrimitive.Trigger>
-		</ComboboxPrimitive.Control>
-	);
-};
+  return (
+    <ComboboxPrimitive.Control>
+      <ComboboxPrimitive.Trigger
+        class={cn(
+          "border-input flex h-9 w-full items-center justify-between rounded-md border px-3 shadow-sm",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <ComboboxPrimitive.Icon class="flex h-3.5 w-3.5 items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4 opacity-50"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+            />
+            <title>Arrow</title>
+          </svg>
+        </ComboboxPrimitive.Icon>
+      </ComboboxPrimitive.Trigger>
+    </ComboboxPrimitive.Control>
+  )
+}
 
 type comboboxContentProps<T extends ValidComponent = "div"> =
-	ComboboxContentProps<T> & {
-		class?: string;
-	};
+  ComboboxContentProps<T> & {
+    class?: string
+  }
 
 export const ComboboxContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, comboboxContentProps<T>>,
+  props: PolymorphicProps<T, comboboxContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxContentProps, ["class"]);
+  const [local, rest] = splitProps(props as comboboxContentProps, ["class"])
 
-	return (
-		<ComboboxPrimitive.Portal>
-			<ComboboxPrimitive.Content
-				class={cn(
-					"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 origin-[--kb-combobox-content-transform-origin]",
-					local.class,
-				)}
-				{...rest}
-			>
-				<ComboboxPrimitive.Listbox class="p-1" />
-			</ComboboxPrimitive.Content>
-		</ComboboxPrimitive.Portal>
-	);
-};
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 relative z-50 min-w-[8rem] origin-[--kb-combobox-content-transform-origin] overflow-hidden rounded-md border shadow-md",
+          local.class
+        )}
+        {...rest}
+      >
+        <ComboboxPrimitive.Listbox class="p-1" />
+      </ComboboxPrimitive.Content>
+    </ComboboxPrimitive.Portal>
+  )
+}
 
 type comboboxItemProps<T extends ValidComponent = "li"> = ParentProps<
-	ComboboxItemProps<T> & {
-		class?: string;
-	}
->;
+  ComboboxItemProps<T> & {
+    class?: string
+  }
+>
 
 export const ComboboxItem = <T extends ValidComponent = "li">(
-	props: PolymorphicProps<T, comboboxItemProps<T>>,
+  props: PolymorphicProps<T, comboboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as comboboxItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ComboboxPrimitive.Item
-			class={cn(
-				"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<ComboboxPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checked</title>
-				</svg>
-			</ComboboxPrimitive.ItemIndicator>
-			<ComboboxPrimitive.ItemLabel>
-				{local.children}
-			</ComboboxPrimitive.ItemLabel>
-		</ComboboxPrimitive.Item>
-	);
-};
+  return (
+    <ComboboxPrimitive.Item
+      class={cn(
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <ComboboxPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checked</title>
+        </svg>
+      </ComboboxPrimitive.ItemIndicator>
+      <ComboboxPrimitive.ItemLabel>
+        {local.children}
+      </ComboboxPrimitive.ItemLabel>
+    </ComboboxPrimitive.Item>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/command.tsx b/docs/src/registry/tailwindcss/ui/command.tsx
index ce473ae3..6ef133b7 100644
--- a/docs/src/registry/tailwindcss/ui/command.tsx
+++ b/docs/src/registry/tailwindcss/ui/command.tsx
@@ -1,151 +1,152 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	CommandDialogProps,
-	CommandEmptyProps,
-	CommandGroupProps,
-	CommandInputProps,
-	CommandItemProps,
-	CommandListProps,
-	CommandRootProps,
-} from "cmdk-solid";
-import { Command as CommandPrimitive } from "cmdk-solid";
-import type { ComponentProps, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-import { Dialog, DialogContent } from "./dialog";
+import { splitProps, type ComponentProps, type VoidProps } from "solid-js"
+import {
+  Command as CommandPrimitive,
+  type CommandDialogProps,
+  type CommandEmptyProps,
+  type CommandGroupProps,
+  type CommandInputProps,
+  type CommandItemProps,
+  type CommandListProps,
+  type CommandRootProps,
+} from "cmdk-solid"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { Dialog, DialogContent } from "./dialog"
 
 export const Command = (props: CommandRootProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive
-			class={cn(
-				"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive
+      class={cn(
+        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandList = (props: CommandListProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.List
-			class={cn(
-				"max-h-[300px] overflow-y-auto overflow-x-hidden p-1",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.List
+      class={cn(
+        "max-h-[300px] overflow-y-auto overflow-x-hidden p-1",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandInput = (props: VoidProps<CommandInputProps>) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div class="flex items-center border-b px-3" cmdk-input-wrapper="">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="mr-2 h-4 w-4 shrink-0 opacity-50"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"
-				/>
-				<title>Search</title>
-			</svg>
-			<CommandPrimitive.Input
-				class={cn(
-					"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mr-2 h-4 w-4 shrink-0 opacity-50"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"
+        />
+        <title>Search</title>
+      </svg>
+      <CommandPrimitive.Input
+        class={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          local.class
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
 
 export const CommandItem = (props: CommandItemProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.Item
+      class={cn(
+        "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<span
-			class={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <span
+      class={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandDialog = (props: CommandDialogProps) => {
-	const [local, rest] = splitProps(props, ["children"]);
-
-	return (
-		<Dialog {...rest}>
-			<DialogContent class="overflow-hidden p-0">
-				<Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
-					{local.children}
-				</Command>
-			</DialogContent>
-		</Dialog>
-	);
-};
+  const [local, rest] = splitProps(props, ["children"])
+
+  return (
+    <Dialog {...rest}>
+      <DialogContent class="overflow-hidden p-0">
+        <Command class="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
+          {local.children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
 
 export const CommandEmpty = (props: CommandEmptyProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<CommandPrimitive.Empty
-			class={cn("py-6 text-center text-sm", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <CommandPrimitive.Empty
+      class={cn("py-6 text-center text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const CommandGroup = (props: CommandGroupProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.Group
-			class={cn(
-				"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.Group
+      class={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandSeparator = (props: CommandEmptyProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.Separator
-			class={cn("-mx-1 h-px bg-border", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.Separator
+      class={cn("bg-border -mx-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/context-menu.tsx b/docs/src/registry/tailwindcss/ui/context-menu.tsx
index a969cd65..b5786b64 100644
--- a/docs/src/registry/tailwindcss/ui/context-menu.tsx
+++ b/docs/src/registry/tailwindcss/ui/context-menu.tsx
@@ -1,327 +1,328 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	ContextMenuCheckboxItemProps,
-	ContextMenuContentProps,
-	ContextMenuGroupLabelProps,
-	ContextMenuItemLabelProps,
-	ContextMenuItemProps,
-	ContextMenuRadioItemProps,
-	ContextMenuSeparatorProps,
-	ContextMenuSubContentProps,
-	ContextMenuSubTriggerProps,
-} from "@kobalte/core/context-menu";
-import { ContextMenu as ContextMenuPrimitive } from "@kobalte/core/context-menu";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	ComponentProps,
-	ParentProps,
-	ValidComponent,
-	VoidProps,
-} from "solid-js";
-import { splitProps } from "solid-js";
+import {
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  ContextMenu as ContextMenuPrimitive,
+  type ContextMenuCheckboxItemProps,
+  type ContextMenuContentProps,
+  type ContextMenuGroupLabelProps,
+  type ContextMenuItemLabelProps,
+  type ContextMenuItemProps,
+  type ContextMenuRadioItemProps,
+  type ContextMenuSeparatorProps,
+  type ContextMenuSubContentProps,
+  type ContextMenuSubTriggerProps,
+} from "@kobalte/core/context-menu"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const ContextMenu = ContextMenuPrimitive;
-export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-export const ContextMenuGroup = ContextMenuPrimitive.Group;
-export const ContextMenuSub = ContextMenuPrimitive.Sub;
-export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const ContextMenu = ContextMenuPrimitive
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+export const ContextMenuGroup = ContextMenuPrimitive.Group
+export const ContextMenuSub = ContextMenuPrimitive.Sub
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
 type contextMenuSubTriggerProps<T extends ValidComponent = "div"> = ParentProps<
-	ContextMenuSubTriggerProps<T> & {
-		class?: string;
-		inset?: boolean;
-	}
->;
+  ContextMenuSubTriggerProps<T> & {
+    class?: string
+    inset?: boolean
+  }
+>
 
 export const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuSubTriggerProps<T>>,
+  props: PolymorphicProps<T, contextMenuSubTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuSubTriggerProps, [
-		"class",
-		"children",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuSubTriggerProps, [
+    "class",
+    "children",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.SubTrigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[expanded]:text-accent-foreground",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="ml-auto h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Arrow</title>
-			</svg>
-		</ContextMenuPrimitive.SubTrigger>
-	);
-};
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[expanded]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="ml-auto h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Arrow</title>
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
 
 type contextMenuSubContentProps<T extends ValidComponent = "div"> =
-	ContextMenuSubContentProps<T> & {
-		class?: string;
-	};
+  ContextMenuSubContentProps<T> & {
+    class?: string
+  }
 
 export const ContextMenuSubContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuSubContentProps<T>>,
+  props: PolymorphicProps<T, contextMenuSubContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuSubContentProps, [
-		"class",
-	]);
+  const [local, rest] = splitProps(props as contextMenuSubContentProps, [
+    "class",
+  ])
 
-	return (
-		<ContextMenuPrimitive.Portal>
-			<ContextMenuPrimitive.SubContent
-				class={cn(
-					"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</ContextMenuPrimitive.Portal>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+          local.class
+        )}
+        {...rest}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
 
 type contextMenuContentProps<T extends ValidComponent = "div"> =
-	ContextMenuContentProps<T> & {
-		class?: string;
-	};
+  ContextMenuContentProps<T> & {
+    class?: string
+  }
 
 export const ContextMenuContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuContentProps<T>>,
+  props: PolymorphicProps<T, contextMenuContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuContentProps, ["class"]);
+  const [local, rest] = splitProps(props as contextMenuContentProps, ["class"])
 
-	return (
-		<ContextMenuPrimitive.Portal>
-			<ContextMenuPrimitive.Content
-				class={cn(
-					"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</ContextMenuPrimitive.Portal>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground focus-visible:ring-ring data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px]",
+          local.class
+        )}
+        {...rest}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
 
 type contextMenuItemProps<T extends ValidComponent = "div"> =
-	ContextMenuItemProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  ContextMenuItemProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const ContextMenuItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuItemProps<T>>,
+  props: PolymorphicProps<T, contextMenuItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuItemProps, [
-		"class",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuItemProps, [
+    "class",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Item
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type contextMenuCheckboxItemProps<T extends ValidComponent = "div"> =
-	ParentProps<
-		ContextMenuCheckboxItemProps<T> & {
-			class?: string;
-		}
-	>;
+  ParentProps<
+    ContextMenuCheckboxItemProps<T> & {
+      class?: string
+    }
+  >
 
 export const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuCheckboxItemProps<T>>,
+  props: PolymorphicProps<T, contextMenuCheckboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuCheckboxItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as contextMenuCheckboxItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ContextMenuPrimitive.CheckboxItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<ContextMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checkbox</title>
-				</svg>
-			</ContextMenuPrimitive.ItemIndicator>
-			{local.children}
-		</ContextMenuPrimitive.CheckboxItem>
-	);
-};
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <ContextMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checkbox</title>
+        </svg>
+      </ContextMenuPrimitive.ItemIndicator>
+      {local.children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
 
 type contextMenuRadioItemProps<T extends ValidComponent = "div"> = ParentProps<
-	ContextMenuRadioItemProps<T> & {
-		class?: string;
-	}
->;
+  ContextMenuRadioItemProps<T> & {
+    class?: string
+  }
+>
 
 export const ContextMenuRadioItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuRadioItemProps<T>>,
+  props: PolymorphicProps<T, contextMenuRadioItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuRadioItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as contextMenuRadioItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ContextMenuPrimitive.RadioItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<ContextMenuPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-2 w-2"
-				>
-					<g
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M0 0h24v24H0z" />
-						<path
-							fill="currentColor"
-							d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
-						/>
-					</g>
-					<title>Radio</title>
-				</svg>
-			</ContextMenuPrimitive.ItemIndicator>
-			{local.children}
-		</ContextMenuPrimitive.RadioItem>
-	);
-};
+  return (
+    <ContextMenuPrimitive.RadioItem
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <ContextMenuPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-2 w-2"
+        >
+          <g
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
+            />
+          </g>
+          <title>Radio</title>
+        </svg>
+      </ContextMenuPrimitive.ItemIndicator>
+      {local.children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
 
 type contextMenuItemLabelProps<T extends ValidComponent = "div"> =
-	ContextMenuItemLabelProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  ContextMenuItemLabelProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const ContextMenuItemLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuItemLabelProps<T>>,
+  props: PolymorphicProps<T, contextMenuItemLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuItemLabelProps, [
-		"class",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuItemLabelProps, [
+    "class",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.ItemLabel
-			class={cn(
-				"px-2 py-1.5 text-sm font-semibold text-foreground",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.ItemLabel
+      class={cn(
+        "text-foreground px-2 py-1.5 text-sm font-semibold",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type contextMenuGroupLabelProps<T extends ValidComponent = "span"> =
-	ContextMenuGroupLabelProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  ContextMenuGroupLabelProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const ContextMenuGroupLabel = <T extends ValidComponent = "span">(
-	props: PolymorphicProps<T, contextMenuGroupLabelProps<T>>,
+  props: PolymorphicProps<T, contextMenuGroupLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuGroupLabelProps, [
-		"class",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuGroupLabelProps, [
+    "class",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.GroupLabel
-			as="div"
-			class={cn(
-				"px-2 py-1.5 text-sm font-semibold text-foreground",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      as="div"
+      class={cn(
+        "text-foreground px-2 py-1.5 text-sm font-semibold",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type contextMenuSeparatorProps<T extends ValidComponent = "hr"> = VoidProps<
-	ContextMenuSeparatorProps<T> & {
-		class?: string;
-	}
->;
+  ContextMenuSeparatorProps<T> & {
+    class?: string
+  }
+>
 
 export const ContextMenuSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, contextMenuSeparatorProps<T>>,
+  props: PolymorphicProps<T, contextMenuSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuSeparatorProps, [
-		"class",
-	]);
+  const [local, rest] = splitProps(props as contextMenuSeparatorProps, [
+    "class",
+  ])
 
-	return (
-		<ContextMenuPrimitive.Separator
-			class={cn("-mx-1 my-1 h-px bg-border", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Separator
+      class={cn("bg-border -mx-1 my-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const ContextMenuShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<span
-			class={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <span
+      class={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/date-picker.tsx b/docs/src/registry/tailwindcss/ui/date-picker.tsx
index a88c51bd..dc473486 100644
--- a/docs/src/registry/tailwindcss/ui/date-picker.tsx
+++ b/docs/src/registry/tailwindcss/ui/date-picker.tsx
@@ -1,300 +1,301 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	DatePickerContentProps,
-	DatePickerControlProps,
-	DatePickerInputProps,
-	DatePickerRangeTextProps,
-	DatePickerRootProps,
-	DatePickerTableCellProps,
-	DatePickerTableCellTriggerProps,
-	DatePickerTableHeaderProps,
-	DatePickerTableProps,
-	DatePickerTableRowProps,
-	DatePickerTriggerProps,
-	DatePickerViewControlProps,
-	DatePickerViewProps,
-	DatePickerViewTriggerProps,
-} from "@ark-ui/solid/date-picker";
-import { DatePicker as DatePickerPrimitive } from "@ark-ui/solid/date-picker";
-import type { VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-import { buttonVariants } from "./button";
-
-export const DatePickerLabel = DatePickerPrimitive.Label;
-export const DatePickerTableHead = DatePickerPrimitive.TableHead;
-export const DatePickerTableBody = DatePickerPrimitive.TableBody;
-export const DatePickerClearTrigger = DatePickerPrimitive.ClearTrigger;
-export const DatePickerYearSelect = DatePickerPrimitive.YearSelect;
-export const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;
-export const DatePickerContext = DatePickerPrimitive.Context;
-export const DatePickerRootProvider = DatePickerPrimitive.RootProvider;
-export const DatePickerPositioner = DatePickerPrimitive.Positioner;
+import { splitProps, type VoidProps } from "solid-js"
+import {
+  DatePicker as DatePickerPrimitive,
+  type DatePickerContentProps,
+  type DatePickerControlProps,
+  type DatePickerInputProps,
+  type DatePickerRangeTextProps,
+  type DatePickerRootProps,
+  type DatePickerTableCellProps,
+  type DatePickerTableCellTriggerProps,
+  type DatePickerTableHeaderProps,
+  type DatePickerTableProps,
+  type DatePickerTableRowProps,
+  type DatePickerTriggerProps,
+  type DatePickerViewControlProps,
+  type DatePickerViewProps,
+  type DatePickerViewTriggerProps,
+} from "@ark-ui/solid/date-picker"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { buttonVariants } from "./button"
+
+export const DatePickerLabel = DatePickerPrimitive.Label
+export const DatePickerTableHead = DatePickerPrimitive.TableHead
+export const DatePickerTableBody = DatePickerPrimitive.TableBody
+export const DatePickerClearTrigger = DatePickerPrimitive.ClearTrigger
+export const DatePickerYearSelect = DatePickerPrimitive.YearSelect
+export const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect
+export const DatePickerContext = DatePickerPrimitive.Context
+export const DatePickerRootProvider = DatePickerPrimitive.RootProvider
+export const DatePickerPositioner = DatePickerPrimitive.Positioner
 
 export const DatePicker = (props: DatePickerRootProps) => {
-	return (
-		<DatePickerPrimitive.Root
-			format={(e) => {
-				const parsedDate = new Date(Date.parse(e.toString()));
-
-				const normalizedDate = new Date(
-					parsedDate.getUTCFullYear(),
-					parsedDate.getUTCMonth(),
-					parsedDate.getUTCDate(),
-				);
-
-				return new Intl.DateTimeFormat("en-US", {
-					dateStyle: "long",
-				}).format(normalizedDate);
-			}}
-			{...props}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.Root
+      format={(e) => {
+        const parsedDate = new Date(Date.parse(e.toString()))
+
+        const normalizedDate = new Date(
+          parsedDate.getUTCFullYear(),
+          parsedDate.getUTCMonth(),
+          parsedDate.getUTCDate()
+        )
+
+        return new Intl.DateTimeFormat("en-US", {
+          dateStyle: "long",
+        }).format(normalizedDate)
+      }}
+      {...props}
+    />
+  )
+}
 
 export const DatePickerView = (props: DatePickerViewProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.View
-			class={cn(
-				"space-y-4 min-w-[calc(var(--reference-width)-(0.75rem*2))]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.View
+      class={cn(
+        "min-w-[calc(var(--reference-width)-(0.75rem*2))] space-y-4",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerViewControl = (props: DatePickerViewControlProps) => {
-	const [local, rest] = splitProps(props, ["class", "children"]);
-
-	return (
-		<DatePickerPrimitive.ViewControl
-			class={cn("flex items-center justify-between", local.class)}
-			{...rest}
-		>
-			<DatePickerPrimitive.PrevTrigger
-				class={cn(
-					buttonVariants({
-						variant: "outline",
-					}),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-				)}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m15 6l-6 6l6 6"
-					/>
-					<title>Previous</title>
-				</svg>
-			</DatePickerPrimitive.PrevTrigger>
-			{local.children}
-			<DatePickerPrimitive.NextTrigger
-				class={cn(
-					buttonVariants({
-						variant: "outline",
-					}),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-				)}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m9 6l6 6l-6 6"
-					/>
-					<title>Next</title>
-				</svg>
-			</DatePickerPrimitive.NextTrigger>
-		</DatePickerPrimitive.ViewControl>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "children"])
+
+  return (
+    <DatePickerPrimitive.ViewControl
+      class={cn("flex items-center justify-between", local.class)}
+      {...rest}
+    >
+      <DatePickerPrimitive.PrevTrigger
+        class={cn(
+          buttonVariants({
+            variant: "outline",
+          }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m15 6l-6 6l6 6"
+          />
+          <title>Previous</title>
+        </svg>
+      </DatePickerPrimitive.PrevTrigger>
+      {local.children}
+      <DatePickerPrimitive.NextTrigger
+        class={cn(
+          buttonVariants({
+            variant: "outline",
+          }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m9 6l6 6l-6 6"
+          />
+          <title>Next</title>
+        </svg>
+      </DatePickerPrimitive.NextTrigger>
+    </DatePickerPrimitive.ViewControl>
+  )
+}
 
 export const DatePickerRangeText = (
-	props: VoidProps<DatePickerRangeTextProps>,
+  props: VoidProps<DatePickerRangeTextProps>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.RangeText
-			class={cn("text-sm font-medium", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.RangeText
+      class={cn("text-sm font-medium", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTable = (props: DatePickerTableProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.Table
-			class={cn("w-full border-collapse space-y-1", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.Table
+      class={cn("w-full border-collapse space-y-1", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableRow = (props: DatePickerTableRowProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.TableRow
-			class={cn("mt-2 flex w-full", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.TableRow
+      class={cn("mt-2 flex w-full", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableHeader = (props: DatePickerTableHeaderProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.TableHeader
-			class={cn(
-				"w-8 flex-1 text-[0.8rem] font-normal text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.TableHeader
+      class={cn(
+        "text-muted-foreground w-8 flex-1 text-[0.8rem] font-normal",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableCell = (props: DatePickerTableCellProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.TableCell
-			class={cn(
-				"flex-1 p-0 text-center text-sm",
-				"has-[[data-in-range]]:bg-accent has-[[data-in-range]]:first-of-type:rounded-l-md has-[[data-in-range]]:last-of-type:rounded-r-md",
-				"has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md",
-				"has-[[data-outside-range][data-in-range]]:bg-accent/50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.TableCell
+      class={cn(
+        "flex-1 p-0 text-center text-sm",
+        "has-[[data-in-range]]:bg-accent has-[[data-in-range]]:first-of-type:rounded-l-md has-[[data-in-range]]:last-of-type:rounded-r-md",
+        "has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md",
+        "has-[[data-outside-range][data-in-range]]:bg-accent/50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableCellTrigger = (
-	props: DatePickerTableCellTriggerProps,
+  props: DatePickerTableCellTriggerProps
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.TableCellTrigger
-			class={cn(
-				buttonVariants({ variant: "ghost" }),
-				"size-8 w-full p-0 font-normal data-[selected]:opacity-100",
-				"data-[today]:bg-accent data-[today]:text-accent-foreground",
-				"[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground",
-				"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground",
-				"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
-				"data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50",
-				"[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.TableCellTrigger
+      class={cn(
+        buttonVariants({ variant: "ghost" }),
+        "size-8 w-full p-0 font-normal data-[selected]:opacity-100",
+        "data-[today]:bg-accent data-[today]:text-accent-foreground",
+        "[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground",
+        "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground",
+        "data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+        "data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50",
+        "[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerViewTrigger = (props: DatePickerViewTriggerProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.ViewTrigger
-			class={cn(buttonVariants({ variant: "ghost" }), "h-7 mx-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.ViewTrigger
+      class={cn(buttonVariants({ variant: "ghost" }), "mx-2 h-7", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerContent = (props: DatePickerContentProps) => {
-	const [local, rest] = splitProps(props, ["class", "children"]);
-
-	return (
-		<DatePickerPrimitive.Content
-			class={cn(
-				"rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-		</DatePickerPrimitive.Content>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "children"])
+
+  return (
+    <DatePickerPrimitive.Content
+      class={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 rounded-md border p-3 shadow-md outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </DatePickerPrimitive.Content>
+  )
+}
 
 export const DatePickerControl = (props: DatePickerControlProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.Control
-			class={cn(
-				"inline-flex items-center gap-x-1 [&>input:first-of-type]:rounded-s-md",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.Control
+      class={cn(
+        "inline-flex items-center gap-x-1 [&>input:first-of-type]:rounded-s-md",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerInput = (props: DatePickerInputProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.Input
-			class={cn(
-				"w-full h-9 border border-border bg-background px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.Input
+      class={cn(
+        "border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full border px-3 py-1 text-sm shadow-sm transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTrigger = (props: DatePickerTriggerProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.Trigger
-			class={cn(
-				"transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring flex items-center justify-center min-w-9 min-h-9 rounded-e-md border border-border bg-background [&>svg]:size-4 hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M8 2v4m8-4v4" />
-					<rect width="18" height="18" x="3" y="4" rx="2" />
-					<path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
-				</g>
-				<title>Calendar</title>
-			</svg>
-		</DatePickerPrimitive.Trigger>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.Trigger
+      class={cn(
+        "focus-visible:ring-ring border-border bg-background hover:bg-accent/50 flex min-h-9 min-w-9 items-center justify-center rounded-e-md border transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M8 2v4m8-4v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
+        </g>
+        <title>Calendar</title>
+      </svg>
+    </DatePickerPrimitive.Trigger>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/dialog.tsx b/docs/src/registry/tailwindcss/ui/dialog.tsx
index 3c506b65..79392e4a 100644
--- a/docs/src/registry/tailwindcss/ui/dialog.tsx
+++ b/docs/src/registry/tailwindcss/ui/dialog.tsx
@@ -1,128 +1,133 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	DialogContentProps,
-	DialogDescriptionProps,
-	DialogTitleProps,
-} from "@kobalte/core/dialog";
-import { Dialog as DialogPrimitive } from "@kobalte/core/dialog";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import {
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  Dialog as DialogPrimitive,
+  type DialogContentProps,
+  type DialogDescriptionProps,
+  type DialogTitleProps,
+} from "@kobalte/core/dialog"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Dialog = DialogPrimitive;
-export const DialogTrigger = DialogPrimitive.Trigger;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const Dialog = DialogPrimitive
+export const DialogTrigger = DialogPrimitive.Trigger
 
 type dialogContentProps<T extends ValidComponent = "div"> = ParentProps<
-	DialogContentProps<T> & {
-		class?: string;
-	}
->;
+  DialogContentProps<T> & {
+    class?: string
+  }
+>
 
 export const DialogContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dialogContentProps<T>>,
+  props: PolymorphicProps<T, dialogContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dialogContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as dialogContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<DialogPrimitive.Portal>
-			<DialogPrimitive.Overlay
-				class={cn(
-					"fixed inset-0 z-50 bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
-				)}
-				{...rest}
-			/>
-			<DialogPrimitive.Content
-				class={cn(
-					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg data-[closed]:duration-200 data-[expanded]:duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-[opacity,box-shadow] hover:opacity-100 focus:outline-none focus:ring-[1.5px] focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M18 6L6 18M6 6l12 12"
-						/>
-						<title>Close</title>
-					</svg>
-				</DialogPrimitive.CloseButton>
-			</DialogPrimitive.Content>
-		</DialogPrimitive.Portal>
-	);
-};
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        class={cn(
+          "bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 fixed inset-0 z-50"
+        )}
+        {...rest}
+      />
+      <DialogPrimitive.Content
+        class={cn(
+          "bg-background data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg data-[closed]:duration-200 data-[expanded]:duration-200 sm:rounded-lg md:w-full",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <DialogPrimitive.CloseButton class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus:outline-none focus:ring-[1.5px] focus:ring-offset-2 disabled:pointer-events-none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18 6L6 18M6 6l12 12"
+            />
+            <title>Close</title>
+          </svg>
+        </DialogPrimitive.CloseButton>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+}
 
 type dialogTitleProps<T extends ValidComponent = "h2"> = DialogTitleProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const DialogTitle = <T extends ValidComponent = "h2">(
-	props: PolymorphicProps<T, dialogTitleProps<T>>,
+  props: PolymorphicProps<T, dialogTitleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dialogTitleProps, ["class"]);
+  const [local, rest] = splitProps(props as dialogTitleProps, ["class"])
 
-	return (
-		<DialogPrimitive.Title
-			class={cn("text-lg font-semibold text-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DialogPrimitive.Title
+      class={cn("text-foreground text-lg font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dialogDescriptionProps<T extends ValidComponent = "p"> =
-	DialogDescriptionProps<T> & {
-		class?: string;
-	};
+  DialogDescriptionProps<T> & {
+    class?: string
+  }
 
 export const DialogDescription = <T extends ValidComponent = "p">(
-	props: PolymorphicProps<T, dialogDescriptionProps<T>>,
+  props: PolymorphicProps<T, dialogDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dialogDescriptionProps, ["class"]);
+  const [local, rest] = splitProps(props as dialogDescriptionProps, ["class"])
 
-	return (
-		<DialogPrimitive.Description
-			class={cn("text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DialogPrimitive.Description
+      class={cn("text-muted-foreground text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DialogHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn(
-				"flex flex-col space-y-2 text-center sm:text-left",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DialogFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn(
-				"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/drawer.tsx b/docs/src/registry/tailwindcss/ui/drawer.tsx
index 37952e62..a59405f1 100644
--- a/docs/src/registry/tailwindcss/ui/drawer.tsx
+++ b/docs/src/registry/tailwindcss/ui/drawer.tsx
@@ -1,135 +1,141 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	ContentProps,
-	DescriptionProps,
-	DynamicProps,
-	LabelProps,
-} from "@corvu/drawer";
-import DrawerPrimitive from "@corvu/drawer";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { Show, mergeProps, splitProps } from "solid-js";
+import {
+  Show,
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import DrawerPrimitive, {
+  type ContentProps,
+  type DescriptionProps,
+  type DynamicProps,
+  type LabelProps,
+} from "@corvu/drawer"
 
-export const Drawer = DrawerPrimitive;
-export const DrawerTrigger = DrawerPrimitive.Trigger;
-export const DrawerClose = DrawerPrimitive.Close;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const Drawer = DrawerPrimitive
+export const DrawerTrigger = DrawerPrimitive.Trigger
+export const DrawerClose = DrawerPrimitive.Close
 
 type drawerContentProps<T extends ValidComponent = "div"> = ParentProps<
-	ContentProps<T> & {
-		class?: string;
-		withHandle?: boolean;
-	}
->;
+  ContentProps<T> & {
+    class?: string
+    withHandle?: boolean
+  }
+>
 
 export const DrawerContent = <T extends ValidComponent = "div">(
-	props: DynamicProps<T, drawerContentProps<T>>,
+  props: DynamicProps<T, drawerContentProps<T>>
 ) => {
-	const ctx = DrawerPrimitive.useContext();
-	const merge = mergeProps(
-		{ withHandle: ctx.side() === "bottom" } as drawerContentProps,
-		props,
-	);
-	const [local, rest] = splitProps(merge, ["class", "children", "withHandle"]);
+  const ctx = DrawerPrimitive.useContext()
+  const merge = mergeProps(
+    { withHandle: ctx.side() === "bottom" } as drawerContentProps,
+    props
+  )
+  const [local, rest] = splitProps(merge, ["class", "children", "withHandle"])
 
-	return (
-		<DrawerPrimitive.Portal>
-			<DrawerPrimitive.Overlay
-				class="fixed inset-0 z-50 data-[transitioning]:transition-[background-color] data-[transitioning]:duration-500 data-[transitioning]:[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]"
-				style={{
-					"background-color": `rgb(0 0 0 / ${0.6 * ctx.openPercentage()})`,
-				}}
-			/>
-			<DrawerPrimitive.Content
-				class={cn(
-					"fixed z-50 flex h-auto border-border bg-background data-[transitioning]:transition-transform data-[transitioning]:duration-500 data-[transitioning]:[transition-timing-function:cubic-bezier(0.32,0.72,0,1)] md:select-none after:absolute after:bg-inherit",
-					ctx.side() === "right" && [
-						"inset-y-0 right-0 rounded-l-lg border-l pl-4 ",
-						"after:inset-y-0 after:left-[calc(100%-1px)] after:w-1/2",
-					],
-					ctx.side() === "bottom" && [
-						"inset-x-0 bottom-0 rounded-t-lg border-t pt-4 flex-col ",
-						"after:inset-x-0 after:top-[calc(100%-1px)] after:h-1/2",
-					],
-					ctx.side() === "left" && [
-						"inset-y-0 left-0 rounded-r-lg border-r pr-4 flex-row-reverse ",
-						"after:inset-y-0 after:right-[calc(100%-1px)] after:w-1/2",
-					],
-					ctx.side() === "top" && [
-						"inset-x-0 top-0 rounded-b-lg border-b pb-4 flex-col-reverse ",
-						"after:inset-x-0 after:bottom-[calc(100%-1px)] after:h-1/2",
-					],
-					local.class,
-				)}
-				{...rest}
-			>
-				<Show when={local.withHandle}>
-					<div
-						class={cn(
-							"rounded-full bg-muted shrink-0 self-center",
-							ctx.side() === "right" && "h-10 w-1",
-							ctx.side() === "bottom" && "h-1 w-10",
-							ctx.side() === "left" && "h-10 w-1",
-							ctx.side() === "top" && "h-1 w-10",
-						)}
-					/>
-				</Show>
-				{local.children}
-			</DrawerPrimitive.Content>
-		</DrawerPrimitive.Portal>
-	);
-};
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Overlay
+        class="fixed inset-0 z-50 data-[transitioning]:transition-[background-color] data-[transitioning]:duration-500 data-[transitioning]:[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]"
+        style={{
+          "background-color": `rgb(0 0 0 / ${0.6 * ctx.openPercentage()})`,
+        }}
+      />
+      <DrawerPrimitive.Content
+        class={cn(
+          "border-border bg-background fixed z-50 flex h-auto after:absolute after:bg-inherit data-[transitioning]:transition-transform data-[transitioning]:duration-500 data-[transitioning]:[transition-timing-function:cubic-bezier(0.32,0.72,0,1)] md:select-none",
+          ctx.side() === "right" && [
+            "inset-y-0 right-0 rounded-l-lg border-l pl-4",
+            "after:inset-y-0 after:left-[calc(100%-1px)] after:w-1/2",
+          ],
+          ctx.side() === "bottom" && [
+            "inset-x-0 bottom-0 flex-col rounded-t-lg border-t pt-4",
+            "after:inset-x-0 after:top-[calc(100%-1px)] after:h-1/2",
+          ],
+          ctx.side() === "left" && [
+            "inset-y-0 left-0 flex-row-reverse rounded-r-lg border-r pr-4",
+            "after:inset-y-0 after:right-[calc(100%-1px)] after:w-1/2",
+          ],
+          ctx.side() === "top" && [
+            "inset-x-0 top-0 flex-col-reverse rounded-b-lg border-b pb-4",
+            "after:inset-x-0 after:bottom-[calc(100%-1px)] after:h-1/2",
+          ],
+          local.class
+        )}
+        {...rest}
+      >
+        <Show when={local.withHandle}>
+          <div
+            class={cn(
+              "bg-muted shrink-0 self-center rounded-full",
+              ctx.side() === "right" && "h-10 w-1",
+              ctx.side() === "bottom" && "h-1 w-10",
+              ctx.side() === "left" && "h-10 w-1",
+              ctx.side() === "top" && "h-1 w-10"
+            )}
+          />
+        </Show>
+        {local.children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  )
+}
 
 export const DrawerHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn("grid gap-1.5 p-4 text-center sm:text-left", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn("grid gap-1.5 p-4 text-center sm:text-left", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DrawerFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("mt-auto flex flex-col gap-2 p-4", local.class)} {...rest} />
-	);
-};
+  return (
+    <div class={cn("mt-auto flex flex-col gap-2 p-4", local.class)} {...rest} />
+  )
+}
 
 type DrawerLabelProps = LabelProps & {
-	class?: string;
-};
+  class?: string
+}
 
 export const DrawerLabel = <T extends ValidComponent = "h2">(
-	props: DynamicProps<T, DrawerLabelProps>,
+  props: DynamicProps<T, DrawerLabelProps>
 ) => {
-	const [local, rest] = splitProps(props as DrawerLabelProps, ["class"]);
+  const [local, rest] = splitProps(props as DrawerLabelProps, ["class"])
 
-	return (
-		<DrawerPrimitive.Label
-			class={cn(
-				"text-lg font-semibold leading-none tracking-tight",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DrawerPrimitive.Label
+      class={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type DrawerDescriptionProps = DescriptionProps & {
-	class?: string;
-};
+  class?: string
+}
 
 export const DrawerDescription = <T extends ValidComponent = "p">(
-	props: DynamicProps<T, DrawerDescriptionProps>,
+  props: DynamicProps<T, DrawerDescriptionProps>
 ) => {
-	const [local, rest] = splitProps(props as DrawerDescriptionProps, ["class"]);
+  const [local, rest] = splitProps(props as DrawerDescriptionProps, ["class"])
 
-	return (
-		<DrawerPrimitive.Description
-			class={cn("text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DrawerPrimitive.Description
+      class={cn("text-muted-foreground text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/dropdown-menu.tsx b/docs/src/registry/tailwindcss/ui/dropdown-menu.tsx
index 45284bba..6bb50c59 100644
--- a/docs/src/registry/tailwindcss/ui/dropdown-menu.tsx
+++ b/docs/src/registry/tailwindcss/ui/dropdown-menu.tsx
@@ -1,320 +1,324 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	DropdownMenuCheckboxItemProps,
-	DropdownMenuContentProps,
-	DropdownMenuGroupLabelProps,
-	DropdownMenuItemLabelProps,
-	DropdownMenuItemProps,
-	DropdownMenuRadioItemProps,
-	DropdownMenuRootProps,
-	DropdownMenuSeparatorProps,
-	DropdownMenuSubTriggerProps,
-} from "@kobalte/core/dropdown-menu";
-import { DropdownMenu as DropdownMenuPrimitive } from "@kobalte/core/dropdown-menu";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+import {
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  DropdownMenu as DropdownMenuPrimitive,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuGroupLabelProps,
+  type DropdownMenuItemLabelProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuRootProps,
+  type DropdownMenuSeparatorProps,
+  type DropdownMenuSubTriggerProps,
+} from "@kobalte/core/dropdown-menu"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 export const DropdownMenu = (props: DropdownMenuRootProps) => {
-	const merge = mergeProps<DropdownMenuRootProps[]>(
-		{
-			gutter: 4,
-			flip: false,
-		},
-		props,
-	);
+  const merge = mergeProps<DropdownMenuRootProps[]>(
+    {
+      gutter: 4,
+      flip: false,
+    },
+    props
+  )
 
-	return <DropdownMenuPrimitive {...merge} />;
-};
+  return <DropdownMenuPrimitive {...merge} />
+}
 
 type dropdownMenuContentProps<T extends ValidComponent = "div"> =
-	DropdownMenuContentProps<T> & {
-		class?: string;
-	};
+  DropdownMenuContentProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuContentProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuContentProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Portal>
-			<DropdownMenuPrimitive.Content
-				class={cn(
-					"min-w-8rem z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</DropdownMenuPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuContentProps, ["class"])
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        class={cn(
+          "min-w-8rem bg-popover text-popover-foreground focus-visible:ring-ring data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 overflow-hidden rounded-md border p-1 shadow-md transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px]",
+          local.class
+        )}
+        {...rest}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
 
 type dropdownMenuItemProps<T extends ValidComponent = "div"> =
-	DropdownMenuItemProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  DropdownMenuItemProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const DropdownMenuItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuItemProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuItemProps, [
-		"class",
-		"inset",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuItemProps, [
+    "class",
+    "inset",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.Item
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuGroupLabelProps<T extends ValidComponent = "span"> =
-	DropdownMenuGroupLabelProps<T> & {
-		class?: string;
-	};
+  DropdownMenuGroupLabelProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuGroupLabel = <T extends ValidComponent = "span">(
-	props: PolymorphicProps<T, dropdownMenuGroupLabelProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuGroupLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuGroupLabelProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.GroupLabel
-			as="div"
-			class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuGroupLabelProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.GroupLabel
+      as="div"
+      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuItemLabelProps<T extends ValidComponent = "div"> =
-	DropdownMenuItemLabelProps<T> & {
-		class?: string;
-	};
+  DropdownMenuItemLabelProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuItemLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuItemLabelProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuItemLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuItemLabelProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.ItemLabel
-			as="div"
-			class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuItemLabelProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.ItemLabel
+      as="div"
+      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
-	DropdownMenuSeparatorProps<T> & {
-		class?: string;
-	};
+  DropdownMenuSeparatorProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, dropdownMenuSeparatorProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuSeparatorProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Separator
-			class={cn("-mx-1 my-1 h-px bg-muted", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuSeparatorProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.Separator
+      class={cn("bg-muted -mx-1 my-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DropdownMenuShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<span
-			class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <span
+      class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
-	ParentProps<
-		DropdownMenuSubTriggerProps<T> & {
-			class?: string;
-		}
-	>;
+  ParentProps<
+    DropdownMenuSubTriggerProps<T> & {
+      class?: string
+    }
+  >
 
 export const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuSubTriggerProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuSubTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuSubTriggerProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.SubTrigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[expanded]:bg-accent",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-				class="ml-auto h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Arrow</title>
-			</svg>
-		</DropdownMenuPrimitive.SubTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuSubTriggerProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      class={cn(
+        "focus:bg-accent data-[expanded]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="ml-auto h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Arrow</title>
+      </svg>
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
 
 type dropdownMenuSubContentProps<T extends ValidComponent = "div"> =
-	DropdownMenuSubTriggerProps<T> & {
-		class?: string;
-	};
+  DropdownMenuSubTriggerProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuSubContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuSubContentProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuSubContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuSubContentProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Portal>
-			<DropdownMenuPrimitive.SubContent
-				class={cn(
-					"min-w-8rem z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</DropdownMenuPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuSubContentProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        class={cn(
+          "min-w-8rem bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 overflow-hidden rounded-md border p-1 shadow-md",
+          local.class
+        )}
+        {...rest}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
 
 type dropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
-	ParentProps<
-		DropdownMenuCheckboxItemProps<T> & {
-			class?: string;
-		}
-	>;
+  ParentProps<
+    DropdownMenuCheckboxItemProps<T> & {
+      class?: string
+    }
+  >
 
 export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuCheckboxItemProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuCheckboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuCheckboxItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.CheckboxItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checkbox</title>
-				</svg>
-			</DropdownMenuPrimitive.ItemIndicator>
-			{props.children}
-		</DropdownMenuPrimitive.CheckboxItem>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuCheckboxItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checkbox</title>
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+      {props.children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
 
 type dropdownMenuRadioItemProps<T extends ValidComponent = "div"> = ParentProps<
-	DropdownMenuRadioItemProps<T> & {
-		class?: string;
-	}
->;
+  DropdownMenuRadioItemProps<T> & {
+    class?: string
+  }
+>
 
 export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuRadioItemProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuRadioItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuRadioItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.RadioItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-2 w-2"
-				>
-					<g
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M0 0h24v24H0z" />
-						<path
-							fill="currentColor"
-							d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
-						/>
-					</g>
-					<title>Radio</title>
-				</svg>
-			</DropdownMenuPrimitive.ItemIndicator>
-			{props.children}
-		</DropdownMenuPrimitive.RadioItem>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuRadioItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-2 w-2"
+        >
+          <g
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
+            />
+          </g>
+          <title>Radio</title>
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+      {props.children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/hover-card.tsx b/docs/src/registry/tailwindcss/ui/hover-card.tsx
index d325bf44..632c5861 100644
--- a/docs/src/registry/tailwindcss/ui/hover-card.tsx
+++ b/docs/src/registry/tailwindcss/ui/hover-card.tsx
@@ -1,32 +1,34 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { HoverCardContentProps } from "@kobalte/core/hover-card";
-import { HoverCard as HoverCardPrimitive } from "@kobalte/core/hover-card";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import {
+  HoverCard as HoverCardPrimitive,
+  type HoverCardContentProps,
+} from "@kobalte/core/hover-card"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const HoverCard = HoverCardPrimitive;
-export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const HoverCard = HoverCardPrimitive
+export const HoverCardTrigger = HoverCardPrimitive.Trigger
 
 type hoverCardContentProps<T extends ValidComponent = "div"> =
-	HoverCardContentProps<T> & {
-		class?: string;
-	};
+  HoverCardContentProps<T> & {
+    class?: string
+  }
 
 export const HoverCardContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, hoverCardContentProps<T>>,
+  props: PolymorphicProps<T, hoverCardContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as hoverCardContentProps, ["class"]);
+  const [local, rest] = splitProps(props as hoverCardContentProps, ["class"])
 
-	return (
-		<HoverCardPrimitive.Portal>
-			<HoverCardPrimitive.Content
-				class={cn(
-					"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</HoverCardPrimitive.Portal>
-	);
-};
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
+          local.class
+        )}
+        {...rest}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/menubar.tsx b/docs/src/registry/tailwindcss/ui/menubar.tsx
index 88f83d1b..5b67e63d 100644
--- a/docs/src/registry/tailwindcss/ui/menubar.tsx
+++ b/docs/src/registry/tailwindcss/ui/menubar.tsx
@@ -1,356 +1,362 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	MenubarCheckboxItemProps,
-	MenubarContentProps,
-	MenubarItemLabelProps,
-	MenubarItemProps,
-	MenubarMenuProps,
-	MenubarRadioItemProps,
-	MenubarRootProps,
-	MenubarSeparatorProps,
-	MenubarSubContentProps,
-	MenubarSubTriggerProps,
-	MenubarTriggerProps,
-} from "@kobalte/core/menubar";
-import { Menubar as MenubarPrimitive } from "@kobalte/core/menubar";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-
-export const MenubarSub = MenubarPrimitive.Sub;
-export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+import {
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  Menubar as MenubarPrimitive,
+  type MenubarCheckboxItemProps,
+  type MenubarContentProps,
+  type MenubarItemLabelProps,
+  type MenubarItemProps,
+  type MenubarMenuProps,
+  type MenubarRadioItemProps,
+  type MenubarRootProps,
+  type MenubarSeparatorProps,
+  type MenubarSubContentProps,
+  type MenubarSubTriggerProps,
+  type MenubarTriggerProps,
+} from "@kobalte/core/menubar"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const MenubarSub = MenubarPrimitive.Sub
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup
 
 type menubarProps<T extends ValidComponent = "div"> = MenubarRootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const Menubar = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarProps<T>>,
+  props: PolymorphicProps<T, menubarProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarProps, ["class"]);
-
-	return (
-		<MenubarPrimitive
-			class={cn(
-				"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarProps, ["class"])
+
+  return (
+    <MenubarPrimitive
+      class={cn(
+        "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const MenubarMenu = (props: MenubarMenuProps) => {
-	const merge = mergeProps<MenubarMenuProps[]>(
-		{
-			gutter: 8,
-			shift: -4,
-			flip: false,
-		},
-		props,
-	);
-
-	return <MenubarPrimitive.Menu {...merge} />;
-};
+  const merge = mergeProps<MenubarMenuProps[]>(
+    {
+      gutter: 8,
+      shift: -4,
+      flip: false,
+    },
+    props
+  )
+
+  return <MenubarPrimitive.Menu {...merge} />
+}
 
 type menubarTriggerProps<T extends ValidComponent = "button"> =
-	MenubarTriggerProps<T> & {
-		class?: string;
-	};
+  MenubarTriggerProps<T> & {
+    class?: string
+  }
 
 export const MenubarTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, menubarTriggerProps<T>>,
+  props: PolymorphicProps<T, menubarTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarTriggerProps, ["class"]);
-
-	return (
-		<MenubarPrimitive.Trigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[expanded]:text-accent-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarTriggerProps, ["class"])
+
+  return (
+    <MenubarPrimitive.Trigger
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[expanded]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type menubarSubTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	MenubarSubTriggerProps<T> & {
-		class?: string;
-		inset?: boolean;
-	}
->;
+  MenubarSubTriggerProps<T> & {
+    class?: string
+    inset?: boolean
+  }
+>
 
 export const MenubarSubTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, menubarSubTriggerProps<T>>,
+  props: PolymorphicProps<T, menubarSubTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarSubTriggerProps, [
-		"class",
-		"children",
-		"inset",
-	]);
-
-	return (
-		<MenubarPrimitive.SubTrigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[expanded]:text-accent-foreground",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-				class="ml-auto h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Arrow</title>
-			</svg>
-		</MenubarPrimitive.SubTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as menubarSubTriggerProps, [
+    "class",
+    "children",
+    "inset",
+  ])
+
+  return (
+    <MenubarPrimitive.SubTrigger
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[expanded]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="ml-auto h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Arrow</title>
+      </svg>
+    </MenubarPrimitive.SubTrigger>
+  )
+}
 
 type menubarSubContentProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarSubContentProps<T> & {
-		class?: string;
-	}
->;
+  MenubarSubContentProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarSubContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarSubContentProps<T>>,
+  props: PolymorphicProps<T, menubarSubContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarSubContentProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.Portal>
-			<MenubarPrimitive.SubContent
-				class={cn(
-					"z-50 min-w-[8rem] origin-[--kb-menu-content-transform-origin] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</MenubarPrimitive.SubContent>
-		</MenubarPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as menubarSubContentProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.SubContent
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 min-w-[8rem] origin-[--kb-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-lg outline-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </MenubarPrimitive.SubContent>
+    </MenubarPrimitive.Portal>
+  )
+}
 
 type menubarContentProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarContentProps<T> & {
-		class?: string;
-	}
->;
+  MenubarContentProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarContentProps<T>>,
+  props: PolymorphicProps<T, menubarContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarContentProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.Portal>
-			<MenubarPrimitive.Content
-				class={cn(
-					"z-50 min-w-[12rem] origin-[--kb-menu-content-transform-origin] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[expanded]:animate-in data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</MenubarPrimitive.Content>
-		</MenubarPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as menubarContentProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 min-w-[12rem] origin-[--kb-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-md outline-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </MenubarPrimitive.Content>
+    </MenubarPrimitive.Portal>
+  )
+}
 
 type menubarItemProps<T extends ValidComponent = "div"> =
-	MenubarItemProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  MenubarItemProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const MenubarItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarItemProps<T>>,
+  props: PolymorphicProps<T, menubarItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarItemProps, [
-		"class",
-		"inset",
-	]);
-
-	return (
-		<MenubarPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarItemProps, [
+    "class",
+    "inset",
+  ])
+
+  return (
+    <MenubarPrimitive.Item
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type menubarItemLabelProps<T extends ValidComponent = "div"> =
-	MenubarItemLabelProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  MenubarItemLabelProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const MenubarItemLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarItemLabelProps<T>>,
+  props: PolymorphicProps<T, menubarItemLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarItemLabelProps, [
-		"class",
-		"inset",
-	]);
-
-	return (
-		<MenubarPrimitive.ItemLabel
-			class={cn(
-				"px-2 py-1.5 text-sm font-semibold",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarItemLabelProps, [
+    "class",
+    "inset",
+  ])
+
+  return (
+    <MenubarPrimitive.ItemLabel
+      class={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type menubarSeparatorProps<T extends ValidComponent = "hr"> =
-	MenubarSeparatorProps<T> & {
-		class?: string;
-	};
+  MenubarSeparatorProps<T> & {
+    class?: string
+  }
 
 export const MenubarSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, menubarSeparatorProps<T>>,
+  props: PolymorphicProps<T, menubarSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarSeparatorProps, ["class"]);
+  const [local, rest] = splitProps(props as menubarSeparatorProps, ["class"])
 
-	return (
-		<MenubarPrimitive.Separator
-			class={cn("-mx-1 my-1 h-px bg-muted", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <MenubarPrimitive.Separator
+      class={cn("bg-muted -mx-1 my-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type menubarCheckboxItemProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarCheckboxItemProps<T> & {
-		class?: string;
-	}
->;
+  MenubarCheckboxItemProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarCheckboxItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarCheckboxItemProps<T>>,
+  props: PolymorphicProps<T, menubarCheckboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarCheckboxItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.CheckboxItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checkbox</title>
-				</svg>
-			</MenubarPrimitive.ItemIndicator>
-			{local.children}
-		</MenubarPrimitive.CheckboxItem>
-	);
-};
+  const [local, rest] = splitProps(props as menubarCheckboxItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.CheckboxItem
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checkbox</title>
+        </svg>
+      </MenubarPrimitive.ItemIndicator>
+      {local.children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
 
 type menubarRadioItemProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarRadioItemProps<T> & {
-		class?: string;
-	}
->;
+  MenubarRadioItemProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarRadioItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarRadioItemProps<T>>,
+  props: PolymorphicProps<T, menubarRadioItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarRadioItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.RadioItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-2 w-2"
-				>
-					<g
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M0 0h24v24H0z" />
-						<path
-							fill="currentColor"
-							d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
-						/>
-					</g>
-					<title>Radio</title>
-				</svg>
-			</MenubarPrimitive.ItemIndicator>
-			{local.children}
-		</MenubarPrimitive.RadioItem>
-	);
-};
+  const [local, rest] = splitProps(props as menubarRadioItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.RadioItem
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-2 w-2"
+        >
+          <g
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
+            />
+          </g>
+          <title>Radio</title>
+        </svg>
+      </MenubarPrimitive.ItemIndicator>
+      {local.children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
 
 export const MenubarShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<span
-			class={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <span
+      class={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/navigation-menu.tsx b/docs/src/registry/tailwindcss/ui/navigation-menu.tsx
index 9b4b81ff..b2f2f2db 100644
--- a/docs/src/registry/tailwindcss/ui/navigation-menu.tsx
+++ b/docs/src/registry/tailwindcss/ui/navigation-menu.tsx
@@ -1,169 +1,168 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	NavigationMenuContentProps,
-	NavigationMenuRootProps,
-	NavigationMenuTriggerProps,
-} from "@kobalte/core/navigation-menu";
-import { NavigationMenu as NavigationMenuPrimitive } from "@kobalte/core/navigation-menu";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
 import {
-	type ParentProps,
-	Show,
-	type ValidComponent,
-	mergeProps,
-	splitProps,
-} from "solid-js";
+  Show,
+  mergeProps,
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  NavigationMenu as NavigationMenuPrimitive,
+  type NavigationMenuContentProps,
+  type NavigationMenuRootProps,
+  type NavigationMenuTriggerProps,
+} from "@kobalte/core/navigation-menu"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
-export const NavigationMenuItem = NavigationMenuPrimitive.Menu;
-export const NavigationMenuLink = NavigationMenuPrimitive.Item;
-export const NavigationMenuItemLabel = NavigationMenuPrimitive.ItemLabel;
-export const NavigationMenuDescription =
-	NavigationMenuPrimitive.ItemDescription;
-export const NavigationMenuItemIndicator =
-	NavigationMenuPrimitive.ItemIndicator;
-export const NavigationMenuSub = NavigationMenuPrimitive.Sub;
-export const NavigationMenuSubTrigger = NavigationMenuPrimitive.SubTrigger;
-export const NavigationMenuSubContent = NavigationMenuPrimitive.SubContent;
-export const NavigationMenuRadioGroup = NavigationMenuPrimitive.RadioGroup;
-export const NavigationMenuRadioItem = NavigationMenuPrimitive.RadioItem;
-export const NavigationMenuCheckboxItem = NavigationMenuPrimitive.CheckboxItem;
-export const NavigationMenuSeparator = NavigationMenuPrimitive.Separator;
+export const NavigationMenuItem = NavigationMenuPrimitive.Menu
+export const NavigationMenuLink = NavigationMenuPrimitive.Item
+export const NavigationMenuItemLabel = NavigationMenuPrimitive.ItemLabel
+export const NavigationMenuDescription = NavigationMenuPrimitive.ItemDescription
+export const NavigationMenuItemIndicator = NavigationMenuPrimitive.ItemIndicator
+export const NavigationMenuSub = NavigationMenuPrimitive.Sub
+export const NavigationMenuSubTrigger = NavigationMenuPrimitive.SubTrigger
+export const NavigationMenuSubContent = NavigationMenuPrimitive.SubContent
+export const NavigationMenuRadioGroup = NavigationMenuPrimitive.RadioGroup
+export const NavigationMenuRadioItem = NavigationMenuPrimitive.RadioItem
+export const NavigationMenuCheckboxItem = NavigationMenuPrimitive.CheckboxItem
+export const NavigationMenuSeparator = NavigationMenuPrimitive.Separator
 
 type withArrow = {
-	withArrow?: boolean;
-};
+  withArrow?: boolean
+}
 
 type navigationMenuProps<T extends ValidComponent = "ul"> = ParentProps<
-	NavigationMenuRootProps<T> &
-		withArrow & {
-			class?: string;
-		}
->;
+  NavigationMenuRootProps<T> &
+    withArrow & {
+      class?: string
+    }
+>
 
 export const NavigationMenu = <T extends ValidComponent = "ul">(
-	props: PolymorphicProps<T, navigationMenuProps<T>>,
+  props: PolymorphicProps<T, navigationMenuProps<T>>
 ) => {
-	const merge = mergeProps<navigationMenuProps<T>[]>(
-		{
-			get gutter() {
-				return props.withArrow ? props.gutter : 6;
-			},
-			withArrow: false,
-			flip: false,
-		},
-		props,
-	);
-	const [local, rest] = splitProps(merge as navigationMenuProps, [
-		"class",
-		"children",
-		"withArrow",
-	]);
+  const merge = mergeProps<navigationMenuProps<T>[]>(
+    {
+      get gutter() {
+        return props.withArrow ? props.gutter : 6
+      },
+      withArrow: false,
+      flip: false,
+    },
+    props
+  )
+  const [local, rest] = splitProps(merge as navigationMenuProps, [
+    "class",
+    "children",
+    "withArrow",
+  ])
 
-	return (
-		<NavigationMenuPrimitive
-			class={cn("flex w-max items-center justify-center gap-x-1", local.class)}
-			{...rest}
-		>
-			{local.children}
-			<NavigationMenuPrimitive.Viewport
-				class={cn(
-					"pointer-events-none z-50 overflow-x-clip overflow-y-visible rounded-md border bg-popover text-popover-foreground shadow",
-					"h-[--kb-navigation-menu-viewport-height] w-[--kb-navigation-menu-viewport-width] transition-[width,height] duration-300",
-					"origin-[--kb-menu-content-transform-origin]",
-					"data-[expanded]:duration-300 data-[expanded]:animate-in data-[expanded]:fade-in data-[expanded]:zoom-in-95",
-					"data-[closed]:duration-300 data-[closed]:animate-out data-[closed]:fade-out data-[closed]:zoom-out-95",
-				)}
-			>
-				<Show when={local.withArrow}>
-					<NavigationMenuPrimitive.Arrow class="transition-transform duration-300" />
-				</Show>
-			</NavigationMenuPrimitive.Viewport>
-		</NavigationMenuPrimitive>
-	);
-};
+  return (
+    <NavigationMenuPrimitive
+      class={cn("flex w-max items-center justify-center gap-x-1", local.class)}
+      {...rest}
+    >
+      {local.children}
+      <NavigationMenuPrimitive.Viewport
+        class={cn(
+          "bg-popover text-popover-foreground pointer-events-none z-50 overflow-x-clip overflow-y-visible rounded-md border shadow",
+          "h-[--kb-navigation-menu-viewport-height] w-[--kb-navigation-menu-viewport-width] transition-[width,height] duration-300",
+          "origin-[--kb-menu-content-transform-origin]",
+          "data-[expanded]:animate-in data-[expanded]:fade-in data-[expanded]:zoom-in-95 data-[expanded]:duration-300",
+          "data-[closed]:animate-out data-[closed]:fade-out data-[closed]:zoom-out-95 data-[closed]:duration-300"
+        )}
+      >
+        <Show when={local.withArrow}>
+          <NavigationMenuPrimitive.Arrow class="transition-transform duration-300" />
+        </Show>
+      </NavigationMenuPrimitive.Viewport>
+    </NavigationMenuPrimitive>
+  )
+}
 
 type navigationMenuTriggerProps<T extends ValidComponent = "button"> =
-	ParentProps<
-		NavigationMenuTriggerProps<T> &
-			withArrow & {
-				class?: string;
-			}
-	>;
+  ParentProps<
+    NavigationMenuTriggerProps<T> &
+      withArrow & {
+        class?: string
+      }
+  >
 
 export const NavigationMenuTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, navigationMenuTriggerProps<T>>,
+  props: PolymorphicProps<T, navigationMenuTriggerProps<T>>
 ) => {
-	const merge = mergeProps<navigationMenuTriggerProps<T>[]>(
-		{
-			get withArrow() {
-				return props.as === undefined ? true : props.withArrow;
-			},
-		},
-		props,
-	);
-	const [local, rest] = splitProps(merge as navigationMenuTriggerProps, [
-		"class",
-		"children",
-		"withArrow",
-	]);
+  const merge = mergeProps<navigationMenuTriggerProps<T>[]>(
+    {
+      get withArrow() {
+        return props.as === undefined ? true : props.withArrow
+      },
+    },
+    props
+  )
+  const [local, rest] = splitProps(merge as navigationMenuTriggerProps, [
+    "class",
+    "children",
+    "withArrow",
+  ])
 
-	return (
-		<NavigationMenuPrimitive.Trigger
-			class={cn(
-				"inline-flex w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium outline-none transition-colors duration-300 hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<Show when={local.withArrow}>
-				<NavigationMenuPrimitive.Icon
-					class="ml-1 size-3 transition-transform duration-300 data-[expanded]:rotate-180"
-					as="svg"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m6 9l6 6l6-6"
-					/>
-				</NavigationMenuPrimitive.Icon>
-			</Show>
-		</NavigationMenuPrimitive.Trigger>
-	);
-};
+  return (
+    <NavigationMenuPrimitive.Trigger
+      class={cn(
+        "bg-background hover:bg-accent hover:text-accent-foreground inline-flex w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-colors duration-300 disabled:pointer-events-none disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Show when={local.withArrow}>
+        <NavigationMenuPrimitive.Icon
+          class="ml-1 size-3 transition-transform duration-300 data-[expanded]:rotate-180"
+          as="svg"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m6 9l6 6l6-6"
+          />
+        </NavigationMenuPrimitive.Icon>
+      </Show>
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
 
 type navigationMenuContentProps<T extends ValidComponent = "ul"> = ParentProps<
-	NavigationMenuContentProps<T> & {
-		class?: string;
-	}
->;
+  NavigationMenuContentProps<T> & {
+    class?: string
+  }
+>
 
 export const NavigationMenuContent = <T extends ValidComponent = "ul">(
-	props: PolymorphicProps<T, navigationMenuContentProps<T>>,
+  props: PolymorphicProps<T, navigationMenuContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as navigationMenuContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as navigationMenuContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<NavigationMenuPrimitive.Portal>
-			<NavigationMenuPrimitive.Content
-				class={cn(
-					"absolute left-0 top-0 p-4 outline-none",
-					"data-[motion^=from-]:duration-300 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
-					"data-[motion^=to-]:duration-300 data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</NavigationMenuPrimitive.Content>
-		</NavigationMenuPrimitive.Portal>
-	);
-};
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Content
+        class={cn(
+          "absolute left-0 top-0 p-4 outline-none",
+          "data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion^=from-]:duration-300",
+          "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=to-]:duration-300",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </NavigationMenuPrimitive.Content>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/number-field.tsx b/docs/src/registry/tailwindcss/ui/number-field.tsx
index 52991dfb..1a4bc45b 100644
--- a/docs/src/registry/tailwindcss/ui/number-field.tsx
+++ b/docs/src/registry/tailwindcss/ui/number-field.tsx
@@ -1,214 +1,220 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	NumberFieldDecrementTriggerProps,
-	NumberFieldDescriptionProps,
-	NumberFieldErrorMessageProps,
-	NumberFieldIncrementTriggerProps,
-	NumberFieldInputProps,
-	NumberFieldLabelProps,
-	NumberFieldRootProps,
-} from "@kobalte/core/number-field";
-import { NumberField as NumberFieldPrimitive } from "@kobalte/core/number-field";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-import { textfieldLabel } from "./textfield";
-
-export const NumberFieldHiddenInput = NumberFieldPrimitive.HiddenInput;
+import {
+  splitProps,
+  type ComponentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  NumberField as NumberFieldPrimitive,
+  type NumberFieldDecrementTriggerProps,
+  type NumberFieldDescriptionProps,
+  type NumberFieldErrorMessageProps,
+  type NumberFieldIncrementTriggerProps,
+  type NumberFieldInputProps,
+  type NumberFieldLabelProps,
+  type NumberFieldRootProps,
+} from "@kobalte/core/number-field"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { textfieldLabel } from "./textfield"
+
+export const NumberFieldHiddenInput = NumberFieldPrimitive.HiddenInput
 
 type numberFieldLabelProps<T extends ValidComponent = "div"> =
-	NumberFieldLabelProps<T> & {
-		class?: string;
-	};
+  NumberFieldLabelProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldLabelProps<T>>,
+  props: PolymorphicProps<T, numberFieldLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldLabelProps, ["class"]);
+  const [local, rest] = splitProps(props as numberFieldLabelProps, ["class"])
 
-	return (
-		<NumberFieldPrimitive.Label
-			class={cn(textfieldLabel({ label: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <NumberFieldPrimitive.Label
+      class={cn(textfieldLabel({ label: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldDescriptionProps<T extends ValidComponent = "div"> =
-	NumberFieldDescriptionProps<T> & {
-		class?: string;
-	};
+  NumberFieldDescriptionProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldDescription = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldDescriptionProps<T>>,
+  props: PolymorphicProps<T, numberFieldDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldDescriptionProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.Description
-			class={cn(
-				textfieldLabel({ description: true, label: false }),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldDescriptionProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.Description
+      class={cn(
+        textfieldLabel({ description: true, label: false }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldErrorMessageProps<T extends ValidComponent = "div"> =
-	NumberFieldErrorMessageProps<T> & {
-		class?: string;
-	};
+  NumberFieldErrorMessageProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldErrorMessage = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldErrorMessageProps<T>>,
+  props: PolymorphicProps<T, numberFieldErrorMessageProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldErrorMessageProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.ErrorMessage
-			class={cn(textfieldLabel({ error: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldErrorMessageProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.ErrorMessage
+      class={cn(textfieldLabel({ error: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldProps<T extends ValidComponent = "div"> =
-	NumberFieldRootProps<T> & {
-		class?: string;
-	};
+  NumberFieldRootProps<T> & {
+    class?: string
+  }
 
 export const NumberField = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldProps<T>>,
+  props: PolymorphicProps<T, numberFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldProps, ["class"]);
+  const [local, rest] = splitProps(props as numberFieldProps, ["class"])
 
-	return (
-		<NumberFieldPrimitive class={cn("grid gap-1.5", local.class)} {...rest} />
-	);
-};
+  return (
+    <NumberFieldPrimitive class={cn("grid gap-1.5", local.class)} {...rest} />
+  )
+}
 
 export const NumberFieldGroup = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"relative rounded-md transition-shadow focus-within:outline-none focus-within:ring-[1.5px] focus-within:ring-ring",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "focus-within:ring-ring relative rounded-md transition-shadow focus-within:outline-none focus-within:ring-[1.5px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldInputProps<T extends ValidComponent = "input"> =
-	NumberFieldInputProps<T> & {
-		class?: string;
-	};
+  NumberFieldInputProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldInput = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, VoidProps<numberFieldInputProps<T>>>,
+  props: PolymorphicProps<T, VoidProps<numberFieldInputProps<T>>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldInputProps, ["class"]);
-
-	return (
-		<NumberFieldPrimitive.Input
-			class={cn(
-				"flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-center text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldInputProps, ["class"])
+
+  return (
+    <NumberFieldPrimitive.Input
+      class={cn(
+        "border-input placeholder:text-muted-foreground flex h-9 w-full rounded-md border bg-transparent px-10 py-1 text-center text-sm shadow-sm focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldDecrementTriggerProps<T extends ValidComponent = "button"> =
-	VoidProps<
-		NumberFieldDecrementTriggerProps<T> & {
-			class?: string;
-		}
-	>;
+  VoidProps<
+    NumberFieldDecrementTriggerProps<T> & {
+      class?: string
+    }
+  >
 
 export const NumberFieldDecrementTrigger = <
-	T extends ValidComponent = "button",
+  T extends ValidComponent = "button",
 >(
-	props: PolymorphicProps<T, VoidProps<numberFieldDecrementTriggerProps<T>>>,
+  props: PolymorphicProps<T, VoidProps<numberFieldDecrementTriggerProps<T>>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldDecrementTriggerProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.DecrementTrigger
-			class={cn(
-				"absolute left-0 top-1/2 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14"
-				/>
-				<title>Decreasing number</title>
-			</svg>
-		</NumberFieldPrimitive.DecrementTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldDecrementTriggerProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.DecrementTrigger
+      class={cn(
+        "absolute left-0 top-1/2 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14"
+        />
+        <title>Decreasing number</title>
+      </svg>
+    </NumberFieldPrimitive.DecrementTrigger>
+  )
+}
 
 type numberFieldIncrementTriggerProps<T extends ValidComponent = "button"> =
-	VoidProps<
-		NumberFieldIncrementTriggerProps<T> & {
-			class?: string;
-		}
-	>;
+  VoidProps<
+    NumberFieldIncrementTriggerProps<T> & {
+      class?: string
+    }
+  >
 
 export const NumberFieldIncrementTrigger = <
-	T extends ValidComponent = "button",
+  T extends ValidComponent = "button",
 >(
-	props: PolymorphicProps<T, numberFieldIncrementTriggerProps<T>>,
+  props: PolymorphicProps<T, numberFieldIncrementTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldIncrementTriggerProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.IncrementTrigger
-			class={cn(
-				"absolute right-0 top-1/2 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 5v14m-7-7h14"
-				/>
-				<title>Increase number</title>
-			</svg>
-		</NumberFieldPrimitive.IncrementTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldIncrementTriggerProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.IncrementTrigger
+      class={cn(
+        "absolute right-0 top-1/2 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 5v14m-7-7h14"
+        />
+        <title>Increase number</title>
+      </svg>
+    </NumberFieldPrimitive.IncrementTrigger>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/otp-field.tsx b/docs/src/registry/tailwindcss/ui/otp-field.tsx
index 8ec063cf..608674f9 100644
--- a/docs/src/registry/tailwindcss/ui/otp-field.tsx
+++ b/docs/src/registry/tailwindcss/ui/otp-field.tsx
@@ -1,83 +1,90 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { DynamicProps, RootProps } from "@corvu/otp-field";
-import OTPFieldPrimitive from "@corvu/otp-field";
-import type { ComponentProps, ValidComponent } from "solid-js";
-import { Show, splitProps } from "solid-js";
+import {
+  Show,
+  splitProps,
+  type ComponentProps,
+  type ValidComponent,
+} from "solid-js"
+import OTPFieldPrimitive, {
+  type DynamicProps,
+  type RootProps,
+} from "@corvu/otp-field"
 
-export const OTPFieldInput = OTPFieldPrimitive.Input;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const OTPFieldInput = OTPFieldPrimitive.Input
 
 type OTPFieldProps<T extends ValidComponent = "div"> = RootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const OTPField = <T extends ValidComponent = "div">(
-	props: DynamicProps<T, OTPFieldProps<T>>,
+  props: DynamicProps<T, OTPFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<OTPFieldPrimitive
-			class={cn(
-				"flex items-center gap-2 has-[:disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <OTPFieldPrimitive
+      class={cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const OTPFieldGroup = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return <div class={cn("flex items-center", local.class)} {...rest} />;
-};
+  return <div class={cn("flex items-center", local.class)} {...rest} />
+}
 
 export const OTPFieldSeparator = (props: ComponentProps<"div">) => {
-	return (
-		// biome-ignore lint/a11y/useSemanticElements:
-		<div role="separator" tabIndex={0} {...props}>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 15 15"
-			>
-				<title>Separator</title>
-				<path
-					fill="currentColor"
-					fill-rule="evenodd"
-					d="M5 7.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-	);
-};
+  return (
+    // biome-ignore lint/a11y/useSemanticElements:
+    <div role="separator" tabIndex={0} {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 15 15"
+      >
+        <title>Separator</title>
+        <path
+          fill="currentColor"
+          fill-rule="evenodd"
+          d="M5 7.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  )
+}
 
 export const OTPFieldSlot = (
-	props: ComponentProps<"div"> & { index: number },
+  props: ComponentProps<"div"> & { index: number }
 ) => {
-	const [local, rest] = splitProps(props, ["class", "index"]);
-	const context = OTPFieldPrimitive.useContext();
-	const char = () => context.value()[local.index];
-	const hasFakeCaret = () =>
-		context.value().length === local.index && context.isInserting();
-	const isActive = () => context.activeSlots().includes(local.index);
+  const [local, rest] = splitProps(props, ["class", "index"])
+  const context = OTPFieldPrimitive.useContext()
+  const char = () => context.value()[local.index]
+  const hasFakeCaret = () =>
+    context.value().length === local.index && context.isInserting()
+  const isActive = () => context.activeSlots().includes(local.index)
 
-	return (
-		<div
-			class={cn(
-				"relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-shadow first:rounded-l-md first:border-l last:rounded-r-md",
-				isActive() && "z-10 ring-[1.5px] ring-ring",
-				local.class,
-			)}
-			{...rest}
-		>
-			{char()}
-			<Show when={hasFakeCaret()}>
-				<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-					<div class="h-4 w-px animate-caret-blink bg-foreground" />
-				</div>
-			</Show>
-		</div>
-	);
-};
+  return (
+    <div
+      class={cn(
+        "border-input relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-shadow first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive() && "ring-ring z-10 ring-[1.5px]",
+        local.class
+      )}
+      {...rest}
+    >
+      {char()}
+      <Show when={hasFakeCaret()}>
+        <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div class="animate-caret-blink bg-foreground h-4 w-px" />
+        </div>
+      </Show>
+    </div>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/pagination.tsx b/docs/src/registry/tailwindcss/ui/pagination.tsx
index 826608d6..02fc792e 100644
--- a/docs/src/registry/tailwindcss/ui/pagination.tsx
+++ b/docs/src/registry/tailwindcss/ui/pagination.tsx
@@ -1,194 +1,200 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type {
-	PaginationEllipsisProps,
-	PaginationItemProps,
-	PaginationPreviousProps,
-	PaginationRootProps,
-} from "@kobalte/core/pagination";
-import { Pagination as PaginationPrimitive } from "@kobalte/core/pagination";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { VariantProps } from "class-variance-authority";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-import { buttonVariants } from "./button";
-
-export const PaginationItems = PaginationPrimitive.Items;
+import {
+  mergeProps,
+  splitProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  Pagination as PaginationPrimitive,
+  type PaginationEllipsisProps,
+  type PaginationItemProps,
+  type PaginationPreviousProps,
+  type PaginationRootProps,
+} from "@kobalte/core/pagination"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import type { VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { buttonVariants } from "./button"
+
+export const PaginationItems = PaginationPrimitive.Items
 
 type paginationProps<T extends ValidComponent = "nav"> =
-	PaginationRootProps<T> & {
-		class?: string;
-	};
+  PaginationRootProps<T> & {
+    class?: string
+  }
 
 export const Pagination = <T extends ValidComponent = "nav">(
-	props: PolymorphicProps<T, paginationProps<T>>,
+  props: PolymorphicProps<T, paginationProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as paginationProps, ["class"]);
-
-	return (
-		<PaginationPrimitive
-			class={cn(
-				"mx-auto flex w-full justify-center [&>ul]:flex [&>ul]:flex-row [&>ul]:items-center [&>ul]:gap-1",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as paginationProps, ["class"])
+
+  return (
+    <PaginationPrimitive
+      class={cn(
+        "mx-auto flex w-full justify-center [&>ul]:flex [&>ul]:flex-row [&>ul]:items-center [&>ul]:gap-1",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type paginationItemProps<T extends ValidComponent = "button"> =
-	PaginationItemProps<T> &
-		Pick<VariantProps<typeof buttonVariants>, "size"> & {
-			class?: string;
-		};
+  PaginationItemProps<T> &
+    Pick<VariantProps<typeof buttonVariants>, "size"> & {
+      class?: string
+    }
 
 export const PaginationItem = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, paginationItemProps<T>>,
+  props: PolymorphicProps<T, paginationItemProps<T>>
 ) => {
-	// @ts-expect-error - required `page`
-	const merge = mergeProps<paginationItemProps[]>({ size: "icon" }, props);
-	const [local, rest] = splitProps(merge as paginationItemProps, [
-		"class",
-		"size",
-	]);
-
-	return (
-		<PaginationPrimitive.Item
-			class={cn(
-				buttonVariants({
-					variant: "ghost",
-					size: local.size,
-				}),
-				"aria-[current=page]:border aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:shadow-sm aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  // @ts-expect-error - required `page`
+  const merge = mergeProps<paginationItemProps[]>({ size: "icon" }, props)
+  const [local, rest] = splitProps(merge as paginationItemProps, [
+    "class",
+    "size",
+  ])
+
+  return (
+    <PaginationPrimitive.Item
+      class={cn(
+        buttonVariants({
+          variant: "ghost",
+          size: local.size,
+        }),
+        "aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground aria-[current=page]:border aria-[current=page]:shadow-sm",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type paginationEllipsisProps<T extends ValidComponent = "div"> = VoidProps<
-	PaginationEllipsisProps<T> & {
-		class?: string;
-	}
->;
+  PaginationEllipsisProps<T> & {
+    class?: string
+  }
+>
 
 export const PaginationEllipsis = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, paginationEllipsisProps<T>>,
+  props: PolymorphicProps<T, paginationEllipsisProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as paginationEllipsisProps, ["class"]);
-
-	return (
-		<PaginationPrimitive.Ellipsis
-			class={cn("flex h-9 w-9 items-center justify-center", local.class)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
-				/>
-				<title>More pages</title>
-			</svg>
-		</PaginationPrimitive.Ellipsis>
-	);
-};
+  const [local, rest] = splitProps(props as paginationEllipsisProps, ["class"])
+
+  return (
+    <PaginationPrimitive.Ellipsis
+      class={cn("flex h-9 w-9 items-center justify-center", local.class)}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+        />
+        <title>More pages</title>
+      </svg>
+    </PaginationPrimitive.Ellipsis>
+  )
+}
 
 type paginationPreviousProps<T extends ValidComponent = "button"> =
-	PaginationPreviousProps<T> &
-		Pick<VariantProps<typeof buttonVariants>, "size"> & {
-			class?: string;
-		};
+  PaginationPreviousProps<T> &
+    Pick<VariantProps<typeof buttonVariants>, "size"> & {
+      class?: string
+    }
 
 export const PaginationPrevious = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, paginationPreviousProps<T>>,
+  props: PolymorphicProps<T, paginationPreviousProps<T>>
 ) => {
-	const merge = mergeProps<paginationPreviousProps<T>[]>(
-		{ size: "icon" },
-		props,
-	);
-	const [local, rest] = splitProps(merge as paginationPreviousProps, [
-		"class",
-		"size",
-	]);
-
-	return (
-		<PaginationPrimitive.Previous
-			class={cn(
-				buttonVariants({
-					variant: "ghost",
-					size: local.size,
-				}),
-				"aria-[current=page]:border aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:shadow-sm aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m15 6l-6 6l6 6"
-				/>
-				<title>Previous page</title>
-			</svg>
-		</PaginationPrimitive.Previous>
-	);
-};
+  const merge = mergeProps<paginationPreviousProps<T>[]>(
+    { size: "icon" },
+    props
+  )
+  const [local, rest] = splitProps(merge as paginationPreviousProps, [
+    "class",
+    "size",
+  ])
+
+  return (
+    <PaginationPrimitive.Previous
+      class={cn(
+        buttonVariants({
+          variant: "ghost",
+          size: local.size,
+        }),
+        "aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground aria-[current=page]:border aria-[current=page]:shadow-sm",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m15 6l-6 6l6 6"
+        />
+        <title>Previous page</title>
+      </svg>
+    </PaginationPrimitive.Previous>
+  )
+}
 
 type paginationNextProps<T extends ValidComponent = "button"> =
-	paginationPreviousProps<T>;
+  paginationPreviousProps<T>
 
 export const PaginationNext = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, paginationNextProps<T>>,
+  props: PolymorphicProps<T, paginationNextProps<T>>
 ) => {
-	const merge = mergeProps<paginationNextProps<T>[]>({ size: "icon" }, props);
-	const [local, rest] = splitProps(merge as paginationNextProps, [
-		"class",
-		"size",
-	]);
-
-	return (
-		<PaginationPrimitive.Next
-			class={cn(
-				buttonVariants({
-					variant: "ghost",
-					size: local.size,
-				}),
-				"aria-[current=page]:border aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:shadow-sm aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Next page</title>
-			</svg>
-		</PaginationPrimitive.Next>
-	);
-};
+  const merge = mergeProps<paginationNextProps<T>[]>({ size: "icon" }, props)
+  const [local, rest] = splitProps(merge as paginationNextProps, [
+    "class",
+    "size",
+  ])
+
+  return (
+    <PaginationPrimitive.Next
+      class={cn(
+        buttonVariants({
+          variant: "ghost",
+          size: local.size,
+        }),
+        "aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground aria-[current=page]:border aria-[current=page]:shadow-sm",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Next page</title>
+      </svg>
+    </PaginationPrimitive.Next>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/popover.tsx b/docs/src/registry/tailwindcss/ui/popover.tsx
index a9bd9f3a..73f236ec 100644
--- a/docs/src/registry/tailwindcss/ui/popover.tsx
+++ b/docs/src/registry/tailwindcss/ui/popover.tsx
@@ -1,71 +1,76 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	PopoverContentProps,
-	PopoverRootProps,
-} from "@kobalte/core/popover";
-import { Popover as PopoverPrimitive } from "@kobalte/core/popover";
-import type { ParentProps, ValidComponent } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
+import {
+  mergeProps,
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Popover as PopoverPrimitive,
+  type PopoverContentProps,
+  type PopoverRootProps,
+} from "@kobalte/core/popover"
 
-export const PopoverTrigger = PopoverPrimitive.Trigger;
-export const PopoverTitle = PopoverPrimitive.Title;
-export const PopoverDescription = PopoverPrimitive.Description;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverTitle = PopoverPrimitive.Title
+export const PopoverDescription = PopoverPrimitive.Description
 
 export const Popover = (props: PopoverRootProps) => {
-	const merge = mergeProps<PopoverRootProps[]>(
-		{
-			gutter: 4,
-			flip: false,
-		},
-		props,
-	);
+  const merge = mergeProps<PopoverRootProps[]>(
+    {
+      gutter: 4,
+      flip: false,
+    },
+    props
+  )
 
-	return <PopoverPrimitive {...merge} />;
-};
+  return <PopoverPrimitive {...merge} />
+}
 
 type popoverContentProps<T extends ValidComponent = "div"> = ParentProps<
-	PopoverContentProps<T> & {
-		class?: string;
-	}
->;
+  PopoverContentProps<T> & {
+    class?: string
+  }
+>
 
 export const PopoverContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, popoverContentProps<T>>,
+  props: PolymorphicProps<T, popoverContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as popoverContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as popoverContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<PopoverPrimitive.Portal>
-			<PopoverPrimitive.Content
-				class={cn(
-					"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<PopoverPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-[opacity,box-shadow] hover:opacity-100 focus:outline-none focus:ring-[1.5px] focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M18 6L6 18M6 6l12 12"
-						/>
-						<title>Close</title>
-					</svg>
-				</PopoverPrimitive.CloseButton>
-			</PopoverPrimitive.Content>
-		</PopoverPrimitive.Portal>
-	);
-};
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <PopoverPrimitive.CloseButton class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus:outline-none focus:ring-[1.5px] focus:ring-offset-2 disabled:pointer-events-none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18 6L6 18M6 6l12 12"
+            />
+            <title>Close</title>
+          </svg>
+        </PopoverPrimitive.CloseButton>
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/progress.tsx b/docs/src/registry/tailwindcss/ui/progress.tsx
index de1c5f96..873908f2 100644
--- a/docs/src/registry/tailwindcss/ui/progress.tsx
+++ b/docs/src/registry/tailwindcss/ui/progress.tsx
@@ -1,36 +1,38 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ProgressRootProps } from "@kobalte/core/progress";
-import { Progress as ProgressPrimitive } from "@kobalte/core/progress";
-import type { ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ParentProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Progress as ProgressPrimitive,
+  type ProgressRootProps,
+} from "@kobalte/core/progress"
 
-export const ProgressLabel = ProgressPrimitive.Label;
-export const ProgressValueLabel = ProgressPrimitive.ValueLabel;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const ProgressLabel = ProgressPrimitive.Label
+export const ProgressValueLabel = ProgressPrimitive.ValueLabel
 
 type progressProps<T extends ValidComponent = "div"> = ParentProps<
-	ProgressRootProps<T> & {
-		class?: string;
-	}
->;
+  ProgressRootProps<T> & {
+    class?: string
+  }
+>
 
 export const Progress = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, progressProps<T>>,
+  props: PolymorphicProps<T, progressProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as progressProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as progressProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ProgressPrimitive
-			class={cn("flex w-full flex-col gap-2", local.class)}
-			{...rest}
-		>
-			{local.children}
-			<ProgressPrimitive.Track class="h-2 overflow-hidden rounded-full bg-primary/20">
-				<ProgressPrimitive.Fill class="h-full w-[--kb-progress-fill-width] bg-primary transition-all duration-500 ease-linear data-[progress=complete]:bg-primary" />
-			</ProgressPrimitive.Track>
-		</ProgressPrimitive>
-	);
-};
+  return (
+    <ProgressPrimitive
+      class={cn("flex w-full flex-col gap-2", local.class)}
+      {...rest}
+    >
+      {local.children}
+      <ProgressPrimitive.Track class="bg-primary/20 h-2 overflow-hidden rounded-full">
+        <ProgressPrimitive.Fill class="bg-primary data-[progress=complete]:bg-primary h-full w-[--kb-progress-fill-width] transition-all duration-500 ease-linear" />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/radio-group.tsx b/docs/src/registry/tailwindcss/ui/radio-group.tsx
index f0638377..1bd7c91b 100644
--- a/docs/src/registry/tailwindcss/ui/radio-group.tsx
+++ b/docs/src/registry/tailwindcss/ui/radio-group.tsx
@@ -1,39 +1,41 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { RadioGroupItemControlProps } from "@kobalte/core/radio-group";
-import { RadioGroup as RadioGroupPrimitive } from "@kobalte/core/radio-group";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  RadioGroup as RadioGroupPrimitive,
+  type RadioGroupItemControlProps,
+} from "@kobalte/core/radio-group"
 
-export const RadioGroupDescription = RadioGroupPrimitive.Description;
-export const RadioGroupErrorMessage = RadioGroupPrimitive.ErrorMessage;
-export const RadioGroupItemDescription = RadioGroupPrimitive.ItemDescription;
-export const RadioGroupItemInput = RadioGroupPrimitive.ItemInput;
-export const RadioGroupItemLabel = RadioGroupPrimitive.ItemLabel;
-export const RadioGroupLabel = RadioGroupPrimitive.Label;
-export const RadioGroup = RadioGroupPrimitive;
-export const RadioGroupItem = RadioGroupPrimitive.Item;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const RadioGroupDescription = RadioGroupPrimitive.Description
+export const RadioGroupErrorMessage = RadioGroupPrimitive.ErrorMessage
+export const RadioGroupItemDescription = RadioGroupPrimitive.ItemDescription
+export const RadioGroupItemInput = RadioGroupPrimitive.ItemInput
+export const RadioGroupItemLabel = RadioGroupPrimitive.ItemLabel
+export const RadioGroupLabel = RadioGroupPrimitive.Label
+export const RadioGroup = RadioGroupPrimitive
+export const RadioGroupItem = RadioGroupPrimitive.Item
 
 type radioGroupItemControlProps<T extends ValidComponent = "div"> = VoidProps<
-	RadioGroupItemControlProps<T> & { class?: string }
->;
+  RadioGroupItemControlProps<T> & { class?: string }
+>
 
 export const RadioGroupItemControl = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, radioGroupItemControlProps<T>>,
+  props: PolymorphicProps<T, radioGroupItemControlProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as radioGroupItemControlProps, [
-		"class",
-	]);
+  const [local, rest] = splitProps(props as radioGroupItemControlProps, [
+    "class",
+  ])
 
-	return (
-		<RadioGroupPrimitive.ItemControl
-			class={cn(
-				"flex aspect-square h-4 w-4 items-center justify-center rounded-full border border-primary text-primary shadow transition-shadow focus:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-foreground",
-				local.class,
-			)}
-			{...rest}
-		>
-			<RadioGroupPrimitive.ItemIndicator class="h-2 w-2 rounded-full data-[checked]:bg-background" />
-		</RadioGroupPrimitive.ItemControl>
-	);
-};
+  return (
+    <RadioGroupPrimitive.ItemControl
+      class={cn(
+        "border-primary text-primary focus-visible:ring-ring data-[checked]:bg-foreground flex aspect-square h-4 w-4 items-center justify-center rounded-full border shadow transition-shadow focus:outline-none focus-visible:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <RadioGroupPrimitive.ItemIndicator class="data-[checked]:bg-background h-2 w-2 rounded-full" />
+    </RadioGroupPrimitive.ItemControl>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/resizable.tsx b/docs/src/registry/tailwindcss/ui/resizable.tsx
index 552d4e70..ca46fd11 100644
--- a/docs/src/registry/tailwindcss/ui/resizable.tsx
+++ b/docs/src/registry/tailwindcss/ui/resizable.tsx
@@ -1,63 +1,66 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { DynamicProps, HandleProps, RootProps } from "@corvu/resizable";
-import ResizablePrimitive from "@corvu/resizable";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { Show, splitProps } from "solid-js";
+import { Show, splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import ResizablePrimitive, {
+  type DynamicProps,
+  type HandleProps,
+  type RootProps,
+} from "@corvu/resizable"
 
-export const ResizablePanel = ResizablePrimitive.Panel;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const ResizablePanel = ResizablePrimitive.Panel
 
 type resizableProps<T extends ValidComponent = "div"> = RootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const Resizable = <T extends ValidComponent = "div">(
-	props: DynamicProps<T, resizableProps<T>>,
+  props: DynamicProps<T, resizableProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as resizableProps, ["class"]);
+  const [local, rest] = splitProps(props as resizableProps, ["class"])
 
-	return <ResizablePrimitive class={cn("size-full", local.class)} {...rest} />;
-};
+  return <ResizablePrimitive class={cn("size-full", local.class)} {...rest} />
+}
 
 type resizableHandleProps<T extends ValidComponent = "button"> = VoidProps<
-	HandleProps<T> & {
-		class?: string;
-		withHandle?: boolean;
-	}
->;
+  HandleProps<T> & {
+    class?: string
+    withHandle?: boolean
+  }
+>
 
 export const ResizableHandle = <T extends ValidComponent = "button">(
-	props: DynamicProps<T, resizableHandleProps<T>>,
+  props: DynamicProps<T, resizableHandleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as resizableHandleProps, [
-		"class",
-		"withHandle",
-	]);
-
-	return (
-		<ResizablePrimitive.Handle
-			class={cn(
-				"flex w-px items-center justify-center bg-border transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full",
-				local.class,
-			)}
-			{...rest}
-		>
-			<Show when={local.withHandle}>
-				<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-2.5 w-2.5"
-						viewBox="0 0 15 15"
-					>
-						<path
-							fill="currentColor"
-							fill-rule="evenodd"
-							d="M5.5 4.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m4 0a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25M10.625 7.5a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 8.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m5.125 2.875a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 12.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25"
-							clip-rule="evenodd"
-						/>
-						<title>Resizable handle</title>
-					</svg>
-				</div>
-			</Show>
-		</ResizablePrimitive.Handle>
-	);
-};
+  const [local, rest] = splitProps(props as resizableHandleProps, [
+    "class",
+    "withHandle",
+  ])
+
+  return (
+    <ResizablePrimitive.Handle
+      class={cn(
+        "bg-border focus-visible:ring-ring flex w-px items-center justify-center transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full",
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={local.withHandle}>
+        <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-2.5 w-2.5"
+            viewBox="0 0 15 15"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M5.5 4.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m4 0a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25M10.625 7.5a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 8.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m5.125 2.875a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 12.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25"
+              clip-rule="evenodd"
+            />
+            <title>Resizable handle</title>
+          </svg>
+        </div>
+      </Show>
+    </ResizablePrimitive.Handle>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/select.tsx b/docs/src/registry/tailwindcss/ui/select.tsx
index eabb2018..85f6a811 100644
--- a/docs/src/registry/tailwindcss/ui/select.tsx
+++ b/docs/src/registry/tailwindcss/ui/select.tsx
@@ -1,127 +1,127 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	SelectContentProps,
-	SelectItemProps,
-	SelectTriggerProps,
-} from "@kobalte/core/select";
-import { Select as SelectPrimitive } from "@kobalte/core/select";
-import type { ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ParentProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Select as SelectPrimitive,
+  type SelectContentProps,
+  type SelectItemProps,
+  type SelectTriggerProps,
+} from "@kobalte/core/select"
 
-export const Select = SelectPrimitive;
-export const SelectValue = SelectPrimitive.Value;
-export const SelectDescription = SelectPrimitive.Description;
-export const SelectErrorMessage = SelectPrimitive.ErrorMessage;
-export const SelectItemDescription = SelectPrimitive.ItemDescription;
-export const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
-export const SelectSection = SelectPrimitive.Section;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const Select = SelectPrimitive
+export const SelectValue = SelectPrimitive.Value
+export const SelectDescription = SelectPrimitive.Description
+export const SelectErrorMessage = SelectPrimitive.ErrorMessage
+export const SelectItemDescription = SelectPrimitive.ItemDescription
+export const SelectHiddenSelect = SelectPrimitive.HiddenSelect
+export const SelectSection = SelectPrimitive.Section
 
 type selectTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	SelectTriggerProps<T> & { class?: string }
->;
+  SelectTriggerProps<T> & { class?: string }
+>
 
 export const SelectTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, selectTriggerProps<T>>,
+  props: PolymorphicProps<T, selectTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as selectTriggerProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as selectTriggerProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<SelectPrimitive.Trigger
-			class={cn(
-				"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background transition-shadow placeholder:text-muted-foreground focus:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<SelectPrimitive.Icon
-				as="svg"
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-				class="flex size-4 items-center justify-center opacity-50"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-				/>
-			</SelectPrimitive.Icon>
-		</SelectPrimitive.Trigger>
-	);
-};
+  return (
+    <SelectPrimitive.Trigger
+      class={cn(
+        "border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-shadow focus:outline-none focus-visible:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <SelectPrimitive.Icon
+        as="svg"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="flex size-4 items-center justify-center opacity-50"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+        />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
 
 type selectContentProps<T extends ValidComponent = "div"> =
-	SelectContentProps<T> & {
-		class?: string;
-	};
+  SelectContentProps<T> & {
+    class?: string
+  }
 
 export const SelectContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, selectContentProps<T>>,
+  props: PolymorphicProps<T, selectContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as selectContentProps, ["class"]);
+  const [local, rest] = splitProps(props as selectContentProps, ["class"])
 
-	return (
-		<SelectPrimitive.Portal>
-			<SelectPrimitive.Content
-				class={cn(
-					"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			>
-				<SelectPrimitive.Listbox class="p-1 focus-visible:outline-none" />
-			</SelectPrimitive.Content>
-		</SelectPrimitive.Portal>
-	);
-};
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          local.class
+        )}
+        {...rest}
+      >
+        <SelectPrimitive.Listbox class="p-1 focus-visible:outline-none" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
 
 type selectItemProps<T extends ValidComponent = "li"> = ParentProps<
-	SelectItemProps<T> & { class?: string }
->;
+  SelectItemProps<T> & { class?: string }
+>
 
 export const SelectItem = <T extends ValidComponent = "li">(
-	props: PolymorphicProps<T, selectItemProps<T>>,
+  props: PolymorphicProps<T, selectItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as selectItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as selectItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<SelectPrimitive.Item
-			class={cn(
-				"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			<SelectPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checked</title>
-				</svg>
-			</SelectPrimitive.ItemIndicator>
-			<SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
-		</SelectPrimitive.Item>
-	);
-};
+  return (
+    <SelectPrimitive.Item
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <SelectPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checked</title>
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
+    </SelectPrimitive.Item>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/separator.tsx b/docs/src/registry/tailwindcss/ui/separator.tsx
index f94447be..6760fa1d 100644
--- a/docs/src/registry/tailwindcss/ui/separator.tsx
+++ b/docs/src/registry/tailwindcss/ui/separator.tsx
@@ -1,27 +1,29 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { SeparatorRootProps } from "@kobalte/core/separator";
-import { Separator as SeparatorPrimitive } from "@kobalte/core/separator";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Separator as SeparatorPrimitive,
+  type SeparatorRootProps,
+} from "@kobalte/core/separator"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export type separatorProps<T extends ValidComponent = "hr"> =
-	SeparatorRootProps<T> & {
-		class?: string;
-	};
+  SeparatorRootProps<T> & {
+    class?: string
+  }
 
 export const Separator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, separatorProps<T>>,
+  props: PolymorphicProps<T, separatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as separatorProps, ["class"]);
+  const [local, rest] = splitProps(props as separatorProps, ["class"])
 
-	return (
-		<SeparatorPrimitive
-			class={cn(
-				"shrink-0 bg-border data-[orientation=horizontal]:h-[1px] data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <SeparatorPrimitive
+      class={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-[1px] data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/sidebar.tsx b/docs/src/registry/tailwindcss/ui/sidebar.tsx
index f45ce34f..d9b989fb 100644
--- a/docs/src/registry/tailwindcss/ui/sidebar.tsx
+++ b/docs/src/registry/tailwindcss/ui/sidebar.tsx
@@ -1,775 +1,773 @@
-import { useIsMobile } from "@/registry/tailwindcss/hooks/use-mobile";
-import { callHandler } from "@/registry/tailwindcss/libs/call-handler";
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { combineStyle } from "@/registry/tailwindcss/libs/combine-props";
 import {
-	type ElementOf,
-	Polymorphic,
-	type PolymorphicProps,
-} from "@kobalte/core/polymorphic";
-import type { TooltipContentProps } from "@kobalte/core/tooltip";
-import { type VariantProps, cva } from "class-variance-authority";
+  Match,
+  Show,
+  Switch,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  mergeProps,
+  onCleanup,
+  splitProps,
+  useContext,
+  type Accessor,
+  type ComponentProps,
+  type JSX,
+  type ValidComponent,
+} from "solid-js"
 import {
-	type Accessor,
-	type ComponentProps,
-	type JSX,
-	Match,
-	Show,
-	Switch,
-	type ValidComponent,
-	createContext,
-	createEffect,
-	createMemo,
-	createSignal,
-	mergeProps,
-	onCleanup,
-	splitProps,
-	useContext,
-} from "solid-js";
-import { Button, type buttonProps } from "./button";
-import { Drawer, DrawerContent } from "./drawer";
-import { Separator, type separatorProps } from "./separator";
-import { Skeleton } from "./skeleton";
-import {
-	TextField,
-	TextFieldRoot,
-	type textFieldInputProps,
-} from "./textfield";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+  Polymorphic,
+  type ElementOf,
+  type PolymorphicProps,
+} from "@kobalte/core/polymorphic"
+import type { TooltipContentProps } from "@kobalte/core/tooltip"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { useIsMobile } from "@/registry/tailwindcss/hooks/use-mobile"
+import { callHandler } from "@/registry/tailwindcss/libs/call-handler"
+import { cn } from "@/registry/tailwindcss/libs/cn"
+import { combineStyle } from "@/registry/tailwindcss/libs/combine-props"
+
+import { Button, type buttonProps } from "./button"
+import { Drawer, DrawerContent } from "./drawer"
+import { Separator, type separatorProps } from "./separator"
+import { Skeleton } from "./skeleton"
+import { TextField, TextFieldRoot, type textFieldInputProps } from "./textfield"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContext = {
-	state: Accessor<"expanded" | "collapsed">;
-	open: Accessor<boolean>;
-	setOpen: (value: boolean) => void;
-	openMobile: Accessor<boolean>;
-	setOpenMobile: (open: boolean) => void;
-	isMobile: Accessor<boolean>;
-	toggleSidebar: () => void;
-};
+  state: Accessor<"expanded" | "collapsed">
+  open: Accessor<boolean>
+  setOpen: (value: boolean) => void
+  openMobile: Accessor<boolean>
+  setOpenMobile: (open: boolean) => void
+  isMobile: Accessor<boolean>
+  toggleSidebar: () => void
+}
 
-const SidebarContext = createContext<SidebarContext>();
+const SidebarContext = createContext<SidebarContext>()
 
 export const useSideBar = () => {
-	const context = useContext(SidebarContext);
+  const context = useContext(SidebarContext)
 
-	if (context === undefined) {
-		throw new Error(
-			"`useSidebar` must be used within a `SidebarProvider` component.",
-		);
-	}
+  if (context === undefined) {
+    throw new Error(
+      "`useSidebar` must be used within a `SidebarProvider` component."
+    )
+  }
 
-	return context;
-};
+  return context
+}
 
 type sidebarProviderProps = ComponentProps<"div"> & {
-	defaultOpen?: boolean;
-	open?: boolean;
-	onOpenChange?: (open: boolean) => void;
-};
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
 
 export const SidebarProvider = (props: sidebarProviderProps) => {
-	const merge = mergeProps(
-		{
-			defaultOpen: true,
-		} as sidebarProviderProps,
-		props,
-	);
-	const [local, rest] = splitProps(merge, [
-		"defaultOpen",
-		"open",
-		"onOpenChange",
-		"class",
-		"style",
-		"children",
-	]);
-
-	const isMobile = useIsMobile();
-	const [openMobile, setOpenMobile] = createSignal(false);
-
-	// This is the internal state of the sidebar.
-	// We use open and onOpenChange for control from outside the component.
-	const [_open, _setOpen] = createSignal(local.defaultOpen!);
-	const open = () => local.open ?? _open();
-	const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
-		const openState = typeof value === "function" ? value(open()) : value;
-		if (local.onOpenChange) {
-			local.onOpenChange(openState);
-		} else {
-			_setOpen(openState);
-		}
-
-		// This sets the cookie to keep the sidebar state.
-		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-	};
-
-	// Helper to toggle the sidebar.
-	const toggleSidebar = () => {
-		if (isMobile()) {
-			setOpenMobile((open) => !open);
-		} else {
-			setOpen((open) => !open);
-		}
-	};
-
-	// Adds a keyboard shortcut to toggle the sidebar.
-	createEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (
-				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-				(event.metaKey || event.ctrlKey)
-			) {
-				event.preventDefault();
-				toggleSidebar();
-			}
-		};
-
-		window.addEventListener("keydown", handleKeyDown);
-
-		onCleanup(() => {
-			window.removeEventListener("keydown", handleKeyDown);
-		});
-	});
-
-	// We add a state so that we can do data-state="expanded" or "collapsed".
-	// This makes it easier to style the sidebar with Tailwind classes.
-	const state = () => (open() ? "expanded" : "collapsed");
-
-	const contextValue: SidebarContext = {
-		state,
-		open,
-		setOpen,
-		isMobile,
-		openMobile,
-		setOpenMobile,
-		toggleSidebar,
-	};
-
-	return (
-		<SidebarContext.Provider value={contextValue}>
-			<div
-				style={combineStyle(
-					{
-						"--sidebar-width": SIDEBAR_WIDTH,
-						"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-					},
-					local.style,
-				)}
-				class={cn(
-					"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</div>
-		</SidebarContext.Provider>
-	);
-};
+  const merge = mergeProps(
+    {
+      defaultOpen: true,
+    } as sidebarProviderProps,
+    props
+  )
+  const [local, rest] = splitProps(merge, [
+    "defaultOpen",
+    "open",
+    "onOpenChange",
+    "class",
+    "style",
+    "children",
+  ])
+
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = createSignal(false)
+
+  // This is the internal state of the sidebar.
+  // We use open and onOpenChange for control from outside the component.
+  const [_open, _setOpen] = createSignal(local.defaultOpen!)
+  const open = () => local.open ?? _open()
+  const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === "function" ? value(open()) : value
+    if (local.onOpenChange) {
+      local.onOpenChange(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  }
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = () => {
+    if (isMobile()) {
+      setOpenMobile((open) => !open)
+    } else {
+      setOpen((open) => !open)
+    }
+  }
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  createEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = () => (open() ? "expanded" : "collapsed")
+
+  const contextValue: SidebarContext = {
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+  }
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        style={combineStyle(
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+          },
+          local.style
+        )}
+        class={cn(
+          "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
 
 type sidebarProps = ComponentProps<"div"> & {
-	side?: "left" | "right";
-	variant?: "sidebar" | "floating" | "inset";
-	collapsible?: "offcanvas" | "icon" | "none";
-};
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}
 
 export const Sidebar = (props: sidebarProps) => {
-	const merge = mergeProps(
-		{
-			side: "left",
-			variant: "sidebar",
-			collapsible: "offcanvas",
-		} as sidebarProps,
-		props,
-	);
-	const [local, rest] = splitProps(merge, [
-		"side",
-		"variant",
-		"collapsible",
-		"class",
-		"children",
-	]);
-
-	const { isMobile, state, openMobile, setOpenMobile } = useSideBar();
-
-	return (
-		<Switch
-			fallback={
-				<div
-					class="group peer hidden md:block text-sidebar-foreground"
-					data-state={state()}
-					data-collapsible={state() === "collapsed" ? local.collapsible : ""}
-					data-variant={local.variant}
-					data-side={local.side}
-				>
-					{/* This is what handles the sidebar gap on desktop */}
-					<div
-						class={cn(
-							"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
-							"group-data-[collapsible=offcanvas]:w-0",
-							"group-data-[side=right]:rotate-180",
-							local.variant === "floating" || local.variant === "inset"
-								? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-								: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
-						)}
-					/>
-					<div
-						class={cn(
-							"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
-							local.side === "left"
-								? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-								: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-							// Adjust the padding for floating and inset variants.
-							local.variant === "floating" || local.variant === "inset"
-								? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-								: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-							local.class,
-						)}
-						{...rest}
-					>
-						<div
-							data-sidebar="sidebar"
-							class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-						>
-							{local.children}
-						</div>
-					</div>
-				</div>
-			}
-		>
-			<Match when={local.collapsible === "none"}>
-				<div
-					class={cn(
-						"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-						local.class,
-					)}
-					{...rest}
-				>
-					{local.children}
-				</div>
-			</Match>
-
-			<Match when={isMobile()}>
-				<Drawer
-					open={openMobile()}
-					onOpenChange={setOpenMobile}
-					side={local.side}
-				>
-					<DrawerContent
-						data-sidebar="sidebar"
-						data-mobile="true"
-						class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-						style={{
-							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-						}}
-					>
-						<div class="flex h-full w-full flex-col">{local.children}</div>
-					</DrawerContent>
-				</Drawer>
-			</Match>
-		</Switch>
-	);
-};
+  const merge = mergeProps(
+    {
+      side: "left",
+      variant: "sidebar",
+      collapsible: "offcanvas",
+    } as sidebarProps,
+    props
+  )
+  const [local, rest] = splitProps(merge, [
+    "side",
+    "variant",
+    "collapsible",
+    "class",
+    "children",
+  ])
+
+  const { isMobile, state, openMobile, setOpenMobile } = useSideBar()
+
+  return (
+    <Switch
+      fallback={
+        <div
+          class="text-sidebar-foreground group peer hidden md:block"
+          data-state={state()}
+          data-collapsible={state() === "collapsed" ? local.collapsible : ""}
+          data-variant={local.variant}
+          data-side={local.side}
+        >
+          {/* This is what handles the sidebar gap on desktop */}
+          <div
+            class={cn(
+              "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              local.variant === "floating" || local.variant === "inset"
+                ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+                : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+            )}
+          />
+          <div
+            class={cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              local.side === "left"
+                ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+                : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              // Adjust the padding for floating and inset variants.
+              local.variant === "floating" || local.variant === "inset"
+                ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+                : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              local.class
+            )}
+            {...rest}
+          >
+            <div
+              data-sidebar="sidebar"
+              class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+            >
+              {local.children}
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <Match when={local.collapsible === "none"}>
+        <div
+          class={cn(
+            "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+            local.class
+          )}
+          {...rest}
+        >
+          {local.children}
+        </div>
+      </Match>
+
+      <Match when={isMobile()}>
+        <Drawer
+          open={openMobile()}
+          onOpenChange={setOpenMobile}
+          side={local.side}
+        >
+          <DrawerContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            style={{
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            }}
+          >
+            <div class="flex h-full w-full flex-col">{local.children}</div>
+          </DrawerContent>
+        </Drawer>
+      </Match>
+    </Switch>
+  )
+}
 
 type sidebarTrigger<T extends ValidComponent | HTMLElement = HTMLElement> =
-	buttonProps<ElementOf<T>> & {
-		onClick?: JSX.EventHandlerUnion<T, MouseEvent>;
-	};
+  buttonProps<ElementOf<T>> & {
+    onClick?: JSX.EventHandlerUnion<T, MouseEvent>
+  }
 
 export const SidebarTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, sidebarTrigger<T>>,
+  props: PolymorphicProps<T, sidebarTrigger<T>>
 ) => {
-	const [local, rest] = splitProps(props as sidebarTrigger, [
-		"class",
-		"onClick",
-	]);
-	const { toggleSidebar, open } = useSideBar();
-
-	const handleOnClick: JSX.EventHandlerUnion<HTMLElement, MouseEvent> = (
-		event,
-	) => {
-		callHandler(event, local.onClick);
-		toggleSidebar();
-	};
-
-	return (
-		<Button
-			data-trigger="trigger"
-			variant="ghost"
-			size="icon"
-			class={cn("size-7", local.class)}
-			onClick={handleOnClick}
-			{...rest}
-		>
-			<Show
-				when={!open()}
-				fallback={
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<rect width="18" height="18" x="3" y="3" rx="2" />
-							<path d="M9 3v18m7-6l-3-3l3-3" />
-						</g>
-						<title>Close sidebar</title>
-					</svg>
-				}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<rect width="18" height="18" x="3" y="3" rx="2" />
-						<path d="M9 3v18m5-12l3 3l-3 3" />
-					</g>
-					<title>Open sidebar</title>
-				</svg>
-			</Show>
-		</Button>
-	);
-};
+  const [local, rest] = splitProps(props as sidebarTrigger, [
+    "class",
+    "onClick",
+  ])
+  const { toggleSidebar, open } = useSideBar()
+
+  const handleOnClick: JSX.EventHandlerUnion<HTMLElement, MouseEvent> = (
+    event
+  ) => {
+    callHandler(event, local.onClick)
+    toggleSidebar()
+  }
+
+  return (
+    <Button
+      data-trigger="trigger"
+      variant="ghost"
+      size="icon"
+      class={cn("size-7", local.class)}
+      onClick={handleOnClick}
+      {...rest}
+    >
+      <Show
+        when={!open()}
+        fallback={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <rect width="18" height="18" x="3" y="3" rx="2" />
+              <path d="M9 3v18m7-6l-3-3l3-3" />
+            </g>
+            <title>Close sidebar</title>
+          </svg>
+        }
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M9 3v18m5-12l3 3l-3 3" />
+          </g>
+          <title>Open sidebar</title>
+        </svg>
+      </Show>
+    </Button>
+  )
+}
 
 export const SidebarRail = (props: ComponentProps<"button">) => {
-	const { toggleSidebar } = useSideBar();
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<button
-			data-sidebar="rail"
-			aria-label="Toggle Sidebar"
-			tabIndex={-1}
-			onClick={toggleSidebar}
-			title="Toggle Sidebar"
-			class={cn(
-				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-				"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const { toggleSidebar } = useSideBar()
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <button
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      class={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarInset = (props: ComponentProps<"main">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<main
-			class={cn(
-				"relative flex min-h-svh flex-1 flex-col bg-background",
-				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
-
-export const SidebarTextFieldRoot = TextFieldRoot;
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <main
+      class={cn(
+        "bg-background relative flex min-h-svh flex-1 flex-col",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export const SidebarTextFieldRoot = TextFieldRoot
 
 export type sidebarTextFieldProps<T extends ValidComponent = "input"> =
-	textFieldInputProps<T>;
+  textFieldInputProps<T>
 
 export const SidebarTextField = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, sidebarTextFieldProps<T>>,
+  props: PolymorphicProps<T, sidebarTextFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as sidebarTextFieldProps, ["class"]);
-
-	return (
-		<TextField
-			data-sidebar="input"
-			class={cn(
-				"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as sidebarTextFieldProps, ["class"])
+
+  return (
+    <TextField
+      data-sidebar="input"
+      class={cn(
+        "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="header"
-			class={cn("flex flex-col gap-2 p-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="header"
+      class={cn("flex flex-col gap-2 p-2", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="footer"
-			class={cn("flex flex-col gap-2 p-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="footer"
+      class={cn("flex flex-col gap-2 p-2", local.class)}
+      {...rest}
+    />
+  )
+}
 
-type sidebarSeparatorProps<T extends ValidComponent = "hr"> = separatorProps<T>;
+type sidebarSeparatorProps<T extends ValidComponent = "hr"> = separatorProps<T>
 
 export const SidebarSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, sidebarSeparatorProps<T>>,
+  props: PolymorphicProps<T, sidebarSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as sidebarSeparatorProps, ["class"]);
+  const [local, rest] = splitProps(props as sidebarSeparatorProps, ["class"])
 
-	return (
-		<Separator
-			data-sidebar="separator"
-			class={cn("mx-2 w-auto bg-sidebar-border", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <Separator
+      data-sidebar="separator"
+      class={cn("bg-sidebar-border mx-2 w-auto", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			data-sidebar="content"
-			class={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      data-sidebar="content"
+      class={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroup = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="group"
-			class={cn("relative flex w-full min-w-0 flex-col p-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="group"
+      class={cn("relative flex w-full min-w-0 flex-col p-2", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroupLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, { class?: string }>,
+  props: PolymorphicProps<T, { class?: string }>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<Polymorphic
-			as="div"
-			data-sidebar="group-label"
-			class={cn(
-				"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <Polymorphic
+      as="div"
+      data-sidebar="group-label"
+      class={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroupAction = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, { class?: string }>,
+  props: PolymorphicProps<T, { class?: string }>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<Polymorphic
-			as="button"
-			data-sidebar="group-action"
-			class={cn(
-				"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				// Increases the hit area of the button on mobile.
-				"after:absolute after:-inset-2 after:md:hidden",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <Polymorphic
+      as="button"
+      data-sidebar="group-action"
+      class={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroupContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="group-content"
-			class={cn("w-full text-sm", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="group-content"
+      class={cn("w-full text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenu = (props: ComponentProps<"ul">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<ul
-			data-sidebar="menu"
-			class={cn("flex w-full min-w-0 flex-col gap-1", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ul
+      data-sidebar="menu"
+      class={cn("flex w-full min-w-0 flex-col gap-1", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenuItem = (props: ComponentProps<"li">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<li
-			data-sidebar="menu-item"
-			class={cn("group/menu-item relative", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <li
+      data-sidebar="menu-item"
+      class={cn("group/menu-item relative", local.class)}
+      {...rest}
+    />
+  )
+}
 
 const sidebarMenuButtonVariants = cva(
-	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-				outline:
-					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-			},
-			size: {
-				default: "h-8 text-sm",
-				sm: "h-7 text-xs",
-				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 type sidebarMenuButton = VariantProps<typeof sidebarMenuButtonVariants> & {
-	class?: string;
-	isActive?: boolean;
-	tooltip?: string | TooltipContentProps<"div">;
-};
+  class?: string
+  isActive?: boolean
+  tooltip?: string | TooltipContentProps<"div">
+}
 
 export const SidebarMenuButton = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, sidebarMenuButton>,
+  props: PolymorphicProps<T, sidebarMenuButton>
 ) => {
-	const merge = mergeProps<sidebarMenuButton[]>(
-		{
-			isActive: false,
-		},
-		props,
-	);
-	const [local, rest] = splitProps(merge, [
-		"class",
-		"isActive",
-		"variant",
-		"size",
-		"tooltip",
-	]);
-
-	const { isMobile, state } = useSideBar();
-
-	return (
-		<Show
-			when={!local.tooltip || state() !== "collapsed"}
-			fallback={
-				<Tooltip placement="right" openDelay={0} closeDelay={0}>
-					<TooltipTrigger
-						data-sidebar="menu-button"
-						data-size={local.size}
-						data-active={local.isActive}
-						class={cn(
-							sidebarMenuButtonVariants({
-								variant: local.variant,
-								size: local.size,
-							}),
-							local.class,
-						)}
-						{...rest}
-					/>
-					<TooltipContent
-						hidden={state() !== "collapsed" || isMobile()}
-						{...(typeof local.tooltip === "string"
-							? { children: local.tooltip }
-							: local.tooltip)}
-					/>
-				</Tooltip>
-			}
-		>
-			<Polymorphic
-				as="button"
-				data-sidebar="menu-button"
-				data-size={local.size}
-				data-active={local.isActive}
-				class={cn(
-					sidebarMenuButtonVariants({
-						variant: local.variant,
-						size: local.size,
-					}),
-					local.class,
-				)}
-				{...rest}
-			/>
-		</Show>
-	);
-};
+  const merge = mergeProps<sidebarMenuButton[]>(
+    {
+      isActive: false,
+    },
+    props
+  )
+  const [local, rest] = splitProps(merge, [
+    "class",
+    "isActive",
+    "variant",
+    "size",
+    "tooltip",
+  ])
+
+  const { isMobile, state } = useSideBar()
+
+  return (
+    <Show
+      when={!local.tooltip || state() !== "collapsed"}
+      fallback={
+        <Tooltip placement="right" openDelay={0} closeDelay={0}>
+          <TooltipTrigger
+            data-sidebar="menu-button"
+            data-size={local.size}
+            data-active={local.isActive}
+            class={cn(
+              sidebarMenuButtonVariants({
+                variant: local.variant,
+                size: local.size,
+              }),
+              local.class
+            )}
+            {...rest}
+          />
+          <TooltipContent
+            hidden={state() !== "collapsed" || isMobile()}
+            {...(typeof local.tooltip === "string"
+              ? { children: local.tooltip }
+              : local.tooltip)}
+          />
+        </Tooltip>
+      }
+    >
+      <Polymorphic
+        as="button"
+        data-sidebar="menu-button"
+        data-size={local.size}
+        data-active={local.isActive}
+        class={cn(
+          sidebarMenuButtonVariants({
+            variant: local.variant,
+            size: local.size,
+          }),
+          local.class
+        )}
+        {...rest}
+      />
+    </Show>
+  )
+}
 
 export const SidebarMenuAction = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, { showOnHover?: boolean; class?: string }>,
+  props: PolymorphicProps<T, { showOnHover?: boolean; class?: string }>
 ) => {
-	const [local, rest] = splitProps(props, ["class", "showOnHover"]);
-
-	return (
-		<Polymorphic
-			as="button"
-			data-sidebar="menu-action"
-			class={cn(
-				"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-				// Increases the hit area of the button on mobile.
-				"after:absolute after:-inset-2 after:md:hidden",
-				"peer-data-[size=sm]/menu-button:top-1",
-				"peer-data-[size=default]/menu-button:top-1.5",
-				"peer-data-[size=lg]/menu-button:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				local.showOnHover &&
-					"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[expanded]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "showOnHover"])
+
+  return (
+    <Polymorphic
+      as="button"
+      data-sidebar="menu-action"
+      class={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        local.showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[expanded]:opacity-100 md:opacity-0",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenuBadge = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			data-sidebar="menu-badge"
-			class={cn(
-				"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-				"peer-data-[size=sm]/menu-button:top-1",
-				"peer-data-[size=default]/menu-button:top-1.5",
-				"peer-data-[size=lg]/menu-button:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      data-sidebar="menu-badge"
+      class={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type sidebarMenuSkeletonProps = ComponentProps<"div"> & {
-	showIcon?: boolean;
-};
+  showIcon?: boolean
+}
 
 export const SidebarMenuSkeleton = (props: sidebarMenuSkeletonProps) => {
-	const [local, rest] = splitProps(props, ["class", "showIcon"]);
-
-	// Random width between 50 to 90%.
-	const width = createMemo(() => `${Math.floor(Math.random() * 40) + 50}%`);
-
-	return (
-		<div
-			data-sidebar="menu-skeleton"
-			class={cn("rounded-md h-8 flex gap-2 px-2 items-center", local.class)}
-			{...rest}
-		>
-			<Show when={local.showIcon}>
-				<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
-			</Show>
-			<Skeleton
-				class="h-4 flex-1 max-w-[--skeleton-width]"
-				data-sidebar="menu-skeleton-text"
-				style={{
-					"--skeleton-width": width(),
-				}}
-			/>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "showIcon"])
+
+  // Random width between 50 to 90%.
+  const width = createMemo(() => `${Math.floor(Math.random() * 40) + 50}%`)
+
+  return (
+    <div
+      data-sidebar="menu-skeleton"
+      class={cn("flex h-8 items-center gap-2 rounded-md px-2", local.class)}
+      {...rest}
+    >
+      <Show when={local.showIcon}>
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+      </Show>
+      <Skeleton
+        class="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={{
+          "--skeleton-width": width(),
+        }}
+      />
+    </div>
+  )
+}
 
 export const SidebarMenuSub = (props: ComponentProps<"ul">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<ul
-			data-sidebar="menu-sub"
-			class={cn(
-				"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <ul
+      data-sidebar="menu-sub"
+      class={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenuSubItem = (props: ComponentProps<"li">) => {
-	return <li {...props} />;
-};
+  return <li {...props} />
+}
 
 type sidebarMenuSubButton = {
-	size?: "sm" | "md";
-	isActive?: boolean;
-	class?: string;
-};
+  size?: "sm" | "md"
+  isActive?: boolean
+  class?: string
+}
 
 export const SidebarMenuSubButton = <T extends ValidComponent = "a">(
-	props: PolymorphicProps<T, sidebarMenuSubButton>,
+  props: PolymorphicProps<T, sidebarMenuSubButton>
 ) => {
-	const merge = mergeProps<sidebarMenuSubButton[]>({ size: "md" }, props);
-	const [local, rest] = splitProps(merge, ["class", "isActive", "size"]);
-
-	return (
-		<Polymorphic
-			data-sidebar="menu-sub-button"
-			data-size={local.size}
-			data-active={local.isActive}
-			class={cn(
-				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-				local.size === "sm" && "text-xs",
-				local.size === "md" && "text-sm",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const merge = mergeProps<sidebarMenuSubButton[]>({ size: "md" }, props)
+  const [local, rest] = splitProps(merge, ["class", "isActive", "size"])
+
+  return (
+    <Polymorphic
+      data-sidebar="menu-sub-button"
+      data-size={local.size}
+      data-active={local.isActive}
+      class={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        local.size === "sm" && "text-xs",
+        local.size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/skeleton.tsx b/docs/src/registry/tailwindcss/ui/skeleton.tsx
index 789565df..677f9e91 100644
--- a/docs/src/registry/tailwindcss/ui/skeleton.tsx
+++ b/docs/src/registry/tailwindcss/ui/skeleton.tsx
@@ -1,13 +1,14 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const Skeleton = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn("animate-pulse rounded-md bg-primary/10", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn("bg-primary/10 animate-pulse rounded-md", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/sonner.tsx b/docs/src/registry/tailwindcss/ui/sonner.tsx
index 3f2f03fb..e6c5af3c 100644
--- a/docs/src/registry/tailwindcss/ui/sonner.tsx
+++ b/docs/src/registry/tailwindcss/ui/sonner.tsx
@@ -1,24 +1,24 @@
-import { Toaster as Sonner } from "somoto";
+import { Toaster as Sonner } from "somoto"
 
 export const Toaster = (props: Parameters<typeof Sonner>[0]) => {
-	return (
-		<Sonner
-			toastOptions={{
-				classNames: {
-					toast:
-						"group toast bg-background text-foreground border-border shadow-lg",
-					description: "text-muted-foreground",
-				},
-				actionButtonStyle: {
-					"--normal-bg": "hsl(var(--primary-foreground))",
-					"--normal-text": "hsl(var(--primary))",
-				},
-				cancelButtonStyle: {
-					"--normal-bg": "hsl(var(--muted-foreground))",
-					"--normal-text": "hsl(var(--muted))",
-				},
-			}}
-			{...props}
-		/>
-	);
-};
+  return (
+    <Sonner
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast bg-background text-foreground border-border shadow-lg",
+          description: "text-muted-foreground",
+        },
+        actionButtonStyle: {
+          "--normal-bg": "hsl(var(--primary-foreground))",
+          "--normal-text": "hsl(var(--primary))",
+        },
+        cancelButtonStyle: {
+          "--normal-bg": "hsl(var(--muted-foreground))",
+          "--normal-text": "hsl(var(--muted))",
+        },
+      }}
+      {...props}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/switch.tsx b/docs/src/registry/tailwindcss/ui/switch.tsx
index b32587cb..1dd97378 100644
--- a/docs/src/registry/tailwindcss/ui/switch.tsx
+++ b/docs/src/registry/tailwindcss/ui/switch.tsx
@@ -1,62 +1,67 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	SwitchControlProps,
-	SwitchThumbProps,
-} from "@kobalte/core/switch";
-import { Switch as SwitchPrimitive } from "@kobalte/core/switch";
-import type { ParentProps, ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-
-export const SwitchLabel = SwitchPrimitive.Label;
-export const Switch = SwitchPrimitive;
-export const SwitchErrorMessage = SwitchPrimitive.ErrorMessage;
-export const SwitchDescription = SwitchPrimitive.Description;
+import {
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Switch as SwitchPrimitive,
+  type SwitchControlProps,
+  type SwitchThumbProps,
+} from "@kobalte/core/switch"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const SwitchLabel = SwitchPrimitive.Label
+export const Switch = SwitchPrimitive
+export const SwitchErrorMessage = SwitchPrimitive.ErrorMessage
+export const SwitchDescription = SwitchPrimitive.Description
 
 type switchControlProps<T extends ValidComponent = "input"> = ParentProps<
-	SwitchControlProps<T> & { class?: string }
->;
+  SwitchControlProps<T> & { class?: string }
+>
 
 export const SwitchControl = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, switchControlProps<T>>,
+  props: PolymorphicProps<T, switchControlProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as switchControlProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<>
-			<SwitchPrimitive.Input class="[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-[1.5px] [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background" />
-			<SwitchPrimitive.Control
-				class={cn(
-					"inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input shadow-sm transition-[color,background-color,box-shadow] data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[disabled]:opacity-50",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</SwitchPrimitive.Control>
-		</>
-	);
-};
+  const [local, rest] = splitProps(props as switchControlProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <>
+      <SwitchPrimitive.Input class="[&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-background [&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-[1.5px] [&:focus-visible+div]:ring-offset-2" />
+      <SwitchPrimitive.Control
+        class={cn(
+          "bg-input data-[checked]:bg-primary inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[color,background-color,box-shadow] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </SwitchPrimitive.Control>
+    </>
+  )
+}
 
 type switchThumbProps<T extends ValidComponent = "div"> = VoidProps<
-	SwitchThumbProps<T> & { class?: string }
->;
+  SwitchThumbProps<T> & { class?: string }
+>
 
 export const SwitchThumb = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, switchThumbProps<T>>,
+  props: PolymorphicProps<T, switchThumbProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as switchThumbProps, ["class"]);
-
-	return (
-		<SwitchPrimitive.Thumb
-			class={cn(
-				"pointer-events-none block h-4 w-4 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-4",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as switchThumbProps, ["class"])
+
+  return (
+    <SwitchPrimitive.Thumb
+      class={cn(
+        "bg-background pointer-events-none block h-4 w-4 translate-x-0 rounded-full shadow-lg ring-0 transition-transform data-[checked]:translate-x-4",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/table.tsx b/docs/src/registry/tailwindcss/ui/table.tsx
index 0c0a3fde..e695b9f2 100644
--- a/docs/src/registry/tailwindcss/ui/table.tsx
+++ b/docs/src/registry/tailwindcss/ui/table.tsx
@@ -1,93 +1,94 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const Table = (props: ComponentProps<"table">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div class="w-full overflow-auto">
-			<table
-				class={cn("w-full caption-bottom text-sm", local.class)}
-				{...rest}
-			/>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div class="w-full overflow-auto">
+      <table
+        class={cn("w-full caption-bottom text-sm", local.class)}
+        {...rest}
+      />
+    </div>
+  )
+}
 
 export const TableHeader = (props: ComponentProps<"thead">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />;
-};
+  return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />
+}
 
 export const TableBody = (props: ComponentProps<"tbody">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />
-	);
-};
+  return (
+    <tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />
+  )
+}
 
 export const TableFooter = (props: ComponentProps<"tfoot">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<tbody
-			class={cn("bg-primary font-medium text-primary-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <tbody
+      class={cn("bg-primary text-primary-foreground font-medium", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const TableRow = (props: ComponentProps<"tr">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<tr
-			class={cn(
-				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <tr
+      class={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const TableHead = (props: ComponentProps<"th">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<th
-			class={cn(
-				"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <th
+      class={cn(
+        "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const TableCell = (props: ComponentProps<"td">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<td
-			class={cn(
-				"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <td
+      class={cn(
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const TableCaption = (props: ComponentProps<"caption">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<caption
-			class={cn("mt-4 text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <caption
+      class={cn("text-muted-foreground mt-4 text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/tabs.tsx b/docs/src/registry/tailwindcss/ui/tabs.tsx
index 8656b26d..f095c776 100644
--- a/docs/src/registry/tailwindcss/ui/tabs.tsx
+++ b/docs/src/registry/tailwindcss/ui/tabs.tsx
@@ -1,133 +1,132 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	TabsContentProps,
-	TabsIndicatorProps,
-	TabsListProps,
-	TabsRootProps,
-	TabsTriggerProps,
-} from "@kobalte/core/tabs";
-import { Tabs as TabsPrimitive } from "@kobalte/core/tabs";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Tabs as TabsPrimitive,
+  type TabsContentProps,
+  type TabsIndicatorProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsTriggerProps,
+} from "@kobalte/core/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 type tabsProps<T extends ValidComponent = "div"> = TabsRootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const Tabs = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsProps<T>>,
+  props: PolymorphicProps<T, tabsProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsProps, ["class"]);
+  const [local, rest] = splitProps(props as tabsProps, ["class"])
 
-	return (
-		<TabsPrimitive
-			class={cn("w-full data-[orientation=vertical]:flex", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <TabsPrimitive
+      class={cn("w-full data-[orientation=vertical]:flex", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type tabsListProps<T extends ValidComponent = "div"> = TabsListProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const TabsList = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsListProps<T>>,
+  props: PolymorphicProps<T, tabsListProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsListProps, ["class"]);
-
-	return (
-		<TabsPrimitive.List
-			class={cn(
-				"relative flex w-full rounded-lg bg-muted p-1 text-muted-foreground data-[orientation=vertical]:flex-col data-[orientation=horizontal]:items-center data-[orientation=vertical]:items-stretch",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsListProps, ["class"])
+
+  return (
+    <TabsPrimitive.List
+      class={cn(
+        "bg-muted text-muted-foreground relative flex w-full rounded-lg p-1 data-[orientation=vertical]:flex-col data-[orientation=horizontal]:items-center data-[orientation=vertical]:items-stretch",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type tabsContentProps<T extends ValidComponent = "div"> =
-	TabsContentProps<T> & {
-		class?: string;
-	};
+  TabsContentProps<T> & {
+    class?: string
+  }
 
 export const TabsContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsContentProps<T>>,
+  props: PolymorphicProps<T, tabsContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsContentProps, ["class"]);
-
-	return (
-		<TabsPrimitive.Content
-			class={cn(
-				"transition-shadow duration-200 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[orientation=horizontal]:mt-2 data-[orientation=vertical]:ml-2",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsContentProps, ["class"])
+
+  return (
+    <TabsPrimitive.Content
+      class={cn(
+        "focus-visible:ring-ring focus-visible:ring-offset-background transition-shadow duration-200 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-offset-2 data-[orientation=horizontal]:mt-2 data-[orientation=vertical]:ml-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type tabsTriggerProps<T extends ValidComponent = "button"> =
-	TabsTriggerProps<T> & {
-		class?: string;
-	};
+  TabsTriggerProps<T> & {
+    class?: string
+  }
 
 export const TabsTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, tabsTriggerProps<T>>,
+  props: PolymorphicProps<T, tabsTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsTriggerProps, ["class"]);
-
-	return (
-		<TabsPrimitive.Trigger
-			class={cn(
-				"peer relative z-10 inline-flex h-7 w-full items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-50 data-[selected]:text-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsTriggerProps, ["class"])
+
+  return (
+    <TabsPrimitive.Trigger
+      class={cn(
+        "data-[selected]:text-foreground peer relative z-10 inline-flex h-7 w-full items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 const tabsIndicatorVariants = cva(
-	"absolute transition-all duration-200 outline-none",
-	{
-		variants: {
-			variant: {
-				block:
-					"data-[orientation=horizontal]:bottom-1 data-[orientation=horizontal]:left-0 data-[orientation=vertical]:right-1 data-[orientation=vertical]:top-0 data-[orientation=horizontal]:h-[calc(100%-0.5rem)] data-[orientation=vertical]:w-[calc(100%-0.5rem)] bg-background shadow rounded-md peer-focus-visible:ring-[1.5px] peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-focus-visible:outline-none",
-				underline:
-					"data-[orientation=horizontal]:-bottom-[1px] data-[orientation=horizontal]:left-0 data-[orientation=vertical]:-right-[1px] data-[orientation=vertical]:top-0 data-[orientation=horizontal]:h-[2px] data-[orientation=vertical]:w-[2px] bg-primary",
-			},
-		},
-		defaultVariants: {
-			variant: "block",
-		},
-	},
-);
+  "absolute transition-all duration-200 outline-none",
+  {
+    variants: {
+      variant: {
+        block:
+          "data-[orientation=horizontal]:bottom-1 data-[orientation=horizontal]:left-0 data-[orientation=vertical]:right-1 data-[orientation=vertical]:top-0 data-[orientation=horizontal]:h-[calc(100%-0.5rem)] data-[orientation=vertical]:w-[calc(100%-0.5rem)] bg-background shadow rounded-md peer-focus-visible:ring-[1.5px] peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-focus-visible:outline-none",
+        underline:
+          "data-[orientation=horizontal]:-bottom-[1px] data-[orientation=horizontal]:left-0 data-[orientation=vertical]:-right-[1px] data-[orientation=vertical]:top-0 data-[orientation=horizontal]:h-[2px] data-[orientation=vertical]:w-[2px] bg-primary",
+      },
+    },
+    defaultVariants: {
+      variant: "block",
+    },
+  }
+)
 
 type tabsIndicatorProps<T extends ValidComponent = "div"> = VoidProps<
-	TabsIndicatorProps<T> &
-		VariantProps<typeof tabsIndicatorVariants> & {
-			class?: string;
-		}
->;
+  TabsIndicatorProps<T> &
+    VariantProps<typeof tabsIndicatorVariants> & {
+      class?: string
+    }
+>
 
 export const TabsIndicator = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsIndicatorProps<T>>,
+  props: PolymorphicProps<T, tabsIndicatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsIndicatorProps, [
-		"class",
-		"variant",
-	]);
-
-	return (
-		<TabsPrimitive.Indicator
-			class={cn(tabsIndicatorVariants({ variant: local.variant }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsIndicatorProps, [
+    "class",
+    "variant",
+  ])
+
+  return (
+    <TabsPrimitive.Indicator
+      class={cn(tabsIndicatorVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/textarea.tsx b/docs/src/registry/tailwindcss/ui/textarea.tsx
index fb7a18e9..463ddd85 100644
--- a/docs/src/registry/tailwindcss/ui/textarea.tsx
+++ b/docs/src/registry/tailwindcss/ui/textarea.tsx
@@ -1,28 +1,30 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { TextFieldTextAreaProps } from "@kobalte/core/text-field";
-import { TextArea as TextFieldPrimitive } from "@kobalte/core/text-field";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  TextArea as TextFieldPrimitive,
+  type TextFieldTextAreaProps,
+} from "@kobalte/core/text-field"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 type textAreaProps<T extends ValidComponent = "textarea"> = VoidProps<
-	TextFieldTextAreaProps<T> & {
-		class?: string;
-	}
->;
+  TextFieldTextAreaProps<T> & {
+    class?: string
+  }
+>
 
 export const TextArea = <T extends ValidComponent = "textarea">(
-	props: PolymorphicProps<T, textAreaProps<T>>,
+  props: PolymorphicProps<T, textAreaProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textAreaProps, ["class"]);
+  const [local, rest] = splitProps(props as textAreaProps, ["class"])
 
-	return (
-		<TextFieldPrimitive
-			class={cn(
-				"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-shadow placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <TextFieldPrimitive
+      class={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/textfield.tsx b/docs/src/registry/tailwindcss/ui/textfield.tsx
index 36f97486..920df247 100644
--- a/docs/src/registry/tailwindcss/ui/textfield.tsx
+++ b/docs/src/registry/tailwindcss/ui/textfield.tsx
@@ -1,129 +1,129 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	TextFieldDescriptionProps,
-	TextFieldErrorMessageProps,
-	TextFieldInputProps,
-	TextFieldLabelProps,
-	TextFieldRootProps,
-} from "@kobalte/core/text-field";
-import { TextField as TextFieldPrimitive } from "@kobalte/core/text-field";
-import { cva } from "class-variance-authority";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  TextField as TextFieldPrimitive,
+  type TextFieldDescriptionProps,
+  type TextFieldErrorMessageProps,
+  type TextFieldInputProps,
+  type TextFieldLabelProps,
+  type TextFieldRootProps,
+} from "@kobalte/core/text-field"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 type textFieldProps<T extends ValidComponent = "div"> =
-	TextFieldRootProps<T> & {
-		class?: string;
-	};
+  TextFieldRootProps<T> & {
+    class?: string
+  }
 
 export const TextFieldRoot = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, textFieldProps<T>>,
+  props: PolymorphicProps<T, textFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldProps, ["class"]);
+  const [local, rest] = splitProps(props as textFieldProps, ["class"])
 
-	return <TextFieldPrimitive class={cn("space-y-1", local.class)} {...rest} />;
-};
+  return <TextFieldPrimitive class={cn("space-y-1", local.class)} {...rest} />
+}
 
 export const textfieldLabel = cva(
-	"text-sm data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70 font-medium",
-	{
-		variants: {
-			label: {
-				true: "data-[invalid]:text-destructive",
-			},
-			error: {
-				true: "text-destructive text-xs",
-			},
-			description: {
-				true: "font-normal text-muted-foreground",
-			},
-		},
-		defaultVariants: {
-			label: true,
-		},
-	},
-);
+  "text-sm data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70 font-medium",
+  {
+    variants: {
+      label: {
+        true: "data-[invalid]:text-destructive",
+      },
+      error: {
+        true: "text-destructive text-xs",
+      },
+      description: {
+        true: "font-normal text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      label: true,
+    },
+  }
+)
 
 type textFieldLabelProps<T extends ValidComponent = "label"> =
-	TextFieldLabelProps<T> & {
-		class?: string;
-	};
+  TextFieldLabelProps<T> & {
+    class?: string
+  }
 
 export const TextFieldLabel = <T extends ValidComponent = "label">(
-	props: PolymorphicProps<T, textFieldLabelProps<T>>,
+  props: PolymorphicProps<T, textFieldLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldLabelProps, ["class"]);
+  const [local, rest] = splitProps(props as textFieldLabelProps, ["class"])
 
-	return (
-		<TextFieldPrimitive.Label
-			class={cn(textfieldLabel(), local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <TextFieldPrimitive.Label
+      class={cn(textfieldLabel(), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type textFieldErrorMessageProps<T extends ValidComponent = "div"> =
-	TextFieldErrorMessageProps<T> & {
-		class?: string;
-	};
+  TextFieldErrorMessageProps<T> & {
+    class?: string
+  }
 
 export const TextFieldErrorMessage = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, textFieldErrorMessageProps<T>>,
+  props: PolymorphicProps<T, textFieldErrorMessageProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldErrorMessageProps, [
-		"class",
-	]);
-
-	return (
-		<TextFieldPrimitive.ErrorMessage
-			class={cn(textfieldLabel({ error: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as textFieldErrorMessageProps, [
+    "class",
+  ])
+
+  return (
+    <TextFieldPrimitive.ErrorMessage
+      class={cn(textfieldLabel({ error: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type textFieldDescriptionProps<T extends ValidComponent = "div"> =
-	TextFieldDescriptionProps<T> & {
-		class?: string;
-	};
+  TextFieldDescriptionProps<T> & {
+    class?: string
+  }
 
 export const TextFieldDescription = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, textFieldDescriptionProps<T>>,
+  props: PolymorphicProps<T, textFieldDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldDescriptionProps, [
-		"class",
-	]);
-
-	return (
-		<TextFieldPrimitive.Description
-			class={cn(
-				textfieldLabel({ description: true, label: false }),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as textFieldDescriptionProps, [
+    "class",
+  ])
+
+  return (
+    <TextFieldPrimitive.Description
+      class={cn(
+        textfieldLabel({ description: true, label: false }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export type textFieldInputProps<T extends ValidComponent = "input"> = VoidProps<
-	TextFieldInputProps<T> & {
-		class?: string;
-	}
->;
+  TextFieldInputProps<T> & {
+    class?: string
+  }
+>
 
 export const TextField = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, textFieldInputProps<T>>,
+  props: PolymorphicProps<T, textFieldInputProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldInputProps, ["class"]);
-
-	return (
-		<TextFieldPrimitive.Input
-			class={cn(
-				"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-shadow file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as textFieldInputProps, ["class"])
+
+  return (
+    <TextFieldPrimitive.Input
+      class={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-shadow file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/toast.tsx b/docs/src/registry/tailwindcss/ui/toast.tsx
index 55129a34..b257fda4 100644
--- a/docs/src/registry/tailwindcss/ui/toast.tsx
+++ b/docs/src/registry/tailwindcss/ui/toast.tsx
@@ -1,168 +1,169 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	ToastDescriptionProps,
-	ToastListProps,
-	ToastRegionProps,
-	ToastRootProps,
-	ToastTitleProps,
-} from "@kobalte/core/toast";
-import { Toast as ToastPrimitive } from "@kobalte/core/toast";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type {
-	ComponentProps,
-	ValidComponent,
-	VoidComponent,
-	VoidProps,
-} from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-import { Portal } from "solid-js/web";
+import {
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ValidComponent,
+  type VoidComponent,
+  type VoidProps,
+} from "solid-js"
+import { Portal } from "solid-js/web"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Toast as ToastPrimitive,
+  type ToastDescriptionProps,
+  type ToastListProps,
+  type ToastRegionProps,
+  type ToastRootProps,
+  type ToastTitleProps,
+} from "@kobalte/core/toast"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const toastVariants = cva(
-	"group pointer-events-auto relative flex flex-col gap-3 w-full items-center justify-between overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--kb-toast-swipe-end-y)] data-[swipe=move]:translate-y-[--kb-toast-swipe-move-y] data-[swipe=move]:transition-none data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-top-full data-[closed]:sm:slide-out-to-bottom-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full",
-	{
-		variants: {
-			variant: {
-				default: "border bg-background",
-				destructive:
-					"destructive group border-destructive bg-destructive text-destructive-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  "group pointer-events-auto relative flex flex-col gap-3 w-full items-center justify-between overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--kb-toast-swipe-end-y)] data-[swipe=move]:translate-y-[--kb-toast-swipe-move-y] data-[swipe=move]:transition-none data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-top-full data-[closed]:sm:slide-out-to-bottom-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 type toastProps<T extends ValidComponent = "li"> = ToastRootProps<T> &
-	VariantProps<typeof toastVariants> & {
-		class?: string;
-	};
+  VariantProps<typeof toastVariants> & {
+    class?: string
+  }
 
 export const Toast = <T extends ValidComponent = "li">(
-	props: PolymorphicProps<T, toastProps<T>>,
+  props: PolymorphicProps<T, toastProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastProps, ["class", "variant"]);
+  const [local, rest] = splitProps(props as toastProps, ["class", "variant"])
 
-	return (
-		<ToastPrimitive
-			class={cn(toastVariants({ variant: local.variant }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToastPrimitive
+      class={cn(toastVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type toastTitleProps<T extends ValidComponent = "div"> = ToastTitleProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const ToastTitle = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toastTitleProps<T>>,
+  props: PolymorphicProps<T, toastTitleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastTitleProps, ["class"]);
+  const [local, rest] = splitProps(props as toastTitleProps, ["class"])
 
-	return (
-		<ToastPrimitive.Title
-			class={cn("text-sm font-semibold [&+div]:text-xs", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToastPrimitive.Title
+      class={cn("text-sm font-semibold [&+div]:text-xs", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type toastDescriptionProps<T extends ValidComponent = "div"> =
-	ToastDescriptionProps<T> & {
-		class?: string;
-	};
+  ToastDescriptionProps<T> & {
+    class?: string
+  }
 
 export const ToastDescription = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toastDescriptionProps<T>>,
+  props: PolymorphicProps<T, toastDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastDescriptionProps, ["class"]);
+  const [local, rest] = splitProps(props as toastDescriptionProps, ["class"])
 
-	return (
-		<ToastPrimitive.Description
-			class={cn("text-sm opacity-90", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToastPrimitive.Description
+      class={cn("text-sm opacity-90", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type toastRegionProps<T extends ValidComponent = "div"> =
-	ToastRegionProps<T> & {
-		class?: string;
-	};
+  ToastRegionProps<T> & {
+    class?: string
+  }
 
 export const ToastRegion = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toastRegionProps<T>>,
+  props: PolymorphicProps<T, toastRegionProps<T>>
 ) => {
-	const merge = mergeProps<toastRegionProps[]>(
-		{
-			swipeDirection: "down",
-		},
-		props,
-	);
-
-	return (
-		<Portal>
-			<ToastPrimitive.Region {...merge} />
-		</Portal>
-	);
-};
+  const merge = mergeProps<toastRegionProps[]>(
+    {
+      swipeDirection: "down",
+    },
+    props
+  )
+
+  return (
+    <Portal>
+      <ToastPrimitive.Region {...merge} />
+    </Portal>
+  )
+}
 
 type toastListProps<T extends ValidComponent = "ol"> = VoidProps<
-	ToastListProps<T> & {
-		class?: string;
-	}
->;
+  ToastListProps<T> & {
+    class?: string
+  }
+>
 
 export const ToastList = <T extends ValidComponent = "ol">(
-	props: PolymorphicProps<T, toastListProps<T>>,
+  props: PolymorphicProps<T, toastListProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastListProps, ["class"]);
-
-	return (
-		<ToastPrimitive.List
-			class={cn(
-				"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as toastListProps, ["class"])
+
+  return (
+    <ToastPrimitive.List
+      class={cn(
+        "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const ToastContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class", "children"]);
-
-	return (
-		<div class={cn("flex w-full flex-col", local.class)} {...rest}>
-			<div>{local.children}</div>
-			<ToastPrimitive.CloseButton class="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M18 6L6 18M6 6l12 12"
-					/>
-					<title>Close</title>
-				</svg>
-			</ToastPrimitive.CloseButton>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "children"])
+
+  return (
+    <div class={cn("flex w-full flex-col", local.class)} {...rest}>
+      <div>{local.children}</div>
+      <ToastPrimitive.CloseButton class="text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M18 6L6 18M6 6l12 12"
+          />
+          <title>Close</title>
+        </svg>
+      </ToastPrimitive.CloseButton>
+    </div>
+  )
+}
 
 export const ToastProgress: VoidComponent = () => {
-	return (
-		<ToastPrimitive.ProgressTrack class="h-1 w-full overflow-hidden rounded-xl bg-primary/20 group-[.destructive]:bg-background/20">
-			<ToastPrimitive.ProgressFill class="h-full w-[--kb-toast-progress-fill-width] bg-primary transition-all duration-150 ease-linear group-[.destructive]:bg-destructive-foreground" />
-		</ToastPrimitive.ProgressTrack>
-	);
-};
+  return (
+    <ToastPrimitive.ProgressTrack class="bg-primary/20 group-[.destructive]:bg-background/20 h-1 w-full overflow-hidden rounded-xl">
+      <ToastPrimitive.ProgressFill class="bg-primary group-[.destructive]:bg-destructive-foreground h-full w-[--kb-toast-progress-fill-width] transition-all duration-150 ease-linear" />
+    </ToastPrimitive.ProgressTrack>
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/toggle-group.tsx b/docs/src/registry/tailwindcss/ui/toggle-group.tsx
index d0a46147..63a46d86 100644
--- a/docs/src/registry/tailwindcss/ui/toggle-group.tsx
+++ b/docs/src/registry/tailwindcss/ui/toggle-group.tsx
@@ -1,85 +1,94 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	ToggleGroupItemProps,
-	ToggleGroupRootProps,
-} from "@kobalte/core/toggle-group";
-import { ToggleGroup as ToggleGroupPrimitive } from "@kobalte/core/toggle-group";
-import type { VariantProps } from "class-variance-authority";
-import type { Accessor, ParentProps, ValidComponent } from "solid-js";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { toggleVariants } from "./toggle";
+import {
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+  type Accessor,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  ToggleGroup as ToggleGroupPrimitive,
+  type ToggleGroupItemProps,
+  type ToggleGroupRootProps,
+} from "@kobalte/core/toggle-group"
+import type { VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+import { toggleVariants } from "./toggle"
 
 const ToggleGroupContext =
-	createContext<Accessor<VariantProps<typeof toggleVariants>>>();
+  createContext<Accessor<VariantProps<typeof toggleVariants>>>()
 
 const useToggleGroup = () => {
-	const context = useContext(ToggleGroupContext);
+  const context = useContext(ToggleGroupContext)
 
-	if (!context) {
-		throw new Error(
-			"`useToggleGroup`: must be used within a `ToggleGroup` component",
-		);
-	}
+  if (!context) {
+    throw new Error(
+      "`useToggleGroup`: must be used within a `ToggleGroup` component"
+    )
+  }
 
-	return context;
-};
+  return context
+}
 
 type toggleGroupProps<T extends ValidComponent = "div"> = ParentProps<
-	ToggleGroupRootProps<T> &
-		VariantProps<typeof toggleVariants> & {
-			class?: string;
-		}
->;
+  ToggleGroupRootProps<T> &
+    VariantProps<typeof toggleVariants> & {
+      class?: string
+    }
+>
 
 export const ToggleGroup = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toggleGroupProps<T>>,
+  props: PolymorphicProps<T, toggleGroupProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toggleGroupProps, [
-		"class",
-		"children",
-		"size",
-		"variant",
-	]);
+  const [local, rest] = splitProps(props as toggleGroupProps, [
+    "class",
+    "children",
+    "size",
+    "variant",
+  ])
 
-	const value = createMemo<VariantProps<typeof toggleVariants>>(() => ({
-		size: local.size,
-		variant: local.variant,
-	}));
+  const value = createMemo<VariantProps<typeof toggleVariants>>(() => ({
+    size: local.size,
+    variant: local.variant,
+  }))
 
-	return (
-		<ToggleGroupPrimitive
-			class={cn("flex items-center justify-center gap-1", local.class)}
-			{...rest}
-		>
-			<ToggleGroupContext.Provider value={value}>
-				{local.children}
-			</ToggleGroupContext.Provider>
-		</ToggleGroupPrimitive>
-	);
-};
+  return (
+    <ToggleGroupPrimitive
+      class={cn("flex items-center justify-center gap-1", local.class)}
+      {...rest}
+    >
+      <ToggleGroupContext.Provider value={value}>
+        {local.children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
 
 type toggleGroupItemProps<T extends ValidComponent = "button"> =
-	ToggleGroupItemProps<T> & {
-		class?: string;
-	};
+  ToggleGroupItemProps<T> & {
+    class?: string
+  }
 
 export const ToggleGroupItem = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, toggleGroupItemProps<T>>,
+  props: PolymorphicProps<T, toggleGroupItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toggleGroupItemProps, ["class"]);
-	const context = useToggleGroup();
+  const [local, rest] = splitProps(props as toggleGroupItemProps, ["class"])
+  const context = useToggleGroup()
 
-	return (
-		<ToggleGroupPrimitive.Item
-			class={cn(
-				toggleVariants({
-					variant: context().variant,
-					size: context().size,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToggleGroupPrimitive.Item
+      class={cn(
+        toggleVariants({
+          variant: context().variant,
+          size: context().size,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/toggle.tsx b/docs/src/registry/tailwindcss/ui/toggle.tsx
index dfaa9291..26c7005c 100644
--- a/docs/src/registry/tailwindcss/ui/toggle.tsx
+++ b/docs/src/registry/tailwindcss/ui/toggle.tsx
@@ -1,56 +1,57 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ToggleButtonRootProps } from "@kobalte/core/toggle-button";
-import { ToggleButton as ToggleButtonPrimitive } from "@kobalte/core/toggle-button";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  ToggleButton as ToggleButtonPrimitive,
+  type ToggleButtonRootProps,
+} from "@kobalte/core/toggle-button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 
 export const toggleVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-[box-shadow,color,background-color] hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
-	{
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
-			},
-			size: {
-				default: "h-9 px-3",
-				sm: "h-8 px-2",
-				lg: "h-10 px-3",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-[box-shadow,color,background-color] hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-3",
+        sm: "h-8 px-2",
+        lg: "h-10 px-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 type toggleButtonProps<T extends ValidComponent = "button"> =
-	ToggleButtonRootProps<T> &
-		VariantProps<typeof toggleVariants> & {
-			class?: string;
-		};
+  ToggleButtonRootProps<T> &
+    VariantProps<typeof toggleVariants> & {
+      class?: string
+    }
 
 export const ToggleButton = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, toggleButtonProps<T>>,
+  props: PolymorphicProps<T, toggleButtonProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toggleButtonProps, [
-		"class",
-		"variant",
-		"size",
-	]);
+  const [local, rest] = splitProps(props as toggleButtonProps, [
+    "class",
+    "variant",
+    "size",
+  ])
 
-	return (
-		<ToggleButtonPrimitive
-			class={cn(
-				toggleVariants({ variant: local.variant, size: local.size }),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToggleButtonPrimitive
+      class={cn(
+        toggleVariants({ variant: local.variant, size: local.size }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/docs/src/registry/tailwindcss/ui/tooltip.tsx b/docs/src/registry/tailwindcss/ui/tooltip.tsx
index 0aaec6b4..b6f34c14 100644
--- a/docs/src/registry/tailwindcss/ui/tooltip.tsx
+++ b/docs/src/registry/tailwindcss/ui/tooltip.tsx
@@ -1,45 +1,46 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	TooltipContentProps,
-	TooltipRootProps,
-} from "@kobalte/core/tooltip";
-import { Tooltip as TooltipPrimitive } from "@kobalte/core/tooltip";
-import { type ValidComponent, mergeProps, splitProps } from "solid-js";
+import { mergeProps, splitProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Tooltip as TooltipPrimitive,
+  type TooltipContentProps,
+  type TooltipRootProps,
+} from "@kobalte/core/tooltip"
 
-export const TooltipTrigger = TooltipPrimitive.Trigger;
+import { cn } from "@/registry/tailwindcss/libs/cn"
+
+export const TooltipTrigger = TooltipPrimitive.Trigger
 
 export const Tooltip = (props: TooltipRootProps) => {
-	const merge = mergeProps<TooltipRootProps[]>(
-		{
-			gutter: 4,
-			flip: false,
-		},
-		props,
-	);
+  const merge = mergeProps<TooltipRootProps[]>(
+    {
+      gutter: 4,
+      flip: false,
+    },
+    props
+  )
 
-	return <TooltipPrimitive {...merge} />;
-};
+  return <TooltipPrimitive {...merge} />
+}
 
 type tooltipContentProps<T extends ValidComponent = "div"> =
-	TooltipContentProps<T> & {
-		class?: string;
-	};
+  TooltipContentProps<T> & {
+    class?: string
+  }
 
 export const TooltipContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tooltipContentProps<T>>,
+  props: PolymorphicProps<T, tooltipContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tooltipContentProps, ["class"]);
+  const [local, rest] = splitProps(props as tooltipContentProps, ["class"])
 
-	return (
-		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				class={cn(
-					"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</TooltipPrimitive.Portal>
-	);
-};
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        class={cn(
+          "bg-primary text-primary-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+          local.class
+        )}
+        {...rest}
+      />
+    </TooltipPrimitive.Portal>
+  )
+}
diff --git a/docs/src/registry/themes.ts b/docs/src/registry/themes.ts
index ef20430a..5e1adeb0 100644
--- a/docs/src/registry/themes.ts
+++ b/docs/src/registry/themes.ts
@@ -1,266 +1,266 @@
 export const themes = [
-	{
-		name: "zinc",
-		label: "Zinc",
-		activeColor: {
-			light: "240 5.9% 10%",
-			dark: "240 5.2% 33.9%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "240 10% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "240 10% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "240 10% 3.9%",
-				primary: "240 5.9% 10%",
-				"primary-foreground": "0 0% 98%",
-				secondary: "240 4.8% 95.9%",
-				"secondary-foreground": "240 5.9% 10%",
-				muted: "240 4.8% 95.9%",
-				"muted-foreground": "240 3.8% 46.1%",
-				accent: "240 4.8% 95.9%",
-				"accent-foreground": "240 5.9% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "240 5.9% 90%",
-				input: "240 5.9% 90%",
-				ring: "240 5.9% 10%",
-				radius: "0.5rem",
-			},
-			dark: {
-				background: "240 10% 3.9%",
-				foreground: "0 0% 98%",
-				card: "240 10% 3.9%",
-				"card-foreground": "0 0% 98%",
-				popover: "240 10% 3.9%",
-				"popover-foreground": "0 0% 98%",
-				primary: "0 0% 98%",
-				"primary-foreground": "240 5.9% 10%",
-				secondary: "240 3.7% 15.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "240 3.7% 15.9%",
-				"muted-foreground": "240 5% 64.9%",
-				accent: "240 3.7% 15.9%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 0% 98%",
-				border: "240 3.7% 15.9%",
-				input: "240 3.7% 15.9%",
-				ring: "240 4.9% 83.9%",
-			},
-		},
-	},
-	{
-		name: "slate",
-		label: "Slate",
-		activeColor: {
-			light: "215.4 16.3% 46.9%",
-			dark: "215.3 19.3% 34.5%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "222.2 84% 4.9%",
-				card: "0 0% 100%",
-				"card-foreground": "222.2 84% 4.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "222.2 84% 4.9%",
-				primary: "222.2 47.4% 11.2%",
-				"primary-foreground": "210 40% 98%",
-				secondary: "210 40% 96.1%",
-				"secondary-foreground": "222.2 47.4% 11.2%",
-				muted: "210 40% 96.1%",
-				"muted-foreground": "215.4 16.3% 46.9%",
-				accent: "210 40% 96.1%",
-				"accent-foreground": "222.2 47.4% 11.2%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "210 40% 98%",
-				border: "214.3 31.8% 91.4%",
-				input: "214.3 31.8% 91.4%",
-				ring: "222.2 84% 4.9%",
-				radius: "0.5rem",
-			},
-			dark: {
-				background: "222.2 84% 4.9%",
-				foreground: "210 40% 98%",
-				card: "222.2 84% 4.9%",
-				"card-foreground": "210 40% 98%",
-				popover: "222.2 84% 4.9%",
-				"popover-foreground": "210 40% 98%",
-				primary: "210 40% 98%",
-				"primary-foreground": "222.2 47.4% 11.2%",
-				secondary: "217.2 32.6% 17.5%",
-				"secondary-foreground": "210 40% 98%",
-				muted: "217.2 32.6% 17.5%",
-				"muted-foreground": "215 20.2% 65.1%",
-				accent: "217.2 32.6% 17.5%",
-				"accent-foreground": "210 40% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "210 40% 98%",
-				border: "217.2 32.6% 17.5%",
-				input: "217.2 32.6% 17.5%",
-				ring: "212.7 26.8% 83.9",
-			},
-		},
-	},
-	{
-		name: "stone",
-		label: "Stone",
-		activeColor: {
-			light: "25 5.3% 44.7%",
-			dark: "33.3 5.5% 32.4%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "20 14.3% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "20 14.3% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "20 14.3% 4.1%",
-				primary: "24 9.8% 10%",
-				"primary-foreground": "60 9.1% 97.8%",
-				secondary: "60 4.8% 95.9%",
-				"secondary-foreground": "24 9.8% 10%",
-				muted: "60 4.8% 95.9%",
-				"muted-foreground": "25 5.3% 44.7%",
-				accent: "60 4.8% 95.9%",
-				"accent-foreground": "24 9.8% 10%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "20 5.9% 90%",
-				input: "20 5.9% 90%",
-				ring: "20 14.3% 4.1%",
-				radius: "0.95rem",
-			},
-			dark: {
-				background: "20 14.3% 4.1%",
-				foreground: "60 9.1% 97.8%",
-				card: "20 14.3% 4.1%",
-				"card-foreground": "60 9.1% 97.8%",
-				popover: "20 14.3% 4.1%",
-				"popover-foreground": "60 9.1% 97.8%",
-				primary: "60 9.1% 97.8%",
-				"primary-foreground": "24 9.8% 10%",
-				secondary: "12 6.5% 15.1%",
-				"secondary-foreground": "60 9.1% 97.8%",
-				muted: "12 6.5% 15.1%",
-				"muted-foreground": "24 5.4% 63.9%",
-				accent: "12 6.5% 15.1%",
-				"accent-foreground": "60 9.1% 97.8%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "60 9.1% 97.8%",
-				border: "12 6.5% 15.1%",
-				input: "12 6.5% 15.1%",
-				ring: "24 5.7% 82.9%",
-			},
-		},
-	},
-	{
-		name: "gray",
-		label: "Gray",
-		activeColor: {
-			light: "220 8.9% 46.1%",
-			dark: "215 13.8% 34.1%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "224 71.4% 4.1%",
-				card: "0 0% 100%",
-				"card-foreground": "224 71.4% 4.1%",
-				popover: "0 0% 100%",
-				"popover-foreground": "224 71.4% 4.1%",
-				primary: "220.9 39.3% 11%",
-				"primary-foreground": "210 20% 98%",
-				secondary: "220 14.3% 95.9%",
-				"secondary-foreground": "220.9 39.3% 11%",
-				muted: "220 14.3% 95.9%",
-				"muted-foreground": "220 8.9% 46.1%",
-				accent: "220 14.3% 95.9%",
-				"accent-foreground": "220.9 39.3% 11%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "210 20% 98%",
-				border: "220 13% 91%",
-				input: "220 13% 91%",
-				ring: "224 71.4% 4.1%",
-				radius: "0.35rem",
-			},
-			dark: {
-				background: "224 71.4% 4.1%",
-				foreground: "210 20% 98%",
-				card: "224 71.4% 4.1%",
-				"card-foreground": "210 20% 98%",
-				popover: "224 71.4% 4.1%",
-				"popover-foreground": "210 20% 98%",
-				primary: "210 20% 98%",
-				"primary-foreground": "220.9 39.3% 11%",
-				secondary: "215 27.9% 16.9%",
-				"secondary-foreground": "210 20% 98%",
-				muted: "215 27.9% 16.9%",
-				"muted-foreground": "217.9 10.6% 64.9%",
-				accent: "215 27.9% 16.9%",
-				"accent-foreground": "210 20% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "210 20% 98%",
-				border: "215 27.9% 16.9%",
-				input: "215 27.9% 16.9%",
-				ring: "216 12.2% 83.9%",
-			},
-		},
-	},
-	{
-		name: "neutral",
-		label: "Neutral",
-		activeColor: {
-			light: "0 0% 45.1%",
-			dark: "0 0% 32.2%",
-		},
-		cssVars: {
-			light: {
-				background: "0 0% 100%",
-				foreground: "0 0% 3.9%",
-				card: "0 0% 100%",
-				"card-foreground": "0 0% 3.9%",
-				popover: "0 0% 100%",
-				"popover-foreground": "0 0% 3.9%",
-				primary: "0 0% 9%",
-				"primary-foreground": "0 0% 98%",
-				secondary: "0 0% 96.1%",
-				"secondary-foreground": "0 0% 9%",
-				muted: "0 0% 96.1%",
-				"muted-foreground": "0 0% 45.1%",
-				accent: "0 0% 96.1%",
-				"accent-foreground": "0 0% 9%",
-				destructive: "0 84.2% 60.2%",
-				"destructive-foreground": "0 0% 98%",
-				border: "0 0% 89.8%",
-				input: "0 0% 89.8%",
-				ring: "0 0% 3.9%",
-			},
-			dark: {
-				background: "0 0% 3.9%",
-				foreground: "0 0% 98%",
-				card: "0 0% 3.9%",
-				"card-foreground": "0 0% 98%",
-				popover: "0 0% 3.9%",
-				"popover-foreground": "0 0% 98%",
-				primary: "0 0% 98%",
-				"primary-foreground": "0 0% 9%",
-				secondary: "0 0% 14.9%",
-				"secondary-foreground": "0 0% 98%",
-				muted: "0 0% 14.9%",
-				"muted-foreground": "0 0% 63.9%",
-				accent: "0 0% 14.9%",
-				"accent-foreground": "0 0% 98%",
-				destructive: "0 62.8% 30.6%",
-				"destructive-foreground": "0 0% 98%",
-				border: "0 0% 14.9%",
-				input: "0 0% 14.9%",
-				ring: "0 0% 83.1%",
-			},
-		},
-	},
-];
+  {
+    name: "zinc",
+    label: "Zinc",
+    activeColor: {
+      light: "240 5.9% 10%",
+      dark: "240 5.2% 33.9%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "240 5.9% 10%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "240 5.9% 10%",
+        radius: "0.5rem",
+      },
+      dark: {
+        background: "240 10% 3.9%",
+        foreground: "0 0% 98%",
+        card: "240 10% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "240 10% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "240 5.9% 10%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "240 3.7% 15.9%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "240 3.7% 15.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "240 4.9% 83.9%",
+      },
+    },
+  },
+  {
+    name: "slate",
+    label: "Slate",
+    activeColor: {
+      light: "215.4 16.3% 46.9%",
+      dark: "215.3 19.3% 34.5%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        primary: "222.2 47.4% 11.2%",
+        "primary-foreground": "210 40% 98%",
+        secondary: "210 40% 96.1%",
+        "secondary-foreground": "222.2 47.4% 11.2%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "222.2 84% 4.9%",
+        radius: "0.5rem",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "210 40% 98%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "212.7 26.8% 83.9",
+      },
+    },
+  },
+  {
+    name: "stone",
+    label: "Stone",
+    activeColor: {
+      light: "25 5.3% 44.7%",
+      dark: "33.3 5.5% 32.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24 9.8% 10%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "60 9.1% 97.8%",
+        "primary-foreground": "24 9.8% 10%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "24 5.7% 82.9%",
+      },
+    },
+  },
+  {
+    name: "gray",
+    label: "Gray",
+    activeColor: {
+      light: "220 8.9% 46.1%",
+      dark: "215 13.8% 34.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "220.9 39.3% 11%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "224 71.4% 4.1%",
+        radius: "0.35rem",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "210 20% 98%",
+        "primary-foreground": "220.9 39.3% 11%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "216 12.2% 83.9%",
+      },
+    },
+  },
+  {
+    name: "neutral",
+    label: "Neutral",
+    activeColor: {
+      light: "0 0% 45.1%",
+      dark: "0 0% 32.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 0% 9%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 0% 3.9%",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "0 0% 9%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 0% 83.1%",
+      },
+    },
+  },
+]
diff --git a/docs/src/registry/ui.ts b/docs/src/registry/ui.ts
index 84ea6cc9..d080b525 100644
--- a/docs/src/registry/ui.ts
+++ b/docs/src/registry/ui.ts
@@ -1,659 +1,659 @@
-import type { Registry } from "./schema";
+import type { Registry } from "./schema"
 
 export const ui: Registry = [
-	{
-		name: "accordion",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/accordion.tsx",
-				type: "registry:ui",
-			},
-		],
-		tailwind: {
-			config: {
-				theme: {
-					extend: {
-						keyframes: {
-							"accordion-down": {
-								from: { height: 0 },
-								to: { height: "var(--kb-accordion-content-height)" },
-							},
-							"accordion-up": {
-								from: { height: "var(--kb-accordion-content-height)" },
-								to: { height: 0 },
-							},
-						},
-						animation: {
-							"accordion-down": "accordion-down 0.2s ease-out",
-							"accordion-up": "accordion-up 0.2s ease-out",
-						},
-					},
-				},
-			},
-		},
-		uno: {
-			config: {
-				theme: {
-					animation: {
-						keyframes: {
-							"accordion-down":
-								"{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
-							"accordion-up":
-								"{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
-						},
-						timingFns: {
-							"accordion-down": "ease-out",
-							"accordion-up": "ease-out",
-						},
-						durations: {
-							"accordion-down": "0.2s",
-							"accordion-up": "0.2s",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		name: "alert-dialog",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		registryDependencies: ["button"],
-		files: [
-			{
-				path: "ui/alert-dialog.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "alert",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/alert.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "badge",
-		type: "registry:ui",
-		files: [
-			{
-				path: "ui/badge.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "button",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/button.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "card",
-		type: "registry:ui",
-		files: [
-			{
-				path: "ui/card.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "carousel",
-		type: "registry:ui",
-		dependencies: ["embla-carousel-solid"],
-		registryDependencies: ["button"],
-		files: [
-			{
-				path: "ui/carousel.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "checkbox",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/checkbox.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "collapsible",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/collapsible.tsx",
-				type: "registry:ui",
-			},
-		],
-		tailwind: {
-			config: {
-				theme: {
-					extend: {
-						keyframes: {
-							"collapsible-down": {
-								from: { height: 0 },
-								to: { height: "var(--kb-collapsible-content-height)" },
-							},
-							"collapsible-up": {
-								from: { height: "var(--kb-collapsible-content-height)" },
-								to: { height: 0 },
-							},
-						},
-						animation: {
-							"collapsible-down": "collapsible-down 0.2s ease-out",
-							"collapsible-up": "collapsible-up 0.2s ease-out",
-						},
-					},
-				},
-			},
-		},
-		uno: {
-			config: {
-				theme: {
-					animation: {
-						keyframes: {
-							"collapsible-down":
-								"{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
-							"collapsible-up":
-								"{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }",
-						},
-						timingFns: {
-							"collapsible-down": "ease-out",
-							"collapsible-up": "ease-out",
-						},
-						durations: {
-							"collapsible-down": "0.2s",
-							"collapsible-up": "0.2s",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		name: "combobox",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		registryDependencies: ["button"],
-		files: [
-			{
-				path: "ui/combobox.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "command",
-		type: "registry:ui",
-		dependencies: ["cmdk-solid"],
-		registryDependencies: ["dialog"],
-		files: [
-			{
-				path: "ui/command.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "context-menu",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/context-menu.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "date-picker",
-		type: "registry:ui",
-		dependencies: ["@ark-ui/solid"],
-		registryDependencies: ["button"],
-		files: [
-			{
-				path: "ui/date-picker.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "dialog",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/dialog.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "drawer",
-		type: "registry:ui",
-		dependencies: ["@corvu/drawer"],
-		files: [
-			{
-				path: "ui/drawer.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "dropdown-menu",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/dropdown-menu.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "hover-card",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/hover-card.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "menubar",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/menubar.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "navigation-menu",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/navigation-menu.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "number-field",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		registryDependencies: ["text-field"],
-		files: [
-			{
-				path: "ui/number-field.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "otp-field",
-		type: "registry:ui",
-		dependencies: ["@corvu/otp-field"],
-		files: [
-			{
-				path: "ui/otp-field.tsx",
-				type: "registry:ui",
-			},
-		],
-		tailwind: {
-			config: {
-				theme: {
-					extend: {
-						keyframes: {
-							"caret-blink": {
-								"0%,70%,100%": { opacity: "1" },
-								"20%,50%": { opacity: "0" },
-							},
-						},
-						animation: {
-							"caret-blink": "caret-blink 1.25s ease-out infinite",
-						},
-					},
-				},
-			},
-		},
-		uno: {
-			config: {
-				theme: {
-					animation: {
-						keyframes: {
-							"caret-blink":
-								"{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }",
-						},
-						timingFns: {
-							"caret-blink": "ease-out",
-						},
-						durations: {
-							"caret-blink": "1.25s",
-						},
-						counts: {
-							"caret-blink": "infinite",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		name: "popover",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/popover.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "pagination",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		registryDependencies: ["button"],
-		files: [
-			{
-				path: "ui/pagination.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "progress",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/progress.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "radio-group",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/radio-group.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "resizable",
-		type: "registry:ui",
-		dependencies: ["@corvu/resizable"],
-		files: [
-			{
-				path: "ui/resizable.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "select",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/select.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "separator",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/separator.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "skeleton",
-		type: "registry:ui",
-		files: [
-			{
-				path: "ui/skeleton.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "sonner",
-		type: "registry:ui",
-		dependencies: ["somoto"],
-		files: [
-			{
-				path: "ui/sonner.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "switch",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/switch.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "table",
-		type: "registry:ui",
-		files: [
-			{
-				path: "ui/table.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "tabs",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/tabs.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "textfield",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/textfield.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "textarea",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		registryDependencies: ["textfield"],
-		files: [
-			{
-				path: "ui/textarea.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "toast",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/toast.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "toggle-group",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/toggle-group.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "toggle",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/toggle.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "tooltip",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		files: [
-			{
-				path: "ui/tooltip.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-	{
-		name: "sidebar",
-		type: "registry:ui",
-		dependencies: ["@kobalte/core"],
-		registryDependencies: [
-			"call-handler",
-			"combine-props",
-			"button",
-			"drawer",
-			"separator",
-			"skeleton",
-			"textfield",
-			"tooltip",
-		],
-		files: [
-			{
-				path: "ui/tooltip.tsx",
-				type: "registry:ui",
-			},
-		],
-		tailwind: {
-			config: {
-				theme: {
-					extend: {
-						colors: {
-							sidebar: {
-								DEFAULT: "hsl(var(--sidebar-background))",
-								foreground: "hsl(var(--sidebar-foreground))",
-								primary: "hsl(var(--sidebar-primary))",
-								"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-								accent: "hsl(var(--sidebar-accent))",
-								"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-								border: "hsl(var(--sidebar-border))",
-								ring: "hsl(var(--sidebar-ring))",
-							},
-						},
-					},
-				},
-			},
-		},
-		uno: {
-			config: {
-				theme: {
-					colors: {
-						sidebar: {
-							DEFAULT: "hsl(var(--sidebar-background))",
-							foreground: "hsl(var(--sidebar-foreground))",
-							primary: {
-								DEFAULT: "hsl(var(--sidebar-primary))",
-								foreground: "hsl(var(--sidebar-primary-foreground))",
-							},
-							accent: {
-								DEFAULT: "hsl(var(--sidebar-accent))",
-								foreground: "hsl(var(--sidebar-accent-foreground))",
-							},
-							border: "hsl(var(--sidebar-border))",
-							ring: "hsl(var(--sidebar-ring))",
-						},
-					},
-				},
-			},
-		},
-		cssVars: {
-			light: {
-				"sidebar-background": "0 0% 98%",
-				"sidebar-foreground": "240 5.3% 26.1%",
-				"sidebar-primary": "240 5.9% 10%",
-				"sidebar-primary-foreground": "0 0% 98%",
-				"sidebar-accent": "240 4.8% 95.9%",
-				"sidebar-accent-foreground": "240 5.9% 10%",
-				"sidebar-border": "220 13% 91%",
-				"sidebar-ring": "217.2 91.2% 59.8%",
-			},
-			dark: {
-				"sidebar-background": "240 5.9% 10%",
-				"sidebar-foreground": "240 4.8% 95.9%",
-				"sidebar-primary": "224.3 76.3% 48%",
-				"sidebar-primary-foreground": "0 0% 100%",
-				"sidebar-accent": "240 3.7% 15.9%",
-				"sidebar-accent-foreground": "240 4.8% 95.9%",
-				"sidebar-border": "240 3.7% 15.9%",
-				"sidebar-ring": "217.2 91.2% 59.8%",
-			},
-		},
-	},
-	{
-		name: "chart",
-		type: "registry:ui",
-		dependencies: ["@unovis/ts", "@unovis/solid"],
-		files: [
-			{
-				path: "ui/chart.tsx",
-				type: "registry:ui",
-			},
-		],
-	},
-];
+  {
+    name: "accordion",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/accordion.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            keyframes: {
+              "accordion-down": {
+                from: { height: 0 },
+                to: { height: "var(--kb-accordion-content-height)" },
+              },
+              "accordion-up": {
+                from: { height: "var(--kb-accordion-content-height)" },
+                to: { height: 0 },
+              },
+            },
+            animation: {
+              "accordion-down": "accordion-down 0.2s ease-out",
+              "accordion-up": "accordion-up 0.2s ease-out",
+            },
+          },
+        },
+      },
+    },
+    uno: {
+      config: {
+        theme: {
+          animation: {
+            keyframes: {
+              "accordion-down":
+                "{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
+              "accordion-up":
+                "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
+            },
+            timingFns: {
+              "accordion-down": "ease-out",
+              "accordion-up": "ease-out",
+            },
+            durations: {
+              "accordion-down": "0.2s",
+              "accordion-up": "0.2s",
+            },
+          },
+        },
+      },
+    },
+  },
+  {
+    name: "alert-dialog",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/alert-dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "alert",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/alert.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "badge",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/badge.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "button",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/button.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "card",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/card.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "carousel",
+    type: "registry:ui",
+    dependencies: ["embla-carousel-solid"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/carousel.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "checkbox",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/checkbox.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "collapsible",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/collapsible.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            keyframes: {
+              "collapsible-down": {
+                from: { height: 0 },
+                to: { height: "var(--kb-collapsible-content-height)" },
+              },
+              "collapsible-up": {
+                from: { height: "var(--kb-collapsible-content-height)" },
+                to: { height: 0 },
+              },
+            },
+            animation: {
+              "collapsible-down": "collapsible-down 0.2s ease-out",
+              "collapsible-up": "collapsible-up 0.2s ease-out",
+            },
+          },
+        },
+      },
+    },
+    uno: {
+      config: {
+        theme: {
+          animation: {
+            keyframes: {
+              "collapsible-down":
+                "{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
+              "collapsible-up":
+                "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }",
+            },
+            timingFns: {
+              "collapsible-down": "ease-out",
+              "collapsible-up": "ease-out",
+            },
+            durations: {
+              "collapsible-down": "0.2s",
+              "collapsible-up": "0.2s",
+            },
+          },
+        },
+      },
+    },
+  },
+  {
+    name: "combobox",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/combobox.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "command",
+    type: "registry:ui",
+    dependencies: ["cmdk-solid"],
+    registryDependencies: ["dialog"],
+    files: [
+      {
+        path: "ui/command.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "context-menu",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/context-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "date-picker",
+    type: "registry:ui",
+    dependencies: ["@ark-ui/solid"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/date-picker.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "dialog",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "drawer",
+    type: "registry:ui",
+    dependencies: ["@corvu/drawer"],
+    files: [
+      {
+        path: "ui/drawer.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "dropdown-menu",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/dropdown-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "hover-card",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/hover-card.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "menubar",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/menubar.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "navigation-menu",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/navigation-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "number-field",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    registryDependencies: ["text-field"],
+    files: [
+      {
+        path: "ui/number-field.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "otp-field",
+    type: "registry:ui",
+    dependencies: ["@corvu/otp-field"],
+    files: [
+      {
+        path: "ui/otp-field.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            keyframes: {
+              "caret-blink": {
+                "0%,70%,100%": { opacity: "1" },
+                "20%,50%": { opacity: "0" },
+              },
+            },
+            animation: {
+              "caret-blink": "caret-blink 1.25s ease-out infinite",
+            },
+          },
+        },
+      },
+    },
+    uno: {
+      config: {
+        theme: {
+          animation: {
+            keyframes: {
+              "caret-blink":
+                "{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }",
+            },
+            timingFns: {
+              "caret-blink": "ease-out",
+            },
+            durations: {
+              "caret-blink": "1.25s",
+            },
+            counts: {
+              "caret-blink": "infinite",
+            },
+          },
+        },
+      },
+    },
+  },
+  {
+    name: "popover",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/popover.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "pagination",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    registryDependencies: ["button"],
+    files: [
+      {
+        path: "ui/pagination.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "progress",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/progress.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "radio-group",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/radio-group.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "resizable",
+    type: "registry:ui",
+    dependencies: ["@corvu/resizable"],
+    files: [
+      {
+        path: "ui/resizable.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "select",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/select.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "separator",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/separator.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "skeleton",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/skeleton.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "sonner",
+    type: "registry:ui",
+    dependencies: ["somoto"],
+    files: [
+      {
+        path: "ui/sonner.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "switch",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/switch.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "table",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/table.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "tabs",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/tabs.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "textfield",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/textfield.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "textarea",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    registryDependencies: ["textfield"],
+    files: [
+      {
+        path: "ui/textarea.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "toast",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/toast.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "toggle-group",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/toggle-group.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "toggle",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/toggle.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "tooltip",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    files: [
+      {
+        path: "ui/tooltip.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+  {
+    name: "sidebar",
+    type: "registry:ui",
+    dependencies: ["@kobalte/core"],
+    registryDependencies: [
+      "call-handler",
+      "combine-props",
+      "button",
+      "drawer",
+      "separator",
+      "skeleton",
+      "textfield",
+      "tooltip",
+    ],
+    files: [
+      {
+        path: "ui/tooltip.tsx",
+        type: "registry:ui",
+      },
+    ],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            colors: {
+              sidebar: {
+                DEFAULT: "hsl(var(--sidebar-background))",
+                foreground: "hsl(var(--sidebar-foreground))",
+                primary: "hsl(var(--sidebar-primary))",
+                "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+                accent: "hsl(var(--sidebar-accent))",
+                "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+                border: "hsl(var(--sidebar-border))",
+                ring: "hsl(var(--sidebar-ring))",
+              },
+            },
+          },
+        },
+      },
+    },
+    uno: {
+      config: {
+        theme: {
+          colors: {
+            sidebar: {
+              DEFAULT: "hsl(var(--sidebar-background))",
+              foreground: "hsl(var(--sidebar-foreground))",
+              primary: {
+                DEFAULT: "hsl(var(--sidebar-primary))",
+                foreground: "hsl(var(--sidebar-primary-foreground))",
+              },
+              accent: {
+                DEFAULT: "hsl(var(--sidebar-accent))",
+                foreground: "hsl(var(--sidebar-accent-foreground))",
+              },
+              border: "hsl(var(--sidebar-border))",
+              ring: "hsl(var(--sidebar-ring))",
+            },
+          },
+        },
+      },
+    },
+    cssVars: {
+      light: {
+        "sidebar-background": "0 0% 98%",
+        "sidebar-foreground": "240 5.3% 26.1%",
+        "sidebar-primary": "240 5.9% 10%",
+        "sidebar-primary-foreground": "0 0% 98%",
+        "sidebar-accent": "240 4.8% 95.9%",
+        "sidebar-accent-foreground": "240 5.9% 10%",
+        "sidebar-border": "220 13% 91%",
+        "sidebar-ring": "217.2 91.2% 59.8%",
+      },
+      dark: {
+        "sidebar-background": "240 5.9% 10%",
+        "sidebar-foreground": "240 4.8% 95.9%",
+        "sidebar-primary": "224.3 76.3% 48%",
+        "sidebar-primary-foreground": "0 0% 100%",
+        "sidebar-accent": "240 3.7% 15.9%",
+        "sidebar-accent-foreground": "240 4.8% 95.9%",
+        "sidebar-border": "240 3.7% 15.9%",
+        "sidebar-ring": "217.2 91.2% 59.8%",
+      },
+    },
+  },
+  {
+    name: "chart",
+    type: "registry:ui",
+    dependencies: ["@unovis/ts", "@unovis/solid"],
+    files: [
+      {
+        path: "ui/chart.tsx",
+        type: "registry:ui",
+      },
+    ],
+  },
+]
diff --git a/docs/src/routes/(app).tsx b/docs/src/routes/(app).tsx
index 1976d16d..0d07d12c 100644
--- a/docs/src/routes/(app).tsx
+++ b/docs/src/routes/(app).tsx
@@ -1,15 +1,16 @@
-import { Footer } from "@/components/footer";
-import { Header } from "@/components/header";
-import type { RouteSectionProps } from "@solidjs/router";
+import type { RouteSectionProps } from "@solidjs/router"
+
+import { Footer } from "@/components/footer"
+import { Header } from "@/components/header"
 
 const AppLayout = (props: RouteSectionProps) => {
-	return (
-		<div class="border-grid flex flex-1 flex-col">
-			<Header />
-			<main class="flex flex-1 flex-col">{props.children}</main>
-			<Footer />
-		</div>
-	);
-};
+  return (
+    <div class="border-grid flex flex-1 flex-col">
+      <Header />
+      <main class="flex flex-1 flex-col">{props.children}</main>
+      <Footer />
+    </div>
+  )
+}
 
-export default AppLayout;
+export default AppLayout
diff --git a/docs/src/routes/(app)/_charts.ts b/docs/src/routes/(app)/_charts.ts
index 91906f9f..a5e75f37 100644
--- a/docs/src/routes/(app)/_charts.ts
+++ b/docs/src/routes/(app)/_charts.ts
@@ -1,29 +1,29 @@
-import AreaChart from "@/registry/tailwindcss/charts/area-chart";
-import AreaChartGradient from "@/registry/tailwindcss/charts/area-chart-gradient";
-import AreaChartInteractive from "@/registry/tailwindcss/charts/area-chart-interactive";
-import AreaChartLegend from "@/registry/tailwindcss/charts/area-chart-legend";
-import AreaChartLinear from "@/registry/tailwindcss/charts/area-chart-linear";
-import AreaChartStacked from "@/registry/tailwindcss/charts/area-chart-stacked";
-import AreaChartStep from "@/registry/tailwindcss/charts/area-chart-step";
-import BarChart from "@/registry/tailwindcss/charts/bar-chart";
-import BarChartActive from "@/registry/tailwindcss/charts/bar-chart-active";
-import BarChartHorizontal from "@/registry/tailwindcss/charts/bar-chart-horizontal";
-import BarChartMixed from "@/registry/tailwindcss/charts/bar-chart-mixed";
-import BarChartMultiply from "@/registry/tailwindcss/charts/bar-chart-multiply";
-import BarChartStacked from "@/registry/tailwindcss/charts/bar-chart-stacked";
+import AreaChart from "@/registry/tailwindcss/charts/area-chart"
+import AreaChartGradient from "@/registry/tailwindcss/charts/area-chart-gradient"
+import AreaChartInteractive from "@/registry/tailwindcss/charts/area-chart-interactive"
+import AreaChartLegend from "@/registry/tailwindcss/charts/area-chart-legend"
+import AreaChartLinear from "@/registry/tailwindcss/charts/area-chart-linear"
+import AreaChartStacked from "@/registry/tailwindcss/charts/area-chart-stacked"
+import AreaChartStep from "@/registry/tailwindcss/charts/area-chart-step"
+import BarChart from "@/registry/tailwindcss/charts/bar-chart"
+import BarChartActive from "@/registry/tailwindcss/charts/bar-chart-active"
+import BarChartHorizontal from "@/registry/tailwindcss/charts/bar-chart-horizontal"
+import BarChartMixed from "@/registry/tailwindcss/charts/bar-chart-mixed"
+import BarChartMultiply from "@/registry/tailwindcss/charts/bar-chart-multiply"
+import BarChartStacked from "@/registry/tailwindcss/charts/bar-chart-stacked"
 
 export const Chart = {
-	AreaChart,
-	AreaChartLinear,
-	AreaChartStep,
-	AreaChartStacked,
-	AreaChartLegend,
-	AreaChartGradient,
-	AreaChartInteractive,
-	BarChart,
-	BarChartHorizontal,
-	BarChartMultiply,
-	BarChartStacked,
-	BarChartMixed,
-	BarChartActive,
-};
+  AreaChart,
+  AreaChartLinear,
+  AreaChartStep,
+  AreaChartStacked,
+  AreaChartLegend,
+  AreaChartGradient,
+  AreaChartInteractive,
+  BarChart,
+  BarChartHorizontal,
+  BarChartMultiply,
+  BarChartStacked,
+  BarChartMixed,
+  BarChartActive,
+}
diff --git a/docs/src/routes/(app)/blocks.tsx b/docs/src/routes/(app)/blocks.tsx
index 971e7a5b..ff166550 100644
--- a/docs/src/routes/(app)/blocks.tsx
+++ b/docs/src/routes/(app)/blocks.tsx
@@ -1,45 +1,46 @@
-import { Announcement } from "@/components/announcement";
-import BlockDisplay from "@/components/block-display";
-import { getAllBlockId } from "@/libs/blocks";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { createAsync } from "@solidjs/router";
-import { For } from "solid-js";
+import { For } from "solid-js"
+import { createAsync } from "@solidjs/router"
+
+import { getAllBlockId } from "@/libs/blocks"
+import { Announcement } from "@/components/announcement"
+import BlockDisplay from "@/components/block-display"
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const BlockPage = () => {
-	const blocks = createAsync(() => getAllBlockId());
+  const blocks = createAsync(() => getAllBlockId())
 
-	return (
-		<>
-			<section class="border-grid border-b">
-				<div class="container-wrapper">
-					<div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
-						<Announcement />
-						<h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
-							Building Blocks for the Web
-						</h1>
-						<p class="max-w-2xl text-balance text-lg font-light text-foreground">
-							Clean, modern building blocks. Copy and paste into your apps. Open
-							Source. Free forever.
-						</p>
-						<div class="flex w-full items-center justify-start gap-2 py-2">
-							<Button as="a" href="#blocks" size="sm">
-								Browse Blocks
-							</Button>
-						</div>
-					</div>
-				</div>
-			</section>
-			<div class="container-wrapper flex-1">
-				<For each={blocks()}>
-					{(name) => (
-						<div class="border-grid container border-b py-8 first:pt-6 last:border-b-0 md:py-12">
-							<BlockDisplay name={name} />
-						</div>
-					)}
-				</For>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <section class="border-grid border-b">
+        <div class="container-wrapper">
+          <div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+            <Announcement />
+            <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
+              Building Blocks for the Web
+            </h1>
+            <p class="text-foreground max-w-2xl text-balance text-lg font-light">
+              Clean, modern building blocks. Copy and paste into your apps. Open
+              Source. Free forever.
+            </p>
+            <div class="flex w-full items-center justify-start gap-2 py-2">
+              <Button as="a" href="#blocks" size="sm">
+                Browse Blocks
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="container-wrapper flex-1">
+        <For each={blocks()}>
+          {(name) => (
+            <div class="border-grid container border-b py-8 first:pt-6 last:border-b-0 md:py-12">
+              <BlockDisplay name={name} />
+            </div>
+          )}
+        </For>
+      </div>
+    </>
+  )
+}
 
-export default BlockPage;
+export default BlockPage
diff --git a/docs/src/routes/(app)/charts.tsx b/docs/src/routes/(app)/charts.tsx
index 13a532ec..eb8e7fcc 100644
--- a/docs/src/routes/(app)/charts.tsx
+++ b/docs/src/routes/(app)/charts.tsx
@@ -1,104 +1,105 @@
-import { Announcement } from "@/components/announcement";
-import ChartDisplay from "@/components/chart-display";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
-import { Chart } from "@/routes/(app)/_charts";
+import { Chart } from "@/routes/(app)/_charts"
+
+import { Announcement } from "@/components/announcement"
+import ChartDisplay from "@/components/chart-display"
+import { Button } from "@/registry/tailwindcss/ui/button"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 
 const ChartsPage = () => {
-	return (
-		<>
-			<section class="border-grid border-b">
-				<div class="container-wrapper">
-					<div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
-						<Announcement />
-						<h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
-							Beautiful Charts
-						</h1>
-						<p class="max-w-2xl text-balance text-lg font-light text-foreground">
-							Built using Unovis. Copy and paste into your apps. Open Source.
-						</p>
-						<div class="flex w-full items-center justify-start gap-2 py-2">
-							<Button as="a" href="#charts" size="sm">
-								Browse Charts
-							</Button>
-							<Button
-								as="a"
-								href="/docs/components/chart"
-								size="sm"
-								variant="ghost"
-							>
-								Documentation
-							</Button>
-						</div>
-					</div>
-				</div>
-			</section>
-			<div class="container-wrapper">
-				<div class="container py-6">
-					<section id="charts" class="scroll-mt-20">
-						<div class="grid gap-4">
-							<div class="gap-6 md:flex md:flex-row-reverse md:items-start">
-								<div class="grid flex-1 gap-12">
-									<div
-										class="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
-										id="area-chart"
-									>
-										<ChartDisplay name="area-chart">
-											<Chart.AreaChart />
-										</ChartDisplay>
-										<ChartDisplay name="area-chart-linear">
-											<Chart.AreaChartLinear />
-										</ChartDisplay>
-										<ChartDisplay name="area-chart-step">
-											<Chart.AreaChartStep />
-										</ChartDisplay>
-										<ChartDisplay name="area-chart-stacked">
-											<Chart.AreaChartStacked />
-										</ChartDisplay>
-										<ChartDisplay name="area-chart-legend">
-											<Chart.AreaChartLegend />
-										</ChartDisplay>
-										<ChartDisplay name="area-chart-gradient">
-											<Chart.AreaChartGradient />
-										</ChartDisplay>
-										<div class="md:col-span-2 lg:col-span-3">
-											<ChartDisplay name="area-chart-interactive">
-												<Chart.AreaChartInteractive />
-											</ChartDisplay>
-										</div>
-									</div>
-									<Separator />
-									<div
-										class="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
-										id="bar-chart"
-									>
-										<ChartDisplay name="bar-chart">
-											<Chart.BarChart />
-										</ChartDisplay>
-										<ChartDisplay name="bar-chart-horizontal">
-											<Chart.BarChartHorizontal />
-										</ChartDisplay>
-										<ChartDisplay name="bar-chart-multiply">
-											<Chart.BarChartMultiply />
-										</ChartDisplay>
-										<ChartDisplay name="bar-chart-stacked">
-											<Chart.BarChartStacked />
-										</ChartDisplay>
-										<ChartDisplay name="bar-chart-mixed">
-											<Chart.BarChartMixed />
-										</ChartDisplay>
-										<ChartDisplay name="bar-chart-active">
-											<Chart.BarChartActive />
-										</ChartDisplay>
-									</div>
-								</div>
-							</div>
-						</div>
-					</section>
-				</div>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <section class="border-grid border-b">
+        <div class="container-wrapper">
+          <div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+            <Announcement />
+            <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
+              Beautiful Charts
+            </h1>
+            <p class="text-foreground max-w-2xl text-balance text-lg font-light">
+              Built using Unovis. Copy and paste into your apps. Open Source.
+            </p>
+            <div class="flex w-full items-center justify-start gap-2 py-2">
+              <Button as="a" href="#charts" size="sm">
+                Browse Charts
+              </Button>
+              <Button
+                as="a"
+                href="/docs/components/chart"
+                size="sm"
+                variant="ghost"
+              >
+                Documentation
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="container-wrapper">
+        <div class="container py-6">
+          <section id="charts" class="scroll-mt-20">
+            <div class="grid gap-4">
+              <div class="gap-6 md:flex md:flex-row-reverse md:items-start">
+                <div class="grid flex-1 gap-12">
+                  <div
+                    class="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
+                    id="area-chart"
+                  >
+                    <ChartDisplay name="area-chart">
+                      <Chart.AreaChart />
+                    </ChartDisplay>
+                    <ChartDisplay name="area-chart-linear">
+                      <Chart.AreaChartLinear />
+                    </ChartDisplay>
+                    <ChartDisplay name="area-chart-step">
+                      <Chart.AreaChartStep />
+                    </ChartDisplay>
+                    <ChartDisplay name="area-chart-stacked">
+                      <Chart.AreaChartStacked />
+                    </ChartDisplay>
+                    <ChartDisplay name="area-chart-legend">
+                      <Chart.AreaChartLegend />
+                    </ChartDisplay>
+                    <ChartDisplay name="area-chart-gradient">
+                      <Chart.AreaChartGradient />
+                    </ChartDisplay>
+                    <div class="md:col-span-2 lg:col-span-3">
+                      <ChartDisplay name="area-chart-interactive">
+                        <Chart.AreaChartInteractive />
+                      </ChartDisplay>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div
+                    class="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
+                    id="bar-chart"
+                  >
+                    <ChartDisplay name="bar-chart">
+                      <Chart.BarChart />
+                    </ChartDisplay>
+                    <ChartDisplay name="bar-chart-horizontal">
+                      <Chart.BarChartHorizontal />
+                    </ChartDisplay>
+                    <ChartDisplay name="bar-chart-multiply">
+                      <Chart.BarChartMultiply />
+                    </ChartDisplay>
+                    <ChartDisplay name="bar-chart-stacked">
+                      <Chart.BarChartStacked />
+                    </ChartDisplay>
+                    <ChartDisplay name="bar-chart-mixed">
+                      <Chart.BarChartMixed />
+                    </ChartDisplay>
+                    <ChartDisplay name="bar-chart-active">
+                      <Chart.BarChartActive />
+                    </ChartDisplay>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  )
+}
 
-export default ChartsPage;
+export default ChartsPage
diff --git a/docs/src/routes/(app)/docs.tsx b/docs/src/routes/(app)/docs.tsx
index be1c63ee..0d5c54df 100644
--- a/docs/src/routes/(app)/docs.tsx
+++ b/docs/src/routes/(app)/docs.tsx
@@ -1,136 +1,137 @@
-import { MDXProvider } from "@/components/mdx";
-import { mdxComponents } from "@/components/mdx-components";
-import { PageNavigation } from "@/components/page-navigation";
-import { Sidebar } from "@/components/sidebar";
-import { Toc } from "@/components/toc";
-import { badgeVariants } from "@/registry/tailwindcss/ui/badge";
-import type { RouteSectionProps } from "@solidjs/router";
-import { Show } from "solid-js";
+import { Show } from "solid-js"
+import type { RouteSectionProps } from "@solidjs/router"
+import { allDocs } from "#content"
 // @ts-expect-error
-import { Balancer } from "solid-wrap-balancer";
-import { allDocs } from "#content";
+import { Balancer } from "solid-wrap-balancer"
+
+import { MDXProvider } from "@/components/mdx"
+import { mdxComponents } from "@/components/mdx-components"
+import { PageNavigation } from "@/components/page-navigation"
+import { Sidebar } from "@/components/sidebar"
+import { Toc } from "@/components/toc"
+import { badgeVariants } from "@/registry/tailwindcss/ui/badge"
 
 const DocsLayout = (props: RouteSectionProps) => {
-	const data = () =>
-		allDocs.find((item) => item.slug === props.location.pathname)!;
+  const data = () =>
+    allDocs.find((item) => item.slug === props.location.pathname)!
 
-	return (
-		<div class="container-wrapper">
-			<div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-				<aside class="border-grid fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r md:sticky md:block">
-					<div class="no-scrollbar h-full overflow-auto py-6 pr-4 lg:py-8">
-						<Sidebar />
-					</div>
-				</aside>
-				<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-					<div class="mx-auto w-full min-w-0 max-w-2xl">
-						<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
-							<div class="truncate">Docs</div>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-3.5"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m9 6l6 6l-6 6"
-								/>
-							</svg>
-							<div class="text-foreground">{data().frontmatter.title}</div>
-						</div>
-						<div class="space-y-2">
-							<h1 class="scroll-m-20 text-3xl font-bold tracking-tight">
-								{data().frontmatter.title}
-							</h1>
-							<Show when={data().frontmatter.description}>
-								<p class="text-base text-muted-foreground">
-									<Balancer>{data().frontmatter.description}</Balancer>
-								</p>
-							</Show>
-						</div>
-						<Show when={data().frontmatter.link}>
-							<div class="flex items-center space-x-2 pt-4">
-								<Show when={data().frontmatter.link?.doc}>
-									<a
-										href={data().frontmatter.link?.doc}
-										target="_blank"
-										rel="noreferrer"
-										class={badgeVariants({
-											variant: "outline",
-											class: "bg-muted/60",
-										})}
-									>
-										Docs
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="ml-1 h-3 w-3"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5"
-											/>
-											<title>Open docs</title>
-										</svg>
-									</a>
-								</Show>
+  return (
+    <div class="container-wrapper">
+      <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+        <aside class="border-grid fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r md:sticky md:block">
+          <div class="no-scrollbar h-full overflow-auto py-6 pr-4 lg:py-8">
+            <Sidebar />
+          </div>
+        </aside>
+        <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+          <div class="mx-auto w-full min-w-0 max-w-2xl">
+            <div class="text-muted-foreground mb-4 flex items-center space-x-1 text-sm">
+              <div class="truncate">Docs</div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m9 6l6 6l-6 6"
+                />
+              </svg>
+              <div class="text-foreground">{data().frontmatter.title}</div>
+            </div>
+            <div class="space-y-2">
+              <h1 class="scroll-m-20 text-3xl font-bold tracking-tight">
+                {data().frontmatter.title}
+              </h1>
+              <Show when={data().frontmatter.description}>
+                <p class="text-muted-foreground text-base">
+                  <Balancer>{data().frontmatter.description}</Balancer>
+                </p>
+              </Show>
+            </div>
+            <Show when={data().frontmatter.link}>
+              <div class="flex items-center space-x-2 pt-4">
+                <Show when={data().frontmatter.link?.doc}>
+                  <a
+                    href={data().frontmatter.link?.doc}
+                    target="_blank"
+                    rel="noreferrer"
+                    class={badgeVariants({
+                      variant: "outline",
+                      class: "bg-muted/60",
+                    })}
+                  >
+                    Docs
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="ml-1 h-3 w-3"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5"
+                      />
+                      <title>Open docs</title>
+                    </svg>
+                  </a>
+                </Show>
 
-								<Show when={data().frontmatter.link?.api}>
-									<a
-										href={data().frontmatter.link?.api}
-										target="_blank"
-										rel="noreferrer"
-										class={badgeVariants({
-											variant: "outline",
-											class: "bg-muted/60",
-										})}
-									>
-										API Reference
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="ml-1 h-3 w-3"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5"
-											/>
-											<title>Open Reference</title>
-										</svg>
-									</a>
-								</Show>
-							</div>
-						</Show>
-						<div class="max-w-full pb-12 pt-8">
-							<MDXProvider components={mdxComponents}>
-								{props.children}
-							</MDXProvider>
-						</div>
-						<PageNavigation />
-					</div>
-					<Show when={data().frontmatter.toc === undefined}>
-						<div class="hidden text-sm xl:block">
-							<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
-								<Toc data={data().headings} />
-							</div>
-						</div>
-					</Show>
-				</main>
-			</div>
-		</div>
-	);
-};
+                <Show when={data().frontmatter.link?.api}>
+                  <a
+                    href={data().frontmatter.link?.api}
+                    target="_blank"
+                    rel="noreferrer"
+                    class={badgeVariants({
+                      variant: "outline",
+                      class: "bg-muted/60",
+                    })}
+                  >
+                    API Reference
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="ml-1 h-3 w-3"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5"
+                      />
+                      <title>Open Reference</title>
+                    </svg>
+                  </a>
+                </Show>
+              </div>
+            </Show>
+            <div class="max-w-full pb-12 pt-8">
+              <MDXProvider components={mdxComponents}>
+                {props.children}
+              </MDXProvider>
+            </div>
+            <PageNavigation />
+          </div>
+          <Show when={data().frontmatter.toc === undefined}>
+            <div class="hidden text-sm xl:block">
+              <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+                <Toc data={data().headings} />
+              </div>
+            </div>
+          </Show>
+        </main>
+      </div>
+    </div>
+  )
+}
 
-export default DocsLayout;
+export default DocsLayout
diff --git a/docs/src/routes/(app)/docs/changelog.mdx b/docs/src/routes/(app)/docs/changelog.mdx
index dd995502..086e8653 100644
--- a/docs/src/routes/(app)/docs/changelog.mdx
+++ b/docs/src/routes/(app)/docs/changelog.mdx
@@ -14,11 +14,8 @@ Learn more about [Chart](/charts).
 
 ### Sidebar
 
-<figure className="flex flex-col gap-4 mt-4">
-  <ComponentPreview
-    name="sidebar-01"
-    block
-  />
+<figure className="mt-4 flex flex-col gap-4">
+  <ComponentPreview name="sidebar-01" block />
   <figcaption className="text-center text-sm text-gray-500">
     A sidebar that collapses to icons.
   </figcaption>
@@ -134,8 +131,8 @@ npx shadcn-solid diff alert
 
 ```tsx
 const alertVariants = cva(
-- "relative w-full rounded-lg border",
-+ "relative w-full pl-12 rounded-lg border"
+  -"relative w-full rounded-lg border",
+  +"relative w-full pl-12 rounded-lg border"
 )
 ```
 
diff --git a/docs/src/routes/(app)/docs/cli.mdx b/docs/src/routes/(app)/docs/cli.mdx
index 03a2ce1e..3e04539b 100644
--- a/docs/src/routes/(app)/docs/cli.mdx
+++ b/docs/src/routes/(app)/docs/cli.mdx
@@ -144,8 +144,8 @@ npx shadcn-solid@latest diff alert
 
 ```tsx
 const alertVariants = cva(
-- "relative w-full rounded-lg border",
-+ "relative w-full pl-12 rounded-lg border"
+  -"relative w-full rounded-lg border",
+  +"relative w-full pl-12 rounded-lg border"
 )
 ```
 
@@ -162,4 +162,4 @@ Arguments:
 Options:
   -c, --cwd <path>  the working directory (default: "path\to\my-app")
   -h, --help        display help for command
-```
\ No newline at end of file
+```
diff --git a/docs/src/routes/(app)/docs/components-json.mdx b/docs/src/routes/(app)/docs/components-json.mdx
index f9c4caa6..6ba97baf 100644
--- a/docs/src/routes/(app)/docs/components-json.mdx
+++ b/docs/src/routes/(app)/docs/components-json.mdx
@@ -190,7 +190,6 @@ Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.
 **Important:** If you're using the `src` directory, make sure it is included under `paths` in
 your `tsconfig.json` or `jsconfig.json` file.
 
-
 ### alias.cn
 
 Import alias for your utility functions.
diff --git a/docs/src/routes/(app)/docs/components/accordion.mdx b/docs/src/routes/(app)/docs/components/accordion.mdx
index 07d10224..a0b349bf 100644
--- a/docs/src/routes/(app)/docs/components/accordion.mdx
+++ b/docs/src/routes/(app)/docs/components/accordion.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/accordion#api-reference
 ---
 
-
-
 <ComponentPreview name="accordion-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/accordion-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add accordion
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/accordion.tsx
@@ -47,20 +42,20 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--kb-accordion-content-height)" }
+          to: { height: "var(--kb-accordion-content-height)" },
         },
         "accordion-up": {
           from: { height: "var(--kb-accordion-content-height)" },
-          to: { height: 0 }
-        }
+          to: { height: 0 },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out"
-      }
-    }
-  }
-};
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+}
 ```
 
 </Step>
@@ -68,9 +63,7 @@ module.exports = {
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/accordion.tsx
@@ -83,28 +76,28 @@ export default defineConfig({
   themes: {
     animation: {
       keyframes: {
-       "accordion-down":
+        "accordion-down":
           "{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
-        "accordion-up": "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }"
+        "accordion-up":
+          "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
       },
       timingFns: {
         "accordion-down": "ease-out",
-        "accordion-up": "ease-out"
+        "accordion-up": "ease-out",
       },
       durations: {
         "accordion-down": "0.2s",
-        "accordion-up": "0.2s"
-      }
-    }
-  }
-});
+        "accordion-up": "0.2s",
+      },
+    },
+  },
+})
 ```
 
 </Step>
 
 </ComponentInstallation>
 
-
 ## Usage
 
 ```tsx
@@ -112,7 +105,7 @@ import {
   Accordion,
   AccordionContent,
   AccordionItem,
-  AccordionTrigger
+  AccordionTrigger,
 } from "@/components/ui/accordion"
 ```
 
@@ -120,7 +113,9 @@ import {
 <Accordion type="single" collapsible>
   <AccordionItem value="item-1">
     <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
   </AccordionItem>
 </Accordion>
 ```
diff --git a/docs/src/routes/(app)/docs/components/alert-dialog.mdx b/docs/src/routes/(app)/docs/components/alert-dialog.mdx
index 15fa5f48..0b49e63c 100644
--- a/docs/src/routes/(app)/docs/components/alert-dialog.mdx
+++ b/docs/src/routes/(app)/docs/components/alert-dialog.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/alert-dialog#api-reference
 ---
 
-
-
 <ComponentPreview name="alert-dialog-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/alert-dialog-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add alert-dialog
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/alert-dialog.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/alert-dialog.tsx
@@ -59,6 +52,7 @@ npm install @kobalte/core
 ```tsx
 import {
   AlertDialog,
+  AlertDialogAction,
   AlertDialogClose,
   AlertDialogContent,
   AlertDialogDescription,
@@ -66,8 +60,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-  AlertDialogAction
-} from "@/components/ui/alert-dialog";
+} from "@/components/ui/alert-dialog"
 ```
 
 ```tsx
@@ -77,8 +70,8 @@ import {
     <AlertDialogHeader>
       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
       <AlertDialogDescription>
-        This action cannot be undone. This will permanently delete your account and remove your data
-        from our servers.
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
       </AlertDialogDescription>
     </AlertDialogHeader>
     <AlertDialogFooter>
diff --git a/docs/src/routes/(app)/docs/components/alert.mdx b/docs/src/routes/(app)/docs/components/alert.mdx
index 6f886ec5..4416ef7c 100644
--- a/docs/src/routes/(app)/docs/components/alert.mdx
+++ b/docs/src/routes/(app)/docs/components/alert.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/alert#api-reference
 ---
 
-
-
 <ComponentPreview name="alert-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/alert-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add alert
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/alert.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/alert.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 ```
 
 ```tsx
@@ -77,6 +70,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 <ComponentPreview name="alert-destructive" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/alert-destructive.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/badge.mdx b/docs/src/routes/(app)/docs/components/badge.mdx
index b2d4fdfa..883b504d 100644
--- a/docs/src/routes/(app)/docs/components/badge.mdx
+++ b/docs/src/routes/(app)/docs/components/badge.mdx
@@ -4,11 +4,10 @@ description: Displays a badge or a component that looks like a badge.
 component: true
 ---
 
-
-
 <ComponentPreview name="badge-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/badge-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -17,12 +16,10 @@ component: true
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add badge
 ```
 
-
 <Step >
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
@@ -44,7 +41,7 @@ npx shadcn-solid@latest add badge
 ## Usage
 
 ```tsx
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge"
 ```
 
 ```tsx
@@ -56,7 +53,7 @@ import { Badge } from "@/components/ui/badge";
 You can use the `badgeVariants` helper to create a link that looks like a badge.
 
 ```tsx
-import { badgeVariants } from "@/components/ui/badge";
+import { badgeVariants } from "@/components/ui/badge"
 ```
 
 ```tsx
@@ -80,6 +77,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="badge-secondary" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/badge-secondary.tsx
+
 ```
 
 </ComponentPreview>
@@ -89,6 +87,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="badge-destructive" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/badge-destructive.tsx
+
 ```
 
 </ComponentPreview>
@@ -98,6 +97,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="badge-outline" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/badge-outline.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/button.mdx b/docs/src/routes/(app)/docs/components/button.mdx
index 35776b3d..e97ae539 100644
--- a/docs/src/routes/(app)/docs/components/button.mdx
+++ b/docs/src/routes/(app)/docs/components/button.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/button#api-reference
 ---
 
-
-
 <ComponentPreview name="button-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add button
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/button.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/button.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 ```
 
 ```tsx
@@ -69,7 +62,7 @@ import { Button } from "@/components/ui/button";
 You can use the `buttonVariants` helper to create a link that looks like a button.
 
 ```tsx
-import { buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button"
 ```
 
 ```tsx
@@ -93,6 +86,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-secondary" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-secondary.tsx
+
 ```
 
 </ComponentPreview>
@@ -102,6 +96,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-destructive" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-destructive.tsx
+
 ```
 
 </ComponentPreview>
@@ -111,6 +106,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-outline" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-outline.tsx
+
 ```
 
 </ComponentPreview>
@@ -120,6 +116,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-ghost" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-ghost.tsx
+
 ```
 
 </ComponentPreview>
@@ -129,6 +126,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-link" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-link.tsx
+
 ```
 
 </ComponentPreview>
@@ -138,6 +136,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-with-icon" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-with-icon.tsx
+
 ```
 
 </ComponentPreview>
@@ -147,6 +146,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-loading" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-loading.tsx
+
 ```
 
 </ComponentPreview>
@@ -156,6 +156,7 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 <ComponentPreview name="button-as-child" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/button-as-child.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/card.mdx b/docs/src/routes/(app)/docs/components/card.mdx
index d52d3cc8..3016c8b1 100644
--- a/docs/src/routes/(app)/docs/components/card.mdx
+++ b/docs/src/routes/(app)/docs/components/card.mdx
@@ -4,11 +4,10 @@ description: Displays a card with header, content, and footer.
 component: true
 ---
 
-
-
 <ComponentPreview name="card-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/card-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -17,18 +16,14 @@ component: true
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add card
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/card.tsx
@@ -39,9 +34,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/card.tsx
@@ -60,8 +53,8 @@ import {
   CardDescription,
   CardFooter,
   CardHeader,
-  CardTitle
-} from "@/components/ui/card";
+  CardTitle,
+} from "@/components/ui/card"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/carousel.mdx b/docs/src/routes/(app)/docs/components/carousel.mdx
index 0d161b9e..b056930e 100644
--- a/docs/src/routes/(app)/docs/components/carousel.mdx
+++ b/docs/src/routes/(app)/docs/components/carousel.mdx
@@ -7,11 +7,10 @@ link:
   api: https://www.embla-carousel.com/api
 ---
 
-
-
 <ComponentPreview name="carousel-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/carousel-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add carousel
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/carousel.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/carousel.tsx
@@ -62,8 +55,8 @@ import {
   CarouselContent,
   CarouselItem,
   CarouselNext,
-  CarouselPrevious
-} from "@/components/ui/carousel";
+  CarouselPrevious,
+} from "@/components/ui/carousel"
 ```
 
 ```tsx
@@ -87,6 +80,7 @@ To set the size of the items, you can use the `basis` utility class on the `<Car
 <ComponentPreview name="carousel-size" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/carousel-size.tsx
+
 ```
 
 </ComponentPreview>
@@ -120,6 +114,7 @@ To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<Car
 <ComponentPreview name="carousel-spacing" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/carousel-spacing.tsx
+
 ```
 
 </ComponentPreview>
@@ -151,6 +146,7 @@ Use the `orientation` prop to set the orientation of the carousel.
 <ComponentPreview name="carousel-orientation" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/carousel-orientation.tsx
+
 ```
 
 </ComponentPreview>
@@ -191,6 +187,7 @@ Use a state and the `setApi` props to get an instance of the carousel API.
 <ComponentPreview name="carousel-api-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/carousel-api-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -289,6 +286,7 @@ export function Example() {
 <ComponentPreview name="carousel-plugin" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/carousel-plugin.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/chart.mdx b/docs/src/routes/(app)/docs/components/chart.mdx
index 70f74d32..3291dfbd 100644
--- a/docs/src/routes/(app)/docs/components/chart.mdx
+++ b/docs/src/routes/(app)/docs/components/chart.mdx
@@ -8,4 +8,4 @@ Introducing **Charts**. A collection of chart components that you can copy and p
 
 Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.
 
-[Browse the Charts Library](/charts).
\ No newline at end of file
+[Browse the Charts Library](/charts).
diff --git a/docs/src/routes/(app)/docs/components/checkbox.mdx b/docs/src/routes/(app)/docs/components/checkbox.mdx
index 3fb17e8a..22db4c95 100644
--- a/docs/src/routes/(app)/docs/components/checkbox.mdx
+++ b/docs/src/routes/(app)/docs/components/checkbox.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/checkbox#api-reference
 ---
 
-
-
 <ComponentPreview name="checkbox-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/checkbox-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add checkbox
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/checkbox.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/checkbox.tsx
@@ -57,12 +50,12 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Checkbox, CheckboxControl } from "@/components/ui/checkbox";
+import { Checkbox, CheckboxControl } from "@/components/ui/checkbox"
 ```
 
 ```tsx
 <Checkbox>
-    <CheckboxControl />
+  <CheckboxControl />
 </Checkbox>
 ```
 
@@ -73,6 +66,7 @@ import { Checkbox, CheckboxControl } from "@/components/ui/checkbox";
 <ComponentPreview name="checkbox-with-text" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/checkbox-with-text.tsx
+
 ```
 
 </ComponentPreview>
@@ -82,6 +76,7 @@ import { Checkbox, CheckboxControl } from "@/components/ui/checkbox";
 <ComponentPreview name="checkbox-disabled" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/checkbox-disabled.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/collapsible.mdx b/docs/src/routes/(app)/docs/components/collapsible.mdx
index 6cd8791a..6fefc088 100644
--- a/docs/src/routes/(app)/docs/components/collapsible.mdx
+++ b/docs/src/routes/(app)/docs/components/collapsible.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/collapsible#api-reference
 ---
 
-
-
 <ComponentPreview name="collapsible-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/collapsible-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add collapsible
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/collapsible.tsx
@@ -47,20 +42,20 @@ module.exports = {
       keyframes: {
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: "var(--kb-collapsible-content-height)" }
+          to: { height: "var(--kb-collapsible-content-height)" },
         },
         "collapsible-up": {
           from: { height: "var(--kb-collapsible-content-height)" },
-          to: { height: 0 }
-        }
+          to: { height: 0 },
+        },
       },
       animation: {
         "collapsible-down": "collapsible-down 0.2s ease-out",
-        "collapsible-up": "collapsible-up 0.2s ease-out"
-      }
-    }
-  }
-};
+        "collapsible-up": "collapsible-up 0.2s ease-out",
+      },
+    },
+  },
+}
 ```
 
 </Step>
@@ -68,9 +63,7 @@ module.exports = {
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/collapsible.tsx
@@ -86,7 +79,7 @@ export default defineConfig({
         "collapsible-down":
           "{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
         "collapsible-up":
-          "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }"
+          "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }",
       },
       timingFns: {
         "collapsible-down": "ease-out",
@@ -95,10 +88,10 @@ export default defineConfig({
       durations: {
         "collapsible-down": "0.2s",
         "collapsible-up": "0.2s",
-      }
-    }
-  }
-});
+      },
+    },
+  },
+})
 ```
 
 </Step>
@@ -111,15 +104,16 @@ export default defineConfig({
 import {
   Collapsible,
   CollapsibleContent,
-  CollapsibleTrigger
-} from "@/components/ui/collapsible";
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
 ```
 
 ```tsx
 <Collapsible>
   <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
   <CollapsibleContent>
-    Yes. Free to use for personal and commercial projects. No attribution required.
+    Yes. Free to use for personal and commercial projects. No attribution
+    required.
   </CollapsibleContent>
 </Collapsible>
 ```
diff --git a/docs/src/routes/(app)/docs/components/combobox.mdx b/docs/src/routes/(app)/docs/components/combobox.mdx
index 552937c0..69f631db 100644
--- a/docs/src/routes/(app)/docs/components/combobox.mdx
+++ b/docs/src/routes/(app)/docs/components/combobox.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/combobox#api-reference
 ---
 
-
-
 <ComponentPreview name="combobox-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/combobox-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add combobox
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/combobox.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/combobox.tsx
@@ -57,31 +50,34 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
+import { createSignal } from "solid-js"
+import { createFilter } from "@kobalte/core"
+
 import {
   Combobox,
+  ComboboxContent,
   ComboboxItem,
   ComboboxTrigger,
-  ComboboxContent
-} from "@/components/ui/combobox";
-import { createFilter } from "@kobalte/core";
-import { createSignal } from "solid-js";
+} from "@/components/ui/combobox"
 ```
 
 ```tsx
-const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];
+const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]
 
-const filter = createFilter({ sensitivity: "base" });
-const [options, setOptions] = createSignal(ALL_OPTIONS);
+const filter = createFilter({ sensitivity: "base" })
+const [options, setOptions] = createSignal(ALL_OPTIONS)
 const onInputChange = (value: string) => {
-  setOptions(ALL_OPTIONS.filter(option => filter.contains(option, value)));
-};
+  setOptions(ALL_OPTIONS.filter((option) => filter.contains(option, value)))
+}
 ```
 
 ```tsx
 <Combobox
   options={options()}
   onInputChange={onInputChange}
-  itemComponent={props => <ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>}
+  itemComponent={(props) => (
+    <ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
+  )}
 >
   <ComboboxTrigger>
     <ComboboxInput />
diff --git a/docs/src/routes/(app)/docs/components/command.mdx b/docs/src/routes/(app)/docs/components/command.mdx
index c931bffc..1a90611b 100644
--- a/docs/src/routes/(app)/docs/components/command.mdx
+++ b/docs/src/routes/(app)/docs/components/command.mdx
@@ -6,11 +6,10 @@ link:
   doc: https://cmdk-solid.vercel.app
 ---
 
-
-
 <ComponentPreview name="command-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/command-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -19,18 +18,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add command
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install cmdk-solid
-```
+```bash npm install cmdk-solid ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/command.tsx
@@ -41,9 +36,7 @@ npm install cmdk-solid
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install cmdk-solid
-```
+```bash npm install cmdk-solid ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/command.tsx
@@ -96,6 +89,7 @@ import {
 <ComponentPreview name="command-dialog" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/command-dialog.tsx
+
 ```
 
 </ComponentPreview>
@@ -104,35 +98,35 @@ To show the command menu in a dialog, use the `<CommandDialog />` component.
 
 ```tsx
 export function CommandMenu() {
-  const [open, setOpen] = createSignal(false);
+  const [open, setOpen] = createSignal(false)
 
   createEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen(open => !open);
+        e.preventDefault()
+        setOpen((open) => !open)
       }
-    };
+    }
 
-    document.addEventListener("keydown", down);
+    document.addEventListener("keydown", down)
 
     onCleanup(() => {
-      document.removeEventListener("keydown", down);
-    });
-  });
+      document.removeEventListener("keydown", down)
+    })
+  })
 
   return (
     <CommandDialog open={open()} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>Calendar</CommandItem>
-            <CommandItem>Search Emoji</CommandItem>
-            <CommandItem>Calculator</CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-  );
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Calculator</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  )
 }
 ```
diff --git a/docs/src/routes/(app)/docs/components/context-menu.mdx b/docs/src/routes/(app)/docs/components/context-menu.mdx
index 78e877d2..c7fa0d40 100644
--- a/docs/src/routes/(app)/docs/components/context-menu.mdx
+++ b/docs/src/routes/(app)/docs/components/context-menu.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/context-menu#api-reference
 ---
 
-
-
 <ComponentPreview name="context-menu-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/context-menu-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add context-menu
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/context-menu.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/context-menu.tsx
@@ -61,8 +54,8 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
-  ContextMenuTrigger
-} from "@/components/ui/context-menu";
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/data-table.mdx b/docs/src/routes/(app)/docs/components/data-table.mdx
index 968f2877..e40cc0d6 100644
--- a/docs/src/routes/(app)/docs/components/data-table.mdx
+++ b/docs/src/routes/(app)/docs/components/data-table.mdx
@@ -6,11 +6,10 @@ link:
   doc: https://tanstack.com/table/latest/docs/introduction
 ---
 
-
-
 <ComponentPreview name="data-table-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/data-table-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -59,12 +58,12 @@ We are going to build a table to show tasks. Here's what our data looks like:
 
 ```tsx
 type Task = {
-  id: string;
-  code: string;
-  title: string;
-  status: "todo" | "in-progress" | "done" | "cancelled";
-  label: "bug" | "feature" | "enhancement" | "documentation";
-};
+  id: string
+  code: string
+  title: string
+  status: "todo" | "in-progress" | "done" | "cancelled"
+  label: "bug" | "feature" | "enhancement" | "documentation"
+}
 
 export const tasks: Task[] = [
   {
@@ -72,7 +71,7 @@ export const tasks: Task[] = [
     code: "TASK-33",
     title: "We need to bypass the redundant AI interface!",
     status: "todo",
-    label: "bug"
+    label: "bug",
   },
   {
     id: "RsrTg_SmBKPKwbUlr7Ztv",
@@ -80,10 +79,10 @@ export const tasks: Task[] = [
     title:
       "Overriding the capacitor won't do anything, we need to generate the solid state JBOD pixel!",
     status: "in-progress",
-    label: "feature"
-  }
+    label: "feature",
+  },
   // ...
-];
+]
 ```
 
 ## Project Structure
@@ -114,32 +113,32 @@ Let's start by building a basic table.
 First, we'll define our columns.
 
 ```tsx title="src/routes/_components/columns.tsx" {1,13-26}
-import type { ColumnDef } from "@tanstack/solid-table";
+import type { ColumnDef } from "@tanstack/solid-table"
 
 // This type is used to define the shape of our data.
 // You can use a Zod or Validbot schema here if you want.
 export type Task = {
-  id: string;
-  code: string;
-  title: string;
-  status: "todo" | "in-progress" | "done" | "cancelled";
-  label: "bug" | "feature" | "enhancement" | "documentation";
-};
+  id: string
+  code: string
+  title: string
+  status: "todo" | "in-progress" | "done" | "cancelled"
+  label: "bug" | "feature" | "enhancement" | "documentation"
+}
 
 export const columns: ColumnDef<Task>[] = [
   {
     accessorKey: "code",
-    header: "Task"
+    header: "Task",
   },
   {
     accessorKey: "title",
-    header: "Title"
+    header: "Title",
   },
   {
     accessorKey: "status",
-    header: "Status"
-  }
-];
+    header: "Status",
+  },
+]
 ```
 
 ### `<DataTable />` component
@@ -147,50 +146,58 @@ export const columns: ColumnDef<Task>[] = [
 Next, we'll create a `<DataTable />` component to render our table.
 
 ```tsx title="src/routes/_components/data-table.tsx"
-import type { ColumnDef } from "@tanstack/solid-table";
-import { flexRender, createSolidTable, getCoreRowModel } from "@tanstack/solid-table";
-import { For, Show, splitProps, Accessor } from "solid-js";
+import { Accessor, For, Show, splitProps } from "solid-js"
+import {
+  createSolidTable,
+  flexRender,
+  getCoreRowModel,
+  type ColumnDef,
+} from "@tanstack/solid-table"
+
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
-  TableRow
-} from "@/components/ui/table";
+  TableRow,
+} from "@/components/ui/table"
 
 type Props<TData, TValue> = {
-  columns: ColumnDef<TData, TValue>[];
-  data: Accessor<TData[] | undefined>;
-};
+  columns: ColumnDef<TData, TValue>[]
+  data: Accessor<TData[] | undefined>
+}
 
 export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
-  const [local] = splitProps(props, ["columns", "data"]);
+  const [local] = splitProps(props, ["columns", "data"])
 
   const table = createSolidTable({
     get data() {
-      return local.data() || [];
+      return local.data() || []
     },
     columns: local.columns,
-    getCoreRowModel: getCoreRowModel()
-  });
+    getCoreRowModel: getCoreRowModel(),
+  })
 
   return (
     <div class="rounded-md border">
       <Table>
         <TableHeader>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <TableRow>
                 <For each={headerGroup.headers}>
-                  {header => {
+                  {(header) => {
                     return (
                       <TableHead>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(header.column.columnDef.header, header.getContext())}
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
                       </TableHead>
-                    );
+                    )
                   }}
                 </For>
               </TableRow>
@@ -202,19 +209,25 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
             when={table.getRowModel().rows?.length}
             fallback={
               <TableRow>
-                <TableCell colSpan={local.columns.length} class="h-24 text-center">
+                <TableCell
+                  colSpan={local.columns.length}
+                  class="h-24 text-center"
+                >
                   No results.
                 </TableCell>
               </TableRow>
             }
           >
             <For each={table.getRowModel().rows}>
-              {row => (
+              {(row) => (
                 <TableRow data-state={row.getIsSelected() && "selected"}>
                   <For each={row.getVisibleCells()}>
-                    {cell => (
+                    {(cell) => (
                       <TableCell>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
                       </TableCell>
                     )}
                   </For>
@@ -225,8 +238,8 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
         </TableBody>
       </Table>
     </div>
-  );
-};
+  )
+}
 ```
 
 ### Render the table
@@ -234,11 +247,10 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
 Finally, we'll render our table in our index page.
 
 ```tsx title="src/routes/index.tsx" {30}
-import type { Task } from "./_components/columns";
-import { columns } from "./_components/columns";
-import { DataTable } from "./_components/data-table";
-import type { RouteDefinition } from "@solidjs/router";
-import { cache, createAsync } from "@solidjs/router";
+import { cache, createAsync, type RouteDefinition } from "@solidjs/router"
+
+import { columns, type Task } from "./_components/columns"
+import { DataTable } from "./_components/data-table"
 
 const getData = cache(async (): Promise<Task[]> => {
   // Fetch data from your API here.
@@ -248,27 +260,27 @@ const getData = cache(async (): Promise<Task[]> => {
       code: "TASK-33",
       title: "We need to bypass the redundant AI interface!",
       status: "todo",
-      label: "bug"
-    }
+      label: "bug",
+    },
     // ...
-  ];
-}, "data");
+  ]
+}, "data")
 
 export const route: RouteDefinition = {
-  load: () => getData()
-};
+  load: () => getData(),
+}
 
 const Home = () => {
-  const data = createAsync(() => getData());
+  const data = createAsync(() => getData())
 
   return (
     <div class="w-full space-y-2.5">
       <DataTable columns={columns} data={data} />
     </div>
-  );
-};
+  )
+}
 
-export default Home;
+export default Home
 ```
 
 </Step>
@@ -283,8 +295,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 export const columns: ColumnDef<Task>[] = [
   // ...
@@ -293,7 +305,11 @@ export const columns: ColumnDef<Task>[] = [
     cell: () => (
       <DropdownMenu placement="bottom-end">
         <DropdownMenuTrigger class="flex items-center justify-center">
-          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-4"
+            viewBox="0 0 24 24"
+          >
             <path
               fill="none"
               stroke="currentColor"
@@ -309,10 +325,10 @@ export const columns: ColumnDef<Task>[] = [
           <DropdownMenuItem>Delete</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    )
-  }
+    ),
+  },
   // ...
-];
+]
 ```
 
 You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
@@ -329,17 +345,17 @@ Next, we'll add pagination to our table.
 //...
 import {
   //...
-  getPaginationRowModel
-} from "@tanstack/solid-table";
+  getPaginationRowModel,
+} from "@tanstack/solid-table"
 
 export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
   const table = createSolidTable({
     //...
-    getPaginationRowModel: getPaginationRowModel()
-  });
+    getPaginationRowModel: getPaginationRowModel(),
+  })
 
   // ...
-};
+}
 ```
 
 This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination.
@@ -394,11 +410,11 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) {
 //...
 import {
   //...
-  getSortedRowModel
-} from "@tanstack/solid-table";
+  getSortedRowModel,
+} from "@tanstack/solid-table"
 
 export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
-  const [sorting, setSorting] = createSignal<SortingState>([]);
+  const [sorting, setSorting] = createSignal<SortingState>([])
 
   const table = createSolidTable({
     //...
@@ -406,13 +422,13 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
     getSortedRowModel: getSortedRowModel(),
     state: {
       get sorting() {
-        return sorting();
-      }
-    }
-  });
+        return sorting()
+      },
+    },
+  })
 
   // ...
-};
+}
 ```
 
 ### Make header cell sortable
@@ -421,7 +437,7 @@ Update the `status` header cell to add sorting controls.
 
 ```tsx title="src/routes/_components/columns.tsx" {2,6-33}
 //...
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 export const columns: ColumnDef<Task>[] = [
   // ...
@@ -450,11 +466,11 @@ export const columns: ColumnDef<Task>[] = [
             />
           </svg>
         </Button>
-      );
-    }
-  }
+      )
+    },
+  },
   // ...
-];
+]
 ```
 
 </Step>
@@ -469,13 +485,13 @@ Add filter to the title. See the [filtering docs](https://tanstack.com/table/v8/
 //...
 import {
   //...
-  getFilteredRowModel
-} from "@tanstack/solid-table";
-import { TextFieldRoot, TextField } from "~/components/ui/textfield";
+  getFilteredRowModel,
+} from "@tanstack/solid-table"
+import { TextField, TextFieldRoot } from "~/components/ui/textfield"
 
 export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
   //...
-  const [columnFilters, setColumnFilters] = createSignal<ColumnFiltersState>([]);
+  const [columnFilters, setColumnFilters] = createSignal<ColumnFiltersState>([])
 
   const table = createSolidTable({
     //...
@@ -484,25 +500,27 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
     state: {
       //...
       get columnFilters() {
-        return columnFilters();
-      }
-    }
-  });
+        return columnFilters()
+      },
+    },
+  })
 
-  <div>
+  ;<div>
     <div class="flex items-center py-4">
       <TextFieldRoot>
         <TextField
           placeholder="Filter title..."
           value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
-          onInput={event => table.getColumn("title")?.setFilterValue(event.currentTarget.value)}
+          onInput={(event) =>
+            table.getColumn("title")?.setFilterValue(event.currentTarget.value)
+          }
           class="max-w-sm"
         />
       </TextFieldRoot>
     </div>
     <div class="rounded-md border">...</div>
-  </div>;
-};
+  </div>
+}
 ```
 
 ## Visibility
@@ -513,19 +531,22 @@ Adding column visibility using visibility API.
 
 ```tsx title="src/routes/_components/data-table.tsx" {2-9,13,17,20-22,30-54}
 //...
-import { As } from "@kobalte/core";
-import { Button } from "~/components/ui/button";
+import { As } from "@kobalte/core"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+import { Button } from "~/components/ui/button"
+
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
   //...
-  const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
+    {}
+  )
 
   const table = createSolidTable({
     //...
@@ -533,32 +554,31 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
     state: {
       //...
       get columnVisibility() {
-        return columnVisibility();
-      }
-    }
-  });
+        return columnVisibility()
+      },
+    },
+  })
 
-  <div>
+  ;<div>
     <div class="flex items-center py-4">
       //...
       <DropdownMenu>
-        <DropdownMenuTrigger as={(props: DropdownMenuTriggerProps) => (
-            <Button
-              {...props}
-              variant="outline"
-              class="ml-auto"
-            >
+        <DropdownMenuTrigger
+          as={(props: DropdownMenuTriggerProps) => (
+            <Button {...props} variant="outline" class="ml-auto">
               Columns
             </Button>
           )}
         />
         <DropdownMenuContent>
-          <For each={table.getAllColumns().filter(column => column.getCanHide())}>
-            {item => (
+          <For
+            each={table.getAllColumns().filter((column) => column.getCanHide())}
+          >
+            {(item) => (
               <DropdownMenuCheckboxItem
                 class="capitalize"
                 checked={item.getIsVisible()}
-                onChange={value => item.toggleVisibility(!!value)}
+                onChange={(value) => item.toggleVisibility(!!value)}
               >
                 {item.id}
               </DropdownMenuCheckboxItem>
@@ -568,8 +588,8 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
       </DropdownMenu>
     </div>
     <div class="rounded-md border">...</div>
-  </div>;
-};
+  </div>
+}
 ```
 
 ## Row Selection
@@ -582,7 +602,7 @@ Next, we're going to add row selection to our table.
 
 ```tsx title="src/routes/_components/columns.tsx" {2,5-28}
 //...
-import { Checkbox, CheckboxControl } from "@/components/ui/checkbox";
+import { Checkbox, CheckboxControl } from "@/components/ui/checkbox"
 
 export const columns: ColumnDef<Task>[] = [
   {
@@ -591,7 +611,7 @@ export const columns: ColumnDef<Task>[] = [
       <Checkbox
         indeterminate={table.getIsSomePageRowsSelected()}
         checked={table.getIsAllPageRowsSelected()}
-        onChange={value => table.toggleAllPageRowsSelected(!!value)}
+        onChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
       >
         <CheckboxControl />
@@ -600,17 +620,17 @@ export const columns: ColumnDef<Task>[] = [
     cell: ({ row }) => (
       <Checkbox
         checked={row.getIsSelected()}
-        onChange={value => row.toggleSelected(!!value)}
+        onChange={(value) => row.toggleSelected(!!value)}
         aria-label="Select row"
       >
         <CheckboxControl />
       </Checkbox>
     ),
     enableSorting: false,
-    enableHiding: false
-  }
+    enableHiding: false,
+  },
   // ...
-];
+]
 ```
 
 ### Update `<DataTable>`
@@ -620,7 +640,7 @@ export const columns: ColumnDef<Task>[] = [
 
 export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
   //...
-  const [rowSelection, setRowSelection] = createSignal({});
+  const [rowSelection, setRowSelection] = createSignal({})
 
   const table = createSolidTable({
     //...
@@ -628,13 +648,13 @@ export const DataTable = <TData, TValue>(props: Props<TData, TValue>) => {
     state: {
       // ...
       get rowSelection() {
-        return rowSelection();
-      }
-    }
-  });
+        return rowSelection()
+      },
+    },
+  })
 
-  <div>...</div>;
-};
+  ;<div>...</div>
+}
 ```
 
 ### Show selected rows
@@ -643,9 +663,9 @@ You can show the number of selected rows using the `table.getFilteredSelectedRow
 
 ```tsx
 <div class="text-muted-foreground flex-1 text-sm">
-  {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{" "}
-  row(s) selected.
+  {table.getFilteredSelectedRowModel().rows.length} of{" "}
+  {table.getFilteredRowModel().rows.length} row(s) selected.
 </div>
 ```
 
-</Step>
\ No newline at end of file
+</Step>
diff --git a/docs/src/routes/(app)/docs/components/date-picker.mdx b/docs/src/routes/(app)/docs/components/date-picker.mdx
index c467a412..986b362b 100644
--- a/docs/src/routes/(app)/docs/components/date-picker.mdx
+++ b/docs/src/routes/(app)/docs/components/date-picker.mdx
@@ -7,11 +7,10 @@ link:
   api: https://ark-ui.com/solid/docs/components/date-picker#api-reference
 ---
 
-
-
 <ComponentPreview name="date-picker-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/date-picker-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add date-picker
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @ark-ui/solid
-```
+```bash npm install @ark-ui/solid ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/date-picker.tsx
@@ -42,9 +37,7 @@ npm install @ark-ui/solid
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @ark-ui/solid
-```
+```bash npm install @ark-ui/solid ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/date-picker.tsx
@@ -57,6 +50,8 @@ npm install @ark-ui/solid
 ## Usage
 
 ```tsx
+import { Portal } from "solid-js/web"
+
 import {
   DatePicker,
   DatePickerContent,
@@ -72,9 +67,8 @@ import {
   DatePickerTableRow,
   DatePickerView,
   DatePickerViewControl,
-  DatePickerViewTrigger
-} from "@/components/ui/date-picker";
-import { Portal } from "solid-js/web";
+  DatePickerViewTrigger,
+} from "@/components/ui/date-picker"
 ```
 
 ```tsx
@@ -84,7 +78,7 @@ import { Portal } from "solid-js/web";
     <DatePickerContent>
       <DatePickerView view="day">
         <DatePickerContext>
-          {api => (
+          {(api) => (
             <>
               <DatePickerViewControl>
                 <DatePickerViewTrigger>
@@ -95,18 +89,24 @@ import { Portal } from "solid-js/web";
                 <DatePickerTableHead>
                   <DatePickerTableRow>
                     <For each={api().weekDays}>
-                      {weekDay => <DatePickerTableHeader>{weekDay.short}</DatePickerTableHeader>}
+                      {(weekDay) => (
+                        <DatePickerTableHeader>
+                          {weekDay.short}
+                        </DatePickerTableHeader>
+                      )}
                     </For>
                   </DatePickerTableRow>
                 </DatePickerTableHead>
                 <DatePickerTableBody>
                   <For each={api().weeks}>
-                    {week => (
+                    {(week) => (
                       <DatePickerTableRow>
                         <For each={week}>
-                          {day => (
+                          {(day) => (
                             <DatePickerTableCell value={day}>
-                              <DatePickerTableCellTrigger>{day.day}</DatePickerTableCellTrigger>
+                              <DatePickerTableCellTrigger>
+                                {day.day}
+                              </DatePickerTableCellTrigger>
                             </DatePickerTableCell>
                           )}
                         </For>
@@ -121,7 +121,7 @@ import { Portal } from "solid-js/web";
       </DatePickerView>
       <DatePickerView view="month">
         <DatePickerContext>
-          {api => (
+          {(api) => (
             <>
               <DatePickerViewControl>
                 <DatePickerViewTrigger>
@@ -133,15 +133,17 @@ import { Portal } from "solid-js/web";
                   <For
                     each={api().getMonthsGrid({
                       columns: 4,
-                      format: "short"
+                      format: "short",
                     })}
                   >
-                    {months => (
+                    {(months) => (
                       <DatePickerTableRow>
                         <For each={months}>
-                          {month => (
+                          {(month) => (
                             <DatePickerTableCell value={month.value}>
-                              <DatePickerTableCellTrigger>{month.label}</DatePickerTableCellTrigger>
+                              <DatePickerTableCellTrigger>
+                                {month.label}
+                              </DatePickerTableCellTrigger>
                             </DatePickerTableCell>
                           )}
                         </For>
@@ -156,7 +158,7 @@ import { Portal } from "solid-js/web";
       </DatePickerView>
       <DatePickerView view="year">
         <DatePickerContext>
-          {api => (
+          {(api) => (
             <>
               <DatePickerViewControl>
                 <DatePickerViewTrigger>
@@ -167,15 +169,17 @@ import { Portal } from "solid-js/web";
                 <DatePickerTableBody>
                   <For
                     each={api().getYearsGrid({
-                      columns: 4
+                      columns: 4,
                     })}
                   >
-                    {years => (
+                    {(years) => (
                       <DatePickerTableRow>
                         <For each={years}>
-                          {year => (
+                          {(year) => (
                             <DatePickerTableCell value={year.value}>
-                              <DatePickerTableCellTrigger>{year.label}</DatePickerTableCellTrigger>
+                              <DatePickerTableCellTrigger>
+                                {year.label}
+                              </DatePickerTableCellTrigger>
                             </DatePickerTableCell>
                           )}
                         </For>
@@ -200,6 +204,7 @@ import { Portal } from "solid-js/web";
 <ComponentPreview name="date-picker-with-range-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/date-picker-with-range-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -209,6 +214,7 @@ import { Portal } from "solid-js/web";
 <ComponentPreview name="calendar-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/calendar-demo.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/dialog.mdx b/docs/src/routes/(app)/docs/components/dialog.mdx
index ea6e460b..d4aae764 100644
--- a/docs/src/routes/(app)/docs/components/dialog.mdx
+++ b/docs/src/routes/(app)/docs/components/dialog.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/dialog#api-reference
 ---
 
-
-
 <ComponentPreview name="dialog-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/dialog-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add dialog
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/dialog.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/dialog.tsx
@@ -63,8 +56,8 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
-} from "@/components/ui/dialog";
+  DialogTrigger,
+} from "@/components/ui/dialog"
 ```
 
 ```tsx
@@ -74,8 +67,8 @@ import {
     <DialogHeader>
       <DialogTitle>Are you sure absolutely sure?</DialogTitle>
       <DialogDescription>
-        This action cannot be undone. This will permanently delete your account and remove your data
-        from our servers.
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
       </DialogDescription>
     </DialogHeader>
   </DialogContent>
diff --git a/docs/src/routes/(app)/docs/components/drawer.mdx b/docs/src/routes/(app)/docs/components/drawer.mdx
index 36a358d6..9aaca69c 100644
--- a/docs/src/routes/(app)/docs/components/drawer.mdx
+++ b/docs/src/routes/(app)/docs/components/drawer.mdx
@@ -23,9 +23,7 @@ npx shadcn-solid@latest add drawer
 <Step>
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @corvu/drawer
-```
+```bash npm install @corvu/drawer ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/drawer.tsx
@@ -36,9 +34,7 @@ npm install @corvu/drawer
 <Step>
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @corvu/drawer
-```
+```bash npm install @corvu/drawer ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/drawer.tsx
@@ -59,8 +55,8 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerLabel,
-  DrawerTrigger
-} from "@/components/ui/drawer";
+  DrawerTrigger,
+} from "@/components/ui/drawer"
 ```
 
 ```tsx
@@ -70,8 +66,8 @@ import {
     <DialogHeader>
       <DrawerLabel>Are you sure absolutely sure?</DrawerLabel>
       <DialogDescription>
-        This action cannot be undone. This will permanently delete your account and remove your data
-        from our servers.
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
       </DialogDescription>
     </DialogHeader>
   </DrawerContent>
@@ -87,4 +83,4 @@ Use the `side` property to `<Drawer />` to indicate the edge of the screen where
 <ComponentPreview name="drawer-side-demo" >
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/drawer-side-demo.tsx
 ```
-</ComponentPreview>
\ No newline at end of file
+</ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/dropdown-menu.mdx b/docs/src/routes/(app)/docs/components/dropdown-menu.mdx
index fd931ed9..279e4813 100644
--- a/docs/src/routes/(app)/docs/components/dropdown-menu.mdx
+++ b/docs/src/routes/(app)/docs/components/dropdown-menu.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/dropdown-menu#api-reference
 ---
 
-
-
 <ComponentPreview name="dropdown-menu-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/dropdown-menu-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add dropdown-menu
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/dropdown-menu.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/dropdown-menu.tsx
@@ -63,8 +56,8 @@ import {
   DropdownMenuItem,
   DropdownMenuItemLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 ```
 
 ```tsx
@@ -88,6 +81,7 @@ import {
 <ComponentPreview name="dropdown-menu-checkboxes" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/dropdown-menu-checkboxes.tsx
+
 ```
 
 </ComponentPreview>
@@ -97,6 +91,7 @@ import {
 <ComponentPreview name="dropdown-menu-radio-group" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/dropdown-menu-radio-group.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/hover-card.mdx b/docs/src/routes/(app)/docs/components/hover-card.mdx
index 64268ece..d674cac1 100644
--- a/docs/src/routes/(app)/docs/components/hover-card.mdx
+++ b/docs/src/routes/(app)/docs/components/hover-card.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/hover-card#api-reference
 ---
 
-
-
 <ComponentPreview name="hover-card-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/hover-card-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add hover-card
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/hover-card.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/hover-card.tsx
@@ -57,7 +50,11 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/menubar.mdx b/docs/src/routes/(app)/docs/components/menubar.mdx
index 4a7bd9e1..1bd431e5 100644
--- a/docs/src/routes/(app)/docs/components/menubar.mdx
+++ b/docs/src/routes/(app)/docs/components/menubar.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/menubar#api-reference
 ---
 
-
-
 <ComponentPreview name="menubar-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/menubar-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add menubar
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/menubar.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/menubar.tsx
diff --git a/docs/src/routes/(app)/docs/components/navigation-menu.mdx b/docs/src/routes/(app)/docs/components/navigation-menu.mdx
index b7f31bb0..94658a79 100644
--- a/docs/src/routes/(app)/docs/components/navigation-menu.mdx
+++ b/docs/src/routes/(app)/docs/components/navigation-menu.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/navigation-menu#api-reference
 ---
 
-
-
 <ComponentPreview name="navigation-menu-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/navigation-menu-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,11 +19,10 @@ link:
 
 <ComponentInstallation >
 
-    
         ```bash
         npx shadcn-solid@latest add navigation-menu
         ```
-    
+
 
     <Step >
 
@@ -35,7 +33,8 @@ link:
 
         <StepItem>Copy and paste the following code into your project:</StepItem>
         ```tsx file=<rootDir>/src/registry/tailwindcss/ui/navigation-menu.tsx
-```
+
+````
 
     </Step>
 
@@ -48,7 +47,7 @@ link:
 
         <StepItem>Copy and paste the following code into your project:</StepItem>
         ```tsx file=<rootDir>/../packages/unocss/ui/navigation-menu.tsx
-```
+````
 
     </Step>
 
@@ -71,7 +70,7 @@ import {
   <NavigationMenuItem>
     <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
     <NavigationMenuContent>
-        <NavigationMenuLink>Link</NavigationMenuLink>
+      <NavigationMenuLink>Link</NavigationMenuLink>
     </NavigationMenuContent>
   </NavigationMenuItem>
 </NavigationMenu>
diff --git a/docs/src/routes/(app)/docs/components/number-field.mdx b/docs/src/routes/(app)/docs/components/number-field.mdx
index 240e91e9..8bac678a 100644
--- a/docs/src/routes/(app)/docs/components/number-field.mdx
+++ b/docs/src/routes/(app)/docs/components/number-field.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/number-field#api-reference
 ---
 
-
-
 <ComponentPreview name="number-field-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/number-field-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add number-field
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/number-field.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/number-field.tsx
@@ -64,17 +57,17 @@ import {
   NumberFieldGroup,
   NumberFieldIncrementTrigger,
   NumberFieldInput,
-  NumberFieldLabel
-} from "@components/ui/number-field";
+  NumberFieldLabel,
+} from "@components/ui/number-field"
 ```
 
 ```tsx
 <NumberField>
-    <NumberFieldGroup>
-        <NumberFieldDecrementTrigger aria-label="Decrement" />
-        <NumberFieldInput />
-        <NumberFieldIncrementTrigger aria-label="Increment" />
-    </NumberFieldGroup>
+  <NumberFieldGroup>
+    <NumberFieldDecrementTrigger aria-label="Decrement" />
+    <NumberFieldInput />
+    <NumberFieldIncrementTrigger aria-label="Increment" />
+  </NumberFieldGroup>
 </NumberField>
 ```
 
@@ -85,6 +78,7 @@ import {
 <ComponentPreview name="number-field-disabled-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/number-field-disabled-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -94,6 +88,7 @@ import {
 <ComponentPreview name="number-field-with-error-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/number-field-with-error-demo.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/otp-field.mdx b/docs/src/routes/(app)/docs/components/otp-field.mdx
index 6480cd1d..034316b1 100644
--- a/docs/src/routes/(app)/docs/components/otp-field.mdx
+++ b/docs/src/routes/(app)/docs/components/otp-field.mdx
@@ -7,11 +7,10 @@ link:
   api: https://corvu.dev/docs/primitives/otp-field#api-reference
 ---
 
-
-
 <ComponentPreview name="otp-field-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/otp-field-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add otp-field
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @corvu/otp-field
-```
+```bash npm install @corvu/otp-field ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/otp-field.tsx
@@ -47,20 +42,20 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--kb-accordion-content-height)" }
+          to: { height: "var(--kb-accordion-content-height)" },
         },
         "accordion-up": {
           from: { height: "var(--kb-accordion-content-height)" },
-          to: { height: 0 }
-        }
+          to: { height: 0 },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out"
-      }
-    }
-  }
-};
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+}
 ```
 
 </Step>
@@ -68,9 +63,7 @@ module.exports = {
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @corvu/otp-field
-```
+```bash npm install @corvu/otp-field ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/otp-field.tsx
@@ -83,20 +76,20 @@ export default defineConfig({
   themes: {
     animation: {
       keyframes: {
-        "caret-blink": "{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }"
+        "caret-blink": "{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }",
       },
       timingFns: {
-        "caret-blink": "ease-out"
+        "caret-blink": "ease-out",
       },
       durations: {
-        "caret-blink": "1.25s"
+        "caret-blink": "1.25s",
       },
       counts: {
-        "caret-blink": "infinite"
-      }
-    }
-  }
-});
+        "caret-blink": "infinite",
+      },
+    },
+  },
+})
 ```
 
 </Step>
@@ -111,8 +104,8 @@ import {
   OTPFieldGroup,
   OTPFieldInput,
   OTPFieldSeparator,
-  OTPFieldSlot
-} from "@/components/ui/otp-field";
+  OTPFieldSlot,
+} from "@/components/ui/otp-field"
 ```
 
 ```tsx
@@ -141,6 +134,7 @@ Use the `pattern` prop to define a custom pattern for the OTP field.
 <ComponentPreview name="otp-field-with-pattern-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/otp-field-with-pattern-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -152,6 +146,7 @@ You can use the `value` and `onValueChange` props to control the input value.
 <ComponentPreview name="otp-field-with-controlled-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/otp-field-with-controlled-demo.tsx
+
 ```
 
-</ComponentPreview>
\ No newline at end of file
+</ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/pagination.mdx b/docs/src/routes/(app)/docs/components/pagination.mdx
index db93a90f..7c8a3dff 100644
--- a/docs/src/routes/(app)/docs/components/pagination.mdx
+++ b/docs/src/routes/(app)/docs/components/pagination.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/pagination#api-reference
 ---
 
-
-
 <ComponentPreview name="pagination-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/pagination-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add pagination
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/pagination.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/pagination.tsx
@@ -63,14 +56,16 @@ import {
   PaginationItem,
   PaginationItems,
   PaginationNext,
-  PaginationPrevious
-} from "@/components/ui/pagination";
+  PaginationPrevious,
+} from "@/components/ui/pagination"
 ```
 
 ```tsx
 <Pagination
   count={10}
-  itemComponent={props => <PaginationItem page={props.page}>{props.page}</PaginationItem>}
+  itemComponent={(props) => (
+    <PaginationItem page={props.page}>{props.page}</PaginationItem>
+  )}
   ellipsisComponent={() => <PaginationEllipsis />}
 >
   <PaginationPrevious />
diff --git a/docs/src/routes/(app)/docs/components/popover.mdx b/docs/src/routes/(app)/docs/components/popover.mdx
index dc9b2370..39d08387 100644
--- a/docs/src/routes/(app)/docs/components/popover.mdx
+++ b/docs/src/routes/(app)/docs/components/popover.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/popover#api-reference
 ---
 
-
-
 <ComponentPreview name="popover-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/popover-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add popover
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/popover.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/popover.tsx
@@ -57,7 +50,11 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/progress.mdx b/docs/src/routes/(app)/docs/components/progress.mdx
index fa8a478d..bbb2a2f3 100644
--- a/docs/src/routes/(app)/docs/components/progress.mdx
+++ b/docs/src/routes/(app)/docs/components/progress.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/progress#api-reference
 ---
 
-
-
 <ComponentPreview name="progress-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/progress-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add progress
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/progress.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/progress.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Progress } from "@/components/ui/progress";
+import { Progress } from "@/components/ui/progress"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/radio-group.mdx b/docs/src/routes/(app)/docs/components/radio-group.mdx
index 1c1b7be2..76f619d3 100644
--- a/docs/src/routes/(app)/docs/components/radio-group.mdx
+++ b/docs/src/routes/(app)/docs/components/radio-group.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/radio-group#api-reference
 ---
 
-
-
 <ComponentPreview name="radio-group-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/radio-group-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add radio-group
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/radio-group.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/radio-group.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/resizable.mdx b/docs/src/routes/(app)/docs/components/resizable.mdx
index 23ea95c9..ffac7ca8 100644
--- a/docs/src/routes/(app)/docs/components/resizable.mdx
+++ b/docs/src/routes/(app)/docs/components/resizable.mdx
@@ -7,11 +7,10 @@ link:
   api: https://corvu.dev/docs/primitives/resizable#api-reference
 ---
 
-
-
 <ComponentPreview name="resizable-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/resizable-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add resizable
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @corvu/resizable
-```
+```bash npm install @corvu/resizable ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/resizable.tsx
@@ -42,9 +37,7 @@ npm install @corvu/resizable
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @corvu/resizable
-```
+```bash npm install @corvu/resizable ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/resizable.tsx
@@ -57,7 +50,11 @@ npm install @corvu/resizable
 ## Usage
 
 ```tsx
-import { Resizable, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";
+import {
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/components/ui/resizable"
 ```
 
 ```tsx
@@ -77,6 +74,7 @@ Use the `orientation` prop to set the orientation of the resizable panels.
 <ComponentPreview name="resizable-vertical-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/resizable-vertical-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -88,6 +86,7 @@ You can set or hide the handle by using the `withHandle` prop on the `ResizableH
 <ComponentPreview name="resizable-with-handle-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/resizable-with-handle-demo.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/select.mdx b/docs/src/routes/(app)/docs/components/select.mdx
index 3d16ed97..9d035f00 100644
--- a/docs/src/routes/(app)/docs/components/select.mdx
+++ b/docs/src/routes/(app)/docs/components/select.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/select#api-reference
 ---
 
-
-
 <ComponentPreview name="select-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/select-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add select
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/select.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/select.tsx
@@ -62,17 +55,19 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from "@/components/ui/select";
+  SelectValue,
+} from "@/components/ui/select"
 ```
 
 ```tsx
 <Select
   options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-  itemComponent={props => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+  itemComponent={(props) => (
+    <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+  )}
 >
   <SelectTrigger>
-    <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
+    <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
   </SelectTrigger>
   <SelectContent />
 </Select>
diff --git a/docs/src/routes/(app)/docs/components/separator.mdx b/docs/src/routes/(app)/docs/components/separator.mdx
index d7ac4e0f..73f14691 100644
--- a/docs/src/routes/(app)/docs/components/separator.mdx
+++ b/docs/src/routes/(app)/docs/components/separator.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/separator#api-reference
 ---
 
-
-
 <ComponentPreview name="separator-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/separator-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add separator
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/separator.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/separator.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@/components/ui/separator"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/sidebar.mdx b/docs/src/routes/(app)/docs/components/sidebar.mdx
index b5e3bb20..614c0d1d 100644
--- a/docs/src/routes/(app)/docs/components/sidebar.mdx
+++ b/docs/src/routes/(app)/docs/components/sidebar.mdx
@@ -29,9 +29,7 @@ Customizable.
 <Step >
 
 <StepItem>Run the following command to install `sidebar.tsx`</StepItem>
-```bash
-npx shadcn-solid@latest add sidebar
-```
+```bash npx shadcn-solid@latest add sidebar ```
 
 </Step>
 
@@ -175,7 +173,7 @@ A `Sidebar` component is composed of the following parts:
   width="716"
   height="420"
   alt="Sidebar Structure"
-  class="border dark:hidden rounded-lg overflow-hidden mt-6 w-full"
+  class="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
 />
 
 <img
@@ -183,15 +181,16 @@ A `Sidebar` component is composed of the following parts:
   width="716"
   height="420"
   alt="Sidebar Structure"
-  class="border hidden dark:block rounded-lg overflow-hidden mt-6 w-full"
+  class="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
 />
 
 ## Usage
 
 ```tsx title="src/routes/index.tsx"
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/app-sidebar";
-import type { RouteSectionProps } from "@solidjs/router";
+import type { RouteSectionProps } from "@solidjs/router"
+
+import { AppSidebar } from "@/components/app-sidebar"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 
 const Page = (props: RouteSectionProps) => {
   return (
@@ -202,10 +201,10 @@ const Page = (props: RouteSectionProps) => {
         {props.children}
       </main>
     </SidebarProvider>
-  );
-};
+  )
+}
 
-export default Page;
+export default Page
 ```
 
 ```tsx title="src/components/app-sidebar.tsx"
@@ -215,7 +214,7 @@ import {
   SidebarFooter,
   SidebarGroup,
   SidebarHeader,
-} from "@/components/ui/sidebar";
+} from "@/components/ui/sidebar"
 
 export const AppSidebar = () => {
   return (
@@ -227,8 +226,8 @@ export const AppSidebar = () => {
       </SidebarContent>
       <SidebarFooter />
     </Sidebar>
-  );
-};
+  )
+}
 ```
 
 ## Your First Sidebar
@@ -242,9 +241,10 @@ Let's start with the most basic sidebar. A collapsible sidebar with a menu.
 </StepItem>
 
 ```tsx title="src/routes/index.tsx"
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/app-sidebar";
-import type { RouteSectionProps } from "@solidjs/router";
+import type { RouteSectionProps } from "@solidjs/router"
+
+import { AppSidebar } from "@/components/app-sidebar"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 
 const Page = (props: RouteSectionProps) => {
   return (
@@ -255,10 +255,10 @@ const Page = (props: RouteSectionProps) => {
         {props.children}
       </main>
     </SidebarProvider>
-  );
-};
+  )
+}
 
-export default Page;
+export default Page
 ```
 
 <StepItem>
@@ -266,17 +266,17 @@ export default Page;
 </StepItem>
 
 ```tsx title="src/components/app-sidebar.tsx"
-import { Sidebar, SidebarContent } from "@/components/ui/sidebar";
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
 
 const AppSidebar = () => {
   return (
     <Sidebar>
       <SidebarContent />
     </Sidebar>
-  );
-};
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 <StepItem>Now, let's add a `SidebarMenu` to the sidebar.</StepItem>
@@ -293,7 +293,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar";
+} from "@/components/ui/sidebar"
 
 // Menu items.
 const items = [
@@ -408,7 +408,7 @@ const items = [
       </svg>
     ),
   },
-];
+]
 
 const AppSidebar = () => {
   return (
@@ -433,10 +433,10 @@ const AppSidebar = () => {
         </SidebarGroup>
       </SidebarContent>
     </Sidebar>
-  );
-};
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 <StepItem>You've created your first sidebar.</StepItem>
@@ -475,8 +475,8 @@ The `SidebarProvider` component is used to provide the sidebar context to the `S
 If you have a single sidebar in your application, you can use the `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` variables in `sidebar.tsx` to set the width of the sidebar.
 
 ```tsx title="src/components/ui/sidebar.tsx"
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
 ```
 
 For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
@@ -505,7 +505,7 @@ To trigger the sidebar, you use the `cmd+b` keyboard shortcut on Mac and `ctrl+b
 You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT` variable.
 
 ```tsx title="components/ui/sidebar.tsx"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 ```
 
 ## Sidebar
@@ -513,13 +513,13 @@ const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 The main `Sidebar` component used to render a collapsible sidebar.
 
 ```tsx showLineNumbers
-import { Sidebar } from "@/components/ui/sidebar";
+import { Sidebar } from "@/components/ui/sidebar"
 
 const AppSidebar = () => {
-  return <Sidebar />;
-};
+  return <Sidebar />
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 ### Props
@@ -537,13 +537,13 @@ Use the `side` prop to change the side of the sidebar.
 Available options are `left` and `right`.
 
 ```tsx
-import { Sidebar } from "@/components/ui/sidebar";
+import { Sidebar } from "@/components/ui/sidebar"
 
 const AppSidebar = () => {
-  return <Sidebar side="left | right" />;
-};
+  return <Sidebar side="left | right" />
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 ### variant
@@ -553,13 +553,13 @@ Use the `variant` prop to change the variant of the sidebar.
 Available options are `sidebar`, `floating` and `inset`.
 
 ```tsx showLineNumbers
-import { Sidebar } from "@/components/ui/sidebar";
+import { Sidebar } from "@/components/ui/sidebar"
 
 const AppSidebar = () => {
-  return <Sidebar variant="sidebar | floating | inset" />;
-};
+  return <Sidebar variant="sidebar | floating | inset" />
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 <Alert class="bg-[#101010]">
@@ -585,13 +585,13 @@ Use the `collapsible` prop to make the sidebar collapsible.
 Available options are `offcanvas`, `icon` and `none`.
 
 ```tsx
-import { Sidebar } from "@/components/ui/sidebar";
+import { Sidebar } from "@/components/ui/sidebar"
 
 const AppSidebar = () => {
-  return <Sidebar collapsible="offcanvas | icon | none" />;
-};
+  return <Sidebar collapsible="offcanvas | icon | none" />
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 | Prop        | Description                                                  |
@@ -605,7 +605,7 @@ export default AppSidebar;
 The `useSidebar` hook is used to control the sidebar.
 
 ```tsx
-import { useSidebar } from "@/components/ui/sidebar";
+import { useSidebar } from "@/components/ui/sidebar"
 
 const AppSidebar = () => {
   const {
@@ -616,10 +616,10 @@ const AppSidebar = () => {
     setOpenMobile,
     isMobile,
     toggleSidebar,
-  } = useSidebar();
-};
+  } = useSidebar()
+}
 
-export default AppSidebar;
+export default AppSidebar
 ```
 
 | Property        | Type                                                    | Description                                   |
diff --git a/docs/src/routes/(app)/docs/components/skeleton.mdx b/docs/src/routes/(app)/docs/components/skeleton.mdx
index db955c65..6d68ec81 100644
--- a/docs/src/routes/(app)/docs/components/skeleton.mdx
+++ b/docs/src/routes/(app)/docs/components/skeleton.mdx
@@ -4,11 +4,10 @@ description: Use to show a placeholder while content is loading.
 component: true
 ---
 
-
-
 <ComponentPreview name="skeleton-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/skeleton-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -17,12 +16,10 @@ component: true
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add skeleton
 ```
 
-
 <Step >
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
@@ -44,7 +41,7 @@ npx shadcn-solid@latest add skeleton
 ## Usage
 
 ```tsx
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/sonner.mdx b/docs/src/routes/(app)/docs/components/sonner.mdx
index 9edeac3b..6e736b1e 100644
--- a/docs/src/routes/(app)/docs/components/sonner.mdx
+++ b/docs/src/routes/(app)/docs/components/sonner.mdx
@@ -7,11 +7,10 @@ link:
   api: https://oc1s.github.io/somo/toaster/#api-reference
 ---
 
-
-
 <ComponentPreview name="sonner-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/sonner-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add sonner
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install somoto
-```
+```bash npm install somoto ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/sonner.tsx
@@ -42,9 +37,7 @@ npm install somoto
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install somoto
-```
+```bash npm install somoto ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/sonner.tsx
@@ -66,24 +59,24 @@ toast("Event has been created.")
 
 ```tsx title="src/main.tsx" {1,11}
 import { Toaster } from "@/components/ui/sonner"
- 
+
 const App = () => {
   return (
     <Router
-      root={props => (
-          <Suspense>
-            <ColorModeScript />
-            <ColorModeProvider>
-              {props.children}
-              <Toaster />
-            </ColorModeProvider>
-          </Suspense>
+      root={(props) => (
+        <Suspense>
+          <ColorModeScript />
+          <ColorModeProvider>
+            {props.children}
+            <Toaster />
+          </ColorModeProvider>
+        </Suspense>
       )}
     >
       <FileRoutes />
     </Router>
-  );
-};
- 
-export default App;
+  )
+}
+
+export default App
 ```
diff --git a/docs/src/routes/(app)/docs/components/switch.mdx b/docs/src/routes/(app)/docs/components/switch.mdx
index 1d193fe7..3399feb5 100644
--- a/docs/src/routes/(app)/docs/components/switch.mdx
+++ b/docs/src/routes/(app)/docs/components/switch.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/switch#api-reference
 ---
 
-
-
 <ComponentPreview name="switch-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/switch-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add switch
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/switch.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/switch.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Switch, SwitchControl, SwitchThumb } from "@/components/ui/switch";
+import { Switch, SwitchControl, SwitchThumb } from "@/components/ui/switch"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/table.mdx b/docs/src/routes/(app)/docs/components/table.mdx
index 48f406dd..e8c75050 100644
--- a/docs/src/routes/(app)/docs/components/table.mdx
+++ b/docs/src/routes/(app)/docs/components/table.mdx
@@ -4,11 +4,10 @@ description: A responsive table component.
 component: true
 ---
 
-
-
 <ComponentPreview name="table-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/table-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -17,12 +16,10 @@ component: true
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add table
 ```
 
-
 <Step >
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
@@ -51,8 +48,8 @@ import {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow
-} from "@/components/ui/table";
+  TableRow,
+} from "@/components/ui/table"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/components/tabs.mdx b/docs/src/routes/(app)/docs/components/tabs.mdx
index 9f7e3fef..1efab94e 100644
--- a/docs/src/routes/(app)/docs/components/tabs.mdx
+++ b/docs/src/routes/(app)/docs/components/tabs.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/tabs#api-reference
 ---
 
-
-
 <ComponentPreview name="tabs-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/tabs-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add tabs
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/tabs.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/tabs.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 ```
 
 ```tsx
@@ -78,6 +71,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 <ComponentPreview name="tabs-orientation-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/tabs-orientation-demo.tsx
+
 ```
 
-</ComponentPreview>
\ No newline at end of file
+</ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/textarea.mdx b/docs/src/routes/(app)/docs/components/textarea.mdx
index d9bd7fc2..cd13eac0 100644
--- a/docs/src/routes/(app)/docs/components/textarea.mdx
+++ b/docs/src/routes/(app)/docs/components/textarea.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/text-field#api-reference
 ---
 
-
-
 <ComponentPreview name="textarea-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textarea-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add textarea
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/textarea.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/textarea.tsx
@@ -57,8 +50,8 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { TextArea } from "@/components/ui/textarea";
-import { TextFieldRoot } from "@/components/ui/textfield";
+import { TextArea } from "@/components/ui/textarea"
+import { TextFieldRoot } from "@/components/ui/textfield"
 ```
 
 ```tsx
@@ -74,6 +67,7 @@ import { TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textarea-disabled" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textarea-disabled.tsx
+
 ```
 
 </ComponentPreview>
@@ -83,6 +77,7 @@ import { TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textarea-with-label" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textarea-with-label.tsx
+
 ```
 
 </ComponentPreview>
@@ -92,6 +87,7 @@ import { TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textarea-with-text" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textarea-with-text.tsx
+
 ```
 
 </ComponentPreview>
@@ -101,6 +97,7 @@ import { TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textarea-with-button" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textarea-with-button.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/textfield.mdx b/docs/src/routes/(app)/docs/components/textfield.mdx
index dcfd0fca..e370ee3e 100644
--- a/docs/src/routes/(app)/docs/components/textfield.mdx
+++ b/docs/src/routes/(app)/docs/components/textfield.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/text-field#api-reference
 ---
 
-
-
 <ComponentPreview name="textfield-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add textfield
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/textfield.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/textfield.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { TextField, TextFieldRoot } from "@/components/ui/textfield";
+import { TextField, TextFieldRoot } from "@/components/ui/textfield"
 ```
 
 ```tsx
@@ -73,6 +66,7 @@ import { TextField, TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textfield-disabled" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-disabled.tsx
+
 ```
 
 </ComponentPreview>
@@ -82,6 +76,7 @@ import { TextField, TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textfield-with-label" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-with-label.tsx
+
 ```
 
 </ComponentPreview>
@@ -91,6 +86,7 @@ import { TextField, TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textfield-with-text" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-with-text.tsx
+
 ```
 
 </ComponentPreview>
@@ -100,6 +96,7 @@ import { TextField, TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textfield-with-error" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-with-error.tsx
+
 ```
 
 </ComponentPreview>
@@ -109,6 +106,7 @@ import { TextField, TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textfield-with-button" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-with-button.tsx
+
 ```
 
 </ComponentPreview>
@@ -118,6 +116,7 @@ import { TextField, TextFieldRoot } from "@/components/ui/textfield";
 <ComponentPreview name="textfield-file" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/textfield-file.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/toast.mdx b/docs/src/routes/(app)/docs/components/toast.mdx
index 2c2bcb49..0e40f468 100644
--- a/docs/src/routes/(app)/docs/components/toast.mdx
+++ b/docs/src/routes/(app)/docs/components/toast.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/toast#api-reference
 ---
 
-
-
 <ComponentPreview name="toast-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toast-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add toast
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/toast.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/toast.tsx
@@ -57,17 +50,18 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { toaster } from "@kobalte/core";
+import { toaster } from "@kobalte/core"
+
 import {
   Toast,
   ToastContent,
   ToastProgress,
-  ToastTitle
-} from "@/components/ui/toast";
+  ToastTitle,
+} from "@/components/ui/toast"
 ```
 
 ```tsx
-toaster.show(props => (
+toaster.show((props) => (
   <Toast toastId={props.toastId}>
     <ToastContent>
       <ToastTitle>Toast</ToastTitle>
@@ -78,29 +72,29 @@ toaster.show(props => (
 ```
 
 ```tsx title="src/main.tsx" {1,11-13}
-import { ToastRegion, ToastList } from "@/components/ui/toast"
- 
+import { ToastList, ToastRegion } from "@/components/ui/toast"
+
 const App = () => {
   return (
     <Router
-      root={props => (
-          <Suspense>
-            <ColorModeScript />
-            <ColorModeProvider>
-              {props.children}
-              <ToastRegion>
-                <ToastList />
-              </ToastRegion>
-            </ColorModeProvider>
-          </Suspense>
+      root={(props) => (
+        <Suspense>
+          <ColorModeScript />
+          <ColorModeProvider>
+            {props.children}
+            <ToastRegion>
+              <ToastList />
+            </ToastRegion>
+          </ColorModeProvider>
+        </Suspense>
       )}
     >
       <FileRoutes />
     </Router>
-  );
-};
- 
-export default App;
+  )
+}
+
+export default App
 ```
 
 ## Examples
@@ -110,6 +104,7 @@ export default App;
 <ComponentPreview name="toast-destructive" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toast-destructive.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/toggle-group.mdx b/docs/src/routes/(app)/docs/components/toggle-group.mdx
index b81e6901..643e0398 100644
--- a/docs/src/routes/(app)/docs/components/toggle-group.mdx
+++ b/docs/src/routes/(app)/docs/components/toggle-group.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/toggle-group#api-reference
 ---
 
-
-
 <ComponentPreview name="toggle-group-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-group-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add toggle-group
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/toggle-group.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/toggle-group.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 ```
 
 ```tsx
@@ -75,6 +68,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 <ComponentPreview name="toggle-group-outline-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-group-outline-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -84,6 +78,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 <ComponentPreview name="toggle-group-single-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-group-single-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -93,6 +88,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 <ComponentPreview name="toggle-group-small-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-group-small-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -102,6 +98,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 <ComponentPreview name="toggle-group-large-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-group-large-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -111,6 +108,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 <ComponentPreview name="toggle-group-disabled-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-group-disabled-demo.tsx
+
 ```
 
-</ComponentPreview>
\ No newline at end of file
+</ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/toggle.mdx b/docs/src/routes/(app)/docs/components/toggle.mdx
index dacbb514..82e7bce5 100644
--- a/docs/src/routes/(app)/docs/components/toggle.mdx
+++ b/docs/src/routes/(app)/docs/components/toggle.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/toggle-button#api-reference
 ---
 
-
-
 <ComponentPreview name="toggle-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add toggle
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/toggle.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/toggle.tsx
@@ -57,7 +50,7 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { ToggleButton } from "@/components/ui/toggle";
+import { ToggleButton } from "@/components/ui/toggle"
 ```
 
 ```tsx
@@ -71,6 +64,7 @@ import { ToggleButton } from "@/components/ui/toggle";
 <ComponentPreview name="toggle-outline" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-outline.tsx
+
 ```
 
 </ComponentPreview>
@@ -80,6 +74,7 @@ import { ToggleButton } from "@/components/ui/toggle";
 <ComponentPreview name="toggle-with-text" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-with-text.tsx
+
 ```
 
 </ComponentPreview>
@@ -89,6 +84,7 @@ import { ToggleButton } from "@/components/ui/toggle";
 <ComponentPreview name="toggle-small" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-small.tsx
+
 ```
 
 </ComponentPreview>
@@ -98,6 +94,7 @@ import { ToggleButton } from "@/components/ui/toggle";
 <ComponentPreview name="toggle-large" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-large.tsx
+
 ```
 
 </ComponentPreview>
@@ -107,6 +104,7 @@ import { ToggleButton } from "@/components/ui/toggle";
 <ComponentPreview name="toggle-disabled" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/toggle-disabled.tsx
+
 ```
 
 </ComponentPreview>
diff --git a/docs/src/routes/(app)/docs/components/tooltip.mdx b/docs/src/routes/(app)/docs/components/tooltip.mdx
index bd213e0a..6a523e75 100644
--- a/docs/src/routes/(app)/docs/components/tooltip.mdx
+++ b/docs/src/routes/(app)/docs/components/tooltip.mdx
@@ -7,11 +7,10 @@ link:
   api: https://kobalte.dev/docs/core/components/tooltip#api-reference
 ---
 
-
-
 <ComponentPreview name="tooltip-demo" >
 
 ```tsx file=<rootDir>/src/registry/tailwindcss/examples/tooltip-demo.tsx
+
 ```
 
 </ComponentPreview>
@@ -20,18 +19,14 @@ link:
 
 <ComponentInstallation >
 
-
 ```bash
 npx shadcn-solid@latest add tooltip
 ```
 
-
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/src/registry/tailwindcss/ui/tooltip.tsx
@@ -42,9 +37,7 @@ npm install @kobalte/core
 <Step >
 
 <StepItem>Install the following dependencies:</StepItem>
-```bash
-npm install @kobalte/core
-```
+```bash npm install @kobalte/core ```
 
 <StepItem>Copy and paste the following code into your project:</StepItem>
 ```tsx file=<rootDir>/../packages/unocss/ui/tooltip.tsx
@@ -57,7 +50,11 @@ npm install @kobalte/core
 ## Usage
 
 ```tsx
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 ```
 
 ```tsx
diff --git a/docs/src/routes/(app)/docs/dark-mode.mdx b/docs/src/routes/(app)/docs/dark-mode.mdx
index b9e3eae0..29865ac3 100644
--- a/docs/src/routes/(app)/docs/dark-mode.mdx
+++ b/docs/src/routes/(app)/docs/dark-mode.mdx
@@ -10,39 +10,45 @@ description: Adding dark mode to your site.
 Add the `ColorModeProvider` and `ColorModeScript` to your app.
 
 ```tsx {1,9-13,16-18,25-26} title="src/app.tsx"
-import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR } from "@kobalte/core";
-import { MetaProvider } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start";
-import { Suspense } from "solid-js";
-import { isServer } from "solid-js/web";
-import { getCookie } from "vinxi/http";
+import { Suspense } from "solid-js"
+import { isServer } from "solid-js/web"
+import { MetaProvider } from "@solidjs/meta"
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start"
+import {
+  ColorModeProvider,
+  ColorModeScript,
+  cookieStorageManagerSSR,
+} from "@kobalte/core"
+import { getCookie } from "vinxi/http"
 
 const getServerCookies = () => {
-	"use server";
-	const colorMode = getCookie("kb-color-mode");
-	return colorMode ? `kb-color-mode=${colorMode}` : "";
-};
+  "use server"
+  const colorMode = getCookie("kb-color-mode")
+  return colorMode ? `kb-color-mode=${colorMode}` : ""
+}
 
 export default function App() {
   const storageManager = cookieStorageManagerSSR(
-		isServer ? getServerCookies() : document.cookie,
-	);
+    isServer ? getServerCookies() : document.cookie
+  )
 
   return (
     <Router
-      root={props => (
+      root={(props) => (
         <MetaProvider>
           <Suspense>
             <ColorModeScript storageType={storageManager.type} />
-            <ColorModeProvider storageManager={storageManager}>{props.children}</ColorModeProvider>
+            <ColorModeProvider storageManager={storageManager}>
+              {props.children}
+            </ColorModeProvider>
           </Suspense>
         </MetaProvider>
       )}
     >
       <FileRoutes />
     </Router>
-  );
+  )
 }
 ```
 
diff --git a/docs/src/routes/(app)/docs/figma.mdx b/docs/src/routes/(app)/docs/figma.mdx
index 2506315e..f3217ffd 100644
--- a/docs/src/routes/(app)/docs/figma.mdx
+++ b/docs/src/routes/(app)/docs/figma.mdx
@@ -8,7 +8,7 @@ The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skiran
 <div class="mt-4 aspect-video w-full">
   <iframe
     src="https://embed.figma.com/file/1203061493325953101/hf_embed?community_viewer=true&embed_host=shadcn&hub_file_id=1203061493325953101&kind=&viewer=1"
-    class="h-full w-full overflow-hidden rounded-lg border bg-muted"
+    class="bg-muted h-full w-full overflow-hidden rounded-lg border"
   />
 </div>
 
diff --git a/docs/src/routes/(app)/docs/installation/astro.mdx b/docs/src/routes/(app)/docs/installation/astro.mdx
index c7044f27..3836d5cf 100644
--- a/docs/src/routes/(app)/docs/installation/astro.mdx
+++ b/docs/src/routes/(app)/docs/installation/astro.mdx
@@ -63,7 +63,7 @@ npm add -D unocss
 Then create uno.config.ts in the root of your project:
 
 ```ts title="uno.config.ts"
-import { defineConfig } from 'unocss'
+import { defineConfig } from "unocss"
 
 export default defineConfig({
   // ...UnoCSS options
@@ -73,16 +73,13 @@ export default defineConfig({
 Finally add UnoCSS integration to Astro config file:
 
 ```ts title="astro.config.mjs"{3,9}
-import { defineConfig } from 'astro/config'
 import solidJs from "@astrojs/solid-js"
-import UnoCSS from 'unocss/astro'
+import { defineConfig } from "astro/config"
+import UnoCSS from "unocss/astro"
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [
-    solidJs(),
-    UnoCSS(),
-  ],
+  integrations: [solidJs(), UnoCSS()],
 })
 ```
 
diff --git a/docs/src/routes/(app)/docs/installation/manual.mdx b/docs/src/routes/(app)/docs/installation/manual.mdx
index 56d9d63b..3fb2c80c 100644
--- a/docs/src/routes/(app)/docs/installation/manual.mdx
+++ b/docs/src/routes/(app)/docs/installation/manual.mdx
@@ -43,22 +43,22 @@ I'm use the `@` alias to make it easier to import your components. This is how y
 ```
 
 ```ts title="app.config.ts"{10-14}
-import { defineConfig } from "@solidjs/start/config";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { defineConfig } from "@solidjs/start/config"
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export default defineConfig({
   vite: {
     resolve: {
       alias: {
-        "@": resolve(__dirname, "./src")
-      }
-    }
-  }
-});
+        "@": resolve(__dirname, "./src"),
+      },
+    },
+  },
+})
 ```
 
 If you prefer to use a different alias than `@`, you'll need to update the `import` statements when adding components.
@@ -68,7 +68,7 @@ If you prefer to use a different alias than `@`, you'll need to update the `impo
 This is what this project's `tailwind.config.cjs` file looks like:
 
 ```js title="tailwind.config.cjs"
-const { fontFamily } = require("tailwindcss/defaultTheme");
+const { fontFamily } = require("tailwindcss/defaultTheme")
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -76,7 +76,7 @@ export default {
   content: [
     "src/routes/**/*.{ts,tsx,mdx}",
     "src/components/**/*.{ts,tsx}",
-    "src/registry/**/*.{ts,tsx}"
+    "src/registry/**/*.{ts,tsx}",
   ],
   theme: {
     extend: {
@@ -84,8 +84,8 @@ export default {
         center: true,
         padding: "2rem",
         screens: {
-          "2xl": "1400px"
-        }
+          "2xl": "1400px",
+        },
       },
       colors: {
         border: "hsl(var(--border))",
@@ -95,86 +95,91 @@ export default {
         foreground: "hsl(var(--foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
+          foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {
           DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
           DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          foreground: "hsl(var(--accent-foreground))",
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          foreground: "hsl(var(--popover-foreground))",
         },
         card: {
           DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
-        }
+          foreground: "hsl(var(--card-foreground))",
+        },
       },
       borderRadius: {
         lg: `var(--radius)`,
         md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)"
+        sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
-        sans: ["Inter Variable", ...fontFamily.sans]
+        sans: ["Inter Variable", ...fontFamily.sans],
       },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--kb-accordion-content-height)" }
+          to: { height: "var(--kb-accordion-content-height)" },
         },
         "accordion-up": {
           from: { height: "var(--kb-accordion-content-height)" },
-          to: { height: 0 }
+          to: { height: 0 },
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: "var(--kb-collapsible-content-height)" }
+          to: { height: "var(--kb-collapsible-content-height)" },
         },
         "collapsible-up": {
           from: { height: "var(--kb-collapsible-content-height)" },
-          to: { height: 0 }
-        }
+          to: { height: 0 },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "collapsible-down": "collapsible-down 0.2s ease-out",
-        "collapsible-up": "collapsible-up 0.2s ease-out"
-      }
-    }
+        "collapsible-up": "collapsible-up 0.2s ease-out",
+      },
+    },
   },
-  plugins: [require("tailwindcss-animate")]
-};
+  plugins: [require("tailwindcss-animate")],
+}
 ```
 
 or `uno.config.ts`
 
 ```ts title="uno.config.ts"
-import { defineConfig, presetUno, transformerDirectives, transformerVariantGroup } from "unocss";
-import presetAnimations from "unocss-preset-animations";
+import {
+  defineConfig,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from "unocss"
+import presetAnimations from "unocss-preset-animations"
 
 export default defineConfig({
   presets: [
     presetUno({
       dark: {
         dark: '[data-kb-theme="dark"]',
-        light: '[data-kb-theme="light"]'
-      }
+        light: '[data-kb-theme="light"]',
+      },
     }),
-    presetAnimations()
+    presetAnimations(),
   ],
   transformers: [transformerVariantGroup(), transformerDirectives()],
   theme: {
@@ -186,63 +191,64 @@ export default defineConfig({
       foreground: "hsl(var(--foreground))",
       primary: {
         DEFAULT: "hsl(var(--primary))",
-        foreground: "hsl(var(--primary-foreground))"
+        foreground: "hsl(var(--primary-foreground))",
       },
       secondary: {
         DEFAULT: "hsl(var(--secondary))",
-        foreground: "hsl(var(--secondary-foreground))"
+        foreground: "hsl(var(--secondary-foreground))",
       },
       destructive: {
         DEFAULT: "hsl(var(--destructive))",
-        foreground: "hsl(var(--destructive-foreground))"
+        foreground: "hsl(var(--destructive-foreground))",
       },
       muted: {
         DEFAULT: "hsl(var(--muted))",
-        foreground: "hsl(var(--muted-foreground))"
+        foreground: "hsl(var(--muted-foreground))",
       },
       accent: {
         DEFAULT: "hsl(var(--accent))",
-        foreground: "hsl(var(--accent-foreground))"
+        foreground: "hsl(var(--accent-foreground))",
       },
       popover: {
         DEFAULT: "hsl(var(--popover))",
-        foreground: "hsl(var(--popover-foreground))"
+        foreground: "hsl(var(--popover-foreground))",
       },
       card: {
         DEFAULT: "hsl(var(--card))",
-        foreground: "hsl(var(--card-foreground))"
-      }
+        foreground: "hsl(var(--card-foreground))",
+      },
     },
     borderRadius: {
       lg: `var(--radius)`,
       md: `calc(var(--radius) - 2px)`,
-      sm: "calc(var(--radius) - 4px)"
+      sm: "calc(var(--radius) - 4px)",
     },
     animation: {
       keyframes: {
         "accordion-down":
           "{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
-        "accordion-up": "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
+        "accordion-up":
+          "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
         "collapsible-down":
           "{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
         "collapsible-up":
-          "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }"
+          "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }",
       },
       timingFns: {
         "accordion-down": "ease-out",
         "accordion-up": "ease-out",
         "collapsible-down": "ease-out",
-        "collapsible-up": "ease-out"
+        "collapsible-up": "ease-out",
       },
       durations: {
         "accordion-down": "0.2s",
         "accordion-up": "0.2s",
         "collapsible-down": "0.2s",
-        "collapsible-up": "0.2s"
-      }
-    }
-  }
-});
+        "collapsible-up": "0.2s",
+      },
+    },
+  },
+})
 ```
 
 ### Configure styles
@@ -406,11 +412,10 @@ body {
 I use a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in `src/libs/cn.ts`:
 
 ```ts title="src/libs/cn.ts"
-import type { ClassValue } from "clsx";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
+import clsx, { type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
-export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));
+export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists))
 ```
 
 ### That's it
diff --git a/docs/src/routes/(app)/docs/installation/solid-start.mdx b/docs/src/routes/(app)/docs/installation/solid-start.mdx
index 80acd59c..4d0b8bda 100644
--- a/docs/src/routes/(app)/docs/installation/solid-start.mdx
+++ b/docs/src/routes/(app)/docs/installation/solid-start.mdx
@@ -31,22 +31,22 @@ I'm use the `@` alias to make it easier to import your components. This is how y
 ```
 
 ```ts title="app.config.ts"{10-14}
-import { defineConfig } from "@solidjs/start/config";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { defineConfig } from "@solidjs/start/config"
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export default defineConfig({
   vite: {
     resolve: {
       alias: {
-        "@": resolve(__dirname, "./src")
-      }
-    }
-  }
-});
+        "@": resolve(__dirname, "./src"),
+      },
+    },
+  },
+})
 ```
 
 ### Run the CLI
diff --git a/docs/src/routes/(app)/docs/theming.mdx b/docs/src/routes/(app)/docs/theming.mdx
index 50e96cbb..e114706c 100644
--- a/docs/src/routes/(app)/docs/theming.mdx
+++ b/docs/src/routes/(app)/docs/theming.mdx
@@ -196,11 +196,11 @@ module.exports = {
     extend: {
       colors: {
         warning: "hsl(var(--warning))",
-        "warning-foreground": "hsl(var(--warning-foreground))"
-      }
-    }
-  }
-};
+        "warning-foreground": "hsl(var(--warning-foreground))",
+      },
+    },
+  },
+}
 ```
 
 or using uno.
@@ -210,10 +210,10 @@ export default defineConfig({
   theme: {
     colors: {
       warning: "hsl(var(--warning))",
-      "warning-foreground": "hsl(var(--warning-foreground))"
-    }
-  }
-});
+      "warning-foreground": "hsl(var(--warning-foreground))",
+    },
+  },
+})
 ```
 
 You can now use the `warning` utility class in your components.
diff --git a/docs/src/routes/(app)/examples.tsx b/docs/src/routes/(app)/examples.tsx
index 176e6205..052ad85a 100644
--- a/docs/src/routes/(app)/examples.tsx
+++ b/docs/src/routes/(app)/examples.tsx
@@ -1,49 +1,50 @@
-import { Announcement } from "@/components/announcement";
-import ExampleNav from "@/components/example-nav";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import type { RouteSectionProps } from "@solidjs/router";
+import type { RouteSectionProps } from "@solidjs/router"
+
+import { Announcement } from "@/components/announcement"
+import ExampleNav from "@/components/example-nav"
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const ExamplesLayout = (props: RouteSectionProps) => {
-	return (
-		<>
-			<section class="border-grid border-b">
-				<div class="container-wrapper">
-					<div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
-						<Announcement />
-						<h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
-							Build your component library
-						</h1>
-						<p class="max-w-2xl text-balance text-lg font-light text-foreground">
-							Beautifully designed components that you can copy and paste into
-							your apps. Open source.
-						</p>
-						<div class="flex w-full items-center justify-start gap-2 py-2">
-							<Button as="a" href="/docs/introduction" size="sm">
-								Get Started
-							</Button>
-							<Button as="a" size="sm" variant="ghost" href="/blocks">
-								Browse Blocks
-							</Button>
-						</div>
-					</div>
-				</div>
-			</section>
-			<div class="border-grid border-b">
-				<div class="container-wrapper">
-					<div class="container py-4">
-						<ExampleNav />
-					</div>
-				</div>
-			</div>
-			<div class="container-wrapper">
-				<div class="container py-6">
-					<section class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-						{props.children}
-					</section>
-				</div>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <section class="border-grid border-b">
+        <div class="container-wrapper">
+          <div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+            <Announcement />
+            <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
+              Build your component library
+            </h1>
+            <p class="text-foreground max-w-2xl text-balance text-lg font-light">
+              Beautifully designed components that you can copy and paste into
+              your apps. Open source.
+            </p>
+            <div class="flex w-full items-center justify-start gap-2 py-2">
+              <Button as="a" href="/docs/introduction" size="sm">
+                Get Started
+              </Button>
+              <Button as="a" size="sm" variant="ghost" href="/blocks">
+                Browse Blocks
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="border-grid border-b">
+        <div class="container-wrapper">
+          <div class="container py-4">
+            <ExampleNav />
+          </div>
+        </div>
+      </div>
+      <div class="container-wrapper">
+        <div class="container py-6">
+          <section class="bg-background overflow-hidden rounded-[0.5rem] border shadow">
+            {props.children}
+          </section>
+        </div>
+      </div>
+    </>
+  )
+}
 
-export default ExamplesLayout;
+export default ExamplesLayout
diff --git a/docs/src/routes/(app)/examples/_components/authentication/ui.tsx b/docs/src/routes/(app)/examples/_components/authentication/ui.tsx
index bd5018af..1f5a7560 100644
--- a/docs/src/routes/(app)/examples/_components/authentication/ui.tsx
+++ b/docs/src/routes/(app)/examples/_components/authentication/ui.tsx
@@ -1,100 +1,101 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { buttonVariants } from "@/registry/tailwindcss/ui/button";
-import { UserAuthForm } from "./user-auth-form";
+import { cn } from "@/registry/tailwindcss/libs/cn"
+import { buttonVariants } from "@/registry/tailwindcss/ui/button"
+
+import { UserAuthForm } from "./user-auth-form"
 
 const AuthenticationUI = () => {
-	return (
-		<>
-			<div class="md:hidden">
-				<img
-					src="/examples/authentication-light.png"
-					width={1280}
-					height={843}
-					alt="Authentication"
-					class="block dark:hidden"
-				/>
-				<img
-					src="/examples/authentication-dark.png"
-					width={1280}
-					height={843}
-					alt="Authentication"
-					class="hidden dark:block"
-				/>
-			</div>
-			<div class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
-				<a
-					href="/examples/authentication"
-					class={cn(
-						buttonVariants({ variant: "ghost" }),
-						"absolute right-4 top-4 md:right-8 md:top-8",
-					)}
-				>
-					Login
-				</a>
-				<div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
-					<div class="absolute inset-0 bg-zinc-900" />
-					<div class="relative z-20 flex items-center text-lg font-medium">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							class="mr-2 h-6 w-6"
-						>
-							<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-							<title>Logo</title>
-						</svg>
-						Acme Inc
-					</div>
-					<div class="relative z-20 mt-auto">
-						<blockquote class="space-y-2">
-							<p class="text-lg">
-								&ldquo;This library has saved me countless hours of work and
-								helped me deliver stunning designs to my clients faster than
-								ever before.&rdquo;
-							</p>
-							<footer class="text-sm">Sofia Davis</footer>
-						</blockquote>
-					</div>
-				</div>
-				<div class="lg:p-8">
-					<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-						<div class="flex flex-col space-y-2 text-center">
-							<h1 class="text-2xl font-semibold tracking-tight">
-								Create an account
-							</h1>
-							<p class="text-sm text-muted-foreground">
-								Enter your email below to create your account
-							</p>
-						</div>
-						<UserAuthForm />
-						<p class="px-8 text-center text-sm text-muted-foreground">
-							By clicking continue, you agree to our{" "}
-							<a
-								// biome-ignore lint/a11y/useValidAnchor: <explanation>
-								href="#"
-								class="underline underline-offset-4 hover:text-primary"
-							>
-								Terms of Service
-							</a>{" "}
-							and{" "}
-							<a
-								// biome-ignore lint/a11y/useValidAnchor: <explanation>
-								href="#"
-								class="underline underline-offset-4 hover:text-primary"
-							>
-								Privacy Policy
-							</a>
-							.
-						</p>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <div class="md:hidden">
+        <img
+          src="/examples/authentication-light.png"
+          width={1280}
+          height={843}
+          alt="Authentication"
+          class="block dark:hidden"
+        />
+        <img
+          src="/examples/authentication-dark.png"
+          width={1280}
+          height={843}
+          alt="Authentication"
+          class="hidden dark:block"
+        />
+      </div>
+      <div class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <a
+          href="/examples/authentication"
+          class={cn(
+            buttonVariants({ variant: "ghost" }),
+            "absolute right-4 top-4 md:right-8 md:top-8"
+          )}
+        >
+          Login
+        </a>
+        <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
+          <div class="absolute inset-0 bg-zinc-900" />
+          <div class="relative z-20 flex items-center text-lg font-medium">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-6 w-6"
+            >
+              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+              <title>Logo</title>
+            </svg>
+            Acme Inc
+          </div>
+          <div class="relative z-20 mt-auto">
+            <blockquote class="space-y-2">
+              <p class="text-lg">
+                &ldquo;This library has saved me countless hours of work and
+                helped me deliver stunning designs to my clients faster than
+                ever before.&rdquo;
+              </p>
+              <footer class="text-sm">Sofia Davis</footer>
+            </blockquote>
+          </div>
+        </div>
+        <div class="lg:p-8">
+          <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div class="flex flex-col space-y-2 text-center">
+              <h1 class="text-2xl font-semibold tracking-tight">
+                Create an account
+              </h1>
+              <p class="text-muted-foreground text-sm">
+                Enter your email below to create your account
+              </p>
+            </div>
+            <UserAuthForm />
+            <p class="text-muted-foreground px-8 text-center text-sm">
+              By clicking continue, you agree to our{" "}
+              <a
+                // biome-ignore lint/a11y/useValidAnchor: <explanation>
+                href="#"
+                class="hover:text-primary underline underline-offset-4"
+              >
+                Terms of Service
+              </a>{" "}
+              and{" "}
+              <a
+                // biome-ignore lint/a11y/useValidAnchor: <explanation>
+                href="#"
+                class="hover:text-primary underline underline-offset-4"
+              >
+                Privacy Policy
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
 
-export default AuthenticationUI;
+export default AuthenticationUI
diff --git a/docs/src/routes/(app)/examples/_components/authentication/user-auth-form.tsx b/docs/src/routes/(app)/examples/_components/authentication/user-auth-form.tsx
index 910052bc..d543639d 100644
--- a/docs/src/routes/(app)/examples/_components/authentication/user-auth-form.tsx
+++ b/docs/src/routes/(app)/examples/_components/authentication/user-auth-form.tsx
@@ -1,109 +1,110 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { createSignal } from "solid-js"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
-import { createSignal } from "solid-js";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 export const UserAuthForm = () => {
-	const [isLoading, setIsLoading] = createSignal<boolean>(false);
+  const [isLoading, setIsLoading] = createSignal<boolean>(false)
 
-	function onSubmit(event: Event) {
-		event.preventDefault();
-		setIsLoading(true);
+  function onSubmit(event: Event) {
+    event.preventDefault()
+    setIsLoading(true)
 
-		setTimeout(() => {
-			setIsLoading(false);
-		}, 3000);
-	}
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
+  }
 
-	return (
-		<div class="grid gap-6">
-			<form onSubmit={onSubmit}>
-				<div class="grid gap-2">
-					<div class="grid gap-1">
-						<TextFieldRoot>
-							<TextFieldLabel class="sr-only">Email</TextFieldLabel>
-							<TextField
-								id="email"
-								placeholder="name@example.com"
-								type="email"
-								autoCapitalize="none"
-								autocomplete="email"
-								autocorrect="off"
-								disabled={isLoading()}
-							/>
-						</TextFieldRoot>
-					</div>
-					<Button disabled={isLoading()}>
-						{isLoading() && (
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mr-2 h-4 w-4 animate-spin"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
-								/>
-								<title>Loading</title>
-							</svg>
-						)}
-						Sign In with Email
-					</Button>
-				</div>
-			</form>
-			<div class="relative">
-				<div class="absolute inset-0 flex items-center">
-					<span class="w-full border-t" />
-				</div>
-				<div class="relative flex justify-center text-xs uppercase">
-					<span class="bg-background px-2 text-muted-foreground">
-						Or continue with
-					</span>
-				</div>
-			</div>
-			<Button variant="outline" type="button" disabled={isLoading()}>
-				{isLoading() ? (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4 animate-spin"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
-						/>
-						<title>Loading</title>
-					</svg>
-				) : (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21"
-						/>
-						<title>Login</title>
-					</svg>
-				)}{" "}
-				GitHub
-			</Button>
-		</div>
-	);
-};
+  return (
+    <div class="grid gap-6">
+      <form onSubmit={onSubmit}>
+        <div class="grid gap-2">
+          <div class="grid gap-1">
+            <TextFieldRoot>
+              <TextFieldLabel class="sr-only">Email</TextFieldLabel>
+              <TextField
+                id="email"
+                placeholder="name@example.com"
+                type="email"
+                autoCapitalize="none"
+                autocomplete="email"
+                autocorrect="off"
+                disabled={isLoading()}
+              />
+            </TextFieldRoot>
+          </div>
+          <Button disabled={isLoading()}>
+            {isLoading() && (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="mr-2 h-4 w-4 animate-spin"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
+                />
+                <title>Loading</title>
+              </svg>
+            )}
+            Sign In with Email
+          </Button>
+        </div>
+      </form>
+      <div class="relative">
+        <div class="absolute inset-0 flex items-center">
+          <span class="w-full border-t" />
+        </div>
+        <div class="relative flex justify-center text-xs uppercase">
+          <span class="bg-background text-muted-foreground px-2">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <Button variant="outline" type="button" disabled={isLoading()}>
+        {isLoading() ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4 animate-spin"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
+            />
+            <title>Loading</title>
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21"
+            />
+            <title>Login</title>
+          </svg>
+        )}{" "}
+        GitHub
+      </Button>
+    </div>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/cookie-setting.tsx b/docs/src/routes/(app)/examples/_components/cards/cookie-setting.tsx
index edaf6d1a..39d70387 100644
--- a/docs/src/routes/(app)/examples/_components/cards/cookie-setting.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/cookie-setting.tsx
@@ -1,77 +1,77 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Switch,
-	SwitchControl,
-	SwitchLabel,
-	SwitchThumb,
-} from "@/registry/tailwindcss/ui/switch";
+  Switch,
+  SwitchControl,
+  SwitchLabel,
+  SwitchThumb,
+} from "@/registry/tailwindcss/ui/switch"
 
 export const DemoCookieSettings = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Cookie Settings</CardTitle>
-				<CardDescription>Manage your cookie settings here.</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-6">
-				<div class="flex items-center justify-between space-x-2">
-					<label class="flex flex-col space-y-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-						<span>Strictly Necessary</span>
-						<span class="font-normal leading-snug text-muted-foreground">
-							These cookies are essential in order to use the website and use
-							its features.
-						</span>
-					</label>
-					<Switch defaultChecked>
-						<SwitchControl>
-							<SwitchLabel class="sr-only">Strictly Necessary</SwitchLabel>
-							<SwitchThumb />
-						</SwitchControl>
-					</Switch>
-				</div>
-				<div class="flex items-center justify-between space-x-2">
-					<label class="flex flex-col space-y-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-						<span>Functional Cookies</span>
-						<span class="font-normal leading-snug text-muted-foreground">
-							These cookies allow the website to provide personalized
-							functionality.
-						</span>
-					</label>
-					<Switch>
-						<SwitchControl>
-							<SwitchLabel class="sr-only">Functional Cookies</SwitchLabel>
-							<SwitchThumb />
-						</SwitchControl>
-					</Switch>
-				</div>
-				<div class="flex items-center justify-between space-x-2">
-					<label class="flex flex-col space-y-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-						<span>Performance Cookies</span>
-						<span class="font-normal leading-snug text-muted-foreground">
-							These cookies help to improve the performance of the website.
-						</span>
-					</label>
-					<Switch>
-						<SwitchControl>
-							<SwitchLabel class="sr-only">Performance Cookies</SwitchLabel>
-							<SwitchThumb />
-						</SwitchControl>
-					</Switch>
-				</div>
-			</CardContent>
-			<CardFooter>
-				<Button variant="outline" class="w-full">
-					Save preferences
-				</Button>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cookie Settings</CardTitle>
+        <CardDescription>Manage your cookie settings here.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-6">
+        <div class="flex items-center justify-between space-x-2">
+          <label class="flex flex-col space-y-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            <span>Strictly Necessary</span>
+            <span class="text-muted-foreground font-normal leading-snug">
+              These cookies are essential in order to use the website and use
+              its features.
+            </span>
+          </label>
+          <Switch defaultChecked>
+            <SwitchControl>
+              <SwitchLabel class="sr-only">Strictly Necessary</SwitchLabel>
+              <SwitchThumb />
+            </SwitchControl>
+          </Switch>
+        </div>
+        <div class="flex items-center justify-between space-x-2">
+          <label class="flex flex-col space-y-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            <span>Functional Cookies</span>
+            <span class="text-muted-foreground font-normal leading-snug">
+              These cookies allow the website to provide personalized
+              functionality.
+            </span>
+          </label>
+          <Switch>
+            <SwitchControl>
+              <SwitchLabel class="sr-only">Functional Cookies</SwitchLabel>
+              <SwitchThumb />
+            </SwitchControl>
+          </Switch>
+        </div>
+        <div class="flex items-center justify-between space-x-2">
+          <label class="flex flex-col space-y-1 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            <span>Performance Cookies</span>
+            <span class="text-muted-foreground font-normal leading-snug">
+              These cookies help to improve the performance of the website.
+            </span>
+          </label>
+          <Switch>
+            <SwitchControl>
+              <SwitchLabel class="sr-only">Performance Cookies</SwitchLabel>
+              <SwitchThumb />
+            </SwitchControl>
+          </Switch>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" class="w-full">
+          Save preferences
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/create-account.tsx b/docs/src/routes/(app)/examples/_components/cards/create-account.tsx
index 8968cfd8..1324cecc 100644
--- a/docs/src/routes/(app)/examples/_components/cards/create-account.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/create-account.tsx
@@ -1,96 +1,96 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 export const DemoCreateAccount = () => {
-	return (
-		<Card>
-			<CardHeader class="space-y-1">
-				<CardTitle class="text-2xl">Create an account</CardTitle>
-				<CardDescription>
-					Enter your email below to create your account
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-4">
-				<div class="grid grid-cols-2 gap-6">
-					<Button variant="outline">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21"
-							/>
-							<title>Github</title>
-						</svg>
-						Github
-					</Button>
-					<Button variant="outline">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M0 0h24v24H0z" />
-								<path
-									fill="currentColor"
-									d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1-1.265.06a6 6 0 1 0 2.103 6.836l.001-.004h-3.66a1 1 0 0 1-.992-.883L13 13v-2a1 1 0 0 1 1-1h6.945a1 1 0 0 1 .994.89c.04.367.061.737.061 1.11c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
-								/>
-							</g>
-							<title>Google</title>
-						</svg>
-						Google
-					</Button>
-				</div>
-				<div class="relative">
-					<div class="absolute inset-0 flex items-center">
-						<span class="w-full border-t" />
-					</div>
-					<div class="relative flex justify-center text-xs uppercase">
-						<span class="bg-background px-2 text-muted-foreground">
-							Or continue with
-						</span>
-					</div>
-				</div>
-				<div class="grid gap-2">
-					<TextFieldRoot>
-						<TextFieldLabel>Email</TextFieldLabel>
-						<TextField type="email" placeholder="m@example.com" />
-					</TextFieldRoot>
-				</div>
-				<div class="grid gap-2">
-					<TextFieldRoot>
-						<TextFieldLabel>Password</TextFieldLabel>
-						<TextField type="password" />
-					</TextFieldRoot>
-				</div>
-			</CardContent>
-			<CardFooter>
-				<Button class="w-full">Create account</Button>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader class="space-y-1">
+        <CardTitle class="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-4">
+        <div class="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21"
+              />
+              <title>Github</title>
+            </svg>
+            Github
+          </Button>
+          <Button variant="outline">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M0 0h24v24H0z" />
+                <path
+                  fill="currentColor"
+                  d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1-1.265.06a6 6 0 1 0 2.103 6.836l.001-.004h-3.66a1 1 0 0 1-.992-.883L13 13v-2a1 1 0 0 1 1-1h6.945a1 1 0 0 1 .994.89c.04.367.061.737.061 1.11c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
+                />
+              </g>
+              <title>Google</title>
+            </svg>
+            Google
+          </Button>
+        </div>
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <span class="w-full border-t" />
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-background text-muted-foreground px-2">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <TextFieldRoot>
+            <TextFieldLabel>Email</TextFieldLabel>
+            <TextField type="email" placeholder="m@example.com" />
+          </TextFieldRoot>
+        </div>
+        <div class="grid gap-2">
+          <TextFieldRoot>
+            <TextFieldLabel>Password</TextFieldLabel>
+            <TextField type="password" />
+          </TextFieldRoot>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button class="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/github-cards.tsx b/docs/src/routes/(app)/examples/_components/cards/github-cards.tsx
index 8b28a230..5c5bae15 100644
--- a/docs/src/routes/(app)/examples/_components/cards/github-cards.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/github-cards.tsx
@@ -1,153 +1,154 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 
 export const DemoGithub = () => {
-	return (
-		<Card>
-			<CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
-				<div class="space-y-1">
-					<CardTitle>shadcn-solid</CardTitle>
-					<CardDescription>
-						Beautifully designed components that you can copy and paste into
-						your apps. Accessible. Customizable. Open Source.
-					</CardDescription>
-				</div>
-				<div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
-					<Button variant="secondary" class="px-3 shadow-none">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-2 h-4 w-4"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="m12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-							/>
-							<title>Star</title>
-						</svg>
-						Star
-					</Button>
-					<Separator orientation="vertical" class="h-[20px]" />
-					<DropdownMenu>
-						<DropdownMenuTrigger
-							as={(props: DropdownMenuTriggerProps) => (
-								<Button variant="secondary" class="px-2 shadow-none" {...props}>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="h-4 w-4 text-secondary-foreground"
-										viewBox="0 0 24 24"
-									>
-										<path
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="m6 9l6 6l6-6"
-										/>
-										<title>Arrow</title>
-									</svg>
-								</Button>
-							)}
-						/>
-						<DropdownMenuContent class="w-[200px]">
-							<DropdownMenuGroup>
-								<DropdownMenuGroupLabel>Suggested Lists</DropdownMenuGroupLabel>
-								<DropdownMenuSeparator />
-								<DropdownMenuCheckboxItem checked>
-									Future Ideas
-								</DropdownMenuCheckboxItem>
-								<DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>
-								<DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
-								<DropdownMenuSeparator />
-								<DropdownMenuItem>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="mr-2 h-4 w-4"
-										viewBox="0 0 24 24"
-									>
-										<path
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M12 5v14m-7-7h14"
-										/>
-										<title>Create list</title>
-									</svg>{" "}
-									Create List
-								</DropdownMenuItem>
-							</DropdownMenuGroup>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
-			</CardHeader>
-			<CardContent>
-				<div class="flex space-x-4 text-sm text-muted-foreground">
-					<div class="flex items-center">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-1 h-3 w-3"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<path d="M15 17.5c.32.32.754.5 1.207.5h.543c.69 0 1.25-.56 1.25-1.25v-.25a1.5 1.5 0 0 0-1.5-1.5a1.5 1.5 0 0 1-1.5-1.5v-.25c0-.69.56-1.25 1.25-1.25h.543c.453 0 .887.18 1.207.5M9 12h4m-2 0v6" />
-								<path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2" />
-							</g>
-							<title>Typescript</title>
-						</svg>
-						TypeScript
-					</div>
-					<div class="flex items-center">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="mr-1 h-3 w-3"
-							viewBox="0 0 24 24"
-						>
-							<path
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="m12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-							/>
-							<title>Github start</title>
-						</svg>
-						33
-					</div>
-					<div>Updated Feb 2024</div>
-				</div>
-			</CardContent>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+        <div class="space-y-1">
+          <CardTitle>shadcn-solid</CardTitle>
+          <CardDescription>
+            Beautifully designed components that you can copy and paste into
+            your apps. Accessible. Customizable. Open Source.
+          </CardDescription>
+        </div>
+        <div class="bg-secondary text-secondary-foreground flex items-center space-x-1 rounded-md">
+          <Button variant="secondary" class="px-3 shadow-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+              />
+              <title>Star</title>
+            </svg>
+            Star
+          </Button>
+          <Separator orientation="vertical" class="h-[20px]" />
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              as={(props: DropdownMenuTriggerProps) => (
+                <Button variant="secondary" class="px-2 shadow-none" {...props}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="text-secondary-foreground h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="m6 9l6 6l6-6"
+                    />
+                    <title>Arrow</title>
+                  </svg>
+                </Button>
+              )}
+            />
+            <DropdownMenuContent class="w-[200px]">
+              <DropdownMenuGroup>
+                <DropdownMenuGroupLabel>Suggested Lists</DropdownMenuGroupLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuCheckboxItem checked>
+                  Future Ideas
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="mr-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 5v14m-7-7h14"
+                    />
+                    <title>Create list</title>
+                  </svg>{" "}
+                  Create List
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div class="text-muted-foreground flex space-x-4 text-sm">
+          <div class="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-1 h-3 w-3"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <path d="M15 17.5c.32.32.754.5 1.207.5h.543c.69 0 1.25-.56 1.25-1.25v-.25a1.5 1.5 0 0 0-1.5-1.5a1.5 1.5 0 0 1-1.5-1.5v-.25c0-.69.56-1.25 1.25-1.25h.543c.453 0 .887.18 1.207.5M9 12h4m-2 0v6" />
+                <path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2" />
+              </g>
+              <title>Typescript</title>
+            </svg>
+            TypeScript
+          </div>
+          <div class="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="mr-1 h-3 w-3"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
+              />
+              <title>Github start</title>
+            </svg>
+            33
+          </div>
+          <div>Updated Feb 2024</div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/notifications.tsx b/docs/src/routes/(app)/examples/_components/cards/notifications.tsx
index c0363ed0..7c4324a8 100644
--- a/docs/src/routes/(app)/examples/_components/cards/notifications.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/notifications.tsx
@@ -1,93 +1,93 @@
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 
 export const DemoNotifications = () => {
-	return (
-		<Card>
-			<CardHeader class="pb-3">
-				<CardTitle>Notifications</CardTitle>
-				<CardDescription>
-					Choose what you want to be notified about.
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-1">
-				<div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mt-px h-5 w-5"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1"
-						/>
-						<title>Notification</title>
-					</svg>
-					<div class="space-y-1">
-						<p class="text-sm font-medium leading-none">Everything</p>
-						<p class="text-sm text-muted-foreground">
-							Email digest, mentions & all activity.
-						</p>
-					</div>
-				</div>
-				<div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5 pt-px"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
-						/>
-						<title>User</title>
-					</svg>
-					<div class="space-y-1">
-						<p class="text-sm font-medium leading-none">Available</p>
-						<p class="text-sm text-muted-foreground">
-							Only mentions and comments.
-						</p>
-					</div>
-				</div>
-				<div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mt-px h-5 w-5"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
-							<path d="M16.681 16.673A8.717 8.717 0 0 1 12 18c-3.6 0-6.6-2-9-6c1.272-2.12 2.712-3.678 4.32-4.674m2.86-1.146A9.055 9.055 0 0 1 12 6c3.6 0 6.6 2 9 6c-.666 1.11-1.379 2.067-2.138 2.87M3 3l18 18" />
-						</g>
-						<title>Ignore</title>
-					</svg>
-					<div class="space-y-1">
-						<p class="text-sm font-medium leading-none">Ignoring</p>
-						<p class="text-sm text-muted-foreground">
-							Turn off all notifications.
-						</p>
-					</div>
-				</div>
-			</CardContent>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader class="pb-3">
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>
+          Choose what you want to be notified about.
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-1">
+        <div class="hover:bg-accent hover:text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mt-px h-5 w-5"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1"
+            />
+            <title>Notification</title>
+          </svg>
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Everything</p>
+            <p class="text-muted-foreground text-sm">
+              Email digest, mentions & all activity.
+            </p>
+          </div>
+        </div>
+        <div class="bg-accent text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 pt-px"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
+            />
+            <title>User</title>
+          </svg>
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Available</p>
+            <p class="text-muted-foreground text-sm">
+              Only mentions and comments.
+            </p>
+          </div>
+        </div>
+        <div class="hover:bg-accent hover:text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mt-px h-5 w-5"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+              <path d="M16.681 16.673A8.717 8.717 0 0 1 12 18c-3.6 0-6.6-2-9-6c1.272-2.12 2.712-3.678 4.32-4.674m2.86-1.146A9.055 9.055 0 0 1 12 6c3.6 0 6.6 2 9 6c-.666 1.11-1.379 2.067-2.138 2.87M3 3l18 18" />
+            </g>
+            <title>Ignore</title>
+          </svg>
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Ignoring</p>
+            <p class="text-muted-foreground text-sm">
+              Turn off all notifications.
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/payment-method.tsx b/docs/src/routes/(app)/examples/_components/cards/payment-method.tsx
index d2712dcb..d21f1b5a 100644
--- a/docs/src/routes/(app)/examples/_components/cards/payment-method.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/payment-method.tsx
@@ -1,184 +1,181 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	RadioGroup,
-	RadioGroupItem,
-} from "@/registry/tailwindcss/ui/radio-group";
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/tailwindcss/ui/radio-group"
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/registry/tailwindcss/ui/select";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/tailwindcss/ui/select"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 export const DemoPaymentMethod = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Payment Method</CardTitle>
-				<CardDescription>
-					Add a new payment method to your account.
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-6">
-				<RadioGroup defaultValue="card" class="grid grid-cols-3 gap-4">
-					<div>
-						<RadioGroupItem value="card" id="card" class="peer sr-only" />
-						<label class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								class="mb-3 h-6 w-6"
-							>
-								<rect width="20" height="14" x="2" y="5" rx="2" />
-								<path d="M2 10h20" />
-								<title>Card</title>
-							</svg>
-							Card
-						</label>
-					</div>
-					<div>
-						<RadioGroupItem value="paypal" id="paypal" class="peer sr-only" />
-						<label
-							class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground
-						peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mb-3 h-6 w-6"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="M0 0h24v24H0z" />
-									<path
-										fill="currentColor"
-										d="M12.5 2c3.113 0 5.309 1.785 5.863 4.565C20.088 7.75 21 9.717 21 12c0 2.933-2.748 5.384-5.783 5.496L15 17.5h-1.754l-.466 2.8a1.998 1.998 0 0 1-1.823 1.597l-.157.003H8.12a1.5 1.5 0 0 1-1.182-.54a1.495 1.495 0 0 1-.348-1.07l.042-.29H5c-1.004 0-1.914-.864-1.994-1.857L3 18l.01-.141L5.003 3.905l.003-.048c.072-.894.815-1.682 1.695-1.832l.156-.02L7 2zm5.812 7.35l-.024.087c-.706 2.403-3.072 4.436-5.555 4.557L12.5 14H9.997v.05l-.025.183l-1.2 5a1.007 1.007 0 0 1-.019.07l-.088.597h2.154l.595-3.564a1 1 0 0 1 .865-.829l.121-.007H15c2.073 0 4-1.67 4-3.5c0-1.022-.236-1.924-.688-2.65"
-									/>
-								</g>
-								<title>Paypal</title>
-							</svg>
-							Paypal
-						</label>
-					</div>
-					<div>
-						<RadioGroupItem value="apple" id="apple" class="peer sr-only" />
-						<label class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mb-3 h-6 w-6"
-								viewBox="0 0 24 24"
-							>
-								<g
-									fill="none"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-								>
-									<path d="M0 0h24v24H0z" />
-									<path
-										fill="currentColor"
-										d="m15.079 5.999l.239.012c1.43.097 3.434 1.013 4.508 2.586a1 1 0 0 1-.344 1.44c-.05.028-.372.158-.497.217a4.15 4.15 0 0 0-.722.431c-.614.461-.948 1.009-.942 1.694c.01.885.339 1.454.907 1.846c.208.143.436.253.666.33c.126.043.426.116.444.122a1 1 0 0 1 .662.942C20 18.24 16.96 22 14.714 22c-.79 0-1.272-.091-1.983-.315l-.098-.031c-.463-.146-.702-.192-1.133-.192c-.52 0-.863.06-1.518.237l-.197.053c-.575.153-.964.226-1.5.248C5.536 22 3 16.907 3 12.928c0-3.87 1.786-6.92 5.286-6.92c.297 0 .598.045.909.128c.403.107.774.26 1.296.508c.787.374.948.44 1.009.44h.016c.03-.003.128-.047 1.056-.457c1.061-.467 1.864-.685 2.746-.616l-.24-.012zM14 1a1 1 0 0 1 1 1a3 3 0 0 1-3 3a1 1 0 0 1-1-1a3 3 0 0 1 3-3"
-									/>
-								</g>
-								<title>Apple</title>
-							</svg>
-							Apple
-						</label>
-					</div>
-				</RadioGroup>
-				<div class="grid gap-2">
-					<TextFieldRoot>
-						<TextFieldLabel>Name</TextFieldLabel>
-						<TextField placeholder="First Last" />
-					</TextFieldRoot>
-				</div>
-				<div class="grid gap-2">
-					<TextFieldRoot>
-						<TextFieldLabel>Card number</TextFieldLabel>
-						<TextField placeholder="" />
-					</TextFieldRoot>
-				</div>
-				<div class="grid grid-cols-3 gap-4">
-					<div class="grid gap-2">
-						<label>Expires</label>
-						<Select
-							options={[
-								"January",
-								"February",
-								"March",
-								"April",
-								"May",
-								"June",
-								"August",
-								"September",
-								"October",
-								"November",
-								"December",
-							]}
-							placeholder="Month"
-							itemComponent={(props) => (
-								<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-							)}
-						>
-							<SelectTrigger>
-								<SelectValue<string>>
-									{(state) => state.selectedOption()}
-								</SelectValue>
-							</SelectTrigger>
-							<SelectContent />
-						</Select>
-					</div>
-					<div class="grid gap-2">
-						<label>Year</label>
-						<Select
-							options={Array.from({ length: 10 }).map(
-								(_, i) => new Date().getFullYear() + i,
-							)}
-							placeholder="Year"
-							itemComponent={(props) => (
-								<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-							)}
-						>
-							<SelectTrigger>
-								<SelectValue<string>>
-									{(state) => state.selectedOption()}
-								</SelectValue>
-							</SelectTrigger>
-							<SelectContent />
-						</Select>
-					</div>
-					<TextFieldRoot class="grid gap-2">
-						<TextFieldLabel>CVC</TextFieldLabel>
-						<TextField id="cvc" placeholder="CVC" />
-					</TextFieldRoot>
-				</div>
-			</CardContent>
-			<CardFooter>
-				<Button class="w-full">Continue</Button>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>
+          Add a new payment method to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-6">
+        <RadioGroup defaultValue="card" class="grid grid-cols-3 gap-4">
+          <div>
+            <RadioGroupItem value="card" id="card" class="peer sr-only" />
+            <label class="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                class="mb-3 h-6 w-6"
+              >
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+                <title>Card</title>
+              </svg>
+              Card
+            </label>
+          </div>
+          <div>
+            <RadioGroupItem value="paypal" id="paypal" class="peer sr-only" />
+            <label class="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="mb-3 h-6 w-6"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="M0 0h24v24H0z" />
+                  <path
+                    fill="currentColor"
+                    d="M12.5 2c3.113 0 5.309 1.785 5.863 4.565C20.088 7.75 21 9.717 21 12c0 2.933-2.748 5.384-5.783 5.496L15 17.5h-1.754l-.466 2.8a1.998 1.998 0 0 1-1.823 1.597l-.157.003H8.12a1.5 1.5 0 0 1-1.182-.54a1.495 1.495 0 0 1-.348-1.07l.042-.29H5c-1.004 0-1.914-.864-1.994-1.857L3 18l.01-.141L5.003 3.905l.003-.048c.072-.894.815-1.682 1.695-1.832l.156-.02L7 2zm5.812 7.35l-.024.087c-.706 2.403-3.072 4.436-5.555 4.557L12.5 14H9.997v.05l-.025.183l-1.2 5a1.007 1.007 0 0 1-.019.07l-.088.597h2.154l.595-3.564a1 1 0 0 1 .865-.829l.121-.007H15c2.073 0 4-1.67 4-3.5c0-1.022-.236-1.924-.688-2.65"
+                  />
+                </g>
+                <title>Paypal</title>
+              </svg>
+              Paypal
+            </label>
+          </div>
+          <div>
+            <RadioGroupItem value="apple" id="apple" class="peer sr-only" />
+            <label class="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="mb-3 h-6 w-6"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                >
+                  <path d="M0 0h24v24H0z" />
+                  <path
+                    fill="currentColor"
+                    d="m15.079 5.999l.239.012c1.43.097 3.434 1.013 4.508 2.586a1 1 0 0 1-.344 1.44c-.05.028-.372.158-.497.217a4.15 4.15 0 0 0-.722.431c-.614.461-.948 1.009-.942 1.694c.01.885.339 1.454.907 1.846c.208.143.436.253.666.33c.126.043.426.116.444.122a1 1 0 0 1 .662.942C20 18.24 16.96 22 14.714 22c-.79 0-1.272-.091-1.983-.315l-.098-.031c-.463-.146-.702-.192-1.133-.192c-.52 0-.863.06-1.518.237l-.197.053c-.575.153-.964.226-1.5.248C5.536 22 3 16.907 3 12.928c0-3.87 1.786-6.92 5.286-6.92c.297 0 .598.045.909.128c.403.107.774.26 1.296.508c.787.374.948.44 1.009.44h.016c.03-.003.128-.047 1.056-.457c1.061-.467 1.864-.685 2.746-.616l-.24-.012zM14 1a1 1 0 0 1 1 1a3 3 0 0 1-3 3a1 1 0 0 1-1-1a3 3 0 0 1 3-3"
+                  />
+                </g>
+                <title>Apple</title>
+              </svg>
+              Apple
+            </label>
+          </div>
+        </RadioGroup>
+        <div class="grid gap-2">
+          <TextFieldRoot>
+            <TextFieldLabel>Name</TextFieldLabel>
+            <TextField placeholder="First Last" />
+          </TextFieldRoot>
+        </div>
+        <div class="grid gap-2">
+          <TextFieldRoot>
+            <TextFieldLabel>Card number</TextFieldLabel>
+            <TextField placeholder="" />
+          </TextFieldRoot>
+        </div>
+        <div class="grid grid-cols-3 gap-4">
+          <div class="grid gap-2">
+            <label>Expires</label>
+            <Select
+              options={[
+                "January",
+                "February",
+                "March",
+                "April",
+                "May",
+                "June",
+                "August",
+                "September",
+                "October",
+                "November",
+                "December",
+              ]}
+              placeholder="Month"
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger>
+                <SelectValue<string>>
+                  {(state) => state.selectedOption()}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <div class="grid gap-2">
+            <label>Year</label>
+            <Select
+              options={Array.from({ length: 10 }).map(
+                (_, i) => new Date().getFullYear() + i
+              )}
+              placeholder="Year"
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger>
+                <SelectValue<string>>
+                  {(state) => state.selectedOption()}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <TextFieldRoot class="grid gap-2">
+            <TextFieldLabel>CVC</TextFieldLabel>
+            <TextField id="cvc" placeholder="CVC" />
+          </TextFieldRoot>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button class="w-full">Continue</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/report-an-issue.tsx b/docs/src/routes/(app)/examples/_components/cards/report-an-issue.tsx
index df1905c7..6eea022e 100644
--- a/docs/src/routes/(app)/examples/_components/cards/report-an-issue.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/report-an-issue.tsx
@@ -1,100 +1,100 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/registry/tailwindcss/ui/select";
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/tailwindcss/ui/select"
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 export const DemoReportAnIssue = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Report an issue</CardTitle>
-				<CardDescription>
-					What area are you having problems with?
-				</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-6">
-				<div class="grid grid-cols-2 gap-4">
-					<div class="grid gap-2">
-						<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-							Area
-						</label>
-						<Select
-							options={["Team", "Billing", "Account"]}
-							placeholder="Area"
-							itemComponent={(props) => (
-								<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-							)}
-							defaultValue="Billing"
-						>
-							<SelectTrigger>
-								<SelectValue<string>>
-									{(state) => state.selectedOption()}
-								</SelectValue>
-							</SelectTrigger>
-							<SelectContent />
-						</Select>
-					</div>
-					<div class="grid gap-2">
-						<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-							Security Level
-						</label>
-						<Select
-							options={[
-								"Severity 1 (Highest)",
-								"Severity 2",
-								"Severity 3",
-								"Severity 4 (Lowest)",
-							]}
-							placeholder="Security Level"
-							itemComponent={(props) => (
-								<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-							)}
-							defaultValue="Severity 2"
-						>
-							<SelectTrigger>
-								<SelectValue<string>>
-									{(state) => state.selectedOption()}
-								</SelectValue>
-							</SelectTrigger>
-							<SelectContent />
-						</Select>
-					</div>
-				</div>
-				<div class="grid gap-2">
-					<TextFieldRoot>
-						<TextFieldLabel>Subject</TextFieldLabel>
-						<TextField placeholder="I need help with..." />
-					</TextFieldRoot>
-				</div>
-				<div class="grid gap-2">
-					<TextFieldRoot>
-						<TextFieldLabel>Description</TextFieldLabel>
-						<TextArea placeholder="Please include all information relevant to your issue." />
-					</TextFieldRoot>
-				</div>
-			</CardContent>
-			<CardFooter class="justify-between space-x-2">
-				<Button variant="ghost">Cancel</Button>
-				<Button>Submit</Button>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report an issue</CardTitle>
+        <CardDescription>
+          What area are you having problems with?
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-6">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="grid gap-2">
+            <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              Area
+            </label>
+            <Select
+              options={["Team", "Billing", "Account"]}
+              placeholder="Area"
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+              defaultValue="Billing"
+            >
+              <SelectTrigger>
+                <SelectValue<string>>
+                  {(state) => state.selectedOption()}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <div class="grid gap-2">
+            <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              Security Level
+            </label>
+            <Select
+              options={[
+                "Severity 1 (Highest)",
+                "Severity 2",
+                "Severity 3",
+                "Severity 4 (Lowest)",
+              ]}
+              placeholder="Security Level"
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+              defaultValue="Severity 2"
+            >
+              <SelectTrigger>
+                <SelectValue<string>>
+                  {(state) => state.selectedOption()}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <TextFieldRoot>
+            <TextFieldLabel>Subject</TextFieldLabel>
+            <TextField placeholder="I need help with..." />
+          </TextFieldRoot>
+        </div>
+        <div class="grid gap-2">
+          <TextFieldRoot>
+            <TextFieldLabel>Description</TextFieldLabel>
+            <TextArea placeholder="Please include all information relevant to your issue." />
+          </TextFieldRoot>
+        </div>
+      </CardContent>
+      <CardFooter class="justify-between space-x-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/share-document.tsx b/docs/src/routes/(app)/examples/_components/cards/share-document.tsx
index 0d2114f4..a7c57d5a 100644
--- a/docs/src/routes/(app)/examples/_components/cards/share-document.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/share-document.tsx
@@ -1,156 +1,157 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Image } from "@kobalte/core/image"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/registry/tailwindcss/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/tailwindcss/ui/card"
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/registry/tailwindcss/ui/select";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/tailwindcss/ui/select"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/registry/tailwindcss/ui/textfield";
-import { Image } from "@kobalte/core/image";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/registry/tailwindcss/ui/textfield"
 
 export const DemoShareDocument = () => {
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Share this document</CardTitle>
-				<CardDescription>
-					Anyone with the link can view this document.
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div class="flex space-x-2">
-					<TextFieldRoot class="w-full space-y-0">
-						<TextFieldLabel class="sr-only">Link</TextFieldLabel>
-						<TextField value="http://example.com/link/to/document" readOnly />
-					</TextFieldRoot>
-					<Button variant="secondary" class="shrink-0">
-						Copy Link
-					</Button>
-				</div>
-				<Separator class="my-4" />
-				<div class="space-y-4">
-					<h4 class="text-sm font-medium">People with access</h4>
-					<div class="grid gap-6">
-						<div class="flex items-center justify-between space-x-4">
-							<div class="flex items-center space-x-4">
-								<Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
-									<Image.Img
-										src="/avatars/03.png"
-										alt="Olivia Martin"
-										class="size-full aspect-square"
-									/>
-									<Image.Fallback class="flex h-full w-full items-center justify-center rounded-full bg-muted">
-										OM
-									</Image.Fallback>
-								</Image>
-								<div>
-									<p class="text-sm font-medium leading-none">Olivia Martin</p>
-									<p class="text-sm text-muted-foreground">m@example.com</p>
-								</div>
-							</div>
-							<Select
-								options={["Can edit", "Can view"]}
-								itemComponent={(props) => (
-									<SelectItem item={props.item}>
-										{props.item.rawValue}
-									</SelectItem>
-								)}
-								defaultValue="Can edit"
-							>
-								<SelectTrigger class="w-[110px]">
-									<SelectValue<string>>
-										{(state) => state.selectedOption()}
-									</SelectValue>
-								</SelectTrigger>
-								<SelectContent />
-							</Select>
-						</div>
-						<div class="flex items-center justify-between space-x-4">
-							<div class="flex items-center space-x-4">
-								<Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
-									<Image.Img
-										src="/avatars/03.png"
-										alt="Isabella Nguyen"
-										class="size-full aspect-square"
-									/>
-									<Image.Fallback class="flex h-full w-full items-center justify-center rounded-full bg-muted">
-										IN
-									</Image.Fallback>
-								</Image>
-								<div>
-									<p class="text-sm font-medium leading-none">
-										Isabella Nguyen
-									</p>
-									<p class="text-sm text-muted-foreground">b@example.com</p>
-								</div>
-							</div>
-							<Select
-								options={["Can edit", "Can view"]}
-								itemComponent={(props) => (
-									<SelectItem item={props.item}>
-										{props.item.rawValue}
-									</SelectItem>
-								)}
-								defaultValue="Can edit"
-							>
-								<SelectTrigger class="w-[110px]">
-									<SelectValue<string>>
-										{(state) => state.selectedOption()}
-									</SelectValue>
-								</SelectTrigger>
-								<SelectContent />
-							</Select>
-						</div>
-						<div class="flex items-center justify-between space-x-4">
-							<div class="flex items-center space-x-4">
-								<Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
-									<Image.Img
-										src="/avatars/01.png"
-										alt="Sofia Davis"
-										class="size-full aspect-square"
-									/>
-									<Image.Fallback class="flex h-full w-full items-center justify-center rounded-full bg-muted">
-										SD
-									</Image.Fallback>
-								</Image>
-								<div>
-									<p class="text-sm font-medium leading-none">Sofia Davis</p>
-									<p class="text-sm text-muted-foreground">p@example.com</p>
-								</div>
-							</div>
-							<Select
-								options={["Can edit", "Can view"]}
-								itemComponent={(props) => (
-									<SelectItem item={props.item}>
-										{props.item.rawValue}
-									</SelectItem>
-								)}
-								defaultValue="Can edit"
-							>
-								<SelectTrigger class="w-[110px]">
-									<SelectValue<string>>
-										{(state) => state.selectedOption()}
-									</SelectValue>
-								</SelectTrigger>
-								<SelectContent />
-							</Select>
-						</div>
-					</div>
-				</div>
-			</CardContent>
-		</Card>
-	);
-};
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Share this document</CardTitle>
+        <CardDescription>
+          Anyone with the link can view this document.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div class="flex space-x-2">
+          <TextFieldRoot class="w-full space-y-0">
+            <TextFieldLabel class="sr-only">Link</TextFieldLabel>
+            <TextField value="http://example.com/link/to/document" readOnly />
+          </TextFieldRoot>
+          <Button variant="secondary" class="shrink-0">
+            Copy Link
+          </Button>
+        </div>
+        <Separator class="my-4" />
+        <div class="space-y-4">
+          <h4 class="text-sm font-medium">People with access</h4>
+          <div class="grid gap-6">
+            <div class="flex items-center justify-between space-x-4">
+              <div class="flex items-center space-x-4">
+                <Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
+                  <Image.Img
+                    src="/avatars/03.png"
+                    alt="Olivia Martin"
+                    class="aspect-square size-full"
+                  />
+                  <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-full">
+                    OM
+                  </Image.Fallback>
+                </Image>
+                <div>
+                  <p class="text-sm font-medium leading-none">Olivia Martin</p>
+                  <p class="text-muted-foreground text-sm">m@example.com</p>
+                </div>
+              </div>
+              <Select
+                options={["Can edit", "Can view"]}
+                itemComponent={(props) => (
+                  <SelectItem item={props.item}>
+                    {props.item.rawValue}
+                  </SelectItem>
+                )}
+                defaultValue="Can edit"
+              >
+                <SelectTrigger class="w-[110px]">
+                  <SelectValue<string>>
+                    {(state) => state.selectedOption()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent />
+              </Select>
+            </div>
+            <div class="flex items-center justify-between space-x-4">
+              <div class="flex items-center space-x-4">
+                <Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
+                  <Image.Img
+                    src="/avatars/03.png"
+                    alt="Isabella Nguyen"
+                    class="aspect-square size-full"
+                  />
+                  <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-full">
+                    IN
+                  </Image.Fallback>
+                </Image>
+                <div>
+                  <p class="text-sm font-medium leading-none">
+                    Isabella Nguyen
+                  </p>
+                  <p class="text-muted-foreground text-sm">b@example.com</p>
+                </div>
+              </div>
+              <Select
+                options={["Can edit", "Can view"]}
+                itemComponent={(props) => (
+                  <SelectItem item={props.item}>
+                    {props.item.rawValue}
+                  </SelectItem>
+                )}
+                defaultValue="Can edit"
+              >
+                <SelectTrigger class="w-[110px]">
+                  <SelectValue<string>>
+                    {(state) => state.selectedOption()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent />
+              </Select>
+            </div>
+            <div class="flex items-center justify-between space-x-4">
+              <div class="flex items-center space-x-4">
+                <Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
+                  <Image.Img
+                    src="/avatars/01.png"
+                    alt="Sofia Davis"
+                    class="aspect-square size-full"
+                  />
+                  <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-full">
+                    SD
+                  </Image.Fallback>
+                </Image>
+                <div>
+                  <p class="text-sm font-medium leading-none">Sofia Davis</p>
+                  <p class="text-muted-foreground text-sm">p@example.com</p>
+                </div>
+              </div>
+              <Select
+                options={["Can edit", "Can view"]}
+                itemComponent={(props) => (
+                  <SelectItem item={props.item}>
+                    {props.item.rawValue}
+                  </SelectItem>
+                )}
+                defaultValue="Can edit"
+              >
+                <SelectTrigger class="w-[110px]">
+                  <SelectValue<string>>
+                    {(state) => state.selectedOption()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent />
+              </Select>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/cards/ui.tsx b/docs/src/routes/(app)/examples/_components/cards/ui.tsx
index d17a71a9..883730ee 100644
--- a/docs/src/routes/(app)/examples/_components/cards/ui.tsx
+++ b/docs/src/routes/(app)/examples/_components/cards/ui.tsx
@@ -1,70 +1,71 @@
-import type { ParentComponent } from "solid-js";
-import { DemoCookieSettings } from "./cookie-setting";
-import { DemoCreateAccount } from "./create-account";
-import { DemoGithub } from "./github-cards";
-import { DemoNotifications } from "./notifications";
-import { DemoPaymentMethod } from "./payment-method";
-import { DemoReportAnIssue } from "./report-an-issue";
-import { DemoShareDocument } from "./share-document";
+import type { ParentComponent } from "solid-js"
+
+import { DemoCookieSettings } from "./cookie-setting"
+import { DemoCreateAccount } from "./create-account"
+import { DemoGithub } from "./github-cards"
+import { DemoNotifications } from "./notifications"
+import { DemoPaymentMethod } from "./payment-method"
+import { DemoReportAnIssue } from "./report-an-issue"
+import { DemoShareDocument } from "./share-document"
 
 const DemoContainer: ParentComponent = (props) => {
-	return (
-		<div class="flex items-center justify-center [&>div]:w-full">
-			{props.children}
-		</div>
-	);
-};
+  return (
+    <div class="flex items-center justify-center [&>div]:w-full">
+      {props.children}
+    </div>
+  )
+}
 
 const CardsUI = () => {
-	return (
-		<>
-			<div class="md:hidden">
-				<img
-					src="/examples/cards-light.png"
-					width={1280}
-					height={1214}
-					alt="Cards"
-					class="block dark:hidden"
-				/>
-				<img
-					src="/examples/cards-dark.png"
-					width={1280}
-					height={1214}
-					alt="Cards"
-					class="hidden dark:block"
-				/>
-			</div>
-			<div class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
-				<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
-					<DemoContainer>
-						<DemoCreateAccount />
-					</DemoContainer>
-					<DemoContainer>
-						<DemoPaymentMethod />
-					</DemoContainer>
-				</div>
-				<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
-					<DemoContainer>
-						<DemoShareDocument />
-					</DemoContainer>
-					<DemoContainer>
-						<DemoReportAnIssue />
-					</DemoContainer>
-				</div>
-				<div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
-					<DemoContainer>
-						<DemoNotifications />
-					</DemoContainer>
-					<DemoContainer>
-						<DemoGithub />
-					</DemoContainer>
-					<DemoContainer>
-						<DemoCookieSettings />
-					</DemoContainer>
-				</div>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <div class="md:hidden">
+        <img
+          src="/examples/cards-light.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          class="block dark:hidden"
+        />
+        <img
+          src="/examples/cards-dark.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          class="hidden dark:block"
+        />
+      </div>
+      <div class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
+        <div class="col-span-2 grid items-start gap-6 lg:col-span-1">
+          <DemoContainer>
+            <DemoCreateAccount />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoPaymentMethod />
+          </DemoContainer>
+        </div>
+        <div class="col-span-2 grid items-start gap-6 lg:col-span-1">
+          <DemoContainer>
+            <DemoShareDocument />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoReportAnIssue />
+          </DemoContainer>
+        </div>
+        <div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
+          <DemoContainer>
+            <DemoNotifications />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoGithub />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoCookieSettings />
+          </DemoContainer>
+        </div>
+      </div>
+    </>
+  )
+}
 
-export default CardsUI;
+export default CardsUI
diff --git a/docs/src/routes/(app)/examples/_components/mail/account-switcher.tsx b/docs/src/routes/(app)/examples/_components/mail/account-switcher.tsx
index da0f6cf4..a34a573c 100644
--- a/docs/src/routes/(app)/examples/_components/mail/account-switcher.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/account-switcher.tsx
@@ -1,60 +1,62 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
+import { createSignal } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/registry/tailwindcss/ui/select";
-import { createSignal } from "solid-js";
-import { type Account, accounts } from "./data";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/tailwindcss/ui/select"
+
+import { accounts, type Account } from "./data"
 
 type Props = {
-	isCollapsed: boolean;
-};
+  isCollapsed: boolean
+}
 
 export const AccountSwitcher = (props: Props) => {
-	const [selectedAccount, setSelectedAccount] = createSignal<Account>(
-		accounts[0],
-	);
+  const [selectedAccount, setSelectedAccount] = createSignal<Account>(
+    accounts[0]
+  )
 
-	return (
-		<Select<Account>
-			value={selectedAccount()}
-			onChange={setSelectedAccount}
-			options={accounts}
-			optionValue="email"
-			optionTextValue="label"
-			itemComponent={(props) => (
-				<SelectItem item={props.item}>{props.item.rawValue.email}</SelectItem>
-			)}
-			class={cn(
-				"flex h-[52px] items-center justify-center",
-				props.isCollapsed ? "h-[52px]" : "px-2",
-			)}
-			placement="bottom-start"
-			disallowEmptySelection
-		>
-			<SelectTrigger
-				class={cn(
-					"flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
-					props.isCollapsed &&
-						"flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden",
-				)}
-				aria-label="Select account"
-			>
-				<SelectValue<Account>>
-					{(state) => (
-						<>
-							{state.selectedOption().icon}
-							<div class={cn("ml-2", props.isCollapsed && "hidden")}>
-								{state.selectedOption().label}
-							</div>
-						</>
-					)}
-				</SelectValue>
-			</SelectTrigger>
-			<SelectContent />
-		</Select>
-	);
-};
+  return (
+    <Select<Account>
+      value={selectedAccount()}
+      onChange={setSelectedAccount}
+      options={accounts}
+      optionValue="email"
+      optionTextValue="label"
+      itemComponent={(props) => (
+        <SelectItem item={props.item}>{props.item.rawValue.email}</SelectItem>
+      )}
+      class={cn(
+        "flex h-[52px] items-center justify-center",
+        props.isCollapsed ? "h-[52px]" : "px-2"
+      )}
+      placement="bottom-start"
+      disallowEmptySelection
+    >
+      <SelectTrigger
+        class={cn(
+          "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+          props.isCollapsed &&
+            "flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden"
+        )}
+        aria-label="Select account"
+      >
+        <SelectValue<Account>>
+          {(state) => (
+            <>
+              {state.selectedOption().icon}
+              <div class={cn("ml-2", props.isCollapsed && "hidden")}>
+                {state.selectedOption().label}
+              </div>
+            </>
+          )}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent />
+    </Select>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/mail/data.tsx b/docs/src/routes/(app)/examples/_components/mail/data.tsx
index 408db4cc..2807a4a2 100644
--- a/docs/src/routes/(app)/examples/_components/mail/data.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/data.tsx
@@ -1,300 +1,300 @@
 export const mails = [
-	{
-		id: "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
-		name: "William Smith",
-		email: "williamsmith@example.com",
-		subject: "Meeting Tomorrow",
-		text: "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.\n\nPlease come prepared with any questions or insights you may have. Looking forward to our meeting!\n\nBest regards, William",
-		date: "2023-10-22T09:00:00",
-		read: true,
-		labels: ["meeting", "work", "important"],
-	},
-	{
-		id: "110e8400-e29b-11d4-a716-446655440000",
-		name: "Alice Smith",
-		email: "alicesmith@example.com",
-		subject: "Re: Project Update",
-		text: "Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.\n\nI have a few minor suggestions that I'll include in the attached document.\n\nLet's discuss these during our next meeting. Keep up the excellent work!\n\nBest regards, Alice",
-		date: "2023-10-22T10:30:00",
-		read: true,
-		labels: ["work", "important"],
-	},
-	{
-		id: "3e7c3f6d-bdf5-46ae-8d90-171300f27ae2",
-		name: "Bob Johnson",
-		email: "bobjohnson@example.com",
-		subject: "Weekend Plans",
-		text: "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.\n\nIf you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob",
-		date: "2023-04-10T11:45:00",
-		read: true,
-		labels: ["personal"],
-	},
-	{
-		id: "61c35085-72d7-42b4-8d62-738f700d4b92",
-		name: "Emily Davis",
-		email: "emilydavis@example.com",
-		subject: "Re: Question about Budget",
-		text: "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.\n\nI've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.\n\nI've attached a detailed analysis for your reference. Let's discuss this further in our next meeting.\n\nThanks, Emily",
-		date: "2023-03-25T13:15:00",
-		read: false,
-		labels: ["work", "budget"],
-	},
-	{
-		id: "8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97",
-		name: "Michael Wilson",
-		email: "michaelwilson@example.com",
-		subject: "Important Announcement",
-		text: "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael",
-		date: "2023-03-10T15:00:00",
-		read: false,
-		labels: ["meeting", "work", "important"],
-	},
-	{
-		id: "1f0f2c02-e299-40de-9b1d-86ef9e42126b",
-		name: "Sarah Brown",
-		email: "sarahbrown@example.com",
-		subject: "Re: Feedback on Proposal",
-		text: "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI've attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah",
-		date: "2023-02-15T16:30:00",
-		read: true,
-		labels: ["work"],
-	},
-	{
-		id: "17c0a96d-4415-42b1-8b4f-764efab57f66",
-		name: "David Lee",
-		email: "davidlee@example.com",
-		subject: "New Project Idea",
-		text: "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI've prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let's set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David",
-		date: "2023-01-28T17:45:00",
-		read: false,
-		labels: ["meeting", "work", "important"],
-	},
-	{
-		id: "2f0130cb-39fc-44c4-bb3c-0a4337edaaab",
-		name: "Olivia Wilson",
-		email: "oliviawilson@example.com",
-		subject: "Vacation Plans",
-		text: "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.\n\nI believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia",
-		date: "2022-12-20T18:30:00",
-		read: true,
-		labels: ["personal"],
-	},
-	{
-		id: "de305d54-75b4-431b-adb2-eb6b9e546014",
-		name: "James Martin",
-		email: "jamesmartin@example.com",
-		subject: "Re: Conference Registration",
-		text: "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.\n\nI've also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you'd like me to explore, please let me know. It's an exciting event, and I'll make the most of it.\n\nBest regards, James",
-		date: "2022-11-30T19:15:00",
-		read: true,
-		labels: ["work", "conference"],
-	},
-	{
-		id: "7dd90c63-00f6-40f3-bd87-5060a24e8ee7",
-		name: "Sophia White",
-		email: "sophiawhite@example.com",
-		subject: "Team Dinner",
-		text: "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.\n\nI've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia",
-		date: "2022-11-05T20:30:00",
-		read: false,
-		labels: ["meeting", "work"],
-	},
-	{
-		id: "99a88f78-3eb4-4d87-87b7-7b15a49a0a05",
-		name: "Daniel Johnson",
-		email: "danieljohnson@example.com",
-		subject: "Feedback Request",
-		text: "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.\n\nI've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let's work together to make this project a success.\n\nRegards, Daniel",
-		date: "2022-10-22T09:30:00",
-		read: false,
-		labels: ["work"],
-	},
-	{
-		id: "f47ac10b-58cc-4372-a567-0e02b2c3d479",
-		name: "Ava Taylor",
-		email: "avataylor@example.com",
-		subject: "Re: Meeting Agenda",
-		text: "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt's essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava",
-		date: "2022-10-10T10:45:00",
-		read: true,
-		labels: ["meeting", "work"],
-	},
-	{
-		id: "c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6",
-		name: "William Anderson",
-		email: "williamanderson@example.com",
-		subject: "Product Launch Update",
-		text: "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.\n\nI'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet's make this product launch a resounding success!\n\nBest regards, William",
-		date: "2022-09-20T12:00:00",
-		read: false,
-		labels: ["meeting", "work", "important"],
-	},
-	{
-		id: "ba54eefd-4097-4949-99f2-2a9ae4d1a836",
-		name: "Mia Harris",
-		email: "miaharris@example.com",
-		subject: "Re: Travel Itinerary",
-		text: "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia",
-		date: "2022-09-10T13:15:00",
-		read: true,
-		labels: ["personal", "travel"],
-	},
-	{
-		id: "df09b6ed-28bd-4e0c-85a9-9320ec5179aa",
-		name: "Ethan Clark",
-		email: "ethanclark@example.com",
-		subject: "Team Building Event",
-		text: "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we'll strengthen our team and boost our performance.\n\nRegards, Ethan",
-		date: "2022-08-25T15:30:00",
-		read: false,
-		labels: ["meeting", "work"],
-	},
-	{
-		id: "d67c1842-7f8b-4b4b-9be1-1b3b1ab4611d",
-		name: "Chloe Hall",
-		email: "chloehall@example.com",
-		subject: "Re: Budget Approval",
-		text: "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI've attached the finalized budget for your reference. Let's ensure that we stay on track and deliver the project on time and within budget.\n\nIt's an exciting time for us! Chloe",
-		date: "2022-08-10T16:45:00",
-		read: true,
-		labels: ["work", "budget"],
-	},
-	{
-		id: "6c9a7f94-8329-4d70-95d3-51f68c186ae1",
-		name: "Samuel Turner",
-		email: "samuelturner@example.com",
-		subject: "Weekend Hike",
-		text: "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI've done some research and have a few routes in mind.\n\nLet me know if you're interested, and we can plan the details.\n\nIt's sure to be a memorable experience! Samuel",
-		date: "2022-07-28T17:30:00",
-		read: false,
-		labels: ["personal"],
-	},
-];
+  {
+    id: "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
+    name: "William Smith",
+    email: "williamsmith@example.com",
+    subject: "Meeting Tomorrow",
+    text: "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.\n\nPlease come prepared with any questions or insights you may have. Looking forward to our meeting!\n\nBest regards, William",
+    date: "2023-10-22T09:00:00",
+    read: true,
+    labels: ["meeting", "work", "important"],
+  },
+  {
+    id: "110e8400-e29b-11d4-a716-446655440000",
+    name: "Alice Smith",
+    email: "alicesmith@example.com",
+    subject: "Re: Project Update",
+    text: "Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.\n\nI have a few minor suggestions that I'll include in the attached document.\n\nLet's discuss these during our next meeting. Keep up the excellent work!\n\nBest regards, Alice",
+    date: "2023-10-22T10:30:00",
+    read: true,
+    labels: ["work", "important"],
+  },
+  {
+    id: "3e7c3f6d-bdf5-46ae-8d90-171300f27ae2",
+    name: "Bob Johnson",
+    email: "bobjohnson@example.com",
+    subject: "Weekend Plans",
+    text: "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.\n\nIf you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob",
+    date: "2023-04-10T11:45:00",
+    read: true,
+    labels: ["personal"],
+  },
+  {
+    id: "61c35085-72d7-42b4-8d62-738f700d4b92",
+    name: "Emily Davis",
+    email: "emilydavis@example.com",
+    subject: "Re: Question about Budget",
+    text: "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.\n\nI've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.\n\nI've attached a detailed analysis for your reference. Let's discuss this further in our next meeting.\n\nThanks, Emily",
+    date: "2023-03-25T13:15:00",
+    read: false,
+    labels: ["work", "budget"],
+  },
+  {
+    id: "8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97",
+    name: "Michael Wilson",
+    email: "michaelwilson@example.com",
+    subject: "Important Announcement",
+    text: "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael",
+    date: "2023-03-10T15:00:00",
+    read: false,
+    labels: ["meeting", "work", "important"],
+  },
+  {
+    id: "1f0f2c02-e299-40de-9b1d-86ef9e42126b",
+    name: "Sarah Brown",
+    email: "sarahbrown@example.com",
+    subject: "Re: Feedback on Proposal",
+    text: "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI've attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah",
+    date: "2023-02-15T16:30:00",
+    read: true,
+    labels: ["work"],
+  },
+  {
+    id: "17c0a96d-4415-42b1-8b4f-764efab57f66",
+    name: "David Lee",
+    email: "davidlee@example.com",
+    subject: "New Project Idea",
+    text: "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI've prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let's set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David",
+    date: "2023-01-28T17:45:00",
+    read: false,
+    labels: ["meeting", "work", "important"],
+  },
+  {
+    id: "2f0130cb-39fc-44c4-bb3c-0a4337edaaab",
+    name: "Olivia Wilson",
+    email: "oliviawilson@example.com",
+    subject: "Vacation Plans",
+    text: "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.\n\nI believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia",
+    date: "2022-12-20T18:30:00",
+    read: true,
+    labels: ["personal"],
+  },
+  {
+    id: "de305d54-75b4-431b-adb2-eb6b9e546014",
+    name: "James Martin",
+    email: "jamesmartin@example.com",
+    subject: "Re: Conference Registration",
+    text: "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.\n\nI've also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you'd like me to explore, please let me know. It's an exciting event, and I'll make the most of it.\n\nBest regards, James",
+    date: "2022-11-30T19:15:00",
+    read: true,
+    labels: ["work", "conference"],
+  },
+  {
+    id: "7dd90c63-00f6-40f3-bd87-5060a24e8ee7",
+    name: "Sophia White",
+    email: "sophiawhite@example.com",
+    subject: "Team Dinner",
+    text: "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.\n\nI've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia",
+    date: "2022-11-05T20:30:00",
+    read: false,
+    labels: ["meeting", "work"],
+  },
+  {
+    id: "99a88f78-3eb4-4d87-87b7-7b15a49a0a05",
+    name: "Daniel Johnson",
+    email: "danieljohnson@example.com",
+    subject: "Feedback Request",
+    text: "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.\n\nI've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let's work together to make this project a success.\n\nRegards, Daniel",
+    date: "2022-10-22T09:30:00",
+    read: false,
+    labels: ["work"],
+  },
+  {
+    id: "f47ac10b-58cc-4372-a567-0e02b2c3d479",
+    name: "Ava Taylor",
+    email: "avataylor@example.com",
+    subject: "Re: Meeting Agenda",
+    text: "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt's essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava",
+    date: "2022-10-10T10:45:00",
+    read: true,
+    labels: ["meeting", "work"],
+  },
+  {
+    id: "c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6",
+    name: "William Anderson",
+    email: "williamanderson@example.com",
+    subject: "Product Launch Update",
+    text: "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.\n\nI'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet's make this product launch a resounding success!\n\nBest regards, William",
+    date: "2022-09-20T12:00:00",
+    read: false,
+    labels: ["meeting", "work", "important"],
+  },
+  {
+    id: "ba54eefd-4097-4949-99f2-2a9ae4d1a836",
+    name: "Mia Harris",
+    email: "miaharris@example.com",
+    subject: "Re: Travel Itinerary",
+    text: "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia",
+    date: "2022-09-10T13:15:00",
+    read: true,
+    labels: ["personal", "travel"],
+  },
+  {
+    id: "df09b6ed-28bd-4e0c-85a9-9320ec5179aa",
+    name: "Ethan Clark",
+    email: "ethanclark@example.com",
+    subject: "Team Building Event",
+    text: "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we'll strengthen our team and boost our performance.\n\nRegards, Ethan",
+    date: "2022-08-25T15:30:00",
+    read: false,
+    labels: ["meeting", "work"],
+  },
+  {
+    id: "d67c1842-7f8b-4b4b-9be1-1b3b1ab4611d",
+    name: "Chloe Hall",
+    email: "chloehall@example.com",
+    subject: "Re: Budget Approval",
+    text: "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI've attached the finalized budget for your reference. Let's ensure that we stay on track and deliver the project on time and within budget.\n\nIt's an exciting time for us! Chloe",
+    date: "2022-08-10T16:45:00",
+    read: true,
+    labels: ["work", "budget"],
+  },
+  {
+    id: "6c9a7f94-8329-4d70-95d3-51f68c186ae1",
+    name: "Samuel Turner",
+    email: "samuelturner@example.com",
+    subject: "Weekend Hike",
+    text: "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI've done some research and have a few routes in mind.\n\nLet me know if you're interested, and we can plan the details.\n\nIt's sure to be a memorable experience! Samuel",
+    date: "2022-07-28T17:30:00",
+    read: false,
+    labels: ["personal"],
+  },
+]
 
-export type Mail = (typeof mails)[number];
+export type Mail = (typeof mails)[number]
 
 export const accounts = [
-	{
-		label: "Alicia Koch",
-		email: "alicia@example.com",
-		icon: (
-			<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<title>Vercel</title>
-				<path d="M24 22.525H0l12-21.05 12 21.05z" fill="currentColor" />
-			</svg>
-		),
-	},
-	{
-		label: "Alicia Koch",
-		email: "alicia@gmail.com",
-		icon: (
-			<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<title>Gmail</title>
-				<path
-					d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"
-					fill="currentColor"
-				/>
-			</svg>
-		),
-	},
-	{
-		label: "Alicia Koch",
-		email: "alicia@me.com",
-		icon: (
-			<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<title>iCloud</title>
-				<path
-					d="M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z"
-					fill="currentColor"
-				/>
-			</svg>
-		),
-	},
-];
+  {
+    label: "Alicia Koch",
+    email: "alicia@example.com",
+    icon: (
+      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>Vercel</title>
+        <path d="M24 22.525H0l12-21.05 12 21.05z" fill="currentColor" />
+      </svg>
+    ),
+  },
+  {
+    label: "Alicia Koch",
+    email: "alicia@gmail.com",
+    icon: (
+      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>Gmail</title>
+        <path
+          d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+  {
+    label: "Alicia Koch",
+    email: "alicia@me.com",
+    icon: (
+      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>iCloud</title>
+        <path
+          d="M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+]
 
-export type Account = (typeof accounts)[number];
+export type Account = (typeof accounts)[number]
 
 export const contacts = [
-	{
-		name: "Emma Johnson",
-		email: "emma.johnson@example.com",
-	},
-	{
-		name: "Liam Wilson",
-		email: "liam.wilson@example.com",
-	},
-	{
-		name: "Olivia Davis",
-		email: "olivia.davis@example.com",
-	},
-	{
-		name: "Noah Martinez",
-		email: "noah.martinez@example.com",
-	},
-	{
-		name: "Ava Taylor",
-		email: "ava.taylor@example.com",
-	},
-	{
-		name: "Lucas Brown",
-		email: "lucas.brown@example.com",
-	},
-	{
-		name: "Sophia Smith",
-		email: "sophia.smith@example.com",
-	},
-	{
-		name: "Ethan Wilson",
-		email: "ethan.wilson@example.com",
-	},
-	{
-		name: "Isabella Jackson",
-		email: "isabella.jackson@example.com",
-	},
-	{
-		name: "Mia Clark",
-		email: "mia.clark@example.com",
-	},
-	{
-		name: "Mason Lee",
-		email: "mason.lee@example.com",
-	},
-	{
-		name: "Layla Harris",
-		email: "layla.harris@example.com",
-	},
-	{
-		name: "William Anderson",
-		email: "william.anderson@example.com",
-	},
-	{
-		name: "Ella White",
-		email: "ella.white@example.com",
-	},
-	{
-		name: "James Thomas",
-		email: "james.thomas@example.com",
-	},
-	{
-		name: "Harper Lewis",
-		email: "harper.lewis@example.com",
-	},
-	{
-		name: "Benjamin Moore",
-		email: "benjamin.moore@example.com",
-	},
-	{
-		name: "Aria Hall",
-		email: "aria.hall@example.com",
-	},
-	{
-		name: "Henry Turner",
-		email: "henry.turner@example.com",
-	},
-	{
-		name: "Scarlett Adams",
-		email: "scarlett.adams@example.com",
-	},
-];
+  {
+    name: "Emma Johnson",
+    email: "emma.johnson@example.com",
+  },
+  {
+    name: "Liam Wilson",
+    email: "liam.wilson@example.com",
+  },
+  {
+    name: "Olivia Davis",
+    email: "olivia.davis@example.com",
+  },
+  {
+    name: "Noah Martinez",
+    email: "noah.martinez@example.com",
+  },
+  {
+    name: "Ava Taylor",
+    email: "ava.taylor@example.com",
+  },
+  {
+    name: "Lucas Brown",
+    email: "lucas.brown@example.com",
+  },
+  {
+    name: "Sophia Smith",
+    email: "sophia.smith@example.com",
+  },
+  {
+    name: "Ethan Wilson",
+    email: "ethan.wilson@example.com",
+  },
+  {
+    name: "Isabella Jackson",
+    email: "isabella.jackson@example.com",
+  },
+  {
+    name: "Mia Clark",
+    email: "mia.clark@example.com",
+  },
+  {
+    name: "Mason Lee",
+    email: "mason.lee@example.com",
+  },
+  {
+    name: "Layla Harris",
+    email: "layla.harris@example.com",
+  },
+  {
+    name: "William Anderson",
+    email: "william.anderson@example.com",
+  },
+  {
+    name: "Ella White",
+    email: "ella.white@example.com",
+  },
+  {
+    name: "James Thomas",
+    email: "james.thomas@example.com",
+  },
+  {
+    name: "Harper Lewis",
+    email: "harper.lewis@example.com",
+  },
+  {
+    name: "Benjamin Moore",
+    email: "benjamin.moore@example.com",
+  },
+  {
+    name: "Aria Hall",
+    email: "aria.hall@example.com",
+  },
+  {
+    name: "Henry Turner",
+    email: "henry.turner@example.com",
+  },
+  {
+    name: "Scarlett Adams",
+    email: "scarlett.adams@example.com",
+  },
+]
 
-export type Contact = (typeof contacts)[number];
+export type Contact = (typeof contacts)[number]
diff --git a/docs/src/routes/(app)/examples/_components/mail/mail-display.tsx b/docs/src/routes/(app)/examples/_components/mail/mail-display.tsx
index bffa2920..c1ef5aac 100644
--- a/docs/src/routes/(app)/examples/_components/mail/mail-display.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/mail-display.tsx
@@ -1,260 +1,262 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Show, createMemo } from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+import { Image } from "@kobalte/core/image"
+import type { TooltipTriggerProps } from "@kobalte/core/tooltip"
+
+import { Button } from "@/registry/tailwindcss/ui/button"
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/registry/tailwindcss/ui/dropdown-menu";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/tailwindcss/ui/dropdown-menu"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 import {
-	Switch,
-	SwitchControl,
-	SwitchLabel,
-	SwitchThumb,
-} from "@/registry/tailwindcss/ui/switch";
-import { TextArea } from "@/registry/tailwindcss/ui/textarea";
-import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
+  Switch,
+  SwitchControl,
+  SwitchLabel,
+  SwitchThumb,
+} from "@/registry/tailwindcss/ui/switch"
+import { TextArea } from "@/registry/tailwindcss/ui/textarea"
+import { TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/registry/tailwindcss/ui/tooltip";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { Image } from "@kobalte/core/image";
-import type { TooltipTriggerProps } from "@kobalte/core/tooltip";
-import { Show, createMemo } from "solid-js";
-import { mails } from "./data";
-import { mail } from "./use-mail";
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tailwindcss/ui/tooltip"
+
+import { mails } from "./data"
+import { mail } from "./use-mail"
 
 export const MailDisplay = () => {
-	const data = createMemo(
-		() => mails.find((item) => item.id === mail.selected) ?? null,
-	);
+  const data = createMemo(
+    () => mails.find((item) => item.id === mail.selected) ?? null
+  )
 
-	return (
-		<div class="flex h-full flex-col">
-			<div class="flex items-center p-2">
-				<div class="flex items-center gap-2">
-					<Tooltip openDelay={0} closeDelay={0}>
-						<TooltipTrigger
-							as={(props: TooltipTriggerProps) => (
-								<Button
-									variant="ghost"
-									size="icon"
-									disabled={!data()}
-									{...props}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="size-4"
-										viewBox="0 0 24 24"
-									>
-										<path
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4"
-										/>
-										<title>Archive</title>
-									</svg>
-								</Button>
-							)}
-						/>
-						<TooltipContent>Archive</TooltipContent>
-					</Tooltip>
-					<Tooltip openDelay={0} closeDelay={0}>
-						<TooltipTrigger
-							as={(props: TooltipTriggerProps) => (
-								<Button
-									variant="ghost"
-									size="icon"
-									disabled={!data()}
-									{...props}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="size-4"
-										viewBox="0 0 24 24"
-									>
-										<path
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
-										/>
-										<title>Move to trash</title>
-									</svg>
-								</Button>
-							)}
-						/>
-						<TooltipContent>Move to trash</TooltipContent>
-					</Tooltip>
-				</div>
-				<div class="ml-auto flex items-center gap-2">
-					<Tooltip openDelay={0} closeDelay={0}>
-						<TooltipTrigger
-							as={(props: TooltipTriggerProps) => (
-								<Button
-									variant="ghost"
-									size="icon"
-									disabled={!data()}
-									{...props}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="size-4"
-										viewBox="0 0 24 24"
-									>
-										<g
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-										>
-											<path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z" />
-											<path d="m11 8l-3 3l3 3m5-3H8" />
-										</g>
-										<title>Reply</title>
-									</svg>
-								</Button>
-							)}
-						/>
-						<TooltipContent>Reply</TooltipContent>
-					</Tooltip>
-					<Tooltip openDelay={0} closeDelay={0}>
-						<TooltipTrigger
-							as={(props: TooltipTriggerProps) => (
-								<Button
-									variant="ghost"
-									size="icon"
-									disabled={!data()}
-									{...props}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="size-4"
-										viewBox="0 0 24 24"
-									>
-										<g
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-										>
-											<path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z" />
-											<path d="m13 8l3 3l-3 3m3-3H8" />
-										</g>
-										<title>Forward</title>
-									</svg>
-								</Button>
-							)}
-						/>
-						<TooltipContent>Forward</TooltipContent>
-					</Tooltip>
-				</div>
-				<Separator orientation="vertical" class="mx-2 h-6" />
-				<DropdownMenu placement="bottom-end">
-					<DropdownMenuTrigger
-						as={(props: DropdownMenuTriggerProps) => (
-							<Button variant="ghost" size="icon" disabled={!data()} {...props}>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0-14a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
-									/>
-									<title>More</title>
-								</svg>
-							</Button>
-						)}
-					/>
-					<DropdownMenuContent>
-						<DropdownMenuItem>Mark as unread</DropdownMenuItem>
-						<DropdownMenuItem>Star thread</DropdownMenuItem>
-						<DropdownMenuItem>Add label</DropdownMenuItem>
-						<DropdownMenuItem>Mute thread</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
-			<Separator />
-			<Show
-				when={data()}
-				fallback={
-					<div class="p-8 text-center text-muted-foreground">
-						No message selected
-					</div>
-				}
-			>
-				<div class="flex flex-1 flex-col">
-					<div class="flex items-start p-4">
-						<div class="flex items-start gap-4 text-sm">
-							<Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
-								<Image.Img alt={data()?.name} />
-								<Image.Fallback class="flex h-full w-full items-center justify-center rounded-full bg-muted">
-									{data()
-										?.name.split(" ")
-										.map((chunk) => chunk[0])
-										.join("")}
-								</Image.Fallback>
-							</Image>
-							<div class="grid gap-1">
-								<div class="font-semibold">{data()?.name}</div>
-								<div class="line-clamp-1 text-xs">{data()?.subject}</div>
-								<div class="line-clamp-1 text-xs">
-									<span class="font-medium">Reply-To:</span> {data()?.email}
-								</div>
-							</div>
-						</div>
-						{data()?.date && (
-							<div class="ml-auto text-xs text-muted-foreground">
-								{new Intl.DateTimeFormat("en-US", {
-									dateStyle: "medium",
-									timeStyle: "short",
-								}).format(new Date(data()!.date))}
-							</div>
-						)}
-					</div>
-					<Separator />
-					<div class="flex-1 whitespace-pre-wrap p-4 text-sm">
-						{data()?.text}
-					</div>
-					<Separator class="mt-auto" />
-					<div class="p-4">
-						<div class="grid gap-4">
-							<TextFieldRoot>
-								<TextArea
-									class="p-4"
-									placeholder={`Reply ${data()!.name}...`}
-								/>
-							</TextFieldRoot>
-							<div class="flex items-center">
-								<Switch class="flex items-center gap-2 text-xs font-normal">
-									<SwitchControl>
-										<SwitchThumb />
-									</SwitchControl>
-									<SwitchLabel>Mute this thread</SwitchLabel>
-								</Switch>
-								<Button size="sm" class="ml-auto">
-									Send
-								</Button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</Show>
-		</div>
-	);
-};
+  return (
+    <div class="flex h-full flex-col">
+      <div class="flex items-center p-2">
+        <div class="flex items-center gap-2">
+          <Tooltip openDelay={0} closeDelay={0}>
+            <TooltipTrigger
+              as={(props: TooltipTriggerProps) => (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  disabled={!data()}
+                  {...props}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="size-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4"
+                    />
+                    <title>Archive</title>
+                  </svg>
+                </Button>
+              )}
+            />
+            <TooltipContent>Archive</TooltipContent>
+          </Tooltip>
+          <Tooltip openDelay={0} closeDelay={0}>
+            <TooltipTrigger
+              as={(props: TooltipTriggerProps) => (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  disabled={!data()}
+                  {...props}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="size-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+                    />
+                    <title>Move to trash</title>
+                  </svg>
+                </Button>
+              )}
+            />
+            <TooltipContent>Move to trash</TooltipContent>
+          </Tooltip>
+        </div>
+        <div class="ml-auto flex items-center gap-2">
+          <Tooltip openDelay={0} closeDelay={0}>
+            <TooltipTrigger
+              as={(props: TooltipTriggerProps) => (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  disabled={!data()}
+                  {...props}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="size-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                    >
+                      <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z" />
+                      <path d="m11 8l-3 3l3 3m5-3H8" />
+                    </g>
+                    <title>Reply</title>
+                  </svg>
+                </Button>
+              )}
+            />
+            <TooltipContent>Reply</TooltipContent>
+          </Tooltip>
+          <Tooltip openDelay={0} closeDelay={0}>
+            <TooltipTrigger
+              as={(props: TooltipTriggerProps) => (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  disabled={!data()}
+                  {...props}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="size-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                    >
+                      <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z" />
+                      <path d="m13 8l3 3l-3 3m3-3H8" />
+                    </g>
+                    <title>Forward</title>
+                  </svg>
+                </Button>
+              )}
+            />
+            <TooltipContent>Forward</TooltipContent>
+          </Tooltip>
+        </div>
+        <Separator orientation="vertical" class="mx-2 h-6" />
+        <DropdownMenu placement="bottom-end">
+          <DropdownMenuTrigger
+            as={(props: DropdownMenuTriggerProps) => (
+              <Button variant="ghost" size="icon" disabled={!data()} {...props}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0-14a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+                  />
+                  <title>More</title>
+                </svg>
+              </Button>
+            )}
+          />
+          <DropdownMenuContent>
+            <DropdownMenuItem>Mark as unread</DropdownMenuItem>
+            <DropdownMenuItem>Star thread</DropdownMenuItem>
+            <DropdownMenuItem>Add label</DropdownMenuItem>
+            <DropdownMenuItem>Mute thread</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <Separator />
+      <Show
+        when={data()}
+        fallback={
+          <div class="text-muted-foreground p-8 text-center">
+            No message selected
+          </div>
+        }
+      >
+        <div class="flex flex-1 flex-col">
+          <div class="flex items-start p-4">
+            <div class="flex items-start gap-4 text-sm">
+              <Image class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
+                <Image.Img alt={data()?.name} />
+                <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-full">
+                  {data()
+                    ?.name.split(" ")
+                    .map((chunk) => chunk[0])
+                    .join("")}
+                </Image.Fallback>
+              </Image>
+              <div class="grid gap-1">
+                <div class="font-semibold">{data()?.name}</div>
+                <div class="line-clamp-1 text-xs">{data()?.subject}</div>
+                <div class="line-clamp-1 text-xs">
+                  <span class="font-medium">Reply-To:</span> {data()?.email}
+                </div>
+              </div>
+            </div>
+            {data()?.date && (
+              <div class="text-muted-foreground ml-auto text-xs">
+                {new Intl.DateTimeFormat("en-US", {
+                  dateStyle: "medium",
+                  timeStyle: "short",
+                }).format(new Date(data()!.date))}
+              </div>
+            )}
+          </div>
+          <Separator />
+          <div class="flex-1 whitespace-pre-wrap p-4 text-sm">
+            {data()?.text}
+          </div>
+          <Separator class="mt-auto" />
+          <div class="p-4">
+            <div class="grid gap-4">
+              <TextFieldRoot>
+                <TextArea
+                  class="p-4"
+                  placeholder={`Reply ${data()!.name}...`}
+                />
+              </TextFieldRoot>
+              <div class="flex items-center">
+                <Switch class="flex items-center gap-2 text-xs font-normal">
+                  <SwitchControl>
+                    <SwitchThumb />
+                  </SwitchControl>
+                  <SwitchLabel>Mute this thread</SwitchLabel>
+                </Switch>
+                <Button size="sm" class="ml-auto">
+                  Send
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/mail/mail-list.tsx b/docs/src/routes/(app)/examples/_components/mail/mail-list.tsx
index 53fa0440..a9eb8157 100644
--- a/docs/src/routes/(app)/examples/_components/mail/mail-list.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/mail-list.tsx
@@ -1,95 +1,97 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { Badge } from "@/registry/tailwindcss/ui/badge";
-import { For } from "solid-js";
-import { mails } from "./data";
-import { mail, setMail } from "./use-mail";
+import { For } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+import { Badge } from "@/registry/tailwindcss/ui/badge"
+
+import { mails } from "./data"
+import { mail, setMail } from "./use-mail"
 
 type Props = {
-	type: "all" | "unread";
-};
+  type: "all" | "unread"
+}
 
 export const timeAgo = (timestamp: Date) => {
-	let value: string;
-	const diff = (new Date().getTime() - timestamp.getTime()) / 1000;
-	const minutes = Math.floor(diff / 60);
-	const hours = Math.floor(minutes / 60);
-	const days = Math.floor(hours / 24);
-	const months = Math.floor(days / 30);
-	const years = Math.floor(months / 12);
-	const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  let value: string
+  const diff = (new Date().getTime() - timestamp.getTime()) / 1000
+  const minutes = Math.floor(diff / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  const months = Math.floor(days / 30)
+  const years = Math.floor(months / 12)
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" })
 
-	if (years > 0) {
-		value = rtf.format(0 - years, "year");
-	} else if (months > 0) {
-		value = rtf.format(0 - months, "month");
-	} else if (days > 0) {
-		value = rtf.format(0 - days, "day");
-	} else if (hours > 0) {
-		value = rtf.format(0 - hours, "hour");
-	} else if (minutes > 0) {
-		value = rtf.format(0 - minutes, "minute");
-	} else {
-		value = rtf.format(0 - diff, "second");
-	}
-	return value;
-};
+  if (years > 0) {
+    value = rtf.format(0 - years, "year")
+  } else if (months > 0) {
+    value = rtf.format(0 - months, "month")
+  } else if (days > 0) {
+    value = rtf.format(0 - days, "day")
+  } else if (hours > 0) {
+    value = rtf.format(0 - hours, "hour")
+  } else if (minutes > 0) {
+    value = rtf.format(0 - minutes, "minute")
+  } else {
+    value = rtf.format(0 - diff, "second")
+  }
+  return value
+}
 
 export const MailList = (props: Props) => {
-	return (
-		<div class="flex h-[600px] flex-col gap-2 overflow-auto p-4 pt-0">
-			<For each={props.type === "all" ? mails : mails.filter((v) => !v.read)}>
-				{(item) => (
-					<button
-						type="button"
-						class={cn(
-							"flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent",
-							mail.selected === item.id && "bg-muted",
-						)}
-						onClick={() =>
-							setMail({
-								...mail,
-								selected: item.id,
-							})
-						}
-					>
-						<div class="flex w-full flex-col gap-1">
-							<div class="flex items-center">
-								<div class="flex items-center gap-2">
-									<div class="font-semibold">{item.name}</div>
-									{!item.read && (
-										<span class="flex h-2 w-2 rounded-full bg-blue-600" />
-									)}
-								</div>
-								<div
-									class={cn(
-										"ml-auto text-xs",
-										mail.selected === item.id
-											? "text-foreground"
-											: "text-muted-foreground",
-									)}
-								>
-									{timeAgo(new Date(item.date))}
-								</div>
-							</div>
-							<div class="text-xs font-medium">{item.subject}</div>
-						</div>
-						<div class="line-clamp-2 text-xs text-muted-foreground">
-							{item.text.substring(0, 300)}
-						</div>
-						{item.labels.length ? (
-							<div class="flex items-center gap-2">
-								<For each={item.labels}>
-									{(label) => (
-										<Badge variant={label === "work" ? "default" : "secondary"}>
-											{label}
-										</Badge>
-									)}
-								</For>
-							</div>
-						) : null}
-					</button>
-				)}
-			</For>
-		</div>
-	);
-};
+  return (
+    <div class="flex h-[600px] flex-col gap-2 overflow-auto p-4 pt-0">
+      <For each={props.type === "all" ? mails : mails.filter((v) => !v.read)}>
+        {(item) => (
+          <button
+            type="button"
+            class={cn(
+              "hover:bg-accent flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all",
+              mail.selected === item.id && "bg-muted"
+            )}
+            onClick={() =>
+              setMail({
+                ...mail,
+                selected: item.id,
+              })
+            }
+          >
+            <div class="flex w-full flex-col gap-1">
+              <div class="flex items-center">
+                <div class="flex items-center gap-2">
+                  <div class="font-semibold">{item.name}</div>
+                  {!item.read && (
+                    <span class="flex h-2 w-2 rounded-full bg-blue-600" />
+                  )}
+                </div>
+                <div
+                  class={cn(
+                    "ml-auto text-xs",
+                    mail.selected === item.id
+                      ? "text-foreground"
+                      : "text-muted-foreground"
+                  )}
+                >
+                  {timeAgo(new Date(item.date))}
+                </div>
+              </div>
+              <div class="text-xs font-medium">{item.subject}</div>
+            </div>
+            <div class="text-muted-foreground line-clamp-2 text-xs">
+              {item.text.substring(0, 300)}
+            </div>
+            {item.labels.length ? (
+              <div class="flex items-center gap-2">
+                <For each={item.labels}>
+                  {(label) => (
+                    <Badge variant={label === "work" ? "default" : "secondary"}>
+                      {label}
+                    </Badge>
+                  )}
+                </For>
+              </div>
+            ) : null}
+          </button>
+        )}
+      </For>
+    </div>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/mail/nav.tsx b/docs/src/routes/(app)/examples/_components/mail/nav.tsx
index 10774d0f..74611c30 100644
--- a/docs/src/routes/(app)/examples/_components/mail/nav.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/nav.tsx
@@ -1,91 +1,92 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
-import { buttonVariants } from "@/registry/tailwindcss/ui/button";
+import { For, Show, type JSX } from "solid-js"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
+import { buttonVariants } from "@/registry/tailwindcss/ui/button"
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/registry/tailwindcss/ui/tooltip";
-import { For, type JSX, Show } from "solid-js";
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/tailwindcss/ui/tooltip"
 
 type Props = {
-	isCollapsed: boolean;
-	links: {
-		title: string;
-		label?: string;
-		icon: JSX.Element;
-		variant: "default" | "ghost";
-	}[];
-};
+  isCollapsed: boolean
+  links: {
+    title: string
+    label?: string
+    icon: JSX.Element
+    variant: "default" | "ghost"
+  }[]
+}
 
 export const Nav = (props: Props) => {
-	return (
-		<div
-			data-collapsed={props.isCollapsed}
-			class="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2"
-		>
-			<nav class="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
-				<For each={props.links}>
-					{(item) => (
-						<Show
-							when={props.isCollapsed}
-							fallback={
-								<a
-									// biome-ignore lint/a11y/useValidAnchor: <explanation>
-									href="#"
-									class={cn(
-										buttonVariants({
-											variant: item.variant,
-											size: "sm",
-											class: "text-sm",
-										}),
-										item.variant === "default" &&
-											"dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
-										"justify-start",
-									)}
-								>
-									<div class="mr-2">{item.icon}</div>
-									{item.title}
-									{item.label && (
-										<span
-											class={cn(
-												"ml-auto",
-												item.variant === "default" &&
-													"text-background dark:text-white",
-											)}
-										>
-											{item.label}
-										</span>
-									)}
-								</a>
-							}
-						>
-							<Tooltip openDelay={0} closeDelay={0} placement="right">
-								<TooltipTrigger
-									as="a"
-									href="#"
-									class={cn(
-										buttonVariants({ variant: item.variant, size: "icon" }),
-										"h-9 w-9",
-										item.variant === "default" &&
-											"dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white",
-									)}
-								>
-									{item.icon}
-									<span class="sr-only">{item.title}</span>
-								</TooltipTrigger>
-								<TooltipContent class="flex items-center gap-4">
-									{item.title}
-									<Show when={item.label}>
-										<span class="ml-auto text-muted-foreground">
-											{item.label}
-										</span>
-									</Show>
-								</TooltipContent>
-							</Tooltip>
-						</Show>
-					)}
-				</For>
-			</nav>
-		</div>
-	);
-};
+  return (
+    <div
+      data-collapsed={props.isCollapsed}
+      class="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2"
+    >
+      <nav class="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
+        <For each={props.links}>
+          {(item) => (
+            <Show
+              when={props.isCollapsed}
+              fallback={
+                <a
+                  // biome-ignore lint/a11y/useValidAnchor: <explanation>
+                  href="#"
+                  class={cn(
+                    buttonVariants({
+                      variant: item.variant,
+                      size: "sm",
+                      class: "text-sm",
+                    }),
+                    item.variant === "default" &&
+                      "dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white",
+                    "justify-start"
+                  )}
+                >
+                  <div class="mr-2">{item.icon}</div>
+                  {item.title}
+                  {item.label && (
+                    <span
+                      class={cn(
+                        "ml-auto",
+                        item.variant === "default" &&
+                          "text-background dark:text-white"
+                      )}
+                    >
+                      {item.label}
+                    </span>
+                  )}
+                </a>
+              }
+            >
+              <Tooltip openDelay={0} closeDelay={0} placement="right">
+                <TooltipTrigger
+                  as="a"
+                  href="#"
+                  class={cn(
+                    buttonVariants({ variant: item.variant, size: "icon" }),
+                    "h-9 w-9",
+                    item.variant === "default" &&
+                      "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
+                  )}
+                >
+                  {item.icon}
+                  <span class="sr-only">{item.title}</span>
+                </TooltipTrigger>
+                <TooltipContent class="flex items-center gap-4">
+                  {item.title}
+                  <Show when={item.label}>
+                    <span class="text-muted-foreground ml-auto">
+                      {item.label}
+                    </span>
+                  </Show>
+                </TooltipContent>
+              </Tooltip>
+            </Show>
+          )}
+        </For>
+      </nav>
+    </div>
+  )
+}
diff --git a/docs/src/routes/(app)/examples/_components/mail/ui.tsx b/docs/src/routes/(app)/examples/_components/mail/ui.tsx
index 125a272d..49026462 100644
--- a/docs/src/routes/(app)/examples/_components/mail/ui.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/ui.tsx
@@ -1,367 +1,370 @@
-import { cn } from "@/registry/tailwindcss/libs/cn";
+import { createSignal } from "solid-js"
+import { cookieStorage, makePersisted } from "@solid-primitives/storage"
+
+import { cn } from "@/registry/tailwindcss/libs/cn"
 import {
-	Resizable,
-	ResizableHandle,
-	ResizablePanel,
-} from "@/registry/tailwindcss/ui/resizable";
-import { Separator } from "@/registry/tailwindcss/ui/separator";
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/registry/tailwindcss/ui/resizable"
+import { Separator } from "@/registry/tailwindcss/ui/separator"
 import {
-	Tabs,
-	TabsContent,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/registry/tailwindcss/ui/tabs";
-import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield";
-import { cookieStorage, makePersisted } from "@solid-primitives/storage";
-import { createSignal } from "solid-js";
-import { AccountSwitcher } from "./account-switcher";
-import { MailDisplay } from "./mail-display";
-import { MailList } from "./mail-list";
-import { Nav } from "./nav";
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/tailwindcss/ui/tabs"
+import { TextField, TextFieldRoot } from "@/registry/tailwindcss/ui/textfield"
+
+import { AccountSwitcher } from "./account-switcher"
+import { MailDisplay } from "./mail-display"
+import { MailList } from "./mail-list"
+import { Nav } from "./nav"
 
 const MailUI = () => {
-	const [sizes, setSizes] = makePersisted(createSignal<number[]>([]), {
-		name: "resizable-sizes",
-		storage: cookieStorage,
-		storageOptions: {
-			path: "/",
-		},
-	});
+  // eslint-disable-next-line solid/reactivity
+  const [sizes, setSizes] = makePersisted(createSignal<number[]>([]), {
+    name: "resizable-sizes",
+    storage: cookieStorage,
+    storageOptions: {
+      path: "/",
+    },
+  })
 
-	const [isCollapsed, setIsCollapsed] = createSignal(false);
+  const [isCollapsed, setIsCollapsed] = createSignal(false)
 
-	return (
-		<>
-			<div class="md:hidden">
-				<img
-					src="/examples/mail-light.png"
-					width={1280}
-					height={1214}
-					alt="Mail"
-					class="block dark:hidden"
-				/>
-				<img
-					src="/examples/mail-dark.png"
-					width={1280}
-					height={1214}
-					alt="Mail"
-					class="hidden dark:block"
-				/>
-			</div>
-			<div class="hidden md:block">
-				<Resizable sizes={sizes()} onSizesChange={setSizes}>
-					<ResizablePanel
-						initialSize={sizes()[0] ?? 0.2}
-						minSize={0.1}
-						maxSize={0.2}
-						collapsible
-						onCollapse={(e) => setIsCollapsed(e === 0)}
-						onExpand={() => setIsCollapsed(false)}
-						class={cn(
-							isCollapsed() &&
-								"min-w-[50px] transition-all duration-300 ease-in-out",
-						)}
-					>
-						<AccountSwitcher isCollapsed={isCollapsed()} />
-						<Separator />
-						<Nav
-							isCollapsed={isCollapsed()}
-							links={[
-								{
-									title: "Inbox",
-									label: "128",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<g
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-											>
-												<path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" />
-												<path d="M4 13h3l3 3h4l3-3h3" />
-											</g>
-											<title>Inbox</title>
-										</svg>
-									),
-									variant: "default",
-								},
-								{
-									title: "Drafts",
-									label: "9",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<g
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-											>
-												<path d="M14 3v4a1 1 0 0 0 1 1h4" />
-												<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
-											</g>
-											<title>Drafts</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Sent",
-									label: "",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z"
-											/>
-											<title>Sent</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Trash",
-									label: "23",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
-											/>
-											<title>Trash</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Archive",
-									label: "",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4"
-											/>
-											<title>Archive</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-							]}
-						/>
-						<Separator />
-						<Nav
-							isCollapsed={isCollapsed()}
-							links={[
-								{
-									title: "Social",
-									label: "972",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85"
-											/>
-											<title>Social</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Updates",
-									label: "342",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4m-4-6v3m0 3h.01"
-											/>
-											<title>Updates</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Forums",
-									label: "128",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="m21 14l-3-3h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm-7 1v2a1 1 0 0 1-1 1H6l-3 3V11a1 1 0 0 1 1-1h2"
-											/>
-											<title>Forums</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Shopping",
-									label: "8",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<g
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-											>
-												<path d="M4 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m11 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0" />
-												<path d="M17 17H6V3H4" />
-												<path d="m6 5l14 1l-1 7H6" />
-											</g>
-											<title>Shopping</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-								{
-									title: "Promotions",
-									label: "21",
-									icon: (
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4"
-											/>
-											<title>Promotions</title>
-										</svg>
-									),
-									variant: "ghost",
-								},
-							]}
-						/>
-					</ResizablePanel>
-					<ResizableHandle withHandle />
-					<ResizablePanel initialSize={sizes()[1] ?? 0.4} minSize={0.3}>
-						<Tabs defaultValue="all">
-							<div class="flex items-center px-4 py-2">
-								<h1 class="text-xl font-bold">Inbox</h1>
-								<TabsList class="ml-auto w-fit">
-									<TabsTrigger
-										value="all"
-										class="text-zinc-600 dark:text-zinc-200"
-									>
-										All mail
-									</TabsTrigger>
-									<TabsTrigger
-										value="unread"
-										class="text-zinc-600 dark:text-zinc-200"
-									>
-										Unread
-									</TabsTrigger>
-									<TabsIndicator />
-								</TabsList>
-							</div>
-							<Separator />
-							<div class="p-4">
-								<TextFieldRoot class="relative">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="absolute left-2 top-2.5 size-4 text-muted-foreground"
-										viewBox="0 0 24 24"
-									>
-										<path
-											fill="none"
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"
-										/>
-										<title>Search</title>
-									</svg>
-									<TextField class="pl-8" placeholder="Search" />
-								</TextFieldRoot>
-							</div>
-							<TabsContent value="all" class="m-0">
-								<MailList type="all" />
-							</TabsContent>
-							<TabsContent value="unread" class="m-0">
-								<MailList type="unread" />
-							</TabsContent>
-						</Tabs>
-					</ResizablePanel>
-					<ResizableHandle withHandle />
-					<ResizablePanel initialSize={sizes()[2] ?? 0.4} minSize={0.3}>
-						<MailDisplay />
-					</ResizablePanel>
-				</Resizable>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <div class="md:hidden">
+        <img
+          src="/examples/mail-light.png"
+          width={1280}
+          height={1214}
+          alt="Mail"
+          class="block dark:hidden"
+        />
+        <img
+          src="/examples/mail-dark.png"
+          width={1280}
+          height={1214}
+          alt="Mail"
+          class="hidden dark:block"
+        />
+      </div>
+      <div class="hidden md:block">
+        <Resizable sizes={sizes()} onSizesChange={setSizes}>
+          <ResizablePanel
+            initialSize={sizes()[0] ?? 0.2}
+            minSize={0.1}
+            maxSize={0.2}
+            collapsible
+            onCollapse={(e) => setIsCollapsed(e === 0)}
+            onExpand={() => setIsCollapsed(false)}
+            class={cn(
+              isCollapsed() &&
+                "min-w-[50px] transition-all duration-300 ease-in-out"
+            )}
+          >
+            <AccountSwitcher isCollapsed={isCollapsed()} />
+            <Separator />
+            <Nav
+              isCollapsed={isCollapsed()}
+              links={[
+                {
+                  title: "Inbox",
+                  label: "128",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      >
+                        <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" />
+                        <path d="M4 13h3l3 3h4l3-3h3" />
+                      </g>
+                      <title>Inbox</title>
+                    </svg>
+                  ),
+                  variant: "default",
+                },
+                {
+                  title: "Drafts",
+                  label: "9",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      >
+                        <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+                        <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
+                      </g>
+                      <title>Drafts</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Sent",
+                  label: "",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z"
+                      />
+                      <title>Sent</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Trash",
+                  label: "23",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+                      />
+                      <title>Trash</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Archive",
+                  label: "",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4"
+                      />
+                      <title>Archive</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+              ]}
+            />
+            <Separator />
+            <Nav
+              isCollapsed={isCollapsed()}
+              links={[
+                {
+                  title: "Social",
+                  label: "972",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85"
+                      />
+                      <title>Social</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Updates",
+                  label: "342",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4m-4-6v3m0 3h.01"
+                      />
+                      <title>Updates</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Forums",
+                  label: "128",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="m21 14l-3-3h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm-7 1v2a1 1 0 0 1-1 1H6l-3 3V11a1 1 0 0 1 1-1h2"
+                      />
+                      <title>Forums</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Shopping",
+                  label: "8",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      >
+                        <path d="M4 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m11 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0" />
+                        <path d="M17 17H6V3H4" />
+                        <path d="m6 5l14 1l-1 7H6" />
+                      </g>
+                      <title>Shopping</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+                {
+                  title: "Promotions",
+                  label: "21",
+                  icon: (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8m-9 4h4"
+                      />
+                      <title>Promotions</title>
+                    </svg>
+                  ),
+                  variant: "ghost",
+                },
+              ]}
+            />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel initialSize={sizes()[1] ?? 0.4} minSize={0.3}>
+            <Tabs defaultValue="all">
+              <div class="flex items-center px-4 py-2">
+                <h1 class="text-xl font-bold">Inbox</h1>
+                <TabsList class="ml-auto w-fit">
+                  <TabsTrigger
+                    value="all"
+                    class="text-zinc-600 dark:text-zinc-200"
+                  >
+                    All mail
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="unread"
+                    class="text-zinc-600 dark:text-zinc-200"
+                  >
+                    Unread
+                  </TabsTrigger>
+                  <TabsIndicator />
+                </TabsList>
+              </div>
+              <Separator />
+              <div class="p-4">
+                <TextFieldRoot class="relative">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="text-muted-foreground absolute left-2 top-2.5 size-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"
+                    />
+                    <title>Search</title>
+                  </svg>
+                  <TextField class="pl-8" placeholder="Search" />
+                </TextFieldRoot>
+              </div>
+              <TabsContent value="all" class="m-0">
+                <MailList type="all" />
+              </TabsContent>
+              <TabsContent value="unread" class="m-0">
+                <MailList type="unread" />
+              </TabsContent>
+            </Tabs>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel initialSize={sizes()[2] ?? 0.4} minSize={0.3}>
+            <MailDisplay />
+          </ResizablePanel>
+        </Resizable>
+      </div>
+    </>
+  )
+}
 
-export default MailUI;
+export default MailUI
diff --git a/docs/src/routes/(app)/examples/_components/mail/use-mail.tsx b/docs/src/routes/(app)/examples/_components/mail/use-mail.tsx
index d57ee745..61214002 100644
--- a/docs/src/routes/(app)/examples/_components/mail/use-mail.tsx
+++ b/docs/src/routes/(app)/examples/_components/mail/use-mail.tsx
@@ -1,10 +1,11 @@
-import { createStore } from "solid-js/store";
-import { type Mail, mails } from "./data";
+import { createStore } from "solid-js/store"
+
+import { mails, type Mail } from "./data"
 
 type Config = {
-	selected: Mail["id"] | null;
-};
+  selected: Mail["id"] | null
+}
 
 export const [mail, setMail] = createStore<Config>({
-	selected: mails[0].id,
-});
+  selected: mails[0].id,
+})
diff --git a/docs/src/routes/(app)/examples/authentication.tsx b/docs/src/routes/(app)/examples/authentication.tsx
index b3030c54..47ecb3b6 100644
--- a/docs/src/routes/(app)/examples/authentication.tsx
+++ b/docs/src/routes/(app)/examples/authentication.tsx
@@ -1,7 +1,7 @@
-import AuthenticationUI from "./_components/authentication/ui";
+import AuthenticationUI from "./_components/authentication/ui"
 
 const AuthenticationPage = () => {
-	return <AuthenticationUI />;
-};
+  return <AuthenticationUI />
+}
 
-export default AuthenticationPage;
+export default AuthenticationPage
diff --git a/docs/src/routes/(app)/examples/cards.tsx b/docs/src/routes/(app)/examples/cards.tsx
index cb723eda..9dd13e9b 100644
--- a/docs/src/routes/(app)/examples/cards.tsx
+++ b/docs/src/routes/(app)/examples/cards.tsx
@@ -1,7 +1,7 @@
-import CardsUI from "./_components/cards/ui";
+import CardsUI from "./_components/cards/ui"
 
 const CardPage = () => {
-	return <CardsUI />;
-};
+  return <CardsUI />
+}
 
-export default CardPage;
+export default CardPage
diff --git a/docs/src/routes/(app)/examples/mail.tsx b/docs/src/routes/(app)/examples/mail.tsx
index e2b89fdf..af0a2c66 100644
--- a/docs/src/routes/(app)/examples/mail.tsx
+++ b/docs/src/routes/(app)/examples/mail.tsx
@@ -1,7 +1,7 @@
-import MailUI from "@/routes/(app)/examples/_components/mail/ui";
+import MailUI from "@/routes/(app)/examples/_components/mail/ui"
 
 const MailPage = () => {
-	return <MailUI />;
-};
+  return <MailUI />
+}
 
-export default MailPage;
+export default MailPage
diff --git a/docs/src/routes/(app)/index.tsx b/docs/src/routes/(app)/index.tsx
index 0aac463f..7cc61712 100644
--- a/docs/src/routes/(app)/index.tsx
+++ b/docs/src/routes/(app)/index.tsx
@@ -1,49 +1,50 @@
-import { Announcement } from "@/components/announcement";
-import ExampleNav from "@/components/example-nav";
-import { Button } from "@/registry/tailwindcss/ui/button";
-import MailUI from "@/routes/(app)/examples/_components/mail/ui";
+import MailUI from "@/routes/(app)/examples/_components/mail/ui"
+
+import { Announcement } from "@/components/announcement"
+import ExampleNav from "@/components/example-nav"
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const Home = () => {
-	return (
-		<>
-			<section class="border-grid border-b">
-				<div class="container-wrapper">
-					<div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
-						<Announcement />
-						<h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
-							Build your component library
-						</h1>
-						<p class="max-w-2xl text-balance text-lg font-light text-foreground">
-							Beautifully designed components that you can copy and paste into
-							your apps. Accessible. Customizable. Open Source.
-						</p>
-						<div class="flex w-full items-center justify-start gap-2 py-2">
-							<Button as="a" href="/docs/introduction" size="sm">
-								Get Started
-							</Button>
-							<Button as="a" size="sm" variant="ghost" href="/blocks">
-								Browse Blocks
-							</Button>
-						</div>
-					</div>
-				</div>
-			</section>
-			<div class="border-grid border-b">
-				<div class="container-wrapper">
-					<div class="container py-4">
-						<ExampleNav />
-					</div>
-				</div>
-			</div>
-			<div class="container-wrapper">
-				<div class="container py-6">
-					<section class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-						<MailUI />
-					</section>
-				</div>
-			</div>
-		</>
-	);
-};
+  return (
+    <>
+      <section class="border-grid border-b">
+        <div class="container-wrapper">
+          <div class="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+            <Announcement />
+            <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
+              Build your component library
+            </h1>
+            <p class="text-foreground max-w-2xl text-balance text-lg font-light">
+              Beautifully designed components that you can copy and paste into
+              your apps. Accessible. Customizable. Open Source.
+            </p>
+            <div class="flex w-full items-center justify-start gap-2 py-2">
+              <Button as="a" href="/docs/introduction" size="sm">
+                Get Started
+              </Button>
+              <Button as="a" size="sm" variant="ghost" href="/blocks">
+                Browse Blocks
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="border-grid border-b">
+        <div class="container-wrapper">
+          <div class="container py-4">
+            <ExampleNav />
+          </div>
+        </div>
+      </div>
+      <div class="container-wrapper">
+        <div class="container py-6">
+          <section class="bg-background overflow-hidden rounded-[0.5rem] border shadow">
+            <MailUI />
+          </section>
+        </div>
+      </div>
+    </>
+  )
+}
 
-export default Home;
+export default Home
diff --git a/docs/src/routes/(blocks)/blocks/[name].tsx b/docs/src/routes/(blocks)/blocks/[name].tsx
index 14301781..3ab4ddad 100644
--- a/docs/src/routes/(blocks)/blocks/[name].tsx
+++ b/docs/src/routes/(blocks)/blocks/[name].tsx
@@ -1,17 +1,17 @@
-import { Index } from "@/__registry__";
-import { Navigate, type RouteSectionProps } from "@solidjs/router";
-import { type JSX, Show, createMemo } from "solid-js";
+import { Show, createMemo, type JSX } from "solid-js"
+import { Navigate, type RouteSectionProps } from "@solidjs/router"
+import { Index } from "@/__registry__"
 
 const BlockFullView = (props: RouteSectionProps) => {
-	const Component = createMemo(
-		() => Index.tailwindcss[props.params.name].component as JSX.Element,
-	);
+  const Component = createMemo(
+    () => Index.tailwindcss[props.params.name].component as JSX.Element
+  )
 
-	return (
-		<Show when={Component()} fallback={<Navigate href="/404" />}>
-			{Component()}
-		</Show>
-	);
-};
+  return (
+    <Show when={Component()} fallback={<Navigate href="/404" />}>
+      {Component()}
+    </Show>
+  )
+}
 
-export default BlockFullView;
+export default BlockFullView
diff --git a/docs/src/routes/[...404].tsx b/docs/src/routes/[...404].tsx
index 9e10e50a..dfc1db63 100644
--- a/docs/src/routes/[...404].tsx
+++ b/docs/src/routes/[...404].tsx
@@ -1,39 +1,39 @@
-import { Button } from "@/registry/tailwindcss/ui/button";
+import { Button } from "@/registry/tailwindcss/ui/button"
 
 const NotFound = () => {
-	return (
-		<div class="h-[calc(100dvh-56px-96px)] flex justify-center items-center">
-			<div class="flex flex-col items-center justify-center gap-y-4">
-				<span class="text-4xl font-bold">Page Not Found</span>
-				<Button
-					as="a"
-					href="/"
-					variant="link"
-					class="gap-x-2 hover:no-underline"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-width="1.5"
-						>
-							<path stroke-miterlimit="10" d="M4 12h16" />
-							<path
-								stroke-linejoin="round"
-								d="M11.033 4.34L4.46 10.911a1.53 1.53 0 0 0 0 2.176l6.573 6.573"
-							/>
-						</g>
-					</svg>
-					Back to home
-				</Button>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="flex h-[calc(100dvh-56px-96px)] items-center justify-center">
+      <div class="flex flex-col items-center justify-center gap-y-4">
+        <span class="text-4xl font-bold">Page Not Found</span>
+        <Button
+          as="a"
+          href="/"
+          variant="link"
+          class="gap-x-2 hover:no-underline"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-width="1.5"
+            >
+              <path stroke-miterlimit="10" d="M4 12h16" />
+              <path
+                stroke-linejoin="round"
+                d="M11.033 4.34L4.46 10.911a1.53 1.53 0 0 0 0 2.176l6.573 6.573"
+              />
+            </g>
+          </svg>
+          Back to home
+        </Button>
+      </div>
+    </div>
+  )
+}
 
-export default NotFound;
+export default NotFound
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
index 94f654be..f7adcb93 100644
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -1,103 +1,103 @@
-import animatePlugin from "tailwindcss-animate";
-import { fontFamily } from "tailwindcss/defaultTheme";
-import type { Config } from "tailwindcss/types/config";
+import animatePlugin from "tailwindcss-animate"
+import { fontFamily } from "tailwindcss/defaultTheme"
+import type { Config } from "tailwindcss/types/config"
 
 export default {
-	darkMode: ["class", '[data-kb-theme="dark"]'],
-	content: ["./src/**/*.{mdx,ts,tsx}"],
-	theme: {
-		extend: {
-			container: {
-				center: true,
-				padding: "2rem",
-				screens: {
-					"2xl": "1536px",
-				},
-			},
-			fontFamily: {
-				sans: ["Geist Sans Variable", ...fontFamily.sans],
-				mono: ["Geist Mono Variable", ...fontFamily.mono],
-			},
-			colors: {
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
-				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))",
-				},
-				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
-				},
-				sidebar: {
-					DEFAULT: "hsl(var(--sidebar-background))",
-					foreground: "hsl(var(--sidebar-foreground))",
-					primary: "hsl(var(--sidebar-primary))",
-					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-					accent: "hsl(var(--sidebar-accent))",
-					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-					border: "hsl(var(--sidebar-border))",
-					ring: "hsl(var(--sidebar-ring))",
-				},
-			},
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)",
-			},
-			keyframes: {
-				"accordion-down": {
-					from: { height: "0" },
-					to: { height: "var(--kb-accordion-content-height)" },
-				},
-				"accordion-up": {
-					from: { height: "var(--kb-accordion-content-height)" },
-					to: { height: "0" },
-				},
-				"collapsible-down": {
-					from: { height: "0" },
-					to: { height: "var(--kb-collapsible-content-height)" },
-				},
-				"collapsible-up": {
-					from: { height: "var(--kb-collapsible-content-height)" },
-					to: { height: "0" },
-				},
-				"caret-blink": {
-					"0%,70%,100%": { opacity: "1" },
-					"20%,50%": { opacity: "0" },
-				},
-			},
-			animation: {
-				"accordion-down": "accordion-down 0.2s ease-out",
-				"accordion-up": "accordion-up 0.2s ease-out",
-				"collapsible-down": "collapsible-down 0.2s ease-out",
-				"collapsible-up": "collapsible-up 0.2s ease-out",
-				"caret-blink": "caret-blink 1.25s ease-out infinite",
-			},
-		},
-	},
-	plugins: [animatePlugin],
-} satisfies Config;
+  darkMode: ["class", '[data-kb-theme="dark"]'],
+  content: ["./src/**/*.{mdx,ts,tsx}"],
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: "2rem",
+        screens: {
+          "2xl": "1536px",
+        },
+      },
+      fontFamily: {
+        sans: ["Geist Sans Variable", ...fontFamily.sans],
+        mono: ["Geist Mono Variable", ...fontFamily.mono],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--kb-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--kb-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "collapsible-down": {
+          from: { height: "0" },
+          to: { height: "var(--kb-collapsible-content-height)" },
+        },
+        "collapsible-up": {
+          from: { height: "var(--kb-collapsible-content-height)" },
+          to: { height: "0" },
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "collapsible-down": "collapsible-down 0.2s ease-out",
+        "collapsible-up": "collapsible-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+      },
+    },
+  },
+  plugins: [animatePlugin],
+} satisfies Config
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..8d076443
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,48 @@
+import js from "@eslint/js"
+import * as tsParser from "@typescript-eslint/parser"
+import solid from "eslint-plugin-solid/configs/typescript"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+  js.configs.recommended,
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+    ...solid,
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: "tsconfig.json",
+      },
+    },
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+      "@typescript-eslint/no-confusing-void-expression": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/restrict-plus-operands": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-redundant-type-constituents": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+    },
+  },
+  {
+    ignores: ["eslint.config.mjs", "prettier.config.cjs"],
+  }
+)
diff --git a/package.json b/package.json
index ad9347b7..49ebf55c 100644
--- a/package.json
+++ b/package.json
@@ -1,30 +1,36 @@
 {
-	"name": "root",
-	"devDependencies": {
-		"@biomejs/biome": "^1.9.4",
-		"@changesets/changelog-github": "^0.5.0",
-		"@changesets/cli": "^2.27.10",
-		"@commitlint/cli": "^19.6.0",
-		"@commitlint/config-conventional": "^19.6.0",
-		"husky": "^9.1.7",
-		"lint-staged": "^15.2.10",
-		"prettier": "^3.4.2",
-		"turbo": "^2.3.3"
-	},
-	"private": true,
-	"scripts": {
-		"build": "turbo build",
-		"dev": "turbo dev",
-		"lint": "turbo run lint",
-		"format": "turbo run format",
-		"check": "turbo run check",
-		"release": "changeset version",
-		"prepare": "husky"
-	},
-	"packageManager": "pnpm@9.4.0",
-	"pnpm": {
-		"overrides": {
-			"vite": "5.4.10"
-		}
-	}
+  "name": "root",
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.10",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/js": "^9.16.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.16.0",
+    "eslint-plugin-solid": "^0.14.4",
+    "husky": "^9.1.7",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "turbo": "^2.3.3",
+    "typescript-eslint": "^8.17.0"
+  },
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo run lint",
+    "format": "turbo run format",
+    "release": "changeset version",
+    "prepare": "husky",
+    "ci:format": "turbo run ci:format",
+    "ci:lint": "turbo run ci:lint"
+  },
+  "packageManager": "pnpm@9.4.0",
+  "pnpm": {
+    "overrides": {
+      "vite": "5.4.10"
+    }
+  }
 }
diff --git a/packages/cli/.lintstagedrc.json b/packages/cli/.lintstagedrc.json
deleted file mode 100644
index 5b00c6e1..00000000
--- a/packages/cli/.lintstagedrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "src/**/*.{ts,tsx}": ["pnpm run check"]
-}
diff --git a/packages/cli/biome.json b/packages/cli/biome.json
deleted file mode 100644
index 9e36cf73..00000000
--- a/packages/cli/biome.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
-	"extends": ["../../biome.json"],
-	"linter": {
-		"enabled": false
-	}
-}
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 1b86c006..fa970556 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,44 +1,45 @@
 {
-	"name": "shadcn-solid",
-	"description": "Initialize and add components to your project",
-	"version": "0.7.5",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/hngngn/shadcn-solid.git",
-		"directory": "packages/cli"
-	},
-	"bugs": {
-		"url": "https://github.com/hngngn/shadcn-solid/issues"
-	},
-	"homepage": "https://github.com/hngngn/shadcn-solid#readme",
-	"license": "MIT",
-	"exports": "./dist/index.js",
-	"bin": "./dist/index.js",
-	"files": [
-		"dist"
-	],
-	"type": "module",
-	"scripts": {
-		"dev": "tsup src/index.ts --watch --format esm --clean",
-		"build": "tsup src/index.ts --minify --format esm --clean",
-		"check": "biome check --write --unsafe src"
-	},
-	"dependencies": {
-		"@clack/prompts": "^0.7.0",
-		"commander": "^12.1.0",
-		"diff": "^5.2.0",
-		"execa": "^9.1.0",
-		"lodash.template": "^4.5.0",
-		"picocolors": "^1.0.1",
-		"ts-morph": "^24.0.0",
-		"tsconfig-paths": "^4.2.0",
-		"valibot": "1.0.0-beta.9"
-	},
-	"devDependencies": {
-		"@types/diff": "^5.2.1",
-		"@types/lodash.template": "^4.5.3",
-		"@types/node": "^22.1.0",
-		"tsup": "^8.2.4",
-		"typescript": "^5.5.4"
-	}
-}
\ No newline at end of file
+  "name": "shadcn-solid",
+  "description": "Initialize and add components to your project",
+  "version": "0.7.5",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hngngn/shadcn-solid.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/hngngn/shadcn-solid/issues"
+  },
+  "homepage": "https://github.com/hngngn/shadcn-solid#readme",
+  "license": "MIT",
+  "exports": "./dist/index.js",
+  "bin": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "tsup src/index.ts --watch --format esm --clean",
+    "build": "tsup src/index.ts --minify --format esm --clean",
+    "format": "prettier -w src/**/*.{ts,tsx}",
+    "ci:format": "prettier -c \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "commander": "^12.1.0",
+    "diff": "^5.2.0",
+    "execa": "^9.1.0",
+    "lodash.template": "^4.5.0",
+    "picocolors": "^1.0.1",
+    "ts-morph": "^24.0.0",
+    "tsconfig-paths": "^4.2.0",
+    "valibot": "1.0.0-beta.9"
+  },
+  "devDependencies": {
+    "@types/diff": "^5.2.1",
+    "@types/lodash.template": "^4.5.3",
+    "@types/node": "^22.1.0",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
+  }
+}
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index 207677bb..47dd259b 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -1,209 +1,210 @@
-import { existsSync } from "node:fs";
-import { mkdir, writeFile } from "node:fs/promises";
-import { resolve } from "node:path";
-import * as p from "@clack/prompts";
-import { Command } from "commander";
-import { execa } from "execa";
-import cl from "picocolors";
+import { existsSync } from "node:fs"
+import { mkdir, writeFile } from "node:fs/promises"
+import { resolve } from "node:path"
+import * as p from "@clack/prompts"
+import { Command } from "commander"
+import { execa } from "execa"
+import cl from "picocolors"
 import {
-	type InferInput,
-	array,
-	boolean,
-	object,
-	optional,
-	parse,
-	string,
-} from "valibot";
-import { getConfig } from "../utils/config";
-import { handleError } from "../utils/error";
-import { readPackageJSON } from "../utils/package-json";
-import { getPackageManager } from "../utils/package-manager";
+  array,
+  boolean,
+  object,
+  optional,
+  parse,
+  string,
+  type InferInput,
+} from "valibot"
+
+import { getConfig } from "../utils/config"
+import { handleError } from "../utils/error"
+import { readPackageJSON } from "../utils/package-json"
+import { getPackageManager } from "../utils/package-manager"
 import {
-	fetchTree,
-	getItemTargetPath,
-	getRegistryColor,
-	getRegistryComponent,
-	resolveTree,
-} from "../utils/registry";
-import { transform } from "../utils/transforms";
+  fetchTree,
+  getItemTargetPath,
+  getRegistryColor,
+  getRegistryComponent,
+  resolveTree,
+} from "../utils/registry"
+import { transform } from "../utils/transforms"
 
 const schema = object({
-	components: optional(array(string())),
-	overwrite: boolean(),
-	cwd: string(),
-	all: boolean(),
-});
+  components: optional(array(string())),
+  overwrite: boolean(),
+  cwd: string(),
+  all: boolean(),
+})
 
-type Schema = InferInput<typeof schema>;
+type Schema = InferInput<typeof schema>
 
 export const addCommand = new Command()
-	.name("add")
-	.description("add components to your project")
-	.argument("[components...]", "the components to add")
-	.usage("[components...] [options]")
-	.option("-o, --overwrite", "overwrite existing file", false)
-	.option("-c, --cwd <path>", "the working directory", process.cwd())
-	.option("-a, --all", "install all components", false)
-	.action(async (components, opts) => {
-		try {
-			const parsed = parse(schema, {
-				components,
-				...opts,
-			} satisfies Schema);
-
-			const cwd = resolve(parsed.cwd);
-			if (!existsSync(cwd)) {
-				throw new Error(`The path ${cwd} does not exist`);
-			}
-
-			const config = getConfig(cwd);
-			if (config === undefined) {
-				p.log.warning(
-					cl.yellow(
-						`Configuration is missing. Please run ${cl.bold(
-							"init",
-						)} to create a components.json file`,
-					),
-				);
-				process.exit(1);
-			}
-
-			const registryComponent = await getRegistryComponent();
-
-			let selectComponents = parsed.all
-				? registryComponent.map((v) => v.name)
-				: parsed.components;
-
-			const info = await readPackageJSON();
-
-			p.intro(cl.bgCyan(cl.black(` ${info.name} - ${info.version} `)));
-
-			if (!parsed.all && !parsed.components?.length) {
-				const group = await p.group(
-					{
-						components: () =>
-							p.multiselect<
-								{ label: string; value: string; hint?: string }[],
-								string
-							>({
-								message: `Which ${cl.cyan("component")} would you like to add?`,
-								options: registryComponent.map((v) => ({
-									label: v.name,
-									value: v.name,
-								})),
-							}),
-					},
-					{
-						onCancel: () => {
-							p.cancel("Cancelled");
-							process.exit(0);
-						},
-					},
-				);
-
-				selectComponents = group.components;
-			}
-
-			const tree = await resolveTree(registryComponent, selectComponents!);
-
-			const payload = await fetchTree(
-				config.uno ? "unocss" : "tailwindcss",
-				tree,
-			);
-			const color = await getRegistryColor(
-				config.uno ? config.uno.color : config.tailwind?.color,
-				config.uno ? "unocss" : "tailwindcss",
-			);
-
-			if (!payload.length) {
-				p.log.warning("Selected components not found");
-				process.exit(0);
-			}
-
-			const spinner = p.spinner();
-
-			spinner.start("Installing component");
-
-			const dependencies = new Set<string>();
-
-			for (const item of payload) {
-				spinner.message(`Installing ${cl.cyan(item.name)}`);
-
-				const targetDir = await getItemTargetPath(config, item);
-				if (!targetDir) {
-					continue;
-				}
-
-				if (!existsSync(targetDir)) {
-					await mkdir(targetDir, { recursive: true });
-				}
-
-				const existingComponent = item.files.filter((v) =>
-					existsSync(resolve(targetDir, v.name)),
-				);
-
-				if (existingComponent.length && !parsed.overwrite) {
-					if (selectComponents?.includes(item.name)) {
-						p.log.warning(
-							cl.yellow(
-								`Component ${item.name} already exists. Use ${cl.bold("-o")} to overwrite`,
-							),
-						);
-						process.exit(1);
-					}
-				}
-
-				for (const file of item.files) {
-					const path = resolve(targetDir, file.name);
-
-					const content = await transform({
-						filename: file.name,
-						raw: file.content,
-						config,
-						color,
-					});
-
-					await writeFile(path, content);
-				}
-
-				if (item.dependencies?.length) {
-					item.dependencies.map((v) => dependencies.add(v));
-				}
-			}
-
-			spinner.stop(
-				selectComponents?.length > 1 || parsed.all
-					? `${cl.cyan("Components")} installed`
-					: `${cl.cyan("Component")} installed`,
-			);
-
-			spinner.start(
-				`Installing ${cl.cyan(
-					Array.from(dependencies)
-						.map((v) => v)
-						.join(", ")
-						.toString(),
-				)}`,
-			);
-			const pm = getPackageManager();
-
-			if (Array.from(dependencies).length !== 0) {
-				await execa(pm, ["add", ...Array.from(dependencies)], {
-					cwd,
-					env: { NODE_ENV: undefined },
-				});
-			}
-
-			spinner.stop(
-				`${cl.cyan(
-					selectComponents?.length > 1 || parsed.all
-						? "Dependencies"
-						: "Dependency",
-				)} installed`,
-			);
-
-			p.outro("Component addition completed");
-		} catch (error) {
-			handleError(error);
-		}
-	});
+  .name("add")
+  .description("add components to your project")
+  .argument("[components...]", "the components to add")
+  .usage("[components...] [options]")
+  .option("-o, --overwrite", "overwrite existing file", false)
+  .option("-c, --cwd <path>", "the working directory", process.cwd())
+  .option("-a, --all", "install all components", false)
+  .action(async (components, opts) => {
+    try {
+      const parsed = parse(schema, {
+        components,
+        ...opts,
+      } satisfies Schema)
+
+      const cwd = resolve(parsed.cwd)
+      if (!existsSync(cwd)) {
+        throw new Error(`The path ${cwd} does not exist`)
+      }
+
+      const config = getConfig(cwd)
+      if (config === undefined) {
+        p.log.warning(
+          cl.yellow(
+            `Configuration is missing. Please run ${cl.bold(
+              "init"
+            )} to create a components.json file`
+          )
+        )
+        process.exit(1)
+      }
+
+      const registryComponent = await getRegistryComponent()
+
+      let selectComponents = parsed.all
+        ? registryComponent.map((v) => v.name)
+        : parsed.components
+
+      const info = await readPackageJSON()
+
+      p.intro(cl.bgCyan(cl.black(` ${info.name} - ${info.version} `)))
+
+      if (!parsed.all && !parsed.components?.length) {
+        const group = await p.group(
+          {
+            components: () =>
+              p.multiselect<
+                { label: string; value: string; hint?: string }[],
+                string
+              >({
+                message: `Which ${cl.cyan("component")} would you like to add?`,
+                options: registryComponent.map((v) => ({
+                  label: v.name,
+                  value: v.name,
+                })),
+              }),
+          },
+          {
+            onCancel: () => {
+              p.cancel("Cancelled")
+              process.exit(0)
+            },
+          }
+        )
+
+        selectComponents = group.components
+      }
+
+      const tree = await resolveTree(registryComponent, selectComponents!)
+
+      const payload = await fetchTree(
+        config.uno ? "unocss" : "tailwindcss",
+        tree
+      )
+      const color = await getRegistryColor(
+        config.uno ? config.uno.color : config.tailwind?.color,
+        config.uno ? "unocss" : "tailwindcss"
+      )
+
+      if (!payload.length) {
+        p.log.warning("Selected components not found")
+        process.exit(0)
+      }
+
+      const spinner = p.spinner()
+
+      spinner.start("Installing component")
+
+      const dependencies = new Set<string>()
+
+      for (const item of payload) {
+        spinner.message(`Installing ${cl.cyan(item.name)}`)
+
+        const targetDir = await getItemTargetPath(config, item)
+        if (!targetDir) {
+          continue
+        }
+
+        if (!existsSync(targetDir)) {
+          await mkdir(targetDir, { recursive: true })
+        }
+
+        const existingComponent = item.files.filter((v) =>
+          existsSync(resolve(targetDir, v.name))
+        )
+
+        if (existingComponent.length && !parsed.overwrite) {
+          if (selectComponents?.includes(item.name)) {
+            p.log.warning(
+              cl.yellow(
+                `Component ${item.name} already exists. Use ${cl.bold("-o")} to overwrite`
+              )
+            )
+            process.exit(1)
+          }
+        }
+
+        for (const file of item.files) {
+          const path = resolve(targetDir, file.name)
+
+          const content = await transform({
+            filename: file.name,
+            raw: file.content,
+            config,
+            color,
+          })
+
+          await writeFile(path, content)
+        }
+
+        if (item.dependencies?.length) {
+          item.dependencies.map((v) => dependencies.add(v))
+        }
+      }
+
+      spinner.stop(
+        selectComponents?.length > 1 || parsed.all
+          ? `${cl.cyan("Components")} installed`
+          : `${cl.cyan("Component")} installed`
+      )
+
+      spinner.start(
+        `Installing ${cl.cyan(
+          Array.from(dependencies)
+            .map((v) => v)
+            .join(", ")
+            .toString()
+        )}`
+      )
+      const pm = getPackageManager()
+
+      if (Array.from(dependencies).length !== 0) {
+        await execa(pm, ["add", ...Array.from(dependencies)], {
+          cwd,
+          env: { NODE_ENV: undefined },
+        })
+      }
+
+      spinner.stop(
+        `${cl.cyan(
+          selectComponents?.length > 1 || parsed.all
+            ? "Dependencies"
+            : "Dependency"
+        )} installed`
+      )
+
+      p.outro("Component addition completed")
+    } catch (error) {
+      handleError(error)
+    }
+  })
diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts
index f76b1d24..0d8ad047 100644
--- a/packages/cli/src/commands/diff.ts
+++ b/packages/cli/src/commands/diff.ts
@@ -1,195 +1,196 @@
-import { existsSync } from "node:fs";
-import { readFile } from "node:fs/promises";
-import { resolve } from "node:path";
-import * as p from "@clack/prompts";
-import { Command } from "commander";
-import { type Change, diffLines } from "diff";
-import cl from "picocolors";
-import { type InferInput, object, optional, parse, string } from "valibot";
-import { type Config, getConfig } from "../utils/config";
-import { handleError } from "../utils/error";
-import { readPackageJSON } from "../utils/package-json";
+import { existsSync } from "node:fs"
+import { readFile } from "node:fs/promises"
+import { resolve } from "node:path"
+import * as p from "@clack/prompts"
+import { Command } from "commander"
+import { diffLines, type Change } from "diff"
+import cl from "picocolors"
+import { object, optional, parse, string, type InferInput } from "valibot"
+
+import { getConfig, type Config } from "../utils/config"
+import { handleError } from "../utils/error"
+import { readPackageJSON } from "../utils/package-json"
 import {
-	type ComponentSchema,
-	fetchTree,
-	getItemTargetPath,
-	getRegistryColor,
-	getRegistryComponent,
-} from "../utils/registry";
-import { transform } from "../utils/transforms";
+  fetchTree,
+  getItemTargetPath,
+  getRegistryColor,
+  getRegistryComponent,
+  type ComponentSchema,
+} from "../utils/registry"
+import { transform } from "../utils/transforms"
 
 const schema = object({
-	component: optional(string()),
-	cwd: string(),
-});
+  component: optional(string()),
+  cwd: string(),
+})
 
-type Schema = InferInput<typeof schema>;
+type Schema = InferInput<typeof schema>
 
 export const diffComponent = async (
-	component: ComponentSchema[number],
-	config: Config,
+  component: ComponentSchema[number],
+  config: Config
 ) => {
-	const payload = await fetchTree(config.uno ? "unocss" : "tailwindcss", [
-		component,
-	]);
-	const color = await getRegistryColor(
-		config.uno ? config.uno.color : config.tailwind?.color,
-		config.uno ? "unocss" : "tailwindcss",
-	);
-
-	const changes = [];
-
-	for (const item of payload) {
-		const targetDir = await getItemTargetPath(config, item);
-		if (!targetDir) {
-			continue;
-		}
-
-		for (const file of item.files) {
-			const filePath = resolve(targetDir, file.name);
-
-			if (!existsSync(filePath)) {
-				continue;
-			}
-
-			const fileContent = await readFile(filePath, "utf8");
-
-			const registryContent = await transform({
-				filename: file.name,
-				raw: file.content,
-				config,
-				color,
-			});
-
-			const patch = diffLines(registryContent as string, fileContent);
-			if (patch.length > 1) {
-				changes.push({
-					file: file.name,
-					filePath,
-					patch,
-				});
-			}
-		}
-	}
-
-	return changes;
-};
+  const payload = await fetchTree(config.uno ? "unocss" : "tailwindcss", [
+    component,
+  ])
+  const color = await getRegistryColor(
+    config.uno ? config.uno.color : config.tailwind?.color,
+    config.uno ? "unocss" : "tailwindcss"
+  )
+
+  const changes = []
+
+  for (const item of payload) {
+    const targetDir = await getItemTargetPath(config, item)
+    if (!targetDir) {
+      continue
+    }
+
+    for (const file of item.files) {
+      const filePath = resolve(targetDir, file.name)
+
+      if (!existsSync(filePath)) {
+        continue
+      }
+
+      const fileContent = await readFile(filePath, "utf8")
+
+      const registryContent = await transform({
+        filename: file.name,
+        raw: file.content,
+        config,
+        color,
+      })
+
+      const patch = diffLines(registryContent as string, fileContent)
+      if (patch.length > 1) {
+        changes.push({
+          file: file.name,
+          filePath,
+          patch,
+        })
+      }
+    }
+  }
+
+  return changes
+}
 
 const printDiff = (diff: Change[]) => {
-	diff.forEach((part) => {
-		if (part) {
-			if (part.added) {
-				return process.stdout.write(cl.green(part.value));
-			}
-			if (part.removed) {
-				return process.stdout.write(cl.red(part.value));
-			}
-
-			return process.stdout.write(part.value);
-		}
-	});
-};
+  diff.forEach((part) => {
+    if (part) {
+      if (part.added) {
+        return process.stdout.write(cl.green(part.value))
+      }
+      if (part.removed) {
+        return process.stdout.write(cl.red(part.value))
+      }
+
+      return process.stdout.write(part.value)
+    }
+  })
+}
 
 export const diffCommand = new Command()
-	.name("diff")
-	.description("check for updates agaist the registry")
-	.argument("[component]", "the component name")
-	.usage("[component] [options]")
-	.option("-c, --cwd <path>", "the working directory", process.cwd())
-	.action(async (name, opts) => {
-		try {
-			const parsed = parse(schema, {
-				component: name,
-				...opts,
-			} satisfies Schema);
-
-			const cwd = resolve(parsed.cwd);
-			if (!existsSync(cwd)) {
-				throw new Error(`The path ${cwd} does not exist`);
-			}
-
-			const config = getConfig(cwd);
-			if (config === undefined) {
-				p.log.warning(
-					cl.yellow(
-						`Configuration is missing. Please run ${cl.bold(
-							"init",
-						)} to create a components.json file`,
-					),
-				);
-				process.exit(1);
-			}
-
-			const registryComponent = await getRegistryComponent();
-
-			if (!parsed.component) {
-				const targetDir = config.resolvedPaths.components;
-
-				const projectComponents = registryComponent.filter((v) => {
-					for (const file of v.files) {
-						const filePath = resolve(targetDir, file);
-						if (existsSync(filePath)) return true;
-					}
-
-					return false;
-				});
-
-				const componentWithUpdate = [];
-
-				const info = await readPackageJSON();
-
-				p.intro(cl.bgCyan(cl.black(` ${info.name} - ${info.version} `)));
-
-				const spinner = p.spinner();
-
-				spinner.start("Checking for updates");
-				for (const component of projectComponents) {
-					const changes = await diffComponent(component, config);
-					if (changes.length) {
-						componentWithUpdate.push({
-							name: component.name,
-							changes,
-						});
-					}
-				}
-
-				if (!componentWithUpdate.length) {
-					spinner.stop("No updates found");
-					process.exit(0);
-				}
-
-				spinner.stop("The following components have updates avaiable");
-				for (const component of componentWithUpdate) {
-					for (const change of component.changes) {
-						p.log.info(`${cl.cyan(component.name)} - ${change.filePath}`);
-					}
-				}
-
-				p.outro(`Run ${cl.cyan("diff <component>")} to see the changes`);
-				process.exit(0);
-			}
-
-			const component = registryComponent.find(
-				(v) => v.name === parsed.component,
-			);
-			if (!component) {
-				throw new Error(
-					`The component ${cl.bold(parsed.component)} does not exist`,
-				);
-			}
-
-			const changes = await diffComponent(component, config);
-			if (!changes.length) {
-				p.log.info(`No updates found for ${cl.cyan(parsed.component)}`);
-				process.exit(0);
-			}
-
-			for (const change of changes) {
-				console.log(cl.cyan(change.filePath));
-				console.log("");
-				printDiff(change.patch);
-			}
-		} catch (error) {
-			handleError(error);
-		}
-	});
+  .name("diff")
+  .description("check for updates agaist the registry")
+  .argument("[component]", "the component name")
+  .usage("[component] [options]")
+  .option("-c, --cwd <path>", "the working directory", process.cwd())
+  .action(async (name, opts) => {
+    try {
+      const parsed = parse(schema, {
+        component: name,
+        ...opts,
+      } satisfies Schema)
+
+      const cwd = resolve(parsed.cwd)
+      if (!existsSync(cwd)) {
+        throw new Error(`The path ${cwd} does not exist`)
+      }
+
+      const config = getConfig(cwd)
+      if (config === undefined) {
+        p.log.warning(
+          cl.yellow(
+            `Configuration is missing. Please run ${cl.bold(
+              "init"
+            )} to create a components.json file`
+          )
+        )
+        process.exit(1)
+      }
+
+      const registryComponent = await getRegistryComponent()
+
+      if (!parsed.component) {
+        const targetDir = config.resolvedPaths.components
+
+        const projectComponents = registryComponent.filter((v) => {
+          for (const file of v.files) {
+            const filePath = resolve(targetDir, file)
+            if (existsSync(filePath)) return true
+          }
+
+          return false
+        })
+
+        const componentWithUpdate = []
+
+        const info = await readPackageJSON()
+
+        p.intro(cl.bgCyan(cl.black(` ${info.name} - ${info.version} `)))
+
+        const spinner = p.spinner()
+
+        spinner.start("Checking for updates")
+        for (const component of projectComponents) {
+          const changes = await diffComponent(component, config)
+          if (changes.length) {
+            componentWithUpdate.push({
+              name: component.name,
+              changes,
+            })
+          }
+        }
+
+        if (!componentWithUpdate.length) {
+          spinner.stop("No updates found")
+          process.exit(0)
+        }
+
+        spinner.stop("The following components have updates avaiable")
+        for (const component of componentWithUpdate) {
+          for (const change of component.changes) {
+            p.log.info(`${cl.cyan(component.name)} - ${change.filePath}`)
+          }
+        }
+
+        p.outro(`Run ${cl.cyan("diff <component>")} to see the changes`)
+        process.exit(0)
+      }
+
+      const component = registryComponent.find(
+        (v) => v.name === parsed.component
+      )
+      if (!component) {
+        throw new Error(
+          `The component ${cl.bold(parsed.component)} does not exist`
+        )
+      }
+
+      const changes = await diffComponent(component, config)
+      if (!changes.length) {
+        p.log.info(`No updates found for ${cl.cyan(parsed.component)}`)
+        process.exit(0)
+      }
+
+      for (const change of changes) {
+        console.log(cl.cyan(change.filePath))
+        console.log("")
+        printDiff(change.patch)
+      }
+    } catch (error) {
+      handleError(error)
+    }
+  })
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index cd804918..66cd9f57 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -1,362 +1,363 @@
-import { existsSync } from "node:fs";
-import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, extname, parse, resolve } from "node:path";
-import * as p from "@clack/prompts";
-import { Command } from "commander";
-import { execa } from "execa";
-import template from "lodash.template";
-import cl from "picocolors";
-import { loadConfig } from "tsconfig-paths";
-import { object, string, parse as valibotParse } from "valibot";
+import { existsSync } from "node:fs"
+import { mkdir, writeFile } from "node:fs/promises"
+import { dirname, extname, parse, resolve } from "node:path"
+import * as p from "@clack/prompts"
+import { Command } from "commander"
+import { execa } from "execa"
+import template from "lodash.template"
+import cl from "picocolors"
+import { loadConfig } from "tsconfig-paths"
+import { object, string, parse as valibotParse } from "valibot"
+
 import {
-	DEFAULT_COMPONENTS,
-	DEFAULT_CSS,
-	DEFAULT_TAILWIND_CONFIG,
-	DEFAULT_UNO_CONFIG,
-	DEFAULT_UTILS,
-	type RawConfig,
-	getConfig,
-	rawConfigSchema,
-	resolveConfigPath,
-} from "../utils/config";
-import { handleError } from "../utils/error";
-import { readPackageJSON } from "../utils/package-json";
-import { getPackageManager } from "../utils/package-manager";
+  DEFAULT_COMPONENTS,
+  DEFAULT_CSS,
+  DEFAULT_TAILWIND_CONFIG,
+  DEFAULT_UNO_CONFIG,
+  DEFAULT_UTILS,
+  getConfig,
+  rawConfigSchema,
+  resolveConfigPath,
+  type RawConfig,
+} from "../utils/config"
+import { handleError } from "../utils/error"
+import { readPackageJSON } from "../utils/package-json"
+import { getPackageManager } from "../utils/package-manager"
 import {
-	getRegistryColor,
-	getRegistryColors,
-	getRegistryFrameworks,
-} from "../utils/registry";
+  getRegistryColor,
+  getRegistryColors,
+  getRegistryFrameworks,
+} from "../utils/registry"
 import {
-	CN,
-	TAILWIND_CONFIG,
-	TAILWIND_CONFIG_WITH_VARIABLES,
-	UNO_CONFIG,
-	UNO_CONFIG_WITH_VARIABLES,
-} from "../utils/templates";
-import { applyPrefixesCSS } from "../utils/transforms/prefix";
+  CN,
+  TAILWIND_CONFIG,
+  TAILWIND_CONFIG_WITH_VARIABLES,
+  UNO_CONFIG,
+  UNO_CONFIG_WITH_VARIABLES,
+} from "../utils/templates"
+import { applyPrefixesCSS } from "../utils/transforms/prefix"
 
 const PROJECT_DEPENDENCIES = [
-	"class-variance-authority",
-	"clsx",
-	"tailwind-merge",
-];
-const TAILWIND_DEPENDENCIES = ["tailwindcss-animate"];
-const UNO_DEPENDENCIES = ["unocss-preset-animations"];
+  "class-variance-authority",
+  "clsx",
+  "tailwind-merge",
+]
+const TAILWIND_DEPENDENCIES = ["tailwindcss-animate"]
+const UNO_DEPENDENCIES = ["unocss-preset-animations"]
 
 const schema = object({
-	cwd: string(),
-});
+  cwd: string(),
+})
 
 export const initCommand = new Command()
-	.name("init")
-	.description("initialize and install dependencies")
-	.option("-c, --cwd <path>", "the working directory", process.cwd())
-	.action(async (opts) => {
-		try {
-			const parsed = valibotParse(schema, opts);
-
-			const cwd = resolve(parsed.cwd);
-			if (!existsSync(cwd)) {
-				throw new Error(`The path ${cwd} does not exist`);
-			}
-
-			const frameworks = await getRegistryFrameworks();
-			const colors = getRegistryColors();
-			const info = await readPackageJSON();
-			const defaultConfig = getConfig(cwd);
-
-			p.intro(cl.bgCyan(cl.black(` ${info.name} - ${info.version} `)));
-
-			const group = await p.group(
-				{
-					framework: () =>
-						p.select<{ label: string; value: string; hint?: string }[], string>(
-							{
-								message: `Which ${cl.cyan("CSS framework")} would you like to use?`,
-								options: frameworks.map((v) => ({
-									label: v.label,
-									value: v.name,
-								})),
-							},
-						),
-					color: () =>
-						p.select<{ label: string; value: string; hint?: string }[], string>(
-							{
-								message: `Which color would you like to use as ${cl.cyan("base color")}?`,
-								options: colors.map((v) => ({ label: v.label, value: v.name })),
-							},
-						),
-					css: ({ results: { framework } }) =>
-						p.text({
-							message: `Where is your ${cl.cyan("global CSS")} file?`,
-							placeholder:
-								(framework === "unocss"
-									? defaultConfig?.uno?.css.path
-									: defaultConfig?.tailwind?.css.path) ?? DEFAULT_CSS,
-							defaultValue:
-								(framework === "unocss"
-									? defaultConfig?.uno?.css.path
-									: defaultConfig?.tailwind?.css.path) ?? DEFAULT_CSS,
-						}),
-					variable: ({ results: { framework } }) =>
-						p.confirm({
-							message: `Would you like to use ${cl.cyan("CSS variables")} for colors?`,
-							initialValue:
-								(framework === "unocss"
-									? defaultConfig?.uno?.css.variable
-									: defaultConfig?.tailwind?.css.variable) ?? true,
-						}),
-					prefix: ({ results: { framework } }) =>
-						p.text({
-							message: `Are you using a custom ${cl.cyan(
-								framework === "unocss"
-									? "uno prefix eg. uno-"
-									: "tailwind prefix eg. tw-",
-							)}? (Leave blank if not)`,
-							placeholder:
-								(framework === "unocss"
-									? defaultConfig?.uno?.prefix
-									: defaultConfig?.tailwind?.prefix) ?? "",
-							defaultValue:
-								(framework === "unocss"
-									? defaultConfig?.uno?.prefix
-									: defaultConfig?.tailwind?.prefix) ?? "",
-						}),
-					config: ({ results: { framework } }) =>
-						p.text({
-							message: `Where is your ${cl.cyan(
-								framework === "unocss"
-									? DEFAULT_UNO_CONFIG
-									: DEFAULT_TAILWIND_CONFIG,
-							)} located?`,
-							placeholder:
-								(framework === "unocss"
-									? defaultConfig?.uno?.config
-									: defaultConfig?.tailwind?.config) ??
-								(framework === "unocss"
-									? DEFAULT_UNO_CONFIG
-									: DEFAULT_TAILWIND_CONFIG),
-							defaultValue:
-								(framework === "unocss"
-									? defaultConfig?.uno?.config
-									: defaultConfig?.tailwind?.config) ??
-								(framework === "unocss"
-									? DEFAULT_UNO_CONFIG
-									: DEFAULT_TAILWIND_CONFIG),
-						}),
-					component: () => {
-						const tsConfig = loadConfig(cwd);
-
-						if (
-							tsConfig.resultType === "success" &&
-							tsConfig.paths["@/*"] === undefined
-						) {
-							p.log.warning(
-								cl.yellow(
-									`Please make sure to use the same alias defined in your ${cl.bold(
-										"tsconfig.json",
-									)}`,
-								),
-							);
-						}
-
-						return p.text({
-							message: `Configure the import alias path for ${cl.cyan("component")}`,
-							placeholder: defaultConfig?.alias.component ?? DEFAULT_COMPONENTS,
-							defaultValue:
-								defaultConfig?.alias.component ?? DEFAULT_COMPONENTS,
-						});
-					},
-					cn: () =>
-						p.text({
-							message: `Configure the import alias path for ${cl.cyan("cn")}`,
-							placeholder: defaultConfig?.alias.cn ?? DEFAULT_UTILS,
-							defaultValue: defaultConfig?.alias.cn ?? DEFAULT_UTILS,
-						}),
-				},
-				{
-					onCancel: () => {
-						p.cancel("Cancelled");
-						process.exit(0);
-					},
-				},
-			);
-
-			const tailwindConfig = valibotParse(rawConfigSchema, {
-				$schema: "https://shadcn-solid.com/schema.json",
-				tailwind: {
-					config: group.config as string,
-					css: {
-						path: group.css as string,
-						variable: group.variable as boolean,
-					},
-					color: group.color,
-					prefix: group.prefix as string,
-				},
-				alias: {
-					cn: group.cn,
-					component: group.component,
-				},
-			} satisfies RawConfig);
-
-			const unoConfig = valibotParse(rawConfigSchema, {
-				$schema: "https://shadcn-solid.com/schema.json",
-				uno: {
-					config: group.config as string,
-					css: {
-						path: group.css as string,
-						variable: group.variable as boolean,
-					},
-					color: group.color,
-					prefix: group.prefix as string,
-				},
-				alias: {
-					cn: group.cn,
-					component: group.component,
-				},
-			} satisfies RawConfig);
-
-			const spinner = p.spinner();
-
-			spinner.start(`Writing ${cl.cyan("components.json")}`);
-
-			const targetPath = resolve(cwd, "components.json");
-
-			await writeFile(
-				targetPath,
-				JSON.stringify(
-					group.framework === "unocss" ? unoConfig : tailwindConfig,
-					null,
-					2,
-				),
-				"utf8",
-			);
-
-			spinner.stop(`${cl.cyan("components.json")} created`);
-
-			const promptConfig = resolveConfigPath(
-				cwd,
-				group.framework === "unocss" ? unoConfig : tailwindConfig,
-			);
-
-			for (const [, resolvePath] of Object.entries(
-				promptConfig.resolvedPaths,
-			)) {
-				const isFile = extname(resolvePath);
-				let dir = isFile ? dirname(resolvePath) : resolvePath;
-
-				const parsedPath = parse(resolvePath);
-				dir = parsedPath.dir;
-
-				await mkdir(dir, { recursive: true });
-			}
-
-			spinner.start(
-				`Updating ${cl.cyan(
-					group.framework === "unocss"
-						? DEFAULT_UNO_CONFIG
-						: DEFAULT_TAILWIND_CONFIG,
-				)}`,
-			);
-
-			await writeFile(
-				promptConfig.resolvedPaths.config,
-				template(
-					(
-						promptConfig.uno
-							? promptConfig.uno.css.variable
-							: promptConfig.tailwind?.css.variable
-					)
-						? promptConfig.uno
-							? UNO_CONFIG_WITH_VARIABLES
-							: TAILWIND_CONFIG_WITH_VARIABLES
-						: promptConfig.uno
-							? UNO_CONFIG
-							: TAILWIND_CONFIG,
-				)({
-					prefix: promptConfig.uno
-						? promptConfig.uno.prefix
-						: promptConfig.tailwind?.prefix,
-				}),
-				"utf8",
-			);
-
-			spinner.stop(
-				`${cl.cyan(
-					group.framework === "unocss"
-						? DEFAULT_UNO_CONFIG
-						: DEFAULT_TAILWIND_CONFIG,
-				)} updated`,
-			);
-
-			spinner.start(`Updating ${cl.cyan(group.css as string)}`);
-
-			const baseColor = await getRegistryColor(
-				promptConfig.uno
-					? promptConfig.uno.color
-					: promptConfig.tailwind?.color,
-				promptConfig.uno ? "unocss" : "tailwindcss",
-			);
-
-			const baseColorConfig = (
-				promptConfig.uno
-					? promptConfig.uno.css.variable
-					: promptConfig.tailwind?.css.variable
-			)
-				? (
-						promptConfig.uno
-							? promptConfig.uno.prefix
-							: promptConfig.tailwind?.prefix
-					)
-					? applyPrefixesCSS(
-							baseColor.cssVarsTemplate,
-							promptConfig.uno
-								? promptConfig.uno.prefix!
-								: promptConfig.tailwind?.prefix!,
-						)
-					: baseColor.cssVarsTemplate
-				: baseColor.inlineColorsTemplate;
-
-			if (baseColorConfig !== undefined) {
-				if (baseColor) {
-					await writeFile(
-						promptConfig.resolvedPaths.css,
-						baseColorConfig,
-						"utf8",
-					);
-				}
-			}
-
-			spinner.stop(`${cl.cyan(group.css as string)} updated`);
-
-			spinner.start(`Writing ${cl.cyan("cn")}`);
-
-			await writeFile(`${promptConfig.resolvedPaths.cn}.ts`, CN, "utf8");
-
-			spinner.stop(`${cl.cyan("cn")} created`);
-
-			const pm = getPackageManager();
-
-			PROJECT_DEPENDENCIES.push(
-				...(group.framework === "unocss"
-					? UNO_DEPENDENCIES
-					: TAILWIND_DEPENDENCIES),
-			);
-
-			spinner.start(
-				`Installing ${cl.cyan(PROJECT_DEPENDENCIES.map((v) => v).join(", "))}`,
-			);
-
-			await execa(pm, ["add", ...PROJECT_DEPENDENCIES], {
-				cwd,
-				env: { NODE_ENV: undefined },
-			});
-
-			spinner.stop(`${cl.cyan("Dependencies")} installed`);
-
-			p.outro("Initialization completed");
-		} catch (error) {
-			handleError(error);
-		}
-	});
+  .name("init")
+  .description("initialize and install dependencies")
+  .option("-c, --cwd <path>", "the working directory", process.cwd())
+  .action(async (opts) => {
+    try {
+      const parsed = valibotParse(schema, opts)
+
+      const cwd = resolve(parsed.cwd)
+      if (!existsSync(cwd)) {
+        throw new Error(`The path ${cwd} does not exist`)
+      }
+
+      const frameworks = await getRegistryFrameworks()
+      const colors = getRegistryColors()
+      const info = await readPackageJSON()
+      const defaultConfig = getConfig(cwd)
+
+      p.intro(cl.bgCyan(cl.black(` ${info.name} - ${info.version} `)))
+
+      const group = await p.group(
+        {
+          framework: () =>
+            p.select<{ label: string; value: string; hint?: string }[], string>(
+              {
+                message: `Which ${cl.cyan("CSS framework")} would you like to use?`,
+                options: frameworks.map((v) => ({
+                  label: v.label,
+                  value: v.name,
+                })),
+              }
+            ),
+          color: () =>
+            p.select<{ label: string; value: string; hint?: string }[], string>(
+              {
+                message: `Which color would you like to use as ${cl.cyan("base color")}?`,
+                options: colors.map((v) => ({ label: v.label, value: v.name })),
+              }
+            ),
+          css: ({ results: { framework } }) =>
+            p.text({
+              message: `Where is your ${cl.cyan("global CSS")} file?`,
+              placeholder:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.css.path
+                  : defaultConfig?.tailwind?.css.path) ?? DEFAULT_CSS,
+              defaultValue:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.css.path
+                  : defaultConfig?.tailwind?.css.path) ?? DEFAULT_CSS,
+            }),
+          variable: ({ results: { framework } }) =>
+            p.confirm({
+              message: `Would you like to use ${cl.cyan("CSS variables")} for colors?`,
+              initialValue:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.css.variable
+                  : defaultConfig?.tailwind?.css.variable) ?? true,
+            }),
+          prefix: ({ results: { framework } }) =>
+            p.text({
+              message: `Are you using a custom ${cl.cyan(
+                framework === "unocss"
+                  ? "uno prefix eg. uno-"
+                  : "tailwind prefix eg. tw-"
+              )}? (Leave blank if not)`,
+              placeholder:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.prefix
+                  : defaultConfig?.tailwind?.prefix) ?? "",
+              defaultValue:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.prefix
+                  : defaultConfig?.tailwind?.prefix) ?? "",
+            }),
+          config: ({ results: { framework } }) =>
+            p.text({
+              message: `Where is your ${cl.cyan(
+                framework === "unocss"
+                  ? DEFAULT_UNO_CONFIG
+                  : DEFAULT_TAILWIND_CONFIG
+              )} located?`,
+              placeholder:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.config
+                  : defaultConfig?.tailwind?.config) ??
+                (framework === "unocss"
+                  ? DEFAULT_UNO_CONFIG
+                  : DEFAULT_TAILWIND_CONFIG),
+              defaultValue:
+                (framework === "unocss"
+                  ? defaultConfig?.uno?.config
+                  : defaultConfig?.tailwind?.config) ??
+                (framework === "unocss"
+                  ? DEFAULT_UNO_CONFIG
+                  : DEFAULT_TAILWIND_CONFIG),
+            }),
+          component: () => {
+            const tsConfig = loadConfig(cwd)
+
+            if (
+              tsConfig.resultType === "success" &&
+              tsConfig.paths["@/*"] === undefined
+            ) {
+              p.log.warning(
+                cl.yellow(
+                  `Please make sure to use the same alias defined in your ${cl.bold(
+                    "tsconfig.json"
+                  )}`
+                )
+              )
+            }
+
+            return p.text({
+              message: `Configure the import alias path for ${cl.cyan("component")}`,
+              placeholder: defaultConfig?.alias.component ?? DEFAULT_COMPONENTS,
+              defaultValue:
+                defaultConfig?.alias.component ?? DEFAULT_COMPONENTS,
+            })
+          },
+          cn: () =>
+            p.text({
+              message: `Configure the import alias path for ${cl.cyan("cn")}`,
+              placeholder: defaultConfig?.alias.cn ?? DEFAULT_UTILS,
+              defaultValue: defaultConfig?.alias.cn ?? DEFAULT_UTILS,
+            }),
+        },
+        {
+          onCancel: () => {
+            p.cancel("Cancelled")
+            process.exit(0)
+          },
+        }
+      )
+
+      const tailwindConfig = valibotParse(rawConfigSchema, {
+        $schema: "https://shadcn-solid.com/schema.json",
+        tailwind: {
+          config: group.config as string,
+          css: {
+            path: group.css as string,
+            variable: group.variable as boolean,
+          },
+          color: group.color,
+          prefix: group.prefix as string,
+        },
+        alias: {
+          cn: group.cn,
+          component: group.component,
+        },
+      } satisfies RawConfig)
+
+      const unoConfig = valibotParse(rawConfigSchema, {
+        $schema: "https://shadcn-solid.com/schema.json",
+        uno: {
+          config: group.config as string,
+          css: {
+            path: group.css as string,
+            variable: group.variable as boolean,
+          },
+          color: group.color,
+          prefix: group.prefix as string,
+        },
+        alias: {
+          cn: group.cn,
+          component: group.component,
+        },
+      } satisfies RawConfig)
+
+      const spinner = p.spinner()
+
+      spinner.start(`Writing ${cl.cyan("components.json")}`)
+
+      const targetPath = resolve(cwd, "components.json")
+
+      await writeFile(
+        targetPath,
+        JSON.stringify(
+          group.framework === "unocss" ? unoConfig : tailwindConfig,
+          null,
+          2
+        ),
+        "utf8"
+      )
+
+      spinner.stop(`${cl.cyan("components.json")} created`)
+
+      const promptConfig = resolveConfigPath(
+        cwd,
+        group.framework === "unocss" ? unoConfig : tailwindConfig
+      )
+
+      for (const [, resolvePath] of Object.entries(
+        promptConfig.resolvedPaths
+      )) {
+        const isFile = extname(resolvePath)
+        let dir = isFile ? dirname(resolvePath) : resolvePath
+
+        const parsedPath = parse(resolvePath)
+        dir = parsedPath.dir
+
+        await mkdir(dir, { recursive: true })
+      }
+
+      spinner.start(
+        `Updating ${cl.cyan(
+          group.framework === "unocss"
+            ? DEFAULT_UNO_CONFIG
+            : DEFAULT_TAILWIND_CONFIG
+        )}`
+      )
+
+      await writeFile(
+        promptConfig.resolvedPaths.config,
+        template(
+          (
+            promptConfig.uno
+              ? promptConfig.uno.css.variable
+              : promptConfig.tailwind?.css.variable
+          )
+            ? promptConfig.uno
+              ? UNO_CONFIG_WITH_VARIABLES
+              : TAILWIND_CONFIG_WITH_VARIABLES
+            : promptConfig.uno
+              ? UNO_CONFIG
+              : TAILWIND_CONFIG
+        )({
+          prefix: promptConfig.uno
+            ? promptConfig.uno.prefix
+            : promptConfig.tailwind?.prefix,
+        }),
+        "utf8"
+      )
+
+      spinner.stop(
+        `${cl.cyan(
+          group.framework === "unocss"
+            ? DEFAULT_UNO_CONFIG
+            : DEFAULT_TAILWIND_CONFIG
+        )} updated`
+      )
+
+      spinner.start(`Updating ${cl.cyan(group.css as string)}`)
+
+      const baseColor = await getRegistryColor(
+        promptConfig.uno
+          ? promptConfig.uno.color
+          : promptConfig.tailwind?.color,
+        promptConfig.uno ? "unocss" : "tailwindcss"
+      )
+
+      const baseColorConfig = (
+        promptConfig.uno
+          ? promptConfig.uno.css.variable
+          : promptConfig.tailwind?.css.variable
+      )
+        ? (
+            promptConfig.uno
+              ? promptConfig.uno.prefix
+              : promptConfig.tailwind?.prefix
+          )
+          ? applyPrefixesCSS(
+              baseColor.cssVarsTemplate,
+              promptConfig.uno
+                ? promptConfig.uno.prefix!
+                : promptConfig.tailwind?.prefix!
+            )
+          : baseColor.cssVarsTemplate
+        : baseColor.inlineColorsTemplate
+
+      if (baseColorConfig !== undefined) {
+        if (baseColor) {
+          await writeFile(
+            promptConfig.resolvedPaths.css,
+            baseColorConfig,
+            "utf8"
+          )
+        }
+      }
+
+      spinner.stop(`${cl.cyan(group.css as string)} updated`)
+
+      spinner.start(`Writing ${cl.cyan("cn")}`)
+
+      await writeFile(`${promptConfig.resolvedPaths.cn}.ts`, CN, "utf8")
+
+      spinner.stop(`${cl.cyan("cn")} created`)
+
+      const pm = getPackageManager()
+
+      PROJECT_DEPENDENCIES.push(
+        ...(group.framework === "unocss"
+          ? UNO_DEPENDENCIES
+          : TAILWIND_DEPENDENCIES)
+      )
+
+      spinner.start(
+        `Installing ${cl.cyan(PROJECT_DEPENDENCIES.map((v) => v).join(", "))}`
+      )
+
+      await execa(pm, ["add", ...PROJECT_DEPENDENCIES], {
+        cwd,
+        env: { NODE_ENV: undefined },
+      })
+
+      spinner.stop(`${cl.cyan("Dependencies")} installed`)
+
+      p.outro("Initialization completed")
+    } catch (error) {
+      handleError(error)
+    }
+  })
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 728dc52d..b6b87ed9 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -1,24 +1,25 @@
 #!/usr/bin/env node
-import { Command } from "commander";
-import { addCommand } from "./commands/add";
-import { diffCommand } from "./commands/diff";
-import { initCommand } from "./commands/init";
-import { readPackageJSON } from "./utils/package-json";
+import { Command } from "commander"
 
-process.on("SIGINT", () => process.exit(0));
-process.on("SIGTERM", () => process.exit(0));
+import { addCommand } from "./commands/add"
+import { diffCommand } from "./commands/diff"
+import { initCommand } from "./commands/init"
+import { readPackageJSON } from "./utils/package-json"
+
+process.on("SIGINT", () => process.exit(0))
+process.on("SIGTERM", () => process.exit(0))
 
 const run = async () => {
-	const info = await readPackageJSON();
+  const info = await readPackageJSON()
 
-	new Command()
-		.name(info.name)
-		.description(info.description)
-		.version(info.version, "-v, --version")
-		.addCommand(initCommand)
-		.addCommand(addCommand)
-		.addCommand(diffCommand)
-		.parse();
-};
+  new Command()
+    .name(info.name)
+    .description(info.description)
+    .version(info.version, "-v, --version")
+    .addCommand(initCommand)
+    .addCommand(addCommand)
+    .addCommand(diffCommand)
+    .parse()
+}
 
-run();
+run()
diff --git a/packages/cli/src/utils/config.ts b/packages/cli/src/utils/config.ts
index 331cce04..2d032500 100644
--- a/packages/cli/src/utils/config.ts
+++ b/packages/cli/src/utils/config.ts
@@ -1,122 +1,122 @@
-import { existsSync, readFileSync } from "node:fs";
-import { resolve } from "node:path";
+import { existsSync, readFileSync } from "node:fs"
+import { resolve } from "node:path"
 import {
-	type ConfigLoaderSuccessResult,
-	createMatchPath,
-	loadConfig,
-} from "tsconfig-paths";
+  createMatchPath,
+  loadConfig,
+  type ConfigLoaderSuccessResult,
+} from "tsconfig-paths"
 import {
-	type InferInput,
-	boolean,
-	object,
-	optional,
-	parse,
-	string,
-} from "valibot";
-
-export const DEFAULT_COMPONENTS = "@/components";
-export const DEFAULT_UTILS = "@/libs/cn";
-export const DEFAULT_CSS = "src/app.css";
-export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.cjs";
-export const DEFAULT_UNO_CONFIG = "uno.config.ts";
+  boolean,
+  object,
+  optional,
+  parse,
+  string,
+  type InferInput,
+} from "valibot"
+
+export const DEFAULT_COMPONENTS = "@/components"
+export const DEFAULT_UTILS = "@/libs/cn"
+export const DEFAULT_CSS = "src/app.css"
+export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.cjs"
+export const DEFAULT_UNO_CONFIG = "uno.config.ts"
 
 const cssSchema = optional(
-	object({
-		config: string(),
-		css: object({
-			path: string(),
-			variable: optional(boolean(), true),
-		}),
-		color: string(),
-		prefix: optional(string(), ""),
-	}),
-);
+  object({
+    config: string(),
+    css: object({
+      path: string(),
+      variable: optional(boolean(), true),
+    }),
+    color: string(),
+    prefix: optional(string(), ""),
+  })
+)
 
 export const rawConfigSchema = object({
-	$schema: optional(string()),
-	tailwind: cssSchema,
-	uno: cssSchema,
-	alias: object({
-		component: string(),
-		cn: string(),
-		ui: optional(string()),
-	}),
-});
-
-export type RawConfig = InferInput<typeof rawConfigSchema>;
+  $schema: optional(string()),
+  tailwind: cssSchema,
+  uno: cssSchema,
+  alias: object({
+    component: string(),
+    cn: string(),
+    ui: optional(string()),
+  }),
+})
+
+export type RawConfig = InferInput<typeof rawConfigSchema>
 
 const configSchema = object({
-	...rawConfigSchema.entries,
-	resolvedPaths: object({
-		config: string(),
-		css: string(),
-		cn: string(),
-		components: string(),
-		ui: string(),
-	}),
-});
-
-export type Config = InferInput<typeof configSchema>;
+  ...rawConfigSchema.entries,
+  resolvedPaths: object({
+    config: string(),
+    css: string(),
+    cn: string(),
+    components: string(),
+    ui: string(),
+  }),
+})
+
+export type Config = InferInput<typeof configSchema>
 
 const getRawConfig = (cwd: string) => {
-	try {
-		const path = resolve(cwd, "components.json");
+  try {
+    const path = resolve(cwd, "components.json")
 
-		if (!existsSync(path)) return;
+    if (!existsSync(path)) return
 
-		const config = JSON.parse(readFileSync(path).toString());
+    const config = JSON.parse(readFileSync(path).toString())
 
-		return parse(rawConfigSchema, config);
-	} catch (error) {
-		throw new Error(`Invalid configuration found in ${cwd}/components.json.`);
-	}
-};
+    return parse(rawConfigSchema, config)
+  } catch (error) {
+    throw new Error(`Invalid configuration found in ${cwd}/components.json.`)
+  }
+}
 
 const resolveImport = (
-	importPath: string,
-	config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">,
+  importPath: string,
+  config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">
 ) => {
-	return createMatchPath(config.absoluteBaseUrl, config.paths)(
-		importPath,
-		undefined,
-		() => true,
-		[".ts", ".tsx"],
-	);
-};
+  return createMatchPath(config.absoluteBaseUrl, config.paths)(
+    importPath,
+    undefined,
+    () => true,
+    [".ts", ".tsx"]
+  )
+}
 
 export const resolveConfigPath = (cwd: string, config: RawConfig) => {
-	const tsConfig = loadConfig(cwd);
-
-	if (tsConfig.resultType === "failed") {
-		throw new Error(
-			`Failed to load tsconfig.json. ${tsConfig.message ?? ""}`.trim(),
-		);
-	}
-
-	return parse(configSchema, {
-		...config,
-		resolvedPaths: {
-			config: resolve(
-				cwd,
-				config.uno ? config.uno.config : config.tailwind?.config,
-			),
-			css: resolve(
-				cwd,
-				config.uno ? config.uno.css.path : config.tailwind?.css.path,
-			),
-			cn: resolveImport(config.alias.cn, tsConfig)!,
-			components: resolveImport(config.alias.component, tsConfig)!,
-			ui: config.alias.ui
-				? resolveImport(config.alias.ui, tsConfig)!
-				: resolveImport(config.alias.component, tsConfig)!,
-		},
-	} satisfies Config);
-};
+  const tsConfig = loadConfig(cwd)
+
+  if (tsConfig.resultType === "failed") {
+    throw new Error(
+      `Failed to load tsconfig.json. ${tsConfig.message ?? ""}`.trim()
+    )
+  }
+
+  return parse(configSchema, {
+    ...config,
+    resolvedPaths: {
+      config: resolve(
+        cwd,
+        config.uno ? config.uno.config : config.tailwind?.config
+      ),
+      css: resolve(
+        cwd,
+        config.uno ? config.uno.css.path : config.tailwind?.css.path
+      ),
+      cn: resolveImport(config.alias.cn, tsConfig)!,
+      components: resolveImport(config.alias.component, tsConfig)!,
+      ui: config.alias.ui
+        ? resolveImport(config.alias.ui, tsConfig)!
+        : resolveImport(config.alias.component, tsConfig)!,
+    },
+  } satisfies Config)
+}
 
 export const getConfig = (cwd: string) => {
-	const config = getRawConfig(cwd);
+  const config = getRawConfig(cwd)
 
-	if (!config) return;
+  if (!config) return
 
-	return resolveConfigPath(cwd, config);
-};
+  return resolveConfigPath(cwd, config)
+}
diff --git a/packages/cli/src/utils/error.ts b/packages/cli/src/utils/error.ts
index 23f933e2..cfdbf023 100644
--- a/packages/cli/src/utils/error.ts
+++ b/packages/cli/src/utils/error.ts
@@ -1,34 +1,34 @@
-import * as p from "@clack/prompts";
-import cl from "picocolors";
-import { type ObjectIssue, type StringIssue, ValiError } from "valibot";
+import * as p from "@clack/prompts"
+import cl from "picocolors"
+import { ValiError, type ObjectIssue, type StringIssue } from "valibot"
 
 export const handleError = (error: unknown) => {
-	if (typeof error === "string") {
-		p.log.error(cl.red(error));
-		process.exit(1);
-	}
+  if (typeof error === "string") {
+    p.log.error(cl.red(error))
+    process.exit(1)
+  }
 
-	if (error instanceof Error) {
-		p.log.error(cl.red(error.message));
-		process.exit(1);
-	}
+  if (error instanceof Error) {
+    p.log.error(cl.red(error.message))
+    process.exit(1)
+  }
 
-	if (error instanceof ValiError) {
-		p.log.error(
-			cl.red(
-				error.issues
-					.map(
-						(v: StringIssue | ObjectIssue) =>
-							// @ts-expect-error
-							`[${v.path?.[0].key}] ${v.message}`,
-					)
-					.join("\n")
-					.toString(),
-			),
-		);
-		process.exit(1);
-	}
+  if (error instanceof ValiError) {
+    p.log.error(
+      cl.red(
+        error.issues
+          .map(
+            (v: StringIssue | ObjectIssue) =>
+              // @ts-expect-error
+              `[${v.path?.[0].key}] ${v.message}`
+          )
+          .join("\n")
+          .toString()
+      )
+    )
+    process.exit(1)
+  }
 
-	p.log.error("Something went wrong. Please try again");
-	process.exit(1);
-};
+  p.log.error("Something went wrong. Please try again")
+  process.exit(1)
+}
diff --git a/packages/cli/src/utils/package-json.ts b/packages/cli/src/utils/package-json.ts
index d4c535b0..1e5c60b1 100644
--- a/packages/cli/src/utils/package-json.ts
+++ b/packages/cli/src/utils/package-json.ts
@@ -1,20 +1,20 @@
-import { readFile } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import { readFile } from "node:fs/promises"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
 
 type PackageJSON = {
-	name: string;
-	description: string;
-	version: string;
-};
+  name: string
+  description: string
+  version: string
+}
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export const readPackageJSON = async () => {
-	const location = resolve(__dirname, "..", "package.json");
+  const location = resolve(__dirname, "..", "package.json")
 
-	const data = await readFile(location);
+  const data = await readFile(location)
 
-	return JSON.parse(data.toString()) as PackageJSON;
-};
+  return JSON.parse(data.toString()) as PackageJSON
+}
diff --git a/packages/cli/src/utils/package-manager.ts b/packages/cli/src/utils/package-manager.ts
index 35d4bd17..0702b09f 100644
--- a/packages/cli/src/utils/package-manager.ts
+++ b/packages/cli/src/utils/package-manager.ts
@@ -1,14 +1,14 @@
 export const getPackageManager = () => {
-	const userAgent = process.env.npm_config_user_agent ?? "";
+  const userAgent = process.env.npm_config_user_agent ?? ""
 
-	switch (true) {
-		case userAgent.startsWith("pnpm"):
-			return "pnpm";
-		case userAgent.startsWith("yarn"):
-			return "yarn";
-		case userAgent.startsWith("bun"):
-			return "bun";
-		default:
-			return "npm";
-	}
-};
+  switch (true) {
+    case userAgent.startsWith("pnpm"):
+      return "pnpm"
+    case userAgent.startsWith("yarn"):
+      return "yarn"
+    case userAgent.startsWith("bun"):
+      return "bun"
+    default:
+      return "npm"
+  }
+}
diff --git a/packages/cli/src/utils/registry.ts b/packages/cli/src/utils/registry.ts
index 149748c8..125f4366 100644
--- a/packages/cli/src/utils/registry.ts
+++ b/packages/cli/src/utils/registry.ts
@@ -1,189 +1,190 @@
-import { join } from "node:path";
+import { join } from "node:path"
 import {
-	type InferInput,
-	array,
-	enum_,
-	object,
-	optional,
-	parse,
-	record,
-	string,
-} from "valibot";
-import type { Config } from "./config";
-
-const baseURL = process.env.REGISTRY_URL ?? "https://shadcn-solid.com";
+  array,
+  enum_,
+  object,
+  optional,
+  parse,
+  record,
+  string,
+  type InferInput,
+} from "valibot"
+
+import type { Config } from "./config"
+
+const baseURL = process.env.REGISTRY_URL ?? "https://shadcn-solid.com"
 
 const frameworkSchema = array(
-	object({
-		name: string(),
-		label: string(),
-	}),
-);
+  object({
+    name: string(),
+    label: string(),
+  })
+)
 
 const fetchRegistry = async (paths: string[]) => {
-	try {
-		return await Promise.all(
-			paths.map(async (path) => {
-				const response = await fetch(`${baseURL}/registry/${path}`);
-
-				return await response.json();
-			}),
-		);
-	} catch (error) {
-		throw new Error(`Failed to fetch registry from ${baseURL}`);
-	}
-};
+  try {
+    return await Promise.all(
+      paths.map(async (path) => {
+        const response = await fetch(`${baseURL}/registry/${path}`)
+
+        return await response.json()
+      })
+    )
+  } catch (error) {
+    throw new Error(`Failed to fetch registry from ${baseURL}`)
+  }
+}
 
 export const getRegistryFrameworks = async () => {
-	try {
-		const [result] = await fetchRegistry(["frameworks/index.json"]);
+  try {
+    const [result] = await fetchRegistry(["frameworks/index.json"])
 
-		return parse(frameworkSchema, result);
-	} catch (error) {
-		throw new Error("[framework] Failed to fetch registry");
-	}
-};
+    return parse(frameworkSchema, result)
+  } catch (error) {
+    throw new Error("[framework] Failed to fetch registry")
+  }
+}
 
 export const getRegistryColors = () => [
-	{
-		name: "slate",
-		label: "Slate",
-	},
-	{
-		name: "gray",
-		label: "Gray",
-	},
-	{
-		name: "zinc",
-		label: "Zinc",
-	},
-	{
-		name: "neutral",
-		label: "Neutral",
-	},
-	{
-		name: "stone",
-		label: "Stone",
-	},
-];
+  {
+    name: "slate",
+    label: "Slate",
+  },
+  {
+    name: "gray",
+    label: "Gray",
+  },
+  {
+    name: "zinc",
+    label: "Zinc",
+  },
+  {
+    name: "neutral",
+    label: "Neutral",
+  },
+  {
+    name: "stone",
+    label: "Stone",
+  },
+]
 
 const colorSchema = object({
-	inlineColors: object({
-		light: record(string(), string()),
-		dark: record(string(), string()),
-	}),
-	cssVars: object({
-		light: record(string(), string()),
-		dark: record(string(), string()),
-	}),
-	inlineColorsTemplate: optional(string()),
-	cssVarsTemplate: string(),
-});
-
-export type ColorSchema = InferInput<typeof colorSchema>;
+  inlineColors: object({
+    light: record(string(), string()),
+    dark: record(string(), string()),
+  }),
+  cssVars: object({
+    light: record(string(), string()),
+    dark: record(string(), string()),
+  }),
+  inlineColorsTemplate: optional(string()),
+  cssVarsTemplate: string(),
+})
+
+export type ColorSchema = InferInput<typeof colorSchema>
 
 export const getRegistryColor = async (color: string, name: string) => {
-	try {
-		const [result] = await fetchRegistry([`colors/${name}/${color}.json`]);
+  try {
+    const [result] = await fetchRegistry([`colors/${name}/${color}.json`])
 
-		return parse(colorSchema, result);
-	} catch (error) {
-		throw new Error("[color] Failed to fetch registry");
-	}
-};
+    return parse(colorSchema, result)
+  } catch (error) {
+    throw new Error("[color] Failed to fetch registry")
+  }
+}
 
 enum Type {
-	"components:ui" = "components:ui",
-	"components:component" = "components:component",
-	"components:example" = "components:example",
+  "components:ui" = "components:ui",
+  "components:component" = "components:component",
+  "components:example" = "components:example",
 }
 
 const componentItemSchema = object({
-	name: string(),
-	dependencies: optional(array(string())),
-	registryDependencies: optional(array(string())),
-	files: array(string()),
-	type: enum_(Type),
-});
+  name: string(),
+  dependencies: optional(array(string())),
+  registryDependencies: optional(array(string())),
+  files: array(string()),
+  type: enum_(Type),
+})
 
-const componentSchema = array(componentItemSchema);
+const componentSchema = array(componentItemSchema)
 
-export type ComponentSchema = InferInput<typeof componentSchema>;
+export type ComponentSchema = InferInput<typeof componentSchema>
 
 export const getRegistryComponent = async () => {
-	try {
-		const [result] = await fetchRegistry(["index.json"]);
+  try {
+    const [result] = await fetchRegistry(["index.json"])
 
-		return parse(componentSchema, result);
-	} catch (error) {
-		throw new Error("[component] Failed to fetch registry");
-	}
-};
+    return parse(componentSchema, result)
+  } catch (error) {
+    throw new Error("[component] Failed to fetch registry")
+  }
+}
 
 export const resolveTree = async (index: ComponentSchema, names: string[]) => {
-	const tree: ComponentSchema = [];
+  const tree: ComponentSchema = []
 
-	for (const name of names) {
-		const entry = index.find((entry) => entry.name === name);
+  for (const name of names) {
+    const entry = index.find((entry) => entry.name === name)
 
-		if (!entry) {
-			continue;
-		}
+    if (!entry) {
+      continue
+    }
 
-		tree.push(entry);
+    tree.push(entry)
 
-		if (entry.registryDependencies) {
-			const dependencies = await resolveTree(index, entry.registryDependencies);
-			tree.push(...dependencies);
-		}
-	}
+    if (entry.registryDependencies) {
+      const dependencies = await resolveTree(index, entry.registryDependencies)
+      tree.push(...dependencies)
+    }
+  }
 
-	return tree.filter(
-		(component, index, self) =>
-			self.findIndex((c) => c.name === component.name) === index,
-	);
-};
+  return tree.filter(
+    (component, index, self) =>
+      self.findIndex((c) => c.name === component.name) === index
+  )
+}
 
 const itemWithContentSchema = object({
-	...componentItemSchema.entries,
-	files: array(
-		object({
-			name: string(),
-			content: string(),
-		}),
-	),
-});
+  ...componentItemSchema.entries,
+  files: array(
+    object({
+      name: string(),
+      content: string(),
+    })
+  ),
+})
 
-type ItemWithContentSchema = InferInput<typeof itemWithContentSchema>;
+type ItemWithContentSchema = InferInput<typeof itemWithContentSchema>
 
-const withContentSchema = array(itemWithContentSchema);
+const withContentSchema = array(itemWithContentSchema)
 
 export const fetchTree = async (style: string, tree: ComponentSchema) => {
-	try {
-		const paths = tree.map((item) => `frameworks/${style}/${item.name}.json`);
-		const result = await fetchRegistry(paths);
-
-		return parse(withContentSchema, result);
-	} catch (error) {
-		throw new Error("[tree] Failed to fetch registry");
-	}
-};
+  try {
+    const paths = tree.map((item) => `frameworks/${style}/${item.name}.json`)
+    const result = await fetchRegistry(paths)
+
+    return parse(withContentSchema, result)
+  } catch (error) {
+    throw new Error("[tree] Failed to fetch registry")
+  }
+}
 
 export const getItemTargetPath = async (
-	config: Config,
-	item: Pick<ItemWithContentSchema, "type">,
+  config: Config,
+  item: Pick<ItemWithContentSchema, "type">
 ) => {
-	if (item.type === "components:ui" && config.alias.ui) {
-		return config.resolvedPaths.ui;
-	}
-
-	const [parent, type] = item.type.split(":");
-	if (!(parent! in config.resolvedPaths)) {
-		return null;
-	}
-
-	return join(
-		config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
-		type!,
-	);
-};
+  if (item.type === "components:ui" && config.alias.ui) {
+    return config.resolvedPaths.ui
+  }
+
+  const [parent, type] = item.type.split(":")
+  if (!(parent! in config.resolvedPaths)) {
+    return null
+  }
+
+  return join(
+    config.resolvedPaths[parent as keyof typeof config.resolvedPaths],
+    type!
+  )
+}
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
index 69c7a4b1..545c6785 100644
--- a/packages/cli/src/utils/templates.ts
+++ b/packages/cli/src/utils/templates.ts
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));
-`;
+`
 
 export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -52,7 +52,7 @@ module.exports = {
   },
   plugins: [require("tailwindcss-animate")],
 };
-`;
+`
 
 export const TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -141,7 +141,7 @@ module.exports = {
   },
   plugins: [require("tailwindcss-animate")],
 };
-`;
+`
 
 export const UNO_CONFIG = `import {
   defineConfig,
@@ -196,7 +196,7 @@ export default defineConfig({
     },
   },
 });
-`;
+`
 
 export const UNO_CONFIG_WITH_VARIABLES = `import {
   defineConfig,
@@ -291,4 +291,4 @@ export default defineConfig({
     },
   },
 });
-`;
+`
diff --git a/packages/cli/src/utils/transforms/css.ts b/packages/cli/src/utils/transforms/css.ts
index 7cf2010a..0fb9bde4 100644
--- a/packages/cli/src/utils/transforms/css.ts
+++ b/packages/cli/src/utils/transforms/css.ts
@@ -1,111 +1,112 @@
-import { SyntaxKind } from "ts-morph";
-import type { Transformer } from ".";
-import type { ColorSchema } from "../registry";
+import { SyntaxKind } from "ts-morph"
+
+import type { Transformer } from "."
+import type { ColorSchema } from "../registry"
 
 // Splits a class into variant-name-alpha.
 // eg. hover:bg-primary-100 -> [hover, bg-primary, 100]
 export function splitClassName(className: string): (string | null)[] {
-	if (!className.includes("/") && !className.includes(":")) {
-		return [null, className, null];
-	}
+  if (!className.includes("/") && !className.includes(":")) {
+    return [null, className, null]
+  }
 
-	const parts: (string | null)[] = [];
-	// First we split to find the alpha.
-	const [rest, alpha] = className.split("/");
+  const parts: (string | null)[] = []
+  // First we split to find the alpha.
+  const [rest, alpha] = className.split("/")
 
-	// Check if rest has a colon.
-	if (!rest?.includes(":")) {
-		return [null, rest!, alpha!];
-	}
+  // Check if rest has a colon.
+  if (!rest?.includes(":")) {
+    return [null, rest!, alpha!]
+  }
 
-	// Next we split the rest by the colon.
-	const split = rest?.split(":");
+  // Next we split the rest by the colon.
+  const split = rest?.split(":")
 
-	// We take the last item from the split as the name.
-	const name = split.pop();
+  // We take the last item from the split as the name.
+  const name = split.pop()
 
-	// We glue back the rest of the split.
-	const variant = split.join(":");
+  // We glue back the rest of the split.
+  const variant = split.join(":")
 
-	// Finally we push the variant, name and alpha.
-	parts.push(variant ?? null, name ?? null, alpha ?? null);
+  // Finally we push the variant, name and alpha.
+  parts.push(variant ?? null, name ?? null, alpha ?? null)
 
-	return parts;
+  return parts
 }
 
-const PREFIXES = ["bg-", "text-", "border-", "ring-offset-", "ring-"];
+const PREFIXES = ["bg-", "text-", "border-", "ring-offset-", "ring-"]
 
 const applyColorMapping = (
-	input: string,
-	mapping: ColorSchema["inlineColors"],
+  input: string,
+  mapping: ColorSchema["inlineColors"]
 ) => {
-	// Handle border classes.
-	let innerInput = "";
-	if (input.includes(" border ")) {
-		innerInput = input.replace(" border ", " border border-border ");
-	}
-
-	// Build color mappings.
-	const classNames = innerInput.split(" ");
-	const lightMode: string[] = [];
-	const darkMode: string[] = [];
-	for (const className of classNames) {
-		const [variant, value, modifier] = splitClassName(className);
-		const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix));
-		if (!prefix) {
-			if (!lightMode.includes(className)) {
-				lightMode.push(className);
-			}
-			continue;
-		}
-
-		const needle = value?.replace(prefix, "");
-		if (needle && needle in mapping.light) {
-			lightMode.push(
-				[variant, `${prefix}${mapping.light[needle]}`]
-					.filter(Boolean)
-					.join(":") + (modifier ? `/${modifier}` : ""),
-			);
-
-			darkMode.push(
-				["dark", variant, `${prefix}${mapping.dark[needle]}`]
-					.filter(Boolean)
-					.join(":") + (modifier ? `/${modifier}` : ""),
-			);
-			continue;
-		}
-
-		if (!lightMode.includes(className)) {
-			lightMode.push(className);
-		}
-	}
-
-	return `${lightMode.join(" ")} ${darkMode.join(" ").trim()}`;
-};
+  // Handle border classes.
+  let innerInput = ""
+  if (input.includes(" border ")) {
+    innerInput = input.replace(" border ", " border border-border ")
+  }
+
+  // Build color mappings.
+  const classNames = innerInput.split(" ")
+  const lightMode: string[] = []
+  const darkMode: string[] = []
+  for (const className of classNames) {
+    const [variant, value, modifier] = splitClassName(className)
+    const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
+    if (!prefix) {
+      if (!lightMode.includes(className)) {
+        lightMode.push(className)
+      }
+      continue
+    }
+
+    const needle = value?.replace(prefix, "")
+    if (needle && needle in mapping.light) {
+      lightMode.push(
+        [variant, `${prefix}${mapping.light[needle]}`]
+          .filter(Boolean)
+          .join(":") + (modifier ? `/${modifier}` : "")
+      )
+
+      darkMode.push(
+        ["dark", variant, `${prefix}${mapping.dark[needle]}`]
+          .filter(Boolean)
+          .join(":") + (modifier ? `/${modifier}` : "")
+      )
+      continue
+    }
+
+    if (!lightMode.includes(className)) {
+      lightMode.push(className)
+    }
+  }
+
+  return `${lightMode.join(" ")} ${darkMode.join(" ").trim()}`
+}
 
 export const transformCSSVariable: Transformer = async ({
-	sourceFile,
-	config,
-	baseColor,
+  sourceFile,
+  config,
+  baseColor,
 }) => {
-	// No transform if using css variables.
-	if (
-		(config.uno ? config.uno.css.variable : config.tailwind?.css.variable) ||
-		!baseColor?.inlineColors
-	) {
-		return sourceFile;
-	}
-
-	sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
-		const value = node.getText();
-		if (value) {
-			const valueWithColorMapping = applyColorMapping(
-				value.replace(/"/g, ""),
-				baseColor.inlineColors,
-			);
-			node.replaceWithText(`"${valueWithColorMapping.trim()}"`);
-		}
-	});
-
-	return sourceFile;
-};
+  // No transform if using css variables.
+  if (
+    (config.uno ? config.uno.css.variable : config.tailwind?.css.variable) ||
+    !baseColor?.inlineColors
+  ) {
+    return sourceFile
+  }
+
+  sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
+    const value = node.getText()
+    if (value) {
+      const valueWithColorMapping = applyColorMapping(
+        value.replace(/"/g, ""),
+        baseColor.inlineColors
+      )
+      node.replaceWithText(`"${valueWithColorMapping.trim()}"`)
+    }
+  })
+
+  return sourceFile
+}
diff --git a/packages/cli/src/utils/transforms/import.ts b/packages/cli/src/utils/transforms/import.ts
index cdaaf393..c50fe0c5 100644
--- a/packages/cli/src/utils/transforms/import.ts
+++ b/packages/cli/src/utils/transforms/import.ts
@@ -1,22 +1,22 @@
-import type { Transformer } from ".";
+import type { Transformer } from "."
 
 export const transformImport: Transformer = async ({ sourceFile, config }) => {
-	const importDeclarations = sourceFile.getImportDeclarations();
+  const importDeclarations = sourceFile.getImportDeclarations()
 
-	for (const importDeclaration of importDeclarations) {
-		const moduleSpecifier = importDeclaration.getModuleSpecifierValue();
+  for (const importDeclaration of importDeclarations) {
+    const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
 
-		// Replace `import { cn } from "@/libs/cn"`
-		if (moduleSpecifier === "@/libs/cn") {
-			const namedImports = importDeclaration.getNamedImports();
-			const cnImport = namedImports.find((i) => i.getName() === "cn");
-			if (cnImport) {
-				importDeclaration.setModuleSpecifier(
-					moduleSpecifier.replace(/^@\/libs\/cn/, config.alias.cn),
-				);
-			}
-		}
-	}
+    // Replace `import { cn } from "@/libs/cn"`
+    if (moduleSpecifier === "@/libs/cn") {
+      const namedImports = importDeclaration.getNamedImports()
+      const cnImport = namedImports.find((i) => i.getName() === "cn")
+      if (cnImport) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(/^@\/libs\/cn/, config.alias.cn)
+        )
+      }
+    }
+  }
 
-	return sourceFile;
-};
+  return sourceFile
+}
diff --git a/packages/cli/src/utils/transforms/index.ts b/packages/cli/src/utils/transforms/index.ts
index e583d2f1..37fb718b 100644
--- a/packages/cli/src/utils/transforms/index.ts
+++ b/packages/cli/src/utils/transforms/index.ts
@@ -1,50 +1,51 @@
-import { mkdtemp } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { Project, ScriptKind, type SourceFile } from "ts-morph";
-import type { Config } from "../config";
-import type { ColorSchema } from "../registry";
-import { transformCSSVariable } from "./css";
-import { transformImport } from "./import";
-import { transformPrefix } from "./prefix";
+import { mkdtemp } from "node:fs/promises"
+import { tmpdir } from "node:os"
+import { join } from "node:path"
+import { Project, ScriptKind, type SourceFile } from "ts-morph"
+
+import type { Config } from "../config"
+import type { ColorSchema } from "../registry"
+import { transformCSSVariable } from "./css"
+import { transformImport } from "./import"
+import { transformPrefix } from "./prefix"
 
 type Option = {
-	filename: string;
-	raw: string;
-	config: Config;
-	color?: ColorSchema;
-};
+  filename: string
+  raw: string
+  config: Config
+  color?: ColorSchema
+}
 
 export type Transformer<Output = SourceFile> = (
-	opts: Option & {
-		sourceFile: SourceFile;
-	},
-) => Promise<Output>;
+  opts: Option & {
+    sourceFile: SourceFile
+  }
+) => Promise<Output>
 
 const transformers: Transformer[] = [
-	transformImport,
-	transformCSSVariable,
-	transformPrefix,
-];
+  transformImport,
+  transformCSSVariable,
+  transformPrefix,
+]
 
 const project = new Project({
-	compilerOptions: {},
-});
+  compilerOptions: {},
+})
 
 const createTempSourceFile = async (filename: string) => {
-	const dir = await mkdtemp(join(tmpdir(), "shadcn-"));
-	return join(dir, filename);
-};
+  const dir = await mkdtemp(join(tmpdir(), "shadcn-"))
+  return join(dir, filename)
+}
 
 export const transform = async (opts: Option) => {
-	const tempFile = await createTempSourceFile(opts.filename);
-	const sourceFile = project.createSourceFile(tempFile, opts.raw, {
-		scriptKind: ScriptKind.TSX,
-	});
+  const tempFile = await createTempSourceFile(opts.filename)
+  const sourceFile = project.createSourceFile(tempFile, opts.raw, {
+    scriptKind: ScriptKind.TSX,
+  })
 
-	for (const transformer of transformers) {
-		transformer({ sourceFile, ...opts });
-	}
+  for (const transformer of transformers) {
+    transformer({ sourceFile, ...opts })
+  }
 
-	return sourceFile.getFullText();
-};
+  return sourceFile.getFullText()
+}
diff --git a/packages/cli/src/utils/transforms/prefix.ts b/packages/cli/src/utils/transforms/prefix.ts
index be9cf02c..a440c3dc 100644
--- a/packages/cli/src/utils/transforms/prefix.ts
+++ b/packages/cli/src/utils/transforms/prefix.ts
@@ -1,147 +1,148 @@
-import { SyntaxKind } from "ts-morph";
-import type { Transformer } from ".";
-import { splitClassName } from "./css";
+import { SyntaxKind } from "ts-morph"
+
+import type { Transformer } from "."
+import { splitClassName } from "./css"
 
 export const applyPrefix = (input: string, prefix = "") => {
-	const classNames = input.split(" ");
-	const prefixed: string[] = [];
-	for (const className of classNames) {
-		const [variant, value, modifier] = splitClassName(className);
-		if (variant) {
-			modifier
-				? prefixed.push(
-						`${variant}:${
-							value?.startsWith("(")
-								? `(${prefix}${value?.slice(1)}`
-								: prefix + value
-						}/${modifier}`,
-					)
-				: prefixed.push(
-						`${variant}:${value?.startsWith("(") ? `(${prefix}${value?.slice(1)}` : prefix + value}`,
-					);
-		} else {
-			modifier
-				? prefixed.push(
-						`${
-							value?.startsWith("(")
-								? `(${prefix}${value?.slice(1)}`
-								: prefix + value
-						}/${modifier}`,
-					)
-				: prefixed.push(
-						`${value?.startsWith("(") ? `(${prefix}${value?.slice(1)}` : prefix + value}`,
-					);
-		}
-	}
-	return prefixed.join(" ");
-};
+  const classNames = input.split(" ")
+  const prefixed: string[] = []
+  for (const className of classNames) {
+    const [variant, value, modifier] = splitClassName(className)
+    if (variant) {
+      modifier
+        ? prefixed.push(
+            `${variant}:${
+              value?.startsWith("(")
+                ? `(${prefix}${value?.slice(1)}`
+                : prefix + value
+            }/${modifier}`
+          )
+        : prefixed.push(
+            `${variant}:${value?.startsWith("(") ? `(${prefix}${value?.slice(1)}` : prefix + value}`
+          )
+    } else {
+      modifier
+        ? prefixed.push(
+            `${
+              value?.startsWith("(")
+                ? `(${prefix}${value?.slice(1)}`
+                : prefix + value
+            }/${modifier}`
+          )
+        : prefixed.push(
+            `${value?.startsWith("(") ? `(${prefix}${value?.slice(1)}` : prefix + value}`
+          )
+    }
+  }
+  return prefixed.join(" ")
+}
 
 export const applyPrefixesCSS = (css: string, prefix: string) => {
-	const lines = css.split("\n");
-	let innerCSS = "";
+  const lines = css.split("\n")
+  let innerCSS = ""
 
-	for (const line of lines) {
-		if (line.includes("@apply")) {
-			const originalTWCls = line.replace("@apply", "").trim();
-			const prefixedTwCls = applyPrefix(originalTWCls, prefix);
-			innerCSS = css.replace(originalTWCls, prefixedTwCls);
-		}
-	}
-	return innerCSS;
-};
+  for (const line of lines) {
+    if (line.includes("@apply")) {
+      const originalTWCls = line.replace("@apply", "").trim()
+      const prefixedTwCls = applyPrefix(originalTWCls, prefix)
+      innerCSS = css.replace(originalTWCls, prefixedTwCls)
+    }
+  }
+  return innerCSS
+}
 
 export const transformPrefix: Transformer = async ({ sourceFile, config }) => {
-	if (config.uno ? !config.uno.prefix : !config.tailwind?.prefix) {
-		return sourceFile;
-	}
+  if (config.uno ? !config.uno.prefix : !config.tailwind?.prefix) {
+    return sourceFile
+  }
 
-	const _config = config.uno ? config.uno.prefix : config.tailwind?.prefix;
+  const _config = config.uno ? config.uno.prefix : config.tailwind?.prefix
 
-	// Find the cva function calls.
-	sourceFile
-		.getDescendantsOfKind(SyntaxKind.CallExpression)
-		.filter((node) => node.getExpression().getText() === "cva")
-		.forEach((node) => {
-			// cva(base, ...)
-			if (node.getArguments()[0]?.isKind(SyntaxKind.StringLiteral)) {
-				const defaultClassNames = node.getArguments()[0];
-				if (defaultClassNames) {
-					defaultClassNames.replaceWithText(
-						`"${applyPrefix(defaultClassNames.getText()?.replace(/"/g, ""), _config)}"`,
-					);
-				}
-			}
+  // Find the cva function calls.
+  sourceFile
+    .getDescendantsOfKind(SyntaxKind.CallExpression)
+    .filter((node) => node.getExpression().getText() === "cva")
+    .forEach((node) => {
+      // cva(base, ...)
+      if (node.getArguments()[0]?.isKind(SyntaxKind.StringLiteral)) {
+        const defaultClassNames = node.getArguments()[0]
+        if (defaultClassNames) {
+          defaultClassNames.replaceWithText(
+            `"${applyPrefix(defaultClassNames.getText()?.replace(/"/g, ""), _config)}"`
+          )
+        }
+      }
 
-			// cva(..., { variants: { ... } })
-			if (node.getArguments()[1]?.isKind(SyntaxKind.ObjectLiteralExpression)) {
-				node
-					.getArguments()[1]
-					?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-					.find((node) => node.getName() === "variants")
-					?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-					.forEach((node) => {
-						node
-							.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-							.forEach((node) => {
-								const classNames = node.getInitializerIfKind(
-									SyntaxKind.StringLiteral,
-								);
-								if (classNames) {
-									classNames?.replaceWithText(
-										`"${applyPrefix(classNames.getText()?.replace(/"/g, ""), _config)}"`,
-									);
-								}
-							});
-					});
-			}
-		});
+      // cva(..., { variants: { ... } })
+      if (node.getArguments()[1]?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+        node
+          .getArguments()[1]
+          ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
+          .find((node) => node.getName() === "variants")
+          ?.getDescendantsOfKind(SyntaxKind.PropertyAssignment)
+          .forEach((node) => {
+            node
+              .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
+              .forEach((node) => {
+                const classNames = node.getInitializerIfKind(
+                  SyntaxKind.StringLiteral
+                )
+                if (classNames) {
+                  classNames?.replaceWithText(
+                    `"${applyPrefix(classNames.getText()?.replace(/"/g, ""), _config)}"`
+                  )
+                }
+              })
+          })
+      }
+    })
 
-	// Find all jsx attributes with the name class.
-	sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute).forEach((node) => {
-		if (node.getName() === "class") {
-			// class="..."
-			if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
-				const value = node.getInitializer();
-				if (value) {
-					value.replaceWithText(
-						`"${applyPrefix(value.getText()?.replace(/"/g, ""), _config)}"`,
-					);
-				}
-			}
+  // Find all jsx attributes with the name class.
+  sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute).forEach((node) => {
+    if (node.getName() === "class") {
+      // class="..."
+      if (node.getInitializer()?.isKind(SyntaxKind.StringLiteral)) {
+        const value = node.getInitializer()
+        if (value) {
+          value.replaceWithText(
+            `"${applyPrefix(value.getText()?.replace(/"/g, ""), _config)}"`
+          )
+        }
+      }
 
-			// class={...}
-			if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
-				// Check if it's a call to cn().
-				const callExpression = node
-					.getInitializer()
-					?.getDescendantsOfKind(SyntaxKind.CallExpression)
-					.find((node) => node.getExpression().getText() === "cn");
-				if (callExpression) {
-					// Loop through the arguments.
-					callExpression.getArguments().forEach((node) => {
-						if (
-							node.isKind(SyntaxKind.ConditionalExpression) ||
-							node.isKind(SyntaxKind.BinaryExpression)
-						) {
-							node
-								.getChildrenOfKind(SyntaxKind.StringLiteral)
-								.forEach((node) => {
-									node.replaceWithText(
-										`"${applyPrefix(node.getText()?.replace(/"/g, ""), _config)}"`,
-									);
-								});
-						}
+      // class={...}
+      if (node.getInitializer()?.isKind(SyntaxKind.JsxExpression)) {
+        // Check if it's a call to cn().
+        const callExpression = node
+          .getInitializer()
+          ?.getDescendantsOfKind(SyntaxKind.CallExpression)
+          .find((node) => node.getExpression().getText() === "cn")
+        if (callExpression) {
+          // Loop through the arguments.
+          callExpression.getArguments().forEach((node) => {
+            if (
+              node.isKind(SyntaxKind.ConditionalExpression) ||
+              node.isKind(SyntaxKind.BinaryExpression)
+            ) {
+              node
+                .getChildrenOfKind(SyntaxKind.StringLiteral)
+                .forEach((node) => {
+                  node.replaceWithText(
+                    `"${applyPrefix(node.getText()?.replace(/"/g, ""), _config)}"`
+                  )
+                })
+            }
 
-						if (node.isKind(SyntaxKind.StringLiteral)) {
-							node.replaceWithText(
-								`"${applyPrefix(node.getText()?.replace(/"/g, ""), _config)}"`,
-							);
-						}
-					});
-				}
-			}
-		}
-	});
+            if (node.isKind(SyntaxKind.StringLiteral)) {
+              node.replaceWithText(
+                `"${applyPrefix(node.getText()?.replace(/"/g, ""), _config)}"`
+              )
+            }
+          })
+        }
+      }
+    }
+  })
 
-	return sourceFile;
-};
+  return sourceFile
+}
diff --git a/packages/unocss/.lintstagedrc.json b/packages/unocss/.lintstagedrc.json
deleted file mode 100644
index 9252e2e6..00000000
--- a/packages/unocss/.lintstagedrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"ui/*.tsx": [
-		"biome check --write --unsafe --staged --no-errors-on-unmatched",
-		"pnpm -F docs build:registry"
-	]
-}
diff --git a/packages/unocss/app.config.ts b/packages/unocss/app.config.ts
index cbbfbee7..3cf06c7e 100644
--- a/packages/unocss/app.config.ts
+++ b/packages/unocss/app.config.ts
@@ -1,29 +1,29 @@
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import { defineConfig } from "@solidjs/start/config";
-import unocss from "unocss/vite";
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { defineConfig } from "@solidjs/start/config"
+import unocss from "unocss/vite"
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 export default defineConfig({
-	appRoot: "./dev",
-	vite: {
-		plugins: [unocss()],
-		resolve: {
-			alias: {
-				"@/components/ui": resolve(__dirname, "./ui"),
-				"@/libs": resolve(__dirname, "./libs"),
-				"@/blocks": resolve(__dirname, "./blocks"),
-				"@/hooks": resolve(__dirname, "./hooks"),
-			},
-		},
-	},
-	server: {
-		esbuild: {
-			options: {
-				target: "esnext",
-			},
-		},
-	},
-});
+  appRoot: "./dev",
+  vite: {
+    plugins: [unocss()],
+    resolve: {
+      alias: {
+        "@/components/ui": resolve(__dirname, "./ui"),
+        "@/libs": resolve(__dirname, "./libs"),
+        "@/blocks": resolve(__dirname, "./blocks"),
+        "@/hooks": resolve(__dirname, "./hooks"),
+      },
+    },
+  },
+  server: {
+    esbuild: {
+      options: {
+        target: "esnext",
+      },
+    },
+  },
+})
diff --git a/packages/unocss/biome.json b/packages/unocss/biome.json
deleted file mode 100644
index e45c066b..00000000
--- a/packages/unocss/biome.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
-	"extends": ["../../biome.json"],
-	"linter": {
-		"ignore": ["*.css"]
-	}
-}
diff --git a/packages/unocss/dev/app.tsx b/packages/unocss/dev/app.tsx
index 360dec86..a9f45568 100644
--- a/packages/unocss/dev/app.tsx
+++ b/packages/unocss/dev/app.tsx
@@ -1,31 +1,32 @@
-import { ColorModeProvider, ColorModeScript } from "@kobalte/core";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
-import { Toaster } from "../ui/sonner";
-import { ToastList, ToastRegion } from "../ui/toast";
+import { Suspense } from "solid-js"
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start/router"
+import { ColorModeProvider, ColorModeScript } from "@kobalte/core"
 
-import "virtual:uno.css";
-import "@unocss/reset/tailwind-compat.css";
-import "./app.css";
+import { Toaster } from "../ui/sonner"
+import { ToastList, ToastRegion } from "../ui/toast"
+
+import "virtual:uno.css"
+import "@unocss/reset/tailwind-compat.css"
+import "./app.css"
 
 export default function App() {
-	return (
-		<Router
-			root={(props) => (
-				<>
-					<ColorModeScript />
-					<ColorModeProvider>
-						<Suspense>{props.children}</Suspense>
-						<ToastRegion>
-							<ToastList />
-						</ToastRegion>
-						<Toaster />
-					</ColorModeProvider>
-				</>
-			)}
-		>
-			<FileRoutes />
-		</Router>
-	);
+  return (
+    <Router
+      root={(props) => (
+        <>
+          <ColorModeScript />
+          <ColorModeProvider>
+            <Suspense>{props.children}</Suspense>
+            <ToastRegion>
+              <ToastList />
+            </ToastRegion>
+            <Toaster />
+          </ColorModeProvider>
+        </>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  )
 }
diff --git a/packages/unocss/dev/entry-client.tsx b/packages/unocss/dev/entry-client.tsx
index 9bda7ce9..7c9b9b2f 100644
--- a/packages/unocss/dev/entry-client.tsx
+++ b/packages/unocss/dev/entry-client.tsx
@@ -1,4 +1,4 @@
 // @refresh reload
-import { StartClient, mount } from "@solidjs/start/client";
+import { StartClient, mount } from "@solidjs/start/client"
 
-mount(() => <StartClient />, document.getElementById("app")!);
+mount(() => <StartClient />, document.getElementById("app")!)
diff --git a/packages/unocss/dev/entry-server.tsx b/packages/unocss/dev/entry-server.tsx
index 28e78d33..2c2e2995 100644
--- a/packages/unocss/dev/entry-server.tsx
+++ b/packages/unocss/dev/entry-server.tsx
@@ -1,21 +1,21 @@
 // @refresh reload
-import { StartServer, createHandler } from "@solidjs/start/server";
+import { StartServer, createHandler } from "@solidjs/start/server"
 
 export default createHandler(() => (
-	<StartServer
-		document={({ assets, children, scripts }) => (
-			<html lang="en">
-				<head>
-					<meta charset="utf-8" />
-					<meta name="viewport" content="width=device-width, initial-scale=1" />
-					<link rel="icon" href="/favicon.ico" />
-					{assets}
-				</head>
-				<body>
-					<div id="app">{children}</div>
-					{scripts}
-				</body>
-			</html>
-		)}
-	/>
-));
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+))
diff --git a/packages/unocss/dev/routes/_components/accordion-demo.tsx b/packages/unocss/dev/routes/_components/accordion-demo.tsx
index 9478d963..cda19269 100644
--- a/packages/unocss/dev/routes/_components/accordion-demo.tsx
+++ b/packages/unocss/dev/routes/_components/accordion-demo.tsx
@@ -1,34 +1,34 @@
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 
 const AccordionDemo = () => {
-	return (
-		<Accordion collapsible class="w-full">
-			<AccordionItem value="item-1">
-				<AccordionTrigger>Is it accessible?</AccordionTrigger>
-				<AccordionContent>
-					Yes. It adheres to the WAI-ARIA design pattern.
-				</AccordionContent>
-			</AccordionItem>
-			<AccordionItem value="item-2">
-				<AccordionTrigger>Is it styled?</AccordionTrigger>
-				<AccordionContent>
-					Yes. It comes with default styles that matches the other components'
-					aesthetic.
-				</AccordionContent>
-			</AccordionItem>
-			<AccordionItem value="item-3">
-				<AccordionTrigger>Is it animated?</AccordionTrigger>
-				<AccordionContent>
-					Yes. It's animated by default, but you can disable it if you prefer.
-				</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	);
-};
+  return (
+    <Accordion collapsible class="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other components'
+          aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
 
-export default AccordionDemo;
+export default AccordionDemo
diff --git a/packages/unocss/dev/routes/_components/alert-demo.tsx b/packages/unocss/dev/routes/_components/alert-demo.tsx
index 9e65dcf8..7a82f742 100644
--- a/packages/unocss/dev/routes/_components/alert-demo.tsx
+++ b/packages/unocss/dev/routes/_components/alert-demo.tsx
@@ -1,28 +1,28 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
 const AlertDemo = () => {
-	return (
-		<Alert>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m5 7l5 5l-5 5m7 2h7"
-				/>
-			</svg>
-			<AlertTitle>Heads up!</AlertTitle>
-			<AlertDescription>
-				You can not add components to your app using the cli, yet.
-			</AlertDescription>
-		</Alert>
-	);
-};
+  return (
+    <Alert>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m5 7l5 5l-5 5m7 2h7"
+        />
+      </svg>
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can not add components to your app using the cli, yet.
+      </AlertDescription>
+    </Alert>
+  )
+}
 
-export default AlertDemo;
+export default AlertDemo
diff --git a/packages/unocss/dev/routes/_components/alert-dialog-demo.tsx b/packages/unocss/dev/routes/_components/alert-dialog-demo.tsx
index 2bb6adfb..c0236e7a 100644
--- a/packages/unocss/dev/routes/_components/alert-dialog-demo.tsx
+++ b/packages/unocss/dev/routes/_components/alert-dialog-demo.tsx
@@ -1,42 +1,43 @@
+import type { AlertDialogTriggerProps } from "@kobalte/core/alert-dialog"
+
 import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogClose,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import type { AlertDialogTriggerProps } from "@kobalte/core/alert-dialog";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
 
 const AlertDialogDemo = () => {
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger
-				as={(props: AlertDialogTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Show Dialog
-					</Button>
-				)}
-			/>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
-						This action cannot be undone. This will permanently delete your
-						account and remove your data from our servers.
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogClose>Cancel</AlertDialogClose>
-					<AlertDialogAction>Continue</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        as={(props: AlertDialogTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Show Dialog
+          </Button>
+        )}
+      />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogClose>Cancel</AlertDialogClose>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
 
-export default AlertDialogDemo;
+export default AlertDialogDemo
diff --git a/packages/unocss/dev/routes/_components/app-sidebar.tsx b/packages/unocss/dev/routes/_components/app-sidebar.tsx
index 5af095fc..201cb20c 100644
--- a/packages/unocss/dev/routes/_components/app-sidebar.tsx
+++ b/packages/unocss/dev/routes/_components/app-sidebar.tsx
@@ -1,323 +1,325 @@
+import type { ComponentProps } from "solid-js"
+
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarFooter,
-	SidebarHeader,
-} from "@/components/ui/sidebar";
-import type { ComponentProps } from "solid-js";
-import NavMain from "./nav-main";
-import NavProjects from "./nav-projects";
-import NavUser from "./nav-user";
-import TeamSwitcher from "./team-switcher";
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+import NavMain from "./nav-main"
+import NavProjects from "./nav-projects"
+import NavUser from "./nav-user"
+import TeamSwitcher from "./team-switcher"
 
 // This is sample data.
 const data = {
-	user: {
-		name: "shadcn",
-		email: "m@example.com",
-		avatar: "/avatars/shadcn.jpg",
-	},
-	teams: [
-		{
-			name: "Acme Inc",
-			logo: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4 shrink-0"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M7 2h10M5 6h14" />
-						<rect width="18" height="12" x="3" y="10" rx="2" />
-					</g>
-				</svg>
-			),
-			plan: "Enterprise",
-		},
-		{
-			name: "Acme Corp.",
-			logo: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4 shrink-0"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2"
-					/>
-				</svg>
-			),
-			plan: "Startup",
-		},
-		{
-			name: "Evil Corp.",
-			logo: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4 shrink-0"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
-					/>
-				</svg>
-			),
-			plan: "Free",
-		},
-	],
-	navMain: [
-		{
-			title: "Playground",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="m7 11l2-2l-2-2m4 6h4" />
-						<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-					</g>
-				</svg>
-			),
-			isActive: true,
-			items: [
-				{
-					title: "History",
-					url: "#",
-				},
-				{
-					title: "Starred",
-					url: "#",
-				},
-				{
-					title: "Settings",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Models",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M12 8V4H8" />
-						<rect width="16" height="12" x="4" y="8" rx="2" />
-						<path d="M2 14h2m16 0h2m-7-1v2m-6-2v2" />
-					</g>
-				</svg>
-			),
-			items: [
-				{
-					title: "Genesis",
-					url: "#",
-				},
-				{
-					title: "Explorer",
-					url: "#",
-				},
-				{
-					title: "Quantum",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Documentation",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z"
-					/>
-				</svg>
-			),
-			items: [
-				{
-					title: "Introduction",
-					url: "#",
-				},
-				{
-					title: "Get Started",
-					url: "#",
-				},
-				{
-					title: "Tutorials",
-					url: "#",
-				},
-				{
-					title: "Changelog",
-					url: "#",
-				},
-			],
-		},
-		{
-			title: "Settings",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M20 7h-9m3 10H5" />
-						<circle cx="17" cy="17" r="3" />
-						<circle cx="7" cy="7" r="3" />
-					</g>
-				</svg>
-			),
-			items: [
-				{
-					title: "General",
-					url: "#",
-				},
-				{
-					title: "Team",
-					url: "#",
-				},
-				{
-					title: "Billing",
-					url: "#",
-				},
-				{
-					title: "Limits",
-					url: "#",
-				},
-			],
-		},
-	],
-	projects: [
-		{
-			name: "Design Engineering",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M22 6H2m20 12H2M6 2v20M18 2v20"
-					/>
-				</svg>
-			),
-		},
-		{
-			name: "Sales & Marketing",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
-						<path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
-					</g>
-				</svg>
-			),
-		},
-		{
-			name: "Travel",
-			url: "#",
-			icon: () => (
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
-					/>
-				</svg>
-			),
-		},
-	],
-};
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4 shrink-0"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M7 2h10M5 6h14" />
+            <rect width="18" height="12" x="3" y="10" rx="2" />
+          </g>
+        </svg>
+      ),
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4 shrink-0"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M2 13a2 2 0 0 0 2-2V7a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0V4a2 2 0 0 1 4 0v13a2 2 0 0 0 4 0v-4a2 2 0 0 1 2-2"
+          />
+        </svg>
+      ),
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4 shrink-0"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+          />
+        </svg>
+      ),
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="m7 11l2-2l-2-2m4 6h4" />
+            <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          </g>
+        </svg>
+      ),
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M12 8V4H8" />
+            <rect width="16" height="12" x="4" y="8" rx="2" />
+            <path d="M2 14h2m16 0h2m-7-1v2m-6-2v2" />
+          </g>
+        </svg>
+      ),
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 7v14m-9-3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4a4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3a3 3 0 0 0-3-3z"
+          />
+        </svg>
+      ),
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M20 7h-9m3 10H5" />
+            <circle cx="17" cy="17" r="3" />
+            <circle cx="7" cy="7" r="3" />
+          </g>
+        </svg>
+      ),
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M22 6H2m20 12H2M6 2v20M18 2v20"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
+            <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
+          </g>
+        </svg>
+      ),
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: () => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
+          />
+        </svg>
+      ),
+    },
+  ],
+}
 
 const AppSidebar = (props: ComponentProps<typeof Sidebar>) => {
-	return (
-		<Sidebar collapsible="icon" {...props}>
-			<SidebarHeader>
-				<TeamSwitcher teams={data.teams} />
-			</SidebarHeader>
-			<SidebarContent>
-				<NavMain items={data.navMain} />
-				<NavProjects projects={data.projects} />
-			</SidebarContent>
-			<SidebarFooter>
-				<NavUser user={data.user} />
-			</SidebarFooter>
-			{/* <SidebarRail /> */}
-		</Sidebar>
-	);
-};
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      {/* <SidebarRail /> */}
+    </Sidebar>
+  )
+}
 
-export default AppSidebar;
+export default AppSidebar
diff --git a/packages/unocss/dev/routes/_components/badge-demo.tsx b/packages/unocss/dev/routes/_components/badge-demo.tsx
index 27a9aa52..0e5456d1 100644
--- a/packages/unocss/dev/routes/_components/badge-demo.tsx
+++ b/packages/unocss/dev/routes/_components/badge-demo.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge"
 
 const BadgeDemo = () => {
-	return <Badge>Badge</Badge>;
-};
+  return <Badge>Badge</Badge>
+}
 
-export default BadgeDemo;
+export default BadgeDemo
diff --git a/packages/unocss/dev/routes/_components/badge-destructive.tsx b/packages/unocss/dev/routes/_components/badge-destructive.tsx
index 2e2d9dd0..79f47607 100644
--- a/packages/unocss/dev/routes/_components/badge-destructive.tsx
+++ b/packages/unocss/dev/routes/_components/badge-destructive.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge"
 
 const BadgeDestructive = () => {
-	return <Badge variant="destructive">Destructive</Badge>;
-};
+  return <Badge variant="destructive">Destructive</Badge>
+}
 
-export default BadgeDestructive;
+export default BadgeDestructive
diff --git a/packages/unocss/dev/routes/_components/badge-outline.tsx b/packages/unocss/dev/routes/_components/badge-outline.tsx
index 39626adc..62ef6e6e 100644
--- a/packages/unocss/dev/routes/_components/badge-outline.tsx
+++ b/packages/unocss/dev/routes/_components/badge-outline.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge"
 
 const BadgeOutline = () => {
-	return <Badge variant="outline">Outline</Badge>;
-};
+  return <Badge variant="outline">Outline</Badge>
+}
 
-export default BadgeOutline;
+export default BadgeOutline
diff --git a/packages/unocss/dev/routes/_components/badge-secondary.tsx b/packages/unocss/dev/routes/_components/badge-secondary.tsx
index fade9b12..7e8777e6 100644
--- a/packages/unocss/dev/routes/_components/badge-secondary.tsx
+++ b/packages/unocss/dev/routes/_components/badge-secondary.tsx
@@ -1,7 +1,7 @@
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge"
 
 const BadgeSecondary = () => {
-	return <Badge variant="secondary">Secondary</Badge>;
-};
+  return <Badge variant="secondary">Secondary</Badge>
+}
 
-export default BadgeSecondary;
+export default BadgeSecondary
diff --git a/packages/unocss/dev/routes/_components/button-demo.tsx b/packages/unocss/dev/routes/_components/button-demo.tsx
index 9cf8f9ae..645f5821 100644
--- a/packages/unocss/dev/routes/_components/button-demo.tsx
+++ b/packages/unocss/dev/routes/_components/button-demo.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonDemo = () => {
-	return <Button>Button</Button>;
-};
+  return <Button>Button</Button>
+}
 
-export default ButtonDemo;
+export default ButtonDemo
diff --git a/packages/unocss/dev/routes/_components/button-destructive.tsx b/packages/unocss/dev/routes/_components/button-destructive.tsx
index 9374e20f..90e8b77b 100644
--- a/packages/unocss/dev/routes/_components/button-destructive.tsx
+++ b/packages/unocss/dev/routes/_components/button-destructive.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonDestructive = () => {
-	return <Button variant="destructive">Destructive</Button>;
-};
+  return <Button variant="destructive">Destructive</Button>
+}
 
-export default ButtonDestructive;
+export default ButtonDestructive
diff --git a/packages/unocss/dev/routes/_components/button-ghost.tsx b/packages/unocss/dev/routes/_components/button-ghost.tsx
index e1a36637..ef8551dc 100644
--- a/packages/unocss/dev/routes/_components/button-ghost.tsx
+++ b/packages/unocss/dev/routes/_components/button-ghost.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonGhost = () => {
-	return <Button variant="ghost">Ghost</Button>;
-};
+  return <Button variant="ghost">Ghost</Button>
+}
 
-export default ButtonGhost;
+export default ButtonGhost
diff --git a/packages/unocss/dev/routes/_components/button-link.tsx b/packages/unocss/dev/routes/_components/button-link.tsx
index 5de27314..2533708f 100644
--- a/packages/unocss/dev/routes/_components/button-link.tsx
+++ b/packages/unocss/dev/routes/_components/button-link.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonLink = () => {
-	return <Button variant="link">Link</Button>;
-};
+  return <Button variant="link">Link</Button>
+}
 
-export default ButtonLink;
+export default ButtonLink
diff --git a/packages/unocss/dev/routes/_components/button-loading.tsx b/packages/unocss/dev/routes/_components/button-loading.tsx
index 3935de3d..aed585b0 100644
--- a/packages/unocss/dev/routes/_components/button-loading.tsx
+++ b/packages/unocss/dev/routes/_components/button-loading.tsx
@@ -1,25 +1,25 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonLoading = () => {
-	return (
-		<Button disabled>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="mr-2 h-4 w-4 animate-spin"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
-				/>
-			</svg>
-			Please wait
-		</Button>
-	);
-};
+  return (
+    <Button disabled>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mr-2 h-4 w-4 animate-spin"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 6V3m4.25 4.75L18.4 5.6M18 12h3m-4.75 4.25l2.15 2.15M12 18v3m-4.25-4.75L5.6 18.4M6 12H3m4.75-4.25L5.6 5.6"
+        />
+      </svg>
+      Please wait
+    </Button>
+  )
+}
 
-export default ButtonLoading;
+export default ButtonLoading
diff --git a/packages/unocss/dev/routes/_components/button-outline.tsx b/packages/unocss/dev/routes/_components/button-outline.tsx
index b4a7c7e4..0ebf09f8 100644
--- a/packages/unocss/dev/routes/_components/button-outline.tsx
+++ b/packages/unocss/dev/routes/_components/button-outline.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonOutline = () => {
-	return <Button variant="outline">Outline</Button>;
-};
+  return <Button variant="outline">Outline</Button>
+}
 
-export default ButtonOutline;
+export default ButtonOutline
diff --git a/packages/unocss/dev/routes/_components/button-secondary.tsx b/packages/unocss/dev/routes/_components/button-secondary.tsx
index 397d0286..07b6c905 100644
--- a/packages/unocss/dev/routes/_components/button-secondary.tsx
+++ b/packages/unocss/dev/routes/_components/button-secondary.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonSecondary = () => {
-	return <Button variant="secondary">Secondary</Button>;
-};
+  return <Button variant="secondary">Secondary</Button>
+}
 
-export default ButtonSecondary;
+export default ButtonSecondary
diff --git a/packages/unocss/dev/routes/_components/button-with-icon.tsx b/packages/unocss/dev/routes/_components/button-with-icon.tsx
index c75207a6..003909b2 100644
--- a/packages/unocss/dev/routes/_components/button-with-icon.tsx
+++ b/packages/unocss/dev/routes/_components/button-with-icon.tsx
@@ -1,27 +1,27 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 
 const ButtonWithIcon = () => {
-	return (
-		<Button>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="mr-2 h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-					<path d="m3 7l9 6l9-6" />
-				</g>
-			</svg>{" "}
-			Login with Email
-		</Button>
-	);
-};
+  return (
+    <Button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="mr-2 h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <path d="m3 7l9 6l9-6" />
+        </g>
+      </svg>{" "}
+      Login with Email
+    </Button>
+  )
+}
 
-export default ButtonWithIcon;
+export default ButtonWithIcon
diff --git a/packages/unocss/dev/routes/_components/calendar-demo.tsx b/packages/unocss/dev/routes/_components/calendar-demo.tsx
index ffc52bdb..16b7dfa9 100644
--- a/packages/unocss/dev/routes/_components/calendar-demo.tsx
+++ b/packages/unocss/dev/routes/_components/calendar-demo.tsx
@@ -1,144 +1,145 @@
+import { For } from "solid-js"
+
 import {
-	DatePicker,
-	DatePickerContent,
-	DatePickerContext,
-	DatePickerRangeText,
-	DatePickerTable,
-	DatePickerTableBody,
-	DatePickerTableCell,
-	DatePickerTableCellTrigger,
-	DatePickerTableHead,
-	DatePickerTableHeader,
-	DatePickerTableRow,
-	DatePickerView,
-	DatePickerViewControl,
-	DatePickerViewTrigger,
-} from "@/components/ui/date-picker";
-import { For } from "solid-js";
+  DatePicker,
+  DatePickerContent,
+  DatePickerContext,
+  DatePickerRangeText,
+  DatePickerTable,
+  DatePickerTableBody,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHead,
+  DatePickerTableHeader,
+  DatePickerTableRow,
+  DatePickerView,
+  DatePickerViewControl,
+  DatePickerViewTrigger,
+} from "@/components/ui/date-picker"
 
 const CalendarDemo = () => {
-	return (
-		<DatePicker open>
-			<DatePickerContent>
-				<DatePickerView view="day">
-					<DatePickerContext>
-						{(context) => (
-							<>
-								<DatePickerViewControl>
-									<DatePickerViewTrigger>
-										<DatePickerRangeText />
-									</DatePickerViewTrigger>
-								</DatePickerViewControl>
-								<DatePickerTable>
-									<DatePickerTableHead>
-										<DatePickerTableRow>
-											<For each={context().weekDays}>
-												{(weekDay) => (
-													<DatePickerTableHeader>
-														{weekDay.short}
-													</DatePickerTableHeader>
-												)}
-											</For>
-										</DatePickerTableRow>
-									</DatePickerTableHead>
-									<DatePickerTableBody>
-										<For each={context().weeks}>
-											{(week) => (
-												<DatePickerTableRow>
-													<For each={week}>
-														{(day) => (
-															<DatePickerTableCell value={day}>
-																<DatePickerTableCellTrigger>
-																	{day.day}
-																</DatePickerTableCellTrigger>
-															</DatePickerTableCell>
-														)}
-													</For>
-												</DatePickerTableRow>
-											)}
-										</For>
-									</DatePickerTableBody>
-								</DatePickerTable>
-							</>
-						)}
-					</DatePickerContext>
-				</DatePickerView>
-				<DatePickerView view="month">
-					<DatePickerContext>
-						{(context) => (
-							<>
-								<DatePickerViewControl>
-									<DatePickerViewTrigger>
-										<DatePickerRangeText />
-									</DatePickerViewTrigger>
-								</DatePickerViewControl>
-								<DatePickerTable>
-									<DatePickerTableBody>
-										<For
-											each={context().getMonthsGrid({
-												columns: 4,
-												format: "short",
-											})}
-										>
-											{(months) => (
-												<DatePickerTableRow>
-													<For each={months}>
-														{(month) => (
-															<DatePickerTableCell value={month.value}>
-																<DatePickerTableCellTrigger>
-																	{month.label}
-																</DatePickerTableCellTrigger>
-															</DatePickerTableCell>
-														)}
-													</For>
-												</DatePickerTableRow>
-											)}
-										</For>
-									</DatePickerTableBody>
-								</DatePickerTable>
-							</>
-						)}
-					</DatePickerContext>
-				</DatePickerView>
-				<DatePickerView view="year">
-					<DatePickerContext>
-						{(context) => (
-							<>
-								<DatePickerViewControl>
-									<DatePickerViewTrigger>
-										<DatePickerRangeText />
-									</DatePickerViewTrigger>
-								</DatePickerViewControl>
-								<DatePickerTable>
-									<DatePickerTableBody>
-										<For
-											each={context().getYearsGrid({
-												columns: 4,
-											})}
-										>
-											{(years) => (
-												<DatePickerTableRow>
-													<For each={years}>
-														{(year) => (
-															<DatePickerTableCell value={year.value}>
-																<DatePickerTableCellTrigger>
-																	{year.label}
-																</DatePickerTableCellTrigger>
-															</DatePickerTableCell>
-														)}
-													</For>
-												</DatePickerTableRow>
-											)}
-										</For>
-									</DatePickerTableBody>
-								</DatePickerTable>
-							</>
-						)}
-					</DatePickerContext>
-				</DatePickerView>
-			</DatePickerContent>
-		</DatePicker>
-	);
-};
+  return (
+    <DatePicker open>
+      <DatePickerContent>
+        <DatePickerView view="day">
+          <DatePickerContext>
+            {(context) => (
+              <>
+                <DatePickerViewControl>
+                  <DatePickerViewTrigger>
+                    <DatePickerRangeText />
+                  </DatePickerViewTrigger>
+                </DatePickerViewControl>
+                <DatePickerTable>
+                  <DatePickerTableHead>
+                    <DatePickerTableRow>
+                      <For each={context().weekDays}>
+                        {(weekDay) => (
+                          <DatePickerTableHeader>
+                            {weekDay.short}
+                          </DatePickerTableHeader>
+                        )}
+                      </For>
+                    </DatePickerTableRow>
+                  </DatePickerTableHead>
+                  <DatePickerTableBody>
+                    <For each={context().weeks}>
+                      {(week) => (
+                        <DatePickerTableRow>
+                          <For each={week}>
+                            {(day) => (
+                              <DatePickerTableCell value={day}>
+                                <DatePickerTableCellTrigger>
+                                  {day.day}
+                                </DatePickerTableCellTrigger>
+                              </DatePickerTableCell>
+                            )}
+                          </For>
+                        </DatePickerTableRow>
+                      )}
+                    </For>
+                  </DatePickerTableBody>
+                </DatePickerTable>
+              </>
+            )}
+          </DatePickerContext>
+        </DatePickerView>
+        <DatePickerView view="month">
+          <DatePickerContext>
+            {(context) => (
+              <>
+                <DatePickerViewControl>
+                  <DatePickerViewTrigger>
+                    <DatePickerRangeText />
+                  </DatePickerViewTrigger>
+                </DatePickerViewControl>
+                <DatePickerTable>
+                  <DatePickerTableBody>
+                    <For
+                      each={context().getMonthsGrid({
+                        columns: 4,
+                        format: "short",
+                      })}
+                    >
+                      {(months) => (
+                        <DatePickerTableRow>
+                          <For each={months}>
+                            {(month) => (
+                              <DatePickerTableCell value={month.value}>
+                                <DatePickerTableCellTrigger>
+                                  {month.label}
+                                </DatePickerTableCellTrigger>
+                              </DatePickerTableCell>
+                            )}
+                          </For>
+                        </DatePickerTableRow>
+                      )}
+                    </For>
+                  </DatePickerTableBody>
+                </DatePickerTable>
+              </>
+            )}
+          </DatePickerContext>
+        </DatePickerView>
+        <DatePickerView view="year">
+          <DatePickerContext>
+            {(context) => (
+              <>
+                <DatePickerViewControl>
+                  <DatePickerViewTrigger>
+                    <DatePickerRangeText />
+                  </DatePickerViewTrigger>
+                </DatePickerViewControl>
+                <DatePickerTable>
+                  <DatePickerTableBody>
+                    <For
+                      each={context().getYearsGrid({
+                        columns: 4,
+                      })}
+                    >
+                      {(years) => (
+                        <DatePickerTableRow>
+                          <For each={years}>
+                            {(year) => (
+                              <DatePickerTableCell value={year.value}>
+                                <DatePickerTableCellTrigger>
+                                  {year.label}
+                                </DatePickerTableCellTrigger>
+                              </DatePickerTableCell>
+                            )}
+                          </For>
+                        </DatePickerTableRow>
+                      )}
+                    </For>
+                  </DatePickerTableBody>
+                </DatePickerTable>
+              </>
+            )}
+          </DatePickerContext>
+        </DatePickerView>
+      </DatePickerContent>
+    </DatePicker>
+  )
+}
 
-export default CalendarDemo;
+export default CalendarDemo
diff --git a/packages/unocss/dev/routes/_components/card-demo.tsx b/packages/unocss/dev/routes/_components/card-demo.tsx
index 99d8508f..6eaf4606 100644
--- a/packages/unocss/dev/routes/_components/card-demo.tsx
+++ b/packages/unocss/dev/routes/_components/card-demo.tsx
@@ -1,104 +1,105 @@
-import { Button } from "@/components/ui/button";
+import { For } from "solid-js"
+
+import { Button } from "@/components/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Switch, SwitchControl, SwitchThumb } from "@/components/ui/switch";
-import { For } from "solid-js";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Switch, SwitchControl, SwitchThumb } from "@/components/ui/switch"
 
 const notifications = [
-	{
-		title: "Your call has been confirmed.",
-		description: "1 hour ago",
-	},
-	{
-		title: "You have a new message!",
-		description: "1 hour ago",
-	},
-	{
-		title: "Your subscription is expiring soon!",
-		description: "2 hours ago",
-	},
-];
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
 
 const CardDemo = () => {
-	return (
-		<Card class="w-[380px]">
-			<CardHeader>
-				<CardTitle>Notifications</CardTitle>
-				<CardDescription>You have 3 unread messages.</CardDescription>
-			</CardHeader>
-			<CardContent class="grid gap-4">
-				<div class=" flex items-center space-x-4 rounded-md border p-4">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1"
-						/>
-					</svg>
-					<div class="flex-1 space-y-1">
-						<p class="text-sm font-medium leading-none">Push Notifications</p>
-						<p class="text-sm text-muted-foreground">
-							Send notifications to device.
-						</p>
-					</div>
-					<Switch>
-						<SwitchControl>
-							<SwitchThumb />
-						</SwitchControl>
-					</Switch>
-				</div>
-				<div>
-					<For each={notifications}>
-						{(notification) => (
-							<div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
-								<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
-								<div class="space-y-1">
-									<p class="text-sm font-medium leading-none">
-										{notification.title}
-									</p>
-									<p class="text-sm text-muted-foreground">
-										{notification.description}
-									</p>
-								</div>
-							</div>
-						)}
-					</For>
-				</div>
-			</CardContent>
-			<CardFooter>
-				<Button class="w-full">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m5 12l5 5L20 7"
-						/>
-					</svg>
-					Mark all as read
-				</Button>
-			</CardFooter>
-		</Card>
-	);
-};
+  return (
+    <Card class="w-[380px]">
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-4">
+        <div class="flex items-center space-x-4 rounded-md border p-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1"
+            />
+          </svg>
+          <div class="flex-1 space-y-1">
+            <p class="text-sm font-medium leading-none">Push Notifications</p>
+            <p class="text-muted-foreground text-sm">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch>
+            <SwitchControl>
+              <SwitchThumb />
+            </SwitchControl>
+          </Switch>
+        </div>
+        <div>
+          <For each={notifications}>
+            {(notification) => (
+              <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                <div class="space-y-1">
+                  <p class="text-sm font-medium leading-none">
+                    {notification.title}
+                  </p>
+                  <p class="text-muted-foreground text-sm">
+                    {notification.description}
+                  </p>
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button class="w-full">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m5 12l5 5L20 7"
+            />
+          </svg>
+          Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
 
-export default CardDemo;
+export default CardDemo
diff --git a/packages/unocss/dev/routes/_components/carousel-demo.tsx b/packages/unocss/dev/routes/_components/carousel-demo.tsx
index 6e3bb228..2995846d 100644
--- a/packages/unocss/dev/routes/_components/carousel-demo.tsx
+++ b/packages/unocss/dev/routes/_components/carousel-demo.tsx
@@ -1,35 +1,36 @@
-import { Card, CardContent } from "@/components/ui/card";
+import { Index } from "solid-js"
+
+import { Card, CardContent } from "@/components/ui/card"
 import {
-	Carousel,
-	CarouselContent,
-	CarouselItem,
-	CarouselNext,
-	CarouselPrevious,
-} from "@/components/ui/carousel";
-import { Index } from "solid-js";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
 
 const CarouselDemo = () => {
-	return (
-		<Carousel class="w-full max-w-xs">
-			<CarouselContent>
-				<Index each={Array.from({ length: 5 })}>
-					{(_, index) => (
-						<CarouselItem>
-							<div class="p-1">
-								<Card>
-									<CardContent class="flex aspect-square items-center justify-center p-6">
-										<span class="text-4xl font-semibold">{index + 1}</span>
-									</CardContent>
-								</Card>
-							</div>
-						</CarouselItem>
-					)}
-				</Index>
-			</CarouselContent>
-			<CarouselPrevious />
-			<CarouselNext />
-		</Carousel>
-	);
-};
+  return (
+    <Carousel class="w-full max-w-xs">
+      <CarouselContent>
+        <Index each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem>
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </Index>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
 
-export default CarouselDemo;
+export default CarouselDemo
diff --git a/packages/unocss/dev/routes/_components/checkbox-demo.tsx b/packages/unocss/dev/routes/_components/checkbox-demo.tsx
index 40380de9..8554a0ca 100644
--- a/packages/unocss/dev/routes/_components/checkbox-demo.tsx
+++ b/packages/unocss/dev/routes/_components/checkbox-demo.tsx
@@ -1,18 +1,18 @@
 import {
-	Checkbox,
-	CheckboxControl,
-	CheckboxLabel,
-} from "@/components/ui/checkbox";
+  Checkbox,
+  CheckboxControl,
+  CheckboxLabel,
+} from "@/components/ui/checkbox"
 
 const CheckboxDemo = () => {
-	return (
-		<Checkbox class="flex items-center space-x-2">
-			<CheckboxControl />
-			<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-				Accept terms and conditions
-			</CheckboxLabel>
-		</Checkbox>
-	);
-};
+  return (
+    <Checkbox class="flex items-center space-x-2">
+      <CheckboxControl />
+      <CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Accept terms and conditions
+      </CheckboxLabel>
+    </Checkbox>
+  )
+}
 
-export default CheckboxDemo;
+export default CheckboxDemo
diff --git a/packages/unocss/dev/routes/_components/collapsible-demo.tsx b/packages/unocss/dev/routes/_components/collapsible-demo.tsx
index e8a9f4d7..ad39a1d7 100644
--- a/packages/unocss/dev/routes/_components/collapsible-demo.tsx
+++ b/packages/unocss/dev/routes/_components/collapsible-demo.tsx
@@ -1,55 +1,56 @@
-import { Button } from "@/components/ui/button";
+import { createSignal } from "solid-js"
+import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible"
+
+import { Button } from "@/components/ui/button"
 import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible";
-import { createSignal } from "solid-js";
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
 
 const CollapsibleDemo = () => {
-	const [isOpen, setIsOpen] = createSignal(false);
+  const [isOpen, setIsOpen] = createSignal(false)
 
-	return (
-		<Collapsible
-			open={isOpen()}
-			onOpenChange={setIsOpen}
-			class="w-350px space-y-2"
-		>
-			<div class="flex items-center justify-between space-x-4 px-4">
-				<h4 class="text-sm font-semibold">
-					@RyanCarniato starred 2 repositories
-				</h4>
-				<CollapsibleTrigger
-					as={(props: CollapsibleTriggerProps) => (
-						<Button variant="ghost" size="sm" class="w-9 p-0" {...props}>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-4 w-4"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-								/>
-							</svg>
-							<span class="sr-only">Toggle</span>
-						</Button>
-					)}
-				/>
-			</div>
-			<div class="rounded-md border px-4 py-3 font-mono text-sm">solid-js</div>
-			<CollapsibleContent class="space-y-2">
-				<div class="rounded-md border px-4 py-3 font-mono text-sm">
-					solid-start
-				</div>
-			</CollapsibleContent>
-		</Collapsible>
-	);
-};
+  return (
+    <Collapsible
+      open={isOpen()}
+      onOpenChange={setIsOpen}
+      class="w-350px space-y-2"
+    >
+      <div class="flex items-center justify-between space-x-4 px-4">
+        <h4 class="text-sm font-semibold">
+          @RyanCarniato starred 2 repositories
+        </h4>
+        <CollapsibleTrigger
+          as={(props: CollapsibleTriggerProps) => (
+            <Button variant="ghost" size="sm" class="w-9 p-0" {...props}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+                />
+              </svg>
+              <span class="sr-only">Toggle</span>
+            </Button>
+          )}
+        />
+      </div>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">solid-js</div>
+      <CollapsibleContent class="space-y-2">
+        <div class="rounded-md border px-4 py-3 font-mono text-sm">
+          solid-start
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
 
-export default CollapsibleDemo;
+export default CollapsibleDemo
diff --git a/packages/unocss/dev/routes/_components/combobox-demo.tsx b/packages/unocss/dev/routes/_components/combobox-demo.tsx
index ce320361..47534d6c 100644
--- a/packages/unocss/dev/routes/_components/combobox-demo.tsx
+++ b/packages/unocss/dev/routes/_components/combobox-demo.tsx
@@ -1,28 +1,28 @@
 import {
-	Combobox,
-	ComboboxContent,
-	ComboboxInput,
-	ComboboxItem,
-	ComboboxTrigger,
-} from "@/components/ui/combobox";
+  Combobox,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxTrigger,
+} from "@/components/ui/combobox"
 
-const ALL_OPTIONS = ["Next.js", "Astro", "Qwik", "SolidStart", "Nuxt.js"];
+const ALL_OPTIONS = ["Next.js", "Astro", "Qwik", "SolidStart", "Nuxt.js"]
 
 const ComboboxDemo = () => {
-	return (
-		<Combobox
-			options={ALL_OPTIONS}
-			placeholder="Search framework…"
-			itemComponent={(props) => (
-				<ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
-			)}
-		>
-			<ComboboxTrigger>
-				<ComboboxInput />
-			</ComboboxTrigger>
-			<ComboboxContent />
-		</Combobox>
-	);
-};
+  return (
+    <Combobox
+      options={ALL_OPTIONS}
+      placeholder="Search framework…"
+      itemComponent={(props) => (
+        <ComboboxItem item={props.item}>{props.item.rawValue}</ComboboxItem>
+      )}
+    >
+      <ComboboxTrigger>
+        <ComboboxInput />
+      </ComboboxTrigger>
+      <ComboboxContent />
+    </Combobox>
+  )
+}
 
-export default ComboboxDemo;
+export default ComboboxDemo
diff --git a/packages/unocss/dev/routes/_components/command-demo.tsx b/packages/unocss/dev/routes/_components/command-demo.tsx
index abc1def4..92ad4127 100644
--- a/packages/unocss/dev/routes/_components/command-demo.tsx
+++ b/packages/unocss/dev/routes/_components/command-demo.tsx
@@ -1,194 +1,195 @@
+import { For, type JSXElement } from "solid-js"
+
 import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-	CommandShortcut,
-} from "@/components/ui/command";
-import { For, type JSXElement } from "solid-js";
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command"
 
 type Option = {
-	icon: JSXElement;
-	label: string;
-	disabled: boolean;
-	shortcut?: JSXElement;
-};
+  icon: JSXElement
+  label: string
+  disabled: boolean
+  shortcut?: JSXElement
+}
 
 type List = {
-	label: string;
-	options: Option[];
-};
+  label: string
+  options: Option[]
+}
 
 export const commandData: List[] = [
-	{
-		label: "Suggestions",
-		options: [
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="mr-2 h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
-						/>
-					</svg>
-				),
-				label: "Calendar",
-				disabled: false,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01" />
-							<path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
-						</g>
-					</svg>
-				),
-				label: "Search emoji",
-				disabled: false,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
-							<path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
-						</g>
-					</svg>
-				),
-				label: "Launch",
-				disabled: false,
-			},
-		],
-	},
-	{
-		label: "Settings",
-		options: [
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
-						/>
-					</svg>
-				),
-				label: "Profile",
-				disabled: true,
-				shortcut: <CommandShortcut>⌘P</CommandShortcut>,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-							<path d="m3 7l9 6l9-6" />
-						</g>
-					</svg>
-				),
-				label: "Mail",
-				disabled: false,
-				shortcut: <CommandShortcut>⌘B</CommandShortcut>,
-			},
-			{
-				icon: (
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="mr-2 h-4 w-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
-							<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-						</g>
-					</svg>
-				),
-				label: "Setting",
-				disabled: false,
-				shortcut: <CommandShortcut>⌘S</CommandShortcut>,
-			},
-		],
-	},
-];
+  {
+    label: "Suggestions",
+    options: [
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2 h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
+            />
+          </svg>
+        ),
+        label: "Calendar",
+        disabled: false,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01" />
+              <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+            </g>
+          </svg>
+        ),
+        label: "Search emoji",
+        disabled: false,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
+              <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
+            </g>
+          </svg>
+        ),
+        label: "Launch",
+        disabled: false,
+      },
+    ],
+  },
+  {
+    label: "Settings",
+    options: [
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
+            />
+          </svg>
+        ),
+        label: "Profile",
+        disabled: true,
+        shortcut: <CommandShortcut>⌘P</CommandShortcut>,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <path d="m3 7l9 6l9-6" />
+            </g>
+          </svg>
+        ),
+        label: "Mail",
+        disabled: false,
+        shortcut: <CommandShortcut>⌘B</CommandShortcut>,
+      },
+      {
+        icon: (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-2 h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
+              <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
+            </g>
+          </svg>
+        ),
+        label: "Setting",
+        disabled: false,
+        shortcut: <CommandShortcut>⌘S</CommandShortcut>,
+      },
+    ],
+  },
+]
 
 const CommandDemo = () => {
-	return (
-		<Command class="rounded-lg border shadow-md">
-			<CommandInput placeholder="Type a command or search..." />
-			<CommandList>
-				<CommandEmpty>No results found.</CommandEmpty>
-				<For each={commandData}>
-					{(item) => (
-						<CommandGroup heading={item.label}>
-							<For each={item.options}>
-								{(item) => (
-									<CommandItem disabled={item.disabled}>
-										{item.icon}
-										<span>{item.label}</span>
-										{item.shortcut}
-									</CommandItem>
-								)}
-							</For>
-						</CommandGroup>
-					)}
-				</For>
-			</CommandList>
-		</Command>
-	);
-};
+  return (
+    <Command class="rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <For each={commandData}>
+          {(item) => (
+            <CommandGroup heading={item.label}>
+              <For each={item.options}>
+                {(item) => (
+                  <CommandItem disabled={item.disabled}>
+                    {item.icon}
+                    <span>{item.label}</span>
+                    {item.shortcut}
+                  </CommandItem>
+                )}
+              </For>
+            </CommandGroup>
+          )}
+        </For>
+      </CommandList>
+    </Command>
+  )
+}
 
-export default CommandDemo;
+export default CommandDemo
diff --git a/packages/unocss/dev/routes/_components/component-wrapper.tsx b/packages/unocss/dev/routes/_components/component-wrapper.tsx
index d988b645..0d91b31f 100644
--- a/packages/unocss/dev/routes/_components/component-wrapper.tsx
+++ b/packages/unocss/dev/routes/_components/component-wrapper.tsx
@@ -1,22 +1,23 @@
-import { cn } from "@/libs/cn";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+
+import { cn } from "@/libs/cn"
 
 const ComponentWrapper = (props: ComponentProps<"div"> & { name?: string }) => {
-	const [local, rest] = splitProps(props, ["class", "name", "children"]);
+  const [local, rest] = splitProps(props, ["class", "name", "children"])
 
-	return (
-		<div
-			class={cn("flex w-full flex-col rounded-lg border", local.class)}
-			{...rest}
-		>
-			<div class="border-b px-4 py-3">
-				<div class="text-sm font-medium">{local.name}</div>
-			</div>
-			<div class="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
-				{local.children}
-			</div>
-		</div>
-	);
-};
+  return (
+    <div
+      class={cn("flex w-full flex-col rounded-lg border", local.class)}
+      {...rest}
+    >
+      <div class="border-b px-4 py-3">
+        <div class="text-sm font-medium">{local.name}</div>
+      </div>
+      <div class="flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full">
+        {local.children}
+      </div>
+    </div>
+  )
+}
 
-export default ComponentWrapper;
+export default ComponentWrapper
diff --git a/packages/unocss/dev/routes/_components/context-menu-demo.tsx b/packages/unocss/dev/routes/_components/context-menu-demo.tsx
index cb1da590..6824feda 100644
--- a/packages/unocss/dev/routes/_components/context-menu-demo.tsx
+++ b/packages/unocss/dev/routes/_components/context-menu-demo.tsx
@@ -1,72 +1,72 @@
 import {
-	ContextMenu,
-	ContextMenuCheckboxItem,
-	ContextMenuContent,
-	ContextMenuGroup,
-	ContextMenuGroupLabel,
-	ContextMenuItem,
-	ContextMenuRadioGroup,
-	ContextMenuRadioItem,
-	ContextMenuSeparator,
-	ContextMenuShortcut,
-	ContextMenuSub,
-	ContextMenuSubContent,
-	ContextMenuSubTrigger,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
 
 const ContextMenuDemo = () => {
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-				Right click here
-			</ContextMenuTrigger>
-			<ContextMenuContent class="w-64">
-				<ContextMenuItem inset>
-					Back
-					<ContextMenuShortcut>⌘[</ContextMenuShortcut>
-				</ContextMenuItem>
-				<ContextMenuItem inset disabled>
-					Forward
-					<ContextMenuShortcut>⌘]</ContextMenuShortcut>
-				</ContextMenuItem>
-				<ContextMenuItem inset>
-					Reload
-					<ContextMenuShortcut>⌘R</ContextMenuShortcut>
-				</ContextMenuItem>
-				<ContextMenuSub>
-					<ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-					<ContextMenuSubContent class="w-48">
-						<ContextMenuItem>
-							Save Page As...
-							<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-						</ContextMenuItem>
-						<ContextMenuItem>Create Shortcut...</ContextMenuItem>
-						<ContextMenuItem>Name Window...</ContextMenuItem>
-						<ContextMenuSeparator />
-						<ContextMenuItem>Developer Tools</ContextMenuItem>
-					</ContextMenuSubContent>
-				</ContextMenuSub>
-				<ContextMenuSeparator />
-				<ContextMenuCheckboxItem checked>
-					Show Bookmarks Bar
-					<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-				</ContextMenuCheckboxItem>
-				<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-				<ContextMenuSeparator />
-				<ContextMenuGroup>
-					<ContextMenuGroupLabel inset>People</ContextMenuGroupLabel>
-					<ContextMenuSeparator />
-					<ContextMenuRadioGroup value="pedro">
-						<ContextMenuRadioItem value="pedro">
-							Pedro Duarte
-						</ContextMenuRadioItem>
-						<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-					</ContextMenuRadioGroup>
-				</ContextMenuGroup>
-			</ContextMenuContent>
-		</ContextMenu>
-	);
-};
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent class="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent class="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuGroupLabel inset>People</ContextMenuGroupLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioGroup value="pedro">
+            <ContextMenuRadioItem value="pedro">
+              Pedro Duarte
+            </ContextMenuRadioItem>
+            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
 
-export default ContextMenuDemo;
+export default ContextMenuDemo
diff --git a/packages/unocss/dev/routes/_components/date-picker-demo.tsx b/packages/unocss/dev/routes/_components/date-picker-demo.tsx
index 4809035a..4ad1e9c3 100644
--- a/packages/unocss/dev/routes/_components/date-picker-demo.tsx
+++ b/packages/unocss/dev/routes/_components/date-picker-demo.tsx
@@ -1,157 +1,158 @@
+import { Index } from "solid-js"
+import { Portal } from "solid-js/web"
+
 import {
-	DatePicker,
-	DatePickerContent,
-	DatePickerContext,
-	DatePickerControl,
-	DatePickerInput,
-	DatePickerPositioner,
-	DatePickerRangeText,
-	DatePickerTable,
-	DatePickerTableBody,
-	DatePickerTableCell,
-	DatePickerTableCellTrigger,
-	DatePickerTableHead,
-	DatePickerTableHeader,
-	DatePickerTableRow,
-	DatePickerTrigger,
-	DatePickerView,
-	DatePickerViewControl,
-	DatePickerViewTrigger,
-} from "@/components/ui/date-picker";
-import { Index } from "solid-js";
-import { Portal } from "solid-js/web";
+  DatePicker,
+  DatePickerContent,
+  DatePickerContext,
+  DatePickerControl,
+  DatePickerInput,
+  DatePickerPositioner,
+  DatePickerRangeText,
+  DatePickerTable,
+  DatePickerTableBody,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHead,
+  DatePickerTableHeader,
+  DatePickerTableRow,
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerViewControl,
+  DatePickerViewTrigger,
+} from "@/components/ui/date-picker"
 
 const DatePickerDemo = () => {
-	return (
-		<DatePicker>
-			<DatePickerControl>
-				<DatePickerInput />
-				<DatePickerTrigger />
-			</DatePickerControl>
-			<Portal>
-				<DatePickerPositioner>
-					<DatePickerContent>
-						<DatePickerView view="day">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableHead>
-												<DatePickerTableRow>
-													<Index each={context().weekDays}>
-														{(weekDay) => (
-															<DatePickerTableHeader>
-																{weekDay().short}
-															</DatePickerTableHeader>
-														)}
-													</Index>
-												</DatePickerTableRow>
-											</DatePickerTableHead>
-											<DatePickerTableBody>
-												<Index each={context().weeks}>
-													{(week) => (
-														<DatePickerTableRow>
-															<Index each={week()}>
-																{(day) => (
-																	<DatePickerTableCell value={day()}>
-																		<DatePickerTableCellTrigger>
-																			{day().day}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-						<DatePickerView view="month">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableBody>
-												<Index
-													each={context().getMonthsGrid({
-														columns: 4,
-														format: "short",
-													})}
-												>
-													{(months) => (
-														<DatePickerTableRow>
-															<Index each={months()}>
-																{(month) => (
-																	<DatePickerTableCell value={month().value}>
-																		<DatePickerTableCellTrigger>
-																			{month().label}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-						<DatePickerView view="year">
-							<DatePickerContext>
-								{(context) => (
-									<>
-										<DatePickerViewControl>
-											<DatePickerViewTrigger>
-												<DatePickerRangeText />
-											</DatePickerViewTrigger>
-										</DatePickerViewControl>
-										<DatePickerTable>
-											<DatePickerTableBody>
-												<Index
-													each={context().getYearsGrid({
-														columns: 4,
-													})}
-												>
-													{(years) => (
-														<DatePickerTableRow>
-															<Index each={years()}>
-																{(year) => (
-																	<DatePickerTableCell value={year().value}>
-																		<DatePickerTableCellTrigger>
-																			{year().label}
-																		</DatePickerTableCellTrigger>
-																	</DatePickerTableCell>
-																)}
-															</Index>
-														</DatePickerTableRow>
-													)}
-												</Index>
-											</DatePickerTableBody>
-										</DatePickerTable>
-									</>
-								)}
-							</DatePickerContext>
-						</DatePickerView>
-					</DatePickerContent>
-				</DatePickerPositioner>
-			</Portal>
-		</DatePicker>
-	);
-};
+  return (
+    <DatePicker>
+      <DatePickerControl>
+        <DatePickerInput />
+        <DatePickerTrigger />
+      </DatePickerControl>
+      <Portal>
+        <DatePickerPositioner>
+          <DatePickerContent>
+            <DatePickerView view="day">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableHead>
+                        <DatePickerTableRow>
+                          <Index each={context().weekDays}>
+                            {(weekDay) => (
+                              <DatePickerTableHeader>
+                                {weekDay().short}
+                              </DatePickerTableHeader>
+                            )}
+                          </Index>
+                        </DatePickerTableRow>
+                      </DatePickerTableHead>
+                      <DatePickerTableBody>
+                        <Index each={context().weeks}>
+                          {(week) => (
+                            <DatePickerTableRow>
+                              <Index each={week()}>
+                                {(day) => (
+                                  <DatePickerTableCell value={day()}>
+                                    <DatePickerTableCellTrigger>
+                                      {day().day}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+            <DatePickerView view="month">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableBody>
+                        <Index
+                          each={context().getMonthsGrid({
+                            columns: 4,
+                            format: "short",
+                          })}
+                        >
+                          {(months) => (
+                            <DatePickerTableRow>
+                              <Index each={months()}>
+                                {(month) => (
+                                  <DatePickerTableCell value={month().value}>
+                                    <DatePickerTableCellTrigger>
+                                      {month().label}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+            <DatePickerView view="year">
+              <DatePickerContext>
+                {(context) => (
+                  <>
+                    <DatePickerViewControl>
+                      <DatePickerViewTrigger>
+                        <DatePickerRangeText />
+                      </DatePickerViewTrigger>
+                    </DatePickerViewControl>
+                    <DatePickerTable>
+                      <DatePickerTableBody>
+                        <Index
+                          each={context().getYearsGrid({
+                            columns: 4,
+                          })}
+                        >
+                          {(years) => (
+                            <DatePickerTableRow>
+                              <Index each={years()}>
+                                {(year) => (
+                                  <DatePickerTableCell value={year().value}>
+                                    <DatePickerTableCellTrigger>
+                                      {year().label}
+                                    </DatePickerTableCellTrigger>
+                                  </DatePickerTableCell>
+                                )}
+                              </Index>
+                            </DatePickerTableRow>
+                          )}
+                        </Index>
+                      </DatePickerTableBody>
+                    </DatePickerTable>
+                  </>
+                )}
+              </DatePickerContext>
+            </DatePickerView>
+          </DatePickerContent>
+        </DatePickerPositioner>
+      </Portal>
+    </DatePicker>
+  )
+}
 
-export default DatePickerDemo;
+export default DatePickerDemo
diff --git a/packages/unocss/dev/routes/_components/dialog-demo.tsx b/packages/unocss/dev/routes/_components/dialog-demo.tsx
index afc1a003..475c39d8 100644
--- a/packages/unocss/dev/routes/_components/dialog-demo.tsx
+++ b/packages/unocss/dev/routes/_components/dialog-demo.tsx
@@ -1,53 +1,54 @@
-import { Button } from "@/components/ui/button";
+import type { DialogTriggerProps } from "@kobalte/core/dialog"
+
+import { Button } from "@/components/ui/button"
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/components/ui/textfield";
-import type { DialogTriggerProps } from "@kobalte/core/dialog";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/components/ui/textfield"
 
 const DialogDemo = () => {
-	return (
-		<Dialog>
-			<DialogTrigger
-				as={(props: DialogTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Edit Profile
-					</Button>
-				)}
-			/>
-			<DialogContent class="sm:max-w-[425px]">
-				<DialogHeader>
-					<DialogTitle>Edit profile</DialogTitle>
-					<DialogDescription>
-						Make changes to your profile here. Click save when you're done.
-					</DialogDescription>
-				</DialogHeader>
-				<div class="grid gap-4 py-4">
-					<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
-						<TextFieldLabel class="text-right">Name</TextFieldLabel>
-						<TextField class="col-span-2 md:col-span-3" />
-					</TextFieldRoot>
-					<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
-						<TextFieldLabel class="text-right">Username</TextFieldLabel>
-						<TextField class="col-span-2 md:col-span-3" />
-					</TextFieldRoot>
-				</div>
-				<DialogFooter>
-					<Button type="submit">Save changes</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-};
+  return (
+    <Dialog>
+      <DialogTrigger
+        as={(props: DialogTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Edit Profile
+          </Button>
+        )}
+      />
+      <DialogContent class="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div class="grid gap-4 py-4">
+          <TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
+            <TextFieldLabel class="text-right">Name</TextFieldLabel>
+            <TextField class="col-span-2 md:col-span-3" />
+          </TextFieldRoot>
+          <TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
+            <TextFieldLabel class="text-right">Username</TextFieldLabel>
+            <TextField class="col-span-2 md:col-span-3" />
+          </TextFieldRoot>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
 
-export default DialogDemo;
+export default DialogDemo
diff --git a/packages/unocss/dev/routes/_components/drawer-demo.tsx b/packages/unocss/dev/routes/_components/drawer-demo.tsx
index 7e64727f..4cfa270f 100644
--- a/packages/unocss/dev/routes/_components/drawer-demo.tsx
+++ b/packages/unocss/dev/routes/_components/drawer-demo.tsx
@@ -1,102 +1,103 @@
-import { Button } from "@/components/ui/button";
+import { createSignal } from "solid-js"
+
+import { Button } from "@/components/ui/button"
 import {
-	Drawer,
-	DrawerClose,
-	DrawerContent,
-	DrawerDescription,
-	DrawerFooter,
-	DrawerHeader,
-	DrawerLabel,
-	DrawerTrigger,
-} from "@/components/ui/drawer";
-import { createSignal } from "solid-js";
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerLabel,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
 
 const DrawerDemo = () => {
-	const [goal, setGoal] = createSignal(350);
+  const [goal, setGoal] = createSignal(350)
 
-	const onClick = (adjustment: number) => {
-		setGoal(Math.max(200, Math.min(400, goal() + adjustment)));
-	};
+  const onClick = (adjustment: number) => {
+    setGoal(Math.max(200, Math.min(400, goal() + adjustment)))
+  }
 
-	return (
-		<Drawer>
-			<DrawerTrigger as={Button} variant="outline">
-				Open Drawer
-			</DrawerTrigger>
-			<DrawerContent>
-				<div class="mx-auto w-full max-w-sm">
-					<DrawerHeader>
-						<DrawerLabel>Move Goal</DrawerLabel>
-						<DrawerDescription>Set your daily activity goal.</DrawerDescription>
-					</DrawerHeader>
-					<div class="p-4 pb-0">
-						<div class="flex items-center justify-center space-x-2">
-							<Button
-								variant="outline"
-								size="icon"
-								class="h-8 w-8 shrink-0 rounded-full"
-								onClick={() => onClick(-10)}
-								disabled={goal() <= 200}
-							>
-								<svg
-									class="h-4 w-4"
-									stroke-width="1.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M6 12H18"
-										stroke="currentColor"
-										stroke-width="1.5"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-								<span class="sr-only">Decrease</span>
-							</Button>
-							<div class="flex-1 text-center">
-								<div class="text-7xl font-bold tracking-tighter">{goal()}</div>
-								<div class="text-[0.70rem] uppercase text-muted-foreground">
-									Calories/day
-								</div>
-							</div>
-							<Button
-								variant="outline"
-								size="icon"
-								class="h-8 w-8 shrink-0 rounded-full"
-								onClick={() => onClick(10)}
-								disabled={goal() >= 400}
-							>
-								<svg
-									class="h-4 w-4"
-									stroke-width="1.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M6 12H12M18 12H12M12 12V6M12 12V18"
-										stroke="currentColor"
-										stroke-width="1.5"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-								<span class="sr-only">Increase</span>
-							</Button>
-						</div>
-					</div>
-					<DrawerFooter>
-						<Button>Submit</Button>
-						<DrawerClose as={Button} variant="outline">
-							Cancel
-						</DrawerClose>
-					</DrawerFooter>
-				</div>
-			</DrawerContent>
-		</Drawer>
-	);
-};
+  return (
+    <Drawer>
+      <DrawerTrigger as={Button} variant="outline">
+        Open Drawer
+      </DrawerTrigger>
+      <DrawerContent>
+        <div class="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerLabel>Move Goal</DrawerLabel>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div class="p-4 pb-0">
+            <div class="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal() <= 200}
+              >
+                <svg
+                  class="h-4 w-4"
+                  stroke-width="1.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 12H18"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                <span class="sr-only">Decrease</span>
+              </Button>
+              <div class="flex-1 text-center">
+                <div class="text-7xl font-bold tracking-tighter">{goal()}</div>
+                <div class="text-muted-foreground text-[0.70rem] uppercase">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal() >= 400}
+              >
+                <svg
+                  class="h-4 w-4"
+                  stroke-width="1.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 12H12M18 12H12M12 12V6M12 12V18"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                <span class="sr-only">Increase</span>
+              </Button>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose as={Button} variant="outline">
+              Cancel
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
 
-export default DrawerDemo;
+export default DrawerDemo
diff --git a/packages/unocss/dev/routes/_components/dropdown-menu-demo.tsx b/packages/unocss/dev/routes/_components/dropdown-menu-demo.tsx
index 687d1881..90d388c2 100644
--- a/packages/unocss/dev/routes/_components/dropdown-menu-demo.tsx
+++ b/packages/unocss/dev/routes/_components/dropdown-menu-demo.tsx
@@ -1,109 +1,110 @@
-import { Button } from "@/components/ui/button";
+import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu"
+
+import { Button } from "@/components/ui/button"
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 const DropdownMenuDemo = () => {
-	return (
-		<DropdownMenu placement="bottom">
-			<DropdownMenuTrigger
-				as={(props: DropdownMenuSubTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Open
-					</Button>
-				)}
-			/>
-			<DropdownMenuContent class="w-56">
-				<DropdownMenuGroup>
-					<DropdownMenuGroupLabel>My Account</DropdownMenuGroupLabel>
-					<DropdownMenuSeparator />
-					<DropdownMenuItem>
-						<i class="i-lucide:user mr-2" />
-						<span>Profile</span>
-						<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<i class="i-lucide:credit-card mr-2" />
-						<span>Billing</span>
-						<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<i class="i-lucide:settings mr-2" />
-						<span>Settings</span>
-						<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<i class="i-lucide:keyboard mr-2" />
-						<span>Keyboard shortcuts</span>
-						<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuGroup>
-					<DropdownMenuItem>
-						<i class="i-lucide:user mr-2" />
-						<span>Team</span>
-					</DropdownMenuItem>
-					<DropdownMenuSub>
-						<DropdownMenuSubTrigger>
-							<i class="i-lucide:user-plus mr-2" />
-							<span>Invite users</span>
-						</DropdownMenuSubTrigger>
-						<DropdownMenuSubContent>
-							<DropdownMenuItem>
-								<i class="i-lucide:mail mr-2" />
-								<span>Email</span>
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<i class="i-lucide:message-square mr-2" />
-								<span>Message</span>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-							<DropdownMenuItem>
-								<i class="ilucide:plus-circle mr-2" />
-								<span>More...</span>
-							</DropdownMenuItem>
-						</DropdownMenuSubContent>
-					</DropdownMenuSub>
-					<DropdownMenuItem>
-						<i class="i-lucide:plus mr-2" />
-						<span>New Team</span>
-						<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>
-					<i class="i-lucide:github mr-2" />
-					<span>GitHub</span>
-				</DropdownMenuItem>
-				<DropdownMenuItem>
-					<i class="i-lucide:life-buoy mr-2" />
-					<span>Support</span>
-				</DropdownMenuItem>
-				<DropdownMenuItem disabled>
-					<i class="i-lucide:cloud mr-2" />
-					<span>API</span>
-				</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>
-					<i class="i-lucide:log-out mr-2" />
-					<span>Log out</span>
-					<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-};
+  return (
+    <DropdownMenu placement="bottom">
+      <DropdownMenuTrigger
+        as={(props: DropdownMenuSubTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Open
+          </Button>
+        )}
+      />
+      <DropdownMenuContent class="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuGroupLabel>My Account</DropdownMenuGroupLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <i class="i-lucide:user mr-2" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <i class="i-lucide:credit-card mr-2" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <i class="i-lucide:settings mr-2" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <i class="i-lucide:keyboard mr-2" />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <i class="i-lucide:user mr-2" />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <i class="i-lucide:user-plus mr-2" />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <i class="i-lucide:mail mr-2" />
+                <span>Email</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <i class="i-lucide:message-square mr-2" />
+                <span>Message</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <i class="ilucide:plus-circle mr-2" />
+                <span>More...</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <i class="i-lucide:plus mr-2" />
+            <span>New Team</span>
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <i class="i-lucide:github mr-2" />
+          <span>GitHub</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <i class="i-lucide:life-buoy mr-2" />
+          <span>Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <i class="i-lucide:cloud mr-2" />
+          <span>API</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <i class="i-lucide:log-out mr-2" />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
-export default DropdownMenuDemo;
+export default DropdownMenuDemo
diff --git a/packages/unocss/dev/routes/_components/hover-card-demo.tsx b/packages/unocss/dev/routes/_components/hover-card-demo.tsx
index a445b461..7ef0eaaa 100644
--- a/packages/unocss/dev/routes/_components/hover-card-demo.tsx
+++ b/packages/unocss/dev/routes/_components/hover-card-demo.tsx
@@ -1,65 +1,66 @@
-import { Button } from "@/components/ui/button";
+import type { HoverCardTriggerProps } from "@kobalte/core/hover-card"
+import { Image } from "@kobalte/core/image"
+
+import { Button } from "@/components/ui/button"
 import {
-	HoverCard,
-	HoverCardContent,
-	HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import type { HoverCardTriggerProps } from "@kobalte/core/hover-card";
-import { Image } from "@kobalte/core/image";
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
 
 const HoverCardDemo = () => {
-	return (
-		<HoverCard>
-			<HoverCardTrigger
-				as={(props: HoverCardTriggerProps) => (
-					<Button variant="link" {...props}>
-						@solid_js
-					</Button>
-				)}
-			/>
-			<HoverCardContent class="w-80">
-				<div class="flex justify-between space-x-4">
-					<Image
-						fallbackDelay={400}
-						class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
-					>
-						<Image.Img
-							src="https://github.com/solidjs.png"
-							class="size-full aspect-square"
-						/>
-						<Image.Fallback class="flex h-full w-full items-center justify-center rounded-full bg-muted">
-							SJ
-						</Image.Fallback>
-					</Image>
-					<div class="space-y-1">
-						<h4 class="text-sm font-semibold">@solid_js</h4>
-						<p class="text-sm">
-							Simple and performant reactivity for building user interfaces.
-						</p>
-						<div class="flex items-center pt-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="mr-2 h-4 w-4 opacity-70"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
-								/>
-							</svg>
-							<span class="text-xs text-muted-foreground">
-								Joined March 2021
-							</span>
-						</div>
-					</div>
-				</div>
-			</HoverCardContent>
-		</HoverCard>
-	);
-};
+  return (
+    <HoverCard>
+      <HoverCardTrigger
+        as={(props: HoverCardTriggerProps) => (
+          <Button variant="link" {...props}>
+            @solid_js
+          </Button>
+        )}
+      />
+      <HoverCardContent class="w-80">
+        <div class="flex justify-between space-x-4">
+          <Image
+            fallbackDelay={400}
+            class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+          >
+            <Image.Img
+              src="https://github.com/solidjs.png"
+              class="aspect-square size-full"
+            />
+            <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-full">
+              SJ
+            </Image.Fallback>
+          </Image>
+          <div class="space-y-1">
+            <h4 class="text-sm font-semibold">@solid_js</h4>
+            <p class="text-sm">
+              Simple and performant reactivity for building user interfaces.
+            </p>
+            <div class="flex items-center pt-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="mr-2 h-4 w-4 opacity-70"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
+                />
+              </svg>
+              <span class="text-muted-foreground text-xs">
+                Joined March 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
 
-export default HoverCardDemo;
+export default HoverCardDemo
diff --git a/packages/unocss/dev/routes/_components/index.tsx b/packages/unocss/dev/routes/_components/index.tsx
index 30d6a46b..8e853bed 100644
--- a/packages/unocss/dev/routes/_components/index.tsx
+++ b/packages/unocss/dev/routes/_components/index.tsx
@@ -1,225 +1,226 @@
 import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/components/ui/sidebar";
-import AccordionDemo from "./accordion-demo";
-import AlertDemo from "./alert-demo";
-import AlertDialogDemo from "./alert-dialog-demo";
-import AppSidebar from "./app-sidebar";
-import BadgeDemo from "./badge-demo";
-import BadgeDestructive from "./badge-destructive";
-import BadgeOutline from "./badge-outline";
-import BadgeSecondary from "./badge-secondary";
-import ButtonDemo from "./button-demo";
-import ButtonDestructive from "./button-destructive";
-import ButtonGhost from "./button-ghost";
-import ButtonLink from "./button-link";
-import ButtonLoading from "./button-loading";
-import ButtonOutline from "./button-outline";
-import ButtonSecondary from "./button-secondary";
-import ButtonWithIcon from "./button-with-icon";
-import CalendarDemo from "./calendar-demo";
-import CardDemo from "./card-demo";
-import CarouselDemo from "./carousel-demo";
-import CheckboxDemo from "./checkbox-demo";
-import CollapsibleDemo from "./collapsible-demo";
-import ComboboxDemo from "./combobox-demo";
-import CommandDemo from "./command-demo";
-import ComponentWrapper from "./component-wrapper";
-import ContextMenuDemo from "./context-menu-demo";
-import DatePickerDemo from "./date-picker-demo";
-import DialogDemo from "./dialog-demo";
-import DrawerDemo from "./drawer-demo";
-import DropdownMenuDemo from "./dropdown-menu-demo";
-import HoverCardDemo from "./hover-card-demo";
-import MenubarDemo from "./menubar-demo";
-import NavigationMenuDemo from "./navigation-menu-demo";
-import NumberFieldDemo from "./number-field-demo";
-import OtpFieldDemo from "./otp-field-demo";
-import PaginationDemo from "./pagination-demo";
-import PopoverDemo from "./popover-demo";
-import ProgressDemo from "./progress-demo";
-import RadioGroupDemo from "./radio-group-demo";
-import ResizableDemo from "./resizable-demo";
-import SelectDemo from "./select-demo";
-import SeparatorDemo from "./separator-demo";
-import SkeletonDemo from "./skeleton-demo";
-import SonnerDemo from "./sonner-demo";
-import SwitchDemo from "./switch-demo";
-import TableDemo from "./table-demo";
-import TabsDemo from "./tabs-demo";
-import TextareaDemo from "./textarea-demo";
-import TextFieldDemo from "./textfield-demo";
-import ToastDemo from "./toast-demo";
-import ToggleDemo from "./toggle-demo";
-import ToggleDisabled from "./toggle-disabled";
-import ToggleGroupDemo from "./toggle-group-demo";
-import ToggleOutline from "./toggle-outline";
-import ToggleWithText from "./toggle-with-text";
-import TooltipDemo from "./tooltip-demo";
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+
+import AccordionDemo from "./accordion-demo"
+import AlertDemo from "./alert-demo"
+import AlertDialogDemo from "./alert-dialog-demo"
+import AppSidebar from "./app-sidebar"
+import BadgeDemo from "./badge-demo"
+import BadgeDestructive from "./badge-destructive"
+import BadgeOutline from "./badge-outline"
+import BadgeSecondary from "./badge-secondary"
+import ButtonDemo from "./button-demo"
+import ButtonDestructive from "./button-destructive"
+import ButtonGhost from "./button-ghost"
+import ButtonLink from "./button-link"
+import ButtonLoading from "./button-loading"
+import ButtonOutline from "./button-outline"
+import ButtonSecondary from "./button-secondary"
+import ButtonWithIcon from "./button-with-icon"
+import CalendarDemo from "./calendar-demo"
+import CardDemo from "./card-demo"
+import CarouselDemo from "./carousel-demo"
+import CheckboxDemo from "./checkbox-demo"
+import CollapsibleDemo from "./collapsible-demo"
+import ComboboxDemo from "./combobox-demo"
+import CommandDemo from "./command-demo"
+import ComponentWrapper from "./component-wrapper"
+import ContextMenuDemo from "./context-menu-demo"
+import DatePickerDemo from "./date-picker-demo"
+import DialogDemo from "./dialog-demo"
+import DrawerDemo from "./drawer-demo"
+import DropdownMenuDemo from "./dropdown-menu-demo"
+import HoverCardDemo from "./hover-card-demo"
+import MenubarDemo from "./menubar-demo"
+import NavigationMenuDemo from "./navigation-menu-demo"
+import NumberFieldDemo from "./number-field-demo"
+import OtpFieldDemo from "./otp-field-demo"
+import PaginationDemo from "./pagination-demo"
+import PopoverDemo from "./popover-demo"
+import ProgressDemo from "./progress-demo"
+import RadioGroupDemo from "./radio-group-demo"
+import ResizableDemo from "./resizable-demo"
+import SelectDemo from "./select-demo"
+import SeparatorDemo from "./separator-demo"
+import SkeletonDemo from "./skeleton-demo"
+import SonnerDemo from "./sonner-demo"
+import SwitchDemo from "./switch-demo"
+import TableDemo from "./table-demo"
+import TabsDemo from "./tabs-demo"
+import TextareaDemo from "./textarea-demo"
+import TextFieldDemo from "./textfield-demo"
+import ToastDemo from "./toast-demo"
+import ToggleDemo from "./toggle-demo"
+import ToggleDisabled from "./toggle-disabled"
+import ToggleGroupDemo from "./toggle-group-demo"
+import ToggleOutline from "./toggle-outline"
+import ToggleWithText from "./toggle-with-text"
+import TooltipDemo from "./tooltip-demo"
 
 const Page = () => {
-	return (
-		<SidebarProvider>
-			<AppSidebar />
-			<SidebarInset>
-				<header class="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-					<div class="flex items-center gap-2 px-4">
-						<SidebarTrigger class="-ml-1" />
-					</div>
-				</header>
-				<div class="flex flex-1 flex-col gap-4 p-4">
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-						<ComponentWrapper name="Accordion">
-							<AccordionDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Alert">
-							<AlertDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="AlertDialog">
-							<AlertDialogDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Badge">
-							<BadgeDemo />
-							<BadgeDestructive />
-							<BadgeOutline />
-							<BadgeSecondary />
-						</ComponentWrapper>
-						<ComponentWrapper name="Button">
-							<div class="flex items-center gap-2">
-								<ButtonDemo />
-								<ButtonDestructive />
-								<ButtonGhost />
-								<ButtonLink />
-							</div>
-							<div class="flex items-center gap-2">
-								<ButtonLoading />
-								<ButtonOutline />
-								<ButtonSecondary />
-							</div>
-							<div class="flex items-center gap-2">
-								<ButtonWithIcon />
-							</div>
-						</ComponentWrapper>
-						<ComponentWrapper name="Calendar">
-							<CalendarDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Card">
-							<CardDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Carousel" class="[&_.max-w-xs]:max-w-[70%]">
-							<CarouselDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Checkbox">
-							<CheckboxDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Collapsible">
-							<CollapsibleDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Combobox">
-							<ComboboxDemo />
-						</ComponentWrapper>
-						<ComponentWrapper
-							name="Command"
-							class="[&_[cmdk-root]]:md:min-w-max"
-						>
-							<CommandDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="ContextMenu">
-							<ContextMenuDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="DatePicker">
-							<DatePickerDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Dialog">
-							<DialogDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Drawer">
-							<DrawerDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="DropdownMenu">
-							<DropdownMenuDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="HoverCard">
-							<HoverCardDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="TextField">
-							<TextFieldDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="OTPField">
-							<OtpFieldDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Menubar">
-							<MenubarDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="NavigationMenu" class="col-span-2">
-							<NavigationMenuDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="NumberField">
-							<NumberFieldDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Pagination">
-							<PaginationDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Popover">
-							<PopoverDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Progress">
-							<ProgressDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="RadioGroup">
-							<RadioGroupDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Resizable" class="col-span-2">
-							<ResizableDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Select">
-							<SelectDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Separator">
-							<SeparatorDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Skeleton">
-							<SkeletonDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Sonner">
-							<SonnerDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Switch">
-							<SwitchDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Table" class="col-span-2">
-							<TableDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Tabs">
-							<TabsDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Textarea">
-							<TextareaDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Toast">
-							<ToastDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Toggle">
-							<div class="flex items-center gap-2">
-								<ToggleDemo />
-								<ToggleDisabled />
-								<ToggleOutline />
-								<ToggleWithText />
-							</div>
-						</ComponentWrapper>
-						<ComponentWrapper name="ToggleGroup">
-							<ToggleGroupDemo />
-						</ComponentWrapper>
-						<ComponentWrapper name="Tooltip">
-							<TooltipDemo />
-						</ComponentWrapper>
-					</div>
-				</div>
-			</SidebarInset>
-		</SidebarProvider>
-	);
-};
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div class="flex items-center gap-2 px-4">
+            <SidebarTrigger class="-ml-1" />
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <ComponentWrapper name="Accordion">
+              <AccordionDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Alert">
+              <AlertDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AlertDialog">
+              <AlertDialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Badge">
+              <BadgeDemo />
+              <BadgeDestructive />
+              <BadgeOutline />
+              <BadgeSecondary />
+            </ComponentWrapper>
+            <ComponentWrapper name="Button">
+              <div class="flex items-center gap-2">
+                <ButtonDemo />
+                <ButtonDestructive />
+                <ButtonGhost />
+                <ButtonLink />
+              </div>
+              <div class="flex items-center gap-2">
+                <ButtonLoading />
+                <ButtonOutline />
+                <ButtonSecondary />
+              </div>
+              <div class="flex items-center gap-2">
+                <ButtonWithIcon />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="Calendar">
+              <CalendarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Card">
+              <CardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Carousel" class="[&_.max-w-xs]:max-w-[70%]">
+              <CarouselDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Checkbox">
+              <CheckboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Collapsible">
+              <CollapsibleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Combobox">
+              <ComboboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Command"
+              class="[&_[cmdk-root]]:md:min-w-max"
+            >
+              <CommandDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ContextMenu">
+              <ContextMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DatePicker">
+              <DatePickerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Dialog">
+              <DialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Drawer">
+              <DrawerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DropdownMenu">
+              <DropdownMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="HoverCard">
+              <HoverCardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="TextField">
+              <TextFieldDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="OTPField">
+              <OtpFieldDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Menubar">
+              <MenubarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="NavigationMenu" class="col-span-2">
+              <NavigationMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="NumberField">
+              <NumberFieldDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Pagination">
+              <PaginationDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Popover">
+              <PopoverDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Progress">
+              <ProgressDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="RadioGroup">
+              <RadioGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Resizable" class="col-span-2">
+              <ResizableDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Select">
+              <SelectDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Separator">
+              <SeparatorDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Skeleton">
+              <SkeletonDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sonner">
+              <SonnerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Switch">
+              <SwitchDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Table" class="col-span-2">
+              <TableDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tabs">
+              <TabsDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Textarea">
+              <TextareaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toast">
+              <ToastDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toggle">
+              <div class="flex items-center gap-2">
+                <ToggleDemo />
+                <ToggleDisabled />
+                <ToggleOutline />
+                <ToggleWithText />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="ToggleGroup">
+              <ToggleGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tooltip">
+              <TooltipDemo />
+            </ComponentWrapper>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
 
-export default Page;
+export default Page
diff --git a/packages/unocss/dev/routes/_components/menubar-demo.tsx b/packages/unocss/dev/routes/_components/menubar-demo.tsx
index a706365e..fa982fc3 100644
--- a/packages/unocss/dev/routes/_components/menubar-demo.tsx
+++ b/packages/unocss/dev/routes/_components/menubar-demo.tsx
@@ -1,109 +1,109 @@
 import {
-	Menubar,
-	MenubarCheckboxItem,
-	MenubarContent,
-	MenubarItem,
-	MenubarMenu,
-	MenubarRadioGroup,
-	MenubarRadioItem,
-	MenubarSeparator,
-	MenubarShortcut,
-	MenubarSub,
-	MenubarSubContent,
-	MenubarSubTrigger,
-	MenubarTrigger,
-} from "@/components/ui/menubar";
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
 
 const MenubarDemo = () => {
-	return (
-		<Menubar>
-			<MenubarMenu>
-				<MenubarTrigger>File</MenubarTrigger>
-				<MenubarContent>
-					<MenubarItem>
-						New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem>
-						New Window <MenubarShortcut>⌘N</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem disabled>New Incognito Window</MenubarItem>
-					<MenubarSeparator />
-					<MenubarSub>
-						<MenubarSubTrigger>Share</MenubarSubTrigger>
-						<MenubarSubContent>
-							<MenubarItem>Email link</MenubarItem>
-							<MenubarItem>Messages</MenubarItem>
-							<MenubarItem>Notes</MenubarItem>
-						</MenubarSubContent>
-					</MenubarSub>
-					<MenubarSeparator />
-					<MenubarItem>
-						Print... <MenubarShortcut>⌘P</MenubarShortcut>
-					</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-			<MenubarMenu>
-				<MenubarTrigger>Edit</MenubarTrigger>
-				<MenubarContent>
-					<MenubarItem>
-						Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem>
-						Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-					</MenubarItem>
-					<MenubarSeparator />
-					<MenubarSub>
-						<MenubarSubTrigger>Find</MenubarSubTrigger>
-						<MenubarSubContent>
-							<MenubarItem>Search the web</MenubarItem>
-							<MenubarSeparator />
-							<MenubarItem>Find...</MenubarItem>
-							<MenubarItem>Find Next</MenubarItem>
-							<MenubarItem>Find Previous</MenubarItem>
-						</MenubarSubContent>
-					</MenubarSub>
-					<MenubarSeparator />
-					<MenubarItem>Cut</MenubarItem>
-					<MenubarItem>Copy</MenubarItem>
-					<MenubarItem>Paste</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-			<MenubarMenu>
-				<MenubarTrigger>View</MenubarTrigger>
-				<MenubarContent>
-					<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-					<MenubarCheckboxItem checked>
-						Always Show Full URLs
-					</MenubarCheckboxItem>
-					<MenubarSeparator />
-					<MenubarItem inset>
-						Reload <MenubarShortcut>⌘R</MenubarShortcut>
-					</MenubarItem>
-					<MenubarItem disabled inset>
-						Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-					</MenubarItem>
-					<MenubarSeparator />
-					<MenubarItem inset>Toggle Fullscreen</MenubarItem>
-					<MenubarSeparator />
-					<MenubarItem inset>Hide Sidebar</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-			<MenubarMenu>
-				<MenubarTrigger>Profiles</MenubarTrigger>
-				<MenubarContent>
-					<MenubarRadioGroup value="benoit">
-						<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-						<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-						<MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-					</MenubarRadioGroup>
-					<MenubarSeparator />
-					<MenubarItem inset>Edit...</MenubarItem>
-					<MenubarSeparator />
-					<MenubarItem inset>Add Profile...</MenubarItem>
-				</MenubarContent>
-			</MenubarMenu>
-		</Menubar>
-	);
-};
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
 
-export default MenubarDemo;
+export default MenubarDemo
diff --git a/packages/unocss/dev/routes/_components/nav-main.tsx b/packages/unocss/dev/routes/_components/nav-main.tsx
index 7901b364..4a928f82 100644
--- a/packages/unocss/dev/routes/_components/nav-main.tsx
+++ b/packages/unocss/dev/routes/_components/nav-main.tsx
@@ -1,94 +1,95 @@
+import { For, Show, type Accessor, type JSX } from "solid-js"
+import type {
+  CollapsibleRootProps,
+  CollapsibleTriggerProps,
+} from "@kobalte/core/collapsible"
+
 import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
 import {
-	SidebarGroup,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSub,
-	SidebarMenuSubButton,
-	SidebarMenuSubItem,
-} from "@/components/ui/sidebar";
-import type {
-	CollapsibleRootProps,
-	CollapsibleTriggerProps,
-} from "@kobalte/core/collapsible";
-import { type Accessor, For, type JSX, Show } from "solid-js";
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar"
 
 const NavMain = (props: {
-	items: {
-		title: string;
-		url: string;
-		icon?: Accessor<JSX.Element>;
-		isActive?: boolean;
-		items?: {
-			title: string;
-			url: string;
-		}[];
-	}[];
+  items: {
+    title: string
+    url: string
+    icon?: Accessor<JSX.Element>
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
 }) => {
-	return (
-		<SidebarGroup>
-			<SidebarGroupLabel>Platform</SidebarGroupLabel>
-			<SidebarMenu>
-				<For each={props.items}>
-					{(item) => (
-						<Collapsible
-							defaultOpen={item.isActive}
-							as={(props: CollapsibleRootProps) => (
-								<SidebarMenuItem {...props}>
-									<CollapsibleTrigger
-										as={(props: CollapsibleTriggerProps) => (
-											// @ts-expect-error
-											<SidebarMenuButton
-												{...props}
-												tooltip={item.title}
-												class="[&>svg:last-of-type]:data-[expanded]:rotate-90"
-											>
-												<Show when={item.icon!()}>{item.icon!()}</Show>
-												<span>{item.title}</span>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="ml-auto transition-transform duration-200"
-													viewBox="0 0 24 24"
-												>
-													<path
-														fill="none"
-														stroke="currentColor"
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="m9 18l6-6l-6-6"
-													/>
-												</svg>
-											</SidebarMenuButton>
-										)}
-									/>
-									<CollapsibleContent>
-										<SidebarMenuSub>
-											<For each={item.items}>
-												{(subItem) => (
-													<SidebarMenuSubItem>
-														<SidebarMenuSubButton as="a" href={subItem.url}>
-															<span>{subItem.title}</span>
-														</SidebarMenuSubButton>
-													</SidebarMenuSubItem>
-												)}
-											</For>
-										</SidebarMenuSub>
-									</CollapsibleContent>
-								</SidebarMenuItem>
-							)}
-						/>
-					)}
-				</For>
-			</SidebarMenu>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={props.items}>
+          {(item) => (
+            <Collapsible
+              defaultOpen={item.isActive}
+              as={(props: CollapsibleRootProps) => (
+                <SidebarMenuItem {...props}>
+                  <CollapsibleTrigger
+                    as={(props: CollapsibleTriggerProps) => (
+                      // @ts-expect-error
+                      <SidebarMenuButton
+                        {...props}
+                        tooltip={item.title}
+                        class="[&>svg:last-of-type]:data-[expanded]:rotate-90"
+                      >
+                        <Show when={item.icon!()}>{item.icon!()}</Show>
+                        <span>{item.title}</span>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="ml-auto transition-transform duration-200"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="m9 18l6-6l-6-6"
+                          />
+                        </svg>
+                      </SidebarMenuButton>
+                    )}
+                  />
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      <For each={item.items}>
+                        {(subItem) => (
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton as="a" href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        )}
+                      </For>
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              )}
+            />
+          )}
+        </For>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
 
-export default NavMain;
+export default NavMain
diff --git a/packages/unocss/dev/routes/_components/nav-projects.tsx b/packages/unocss/dev/routes/_components/nav-projects.tsx
index 085435a2..8a0a6985 100644
--- a/packages/unocss/dev/routes/_components/nav-projects.tsx
+++ b/packages/unocss/dev/routes/_components/nav-projects.tsx
@@ -1,155 +1,156 @@
+import { For, type Accessor, type JSX } from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
-	SidebarGroup,
-	SidebarGroupLabel,
-	SidebarMenu,
-	SidebarMenuAction,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/components/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { type Accessor, For, type JSX } from "solid-js";
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/components/ui/sidebar"
 
 const NavProjects = (props: {
-	projects: {
-		name: string;
-		url: string;
-		icon: Accessor<JSX.Element>;
-	}[];
+  projects: {
+    name: string
+    url: string
+    icon: Accessor<JSX.Element>
+  }[]
 }) => {
-	const { isMobile } = useSideBar();
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarGroup class="group-data-[collapsible=icon]:hidden">
-			<SidebarGroupLabel>Projects</SidebarGroupLabel>
-			<SidebarMenu>
-				<For each={props.projects}>
-					{(item) => (
-						<SidebarMenuItem>
-							<SidebarMenuButton as="a" href={item.url}>
-								<item.icon />
-								<span>{item.name}</span>
-							</SidebarMenuButton>
-							<DropdownMenu
-								placement={isMobile() ? "bottom-end" : "right-start"}
-							>
-								<DropdownMenuTrigger
-									as={(props: DropdownMenuTriggerProps) => (
-										// @ts-expect-error
-										<SidebarMenuAction {...props} showOnHover>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="size-4"
-												viewBox="0 0 24 24"
-											>
-												<g
-													fill="none"
-													stroke="currentColor"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-												>
-													<circle cx="12" cy="12" r="1" />
-													<circle cx="19" cy="12" r="1" />
-													<circle cx="5" cy="12" r="1" />
-												</g>
-											</svg>
-											<span class="sr-only">More</span>
-										</SidebarMenuAction>
-									)}
-								/>
-								<DropdownMenuContent class="w-48 rounded-lg">
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
-											/>
-										</svg>
-										<span>View Project</span>
-									</DropdownMenuItem>
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<g
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-											>
-												<path d="m15 17l5-5l-5-5" />
-												<path d="M4 18v-2a4 4 0 0 1 4-4h12" />
-											</g>
-										</svg>
-										<span>Share Project</span>
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="text-muted-foreground size-4"
-											viewBox="0 0 24 24"
-										>
-											<path
-												fill="none"
-												stroke="currentColor"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
-											/>
-										</svg>
-										<span>Delete Project</span>
-									</DropdownMenuItem>
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</SidebarMenuItem>
-					)}
-				</For>
-				<SidebarMenuItem>
-					<SidebarMenuButton class="text-sidebar-foreground/70">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-sidebar-foreground/70 size-4"
-							viewBox="0 0 24 24"
-						>
-							<g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-							>
-								<circle cx="12" cy="12" r="1" />
-								<circle cx="19" cy="12" r="1" />
-								<circle cx="5" cy="12" r="1" />
-							</g>
-						</svg>
-						<span>More</span>
-					</SidebarMenuButton>
-				</SidebarMenuItem>
-			</SidebarMenu>
-		</SidebarGroup>
-	);
-};
+  return (
+    <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={props.projects}>
+          {(item) => (
+            <SidebarMenuItem>
+              <SidebarMenuButton as="a" href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </SidebarMenuButton>
+              <DropdownMenu
+                placement={isMobile() ? "bottom-end" : "right-start"}
+              >
+                <DropdownMenuTrigger
+                  as={(props: DropdownMenuTriggerProps) => (
+                    // @ts-expect-error
+                    <SidebarMenuAction {...props} showOnHover>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                      >
+                        <g
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                        >
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="19" cy="12" r="1" />
+                          <circle cx="5" cy="12" r="1" />
+                        </g>
+                      </svg>
+                      <span class="sr-only">More</span>
+                    </SidebarMenuAction>
+                  )}
+                />
+                <DropdownMenuContent class="w-48 rounded-lg">
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+                      />
+                    </svg>
+                    <span>View Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      >
+                        <path d="m15 17l5-5l-5-5" />
+                        <path d="M4 18v-2a4 4 0 0 1 4-4h12" />
+                      </g>
+                    </svg>
+                    <span>Share Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="text-muted-foreground size-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"
+                      />
+                    </svg>
+                    <span>Delete Project</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          )}
+        </For>
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-sidebar-foreground/70 size-4"
+              viewBox="0 0 24 24"
+            >
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="19" cy="12" r="1" />
+                <circle cx="5" cy="12" r="1" />
+              </g>
+            </svg>
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
 
-export default NavProjects;
+export default NavProjects
diff --git a/packages/unocss/dev/routes/_components/nav-user.tsx b/packages/unocss/dev/routes/_components/nav-user.tsx
index 85a154c1..7ca923fc 100644
--- a/packages/unocss/dev/routes/_components/nav-user.tsx
+++ b/packages/unocss/dev/routes/_components/nav-user.tsx
@@ -1,197 +1,198 @@
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+import { Image } from "@kobalte/core/image"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/components/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { Image } from "@kobalte/core/image";
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/components/ui/sidebar"
 
 const NavUser = (props: {
-	user: {
-		name: string;
-		email: string;
-		avatar: string;
-	};
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
 }) => {
-	const { isMobile } = useSideBar();
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu placement={isMobile() ? "bottom-end" : "right-end"}>
-					<DropdownMenuTrigger
-						as={(triggerProps: DropdownMenuTriggerProps) => (
-							// @ts-expect-error
-							<SidebarMenuButton
-								{...triggerProps}
-								size="lg"
-								class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
-							>
-								<Image class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
-									<Image.Img
-										class="aspect-square h-full w-full"
-										src={props.user.avatar}
-										alt={props.user.name}
-									/>
-									<Image.Fallback class="flex h-full w-full items-center justify-center bg-muted rounded-lg">
-										CN
-									</Image.Fallback>
-								</Image>
-								<div class="grid flex-1 text-left text-sm leading-tight">
-									<span class="truncate font-semibold">{props.user.name}</span>
-									<span class="truncate text-xs">{props.user.email}</span>
-								</div>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="ml-auto size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="m7 15l5 5l5-5M7 9l5-5l5 5"
-									/>
-								</svg>
-							</SidebarMenuButton>
-						)}
-					/>
-					<DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
-						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel class="p-0 font-normal">
-								<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-									<Image class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
-										<Image.Img
-											class="aspect-square h-full w-full"
-											src={props.user.avatar}
-											alt={props.user.name}
-										/>
-										<Image.Fallback class="flex h-full w-full items-center justify-center bg-muted rounded-lg">
-											CN
-										</Image.Fallback>
-									</Image>
-									<div class="grid flex-1 text-left text-sm leading-tight">
-										<span class="truncate font-semibold">
-											{props.user.name}
-										</span>
-										<span class="truncate text-xs">{props.user.email}</span>
-									</div>
-								</div>
-							</DropdownMenuGroupLabel>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
-									/>
-								</svg>
-								Upgrade to Pro
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76" />
-										<path d="m9 12l2 2l4-4" />
-									</g>
-								</svg>
-								Account
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<g
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-									>
-										<rect width="20" height="14" x="2" y="5" rx="2" />
-										<path d="M2 10h20" />
-									</g>
-								</svg>
-								Billing
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0"
-									/>
-								</svg>
-								Notifications
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-4"
-								viewBox="0 0 24 24"
-							>
-								<path
-									fill="none"
-									stroke="currentColor"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"
-								/>
-							</svg>
-							Log out
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu placement={isMobile() ? "bottom-end" : "right-end"}>
+          <DropdownMenuTrigger
+            as={(triggerProps: DropdownMenuTriggerProps) => (
+              // @ts-expect-error
+              <SidebarMenuButton
+                {...triggerProps}
+                size="lg"
+                class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
+              >
+                <Image class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                  <Image.Img
+                    class="aspect-square h-full w-full"
+                    src={props.user.avatar}
+                    alt={props.user.name}
+                  />
+                  <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-lg">
+                    CN
+                  </Image.Fallback>
+                </Image>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{props.user.name}</span>
+                  <span class="truncate text-xs">{props.user.email}</span>
+                </div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ml-auto size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m7 15l5 5l5-5M7 9l5-5l5 5"
+                  />
+                </svg>
+              </SidebarMenuButton>
+            )}
+          />
+          <DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
+            <DropdownMenuGroup>
+              <DropdownMenuGroupLabel class="p-0 font-normal">
+                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Image class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                    <Image.Img
+                      class="aspect-square h-full w-full"
+                      src={props.user.avatar}
+                      alt={props.user.name}
+                    />
+                    <Image.Fallback class="bg-muted flex h-full w-full items-center justify-center rounded-lg">
+                      CN
+                    </Image.Fallback>
+                  </Image>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">
+                      {props.user.name}
+                    </span>
+                    <span class="truncate text-xs">{props.user.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuGroupLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0zM20 3v4m2-2h-4M4 17v2m1-1H3"
+                  />
+                </svg>
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76" />
+                    <path d="m9 12l2 2l4-4" />
+                  </g>
+                </svg>
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                  >
+                    <rect width="20" height="14" x="2" y="5" rx="2" />
+                    <path d="M2 10h20" />
+                  </g>
+                </svg>
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9m4.3 13a1.94 1.94 0 0 0 3.4 0"
+                  />
+                </svg>
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"
+                />
+              </svg>
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
 
-export default NavUser;
+export default NavUser
diff --git a/packages/unocss/dev/routes/_components/navigation-menu-demo.tsx b/packages/unocss/dev/routes/_components/navigation-menu-demo.tsx
index a8c972fa..c18beb20 100644
--- a/packages/unocss/dev/routes/_components/navigation-menu-demo.tsx
+++ b/packages/unocss/dev/routes/_components/navigation-menu-demo.tsx
@@ -1,124 +1,124 @@
+import { For, type ParentProps } from "solid-js"
+
 import {
-	NavigationMenu,
-	NavigationMenuContent,
-	NavigationMenuDescription,
-	NavigationMenuItem,
-	NavigationMenuItemLabel,
-	NavigationMenuLink,
-	NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu";
-import type { ParentProps } from "solid-js";
-import { For } from "solid-js";
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuDescription,
+  NavigationMenuItem,
+  NavigationMenuItemLabel,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
 
 const ListItem = (props: ParentProps<{ title: string; href: string }>) => {
-	return (
-		<NavigationMenuLink
-			href={props.href}
-			class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-[box-shadow,background-color] duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring"
-		>
-			<NavigationMenuItemLabel class="text-sm font-medium leading-none">
-				{props.title}
-			</NavigationMenuItemLabel>
-			<NavigationMenuDescription class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-				{props.children}
-			</NavigationMenuDescription>
-		</NavigationMenuLink>
-	);
-};
+  return (
+    <NavigationMenuLink
+      href={props.href}
+      class="hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-ring block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-[box-shadow,background-color] duration-200 focus-visible:outline-none focus-visible:ring-[1.5px]"
+    >
+      <NavigationMenuItemLabel class="text-sm font-medium leading-none">
+        {props.title}
+      </NavigationMenuItemLabel>
+      <NavigationMenuDescription class="text-muted-foreground line-clamp-2 text-sm leading-snug">
+        {props.children}
+      </NavigationMenuDescription>
+    </NavigationMenuLink>
+  )
+}
 
 const components: { title: string; href: string; description: string }[] = [
-	{
-		title: "Data Table",
-		href: "/docs/components/data-table",
-		description: "Powerful table and datagrids built using TanStack Table.",
-	},
-	{
-		title: "Date Picker",
-		href: "/docs/components/date-picker",
-		description:
-			"A component that allows users to select a date from a calendar.",
-	},
-	{
-		title: "OTP Field",
-		href: "/docs/components/otp-field",
-		description: "An accessible and customizable OTP Input component.",
-	},
-	{
-		title: "Resizable",
-		href: "/docs/components/resizable",
-		description:
-			"A component that divides your interface into resizable sections.",
-	},
-	{
-		title: "Sonner",
-		href: "/docs/components/sonner",
-		description: "An opinionated toast component for Solid.",
-	},
-	{
-		title: "Toggle Group",
-		href: "/docs/components/toggle-group",
-		description:
-			"A set of two-state buttons that can be toggled on (pressed) or off (not pressed).",
-	},
-];
+  {
+    title: "Data Table",
+    href: "/docs/components/data-table",
+    description: "Powerful table and datagrids built using TanStack Table.",
+  },
+  {
+    title: "Date Picker",
+    href: "/docs/components/date-picker",
+    description:
+      "A component that allows users to select a date from a calendar.",
+  },
+  {
+    title: "OTP Field",
+    href: "/docs/components/otp-field",
+    description: "An accessible and customizable OTP Input component.",
+  },
+  {
+    title: "Resizable",
+    href: "/docs/components/resizable",
+    description:
+      "A component that divides your interface into resizable sections.",
+  },
+  {
+    title: "Sonner",
+    href: "/docs/components/sonner",
+    description: "An opinionated toast component for Solid.",
+  },
+  {
+    title: "Toggle Group",
+    href: "/docs/components/toggle-group",
+    description:
+      "A set of two-state buttons that can be toggled on (pressed) or off (not pressed).",
+  },
+]
 
 const NavigationMenuDemo = () => {
-	return (
-		<NavigationMenu>
-			<NavigationMenuItem>
-				<NavigationMenuTrigger class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:bg-accent">
-					Learn
-				</NavigationMenuTrigger>
-				<NavigationMenuContent class="grid gap-3 p-4 w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] [&>li:first-of-type]:row-span-3">
-					<NavigationMenuLink
-						href="/"
-						class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none transition-shadow duration-200 hover:shadow-md focus-visible:shadow-md focus-visible:ring-[1.5px] focus-visible:ring-ring"
-					>
-						<NavigationMenuItemLabel class="mb-2 mt-4 text-lg font-medium">
-							shadcn-solid
-						</NavigationMenuItemLabel>
-						<NavigationMenuDescription class="text-sm leading-tight text-muted-foreground">
-							Beautifully designed components built with your choice of UI and
-							CSS frameworks
-						</NavigationMenuDescription>
-					</NavigationMenuLink>
-					<ListItem href="/docs" title="Introduction">
-						Beautifully designed components built with your choice of UI and CSS
-						frameworks
-					</ListItem>
-					<ListItem href="/docs/installation" title="Installation">
-						How to install dependencies and structure your app.
-					</ListItem>
-					<ListItem href="/docs/components/typography" title="Typography">
-						Styles for headings, paragraphs, lists...etc.
-					</ListItem>
-				</NavigationMenuContent>
-			</NavigationMenuItem>
+  return (
+    <NavigationMenu>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger class="focus-visible:ring-ring data-[expanded]:bg-accent transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px]">
+          Learn
+        </NavigationMenuTrigger>
+        <NavigationMenuContent class="grid w-[400px] gap-3 p-4 lg:w-[500px] lg:grid-cols-[.75fr_1fr] [&>li:first-of-type]:row-span-3">
+          <NavigationMenuLink
+            href="/"
+            class="from-muted/50 to-muted focus-visible:ring-ring flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none transition-shadow duration-200 hover:shadow-md focus-visible:shadow-md focus-visible:ring-[1.5px]"
+          >
+            <NavigationMenuItemLabel class="mb-2 mt-4 text-lg font-medium">
+              shadcn-solid
+            </NavigationMenuItemLabel>
+            <NavigationMenuDescription class="text-muted-foreground text-sm leading-tight">
+              Beautifully designed components built with your choice of UI and
+              CSS frameworks
+            </NavigationMenuDescription>
+          </NavigationMenuLink>
+          <ListItem href="/docs" title="Introduction">
+            Beautifully designed components built with your choice of UI and CSS
+            frameworks
+          </ListItem>
+          <ListItem href="/docs/installation" title="Installation">
+            How to install dependencies and structure your app.
+          </ListItem>
+          <ListItem href="/docs/components/typography" title="Typography">
+            Styles for headings, paragraphs, lists...etc.
+          </ListItem>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
 
-			<NavigationMenuItem>
-				<NavigationMenuTrigger class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-1.5px focus-visible:ring-ring data-[expanded]:bg-accent">
-					Overview
-				</NavigationMenuTrigger>
-				<NavigationMenuContent class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-					<For each={components}>
-						{(item) => (
-							<ListItem href={item.href} title={item.title}>
-								{item.description}
-							</ListItem>
-						)}
-					</For>
-				</NavigationMenuContent>
-			</NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger class="focus-visible:ring-1.5px focus-visible:ring-ring data-[expanded]:bg-accent transition-[box-shadow,background-color] focus-visible:outline-none">
+          Overview
+        </NavigationMenuTrigger>
+        <NavigationMenuContent class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+          <For each={components}>
+            {(item) => (
+              <ListItem href={item.href} title={item.title}>
+                {item.description}
+              </ListItem>
+            )}
+          </For>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
 
-			<NavigationMenuTrigger
-				as="a"
-				href="/docs"
-				class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:bg-accent"
-			>
-				Documentation
-			</NavigationMenuTrigger>
-		</NavigationMenu>
-	);
-};
+      <NavigationMenuTrigger
+        as="a"
+        href="/docs"
+        class="focus-visible:ring-ring data-[expanded]:bg-accent transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px]"
+      >
+        Documentation
+      </NavigationMenuTrigger>
+    </NavigationMenu>
+  )
+}
 
-export default NavigationMenuDemo;
+export default NavigationMenuDemo
diff --git a/packages/unocss/dev/routes/_components/number-field-demo.tsx b/packages/unocss/dev/routes/_components/number-field-demo.tsx
index 49b79357..33cd5d1b 100644
--- a/packages/unocss/dev/routes/_components/number-field-demo.tsx
+++ b/packages/unocss/dev/routes/_components/number-field-demo.tsx
@@ -1,26 +1,26 @@
 import {
-	NumberField,
-	NumberFieldDecrementTrigger,
-	NumberFieldGroup,
-	NumberFieldIncrementTrigger,
-	NumberFieldInput,
-	NumberFieldLabel,
-} from "@/components/ui/number-field";
+  NumberField,
+  NumberFieldDecrementTrigger,
+  NumberFieldGroup,
+  NumberFieldIncrementTrigger,
+  NumberFieldInput,
+  NumberFieldLabel,
+} from "@/components/ui/number-field"
 
 const NumberFieldDemo = () => {
-	const thisYear = () => new Date(Date.now()).getUTCFullYear();
-	const age = () => thisYear() - 2001;
+  const thisYear = () => new Date(Date.now()).getUTCFullYear()
+  const age = () => thisYear() - 2001
 
-	return (
-		<NumberField defaultValue={age()} minValue={0}>
-			<NumberFieldLabel>Age</NumberFieldLabel>
-			<NumberFieldGroup>
-				<NumberFieldDecrementTrigger aria-label="Decrement" />
-				<NumberFieldInput />
-				<NumberFieldIncrementTrigger aria-label="Increment" />
-			</NumberFieldGroup>
-		</NumberField>
-	);
-};
+  return (
+    <NumberField defaultValue={age()} minValue={0}>
+      <NumberFieldLabel>Age</NumberFieldLabel>
+      <NumberFieldGroup>
+        <NumberFieldDecrementTrigger aria-label="Decrement" />
+        <NumberFieldInput />
+        <NumberFieldIncrementTrigger aria-label="Increment" />
+      </NumberFieldGroup>
+    </NumberField>
+  )
+}
 
-export default NumberFieldDemo;
+export default NumberFieldDemo
diff --git a/packages/unocss/dev/routes/_components/otp-field-demo.tsx b/packages/unocss/dev/routes/_components/otp-field-demo.tsx
index 618957b8..0c8705e1 100644
--- a/packages/unocss/dev/routes/_components/otp-field-demo.tsx
+++ b/packages/unocss/dev/routes/_components/otp-field-demo.tsx
@@ -1,28 +1,28 @@
 import {
-	OTPField,
-	OTPFieldGroup,
-	OTPFieldInput,
-	OTPFieldSeparator,
-	OTPFieldSlot,
-} from "@/components/ui/otp-field";
+  OTPField,
+  OTPFieldGroup,
+  OTPFieldInput,
+  OTPFieldSeparator,
+  OTPFieldSlot,
+} from "@/components/ui/otp-field"
 
 const OtpFieldDemo = () => {
-	return (
-		<OTPField maxLength={6}>
-			<OTPFieldInput />
-			<OTPFieldGroup>
-				<OTPFieldSlot index={0} />
-				<OTPFieldSlot index={1} />
-				<OTPFieldSlot index={2} />
-			</OTPFieldGroup>
-			<OTPFieldSeparator />
-			<OTPFieldGroup>
-				<OTPFieldSlot index={3} />
-				<OTPFieldSlot index={4} />
-				<OTPFieldSlot index={5} />
-			</OTPFieldGroup>
-		</OTPField>
-	);
-};
+  return (
+    <OTPField maxLength={6}>
+      <OTPFieldInput />
+      <OTPFieldGroup>
+        <OTPFieldSlot index={0} />
+        <OTPFieldSlot index={1} />
+        <OTPFieldSlot index={2} />
+      </OTPFieldGroup>
+      <OTPFieldSeparator />
+      <OTPFieldGroup>
+        <OTPFieldSlot index={3} />
+        <OTPFieldSlot index={4} />
+        <OTPFieldSlot index={5} />
+      </OTPFieldGroup>
+    </OTPField>
+  )
+}
 
-export default OtpFieldDemo;
+export default OtpFieldDemo
diff --git a/packages/unocss/dev/routes/_components/otp-field-with-controlled-demo.tsx b/packages/unocss/dev/routes/_components/otp-field-with-controlled-demo.tsx
index 896ab26e..87fcce5c 100644
--- a/packages/unocss/dev/routes/_components/otp-field-with-controlled-demo.tsx
+++ b/packages/unocss/dev/routes/_components/otp-field-with-controlled-demo.tsx
@@ -1,34 +1,35 @@
+import { Show, createSignal } from "solid-js"
+
 import {
-	OTPField,
-	OTPFieldGroup,
-	OTPFieldInput,
-	OTPFieldSlot,
-} from "@/components/ui/otp-field";
-import { Show, createSignal } from "solid-js";
+  OTPField,
+  OTPFieldGroup,
+  OTPFieldInput,
+  OTPFieldSlot,
+} from "@/components/ui/otp-field"
 
 const OtpFieldWithControlledDemo = () => {
-	const [value, setValue] = createSignal<string>();
+  const [value, setValue] = createSignal<string>()
 
-	return (
-		<div class="flex flex-col items-center gap-2">
-			<OTPField maxLength={6} value={value()} onValueChange={setValue}>
-				<OTPFieldInput />
-				<OTPFieldGroup>
-					<OTPFieldSlot index={0} />
-					<OTPFieldSlot index={1} />
-					<OTPFieldSlot index={2} />
-					<OTPFieldSlot index={3} />
-					<OTPFieldSlot index={4} />
-					<OTPFieldSlot index={5} />
-				</OTPFieldGroup>
-			</OTPField>
-			<span class="text-center text-sm">
-				<Show fallback="Enter your one-time password." when={value()}>
-					You entered: {value()}
-				</Show>
-			</span>
-		</div>
-	);
-};
+  return (
+    <div class="flex flex-col items-center gap-2">
+      <OTPField maxLength={6} value={value()} onValueChange={setValue}>
+        <OTPFieldInput />
+        <OTPFieldGroup>
+          <OTPFieldSlot index={0} />
+          <OTPFieldSlot index={1} />
+          <OTPFieldSlot index={2} />
+          <OTPFieldSlot index={3} />
+          <OTPFieldSlot index={4} />
+          <OTPFieldSlot index={5} />
+        </OTPFieldGroup>
+      </OTPField>
+      <span class="text-center text-sm">
+        <Show fallback="Enter your one-time password." when={value()}>
+          You entered: {value()}
+        </Show>
+      </span>
+    </div>
+  )
+}
 
-export default OtpFieldWithControlledDemo;
+export default OtpFieldWithControlledDemo
diff --git a/packages/unocss/dev/routes/_components/otp-field-with-pattern-demo.tsx b/packages/unocss/dev/routes/_components/otp-field-with-pattern-demo.tsx
index b70cda8d..04c7ad68 100644
--- a/packages/unocss/dev/routes/_components/otp-field-with-pattern-demo.tsx
+++ b/packages/unocss/dev/routes/_components/otp-field-with-pattern-demo.tsx
@@ -1,24 +1,24 @@
 import {
-	OTPField,
-	OTPFieldGroup,
-	OTPFieldInput,
-	OTPFieldSlot,
-} from "@/components/ui/otp-field";
+  OTPField,
+  OTPFieldGroup,
+  OTPFieldInput,
+  OTPFieldSlot,
+} from "@/components/ui/otp-field"
 
 const OTPFieldWithPatternDemo = () => {
-	return (
-		<OTPField maxLength={6}>
-			<OTPFieldInput pattern="^[a-zA-Z0-9]*$" />
-			<OTPFieldGroup>
-				<OTPFieldSlot index={0} />
-				<OTPFieldSlot index={1} />
-				<OTPFieldSlot index={2} />
-				<OTPFieldSlot index={3} />
-				<OTPFieldSlot index={4} />
-				<OTPFieldSlot index={5} />
-			</OTPFieldGroup>
-		</OTPField>
-	);
-};
+  return (
+    <OTPField maxLength={6}>
+      <OTPFieldInput pattern="^[a-zA-Z0-9]*$" />
+      <OTPFieldGroup>
+        <OTPFieldSlot index={0} />
+        <OTPFieldSlot index={1} />
+        <OTPFieldSlot index={2} />
+        <OTPFieldSlot index={3} />
+        <OTPFieldSlot index={4} />
+        <OTPFieldSlot index={5} />
+      </OTPFieldGroup>
+    </OTPField>
+  )
+}
 
-export default OTPFieldWithPatternDemo;
+export default OTPFieldWithPatternDemo
diff --git a/packages/unocss/dev/routes/_components/pagination-demo.tsx b/packages/unocss/dev/routes/_components/pagination-demo.tsx
index 043508fe..d2f9f912 100644
--- a/packages/unocss/dev/routes/_components/pagination-demo.tsx
+++ b/packages/unocss/dev/routes/_components/pagination-demo.tsx
@@ -1,27 +1,27 @@
 import {
-	Pagination,
-	PaginationEllipsis,
-	PaginationItem,
-	PaginationItems,
-	PaginationNext,
-	PaginationPrevious,
-} from "@/components/ui/pagination";
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationItems,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
 
 const PaginationDemo = () => {
-	return (
-		<Pagination
-			fixedItems
-			count={10}
-			itemComponent={(props) => (
-				<PaginationItem page={props.page}>{props.page}</PaginationItem>
-			)}
-			ellipsisComponent={() => <PaginationEllipsis />}
-		>
-			<PaginationPrevious />
-			<PaginationItems />
-			<PaginationNext />
-		</Pagination>
-	);
-};
+  return (
+    <Pagination
+      fixedItems
+      count={10}
+      itemComponent={(props) => (
+        <PaginationItem page={props.page}>{props.page}</PaginationItem>
+      )}
+      ellipsisComponent={() => <PaginationEllipsis />}
+    >
+      <PaginationPrevious />
+      <PaginationItems />
+      <PaginationNext />
+    </Pagination>
+  )
+}
 
-export default PaginationDemo;
+export default PaginationDemo
diff --git a/packages/unocss/dev/routes/_components/popover-demo.tsx b/packages/unocss/dev/routes/_components/popover-demo.tsx
index 395060d8..daed419d 100644
--- a/packages/unocss/dev/routes/_components/popover-demo.tsx
+++ b/packages/unocss/dev/routes/_components/popover-demo.tsx
@@ -1,58 +1,59 @@
-import { Button } from "@/components/ui/button";
+import type { PopoverTriggerProps } from "@kobalte/core/popover"
+
+import { Button } from "@/components/ui/button"
 import {
-	Popover,
-	PopoverContent,
-	PopoverDescription,
-	PopoverTitle,
-	PopoverTrigger,
-} from "@/components/ui/popover";
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/components/ui/popover"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/components/ui/textfield";
-import type { PopoverTriggerProps } from "@kobalte/core/popover";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/components/ui/textfield"
 
 const PopoverDemo = () => {
-	return (
-		<Popover>
-			<PopoverTrigger
-				as={(props: PopoverTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Open popover
-					</Button>
-				)}
-			/>
-			<PopoverContent class="w-80">
-				<div class="grid gap-4">
-					<PopoverTitle class="space-y-2">
-						<h4 class="font-medium leading-none">Dimensions</h4>
-						<p class="text-sm text-muted-foreground">
-							Set the dimensions for the layer.
-						</p>
-					</PopoverTitle>
-					<PopoverDescription class="grid gap-2">
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Width</TextFieldLabel>
-							<TextField value="100%" class="col-span-2 h-8" />
-						</TextFieldRoot>
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Max. width</TextFieldLabel>
-							<TextField value="300px" class="col-span-2 h-8" />
-						</TextFieldRoot>
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Height</TextFieldLabel>
-							<TextField value="25px" class="col-span-2 h-8" />
-						</TextFieldRoot>
-						<TextFieldRoot class="grid grid-cols-3 items-center gap-4">
-							<TextFieldLabel class="text-right">Max. height</TextFieldLabel>
-							<TextField value="none" class="col-span-2 h-8" />
-						</TextFieldRoot>
-					</PopoverDescription>
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-};
+  return (
+    <Popover>
+      <PopoverTrigger
+        as={(props: PopoverTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Open popover
+          </Button>
+        )}
+      />
+      <PopoverContent class="w-80">
+        <div class="grid gap-4">
+          <PopoverTitle class="space-y-2">
+            <h4 class="font-medium leading-none">Dimensions</h4>
+            <p class="text-muted-foreground text-sm">
+              Set the dimensions for the layer.
+            </p>
+          </PopoverTitle>
+          <PopoverDescription class="grid gap-2">
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Width</TextFieldLabel>
+              <TextField value="100%" class="col-span-2 h-8" />
+            </TextFieldRoot>
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Max. width</TextFieldLabel>
+              <TextField value="300px" class="col-span-2 h-8" />
+            </TextFieldRoot>
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Height</TextFieldLabel>
+              <TextField value="25px" class="col-span-2 h-8" />
+            </TextFieldRoot>
+            <TextFieldRoot class="grid grid-cols-3 items-center gap-4">
+              <TextFieldLabel class="text-right">Max. height</TextFieldLabel>
+              <TextField value="none" class="col-span-2 h-8" />
+            </TextFieldRoot>
+          </PopoverDescription>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
 
-export default PopoverDemo;
+export default PopoverDemo
diff --git a/packages/unocss/dev/routes/_components/progress-demo.tsx b/packages/unocss/dev/routes/_components/progress-demo.tsx
index ba115a1e..8d983ba9 100644
--- a/packages/unocss/dev/routes/_components/progress-demo.tsx
+++ b/packages/unocss/dev/routes/_components/progress-demo.tsx
@@ -1,7 +1,7 @@
-import { Progress } from "@/components/ui/progress";
+import { Progress } from "@/components/ui/progress"
 
 const ProgressDemo = () => {
-	return <Progress value={60} class="w-60%" />;
-};
+  return <Progress value={60} class="w-60%" />
+}
 
-export default ProgressDemo;
+export default ProgressDemo
diff --git a/packages/unocss/dev/routes/_components/radio-group-demo.tsx b/packages/unocss/dev/routes/_components/radio-group-demo.tsx
index b101d93d..168f93b3 100644
--- a/packages/unocss/dev/routes/_components/radio-group-demo.tsx
+++ b/packages/unocss/dev/routes/_components/radio-group-demo.tsx
@@ -1,24 +1,25 @@
+import { For } from "solid-js"
+
 import {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupItemControl,
-	RadioGroupItemLabel,
-} from "@/components/ui/radio-group";
-import { For } from "solid-js";
+  RadioGroup,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemLabel,
+} from "@/components/ui/radio-group"
 
 const RadioGroupDemo = () => {
-	return (
-		<RadioGroup defaultValue="Orange" class="grid gap-2">
-			<For each={["Apple", "Orange", "Watermelon"]}>
-				{(fruit) => (
-					<RadioGroupItem value={fruit} class="flex items-center gap-2">
-						<RadioGroupItemControl />
-						<RadioGroupItemLabel class="text-sm">{fruit}</RadioGroupItemLabel>
-					</RadioGroupItem>
-				)}
-			</For>
-		</RadioGroup>
-	);
-};
+  return (
+    <RadioGroup defaultValue="Orange" class="grid gap-2">
+      <For each={["Apple", "Orange", "Watermelon"]}>
+        {(fruit) => (
+          <RadioGroupItem value={fruit} class="flex items-center gap-2">
+            <RadioGroupItemControl />
+            <RadioGroupItemLabel class="text-sm">{fruit}</RadioGroupItemLabel>
+          </RadioGroupItem>
+        )}
+      </For>
+    </RadioGroup>
+  )
+}
 
-export default RadioGroupDemo;
+export default RadioGroupDemo
diff --git a/packages/unocss/dev/routes/_components/resizable-demo.tsx b/packages/unocss/dev/routes/_components/resizable-demo.tsx
index 3b982e6a..9f964da9 100644
--- a/packages/unocss/dev/routes/_components/resizable-demo.tsx
+++ b/packages/unocss/dev/routes/_components/resizable-demo.tsx
@@ -1,35 +1,35 @@
 import {
-	Resizable,
-	ResizableHandle,
-	ResizablePanel,
-} from "@/components/ui/resizable";
+  Resizable,
+  ResizableHandle,
+  ResizablePanel,
+} from "@/components/ui/resizable"
 
 const ResizableDemo = () => {
-	return (
-		<Resizable class="max-w-md rounded-lg border">
-			<ResizablePanel initialSize={0.3} minSize={0.2}>
-				<div class="flex h-[200px] items-center justify-center">
-					<span class="font-semibold">A</span>
-				</div>
-			</ResizablePanel>
-			<ResizableHandle />
-			<ResizablePanel initialSize={0.7} minSize={0.2}>
-				<Resizable orientation="vertical">
-					<ResizablePanel initialSize={0.5} minSize={0.2}>
-						<div class="flex h-full items-center justify-center">
-							<span class="font-semibold">B</span>
-						</div>
-					</ResizablePanel>
-					<ResizableHandle />
-					<ResizablePanel initialSize={0.5} minSize={0.2}>
-						<div class="flex h-full items-center justify-center">
-							<span class="font-semibold">C</span>
-						</div>
-					</ResizablePanel>
-				</Resizable>
-			</ResizablePanel>
-		</Resizable>
-	);
-};
+  return (
+    <Resizable class="max-w-md rounded-lg border">
+      <ResizablePanel initialSize={0.3} minSize={0.2}>
+        <div class="flex h-[200px] items-center justify-center">
+          <span class="font-semibold">A</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel initialSize={0.7} minSize={0.2}>
+        <Resizable orientation="vertical">
+          <ResizablePanel initialSize={0.5} minSize={0.2}>
+            <div class="flex h-full items-center justify-center">
+              <span class="font-semibold">B</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel initialSize={0.5} minSize={0.2}>
+            <div class="flex h-full items-center justify-center">
+              <span class="font-semibold">C</span>
+            </div>
+          </ResizablePanel>
+        </Resizable>
+      </ResizablePanel>
+    </Resizable>
+  )
+}
 
-export default ResizableDemo;
+export default ResizableDemo
diff --git a/packages/unocss/dev/routes/_components/select-demo.tsx b/packages/unocss/dev/routes/_components/select-demo.tsx
index 21c82f18..14ddb359 100644
--- a/packages/unocss/dev/routes/_components/select-demo.tsx
+++ b/packages/unocss/dev/routes/_components/select-demo.tsx
@@ -1,26 +1,26 @@
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 
 const SelectDemo = () => {
-	return (
-		<Select
-			options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
-			placeholder="Select a fruit…"
-			itemComponent={(props) => (
-				<SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
-			)}
-		>
-			<SelectTrigger class="w-[180px]">
-				<SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
-			</SelectTrigger>
-			<SelectContent />
-		</Select>
-	);
-};
+  return (
+    <Select
+      options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
+      placeholder="Select a fruit…"
+      itemComponent={(props) => (
+        <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+      )}
+    >
+      <SelectTrigger class="w-[180px]">
+        <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+      </SelectTrigger>
+      <SelectContent />
+    </Select>
+  )
+}
 
-export default SelectDemo;
+export default SelectDemo
diff --git a/packages/unocss/dev/routes/_components/separator-demo.tsx b/packages/unocss/dev/routes/_components/separator-demo.tsx
index 1745f584..afbc3581 100644
--- a/packages/unocss/dev/routes/_components/separator-demo.tsx
+++ b/packages/unocss/dev/routes/_components/separator-demo.tsx
@@ -1,24 +1,24 @@
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@/components/ui/separator"
 
 const SeparatorDemo = () => {
-	return (
-		<div>
-			<div class="space-y-1">
-				<h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
-				<p class="text-sm text-muted-foreground">
-					An open-source UI component library.
-				</p>
-			</div>
-			<Separator class="my-4" />
-			<div class="flex h-5 items-center space-x-4 text-sm">
-				<div>Docs</div>
-				<Separator orientation="vertical" />
-				<div>Source</div>
-				<Separator orientation="vertical" />
-				<div>Changelog</div>
-			</div>
-		</div>
-	);
-};
+  return (
+    <div>
+      <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
+        <p class="text-muted-foreground text-sm">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator class="my-4" />
+      <div class="flex h-5 items-center space-x-4 text-sm">
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+        <Separator orientation="vertical" />
+        <div>Changelog</div>
+      </div>
+    </div>
+  )
+}
 
-export default SeparatorDemo;
+export default SeparatorDemo
diff --git a/packages/unocss/dev/routes/_components/skeleton-demo.tsx b/packages/unocss/dev/routes/_components/skeleton-demo.tsx
index bdb1f49a..8376f84a 100644
--- a/packages/unocss/dev/routes/_components/skeleton-demo.tsx
+++ b/packages/unocss/dev/routes/_components/skeleton-demo.tsx
@@ -1,15 +1,15 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton"
 
 const SkeletonDemo = () => {
-	return (
-		<div class="flex items-center space-x-4">
-			<Skeleton class="h-12 w-12 rounded-full" />
-			<div class="space-y-2">
-				<Skeleton class="h-4 w-[250px]" />
-				<Skeleton class="h-4 w-[200px]" />
-			</div>
-		</div>
-	);
-};
+  return (
+    <div class="flex items-center space-x-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-[250px]" />
+        <Skeleton class="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
 
-export default SkeletonDemo;
+export default SkeletonDemo
diff --git a/packages/unocss/dev/routes/_components/sonner-demo.tsx b/packages/unocss/dev/routes/_components/sonner-demo.tsx
index 07a44034..4c48b34f 100644
--- a/packages/unocss/dev/routes/_components/sonner-demo.tsx
+++ b/packages/unocss/dev/routes/_components/sonner-demo.tsx
@@ -1,23 +1,24 @@
-import { Button } from "@/components/ui/button";
-import { toast } from "somoto";
+import { toast } from "somoto"
+
+import { Button } from "@/components/ui/button"
 
 const SonnerDemo = () => {
-	return (
-		<Button
-			variant="outline"
-			onClick={() =>
-				toast("Event has been created", {
-					description: "Sunday, December 03, 2023 at 9:00 AM",
-					action: {
-						label: "Undo",
-						onClick: () => console.log("Undo"),
-					},
-				})
-			}
-		>
-			Show Toast
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
 
-export default SonnerDemo;
+export default SonnerDemo
diff --git a/packages/unocss/dev/routes/_components/switch-demo.tsx b/packages/unocss/dev/routes/_components/switch-demo.tsx
index 1d6a8d0a..dd2d1350 100644
--- a/packages/unocss/dev/routes/_components/switch-demo.tsx
+++ b/packages/unocss/dev/routes/_components/switch-demo.tsx
@@ -1,21 +1,21 @@
 import {
-	Switch,
-	SwitchControl,
-	SwitchLabel,
-	SwitchThumb,
-} from "@/components/ui/switch";
+  Switch,
+  SwitchControl,
+  SwitchLabel,
+  SwitchThumb,
+} from "@/components/ui/switch"
 
 const SwitchDemo = () => {
-	return (
-		<Switch class="flex items-center space-x-2">
-			<SwitchControl>
-				<SwitchThumb />
-			</SwitchControl>
-			<SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
-				Airplane Mode
-			</SwitchLabel>
-		</Switch>
-	);
-};
+  return (
+    <Switch class="flex items-center space-x-2">
+      <SwitchControl>
+        <SwitchThumb />
+      </SwitchControl>
+      <SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
+        Airplane Mode
+      </SwitchLabel>
+    </Switch>
+  )
+}
 
-export default SwitchDemo;
+export default SwitchDemo
diff --git a/packages/unocss/dev/routes/_components/table-demo.tsx b/packages/unocss/dev/routes/_components/table-demo.tsx
index cc798cc4..29562485 100644
--- a/packages/unocss/dev/routes/_components/table-demo.tsx
+++ b/packages/unocss/dev/routes/_components/table-demo.tsx
@@ -1,85 +1,86 @@
+import { For } from "solid-js"
+
 import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import { For } from "solid-js";
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
 
 const invoices = [
-	{
-		invoice: "INV001",
-		paymentStatus: "Paid",
-		totalAmount: "$250.00",
-		paymentMethod: "Credit Card",
-	},
-	{
-		invoice: "INV002",
-		paymentStatus: "Pending",
-		totalAmount: "$150.00",
-		paymentMethod: "PayPal",
-	},
-	{
-		invoice: "INV003",
-		paymentStatus: "Unpaid",
-		totalAmount: "$350.00",
-		paymentMethod: "Bank Transfer",
-	},
-	{
-		invoice: "INV004",
-		paymentStatus: "Paid",
-		totalAmount: "$450.00",
-		paymentMethod: "Credit Card",
-	},
-	{
-		invoice: "INV005",
-		paymentStatus: "Paid",
-		totalAmount: "$550.00",
-		paymentMethod: "PayPal",
-	},
-	{
-		invoice: "INV006",
-		paymentStatus: "Pending",
-		totalAmount: "$200.00",
-		paymentMethod: "Bank Transfer",
-	},
-	{
-		invoice: "INV007",
-		paymentStatus: "Unpaid",
-		totalAmount: "$300.00",
-		paymentMethod: "Credit Card",
-	},
-];
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
 
 const TableDemo = () => {
-	return (
-		<Table>
-			<TableCaption>A list of your recent invoices.</TableCaption>
-			<TableHeader>
-				<TableRow>
-					<TableHead class="w-[100px]">Invoice</TableHead>
-					<TableHead>Status</TableHead>
-					<TableHead>Method</TableHead>
-					<TableHead class="text-right">Amount</TableHead>
-				</TableRow>
-			</TableHeader>
-			<TableBody>
-				<For each={invoices}>
-					{(invoice) => (
-						<TableRow>
-							<TableCell class="font-medium">{invoice.invoice}</TableCell>
-							<TableCell>{invoice.paymentStatus}</TableCell>
-							<TableCell>{invoice.paymentMethod}</TableCell>
-							<TableCell class="text-right">{invoice.totalAmount}</TableCell>
-						</TableRow>
-					)}
-				</For>
-			</TableBody>
-		</Table>
-	);
-};
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead class="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <For each={invoices}>
+          {(invoice) => (
+            <TableRow>
+              <TableCell class="font-medium">{invoice.invoice}</TableCell>
+              <TableCell>{invoice.paymentStatus}</TableCell>
+              <TableCell>{invoice.paymentMethod}</TableCell>
+              <TableCell class="text-right">{invoice.totalAmount}</TableCell>
+            </TableRow>
+          )}
+        </For>
+      </TableBody>
+    </Table>
+  )
+}
 
-export default TableDemo;
+export default TableDemo
diff --git a/packages/unocss/dev/routes/_components/tabs-demo.tsx b/packages/unocss/dev/routes/_components/tabs-demo.tsx
index 2ab20473..cfc15cba 100644
--- a/packages/unocss/dev/routes/_components/tabs-demo.tsx
+++ b/packages/unocss/dev/routes/_components/tabs-demo.tsx
@@ -1,81 +1,81 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
 import {
-	Tabs,
-	TabsContent,
-	TabsIndicator,
-	TabsList,
-	TabsTrigger,
-} from "@/components/ui/tabs";
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
 import {
-	TextField,
-	TextFieldLabel,
-	TextFieldRoot,
-} from "@/components/ui/textfield";
+  TextField,
+  TextFieldLabel,
+  TextFieldRoot,
+} from "@/components/ui/textfield"
 
 const TabsDemo = () => {
-	return (
-		<Tabs defaultValue="account" class="w-[400px]">
-			<TabsList>
-				<TabsTrigger value="account">Account</TabsTrigger>
-				<TabsTrigger value="password">Password</TabsTrigger>
-				<TabsIndicator />
-			</TabsList>
-			<TabsContent value="account">
-				<Card>
-					<CardHeader>
-						<CardTitle>Account</CardTitle>
-						<CardDescription>
-							Make changes to your account here. Click save when you're done.
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="space-y-2">
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Name</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Username</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-					</CardContent>
-					<CardFooter>
-						<Button>Save changes</Button>
-					</CardFooter>
-				</Card>
-			</TabsContent>
-			<TabsContent value="password">
-				<Card>
-					<CardHeader>
-						<CardTitle>Password</CardTitle>
-						<CardDescription>
-							Change your password here. After saving, you'll be logged out.
-						</CardDescription>
-					</CardHeader>
-					<CardContent class="space-y-2">
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>Current password</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-						<TextFieldRoot class="space-y-1">
-							<TextFieldLabel>New password</TextFieldLabel>
-							<TextField />
-						</TextFieldRoot>
-					</CardContent>
-					<CardFooter>
-						<Button>Save password</Button>
-					</CardFooter>
-				</Card>
-			</TabsContent>
-		</Tabs>
-	);
-};
+  return (
+    <Tabs defaultValue="account" class="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsIndicator />
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Name</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Username</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>Current password</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+            <TextFieldRoot class="space-y-1">
+              <TextFieldLabel>New password</TextFieldLabel>
+              <TextField />
+            </TextFieldRoot>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
 
-export default TabsDemo;
+export default TabsDemo
diff --git a/packages/unocss/dev/routes/_components/team-switcher.tsx b/packages/unocss/dev/routes/_components/team-switcher.tsx
index 2154bbc0..9484ef20 100644
--- a/packages/unocss/dev/routes/_components/team-switcher.tsx
+++ b/packages/unocss/dev/routes/_components/team-switcher.tsx
@@ -1,118 +1,119 @@
+import { For, createSignal, type Accessor, type JSX } from "solid-js"
+import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu"
+
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuGroupLabel,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSideBar,
-} from "@/components/ui/sidebar";
-import type { DropdownMenuTriggerProps } from "@kobalte/core/dropdown-menu";
-import { type Accessor, For, type JSX, createSignal } from "solid-js";
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSideBar,
+} from "@/components/ui/sidebar"
 
 const TeamSwitcher = (props: {
-	teams: {
-		name: string;
-		logo: Accessor<JSX.Element>;
-		plan: string;
-	}[];
+  teams: {
+    name: string
+    logo: Accessor<JSX.Element>
+    plan: string
+  }[]
 }) => {
-	const [activeTeam, setActiveTeam] = createSignal(props.teams[0]);
-	const { isMobile } = useSideBar();
+  const [activeTeam, setActiveTeam] = createSignal(props.teams[0])
+  const { isMobile } = useSideBar()
 
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu
-					placement={isMobile() ? "bottom-end" : "right-start"}
-					sameWidth
-				>
-					<DropdownMenuTrigger
-						as={(props: DropdownMenuTriggerProps) => (
-							// @ts-expect-error
-							<SidebarMenuButton
-								{...props}
-								size="lg"
-								class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
-							>
-								<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-									{activeTeam().logo()}
-								</div>
-								<div class="grid flex-1 text-left text-sm leading-tight">
-									<span class="truncate font-semibold">
-										{activeTeam().name}
-									</span>
-									<span class="truncate text-xs">{activeTeam().plan}</span>
-								</div>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="ml-auto size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="m7 15l5 5l5-5M7 9l5-5l5 5"
-									/>
-								</svg>
-							</SidebarMenuButton>
-						)}
-					/>
-					<DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
-						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel class="text-xs text-muted-foreground">
-								Teams
-							</DropdownMenuGroupLabel>
-							<For each={props.teams}>
-								{(team, index) => (
-									<DropdownMenuItem
-										onClick={() => setActiveTeam(team)}
-										class="gap-2 p-2"
-									>
-										<div class="flex size-6 items-center justify-center rounded-sm border">
-											{team.logo()}
-										</div>
-										{team.name}
-										<DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
-									</DropdownMenuItem>
-								)}
-							</For>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem class="gap-2 p-2">
-							<div class="flex size-6 items-center justify-center rounded-md border bg-background">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="size-4"
-									viewBox="0 0 24 24"
-								>
-									<path
-										fill="none"
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 12h14m-7-7v14"
-									/>
-								</svg>
-							</div>
-							<div class="font-medium text-muted-foreground">Add team</div>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu
+          placement={isMobile() ? "bottom-end" : "right-start"}
+          sameWidth
+        >
+          <DropdownMenuTrigger
+            as={(props: DropdownMenuTriggerProps) => (
+              // @ts-expect-error
+              <SidebarMenuButton
+                {...props}
+                size="lg"
+                class="data-[expanded]:bg-sidebar-accent data-[expanded]:text-sidebar-accent-foreground"
+              >
+                <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  {activeTeam().logo()}
+                </div>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">
+                    {activeTeam().name}
+                  </span>
+                  <span class="truncate text-xs">{activeTeam().plan}</span>
+                </div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="ml-auto size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m7 15l5 5l5-5M7 9l5-5l5 5"
+                  />
+                </svg>
+              </SidebarMenuButton>
+            )}
+          />
+          <DropdownMenuContent class="w-[--kb-popper-anchor-width] min-w-56 rounded-lg">
+            <DropdownMenuGroup>
+              <DropdownMenuGroupLabel class="text-muted-foreground text-xs">
+                Teams
+              </DropdownMenuGroupLabel>
+              <For each={props.teams}>
+                {(team, index) => (
+                  <DropdownMenuItem
+                    onClick={() => setActiveTeam(team)}
+                    class="gap-2 p-2"
+                  >
+                    <div class="flex size-6 items-center justify-center rounded-sm border">
+                      {team.logo()}
+                    </div>
+                    {team.name}
+                    <DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                )}
+              </For>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem class="gap-2 p-2">
+              <div class="bg-background flex size-6 items-center justify-center rounded-md border">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 12h14m-7-7v14"
+                  />
+                </svg>
+              </div>
+              <div class="text-muted-foreground font-medium">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
 
-export default TeamSwitcher;
+export default TeamSwitcher
diff --git a/packages/unocss/dev/routes/_components/textarea-demo.tsx b/packages/unocss/dev/routes/_components/textarea-demo.tsx
index 978fd704..aad8825f 100644
--- a/packages/unocss/dev/routes/_components/textarea-demo.tsx
+++ b/packages/unocss/dev/routes/_components/textarea-demo.tsx
@@ -1,12 +1,12 @@
-import { TextArea } from "@/components/ui/textarea";
-import { TextFieldRoot } from "@/components/ui/textfield";
+import { TextArea } from "@/components/ui/textarea"
+import { TextFieldRoot } from "@/components/ui/textfield"
 
 const TextareaDemo = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextArea placeholder="Type your message here." />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextArea placeholder="Type your message here." />
+    </TextFieldRoot>
+  )
+}
 
-export default TextareaDemo;
+export default TextareaDemo
diff --git a/packages/unocss/dev/routes/_components/textfield-demo.tsx b/packages/unocss/dev/routes/_components/textfield-demo.tsx
index 25d7eb64..0db22e8d 100644
--- a/packages/unocss/dev/routes/_components/textfield-demo.tsx
+++ b/packages/unocss/dev/routes/_components/textfield-demo.tsx
@@ -1,11 +1,11 @@
-import { TextField, TextFieldRoot } from "@/components/ui/textfield";
+import { TextField, TextFieldRoot } from "@/components/ui/textfield"
 
 const TextFieldDemo = () => {
-	return (
-		<TextFieldRoot class="w-full max-w-xs">
-			<TextField type="email" placeholder="Email" />
-		</TextFieldRoot>
-	);
-};
+  return (
+    <TextFieldRoot class="w-full max-w-xs">
+      <TextField type="email" placeholder="Email" />
+    </TextFieldRoot>
+  )
+}
 
-export default TextFieldDemo;
+export default TextFieldDemo
diff --git a/packages/unocss/dev/routes/_components/toast-demo.tsx b/packages/unocss/dev/routes/_components/toast-demo.tsx
index a1575319..eef1d371 100644
--- a/packages/unocss/dev/routes/_components/toast-demo.tsx
+++ b/packages/unocss/dev/routes/_components/toast-demo.tsx
@@ -1,33 +1,34 @@
-import { Button } from "@/components/ui/button";
+import { toaster } from "@kobalte/core"
+
+import { Button } from "@/components/ui/button"
 import {
-	Toast,
-	ToastContent,
-	ToastDescription,
-	ToastProgress,
-	ToastTitle,
-} from "@/components/ui/toast";
-import { toaster } from "@kobalte/core";
+  Toast,
+  ToastContent,
+  ToastDescription,
+  ToastProgress,
+  ToastTitle,
+} from "@/components/ui/toast"
 
 const ToastDemo = () => {
-	const showToast = () => {
-		toaster.show((props) => (
-			<Toast toastId={props.toastId}>
-				<ToastContent>
-					<ToastTitle>Scheduled: Catch up</ToastTitle>
-					<ToastDescription>
-						Friday, February 10, 2023 at 5:57 PM
-					</ToastDescription>
-				</ToastContent>
-				<ToastProgress />
-			</Toast>
-		));
-	};
+  const showToast = () => {
+    toaster.show((props) => (
+      <Toast toastId={props.toastId}>
+        <ToastContent>
+          <ToastTitle>Scheduled: Catch up</ToastTitle>
+          <ToastDescription>
+            Friday, February 10, 2023 at 5:57 PM
+          </ToastDescription>
+        </ToastContent>
+        <ToastProgress />
+      </Toast>
+    ))
+  }
 
-	return (
-		<Button variant="outline" onClick={showToast}>
-			Add to calendar
-		</Button>
-	);
-};
+  return (
+    <Button variant="outline" onClick={showToast}>
+      Add to calendar
+    </Button>
+  )
+}
 
-export default ToastDemo;
+export default ToastDemo
diff --git a/packages/unocss/dev/routes/_components/toggle-demo.tsx b/packages/unocss/dev/routes/_components/toggle-demo.tsx
index 0642038c..3029c111 100644
--- a/packages/unocss/dev/routes/_components/toggle-demo.tsx
+++ b/packages/unocss/dev/routes/_components/toggle-demo.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/components/ui/toggle";
+import { ToggleButton } from "@/components/ui/toggle"
 
 const ToggleDemo = () => {
-	return (
-		<ToggleButton aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleDemo;
+export default ToggleDemo
diff --git a/packages/unocss/dev/routes/_components/toggle-disabled.tsx b/packages/unocss/dev/routes/_components/toggle-disabled.tsx
index 79820f0c..0ed5307c 100644
--- a/packages/unocss/dev/routes/_components/toggle-disabled.tsx
+++ b/packages/unocss/dev/routes/_components/toggle-disabled.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/components/ui/toggle";
+import { ToggleButton } from "@/components/ui/toggle"
 
 const ToggleDisabled = () => {
-	return (
-		<ToggleButton disabled aria-label="Toggle underline">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton disabled aria-label="Toggle underline">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleDisabled;
+export default ToggleDisabled
diff --git a/packages/unocss/dev/routes/_components/toggle-group-demo.tsx b/packages/unocss/dev/routes/_components/toggle-group-demo.tsx
index 7cf1e17d..8a8481d0 100644
--- a/packages/unocss/dev/routes/_components/toggle-group-demo.tsx
+++ b/packages/unocss/dev/routes/_components/toggle-group-demo.tsx
@@ -1,58 +1,58 @@
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
 const ToggleGroupDemo = () => {
-	return (
-		<ToggleGroup multiple>
-			<ToggleGroupItem value="bold" aria-label="Toggle bold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="italic" aria-label="Toggle italic">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5h6M7 19h6m1-14l-4 14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
-					/>
-				</svg>
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-};
+  return (
+    <ToggleGroup multiple>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5h6M7 19h6m1-14l-4 14"
+          />
+        </svg>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
+          />
+        </svg>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
 
-export default ToggleGroupDemo;
+export default ToggleGroupDemo
diff --git a/packages/unocss/dev/routes/_components/toggle-outline.tsx b/packages/unocss/dev/routes/_components/toggle-outline.tsx
index 7aa142cf..d0324405 100644
--- a/packages/unocss/dev/routes/_components/toggle-outline.tsx
+++ b/packages/unocss/dev/routes/_components/toggle-outline.tsx
@@ -1,24 +1,24 @@
-import { ToggleButton } from "@/components/ui/toggle";
+import { ToggleButton } from "@/components/ui/toggle"
 
 const ToggleOutline = () => {
-	return (
-		<ToggleButton variant="outline" aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5h6M7 19h6m1-14l-4 14"
-				/>
-			</svg>
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton variant="outline" aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5h6M7 19h6m1-14l-4 14"
+        />
+      </svg>
+    </ToggleButton>
+  )
+}
 
-export default ToggleOutline;
+export default ToggleOutline
diff --git a/packages/unocss/dev/routes/_components/toggle-with-text.tsx b/packages/unocss/dev/routes/_components/toggle-with-text.tsx
index d3beef3a..5dae7f6e 100644
--- a/packages/unocss/dev/routes/_components/toggle-with-text.tsx
+++ b/packages/unocss/dev/routes/_components/toggle-with-text.tsx
@@ -1,25 +1,25 @@
-import { ToggleButton } from "@/components/ui/toggle";
+import { ToggleButton } from "@/components/ui/toggle"
 
 const ToggleWithText = () => {
-	return (
-		<ToggleButton aria-label="Toggle italic">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="mr-2 h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5h6M7 19h6m1-14l-4 14"
-				/>
-			</svg>
-			Italic
-		</ToggleButton>
-	);
-};
+  return (
+    <ToggleButton aria-label="Toggle italic">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="mr-2 h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M11 5h6M7 19h6m1-14l-4 14"
+        />
+      </svg>
+      Italic
+    </ToggleButton>
+  )
+}
 
-export default ToggleWithText;
+export default ToggleWithText
diff --git a/packages/unocss/dev/routes/_components/tooltip-demo.tsx b/packages/unocss/dev/routes/_components/tooltip-demo.tsx
index cd4ed85a..8608d6fd 100644
--- a/packages/unocss/dev/routes/_components/tooltip-demo.tsx
+++ b/packages/unocss/dev/routes/_components/tooltip-demo.tsx
@@ -1,26 +1,27 @@
-import { Button } from "@/components/ui/button";
+import type { TooltipTriggerProps } from "@kobalte/core/tooltip"
+
+import { Button } from "@/components/ui/button"
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import type { TooltipTriggerProps } from "@kobalte/core/tooltip";
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 const TooltipDemo = () => {
-	return (
-		<Tooltip>
-			<TooltipTrigger
-				as={(props: TooltipTriggerProps) => (
-					<Button variant="outline" {...props}>
-						Hover
-					</Button>
-				)}
-			/>
-			<TooltipContent>
-				<p>Add to library</p>
-			</TooltipContent>
-		</Tooltip>
-	);
-};
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        as={(props: TooltipTriggerProps) => (
+          <Button variant="outline" {...props}>
+            Hover
+          </Button>
+        )}
+      />
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
 
-export default TooltipDemo;
+export default TooltipDemo
diff --git a/packages/unocss/dev/routes/index.tsx b/packages/unocss/dev/routes/index.tsx
index 6c0fe8d2..dc0ba3ae 100644
--- a/packages/unocss/dev/routes/index.tsx
+++ b/packages/unocss/dev/routes/index.tsx
@@ -1,9 +1,9 @@
-import { clientOnly } from "@solidjs/start";
+import { clientOnly } from "@solidjs/start"
 
-const Page = clientOnly(() => import("./_components"));
+const Page = clientOnly(() => import("./_components"))
 
 const Home = () => {
-	return <Page />;
-};
+  return <Page />
+}
 
-export default Home;
+export default Home
diff --git a/packages/unocss/hooks/use-mobile.tsx b/packages/unocss/hooks/use-mobile.tsx
index 6f566688..24c3112f 100644
--- a/packages/unocss/hooks/use-mobile.tsx
+++ b/packages/unocss/hooks/use-mobile.tsx
@@ -1,23 +1,23 @@
-import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
 
 export const useIsMobile = () => {
-	const [isMobile, setIsMobile] = createSignal<boolean>();
+  const [isMobile, setIsMobile] = createSignal<boolean>()
 
-	const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-	const onChange = () => {
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-	};
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+  const onChange = () => {
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+  }
 
-	createEffect(() => {
-		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-	});
+  createEffect(() => {
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+  })
 
-	onCleanup(() => {
-		mql.removeEventListener("change", onChange);
-	});
+  onCleanup(() => {
+    mql.removeEventListener("change", onChange)
+  })
 
-	return isMobile as Accessor<boolean>;
-};
+  return isMobile as Accessor<boolean>
+}
diff --git a/packages/unocss/libs/call-handler.tsx b/packages/unocss/libs/call-handler.tsx
index 17dd453c..3d3269a3 100644
--- a/packages/unocss/libs/call-handler.tsx
+++ b/packages/unocss/libs/call-handler.tsx
@@ -1,28 +1,28 @@
 // https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/assertion.ts
 // https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/events.ts
 
-import type { JSX } from "solid-js";
+import type { JSX } from "solid-js"
 
 // Function assertions
 // biome-ignore lint/complexity/noBannedTypes:
 export function isFunction<T extends Function = Function>(
-	value: unknown,
+  value: unknown
 ): value is T {
-	return typeof value === "function";
+  return typeof value === "function"
 }
 
 /** Call a JSX.EventHandlerUnion with the event. */
 export const callHandler = <T, E extends Event>(
-	event: E & { currentTarget: T; target: Element },
-	handler: JSX.EventHandlerUnion<T, E> | undefined,
+  event: E & { currentTarget: T; target: Element },
+  handler: JSX.EventHandlerUnion<T, E> | undefined
 ) => {
-	if (handler) {
-		if (isFunction(handler)) {
-			handler(event);
-		} else {
-			handler[0](handler[1], event);
-		}
-	}
+  if (handler) {
+    if (isFunction(handler)) {
+      handler(event)
+    } else {
+      handler[0](handler[1], event)
+    }
+  }
 
-	return event?.defaultPrevented;
-};
+  return event?.defaultPrevented
+}
diff --git a/packages/unocss/libs/cn.ts b/packages/unocss/libs/cn.ts
index 4f31bb04..013cbc39 100644
--- a/packages/unocss/libs/cn.ts
+++ b/packages/unocss/libs/cn.ts
@@ -1,5 +1,4 @@
-import type { ClassValue } from "clsx";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
+import clsx, { type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
-export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));
+export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists))
diff --git a/packages/unocss/libs/combine-props.tsx b/packages/unocss/libs/combine-props.tsx
index ca1b3a56..a50e5335 100644
--- a/packages/unocss/libs/combine-props.tsx
+++ b/packages/unocss/libs/combine-props.tsx
@@ -1,8 +1,8 @@
 // https://github.com/solidjs-community/solid-primitives/blob/main/packages/props/src/combineProps.ts
 
-import type { JSX } from "solid-js";
+import type { JSX } from "solid-js"
 
-const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
+const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g
 
 /**
  * converts inline string styles to object form
@@ -11,13 +11,13 @@ const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
  * styles; // { margin: "24px", border: "1px solid #121212" }
  * */
 export function stringStyleToObject(style: string): JSX.CSSProperties {
-	const object: Record<string, string> = {};
-	let match: RegExpExecArray | null;
-	// biome-ignore lint/suspicious/noAssignInExpressions:
-	while ((match = extractCSSregex.exec(style))) {
-		object[match[1]!] = match[2]!;
-	}
-	return object;
+  const object: Record<string, string> = {}
+  let match: RegExpExecArray | null
+  // biome-ignore lint/suspicious/noAssignInExpressions:
+  while ((match = extractCSSregex.exec(style))) {
+    object[match[1]!] = match[2]!
+  }
+  return object
 }
 
 /**
@@ -29,29 +29,29 @@ export function stringStyleToObject(style: string): JSX.CSSProperties {
  * });
  * styles; // { margin: "2rem", border: "1px solid #121212", padding: "16px" }
  */
-export function combineStyle(a: string, b: string): string;
+export function combineStyle(a: string, b: string): string
 export function combineStyle(
-	a: JSX.CSSProperties | undefined,
-	b: JSX.CSSProperties | undefined,
-): JSX.CSSProperties;
+  a: JSX.CSSProperties | undefined,
+  b: JSX.CSSProperties | undefined
+): JSX.CSSProperties
 export function combineStyle(
-	a: JSX.CSSProperties | string | undefined,
-	b: JSX.CSSProperties | string | undefined,
-): JSX.CSSProperties;
+  a: JSX.CSSProperties | string | undefined,
+  b: JSX.CSSProperties | string | undefined
+): JSX.CSSProperties
 export function combineStyle(
-	a: JSX.CSSProperties | string | undefined,
-	b: JSX.CSSProperties | string | undefined,
+  a: JSX.CSSProperties | string | undefined,
+  b: JSX.CSSProperties | string | undefined
 ): JSX.CSSProperties | string {
-	let _a = a;
-	let _b = b;
+  let _a = a
+  let _b = b
 
-	if (typeof _a === "string") {
-		if (typeof _b === "string") return `${_a};${_b}`;
+  if (typeof _a === "string") {
+    if (typeof _b === "string") return `${_a};${_b}`
 
-		_a = stringStyleToObject(_a);
-	} else if (typeof _b === "string") {
-		_b = stringStyleToObject(_b);
-	}
+    _a = stringStyleToObject(_a)
+  } else if (typeof _b === "string") {
+    _b = stringStyleToObject(_b)
+  }
 
-	return { ..._a, ..._b };
+  return { ..._a, ..._b }
 }
diff --git a/packages/unocss/package.json b/packages/unocss/package.json
index 1642834b..5df3010b 100644
--- a/packages/unocss/package.json
+++ b/packages/unocss/package.json
@@ -1,40 +1,47 @@
 {
-	"name": "@repo/unocss",
-	"version": "0.0.1",
-	"exports": {
-		"./ui/*": "./ui/*.tsx",
-		"./examples/*": "./examples/*.tsx",
-		"./blocks/*": "./blocks/*.tsx",
-		"./libs/*": "./libs/*.tsx",
-		"./hooks/*": "./hooks/*.tsx"
-	},
-	"files": ["ui", "examples", "hooks", "libs", "blocks"],
-	"devDependencies": {
-		"@ark-ui/solid": "^4.5.1",
-		"@corvu/drawer": "^0.2.2",
-		"@corvu/otp-field": "^0.1.4",
-		"@corvu/resizable": "^0.2.3",
-		"@kobalte/core": "^0.13.7",
-		"@solidjs/router": "^0.15.0",
-		"@solidjs/start": "^1.0.10",
-		"@tanstack/solid-table": "^8.20.5",
-		"@unocss/reset": "^0.65.1",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"cmdk-solid": "^1.1.0",
-		"embla-carousel-autoplay": "8.5.1",
-		"embla-carousel-solid": "8.5.1",
-		"solid-js": "^1.9.3",
-		"somoto": "^0.0.2",
-		"tailwind-merge": "^2.5.5",
-		"unocss": "^0.65.1",
-		"unocss-preset-animations": "^1.1.0",
-		"vinxi": "^0.4.3"
-	},
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "vinxi dev --port 3001",
-		"check": "biome check --write --unsafe ui"
-	}
+  "name": "@repo/unocss",
+  "version": "0.0.1",
+  "exports": {
+    "./ui/*": "./ui/*.tsx",
+    "./examples/*": "./examples/*.tsx",
+    "./blocks/*": "./blocks/*.tsx",
+    "./libs/*": "./libs/*.tsx",
+    "./hooks/*": "./hooks/*.tsx"
+  },
+  "files": [
+    "ui",
+    "examples",
+    "hooks",
+    "libs",
+    "blocks"
+  ],
+  "devDependencies": {
+    "@ark-ui/solid": "^4.5.1",
+    "@corvu/drawer": "^0.2.2",
+    "@corvu/otp-field": "^0.1.4",
+    "@corvu/resizable": "^0.2.3",
+    "@kobalte/core": "^0.13.7",
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "^1.0.10",
+    "@tanstack/solid-table": "^8.20.5",
+    "@unocss/reset": "^0.65.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk-solid": "^1.1.0",
+    "embla-carousel-autoplay": "8.5.1",
+    "embla-carousel-solid": "8.5.1",
+    "solid-js": "^1.9.3",
+    "somoto": "^0.0.2",
+    "tailwind-merge": "^2.5.5",
+    "unocss": "^0.65.1",
+    "unocss-preset-animations": "^1.1.0",
+    "vinxi": "^0.4.3"
+  },
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev --port 3001",
+    "format": "prettier -w \"**/*.{ts,tsx}\"",
+    "ci:format": "prettier -c \"**/*.{ts,tsx}\""
+  }
 }
diff --git a/packages/unocss/ui/accordion.tsx b/packages/unocss/ui/accordion.tsx
index 937e9ed6..8de7450c 100644
--- a/packages/unocss/ui/accordion.tsx
+++ b/packages/unocss/ui/accordion.tsx
@@ -1,97 +1,98 @@
-import { cn } from "@/libs/cn";
-import type {
-	AccordionContentProps,
-	AccordionItemProps,
-	AccordionTriggerProps,
-} from "@kobalte/core/accordion";
-import { Accordion as AccordionPrimitive } from "@kobalte/core/accordion";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { type ParentProps, type ValidComponent, splitProps } from "solid-js";
+import { splitProps, type ParentProps, type ValidComponent } from "solid-js"
+import {
+  Accordion as AccordionPrimitive,
+  type AccordionContentProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+} from "@kobalte/core/accordion"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Accordion = AccordionPrimitive;
+import { cn } from "@/libs/cn"
+
+export const Accordion = AccordionPrimitive
 
 type accordionItemProps<T extends ValidComponent = "div"> =
-	AccordionItemProps<T> & {
-		class?: string;
-	};
+  AccordionItemProps<T> & {
+    class?: string
+  }
 
 export const AccordionItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, accordionItemProps<T>>,
+  props: PolymorphicProps<T, accordionItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as accordionItemProps, ["class"]);
+  const [local, rest] = splitProps(props as accordionItemProps, ["class"])
 
-	return (
-		<AccordionPrimitive.Item class={cn("border-b", local.class)} {...rest} />
-	);
-};
+  return (
+    <AccordionPrimitive.Item class={cn("border-b", local.class)} {...rest} />
+  )
+}
 
 type accordionTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	AccordionTriggerProps<T> & {
-		class?: string;
-	}
->;
+  AccordionTriggerProps<T> & {
+    class?: string
+  }
+>
 
 export const AccordionTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, accordionTriggerProps<T>>,
+  props: PolymorphicProps<T, accordionTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as accordionTriggerProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as accordionTriggerProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<AccordionPrimitive.Header class="flex" as="div">
-			<AccordionPrimitive.Trigger
-				class={cn(
-					"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-shadow hover:underline [&[data-expanded]>svg]:rotate-180 bg-inherit focus-visible:(outline-none ring-1.5 ring-ring)",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4 text-muted-foreground transition-transform duration-200"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m6 9l6 6l6-6"
-					/>
-					<title>Arrow</title>
-				</svg>
-			</AccordionPrimitive.Trigger>
-		</AccordionPrimitive.Header>
-	);
-};
+  return (
+    <AccordionPrimitive.Header class="flex" as="div">
+      <AccordionPrimitive.Trigger
+        class={cn(
+          "focus-visible:(outline-none ring-1.5 ring-ring) flex flex-1 items-center justify-between bg-inherit py-4 text-sm font-medium transition-shadow hover:underline [&[data-expanded]>svg]:rotate-180",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="text-muted-foreground h-4 w-4 transition-transform duration-200"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m6 9l6 6l6-6"
+          />
+          <title>Arrow</title>
+        </svg>
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
 
 type accordionContentProps<T extends ValidComponent = "div"> = ParentProps<
-	AccordionContentProps<T> & {
-		class?: string;
-	}
->;
+  AccordionContentProps<T> & {
+    class?: string
+  }
+>
 
 export const AccordionContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, accordionContentProps<T>>,
+  props: PolymorphicProps<T, accordionContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as accordionContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as accordionContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<AccordionPrimitive.Content
-			class={cn(
-				"animate-accordion-up overflow-hidden text-sm data-[expanded]:animate-accordion-down",
-				local.class,
-			)}
-			{...rest}
-		>
-			<div class="pb-4 pt-0">{local.children}</div>
-		</AccordionPrimitive.Content>
-	);
-};
+  return (
+    <AccordionPrimitive.Content
+      class={cn(
+        "animate-accordion-up data-[expanded]:animate-accordion-down overflow-hidden text-sm",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="pb-4 pt-0">{local.children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
diff --git a/packages/unocss/ui/alert-dialog.tsx b/packages/unocss/ui/alert-dialog.tsx
index 4d2c4386..4739e7ba 100644
--- a/packages/unocss/ui/alert-dialog.tsx
+++ b/packages/unocss/ui/alert-dialog.tsx
@@ -1,148 +1,154 @@
-import { cn } from "@/libs/cn";
-import type {
-	AlertDialogCloseButtonProps,
-	AlertDialogContentProps,
-	AlertDialogDescriptionProps,
-	AlertDialogTitleProps,
-} from "@kobalte/core/alert-dialog";
-import { AlertDialog as AlertDialogPrimitive } from "@kobalte/core/alert-dialog";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
-import { buttonVariants } from "./button";
-
-export const AlertDialog = AlertDialogPrimitive;
-export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+import {
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  AlertDialog as AlertDialogPrimitive,
+  type AlertDialogCloseButtonProps,
+  type AlertDialogContentProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogTitleProps,
+} from "@kobalte/core/alert-dialog"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/libs/cn"
+
+import { buttonVariants } from "./button"
+
+export const AlertDialog = AlertDialogPrimitive
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 type alertDialogContentProps<T extends ValidComponent = "div"> = ParentProps<
-	AlertDialogContentProps<T> & {
-		class?: string;
-	}
->;
+  AlertDialogContentProps<T> & {
+    class?: string
+  }
+>
 
 export const AlertDialogContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, alertDialogContentProps<T>>,
+  props: PolymorphicProps<T, alertDialogContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogContentProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<AlertDialogPrimitive.Portal>
-			<AlertDialogPrimitive.Overlay class="fixed inset-0 z-50 bg-background/80 data-[expanded]:(animate-in fade-in-0) data-[closed]:(animate-out fade-out-0)" />
-			<AlertDialogPrimitive.Content
-				class={cn(
-					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-48% duration-200) data-[closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-48% duration-200) sm:rounded-lg md:w-full",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</AlertDialogPrimitive.Content>
-		</AlertDialogPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogContentProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay class="bg-background/80 data-[expanded]:(animate-in fade-in-0) data-[closed]:(animate-out fade-out-0) fixed inset-0 z-50" />
+      <AlertDialogPrimitive.Content
+        class={cn(
+          "bg-background data-[expanded]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-48% duration-200) data-[closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-48% duration-200) fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>
+  )
+}
 
 export const AlertDialogHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"flex flex-col space-y-2 text-center sm:text-left",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const AlertDialogFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"flex flex-col-reverse sm:(flex-row justify-end space-x-2)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "sm:(flex-row space-x-2) flex flex-col-reverse justify-end",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type alertDialogTitleProps<T extends ValidComponent = "h2"> =
-	AlertDialogTitleProps<T> & {
-		class?: string;
-	};
+  AlertDialogTitleProps<T> & {
+    class?: string
+  }
 
 export const AlertDialogTitle = <T extends ValidComponent = "h2">(
-	props: PolymorphicProps<T, alertDialogTitleProps<T>>,
+  props: PolymorphicProps<T, alertDialogTitleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogTitleProps, ["class"]);
+  const [local, rest] = splitProps(props as alertDialogTitleProps, ["class"])
 
-	return (
-		<AlertDialogPrimitive.Title
-			class={cn("text-lg font-semibold", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <AlertDialogPrimitive.Title
+      class={cn("text-lg font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type alertDialogDescriptionProps<T extends ValidComponent = "p"> =
-	AlertDialogDescriptionProps<T> & {
-		class?: string;
-	};
+  AlertDialogDescriptionProps<T> & {
+    class?: string
+  }
 
 export const AlertDialogDescription = <T extends ValidComponent = "p">(
-	props: PolymorphicProps<T, alertDialogDescriptionProps<T>>,
+  props: PolymorphicProps<T, alertDialogDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogDescriptionProps, [
-		"class",
-	]);
-
-	return (
-		<AlertDialogPrimitive.Description
-			class={cn("text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogDescriptionProps, [
+    "class",
+  ])
+
+  return (
+    <AlertDialogPrimitive.Description
+      class={cn("text-muted-foreground text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type alertDialogCloseProps<T extends ValidComponent = "button"> =
-	AlertDialogCloseButtonProps<T> & {
-		class?: string;
-	};
+  AlertDialogCloseButtonProps<T> & {
+    class?: string
+  }
 
 export const AlertDialogClose = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, alertDialogCloseProps<T>>,
+  props: PolymorphicProps<T, alertDialogCloseProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"]);
-
-	return (
-		<AlertDialogPrimitive.CloseButton
-			class={cn(
-				buttonVariants({
-					variant: "outline",
-				}),
-				"mt-2 md:mt-0",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"])
+
+  return (
+    <AlertDialogPrimitive.CloseButton
+      class={cn(
+        buttonVariants({
+          variant: "outline",
+        }),
+        "mt-2 md:mt-0",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const AlertDialogAction = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, alertDialogCloseProps<T>>,
+  props: PolymorphicProps<T, alertDialogCloseProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"]);
-
-	return (
-		<AlertDialogPrimitive.CloseButton
-			class={cn(buttonVariants(), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as alertDialogCloseProps, ["class"])
+
+  return (
+    <AlertDialogPrimitive.CloseButton
+      class={cn(buttonVariants(), local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/alert.tsx b/packages/unocss/ui/alert.tsx
index 4cd21399..b835e371 100644
--- a/packages/unocss/ui/alert.tsx
+++ b/packages/unocss/ui/alert.tsx
@@ -1,66 +1,67 @@
-import { cn } from "@/libs/cn";
-import type { AlertRootProps } from "@kobalte/core/alert";
-import { Alert as AlertPrimitive } from "@kobalte/core/alert";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ComponentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ComponentProps, type ValidComponent } from "solid-js"
+import {
+  Alert as AlertPrimitive,
+  type AlertRootProps,
+} from "@kobalte/core/alert"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 export const alertVariants = cva(
-	"relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:(absolute left-4 top-4 text-foreground)",
-	{
-		variants: {
-			variant: {
-				default: "bg-background text-foreground",
-				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:(absolute left-4 top-4 text-foreground)",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 type alertProps<T extends ValidComponent = "div"> = AlertRootProps<T> &
-	VariantProps<typeof alertVariants> & {
-		class?: string;
-	};
+  VariantProps<typeof alertVariants> & {
+    class?: string
+  }
 
 export const Alert = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, alertProps<T>>,
+  props: PolymorphicProps<T, alertProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as alertProps, ["class", "variant"]);
+  const [local, rest] = splitProps(props as alertProps, ["class", "variant"])
 
-	return (
-		<AlertPrimitive
-			class={cn(
-				alertVariants({
-					variant: props.variant,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <AlertPrimitive
+      class={cn(
+        alertVariants({
+          variant: props.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const AlertTitle = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn("font-medium leading-5 tracking-tight", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn("font-medium leading-5 tracking-tight", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const AlertDescription = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...rest} />
-	);
-};
+  return (
+    <div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...rest} />
+  )
+}
diff --git a/packages/unocss/ui/badge.tsx b/packages/unocss/ui/badge.tsx
index 188ab9cb..ca59efac 100644
--- a/packages/unocss/ui/badge.tsx
+++ b/packages/unocss/ui/badge.tsx
@@ -1,42 +1,42 @@
-import { cn } from "@/libs/cn";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 export const badgeVariants = cva(
-	"inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:(outline-none ring-1.5 ring-ring)",
-	{
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground shadow hover:bg-primary/80",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				destructive:
-					"bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-				outline: "border text-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:(outline-none ring-1.5 ring-ring)",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "border text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 export const Badge = (
-	props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
+  props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>
 ) => {
-	const [local, rest] = splitProps(props, ["class", "variant"]);
+  const [local, rest] = splitProps(props, ["class", "variant"])
 
-	return (
-		<div
-			class={cn(
-				badgeVariants({
-					variant: local.variant,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn(
+        badgeVariants({
+          variant: local.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/button.tsx b/packages/unocss/ui/button.tsx
index b0250cbc..6e54c4ac 100644
--- a/packages/unocss/ui/button.tsx
+++ b/packages/unocss/ui/button.tsx
@@ -1,67 +1,68 @@
-import { cn } from "@/libs/cn";
-import type { ButtonRootProps } from "@kobalte/core/button";
-import { Button as ButtonPrimitive } from "@kobalte/core/button";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import {
+  Button as ButtonPrimitive,
+  type ButtonRootProps,
+} from "@kobalte/core/button"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 export const buttonVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-shadow focus-visible:(outline-none ring-1.5 ring-ring) disabled:(pointer-events-none opacity-50) bg-inherit",
-	{
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground shadow hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-				ghost: "hover:(bg-accent text-accent-foreground)",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 px-4 py-2",
-				sm: "h-8 px-3 text-xs",
-				lg: "h-10 px-8",
-				icon: "h-9 w-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-shadow focus-visible:(outline-none ring-1.5 ring-ring) disabled:(pointer-events-none opacity-50) bg-inherit",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:(bg-accent text-accent-foreground)",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 export type buttonProps<T extends ValidComponent = "button"> =
-	ButtonRootProps<T> &
-		VariantProps<typeof buttonVariants> & {
-			class?: string;
-		};
+  ButtonRootProps<T> &
+    VariantProps<typeof buttonVariants> & {
+      class?: string
+    }
 
 export const Button = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, buttonProps<T>>,
+  props: PolymorphicProps<T, buttonProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as buttonProps, [
-		"class",
-		"variant",
-		"size",
-	]);
+  const [local, rest] = splitProps(props as buttonProps, [
+    "class",
+    "variant",
+    "size",
+  ])
 
-	return (
-		<ButtonPrimitive
-			class={cn(
-				buttonVariants({
-					size: local.size,
-					variant: local.variant,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ButtonPrimitive
+      class={cn(
+        buttonVariants({
+          size: local.size,
+          variant: local.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/card.tsx b/packages/unocss/ui/card.tsx
index 4cabede7..50221890 100644
--- a/packages/unocss/ui/card.tsx
+++ b/packages/unocss/ui/card.tsx
@@ -1,60 +1,58 @@
-import { cn } from "@/libs/cn";
-import type { ComponentProps, ParentComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ComponentProps, type ParentComponent } from "solid-js"
+
+import { cn } from "@/libs/cn"
 
 export const Card = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"rounded-xl border bg-card text-card-foreground shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "bg-card text-card-foreground rounded-xl border shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CardHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...rest} />
-	);
-};
+  return (
+    <div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...rest} />
+  )
+}
 
 export const CardTitle: ParentComponent<ComponentProps<"h1">> = (props) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<h1
-			class={cn("font-semibold leading-none tracking-tight", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <h1
+      class={cn("font-semibold leading-none tracking-tight", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const CardDescription: ParentComponent<ComponentProps<"h3">> = (
-	props,
+  props
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<h3 class={cn("text-sm text-muted-foreground", local.class)} {...rest} />
-	);
-};
+  return (
+    <h3 class={cn("text-muted-foreground text-sm", local.class)} {...rest} />
+  )
+}
 
 export const CardContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return <div class={cn("p-6 pt-0", local.class)} {...rest} />;
-};
+  return <div class={cn("p-6 pt-0", local.class)} {...rest} />
+}
 
 export const CardFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("flex items-center p-6 pt-0", local.class)} {...rest} />
-	);
-};
+  return <div class={cn("flex items-center p-6 pt-0", local.class)} {...rest} />
+}
diff --git a/packages/unocss/ui/carousel.tsx b/packages/unocss/ui/carousel.tsx
index c54cb94a..dc110baa 100644
--- a/packages/unocss/ui/carousel.tsx
+++ b/packages/unocss/ui/carousel.tsx
@@ -1,273 +1,274 @@
-import { cn } from "@/libs/cn";
-import type { CreateEmblaCarouselType } from "embla-carousel-solid";
-import createEmblaCarousel from "embla-carousel-solid";
-import type {
-	Accessor,
-	ComponentProps,
-	ParentProps,
-	VoidProps,
-} from "solid-js";
 import {
-	createContext,
-	createEffect,
-	createMemo,
-	createSignal,
-	mergeProps,
-	onCleanup,
-	splitProps,
-	useContext,
-} from "solid-js";
-import { Button } from "./button";
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  mergeProps,
+  onCleanup,
+  splitProps,
+  useContext,
+  type Accessor,
+  type ComponentProps,
+  type ParentProps,
+  type VoidProps,
+} from "solid-js"
+import createEmblaCarousel, {
+  type CreateEmblaCarouselType,
+} from "embla-carousel-solid"
 
-export type CarouselApi = CreateEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof createEmblaCarousel>;
-type CarouselOptions = NonNullable<UseCarouselParameters[0]>;
-type CarouselPlugin = NonNullable<UseCarouselParameters[1]>;
+import { cn } from "@/libs/cn"
+
+import { Button } from "./button"
+
+export type CarouselApi = CreateEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof createEmblaCarousel>
+type CarouselOptions = NonNullable<UseCarouselParameters[0]>
+type CarouselPlugin = NonNullable<UseCarouselParameters[1]>
 
 type CarouselProps = {
-	opts?: ReturnType<CarouselOptions>;
-	plugins?: ReturnType<CarouselPlugin>;
-	orientation?: "horizontal" | "vertical";
-	setApi?: (api: CarouselApi) => void;
-};
+  opts?: ReturnType<CarouselOptions>
+  plugins?: ReturnType<CarouselPlugin>
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
 
 type CarouselContextProps = {
-	carouselRef: ReturnType<typeof createEmblaCarousel>[0];
-	api: ReturnType<typeof createEmblaCarousel>[1];
-	scrollPrev: () => void;
-	scrollNext: () => void;
-	canScrollPrev: Accessor<boolean>;
-	canScrollNext: Accessor<boolean>;
-} & CarouselProps;
+  carouselRef: ReturnType<typeof createEmblaCarousel>[0]
+  api: ReturnType<typeof createEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: Accessor<boolean>
+  canScrollNext: Accessor<boolean>
+} & CarouselProps
 
 const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(
-	null,
-);
+  null
+)
 
 const useCarousel = () => {
-	const context = useContext(CarouselContext);
+  const context = useContext(CarouselContext)
 
-	if (!context) {
-		throw new Error("useCarousel must be used within a <Carousel />");
-	}
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
 
-	return context();
-};
+  return context()
+}
 
 export const Carousel = (props: ComponentProps<"div"> & CarouselProps) => {
-	const merge = mergeProps<
-		ParentProps<ComponentProps<"div"> & CarouselProps>[]
-	>({ orientation: "horizontal" }, props);
+  const merge = mergeProps<
+    ParentProps<ComponentProps<"div"> & CarouselProps>[]
+  >({ orientation: "horizontal" }, props)
 
-	const [local, rest] = splitProps(merge, [
-		"orientation",
-		"opts",
-		"setApi",
-		"plugins",
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(merge, [
+    "orientation",
+    "opts",
+    "setApi",
+    "plugins",
+    "class",
+    "children",
+  ])
 
-	const [carouselRef, api] = createEmblaCarousel(
-		() => ({
-			...local.opts,
-			axis: local.orientation === "horizontal" ? "x" : "y",
-		}),
-		() => local.plugins ?? [],
-	);
-	const [canScrollPrev, setCanScrollPrev] = createSignal(false);
-	const [canScrollNext, setCanScrollNext] = createSignal(false);
+  const [carouselRef, api] = createEmblaCarousel(
+    () => ({
+      ...local.opts,
+      axis: local.orientation === "horizontal" ? "x" : "y",
+    }),
+    () => local.plugins ?? []
+  )
+  const [canScrollPrev, setCanScrollPrev] = createSignal(false)
+  const [canScrollNext, setCanScrollNext] = createSignal(false)
 
-	const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
-		setCanScrollPrev(api.canScrollPrev());
-		setCanScrollNext(api.canScrollNext());
-	};
+  const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }
 
-	const scrollPrev = () => api()?.scrollPrev();
+  const scrollPrev = () => api()?.scrollPrev()
 
-	const scrollNext = () => api()?.scrollNext();
+  const scrollNext = () => api()?.scrollNext()
 
-	const handleKeyDown = (event: KeyboardEvent) => {
-		if (event.key === "ArrowLeft") {
-			event.preventDefault();
-			scrollPrev();
-		} else if (event.key === "ArrowRight") {
-			event.preventDefault();
-			scrollNext();
-		}
-	};
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }
 
-	createEffect(() => {
-		if (!api() || !local.setApi) return;
+  createEffect(() => {
+    if (!api() || !local.setApi) return
 
-		local.setApi(api);
-	});
+    local.setApi(api)
+  })
 
-	createEffect(() => {
-		const _api = api();
-		if (_api === undefined) return;
+  createEffect(() => {
+    const _api = api()
+    if (_api === undefined) return
 
-		onSelect(_api);
-		_api.on("reInit", onSelect);
-		_api.on("select", onSelect);
+    onSelect(_api)
+    _api.on("reInit", onSelect)
+    _api.on("select", onSelect)
 
-		onCleanup(() => {
-			_api.off("select", onSelect);
-		});
-	});
+    onCleanup(() => {
+      _api.off("select", onSelect)
+    })
+  })
 
-	const value = createMemo(
-		() =>
-			({
-				carouselRef,
-				api,
-				opts: local.opts,
-				orientation:
-					local.orientation ??
-					(local.opts?.axis === "y" ? "vertical" : "horizontal"),
-				scrollPrev,
-				scrollNext,
-				canScrollPrev,
-				canScrollNext,
-			}) satisfies CarouselContextProps,
-	);
+  const value = createMemo(
+    () =>
+      ({
+        carouselRef,
+        api,
+        opts: local.opts,
+        orientation:
+          local.orientation ??
+          (local.opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }) satisfies CarouselContextProps
+  )
 
-	return (
-		<CarouselContext.Provider value={value}>
-			<div
-				onKeyDown={handleKeyDown}
-				class={cn("relative", local.class)}
-				// biome-ignore lint/a11y/useSemanticElements:
-				role="region"
-				aria-roledescription="carousel"
-				{...rest}
-			>
-				{local.children}
-			</div>
-		</CarouselContext.Provider>
-	);
-};
+  return (
+    <CarouselContext.Provider value={value}>
+      <div
+        onKeyDown={handleKeyDown}
+        class={cn("relative", local.class)}
+        // biome-ignore lint/a11y/useSemanticElements:
+        role="region"
+        aria-roledescription="carousel"
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
 
 export const CarouselContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-	const { carouselRef, orientation } = useCarousel();
+  const [local, rest] = splitProps(props, ["class"])
+  const { carouselRef, orientation } = useCarousel()
 
-	return (
-		<div ref={carouselRef} class="overflow-hidden">
-			<div
-				class={cn(
-					"flex",
-					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
+  return (
+    <div ref={carouselRef} class="overflow-hidden">
+      <div
+        class={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          local.class
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
 
 export const CarouselItem = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-	const { orientation } = useCarousel();
+  const [local, rest] = splitProps(props, ["class"])
+  const { orientation } = useCarousel()
 
-	return (
-		<div
-			role="group"
-			aria-roledescription="slide"
-			class={cn(
-				"min-w-0 shrink-0 grow-0 basis-full",
-				orientation === "horizontal" ? "pl-4" : "pt-4",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      class={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CarouselPrevious = (
-	props: VoidProps<ComponentProps<typeof Button>>,
+  props: VoidProps<ComponentProps<typeof Button>>
 ) => {
-	const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
-		{ variant: "outline", size: "icon" },
-		props,
-	);
-	const [local, rest] = splitProps(merge, ["class", "variant", "size"]);
-	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
+    { variant: "outline", size: "icon" },
+    props
+  )
+  const [local, rest] = splitProps(merge, ["class", "variant", "size"])
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
-	return (
-		<Button
-			variant={local.variant}
-			size={local.size}
-			class={cn(
-				"absolute  h-8 w-8 rounded-full touch-manipulation",
-				orientation === "horizontal"
-					? "-left-12 top-1/2 -translate-y-1/2"
-					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-				local.class,
-			)}
-			disabled={!canScrollPrev()}
-			onClick={scrollPrev}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="size-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14M5 12l6 6m-6-6l6-6"
-				/>
-				<title>Previous slide</title>
-			</svg>
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant={local.variant}
+      size={local.size}
+      class={cn(
+        "absolute h-8 w-8 touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        local.class
+      )}
+      disabled={!canScrollPrev()}
+      onClick={scrollPrev}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="size-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14M5 12l6 6m-6-6l6-6"
+        />
+        <title>Previous slide</title>
+      </svg>
+    </Button>
+  )
+}
 
 export const CarouselNext = (
-	props: VoidProps<ComponentProps<typeof Button>>,
+  props: VoidProps<ComponentProps<typeof Button>>
 ) => {
-	const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
-		{ variant: "outline", size: "icon" },
-		props,
-	);
-	const [local, rest] = splitProps(merge, ["class", "variant", "size"]);
-	const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
+    { variant: "outline", size: "icon" },
+    props
+  )
+  const [local, rest] = splitProps(merge, ["class", "variant", "size"])
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
-	return (
-		<Button
-			variant={local.variant}
-			size={local.size}
-			class={cn(
-				"absolute h-8 w-8 rounded-full touch-manipulation",
-				orientation === "horizontal"
-					? "-right-12 top-1/2 -translate-y-1/2"
-					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-				local.class,
-			)}
-			disabled={!canScrollNext()}
-			onClick={scrollNext}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="size-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14m-4 4l4-4m-4-4l4 4"
-				/>
-				<title>Next slide</title>
-			</svg>
-		</Button>
-	);
-};
+  return (
+    <Button
+      variant={local.variant}
+      size={local.size}
+      class={cn(
+        "absolute h-8 w-8 touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        local.class
+      )}
+      disabled={!canScrollNext()}
+      onClick={scrollNext}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="size-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14m-4 4l4-4m-4-4l4 4"
+        />
+        <title>Next slide</title>
+      </svg>
+    </Button>
+  )
+}
diff --git a/packages/unocss/ui/checkbox.tsx b/packages/unocss/ui/checkbox.tsx
index fd2c53b8..6ac593c4 100644
--- a/packages/unocss/ui/checkbox.tsx
+++ b/packages/unocss/ui/checkbox.tsx
@@ -1,55 +1,57 @@
-import { cn } from "@/libs/cn";
-import type { CheckboxControlProps } from "@kobalte/core/checkbox";
-import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import {
+  Checkbox as CheckboxPrimitive,
+  type CheckboxControlProps,
+} from "@kobalte/core/checkbox"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const CheckboxLabel = CheckboxPrimitive.Label;
-export const Checkbox = CheckboxPrimitive;
-export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage;
-export const CheckboxDescription = CheckboxPrimitive.Description;
+import { cn } from "@/libs/cn"
+
+export const CheckboxLabel = CheckboxPrimitive.Label
+export const Checkbox = CheckboxPrimitive
+export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage
+export const CheckboxDescription = CheckboxPrimitive.Description
 
 type checkboxControlProps<T extends ValidComponent = "div"> = VoidProps<
-	CheckboxControlProps<T> & { class?: string }
->;
+  CheckboxControlProps<T> & { class?: string }
+>
 
 export const CheckboxControl = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, checkboxControlProps<T>>,
+  props: PolymorphicProps<T, checkboxControlProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as checkboxControlProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as checkboxControlProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<>
-			<CheckboxPrimitive.Input class="[&:focus-visible+div]:(outline-none ring-1.5 ring-ring ring-offset-2 ring-offset-background)" />
-			<CheckboxPrimitive.Control
-				class={cn(
-					"h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:(outline-none ring-1.5 ring-ring) data-[disabled]:(cursor-not-allowed opacity-50) data-[checked]:(bg-primary text-primary-foreground) transition-shadow",
-					local.class,
-				)}
-				{...rest}
-			>
-				<CheckboxPrimitive.Indicator class="flex items-center justify-center text-current">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m5 12l5 5L20 7"
-						/>
-						<title>Checkbox</title>
-					</svg>
-				</CheckboxPrimitive.Indicator>
-			</CheckboxPrimitive.Control>
-		</>
-	);
-};
+  return (
+    <>
+      <CheckboxPrimitive.Input class="[&:focus-visible+div]:(outline-none ring-1.5 ring-ring ring-offset-background) ring-offset-2" />
+      <CheckboxPrimitive.Control
+        class={cn(
+          "border-primary focus-visible:(outline-none ring-1.5 ring-ring) data-[disabled]:(cursor-not-allowed opacity-50) data-[checked]:(bg-primary text-primary-foreground) h-4 w-4 shrink-0 rounded-sm border shadow transition-shadow",
+          local.class
+        )}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator class="flex items-center justify-center text-current">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m5 12l5 5L20 7"
+            />
+            <title>Checkbox</title>
+          </svg>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Control>
+    </>
+  )
+}
diff --git a/packages/unocss/ui/collapsible.tsx b/packages/unocss/ui/collapsible.tsx
index 2faec6d3..fc253e81 100644
--- a/packages/unocss/ui/collapsible.tsx
+++ b/packages/unocss/ui/collapsible.tsx
@@ -1,31 +1,33 @@
-import { cn } from "@/libs/cn";
-import type { CollapsibleContentProps } from "@kobalte/core/collapsible";
-import { Collapsible as CollapsiblePrimitive } from "@kobalte/core/collapsible";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import {
+  Collapsible as CollapsiblePrimitive,
+  type CollapsibleContentProps,
+} from "@kobalte/core/collapsible"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Collapsible = CollapsiblePrimitive;
+import { cn } from "@/libs/cn"
 
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+export const Collapsible = CollapsiblePrimitive
+
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger
 
 type collapsibleContentProps<T extends ValidComponent = "div"> =
-	CollapsibleContentProps<T> & {
-		class?: string;
-	};
+  CollapsibleContentProps<T> & {
+    class?: string
+  }
 
 export const CollapsibleContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, collapsibleContentProps<T>>,
+  props: PolymorphicProps<T, collapsibleContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as collapsibleContentProps, ["class"]);
+  const [local, rest] = splitProps(props as collapsibleContentProps, ["class"])
 
-	return (
-		<CollapsiblePrimitive.Content
-			class={cn(
-				"overflow-hidden animate-collapsible-up data-[expanded]:animate-collapsible-down",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <CollapsiblePrimitive.Content
+      class={cn(
+        "animate-collapsible-up data-[expanded]:animate-collapsible-down overflow-hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/combobox.tsx b/packages/unocss/ui/combobox.tsx
index b5b1befa..cd2b3287 100644
--- a/packages/unocss/ui/combobox.tsx
+++ b/packages/unocss/ui/combobox.tsx
@@ -1,156 +1,161 @@
-import { cn } from "@/libs/cn";
-import type {
-	ComboboxContentProps,
-	ComboboxInputProps,
-	ComboboxItemProps,
-	ComboboxTriggerProps,
-} from "@kobalte/core/combobox";
-import { Combobox as ComboboxPrimitive } from "@kobalte/core/combobox";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ParentProps, ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import {
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  Combobox as ComboboxPrimitive,
+  type ComboboxContentProps,
+  type ComboboxInputProps,
+  type ComboboxItemProps,
+  type ComboboxTriggerProps,
+} from "@kobalte/core/combobox"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Combobox = ComboboxPrimitive;
-export const ComboboxDescription = ComboboxPrimitive.Description;
-export const ComboboxErrorMessage = ComboboxPrimitive.ErrorMessage;
-export const ComboboxItemDescription = ComboboxPrimitive.ItemDescription;
-export const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect;
+import { cn } from "@/libs/cn"
+
+export const Combobox = ComboboxPrimitive
+export const ComboboxDescription = ComboboxPrimitive.Description
+export const ComboboxErrorMessage = ComboboxPrimitive.ErrorMessage
+export const ComboboxItemDescription = ComboboxPrimitive.ItemDescription
+export const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect
 
 type comboboxInputProps<T extends ValidComponent = "input"> = VoidProps<
-	ComboboxInputProps<T> & {
-		class?: string;
-	}
->;
+  ComboboxInputProps<T> & {
+    class?: string
+  }
+>
 
 export const ComboboxInput = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, comboboxInputProps<T>>,
+  props: PolymorphicProps<T, comboboxInputProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxInputProps, ["class"]);
+  const [local, rest] = splitProps(props as comboboxInputProps, ["class"])
 
-	return (
-		<ComboboxPrimitive.Input
-			class={cn(
-				"h-full text-sm placeholder:text-muted-foreground focus:outline-none disabled:(cursor-not-allowed opacity-50) bg-inherit",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ComboboxPrimitive.Input
+      class={cn(
+        "placeholder:text-muted-foreground disabled:(cursor-not-allowed opacity-50) h-full bg-inherit text-sm focus:outline-none",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type comboboxTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	ComboboxTriggerProps<T> & {
-		class?: string;
-	}
->;
+  ComboboxTriggerProps<T> & {
+    class?: string
+  }
+>
 
 export const ComboboxTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, comboboxTriggerProps<T>>,
+  props: PolymorphicProps<T, comboboxTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxTriggerProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as comboboxTriggerProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ComboboxPrimitive.Control>
-			<ComboboxPrimitive.Trigger
-				class={cn(
-					"flex h-9 w-full items-center justify-between rounded-md border border-input px-3 shadow-sm bg-inherit",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<ComboboxPrimitive.Icon class="flex h-3.5 w-3.5 items-center justify-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4 opacity-50"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-						/>
-						<title>Arrow</title>
-					</svg>
-				</ComboboxPrimitive.Icon>
-			</ComboboxPrimitive.Trigger>
-		</ComboboxPrimitive.Control>
-	);
-};
+  return (
+    <ComboboxPrimitive.Control>
+      <ComboboxPrimitive.Trigger
+        class={cn(
+          "border-input flex h-9 w-full items-center justify-between rounded-md border bg-inherit px-3 shadow-sm",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <ComboboxPrimitive.Icon class="flex h-3.5 w-3.5 items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4 opacity-50"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+            />
+            <title>Arrow</title>
+          </svg>
+        </ComboboxPrimitive.Icon>
+      </ComboboxPrimitive.Trigger>
+    </ComboboxPrimitive.Control>
+  )
+}
 
 type comboboxContentProps<T extends ValidComponent = "div"> =
-	ComboboxContentProps<T> & {
-		class?: string;
-	};
+  ComboboxContentProps<T> & {
+    class?: string
+  }
 
 export const ComboboxContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, comboboxContentProps<T>>,
+  props: PolymorphicProps<T, comboboxContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxContentProps, ["class"]);
+  const [local, rest] = splitProps(props as comboboxContentProps, ["class"])
 
-	return (
-		<ComboboxPrimitive.Portal>
-			<ComboboxPrimitive.Content
-				class={cn(
-					"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) origin-[--kb-combobox-content-transform-origin]",
-					local.class,
-				)}
-				{...rest}
-			>
-				<ComboboxPrimitive.Listbox class="p-1" />
-			</ComboboxPrimitive.Content>
-		</ComboboxPrimitive.Portal>
-	);
-};
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) relative z-50 min-w-[8rem] origin-[--kb-combobox-content-transform-origin] overflow-hidden rounded-md border shadow-md",
+          local.class
+        )}
+        {...rest}
+      >
+        <ComboboxPrimitive.Listbox class="p-1" />
+      </ComboboxPrimitive.Content>
+    </ComboboxPrimitive.Portal>
+  )
+}
 
 type comboboxItemProps<T extends ValidComponent = "li"> = ParentProps<
-	ComboboxItemProps<T> & {
-		class?: string;
-	}
->;
+  ComboboxItemProps<T> & {
+    class?: string
+  }
+>
 
 export const ComboboxItem = <T extends ValidComponent = "li">(
-	props: PolymorphicProps<T, comboboxItemProps<T>>,
+  props: PolymorphicProps<T, comboboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as comboboxItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as comboboxItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ComboboxPrimitive.Item
-			class={cn(
-				"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:(pointer-events-none opacity-50) data-[highlighted]:(bg-accent text-accent-foreground)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<ComboboxPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checked</title>
-				</svg>
-			</ComboboxPrimitive.ItemIndicator>
-			<ComboboxPrimitive.ItemLabel>
-				{local.children}
-			</ComboboxPrimitive.ItemLabel>
-		</ComboboxPrimitive.Item>
-	);
-};
+  return (
+    <ComboboxPrimitive.Item
+      class={cn(
+        "data-[disabled]:(pointer-events-none opacity-50) data-[highlighted]:(bg-accent text-accent-foreground) relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <ComboboxPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checked</title>
+        </svg>
+      </ComboboxPrimitive.ItemIndicator>
+      <ComboboxPrimitive.ItemLabel>
+        {local.children}
+      </ComboboxPrimitive.ItemLabel>
+    </ComboboxPrimitive.Item>
+  )
+}
diff --git a/packages/unocss/ui/command.tsx b/packages/unocss/ui/command.tsx
index 2da7ff78..21ac3e49 100644
--- a/packages/unocss/ui/command.tsx
+++ b/packages/unocss/ui/command.tsx
@@ -1,151 +1,152 @@
-import { cn } from "@/libs/cn";
-import type {
-	CommandDialogProps,
-	CommandEmptyProps,
-	CommandGroupProps,
-	CommandInputProps,
-	CommandItemProps,
-	CommandListProps,
-	CommandRootProps,
-} from "cmdk-solid";
-import { Command as CommandPrimitive } from "cmdk-solid";
-import type { ComponentProps, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-import { Dialog, DialogContent } from "./dialog";
+import { splitProps, type ComponentProps, type VoidProps } from "solid-js"
+import {
+  Command as CommandPrimitive,
+  type CommandDialogProps,
+  type CommandEmptyProps,
+  type CommandGroupProps,
+  type CommandInputProps,
+  type CommandItemProps,
+  type CommandListProps,
+  type CommandRootProps,
+} from "cmdk-solid"
+
+import { cn } from "@/libs/cn"
+
+import { Dialog, DialogContent } from "./dialog"
 
 export const Command = (props: CommandRootProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive
-			class={cn(
-				"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive
+      class={cn(
+        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandList = (props: CommandListProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.List
-			class={cn(
-				"max-h-[300px] overflow-y-auto overflow-x-hidden p-1",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.List
+      class={cn(
+        "max-h-[300px] overflow-y-auto overflow-x-hidden p-1",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandInput = (props: VoidProps<CommandInputProps>) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div class="flex items-center border-b px-3" cmdk-input-wrapper="">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="mr-2 h-4 w-4 shrink-0 opacity-50"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"
-				/>
-				<title>Search</title>
-			</svg>
-			<CommandPrimitive.Input
-				class={cn(
-					"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:(cursor-not-allowed opacity-50)",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mr-2 h-4 w-4 shrink-0 opacity-50"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"
+        />
+        <title>Search</title>
+      </svg>
+      <CommandPrimitive.Input
+        class={cn(
+          "placeholder:text-muted-foreground disabled:(cursor-not-allowed opacity-50) flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none",
+          local.class
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
 
 export const CommandItem = (props: CommandItemProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:(bg-accent text-accent-foreground) aria-disabled:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.Item
+      class={cn(
+        "aria-selected:(bg-accent text-accent-foreground) aria-disabled:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<span
-			class={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <span
+      class={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandDialog = (props: CommandDialogProps) => {
-	const [local, rest] = splitProps(props, ["children"]);
-
-	return (
-		<Dialog {...rest}>
-			<DialogContent class="overflow-hidden p-0">
-				<Command class="[&_[cmdk-group-heading]]:(px-2 font-medium text-muted-foreground) [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:(px-2 py-3) [&_[cmdk-item]_svg]:size-5">
-					{local.children}
-				</Command>
-			</DialogContent>
-		</Dialog>
-	);
-};
+  const [local, rest] = splitProps(props, ["children"])
+
+  return (
+    <Dialog {...rest}>
+      <DialogContent class="overflow-hidden p-0">
+        <Command class="[&_[cmdk-group-heading]]:(px-2 text-muted-foreground) [&_[cmdk-item]]:(px-2 py-3) font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]_svg]:size-5">
+          {local.children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
 
 export const CommandEmpty = (props: CommandEmptyProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<CommandPrimitive.Empty
-			class={cn("py-6 text-center text-sm", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <CommandPrimitive.Empty
+      class={cn("py-6 text-center text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const CommandGroup = (props: CommandGroupProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.Group
-			class={cn(
-				"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:(px-2 py-1.5 text-xs font-medium text-muted-foreground)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.Group
+      class={cn(
+        "text-foreground [&_[cmdk-group-heading]]:(px-2 text-muted-foreground) overflow-hidden p-1 py-1.5 text-xs font-medium",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const CommandSeparator = (props: CommandEmptyProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<CommandPrimitive.Separator
-			class={cn("-mx-1 h-px bg-border", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <CommandPrimitive.Separator
+      class={cn("bg-border -mx-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/context-menu.tsx b/packages/unocss/ui/context-menu.tsx
index c99a8cb0..09a46897 100644
--- a/packages/unocss/ui/context-menu.tsx
+++ b/packages/unocss/ui/context-menu.tsx
@@ -1,327 +1,328 @@
-import { cn } from "@/libs/cn";
-import type {
-	ContextMenuCheckboxItemProps,
-	ContextMenuContentProps,
-	ContextMenuGroupLabelProps,
-	ContextMenuItemLabelProps,
-	ContextMenuItemProps,
-	ContextMenuRadioItemProps,
-	ContextMenuSeparatorProps,
-	ContextMenuSubContentProps,
-	ContextMenuSubTriggerProps,
-} from "@kobalte/core/context-menu";
-import { ContextMenu as ContextMenuPrimitive } from "@kobalte/core/context-menu";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	ComponentProps,
-	ParentProps,
-	ValidComponent,
-	VoidProps,
-} from "solid-js";
-import { splitProps } from "solid-js";
+import {
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  ContextMenu as ContextMenuPrimitive,
+  type ContextMenuCheckboxItemProps,
+  type ContextMenuContentProps,
+  type ContextMenuGroupLabelProps,
+  type ContextMenuItemLabelProps,
+  type ContextMenuItemProps,
+  type ContextMenuRadioItemProps,
+  type ContextMenuSeparatorProps,
+  type ContextMenuSubContentProps,
+  type ContextMenuSubTriggerProps,
+} from "@kobalte/core/context-menu"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const ContextMenu = ContextMenuPrimitive;
-export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-export const ContextMenuGroup = ContextMenuPrimitive.Group;
-export const ContextMenuSub = ContextMenuPrimitive.Sub;
-export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+import { cn } from "@/libs/cn"
+
+export const ContextMenu = ContextMenuPrimitive
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+export const ContextMenuGroup = ContextMenuPrimitive.Group
+export const ContextMenuSub = ContextMenuPrimitive.Sub
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
 type contextMenuSubTriggerProps<T extends ValidComponent = "div"> = ParentProps<
-	ContextMenuSubTriggerProps<T> & {
-		class?: string;
-		inset?: boolean;
-	}
->;
+  ContextMenuSubTriggerProps<T> & {
+    class?: string
+    inset?: boolean
+  }
+>
 
 export const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuSubTriggerProps<T>>,
+  props: PolymorphicProps<T, contextMenuSubTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuSubTriggerProps, [
-		"class",
-		"children",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuSubTriggerProps, [
+    "class",
+    "children",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.SubTrigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[expanded]:(bg-accent text-accent-foreground)",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="ml-auto h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Arrow</title>
-			</svg>
-		</ContextMenuPrimitive.SubTrigger>
-	);
-};
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[expanded]:(bg-accent text-accent-foreground) flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="ml-auto h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Arrow</title>
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
 
 type contextMenuSubContentProps<T extends ValidComponent = "div"> =
-	ContextMenuSubContentProps<T> & {
-		class?: string;
-	};
+  ContextMenuSubContentProps<T> & {
+    class?: string
+  }
 
 export const ContextMenuSubContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuSubContentProps<T>>,
+  props: PolymorphicProps<T, contextMenuSubContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuSubContentProps, [
-		"class",
-	]);
+  const [local, rest] = splitProps(props as contextMenuSubContentProps, [
+    "class",
+  ])
 
-	return (
-		<ContextMenuPrimitive.Portal>
-			<ContextMenuPrimitive.SubContent
-				class={cn(
-					"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</ContextMenuPrimitive.Portal>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+          local.class
+        )}
+        {...rest}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
 
 type contextMenuContentProps<T extends ValidComponent = "div"> =
-	ContextMenuContentProps<T> & {
-		class?: string;
-	};
+  ContextMenuContentProps<T> & {
+    class?: string
+  }
 
 export const ContextMenuContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuContentProps<T>>,
+  props: PolymorphicProps<T, contextMenuContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuContentProps, ["class"]);
+  const [local, rest] = splitProps(props as contextMenuContentProps, ["class"])
 
-	return (
-		<ContextMenuPrimitive.Portal>
-			<ContextMenuPrimitive.Content
-				class={cn(
-					"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) focus-visible:(outline-none ring-1.5 ring-ring) transition-shadow",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</ContextMenuPrimitive.Portal>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) focus-visible:(outline-none ring-1.5 ring-ring) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md transition-shadow",
+          local.class
+        )}
+        {...rest}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
 
 type contextMenuItemProps<T extends ValidComponent = "div"> =
-	ContextMenuItemProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  ContextMenuItemProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const ContextMenuItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuItemProps<T>>,
+  props: PolymorphicProps<T, contextMenuItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuItemProps, [
-		"class",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuItemProps, [
+    "class",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Item
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type contextMenuCheckboxItemProps<T extends ValidComponent = "div"> =
-	ParentProps<
-		ContextMenuCheckboxItemProps<T> & {
-			class?: string;
-		}
-	>;
+  ParentProps<
+    ContextMenuCheckboxItemProps<T> & {
+      class?: string
+    }
+  >
 
 export const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuCheckboxItemProps<T>>,
+  props: PolymorphicProps<T, contextMenuCheckboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuCheckboxItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as contextMenuCheckboxItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ContextMenuPrimitive.CheckboxItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<ContextMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checkbox</title>
-				</svg>
-			</ContextMenuPrimitive.ItemIndicator>
-			{local.children}
-		</ContextMenuPrimitive.CheckboxItem>
-	);
-};
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <ContextMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checkbox</title>
+        </svg>
+      </ContextMenuPrimitive.ItemIndicator>
+      {local.children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
 
 type contextMenuRadioItemProps<T extends ValidComponent = "div"> = ParentProps<
-	ContextMenuRadioItemProps<T> & {
-		class?: string;
-	}
->;
+  ContextMenuRadioItemProps<T> & {
+    class?: string
+  }
+>
 
 export const ContextMenuRadioItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuRadioItemProps<T>>,
+  props: PolymorphicProps<T, contextMenuRadioItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuRadioItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as contextMenuRadioItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ContextMenuPrimitive.RadioItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<ContextMenuPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-2 w-2"
-				>
-					<g
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M0 0h24v24H0z" />
-						<path
-							fill="currentColor"
-							d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
-						/>
-					</g>
-					<title>Radio</title>
-				</svg>
-			</ContextMenuPrimitive.ItemIndicator>
-			{local.children}
-		</ContextMenuPrimitive.RadioItem>
-	);
-};
+  return (
+    <ContextMenuPrimitive.RadioItem
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <ContextMenuPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-2 w-2"
+        >
+          <g
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
+            />
+          </g>
+          <title>Radio</title>
+        </svg>
+      </ContextMenuPrimitive.ItemIndicator>
+      {local.children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
 
 type contextMenuItemLabelProps<T extends ValidComponent = "div"> =
-	ContextMenuItemLabelProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  ContextMenuItemLabelProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const ContextMenuItemLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, contextMenuItemLabelProps<T>>,
+  props: PolymorphicProps<T, contextMenuItemLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuItemLabelProps, [
-		"class",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuItemLabelProps, [
+    "class",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.ItemLabel
-			class={cn(
-				"px-2 py-1.5 text-sm font-semibold text-foreground",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.ItemLabel
+      class={cn(
+        "text-foreground px-2 py-1.5 text-sm font-semibold",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type contextMenuGroupLabelProps<T extends ValidComponent = "span"> =
-	ContextMenuGroupLabelProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  ContextMenuGroupLabelProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const ContextMenuGroupLabel = <T extends ValidComponent = "span">(
-	props: PolymorphicProps<T, contextMenuGroupLabelProps<T>>,
+  props: PolymorphicProps<T, contextMenuGroupLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuGroupLabelProps, [
-		"class",
-		"inset",
-	]);
+  const [local, rest] = splitProps(props as contextMenuGroupLabelProps, [
+    "class",
+    "inset",
+  ])
 
-	return (
-		<ContextMenuPrimitive.GroupLabel
-			as="div"
-			class={cn(
-				"px-2 py-1.5 text-sm font-semibold text-foreground",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      as="div"
+      class={cn(
+        "text-foreground px-2 py-1.5 text-sm font-semibold",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type contextMenuSeparatorProps<T extends ValidComponent = "hr"> = VoidProps<
-	ContextMenuSeparatorProps<T> & {
-		class?: string;
-	}
->;
+  ContextMenuSeparatorProps<T> & {
+    class?: string
+  }
+>
 
 export const ContextMenuSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, contextMenuSeparatorProps<T>>,
+  props: PolymorphicProps<T, contextMenuSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as contextMenuSeparatorProps, [
-		"class",
-	]);
+  const [local, rest] = splitProps(props as contextMenuSeparatorProps, [
+    "class",
+  ])
 
-	return (
-		<ContextMenuPrimitive.Separator
-			class={cn("-mx-1 my-1 h-px bg-border", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ContextMenuPrimitive.Separator
+      class={cn("bg-border -mx-1 my-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const ContextMenuShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<span
-			class={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <span
+      class={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/date-picker.tsx b/packages/unocss/ui/date-picker.tsx
index 95a27e59..d5a1472d 100644
--- a/packages/unocss/ui/date-picker.tsx
+++ b/packages/unocss/ui/date-picker.tsx
@@ -1,300 +1,301 @@
-import { cn } from "@/libs/cn";
-import type {
-	DatePickerContentProps,
-	DatePickerControlProps,
-	DatePickerInputProps,
-	DatePickerRangeTextProps,
-	DatePickerRootProps,
-	DatePickerTableCellProps,
-	DatePickerTableCellTriggerProps,
-	DatePickerTableHeaderProps,
-	DatePickerTableProps,
-	DatePickerTableRowProps,
-	DatePickerTriggerProps,
-	DatePickerViewControlProps,
-	DatePickerViewProps,
-	DatePickerViewTriggerProps,
-} from "@ark-ui/solid/date-picker";
-import { DatePicker as DatePickerPrimitive } from "@ark-ui/solid/date-picker";
-import type { VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-import { buttonVariants } from "./button";
-
-export const DatePickerLabel = DatePickerPrimitive.Label;
-export const DatePickerTableHead = DatePickerPrimitive.TableHead;
-export const DatePickerTableBody = DatePickerPrimitive.TableBody;
-export const DatePickerClearTrigger = DatePickerPrimitive.ClearTrigger;
-export const DatePickerYearSelect = DatePickerPrimitive.YearSelect;
-export const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;
-export const DatePickerContext = DatePickerPrimitive.Context;
-export const DatePickerRootProvider = DatePickerPrimitive.RootProvider;
-export const DatePickerPositioner = DatePickerPrimitive.Positioner;
+import { splitProps, type VoidProps } from "solid-js"
+import {
+  DatePicker as DatePickerPrimitive,
+  type DatePickerContentProps,
+  type DatePickerControlProps,
+  type DatePickerInputProps,
+  type DatePickerRangeTextProps,
+  type DatePickerRootProps,
+  type DatePickerTableCellProps,
+  type DatePickerTableCellTriggerProps,
+  type DatePickerTableHeaderProps,
+  type DatePickerTableProps,
+  type DatePickerTableRowProps,
+  type DatePickerTriggerProps,
+  type DatePickerViewControlProps,
+  type DatePickerViewProps,
+  type DatePickerViewTriggerProps,
+} from "@ark-ui/solid/date-picker"
+
+import { cn } from "@/libs/cn"
+
+import { buttonVariants } from "./button"
+
+export const DatePickerLabel = DatePickerPrimitive.Label
+export const DatePickerTableHead = DatePickerPrimitive.TableHead
+export const DatePickerTableBody = DatePickerPrimitive.TableBody
+export const DatePickerClearTrigger = DatePickerPrimitive.ClearTrigger
+export const DatePickerYearSelect = DatePickerPrimitive.YearSelect
+export const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect
+export const DatePickerContext = DatePickerPrimitive.Context
+export const DatePickerRootProvider = DatePickerPrimitive.RootProvider
+export const DatePickerPositioner = DatePickerPrimitive.Positioner
 
 export const DatePicker = (props: DatePickerRootProps) => {
-	return (
-		<DatePickerPrimitive.Root
-			format={(e) => {
-				const parsedDate = new Date(Date.parse(e.toString()));
-
-				const normalizedDate = new Date(
-					parsedDate.getUTCFullYear(),
-					parsedDate.getUTCMonth(),
-					parsedDate.getUTCDate(),
-				);
-
-				return new Intl.DateTimeFormat("en-US", {
-					dateStyle: "long",
-				}).format(normalizedDate);
-			}}
-			{...props}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.Root
+      format={(e) => {
+        const parsedDate = new Date(Date.parse(e.toString()))
+
+        const normalizedDate = new Date(
+          parsedDate.getUTCFullYear(),
+          parsedDate.getUTCMonth(),
+          parsedDate.getUTCDate()
+        )
+
+        return new Intl.DateTimeFormat("en-US", {
+          dateStyle: "long",
+        }).format(normalizedDate)
+      }}
+      {...props}
+    />
+  )
+}
 
 export const DatePickerView = (props: DatePickerViewProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.View
-			class={cn(
-				"space-y-4 min-w-[calc(var(--reference-width)-(0.75rem*2))]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.View
+      class={cn(
+        "min-w-[calc(var(--reference-width)-(0.75rem*2))] space-y-4",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerViewControl = (props: DatePickerViewControlProps) => {
-	const [local, rest] = splitProps(props, ["class", "children"]);
-
-	return (
-		<DatePickerPrimitive.ViewControl
-			class={cn("flex items-center justify-between", local.class)}
-			{...rest}
-		>
-			<DatePickerPrimitive.PrevTrigger
-				class={cn(
-					buttonVariants({
-						variant: "outline",
-					}),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-				)}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m15 6l-6 6l6 6"
-					/>
-					<title>Previous</title>
-				</svg>
-			</DatePickerPrimitive.PrevTrigger>
-			{local.children}
-			<DatePickerPrimitive.NextTrigger
-				class={cn(
-					buttonVariants({
-						variant: "outline",
-					}),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-				)}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m9 6l6 6l-6 6"
-					/>
-					<title>Next</title>
-				</svg>
-			</DatePickerPrimitive.NextTrigger>
-		</DatePickerPrimitive.ViewControl>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "children"])
+
+  return (
+    <DatePickerPrimitive.ViewControl
+      class={cn("flex items-center justify-between", local.class)}
+      {...rest}
+    >
+      <DatePickerPrimitive.PrevTrigger
+        class={cn(
+          buttonVariants({
+            variant: "outline",
+          }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m15 6l-6 6l6 6"
+          />
+          <title>Previous</title>
+        </svg>
+      </DatePickerPrimitive.PrevTrigger>
+      {local.children}
+      <DatePickerPrimitive.NextTrigger
+        class={cn(
+          buttonVariants({
+            variant: "outline",
+          }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m9 6l6 6l-6 6"
+          />
+          <title>Next</title>
+        </svg>
+      </DatePickerPrimitive.NextTrigger>
+    </DatePickerPrimitive.ViewControl>
+  )
+}
 
 export const DatePickerRangeText = (
-	props: VoidProps<DatePickerRangeTextProps>,
+  props: VoidProps<DatePickerRangeTextProps>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.RangeText
-			class={cn("text-sm font-medium", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.RangeText
+      class={cn("text-sm font-medium", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTable = (props: DatePickerTableProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.Table
-			class={cn("w-full border-collapse space-y-1", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.Table
+      class={cn("w-full border-collapse space-y-1", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableRow = (props: DatePickerTableRowProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.TableRow
-			class={cn("mt-2 flex w-full", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.TableRow
+      class={cn("mt-2 flex w-full", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableHeader = (props: DatePickerTableHeaderProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.TableHeader
-			class={cn(
-				"w-8 flex-1 text-[0.8rem] font-normal text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.TableHeader
+      class={cn(
+        "text-muted-foreground w-8 flex-1 text-[0.8rem] font-normal",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableCell = (props: DatePickerTableCellProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.TableCell
-			class={cn(
-				"p-0 text-center text-sm flex-1",
-				"has-[[data-in-range]]:(bg-accent first-of-type:rounded-l-md last-of-type:rounded-r-md)",
-				"has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md",
-				"has-[[data-outside-range][data-in-range]]:bg-accent/50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.TableCell
+      class={cn(
+        "flex-1 p-0 text-center text-sm",
+        "has-[[data-in-range]]:(bg-accent last-of-type:rounded-r-md) first-of-type:rounded-l-md",
+        "has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md",
+        "has-[[data-outside-range][data-in-range]]:bg-accent/50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTableCellTrigger = (
-	props: DatePickerTableCellTriggerProps,
+  props: DatePickerTableCellTriggerProps
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.TableCellTrigger
-			class={cn(
-				buttonVariants({ variant: "ghost" }),
-				"size-8 p-0 font-normal data-[selected]:opacity-100 w-full",
-				"data-[today]:(bg-accent text-accent-foreground)",
-				"[&:is([data-today][data-selected])]:(bg-primary text-primary-foreground)",
-				"data-[selected]:(bg-primary text-primary-foreground opacity-100 hover:bg-primary hover:text-primary-foreground)",
-				"data-[disabled]:(text-muted-foreground opacity-50)",
-				"data-[outside-range]:(text-muted-foreground opacity-50)",
-				"[&:is([data-outside-range][data-in-range])]:(bg-accent/50 text-muted-foreground opacity-30)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.TableCellTrigger
+      class={cn(
+        buttonVariants({ variant: "ghost" }),
+        "size-8 w-full p-0 font-normal data-[selected]:opacity-100",
+        "data-[today]:(bg-accent text-accent-foreground)",
+        "[&:is([data-today][data-selected])]:(bg-primary text-primary-foreground)",
+        "data-[selected]:(bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground) opacity-100",
+        "data-[disabled]:(text-muted-foreground opacity-50)",
+        "data-[outside-range]:(text-muted-foreground opacity-50)",
+        "[&:is([data-outside-range][data-in-range])]:(bg-accent/50 text-muted-foreground opacity-30)",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerViewTrigger = (props: DatePickerViewTriggerProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<DatePickerPrimitive.ViewTrigger
-			class={cn(buttonVariants({ variant: "ghost" }), "h-7", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DatePickerPrimitive.ViewTrigger
+      class={cn(buttonVariants({ variant: "ghost" }), "h-7", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerContent = (props: DatePickerContentProps) => {
-	const [local, rest] = splitProps(props, ["class", "children"]);
-
-	return (
-		<DatePickerPrimitive.Content
-			class={cn(
-				"rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=open]:(animate-in fade-in-0 zoom-in-95) data-[state=closed]:(animate-out fade-out-0 zoom-out-95) z-50",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-		</DatePickerPrimitive.Content>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "children"])
+
+  return (
+    <DatePickerPrimitive.Content
+      class={cn(
+        "bg-popover text-popover-foreground data-[state=open]:(animate-in fade-in-0 zoom-in-95) data-[state=closed]:(animate-out fade-out-0 zoom-out-95) z-50 rounded-md border p-3 shadow-md outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </DatePickerPrimitive.Content>
+  )
+}
 
 export const DatePickerControl = (props: DatePickerControlProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.Control
-			class={cn(
-				"inline-flex items-center gap-x-1 [&>input:first-of-type]:rounded-s-md",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.Control
+      class={cn(
+        "inline-flex items-center gap-x-1 [&>input:first-of-type]:rounded-s-md",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerInput = (props: DatePickerInputProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.Input
-			class={cn(
-				"w-full h-9 border border-border bg-background px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:(outline-none ring-[1.5px] ring-ring) disabled:(cursor-not-allowed opacity-50) transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.Input
+      class={cn(
+        "border-border bg-background placeholder:text-muted-foreground focus-visible:(outline-none ring-ring) disabled:(cursor-not-allowed opacity-50) h-9 w-full border px-3 py-1 text-sm shadow-sm ring-[1.5px] transition-shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DatePickerTrigger = (props: DatePickerTriggerProps) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<DatePickerPrimitive.Trigger
-			class={cn(
-				"transition transition-property-[box-shadow,background-color] focus-visible:(outline-none ring-[1.5px] ring-ring) flex items-center justify-center min-w-9 min-h-9 rounded-e-md border border-border bg-background [&>svg]:size-4 hover:bg-accent/50 disabled:(cursor-not-allowed opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-				<g
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-				>
-					<path d="M8 2v4m8-4v4" />
-					<rect width="18" height="18" x="3" y="4" rx="2" />
-					<path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
-				</g>
-				<title>Calendar</title>
-			</svg>
-		</DatePickerPrimitive.Trigger>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <DatePickerPrimitive.Trigger
+      class={cn(
+        "transition-property-[box-shadow,background-color] focus-visible:(outline-none ring-ring) border-border bg-background hover:bg-accent/50 disabled:(cursor-not-allowed opacity-50) flex min-h-9 min-w-9 items-center justify-center rounded-e-md border ring-[1.5px] transition [&>svg]:size-4",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M8 2v4m8-4v4" />
+          <rect width="18" height="18" x="3" y="4" rx="2" />
+          <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
+        </g>
+        <title>Calendar</title>
+      </svg>
+    </DatePickerPrimitive.Trigger>
+  )
+}
diff --git a/packages/unocss/ui/dialog.tsx b/packages/unocss/ui/dialog.tsx
index 26fc83c6..a27457b8 100644
--- a/packages/unocss/ui/dialog.tsx
+++ b/packages/unocss/ui/dialog.tsx
@@ -1,128 +1,133 @@
-import { cn } from "@/libs/cn";
-import type {
-	DialogContentProps,
-	DialogDescriptionProps,
-	DialogTitleProps,
-} from "@kobalte/core/dialog";
-import { Dialog as DialogPrimitive } from "@kobalte/core/dialog";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import {
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  Dialog as DialogPrimitive,
+  type DialogContentProps,
+  type DialogDescriptionProps,
+  type DialogTitleProps,
+} from "@kobalte/core/dialog"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const Dialog = DialogPrimitive;
-export const DialogTrigger = DialogPrimitive.Trigger;
+import { cn } from "@/libs/cn"
+
+export const Dialog = DialogPrimitive
+export const DialogTrigger = DialogPrimitive.Trigger
 
 type dialogContentProps<T extends ValidComponent = "div"> = ParentProps<
-	DialogContentProps<T> & {
-		class?: string;
-	}
->;
+  DialogContentProps<T> & {
+    class?: string
+  }
+>
 
 export const DialogContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dialogContentProps<T>>,
+  props: PolymorphicProps<T, dialogContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dialogContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as dialogContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<DialogPrimitive.Portal>
-			<DialogPrimitive.Overlay
-				class={cn(
-					"fixed inset-0 z-50 bg-background/80 data-[expanded]:(animate-in fade-in-0) data-[closed]:(animate-out fade-out-0)",
-				)}
-				{...rest}
-			/>
-			<DialogPrimitive.Content
-				class={cn(
-					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-48% duration-200) data-[closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-48% duration-200) md:w-full sm:rounded-lg",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:(outline-none ring-1.5 ring-ring ring-offset-2) disabled:pointer-events-none bg-inherit transition-property-[opacity,box-shadow]">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M18 6L6 18M6 6l12 12"
-						/>
-						<title>Close</title>
-					</svg>
-				</DialogPrimitive.CloseButton>
-			</DialogPrimitive.Content>
-		</DialogPrimitive.Portal>
-	);
-};
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        class={cn(
+          "bg-background/80 data-[expanded]:(animate-in fade-in-0) data-[closed]:(animate-out fade-out-0) fixed inset-0 z-50"
+        )}
+        {...rest}
+      />
+      <DialogPrimitive.Content
+        class={cn(
+          "bg-background data-[expanded]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-48% duration-200) data-[closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-48% duration-200) fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <DialogPrimitive.CloseButton class="ring-offset-background focus:(outline-none ring-1.5 ring-ring ring-offset-2) transition-property-[opacity,box-shadow] absolute right-4 top-4 rounded-sm bg-inherit opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18 6L6 18M6 6l12 12"
+            />
+            <title>Close</title>
+          </svg>
+        </DialogPrimitive.CloseButton>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+}
 
 type dialogTitleProps<T extends ValidComponent = "h2"> = DialogTitleProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const DialogTitle = <T extends ValidComponent = "h2">(
-	props: PolymorphicProps<T, dialogTitleProps<T>>,
+  props: PolymorphicProps<T, dialogTitleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dialogTitleProps, ["class"]);
+  const [local, rest] = splitProps(props as dialogTitleProps, ["class"])
 
-	return (
-		<DialogPrimitive.Title
-			class={cn("text-lg font-semibold text-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DialogPrimitive.Title
+      class={cn("text-foreground text-lg font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dialogDescriptionProps<T extends ValidComponent = "p"> =
-	DialogDescriptionProps<T> & {
-		class?: string;
-	};
+  DialogDescriptionProps<T> & {
+    class?: string
+  }
 
 export const DialogDescription = <T extends ValidComponent = "p">(
-	props: PolymorphicProps<T, dialogDescriptionProps<T>>,
+  props: PolymorphicProps<T, dialogDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dialogDescriptionProps, ["class"]);
+  const [local, rest] = splitProps(props as dialogDescriptionProps, ["class"])
 
-	return (
-		<DialogPrimitive.Description
-			class={cn("text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DialogPrimitive.Description
+      class={cn("text-muted-foreground text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DialogHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn(
-				"flex flex-col space-y-2 text-center sm:text-left",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const DialogFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn(
-				"flex flex-col-reverse sm:(flex-row justify-end space-x-2)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn(
+        "sm:(flex-row space-x-2) flex flex-col-reverse justify-end",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/drawer.tsx b/packages/unocss/ui/drawer.tsx
index 8c37d7dc..99ff17fa 100644
--- a/packages/unocss/ui/drawer.tsx
+++ b/packages/unocss/ui/drawer.tsx
@@ -1,135 +1,141 @@
-import { cn } from "@/libs/cn";
-import type {
-	ContentProps,
-	DescriptionProps,
-	DynamicProps,
-	LabelProps,
-} from "@corvu/drawer";
-import DrawerPrimitive from "@corvu/drawer";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { Show, mergeProps, splitProps } from "solid-js";
+import {
+  Show,
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import DrawerPrimitive, {
+  type ContentProps,
+  type DescriptionProps,
+  type DynamicProps,
+  type LabelProps,
+} from "@corvu/drawer"
 
-export const Drawer = DrawerPrimitive;
-export const DrawerTrigger = DrawerPrimitive.Trigger;
-export const DrawerClose = DrawerPrimitive.Close;
+import { cn } from "@/libs/cn"
+
+export const Drawer = DrawerPrimitive
+export const DrawerTrigger = DrawerPrimitive.Trigger
+export const DrawerClose = DrawerPrimitive.Close
 
 type drawerContentProps<T extends ValidComponent = "div"> = ParentProps<
-	ContentProps<T> & {
-		class?: string;
-		withHandle?: boolean;
-	}
->;
+  ContentProps<T> & {
+    class?: string
+    withHandle?: boolean
+  }
+>
 
 export const DrawerContent = <T extends ValidComponent = "div">(
-	props: DynamicProps<T, drawerContentProps<T>>,
+  props: DynamicProps<T, drawerContentProps<T>>
 ) => {
-	const ctx = DrawerPrimitive.useContext();
-	const merge = mergeProps(
-		{ withHandle: ctx.side() === "bottom" } as drawerContentProps,
-		props,
-	);
-	const [local, rest] = splitProps(merge, ["class", "children", "withHandle"]);
+  const ctx = DrawerPrimitive.useContext()
+  const merge = mergeProps(
+    { withHandle: ctx.side() === "bottom" } as drawerContentProps,
+    props
+  )
+  const [local, rest] = splitProps(merge, ["class", "children", "withHandle"])
 
-	return (
-		<DrawerPrimitive.Portal>
-			<DrawerPrimitive.Overlay
-				class="fixed inset-0 z-50 data-[transitioning]:(transition-[background-color] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)])"
-				style={{
-					"background-color": `rgb(0 0 0 / ${0.6 * ctx.openPercentage()})`,
-				}}
-			/>
-			<DrawerPrimitive.Content
-				class={cn(
-					"fixed z-50 flex h-auto border-border bg-background data-[transitioning]:(transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]) md:select-none after:(absolute bg-inherit)",
-					ctx.side() === "right" && [
-						"inset-y-0 right-0 rounded-l-lg border-l pl-4",
-						"after:(inset-y-0 left-[calc(100%-1px)] after:w-1/2)",
-					],
-					ctx.side() === "bottom" && [
-						"inset-x-0 bottom-0 rounded-t-lg border-t pt-4 flex-col",
-						"after:(inset-x-0 top-[calc(100%-1px)] after:h-1/2)",
-					],
-					ctx.side() === "left" && [
-						"inset-y-0 left-0 rounded-r-lg border-r pr-4 flex-row-reverse",
-						"after:(inset-y-0 right-[calc(100%-1px)] after:w-1/2)",
-					],
-					ctx.side() === "top" && [
-						"inset-x-0 top-0 rounded-b-lg border-b pb-4 flex-col-reverse",
-						"after:(inset-x-0 bottom-[calc(100%-1px)] after:h-1/2)",
-					],
-					local.class,
-				)}
-				{...rest}
-			>
-				<Show when={local.withHandle}>
-					<div
-						class={cn(
-							"rounded-full bg-muted shrink-0 self-center",
-							ctx.side() === "right" && "h-10 w-1",
-							ctx.side() === "bottom" && "h-1 w-10",
-							ctx.side() === "left" && "h-10 w-1",
-							ctx.side() === "top" && "h-1 w-10",
-						)}
-					/>
-				</Show>
-				{local.children}
-			</DrawerPrimitive.Content>
-		</DrawerPrimitive.Portal>
-	);
-};
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Overlay
+        class="data-[transitioning]:(transition-[background-color] ease-[cubic-bezier(0.32,0.72,0,1)]) fixed inset-0 z-50 duration-500"
+        style={{
+          "background-color": `rgb(0 0 0 / ${0.6 * ctx.openPercentage()})`,
+        }}
+      />
+      <DrawerPrimitive.Content
+        class={cn(
+          "border-border bg-background data-[transitioning]:(transition-transform ease-[cubic-bezier(0.32,0.72,0,1)]) after:(absolute bg-inherit) fixed z-50 flex h-auto duration-500 md:select-none",
+          ctx.side() === "right" && [
+            "inset-y-0 right-0 rounded-l-lg border-l pl-4",
+            "after:(inset-y-0 after:w-1/2) left-[calc(100%-1px)]",
+          ],
+          ctx.side() === "bottom" && [
+            "inset-x-0 bottom-0 flex-col rounded-t-lg border-t pt-4",
+            "after:(inset-x-0 after:h-1/2) top-[calc(100%-1px)]",
+          ],
+          ctx.side() === "left" && [
+            "inset-y-0 left-0 flex-row-reverse rounded-r-lg border-r pr-4",
+            "after:(inset-y-0 after:w-1/2) right-[calc(100%-1px)]",
+          ],
+          ctx.side() === "top" && [
+            "inset-x-0 top-0 flex-col-reverse rounded-b-lg border-b pb-4",
+            "after:(inset-x-0 after:h-1/2) bottom-[calc(100%-1px)]",
+          ],
+          local.class
+        )}
+        {...rest}
+      >
+        <Show when={local.withHandle}>
+          <div
+            class={cn(
+              "bg-muted shrink-0 self-center rounded-full",
+              ctx.side() === "right" && "h-10 w-1",
+              ctx.side() === "bottom" && "h-1 w-10",
+              ctx.side() === "left" && "h-10 w-1",
+              ctx.side() === "top" && "h-1 w-10"
+            )}
+          />
+        </Show>
+        {local.children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  )
+}
 
 export const DrawerHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn("grid gap-1.5 p-4 text-center sm:text-left", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn("grid gap-1.5 p-4 text-center sm:text-left", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DrawerFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div class={cn("mt-auto flex flex-col gap-2 p-4", local.class)} {...rest} />
-	);
-};
+  return (
+    <div class={cn("mt-auto flex flex-col gap-2 p-4", local.class)} {...rest} />
+  )
+}
 
 type DrawerLabelProps = LabelProps & {
-	class?: string;
-};
+  class?: string
+}
 
 export const DrawerLabel = <T extends ValidComponent = "h2">(
-	props: DynamicProps<T, DrawerLabelProps>,
+  props: DynamicProps<T, DrawerLabelProps>
 ) => {
-	const [local, rest] = splitProps(props as DrawerLabelProps, ["class"]);
+  const [local, rest] = splitProps(props as DrawerLabelProps, ["class"])
 
-	return (
-		<DrawerPrimitive.Label
-			class={cn(
-				"text-lg font-semibold leading-none tracking-tight",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DrawerPrimitive.Label
+      class={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type DrawerDescriptionProps = DescriptionProps & {
-	class?: string;
-};
+  class?: string
+}
 
 export const DrawerDescription = <T extends ValidComponent = "p">(
-	props: DynamicProps<T, DrawerDescriptionProps>,
+  props: DynamicProps<T, DrawerDescriptionProps>
 ) => {
-	const [local, rest] = splitProps(props as DrawerDescriptionProps, ["class"]);
+  const [local, rest] = splitProps(props as DrawerDescriptionProps, ["class"])
 
-	return (
-		<DrawerPrimitive.Description
-			class={cn("text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <DrawerPrimitive.Description
+      class={cn("text-muted-foreground text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/dropdown-menu.tsx b/packages/unocss/ui/dropdown-menu.tsx
index ede5cdc7..248f8a71 100644
--- a/packages/unocss/ui/dropdown-menu.tsx
+++ b/packages/unocss/ui/dropdown-menu.tsx
@@ -1,320 +1,324 @@
-import { cn } from "@/libs/cn";
-import type {
-	DropdownMenuCheckboxItemProps,
-	DropdownMenuContentProps,
-	DropdownMenuGroupLabelProps,
-	DropdownMenuItemLabelProps,
-	DropdownMenuItemProps,
-	DropdownMenuRadioItemProps,
-	DropdownMenuRootProps,
-	DropdownMenuSeparatorProps,
-	DropdownMenuSubTriggerProps,
-} from "@kobalte/core/dropdown-menu";
-import { DropdownMenu as DropdownMenuPrimitive } from "@kobalte/core/dropdown-menu";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+import {
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  DropdownMenu as DropdownMenuPrimitive,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuGroupLabelProps,
+  type DropdownMenuItemLabelProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuRootProps,
+  type DropdownMenuSeparatorProps,
+  type DropdownMenuSubTriggerProps,
+} from "@kobalte/core/dropdown-menu"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/libs/cn"
+
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 export const DropdownMenu = (props: DropdownMenuRootProps) => {
-	const merge = mergeProps<DropdownMenuRootProps[]>(
-		{
-			gutter: 4,
-			flip: false,
-		},
-		props,
-	);
+  const merge = mergeProps<DropdownMenuRootProps[]>(
+    {
+      gutter: 4,
+      flip: false,
+    },
+    props
+  )
 
-	return <DropdownMenuPrimitive {...merge} />;
-};
+  return <DropdownMenuPrimitive {...merge} />
+}
 
 type dropdownMenuContentProps<T extends ValidComponent = "div"> =
-	DropdownMenuContentProps<T> & {
-		class?: string;
-	};
+  DropdownMenuContentProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuContentProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuContentProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Portal>
-			<DropdownMenuPrimitive.Content
-				class={cn(
-					"min-w-8rem z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) focus-visible:(outline-none ring-1.5 ring-ring) transition-shadow",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</DropdownMenuPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuContentProps, ["class"])
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        class={cn(
+          "min-w-8rem bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) focus-visible:(outline-none ring-1.5 ring-ring) z-50 overflow-hidden rounded-md border p-1 shadow-md transition-shadow",
+          local.class
+        )}
+        {...rest}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
 
 type dropdownMenuItemProps<T extends ValidComponent = "div"> =
-	DropdownMenuItemProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  DropdownMenuItemProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const DropdownMenuItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuItemProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuItemProps, [
-		"class",
-		"inset",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) gap-2",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuItemProps, [
+    "class",
+    "inset",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.Item
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuGroupLabelProps<T extends ValidComponent = "span"> =
-	DropdownMenuGroupLabelProps<T> & {
-		class?: string;
-	};
+  DropdownMenuGroupLabelProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuGroupLabel = <T extends ValidComponent = "span">(
-	props: PolymorphicProps<T, dropdownMenuGroupLabelProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuGroupLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuGroupLabelProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.GroupLabel
-			as="div"
-			class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuGroupLabelProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.GroupLabel
+      as="div"
+      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuItemLabelProps<T extends ValidComponent = "div"> =
-	DropdownMenuItemLabelProps<T> & {
-		class?: string;
-	};
+  DropdownMenuItemLabelProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuItemLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuItemLabelProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuItemLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuItemLabelProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.ItemLabel
-			as="div"
-			class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuItemLabelProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.ItemLabel
+      as="div"
+      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
-	DropdownMenuSeparatorProps<T> & {
-		class?: string;
-	};
+  DropdownMenuSeparatorProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, dropdownMenuSeparatorProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuSeparatorProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Separator
-			class={cn("-mx-1 my-1 h-px bg-muted", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuSeparatorProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.Separator
+      class={cn("bg-muted -mx-1 my-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const DropdownMenuShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<span
-			class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <span
+      class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type dropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
-	ParentProps<
-		DropdownMenuSubTriggerProps<T> & {
-			class?: string;
-		}
-	>;
+  ParentProps<
+    DropdownMenuSubTriggerProps<T> & {
+      class?: string
+    }
+  >
 
 export const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuSubTriggerProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuSubTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuSubTriggerProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.SubTrigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[expanded]:bg-accent",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-				class="ml-auto h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Arrow</title>
-			</svg>
-		</DropdownMenuPrimitive.SubTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuSubTriggerProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      class={cn(
+        "focus:bg-accent data-[expanded]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="ml-auto h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Arrow</title>
+      </svg>
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
 
 type dropdownMenuSubContentProps<T extends ValidComponent = "div"> =
-	DropdownMenuSubTriggerProps<T> & {
-		class?: string;
-	};
+  DropdownMenuSubTriggerProps<T> & {
+    class?: string
+  }
 
 export const DropdownMenuSubContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuSubContentProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuSubContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuSubContentProps, [
-		"class",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.Portal>
-			<DropdownMenuPrimitive.SubContent
-				class={cn(
-					"min-w-8rem z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</DropdownMenuPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuSubContentProps, [
+    "class",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        class={cn(
+          "min-w-8rem bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 overflow-hidden rounded-md border p-1 shadow-md",
+          local.class
+        )}
+        {...rest}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
 
 type dropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
-	ParentProps<
-		DropdownMenuCheckboxItemProps<T> & {
-			class?: string;
-		}
-	>;
+  ParentProps<
+    DropdownMenuCheckboxItemProps<T> & {
+      class?: string
+    }
+  >
 
 export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuCheckboxItemProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuCheckboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuCheckboxItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.CheckboxItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checkbox</title>
-				</svg>
-			</DropdownMenuPrimitive.ItemIndicator>
-			{props.children}
-		</DropdownMenuPrimitive.CheckboxItem>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuCheckboxItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+        local.class
+      )}
+      {...rest}
+    >
+      <DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checkbox</title>
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+      {props.children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
 
 type dropdownMenuRadioItemProps<T extends ValidComponent = "div"> = ParentProps<
-	DropdownMenuRadioItemProps<T> & {
-		class?: string;
-	}
->;
+  DropdownMenuRadioItemProps<T> & {
+    class?: string
+  }
+>
 
 export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, dropdownMenuRadioItemProps<T>>,
+  props: PolymorphicProps<T, dropdownMenuRadioItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as dropdownMenuRadioItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<DropdownMenuPrimitive.RadioItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-2 w-2"
-				>
-					<g
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M0 0h24v24H0z" />
-						<path
-							fill="currentColor"
-							d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
-						/>
-					</g>
-					<title>Radio</title>
-				</svg>
-			</DropdownMenuPrimitive.ItemIndicator>
-			{props.children}
-		</DropdownMenuPrimitive.RadioItem>
-	);
-};
+  const [local, rest] = splitProps(props as dropdownMenuRadioItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+        local.class
+      )}
+      {...rest}
+    >
+      <DropdownMenuPrimitive.ItemIndicator class="absolute left-2 inline-flex h-4 w-4 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-2 w-2"
+        >
+          <g
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
+            />
+          </g>
+          <title>Radio</title>
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+      {props.children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
diff --git a/packages/unocss/ui/hover-card.tsx b/packages/unocss/ui/hover-card.tsx
index 1f233f5e..e7403552 100644
--- a/packages/unocss/ui/hover-card.tsx
+++ b/packages/unocss/ui/hover-card.tsx
@@ -1,32 +1,34 @@
-import { cn } from "@/libs/cn";
-import type { HoverCardContentProps } from "@kobalte/core/hover-card";
-import { HoverCard as HoverCardPrimitive } from "@kobalte/core/hover-card";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import {
+  HoverCard as HoverCardPrimitive,
+  type HoverCardContentProps,
+} from "@kobalte/core/hover-card"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
 
-export const HoverCard = HoverCardPrimitive;
-export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+import { cn } from "@/libs/cn"
+
+export const HoverCard = HoverCardPrimitive
+export const HoverCardTrigger = HoverCardPrimitive.Trigger
 
 type hoverCardContentProps<T extends ValidComponent = "div"> =
-	HoverCardContentProps<T> & {
-		class?: string;
-	};
+  HoverCardContentProps<T> & {
+    class?: string
+  }
 
 export const HoverCardContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, hoverCardContentProps<T>>,
+  props: PolymorphicProps<T, hoverCardContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as hoverCardContentProps, ["class"]);
+  const [local, rest] = splitProps(props as hoverCardContentProps, ["class"])
 
-	return (
-		<HoverCardPrimitive.Portal>
-			<HoverCardPrimitive.Content
-				class={cn(
-					"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</HoverCardPrimitive.Portal>
-	);
-};
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 w-64 rounded-md border p-4 shadow-md outline-none",
+          local.class
+        )}
+        {...rest}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
diff --git a/packages/unocss/ui/menubar.tsx b/packages/unocss/ui/menubar.tsx
index 06285a5e..7f72c6c1 100644
--- a/packages/unocss/ui/menubar.tsx
+++ b/packages/unocss/ui/menubar.tsx
@@ -1,356 +1,362 @@
-import { cn } from "@/libs/cn";
-import type {
-	MenubarCheckboxItemProps,
-	MenubarContentProps,
-	MenubarItemLabelProps,
-	MenubarItemProps,
-	MenubarMenuProps,
-	MenubarRadioItemProps,
-	MenubarRootProps,
-	MenubarSeparatorProps,
-	MenubarSubContentProps,
-	MenubarSubTriggerProps,
-	MenubarTriggerProps,
-} from "@kobalte/core/menubar";
-import { Menubar as MenubarPrimitive } from "@kobalte/core/menubar";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ParentProps, ValidComponent } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-
-export const MenubarSub = MenubarPrimitive.Sub;
-export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+import {
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  Menubar as MenubarPrimitive,
+  type MenubarCheckboxItemProps,
+  type MenubarContentProps,
+  type MenubarItemLabelProps,
+  type MenubarItemProps,
+  type MenubarMenuProps,
+  type MenubarRadioItemProps,
+  type MenubarRootProps,
+  type MenubarSeparatorProps,
+  type MenubarSubContentProps,
+  type MenubarSubTriggerProps,
+  type MenubarTriggerProps,
+} from "@kobalte/core/menubar"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/libs/cn"
+
+export const MenubarSub = MenubarPrimitive.Sub
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup
 
 type menubarProps<T extends ValidComponent = "div"> = MenubarRootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const Menubar = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarProps<T>>,
+  props: PolymorphicProps<T, menubarProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarProps, ["class"]);
-
-	return (
-		<MenubarPrimitive
-			class={cn(
-				"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarProps, ["class"])
+
+  return (
+    <MenubarPrimitive
+      class={cn(
+        "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const MenubarMenu = (props: MenubarMenuProps) => {
-	const merge = mergeProps<MenubarMenuProps[]>(
-		{
-			gutter: 8,
-			shift: -4,
-			flip: false,
-		},
-		props,
-	);
-
-	return <MenubarPrimitive.Menu {...merge} />;
-};
+  const merge = mergeProps<MenubarMenuProps[]>(
+    {
+      gutter: 8,
+      shift: -4,
+      flip: false,
+    },
+    props
+  )
+
+  return <MenubarPrimitive.Menu {...merge} />
+}
 
 type menubarTriggerProps<T extends ValidComponent = "button"> =
-	MenubarTriggerProps<T> & {
-		class?: string;
-	};
+  MenubarTriggerProps<T> & {
+    class?: string
+  }
 
 export const MenubarTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, menubarTriggerProps<T>>,
+  props: PolymorphicProps<T, menubarTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarTriggerProps, ["class"]);
-
-	return (
-		<MenubarPrimitive.Trigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:(bg-accent text-accent-foreground) data-[expanded]:(bg-accent text-accent-foreground)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarTriggerProps, ["class"])
+
+  return (
+    <MenubarPrimitive.Trigger
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[expanded]:(bg-accent text-accent-foreground) flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type menubarSubTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	MenubarSubTriggerProps<T> & {
-		class?: string;
-		inset?: boolean;
-	}
->;
+  MenubarSubTriggerProps<T> & {
+    class?: string
+    inset?: boolean
+  }
+>
 
 export const MenubarSubTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, menubarSubTriggerProps<T>>,
+  props: PolymorphicProps<T, menubarSubTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarSubTriggerProps, [
-		"class",
-		"children",
-		"inset",
-	]);
-
-	return (
-		<MenubarPrimitive.SubTrigger
-			class={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[expanded]:(bg-accent text-accent-foreground)",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-				class="ml-auto h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Arrow</title>
-			</svg>
-		</MenubarPrimitive.SubTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as menubarSubTriggerProps, [
+    "class",
+    "children",
+    "inset",
+  ])
+
+  return (
+    <MenubarPrimitive.SubTrigger
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[expanded]:(bg-accent text-accent-foreground) flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="ml-auto h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Arrow</title>
+      </svg>
+    </MenubarPrimitive.SubTrigger>
+  )
+}
 
 type menubarSubContentProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarSubContentProps<T> & {
-		class?: string;
-	}
->;
+  MenubarSubContentProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarSubContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarSubContentProps<T>>,
+  props: PolymorphicProps<T, menubarSubContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarSubContentProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.Portal>
-			<MenubarPrimitive.SubContent
-				class={cn(
-					"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) outline-none origin-[--kb-menu-content-transform-origin]",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</MenubarPrimitive.SubContent>
-		</MenubarPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as menubarSubContentProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.SubContent
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 min-w-[8rem] origin-[--kb-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-lg outline-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </MenubarPrimitive.SubContent>
+    </MenubarPrimitive.Portal>
+  )
+}
 
 type menubarContentProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarContentProps<T> & {
-		class?: string;
-	}
->;
+  MenubarContentProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarContentProps<T>>,
+  props: PolymorphicProps<T, menubarContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarContentProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.Portal>
-			<MenubarPrimitive.Content
-				class={cn(
-					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) outline-none origin-[--kb-menu-content-transform-origin]",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</MenubarPrimitive.Content>
-		</MenubarPrimitive.Portal>
-	);
-};
+  const [local, rest] = splitProps(props as menubarContentProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 min-w-[12rem] origin-[--kb-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-md outline-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </MenubarPrimitive.Content>
+    </MenubarPrimitive.Portal>
+  )
+}
 
 type menubarItemProps<T extends ValidComponent = "div"> =
-	MenubarItemProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  MenubarItemProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const MenubarItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarItemProps<T>>,
+  props: PolymorphicProps<T, menubarItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarItemProps, [
-		"class",
-		"inset",
-	]);
-
-	return (
-		<MenubarPrimitive.Item
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarItemProps, [
+    "class",
+    "inset",
+  ])
+
+  return (
+    <MenubarPrimitive.Item
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type menubarItemLabelProps<T extends ValidComponent = "div"> =
-	MenubarItemLabelProps<T> & {
-		class?: string;
-		inset?: boolean;
-	};
+  MenubarItemLabelProps<T> & {
+    class?: string
+    inset?: boolean
+  }
 
 export const MenubarItemLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarItemLabelProps<T>>,
+  props: PolymorphicProps<T, menubarItemLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarItemLabelProps, [
-		"class",
-		"inset",
-	]);
-
-	return (
-		<MenubarPrimitive.ItemLabel
-			class={cn(
-				"px-2 py-1.5 text-sm font-semibold",
-				local.inset && "pl-8",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as menubarItemLabelProps, [
+    "class",
+    "inset",
+  ])
+
+  return (
+    <MenubarPrimitive.ItemLabel
+      class={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type menubarSeparatorProps<T extends ValidComponent = "hr"> =
-	MenubarSeparatorProps<T> & {
-		class?: string;
-	};
+  MenubarSeparatorProps<T> & {
+    class?: string
+  }
 
 export const MenubarSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, menubarSeparatorProps<T>>,
+  props: PolymorphicProps<T, menubarSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarSeparatorProps, ["class"]);
+  const [local, rest] = splitProps(props as menubarSeparatorProps, ["class"])
 
-	return (
-		<MenubarPrimitive.Separator
-			class={cn("-mx-1 my-1 h-px bg-muted", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <MenubarPrimitive.Separator
+      class={cn("bg-muted -mx-1 my-1 h-px", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type menubarCheckboxItemProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarCheckboxItemProps<T> & {
-		class?: string;
-	}
->;
+  MenubarCheckboxItemProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarCheckboxItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarCheckboxItemProps<T>>,
+  props: PolymorphicProps<T, menubarCheckboxItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarCheckboxItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.CheckboxItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-4 w-4"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checkbox</title>
-				</svg>
-			</MenubarPrimitive.ItemIndicator>
-			{local.children}
-		</MenubarPrimitive.CheckboxItem>
-	);
-};
+  const [local, rest] = splitProps(props as menubarCheckboxItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.CheckboxItem
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checkbox</title>
+        </svg>
+      </MenubarPrimitive.ItemIndicator>
+      {local.children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
 
 type menubarRadioItemProps<T extends ValidComponent = "div"> = ParentProps<
-	MenubarRadioItemProps<T> & {
-		class?: string;
-	}
->;
+  MenubarRadioItemProps<T> & {
+    class?: string
+  }
+>
 
 export const MenubarRadioItem = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, menubarRadioItemProps<T>>,
+  props: PolymorphicProps<T, menubarRadioItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as menubarRadioItemProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<MenubarPrimitive.RadioItem
-			class={cn(
-				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					class="h-2 w-2"
-				>
-					<g
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<path d="M0 0h24v24H0z" />
-						<path
-							fill="currentColor"
-							d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
-						/>
-					</g>
-					<title>Radio</title>
-				</svg>
-			</MenubarPrimitive.ItemIndicator>
-			{local.children}
-		</MenubarPrimitive.RadioItem>
-	);
-};
+  const [local, rest] = splitProps(props as menubarRadioItemProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <MenubarPrimitive.RadioItem
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <MenubarPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="h-2 w-2"
+        >
+          <g
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <path d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M7 3.34a10 10 0 1 1-4.995 8.984L2 12l.005-.324A10 10 0 0 1 7 3.34"
+            />
+          </g>
+          <title>Radio</title>
+        </svg>
+      </MenubarPrimitive.ItemIndicator>
+      {local.children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
 
 export const MenubarShortcut = (props: ComponentProps<"span">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<span
-			class={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <span
+      class={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/navigation-menu.tsx b/packages/unocss/ui/navigation-menu.tsx
index 06de9222..8b40e2c7 100644
--- a/packages/unocss/ui/navigation-menu.tsx
+++ b/packages/unocss/ui/navigation-menu.tsx
@@ -1,169 +1,168 @@
-import { cn } from "@/libs/cn";
-import type {
-	NavigationMenuContentProps,
-	NavigationMenuRootProps,
-	NavigationMenuTriggerProps,
-} from "@kobalte/core/navigation-menu";
-import { NavigationMenu as NavigationMenuPrimitive } from "@kobalte/core/navigation-menu";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
 import {
-	type ParentProps,
-	Show,
-	type ValidComponent,
-	mergeProps,
-	splitProps,
-} from "solid-js";
+  Show,
+  mergeProps,
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import {
+  NavigationMenu as NavigationMenuPrimitive,
+  type NavigationMenuContentProps,
+  type NavigationMenuRootProps,
+  type NavigationMenuTriggerProps,
+} from "@kobalte/core/navigation-menu"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/libs/cn"
 
-export const NavigationMenuItem = NavigationMenuPrimitive.Menu;
-export const NavigationMenuLink = NavigationMenuPrimitive.Item;
-export const NavigationMenuItemLabel = NavigationMenuPrimitive.ItemLabel;
-export const NavigationMenuDescription =
-	NavigationMenuPrimitive.ItemDescription;
-export const NavigationMenuItemIndicator =
-	NavigationMenuPrimitive.ItemIndicator;
-export const NavigationMenuSub = NavigationMenuPrimitive.Sub;
-export const NavigationMenuSubTrigger = NavigationMenuPrimitive.SubTrigger;
-export const NavigationMenuSubContent = NavigationMenuPrimitive.SubContent;
-export const NavigationMenuRadioGroup = NavigationMenuPrimitive.RadioGroup;
-export const NavigationMenuRadioItem = NavigationMenuPrimitive.RadioItem;
-export const NavigationMenuCheckboxItem = NavigationMenuPrimitive.CheckboxItem;
-export const NavigationMenuSeparator = NavigationMenuPrimitive.Separator;
+export const NavigationMenuItem = NavigationMenuPrimitive.Menu
+export const NavigationMenuLink = NavigationMenuPrimitive.Item
+export const NavigationMenuItemLabel = NavigationMenuPrimitive.ItemLabel
+export const NavigationMenuDescription = NavigationMenuPrimitive.ItemDescription
+export const NavigationMenuItemIndicator = NavigationMenuPrimitive.ItemIndicator
+export const NavigationMenuSub = NavigationMenuPrimitive.Sub
+export const NavigationMenuSubTrigger = NavigationMenuPrimitive.SubTrigger
+export const NavigationMenuSubContent = NavigationMenuPrimitive.SubContent
+export const NavigationMenuRadioGroup = NavigationMenuPrimitive.RadioGroup
+export const NavigationMenuRadioItem = NavigationMenuPrimitive.RadioItem
+export const NavigationMenuCheckboxItem = NavigationMenuPrimitive.CheckboxItem
+export const NavigationMenuSeparator = NavigationMenuPrimitive.Separator
 
 type withArrow = {
-	withArrow?: boolean;
-};
+  withArrow?: boolean
+}
 
 type navigationMenuProps<T extends ValidComponent = "ul"> = ParentProps<
-	NavigationMenuRootProps<T> &
-		withArrow & {
-			class?: string;
-		}
->;
+  NavigationMenuRootProps<T> &
+    withArrow & {
+      class?: string
+    }
+>
 
 export const NavigationMenu = <T extends ValidComponent = "ul">(
-	props: PolymorphicProps<T, navigationMenuProps<T>>,
+  props: PolymorphicProps<T, navigationMenuProps<T>>
 ) => {
-	const merge = mergeProps<navigationMenuProps<T>[]>(
-		{
-			get gutter() {
-				return props.withArrow ? props.gutter : 6;
-			},
-			withArrow: false,
-			flip: false,
-		},
-		props,
-	);
-	const [local, rest] = splitProps(merge as navigationMenuProps, [
-		"class",
-		"children",
-		"withArrow",
-	]);
+  const merge = mergeProps<navigationMenuProps<T>[]>(
+    {
+      get gutter() {
+        return props.withArrow ? props.gutter : 6
+      },
+      withArrow: false,
+      flip: false,
+    },
+    props
+  )
+  const [local, rest] = splitProps(merge as navigationMenuProps, [
+    "class",
+    "children",
+    "withArrow",
+  ])
 
-	return (
-		<NavigationMenuPrimitive
-			class={cn("flex w-max items-center justify-center gap-x-1", local.class)}
-			{...rest}
-		>
-			{local.children}
-			<NavigationMenuPrimitive.Viewport
-				class={cn(
-					"pointer-events-none z-50 overflow-x-clip overflow-y-visible rounded-md border bg-popover text-popover-foreground shadow",
-					"h-[--kb-navigation-menu-viewport-height] w-[--kb-navigation-menu-viewport-width] transition-[width,height] duration-300",
-					"origin-[--kb-menu-content-transform-origin]",
-					"data-[expanded]:(animate-duration-300 animate-in fade-in zoom-in-95)",
-					"data-[closed]:(animate-duration-300 animate-out fade-out zoom-out-95)",
-				)}
-			>
-				<Show when={local.withArrow}>
-					<NavigationMenuPrimitive.Arrow class="transition-transform duration-300" />
-				</Show>
-			</NavigationMenuPrimitive.Viewport>
-		</NavigationMenuPrimitive>
-	);
-};
+  return (
+    <NavigationMenuPrimitive
+      class={cn("flex w-max items-center justify-center gap-x-1", local.class)}
+      {...rest}
+    >
+      {local.children}
+      <NavigationMenuPrimitive.Viewport
+        class={cn(
+          "bg-popover text-popover-foreground pointer-events-none z-50 overflow-x-clip overflow-y-visible rounded-md border shadow",
+          "h-[--kb-navigation-menu-viewport-height] w-[--kb-navigation-menu-viewport-width] transition-[width,height] duration-300",
+          "origin-[--kb-menu-content-transform-origin]",
+          "data-[expanded]:(animate-duration-300 animate-in fade-in zoom-in-95)",
+          "data-[closed]:(animate-duration-300 animate-out fade-out zoom-out-95)"
+        )}
+      >
+        <Show when={local.withArrow}>
+          <NavigationMenuPrimitive.Arrow class="transition-transform duration-300" />
+        </Show>
+      </NavigationMenuPrimitive.Viewport>
+    </NavigationMenuPrimitive>
+  )
+}
 
 type navigationMenuTriggerProps<T extends ValidComponent = "button"> =
-	ParentProps<
-		NavigationMenuTriggerProps<T> &
-			withArrow & {
-				class?: string;
-			}
-	>;
+  ParentProps<
+    NavigationMenuTriggerProps<T> &
+      withArrow & {
+        class?: string
+      }
+  >
 
 export const NavigationMenuTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, navigationMenuTriggerProps<T>>,
+  props: PolymorphicProps<T, navigationMenuTriggerProps<T>>
 ) => {
-	const merge = mergeProps<navigationMenuTriggerProps<T>[]>(
-		{
-			get withArrow() {
-				return props.as === undefined ? true : props.withArrow;
-			},
-		},
-		props,
-	);
-	const [local, rest] = splitProps(merge as navigationMenuTriggerProps, [
-		"class",
-		"children",
-		"withArrow",
-	]);
+  const merge = mergeProps<navigationMenuTriggerProps<T>[]>(
+    {
+      get withArrow() {
+        return props.as === undefined ? true : props.withArrow
+      },
+    },
+    props
+  )
+  const [local, rest] = splitProps(merge as navigationMenuTriggerProps, [
+    "class",
+    "children",
+    "withArrow",
+  ])
 
-	return (
-		<NavigationMenuPrimitive.Trigger
-			class={cn(
-				"inline-flex w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium outline-none transition-colors duration-300 hover:(bg-accent text-accent-foreground) disabled:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<Show when={local.withArrow}>
-				<NavigationMenuPrimitive.Icon
-					class="ml-1 size-3 transition-transform duration-300 data-[expanded]:rotate-180"
-					as="svg"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m6 9l6 6l6-6"
-					/>
-				</NavigationMenuPrimitive.Icon>
-			</Show>
-		</NavigationMenuPrimitive.Trigger>
-	);
-};
+  return (
+    <NavigationMenuPrimitive.Trigger
+      class={cn(
+        "bg-background hover:(bg-accent text-accent-foreground) disabled:(pointer-events-none opacity-50) inline-flex w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-colors duration-300",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Show when={local.withArrow}>
+        <NavigationMenuPrimitive.Icon
+          class="ml-1 size-3 transition-transform duration-300 data-[expanded]:rotate-180"
+          as="svg"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m6 9l6 6l6-6"
+          />
+        </NavigationMenuPrimitive.Icon>
+      </Show>
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
 
 type navigationMenuContentProps<T extends ValidComponent = "ul"> = ParentProps<
-	NavigationMenuContentProps<T> & {
-		class?: string;
-	}
->;
+  NavigationMenuContentProps<T> & {
+    class?: string
+  }
+>
 
 export const NavigationMenuContent = <T extends ValidComponent = "ul">(
-	props: PolymorphicProps<T, navigationMenuContentProps<T>>,
+  props: PolymorphicProps<T, navigationMenuContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as navigationMenuContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as navigationMenuContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<NavigationMenuPrimitive.Portal>
-			<NavigationMenuPrimitive.Content
-				class={cn(
-					"absolute left-0 top-0 p-4 outline-none",
-					"data-[motion^=from-]:(animate-duration-300 animate-in fade-in) data-[motion=from-end]:slide-in-r-52 data-[motion=from-start]:slide-in-l-52",
-					"data-[motion^=to-]:(animate-duration-300 animate-out fade-out) data-[motion=to-end]:slide-out-r-52 data-[motion=to-start]:slide-out-l-52",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</NavigationMenuPrimitive.Content>
-		</NavigationMenuPrimitive.Portal>
-	);
-};
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Content
+        class={cn(
+          "absolute left-0 top-0 p-4 outline-none",
+          "data-[motion^=from-]:(animate-duration-300 animate-in fade-in) data-[motion=from-end]:slide-in-r-52 data-[motion=from-start]:slide-in-l-52",
+          "data-[motion^=to-]:(animate-duration-300 animate-out fade-out) data-[motion=to-end]:slide-out-r-52 data-[motion=to-start]:slide-out-l-52",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </NavigationMenuPrimitive.Content>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
diff --git a/packages/unocss/ui/number-field.tsx b/packages/unocss/ui/number-field.tsx
index 19870c5e..158e19d5 100644
--- a/packages/unocss/ui/number-field.tsx
+++ b/packages/unocss/ui/number-field.tsx
@@ -1,214 +1,220 @@
-import { cn } from "@/libs/cn";
-import type {
-	NumberFieldDecrementTriggerProps,
-	NumberFieldDescriptionProps,
-	NumberFieldErrorMessageProps,
-	NumberFieldIncrementTriggerProps,
-	NumberFieldInputProps,
-	NumberFieldLabelProps,
-	NumberFieldRootProps,
-} from "@kobalte/core/number-field";
-import { NumberField as NumberFieldPrimitive } from "@kobalte/core/number-field";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ComponentProps, ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-import { textfieldLabel } from "./textfield";
-
-export const NumberFieldHiddenInput = NumberFieldPrimitive.HiddenInput;
+import {
+  splitProps,
+  type ComponentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  NumberField as NumberFieldPrimitive,
+  type NumberFieldDecrementTriggerProps,
+  type NumberFieldDescriptionProps,
+  type NumberFieldErrorMessageProps,
+  type NumberFieldIncrementTriggerProps,
+  type NumberFieldInputProps,
+  type NumberFieldLabelProps,
+  type NumberFieldRootProps,
+} from "@kobalte/core/number-field"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/libs/cn"
+
+import { textfieldLabel } from "./textfield"
+
+export const NumberFieldHiddenInput = NumberFieldPrimitive.HiddenInput
 
 type numberFieldLabelProps<T extends ValidComponent = "div"> =
-	NumberFieldLabelProps<T> & {
-		class?: string;
-	};
+  NumberFieldLabelProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldLabelProps<T>>,
+  props: PolymorphicProps<T, numberFieldLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldLabelProps, ["class"]);
+  const [local, rest] = splitProps(props as numberFieldLabelProps, ["class"])
 
-	return (
-		<NumberFieldPrimitive.Label
-			class={cn(textfieldLabel({ label: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <NumberFieldPrimitive.Label
+      class={cn(textfieldLabel({ label: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldDescriptionProps<T extends ValidComponent = "div"> =
-	NumberFieldDescriptionProps<T> & {
-		class?: string;
-	};
+  NumberFieldDescriptionProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldDescription = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldDescriptionProps<T>>,
+  props: PolymorphicProps<T, numberFieldDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldDescriptionProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.Description
-			class={cn(
-				textfieldLabel({ description: true, label: false }),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldDescriptionProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.Description
+      class={cn(
+        textfieldLabel({ description: true, label: false }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldErrorMessageProps<T extends ValidComponent = "div"> =
-	NumberFieldErrorMessageProps<T> & {
-		class?: string;
-	};
+  NumberFieldErrorMessageProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldErrorMessage = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldErrorMessageProps<T>>,
+  props: PolymorphicProps<T, numberFieldErrorMessageProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldErrorMessageProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.ErrorMessage
-			class={cn(textfieldLabel({ error: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldErrorMessageProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.ErrorMessage
+      class={cn(textfieldLabel({ error: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldProps<T extends ValidComponent = "div"> =
-	NumberFieldRootProps<T> & {
-		class?: string;
-	};
+  NumberFieldRootProps<T> & {
+    class?: string
+  }
 
 export const NumberField = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, numberFieldProps<T>>,
+  props: PolymorphicProps<T, numberFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldProps, ["class"]);
+  const [local, rest] = splitProps(props as numberFieldProps, ["class"])
 
-	return (
-		<NumberFieldPrimitive class={cn("grid gap-1.5", local.class)} {...rest} />
-	);
-};
+  return (
+    <NumberFieldPrimitive class={cn("grid gap-1.5", local.class)} {...rest} />
+  )
+}
 
 export const NumberFieldGroup = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			class={cn(
-				"relative focus-within:(outline-none ring-1.5 ring-ring) transition-shadow rounded-md",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      class={cn(
+        "focus-within:(outline-none ring-1.5 ring-ring) relative rounded-md transition-shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldInputProps<T extends ValidComponent = "input"> =
-	NumberFieldInputProps<T> & {
-		class?: string;
-	};
+  NumberFieldInputProps<T> & {
+    class?: string
+  }
 
 export const NumberFieldInput = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, VoidProps<numberFieldInputProps<T>>>,
+  props: PolymorphicProps<T, VoidProps<numberFieldInputProps<T>>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldInputProps, ["class"]);
-
-	return (
-		<NumberFieldPrimitive.Input
-			class={cn(
-				"flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-sm text-center shadow-sm placeholder:text-muted-foreground disabled:(cursor-not-allowed opacity-50) focus-visible:outline-none",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldInputProps, ["class"])
+
+  return (
+    <NumberFieldPrimitive.Input
+      class={cn(
+        "border-input placeholder:text-muted-foreground disabled:(cursor-not-allowed opacity-50) flex h-9 w-full rounded-md border bg-transparent px-10 py-1 text-center text-sm shadow-sm focus-visible:outline-none",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type numberFieldDecrementTriggerProps<T extends ValidComponent = "button"> =
-	VoidProps<
-		NumberFieldDecrementTriggerProps<T> & {
-			class?: string;
-		}
-	>;
+  VoidProps<
+    NumberFieldDecrementTriggerProps<T> & {
+      class?: string
+    }
+  >
 
 export const NumberFieldDecrementTrigger = <
-	T extends ValidComponent = "button",
+  T extends ValidComponent = "button",
 >(
-	props: PolymorphicProps<T, VoidProps<numberFieldDecrementTriggerProps<T>>>,
+  props: PolymorphicProps<T, VoidProps<numberFieldDecrementTriggerProps<T>>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldDecrementTriggerProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.DecrementTrigger
-			class={cn(
-				"absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:(cursor-not-allowed opacity-20)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M5 12h14"
-				/>
-				<title>Decrease number</title>
-			</svg>
-		</NumberFieldPrimitive.DecrementTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldDecrementTriggerProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.DecrementTrigger
+      class={cn(
+        "disabled:(cursor-not-allowed opacity-20) absolute left-0 top-1/2 -translate-y-1/2 p-3",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h14"
+        />
+        <title>Decrease number</title>
+      </svg>
+    </NumberFieldPrimitive.DecrementTrigger>
+  )
+}
 
 type numberFieldIncrementTriggerProps<T extends ValidComponent = "button"> =
-	VoidProps<
-		NumberFieldIncrementTriggerProps<T> & {
-			class?: string;
-		}
-	>;
+  VoidProps<
+    NumberFieldIncrementTriggerProps<T> & {
+      class?: string
+    }
+  >
 
 export const NumberFieldIncrementTrigger = <
-	T extends ValidComponent = "button",
+  T extends ValidComponent = "button",
 >(
-	props: PolymorphicProps<T, numberFieldIncrementTriggerProps<T>>,
+  props: PolymorphicProps<T, numberFieldIncrementTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as numberFieldIncrementTriggerProps, [
-		"class",
-	]);
-
-	return (
-		<NumberFieldPrimitive.IncrementTrigger
-			class={cn(
-				"absolute top-1/2 -translate-y-1/2 right-0 disabled:(cursor-not-allowed opacity-20) p-3",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 5v14m-7-7h14"
-				/>
-				<title>Increase number</title>
-			</svg>
-		</NumberFieldPrimitive.IncrementTrigger>
-	);
-};
+  const [local, rest] = splitProps(props as numberFieldIncrementTriggerProps, [
+    "class",
+  ])
+
+  return (
+    <NumberFieldPrimitive.IncrementTrigger
+      class={cn(
+        "disabled:(cursor-not-allowed opacity-20) absolute right-0 top-1/2 -translate-y-1/2 p-3",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 5v14m-7-7h14"
+        />
+        <title>Increase number</title>
+      </svg>
+    </NumberFieldPrimitive.IncrementTrigger>
+  )
+}
diff --git a/packages/unocss/ui/otp-field.tsx b/packages/unocss/ui/otp-field.tsx
index 598d0486..b925211b 100644
--- a/packages/unocss/ui/otp-field.tsx
+++ b/packages/unocss/ui/otp-field.tsx
@@ -1,83 +1,90 @@
-import { cn } from "@/libs/cn";
-import type { DynamicProps, RootProps } from "@corvu/otp-field";
-import OTPFieldPrimitive from "@corvu/otp-field";
-import type { ComponentProps, ValidComponent } from "solid-js";
-import { Show, splitProps } from "solid-js";
+import {
+  Show,
+  splitProps,
+  type ComponentProps,
+  type ValidComponent,
+} from "solid-js"
+import OTPFieldPrimitive, {
+  type DynamicProps,
+  type RootProps,
+} from "@corvu/otp-field"
 
-export const OTPFieldInput = OTPFieldPrimitive.Input;
+import { cn } from "@/libs/cn"
+
+export const OTPFieldInput = OTPFieldPrimitive.Input
 
 type OTPFieldProps<T extends ValidComponent = "div"> = RootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const OTPField = <T extends ValidComponent = "div">(
-	props: DynamicProps<T, OTPFieldProps<T>>,
+  props: DynamicProps<T, OTPFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<OTPFieldPrimitive
-			class={cn(
-				"flex items-center gap-2 has-[:disabled]:opacity-50",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <OTPFieldPrimitive
+      class={cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const OTPFieldGroup = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return <div class={cn("flex items-center", local.class)} {...rest} />;
-};
+  return <div class={cn("flex items-center", local.class)} {...rest} />
+}
 
 export const OTPFieldSeparator = (props: ComponentProps<"div">) => {
-	return (
-		// biome-ignore lint/a11y/useSemanticElements:
-		<div role="separator" tabIndex={0} {...props}>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-4"
-				viewBox="0 0 15 15"
-			>
-				<title>Separator</title>
-				<path
-					fill="currentColor"
-					fill-rule="evenodd"
-					d="M5 7.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-	);
-};
+  return (
+    // biome-ignore lint/a11y/useSemanticElements:
+    <div role="separator" tabIndex={0} {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="size-4"
+        viewBox="0 0 15 15"
+      >
+        <title>Separator</title>
+        <path
+          fill="currentColor"
+          fill-rule="evenodd"
+          d="M5 7.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  )
+}
 
 export const OTPFieldSlot = (
-	props: ComponentProps<"div"> & { index: number },
+  props: ComponentProps<"div"> & { index: number }
 ) => {
-	const [local, rest] = splitProps(props, ["class", "index"]);
-	const context = OTPFieldPrimitive.useContext();
-	const char = () => context.value()[local.index];
-	const hasFakeCaret = () =>
-		context.value().length === local.index && context.isInserting();
-	const isActive = () => context.activeSlots().includes(local.index);
+  const [local, rest] = splitProps(props, ["class", "index"])
+  const context = OTPFieldPrimitive.useContext()
+  const char = () => context.value()[local.index]
+  const hasFakeCaret = () =>
+    context.value().length === local.index && context.isInserting()
+  const isActive = () => context.activeSlots().includes(local.index)
 
-	return (
-		<div
-			class={cn(
-				"relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:(rounded-l-md border-l) last:rounded-r-md",
-				isActive() && "z-10 ring-1.5 ring-ring",
-				local.class,
-			)}
-			{...rest}
-		>
-			{char()}
-			<Show when={hasFakeCaret()}>
-				<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-					<div class="h-4 w-px animate-caret-blink bg-foreground" />
-				</div>
-			</Show>
-		</div>
-	);
-};
+  return (
+    <div
+      class={cn(
+        "border-input first:(rounded-l-md border-l) relative flex size-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all last:rounded-r-md",
+        isActive() && "ring-1.5 ring-ring z-10",
+        local.class
+      )}
+      {...rest}
+    >
+      {char()}
+      <Show when={hasFakeCaret()}>
+        <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div class="animate-caret-blink bg-foreground h-4 w-px" />
+        </div>
+      </Show>
+    </div>
+  )
+}
diff --git a/packages/unocss/ui/pagination.tsx b/packages/unocss/ui/pagination.tsx
index 961655c3..a93d808b 100644
--- a/packages/unocss/ui/pagination.tsx
+++ b/packages/unocss/ui/pagination.tsx
@@ -1,194 +1,200 @@
-import { cn } from "@/libs/cn";
-import type {
-	PaginationEllipsisProps,
-	PaginationItemProps,
-	PaginationPreviousProps,
-	PaginationRootProps,
-} from "@kobalte/core/pagination";
-import { Pagination as PaginationPrimitive } from "@kobalte/core/pagination";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { VariantProps } from "class-variance-authority";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-import { buttonVariants } from "./button";
-
-export const PaginationItems = PaginationPrimitive.Items;
+import {
+  mergeProps,
+  splitProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import {
+  Pagination as PaginationPrimitive,
+  type PaginationEllipsisProps,
+  type PaginationItemProps,
+  type PaginationPreviousProps,
+  type PaginationRootProps,
+} from "@kobalte/core/pagination"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import type { VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
+
+import { buttonVariants } from "./button"
+
+export const PaginationItems = PaginationPrimitive.Items
 
 type paginationProps<T extends ValidComponent = "nav"> =
-	PaginationRootProps<T> & {
-		class?: string;
-	};
+  PaginationRootProps<T> & {
+    class?: string
+  }
 
 export const Pagination = <T extends ValidComponent = "nav">(
-	props: PolymorphicProps<T, paginationProps<T>>,
+  props: PolymorphicProps<T, paginationProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as paginationProps, ["class"]);
-
-	return (
-		<PaginationPrimitive
-			class={cn(
-				"mx-auto flex w-full justify-center [&>ul]:(flex flex-row items-center gap-1)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as paginationProps, ["class"])
+
+  return (
+    <PaginationPrimitive
+      class={cn(
+        "[&>ul]:(flex gap-1) mx-auto flex w-full flex-row items-center justify-center",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type paginationItemProps<T extends ValidComponent = "button"> =
-	PaginationItemProps<T> &
-		Pick<VariantProps<typeof buttonVariants>, "size"> & {
-			class?: string;
-		};
+  PaginationItemProps<T> &
+    Pick<VariantProps<typeof buttonVariants>, "size"> & {
+      class?: string
+    }
 
 export const PaginationItem = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, paginationItemProps<T>>,
+  props: PolymorphicProps<T, paginationItemProps<T>>
 ) => {
-	// @ts-expect-error - required `page`
-	const merge = mergeProps<paginationItemProps[]>({ size: "icon" }, props);
-	const [local, rest] = splitProps(merge as paginationItemProps, [
-		"class",
-		"size",
-	]);
-
-	return (
-		<PaginationPrimitive.Item
-			class={cn(
-				buttonVariants({
-					variant: "ghost",
-					size: local.size,
-				}),
-				"aria-[current=page]:(border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  // @ts-expect-error - required `page`
+  const merge = mergeProps<paginationItemProps[]>({ size: "icon" }, props)
+  const [local, rest] = splitProps(merge as paginationItemProps, [
+    "class",
+    "size",
+  ])
+
+  return (
+    <PaginationPrimitive.Item
+      class={cn(
+        buttonVariants({
+          variant: "ghost",
+          size: local.size,
+        }),
+        "aria-[current=page]:(border border-input bg-background hover:bg-accent hover:text-accent-foreground) shadow-sm",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type paginationEllipsisProps<T extends ValidComponent = "div"> = VoidProps<
-	PaginationEllipsisProps<T> & {
-		class?: string;
-	}
->;
+  PaginationEllipsisProps<T> & {
+    class?: string
+  }
+>
 
 export const PaginationEllipsis = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, paginationEllipsisProps<T>>,
+  props: PolymorphicProps<T, paginationEllipsisProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as paginationEllipsisProps, ["class"]);
-
-	return (
-		<PaginationPrimitive.Ellipsis
-			class={cn("flex h-9 w-9 items-center justify-center", local.class)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
-				/>
-				<title>More pages</title>
-			</svg>
-		</PaginationPrimitive.Ellipsis>
-	);
-};
+  const [local, rest] = splitProps(props as paginationEllipsisProps, ["class"])
+
+  return (
+    <PaginationPrimitive.Ellipsis
+      class={cn("flex h-9 w-9 items-center justify-center", local.class)}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+        />
+        <title>More pages</title>
+      </svg>
+    </PaginationPrimitive.Ellipsis>
+  )
+}
 
 type paginationPreviousProps<T extends ValidComponent = "button"> =
-	PaginationPreviousProps<T> &
-		Pick<VariantProps<typeof buttonVariants>, "size"> & {
-			class?: string;
-		};
+  PaginationPreviousProps<T> &
+    Pick<VariantProps<typeof buttonVariants>, "size"> & {
+      class?: string
+    }
 
 export const PaginationPrevious = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, paginationPreviousProps<T>>,
+  props: PolymorphicProps<T, paginationPreviousProps<T>>
 ) => {
-	const merge = mergeProps<paginationPreviousProps<T>[]>(
-		{ size: "icon" },
-		props,
-	);
-	const [local, rest] = splitProps(merge as paginationPreviousProps, [
-		"class",
-		"size",
-	]);
-
-	return (
-		<PaginationPrimitive.Previous
-			class={cn(
-				buttonVariants({
-					variant: "ghost",
-					size: local.size,
-				}),
-				"aria-[current=page]:(border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				class="h-4 w-4"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m15 6l-6 6l6 6"
-				/>
-				<title>Previous page</title>
-			</svg>
-		</PaginationPrimitive.Previous>
-	);
-};
+  const merge = mergeProps<paginationPreviousProps<T>[]>(
+    { size: "icon" },
+    props
+  )
+  const [local, rest] = splitProps(merge as paginationPreviousProps, [
+    "class",
+    "size",
+  ])
+
+  return (
+    <PaginationPrimitive.Previous
+      class={cn(
+        buttonVariants({
+          variant: "ghost",
+          size: local.size,
+        }),
+        "aria-[current=page]:(border border-input bg-background hover:bg-accent hover:text-accent-foreground) shadow-sm",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="h-4 w-4"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m15 6l-6 6l6 6"
+        />
+        <title>Previous page</title>
+      </svg>
+    </PaginationPrimitive.Previous>
+  )
+}
 
 type paginationNextProps<T extends ValidComponent = "button"> =
-	paginationPreviousProps<T>;
+  paginationPreviousProps<T>
 
 export const PaginationNext = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, paginationNextProps<T>>,
+  props: PolymorphicProps<T, paginationNextProps<T>>
 ) => {
-	const merge = mergeProps<paginationNextProps<T>[]>({ size: "icon" }, props);
-	const [local, rest] = splitProps(merge as paginationNextProps, [
-		"class",
-		"size",
-	]);
-
-	return (
-		<PaginationPrimitive.Next
-			class={cn(
-				buttonVariants({
-					variant: "ghost",
-					size: local.size,
-				}),
-				"aria-[current=page]:(border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m9 6l6 6l-6 6"
-				/>
-				<title>Next page</title>
-			</svg>
-		</PaginationPrimitive.Next>
-	);
-};
+  const merge = mergeProps<paginationNextProps<T>[]>({ size: "icon" }, props)
+  const [local, rest] = splitProps(merge as paginationNextProps, [
+    "class",
+    "size",
+  ])
+
+  return (
+    <PaginationPrimitive.Next
+      class={cn(
+        buttonVariants({
+          variant: "ghost",
+          size: local.size,
+        }),
+        "aria-[current=page]:(border border-input bg-background hover:bg-accent hover:text-accent-foreground) shadow-sm",
+        local.class
+      )}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-4 w-4"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m9 6l6 6l-6 6"
+        />
+        <title>Next page</title>
+      </svg>
+    </PaginationPrimitive.Next>
+  )
+}
diff --git a/packages/unocss/ui/popover.tsx b/packages/unocss/ui/popover.tsx
index 6221702a..a4bc2cc9 100644
--- a/packages/unocss/ui/popover.tsx
+++ b/packages/unocss/ui/popover.tsx
@@ -1,71 +1,76 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	PopoverContentProps,
-	PopoverRootProps,
-} from "@kobalte/core/popover";
-import { Popover as PopoverPrimitive } from "@kobalte/core/popover";
-import type { ParentProps, ValidComponent } from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
+import {
+  mergeProps,
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Popover as PopoverPrimitive,
+  type PopoverContentProps,
+  type PopoverRootProps,
+} from "@kobalte/core/popover"
 
-export const PopoverTrigger = PopoverPrimitive.Trigger;
-export const PopoverTitle = PopoverPrimitive.Title;
-export const PopoverDescription = PopoverPrimitive.Description;
+import { cn } from "@/libs/cn"
+
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverTitle = PopoverPrimitive.Title
+export const PopoverDescription = PopoverPrimitive.Description
 
 export const Popover = (props: PopoverRootProps) => {
-	const merge = mergeProps<PopoverRootProps[]>(
-		{
-			gutter: 4,
-			flip: false,
-		},
-		props,
-	);
+  const merge = mergeProps<PopoverRootProps[]>(
+    {
+      gutter: 4,
+      flip: false,
+    },
+    props
+  )
 
-	return <PopoverPrimitive {...merge} />;
-};
+  return <PopoverPrimitive {...merge} />
+}
 
 type popoverContentProps<T extends ValidComponent = "div"> = ParentProps<
-	PopoverContentProps<T> & {
-		class?: string;
-	}
->;
+  PopoverContentProps<T> & {
+    class?: string
+  }
+>
 
 export const PopoverContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, popoverContentProps<T>>,
+  props: PolymorphicProps<T, popoverContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as popoverContentProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as popoverContentProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<PopoverPrimitive.Portal>
-			<PopoverPrimitive.Content
-				class={cn(
-					"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-				<PopoverPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:(outline-none ring-1.5 ring-ring ring-offset-2) disabled:pointer-events-none bg-inherit transition-property-[opacity,box-shadow]">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						class="h-4 w-4"
-					>
-						<path
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M18 6L6 18M6 6l12 12"
-						/>
-						<title>Close</title>
-					</svg>
-				</PopoverPrimitive.CloseButton>
-			</PopoverPrimitive.Content>
-		</PopoverPrimitive.Portal>
-	);
-};
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <PopoverPrimitive.CloseButton class="ring-offset-background focus:(outline-none ring-1.5 ring-ring ring-offset-2) transition-property-[opacity,box-shadow] absolute right-4 top-4 rounded-sm bg-inherit opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="h-4 w-4"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18 6L6 18M6 6l12 12"
+            />
+            <title>Close</title>
+          </svg>
+        </PopoverPrimitive.CloseButton>
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}
diff --git a/packages/unocss/ui/progress.tsx b/packages/unocss/ui/progress.tsx
index bd3db659..89491c89 100644
--- a/packages/unocss/ui/progress.tsx
+++ b/packages/unocss/ui/progress.tsx
@@ -1,36 +1,38 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ProgressRootProps } from "@kobalte/core/progress";
-import { Progress as ProgressPrimitive } from "@kobalte/core/progress";
-import type { ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ParentProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Progress as ProgressPrimitive,
+  type ProgressRootProps,
+} from "@kobalte/core/progress"
 
-export const ProgressLabel = ProgressPrimitive.Label;
-export const ProgressValueLabel = ProgressPrimitive.ValueLabel;
+import { cn } from "@/libs/cn"
+
+export const ProgressLabel = ProgressPrimitive.Label
+export const ProgressValueLabel = ProgressPrimitive.ValueLabel
 
 type progressProps<T extends ValidComponent = "div"> = ParentProps<
-	ProgressRootProps<T> & {
-		class?: string;
-	}
->;
+  ProgressRootProps<T> & {
+    class?: string
+  }
+>
 
 export const Progress = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, progressProps<T>>,
+  props: PolymorphicProps<T, progressProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as progressProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as progressProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<ProgressPrimitive
-			class={cn("flex w-full flex-col gap-2", local.class)}
-			{...rest}
-		>
-			{local.children}
-			<ProgressPrimitive.Track class="h-2 overflow-hidden rounded-full bg-primary/20">
-				<ProgressPrimitive.Fill class="h-full w-[--kb-progress-fill-width] bg-primary transition-all duration-500 ease-linear data-[progress=complete]:bg-primary" />
-			</ProgressPrimitive.Track>
-		</ProgressPrimitive>
-	);
-};
+  return (
+    <ProgressPrimitive
+      class={cn("flex w-full flex-col gap-2", local.class)}
+      {...rest}
+    >
+      {local.children}
+      <ProgressPrimitive.Track class="bg-primary/20 h-2 overflow-hidden rounded-full">
+        <ProgressPrimitive.Fill class="bg-primary data-[progress=complete]:bg-primary h-full w-[--kb-progress-fill-width] transition-all duration-500 ease-linear" />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive>
+  )
+}
diff --git a/packages/unocss/ui/radio-group.tsx b/packages/unocss/ui/radio-group.tsx
index 1f6ea373..ecd7b98d 100644
--- a/packages/unocss/ui/radio-group.tsx
+++ b/packages/unocss/ui/radio-group.tsx
@@ -1,39 +1,41 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { RadioGroupItemControlProps } from "@kobalte/core/radio-group";
-import { RadioGroup as RadioGroupPrimitive } from "@kobalte/core/radio-group";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  RadioGroup as RadioGroupPrimitive,
+  type RadioGroupItemControlProps,
+} from "@kobalte/core/radio-group"
 
-export const RadioGroupDescription = RadioGroupPrimitive.Description;
-export const RadioGroupErrorMessage = RadioGroupPrimitive.ErrorMessage;
-export const RadioGroupItemDescription = RadioGroupPrimitive.ItemDescription;
-export const RadioGroupItemInput = RadioGroupPrimitive.ItemInput;
-export const RadioGroupItemLabel = RadioGroupPrimitive.ItemLabel;
-export const RadioGroupLabel = RadioGroupPrimitive.Label;
-export const RadioGroup = RadioGroupPrimitive;
-export const RadioGroupItem = RadioGroupPrimitive.Item;
+import { cn } from "@/libs/cn"
+
+export const RadioGroupDescription = RadioGroupPrimitive.Description
+export const RadioGroupErrorMessage = RadioGroupPrimitive.ErrorMessage
+export const RadioGroupItemDescription = RadioGroupPrimitive.ItemDescription
+export const RadioGroupItemInput = RadioGroupPrimitive.ItemInput
+export const RadioGroupItemLabel = RadioGroupPrimitive.ItemLabel
+export const RadioGroupLabel = RadioGroupPrimitive.Label
+export const RadioGroup = RadioGroupPrimitive
+export const RadioGroupItem = RadioGroupPrimitive.Item
 
 type radioGroupItemControlProps<T extends ValidComponent = "div"> = VoidProps<
-	RadioGroupItemControlProps<T> & { class?: string }
->;
+  RadioGroupItemControlProps<T> & { class?: string }
+>
 
 export const RadioGroupItemControl = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, radioGroupItemControlProps<T>>,
+  props: PolymorphicProps<T, radioGroupItemControlProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as radioGroupItemControlProps, [
-		"class",
-	]);
+  const [local, rest] = splitProps(props as radioGroupItemControlProps, [
+    "class",
+  ])
 
-	return (
-		<RadioGroupPrimitive.ItemControl
-			class={cn(
-				"flex aspect-square h-4 w-4 items-center justify-center rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:(ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) data-[checked]:bg-foreground bg-inherit transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		>
-			<RadioGroupPrimitive.ItemIndicator class="h-2 w-2 rounded-full data-[checked]:bg-background" />
-		</RadioGroupPrimitive.ItemControl>
-	);
-};
+  return (
+    <RadioGroupPrimitive.ItemControl
+      class={cn(
+        "border-primary text-primary focus-visible:(ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) data-[checked]:bg-foreground flex aspect-square h-4 w-4 items-center justify-center rounded-full border bg-inherit shadow transition-shadow focus:outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <RadioGroupPrimitive.ItemIndicator class="data-[checked]:bg-background h-2 w-2 rounded-full" />
+    </RadioGroupPrimitive.ItemControl>
+  )
+}
diff --git a/packages/unocss/ui/resizable.tsx b/packages/unocss/ui/resizable.tsx
index 874ed7a0..2157450f 100644
--- a/packages/unocss/ui/resizable.tsx
+++ b/packages/unocss/ui/resizable.tsx
@@ -1,63 +1,66 @@
-import { cn } from "@/libs/cn";
-import type { DynamicProps, HandleProps, RootProps } from "@corvu/resizable";
-import ResizablePrimitive from "@corvu/resizable";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { Show, splitProps } from "solid-js";
+import { Show, splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import ResizablePrimitive, {
+  type DynamicProps,
+  type HandleProps,
+  type RootProps,
+} from "@corvu/resizable"
 
-export const ResizablePanel = ResizablePrimitive.Panel;
+import { cn } from "@/libs/cn"
+
+export const ResizablePanel = ResizablePrimitive.Panel
 
 type resizableProps<T extends ValidComponent = "div"> = RootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const Resizable = <T extends ValidComponent = "div">(
-	props: DynamicProps<T, resizableProps<T>>,
+  props: DynamicProps<T, resizableProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as resizableProps, ["class"]);
+  const [local, rest] = splitProps(props as resizableProps, ["class"])
 
-	return <ResizablePrimitive class={cn("size-full", local.class)} {...rest} />;
-};
+  return <ResizablePrimitive class={cn("size-full", local.class)} {...rest} />
+}
 
 type resizableHandleProps<T extends ValidComponent = "button"> = VoidProps<
-	HandleProps<T> & {
-		class?: string;
-		withHandle?: boolean;
-	}
->;
+  HandleProps<T> & {
+    class?: string
+    withHandle?: boolean
+  }
+>
 
 export const ResizableHandle = <T extends ValidComponent = "button">(
-	props: DynamicProps<T, resizableHandleProps<T>>,
+  props: DynamicProps<T, resizableHandleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as resizableHandleProps, [
-		"class",
-		"withHandle",
-	]);
-
-	return (
-		<ResizablePrimitive.Handle
-			class={cn(
-				"flex w-px items-center justify-center bg-border focus-visible:(outline-none ring-1.5 ring-ring ring-offset-1) data-[orientation=vertical]:(h-px w-full) transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		>
-			<Show when={local.withHandle}>
-				<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-2.5 w-2.5"
-						viewBox="0 0 15 15"
-					>
-						<path
-							fill="currentColor"
-							fill-rule="evenodd"
-							d="M5.5 4.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m4 0a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25M10.625 7.5a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 8.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m5.125 2.875a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 12.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25"
-							clip-rule="evenodd"
-						/>
-						<title>Resize handle</title>
-					</svg>
-				</div>
-			</Show>
-		</ResizablePrimitive.Handle>
-	);
-};
+  const [local, rest] = splitProps(props as resizableHandleProps, [
+    "class",
+    "withHandle",
+  ])
+
+  return (
+    <ResizablePrimitive.Handle
+      class={cn(
+        "bg-border focus-visible:(outline-none ring-1.5 ring-ring ring-offset-1) data-[orientation=vertical]:(h-px w-full) flex w-px items-center justify-center transition-shadow",
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={local.withHandle}>
+        <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-2.5 w-2.5"
+            viewBox="0 0 15 15"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M5.5 4.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m4 0a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25M10.625 7.5a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 8.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25m5.125 2.875a1.125 1.125 0 1 1-2.25 0a1.125 1.125 0 0 1 2.25 0M5.5 12.625a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25"
+              clip-rule="evenodd"
+            />
+            <title>Resize handle</title>
+          </svg>
+        </div>
+      </Show>
+    </ResizablePrimitive.Handle>
+  )
+}
diff --git a/packages/unocss/ui/select.tsx b/packages/unocss/ui/select.tsx
index b956adf1..42acaafa 100644
--- a/packages/unocss/ui/select.tsx
+++ b/packages/unocss/ui/select.tsx
@@ -1,127 +1,127 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	SelectContentProps,
-	SelectItemProps,
-	SelectTriggerProps,
-} from "@kobalte/core/select";
-import { Select as SelectPrimitive } from "@kobalte/core/select";
-import type { ParentProps, ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ParentProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Select as SelectPrimitive,
+  type SelectContentProps,
+  type SelectItemProps,
+  type SelectTriggerProps,
+} from "@kobalte/core/select"
 
-export const Select = SelectPrimitive;
-export const SelectValue = SelectPrimitive.Value;
-export const SelectDescription = SelectPrimitive.Description;
-export const SelectErrorMessage = SelectPrimitive.ErrorMessage;
-export const SelectItemDescription = SelectPrimitive.ItemDescription;
-export const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
-export const SelectSection = SelectPrimitive.Section;
+import { cn } from "@/libs/cn"
+
+export const Select = SelectPrimitive
+export const SelectValue = SelectPrimitive.Value
+export const SelectDescription = SelectPrimitive.Description
+export const SelectErrorMessage = SelectPrimitive.ErrorMessage
+export const SelectItemDescription = SelectPrimitive.ItemDescription
+export const SelectHiddenSelect = SelectPrimitive.HiddenSelect
+export const SelectSection = SelectPrimitive.Section
 
 type selectTriggerProps<T extends ValidComponent = "button"> = ParentProps<
-	SelectTriggerProps<T> & { class?: string }
->;
+  SelectTriggerProps<T> & { class?: string }
+>
 
 export const SelectTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, selectTriggerProps<T>>,
+  props: PolymorphicProps<T, selectTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as selectTriggerProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as selectTriggerProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<SelectPrimitive.Trigger
-			class={cn(
-				"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus-visible:(ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		>
-			{local.children}
-			<SelectPrimitive.Icon
-				as="svg"
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 24 24"
-				class="size-4 opacity-50 flex items-center justify-center"
-			>
-				<path
-					fill="none"
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
-				/>
-			</SelectPrimitive.Icon>
-		</SelectPrimitive.Trigger>
-	);
-};
+  return (
+    <SelectPrimitive.Trigger
+      class={cn(
+        "border-input ring-offset-background placeholder:text-muted-foreground focus-visible:(ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-shadow focus:outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <SelectPrimitive.Icon
+        as="svg"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="flex size-4 items-center justify-center opacity-50"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
+        />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
 
 type selectContentProps<T extends ValidComponent = "div"> =
-	SelectContentProps<T> & {
-		class?: string;
-	};
+  SelectContentProps<T> & {
+    class?: string
+  }
 
 export const SelectContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, selectContentProps<T>>,
+  props: PolymorphicProps<T, selectContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as selectContentProps, ["class"]);
+  const [local, rest] = splitProps(props as selectContentProps, ["class"])
 
-	return (
-		<SelectPrimitive.Portal>
-			<SelectPrimitive.Content
-				class={cn(
-					"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
-					local.class,
-				)}
-				{...rest}
-			>
-				<SelectPrimitive.Listbox class="p-1 focus-visible:outline-none" />
-			</SelectPrimitive.Content>
-		</SelectPrimitive.Portal>
-	);
-};
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          local.class
+        )}
+        {...rest}
+      >
+        <SelectPrimitive.Listbox class="p-1 focus-visible:outline-none" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
 
 type selectItemProps<T extends ValidComponent = "li"> = ParentProps<
-	SelectItemProps<T> & { class?: string }
->;
+  SelectItemProps<T> & { class?: string }
+>
 
 export const SelectItem = <T extends ValidComponent = "li">(
-	props: PolymorphicProps<T, selectItemProps<T>>,
+  props: PolymorphicProps<T, selectItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as selectItemProps, [
-		"class",
-		"children",
-	]);
+  const [local, rest] = splitProps(props as selectItemProps, [
+    "class",
+    "children",
+  ])
 
-	return (
-		<SelectPrimitive.Item
-			class={cn(
-				"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)",
-				local.class,
-			)}
-			{...rest}
-		>
-			<SelectPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m5 12l5 5L20 7"
-					/>
-					<title>Checked</title>
-				</svg>
-			</SelectPrimitive.ItemIndicator>
-			<SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
-		</SelectPrimitive.Item>
-	);
-};
+  return (
+    <SelectPrimitive.Item
+      class={cn(
+        "focus:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50) relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <SelectPrimitive.ItemIndicator class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m5 12l5 5L20 7"
+          />
+          <title>Checked</title>
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
+    </SelectPrimitive.Item>
+  )
+}
diff --git a/packages/unocss/ui/separator.tsx b/packages/unocss/ui/separator.tsx
index 86f4b23f..ebaca7d3 100644
--- a/packages/unocss/ui/separator.tsx
+++ b/packages/unocss/ui/separator.tsx
@@ -1,27 +1,29 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { SeparatorRootProps } from "@kobalte/core/separator";
-import { Separator as SeparatorPrimitive } from "@kobalte/core/separator";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Separator as SeparatorPrimitive,
+  type SeparatorRootProps,
+} from "@kobalte/core/separator"
+
+import { cn } from "@/libs/cn"
 
 export type separatorProps<T extends ValidComponent = "hr"> =
-	SeparatorRootProps<T> & {
-		class?: string;
-	};
+  SeparatorRootProps<T> & {
+    class?: string
+  }
 
 export const Separator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, separatorProps<T>>,
+  props: PolymorphicProps<T, separatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as separatorProps, ["class"]);
+  const [local, rest] = splitProps(props as separatorProps, ["class"])
 
-	return (
-		<SeparatorPrimitive
-			class={cn(
-				"shrink-0 bg-border data-[orientation=horizontal]:h-[1px] data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <SeparatorPrimitive
+      class={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-[1px] data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/sidebar.tsx b/packages/unocss/ui/sidebar.tsx
index fea4743c..f9041605 100644
--- a/packages/unocss/ui/sidebar.tsx
+++ b/packages/unocss/ui/sidebar.tsx
@@ -1,795 +1,793 @@
-import { useIsMobile } from "@/hooks/use-mobile";
-import { callHandler } from "@/libs/call-handler";
-import { cn } from "@/libs/cn";
-import { combineStyle } from "@/libs/combine-props";
 import {
-	type ElementOf,
-	Polymorphic,
-	type PolymorphicProps,
-} from "@kobalte/core/polymorphic";
-import type { TooltipContentProps } from "@kobalte/core/tooltip";
-import { type VariantProps, cva } from "class-variance-authority";
+  Match,
+  Show,
+  Switch,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  mergeProps,
+  onCleanup,
+  splitProps,
+  useContext,
+  type Accessor,
+  type ComponentProps,
+  type JSX,
+  type ValidComponent,
+} from "solid-js"
+import { useIsMobile } from "@/hooks/use-mobile"
 import {
-	type Accessor,
-	type ComponentProps,
-	type JSX,
-	Match,
-	Show,
-	Switch,
-	type ValidComponent,
-	createContext,
-	createEffect,
-	createMemo,
-	createSignal,
-	mergeProps,
-	onCleanup,
-	splitProps,
-	useContext,
-} from "solid-js";
-import { Button, type buttonProps } from "./button";
-import { Drawer, DrawerContent } from "./drawer";
-import { Separator, type separatorProps } from "./separator";
-import { Skeleton } from "./skeleton";
-import {
-	TextField,
-	TextFieldRoot,
-	type textFieldInputProps,
-} from "./textfield";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+  Polymorphic,
+  type ElementOf,
+  type PolymorphicProps,
+} from "@kobalte/core/polymorphic"
+import type { TooltipContentProps } from "@kobalte/core/tooltip"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { callHandler } from "@/libs/call-handler"
+import { cn } from "@/libs/cn"
+import { combineStyle } from "@/libs/combine-props"
+
+import { Button, type buttonProps } from "./button"
+import { Drawer, DrawerContent } from "./drawer"
+import { Separator, type separatorProps } from "./separator"
+import { Skeleton } from "./skeleton"
+import { TextField, TextFieldRoot, type textFieldInputProps } from "./textfield"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContext = {
-	state: Accessor<"expanded" | "collapsed">;
-	open: Accessor<boolean>;
-	setOpen: (value: boolean) => void;
-	openMobile: Accessor<boolean>;
-	setOpenMobile: (open: boolean) => void;
-	isMobile: Accessor<boolean>;
-	toggleSidebar: () => void;
-};
+  state: Accessor<"expanded" | "collapsed">
+  open: Accessor<boolean>
+  setOpen: (value: boolean) => void
+  openMobile: Accessor<boolean>
+  setOpenMobile: (open: boolean) => void
+  isMobile: Accessor<boolean>
+  toggleSidebar: () => void
+}
 
-const SidebarContext = createContext<SidebarContext>();
+const SidebarContext = createContext<SidebarContext>()
 
 export const useSideBar = () => {
-	const context = useContext(SidebarContext);
+  const context = useContext(SidebarContext)
 
-	if (context === undefined) {
-		throw new Error(
-			"`useSidebar` must be used within a `SidebarProvider` component.",
-		);
-	}
+  if (context === undefined) {
+    throw new Error(
+      "`useSidebar` must be used within a `SidebarProvider` component."
+    )
+  }
 
-	return context;
-};
+  return context
+}
 
 type sidebarProviderProps = ComponentProps<"div"> & {
-	defaultOpen?: boolean;
-	open?: boolean;
-	onOpenChange?: (open: boolean) => void;
-};
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
 
 export const SidebarProvider = (props: sidebarProviderProps) => {
-	const merge = mergeProps(
-		{
-			defaultOpen: true,
-		} as sidebarProviderProps,
-		props,
-	);
-	const [local, rest] = splitProps(merge, [
-		"defaultOpen",
-		"open",
-		"onOpenChange",
-		"class",
-		"style",
-		"children",
-	]);
-
-	const isMobile = useIsMobile();
-	const [openMobile, setOpenMobile] = createSignal(false);
-
-	// This is the internal state of the sidebar.
-	// We use open and onOpenChange for control from outside the component.
-	const [_open, _setOpen] = createSignal(local.defaultOpen!);
-	const open = () => local.open ?? _open();
-	const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
-		const openState = typeof value === "function" ? value(open()) : value;
-		if (local.onOpenChange) {
-			local.onOpenChange(openState);
-		} else {
-			_setOpen(openState);
-		}
-
-		// This sets the cookie to keep the sidebar state.
-		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-	};
-
-	// Helper to toggle the sidebar.
-	const toggleSidebar = () => {
-		if (isMobile()) {
-			setOpenMobile((open) => !open);
-		} else {
-			setOpen((open) => !open);
-		}
-	};
-
-	// Adds a keyboard shortcut to toggle the sidebar.
-	createEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (
-				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-				(event.metaKey || event.ctrlKey)
-			) {
-				event.preventDefault();
-				toggleSidebar();
-			}
-		};
-
-		window.addEventListener("keydown", handleKeyDown);
-
-		onCleanup(() => {
-			window.removeEventListener("keydown", handleKeyDown);
-		});
-	});
-
-	// We add a state so that we can do data-state="expanded" or "collapsed".
-	// This makes it easier to style the sidebar with Tailwind classes.
-	const state = () => (open() ? "expanded" : "collapsed");
-
-	const contextValue: SidebarContext = {
-		state,
-		open,
-		setOpen,
-		isMobile,
-		openMobile,
-		setOpenMobile,
-		toggleSidebar,
-	};
-
-	return (
-		<SidebarContext.Provider value={contextValue}>
-			<div
-				style={combineStyle(
-					{
-						"--sidebar-width": SIDEBAR_WIDTH,
-						"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-					},
-					local.style,
-				)}
-				class={cn(
-					"group/sidebarWrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</div>
-		</SidebarContext.Provider>
-	);
-};
+  const merge = mergeProps(
+    {
+      defaultOpen: true,
+    } as sidebarProviderProps,
+    props
+  )
+  const [local, rest] = splitProps(merge, [
+    "defaultOpen",
+    "open",
+    "onOpenChange",
+    "class",
+    "style",
+    "children",
+  ])
+
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = createSignal(false)
+
+  // This is the internal state of the sidebar.
+  // We use open and onOpenChange for control from outside the component.
+  const [_open, _setOpen] = createSignal(local.defaultOpen!)
+  const open = () => local.open ?? _open()
+  const setOpen = (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === "function" ? value(open()) : value
+    if (local.onOpenChange) {
+      local.onOpenChange(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  }
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = () => {
+    if (isMobile()) {
+      setOpenMobile((open) => !open)
+    } else {
+      setOpen((open) => !open)
+    }
+  }
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  createEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = () => (open() ? "expanded" : "collapsed")
+
+  const contextValue: SidebarContext = {
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+  }
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        style={combineStyle(
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+          },
+          local.style
+        )}
+        class={cn(
+          "group/sidebarWrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
 
 type sidebarProps = ComponentProps<"div"> & {
-	side?: "left" | "right";
-	variant?: "sidebar" | "floating" | "inset";
-	collapsible?: "offcanvas" | "icon" | "none";
-};
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}
 
 export const Sidebar = (props: sidebarProps) => {
-	const merge = mergeProps(
-		{
-			side: "left",
-			variant: "sidebar",
-			collapsible: "offcanvas",
-		} as sidebarProps,
-		props,
-	);
-	const [local, rest] = splitProps(merge, [
-		"side",
-		"variant",
-		"collapsible",
-		"class",
-		"children",
-	]);
-
-	const { isMobile, state, openMobile, setOpenMobile } = useSideBar();
-
-	return (
-		<Switch
-			fallback={
-				<div
-					class="group peer hidden md:block text-sidebar-foreground"
-					data-state={state()}
-					data-collapsible={state() === "collapsed" ? local.collapsible : ""}
-					data-variant={local.variant}
-					data-side={local.side}
-				>
-					{/* This is what handles the sidebar gap on desktop */}
-					<div
-						class={cn(
-							"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
-							"group-data-[collapsible=offcanvas]:w-0",
-							"group-data-[side=right]:rotate-180",
-							local.variant === "floating" || local.variant === "inset"
-								? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]"
-								: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
-						)}
-					/>
-					<div
-						class={cn(
-							"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
-							local.side === "left"
-								? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-								: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-							// Adjust the padding for floating and inset variants.
-							local.variant === "floating" || local.variant === "inset"
-								? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]"
-								: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-							local.class,
-						)}
-						{...rest}
-					>
-						<div
-							data-sidebar="sidebar"
-							class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:(rounded-lg border border-sidebar-border shadow)"
-						>
-							{local.children}
-						</div>
-					</div>
-				</div>
-			}
-		>
-			<Match when={local.collapsible === "none"}>
-				<div
-					class={cn(
-						"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-						local.class,
-					)}
-					{...rest}
-				>
-					{local.children}
-				</div>
-			</Match>
-
-			<Match when={isMobile()}>
-				<Drawer
-					open={openMobile()}
-					onOpenChange={setOpenMobile}
-					side={local.side}
-				>
-					<DrawerContent
-						data-sidebar="sidebar"
-						data-mobile="true"
-						class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-						style={{
-							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-						}}
-					>
-						<div class="flex h-full w-full flex-col">{local.children}</div>
-					</DrawerContent>
-				</Drawer>
-			</Match>
-		</Switch>
-	);
-};
+  const merge = mergeProps(
+    {
+      side: "left",
+      variant: "sidebar",
+      collapsible: "offcanvas",
+    } as sidebarProps,
+    props
+  )
+  const [local, rest] = splitProps(merge, [
+    "side",
+    "variant",
+    "collapsible",
+    "class",
+    "children",
+  ])
+
+  const { isMobile, state, openMobile, setOpenMobile } = useSideBar()
+
+  return (
+    <Switch
+      fallback={
+        <div
+          class="text-sidebar-foreground group peer hidden md:block"
+          data-state={state()}
+          data-collapsible={state() === "collapsed" ? local.collapsible : ""}
+          data-variant={local.variant}
+          data-side={local.side}
+        >
+          {/* This is what handles the sidebar gap on desktop */}
+          <div
+            class={cn(
+              "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              local.variant === "floating" || local.variant === "inset"
+                ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]"
+                : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+            )}
+          />
+          <div
+            class={cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              local.side === "left"
+                ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+                : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              // Adjust the padding for floating and inset variants.
+              local.variant === "floating" || local.variant === "inset"
+                ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]"
+                : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              local.class
+            )}
+            {...rest}
+          >
+            <div
+              data-sidebar="sidebar"
+              class="bg-sidebar group-data-[variant=floating]:(rounded-lg border-sidebar-border shadow) flex h-full w-full flex-col border"
+            >
+              {local.children}
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <Match when={local.collapsible === "none"}>
+        <div
+          class={cn(
+            "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+            local.class
+          )}
+          {...rest}
+        >
+          {local.children}
+        </div>
+      </Match>
+
+      <Match when={isMobile()}>
+        <Drawer
+          open={openMobile()}
+          onOpenChange={setOpenMobile}
+          side={local.side}
+        >
+          <DrawerContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            style={{
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            }}
+          >
+            <div class="flex h-full w-full flex-col">{local.children}</div>
+          </DrawerContent>
+        </Drawer>
+      </Match>
+    </Switch>
+  )
+}
 
 type sidebarTrigger<T extends ValidComponent | HTMLElement = HTMLElement> =
-	buttonProps<ElementOf<T>> & {
-		onClick?: JSX.EventHandlerUnion<T, MouseEvent>;
-	};
+  buttonProps<ElementOf<T>> & {
+    onClick?: JSX.EventHandlerUnion<T, MouseEvent>
+  }
 
 export const SidebarTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, sidebarTrigger<T>>,
+  props: PolymorphicProps<T, sidebarTrigger<T>>
 ) => {
-	const [local, rest] = splitProps(props as sidebarTrigger, [
-		"class",
-		"onClick",
-	]);
-	const { toggleSidebar, open } = useSideBar();
-
-	const handleOnClick: JSX.EventHandlerUnion<HTMLElement, MouseEvent> = (
-		event,
-	) => {
-		callHandler(event, local.onClick);
-		toggleSidebar();
-	};
-
-	return (
-		<Button
-			data-trigger="trigger"
-			variant="ghost"
-			size="icon"
-			class={cn("size-7", local.class)}
-			onClick={handleOnClick}
-			{...rest}
-		>
-			<Show
-				when={!open()}
-				fallback={
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-4"
-						viewBox="0 0 24 24"
-					>
-						<g
-							fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-						>
-							<rect width="18" height="18" x="3" y="3" rx="2" />
-							<path d="M9 3v18m7-6l-3-3l3-3" />
-						</g>
-						<title>Close sidebar</title>
-					</svg>
-				}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-4"
-					viewBox="0 0 24 24"
-				>
-					<g
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-					>
-						<rect width="18" height="18" x="3" y="3" rx="2" />
-						<path d="M9 3v18m5-12l3 3l-3 3" />
-					</g>
-					<title>Open sidebar</title>
-				</svg>
-			</Show>
-		</Button>
-	);
-};
+  const [local, rest] = splitProps(props as sidebarTrigger, [
+    "class",
+    "onClick",
+  ])
+  const { toggleSidebar, open } = useSideBar()
+
+  const handleOnClick: JSX.EventHandlerUnion<HTMLElement, MouseEvent> = (
+    event
+  ) => {
+    callHandler(event, local.onClick)
+    toggleSidebar()
+  }
+
+  return (
+    <Button
+      data-trigger="trigger"
+      variant="ghost"
+      size="icon"
+      class={cn("size-7", local.class)}
+      onClick={handleOnClick}
+      {...rest}
+    >
+      <Show
+        when={!open()}
+        fallback={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-4"
+            viewBox="0 0 24 24"
+          >
+            <g
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            >
+              <rect width="18" height="18" x="3" y="3" rx="2" />
+              <path d="M9 3v18m7-6l-3-3l3-3" />
+            </g>
+            <title>Close sidebar</title>
+          </svg>
+        }
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          >
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M9 3v18m5-12l3 3l-3 3" />
+          </g>
+          <title>Open sidebar</title>
+        </svg>
+      </Show>
+    </Button>
+  )
+}
 
 export const SidebarRail = (props: ComponentProps<"button">) => {
-	const { toggleSidebar } = useSideBar();
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<button
-			data-sidebar="rail"
-			aria-label="Toggle Sidebar"
-			tabIndex={-1}
-			onClick={toggleSidebar}
-			title="Toggle Sidebar"
-			class={cn(
-				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-				"after:(absolute inset-y-0 left-1/2 w-[2px])",
-				"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-				"group-data-[collapsible=offcanvas]:(translate-x-0 after:left-full hover:bg-sidebar)",
-				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const { toggleSidebar } = useSideBar()
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <button
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      class={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "after:(absolute w-[2px]) inset-y-0 left-1/2",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:(translate-x-0 hover:bg-sidebar) after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarInset = (props: ComponentProps<"main">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<main
-			class={cn(
-				"relative flex min-h-svh flex-1 flex-col bg-background",
-				"peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-[[data-state=collapsed][data-variant=inset]]:ml-2",
-				"md:peer-data-[variant=inset]:(m-2 ml-0 rounded-xl shadow)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
-
-export const SidebarTextFieldRoot = TextFieldRoot;
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <main
+      class={cn(
+        "bg-background relative flex min-h-svh flex-1 flex-col",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-[[data-state=collapsed][data-variant=inset]]:ml-2",
+        "md:peer-data-[variant=inset]:(m-2 shadow) ml-0 rounded-xl",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export const SidebarTextFieldRoot = TextFieldRoot
 
 export type sidebarTextFieldProps<T extends ValidComponent = "input"> =
-	textFieldInputProps<T>;
+  textFieldInputProps<T>
 
 export const SidebarTextField = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, sidebarTextFieldProps<T>>,
+  props: PolymorphicProps<T, sidebarTextFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as sidebarTextFieldProps, ["class"]);
-
-	return (
-		<TextField
-			data-sidebar="input"
-			class={cn(
-				"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as sidebarTextFieldProps, ["class"])
+
+  return (
+    <TextField
+      data-sidebar="input"
+      class={cn(
+        "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarHeader = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="header"
-			class={cn("flex flex-col gap-2 p-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="header"
+      class={cn("flex flex-col gap-2 p-2", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarFooter = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="footer"
-			class={cn("flex flex-col gap-2 p-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="footer"
+      class={cn("flex flex-col gap-2 p-2", local.class)}
+      {...rest}
+    />
+  )
+}
 
-type sidebarSeparatorProps<T extends ValidComponent = "hr"> = separatorProps<T>;
+type sidebarSeparatorProps<T extends ValidComponent = "hr"> = separatorProps<T>
 
 export const SidebarSeparator = <T extends ValidComponent = "hr">(
-	props: PolymorphicProps<T, sidebarSeparatorProps<T>>,
+  props: PolymorphicProps<T, sidebarSeparatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as sidebarSeparatorProps, ["class"]);
+  const [local, rest] = splitProps(props as sidebarSeparatorProps, ["class"])
 
-	return (
-		<Separator
-			data-sidebar="separator"
-			class={cn("mx-2 w-auto bg-sidebar-border", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <Separator
+      data-sidebar="separator"
+      class={cn("bg-sidebar-border mx-2 w-auto", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			data-sidebar="content"
-			class={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      data-sidebar="content"
+      class={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroup = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="group"
-			class={cn("relative flex w-full min-w-0 flex-col p-2", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="group"
+      class={cn("relative flex w-full min-w-0 flex-col p-2", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroupLabel = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, { class?: string }>,
+  props: PolymorphicProps<T, { class?: string }>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<Polymorphic
-			as="div"
-			data-sidebar="group-label"
-			class={cn(
-				"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2",
-				"[&>svg]:(size-4 shrink-0)",
-				"group-data-[collapsible=icon]:(-mt-8 opacity-0)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <Polymorphic
+      as="div"
+      data-sidebar="group-label"
+      class={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2",
+        "[&>svg]:(size-4 shrink-0)",
+        "group-data-[collapsible=icon]:(-mt-8 opacity-0)",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroupAction = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, { class?: string }>,
+  props: PolymorphicProps<T, { class?: string }>
 ) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<Polymorphic
-			as="button"
-			data-sidebar="group-action"
-			class={cn(
-				"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform focus-visible:ring-2",
-				"hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
-				"[&>svg]:(size-4 shrink-0)",
-				// Increases the hit area of the button on mobile.
-				"after:(absolute -inset-2 md:hidden)",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <Polymorphic
+      as="button"
+      data-sidebar="group-action"
+      class={cn(
+        "text-sidebar-foreground ring-sidebar-ring absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2",
+        "hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
+        "[&>svg]:(size-4 shrink-0)",
+        // Increases the hit area of the button on mobile.
+        "after:(absolute md:hidden) -inset-2",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarGroupContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			data-sidebar="group-content"
-			class={cn("w-full text-sm", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      data-sidebar="group-content"
+      class={cn("w-full text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenu = (props: ComponentProps<"ul">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<ul
-			data-sidebar="menu"
-			class={cn("flex w-full min-w-0 flex-col gap-1", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ul
+      data-sidebar="menu"
+      class={cn("flex w-full min-w-0 flex-col gap-1", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenuItem = (props: ComponentProps<"li">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<li
-			data-sidebar="menu-item"
-			class={cn("group/menuItem relative", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <li
+      data-sidebar="menu-item"
+      class={cn("group/menuItem relative", local.class)}
+      {...rest}
+    />
+  )
+}
 
 const sidebarMenuButtonVariants = cva(
-	[
-		"peer/menuButton flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 group-has-[[data-sidebar=menu-action]]/menuItem:pr-8 [&>span:last-child]:truncate",
-		"hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
-		"active:(bg-sidebar-accent text-sidebar-accent-foreground)",
-		"disabled:(pointer-events-none opacity-50) aria-disabled:(pointer-events-none opacity-50)",
-		"data-[active=true]:(bg-sidebar-accent font-medium text-sidebar-accent-foreground)",
-		"data-[state=open]:hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
-		"!group-data-[collapsible=icon]:(size-8 p-2)",
-		"[&>svg]:(size-4 shrink-0)",
-	],
-	{
-		variants: {
-			variant: {
-				default: "hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
-				outline:
-					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:(bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-accent))])",
-			},
-			size: {
-				default: "h-8 text-sm",
-				sm: "h-7 text-xs",
-				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  [
+    "peer/menuButton flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 group-has-[[data-sidebar=menu-action]]/menuItem:pr-8 [&>span:last-child]:truncate",
+    "hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
+    "active:(bg-sidebar-accent text-sidebar-accent-foreground)",
+    "disabled:(pointer-events-none opacity-50) aria-disabled:(pointer-events-none opacity-50)",
+    "data-[active=true]:(bg-sidebar-accent font-medium text-sidebar-accent-foreground)",
+    "data-[state=open]:hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
+    "!group-data-[collapsible=icon]:(size-8 p-2)",
+    "[&>svg]:(size-4 shrink-0)",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:(bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-accent))])",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 type sidebarMenuButton = VariantProps<typeof sidebarMenuButtonVariants> & {
-	class?: string;
-	isActive?: boolean;
-	tooltip?: string | TooltipContentProps<"div">;
-};
+  class?: string
+  isActive?: boolean
+  tooltip?: string | TooltipContentProps<"div">
+}
 
 export const SidebarMenuButton = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, sidebarMenuButton>,
+  props: PolymorphicProps<T, sidebarMenuButton>
 ) => {
-	const merge = mergeProps<sidebarMenuButton[]>(
-		{
-			isActive: false,
-		},
-		props,
-	);
-	const [local, rest] = splitProps(merge, [
-		"class",
-		"isActive",
-		"variant",
-		"size",
-		"tooltip",
-	]);
-
-	const { isMobile, state } = useSideBar();
-
-	return (
-		<Show
-			when={!local.tooltip || state() !== "collapsed"}
-			fallback={
-				<Tooltip placement="right" openDelay={0} closeDelay={0}>
-					<TooltipTrigger
-						data-sidebar="menu-button"
-						data-size={local.size}
-						data-active={local.isActive}
-						class={cn(
-							sidebarMenuButtonVariants({
-								variant: local.variant,
-								size: local.size,
-							}),
-							local.class,
-						)}
-						{...rest}
-					/>
-					<TooltipContent
-						hidden={state() !== "collapsed" || isMobile()}
-						{...(typeof local.tooltip === "string"
-							? { children: local.tooltip }
-							: local.tooltip)}
-					/>
-				</Tooltip>
-			}
-		>
-			<Polymorphic
-				as="button"
-				data-sidebar="menu-button"
-				data-size={local.size}
-				data-active={local.isActive}
-				class={cn(
-					sidebarMenuButtonVariants({
-						variant: local.variant,
-						size: local.size,
-					}),
-					local.class,
-				)}
-				{...rest}
-			/>
-		</Show>
-	);
-};
+  const merge = mergeProps<sidebarMenuButton[]>(
+    {
+      isActive: false,
+    },
+    props
+  )
+  const [local, rest] = splitProps(merge, [
+    "class",
+    "isActive",
+    "variant",
+    "size",
+    "tooltip",
+  ])
+
+  const { isMobile, state } = useSideBar()
+
+  return (
+    <Show
+      when={!local.tooltip || state() !== "collapsed"}
+      fallback={
+        <Tooltip placement="right" openDelay={0} closeDelay={0}>
+          <TooltipTrigger
+            data-sidebar="menu-button"
+            data-size={local.size}
+            data-active={local.isActive}
+            class={cn(
+              sidebarMenuButtonVariants({
+                variant: local.variant,
+                size: local.size,
+              }),
+              local.class
+            )}
+            {...rest}
+          />
+          <TooltipContent
+            hidden={state() !== "collapsed" || isMobile()}
+            {...(typeof local.tooltip === "string"
+              ? { children: local.tooltip }
+              : local.tooltip)}
+          />
+        </Tooltip>
+      }
+    >
+      <Polymorphic
+        as="button"
+        data-sidebar="menu-button"
+        data-size={local.size}
+        data-active={local.isActive}
+        class={cn(
+          sidebarMenuButtonVariants({
+            variant: local.variant,
+            size: local.size,
+          }),
+          local.class
+        )}
+        {...rest}
+      />
+    </Show>
+  )
+}
 
 export const SidebarMenuAction = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, { showOnHover?: boolean; class?: string }>,
+  props: PolymorphicProps<T, { showOnHover?: boolean; class?: string }>
 ) => {
-	const [local, rest] = splitProps(props, ["class", "showOnHover"]);
-
-	return (
-		<Polymorphic
-			as="button"
-			data-sidebar="menu-action"
-			class={cn(
-				"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform focus-visible:ring-2 peer-hover/menuButton:text-sidebar-accent-foreground",
-				"hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
-				"[&>svg]:(size-4 shrink-0)",
-				// Increases the hit area of the button on mobile.
-				"after:(absolute -inset-2 md:hidden)",
-				"peer-data-[size=sm]/menuButton:top-1",
-				"peer-data-[size=default]/menuButton:top-1.5",
-				"peer-data-[size=lg]/menuButton:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				local.showOnHover &&
-					"group-focus-within/menuItem:opacity-100 group-hover/menuItem:opacity-100 data-[expanded]:opacity-100 peer-data-[active=true]/menuButton:text-sidebar-accent-foreground md:opacity-0",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "showOnHover"])
+
+  return (
+    <Polymorphic
+      as="button"
+      data-sidebar="menu-action"
+      class={cn(
+        "text-sidebar-foreground ring-sidebar-ring peer-hover/menuButton:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2",
+        "hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
+        "[&>svg]:(size-4 shrink-0)",
+        // Increases the hit area of the button on mobile.
+        "after:(absolute md:hidden) -inset-2",
+        "peer-data-[size=sm]/menuButton:top-1",
+        "peer-data-[size=default]/menuButton:top-1.5",
+        "peer-data-[size=lg]/menuButton:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        local.showOnHover &&
+          "peer-data-[active=true]/menuButton:text-sidebar-accent-foreground group-focus-within/menuItem:opacity-100 group-hover/menuItem:opacity-100 data-[expanded]:opacity-100 md:opacity-0",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenuBadge = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div
-			data-sidebar="menu-badge"
-			class={cn(
-				"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-				"peer-hover/menuButton:text-sidebar-accent-foreground peer-data-[active=true]/menuButton:text-sidebar-accent-foreground",
-				"peer-data-[size=sm]/menuButton:top-1",
-				"peer-data-[size=default]/menuButton:top-1.5",
-				"peer-data-[size=lg]/menuButton:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div
+      data-sidebar="menu-badge"
+      class={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+        "peer-hover/menuButton:text-sidebar-accent-foreground peer-data-[active=true]/menuButton:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menuButton:top-1",
+        "peer-data-[size=default]/menuButton:top-1.5",
+        "peer-data-[size=lg]/menuButton:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type sidebarMenuSkeletonProps = ComponentProps<"div"> & {
-	showIcon?: boolean;
-};
+  showIcon?: boolean
+}
 
 export const SidebarMenuSkeleton = (props: sidebarMenuSkeletonProps) => {
-	const [local, rest] = splitProps(props, ["class", "showIcon"]);
-
-	// Random width between 50 to 90%.
-	const width = createMemo(() => `${Math.floor(Math.random() * 40) + 50}%`);
-
-	return (
-		<div
-			data-sidebar="menu-skeleton"
-			class={cn("rounded-md h-8 flex gap-2 px-2 items-center", local.class)}
-			{...rest}
-		>
-			<Show when={local.showIcon}>
-				<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
-			</Show>
-			<Skeleton
-				class="h-4 flex-1 max-w-[--skeleton-width]"
-				data-sidebar="menu-skeleton-text"
-				style={{
-					"--skeleton-width": width(),
-				}}
-			/>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "showIcon"])
+
+  // Random width between 50 to 90%.
+  const width = createMemo(() => `${Math.floor(Math.random() * 40) + 50}%`)
+
+  return (
+    <div
+      data-sidebar="menu-skeleton"
+      class={cn("flex h-8 items-center gap-2 rounded-md px-2", local.class)}
+      {...rest}
+    >
+      <Show when={local.showIcon}>
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+      </Show>
+      <Skeleton
+        class="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={{
+          "--skeleton-width": width(),
+        }}
+      />
+    </div>
+  )
+}
 
 export const SidebarMenuSub = (props: ComponentProps<"ul">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<ul
-			data-sidebar="menu-sub"
-			class={cn(
-				"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <ul
+      data-sidebar="menu-sub"
+      class={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const SidebarMenuSubItem = (props: ComponentProps<"li">) => {
-	return <li {...props} />;
-};
+  return <li {...props} />
+}
 
 type sidebarMenuSubButton = {
-	size?: "sm" | "md";
-	isActive?: boolean;
-	class?: string;
-};
+  size?: "sm" | "md"
+  isActive?: boolean
+  class?: string
+}
 
 export const SidebarMenuSubButton = <T extends ValidComponent = "a">(
-	props: PolymorphicProps<T, sidebarMenuSubButton>,
+  props: PolymorphicProps<T, sidebarMenuSubButton>
 ) => {
-	const merge = mergeProps<sidebarMenuSubButton[]>({ size: "md" }, props);
-	const [local, rest] = splitProps(merge, ["class", "isActive", "size"]);
-
-	return (
-		<Polymorphic
-			data-sidebar="menu-sub-button"
-			data-size={local.size}
-			data-active={local.isActive}
-			class={cn(
-				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring focus-visible:ring-2 [&>span:last-child]:truncate",
-				"hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
-				"active:(bg-sidebar-accent text-sidebar-accent-foreground)",
-				"disabled:(pointer-events-none opacity-50) aria-disabled:(pointer-events-none opacity-50)",
-				"[&>svg]:(size-4 shrink-0 text-sidebar-accent-foreground)",
-				"data-[active=true]:(bg-sidebar-accent text-sidebar-accent-foreground)",
-				local.size === "sm" && "text-xs",
-				local.size === "md" && "text-sm",
-				"group-data-[collapsible=icon]:hidden",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const merge = mergeProps<sidebarMenuSubButton[]>({ size: "md" }, props)
+  const [local, rest] = splitProps(merge, ["class", "isActive", "size"])
+
+  return (
+    <Polymorphic
+      data-sidebar="menu-sub-button"
+      data-size={local.size}
+      data-active={local.isActive}
+      class={cn(
+        "text-sidebar-foreground ring-sidebar-ring flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 [&>span:last-child]:truncate",
+        "hover:(bg-sidebar-accent text-sidebar-accent-foreground)",
+        "active:(bg-sidebar-accent text-sidebar-accent-foreground)",
+        "disabled:(pointer-events-none opacity-50) aria-disabled:(pointer-events-none opacity-50)",
+        "[&>svg]:(size-4 text-sidebar-accent-foreground) shrink-0",
+        "data-[active=true]:(bg-sidebar-accent text-sidebar-accent-foreground)",
+        local.size === "sm" && "text-xs",
+        local.size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/skeleton.tsx b/packages/unocss/ui/skeleton.tsx
index e1ee41b9..177960c9 100644
--- a/packages/unocss/ui/skeleton.tsx
+++ b/packages/unocss/ui/skeleton.tsx
@@ -1,13 +1,14 @@
-import { cn } from "@/libs/cn";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+
+import { cn } from "@/libs/cn"
 
 export const Skeleton = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<div
-			class={cn("animate-pulse rounded-md bg-primary/10", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <div
+      class={cn("bg-primary/10 animate-pulse rounded-md", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/sonner.tsx b/packages/unocss/ui/sonner.tsx
index 3f2f03fb..e6c5af3c 100644
--- a/packages/unocss/ui/sonner.tsx
+++ b/packages/unocss/ui/sonner.tsx
@@ -1,24 +1,24 @@
-import { Toaster as Sonner } from "somoto";
+import { Toaster as Sonner } from "somoto"
 
 export const Toaster = (props: Parameters<typeof Sonner>[0]) => {
-	return (
-		<Sonner
-			toastOptions={{
-				classNames: {
-					toast:
-						"group toast bg-background text-foreground border-border shadow-lg",
-					description: "text-muted-foreground",
-				},
-				actionButtonStyle: {
-					"--normal-bg": "hsl(var(--primary-foreground))",
-					"--normal-text": "hsl(var(--primary))",
-				},
-				cancelButtonStyle: {
-					"--normal-bg": "hsl(var(--muted-foreground))",
-					"--normal-text": "hsl(var(--muted))",
-				},
-			}}
-			{...props}
-		/>
-	);
-};
+  return (
+    <Sonner
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast bg-background text-foreground border-border shadow-lg",
+          description: "text-muted-foreground",
+        },
+        actionButtonStyle: {
+          "--normal-bg": "hsl(var(--primary-foreground))",
+          "--normal-text": "hsl(var(--primary))",
+        },
+        cancelButtonStyle: {
+          "--normal-bg": "hsl(var(--muted-foreground))",
+          "--normal-text": "hsl(var(--muted))",
+        },
+      }}
+      {...props}
+    />
+  )
+}
diff --git a/packages/unocss/ui/switch.tsx b/packages/unocss/ui/switch.tsx
index 6cea4367..2aadad9d 100644
--- a/packages/unocss/ui/switch.tsx
+++ b/packages/unocss/ui/switch.tsx
@@ -1,62 +1,67 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	SwitchControlProps,
-	SwitchThumbProps,
-} from "@kobalte/core/switch";
-import { Switch as SwitchPrimitive } from "@kobalte/core/switch";
-import type { ParentProps, ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
-
-export const SwitchLabel = SwitchPrimitive.Label;
-export const Switch = SwitchPrimitive;
-export const SwitchErrorMessage = SwitchPrimitive.ErrorMessage;
-export const SwitchDescription = SwitchPrimitive.Description;
+import {
+  splitProps,
+  type ParentProps,
+  type ValidComponent,
+  type VoidProps,
+} from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Switch as SwitchPrimitive,
+  type SwitchControlProps,
+  type SwitchThumbProps,
+} from "@kobalte/core/switch"
+
+import { cn } from "@/libs/cn"
+
+export const SwitchLabel = SwitchPrimitive.Label
+export const Switch = SwitchPrimitive
+export const SwitchErrorMessage = SwitchPrimitive.ErrorMessage
+export const SwitchDescription = SwitchPrimitive.Description
 
 type switchControlProps<T extends ValidComponent = "input"> = ParentProps<
-	SwitchControlProps<T> & { class?: string }
->;
+  SwitchControlProps<T> & { class?: string }
+>
 
 export const SwitchControl = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, switchControlProps<T>>,
+  props: PolymorphicProps<T, switchControlProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as switchControlProps, [
-		"class",
-		"children",
-	]);
-
-	return (
-		<>
-			<SwitchPrimitive.Input class="[&:focus-visible+div]:(outline-none ring-1.5 ring-ring ring-offset-2 ring-offset-background)" />
-			<SwitchPrimitive.Control
-				class={cn(
-					"inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input shadow-sm transition-shadow data-[disabled]:(cursor-not-allowed opacity-50) data-[checked]:bg-primary transition-property-[box-shadow,color,background-color]",
-					local.class,
-				)}
-				{...rest}
-			>
-				{local.children}
-			</SwitchPrimitive.Control>
-		</>
-	);
-};
+  const [local, rest] = splitProps(props as switchControlProps, [
+    "class",
+    "children",
+  ])
+
+  return (
+    <>
+      <SwitchPrimitive.Input class="[&:focus-visible+div]:(outline-none ring-1.5 ring-ring ring-offset-background) ring-offset-2" />
+      <SwitchPrimitive.Control
+        class={cn(
+          "bg-input data-[disabled]:(cursor-not-allowed opacity-50) data-[checked]:bg-primary transition-property-[box-shadow,color,background-color] inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-shadow",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </SwitchPrimitive.Control>
+    </>
+  )
+}
 
 type switchThumbProps<T extends ValidComponent = "div"> = VoidProps<
-	SwitchThumbProps<T> & { class?: string }
->;
+  SwitchThumbProps<T> & { class?: string }
+>
 
 export const SwitchThumb = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, switchThumbProps<T>>,
+  props: PolymorphicProps<T, switchThumbProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as switchThumbProps, ["class"]);
-
-	return (
-		<SwitchPrimitive.Thumb
-			class={cn(
-				"pointer-events-none block h-4 w-4 translate-x-0 rounded-full bg-background shadow-lg transition-transform data-[checked]:translate-x-4",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as switchThumbProps, ["class"])
+
+  return (
+    <SwitchPrimitive.Thumb
+      class={cn(
+        "bg-background pointer-events-none block h-4 w-4 translate-x-0 rounded-full shadow-lg transition-transform data-[checked]:translate-x-4",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/table.tsx b/packages/unocss/ui/table.tsx
index 0884535f..2b1ca7c9 100644
--- a/packages/unocss/ui/table.tsx
+++ b/packages/unocss/ui/table.tsx
@@ -1,93 +1,94 @@
-import { cn } from "@/libs/cn";
-import { type ComponentProps, splitProps } from "solid-js";
+import { splitProps, type ComponentProps } from "solid-js"
+
+import { cn } from "@/libs/cn"
 
 export const Table = (props: ComponentProps<"table">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<div class="w-full overflow-auto">
-			<table
-				class={cn("w-full caption-bottom text-sm", local.class)}
-				{...rest}
-			/>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <div class="w-full overflow-auto">
+      <table
+        class={cn("w-full caption-bottom text-sm", local.class)}
+        {...rest}
+      />
+    </div>
+  )
+}
 
 export const TableHeader = (props: ComponentProps<"thead">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />;
-};
+  return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />
+}
 
 export const TableBody = (props: ComponentProps<"tbody">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />
-	);
-};
+  return (
+    <tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />
+  )
+}
 
 export const TableFooter = (props: ComponentProps<"tfoot">) => {
-	const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class"])
 
-	return (
-		<tbody
-			class={cn("bg-primary font-medium text-primary-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <tbody
+      class={cn("bg-primary text-primary-foreground font-medium", local.class)}
+      {...rest}
+    />
+  )
+}
 
 export const TableRow = (props: ComponentProps<"tr">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<tr
-			class={cn(
-				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <tr
+      class={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const TableHead = (props: ComponentProps<"th">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<th
-			class={cn(
-				"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <th
+      class={cn(
+        "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const TableCell = (props: ComponentProps<"td">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<td
-			class={cn(
-				"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <td
+      class={cn(
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const TableCaption = (props: ComponentProps<"caption">) => {
-	const [local, rest] = splitProps(props, ["class"]);
-
-	return (
-		<caption
-			class={cn("mt-4 text-sm text-muted-foreground", local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <caption
+      class={cn("text-muted-foreground mt-4 text-sm", local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/tabs.tsx b/packages/unocss/ui/tabs.tsx
index 895d7763..f3e559ea 100644
--- a/packages/unocss/ui/tabs.tsx
+++ b/packages/unocss/ui/tabs.tsx
@@ -1,133 +1,132 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	TabsContentProps,
-	TabsIndicatorProps,
-	TabsListProps,
-	TabsRootProps,
-	TabsTriggerProps,
-} from "@kobalte/core/tabs";
-import { Tabs as TabsPrimitive } from "@kobalte/core/tabs";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Tabs as TabsPrimitive,
+  type TabsContentProps,
+  type TabsIndicatorProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsTriggerProps,
+} from "@kobalte/core/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 type tabsProps<T extends ValidComponent = "div"> = TabsRootProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const Tabs = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsProps<T>>,
+  props: PolymorphicProps<T, tabsProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsProps, ["class"]);
+  const [local, rest] = splitProps(props as tabsProps, ["class"])
 
-	return (
-		<TabsPrimitive
-			class={cn("w-full data-[orientation=vertical]:flex", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <TabsPrimitive
+      class={cn("w-full data-[orientation=vertical]:flex", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type tabsListProps<T extends ValidComponent = "div"> = TabsListProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const TabsList = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsListProps<T>>,
+  props: PolymorphicProps<T, tabsListProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsListProps, ["class"]);
-
-	return (
-		<TabsPrimitive.List
-			class={cn(
-				"relative flex rounded-lg bg-muted p-1 text-muted-foreground data-[orientation=vertical]:(flex-col items-stretch) data-[orientation=horizontal]:items-center w-full",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsListProps, ["class"])
+
+  return (
+    <TabsPrimitive.List
+      class={cn(
+        "bg-muted text-muted-foreground data-[orientation=vertical]:(flex-col items-stretch) relative flex w-full rounded-lg p-1 data-[orientation=horizontal]:items-center",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type tabsContentProps<T extends ValidComponent = "div"> =
-	TabsContentProps<T> & {
-		class?: string;
-	};
+  TabsContentProps<T> & {
+    class?: string
+  }
 
 export const TabsContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsContentProps<T>>,
+  props: PolymorphicProps<T, tabsContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsContentProps, ["class"]);
-
-	return (
-		<TabsPrimitive.Content
-			class={cn(
-				"data-[orientation=vertical]:ml-2 data-[orientation=horizontal]:mt-2 transition-shadow duration-200 focus-visible:(ring-offset-background outline-none ring-1.5 ring-ring ring-offset-2)",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsContentProps, ["class"])
+
+  return (
+    <TabsPrimitive.Content
+      class={cn(
+        "focus-visible:(ring-offset-background ring-1.5 ring-ring ring-offset-2) outline-none transition-shadow duration-200 data-[orientation=horizontal]:mt-2 data-[orientation=vertical]:ml-2",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 type tabsTriggerProps<T extends ValidComponent = "button"> =
-	TabsTriggerProps<T> & {
-		class?: string;
-	};
+  TabsTriggerProps<T> & {
+    class?: string
+  }
 
 export const TabsTrigger = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, tabsTriggerProps<T>>,
+  props: PolymorphicProps<T, tabsTriggerProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsTriggerProps, ["class"]);
-
-	return (
-		<TabsPrimitive.Trigger
-			class={cn(
-				"w-full relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-colors disabled:(pointer-events-none opacity-50) data-[selected]:text-foreground peer h-7 outline-none bg-transparent",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsTriggerProps, ["class"])
+
+  return (
+    <TabsPrimitive.Trigger
+      class={cn(
+        "disabled:(pointer-events-none opacity-50) data-[selected]:text-foreground peer relative z-10 inline-flex h-7 w-full items-center justify-center whitespace-nowrap rounded-md bg-transparent px-3 py-1 text-sm font-medium outline-none transition-colors",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 const tabsIndicatorVariants = cva(
-	"absolute transition-all duration-200 outline-none",
-	{
-		variants: {
-			variant: {
-				block:
-					"data-[orientation=horizontal]:(bottom-1 left-0 h-[calc(100%-0.5rem)]) data-[orientation=vertical]:(right-1 top-0 w-[calc(100%-0.5rem)]) bg-background shadow rounded-md peer-focus-visible:(ring-1.5 ring-ring ring-offset-2 ring-offset-background outline-none)",
-				underline:
-					"data-[orientation=horizontal]:(-bottom-[1px] left-0 h-2px) data-[orientation=vertical]:(-right-[1px] top-0 w-2px) bg-primary",
-			},
-		},
-		defaultVariants: {
-			variant: "block",
-		},
-	},
-);
+  "absolute transition-all duration-200 outline-none",
+  {
+    variants: {
+      variant: {
+        block:
+          "data-[orientation=horizontal]:(bottom-1 left-0 h-[calc(100%-0.5rem)]) data-[orientation=vertical]:(right-1 top-0 w-[calc(100%-0.5rem)]) bg-background shadow rounded-md peer-focus-visible:(ring-1.5 ring-ring ring-offset-2 ring-offset-background outline-none)",
+        underline:
+          "data-[orientation=horizontal]:(-bottom-[1px] left-0 h-2px) data-[orientation=vertical]:(-right-[1px] top-0 w-2px) bg-primary",
+      },
+    },
+    defaultVariants: {
+      variant: "block",
+    },
+  }
+)
 
 type tabsIndicatorProps<T extends ValidComponent = "div"> = VoidProps<
-	TabsIndicatorProps<T> &
-		VariantProps<typeof tabsIndicatorVariants> & {
-			class?: string;
-		}
->;
+  TabsIndicatorProps<T> &
+    VariantProps<typeof tabsIndicatorVariants> & {
+      class?: string
+    }
+>
 
 export const TabsIndicator = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tabsIndicatorProps<T>>,
+  props: PolymorphicProps<T, tabsIndicatorProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tabsIndicatorProps, [
-		"class",
-		"variant",
-	]);
-
-	return (
-		<TabsPrimitive.Indicator
-			class={cn(tabsIndicatorVariants({ variant: local.variant }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as tabsIndicatorProps, [
+    "class",
+    "variant",
+  ])
+
+  return (
+    <TabsPrimitive.Indicator
+      class={cn(tabsIndicatorVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/textarea.tsx b/packages/unocss/ui/textarea.tsx
index d234c5b4..8f1f2f19 100644
--- a/packages/unocss/ui/textarea.tsx
+++ b/packages/unocss/ui/textarea.tsx
@@ -1,28 +1,30 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { TextFieldTextAreaProps } from "@kobalte/core/text-field";
-import { TextArea as TextFieldPrimitive } from "@kobalte/core/text-field";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  TextArea as TextFieldPrimitive,
+  type TextFieldTextAreaProps,
+} from "@kobalte/core/text-field"
+
+import { cn } from "@/libs/cn"
 
 type textAreaProps<T extends ValidComponent = "textarea"> = VoidProps<
-	TextFieldTextAreaProps<T> & {
-		class?: string;
-	}
->;
+  TextFieldTextAreaProps<T> & {
+    class?: string
+  }
+>
 
 export const TextArea = <T extends ValidComponent = "textarea">(
-	props: PolymorphicProps<T, textAreaProps<T>>,
+  props: PolymorphicProps<T, textAreaProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textAreaProps, ["class"]);
+  const [local, rest] = splitProps(props as textAreaProps, ["class"])
 
-	return (
-		<TextFieldPrimitive
-			class={cn(
-				"flex min-h-[60px] w-full rounded-md border border-input bg-inherit px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:(outline-none ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <TextFieldPrimitive
+      class={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:(outline-none ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) flex min-h-[60px] w-full rounded-md border bg-inherit px-3 py-2 text-sm shadow-sm transition-shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/textfield.tsx b/packages/unocss/ui/textfield.tsx
index b5bbc876..d7978743 100644
--- a/packages/unocss/ui/textfield.tsx
+++ b/packages/unocss/ui/textfield.tsx
@@ -1,126 +1,126 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	TextFieldDescriptionProps,
-	TextFieldErrorMessageProps,
-	TextFieldInputProps,
-	TextFieldLabelProps,
-	TextFieldRootProps,
-} from "@kobalte/core/text-field";
-import { TextField as TextFieldPrimitive } from "@kobalte/core/text-field";
-import { cva } from "class-variance-authority";
-import type { ValidComponent, VoidProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent, type VoidProps } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  TextField as TextFieldPrimitive,
+  type TextFieldDescriptionProps,
+  type TextFieldErrorMessageProps,
+  type TextFieldInputProps,
+  type TextFieldLabelProps,
+  type TextFieldRootProps,
+} from "@kobalte/core/text-field"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 type textFieldProps<T extends ValidComponent = "div"> =
-	TextFieldRootProps<T> & {
-		class?: string;
-	};
+  TextFieldRootProps<T> & {
+    class?: string
+  }
 
 export const TextFieldRoot = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, textFieldProps<T>>,
+  props: PolymorphicProps<T, textFieldProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldProps, ["class"]);
+  const [local, rest] = splitProps(props as textFieldProps, ["class"])
 
-	return <TextFieldPrimitive class={cn("space-y-1", local.class)} {...rest} />;
-};
+  return <TextFieldPrimitive class={cn("space-y-1", local.class)} {...rest} />
+}
 
 export const textfieldLabel = cva(
-	"text-sm data-[disabled]:(cursor-not-allowed opacity-70) font-medium",
-	{
-		variants: {
-			label: {
-				true: "data-[invalid]:text-destructive",
-			},
-			error: {
-				true: "text-destructive text-xs",
-			},
-			description: {
-				true: "font-normal text-muted-foreground",
-			},
-		},
-		defaultVariants: {
-			label: true,
-		},
-	},
-);
+  "text-sm data-[disabled]:(cursor-not-allowed opacity-70) font-medium",
+  {
+    variants: {
+      label: {
+        true: "data-[invalid]:text-destructive",
+      },
+      error: {
+        true: "text-destructive text-xs",
+      },
+      description: {
+        true: "font-normal text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      label: true,
+    },
+  }
+)
 
 type textFieldLabelProps<T extends ValidComponent = "label"> =
-	TextFieldLabelProps<T> & {
-		class?: string;
-	};
+  TextFieldLabelProps<T> & {
+    class?: string
+  }
 
 export const TextFieldLabel = <T extends ValidComponent = "label">(
-	props: PolymorphicProps<T, textFieldLabelProps<T>>,
+  props: PolymorphicProps<T, textFieldLabelProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldLabelProps, ["class"]);
+  const [local, rest] = splitProps(props as textFieldLabelProps, ["class"])
 
-	return (
-		<TextFieldPrimitive.Label
-			class={cn(textfieldLabel(), local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <TextFieldPrimitive.Label
+      class={cn(textfieldLabel(), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type textFieldErrorMessageProps<T extends ValidComponent = "div"> =
-	TextFieldErrorMessageProps<T> & {
-		class?: string;
-	};
+  TextFieldErrorMessageProps<T> & {
+    class?: string
+  }
 
 export const TextFieldErrorMessage = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, textFieldErrorMessageProps<T>>,
+  props: PolymorphicProps<T, textFieldErrorMessageProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldErrorMessageProps, [
-		"class",
-	]);
-
-	return (
-		<TextFieldPrimitive.ErrorMessage
-			class={cn(textfieldLabel({ error: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as textFieldErrorMessageProps, [
+    "class",
+  ])
+
+  return (
+    <TextFieldPrimitive.ErrorMessage
+      class={cn(textfieldLabel({ error: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type textFieldDescriptionProps<T extends ValidComponent = "div"> =
-	TextFieldDescriptionProps<T> & {
-		class?: string;
-	};
+  TextFieldDescriptionProps<T> & {
+    class?: string
+  }
 
 export const TextFieldDescription = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, textFieldDescriptionProps<T>>,
+  props: PolymorphicProps<T, textFieldDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldDescriptionProps, [
-		"class",
-	]);
-
-	return (
-		<TextFieldPrimitive.Description
-			class={cn(textfieldLabel({ description: true }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as textFieldDescriptionProps, [
+    "class",
+  ])
+
+  return (
+    <TextFieldPrimitive.Description
+      class={cn(textfieldLabel({ description: true }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 export type textFieldInputProps<T extends ValidComponent = "input"> = VoidProps<
-	TextFieldInputProps<T> & {
-		class?: string;
-	}
->;
+  TextFieldInputProps<T> & {
+    class?: string
+  }
+>
 
 export const TextField = <T extends ValidComponent = "input">(
-	props: PolymorphicProps<T, textFieldInputProps<T>>,
+  props: PolymorphicProps<T, textFieldInputProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as textFieldInputProps, ["class"]);
-
-	return (
-		<TextFieldPrimitive.Input
-			class={cn(
-				"flex h-9 w-full rounded-md border border-input bg-inherit px-3 py-1 text-sm shadow-sm file:(border-0 bg-transparent text-sm font-medium) placeholder:text-muted-foreground focus-visible:(outline-none ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) transition-shadow",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as textFieldInputProps, ["class"])
+
+  return (
+    <TextFieldPrimitive.Input
+      class={cn(
+        "border-input file:(border-0 font-medium) placeholder:text-muted-foreground focus-visible:(outline-none ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) flex h-9 w-full rounded-md border bg-inherit bg-transparent px-3 py-1 text-sm shadow-sm transition-shadow",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/toast.tsx b/packages/unocss/ui/toast.tsx
index 816781f3..bddfc7ef 100644
--- a/packages/unocss/ui/toast.tsx
+++ b/packages/unocss/ui/toast.tsx
@@ -1,168 +1,169 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	ToastDescriptionProps,
-	ToastListProps,
-	ToastRegionProps,
-	ToastRootProps,
-	ToastTitleProps,
-} from "@kobalte/core/toast";
-import { Toast as ToastPrimitive } from "@kobalte/core/toast";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type {
-	ComponentProps,
-	ValidComponent,
-	VoidComponent,
-	VoidProps,
-} from "solid-js";
-import { mergeProps, splitProps } from "solid-js";
-import { Portal } from "solid-js/web";
+import {
+  mergeProps,
+  splitProps,
+  type ComponentProps,
+  type ValidComponent,
+  type VoidComponent,
+  type VoidProps,
+} from "solid-js"
+import { Portal } from "solid-js/web"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Toast as ToastPrimitive,
+  type ToastDescriptionProps,
+  type ToastListProps,
+  type ToastRegionProps,
+  type ToastRootProps,
+  type ToastTitleProps,
+} from "@kobalte/core/toast"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 export const toastVariants = cva(
-	"group pointer-events-auto relative flex flex-col gap-3 w-full items-center justify-between overflow-hidden rounded-md border p-4 pr-6 shadow-lg data-[swipe=cancel]:translate-y-0 data-[swipe=end]:(translate-y-[var(--kb-toast-swipe-end-y)] animate-out) data-[swipe=move]:(translate-y-[--kb-toast-swipe-move-y] transition-none) data-[opened]:(animate-in slide-in-from-top-full sm:slide-in-from-bottom-full) data-[closed]:(animate-out fade-out-80 slide-out-to-top-full sm:slide-out-to-bottom-full)",
-	{
-		variants: {
-			variant: {
-				default: "border bg-background",
-				destructive:
-					"destructive group border-destructive bg-destructive text-destructive-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  "group pointer-events-auto relative flex flex-col gap-3 w-full items-center justify-between overflow-hidden rounded-md border p-4 pr-6 shadow-lg data-[swipe=cancel]:translate-y-0 data-[swipe=end]:(translate-y-[var(--kb-toast-swipe-end-y)] animate-out) data-[swipe=move]:(translate-y-[--kb-toast-swipe-move-y] transition-none) data-[opened]:(animate-in slide-in-from-top-full sm:slide-in-from-bottom-full) data-[closed]:(animate-out fade-out-80 slide-out-to-top-full sm:slide-out-to-bottom-full)",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
 type toastProps<T extends ValidComponent = "li"> = ToastRootProps<T> &
-	VariantProps<typeof toastVariants> & {
-		class?: string;
-	};
+  VariantProps<typeof toastVariants> & {
+    class?: string
+  }
 
 export const Toast = <T extends ValidComponent = "li">(
-	props: PolymorphicProps<T, toastProps<T>>,
+  props: PolymorphicProps<T, toastProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastProps, ["class", "variant"]);
+  const [local, rest] = splitProps(props as toastProps, ["class", "variant"])
 
-	return (
-		<ToastPrimitive
-			class={cn(toastVariants({ variant: local.variant }), local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToastPrimitive
+      class={cn(toastVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  )
+}
 
 type toastTitleProps<T extends ValidComponent = "div"> = ToastTitleProps<T> & {
-	class?: string;
-};
+  class?: string
+}
 
 export const ToastTitle = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toastTitleProps<T>>,
+  props: PolymorphicProps<T, toastTitleProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastTitleProps, ["class"]);
+  const [local, rest] = splitProps(props as toastTitleProps, ["class"])
 
-	return (
-		<ToastPrimitive.Title
-			class={cn("text-sm font-semibold [&+div]:text-xs", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToastPrimitive.Title
+      class={cn("text-sm font-semibold [&+div]:text-xs", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type toastDescriptionProps<T extends ValidComponent = "div"> =
-	ToastDescriptionProps<T> & {
-		class?: string;
-	};
+  ToastDescriptionProps<T> & {
+    class?: string
+  }
 
 export const ToastDescription = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toastDescriptionProps<T>>,
+  props: PolymorphicProps<T, toastDescriptionProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastDescriptionProps, ["class"]);
+  const [local, rest] = splitProps(props as toastDescriptionProps, ["class"])
 
-	return (
-		<ToastPrimitive.Description
-			class={cn("text-sm opacity-90", local.class)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToastPrimitive.Description
+      class={cn("text-sm opacity-90", local.class)}
+      {...rest}
+    />
+  )
+}
 
 type toastRegionProps<T extends ValidComponent = "div"> =
-	ToastRegionProps<T> & {
-		class?: string;
-	};
+  ToastRegionProps<T> & {
+    class?: string
+  }
 
 export const ToastRegion = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toastRegionProps<T>>,
+  props: PolymorphicProps<T, toastRegionProps<T>>
 ) => {
-	const merge = mergeProps<toastRegionProps[]>(
-		{
-			swipeDirection: "down",
-		},
-		props,
-	);
-
-	return (
-		<Portal>
-			<ToastPrimitive.Region {...merge} />
-		</Portal>
-	);
-};
+  const merge = mergeProps<toastRegionProps[]>(
+    {
+      swipeDirection: "down",
+    },
+    props
+  )
+
+  return (
+    <Portal>
+      <ToastPrimitive.Region {...merge} />
+    </Portal>
+  )
+}
 
 type toastListProps<T extends ValidComponent = "ol"> = VoidProps<
-	ToastListProps<T> & {
-		class?: string;
-	}
->;
+  ToastListProps<T> & {
+    class?: string
+  }
+>
 
 export const ToastList = <T extends ValidComponent = "ol">(
-	props: PolymorphicProps<T, toastListProps<T>>,
+  props: PolymorphicProps<T, toastListProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toastListProps, ["class"]);
-
-	return (
-		<ToastPrimitive.List
-			class={cn(
-				"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:(bottom-0 right-0 top-auto flex-col) md:max-w-[420px]",
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  const [local, rest] = splitProps(props as toastListProps, ["class"])
+
+  return (
+    <ToastPrimitive.List
+      class={cn(
+        "sm:(bottom-0 flex-col) fixed right-0 top-0 top-auto z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 md:max-w-[420px]",
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
 
 export const ToastContent = (props: ComponentProps<"div">) => {
-	const [local, rest] = splitProps(props, ["class", "children"]);
-
-	return (
-		<div class={cn("flex w-full flex-col", local.class)} {...rest}>
-			<div>{local.children}</div>
-			<ToastPrimitive.CloseButton class="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:(opacity-100 outline-none) group-hover:opacity-100 group-[.destructive]:(text-red-300 hover:text-red-50) bg-inherit">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M18 6L6 18M6 6l12 12"
-					/>
-					<title>Close</title>
-				</svg>
-			</ToastPrimitive.CloseButton>
-		</div>
-	);
-};
+  const [local, rest] = splitProps(props, ["class", "children"])
+
+  return (
+    <div class={cn("flex w-full flex-col", local.class)} {...rest}>
+      <div>{local.children}</div>
+      <ToastPrimitive.CloseButton class="text-foreground/50 hover:text-foreground focus:(opacity-100 outline-none) group-[.destructive]:(text-red-300 hover:text-red-50) absolute right-1 top-1 rounded-md bg-inherit p-1 opacity-0 transition-opacity group-hover:opacity-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M18 6L6 18M6 6l12 12"
+          />
+          <title>Close</title>
+        </svg>
+      </ToastPrimitive.CloseButton>
+    </div>
+  )
+}
 
 export const ToastProgress: VoidComponent = () => {
-	return (
-		<ToastPrimitive.ProgressTrack class="h-1 w-full overflow-hidden rounded-xl bg-primary/20 group-[.destructive]:bg-background/20">
-			<ToastPrimitive.ProgressFill class="h-full w-[--kb-toast-progress-fill-width] bg-primary transition-all duration-150 ease-linear group-[.destructive]:bg-destructive-foreground" />
-		</ToastPrimitive.ProgressTrack>
-	);
-};
+  return (
+    <ToastPrimitive.ProgressTrack class="bg-primary/20 group-[.destructive]:bg-background/20 h-1 w-full overflow-hidden rounded-xl">
+      <ToastPrimitive.ProgressFill class="bg-primary group-[.destructive]:bg-destructive-foreground h-full w-[--kb-toast-progress-fill-width] transition-all duration-150 ease-linear" />
+    </ToastPrimitive.ProgressTrack>
+  )
+}
diff --git a/packages/unocss/ui/toggle-group.tsx b/packages/unocss/ui/toggle-group.tsx
index 2665f6a4..896696ad 100644
--- a/packages/unocss/ui/toggle-group.tsx
+++ b/packages/unocss/ui/toggle-group.tsx
@@ -1,85 +1,94 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	ToggleGroupItemProps,
-	ToggleGroupRootProps,
-} from "@kobalte/core/toggle-group";
-import { ToggleGroup as ToggleGroupPrimitive } from "@kobalte/core/toggle-group";
-import type { VariantProps } from "class-variance-authority";
-import type { Accessor, ParentProps, ValidComponent } from "solid-js";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { toggleVariants } from "./toggle";
+import {
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+  type Accessor,
+  type ParentProps,
+  type ValidComponent,
+} from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  ToggleGroup as ToggleGroupPrimitive,
+  type ToggleGroupItemProps,
+  type ToggleGroupRootProps,
+} from "@kobalte/core/toggle-group"
+import type { VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
+
+import { toggleVariants } from "./toggle"
 
 const ToggleGroupContext =
-	createContext<Accessor<VariantProps<typeof toggleVariants>>>();
+  createContext<Accessor<VariantProps<typeof toggleVariants>>>()
 
 const useToggleGroup = () => {
-	const context = useContext(ToggleGroupContext);
+  const context = useContext(ToggleGroupContext)
 
-	if (!context) {
-		throw new Error(
-			"`useToggleGroup`: must be used within a `ToggleGroup` component",
-		);
-	}
+  if (!context) {
+    throw new Error(
+      "`useToggleGroup`: must be used within a `ToggleGroup` component"
+    )
+  }
 
-	return context;
-};
+  return context
+}
 
 type toggleGroupProps<T extends ValidComponent = "div"> = ParentProps<
-	ToggleGroupRootProps<T> &
-		VariantProps<typeof toggleVariants> & {
-			class?: string;
-		}
->;
+  ToggleGroupRootProps<T> &
+    VariantProps<typeof toggleVariants> & {
+      class?: string
+    }
+>
 
 export const ToggleGroup = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, toggleGroupProps<T>>,
+  props: PolymorphicProps<T, toggleGroupProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toggleGroupProps, [
-		"class",
-		"children",
-		"size",
-		"variant",
-	]);
+  const [local, rest] = splitProps(props as toggleGroupProps, [
+    "class",
+    "children",
+    "size",
+    "variant",
+  ])
 
-	const value = createMemo<VariantProps<typeof toggleVariants>>(() => ({
-		size: local.size,
-		variant: local.variant,
-	}));
+  const value = createMemo<VariantProps<typeof toggleVariants>>(() => ({
+    size: local.size,
+    variant: local.variant,
+  }))
 
-	return (
-		<ToggleGroupPrimitive
-			class={cn("flex items-center justify-center gap-1", local.class)}
-			{...rest}
-		>
-			<ToggleGroupContext.Provider value={value}>
-				{local.children}
-			</ToggleGroupContext.Provider>
-		</ToggleGroupPrimitive>
-	);
-};
+  return (
+    <ToggleGroupPrimitive
+      class={cn("flex items-center justify-center gap-1", local.class)}
+      {...rest}
+    >
+      <ToggleGroupContext.Provider value={value}>
+        {local.children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
 
 type toggleGroupItemProps<T extends ValidComponent = "button"> =
-	ToggleGroupItemProps<T> & {
-		class?: string;
-	};
+  ToggleGroupItemProps<T> & {
+    class?: string
+  }
 
 export const ToggleGroupItem = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, toggleGroupItemProps<T>>,
+  props: PolymorphicProps<T, toggleGroupItemProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toggleGroupItemProps, ["class"]);
-	const context = useToggleGroup();
+  const [local, rest] = splitProps(props as toggleGroupItemProps, ["class"])
+  const context = useToggleGroup()
 
-	return (
-		<ToggleGroupPrimitive.Item
-			class={cn(
-				toggleVariants({
-					variant: context().variant,
-					size: context().size,
-				}),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToggleGroupPrimitive.Item
+      class={cn(
+        toggleVariants({
+          variant: context().variant,
+          size: context().size,
+        }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/toggle.tsx b/packages/unocss/ui/toggle.tsx
index d6c4be34..dcd6d0b7 100644
--- a/packages/unocss/ui/toggle.tsx
+++ b/packages/unocss/ui/toggle.tsx
@@ -1,56 +1,57 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type { ToggleButtonRootProps } from "@kobalte/core/toggle-button";
-import { ToggleButton as ToggleButtonPrimitive } from "@kobalte/core/toggle-button";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import type { ValidComponent } from "solid-js";
-import { splitProps } from "solid-js";
+import { splitProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  ToggleButton as ToggleButtonPrimitive,
+  type ToggleButtonRootProps,
+} from "@kobalte/core/toggle-button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/cn"
 
 export const toggleVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors transition-property-[box-shadow,color,background-color] hover:(bg-muted text-muted-foreground) focus-visible:(outline-none ring-1.5 ring-ring) disabled:(pointer-events-none opacity-50) data-[pressed]:(bg-accent text-accent-foreground) transition-shadow",
-	{
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border border-input bg-transparent shadow-sm hover:(bg-accent text-accent-foreground)",
-			},
-			size: {
-				default: "h-9 px-3",
-				sm: "h-8 px-2",
-				lg: "h-10 px-3",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors transition-property-[box-shadow,color,background-color] hover:(bg-muted text-muted-foreground) focus-visible:(outline-none ring-1.5 ring-ring) disabled:(pointer-events-none opacity-50) data-[pressed]:(bg-accent text-accent-foreground) transition-shadow",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:(bg-accent text-accent-foreground)",
+      },
+      size: {
+        default: "h-9 px-3",
+        sm: "h-8 px-2",
+        lg: "h-10 px-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 type toggleButtonProps<T extends ValidComponent = "button"> =
-	ToggleButtonRootProps<T> &
-		VariantProps<typeof toggleVariants> & {
-			class?: string;
-		};
+  ToggleButtonRootProps<T> &
+    VariantProps<typeof toggleVariants> & {
+      class?: string
+    }
 
 export const ToggleButton = <T extends ValidComponent = "button">(
-	props: PolymorphicProps<T, toggleButtonProps<T>>,
+  props: PolymorphicProps<T, toggleButtonProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as toggleButtonProps, [
-		"class",
-		"variant",
-		"size",
-	]);
+  const [local, rest] = splitProps(props as toggleButtonProps, [
+    "class",
+    "variant",
+    "size",
+  ])
 
-	return (
-		<ToggleButtonPrimitive
-			class={cn(
-				toggleVariants({ variant: local.variant, size: local.size }),
-				local.class,
-			)}
-			{...rest}
-		/>
-	);
-};
+  return (
+    <ToggleButtonPrimitive
+      class={cn(
+        toggleVariants({ variant: local.variant, size: local.size }),
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/unocss/ui/tooltip.tsx b/packages/unocss/ui/tooltip.tsx
index 8271974c..e5cce459 100644
--- a/packages/unocss/ui/tooltip.tsx
+++ b/packages/unocss/ui/tooltip.tsx
@@ -1,45 +1,46 @@
-import { cn } from "@/libs/cn";
-import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import type {
-	TooltipContentProps,
-	TooltipRootProps,
-} from "@kobalte/core/tooltip";
-import { Tooltip as TooltipPrimitive } from "@kobalte/core/tooltip";
-import { type ValidComponent, mergeProps, splitProps } from "solid-js";
+import { mergeProps, splitProps, type ValidComponent } from "solid-js"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import {
+  Tooltip as TooltipPrimitive,
+  type TooltipContentProps,
+  type TooltipRootProps,
+} from "@kobalte/core/tooltip"
 
-export const TooltipTrigger = TooltipPrimitive.Trigger;
+import { cn } from "@/libs/cn"
+
+export const TooltipTrigger = TooltipPrimitive.Trigger
 
 export const Tooltip = (props: TooltipRootProps) => {
-	const merge = mergeProps<TooltipRootProps[]>(
-		{
-			gutter: 4,
-			flip: false,
-		},
-		props,
-	);
+  const merge = mergeProps<TooltipRootProps[]>(
+    {
+      gutter: 4,
+      flip: false,
+    },
+    props
+  )
 
-	return <TooltipPrimitive {...merge} />;
-};
+  return <TooltipPrimitive {...merge} />
+}
 
 type tooltipContentProps<T extends ValidComponent = "div"> =
-	TooltipContentProps<T> & {
-		class?: string;
-	};
+  TooltipContentProps<T> & {
+    class?: string
+  }
 
 export const TooltipContent = <T extends ValidComponent = "div">(
-	props: PolymorphicProps<T, tooltipContentProps<T>>,
+  props: PolymorphicProps<T, tooltipContentProps<T>>
 ) => {
-	const [local, rest] = splitProps(props as tooltipContentProps, ["class"]);
+  const [local, rest] = splitProps(props as tooltipContentProps, ["class"])
 
-	return (
-		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				class={cn(
-					"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
-					local.class,
-				)}
-				{...rest}
-			/>
-		</TooltipPrimitive.Portal>
-	);
-};
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        class={cn(
+          "bg-primary text-primary-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95) z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+          local.class
+        )}
+        {...rest}
+      />
+    </TooltipPrimitive.Portal>
+  )
+}
diff --git a/packages/unocss/uno.config.ts b/packages/unocss/uno.config.ts
index 59a75b11..442329f4 100644
--- a/packages/unocss/uno.config.ts
+++ b/packages/unocss/uno.config.ts
@@ -1,106 +1,106 @@
 import {
-	defineConfig,
-	presetUno,
-	transformerDirectives,
-	transformerVariantGroup,
-} from "unocss";
-import presetAnimations from "unocss-preset-animations";
+  defineConfig,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from "unocss"
+import presetAnimations from "unocss-preset-animations"
 
 export default defineConfig({
-	presets: [
-		presetUno({
-			dark: {
-				dark: '[data-kb-theme="dark"]',
-				light: '[data-kb-theme="light"]',
-			},
-		}),
-		presetAnimations(),
-	],
-	transformers: [transformerDirectives(), transformerVariantGroup()],
-	theme: {
-		colors: {
-			border: "hsl(var(--border))",
-			input: "hsl(var(--input))",
-			ring: "hsl(var(--ring))",
-			background: "hsl(var(--background))",
-			foreground: "hsl(var(--foreground))",
-			primary: {
-				DEFAULT: "hsl(var(--primary))",
-				foreground: "hsl(var(--primary-foreground))",
-			},
-			secondary: {
-				DEFAULT: "hsl(var(--secondary))",
-				foreground: "hsl(var(--secondary-foreground))",
-			},
-			destructive: {
-				DEFAULT: "hsl(var(--destructive))",
-				foreground: "hsl(var(--destructive-foreground))",
-			},
-			muted: {
-				DEFAULT: "hsl(var(--muted))",
-				foreground: "hsl(var(--muted-foreground))",
-			},
-			accent: {
-				DEFAULT: "hsl(var(--accent))",
-				foreground: "hsl(var(--accent-foreground))",
-			},
-			popover: {
-				DEFAULT: "hsl(var(--popover))",
-				foreground: "hsl(var(--popover-foreground))",
-			},
-			card: {
-				DEFAULT: "hsl(var(--card))",
-				foreground: "hsl(var(--card-foreground))",
-			},
-			sidebar: {
-				DEFAULT: "hsl(var(--sidebar-background))",
-				foreground: "hsl(var(--sidebar-foreground))",
-				primary: {
-					DEFAULT: "hsl(var(--sidebar-primary))",
-					foreground: "hsl(var(--sidebar-primary-foreground))",
-				},
-				accent: {
-					DEFAULT: "hsl(var(--sidebar-accent))",
-					foreground: "hsl(var(--sidebar-accent-foreground))",
-				},
-				border: "hsl(var(--sidebar-border))",
-				ring: "hsl(var(--sidebar-ring))",
-			},
-		},
-		borderRadius: {
-			lg: "var(--radius)",
-			md: "calc(var(--radius) - 2px)",
-			sm: "calc(var(--radius) - 4px)",
-		},
-		animation: {
-			keyframes: {
-				"accordion-down":
-					"{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
-				"accordion-up":
-					"{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
-				"collapsible-down":
-					"{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
-				"collapsible-up":
-					"{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }",
-				"caret-blink": "{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }",
-			},
-			timingFns: {
-				"accordion-down": "ease-out",
-				"accordion-up": "ease-out",
-				"collapsible-down": "ease-out",
-				"collapsible-up": "ease-out",
-				"caret-blink": "ease-out",
-			},
-			durations: {
-				"accordion-down": "0.2s",
-				"accordion-up": "0.2s",
-				"collapsible-down": "0.2s",
-				"collapsible-up": "0.2s",
-				"caret-blink": "1.25s",
-			},
-			counts: {
-				"caret-blink": "infinite",
-			},
-		},
-	},
-});
+  presets: [
+    presetUno({
+      dark: {
+        dark: '[data-kb-theme="dark"]',
+        light: '[data-kb-theme="light"]',
+      },
+    }),
+    presetAnimations(),
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+  theme: {
+    colors: {
+      border: "hsl(var(--border))",
+      input: "hsl(var(--input))",
+      ring: "hsl(var(--ring))",
+      background: "hsl(var(--background))",
+      foreground: "hsl(var(--foreground))",
+      primary: {
+        DEFAULT: "hsl(var(--primary))",
+        foreground: "hsl(var(--primary-foreground))",
+      },
+      secondary: {
+        DEFAULT: "hsl(var(--secondary))",
+        foreground: "hsl(var(--secondary-foreground))",
+      },
+      destructive: {
+        DEFAULT: "hsl(var(--destructive))",
+        foreground: "hsl(var(--destructive-foreground))",
+      },
+      muted: {
+        DEFAULT: "hsl(var(--muted))",
+        foreground: "hsl(var(--muted-foreground))",
+      },
+      accent: {
+        DEFAULT: "hsl(var(--accent))",
+        foreground: "hsl(var(--accent-foreground))",
+      },
+      popover: {
+        DEFAULT: "hsl(var(--popover))",
+        foreground: "hsl(var(--popover-foreground))",
+      },
+      card: {
+        DEFAULT: "hsl(var(--card))",
+        foreground: "hsl(var(--card-foreground))",
+      },
+      sidebar: {
+        DEFAULT: "hsl(var(--sidebar-background))",
+        foreground: "hsl(var(--sidebar-foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--sidebar-primary))",
+          foreground: "hsl(var(--sidebar-primary-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--sidebar-accent))",
+          foreground: "hsl(var(--sidebar-accent-foreground))",
+        },
+        border: "hsl(var(--sidebar-border))",
+        ring: "hsl(var(--sidebar-ring))",
+      },
+    },
+    borderRadius: {
+      lg: "var(--radius)",
+      md: "calc(var(--radius) - 2px)",
+      sm: "calc(var(--radius) - 4px)",
+    },
+    animation: {
+      keyframes: {
+        "accordion-down":
+          "{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
+        "accordion-up":
+          "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }",
+        "collapsible-down":
+          "{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
+        "collapsible-up":
+          "{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }",
+        "caret-blink": "{ 0%,70%,100% { opacity: 1 } 20%,50% { opacity: 0 } }",
+      },
+      timingFns: {
+        "accordion-down": "ease-out",
+        "accordion-up": "ease-out",
+        "collapsible-down": "ease-out",
+        "collapsible-up": "ease-out",
+        "caret-blink": "ease-out",
+      },
+      durations: {
+        "accordion-down": "0.2s",
+        "accordion-up": "0.2s",
+        "collapsible-down": "0.2s",
+        "collapsible-up": "0.2s",
+        "caret-blink": "1.25s",
+      },
+      counts: {
+        "caret-blink": "infinite",
+      },
+    },
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebc483f6..35caf289 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
 
   .:
     devDependencies:
-      '@biomejs/biome':
-        specifier: ^1.9.4
-        version: 1.9.4
       '@changesets/changelog-github':
         specifier: ^0.5.0
         version: 0.5.0
@@ -26,18 +23,36 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^19.6.0
         version: 19.6.0
+      '@eslint/js':
+        specifier: ^9.16.0
+        version: 9.17.0
+      '@ianvs/prettier-plugin-sort-imports':
+        specifier: ^4.4.0
+        version: 4.4.0(@vue/compiler-sfc@3.5.13)(prettier@3.4.2)
+      '@typescript-eslint/parser':
+        specifier: ^8.17.0
+        version: 8.19.0(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
+      eslint:
+        specifier: ^9.16.0
+        version: 9.17.0(jiti@2.4.2)
+      eslint-plugin-solid:
+        specifier: ^0.14.4
+        version: 0.14.5(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
       husky:
         specifier: ^9.1.7
         version: 9.1.7
-      lint-staged:
-        specifier: ^15.2.10
-        version: 15.3.0
       prettier:
         specifier: ^3.4.2
         version: 3.4.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.9
+        version: 0.6.9(@ianvs/prettier-plugin-sort-imports@4.4.0(@vue/compiler-sfc@3.5.13)(prettier@3.4.2))(prettier@3.4.2)
       turbo:
         specifier: ^2.3.3
         version: 2.3.3
+      typescript-eslint:
+        specifier: ^8.17.0
+        version: 8.19.0(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
 
   docs:
     dependencies:
@@ -114,27 +129,12 @@ importers:
         specifier: ^0.4.3
         version: 0.4.3(@types/node@22.10.3)(db0@0.2.1)(ioredis@5.4.2)(terser@5.37.0)(typescript@5.7.2)
     devDependencies:
-      '@eslint/js':
-        specifier: ^9.16.0
-        version: 9.17.0
-      '@typescript-eslint/parser':
-        specifier: ^8.17.0
-        version: 8.19.0(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
       '@vinxi/plugin-mdx':
         specifier: ^3.7.2
         version: 3.7.2(@mdx-js/mdx@2.3.0)
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
-      eslint:
-        specifier: ^9.16.0
-        version: 9.17.0(jiti@2.4.2)
-      eslint-config-biome:
-        specifier: ^1.9.4
-        version: 1.9.4
-      eslint-plugin-solid:
-        specifier: ^0.14.4
-        version: 0.14.5(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
       postcss:
         specifier: ^8.4.49
         version: 8.4.49
@@ -180,9 +180,6 @@ importers:
       tsx:
         specifier: ^4.19.2
         version: 4.19.2
-      typescript-eslint:
-        specifier: ^8.17.0
-        version: 8.19.0(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
       unified:
         specifier: ^11.0.5
         version: 11.0.5
@@ -417,59 +414,6 @@ packages:
     resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==}
     engines: {node: '>=6.9.0'}
 
-  '@biomejs/biome@1.9.4':
-    resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==}
-    engines: {node: '>=14.21.3'}
-    hasBin: true
-
-  '@biomejs/cli-darwin-arm64@1.9.4':
-    resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==}
-    engines: {node: '>=14.21.3'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@biomejs/cli-darwin-x64@1.9.4':
-    resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==}
-    engines: {node: '>=14.21.3'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@biomejs/cli-linux-arm64-musl@1.9.4':
-    resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==}
-    engines: {node: '>=14.21.3'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@biomejs/cli-linux-arm64@1.9.4':
-    resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==}
-    engines: {node: '>=14.21.3'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@biomejs/cli-linux-x64-musl@1.9.4':
-    resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==}
-    engines: {node: '>=14.21.3'}
-    cpu: [x64]
-    os: [linux]
-
-  '@biomejs/cli-linux-x64@1.9.4':
-    resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==}
-    engines: {node: '>=14.21.3'}
-    cpu: [x64]
-    os: [linux]
-
-  '@biomejs/cli-win32-arm64@1.9.4':
-    resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==}
-    engines: {node: '>=14.21.3'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@biomejs/cli-win32-x64@1.9.4':
-    resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==}
-    engines: {node: '>=14.21.3'}
-    cpu: [x64]
-    os: [win32]
-
   '@changesets/apply-release-plan@7.0.7':
     resolution: {integrity: sha512-qnPOcmmmnD0MfMg9DjU1/onORFyRpDXkMMl2IJg9mECY6RnxL3wN0TCCc92b2sXt1jt8DgjAUUsZYGUGTdYIXA==}
 
@@ -1443,6 +1387,15 @@ packages:
     resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
     engines: {node: '>=18.18'}
 
+  '@ianvs/prettier-plugin-sort-imports@4.4.0':
+    resolution: {integrity: sha512-f4/e+/ANGk3tHuwRW0uh2YuBR50I4h1ZjGQ+5uD8sWfinHTivQsnieR5cz24t8M6Vx4rYvZ5v/IEKZhYpzQm9Q==}
+    peerDependencies:
+      '@vue/compiler-sfc': 2.7.x || 3.x
+      prettier: 2 || 3
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -2706,10 +2659,6 @@ packages:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
-  ansi-escapes@7.0.0:
-    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
-    engines: {node: '>=18'}
-
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -2942,14 +2891,6 @@ packages:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
 
-  cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
-
-  cli-truncate@4.0.0:
-    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
-    engines: {node: '>=18'}
-
   clipboardy@4.0.0:
     resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
     engines: {node: '>=18'}
@@ -3438,9 +3379,6 @@ packages:
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
-  emoji-regex@10.4.0:
-    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
-
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -3467,10 +3405,6 @@ packages:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
 
-  environment@1.1.0:
-    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
-    engines: {node: '>=18'}
-
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
@@ -3520,9 +3454,6 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-config-biome@1.9.4:
-    resolution: {integrity: sha512-4HX+rfUk1R2rPwN3hcxPxq5sLDLGb/xtu48AggTtxCVoRoD18kjwOwHA1c7gYsbRrEQso+9mlRSS9+G7OfDqFg==}
-
   eslint-plugin-solid@0.14.5:
     resolution: {integrity: sha512-nfuYK09ah5aJG/oEN6P1qziy1zLgW4PDWe75VNPi4CEFYk1x2AEqwFeQfEPR7gNn0F2jOeqKhx2E+5oNCOBYWQ==}
     engines: {node: '>=18.0.0'}
@@ -3609,9 +3540,6 @@ packages:
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
-  eventemitter3@5.0.1:
-    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
-
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -3773,10 +3701,6 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
-  get-east-asian-width@1.3.0:
-    resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
-    engines: {node: '>=18'}
-
   get-port-please@3.1.2:
     resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
@@ -4077,14 +4001,6 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-fullwidth-code-point@4.0.0:
-    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
-    engines: {node: '>=12'}
-
-  is-fullwidth-code-point@5.0.0:
-    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
-    engines: {node: '>=18'}
-
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -4300,19 +4216,10 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  lint-staged@15.3.0:
-    resolution: {integrity: sha512-vHFahytLoF2enJklgtOtCtIjZrKD/LoxlaUusd5nh7dWv/dkKQJY74ndFSzxCdv7g0ueGg1ORgTSt4Y9LPZn9A==}
-    engines: {node: '>=18.12.0'}
-    hasBin: true
-
   listhen@1.9.0:
     resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
     hasBin: true
 
-  listr2@8.2.5:
-    resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
-    engines: {node: '>=18.0.0'}
-
   load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -4384,10 +4291,6 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  log-update@6.1.0:
-    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
-    engines: {node: '>=18'}
-
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -4701,10 +4604,6 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  mimic-function@5.0.1:
-    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
-    engines: {node: '>=18'}
-
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -4875,10 +4774,6 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
-
   oniguruma-to-es@0.8.1:
     resolution: {integrity: sha512-dekySTEvCxCj0IgKcA2uUCO/e4ArsqpucDPcX26w9ajx+DvMWLc5eZeJaRQkd7oC/+rwif5gnT900tA34uN9Zw==}
 
@@ -5049,11 +4944,6 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pidtree@0.6.0:
-    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -5139,6 +5029,61 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.6.9:
+    resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -5321,17 +5266,10 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
-
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rfdc@1.4.1:
-    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
-
   rimraf@5.0.10:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
@@ -5458,14 +5396,6 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
-  slice-ansi@5.0.0:
-    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
-    engines: {node: '>=12'}
-
-  slice-ansi@7.1.0:
-    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
-    engines: {node: '>=18'}
-
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
@@ -5571,10 +5501,6 @@ packages:
   streamx@2.21.1:
     resolution: {integrity: sha512-PhP9wUnFLa+91CPy3N6tiQsK+gnYyUNuk15S3YG/zjYE7RuPeCjJngqnzpC31ow0lzBHQ+QGO4cNJnd0djYUsw==}
 
-  string-argv@0.3.2:
-    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
-    engines: {node: '>=0.6.19'}
-
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -5583,10 +5509,6 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
-  string-width@7.2.0:
-    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
-    engines: {node: '>=18'}
-
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -6259,10 +6181,6 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
-  wrap-ansi@9.0.0:
-    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
-    engines: {node: '>=18'}
-
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -6287,11 +6205,6 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yaml@2.6.1:
-    resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yaml@2.7.0:
     resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
     engines: {node: '>= 14'}
@@ -6514,41 +6427,6 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  '@biomejs/biome@1.9.4':
-    optionalDependencies:
-      '@biomejs/cli-darwin-arm64': 1.9.4
-      '@biomejs/cli-darwin-x64': 1.9.4
-      '@biomejs/cli-linux-arm64': 1.9.4
-      '@biomejs/cli-linux-arm64-musl': 1.9.4
-      '@biomejs/cli-linux-x64': 1.9.4
-      '@biomejs/cli-linux-x64-musl': 1.9.4
-      '@biomejs/cli-win32-arm64': 1.9.4
-      '@biomejs/cli-win32-x64': 1.9.4
-
-  '@biomejs/cli-darwin-arm64@1.9.4':
-    optional: true
-
-  '@biomejs/cli-darwin-x64@1.9.4':
-    optional: true
-
-  '@biomejs/cli-linux-arm64-musl@1.9.4':
-    optional: true
-
-  '@biomejs/cli-linux-arm64@1.9.4':
-    optional: true
-
-  '@biomejs/cli-linux-x64-musl@1.9.4':
-    optional: true
-
-  '@biomejs/cli-linux-x64@1.9.4':
-    optional: true
-
-  '@biomejs/cli-win32-arm64@1.9.4':
-    optional: true
-
-  '@biomejs/cli-win32-x64@1.9.4':
-    optional: true
-
   '@changesets/apply-release-plan@7.0.7':
     dependencies:
       '@changesets/config': 3.0.5
@@ -7345,6 +7223,19 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.1': {}
 
+  '@ianvs/prettier-plugin-sort-imports@4.4.0(@vue/compiler-sfc@3.5.13)(prettier@3.4.2)':
+    dependencies:
+      '@babel/generator': 7.26.3
+      '@babel/parser': 7.26.3
+      '@babel/traverse': 7.26.4
+      '@babel/types': 7.26.3
+      prettier: 3.4.2
+      semver: 7.6.3
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.13
+    transitivePeerDependencies:
+      - supports-color
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.2.1':
@@ -9186,10 +9077,6 @@ snapshots:
 
   ansi-colors@4.1.3: {}
 
-  ansi-escapes@7.0.0:
-    dependencies:
-      environment: 1.1.0
-
   ansi-regex@5.0.1: {}
 
   ansi-regex@6.1.0: {}
@@ -9428,15 +9315,6 @@ snapshots:
 
   cli-boxes@3.0.0: {}
 
-  cli-cursor@5.0.0:
-    dependencies:
-      restore-cursor: 5.1.0
-
-  cli-truncate@4.0.0:
-    dependencies:
-      slice-ansi: 5.0.0
-      string-width: 7.2.0
-
   clipboardy@4.0.0:
     dependencies:
       execa: 8.0.1
@@ -9871,8 +9749,6 @@ snapshots:
 
   emoji-regex-xs@1.0.0: {}
 
-  emoji-regex@10.4.0: {}
-
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
@@ -9890,8 +9766,6 @@ snapshots:
 
   env-paths@2.2.1: {}
 
-  environment@1.1.0: {}
-
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
@@ -10042,8 +9916,6 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-biome@1.9.4: {}
-
   eslint-plugin-solid@0.14.5(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2):
     dependencies:
       '@typescript-eslint/utils': 8.19.0(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.2)
@@ -10162,8 +10034,6 @@ snapshots:
 
   eventemitter3@4.0.7: {}
 
-  eventemitter3@5.0.1: {}
-
   events@3.3.0: {}
 
   execa@8.0.1:
@@ -10326,8 +10196,6 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
-  get-east-asian-width@1.3.0: {}
-
   get-port-please@3.1.2: {}
 
   get-stream@6.0.1: {}
@@ -10702,12 +10570,6 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
-  is-fullwidth-code-point@4.0.0: {}
-
-  is-fullwidth-code-point@5.0.0:
-    dependencies:
-      get-east-asian-width: 1.3.0
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -10870,21 +10732,6 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  lint-staged@15.3.0:
-    dependencies:
-      chalk: 5.4.1
-      commander: 12.1.0
-      debug: 4.4.0(supports-color@9.4.0)
-      execa: 8.0.1
-      lilconfig: 3.1.3
-      listr2: 8.2.5
-      micromatch: 4.0.8
-      pidtree: 0.6.0
-      string-argv: 0.3.2
-      yaml: 2.6.1
-    transitivePeerDependencies:
-      - supports-color
-
   listhen@1.9.0:
     dependencies:
       '@parcel/watcher': 2.5.0
@@ -10906,15 +10753,6 @@ snapshots:
       untun: 0.1.3
       uqr: 0.1.2
 
-  listr2@8.2.5:
-    dependencies:
-      cli-truncate: 4.0.0
-      colorette: 2.0.20
-      eventemitter3: 5.0.1
-      log-update: 6.1.0
-      rfdc: 1.4.1
-      wrap-ansi: 9.0.0
-
   load-tsconfig@0.2.5: {}
 
   local-pkg@0.5.1:
@@ -10973,14 +10811,6 @@ snapshots:
 
   lodash@4.17.21: {}
 
-  log-update@6.1.0:
-    dependencies:
-      ansi-escapes: 7.0.0
-      cli-cursor: 5.0.0
-      slice-ansi: 7.1.0
-      strip-ansi: 7.1.0
-      wrap-ansi: 9.0.0
-
   longest-streak@3.1.0: {}
 
   lru-cache@10.4.3: {}
@@ -11680,8 +11510,6 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
-  mimic-function@5.0.1: {}
-
   min-indent@1.0.1: {}
 
   minimatch@10.0.1:
@@ -11912,10 +11740,6 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  onetime@7.0.0:
-    dependencies:
-      mimic-function: 5.0.1
-
   oniguruma-to-es@0.8.1:
     dependencies:
       emoji-regex-xs: 1.0.0
@@ -12081,8 +11905,6 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pidtree@0.6.0: {}
-
   pify@2.3.0: {}
 
   pify@4.0.1: {}
@@ -12147,6 +11969,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.6.9(@ianvs/prettier-plugin-sort-imports@4.4.0(@vue/compiler-sfc@3.5.13)(prettier@3.4.2))(prettier@3.4.2):
+    dependencies:
+      prettier: 3.4.2
+    optionalDependencies:
+      '@ianvs/prettier-plugin-sort-imports': 4.4.0(@vue/compiler-sfc@3.5.13)(prettier@3.4.2)
+
   prettier@2.8.8: {}
 
   prettier@3.4.2: {}
@@ -12373,15 +12201,8 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  restore-cursor@5.1.0:
-    dependencies:
-      onetime: 7.0.0
-      signal-exit: 4.1.0
-
   reusify@1.0.4: {}
 
-  rfdc@1.4.1: {}
-
   rimraf@5.0.10:
     dependencies:
       glob: 10.4.5
@@ -12527,16 +12348,6 @@ snapshots:
 
   slash@5.1.0: {}
 
-  slice-ansi@5.0.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 4.0.0
-
-  slice-ansi@7.1.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      is-fullwidth-code-point: 5.0.0
-
   smob@1.5.0: {}
 
   solid-dismissible@0.1.1(solid-js@1.9.3):
@@ -12635,8 +12446,6 @@ snapshots:
     optionalDependencies:
       bare-events: 2.5.0
 
-  string-argv@0.3.2: {}
-
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -12649,12 +12458,6 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
-  string-width@7.2.0:
-    dependencies:
-      emoji-regex: 10.4.0
-      get-east-asian-width: 1.3.0
-      strip-ansi: 7.1.0
-
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -13459,12 +13262,6 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.0
 
-  wrap-ansi@9.0.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
-
   wrappy@1.0.2: {}
 
   y18n@5.0.8: {}
@@ -13479,8 +13276,6 @@ snapshots:
 
   yaml@1.10.2: {}
 
-  yaml@2.6.1: {}
-
   yaml@2.7.0: {}
 
   yargs-parser@21.1.1: {}
diff --git a/prettier.config.cjs b/prettier.config.cjs
new file mode 100644
index 00000000..23b9ac53
--- /dev/null
+++ b/prettier.config.cjs
@@ -0,0 +1,30 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  endOfLine: "lf",
+  semi: false,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
+  importOrder: [
+    "^(solid-js/(.*)$)|^(solid-js$)",
+    "^(@solidjs/(.*)$)|^(@solidjs$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^@workspace/(.*)$",
+    "",
+    "^types$",
+    "^@/config/(.*)$",
+    "^@/libs/(.*)$",
+    "^@/components/(.*)$",
+    "^@/registry/(.*)$",
+    "",
+    "^[./]",
+  ],
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderTypeScriptVersion: "5.0.0",
+  importOrderCaseSensitive: true,
+}
diff --git a/turbo.json b/turbo.json
index e2ed98b4..501dfaac 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,18 +1,27 @@
 {
-	"$schema": "https://turbo.build/schema.json",
-	"globalDependencies": ["**/.env.*local"],
-	"tasks": {
-		"build": {
-			"dependsOn": ["^build"],
-			"outputs": [".vercel/output/**", ".vinxi/**"],
-			"env": ["COMPATIBILITY_DATE", "VITE_CJS_IGNORE_WARNING"]
-		},
-		"check": {
-			"dependsOn": ["^check"]
-		},
-		"dev": {
-			"cache": false,
-			"persistent": true
-		}
-	}
+  "$schema": "https://turbo.build/schema.json",
+  "globalDependencies": ["**/.env.*local"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [".vercel/output/**", ".vinxi/**"],
+      "env": ["COMPATIBILITY_DATE", "VITE_CJS_IGNORE_WARNING"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "ci:format": {
+      "dependsOn": ["^ci:format"]
+    },
+    "ci:lint": {
+      "dependsOn": ["^ci:lint"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
 }