From f9a86fe05eaa07ca9087efafbe3693df67a8a413 Mon Sep 17 00:00:00 2001
From: Stefan E-K <stefan.eideloth@gmail.com>
Date: Tue, 14 Nov 2023 11:18:37 +0100
Subject: [PATCH] fix(docs): eslint tailwindcss rules update

---
 apps/docs/.eslintrc.json                              |  2 +-
 apps/docs/package.json                                |  2 +-
 apps/docs/public/registry/ui/alert.json               |  2 +-
 apps/docs/public/registry/ui/badge-delta.json         |  2 +-
 apps/docs/public/registry/ui/badge.json               |  2 +-
 apps/docs/public/registry/ui/button.json              |  2 +-
 apps/docs/public/registry/ui/dialog.json              |  2 +-
 apps/docs/public/registry/ui/popover.json             |  2 +-
 apps/docs/public/registry/ui/sheet.json               |  2 +-
 apps/docs/public/registry/ui/toast.json               |  2 +-
 apps/docs/public/registry/ui/toggle.json              |  2 +-
 apps/docs/src/components/search-bar.tsx               |  2 +-
 apps/docs/src/components/toc.tsx                      |  2 +-
 apps/docs/src/registry/ui/alert.tsx                   |  2 +-
 apps/docs/src/registry/ui/badge-delta.tsx             |  6 +++---
 apps/docs/src/registry/ui/badge.tsx                   |  8 ++++----
 apps/docs/src/registry/ui/button.tsx                  |  4 ++--
 apps/docs/src/registry/ui/sheet.tsx                   | 10 +++++-----
 apps/docs/src/registry/ui/toast.tsx                   |  6 +++---
 apps/docs/src/registry/ui/toggle.tsx                  |  4 ++--
 apps/docs/{tailwind.config.js => tailwind.config.cjs} |  0
 21 files changed, 33 insertions(+), 33 deletions(-)
 rename apps/docs/{tailwind.config.js => tailwind.config.cjs} (100%)

diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
index d15aa5e5..e89be746 100644
--- a/apps/docs/.eslintrc.json
+++ b/apps/docs/.eslintrc.json
@@ -39,7 +39,7 @@
   },
   "settings": {
     "tailwindcss": {
-      "callees": ["cn"],
+      "callees": ["cn", "cva"],
       "config": "tailwind.config.cjs"
     }
   },
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5131a805..59616a61 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.14",
-    "@kobalte/core": "^0.11.1",
+    "@kobalte/core": "^0.11.2",
     "@modular-forms/solid": "^0.20.0",
     "@solid-primitives/keyboard": "^1.2.5",
     "@solidjs/meta": "^0.28.6",
