From 28856e21498eae859782b0fc468534924797381f Mon Sep 17 00:00:00 2001
From: Ricardo Gonzalez <herrmonkey@gmail.com>
Date: Fri, 22 May 2026 22:56:56 -0500
Subject: [PATCH] Fix: style 'new-york' + CSS exacto del manual shadcn-vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- components.json: reka-nova → new-york
- style.css: reescrito según manual (orden @theme inline después de :root/.dark)
- color-destructive-foreground agregado a @theme inline
- Colores chart correctos (no grayscale), sidebar-border sólido, destructive tonos
- @layer base sin duplicados, font-sans vía CSS variable
- 130 componentes reinstalados con new-york variants
---
 components.json                               |   2 +-
 src/components/ui/avatar/Avatar.vue           |  14 +-
 src/components/ui/avatar/AvatarFallback.vue   |  16 +-
 src/components/ui/avatar/AvatarImage.vue      |   6 +-
 src/components/ui/avatar/index.ts             |  30 +---
 src/components/ui/badge/Badge.vue             |  21 ++-
 src/components/ui/badge/index.ts              |  24 +--
 src/components/ui/breadcrumb/Breadcrumb.vue   |   7 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |  13 +-
 .../ui/breadcrumb/BreadcrumbItem.vue          |   8 +-
 .../ui/breadcrumb/BreadcrumbLink.vue          |  12 +-
 .../ui/breadcrumb/BreadcrumbList.vue          |   8 +-
 .../ui/breadcrumb/BreadcrumbPage.vue          |   6 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |  11 +-
 src/components/ui/breadcrumb/index.ts         |  14 +-
 src/components/ui/button/Button.vue           |  20 +--
 src/components/ui/button/index.ts             |  43 ++---
 src/components/ui/card/Card.vue               |  21 +--
 src/components/ui/card/CardAction.vue         |   6 +-
 src/components/ui/card/CardContent.vue        |   8 +-
 src/components/ui/card/CardDescription.vue    |  10 +-
 src/components/ui/card/CardFooter.vue         |   8 +-
 src/components/ui/card/CardHeader.vue         |   8 +-
 src/components/ui/card/CardTitle.vue          |  12 +-
 src/components/ui/card/index.ts               |  14 +-
 src/components/ui/collapsible/Collapsible.vue |   4 +-
 .../ui/collapsible/CollapsibleContent.vue     |   4 +-
 .../ui/collapsible/CollapsibleTrigger.vue     |   4 +-
 src/components/ui/collapsible/index.ts        |   6 +-
 src/components/ui/dialog/Dialog.vue           |   4 +-
 src/components/ui/dialog/DialogClose.vue      |   4 +-
 src/components/ui/dialog/DialogContent.vue    |  34 ++--
 .../ui/dialog/DialogDescription.vue           |  16 +-
 src/components/ui/dialog/DialogFooter.vue     |  10 +-
 src/components/ui/dialog/DialogHeader.vue     |   8 +-
 src/components/ui/dialog/DialogOverlay.vue    |  16 +-
 .../ui/dialog/DialogScrollContent.vue         |  19 +--
 src/components/ui/dialog/DialogTitle.vue      |  16 +-
 src/components/ui/dialog/DialogTrigger.vue    |   4 +-
 src/components/ui/dialog/index.ts             |  20 +--
 .../ui/dropdown-menu/DropdownMenu.vue         |   4 +-
 .../DropdownMenuCheckboxItem.vue              |  28 ++--
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  17 +-
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |   4 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  20 +--
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  16 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |   4 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  26 ++-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  14 +-
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |   8 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |   4 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  16 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  23 ++-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |   4 +-
 src/components/ui/dropdown-menu/index.ts      |  30 ++--
 src/components/ui/input/Input.vue             |  16 +-
 src/components/ui/input/index.ts              |   2 +-
 src/components/ui/select/Select.vue           |   4 +-
 src/components/ui/select/SelectContent.vue    |  29 ++--
 src/components/ui/select/SelectGroup.vue      |  14 +-
 src/components/ui/select/SelectItem.vue       |  23 ++-
 src/components/ui/select/SelectItemText.vue   |   4 +-
 src/components/ui/select/SelectLabel.vue      |  12 +-
 .../ui/select/SelectScrollDownButton.vue      |  21 ++-
 .../ui/select/SelectScrollUpButton.vue        |  21 ++-
 src/components/ui/select/SelectSeparator.vue  |  16 +-
 src/components/ui/select/SelectTrigger.vue    |  23 ++-
 src/components/ui/select/SelectValue.vue      |   4 +-
 src/components/ui/select/index.ts             |  22 +--
 src/components/ui/separator/Separator.vue     |  18 +-
 src/components/ui/separator/index.ts          |   2 +-
 src/components/ui/sheet/Sheet.vue             |   4 +-
 src/components/ui/sheet/SheetClose.vue        |   4 +-
 src/components/ui/sheet/SheetContent.vue      |  49 +++---
 src/components/ui/sheet/SheetDescription.vue  |  14 +-
 src/components/ui/sheet/SheetFooter.vue       |   9 +-
 src/components/ui/sheet/SheetHeader.vue       |   8 +-
 src/components/ui/sheet/SheetOverlay.vue      |  16 +-
 src/components/ui/sheet/SheetTitle.vue        |  16 +-
 src/components/ui/sheet/SheetTrigger.vue      |   4 +-
 src/components/ui/sheet/index.ts              |  16 +-
 src/components/ui/sidebar/Sidebar.vue         |  20 +--
 src/components/ui/sidebar/SidebarContent.vue  |   8 +-
 src/components/ui/sidebar/SidebarFooter.vue   |   8 +-
 src/components/ui/sidebar/SidebarGroup.vue    |   8 +-
 .../ui/sidebar/SidebarGroupAction.vue         |  14 +-
 .../ui/sidebar/SidebarGroupContent.vue        |   8 +-
 .../ui/sidebar/SidebarGroupLabel.vue          |  13 +-
 src/components/ui/sidebar/SidebarHeader.vue   |   8 +-
 src/components/ui/sidebar/SidebarInput.vue    |  11 +-
 src/components/ui/sidebar/SidebarInset.vue    |   9 +-
 src/components/ui/sidebar/SidebarMenu.vue     |   8 +-
 .../ui/sidebar/SidebarMenuAction.vue          |  21 ++-
 .../ui/sidebar/SidebarMenuBadge.vue           |  13 +-
 .../ui/sidebar/SidebarMenuButton.vue          |  18 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |  26 +--
 src/components/ui/sidebar/SidebarMenuItem.vue |   6 +-
 .../ui/sidebar/SidebarMenuSkeleton.vue        |  10 +-
 src/components/ui/sidebar/SidebarMenuSub.vue  |  11 +-
 .../ui/sidebar/SidebarMenuSubButton.vue       |  24 +--
 .../ui/sidebar/SidebarMenuSubItem.vue         |   6 +-
 src/components/ui/sidebar/SidebarProvider.vue |  24 +--
 src/components/ui/sidebar/SidebarRail.vue     |  12 +-
 .../ui/sidebar/SidebarSeparator.vue           |   6 +-
 src/components/ui/sidebar/SidebarTrigger.vue  |  17 +-
 src/components/ui/sidebar/index.ts            |  79 ++++-----
 src/components/ui/sidebar/utils.ts            |  18 +-
 src/components/ui/skeleton/Skeleton.vue       |   8 +-
 src/components/ui/skeleton/index.ts           |   2 +-
 src/components/ui/switch/Switch.vue           |   9 +-
 src/components/ui/table/Table.vue             |   8 +-
 src/components/ui/table/TableBody.vue         |   6 +-
 src/components/ui/table/TableCaption.vue      |   6 +-
 src/components/ui/table/TableCell.vue         |  13 +-
 src/components/ui/table/TableEmpty.vue        |  14 +-
 src/components/ui/table/TableFooter.vue       |   6 +-
 src/components/ui/table/TableHead.vue         |   8 +-
 src/components/ui/table/TableHeader.vue       |   6 +-
 src/components/ui/table/TableRow.vue          |   8 +-
 src/components/ui/table/index.ts              |  18 +-
 src/components/ui/table/utils.ts              |   6 +-
 src/components/ui/tabs/Tabs.vue               |  17 +-
 src/components/ui/tabs/TabsContent.vue        |  16 +-
 src/components/ui/tabs/TabsList.vue           |  27 ++-
 src/components/ui/tabs/TabsTrigger.vue        |  19 +--
 src/components/ui/tabs/index.ts               |  28 +---
 src/components/ui/tooltip/Tooltip.vue         |   4 +-
 src/components/ui/tooltip/TooltipContent.vue  |  20 +--
 src/components/ui/tooltip/TooltipProvider.vue |   4 +-
 src/components/ui/tooltip/TooltipTrigger.vue  |   4 +-
 src/components/ui/tooltip/index.ts            |   8 +-
 src/style.css                                 | 156 +++++++++---------
 132 files changed, 941 insertions(+), 986 deletions(-)

