From f2f5641b3326d7eb68673196eb681db1c550a4f9 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sat, 9 Mar 2024 20:21:24 +0330
Subject: [PATCH] chore: docs stuff (#400)

---
 .../theme/components/CustomizerCode.vue       |  2 +-
 apps/www/.vitepress/theme/components/Logo.vue |  4 +-
 .../.vitepress/theme/components/MobileNav.vue | 31 +++++++-
 .../theme/components/theming/Theming.vue      |  4 +-
 .../.vitepress/theme/layout/MainLayout.vue    | 40 +++++------
 apps/www/.vitepress/theme/style.css           | 44 ++++++------
 apps/www/__registry__/index.ts                | 14 ++++
 .../src/content/docs/components/carousel.md   | 16 ++---
 .../forms/components/AppearanceForm.vue       |  2 +-
 .../examples/tasks/components/DataTable.vue   |  2 +-
 .../components/DataTableColumnHeader.vue      |  2 +-
 .../components/DataTableFacetedFilter.vue     |  2 +-
 .../tasks/components/DataTablePagination.vue  |  4 +-
 .../tasks/components/DataTableRowActions.vue  |  2 +-
 .../tasks/components/DataTableToolbar.vue     |  4 +-
 .../tasks/components/DataTableViewOptions.vue |  2 +-
 .../src/examples/tasks/components/columns.ts  | 15 ++--
 .../default/example/Cards/DataTable.vue       |  2 +-
 .../default/example/CarouselThumbnails.vue    | 72 +++++++++++++++++++
 .../example/DataTableColumnPinningDemo.vue    |  6 +-
 .../default/example/DataTableDemo.vue         |  2 +-
 .../default/example/PinInputFormDemo.vue      |  2 +-
 .../registry/default/example/SliderForm.vue   | 11 +--
 .../new-york/example/Cards/DataTable.vue      |  4 +-
 .../new-york/example/CarouselThumbnails.vue   | 72 +++++++++++++++++++
 .../example/DataTableColumnPinningDemo.vue    |  6 +-
 .../new-york/example/DataTableDemo.vue        |  2 +-
 .../registry/new-york/example/DrawerDemo.vue  |  4 +-
 .../new-york/example/DrawerDialog.vue         | 10 +--
 .../registry/new-york/example/SliderForm.vue  | 11 +--
 .../new-york/ui/calendar/Calendar.vue         |  4 +-
 .../registry/styles/new-york/calendar.json    |  4 +-
 apps/www/src/stores/config.ts                 |  3 +-
 33 files changed, 296 insertions(+), 109 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue

diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
index 2399fce2..27aa6608 100644
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -15,7 +15,7 @@ const { copy, copied } = useClipboard()
 
 const codeRef = ref<HTMLElement>()
 async function copyCode() {
-  await copy(codeRef.value?.innerText.replace(/\u00A0/g, " ") ?? '')
+  await copy(codeRef.value?.textContent?.replace(/\u00A0/g, ' ') ?? '')
 }
 </script>
 
diff --git a/apps/www/.vitepress/theme/components/Logo.vue b/apps/www/.vitepress/theme/components/Logo.vue
index 6434db52..3d0b8252 100644
--- a/apps/www/.vitepress/theme/components/Logo.vue
+++ b/apps/www/.vitepress/theme/components/Logo.vue
@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <a href="/" class="mr-6 flex items-center space-x-2">
+  <a href="/" class="mr-4 md:mr-2 xl:mr-6 flex items-center lg:space-x1 xl:space-x-2">
     <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_102_1338)">
         <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
@@ -15,7 +15,7 @@
       </defs>
     </svg>
 
-    <span class="font-bold ">
+    <span class="font-bold">
       shadcn-vue
     </span>
   </a>
diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index 7dbeddb2..8de06dd2 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -5,7 +5,6 @@ import Logo from './Logo.vue'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { Button } from '@/lib/registry/default/ui/button'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import ViewVerticalIcon from '~icons/radix-icons/view-vertical'
 
 const open = ref(false)
 </script>