diff --git a/apps/docs/public/registry/ui/alert.json b/apps/docs/public/registry/ui/alert.json
index dbbfd54b..af4789a3 100644
--- a/apps/docs/public/registry/ui/alert.json
+++ b/apps/docs/public/registry/ui/alert.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "alert.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Alert as AlertPrimitive } from \"@kobalte/core\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst alertVariants = cva(\r\n  \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-background text-foreground\",\r\n        destructive:\r\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\ninterface AlertProps extends AlertPrimitive.AlertRootProps, VariantProps<typeof alertVariants> {}\r\n\r\nconst Alert: Component<AlertProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"variant\"])\r\n  return (\r\n    <AlertPrimitive.Root\r\n      class={cn(alertVariants({ variant: props.variant }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst AlertTitle: Component<ComponentProps<\"h5\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <h5 class={cn(\"mb-1 font-medium leading-none tracking-tight\", props.class)} {...rest} />\r\n}\r\n\r\nconst AlertDescription: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <div class={cn(\"text-sm [&_p]:leading-relaxed\", props.class)} {...rest} />\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription }\r\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Alert as AlertPrimitive } from \"@kobalte/core\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst alertVariants = cva(\r\n  \"[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-background text-foreground\",\r\n        destructive:\r\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\ninterface AlertProps extends AlertPrimitive.AlertRootProps, VariantProps<typeof alertVariants> {}\r\n\r\nconst Alert: Component<AlertProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"variant\"])\r\n  return (\r\n    <AlertPrimitive.Root\r\n      class={cn(alertVariants({ variant: props.variant }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst AlertTitle: Component<ComponentProps<\"h5\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <h5 class={cn(\"mb-1 font-medium leading-none tracking-tight\", props.class)} {...rest} />\r\n}\r\n\r\nconst AlertDescription: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <div class={cn(\"text-sm [&_p]:leading-relaxed\", props.class)} {...rest} />\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/badge-delta.json b/apps/docs/public/registry/ui/badge-delta.json
index 4fe77ab2..cee6117b 100644
--- a/apps/docs/public/registry/ui/badge-delta.json
+++ b/apps/docs/public/registry/ui/badge-delta.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "badge-delta.tsx",
-      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport type { IconTypes } from \"solid-icons\"\r\nimport {\r\n  TbArrowDown,\r\n  TbArrowDownRight,\r\n  TbArrowRight,\r\n  TbArrowUp,\r\n  TbArrowUpRight\r\n} from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\nimport type { BadgeProps } from \"~/registry/ui/badge\"\r\nimport { Badge } from \"~/registry/ui/badge\"\r\n\r\ntype DeltaType = \"increase\" | \"moderateIncrease\" | \"unchanged\" | \"moderateDecrease\" | \"decrease\"\r\n\r\nconst badgeDeltaVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      success: \"bg-success hover:bg-success text-success-foreground\",\r\n      warning: \"bg-warning hover:bg-warning text-warning-foreground\",\r\n      error: \"bg-error hover:bg-error text-error-foreground\"\r\n    }\r\n  }\r\n})\r\ntype DeltaVariant = NonNullable<VariantProps<typeof badgeDeltaVariants>[\"variant\"]>\r\n\r\nconst iconMap: { [key in DeltaType]: IconTypes } = {\r\n  increase: TbArrowUp,\r\n  moderateIncrease: TbArrowUpRight,\r\n  unchanged: TbArrowRight,\r\n  moderateDecrease: TbArrowDownRight,\r\n  decrease: TbArrowDown\r\n}\r\n\r\nconst variantMap: { [key in DeltaType]: DeltaVariant } = {\r\n  increase: \"success\",\r\n  moderateIncrease: \"success\",\r\n  unchanged: \"warning\",\r\n  moderateDecrease: \"error\",\r\n  decrease: \"error\"\r\n}\r\n\r\nexport interface BadgeDeltaProps extends Omit<BadgeProps, \"variant\"> {\r\n  deltaType: DeltaType\r\n}\r\n\r\nconst BadgeDelta: Component<BadgeDeltaProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"children\", \"deltaType\"])\r\n  const Icon = iconMap[props.deltaType]\r\n  const variant = variantMap[props.deltaType]\r\n\r\n  return (\r\n    <Badge class={cn(badgeDeltaVariants({ variant }), props.class)} {...rest}>\r\n      <span class=\"flex gap-1\">\r\n        <Icon class=\"h-4 w-4\" />\r\n        {props.children}\r\n      </span>\r\n    </Badge>\r\n  )\r\n}\r\n\r\nexport { BadgeDelta }\r\n"
+      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport type { IconTypes } from \"solid-icons\"\r\nimport {\r\n  TbArrowDown,\r\n  TbArrowDownRight,\r\n  TbArrowRight,\r\n  TbArrowUp,\r\n  TbArrowUpRight\r\n} from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\nimport type { BadgeProps } from \"~/registry/ui/badge\"\r\nimport { Badge } from \"~/registry/ui/badge\"\r\n\r\ntype DeltaType = \"increase\" | \"moderateIncrease\" | \"unchanged\" | \"moderateDecrease\" | \"decrease\"\r\n\r\nconst badgeDeltaVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      success: \"bg-success text-success-foreground hover:bg-success\",\r\n      warning: \"bg-warning text-warning-foreground hover:bg-warning\",\r\n      error: \"bg-error text-error-foreground hover:bg-error\"\r\n    }\r\n  }\r\n})\r\ntype DeltaVariant = NonNullable<VariantProps<typeof badgeDeltaVariants>[\"variant\"]>\r\n\r\nconst iconMap: { [key in DeltaType]: IconTypes } = {\r\n  increase: TbArrowUp,\r\n  moderateIncrease: TbArrowUpRight,\r\n  unchanged: TbArrowRight,\r\n  moderateDecrease: TbArrowDownRight,\r\n  decrease: TbArrowDown\r\n}\r\n\r\nconst variantMap: { [key in DeltaType]: DeltaVariant } = {\r\n  increase: \"success\",\r\n  moderateIncrease: \"success\",\r\n  unchanged: \"warning\",\r\n  moderateDecrease: \"error\",\r\n  decrease: \"error\"\r\n}\r\n\r\nexport interface BadgeDeltaProps extends Omit<BadgeProps, \"variant\"> {\r\n  deltaType: DeltaType\r\n}\r\n\r\nconst BadgeDelta: Component<BadgeDeltaProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"children\", \"deltaType\"])\r\n  const Icon = iconMap[props.deltaType]\r\n  const variant = variantMap[props.deltaType]\r\n\r\n  return (\r\n    <Badge class={cn(badgeDeltaVariants({ variant }), props.class)} {...rest}>\r\n      <span class=\"flex gap-1\">\r\n        <Icon class=\"h-4 w-4\" />\r\n        {props.children}\r\n      </span>\r\n    </Badge>\r\n  )\r\n}\r\n\r\nexport { BadgeDelta }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/badge.json b/apps/docs/public/registry/ui/badge.json
index 5855e032..72a73250 100644
--- a/apps/docs/public/registry/ui/badge.json
+++ b/apps/docs/public/registry/ui/badge.json
@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "badge.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst badgeVariants = cva(\r\n  \"inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground\",\r\n        secondary:\r\n          \"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground\",\r\n        destructive:\r\n          \"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground\",\r\n        outline: \"text-foreground\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface BadgeProps extends ComponentProps<\"div\">, VariantProps<typeof badgeVariants> {}\r\n\r\nconst Badge: Component<BadgeProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"variant\", \"class\"])\r\n  return <div class={cn(badgeVariants({ variant: props.variant }), props.class)} {...rest} />\r\n}\r\n\r\nexport { Badge, badgeVariants }\r\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst badgeVariants = cva(\r\n  \"focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent\",\r\n        secondary:\r\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent\",\r\n        destructive:\r\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent\",\r\n        outline: \"text-foreground\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface BadgeProps extends ComponentProps<\"div\">, VariantProps<typeof badgeVariants> {}\r\n\r\nconst Badge: Component<BadgeProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"variant\", \"class\"])\r\n  return <div class={cn(badgeVariants({ variant: props.variant }), props.class)} {...rest} />\r\n}\r\n\r\nexport { Badge, badgeVariants }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/button.json b/apps/docs/public/registry/ui/button.json
index 6304e6cc..3a0430af 100644
--- a/apps/docs/public/registry/ui/button.json
+++ b/apps/docs/public/registry/ui/button.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "button.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n        outline: \"border border-input hover:bg-accent hover:text-accent-foreground\",\r\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n        link: \"text-primary underline-offset-4 hover:underline\"\r\n      },\r\n      size: {\r\n        default: \"h-10 px-4 py-2\",\r\n        sm: \"h-9 rounded-md px-3\",\r\n        lg: \"h-11 rounded-md px-8\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface ButtonProps\r\n  extends ComponentProps<\"button\">,\r\n    VariantProps<typeof buttonVariants> {}\r\n\r\nconst Button: Component<ButtonProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"variant\", \"size\", \"class\"])\r\n  return (\r\n    <button\r\n      class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Button, buttonVariants }\r\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\n  \"ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n        outline: \"border-input hover:bg-accent hover:text-accent-foreground border\",\r\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n        link: \"text-primary underline-offset-4 hover:underline\"\r\n      },\r\n      size: {\r\n        default: \"h-10 px-4 py-2\",\r\n        sm: \"h-9 rounded-md px-3\",\r\n        lg: \"h-11 rounded-md px-8\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface ButtonProps\r\n  extends ComponentProps<\"button\">,\r\n    VariantProps<typeof buttonVariants> {}\r\n\r\nconst Button: Component<ButtonProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"variant\", \"size\", \"class\"])\r\n  return (\r\n    <button\r\n      class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Button, buttonVariants }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/dialog.json b/apps/docs/public/registry/ui/dialog.json
index 9745a400..71ab48e2 100644
--- a/apps/docs/public/registry/ui/dialog.json
+++ b/apps/docs/public/registry/ui/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "dialog.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Dialog as DialogPrimitive } from \"@kobalte/core\"\r\nimport { TbX } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Dialog = DialogPrimitive.Root\r\n\r\nconst DialogTrigger: Component<DialogPrimitive.DialogTriggerProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"children\"])\r\n  return <DialogPrimitive.Trigger {...rest}>{props.children}</DialogPrimitive.Trigger>\r\n}\r\n\r\nconst DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"children\"])\r\n  return (\r\n    <DialogPrimitive.Portal {...rest}>\r\n      <div class=\"fixed inset-0 z-50 flex items-start justify-center sm:items-center\">\r\n        {props.children}\r\n      </div>\r\n    </DialogPrimitive.Portal>\r\n  )\r\n}\r\n\r\nconst DialogOverlay: Component<DialogPrimitive.DialogOverlayProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <DialogPrimitive.Overlay\r\n      class={cn(\r\n        \"bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst DialogContent: Component<DialogPrimitive.DialogContentProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\r\n  return (\r\n    <DialogPortal>\r\n      <DialogOverlay />\r\n      <DialogPrimitive.Content\r\n        class={cn(\r\n          \"bg-background animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 rounded-b-lg border p-6 shadow-lg sm:max-w-lg sm:rounded-lg\",\r\n          props.class\r\n        )}\r\n        {...rest}\r\n      >\r\n        {props.children}\r\n        <DialogPrimitive.CloseButton class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\r\n          <TbX class=\"h-4 w-4\" />\r\n          <span class=\"sr-only\">Close</span>\r\n        </DialogPrimitive.CloseButton>\r\n      </DialogPrimitive.Content>\r\n    </DialogPortal>\r\n  )\r\n}\r\n\r\nconst DialogHeader: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", props.class)} {...rest} />\r\n  )\r\n}\r\n\r\nconst DialogFooter: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div\r\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst DialogTitle: Component<DialogPrimitive.DialogTitleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <DialogPrimitive.Title\r\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst DialogDescription: Component<DialogPrimitive.DialogDescriptionProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <DialogPrimitive.Description\r\n      class={cn(\"text-muted-foreground text-sm\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Dialog,\r\n  DialogTrigger,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogFooter,\r\n  DialogTitle,\r\n  DialogDescription\r\n}\r\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Dialog as DialogPrimitive } from \"@kobalte/core\"\r\nimport { TbX } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Dialog = DialogPrimitive.Root\r\n\r\nconst DialogTrigger: Component<DialogPrimitive.DialogTriggerProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"children\"])\r\n  return <DialogPrimitive.Trigger {...rest}>{props.children}</DialogPrimitive.Trigger>\r\n}\r\n\r\nconst DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"children\"])\r\n  return (\r\n    <DialogPrimitive.Portal {...rest}>\r\n      <div class=\"fixed inset-0 z-50 flex items-start justify-center sm:items-center\">\r\n        {props.children}\r\n      </div>\r\n    </DialogPrimitive.Portal>\r\n  )\r\n}\r\n\r\nconst DialogOverlay: Component<DialogPrimitive.DialogOverlayProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <DialogPrimitive.Overlay\r\n      class={cn(\r\n        \"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 backdrop-blur-sm\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst DialogContent: Component<DialogPrimitive.DialogContentProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\r\n  return (\r\n    <DialogPortal>\r\n      <DialogOverlay />\r\n      <DialogPrimitive.Content\r\n        class={cn(\r\n          \"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 duration-200 sm:rounded-lg\",\r\n          props.class\r\n        )}\r\n        {...rest}\r\n      >\r\n        {props.children}\r\n        <DialogPrimitive.CloseButton class=\"ring-offset-background focus:ring-ring data-[expanded]:bg-accent data-[expanded]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\r\n          <TbX class=\"h-4 w-4\" />\r\n          <span class=\"sr-only\">Close</span>\r\n        </DialogPrimitive.CloseButton>\r\n      </DialogPrimitive.Content>\r\n    </DialogPortal>\r\n  )\r\n}\r\n\r\nconst DialogHeader: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", props.class)} {...rest} />\r\n  )\r\n}\r\n\r\nconst DialogFooter: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div\r\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst DialogTitle: Component<DialogPrimitive.DialogTitleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <DialogPrimitive.Title\r\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst DialogDescription: Component<DialogPrimitive.DialogDescriptionProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <DialogPrimitive.Description\r\n      class={cn(\"text-muted-foreground text-sm\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Dialog,\r\n  DialogTrigger,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogFooter,\r\n  DialogTitle,\r\n  DialogDescription\r\n}\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/popover.json b/apps/docs/public/registry/ui/popover.json
index c6cffc27..ab66838c 100644
--- a/apps/docs/public/registry/ui/popover.json
+++ b/apps/docs/public/registry/ui/popover.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "popover.tsx",
-      "content": "import type { Component} from \"solid-js\";\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Popover as PopoverPrimitive } from \"@kobalte/core\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Popover: Component<PopoverPrimitive.PopoverRootProps> = (props) => {\r\n  return <PopoverPrimitive.Root gutter={4} {...props} />\r\n}\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger\r\n\r\nconst PopoverContent: Component<PopoverPrimitive.PopoverContentProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <PopoverPrimitive.Portal>\r\n      <PopoverPrimitive.Content\r\n        class={cn(\r\n          \"bg-popover text-popover-foreground animate-in z-50 w-72 origin-[var(--kb-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none\",\r\n          props.class\r\n        )}\r\n        {...rest}\r\n      />\r\n    </PopoverPrimitive.Portal>\r\n  )\r\n}\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent }\r\n"
+      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Popover as PopoverPrimitive } from \"@kobalte/core\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Popover: Component<PopoverPrimitive.PopoverRootProps> = (props) => {\r\n  return <PopoverPrimitive.Root gutter={4} {...props} />\r\n}\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger\r\n\r\nconst PopoverContent: Component<PopoverPrimitive.PopoverContentProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <PopoverPrimitive.Portal>\r\n      <PopoverPrimitive.Content\r\n        class={cn(\r\n          \"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 origin-[var(--kb-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none\",\r\n          props.class\r\n        )}\r\n        {...rest}\r\n      />\r\n    </PopoverPrimitive.Portal>\r\n  )\r\n}\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/sheet.json b/apps/docs/public/registry/ui/sheet.json
index b836d5a6..d778c99a 100644
--- a/apps/docs/public/registry/ui/sheet.json
+++ b/apps/docs/public/registry/ui/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "sheet.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Dialog as SheetPrimitive } from \"@kobalte/core\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { TbX } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Sheet = SheetPrimitive.Root\r\n\r\nconst SheetTrigger = SheetPrimitive.Trigger\r\n\r\nconst SheetClose = SheetPrimitive.CloseButton\r\n\r\nconst portalVariants = cva(\"fixed inset-0 z-50 flex\", {\r\n  variants: {\r\n    position: {\r\n      top: \"items-start\",\r\n      bottom: \"items-end\",\r\n      left: \"justify-start\",\r\n      right: \"justify-end\"\r\n    }\r\n  },\r\n  defaultVariants: { position: \"right\" }\r\n})\r\n\r\ninterface SheetPortalProps\r\n  extends SheetPrimitive.DialogPortalProps,\r\n    VariantProps<typeof portalVariants> {}\r\n\r\nconst SheetPortal: Component<SheetPortalProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"position\", \"children\"])\r\n  return (\r\n    <SheetPrimitive.Portal {...rest}>\r\n      <div class={portalVariants({ position: props.position })}>{props.children}</div>\r\n    </SheetPrimitive.Portal>\r\n  )\r\n}\r\n\r\nconst SheetOverlay: Component<SheetPrimitive.DialogOverlayProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <SheetPrimitive.Overlay\r\n      class={cn(\r\n        \"bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst sheetVariants = cva(\r\n  \"fixed z-50 scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg\",\r\n  {\r\n    variants: {\r\n      position: {\r\n        top: \"w-full animate-in slide-in-from-top duration-300\",\r\n        bottom: \"w-full animate-in slide-in-from-bottom duration-300\",\r\n        left: \"h-full animate-in slide-in-from-left duration-300\",\r\n        right: \"h-full animate-in slide-in-from-right duration-300\"\r\n      },\r\n      size: {\r\n        content: \"\",\r\n        default: \"\",\r\n        sm: \"\",\r\n        lg: \"\",\r\n        xl: \"\",\r\n        full: \"\"\r\n      }\r\n    },\r\n    compoundVariants: [\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"content\",\r\n        class: \"max-h-screen\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"default\",\r\n        class: \"h-1/3\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"sm\",\r\n        class: \"h-1/4\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"lg\",\r\n        class: \"h-1/2\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"xl\",\r\n        class: \"h-5/6\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"full\",\r\n        class: \"h-screen\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"content\",\r\n        class: \"max-w-screen\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"default\",\r\n        class: \"w-1/3\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"sm\",\r\n        class: \"w-1/4\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"lg\",\r\n        class: \"w-1/2\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"xl\",\r\n        class: \"w-5/6\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"full\",\r\n        class: \"w-screen\"\r\n      }\r\n    ],\r\n    defaultVariants: {\r\n      position: \"right\",\r\n      size: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface DialogContentProps\r\n  extends SheetPrimitive.DialogContentProps,\r\n    VariantProps<typeof sheetVariants> {}\r\n\r\nconst SheetContent: Component<DialogContentProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"position\", \"size\", \"class\", \"children\"])\r\n  return (\r\n    <SheetPortal position={props.position}>\r\n      <SheetOverlay />\r\n      <SheetPrimitive.Content\r\n        class={cn(sheetVariants({ position: props.position, size: props.size }), props.class)}\r\n        {...rest}\r\n      >\r\n        {props.children}\r\n        <SheetPrimitive.CloseButton class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\r\n          <TbX class=\"h-4 w-4\" />\r\n          <span class=\"sr-only\">Close</span>\r\n        </SheetPrimitive.CloseButton>\r\n      </SheetPrimitive.Content>\r\n    </SheetPortal>\r\n  )\r\n}\r\n\r\nconst SheetHeader: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div class={cn(\"flex flex-col space-y-2 text-center sm:text-left\", props.class)} {...rest} />\r\n  )\r\n}\r\n\r\nconst SheetFooter: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div\r\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst SheetTitle: Component<SheetPrimitive.DialogTitleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <SheetPrimitive.Title\r\n      class={cn(\"text-foreground text-lg font-semibold\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst SheetDescription: Component<SheetPrimitive.DialogDescriptionProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <SheetPrimitive.Description\r\n      class={cn(\"text-muted-foreground text-sm\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Sheet,\r\n  SheetTrigger,\r\n  SheetClose,\r\n  SheetContent,\r\n  SheetHeader,\r\n  SheetFooter,\r\n  SheetTitle,\r\n  SheetDescription\r\n}\r\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { Dialog as SheetPrimitive } from \"@kobalte/core\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { TbX } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Sheet = SheetPrimitive.Root\r\n\r\nconst SheetTrigger = SheetPrimitive.Trigger\r\n\r\nconst SheetClose = SheetPrimitive.CloseButton\r\n\r\nconst portalVariants = cva(\"fixed inset-0 z-50 flex\", {\r\n  variants: {\r\n    position: {\r\n      top: \"items-start\",\r\n      bottom: \"items-end\",\r\n      left: \"justify-start\",\r\n      right: \"justify-end\"\r\n    }\r\n  },\r\n  defaultVariants: { position: \"right\" }\r\n})\r\n\r\ninterface SheetPortalProps\r\n  extends SheetPrimitive.DialogPortalProps,\r\n    VariantProps<typeof portalVariants> {}\r\n\r\nconst SheetPortal: Component<SheetPortalProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"position\", \"children\"])\r\n  return (\r\n    <SheetPrimitive.Portal {...rest}>\r\n      <div class={portalVariants({ position: props.position })}>{props.children}</div>\r\n    </SheetPrimitive.Portal>\r\n  )\r\n}\r\n\r\nconst SheetOverlay: Component<SheetPrimitive.DialogOverlayProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <SheetPrimitive.Overlay\r\n      class={cn(\r\n        \"bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst sheetVariants = cva(\r\n  \"bg-background fixed z-50 scale-100 gap-4 border p-6 opacity-100 shadow-lg\",\r\n  {\r\n    variants: {\r\n      position: {\r\n        top: \"animate-in slide-in-from-top w-full duration-300\",\r\n        bottom: \"animate-in slide-in-from-bottom w-full duration-300\",\r\n        left: \"animate-in slide-in-from-left h-full duration-300\",\r\n        right: \"animate-in slide-in-from-right h-full duration-300\"\r\n      },\r\n      size: {\r\n        content: \"\",\r\n        default: \"\",\r\n        sm: \"\",\r\n        lg: \"\",\r\n        xl: \"\",\r\n        full: \"\"\r\n      }\r\n    },\r\n    compoundVariants: [\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"content\",\r\n        class: \"max-h-screen\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"default\",\r\n        class: \"h-1/3\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"sm\",\r\n        class: \"h-1/4\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"lg\",\r\n        class: \"h-1/2\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"xl\",\r\n        class: \"h-5/6\"\r\n      },\r\n      {\r\n        position: [\"top\", \"bottom\"],\r\n        size: \"full\",\r\n        class: \"h-screen\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"content\",\r\n        class: \"max-w-screen\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"default\",\r\n        class: \"w-1/3\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"sm\",\r\n        class: \"w-1/4\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"lg\",\r\n        class: \"w-1/2\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"xl\",\r\n        class: \"w-5/6\"\r\n      },\r\n      {\r\n        position: [\"right\", \"left\"],\r\n        size: \"full\",\r\n        class: \"w-screen\"\r\n      }\r\n    ],\r\n    defaultVariants: {\r\n      position: \"right\",\r\n      size: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface DialogContentProps\r\n  extends SheetPrimitive.DialogContentProps,\r\n    VariantProps<typeof sheetVariants> {}\r\n\r\nconst SheetContent: Component<DialogContentProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"position\", \"size\", \"class\", \"children\"])\r\n  return (\r\n    <SheetPortal position={props.position}>\r\n      <SheetOverlay />\r\n      <SheetPrimitive.Content\r\n        class={cn(sheetVariants({ position: props.position, size: props.size }), props.class)}\r\n        {...rest}\r\n      >\r\n        {props.children}\r\n        <SheetPrimitive.CloseButton class=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\r\n          <TbX class=\"h-4 w-4\" />\r\n          <span class=\"sr-only\">Close</span>\r\n        </SheetPrimitive.CloseButton>\r\n      </SheetPrimitive.Content>\r\n    </SheetPortal>\r\n  )\r\n}\r\n\r\nconst SheetHeader: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div class={cn(\"flex flex-col space-y-2 text-center sm:text-left\", props.class)} {...rest} />\r\n  )\r\n}\r\n\r\nconst SheetFooter: Component<ComponentProps<\"div\">> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <div\r\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst SheetTitle: Component<SheetPrimitive.DialogTitleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <SheetPrimitive.Title\r\n      class={cn(\"text-foreground text-lg font-semibold\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst SheetDescription: Component<SheetPrimitive.DialogDescriptionProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <SheetPrimitive.Description\r\n      class={cn(\"text-muted-foreground text-sm\", props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Sheet,\r\n  SheetTrigger,\r\n  SheetClose,\r\n  SheetContent,\r\n  SheetHeader,\r\n  SheetFooter,\r\n  SheetTitle,\r\n  SheetDescription\r\n}\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/toast.json b/apps/docs/public/registry/ui/toast.json
index 332eaaf0..72002898 100644
--- a/apps/docs/public/registry/ui/toast.json
+++ b/apps/docs/public/registry/ui/toast.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "toast.tsx",
-      "content": "import type { Component, JSX } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\nimport { Portal } from \"solid-js/web\"\r\n\r\nimport { Toast as ToastPrimitive, toaster } from \"@kobalte/core\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport { TbX } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Toaster: Component<ToastPrimitive.ToastListProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <Portal>\r\n      <ToastPrimitive.Region>\r\n        <ToastPrimitive.List\r\n          class={cn(\r\n            \"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]\",\r\n            props.class\r\n          )}\r\n          {...rest}\r\n        />\r\n      </ToastPrimitive.Region>\r\n    </Portal>\r\n  )\r\n}\r\n\r\nconst toastVariants = cva(\r\n  \"data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full data-[closed]:slide-out-to-right-full\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-background border text-foreground\",\r\n        destructive:\r\n          \"group destructive border-destructive bg-destructive text-destructive-foreground\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\"\r\n    }\r\n  }\r\n)\r\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>[\"variant\"]>\r\n\r\nexport interface ToastProps\r\n  extends ToastPrimitive.ToastRootProps,\r\n    VariantProps<typeof toastVariants> {}\r\n\r\nconst Toast: Component<ToastProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"variant\"])\r\n  return (\r\n    <ToastPrimitive.Root\r\n      class={cn(toastVariants({ variant: props.variant }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst ToastClose: Component<ToastPrimitive.ToastCloseButtonProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <ToastPrimitive.CloseButton\r\n      class={cn(\r\n        \"text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    >\r\n      <TbX class=\"h-4 w-4\" />\r\n    </ToastPrimitive.CloseButton>\r\n  )\r\n}\r\n\r\nconst ToastTitle: Component<ToastPrimitive.ToastTitleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <ToastPrimitive.Title class={cn(\"text-sm font-semibold\", props.class)} {...rest} />\r\n}\r\n\r\nconst ToastDescription: Component<ToastPrimitive.ToastDescriptionProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <ToastPrimitive.Description class={cn(\"text-sm opacity-90\", props.class)} {...rest} />\r\n}\r\n\r\nfunction showToast(props: {\r\n  title?: JSX.Element\r\n  description?: JSX.Element\r\n  variant?: ToastVariant\r\n  duration?: number\r\n}) {\r\n  toaster.show((data) => (\r\n    <Toast toastId={data.toastId} variant={props.variant} duration={props.duration}>\r\n      <div class=\"grid gap-1\">\r\n        {props.title && <ToastTitle>{props.title}</ToastTitle>}\r\n        {props.description && <ToastDescription>{props.description}</ToastDescription>}\r\n      </div>\r\n      <ToastClose />\r\n    </Toast>\r\n  ))\r\n}\r\n\r\nexport { Toaster, Toast, ToastClose, ToastTitle, ToastDescription, showToast }\r\n"
+      "content": "import type { Component, JSX } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\nimport { Portal } from \"solid-js/web\"\r\n\r\nimport { Toast as ToastPrimitive, toaster } from \"@kobalte/core\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport { TbX } from \"solid-icons/tb\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Toaster: Component<ToastPrimitive.ToastListProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <Portal>\r\n      <ToastPrimitive.Region>\r\n        <ToastPrimitive.List\r\n          class={cn(\r\n            \"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]\",\r\n            props.class\r\n          )}\r\n          {...rest}\r\n        />\r\n      </ToastPrimitive.Region>\r\n    </Portal>\r\n  )\r\n}\r\n\r\nconst toastVariants = cva(\r\n  \"data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-right-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=move]:transition-none\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-background text-foreground border\",\r\n        destructive:\r\n          \"destructive border-destructive bg-destructive text-destructive-foreground group\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\"\r\n    }\r\n  }\r\n)\r\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>[\"variant\"]>\r\n\r\nexport interface ToastProps\r\n  extends ToastPrimitive.ToastRootProps,\r\n    VariantProps<typeof toastVariants> {}\r\n\r\nconst Toast: Component<ToastProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"variant\"])\r\n  return (\r\n    <ToastPrimitive.Root\r\n      class={cn(toastVariants({ variant: props.variant }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nconst ToastClose: Component<ToastPrimitive.ToastCloseButtonProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return (\r\n    <ToastPrimitive.CloseButton\r\n      class={cn(\r\n        \"text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\r\n        props.class\r\n      )}\r\n      {...rest}\r\n    >\r\n      <TbX class=\"h-4 w-4\" />\r\n    </ToastPrimitive.CloseButton>\r\n  )\r\n}\r\n\r\nconst ToastTitle: Component<ToastPrimitive.ToastTitleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <ToastPrimitive.Title class={cn(\"text-sm font-semibold\", props.class)} {...rest} />\r\n}\r\n\r\nconst ToastDescription: Component<ToastPrimitive.ToastDescriptionProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\"])\r\n  return <ToastPrimitive.Description class={cn(\"text-sm opacity-90\", props.class)} {...rest} />\r\n}\r\n\r\nfunction showToast(props: {\r\n  title?: JSX.Element\r\n  description?: JSX.Element\r\n  variant?: ToastVariant\r\n  duration?: number\r\n}) {\r\n  toaster.show((data) => (\r\n    <Toast toastId={data.toastId} variant={props.variant} duration={props.duration}>\r\n      <div class=\"grid gap-1\">\r\n        {props.title && <ToastTitle>{props.title}</ToastTitle>}\r\n        {props.description && <ToastDescription>{props.description}</ToastDescription>}\r\n      </div>\r\n      <ToastClose />\r\n    </Toast>\r\n  ))\r\n}\r\n\r\nexport { Toaster, Toast, ToastClose, ToastTitle, ToastDescription, showToast }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/public/registry/ui/toggle.json b/apps/docs/public/registry/ui/toggle.json
index a2e7ce34..c9aa1011 100644
--- a/apps/docs/public/registry/ui/toggle.json
+++ b/apps/docs/public/registry/ui/toggle.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "toggle.tsx",
-      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { ToggleButton as ToggleButtonPrimitive } from \"@kobalte/core\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst toggleVariants = cva(\r\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        outline: \"border border-input bg-transparent shadow-sm\"\r\n      },\r\n      size: {\r\n        default: \"h-9 px-3\",\r\n        sm: \"h-8 px-2\",\r\n        lg: \"h-10 px-3\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface ToggleProps\r\n  extends ToggleButtonPrimitive.ToggleButtonRootProps,\r\n    VariantProps<typeof toggleVariants> {}\r\n\r\nconst Toggle: Component<ToggleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"variant\", \"size\"])\r\n  return (\r\n    <ToggleButtonPrimitive.Root\r\n      class={cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport { toggleVariants, Toggle }\r\n"
+      "content": "import type { Component } from \"solid-js\"\r\nimport { splitProps } from \"solid-js\"\r\n\r\nimport { ToggleButton as ToggleButtonPrimitive } from \"@kobalte/core\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst toggleVariants = cva(\r\n  \"focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring disabled:pointer-events-none disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        outline: \"border-input border bg-transparent shadow-sm\"\r\n      },\r\n      size: {\r\n        default: \"h-9 px-3\",\r\n        sm: \"h-8 px-2\",\r\n        lg: \"h-10 px-3\"\r\n      }\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\"\r\n    }\r\n  }\r\n)\r\n\r\nexport interface ToggleProps\r\n  extends ToggleButtonPrimitive.ToggleButtonRootProps,\r\n    VariantProps<typeof toggleVariants> {}\r\n\r\nconst Toggle: Component<ToggleProps> = (props) => {\r\n  const [, rest] = splitProps(props, [\"class\", \"variant\", \"size\"])\r\n  return (\r\n    <ToggleButtonPrimitive.Root\r\n      class={cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)}\r\n      {...rest}\r\n    />\r\n  )\r\n}\r\n\r\nexport { toggleVariants, Toggle }\r\n"
     }
   ],
   "type": "ui"