diff --git a/components.json b/components.json
index 4f498ee..c9eefda 100644
--- a/components.json
+++ b/components.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "reka-nova",
+  "style": "new-york",
   "font": "geist-sans",
   "typescript": true,
   "tailwind": {
diff --git a/src/components/ui/avatar/Avatar.vue b/src/components/ui/avatar/Avatar.vue
index 863e5f8..bb7e669 100644
--- a/src/components/ui/avatar/Avatar.vue
+++ b/src/components/ui/avatar/Avatar.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { AvatarVariants } from '.'
-import { AvatarRoot } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { avatarVariants } from '.'
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-  size?: AvatarVariants['size']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <AvatarRoot
     data-slot="avatar"
-    :data-size="size ?? 'default'"
-    :class="cn(avatarVariants({ size }), props.class)"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
   >
     <slot />
   </AvatarRoot>
diff --git a/src/components/ui/avatar/AvatarFallback.vue b/src/components/ui/avatar/AvatarFallback.vue
index 96102b6..16b588a 100644
--- a/src/components/ui/avatar/AvatarFallback.vue
+++ b/src/components/ui/avatar/AvatarFallback.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { AvatarFallback } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <AvatarFallback
     data-slot="avatar-fallback"
     v-bind="delegatedProps"
-    :class="cn('bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs', props.class)"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
   >
     <slot />
   </AvatarFallback>
diff --git a/src/components/ui/avatar/AvatarImage.vue b/src/components/ui/avatar/AvatarImage.vue
index 7ec1991..24a8166 100644
--- a/src/components/ui/avatar/AvatarImage.vue
+++ b/src/components/ui/avatar/AvatarImage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'reka-ui'
-import { AvatarImage } from 'reka-ui'
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
 
 const props = defineProps<AvatarImageProps>()
 </script>
@@ -9,7 +9,7 @@ const props = defineProps<AvatarImageProps>()
   <AvatarImage
     data-slot="avatar-image"
     v-bind="props"
-    class="rounded-full aspect-square size-full object-cover"
+    class="aspect-square size-full"
   >
     <slot />
   </AvatarImage>
diff --git a/src/components/ui/avatar/index.ts b/src/components/ui/avatar/index.ts
index 44c100f..cf0e003 100644
--- a/src/components/ui/avatar/index.ts
+++ b/src/components/ui/avatar/index.ts
@@ -1,27 +1,3 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarBadge } from './AvatarBadge.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
-export { default as AvatarGroup } from './AvatarGroup.vue'
-export { default as AvatarGroupCount } from './AvatarGroupCount.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-
-export const avatarVariants = cva(
-  'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten',
-  {
-    variants: {
-      size: {
-        sm: '',
-        default: '',
-        lg: '',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-)
-
-export type AvatarVariants = VariantProps<typeof avatarVariants>
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"
diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
index b2a0e5d..d894dfe 100644
--- a/src/components/ui/badge/Badge.vue
+++ b/src/components/ui/badge/Badge.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import type { BadgeVariants } from '.'
-import { reactiveOmit } from '@vueuse/core'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { badgeVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
 
 const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
 }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <Primitive
     data-slot="badge"
-    :data-variant="variant"
     :class="cn(badgeVariants({ variant }), props.class)"
     v-bind="delegatedProps"
   >
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
index 4354656..bbc0dfa 100644
--- a/src/components/ui/badge/index.ts
+++ b/src/components/ui/badge/index.ts
@@ -1,23 +1,25 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
-export { default as Badge } from './Badge.vue'
+export { default as Badge } from "./Badge.vue"
 
 export const badgeVariants = cva(
-  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-        destructive: 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
-        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
 )
diff --git a/src/components/ui/breadcrumb/Breadcrumb.vue b/src/components/ui/breadcrumb/Breadcrumb.vue
index a034c1e..c5be5f0 100644
--- a/src/components/ui/breadcrumb/Breadcrumb.vue
+++ b/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +10,7 @@ const props = defineProps<{
   <nav
     aria-label="breadcrumb"
     data-slot="breadcrumb"
-    :class="cn('', props.class)"
+    :class="props.class"
   >
     <slot />
   </nav>
diff --git a/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
index 32b352d..9cc3a4f 100644
--- a/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-
-import { MoreHorizontalIcon } from '@lucide/vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "@lucide/vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -14,10 +13,10 @@ const props = defineProps<{
     data-slot="breadcrumb-ellipsis"
     role="presentation"
     aria-hidden="true"
-    :class="cn('size-5 [&>svg]:size-4 flex items-center justify-center', props.class)"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontalIcon />
+      <MoreHorizontal class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>
diff --git a/src/components/ui/breadcrumb/BreadcrumbItem.vue b/src/components/ui/breadcrumb/BreadcrumbItem.vue
index 25e8305..e3dce68 100644
--- a/src/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <li
     data-slot="breadcrumb-item"
-    :class="cn('gap-1 inline-flex items-center', props.class)"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
   >
     <slot />
   </li>
diff --git a/src/components/ui/breadcrumb/BreadcrumbLink.vue b/src/components/ui/breadcrumb/BreadcrumbLink.vue
index f399e12..5d96381 100644
--- a/src/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
-  as: 'a',
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
 })
 </script>
 
diff --git a/src/components/ui/breadcrumb/BreadcrumbList.vue b/src/components/ui/breadcrumb/BreadcrumbList.vue
index 008242f..fc62811 100644
--- a/src/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word', props.class)"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
   >
     <slot />
   </ol>
diff --git a/src/components/ui/breadcrumb/BreadcrumbPage.vue b/src/components/ui/breadcrumb/BreadcrumbPage.vue
index cc667bc..b429b20 100644
--- a/src/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
index 934aa16..ef16ef0 100644
--- a/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-
-import { ChevronRightIcon } from '@lucide/vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "@lucide/vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -17,7 +16,7 @@ const props = defineProps<{
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <ChevronRightIcon class="cn-rtl-flip" />
+      <ChevronRight />
     </slot>
   </li>
 </template>
diff --git a/src/components/ui/breadcrumb/index.ts b/src/components/ui/breadcrumb/index.ts
index 0590983..f4eafdc 100644
--- a/src/components/ui/breadcrumb/index.ts
+++ b/src/components/ui/breadcrumb/index.ts
@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from './Breadcrumb.vue'
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
-export { default as BreadcrumbList } from './BreadcrumbList.vue'
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
index 1b6a512..3763470 100644
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import type { ButtonVariants } from '.'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: "button",
 })
 </script>
 
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 676a977..26e2c55 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -1,34 +1,37 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
-export { default as Button } from './Button.vue'
+export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*=size-])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-        ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-        destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        'default': 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        'xs': 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3',
-        'sm': 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3.5',
-        'lg': 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        'icon': 'size-8',
-        'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=size-])]:size-3',
-        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-        'icon-lg': 'size-9',
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
 )
diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue
index 073e651..f5a0707 100644
--- a/src/components/ui/card/Card.vue
+++ b/src/components/ui/card/Card.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  size?: 'default' | 'sm'
-}>(), {
-  size: 'default',
-})
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
 </script>
 
 <template>
   <div
     data-slot="card"
-    :data-size="size"
-    :class="cn('ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col', props.class)"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/src/components/ui/card/CardAction.vue b/src/components/ui/card/CardAction.vue
index c2beb20..c91638b 100644
--- a/src/components/ui/card/CardAction.vue
+++ b/src/components/ui/card/CardAction.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/card/CardContent.vue b/src/components/ui/card/CardContent.vue
index 6270bc4..dfbc552 100644
--- a/src/components/ui/card/CardContent.vue
+++ b/src/components/ui/card/CardContent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
     data-slot="card-content"
-    :class="cn('px-4 group-data-[size=sm]/card:px-3', props.class)"
+    :class="cn('px-6', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/card/CardDescription.vue b/src/components/ui/card/CardDescription.vue
index 722b203..71c1b8d 100644
--- a/src/components/ui/card/CardDescription.vue
+++ b/src/components/ui/card/CardDescription.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
-  <div
+  <p
     data-slot="card-description"
     :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
-  </div>
+  </p>
 </template>
diff --git a/src/components/ui/card/CardFooter.vue b/src/components/ui/card/CardFooter.vue
index ca3936b..9e3739e 100644
--- a/src/components/ui/card/CardFooter.vue
+++ b/src/components/ui/card/CardFooter.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
     data-slot="card-footer"
-    :class="cn('bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center', props.class)"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/card/CardHeader.vue b/src/components/ui/card/CardHeader.vue
index 27d56f7..4fe4da4 100644
--- a/src/components/ui/card/CardHeader.vue
+++ b/src/components/ui/card/CardHeader.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
     data-slot="card-header"
-    :class="cn('gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]', props.class)"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue
index 1f53990..5f479e7 100644
--- a/src/components/ui/card/CardTitle.vue
+++ b/src/components/ui/card/CardTitle.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
-  <div
+  <h3
     data-slot="card-title"
-    :class="cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm cn-font-heading', props.class)"
+    :class="cn('leading-none font-semibold', props.class)"
   >
     <slot />