@@ -17,7 +16,35 @@ const open = ref(false)
         variant="ghost"
         class="mr-2 px-2 text-base flex-shrink-0 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
       >
-        <ViewVerticalIcon class="h-5 w-5" />
+        <svg
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+        >
+          <path
+            d="M3 5H11"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M3 12H16"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M3 19H21"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
         <span class="sr-only">Toggle Menu</span>
       </Button>
     </SheetTrigger>
diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index 9d26080f..a3047b9a 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -14,15 +14,13 @@ import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
 import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
 import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
 import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
-import CardStats from '@/lib/registry/default/example/CardStats.vue'
+import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
 
 import {
   Card,
 } from '@/lib/registry/new-york/ui/card'
 import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 
-const goal = ref(350)
-
 const range = ref({
   start: startOfToday(),
   end: addDays(startOfToday(), 8),
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index acfb1f43..ca2c4f07 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -87,11 +87,9 @@ watch(() => $route.path, (n) => {
   <div vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
     <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
       <div
-        class="container flex justify-between h-14 max-w-screen-2xl items-center"
+        class="container flex h-14 max-w-screen-2xl items-center"
       >
-        <MobileNav />
-
-        <div class="mr-4 hidden md:flex">
+        <div class="mr-4 md:mr-1 hidden md:flex">
           <Logo />
 
           <nav
@@ -105,29 +103,31 @@ watch(() => $route.path, (n) => {
               class="transition-colors hover:text-foreground/80 text-foreground/60"
               :class="{
                 'font-semibold !text-foreground': $route.path === `${route.href}.html`,
+                'hidden lg:block': route?.href?.includes('github'),
               }"
             >
               {{ route.title }}
             </a>
           </nav>
         </div>
+        <MobileNav />
 
-        <div class=" flex items-center justify-end space-x-4 ">
-          <Button
-            variant="outline"
-            class="w-72 h-8 px-3 hidden lg:flex lg:justify-between lg:items-center"
-            @click="isOpen = true"
-          >
-            <div class="flex items-center">
-              <SearchIcon class="w-4 h-4 mr-2 text-muted-foreground" />
-              <span class="text-muted-foreground"> Search documentation... </span>
-            </div>
-            <div class="flex items-center gap-x-1">
-              <Kbd> <span>⌘</span>K </Kbd>
-            </div>
-          </Button>
+        <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+          <div class="w-full flex-1 md:w-auto md:flex-none">
+            <Button
+              variant="outline"
+              class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+              @click="isOpen = true"
+            >
+              <span className="hidden lg:inline-flex">Search documentation...</span>
+              <span className="inline-flex lg:hidden">Search...</span>
+              <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                <span className="text-xs">⌘</span>K
+              </kbd>
+            </Button>
+          </div>
 
-          <div class="flex items-center gap-x-1">
+          <nav class="flex items-center gap-x-1">
             <Button
               v-for="link in links"
               :key="link.name"
@@ -151,7 +151,7 @@ watch(() => $route.path, (n) => {
                 />
               </Button>
             </ClientOnly>
-          </div>
+          </nav>
         </div>
       </div>
     </header>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index ac502bb2..c8d4c4e6 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -7,26 +7,26 @@
 		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 			
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 5% 64.9%;
+		--radius: 0.5rem;
   }
 
   .dark {
@@ -61,7 +61,9 @@
 	}
 	body {
 		@apply bg-background text-foreground min-h-screen antialiased font-sans;
-		font-feature-settings: "rlig" 1, "calt" 1;
+		/* font-feature-settings: "rlig" 1, "calt" 1; */
+		font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
 	}
 
 	/* Mobile tap highlight */
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index a44f89e3..474837f4 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -227,6 +227,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselSpacing.vue"],
     },
+    "CarouselThumbnails": {
+      name: "CarouselThumbnails",
+      type: "components:example",
+      registryDependencies: ["carousel","card"],
+      component: () => import("../src/lib/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/CarouselThumbnails.vue"],
+    },
     "CheckboxDemo": {
       name: "CheckboxDemo",
       type: "components:example",
@@ -1257,6 +1264,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselSpacing.vue"],
     },
+    "CarouselThumbnails": {
+      name: "CarouselThumbnails",
+      type: "components:example",
+      registryDependencies: ["carousel","card"],
+      component: () => import("../src/lib/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/CarouselThumbnails.vue"],
+    },
     "CheckboxDemo": {
       name: "CheckboxDemo",
       type: "components:example",
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 7b741e6d..091b9bf7 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -1,24 +1,21 @@
 ---
 title: Carousel
 description: A carousel with motion and swipe built using Embla.
-source: apps/www/src/lib/registry/default/ui/carousel 
+source: apps/www/src/lib/registry/default/ui/carousel
 primitive: https://www.embla-carousel.com/api
 ---
 
-
-<ComponentPreview name="CarouselDemo"  /> 
-
+<ComponentPreview name="CarouselDemo"  />
 
 ## About
 
 The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
 
 ## Installation
- 
 
 ```bash
 npx shadcn-vue@latest add carousel
-``` 
+```
 
 ## Usage
 
@@ -54,7 +51,6 @@ To set the size of the items, you can use the `basis` utility class on the `<Car
 
 <ComponentPreview name="CarouselSize" />
 
-
 Example
 
 ```vue:line-numbers title="Example" {4-6}
@@ -68,7 +64,6 @@ Example
 </Carousel>
 ```
 
-
 Responsive
 
 ```vue:line-numbers title="Responsive" {4-6}
@@ -151,6 +146,10 @@ Use the `orientation` prop to set the orientation of the carousel.
 </Carousel>
 ```
 
+### Thumbnails
+
+<ComponentPreview name="CarouselThumbnails" />
+
 ## Options
 
 You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
@@ -259,7 +258,6 @@ You can use the `plugins` prop to add plugins to the carousel.
 npm i embla-carousel-autoplay
 ```
 
-
 ```vue:line-numbers {2,8-10}
 <script setup lang="ts">
 import Autoplay from 'embla-carousel-autoplay'
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index 9a37f15c..f1fafc2e 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -72,7 +72,7 @@ const onSubmit = handleSubmit((values) => {
               </option>
             </select>
           </FormControl>
-          <ChevronDownIcon class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+          <ChevronDownIcon class="pointer-events-none absolute right-3 top-2.5 h-4 w-4 opacity-50" />
         </div>
         <FormDescription>
           Set the font you want to use in the dashboard.
diff --git a/apps/www/src/examples/tasks/components/DataTable.vue b/apps/www/src/examples/tasks/components/DataTable.vue
index 1417bcfb..f47703f8 100644
--- a/apps/www/src/examples/tasks/components/DataTable.vue
+++ b/apps/www/src/examples/tasks/components/DataTable.vue
@@ -17,7 +17,7 @@ import {
 } from '@tanstack/vue-table'
 
 import { ref } from 'vue'
-import { type Task } from '../data/schema'
+import type { Task } from '../data/schema'
 import DataTablePagination from './DataTablePagination.vue'
 import DataTableToolbar from './DataTableToolbar.vue'
 import { valueUpdater } from '@/lib/utils'
diff --git a/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue b/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
index 14287797..da4f9735 100644
--- a/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
+++ b/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Column } from '@tanstack/vue-table'
-import { type Task } from '../data/schema'
+import type { Task } from '../data/schema'
 import ArrowDownIcon from '~icons/radix-icons/arrow-down'
 import ArrowUpIcon from '~icons/radix-icons/arrow-up'
 import CaretSortIcon from '~icons/radix-icons/caret-sort'
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index f39db733..63205fd6 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -109,7 +109,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
               >
                 <CheckIcon :class="cn('h-4 w-4')" />
               </div>
-              <option.icon v-if="option.icon" class="mr-2 h-4 w-4 text-muted-foreground" />
+              <component :is="option.icon" v-if="option.icon" class="mr-2 h-4 w-4 text-muted-foreground" />
               <span>{{ option.label }}</span>
               <span v-if="facets?.get(option.value)" class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
                 {{ facets.get(option.value) }}
diff --git a/apps/www/src/examples/tasks/components/DataTablePagination.vue b/apps/www/src/examples/tasks/components/DataTablePagination.vue
index 17f41af2..acd18544 100644
--- a/apps/www/src/examples/tasks/components/DataTablePagination.vue
+++ b/apps/www/src/examples/tasks/components/DataTablePagination.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type Table } from '@tanstack/vue-table'
-import { type Task } from '../data/schema'
+import type { Table } from '@tanstack/vue-table'
+import type { Task } from '../data/schema'
 import ChevronLeftIcon from '~icons/radix-icons/chevron-left'
 import ChevronRightIcon from '~icons/radix-icons/chevron-right'
 import DoubleArrowLeftIcon from '~icons/radix-icons/double-arrow-left'
diff --git a/apps/www/src/examples/tasks/components/DataTableRowActions.vue b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
index 039e87b6..d3a23541 100644
--- a/apps/www/src/examples/tasks/components/DataTableRowActions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
@@ -3,7 +3,7 @@ import type { Row } from '@tanstack/vue-table'
 import { computed } from 'vue'
 import { labels } from '../data/data'
 import { taskSchema } from '../data/schema'
-import { type Task } from '../data/schema'
+import type { Task } from '../data/schema'
 import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
 
 import { Button } from '@/lib/registry/new-york/ui/button'
diff --git a/apps/www/src/examples/tasks/components/DataTableToolbar.vue b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
index 8c9a8009..9887e815 100644
--- a/apps/www/src/examples/tasks/components/DataTableToolbar.vue
+++ b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type Table } from '@tanstack/vue-table'
+import type { Table } from '@tanstack/vue-table'
 import { computed } from 'vue'
-import { type Task } from '../data/schema'
+import type { Task } from '../data/schema'
 
 import { priorities, statuses } from '../data/data'
 import DataTableFacetedFilter from './DataTableFacetedFilter.vue'
diff --git a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
index 21b0f98d..84a42f26 100644
--- a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
 import { computed } from 'vue'
-import { type Task } from '../data/schema'
+import type { Task } from '../data/schema'
 import MixerHorizontalIcon from '~icons/radix-icons/mixer-horizontal'
 
 import { Button } from '@/lib/registry/new-york/ui/button'
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index 181f34b9..2e18e826 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -11,10 +11,13 @@ import { Badge } from '@/lib/registry/new-york/ui/badge'
 export const columns: ColumnDef<Task>[] = [
   {
     id: 'select',
-    header: ({ table }) => h(Checkbox,
-      { 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-0.5' }),
-    cell: ({ row }) => h(Checkbox,
-      { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
+    header: ({ table }) => h(Checkbox, {
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'ariaLabel': 'Select all',
+      'class': 'translate-y-0.5',
+    }),
+    cell: ({ row }) => h(Checkbox, { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
     enableSorting: false,
     enableHiding: false,
   },
@@ -33,7 +36,7 @@ export const columns: ColumnDef<Task>[] = [
       const label = labels.find(label => label.value === row.original.label)
 
       return h('div', { class: 'flex space-x-2' }, [
-        label && h(Badge, { variant: 'outline' }, label.label),
+        label ? h(Badge, { variant: 'outline' }, () => label.label) : null,
         h('span', { class: 'max-w-[500px] truncate font-medium' }, row.getValue('title')),
       ])
     },
@@ -72,7 +75,7 @@ export const columns: ColumnDef<Task>[] = [
 
       return h('div', { class: 'flex items-center' }, [
         priority.icon && h(priority.icon, { class: 'mr-2 h-4 w-4 text-muted-foreground' }),
-        h('span', priority.label),
+        h('span', {}, priority.label),
       ])
     },
     filterFn: (row, id, value) => {
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
index e208a04a..3ca63e61 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -81,7 +81,7 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected(),
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
diff --git a/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue b/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
new file mode 100644
index 00000000..cc99665b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+const emblaMainApi = ref<CarouselApi>()
+const emblaThumbnailApi = ref<CarouselApi>()
+const selectedIndex = ref(0)
+
+function onSelect() {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value)
+    return
+  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()
+  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
+}
+
+function onThumbClick(index: number) {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value)
+    return
+  emblaMainApi.value.scrollTo(index)
+}
+
+watchOnce(emblaMainApi, (emblaMainApi) => {
+  if (!emblaMainApi)
+    return
+
+  onSelect()
+  emblaMainApi.on('select', onSelect)
+  emblaMainApi.on('reInit', onSelect)
+})
+</script>
+
+<template>
+  <div class="w-full sm:w-auto">
+    <Carousel
+      class="relative w-full max-w-xs"
+      @init-api="(val) => emblaMainApi = val"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 10" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+
+    <Carousel
+      class="relative w-full max-w-xs"
+      @init-api="(val) => emblaThumbnailApi = val"
+    >
+      <CarouselContent class="flex gap-1 ml-0">
+        <CarouselItem v-for="(_, index) in 10" :key="index" class="pl-0 basis-1/4 cursor-pointer" @click="onThumbClick(index)">
+          <div class="p-1" :class="index === selectedIndex ? '' : 'opacity-50'">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
index ed827193..55f8fedb 100644
--- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
@@ -84,11 +84,11 @@ const columns = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected(),
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
-    cell: ({ row, column }) => {
+    cell: ({ row }) => {
       return h(Checkbox, {
         'checked': row.getIsSelected(),
         'onUpdate:checked': value => row.toggleSelected(!!value),
@@ -165,8 +165,6 @@ const table = useVueTable({
     },
   },
 })
-
-const getState = table.getState()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
index e6e8a194..4a128efa 100644
--- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
@@ -80,7 +80,7 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected(),
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
diff --git a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
index 0f909a95..a315f936 100644
--- a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
@@ -6,7 +6,7 @@ import * as z from 'zod'
 import {
   PinInput,
   PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
+} from '@/lib/registry/default/ui/pin-input'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
diff --git a/apps/www/src/lib/registry/default/example/SliderForm.vue b/apps/www/src/lib/registry/default/example/SliderForm.vue
index c026259d..d6d48304 100644
--- a/apps/www/src/lib/registry/default/example/SliderForm.vue
+++ b/apps/www/src/lib/registry/default/example/SliderForm.vue
@@ -24,6 +24,9 @@ const formSchema = toTypedSchema(z.object({
 
 const { handleSubmit } = useForm({
   validationSchema: formSchema,
+  initialValues: {
+    duration: [30],
+  },
 })
 
 const onSubmit = handleSubmit((values) => {
@@ -36,20 +39,20 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ componentField }" name="duration">
+    <FormField v-slot="{ componentField, value }" name="duration">
       <FormItem>
         <FormLabel>Duration</FormLabel>
         <FormControl>
           <Slider
             v-bind="componentField"
             :default-value="[30]"
-            :max="60"
-            :min="5"
+            :max="100"
+            :min="0"
             :step="5"
           />
           <FormDescription class="flex justify-between">
             <span>How many minutes are you available?</span>
-            <span>{{ componentField.modelValue?.[0] ?? "30" }} min</span>
+            <span>{{ value?.[0] }} min</span>
           </FormDescription>
         </FormControl>
         <FormMessage />
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
index 2ed40cc3..c51b0c47 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
@@ -81,7 +81,7 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected(),
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
@@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue b/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue
new file mode 100644
index 00000000..798a4585
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
+
+const emblaMainApi = ref<CarouselApi>()
+const emblaThumbnailApi = ref<CarouselApi>()
+const selectedIndex = ref(0)
+
+function onSelect() {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value)
+    return
+  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()
+  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
+}
+
+function onThumbClick(index: number) {
+  if (!emblaMainApi.value || !emblaThumbnailApi.value)
+    return
+  emblaMainApi.value.scrollTo(index)
+}
+
+watchOnce(emblaMainApi, (emblaMainApi) => {
+  if (!emblaMainApi)
+    return
+
+  onSelect()
+  emblaMainApi.on('select', onSelect)
+  emblaMainApi.on('reInit', onSelect)
+})
+</script>
+
+<template>
+  <div class="w-full sm:w-auto">
+    <Carousel
+      class="relative w-full max-w-xs"
+      @init-api="(val) => emblaMainApi = val"
+    >
+      <CarouselContent>
+        <CarouselItem v-for="(_, index) in 10" :key="index">
+          <div class="p-1">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+
+    <Carousel
+      class="relative w-full max-w-xs"
+      @init-api="(val) => emblaThumbnailApi = val"
+    >
+      <CarouselContent class="flex gap-1 ml-0">
+        <CarouselItem v-for="(_, index) in 10" :key="index" class="pl-0 basis-1/4 cursor-pointer" @click="onThumbClick(index)">
+          <div class="p-1" :class="index === selectedIndex ? '' : 'opacity-50'">
+            <Card>
+              <CardContent class="flex aspect-square items-center justify-center p-6">
+                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
index 3d5f7d8c..48eef18e 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -84,11 +84,11 @@ const columns = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected(),
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
-    cell: ({ row, column }) => {
+    cell: ({ row }) => {
       return h(Checkbox, {
         'checked': row.getIsSelected(),
         'onUpdate:checked': value => row.toggleSelected(!!value),
@@ -165,8 +165,6 @@ const table = useVueTable({
     },
   },
 })
-
-const getState = table.getState()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
index a83220ab..4f22cf18 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -80,7 +80,7 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected(),
+      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
index aec72f27..a92c3e04 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { Minus, Plus } from 'lucide-vue-next'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -12,7 +12,7 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
+} from '@/lib/registry/new-york/ui/drawer'
 
 const goal = ref(350)
 
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
index 488ca7f0..8f515b51 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/lib/registry/new-york/ui/dialog'
 import {
   Drawer,
   DrawerClose,
@@ -19,9 +19,9 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
-import { Label } from '@/lib/registry/default/ui/label'
-import { Input } from '@/lib/registry/default/ui/input'
+} from '@/lib/registry/new-york/ui/drawer'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Input } from '@/lib/registry/new-york/ui/input'
 
 // Reuse `form` section
 const [UseTemplate, GridForm] = createReusableTemplate()
diff --git a/apps/www/src/lib/registry/new-york/example/SliderForm.vue b/apps/www/src/lib/registry/new-york/example/SliderForm.vue
index 66567b91..fda83d3c 100644
--- a/apps/www/src/lib/registry/new-york/example/SliderForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SliderForm.vue
@@ -24,6 +24,9 @@ const formSchema = toTypedSchema(z.object({
 
 const { handleSubmit } = useForm({
   validationSchema: formSchema,
+  initialValues: {
+    duration: [30],
+  },
 })
 
 const onSubmit = handleSubmit((values) => {
@@ -36,20 +39,20 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ componentField }" name="duration">
+    <FormField v-slot="{ componentField, value }" name="duration">
       <FormItem>
         <FormLabel>Duration</FormLabel>
         <FormControl>
           <Slider
             v-bind="componentField"
             :default-value="[30]"
-            :max="60"
-            :min="5"
+            :max="100"
+            :min="0"
             :step="5"
           />
           <FormDescription class="flex justify-between">
             <span>How many minutes are you available?</span>
-            <span>{{ componentField.modelValue?.[0] ?? "30" }} min</span>
+            <span>{{ value?.[0] }} min</span>
           </FormDescription>
         </FormControl>
         <FormMessage />
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index bada5b22..deba4ac8 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -103,11 +103,11 @@ const vCalendarSlots = computed(() => {
       </template>
 
       <template #nav-prev-button>
-        <ChevronLeft />
+        <ChevronLeftIcon />
       </template>
 
       <template #nav-next-button>
-        <ChevronRight />
+        <ChevronRightIcon />
       </template>
     </DatePicker>
   </div>
diff --git a/apps/www/src/public/registry/styles/new-york/calendar.json b/apps/www/src/public/registry/styles/new-york/calendar.json
index 5b6b65d4..1ef57616 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeft />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRight />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\n/* Extracted from v-calendar */\ntype DatePickerModel = DatePickerDate | DatePickerRangeObject\ntype DateSource = Date | string | number\ntype DatePickerDate = DateSource | Partial<SimpleDateParts> | null\ninterface DatePickerRangeObject {\n  start: Exclude<DatePickerDate, null>\n  end: Exclude<DatePickerDate, null>\n}\ninterface SimpleDateParts {\n  year: number\n  month: number\n  day: number\n  hours: number\n  minutes: number\n  seconds: number\n  milliseconds: number\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | number | Date | DatePickerModel\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n\nconst $slots = useSlots()\nconst vCalendarSlots = computed(() => {\n  return Object.keys($slots)\n    .filter(name => isVCalendarSlot(name))\n    .reduce((obj: Record<string, any>, key: string) => {\n      obj[key] = $slots[key]\n      return obj\n    }, {})\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div v-if=\"$attrs.mode !== 'time'\" class=\"absolute flex justify-between w-full px-4 top-3 z-[1]\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRightIcon class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-model=\"modelValue\"\n      v-bind=\"$attrs\"\n      :model-modifiers=\"modelModifiers\"\n      class=\"calendar\"\n      trim-weeks\n      :transition=\"'none'\"\n      :columns=\"columns\"\n    >\n      <template v-for=\"(_, slot) of vCalendarSlots\" #[slot]=\"scope\">\n        <slot :name=\"slot\" v-bind=\"scope\" />\n      </template>\n\n      <template #nav-prev-button>\n        <ChevronLeftIcon />\n      </template>\n\n      <template #nav-next-button>\n        <ChevronRightIcon />\n      </template>\n    </DatePicker>\n  </div>\n</template>\n\n<style lang=\"css\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium relative z-20;\n}\n.vc-popover-content-wrapper .vc-popover-content {\n  @apply mt-3 rounded-md max-w-xs border bg-background;\n}\n.vc-popover-content-wrapper .vc-nav-header {\n  @apply flex justify-between items-center p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items {\n  @apply grid grid-cols-4 gap-2 p-2;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {\n  @apply rounded-md px-2 py-1;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {\n  @apply text-muted-foreground bg-muted;\n}\n.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {\n  @apply bg-primary text-primary-foreground;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply justify-items-center;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply first:rounded-l-md last:rounded-r-md;\n}\n.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {\n  @apply bg-secondary text-primary rounded-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-start) {\n  @apply rounded-l-md;\n}\n.calendar .vc-day:has(.vc-highlight-base-end) {\n  @apply rounded-r-md;\n}\n.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {\n  @apply rounded-md;\n}\n.calendar .vc-day-content  {\n  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n.calendar .vc-pane-container.in-transition {\n  @apply overflow-hidden;\n}\n.calendar .vc-pane-container {\n  @apply w-full relative;\n}\n:root {\n\t--vc-slide-translate: 22px;\n\t--vc-slide-duration: 0.15s;\n\t--vc-slide-timing: ease;\n}\n.calendar .vc-fade-enter-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-enter-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-enter-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-enter-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-enter-active,\n.calendar .vc-slide-down-leave-active,\n.calendar .vc-slide-fade-enter-active,\n.calendar .vc-slide-fade-leave-active {\n\ttransition:\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing);\n\ttransition:\n\t\ttransform var(--vc-slide-duration) var(--vc-slide-timing),\n\t\topacity var(--vc-slide-duration) var(--vc-slide-timing),\n\t\t-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\tpointer-events: none;\n}\n.calendar .vc-none-leave-active,\n.calendar .vc-fade-leave-active,\n.calendar .vc-slide-left-leave-active,\n.calendar .vc-slide-right-leave-active,\n.calendar .vc-slide-up-leave-active,\n.calendar .vc-slide-down-leave-active {\n\tposition: absolute !important;\n\twidth: 100%;\n}\n.calendar .vc-none-enter-from,\n.calendar .vc-none-leave-to,\n.calendar .vc-fade-enter-from,\n.calendar .vc-fade-leave-to,\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from,\n.calendar .vc-slide-fade-leave-to {\n\topacity: 0;\n}\n.calendar .vc-slide-left-enter-from,\n.calendar .vc-slide-right-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-left,\n.calendar .vc-slide-fade-leave-to.direction-left {\n\t-webkit-transform: translateX(var(--vc-slide-translate));\n\ttransform: translateX(var(--vc-slide-translate));\n}\n.calendar .vc-slide-right-enter-from,\n.calendar .vc-slide-left-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-right,\n.calendar .vc-slide-fade-leave-to.direction-right {\n\t-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateX(calc(-1 * var(--vc-slide-translate)));\n}\n.calendar .vc-slide-up-enter-from,\n.calendar .vc-slide-down-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-top,\n.calendar .vc-slide-fade-leave-to.direction-top {\n\t-webkit-transform: translateY(var(--vc-slide-translate));\n\ttransform: translateY(var(--vc-slide-translate));\n}\n.calendar .vc-slide-down-enter-from,\n.calendar .vc-slide-up-leave-to,\n.calendar .vc-slide-fade-enter-from.direction-bottom,\n.calendar .vc-slide-fade-leave-to.direction-bottom {\n\t-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));\n\ttransform: translateY(calc(-1 * var(--vc-slide-translate)));\n}\n/**\n * Timepicker styles\n */\n.vc-time-picker {\n  @apply flex flex-col items-center p-2;\n}\n.vc-time-picker.vc-invalid {\n  @apply pointer-events-none opacity-50;\n}\n.vc-time-picker.vc-attached {\n  @apply border-t border-solid border-secondary mt-2;\n}\n.vc-time-picker > * + * {\n  @apply mt-1;\n}\n.vc-time-header {\n  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;\n}\n.vc-time-select-group {\n  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;\n}\n.vc-time-select-group .vc-base-icon {\n  @apply mr-1 text-primary stroke-primary;\n}\n.vc-time-select-group select {\n  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;\n}\n.vc-time-weekday {\n  @apply text-muted-foreground tracking-wide;\n}\n.vc-time-month {\n  @apply text-primary ml-2;\n}\n.vc-time-day {\n  @apply text-primary ml-1;\n}\n.vc-time-year {\n  @apply text-muted-foreground ml-2;\n}\n.vc-time-colon {\n  @apply mb-0.5;\n}\n.vc-time-decimal {\n  @apply ml-0.5;\n}\n</style>\n"
     },
     {
       "name": "index.ts",
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index dc3cc118..b820cbc0 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -5,7 +5,7 @@ import { type Theme, themes } from './../lib/registry/themes'
 import { type Style, styles } from '@/lib/registry/styles'
 
 interface Config {
-  theme: Theme['name']
+  theme?: Theme['name']
   radius: number
   style: Style
 }
@@ -15,7 +15,6 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
 export function useConfigStore() {
   const { isDark } = useData()
   const config = useSessionStorage<Config>('config', {
-    theme: 'zinc',
     radius: 0.5,
     style: styles[0].name,
   })