diff --git a/apps/docs/src/components/search-bar.tsx b/apps/docs/src/components/search-bar.tsx
index 22ad6287..bf57618f 100644
--- a/apps/docs/src/components/search-bar.tsx
+++ b/apps/docs/src/components/search-bar.tsx
@@ -94,7 +94,7 @@ export default function SearchBar() {
                   <A
                     href={item.document.uri}
                     onclick={() => setIsOpen(false)}
-                    class="animate-in fade-in-0 duration-400"
+                    class="duration-400 animate-in fade-in-0"
                   >
                     <div class="grid grid-cols-[25px_1fr] items-start rounded p-4 hover:bg-black/30 dark:hover:bg-white/30">
                       <TbHash size={20} />
diff --git a/apps/docs/src/components/toc.tsx b/apps/docs/src/components/toc.tsx
index ea992c79..2dbd8b1d 100644
--- a/apps/docs/src/components/toc.tsx
+++ b/apps/docs/src/components/toc.tsx
@@ -20,7 +20,7 @@ export const TableOfContents: Component<{ toc: TOC[] | undefined }> = (props) =>
           {(heading) => (
             <li class={cn("mt-0 pt-2", heading.depth === 3 && "pl-4")}>
               <A
-                class="hover:text-foreground text-muted-foreground inline-block no-underline transition-colors"
+                class="text-muted-foreground hover:text-foreground inline-block no-underline transition-colors"
                 href={`${location.pathname}#${heading.slug}`}
               >
                 {heading.text}
diff --git a/apps/docs/src/registry/ui/alert.tsx b/apps/docs/src/registry/ui/alert.tsx
index 0c69992b..6f67343f 100644
--- a/apps/docs/src/registry/ui/alert.tsx
+++ b/apps/docs/src/registry/ui/alert.tsx
@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority"
 import { cn } from "~/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
diff --git a/apps/docs/src/registry/ui/badge-delta.tsx b/apps/docs/src/registry/ui/badge-delta.tsx
index 98e3833b..e9e20bf4 100644
--- a/apps/docs/src/registry/ui/badge-delta.tsx
+++ b/apps/docs/src/registry/ui/badge-delta.tsx
@@ -21,9 +21,9 @@ type DeltaType = "increase" | "moderateIncrease" | "unchanged" | "moderateDecrea
 const badgeDeltaVariants = cva("", {
   variants: {
     variant: {
-      success: "bg-success hover:bg-success text-success-foreground",
-      warning: "bg-warning hover:bg-warning text-warning-foreground",
-      error: "bg-error hover:bg-error text-error-foreground"
+      success: "bg-success text-success-foreground hover:bg-success",
+      warning: "bg-warning text-warning-foreground hover:bg-warning",
+      error: "bg-error text-error-foreground hover:bg-error"
     }
   }
 })
diff --git a/apps/docs/src/registry/ui/badge.tsx b/apps/docs/src/registry/ui/badge.tsx
index 2e4a518b..11d326ba 100644
--- a/apps/docs/src/registry/ui/badge.tsx
+++ b/apps/docs/src/registry/ui/badge.tsx
@@ -7,15 +7,15 @@ import { cva } from "class-variance-authority"
 import { cn } from "~/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
         secondary:
-          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
         destructive:
-          "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
         outline: "text-foreground"
       }
     },
diff --git a/apps/docs/src/registry/ui/button.tsx b/apps/docs/src/registry/ui/button.tsx
index e9234db4..ccb81cab 100644
--- a/apps/docs/src/registry/ui/button.tsx
+++ b/apps/docs/src/registry/ui/button.tsx
@@ -7,13 +7,13 @@ import { cva } from "class-variance-authority"
 import { cn } from "~/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+        outline: "border-input hover:bg-accent hover:text-accent-foreground border",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
diff --git a/apps/docs/src/registry/ui/sheet.tsx b/apps/docs/src/registry/ui/sheet.tsx
index 17c996b2..c88e3a67 100644
--- a/apps/docs/src/registry/ui/sheet.tsx
+++ b/apps/docs/src/registry/ui/sheet.tsx
@@ -52,14 +52,14 @@ const SheetOverlay: Component<SheetPrimitive.DialogOverlayProps> = (props) => {
 }
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg",
+  "bg-background fixed z-50 scale-100 gap-4 border p-6 opacity-100 shadow-lg",
   {
     variants: {
       position: {
-        top: "w-full animate-in slide-in-from-top duration-300",
-        bottom: "w-full animate-in slide-in-from-bottom duration-300",
-        left: "h-full animate-in slide-in-from-left duration-300",
-        right: "h-full animate-in slide-in-from-right duration-300"
+        top: "animate-in slide-in-from-top w-full duration-300",
+        bottom: "animate-in slide-in-from-bottom w-full duration-300",
+        left: "animate-in slide-in-from-left h-full duration-300",
+        right: "animate-in slide-in-from-right h-full duration-300"
       },
       size: {
         content: "",
diff --git a/apps/docs/src/registry/ui/toast.tsx b/apps/docs/src/registry/ui/toast.tsx
index 2a3c4fc1..cc751895 100644
--- a/apps/docs/src/registry/ui/toast.tsx
+++ b/apps/docs/src/registry/ui/toast.tsx
@@ -27,13 +27,13 @@ const Toaster: Component<ToastPrimitive.ToastListProps> = (props) => {
 }
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full data-[closed]:slide-out-to-right-full",
+  "data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-right-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=move]:transition-none",
   {
     variants: {
       variant: {
-        default: "bg-background border text-foreground",
+        default: "bg-background text-foreground border",
         destructive:
-          "group destructive border-destructive bg-destructive text-destructive-foreground"
+          "destructive border-destructive bg-destructive text-destructive-foreground group"
       }
     },
     defaultVariants: {
diff --git a/apps/docs/src/registry/ui/toggle.tsx b/apps/docs/src/registry/ui/toggle.tsx
index aafe0674..579221b0 100644
--- a/apps/docs/src/registry/ui/toggle.tsx
+++ b/apps/docs/src/registry/ui/toggle.tsx
@@ -8,12 +8,12 @@ import type { VariantProps } from "class-variance-authority"
 import { cn } from "~/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm"
+        outline: "border-input border bg-transparent shadow-sm"
       },
       size: {
         default: "h-9 px-3",
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.cjs
similarity index 100%
rename from apps/docs/tailwind.config.js
rename to apps/docs/tailwind.config.cjs