-  </div>
+  </h3>
 </template>
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
index 73d985f..1627758 100644
--- a/src/components/ui/card/index.ts
+++ b/src/components/ui/card/index.ts
@@ -1,7 +1,7 @@
-export { default as Card } from './Card.vue'
-export { default as CardAction } from './CardAction.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
+export { default as Card } from "./Card.vue"
+export { default as CardAction } from "./CardAction.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
diff --git a/src/components/ui/collapsible/Collapsible.vue b/src/components/ui/collapsible/Collapsible.vue
index fc726df..70a9497 100644
--- a/src/components/ui/collapsible/Collapsible.vue
+++ b/src/components/ui/collapsible/Collapsible.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
-import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
diff --git a/src/components/ui/collapsible/CollapsibleContent.vue b/src/components/ui/collapsible/CollapsibleContent.vue
index 918f8b5..8be0a11 100644
--- a/src/components/ui/collapsible/CollapsibleContent.vue
+++ b/src/components/ui/collapsible/CollapsibleContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleContentProps } from 'reka-ui'
-import { CollapsibleContent } from 'reka-ui'
+import type { CollapsibleContentProps } from "reka-ui"
+import { CollapsibleContent } from "reka-ui"
 
 const props = defineProps<CollapsibleContentProps>()
 </script>
diff --git a/src/components/ui/collapsible/CollapsibleTrigger.vue b/src/components/ui/collapsible/CollapsibleTrigger.vue
index ca6b60c..33bec78 100644
--- a/src/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/src/components/ui/collapsible/CollapsibleTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleTriggerProps } from 'reka-ui'
-import { CollapsibleTrigger } from 'reka-ui'
+import type { CollapsibleTriggerProps } from "reka-ui"
+import { CollapsibleTrigger } from "reka-ui"
 
 const props = defineProps<CollapsibleTriggerProps>()
 </script>
diff --git a/src/components/ui/collapsible/index.ts b/src/components/ui/collapsible/index.ts
index abab956..86a031d 100644
--- a/src/components/ui/collapsible/index.ts
+++ b/src/components/ui/collapsible/index.ts
@@ -1,3 +1,3 @@
-export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleContent } from './CollapsibleContent.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
+export { default as Collapsible } from "./Collapsible.vue"
+export { default as CollapsibleContent } from "./CollapsibleContent.vue"
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
diff --git a/src/components/ui/dialog/Dialog.vue b/src/components/ui/dialog/Dialog.vue
index 315b5ca..ade5260 100644
--- a/src/components/ui/dialog/Dialog.vue
+++ b/src/components/ui/dialog/Dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/src/components/ui/dialog/DialogClose.vue b/src/components/ui/dialog/DialogClose.vue
index b1e1167..c5fae04 100644
--- a/src/components/ui/dialog/DialogClose.vue
+++ b/src/components/ui/dialog/DialogClose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'reka-ui'
-import { DialogClose } from 'reka-ui'
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index 7f40f63..05172f0 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -1,29 +1,27 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { XIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DialogClose,
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import DialogOverlay from './DialogOverlay.vue'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes['class'], showCloseButton?: boolean }>(), {
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
   showCloseButton: true,
 })
 const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -34,19 +32,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DialogContent
       data-slot="dialog-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
+      :class="
+        cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
     >
       <slot />
 
       <DialogClose
         v-if="showCloseButton"
         data-slot="dialog-close"
-        as-child
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
-        <Button variant="ghost" class="absolute top-2 right-2" size="icon-sm">
-          <XIcon />
-          <span class="sr-only">Close</span>
-        </Button>
+        <X />
+        <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/src/components/ui/dialog/DialogDescription.vue b/src/components/ui/dialog/DialogDescription.vue
index ecec5f1..f52e655 100644
--- a/src/components/ui/dialog/DialogDescription.vue
+++ b/src/components/ui/dialog/DialogDescription.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogDescription, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogDescription
     data-slot="dialog-description"
     v-bind="forwardedProps"
-    :class="cn('text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3', props.class)"
+    :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/src/components/ui/dialog/DialogFooter.vue b/src/components/ui/dialog/DialogFooter.vue
index c3a93a0..c7500a9 100644
--- a/src/components/ui/dialog/DialogFooter.vue
+++ b/src/components/ui/dialog/DialogFooter.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { DialogClose } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { DialogClose } from "reka-ui"
+import { cn } from "@/lib/utils"
 import { Button } from '@/components/ui/button'
 
 const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
   showCloseButton?: boolean
 }>(), {
   showCloseButton: false,
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<{
 <template>
   <div
     data-slot="dialog-footer"
-    :class="cn('bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
   >
     <slot />
     <DialogClose v-if="showCloseButton" as-child>
diff --git a/src/components/ui/dialog/DialogHeader.vue b/src/components/ui/dialog/DialogHeader.vue
index 6d79af0..bfc3c64 100644
--- a/src/components/ui/dialog/DialogHeader.vue
+++ b/src/components/ui/dialog/DialogHeader.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
     data-slot="dialog-header"
-    :class="cn('gap-2 flex flex-col', props.class)"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/dialog/DialogOverlay.vue b/src/components/ui/dialog/DialogOverlay.vue
index a84a110..7790077 100644
--- a/src/components/ui/dialog/DialogOverlay.vue
+++ b/src/components/ui/dialog/DialogOverlay.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogOverlay } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <DialogOverlay
     data-slot="dialog-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
   >
     <slot />
   </DialogOverlay>
diff --git a/src/components/ui/dialog/DialogScrollContent.vue b/src/components/ui/dialog/DialogScrollContent.vue
index 2b13a64..abfb3a1 100644
--- a/src/components/ui/dialog/DialogScrollContent.vue
+++ b/src/components/ui/dialog/DialogScrollContent.vue
@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { XIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -51,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <DialogClose
           class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <XIcon class="w-4 h-4" />
+          <X class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/src/components/ui/dialog/DialogTitle.vue b/src/components/ui/dialog/DialogTitle.vue
index 1e78510..860f01a 100644
--- a/src/components/ui/dialog/DialogTitle.vue
+++ b/src/components/ui/dialog/DialogTitle.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogTitle, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogTitle
     data-slot="dialog-title"
     v-bind="forwardedProps"
-    :class="cn('text-base leading-none font-medium cn-font-heading', props.class)"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/src/components/ui/dialog/DialogTrigger.vue b/src/components/ui/dialog/DialogTrigger.vue
index 44ea981..49667e9 100644
--- a/src/components/ui/dialog/DialogTrigger.vue
+++ b/src/components/ui/dialog/DialogTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'reka-ui'
-import { DialogTrigger } from 'reka-ui'
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/src/components/ui/dialog/index.ts b/src/components/ui/dialog/index.ts
index baa7d61..6768b09 100644
--- a/src/components/ui/dialog/index.ts
+++ b/src/components/ui/dialog/index.ts
@@ -1,10 +1,10 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogOverlay } from './DialogOverlay.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/src/components/ui/dropdown-menu/DropdownMenu.vue b/src/components/ui/dropdown-menu/DropdownMenu.vue
index c08018b..e1c9ee3 100644
--- a/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
-import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
diff --git a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 921fc58..b73b18d 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { CheckIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -23,18 +22,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuCheckboxItem
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    :class=" cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
-    <span
-      class="absolute right-2 flex items-center justify-center pointer-events-none"
-      data-slot="dropdown-menu-checkbox-item-indicator"
-    >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <CheckIcon />
+          <Check class="size-4" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index be50a88..7c43014 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DropdownMenuContent,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
   {
-    align: 'start',
     sideOffset: 4,
   },
 )
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -32,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuContent
       data-slot="dropdown-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-translucent z-50 max-h-(--reka-dropdown-menu-content-available-height) w-(--reka-dropdown-menu-trigger-width) origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden', props.class)"
+      :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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
index ab71e1a..da634ec 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from 'reka-ui'
-import { DropdownMenuGroup } from 'reka-ui'
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index b608898..f56cae3 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DropdownMenuItem, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<DropdownMenuItemProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
   inset?: boolean
-  variant?: 'default' | 'destructive'
+  variant?: "default" | "destructive"
 }>(), {
-  variant: 'default',
+  variant: "default",
 })
 
-const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', props.class)"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </DropdownMenuItem>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
index 37d96f0..8bca83c 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
 
-const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const delegatedProps = reactiveOmit(props, "class", "inset")
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="dropdown-menu-label"
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
-    :class="cn('text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7', props.class)"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 8306812..fe82cad 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
 import {
   DropdownMenuRadioGroup,
   useForwardPropsEmits,
-} from 'reka-ui'
+} from "reka-ui"
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
diff --git a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 416e5ba..503fa0c 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { CheckIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Circle } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -25,17 +24,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
-    <span
-      class="absolute right-2 flex items-center justify-center pointer-events-none"
-      data-slot="dropdown-menu-radio-item-indicator"
-    >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
-          <CheckIcon />
+          <Circle class="size-2 fill-current" />
         </slot>
       </DropdownMenuItemIndicator>
     </span>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index e90bcc8..1b936c3 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DropdownMenuSeparator,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
index 7bfa823..60be75c 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <span
     data-slot="dropdown-menu-shortcut"
-    :class="cn('text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest', props.class)"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
   >
     <slot />
   </span>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/src/components/ui/dropdown-menu/DropdownMenuSub.vue
index ef54276..7472e77 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
 import {
   DropdownMenuSub,
   useForwardPropsEmits,
-} from 'reka-ui'
+} from "reka-ui"
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index d7837e2..d7c6b08 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DropdownMenuSubContent,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuSubContent
     data-slot="dropdown-menu-sub-content"
     v-bind="forwarded"
-    :class="cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 cn-menu-translucent z-50 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden', props.class)"
+    :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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 6005c31..79a6479 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,32 +1,31 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { ChevronRightIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DropdownMenuSubTrigger,
   useForwardProps,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
 
-const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const delegatedProps = reactiveOmit(props, "class", "inset")
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuSubTrigger
     data-slot="dropdown-menu-sub-trigger"
-    :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
+    :data-inset="inset ? '' : undefined"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
       props.class,
     )"
   >
     <slot />
-    <ChevronRightIcon class="cn-rtl-flip ml-auto" />
+    <ChevronRight class="ml-auto size-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index 39be3ff..75cd747 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from 'reka-ui'
-import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
+import type { DropdownMenuTriggerProps } from "reka-ui"
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
 
 const props = defineProps<DropdownMenuTriggerProps>()
 
diff --git a/src/components/ui/dropdown-menu/index.ts b/src/components/ui/dropdown-menu/index.ts
index f488d39..955fe3a 100644
--- a/src/components/ui/dropdown-menu/index.ts
+++ b/src/components/ui/dropdown-menu/index.ts
@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenu } from "./DropdownMenu.vue"
 
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { DropdownMenuPortal } from 'reka-ui'
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
+export { DropdownMenuPortal } from "reka-ui"
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
index 4ebb6ab..e5135c1 100644
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
+  (e: "update:modelValue", payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue,
 })
@@ -24,7 +24,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     data-slot="input"
     :class="cn(
-      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class,
     )"
   >
diff --git a/src/components/ui/input/index.ts b/src/components/ui/input/index.ts
index a691dd6..9976b86 100644
--- a/src/components/ui/input/index.ts
+++ b/src/components/ui/input/index.ts
@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from "./Input.vue"
diff --git a/src/components/ui/select/Select.vue b/src/components/ui/select/Select.vue
index 553bf67..c94bbe8 100644
--- a/src/components/ui/select/Select.vue
+++ b/src/components/ui/select/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
-import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+import type { SelectRootEmits, SelectRootProps } from "reka-ui"
+import { SelectRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue
index e740d54..adf04ec 100644
--- a/src/components/ui/select/SelectContent.vue
+++ b/src/components/ui/select/SelectContent.vue
@@ -1,30 +1,29 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   SelectContent,
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
   {
-    position: 'item-aligned',
-    align: 'center',
+    position: "popper",
   },
 )
 const emits = defineEmits<SelectContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -33,10 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       data-slot="select-content"
-      :data-align-trigger="position === 'item-aligned'"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
-        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+        '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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
@@ -44,12 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport
-        :data-position="position"
-        :class="cn(
-          'data-[position=popper]:h-[var(--reka-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--reka-select-trigger-width)]',
-        )"
-      >
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/src/components/ui/select/SelectGroup.vue b/src/components/ui/select/SelectGroup.vue
index 4ae4b88..e981c6c 100644
--- a/src/components/ui/select/SelectGroup.vue
+++ b/src/components/ui/select/SelectGroup.vue
@@ -1,20 +1,14 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { SelectGroup } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { SelectGroupProps } from "reka-ui"
+import { SelectGroup } from "reka-ui"
 
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
+const props = defineProps<SelectGroupProps>()
 </script>
 
 <template>
   <SelectGroup
     data-slot="select-group"
-    v-bind="delegatedProps"
-    :class="cn('scroll-my-1 p-1', props.class)"
+    v-bind="props"
   >
     <slot />
   </SelectGroup>
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
index a66bb40..a6a0dd3 100644
--- a/src/components/ui/select/SelectItem.vue
+++ b/src/components/ui/select/SelectItem.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { CheckIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   SelectItem,
   SelectItemIndicator,
   SelectItemText,
   useForwardProps,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -25,15 +24,15 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
         props.class,
       )
     "
   >
-    <span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
         <slot name="indicator-icon">
-          <CheckIcon class="pointer-events-none" />
+          <Check class="size-4" />
         </slot>
       </SelectItemIndicator>
     </span>
diff --git a/src/components/ui/select/SelectItemText.vue b/src/components/ui/select/SelectItemText.vue
index af85394..b6700b1 100644
--- a/src/components/ui/select/SelectItemText.vue
+++ b/src/components/ui/select/SelectItemText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectItemTextProps } from 'reka-ui'
-import { SelectItemText } from 'reka-ui'
+import type { SelectItemTextProps } from "reka-ui"
+import { SelectItemText } from "reka-ui"
 
 const props = defineProps<SelectItemTextProps>()
 </script>
diff --git a/src/components/ui/select/SelectLabel.vue b/src/components/ui/select/SelectLabel.vue
index 42ae995..5b6650c 100644
--- a/src/components/ui/select/SelectLabel.vue
+++ b/src/components/ui/select/SelectLabel.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { SelectLabel } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { SelectLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { SelectLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
   <SelectLabel
     data-slot="select-label"
-    :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
   >
     <slot />
   </SelectLabel>
diff --git a/src/components/ui/select/SelectScrollDownButton.vue b/src/components/ui/select/SelectScrollDownButton.vue
index 35a0fbe..62c9c9e 100644
--- a/src/components/ui/select/SelectScrollDownButton.vue
+++ b/src/components/ui/select/SelectScrollDownButton.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from 'reka-ui'
+import type { SelectScrollDownButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronDown } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectScrollDownButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-import type { HTMLAttributes } from 'vue'
-import { ChevronDownIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
-import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -18,10 +17,10 @@ const forwardedProps = useForwardProps(delegatedProps)
   <SelectScrollDownButton
     data-slot="select-scroll-down-button"
     v-bind="forwardedProps"
-    :class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronDownIcon />
+      <ChevronDown class="size-4" />
     </slot>
   </SelectScrollDownButton>
 </template>
diff --git a/src/components/ui/select/SelectScrollUpButton.vue b/src/components/ui/select/SelectScrollUpButton.vue
index c691874..b27afe8 100644
--- a/src/components/ui/select/SelectScrollUpButton.vue
+++ b/src/components/ui/select/SelectScrollUpButton.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from 'reka-ui'
+import type { SelectScrollUpButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronUp } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectScrollUpButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-import type { HTMLAttributes } from 'vue'
-import { ChevronUpIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
-import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -18,10 +17,10 @@ const forwardedProps = useForwardProps(delegatedProps)
   <SelectScrollUpButton
     data-slot="select-scroll-up-button"
     v-bind="forwardedProps"
-    :class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronUpIcon />
+      <ChevronUp class="size-4" />
     </slot>
   </SelectScrollUpButton>
 </template>
diff --git a/src/components/ui/select/SelectSeparator.vue b/src/components/ui/select/SelectSeparator.vue
index 17dadcf..4b5c885 100644
--- a/src/components/ui/select/SelectSeparator.vue
+++ b/src/components/ui/select/SelectSeparator.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { SelectSeparator } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { SelectSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectSeparator } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <SelectSeparator
     data-slot="select-separator"
     v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
   />
 </template>
diff --git a/src/components/ui/select/SelectTrigger.vue b/src/components/ui/select/SelectTrigger.vue
index f25c4f0..b6808cd 100644
--- a/src/components/ui/select/SelectTrigger.vue
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { ChevronDownIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
-import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { ChevronDown } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
-  { size: 'default' },
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
 )
 
-const delegatedProps = reactiveOmit(props, 'class', 'size')
+const delegatedProps = reactiveOmit(props, "class", "size")
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
@@ -22,13 +21,13 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-size="size"
     v-bind="forwardedProps"
     :class="cn(
-      'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+      <ChevronDown class="size-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/src/components/ui/select/SelectValue.vue b/src/components/ui/select/SelectValue.vue
index c18762e..d5ce58b 100644
--- a/src/components/ui/select/SelectValue.vue
+++ b/src/components/ui/select/SelectValue.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectValueProps } from 'reka-ui'
-import { SelectValue } from 'reka-ui'
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
 
 const props = defineProps<SelectValueProps>()
 </script>
diff --git a/src/components/ui/select/index.ts b/src/components/ui/select/index.ts
index 31b9294..96eae60 100644
--- a/src/components/ui/select/index.ts
+++ b/src/components/ui/select/index.ts
@@ -1,11 +1,11 @@
-export { default as Select } from './Select.vue'
-export { default as SelectContent } from './SelectContent.vue'
-export { default as SelectGroup } from './SelectGroup.vue'
-export { default as SelectItem } from './SelectItem.vue'
-export { default as SelectItemText } from './SelectItemText.vue'
-export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
-export { default as SelectValue } from './SelectValue.vue'
+export { default as Select } from "./Select.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectValue } from "./SelectValue.vue"
diff --git a/src/components/ui/separator/Separator.vue b/src/components/ui/separator/Separator.vue
index cac21cc..78d60ec 100644
--- a/src/components/ui/separator/Separator.vue
+++ b/src/components/ui/separator/Separator.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { SeparatorProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { Separator } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes['class'] }
+  SeparatorProps & { class?: HTMLAttributes["class"] }
 >(), {
-  orientation: 'horizontal',
+  orientation: "horizontal",
   decorative: true,
 })
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
@@ -21,7 +21,7 @@ const delegatedProps = reactiveOmit(props, 'class')
     v-bind="delegatedProps"
     :class="
       cn(
-        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         props.class,
       )
     "
diff --git a/src/components/ui/separator/index.ts b/src/components/ui/separator/index.ts
index 2287bcb..4407287 100644
--- a/src/components/ui/separator/index.ts
+++ b/src/components/ui/separator/index.ts
@@ -1 +1 @@
-export { default as Separator } from './Separator.vue'
+export { default as Separator } from "./Separator.vue"
diff --git a/src/components/ui/sheet/Sheet.vue b/src/components/ui/sheet/Sheet.vue
index 5f598fd..8522f84 100644
--- a/src/components/ui/sheet/Sheet.vue
+++ b/src/components/ui/sheet/Sheet.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/src/components/ui/sheet/SheetClose.vue b/src/components/ui/sheet/SheetClose.vue
index 892eeb0..39a942c 100644
--- a/src/components/ui/sheet/SheetClose.vue
+++ b/src/components/ui/sheet/SheetClose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'reka-ui'
-import { DialogClose } from 'reka-ui'
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 934eecb..77fd5d4 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
-
-import type { HTMLAttributes } from 'vue'
-import { XIcon } from '@lucide/vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
   DialogClose,
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import SheetOverlay from './SheetOverlay.vue'
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import SheetOverlay from "./SheetOverlay.vue"
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class']
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  showCloseButton?: boolean
+  class?: HTMLAttributes["class"]
+  side?: "top" | "right" | "bottom" | "left"
 }
 
 defineOptions({
@@ -25,12 +22,11 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: 'right',
-  showCloseButton: true,
+  side: "right",
 })
 const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class', 'side', 'showCloseButton')
+const delegatedProps = reactiveOmit(props, "class", "side")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -40,21 +36,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SheetOverlay />
     <DialogContent
       data-slot="sheet-content"
-      :data-side="side"
-      :class="cn('bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10', props.class)"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
       v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />
 
       <DialogClose
-        v-if="showCloseButton"
-        data-slot="sheet-close"
-        as-child
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
-        <Button variant="ghost" class="absolute top-3 right-3" size="icon-sm">
-          <XIcon />
-          <span class="sr-only">Close</span>
-        </Button>
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/src/components/ui/sheet/SheetDescription.vue b/src/components/ui/sheet/SheetDescription.vue
index ab0e80f..6c8ba0a 100644
--- a/src/components/ui/sheet/SheetDescription.vue
+++ b/src/components/ui/sheet/SheetDescription.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogDescription } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
diff --git a/src/components/ui/sheet/SheetFooter.vue b/src/components/ui/sheet/SheetFooter.vue
index 11cc25d..5fcf751 100644
--- a/src/components/ui/sheet/SheetFooter.vue
+++ b/src/components/ui/sheet/SheetFooter.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
   <div
     data-slot="sheet-footer"
-    :class="cn('gap-2 p-4 mt-auto flex flex-col', props.class)"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
+    "
   >
     <slot />
   </div>
diff --git a/src/components/ui/sheet/SheetHeader.vue b/src/components/ui/sheet/SheetHeader.vue
index 0aaaeb6..b6305ab 100644
--- a/src/components/ui/sheet/SheetHeader.vue
+++ b/src/components/ui/sheet/SheetHeader.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
   <div
     data-slot="sheet-header"
-    :class="cn('gap-0.5 p-4 flex flex-col', props.class)"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/sheet/SheetOverlay.vue b/src/components/ui/sheet/SheetOverlay.vue
index 3b243d6..220452a 100644
--- a/src/components/ui/sheet/SheetOverlay.vue
+++ b/src/components/ui/sheet/SheetOverlay.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogOverlay } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <DialogOverlay
     data-slot="sheet-overlay"
-    :class="cn('bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/src/components/ui/sheet/SheetTitle.vue b/src/components/ui/sheet/SheetTitle.vue
index 4c4da51..889ae54 100644
--- a/src/components/ui/sheet/SheetTitle.vue
+++ b/src/components/ui/sheet/SheetTitle.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogTitle } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <DialogTitle
     data-slot="sheet-title"
-    :class="cn('text-foreground text-base font-medium cn-font-heading', props.class)"
+    :class="cn('text-foreground font-semibold', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/src/components/ui/sheet/SheetTrigger.vue b/src/components/ui/sheet/SheetTrigger.vue
index bca1a5b..41b121d 100644
--- a/src/components/ui/sheet/SheetTrigger.vue
+++ b/src/components/ui/sheet/SheetTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'reka-ui'
-import { DialogTrigger } from 'reka-ui'
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts
index ee33431..7c70e5d 100644
--- a/src/components/ui/sheet/index.ts
+++ b/src/components/ui/sheet/index.ts
@@ -1,8 +1,8 @@
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
diff --git a/src/components/ui/sidebar/Sidebar.vue b/src/components/ui/sidebar/Sidebar.vue
index 63e2eef..b4699f8 100644
--- a/src/components/ui/sidebar/Sidebar.vue
+++ b/src/components/ui/sidebar/Sidebar.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { SidebarProps } from '.'
-import { cn } from '@/lib/utils'
+import type { SidebarProps } from "."
+import { cn } from "@/lib/utils"
 import { Sheet, SheetContent } from '@/components/ui/sheet'
 import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
 import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
 import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<SidebarProps>(), {
-  side: 'left',
-  variant: 'sidebar',
-  collapsible: 'offcanvas',
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
 })
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
@@ -62,9 +62,8 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
   >
     <!-- This is what handles the sidebar gap on desktop  -->
     <div
-      data-slot="sidebar-gap"
       :class="cn(
-        'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
         'group-data-[collapsible=offcanvas]:w-0',
         'group-data-[side=right]:rotate-180',
         variant === 'floating' || variant === 'inset'
@@ -73,8 +72,6 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
       )"
     />
     <div
-      data-slot="sidebar-container"
-      :data-side="side"
       :class="cn(
         'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
         side === 'left'
@@ -90,8 +87,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     >
       <div
         data-sidebar="sidebar"
-        data-slot="sidebar-inner"
-        class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+        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-sm"
       >
         <slot />
       </div>
diff --git a/src/components/ui/sidebar/SidebarContent.vue b/src/components/ui/sidebar/SidebarContent.vue
index 1850123..bb6d9f1 100644
--- a/src/components/ui/sidebar/SidebarContent.vue
+++ b/src/components/ui/sidebar/SidebarContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-content"
     data-sidebar="content"
-    :class="cn('no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/sidebar/SidebarFooter.vue b/src/components/ui/sidebar/SidebarFooter.vue
index 6d7d7fa..20dd72f 100644
--- a/src/components/ui/sidebar/SidebarFooter.vue
+++ b/src/components/ui/sidebar/SidebarFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-footer"
     data-sidebar="footer"
-    :class="cn('gap-2 p-2 flex flex-col', props.class)"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/sidebar/SidebarGroup.vue b/src/components/ui/sidebar/SidebarGroup.vue
index 312be81..fbb4887 100644
--- a/src/components/ui/sidebar/SidebarGroup.vue
+++ b/src/components/ui/sidebar/SidebarGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-group"
     data-sidebar="group"
-    :class="cn('p-2 relative flex w-full min-w-0 flex-col', props.class)"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/sidebar/SidebarGroupAction.vue b/src/components/ui/sidebar/SidebarGroupAction.vue
index ef035c4..f5fa5eb 100644
--- a/src/components/ui/sidebar/SidebarGroupAction.vue
+++ b/src/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -16,7 +16,9 @@ const props = defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
   >
diff --git a/src/components/ui/sidebar/SidebarGroupContent.vue b/src/components/ui/sidebar/SidebarGroupContent.vue
index 82e651b..06e1a92 100644
--- a/src/components/ui/sidebar/SidebarGroupContent.vue
+++ b/src/components/ui/sidebar/SidebarGroupContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-group-content"
     data-sidebar="group-content"
-    :class="cn('text-sm w-full', props.class)"
+    :class="cn('w-full text-sm', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/sidebar/SidebarGroupLabel.vue b/src/components/ui/sidebar/SidebarGroupLabel.vue
index ea823bc..f5da130 100644
--- a/src/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/src/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -16,7 +16,8 @@ const props = defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
+      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden 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',
       props.class)"
   >
     <slot />
diff --git a/src/components/ui/sidebar/SidebarHeader.vue b/src/components/ui/sidebar/SidebarHeader.vue
index 4c2317d..79cf883 100644
--- a/src/components/ui/sidebar/SidebarHeader.vue
+++ b/src/components/ui/sidebar/SidebarHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-header"
     data-sidebar="header"
-    :class="cn('gap-2 p-2 flex flex-col', props.class)"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
   >
     <slot />
   </div>
diff --git a/src/components/ui/sidebar/SidebarInput.vue b/src/components/ui/sidebar/SidebarInput.vue
index 9d50abb..3afc5da 100644
--- a/src/components/ui/sidebar/SidebarInput.vue
+++ b/src/components/ui/sidebar/SidebarInput.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 import { Input } from '@/components/ui/input'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -12,7 +12,10 @@ const props = defineProps<{
   <Input
     data-slot="sidebar-input"
     data-sidebar="input"
-    :class="cn('bg-background h-8 w-full shadow-none', props.class)"
+    :class="cn(
+      'bg-background h-8 w-full shadow-none',
+      props.class,
+    )"
   >
     <slot />
   </Input>
diff --git a/src/components/ui/sidebar/SidebarInset.vue b/src/components/ui/sidebar/SidebarInset.vue
index 4aec54c..f46b43a 100644
--- a/src/components/ui/sidebar/SidebarInset.vue
+++ b/src/components/ui/sidebar/SidebarInset.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,8 @@ const props = defineProps<{
   <main
     data-slot="sidebar-inset"
     :class="cn(
-      'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col',
+      'bg-background relative flex w-full flex-1 flex-col',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
       props.class,
     )"
   >
diff --git a/src/components/ui/sidebar/SidebarMenu.vue b/src/components/ui/sidebar/SidebarMenu.vue
index bec9f12..e1dd39e 100644
--- a/src/components/ui/sidebar/SidebarMenu.vue
+++ b/src/components/ui/sidebar/SidebarMenu.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -11,7 +11,7 @@ const props = defineProps<{
   <ul
     data-slot="sidebar-menu"
     data-sidebar="menu"
-    :class="cn('gap-0 flex w-full min-w-0 flex-col', props.class)"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
   >
     <slot />
   </ul>
diff --git a/src/components/ui/sidebar/SidebarMenuAction.vue b/src/components/ui/sidebar/SidebarMenuAction.vue
index 43ecb51..bdffdb7 100644
--- a/src/components/ui/sidebar/SidebarMenuAction.vue
+++ b/src/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   showOnHover?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>(), {
-  as: 'button',
+  as: "button",
 })
 </script>
 
@@ -17,9 +17,14 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     data-slot="sidebar-menu-action"
     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 top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after: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',
       showOnHover
-        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
+        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
       props.class,
     )"
     :as="as"
diff --git a/src/components/ui/sidebar/SidebarMenuBadge.vue b/src/components/ui/sidebar/SidebarMenuBadge.vue
index 98d9e67..4321618 100644
--- a/src/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/src/components/ui/sidebar/SidebarMenuBadge.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
@@ -12,7 +12,12 @@ const props = defineProps<{
     data-slot="sidebar-menu-badge"
     data-sidebar="menu-badge"
     :class="cn(
-      'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-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',
       props.class,
     )"
   >
diff --git a/src/components/ui/sidebar/SidebarMenuButton.vue b/src/components/ui/sidebar/SidebarMenuButton.vue
index e2ade09..502d395 100644
--- a/src/components/ui/sidebar/SidebarMenuButton.vue
+++ b/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Component } from 'vue'
-import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { reactiveOmit } from '@vueuse/core'
+import type { Component } from "vue"
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
+import { reactiveOmit } from "@vueuse/core"
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
+import { useSidebar } from "./utils"
 
 defineOptions({
   inheritAttrs: false,
@@ -13,14 +13,14 @@ defineOptions({
 const props = withDefaults(defineProps<SidebarMenuButtonProps & {
   tooltip?: string | Component
 }>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
+  as: "button",
+  variant: "default",
+  size: "default",
 })
 
 const { isMobile, state } = useSidebar()
 
-const delegatedProps = reactiveOmit(props, 'tooltip')
+const delegatedProps = reactiveOmit(props, "tooltip")
 </script>
 
 <template>
diff --git a/src/components/ui/sidebar/SidebarMenuButtonChild.vue b/src/components/ui/sidebar/SidebarMenuButtonChild.vue
index 444419e..4b4ca3b 100644
--- a/src/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/src/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import type { SidebarMenuButtonVariants } from '.'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { sidebarMenuButtonVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SidebarMenuButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sidebarMenuButtonVariants } from "."
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
+  variant?: SidebarMenuButtonVariants["variant"]
+  size?: SidebarMenuButtonVariants["size"]
   isActive?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
+  as: "button",
+  variant: "default",
+  size: "default",
 })
 </script>
 
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
     data-slot="sidebar-menu-button"
     data-sidebar="menu-button"
     :data-size="size"
-    :data-active="isActive || undefined"
+    :data-active="isActive"
     :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
     :as="as"
     :as-child="asChild"
diff --git a/src/components/ui/sidebar/SidebarMenuItem.vue b/src/components/ui/sidebar/SidebarMenuItem.vue
index b7b4d3f..e2fda5b 100644
--- a/src/components/ui/sidebar/SidebarMenuItem.vue
+++ b/src/components/ui/sidebar/SidebarMenuItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/sidebar/SidebarMenuSkeleton.vue b/src/components/ui/sidebar/SidebarMenuSkeleton.vue
index 193abcb..b33812c 100644
--- a/src/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/src/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { computed } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
 import { Skeleton } from '@/components/ui/skeleton'
 
 const props = defineProps<{
   showIcon?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const width = computed(() => {
@@ -18,7 +18,7 @@ const width = computed(() => {
   <div
     data-slot="sidebar-menu-skeleton"
     data-sidebar="menu-skeleton"
-    :class="cn('h-8 gap-2 rounded-md px-2 flex items-center', props.class)"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
   >
     <Skeleton
       v-if="showIcon"
diff --git a/src/components/ui/sidebar/SidebarMenuSub.vue b/src/components/ui/sidebar/SidebarMenuSub.vue
index e9a3024..81c2dab 100644
--- a/src/components/ui/sidebar/SidebarMenuSub.vue
+++ b/src/components/ui/sidebar/SidebarMenuSub.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <ul
     data-slot="sidebar-menu-sub"
-    data-sidebar="menu-sub"
+    data-sidebar="menu-badge"
     :class="cn(
-      'border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col',
+      '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',
       props.class,
     )"
   >
diff --git a/src/components/ui/sidebar/SidebarMenuSubButton.vue b/src/components/ui/sidebar/SidebarMenuSubButton.vue
index 4de1c6a..457cfb6 100644
--- a/src/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/src/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
+  size?: "sm" | "md"
   isActive?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>(), {
-  as: 'a',
-  size: 'md',
+  as: "a",
+  size: "md",
 })
 </script>
 
@@ -21,9 +21,13 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
     :data-size="size"
-    :data-active="isActive || undefined"
+    :data-active="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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+      '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-hidden 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',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
   >
diff --git a/src/components/ui/sidebar/SidebarMenuSubItem.vue b/src/components/ui/sidebar/SidebarMenuSubItem.vue
index f0c35bc..d4374f6 100644
--- a/src/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/src/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/sidebar/SidebarProvider.vue b/src/components/ui/sidebar/SidebarProvider.vue
index 339b451..04ed975 100644
--- a/src/components/ui/sidebar/SidebarProvider.vue
+++ b/src/components/ui/sidebar/SidebarProvider.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import type { HTMLAttributes, Ref } from 'vue'
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { cn } from '@/lib/utils'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+import type { HTMLAttributes, Ref } from "vue"
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
+import { TooltipProvider } from "reka-ui"
+import { computed, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
 
 const props = withDefaults(defineProps<{
   defaultOpen?: boolean
   open?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>(), {
   defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
   open: undefined,
 })
 
 const emits = defineEmits<{
-  'update:open': [open: boolean]
+  "update:open": [open: boolean]
 }>()
 
-const isMobile = useMediaQuery('(max-width: 768px)')
+const isMobile = useMediaQuery("(max-width: 768px)")
 const openMobile = ref(false)
 
-const open = useVModel(props, 'open', emits, {
+const open = useVModel(props, "open", emits, {
   defaultValue: props.defaultOpen ?? false,
   passive: (props.open === undefined) as false,
 }) as Ref<boolean>
@@ -43,7 +43,7 @@ function toggleSidebar() {
   return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
+useEventListener("keydown", (event: KeyboardEvent) => {
   if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
     event.preventDefault()
     toggleSidebar()
@@ -52,7 +52,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
 
 // 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 = computed(() => open.value ? 'expanded' : 'collapsed')
+const state = computed(() => open.value ? "expanded" : "collapsed")
 
 provideSidebarContext({
   state,
diff --git a/src/components/ui/sidebar/SidebarRail.vue b/src/components/ui/sidebar/SidebarRail.vue
index 59ef894..1045a55 100644
--- a/src/components/ui/sidebar/SidebarRail.vue
+++ b/src/components/ui/sidebar/SidebarRail.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { useSidebar } from './utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const { toggleSidebar } = useSidebar()
@@ -18,10 +18,10 @@ const { toggleSidebar } = useSidebar()
     :tabindex="-1"
     title="Toggle Sidebar"
     :class="cn(
-      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+      '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 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
       'in-data-[side=left]:cursor-w-resize in-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 hover:group-data-[collapsible=offcanvas]:bg-sidebar',
+      'hover:group-data-[collapsible=offcanvas]: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',
       props.class,
diff --git a/src/components/ui/sidebar/SidebarSeparator.vue b/src/components/ui/sidebar/SidebarSeparator.vue
index 1803bff..91170bc 100644
--- a/src/components/ui/sidebar/SidebarSeparator.vue
+++ b/src/components/ui/sidebar/SidebarSeparator.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 import { Separator } from '@/components/ui/separator'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/sidebar/SidebarTrigger.vue b/src/components/ui/sidebar/SidebarTrigger.vue
index 031d26b..001478a 100644
--- a/src/components/ui/sidebar/SidebarTrigger.vue
+++ b/src/components/ui/sidebar/SidebarTrigger.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { PanelLeftIcon } from '@lucide/vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { PanelLeft } from "@lucide/vue"
+import { cn } from "@/lib/utils"
 import { Button } from '@/components/ui/button'
-import { useSidebar } from './utils'
+import { useSidebar } from "./utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const { toggleSidebar } = useSidebar()
@@ -18,11 +17,11 @@ const { toggleSidebar } = useSidebar()
     data-sidebar="trigger"
     data-slot="sidebar-trigger"
     variant="ghost"
-    size="icon-sm"
-    :class="cn('', props.class)"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
-    <PanelLeftIcon class="cn-rtl-flip" />
+    <PanelLeft />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>
diff --git a/src/components/ui/sidebar/index.ts b/src/components/ui/sidebar/index.ts
index a32846f..c865573 100644
--- a/src/components/ui/sidebar/index.ts
+++ b/src/components/ui/sidebar/index.ts
@@ -1,57 +1,58 @@
-import type { VariantProps } from 'class-variance-authority'
-import type { HTMLAttributes } from 'vue'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"
+import type { HTMLAttributes } from "vue"
+import { cva } from "class-variance-authority"
 
 export interface SidebarProps {
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-  class?: HTMLAttributes['class']
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+  class?: HTMLAttributes["class"]
 }
 
-export { default as Sidebar } from './Sidebar.vue'
-export { default as SidebarContent } from './SidebarContent.vue'
-export { default as SidebarFooter } from './SidebarFooter.vue'
-export { default as SidebarGroup } from './SidebarGroup.vue'
-export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
-export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
-export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
-export { default as SidebarHeader } from './SidebarHeader.vue'
-export { default as SidebarInput } from './SidebarInput.vue'
-export { default as SidebarInset } from './SidebarInset.vue'
-export { default as SidebarMenu } from './SidebarMenu.vue'
-export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
-export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
-export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
-export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
-export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
-export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
-export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
-export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
-export { default as SidebarProvider } from './SidebarProvider.vue'
-export { default as SidebarRail } from './SidebarRail.vue'
-export { default as SidebarSeparator } from './SidebarSeparator.vue'
-export { default as SidebarTrigger } from './SidebarTrigger.vue'
+export { default as Sidebar } from "./Sidebar.vue"
+export { default as SidebarContent } from "./SidebarContent.vue"
+export { default as SidebarFooter } from "./SidebarFooter.vue"
+export { default as SidebarGroup } from "./SidebarGroup.vue"
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
+export { default as SidebarHeader } from "./SidebarHeader.vue"
+export { default as SidebarInput } from "./SidebarInput.vue"
+export { default as SidebarInset } from "./SidebarInset.vue"
+export { default as SidebarMenu } from "./SidebarMenu.vue"
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
+export { default as SidebarProvider } from "./SidebarProvider.vue"
+export { default as SidebarRail } from "./SidebarRail.vue"
+export { default as SidebarSeparator } from "./SidebarSeparator.vue"
+export { default as SidebarTrigger } from "./SidebarTrigger.vue"
 
-export { useSidebar } from './utils'
+export { useSidebar } from "./utils"
 
 export const sidebarMenuButtonVariants = cva(
-  'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden 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 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_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!',
+        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',
+      variant: "default",
+      size: "default",
     },
   },
 )
diff --git a/src/components/ui/sidebar/utils.ts b/src/components/ui/sidebar/utils.ts
index 6edb140..6e57eeb 100644
--- a/src/components/ui/sidebar/utils.ts
+++ b/src/components/ui/sidebar/utils.ts
@@ -1,19 +1,19 @@
-import type { ComputedRef, Ref } from 'vue'
-import { createContext } from 'reka-ui'
+import type { ComputedRef, Ref } from "vue"
+import { createContext } from "reka-ui"
 
-export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_NAME = "sidebar_state"
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
-export const SIDEBAR_WIDTH_MOBILE = '18rem'
-export const SIDEBAR_WIDTH_ICON = '3rem'
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<'expanded' | 'collapsed'>
+  state: ComputedRef<"expanded" | "collapsed">
   open: Ref<boolean>
   setOpen: (value: boolean) => void
   isMobile: Ref<boolean>
   openMobile: Ref<boolean>
   setOpenMobile: (value: boolean) => void
   toggleSidebar: () => void
-}>('Sidebar')
+}>("Sidebar")
diff --git a/src/components/ui/skeleton/Skeleton.vue b/src/components/ui/skeleton/Skeleton.vue
index 26c7c45..0dadcef 100644
--- a/src/components/ui/skeleton/Skeleton.vue
+++ b/src/components/ui/skeleton/Skeleton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 interface SkeletonProps {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }
 
 const props = defineProps<SkeletonProps>()
@@ -12,6 +12,6 @@ const props = defineProps<SkeletonProps>()
 <template>
   <div
     data-slot="skeleton"
-    :class="cn('bg-muted rounded-md animate-pulse', props.class)"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
   />
 </template>
diff --git a/src/components/ui/skeleton/index.ts b/src/components/ui/skeleton/index.ts
index be21fad..e5ce72c 100644
--- a/src/components/ui/skeleton/index.ts
+++ b/src/components/ui/skeleton/index.ts
@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue'
+export { default as Skeleton } from "./Skeleton.vue"
diff --git a/src/components/ui/switch/Switch.vue b/src/components/ui/switch/Switch.vue
index 3b0eaea..2e725ed 100644
--- a/src/components/ui/switch/Switch.vue
+++ b/src/components/ui/switch/Switch.vue
@@ -20,16 +20,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
     v-bind="forwarded"
     :class="cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
       props.class,
     )"
   >
     <SwitchThumb
-      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+      data-slot="switch-thumb"
+      :class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
     >
-      <slot name="thumb" />
+      <slot name="thumb" v-bind="slotProps" />
     </SwitchThumb>
   </SwitchRoot>
 </template>
diff --git a/src/components/ui/table/Table.vue b/src/components/ui/table/Table.vue
index 6269dc1..0d0cd9b 100644
--- a/src/components/ui/table/Table.vue
+++ b/src/components/ui/table/Table.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
-  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <div data-slot="table-container" class="relative w-full overflow-auto">
     <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
diff --git a/src/components/ui/table/TableBody.vue b/src/components/ui/table/TableBody.vue
index af688cb..d14a2d3 100644
--- a/src/components/ui/table/TableBody.vue
+++ b/src/components/ui/table/TableBody.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/table/TableCaption.vue b/src/components/ui/table/TableCaption.vue
index e6ab397..3630084 100644
--- a/src/components/ui/table/TableCaption.vue
+++ b/src/components/ui/table/TableCaption.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/table/TableCell.vue b/src/components/ui/table/TableCell.vue
index 5cc93e2..d6e9ed2 100644
--- a/src/components/ui/table/TableCell.vue
+++ b/src/components/ui/table/TableCell.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <td
     data-slot="table-cell"
-    :class="cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', props.class)"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
   >
     <slot />
   </td>
diff --git a/src/components/ui/table/TableEmpty.vue b/src/components/ui/table/TableEmpty.vue
index 4ea2da7..9519328 100644
--- a/src/components/ui/table/TableEmpty.vue
+++ b/src/components/ui/table/TableEmpty.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { cn } from '@/lib/utils'
-import TableCell from './TableCell.vue'
-import TableRow from './TableRow.vue'
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
 
 const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
   colspan?: number
 }>(), {
   colspan: 1,
 })
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
diff --git a/src/components/ui/table/TableFooter.vue b/src/components/ui/table/TableFooter.vue
index 8055c55..29e0ce9 100644
--- a/src/components/ui/table/TableFooter.vue
+++ b/src/components/ui/table/TableFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/table/TableHead.vue b/src/components/ui/table/TableHead.vue
index 7ce19c5..f83efe5 100644
--- a/src/components/ui/table/TableHead.vue
+++ b/src/components/ui/table/TableHead.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <th
     data-slot="table-head"
-    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0', props.class)"
+    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
   >
     <slot />
   </th>
diff --git a/src/components/ui/table/TableHeader.vue b/src/components/ui/table/TableHeader.vue
index 0b0f481..b4ab5cf 100644
--- a/src/components/ui/table/TableHeader.vue
+++ b/src/components/ui/table/TableHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/src/components/ui/table/TableRow.vue b/src/components/ui/table/TableRow.vue
index afcbcdd..8f1d172 100644
--- a/src/components/ui/table/TableRow.vue
+++ b/src/components/ui/table/TableRow.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <tr
     data-slot="table-row"
-    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50', props.class)"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
   >
     <slot />
   </tr>
diff --git a/src/components/ui/table/index.ts b/src/components/ui/table/index.ts
index 2b4ce39..3be308b 100644
--- a/src/components/ui/table/index.ts
+++ b/src/components/ui/table/index.ts
@@ -1,9 +1,9 @@
-export { default as Table } from './Table.vue'
-export { default as TableBody } from './TableBody.vue'
-export { default as TableCaption } from './TableCaption.vue'
-export { default as TableCell } from './TableCell.vue'
-export { default as TableEmpty } from './TableEmpty.vue'
-export { default as TableFooter } from './TableFooter.vue'
-export { default as TableHead } from './TableHead.vue'
-export { default as TableHeader } from './TableHeader.vue'
-export { default as TableRow } from './TableRow.vue'
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/src/components/ui/table/utils.ts b/src/components/ui/table/utils.ts
index 6ef7b32..3d4fd12 100644
--- a/src/components/ui/table/utils.ts
+++ b/src/components/ui/table/utils.ts
@@ -1,7 +1,7 @@
-import type { Updater } from '@tanstack/vue-table'
+import type { Updater } from "@tanstack/vue-table"
 
-import type { Ref } from 'vue'
-import { isFunction } from '@tanstack/vue-table'
+import type { Ref } from "vue"
+import { isFunction } from "@tanstack/vue-table"
 
 export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
   ref.value = isFunction(updaterOrValue)
diff --git a/src/components/ui/tabs/Tabs.vue b/src/components/ui/tabs/Tabs.vue
index 7505f12..d260a15 100644
--- a/src/components/ui/tabs/Tabs.vue
+++ b/src/components/ui/tabs/Tabs.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<TabsRootEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
@@ -16,9 +16,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <TabsRoot
     v-slot="slotProps"
     data-slot="tabs"
-    :data-orientation="forwarded.orientation || 'horizontal'"
     v-bind="forwarded"
-    :class="cn('gap-2 group/tabs flex data-horizontal:flex-col', props.class)"
+    :class="cn('flex flex-col gap-2', props.class)"
   >
     <slot v-bind="slotProps" />
   </TabsRoot>
diff --git a/src/components/ui/tabs/TabsContent.vue b/src/components/ui/tabs/TabsContent.vue
index ca78a0f..3186ee8 100644
--- a/src/components/ui/tabs/TabsContent.vue
+++ b/src/components/ui/tabs/TabsContent.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { TabsContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { TabsContent } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <TabsContent
     data-slot="tabs-content"
-    :class="cn('text-sm flex-1 outline-none', props.class)"
+    :class="cn('flex-1 outline-none', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/src/components/ui/tabs/TabsList.vue b/src/components/ui/tabs/TabsList.vue
index a8b1b7c..a64a2da 100644
--- a/src/components/ui/tabs/TabsList.vue
+++ b/src/components/ui/tabs/TabsList.vue
@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import type { TabsListProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import type { TabsListVariants } from '.'
-import { reactiveOmit } from '@vueuse/core'
-import { TabsList } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { tabsListVariants } from '.'
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(defineProps<TabsListProps & {
-  class?: HTMLAttributes['class']
-  variant?: TabsListVariants['variant']
-}>(), {
-  variant: 'default',
-})
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class', 'variant')
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <TabsList
     data-slot="tabs-list"
-    :data-variant="variant"
     v-bind="delegatedProps"
-    :class="cn(tabsListVariants({ variant }), props.class)"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
   >
     <slot />
   </TabsList>
diff --git a/src/components/ui/tabs/TabsTrigger.vue b/src/components/ui/tabs/TabsTrigger.vue
index 3e13d0c..45e424f 100644
--- a/src/components/ui/tabs/TabsTrigger.vue
+++ b/src/components/ui/tabs/TabsTrigger.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { TabsTrigger, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
@@ -16,10 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*=size-])]:size-4 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0',
-      'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-      'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
-      'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
     v-bind="forwardedProps"
diff --git a/src/components/ui/tabs/index.ts b/src/components/ui/tabs/index.ts
index eb6f026..7f99b7f 100644
--- a/src/components/ui/tabs/index.ts
+++ b/src/components/ui/tabs/index.ts
@@ -1,24 +1,4 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-
-export { default as Tabs } from './Tabs.vue'
-export { default as TabsContent } from './TabsContent.vue'
-export { default as TabsList } from './TabsList.vue'
-export { default as TabsTrigger } from './TabsTrigger.vue'
-
-export const tabsListVariants = cva(
-  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted',
-        line: 'gap-1 bg-transparent',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-export type TabsListVariants = VariantProps<typeof tabsListVariants>
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
diff --git a/src/components/ui/tooltip/Tooltip.vue b/src/components/ui/tooltip/Tooltip.vue
index a531d43..2a393d6 100644
--- a/src/components/ui/tooltip/Tooltip.vue
+++ b/src/components/ui/tooltip/Tooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
-import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
diff --git a/src/components/ui/tooltip/TooltipContent.vue b/src/components/ui/tooltip/TooltipContent.vue
index c726149..c5d2df9 100644
--- a/src/components/ui/tooltip/TooltipContent.vue
+++ b/src/components/ui/tooltip/TooltipContent.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
-  sideOffset: 0,
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
 })
 
 const emits = defineEmits<TooltipContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class")
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
@@ -24,11 +24,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <TooltipContent
       data-slot="tooltip-content"
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--reka-tooltip-content-transform-origin)', props.class)"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
     >
       <slot />
 
-      <TooltipArrow class="size-2.5 rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
     </TooltipContent>
   </TooltipPortal>
 </template>
diff --git a/src/components/ui/tooltip/TooltipProvider.vue b/src/components/ui/tooltip/TooltipProvider.vue
index 8cc971f..395927d 100644
--- a/src/components/ui/tooltip/TooltipProvider.vue
+++ b/src/components/ui/tooltip/TooltipProvider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipProviderProps } from 'reka-ui'
-import { TooltipProvider } from 'reka-ui'
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
 
 const props = withDefaults(defineProps<TooltipProviderProps>(), {
   delayDuration: 0,
diff --git a/src/components/ui/tooltip/TooltipTrigger.vue b/src/components/ui/tooltip/TooltipTrigger.vue
index 59f16b6..3332950 100644
--- a/src/components/ui/tooltip/TooltipTrigger.vue
+++ b/src/components/ui/tooltip/TooltipTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipTriggerProps } from 'reka-ui'
-import { TooltipTrigger } from 'reka-ui'
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
 
 const props = defineProps<TooltipTriggerProps>()
 </script>
diff --git a/src/components/ui/tooltip/index.ts b/src/components/ui/tooltip/index.ts
index 5ab9653..8f8d514 100644
--- a/src/components/ui/tooltip/index.ts
+++ b/src/components/ui/tooltip/index.ts
@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue'
-export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipProvider } from './TooltipProvider.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"
diff --git a/src/style.css b/src/style.css
index 7f19b35..9fd9722 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,51 +5,11 @@
 
 @import "tw-animate-css";
 
-@import "shadcn-vue/tailwind.css";
-
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-  --font-sans: 'Geist Variable', sans-serif;
-  --font-heading: var(--font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
 :root {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+
   --radius: 0.625rem;
 
   --background: oklch(1 0 0);
@@ -74,17 +34,17 @@
   --accent-foreground: oklch(0.205 0 0);
 
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(1 0 0);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
 
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
 
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
 
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
@@ -99,49 +59,98 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+
+  --card: oklch(0.145 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+
+  --popover: oklch(0.145 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
+
+  --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.205 0 0);
+
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
+
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
+
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 
-* {
-  border-color: var(--border);
-  outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
+@theme inline {
+  --font-sans: var(--font-sans);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-heading: var(--font-sans);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 }
 
 @layer base {
@@ -150,6 +159,5 @@ body {
   }
   body {
     @apply bg-background text-foreground;
-    @apply font-sans;
   }
-}
\ No newline at end of file
+}